tui-image-editor-angular3 14.0.2

package/fesm2020/tui-image-editor-angular3.mjs

@@ -0,0 +1,3126 @@
+import * as i0 from '@angular/core';
+import { Injectable, Inject, EventEmitter, Component, Output, Input, ViewChild, NgModule } from '@angular/core';
+import * as i2 from '@angular/common';
+import { DOCUMENT, CommonModule } from '@angular/common';
+import * as i1 from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { BehaviorSubject } from 'rxjs';
+import heic2any from 'heic2any';
+import ImageEditor from 'tui-image-editor';
+import * as i3 from '@ng-bootstrap/ng-bootstrap';
+import { NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap';
+import * as i1$1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i2$1 from 'ngx-color-picker';
+import { ColorPickerModule } from 'ngx-color-picker';
+import ImageTracer from 'tui-image-editor/src/js/helper/imagetracer';
+
+const en = {
+    'tui-image-editor-angular-menus-buttons-crop-tooltip': 'Crop',
+    'tui-image-editor-angular-menus-buttons-delete': 'Delete',
+    'tui-image-editor-angular-menus-buttons-deleteAll': 'Delete all',
+    'tui-image-editor-angular-menus-buttons-download': 'Download',
+    'tui-image-editor-angular-menus-buttons-drag': 'Drag',
+    'tui-image-editor-angular-menus-buttons-draw': 'Draw',
+    'tui-image-editor-angular-menus-buttons-filter': 'Filter',
+    'tui-image-editor-angular-menus-buttons-flip': 'Flip',
+    'tui-image-editor-angular-menus-buttons-history': 'History',
+    'tui-image-editor-angular-menus-buttons-icon': 'Icon',
+    'tui-image-editor-angular-menus-buttons-load': 'Load image',
+    'tui-image-editor-angular-menus-buttons-mask': 'Mask',
+    'tui-image-editor-angular-menus-buttons-redo': 'Redo',
+    'tui-image-editor-angular-menus-buttons-reset': 'Reset',
+    'tui-image-editor-angular-menus-buttons-rotate': 'Rotate',
+    'tui-image-editor-angular-menus-buttons-shape': 'Shape',
+    'tui-image-editor-angular-menus-buttons-text': 'Text',
+    'tui-image-editor-angular-menus-buttons-undo': 'Undo',
+    'tui-image-editor-angular-menus-buttons-zoomIn': 'ZoomIn',
+    'tui-image-editor-angular-menus-buttons-zoomOut': 'ZoomOut',
+    'tui-image-editor-angular-submenus-crop-custom': 'Custom',
+    'tui-image-editor-angular-submenus-crop-square': 'Square',
+    'tui-image-editor-angular-submenus-crop-apply': 'Apply',
+    'tui-image-editor-angular-submenus-crop-cancel': 'Cancel',
+    'tui-image-editor-angular-submenus-flip-x': 'Flip X',
+    'tui-image-editor-angular-submenus-flip-y': 'Flip Y',
+    'tui-image-editor-angular-submenus-flip-reset': 'Reset',
+    'tui-image-editor-angular-submenus-rotate-slider': 'Rotation',
+    'tui-image-editor-angular-submenus-draw-free': 'Free',
+    'tui-image-editor-angular-submenus-draw-straight': 'Straight',
+    'tui-image-editor-angular-submenus-draw-color': 'Color',
+    'tui-image-editor-angular-submenus-draw-strokeWidth': 'Stroke width',
+    'tui-image-editor-angular-submenus-shape-rectangle': 'Rectangle',
+    'tui-image-editor-angular-submenus-shape-circle': 'Circle',
+    'tui-image-editor-angular-submenus-shape-triangle': 'Triangle',
+    'tui-image-editor-angular-submenus-shape-fill': 'Fill',
+    'tui-image-editor-angular-submenus-shape-stroke': 'Stroke',
+    'tui-image-editor-angular-submenus-shape-strokeWidth': 'Stroke width',
+    'tui-image-editor-angular-submenus-icon-arrow1': 'Arrow-1',
+    'tui-image-editor-angular-submenus-icon-arrow2': 'Arrow-2',
+    'tui-image-editor-angular-submenus-icon-arrow3': 'Arrow-3',
+    'tui-image-editor-angular-submenus-icon-star1': 'Star-1',
+    'tui-image-editor-angular-submenus-icon-star2': 'Star-2',
+    'tui-image-editor-angular-submenus-icon-polygon': 'Polygon',
+    'tui-image-editor-angular-submenus-icon-location': 'Location',
+    'tui-image-editor-angular-submenus-icon-heart': 'Heart',
+    'tui-image-editor-angular-submenus-icon-bubble': 'Bubble',
+    'tui-image-editor-angular-submenus-icon-customIcon': 'Custom icon',
+    'tui-image-editor-angular-submenus-icon-color': 'Color',
+    'tui-image-editor-angular-submenus-text-bold': 'Bold',
+    'tui-image-editor-angular-submenus-text-italic': 'Italic',
+    'tui-image-editor-angular-submenus-text-underline': 'Underline',
+    'tui-image-editor-angular-submenus-text-left': 'Left',
+    'tui-image-editor-angular-submenus-text-center': 'Center',
+    'tui-image-editor-angular-submenus-text-right': 'Right',
+    'tui-image-editor-angular-submenus-text-color': 'Color',
+    'tui-image-editor-angular-submenus-text-textSize': 'Text size',
+    'tui-image-editor-angular-submenus-mask-loadMaskImage': 'Load mask image',
+    'tui-image-editor-angular-submenus-mask-apply': 'Apply',
+    'tui-image-editor-angular-submenus-filter-grayscale': 'Grayscale',
+    'tui-image-editor-angular-submenus-filter-invert': 'Invert',
+    'tui-image-editor-angular-submenus-filter-sepia': 'Sepia',
+    'tui-image-editor-angular-submenus-filter-sepia2': 'Sepia 2',
+    'tui-image-editor-angular-submenus-filter-blur': 'Blur',
+    'tui-image-editor-angular-submenus-filter-sharpen': 'Sharpen',
+    'tui-image-editor-angular-submenus-filter-emboss': 'Emboss',
+    'tui-image-editor-angular-submenus-filter-removeWhite': 'Remove white',
+    'tui-image-editor-angular-submenus-filter-removeWhite-distance': 'Distance',
+    'tui-image-editor-angular-submenus-filter-brightness': 'Brightness',
+    'tui-image-editor-angular-submenus-filter-noise': 'Noise',
+    'tui-image-editor-angular-submenus-filter-pixelate': 'Pixelate',
+    'tui-image-editor-angular-submenus-filter-colorFilter': 'Color filter',
+    'tui-image-editor-angular-submenus-filter-colorFilter-threshold': 'Threshold',
+    'tui-image-editor-angular-submenus-filter-tint': 'Tint',
+    'tui-image-editor-angular-submenus-filter-multiply': 'Multiply',
+    'tui-image-editor-angular-submenus-filter-blend': 'Blend',
+    'tui-image-editor-angular-history-noItems': 'No history available',
+    'tui-image-editor-angular-history-text-added': 'Added',
+    'tui-image-editor-angular-history-text-styleChange-textAlignment-left': 'Align left',
+    'tui-image-editor-angular-history-text-styleChange-textAlignment-center': 'Align center',
+    'tui-image-editor-angular-history-text-styleChange-textAlignment-right': 'Align right',
+    'tui-image-editor-angular-history-text-styleChange-underline': 'Underline',
+    'tui-image-editor-angular-history-text-styleChange-underline-true': 'Underline',
+    'tui-image-editor-angular-history-text-styleChange-underline-false': 'Not underlined',
+    'tui-image-editor-angular-history-text-styleChange-fontStyle-normal': 'Not italic',
+    'tui-image-editor-angular-history-text-styleChange-fontStyle-italic': 'Italic',
+    'tui-image-editor-angular-history-text-styleChange-fontWeight-normal': 'Normal fontweight',
+    'tui-image-editor-angular-history-text-styleChange-fontWeight-bold': 'Bold',
+    'tui-image-editor-angular-history-text-styleChange-fontSize': 'Fontsize {{0}}',
+    'tui-image-editor-angular-history-text-fill': 'Color',
+    'tui-image-editor-angular-history-text-general': 'Text',
+    'tui-image-editor-angular-history-text-details': 'Moved/Resized',
+    'tui-image-editor-angular-history-mask-general': 'Mask',
+    'tui-image-editor-angular-history-mask-details': 'Moved/Resized',
+    'tui-image-editor-angular-history-mask-added': 'Added',
+    'tui-image-editor-angular-history-mask-apply': 'Applied',
+    'tui-image-editor-angular-history-crop': 'Crop',
+    'tui-image-editor-angular-history-flip': 'Flip',
+    'tui-image-editor-angular-history-flip-reset': 'Reset',
+    'tui-image-editor-angular-history-flip-flipX': 'X',
+    'tui-image-editor-angular-history-flip-flipY': 'Y',
+    'tui-image-editor-angular-history-rotate': 'Rotate',
+    'tui-image-editor-angular-history-draw-general': 'Drawing',
+    'tui-image-editor-angular-history-draw-details': 'Added/Moved/Resized',
+    'tui-image-editor-angular-history-draw-strokeWidth': 'Width {{0}}',
+    'tui-image-editor-angular-history-draw-stroke': 'Color',
+    'tui-image-editor-angular-history-icon-general': 'Icon',
+    'tui-image-editor-angular-history-icon-details': 'Added/Moved/Resized',
+    'tui-image-editor-angular-history-icon-colorChange': 'Color changed',
+    'tui-image-editor-angular-history-icon-added': 'Added',
+    'tui-image-editor-angular-history-icon-fill': 'Color',
+    'tui-image-editor-angular-history-load': 'Image loaded',
+    'tui-image-editor-angular-history-delete': 'Delete',
+    'tui-image-editor-angular-history-delete-all': 'All',
+    'tui-image-editor-angular-history-delete-draw': 'Drawing',
+    'tui-image-editor-angular-history-delete-shape': 'Shape',
+    'tui-image-editor-angular-history-delete-icon': 'Icon',
+    'tui-image-editor-angular-history-delete-text': 'Text',
+    'tui-image-editor-angular-history-delete-mask': 'Mask',
+    'tui-image-editor-angular-history-shape-general': 'Shape',
+    'tui-image-editor-angular-history-shape-details': 'Added/Moved/Resized',
+    'tui-image-editor-angular-history-applyFilter': 'Apply filter',
+    'tui-image-editor-angular-history-removeFilter': 'Remove filter',
+    'tui-image-editor-angular-history-shape-strokeWidth': 'Stroke width',
+    'tui-image-editor-angular-history-shape-stroke': 'Stroke',
+    'tui-image-editor-angular-history-shape-fill': 'Fill',
+};
+
+const nl = {
+    'tui-image-editor-angular-menus-buttons-crop-tooltip': 'Crop',
+    'tui-image-editor-angular-menus-buttons-delete': 'Verwijderen',
+    'tui-image-editor-angular-menus-buttons-deleteAll': 'Alles verwijderen',
+    'tui-image-editor-angular-menus-buttons-download': 'Downloaden',
+    'tui-image-editor-angular-menus-buttons-drag': 'Slepen',
+    'tui-image-editor-angular-menus-buttons-draw': 'Tekenen',
+    'tui-image-editor-angular-menus-buttons-filter': 'Filters',
+    'tui-image-editor-angular-menus-buttons-flip': 'Âfbeelding draaien',
+    'tui-image-editor-angular-menus-buttons-history': 'Historiek',
+    'tui-image-editor-angular-menus-buttons-icon': 'Icoon',
+    'tui-image-editor-angular-menus-buttons-load': 'Afbeelding laden',
+    'tui-image-editor-angular-menus-buttons-mask': 'Masker',
+    'tui-image-editor-angular-menus-buttons-redo': 'Herhalen',
+    'tui-image-editor-angular-menus-buttons-reset': 'Reset',
+    'tui-image-editor-angular-menus-buttons-rotate': 'Roteren',
+    'tui-image-editor-angular-menus-buttons-shape': 'Vorm',
+    'tui-image-editor-angular-menus-buttons-text': 'Tekst',
+    'tui-image-editor-angular-menus-buttons-undo': 'Ongedaan maken',
+    'tui-image-editor-angular-menus-buttons-zoomIn': 'Inzoomen',
+    'tui-image-editor-angular-menus-buttons-zoomOut': 'Uitzoomen',
+    'tui-image-editor-angular-submenus-crop-custom': 'Aangepast',
+    'tui-image-editor-angular-submenus-crop-square': 'Vierkant',
+    'tui-image-editor-angular-submenus-crop-apply': 'Toepassen',
+    'tui-image-editor-angular-submenus-crop-cancel': 'Annuleren',
+    'tui-image-editor-angular-submenus-flip-x': 'Horizontaal',
+    'tui-image-editor-angular-submenus-flip-y': 'Verticaal',
+    'tui-image-editor-angular-submenus-flip-reset': 'Annuleren',
+    'tui-image-editor-angular-submenus-rotate-slider': 'Rotatie',
+    'tui-image-editor-angular-submenus-draw-free': 'Vrij',
+    'tui-image-editor-angular-submenus-draw-straight': 'Rechte lijn',
+    'tui-image-editor-angular-submenus-draw-color': 'Kleur',
+    'tui-image-editor-angular-submenus-draw-strokeWidth': 'Lijndikte',
+    'tui-image-editor-angular-submenus-shape-rectangle': 'Rechthoek',
+    'tui-image-editor-angular-submenus-shape-circle': 'Cirkel',
+    'tui-image-editor-angular-submenus-shape-triangle': 'Driehoek',
+    'tui-image-editor-angular-submenus-shape-fill': 'Opvulling',
+    'tui-image-editor-angular-submenus-shape-stroke': 'Randkleur',
+    'tui-image-editor-angular-submenus-shape-strokeWidth': 'Randdikte',
+    'tui-image-editor-angular-submenus-icon-arrow1': 'Pijl-1',
+    'tui-image-editor-angular-submenus-icon-arrow2': 'Pijl-2',
+    'tui-image-editor-angular-submenus-icon-arrow3': 'Pijl-3',
+    'tui-image-editor-angular-submenus-icon-star1': 'Ster-1',
+    'tui-image-editor-angular-submenus-icon-star2': 'Ster-2',
+    'tui-image-editor-angular-submenus-icon-polygon': 'Polygoon',
+    'tui-image-editor-angular-submenus-icon-location': 'Locatie',
+    'tui-image-editor-angular-submenus-icon-heart': 'Hart',
+    'tui-image-editor-angular-submenus-icon-bubble': 'Bubbel',
+    'tui-image-editor-angular-submenus-icon-customIcon': 'Eigen icoon',
+    'tui-image-editor-angular-submenus-icon-color': 'Kleur',
+    'tui-image-editor-angular-submenus-text-bold': 'Vet',
+    'tui-image-editor-angular-submenus-text-italic': 'Cursief',
+    'tui-image-editor-angular-submenus-text-underline': 'Onderstreept',
+    'tui-image-editor-angular-submenus-text-left': 'Links',
+    'tui-image-editor-angular-submenus-text-center': 'Midden',
+    'tui-image-editor-angular-submenus-text-right': 'Rechts',
+    'tui-image-editor-angular-submenus-text-color': 'Kleur',
+    'tui-image-editor-angular-submenus-text-textSize': 'Tekstgrootte',
+    'tui-image-editor-angular-submenus-mask-loadMaskImage': 'Masker laden',
+    'tui-image-editor-angular-submenus-mask-apply': 'Toepassen',
+    'tui-image-editor-angular-submenus-filter-grayscale': 'Grijstinten',
+    'tui-image-editor-angular-submenus-filter-invert': 'Kleuren omkeren',
+    'tui-image-editor-angular-submenus-filter-sepia': 'Sepia',
+    'tui-image-editor-angular-submenus-filter-sepia2': 'Sepia 2',
+    'tui-image-editor-angular-submenus-filter-blur': 'Wazig maken',
+    'tui-image-editor-angular-submenus-filter-sharpen': 'Scherpte',
+    'tui-image-editor-angular-submenus-filter-emboss': 'Reliëf',
+    'tui-image-editor-angular-submenus-filter-removeWhite': 'Wit verwijderen',
+    'tui-image-editor-angular-submenus-filter-removeWhite-distance': 'Afstand',
+    'tui-image-editor-angular-submenus-filter-brightness': 'Helderheid',
+    'tui-image-editor-angular-submenus-filter-noise': 'Ruis',
+    'tui-image-editor-angular-submenus-filter-pixelate': 'Pixelate',
+    'tui-image-editor-angular-submenus-filter-colorFilter': 'Kleurfilter',
+    'tui-image-editor-angular-submenus-filter-colorFilter-threshold': 'Drempel',
+    'tui-image-editor-angular-submenus-filter-tint': 'Tint',
+    'tui-image-editor-angular-submenus-filter-multiply': 'Vermenigvuldigen',
+    'tui-image-editor-angular-submenus-filter-blend': 'Mengsel',
+    'tui-image-editor-angular-history-noItems': 'Nog geen historiek beschikbaar',
+    'tui-image-editor-angular-history-text-added': 'Toegevoegd',
+    'tui-image-editor-angular-history-text-styleChange-textAlignment-left': 'Links uitlijnen',
+    'tui-image-editor-angular-history-text-styleChange-textAlignment-center': 'Centreren',
+    'tui-image-editor-angular-history-text-styleChange-textAlignment-right': 'Rechts uitlijnen',
+    'tui-image-editor-angular-history-text-styleChange-underline-true': 'Onderstrepen',
+    'tui-image-editor-angular-history-text-styleChange-underline-false': 'Niet onderstrepen',
+    'tui-image-editor-angular-history-text-styleChange-fontStyle-normal': 'Niet-cursief',
+    'tui-image-editor-angular-history-text-styleChange-fontStyle-italic': 'Cursief',
+    'tui-image-editor-angular-history-text-styleChange-fontWeight-normal': 'Niet vet',
+    'tui-image-editor-angular-history-text-styleChange-fontWeight-bold': 'Vet',
+    'tui-image-editor-angular-history-text-styleChange-fontSize': 'Tekstgrootte {{0}}',
+    'tui-image-editor-angular-history-text-fill': 'Kleur',
+    'tui-image-editor-angular-history-text-general': 'Tekst',
+    'tui-image-editor-angular-history-text-details': 'Verplaatst/Vergroot/Verkleind',
+    'tui-image-editor-angular-history-mask-general': 'Masker',
+    'tui-image-editor-angular-history-mask-details': 'Verplaatst/Vergroot/Verkleind',
+    'tui-image-editor-angular-history-mask-added': 'Toegevoegd',
+    'tui-image-editor-angular-history-mask-apply': 'Uitgevoerd',
+    'tui-image-editor-angular-history-crop': 'Bijsnijden',
+    'tui-image-editor-angular-history-flip': 'Omdraaien',
+    'tui-image-editor-angular-history-flip-reset': 'Reset',
+    'tui-image-editor-angular-history-flip-flipX': 'X',
+    'tui-image-editor-angular-history-flip-flipY': 'Y',
+    'tui-image-editor-angular-history-rotate': 'Draaien',
+    'tui-image-editor-angular-history-draw-general': 'Tekening',
+    'tui-image-editor-angular-history-draw-details': 'Toegevoegd/Verplaatst/Vergroot/Verkleind',
+    'tui-image-editor-angular-history-draw-strokeWidth': 'Lijndikte {{0}}',
+    'tui-image-editor-angular-history-draw-stroke': 'Kleur',
+    'tui-image-editor-angular-history-icon-general': 'Icoon',
+    'tui-image-editor-angular-history-icon-details': 'Toegevoegd/Verplaatst/Vergroot/Verkleind',
+    'tui-image-editor-angular-history-icon-colorChange': 'Kleur gewijzigd',
+    'tui-image-editor-angular-history-icon-added': 'Toegevoegd',
+    'tui-image-editor-angular-history-icon-fill': 'Kleur',
+    'tui-image-editor-angular-history-load': 'Foto geladen',
+    'tui-image-editor-angular-history-delete': 'Verwijderen',
+    'tui-image-editor-angular-history-delete-all': 'Alle',
+    'tui-image-editor-angular-history-delete-draw': 'Tekening',
+    'tui-image-editor-angular-history-delete-shape': 'Vorm',
+    'tui-image-editor-angular-history-delete-icon': 'Icoon',
+    'tui-image-editor-angular-history-delete-text': 'Tekst',
+    'tui-image-editor-angular-history-delete-mask': 'Masker',
+    'tui-image-editor-angular-history-shape-general': 'Vorm',
+    'tui-image-editor-angular-history-shape-details': 'Toegevoegd/Verplaatst/Vergroot/Verkleind',
+    'tui-image-editor-angular-history-applyFilter': 'Filter toepassen',
+    'tui-image-editor-angular-history-removeFilter': 'Filter verwijderen',
+    'tui-image-editor-angular-history-shape-strokeWidth': 'Randdikte',
+    'tui-image-editor-angular-history-shape-stroke': 'Randkleur',
+    'tui-image-editor-angular-history-shape-fill': 'Opvulling',
+};
+
+class TranslationService {
+    constructor(document, service) {
+        this.document = document;
+        this.service = service;
+        this.availableLanguages = { en, nl };
+        Object.keys(this.availableLanguages).forEach((language) => {
+            this.service.setTranslation(language, this.availableLanguages[language], true);
+        });
+        let browserLanguages = window.navigator.languages;
+        let firstSupportedBrowserLanguage = browserLanguages.find((item) => Object.keys(this.availableLanguages).some((key) => key == item));
+        service.use(firstSupportedBrowserLanguage || 'nl');
+    }
+    get window() {
+        return this.document.defaultView;
+    }
+    changeLanguage(lang) {
+        this.service.use(lang);
+    }
+    loadCustomMessages(lang, messagesJson) {
+        this.service.setTranslation(lang, messagesJson, true);
+    }
+    getTranslation(key, params) {
+        return this.service.instant(key, params);
+    }
+}
+TranslationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TranslationService, deps: [{ token: DOCUMENT }, { token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable });
+TranslationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TranslationService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TranslationService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }, { type: i1.TranslateService }]; } });
+
+var zoomModes;
+(function (zoomModes) {
+    zoomModes["DEFAULT"] = "normal";
+    zoomModes["ZOOM"] = "zoom";
+    zoomModes["HAND"] = "hand";
+})(zoomModes || (zoomModes = {}));
+var eventNames;
+(function (eventNames) {
+    eventNames["OBJECT_ACTIVATED"] = "objectActivated";
+    eventNames["OBJECT_MOVED"] = "objectMoved";
+    eventNames["OBJECT_SCALED"] = "objectScaled";
+    eventNames["OBJECT_CREATED"] = "objectCreated";
+    eventNames["OBJECT_ROTATED"] = "objectRotated";
+    eventNames["OBJECT_ADDED"] = "objectAdded";
+    eventNames["OBJECT_MODIFIED"] = "objectModified";
+    eventNames["TEXT_EDITING"] = "textEditing";
+    eventNames["TEXT_CHANGED"] = "textChanged";
+    eventNames["ICON_CREATE_RESIZE"] = "iconCreateResize";
+    eventNames["ICON_CREATE_END"] = "iconCreateEnd";
+    eventNames["ADD_TEXT"] = "addText";
+    eventNames["ADD_OBJECT"] = "addObject";
+    eventNames["ADD_OBJECT_AFTER"] = "addObjectAfter";
+    eventNames["MOUSE_DOWN"] = "mousedown";
+    eventNames["MOUSE_UP"] = "mouseup";
+    eventNames["MOUSE_MOVE"] = "mousemove";
+    // UNDO/REDO Events
+    eventNames["REDO_STACK_CHANGED"] = "redoStackChanged";
+    eventNames["UNDO_STACK_CHANGED"] = "undoStackChanged";
+    eventNames["SELECTION_CLEARED"] = "selectionCleared";
+    eventNames["SELECTION_CREATED"] = "selectionCreated";
+    eventNames["EXECUTE_COMMAND"] = "executeCommand";
+    eventNames["AFTER_UNDO"] = "afterUndo";
+    eventNames["AFTER_REDO"] = "afterRedo";
+    eventNames["ZOOM_CHANGED"] = "zoomChanged";
+    eventNames["HAND_STARTED"] = "handStarted";
+    eventNames["HAND_STOPPED"] = "handStopped";
+    eventNames["KEY_DOWN"] = "keydown";
+    eventNames["KEY_UP"] = "keyup";
+})(eventNames || (eventNames = {}));
+var commandNames;
+(function (commandNames) {
+    commandNames["TEXT"] = "Text";
+    commandNames["MASK"] = "Image";
+    commandNames["CROP"] = "Crop";
+    commandNames["DRAW"] = "Draw";
+    commandNames["ICON"] = "Icon";
+    commandNames["LOAD"] = "Load";
+    commandNames["SHAPE"] = "Shape";
+    commandNames["CLEAR_OBJECTS"] = "clearObjects";
+    commandNames["LOAD_IMAGE"] = "loadImage";
+    commandNames["FLIP_IMAGE"] = "flip";
+    commandNames["ROTATE_IMAGE"] = "rotate";
+    commandNames["ADD_OBJECT"] = "addObject";
+    commandNames["REMOVE_OBJECT"] = "removeObject";
+    commandNames["APPLY_FILTER"] = "applyFilter";
+    commandNames["REMOVE_FILTER"] = "removeFilter";
+    commandNames["ADD_ICON"] = "addIcon";
+    commandNames["CHANGE_ICON_COLOR"] = "changeIconColor";
+    commandNames["ADD_SHAPE"] = "addShape";
+    commandNames["CHANGE_SHAPE"] = "changeShape";
+    commandNames["ADD_TEXT"] = "addText";
+    commandNames["CHANGE_TEXT"] = "changeText";
+    commandNames["CHANGE_TEXT_STYLE"] = "changeTextStyle";
+    commandNames["ADD_IMAGE_OBJECT"] = "addImageObject";
+    commandNames["RESIZE_CANVAS_DIMENSION"] = "resizeCanvasDimension";
+    commandNames["SET_OBJECT_PROPERTIES"] = "setObjectProperties";
+    commandNames["SET_OBJECT_POSITION"] = "setObjectPosition";
+    commandNames["CHANGE_SELECTION"] = "changeSelection";
+})(commandNames || (commandNames = {}));
+var historyNames;
+(function (historyNames) {
+    historyNames["LOAD_IMAGE"] = "Load";
+    historyNames["LOAD_MASK_IMAGE"] = "Mask";
+    historyNames["ADD_MASK_IMAGE"] = "Mask";
+    historyNames["ADD_IMAGE_OBJECT"] = "Mask";
+    historyNames["CROP"] = "Crop";
+    historyNames["APPLY_FILTER"] = "Apply filter";
+    historyNames["REMOVE_FILTER"] = "Remove filter";
+    historyNames["CHANGE_SHAPE"] = "Shape";
+    historyNames["CHANGE_ICON_COLOR"] = "Icon";
+    historyNames["ADD_TEXT"] = "Text";
+    historyNames["CHANGE_TEXT_STYLE"] = "Text";
+    historyNames["REMOVE_OBJECT"] = "Delete";
+    historyNames["CLEAR_OBJECTS"] = "Delete";
+})(historyNames || (historyNames = {}));
+var filterType;
+(function (filterType) {
+    filterType["VINTAGE"] = "vintage";
+    filterType["SEPIA2"] = "sepia2";
+    filterType["REMOVE_COLOR"] = "removeColor";
+    filterType["COLOR_FILTER"] = "colorFilter";
+    filterType["REMOVE_WHITE"] = "removeWhite";
+    filterType["BLEND_COLOR"] = "blendColor";
+    filterType["BLEND"] = "blend";
+    filterType["TINT"] = "tint";
+    filterType["MULTIPLY"] = "multiply";
+    filterType["BLEND_OR_TINT_OR_MULTIPLY"] = "blend_tint_multiply";
+    filterType["REMOVE_COLOR_OR_WHITE"] = "removeColor_removeWhite";
+    filterType["BRIGHTNESS"] = "brightness";
+    filterType["NOISE"] = "noise";
+    filterType["PIXELATE"] = "pixelate";
+    filterType["SHARPEN"] = "sharpen";
+    filterType["INVERT"] = "invert";
+    filterType["EMBOSS"] = "emboss";
+    filterType["SEPIA"] = "sepia";
+    filterType["GRAYSCALE"] = "grayscale";
+    filterType["BLUR"] = "blur";
+})(filterType || (filterType = {}));
+var drawingModes;
+(function (drawingModes) {
+    drawingModes["NORMAL"] = "NORMAL";
+    drawingModes["CROPPER"] = "CROPPER";
+    drawingModes["FREE_DRAWING"] = "FREE_DRAWING";
+    drawingModes["LINE_DRAWING"] = "LINE_DRAWING";
+    drawingModes["TEXT"] = "TEXT";
+    drawingModes["SHAPE"] = "SHAPE";
+    drawingModes["ICON"] = "ICON";
+    drawingModes["ZOOM"] = "ZOOM";
+})(drawingModes || (drawingModes = {}));
+const defaultIconPath = {
+    'icon-arrow': 'M40 12V0l24 24-24 24V36H0V12h40z',
+    'icon-arrow-2': 'M49,32 H3 V22 h46 l-18,-18 h12 l23,23 L43,50 h-12 l18,-18  z ',
+    'icon-arrow-3': 'M43.349998,27 L17.354,53 H1.949999 l25.996,-26 L1.949999,1 h15.404 L43.349998,27  z ',
+    'icon-star': 'M35,54.557999 l-19.912001,10.468 l3.804,-22.172001 l-16.108,-15.7 l22.26,-3.236 L35,3.746 l9.956,20.172001 l22.26,3.236 l-16.108,15.7 l3.804,22.172001  z ',
+    'icon-star-2': 'M17,31.212 l-7.194,4.08 l-4.728,-6.83 l-8.234,0.524 l-1.328,-8.226 l-7.644,-3.14 l2.338,-7.992 l-5.54,-6.18 l5.54,-6.176 l-2.338,-7.994 l7.644,-3.138 l1.328,-8.226 l8.234,0.522 l4.728,-6.83 L17,-24.312 l7.194,-4.08 l4.728,6.83 l8.234,-0.522 l1.328,8.226 l7.644,3.14 l-2.338,7.992 l5.54,6.178 l-5.54,6.178 l2.338,7.992 l-7.644,3.14 l-1.328,8.226 l-8.234,-0.524 l-4.728,6.83  z ',
+    'icon-polygon': 'M3,31 L19,3 h32 l16,28 l-16,28 H19  z ',
+    'icon-location': 'M24 62C8 45.503 0 32.837 0 24 0 10.745 10.745 0 24 0s24 10.745 24 24c0 8.837-8 21.503-24 38zm0-28c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.477-10 10 4.477 10 10 10z',
+    'icon-heart': 'M49.994999,91.349998 l-6.96,-6.333 C18.324001,62.606995 2.01,47.829002 2.01,29.690998 C2.01,14.912998 13.619999,3.299999 28.401001,3.299999 c8.349,0 16.362,5.859 21.594,12 c5.229,-6.141 13.242001,-12 21.591,-12 c14.778,0 26.390999,11.61 26.390999,26.390999 c0,18.138 -16.314001,32.916 -41.025002,55.374001 l-6.96,6.285  z ',
+    'icon-bubble': 'M44 48L34 58V48H12C5.373 48 0 42.627 0 36V12C0 5.373 5.373 0 12 0h40c6.627 0 12 5.373 12 12v24c0 6.627-5.373 12-12 12h-8z',
+};
+var cropModes;
+(function (cropModes) {
+    cropModes["PRESET_SQUARE"] = "preset-square";
+    cropModes["PRESET_3_2"] = "preset-3-2";
+    cropModes["PRESET_4_3"] = "preset-4-3";
+    cropModes["PRESET_5_4"] = "preset-5-4";
+    cropModes["PRESET_7_5"] = "preset-7-5";
+    cropModes["PRESET_16_9"] = "preset-16-9";
+    cropModes["PRESET_NONE"] = "preset-none";
+})(cropModes || (cropModes = {}));
+const defaultColors = [
+    '#000000',
+    '#2a2a2a',
+    '#545454',
+    '#7e7e7e',
+    '#a8a8a8',
+    '#d2d2d2',
+    '#ffffff',
+    '#ff4040',
+    '#ff6518',
+    '#ffbb3b',
+    '#03bd9e',
+    '#00a9ff',
+    '#515ce6',
+    '#9e5fff',
+    '#ff5583',
+];
+var objectTypes;
+(function (objectTypes) {
+    objectTypes["icon"] = "icon";
+    objectTypes["image"] = "image";
+    objectTypes["itext"] = "i-text";
+    objectTypes["text"] = "text";
+    objectTypes["straightLine"] = "line";
+    objectTypes["line"] = "path";
+    objectTypes["shapeRect"] = "rect";
+    objectTypes["shapeCircle"] = "circle";
+    objectTypes["shapeTriangle"] = "triangle";
+})(objectTypes || (objectTypes = {}));
+
+function isFileApiSupported() {
+    return !!(window.File && window.FileList && window.FileReader);
+}
+function isSilentCommand(command) {
+    return typeof command === 'string'
+        ? commandNames.LOAD_IMAGE === command
+        : commandNames.LOAD_IMAGE === command.name;
+}
+function getHistoryTitle(command) {
+    const { FLIP_IMAGE, ROTATE_IMAGE, ADD_TEXT, APPLY_FILTER, REMOVE_FILTER, CHANGE_SHAPE, CHANGE_ICON_COLOR, CHANGE_TEXT_STYLE, CLEAR_OBJECTS, ADD_IMAGE_OBJECT, REMOVE_OBJECT, } = commandNames;
+    const { name, args } = command;
+    let historyInfo;
+    switch (name) {
+        case FLIP_IMAGE:
+            historyInfo = {
+                name,
+                detail: args[1] === 'reset' ? args[1] : args[1].slice(4),
+            };
+            break;
+        case ROTATE_IMAGE:
+            historyInfo = { name, detail: args[2] };
+            break;
+        case APPLY_FILTER:
+            historyInfo = {
+                name: historyNames.APPLY_FILTER,
+                detail: getFilterType(args[1], args[2]),
+            };
+            break;
+        case REMOVE_FILTER:
+            historyInfo = { name: historyNames.REMOVE_FILTER, detail: args[1] };
+            break;
+        case CHANGE_SHAPE:
+            historyInfo = { name: historyNames.CHANGE_SHAPE, detail: 'Change' };
+            break;
+        case CHANGE_ICON_COLOR:
+            historyInfo = { name: historyNames.CHANGE_ICON_COLOR, detail: 'Change' };
+            break;
+        case CHANGE_TEXT_STYLE:
+            historyInfo = { name: historyNames.CHANGE_TEXT_STYLE, detail: 'Change' };
+            break;
+        case REMOVE_OBJECT:
+            historyInfo = { name: historyNames.REMOVE_OBJECT, detail: args[2] };
+            break;
+        case CLEAR_OBJECTS:
+            historyInfo = { name: historyNames.CLEAR_OBJECTS, detail: 'All' };
+            break;
+        case ADD_IMAGE_OBJECT:
+            historyInfo = { name: historyNames.ADD_IMAGE_OBJECT, detail: 'Add' };
+            break;
+        case ADD_TEXT:
+            historyInfo = { name: historyNames.ADD_TEXT };
+            break;
+        default:
+            historyInfo = { name };
+            break;
+    }
+    if (args[1] === 'mask') {
+        historyInfo = { name: historyNames.LOAD_MASK_IMAGE, detail: 'Apply' };
+    }
+    return historyInfo;
+}
+function getFilterType(type, { useAlpha = true, mode = null } = {}) {
+    const { VINTAGE, REMOVE_COLOR, BLEND_COLOR, SEPIA2, COLOR_FILTER, REMOVE_WHITE, BLEND, } = filterType;
+    let filterName;
+    switch (type) {
+        case VINTAGE:
+            filterName = SEPIA2;
+            break;
+        case REMOVE_COLOR:
+            filterName = useAlpha ? COLOR_FILTER : REMOVE_WHITE;
+            break;
+        case BLEND_COLOR:
+            filterName = mode === 'add' ? BLEND : mode;
+            break;
+        default:
+            filterName = type;
+    }
+    return toStartOfCapital(filterName);
+}
+function toStartOfCapital(str) {
+    return str.replace(/[a-z]/, (first) => first.toUpperCase());
+}
+function dataUrlToBlob(dataUrl) {
+    const { groups: { mime, base64data }, } = /data:(?<mime>.+);base64,(?<base64data>.+)/.exec(dataUrl);
+    const byteCharacters = atob(base64data);
+    const byteNumbers = new Array(byteCharacters.length);
+    for (let i = 0; i < byteCharacters.length; i++) {
+        byteNumbers[i] = byteCharacters.charCodeAt(i);
+    }
+    const byteArray = new Uint8Array(byteNumbers);
+    return new Blob([byteArray], { type: mime });
+}
+const emptyCropRectValues = {
+    LEFT: 0,
+    TOP: 0,
+    WIDTH: 0.5,
+    HEIGHT: 0.5,
+};
+/**
+ * Check if cropRect is Empty.
+ * @param {Object} cropRect - cropRect object
+ *  @param {Number} cropRect.left - cropRect left position value
+ *  @param {Number} cropRect.top - cropRect top position value
+ *  @param {Number} cropRect.width - cropRect width value
+ *  @param {Number} cropRect.height - cropRect height value
+ * @returns {boolean}
+ */
+function isEmptyCropzone(cropRect) {
+    const { left, top, width, height } = cropRect;
+    const { LEFT, TOP, WIDTH, HEIGHT } = emptyCropRectValues;
+    return left === LEFT && top === TOP && width === WIDTH && height === HEIGHT;
+}
+function clearSelection(imageEditor, fire_event = true) {
+    imageEditor.discardSelection();
+    if (fire_event) {
+        imageEditor.fire(eventNames.OBJECT_ACTIVATED, null);
+        imageEditor.fire(eventNames.SELECTION_CLEARED, null);
+    }
+}
+function getActiveObjectId(imageEditor) {
+    if (imageEditor != null) {
+        let activeObject = imageEditor._graphics.getActiveObject();
+        if (activeObject) {
+            let activeObjectId = imageEditor._graphics.getObjectId(activeObject);
+            return activeObjectId;
+        }
+    }
+    return null;
+}
+async function removeFilter(imageEditor, type, isSilent) {
+    if (imageEditor != null) {
+        if (isSilent) {
+            await imageEditor.executeSilent('removeFilter', type);
+        }
+        else {
+            await imageEditor.execute('removeFilter', type);
+        }
+    }
+}
+function rgbaToObject(rgba) {
+    if (rgba.startsWith('rgba')) {
+        const { groups: { r, g, b, a }, } = /rgba\(\s*(?<r>\d+)\s*,\s*(?<g>\d+)\s*,\s*(?<b>\d+)\s*,\s*(?<a>[0-9.]+)\s*\)/.exec(rgba);
+        let parsedR = parseInt(r);
+        let parsedG = parseInt(g);
+        let parsedB = parseInt(b);
+        return {
+            r: parsedR,
+            g: parsedG,
+            b: parsedB,
+            hexString: `#${(parsedR <= 15 ? '0' : '') + parsedR.toString(16)}${(parsedG <= 15 ? '0' : '') + parsedG.toString(16)}${(parsedB <= 15 ? '0' : '') + parsedB.toString(16)}`,
+            alpha: parseFloat(a),
+        };
+    }
+    return rgbToObject(rgba);
+}
+function rgbToObject(rgb) {
+    if (rgb.startsWith('rgb')) {
+        const { groups: { r, g, b }, } = /rgb\(\s*(?<r>\d+)\s*,\s*(?<g>\d+)\s*,\s*(?<b>\d+)\s*\)/.exec(rgb);
+        let parsedR = parseInt(r);
+        let parsedG = parseInt(g);
+        let parsedB = parseInt(b);
+        return {
+            r: parsedR,
+            g: parsedG,
+            b: parsedB,
+            hexString: `#${(parsedR <= 15 ? '0' : '') + parsedR.toString(16)}${(parsedG <= 15 ? '0' : '') + parsedG.toString(16)}${(parsedB <= 15 ? '0' : '') + parsedB.toString(16)}`,
+            alpha: 1,
+        };
+    }
+    return null;
+}
+
+var HistoryItemType;
+(function (HistoryItemType) {
+    HistoryItemType[HistoryItemType["Shape"] = 0] = "Shape";
+    HistoryItemType[HistoryItemType["Icon"] = 1] = "Icon";
+    HistoryItemType[HistoryItemType["Text"] = 2] = "Text";
+    HistoryItemType[HistoryItemType["Mask"] = 3] = "Mask";
+    HistoryItemType[HistoryItemType["Crop"] = 4] = "Crop";
+    HistoryItemType[HistoryItemType["Draw"] = 5] = "Draw";
+    HistoryItemType[HistoryItemType["Rotate"] = 6] = "Rotate";
+    HistoryItemType[HistoryItemType["Flip"] = 7] = "Flip";
+    HistoryItemType[HistoryItemType["Load"] = 8] = "Load";
+    HistoryItemType[HistoryItemType["Delete"] = 9] = "Delete";
+    HistoryItemType[HistoryItemType["Image"] = 10] = "Image";
+    HistoryItemType[HistoryItemType["ApplyFilter"] = 11] = "ApplyFilter";
+    HistoryItemType[HistoryItemType["RemoveFilter"] = 12] = "RemoveFilter";
+})(HistoryItemType || (HistoryItemType = {}));
+class HistoryItem {
+    constructor(command, translationService, imageEditor) {
+        if (typeof command === 'string') {
+            if (command === commandNames.TEXT) {
+                this.name = translationService.getTranslation('tui-image-editor-angular-history-text-general');
+                this.detail = translationService.getTranslation('tui-image-editor-angular-history-text-details');
+                this.type = HistoryItemType.Text;
+            }
+            else if (command === commandNames.MASK) {
+                this.name = translationService.getTranslation('tui-image-editor-angular-history-mask-general');
+                this.detail = translationService.getTranslation('tui-image-editor-angular-history-mask-details');
+                this.type = HistoryItemType.Mask;
+            }
+            else if (command === commandNames.CROP) {
+                this.name = translationService.getTranslation('tui-image-editor-angular-history-crop');
+                this.type = HistoryItemType.Crop;
+            }
+            else if (command === commandNames.DRAW) {
+                this.name = translationService.getTranslation('tui-image-editor-angular-history-draw-general');
+                this.detail = translationService.getTranslation('tui-image-editor-angular-history-draw-details');
+                this.type = HistoryItemType.Draw;
+            }
+            else if (command === commandNames.ICON) {
+                this.name = translationService.getTranslation('tui-image-editor-angular-history-icon-general');
+                this.detail = translationService.getTranslation('tui-image-editor-angular-history-icon-details');
+                this.type = HistoryItemType.Icon;
+            }
+            else if (command === commandNames.LOAD) {
+                this.name = translationService.getTranslation('tui-image-editor-angular-history-load');
+                this.type = HistoryItemType.Load;
+            }
+            else if (command === commandNames.SHAPE) {
+                this.name = translationService.getTranslation('tui-image-editor-angular-history-shape-general');
+                this.detail = translationService.getTranslation('tui-image-editor-angular-history-shape-details');
+                this.type = HistoryItemType.Shape;
+            }
+            else {
+                this.name = command;
+            }
+        }
+        else {
+            switch (command.name) {
+                case commandNames.FLIP_IMAGE:
+                    this.name = translationService.getTranslation('tui-image-editor-angular-history-flip');
+                    switch (command.args[1]) {
+                        case 'reset':
+                            this.detail = translationService.getTranslation('tui-image-editor-angular-history-flip-reset');
+                            break;
+                        case 'flipX':
+                            this.detail = translationService.getTranslation('tui-image-editor-angular-history-flip-flipX');
+                            break;
+                        case 'flipY':
+                            this.detail = translationService.getTranslation('tui-image-editor-angular-history-flip-flipY');
+                            break;
+                    }
+                    this.type = HistoryItemType.Flip;
+                    break;
+                case commandNames.ROTATE_IMAGE:
+                    this.name = translationService.getTranslation('tui-image-editor-angular-history-rotate');
+                    this.detail = command.args[2] + '°';
+                    this.type = HistoryItemType.Rotate;
+                    this.args = [command.args[2]];
+                    break;
+                case commandNames.APPLY_FILTER:
+                    if (command.args?.length >= 3 && command.args[1] === 'mask') {
+                        this.name = translationService.getTranslation('tui-image-editor-angular-history-mask-general');
+                        this.detail = translationService.getTranslation('tui-image-editor-angular-history-mask-apply');
+                        this.type = HistoryItemType.Mask;
+                    }
+                    else {
+                        this.name = translationService.getTranslation('tui-image-editor-angular-history-applyFilter');
+                        this.detail = getFilterType(command.args[1], command.args[2]);
+                        this.type = HistoryItemType.ApplyFilter;
+                        if (command.args[1] === filterType.REMOVE_COLOR &&
+                            command.args[2] != null) {
+                            this.filterType =
+                                command.args[2].useAlpha == null
+                                    ? filterType.REMOVE_COLOR
+                                    : filterType.REMOVE_WHITE;
+                            this.detail =
+                                command.args[2].useAlpha == null
+                                    ? translationService.getTranslation('tui-image-editor-angular-submenus-filter-colorFilter')
+                                    : translationService.getTranslation('tui-image-editor-angular-submenus-filter-removeWhite');
+                            this.args = [command.args[2].distance];
+                        }
+                        else if (command.args[1] === filterType.BLEND_COLOR &&
+                            command.args[2] != null) {
+                            if (command.args[2].mode === 'tint') {
+                                this.filterType = filterType.TINT;
+                                this.detail = translationService.getTranslation('tui-image-editor-angular-submenus-filter-tint');
+                            }
+                            else if (command.args[2].mode === 'multiply') {
+                                this.filterType = filterType.MULTIPLY;
+                                this.detail = translationService.getTranslation('tui-image-editor-angular-submenus-filter-multiply');
+                            }
+                            else if (command.args[2].mode === 'add') {
+                                this.filterType = filterType.BLEND;
+                                this.detail = translationService.getTranslation('tui-image-editor-angular-submenus-filter-blend');
+                            }
+                            this.args = [command.args[2].color];
+                        }
+                        else if (command.args[1] === filterType.NOISE &&
+                            command.args[2] != null) {
+                            this.filterType = filterType.NOISE;
+                            this.detail = translationService.getTranslation('tui-image-editor-angular-submenus-filter-noise');
+                            this.args = [command.args[2].noise];
+                        }
+                        else if (command.args[1] === filterType.BRIGHTNESS &&
+                            command.args[2] != null) {
+                            this.filterType = filterType.BRIGHTNESS;
+                            this.detail = translationService.getTranslation('tui-image-editor-angular-submenus-filter-brightness');
+                            this.args = [command.args[2].brightness];
+                        }
+                        else if (command.args[1] === filterType.PIXELATE &&
+                            command.args[2] != null) {
+                            this.filterType = filterType.PIXELATE;
+                            this.detail = translationService.getTranslation('tui-image-editor-angular-submenus-filter-pixelate');
+                            this.args = [command.args[2].blocksize];
+                        }
+                        else if (command.args[1] === filterType.GRAYSCALE) {
+                            this.detail = translationService.getTranslation('tui-image-editor-angular-submenus-filter-grayscale');
+                        }
+                        else if (command.args[1] === filterType.SEPIA) {
+                            this.detail = translationService.getTranslation('tui-image-editor-angular-submenus-filter-sepia');
+                        }
+                        else if (command.args[1] === filterType.BLUR) {
+                            this.detail = translationService.getTranslation('tui-image-editor-angular-submenus-filter-blur');
+                        }
+                        else if (command.args[1] === filterType.INVERT) {
+                            this.detail = translationService.getTranslation('tui-image-editor-angular-submenus-filter-invert');
+                        }
+                        else if (command.args[1] === filterType.VINTAGE) {
+                            this.detail = translationService.getTranslation('tui-image-editor-angular-submenus-filter-sepia2');
+                        }
+                        else if (command.args[1] === filterType.SHARPEN) {
+                            this.detail = translationService.getTranslation('tui-image-editor-angular-submenus-filter-sharpen');
+                        }
+                        else if (command.args[1] === filterType.EMBOSS) {
+                            this.detail = translationService.getTranslation('tui-image-editor-angular-submenus-filter-emboss');
+                        }
+                    }
+                    break;
+                case commandNames.REMOVE_FILTER:
+                    this.name = translationService.getTranslation('tui-image-editor-angular-history-removeFilter');
+                    if (command.args[1] === filterType.BLEND_COLOR) {
+                        this.filterType = filterType.BLEND_OR_TINT_OR_MULTIPLY;
+                        this.detail = `${translationService.getTranslation('tui-image-editor-angular-submenus-filter-tint')} | ${translationService.getTranslation('tui-image-editor-angular-submenus-filter-multiply')} | ${translationService.getTranslation('tui-image-editor-angular-submenus-filter-blend')}`;
+                    }
+                    else if (command.args[1] === filterType.REMOVE_COLOR) {
+                        this.filterType = filterType.REMOVE_COLOR_OR_WHITE;
+                        this.detail = `${translationService.getTranslation('tui-image-editor-angular-submenus-filter-removeWhite')} | ${translationService.getTranslation('tui-image-editor-angular-submenus-filter-colorFilter')}`;
+                    }
+                    else if (command.args[1] === filterType.GRAYSCALE) {
+                        this.detail = translationService.getTranslation('tui-image-editor-angular-submenus-filter-grayscale');
+                    }
+                    else if (command.args[1] === filterType.SEPIA) {
+                        this.detail = translationService.getTranslation('tui-image-editor-angular-submenus-filter-sepia');
+                    }
+                    else if (command.args[1] === filterType.BLUR) {
+                        this.detail = translationService.getTranslation('tui-image-editor-angular-submenus-filter-blur');
+                    }
+                    else if (command.args[1] === filterType.INVERT) {
+                        this.detail = translationService.getTranslation('tui-image-editor-angular-submenus-filter-invert');
+                    }
+                    else if (command.args[1] === filterType.VINTAGE) {
+                        this.detail = translationService.getTranslation('tui-image-editor-angular-submenus-filter-sepia2');
+                    }
+                    else if (command.args[1] === filterType.SHARPEN) {
+                        this.detail = translationService.getTranslation('tui-image-editor-angular-submenus-filter-sharpen');
+                    }
+                    else if (command.args[1] === filterType.EMBOSS) {
+                        this.detail = translationService.getTranslation('tui-image-editor-angular-submenus-filter-emboss');
+                    }
+                    this.type = HistoryItemType.RemoveFilter;
+                    break;
+                case commandNames.CHANGE_SHAPE:
+                    this.name = translationService.getTranslation('tui-image-editor-angular-history-shape-general');
+                    if (command.args?.length >= 3) {
+                        let changedProperties = command.args[2];
+                        if (changedProperties.strokeWidth) {
+                            this.detail = translationService.getTranslation('tui-image-editor-angular-history-shape-strokeWidth');
+                        }
+                        else if (changedProperties.stroke) {
+                            this.detail = translationService.getTranslation('tui-image-editor-angular-history-shape-stroke');
+                        }
+                        else if (changedProperties.fill) {
+                            this.detail = translationService.getTranslation('tui-image-editor-angular-history-shape-fill');
+                        }
+                    }
+                    this.type = HistoryItemType.Shape;
+                    break;
+                case commandNames.CHANGE_ICON_COLOR:
+                    this.name = translationService.getTranslation('tui-image-editor-angular-history-icon-general');
+                    this.detail = translationService.getTranslation('tui-image-editor-angular-history-icon-colorChange');
+                    this.type = HistoryItemType.Icon;
+                    break;
+                case commandNames.CHANGE_TEXT_STYLE:
+                    this.name = translationService.getTranslation('tui-image-editor-angular-history-text-general');
+                    this.type = HistoryItemType.Text;
+                    if (command.args?.length >= 3 &&
+                        typeof command.args[2] === 'object') {
+                        let textStyleArg = command.args[2];
+                        if (textStyleArg.textAlign) {
+                            switch (textStyleArg.textAlign) {
+                                case 'left':
+                                    this.detail = translationService.getTranslation('tui-image-editor-angular-history-text-styleChange-textAlignment-left');
+                                    break;
+                                case 'center':
+                                    this.detail = translationService.getTranslation('tui-image-editor-angular-history-text-styleChange-textAlignment-center');
+                                    break;
+                                case 'right':
+                                    this.detail = translationService.getTranslation('tui-image-editor-angular-history-text-styleChange-textAlignment-right');
+                                    break;
+                            }
+                        }
+                        else if (textStyleArg.textDecoration ||
+                            textStyleArg.underline != null) {
+                            if (textStyleArg.underline) {
+                                this.detail = translationService.getTranslation('tui-image-editor-angular-history-text-styleChange-underline-true');
+                            }
+                            else if (textStyleArg.underline === false) {
+                                this.detail = translationService.getTranslation('tui-image-editor-angular-history-text-styleChange-underline-false');
+                            }
+                        }
+                        else if (textStyleArg.fontStyle) {
+                            if (textStyleArg.fontStyle === 'normal') {
+                                this.detail = translationService.getTranslation('tui-image-editor-angular-history-text-styleChange-fontStyle-normal');
+                            }
+                            else if (textStyleArg.fontStyle === 'italic') {
+                                this.detail = translationService.getTranslation('tui-image-editor-angular-history-text-styleChange-fontStyle-italic');
+                            }
+                        }
+                        else if (textStyleArg.fontWeight) {
+                            if (textStyleArg.fontWeight === 'normal') {
+                                this.detail = translationService.getTranslation('tui-image-editor-angular-history-text-styleChange-fontWeight-normal');
+                            }
+                            else if (textStyleArg.fontWeight === 'bold') {
+                                this.detail = translationService.getTranslation('tui-image-editor-angular-history-text-styleChange-fontWeight-bold');
+                            }
+                        }
+                        else if (textStyleArg.fontSize) {
+                            this.detail = translationService.getTranslation('tui-image-editor-angular-history-text-styleChange-fontSize', { 0: textStyleArg.fontSize });
+                        }
+                        else if (textStyleArg.fill) {
+                            this.detail = translationService.getTranslation('tui-image-editor-angular-history-text-fill');
+                        }
+                    }
+                    break;
+                case commandNames.REMOVE_OBJECT:
+                    this.name = translationService.getTranslation('tui-image-editor-angular-history-delete');
+                    switch (command.args[2]) {
+                        case commandNames.DRAW:
+                            this.detail = translationService.getTranslation('tui-image-editor-angular-history-delete-draw');
+                            break;
+                        case commandNames.SHAPE:
+                            this.detail = translationService.getTranslation('tui-image-editor-angular-history-delete-shape');
+                            break;
+                        case commandNames.ICON:
+                            this.detail = translationService.getTranslation('tui-image-editor-angular-history-delete-icon');
+                            break;
+                        case commandNames.TEXT:
+                            this.detail = translationService.getTranslation('tui-image-editor-angular-history-delete-text');
+                            break;
+                        case commandNames.MASK:
+                            this.detail = translationService.getTranslation('tui-image-editor-angular-history-delete-mask');
+                            break;
+                    }
+                    this.type = HistoryItemType.Delete;
+                    break;
+                case commandNames.CLEAR_OBJECTS:
+                    this.name = translationService.getTranslation('tui-image-editor-angular-history-delete');
+                    this.detail = translationService.getTranslation('tui-image-editor-angular-history-delete-all');
+                    this.type = HistoryItemType.Delete;
+                    break;
+                case commandNames.ADD_IMAGE_OBJECT:
+                    this.name = translationService.getTranslation('tui-image-editor-angular-history-mask-general');
+                    this.detail = translationService.getTranslation('tui-image-editor-angular-history-mask-added');
+                    this.type = HistoryItemType.Image;
+                    break;
+                case commandNames.ADD_TEXT:
+                    this.name = translationService.getTranslation('tui-image-editor-angular-history-text-general');
+                    this.detail = translationService.getTranslation('tui-image-editor-angular-history-text-added');
+                    this.type = HistoryItemType.Text;
+                    break;
+                case commandNames.SET_OBJECT_PROPERTIES:
+                    if (command.args?.length >= 3) {
+                        let objectId = command.args[1];
+                        var props = imageEditor?.getObjectProperties(objectId, ['type']);
+                        console.debug(props);
+                        if (props?.type) {
+                            if ([objectTypes.line, objectTypes.straightLine].indexOf(props.type) > -1) {
+                                this.name = translationService.getTranslation('tui-image-editor-angular-history-draw-general');
+                                this.type = HistoryItemType.Draw;
+                                let changedProperties = command.args[2];
+                                if (changedProperties?.strokeWidth) {
+                                    this.detail = translationService.getTranslation('tui-image-editor-angular-history-draw-strokeWidth', { 0: changedProperties.strokeWidth });
+                                }
+                                else if (changedProperties?.stroke) {
+                                    this.detail = translationService.getTranslation('tui-image-editor-angular-history-draw-stroke');
+                                }
+                            }
+                            else if (props.type === objectTypes.icon) {
+                                this.name = translationService.getTranslation('tui-image-editor-angular-history-icon-general');
+                                this.type = HistoryItemType.Icon;
+                                let changedProperties = command.args[2];
+                                if (changedProperties?.fill) {
+                                    this.detail = translationService.getTranslation('tui-image-editor-angular-history-icon-fill');
+                                }
+                            }
+                        }
+                    }
+                    break;
+                case commandNames.ADD_ICON:
+                    this.name = translationService.getTranslation('tui-image-editor-angular-history-icon-general');
+                    this.detail = translationService.getTranslation('tui-image-editor-angular-history-icon-added');
+                    this.type = HistoryItemType.Icon;
+                    break;
+                default:
+                    this.name = command.name;
+                    break;
+            }
+        }
+    }
+}
+
+class HistoryService {
+    constructor(translationService) {
+        this.translationService = translationService;
+        this.items = [];
+        this.historyIndex = -1;
+        this.onChangeEmitter = new BehaviorSubject([]);
+    }
+    /**
+     * Get list's length
+     */
+    get listLength() {
+        return this.items.length;
+    }
+    /**
+     * Clear history
+     */
+    clear() {
+        if (this.listLength > 0) {
+            this.deleteListItemElement(0, this.listLength);
+            this.historyIndex = -1;
+        }
+    }
+    /**
+     * Whether history menu has disabled item
+     */
+    hasDisabledItem() {
+        return this.listLength - 1 > this.historyIndex;
+    }
+    /**
+     * Push list item element
+     */
+    pushListItemElement(item) {
+        this.items.push(item);
+    }
+    add(command, imageEditor) {
+        console.debug(command);
+        if (typeof command === 'string' && command === historyNames.LOAD_IMAGE) {
+            this.deleteListItemElement(0, this.listLength);
+        }
+        if (this.hasDisabledItem()) {
+            this.deleteListItemElement(this.historyIndex + 1, this.listLength);
+        }
+        if (typeof command === 'string' &&
+            command === historyNames.ADD_MASK_IMAGE) {
+            imageEditor?.clearRedoStack();
+            imageEditor?.clearUndoStack();
+            this.deleteListItemElement(0, this.listLength);
+        }
+        else {
+            this.pushListItemElement(new HistoryItem(command, this.translationService, imageEditor));
+            this.historyIndex = this.listLength - 1;
+        }
+    }
+    /**
+     * Select previous history of current selected history
+     */
+    prev() {
+        this.historyIndex -= 1;
+    }
+    /**
+     * Select next history of current selected history
+     */
+    next() {
+        this.historyIndex += 1;
+    }
+    /**
+     * Delete list item element
+     * @param {number} start - start index to delete
+     * @param {number} end - end index to delete
+     */
+    deleteListItemElement(start, end) {
+        this.items.splice(start, end - start + 1);
+    }
+}
+HistoryService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: HistoryService, deps: [{ token: TranslationService }], target: i0.ɵɵFactoryTarget.Injectable });
+HistoryService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: HistoryService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: HistoryService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: TranslationService }]; } });
+
+class LoadComponent {
+    constructor() {
+        this.loadImage = new EventEmitter();
+    }
+    onImageChosen(event) {
+        let selectedFile = event.target.files[0];
+        if (selectedFile != null) {
+            this.loadImage.emit(selectedFile);
+        }
+    }
+}
+LoadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: LoadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+LoadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: LoadComponent, selector: "tui-image-editor-menus-buttons-load", outputs: { loadImage: "loadImage" }, ngImport: i0, template: "<div\r\n  [title]=\"'tui-image-editor-angular-menus-buttons-load' | translate\"\r\n  class=\"tie-btn-load tui-image-editor-item help enabled button-background\"\r\n>\r\n  <!-- <svg class=\"svg_ic-menu\">\r\n    <use xlink:href=\"#ic-file-upload\" class=\"normal use-default\"></use>\r\n    <use xlink:href=\"#ic-file-upload\" class=\"active use-default\"></use>\r\n    <use xlink:href=\"#ic-file-upload\" class=\"hover use-default\"></use>\r\n  </svg> -->\r\n  <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n    <path d=\"M30.3168 5.05286H26.9987V1.73477C26.9987 0.847753 26.276 0.125 25.389 0.125H25.3397C24.4362 0.125 23.7135 0.847753 23.7135 1.73477V5.05286H20.4118C19.5248 5.05286 18.8021 5.77562 18.7856 6.66263V6.71191C18.7856 7.61535 19.5084 8.33811 20.4118 8.33811H23.7135V11.6398C23.7135 12.5268 24.4362 13.266 25.3397 13.2495H25.389C26.276 13.2495 26.9987 12.5268 26.9987 11.6398V8.33811H30.3168C31.2038 8.33811 31.9266 7.61535 31.9266 6.72834V6.66263C31.9266 5.77562 31.2038 5.05286 30.3168 5.05286ZM22.0709 11.6398V9.98073H20.4118C19.5412 9.98073 18.7199 9.63578 18.0957 9.02801C17.488 8.40381 17.143 7.5825 17.143 6.66263C17.143 6.07129 17.3073 5.52922 17.5865 5.05286H4.00204C2.19516 5.05286 0.716797 6.53122 0.716797 8.33811V28.0496C0.716797 29.8564 2.19516 31.3348 4.00204 31.3348H23.7135C25.5204 31.3348 26.9987 29.8564 26.9987 28.0496V14.4487C26.5059 14.7279 25.9475 14.9086 25.3233 14.9086C23.5328 14.8922 22.0709 13.4302 22.0709 11.6398ZM22.0052 28.0496H5.64466C4.97119 28.0496 4.57696 27.2775 4.98761 26.7355L8.24 22.4154C8.58495 21.9554 9.25843 21.9883 9.58695 22.4482L12.2151 26.4069L16.5024 20.6906C16.8309 20.2635 17.4715 20.2471 17.8001 20.6742L22.6458 26.719C23.0729 27.2611 22.6951 28.0496 22.0052 28.0496Z\" fill=\"#207C80\"/>\r\n  </svg>\r\n  <input\r\n    type=\"file\"\r\n    class=\"tui-image-editor-load-btn\"\r\n    accept=\"image/*,.heic\"\r\n    (change)=\"onImageChosen($event)\"\r\n  />\r\n</div>\r\n", styles: [".button-background{width:100%;display:flex;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: LoadComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tui-image-editor-menus-buttons-load', template: "<div\r\n  [title]=\"'tui-image-editor-angular-menus-buttons-load' | translate\"\r\n  class=\"tie-btn-load tui-image-editor-item help enabled button-background\"\r\n>\r\n  <!-- <svg class=\"svg_ic-menu\">\r\n    <use xlink:href=\"#ic-file-upload\" class=\"normal use-default\"></use>\r\n    <use xlink:href=\"#ic-file-upload\" class=\"active use-default\"></use>\r\n    <use xlink:href=\"#ic-file-upload\" class=\"hover use-default\"></use>\r\n  </svg> -->\r\n  <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n    <path d=\"M30.3168 5.05286H26.9987V1.73477C26.9987 0.847753 26.276 0.125 25.389 0.125H25.3397C24.4362 0.125 23.7135 0.847753 23.7135 1.73477V5.05286H20.4118C19.5248 5.05286 18.8021 5.77562 18.7856 6.66263V6.71191C18.7856 7.61535 19.5084 8.33811 20.4118 8.33811H23.7135V11.6398C23.7135 12.5268 24.4362 13.266 25.3397 13.2495H25.389C26.276 13.2495 26.9987 12.5268 26.9987 11.6398V8.33811H30.3168C31.2038 8.33811 31.9266 7.61535 31.9266 6.72834V6.66263C31.9266 5.77562 31.2038 5.05286 30.3168 5.05286ZM22.0709 11.6398V9.98073H20.4118C19.5412 9.98073 18.7199 9.63578 18.0957 9.02801C17.488 8.40381 17.143 7.5825 17.143 6.66263C17.143 6.07129 17.3073 5.52922 17.5865 5.05286H4.00204C2.19516 5.05286 0.716797 6.53122 0.716797 8.33811V28.0496C0.716797 29.8564 2.19516 31.3348 4.00204 31.3348H23.7135C25.5204 31.3348 26.9987 29.8564 26.9987 28.0496V14.4487C26.5059 14.7279 25.9475 14.9086 25.3233 14.9086C23.5328 14.8922 22.0709 13.4302 22.0709 11.6398ZM22.0052 28.0496H5.64466C4.97119 28.0496 4.57696 27.2775 4.98761 26.7355L8.24 22.4154C8.58495 21.9554 9.25843 21.9883 9.58695 22.4482L12.2151 26.4069L16.5024 20.6906C16.8309 20.2635 17.4715 20.2471 17.8001 20.6742L22.6458 26.719C23.0729 27.2611 22.6951 28.0496 22.0052 28.0496Z\" fill=\"#207C80\"/>\r\n  </svg>\r\n  <input\r\n    type=\"file\"\r\n    class=\"tui-image-editor-load-btn\"\r\n    accept=\"image/*,.heic\"\r\n    (change)=\"onImageChosen($event)\"\r\n  />\r\n</div>\r\n", styles: [".button-background{width:100%;display:flex;justify-content:center;align-items:center}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { loadImage: [{
+                type: Output
+            }] } });
+
+class HistoryComponent {
+    constructor(historyService) {
+        this.historyService = historyService;
+    }
+    get items() {
+        return this.historyService.items;
+    }
+    get historyIndex() {
+        return this.historyService.historyIndex;
+    }
+    onclickHistoryItem(index) {
+        if (index !== this.historyIndex) {
+            const count = Math.abs(index - this.historyIndex);
+            if (index < this.historyIndex) {
+                this.imageEditor?.undo(count).then(() => {
+                    this.historyService.onChangeEmitter.next(this.items.slice(0, index + 1));
+                });
+            }
+            else {
+                this.imageEditor?.redo(count).then(() => {
+                    this.historyService.onChangeEmitter.next(this.items.slice(0, index + 1));
+                });
+            }
+        }
+    }
+}
+HistoryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: HistoryComponent, deps: [{ token: HistoryService }], target: i0.ɵɵFactoryTarget.Component });
+HistoryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: HistoryComponent, selector: "tui-image-editor-menus-buttons-history", inputs: { imageEditor: "imageEditor" }, ngImport: i0, template: "<div\r\n  [ngbPopover]=\"popupContent\"\r\n  popoverClass=\"tie-history-popover\"\r\n  autoClose=\"outside\"\r\n  container=\"body\"\r\n  class=\"tie-btn-history tui-image-editor-item help enabled\"\r\n>\r\n  <div\r\n    [title]=\"'tui-image-editor-angular-menus-buttons-history' | translate\"\r\n    class=\"tui-image-editor-d-flex tui-image-editor-align-items-center\"\r\n  >\r\n    <svg class=\"svg_ic-menu tui-image-editor-d-flex\">\r\n      <use xlink:href=\"#ic-history\" class=\"normal use-default\"></use>\r\n      <use xlink:href=\"#ic-history\" class=\"disabled use-default\"></use>\r\n      <use xlink:href=\"#ic-history\" class=\"hover use-default\"></use>\r\n    </svg>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #popupContent>\r\n  <div class=\"tie-panel-history\">\r\n    <ul class=\"history-list\" *ngIf=\"items.length > 0\">\r\n      <li\r\n        [class]=\"\r\n          'history-item ' +\r\n          (itemNr > historyIndex ? 'disabled-item' : '') +\r\n          (itemNr == historyIndex ? 'selected-item' : '')\r\n        \"\r\n        *ngFor=\"let item of items; index as itemNr\"\r\n      >\r\n        <div\r\n          class=\"tui-image-editor-history-item history tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-flex-nowrap tui-image-editor-align-items-center\"\r\n          (click)=\"onclickHistoryItem(itemNr)\"\r\n        >\r\n          <div\r\n            class=\"history-item-icon tui-image-editor-d-flex tui-image-editor-align-items-center\"\r\n          >\r\n            <svg *ngIf=\"item.type == 8\" class=\"svg_ic-submenu\">\r\n              <use\r\n                xlink:href=\"#ic-history-load\"\r\n                class=\"normal use-default\"\r\n              ></use>\r\n              <use\r\n                xlink:href=\"#ic-history-load\"\r\n                class=\"active use-default\"\r\n              ></use>\r\n            </svg>\r\n            <svg *ngIf=\"item.type == 5\" class=\"svg_ic-submenu\">\r\n              <use\r\n                xlink:href=\"#ic-history-draw\"\r\n                class=\"normal use-default\"\r\n              ></use>\r\n              <use\r\n                xlink:href=\"#ic-history-draw\"\r\n                class=\"active use-default\"\r\n              ></use>\r\n            </svg>\r\n            <svg *ngIf=\"item.type == 6\" class=\"svg_ic-submenu\">\r\n              <use\r\n                xlink:href=\"#ic-history-rotate\"\r\n                class=\"normal use-default\"\r\n              ></use>\r\n              <use\r\n                xlink:href=\"#ic-history-rotate\"\r\n                class=\"active use-default\"\r\n              ></use>\r\n            </svg>\r\n            <svg *ngIf=\"item.type == 4\" class=\"svg_ic-submenu\">\r\n              <use\r\n                xlink:href=\"#ic-history-crop\"\r\n                class=\"normal use-default\"\r\n              ></use>\r\n              <use\r\n                xlink:href=\"#ic-history-crop\"\r\n                class=\"active use-default\"\r\n              ></use>\r\n            </svg>\r\n            <svg *ngIf=\"item.type == 7\" class=\"svg_ic-submenu\">\r\n              <use\r\n                xlink:href=\"#ic-history-flip\"\r\n                class=\"normal use-default\"\r\n              ></use>\r\n              <use\r\n                xlink:href=\"#ic-history-flip\"\r\n                class=\"active use-default\"\r\n              ></use>\r\n            </svg>\r\n            <svg *ngIf=\"item.type == 2\" class=\"svg_ic-submenu\">\r\n              <use\r\n                xlink:href=\"#ic-history-text\"\r\n                class=\"normal use-default\"\r\n              ></use>\r\n              <use\r\n                xlink:href=\"#ic-history-text\"\r\n                class=\"active use-default\"\r\n              ></use>\r\n            </svg>\r\n            <svg\r\n              *ngIf=\"item.type == 3 || item.type == 10\"\r\n              class=\"svg_ic-submenu\"\r\n            >\r\n              <use\r\n                xlink:href=\"#ic-history-mask\"\r\n                class=\"normal use-default\"\r\n              ></use>\r\n              <use\r\n                xlink:href=\"#ic-history-mask\"\r\n                class=\"active use-default\"\r\n              ></use>\r\n            </svg>\r\n            <svg *ngIf=\"item.type == 0\" class=\"svg_ic-submenu\">\r\n              <use\r\n                xlink:href=\"#ic-history-shape\"\r\n                class=\"normal use-default\"\r\n              ></use>\r\n              <use\r\n                xlink:href=\"#ic-history-shape\"\r\n                class=\"active use-default\"\r\n              ></use>\r\n            </svg>\r\n            <svg *ngIf=\"item.type == 1\" class=\"svg_ic-submenu\">\r\n              <use\r\n                xlink:href=\"#ic-history-icon\"\r\n                class=\"normal use-default\"\r\n              ></use>\r\n              <use\r\n                xlink:href=\"#ic-history-icon\"\r\n                class=\"active use-default\"\r\n              ></use>\r\n            </svg>\r\n            <svg\r\n              *ngIf=\"item.type == 11 || item.type == 12\"\r\n              class=\"svg_ic-submenu\"\r\n            >\r\n              <use\r\n                xlink:href=\"#ic-history-filter\"\r\n                class=\"normal use-default\"\r\n              ></use>\r\n              <use\r\n                xlink:href=\"#ic-history-filter\"\r\n                class=\"active use-default\"\r\n              ></use>\r\n            </svg>\r\n            <svg *ngIf=\"item.type == 9\" class=\"svg_ic-submenu\">\r\n              <use\r\n                xlink:href=\"#ic-history-delete\"\r\n                class=\"normal use-default\"\r\n              ></use>\r\n              <use\r\n                xlink:href=\"#ic-history-delete\"\r\n                class=\"active use-default\"\r\n              ></use>\r\n            </svg>\r\n          </div>\r\n          <div class=\"history-item-text\">\r\n            <div>{{ item.name }}</div>\r\n            <div class=\"history-item-text-details\" *ngIf=\"item.detail\">\r\n              {{ item.detail }}\r\n            </div>\r\n          </div>\r\n          <div\r\n            *ngIf=\"itemNr == historyIndex\"\r\n            class=\"history-item-checkbox tui-image-editor-d-flex tui-image-editor-align-items-center\"\r\n          >\r\n            <svg class=\"svg_ic-submenu\">\r\n              <use\r\n                xlink:href=\"#ic-history-check\"\r\n                class=\"normal use-default\"\r\n              ></use>\r\n            </svg>\r\n          </div>\r\n        </div>\r\n      </li>\r\n    </ul>\r\n    <div *ngIf=\"items.length === 0\" class=\"tui-image-editor-px-2\">\r\n      {{ \"tui-image-editor-angular-history-noItems\" | translate }}\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "triggers", "container", "disablePopover", "popoverClass", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: HistoryComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tui-image-editor-menus-buttons-history', template: "<div\r\n  [ngbPopover]=\"popupContent\"\r\n  popoverClass=\"tie-history-popover\"\r\n  autoClose=\"outside\"\r\n  container=\"body\"\r\n  class=\"tie-btn-history tui-image-editor-item help enabled\"\r\n>\r\n  <div\r\n    [title]=\"'tui-image-editor-angular-menus-buttons-history' | translate\"\r\n    class=\"tui-image-editor-d-flex tui-image-editor-align-items-center\"\r\n  >\r\n    <svg class=\"svg_ic-menu tui-image-editor-d-flex\">\r\n      <use xlink:href=\"#ic-history\" class=\"normal use-default\"></use>\r\n      <use xlink:href=\"#ic-history\" class=\"disabled use-default\"></use>\r\n      <use xlink:href=\"#ic-history\" class=\"hover use-default\"></use>\r\n    </svg>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #popupContent>\r\n  <div class=\"tie-panel-history\">\r\n    <ul class=\"history-list\" *ngIf=\"items.length > 0\">\r\n      <li\r\n        [class]=\"\r\n          'history-item ' +\r\n          (itemNr > historyIndex ? 'disabled-item' : '') +\r\n          (itemNr == historyIndex ? 'selected-item' : '')\r\n        \"\r\n        *ngFor=\"let item of items; index as itemNr\"\r\n      >\r\n        <div\r\n          class=\"tui-image-editor-history-item history tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-flex-nowrap tui-image-editor-align-items-center\"\r\n          (click)=\"onclickHistoryItem(itemNr)\"\r\n        >\r\n          <div\r\n            class=\"history-item-icon tui-image-editor-d-flex tui-image-editor-align-items-center\"\r\n          >\r\n            <svg *ngIf=\"item.type == 8\" class=\"svg_ic-submenu\">\r\n              <use\r\n                xlink:href=\"#ic-history-load\"\r\n                class=\"normal use-default\"\r\n              ></use>\r\n              <use\r\n                xlink:href=\"#ic-history-load\"\r\n                class=\"active use-default\"\r\n              ></use>\r\n            </svg>\r\n            <svg *ngIf=\"item.type == 5\" class=\"svg_ic-submenu\">\r\n              <use\r\n                xlink:href=\"#ic-history-draw\"\r\n                class=\"normal use-default\"\r\n              ></use>\r\n              <use\r\n                xlink:href=\"#ic-history-draw\"\r\n                class=\"active use-default\"\r\n              ></use>\r\n            </svg>\r\n            <svg *ngIf=\"item.type == 6\" class=\"svg_ic-submenu\">\r\n              <use\r\n                xlink:href=\"#ic-history-rotate\"\r\n                class=\"normal use-default\"\r\n              ></use>\r\n              <use\r\n                xlink:href=\"#ic-history-rotate\"\r\n                class=\"active use-default\"\r\n              ></use>\r\n            </svg>\r\n            <svg *ngIf=\"item.type == 4\" class=\"svg_ic-submenu\">\r\n              <use\r\n                xlink:href=\"#ic-history-crop\"\r\n                class=\"normal use-default\"\r\n              ></use>\r\n              <use\r\n                xlink:href=\"#ic-history-crop\"\r\n                class=\"active use-default\"\r\n              ></use>\r\n            </svg>\r\n            <svg *ngIf=\"item.type == 7\" class=\"svg_ic-submenu\">\r\n              <use\r\n                xlink:href=\"#ic-history-flip\"\r\n                class=\"normal use-default\"\r\n              ></use>\r\n              <use\r\n                xlink:href=\"#ic-history-flip\"\r\n                class=\"active use-default\"\r\n              ></use>\r\n            </svg>\r\n            <svg *ngIf=\"item.type == 2\" class=\"svg_ic-submenu\">\r\n              <use\r\n                xlink:href=\"#ic-history-text\"\r\n                class=\"normal use-default\"\r\n              ></use>\r\n              <use\r\n                xlink:href=\"#ic-history-text\"\r\n                class=\"active use-default\"\r\n              ></use>\r\n            </svg>\r\n            <svg\r\n              *ngIf=\"item.type == 3 || item.type == 10\"\r\n              class=\"svg_ic-submenu\"\r\n            >\r\n              <use\r\n                xlink:href=\"#ic-history-mask\"\r\n                class=\"normal use-default\"\r\n              ></use>\r\n              <use\r\n                xlink:href=\"#ic-history-mask\"\r\n                class=\"active use-default\"\r\n              ></use>\r\n            </svg>\r\n            <svg *ngIf=\"item.type == 0\" class=\"svg_ic-submenu\">\r\n              <use\r\n                xlink:href=\"#ic-history-shape\"\r\n                class=\"normal use-default\"\r\n              ></use>\r\n              <use\r\n                xlink:href=\"#ic-history-shape\"\r\n                class=\"active use-default\"\r\n              ></use>\r\n            </svg>\r\n            <svg *ngIf=\"item.type == 1\" class=\"svg_ic-submenu\">\r\n              <use\r\n                xlink:href=\"#ic-history-icon\"\r\n                class=\"normal use-default\"\r\n              ></use>\r\n              <use\r\n                xlink:href=\"#ic-history-icon\"\r\n                class=\"active use-default\"\r\n              ></use>\r\n            </svg>\r\n            <svg\r\n              *ngIf=\"item.type == 11 || item.type == 12\"\r\n              class=\"svg_ic-submenu\"\r\n            >\r\n              <use\r\n                xlink:href=\"#ic-history-filter\"\r\n                class=\"normal use-default\"\r\n              ></use>\r\n              <use\r\n                xlink:href=\"#ic-history-filter\"\r\n                class=\"active use-default\"\r\n              ></use>\r\n            </svg>\r\n            <svg *ngIf=\"item.type == 9\" class=\"svg_ic-submenu\">\r\n              <use\r\n                xlink:href=\"#ic-history-delete\"\r\n                class=\"normal use-default\"\r\n              ></use>\r\n              <use\r\n                xlink:href=\"#ic-history-delete\"\r\n                class=\"active use-default\"\r\n              ></use>\r\n            </svg>\r\n          </div>\r\n          <div class=\"history-item-text\">\r\n            <div>{{ item.name }}</div>\r\n            <div class=\"history-item-text-details\" *ngIf=\"item.detail\">\r\n              {{ item.detail }}\r\n            </div>\r\n          </div>\r\n          <div\r\n            *ngIf=\"itemNr == historyIndex\"\r\n            class=\"history-item-checkbox tui-image-editor-d-flex tui-image-editor-align-items-center\"\r\n          >\r\n            <svg class=\"svg_ic-submenu\">\r\n              <use\r\n                xlink:href=\"#ic-history-check\"\r\n                class=\"normal use-default\"\r\n              ></use>\r\n            </svg>\r\n          </div>\r\n        </div>\r\n      </li>\r\n    </ul>\r\n    <div *ngIf=\"items.length === 0\" class=\"tui-image-editor-px-2\">\r\n      {{ \"tui-image-editor-angular-history-noItems\" | translate }}\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n" }]
+        }], ctorParameters: function () { return [{ type: HistoryService }]; }, propDecorators: { imageEditor: [{
+                type: Input
+            }] } });
+
+class DownloadComponent {
+    constructor() { }
+    downloadImage() {
+        if (this.imageChosen && this.imageEditor != null) {
+            const dataURL = this.imageEditor.toDataURL();
+            if (window.fetch) {
+                fetch(dataURL)
+                    .then((res) => res.blob())
+                    .then((blob) => {
+                    var link = document.createElement('a');
+                    link.href = window.URL.createObjectURL(blob);
+                    link.target = '_blank';
+                    link.click();
+                });
+            }
+            else {
+                let blob = dataUrlToBlob(dataURL);
+                var link = document.createElement('a');
+                link.target = '_blank';
+                link.href = window.URL.createObjectURL(blob);
+                link.click();
+            }
+        }
+    }
+}
+DownloadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: DownloadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DownloadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: DownloadComponent, selector: "tui-image-editor-menus-buttons-download", inputs: { imageChosen: "imageChosen", imageEditor: "imageEditor" }, ngImport: i0, template: "<div\r\n  [title]=\"'tui-image-editor-angular-menus-buttons-download' | translate\"\r\n  class=\"tie-btn-download tui-image-editor-item help enabled\"\r\n  (click)=\"downloadImage()\"\r\n>\r\n  <svg class=\"svg_ic-menu\">\r\n    <use href=\"#ic-file-download\" class=\"normal use-default\"></use>\r\n    <use href=\"#ic-file-download\" class=\"active use-default\"></use>\r\n    <use href=\"#ic-file-download\" class=\"hover use-default\"></use>\r\n  </svg>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: DownloadComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tui-image-editor-menus-buttons-download', template: "<div\r\n  [title]=\"'tui-image-editor-angular-menus-buttons-download' | translate\"\r\n  class=\"tie-btn-download tui-image-editor-item help enabled\"\r\n  (click)=\"downloadImage()\"\r\n>\r\n  <svg class=\"svg_ic-menu\">\r\n    <use href=\"#ic-file-download\" class=\"normal use-default\"></use>\r\n    <use href=\"#ic-file-download\" class=\"active use-default\"></use>\r\n    <use href=\"#ic-file-download\" class=\"hover use-default\"></use>\r\n  </svg>\r\n</div>\r\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { imageChosen: [{
+                type: Input
+            }], imageEditor: [{
+                type: Input
+            }] } });
+
+class ZoomInComponent {
+    constructor() { }
+    get isSelected() {
+        if (this.imageEditor == null) {
+            return false;
+        }
+        const zoomMode = this.imageEditor?._graphics.getZoomMode();
+        return (this.imageEditor.getDrawingMode() == drawingModes.ZOOM &&
+            zoomMode !== zoomModes.HAND);
+    }
+    startZoom() {
+        this.imageEditor?.startDrawingMode(drawingModes.ZOOM);
+        this.zoomIn();
+    }
+    zoomIn() {
+        this.imageEditor?.deactivateAll();
+        this.toggleZoomMode();
+    }
+    toggleZoomMode() {
+        const zoomMode = this.imageEditor?._graphics.getZoomMode();
+        this.imageEditor?.stopDrawingMode();
+        if (zoomMode !== zoomModes.ZOOM) {
+            this.imageEditor?.startDrawingMode(drawingModes.ZOOM);
+            this.imageEditor?._graphics.startZoomInMode();
+        }
+        else {
+            this.imageEditor?._graphics.endZoomInMode();
+        }
+    }
+}
+ZoomInComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: ZoomInComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ZoomInComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: ZoomInComponent, selector: "tui-image-editor-menus-buttons-zoom-in", inputs: { imageChosen: "imageChosen", imageEditor: "imageEditor" }, ngImport: i0, template: "<div\r\n  [title]=\"'tui-image-editor-angular-menus-buttons-zoomIn' | translate\"\r\n  [class]=\"\r\n    'tie-btn-zoomIn tui-image-editor-item help ' +\r\n    (imageChosen ? 'enabled ' : 'disabled ') +\r\n    (isSelected ? 'active ' : '')\r\n  \"\r\n  (click)=\"imageChosen ? startZoom() : null\"\r\n>\r\n  <svg class=\"svg_ic-menu\">\r\n    <use xlink:href=\"#ic-zoom-in\" class=\"normal use-default\"></use>\r\n    <use xlink:href=\"#ic-zoom-in\" class=\"disabled use-default\"></use>\r\n    <use xlink:href=\"#ic-zoom-in\" class=\"hover use-default\"></use>\r\n  </svg>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: ZoomInComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tui-image-editor-menus-buttons-zoom-in', template: "<div\r\n  [title]=\"'tui-image-editor-angular-menus-buttons-zoomIn' | translate\"\r\n  [class]=\"\r\n    'tie-btn-zoomIn tui-image-editor-item help ' +\r\n    (imageChosen ? 'enabled ' : 'disabled ') +\r\n    (isSelected ? 'active ' : '')\r\n  \"\r\n  (click)=\"imageChosen ? startZoom() : null\"\r\n>\r\n  <svg class=\"svg_ic-menu\">\r\n    <use xlink:href=\"#ic-zoom-in\" class=\"normal use-default\"></use>\r\n    <use xlink:href=\"#ic-zoom-in\" class=\"disabled use-default\"></use>\r\n    <use xlink:href=\"#ic-zoom-in\" class=\"hover use-default\"></use>\r\n  </svg>\r\n</div>\r\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { imageChosen: [{
+                type: Input
+            }], imageEditor: [{
+                type: Input
+            }] } });
+
+class ZoomOutComponent {
+    constructor() { }
+    zoomOut() {
+        this.imageEditor?._graphics.zoomOut();
+    }
+}
+ZoomOutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: ZoomOutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ZoomOutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: ZoomOutComponent, selector: "tui-image-editor-menus-buttons-zoom-out", inputs: { imageChosen: "imageChosen", imageEditor: "imageEditor" }, ngImport: i0, template: "<div\r\n  [title]=\"'tui-image-editor-angular-menus-buttons-zoomOut' | translate\"\r\n  [class]=\"\r\n    'tie-btn-zoomOut tui-image-editor-item help ' +\r\n    (imageChosen ? 'enabled ' : 'disabled ')\r\n  \"\r\n  (click)=\"imageChosen ? zoomOut() : null\"\r\n>\r\n  <svg class=\"svg_ic-menu\">\r\n    <use xlink:href=\"#ic-zoom-out\" class=\"normal use-default\"></use>\r\n    <use xlink:href=\"#ic-zoom-out\" class=\"disabled use-default\"></use>\r\n    <use xlink:href=\"#ic-zoom-out\" class=\"hover use-default\"></use>\r\n  </svg>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: ZoomOutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tui-image-editor-menus-buttons-zoom-out', template: "<div\r\n  [title]=\"'tui-image-editor-angular-menus-buttons-zoomOut' | translate\"\r\n  [class]=\"\r\n    'tie-btn-zoomOut tui-image-editor-item help ' +\r\n    (imageChosen ? 'enabled ' : 'disabled ')\r\n  \"\r\n  (click)=\"imageChosen ? zoomOut() : null\"\r\n>\r\n  <svg class=\"svg_ic-menu\">\r\n    <use xlink:href=\"#ic-zoom-out\" class=\"normal use-default\"></use>\r\n    <use xlink:href=\"#ic-zoom-out\" class=\"disabled use-default\"></use>\r\n    <use xlink:href=\"#ic-zoom-out\" class=\"hover use-default\"></use>\r\n  </svg>\r\n</div>\r\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { imageChosen: [{
+                type: Input
+            }], imageEditor: [{
+                type: Input
+            }] } });
+
+class DragComponent {
+    constructor() { }
+    get isSelected() {
+        if (this.imageEditor == null) {
+            return false;
+        }
+        const zoomMode = this.imageEditor?._graphics.getZoomMode();
+        return (this.imageEditor.getDrawingMode() == drawingModes.ZOOM &&
+            zoomMode === zoomModes.HAND);
+    }
+    startDrag() {
+        this.imageEditor?.deactivateAll();
+        this.toggleHandMode();
+    }
+    toggleHandMode() {
+        const zoomMode = this.imageEditor?._graphics.getZoomMode();
+        this.imageEditor?.stopDrawingMode();
+        if (zoomMode !== zoomModes.HAND) {
+            this.imageEditor?.startDrawingMode(drawingModes.ZOOM);
+            this.imageEditor?._graphics.startHandMode();
+        }
+        else {
+            this.imageEditor?._graphics.endHandMode();
+        }
+    }
+}
+DragComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: DragComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DragComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: DragComponent, selector: "tui-image-editor-menus-buttons-drag", inputs: { imageChosen: "imageChosen", imageEditor: "imageEditor" }, ngImport: i0, template: "<div\r\n  [title]=\"'tui-image-editor-angular-menus-buttons-drag' | translate\"\r\n  [class]=\"\r\n    'tie-btn-hand tui-image-editor-item help ' +\r\n    (imageChosen ? 'enabled ' : 'disabled ') +\r\n    (isSelected ? 'active ' : '')\r\n  \"\r\n  (click)=\"imageChosen ? startDrag() : null\"\r\n>\r\n  <svg class=\"svg_ic-menu\">\r\n    <use xlink:href=\"#ic-hand\" class=\"normal use-default\"></use>\r\n    <use xlink:href=\"#ic-hand\" class=\"disabled use-default\"></use>\r\n    <use xlink:href=\"#ic-hand\" class=\"hover use-default\"></use>\r\n  </svg>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: DragComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tui-image-editor-menus-buttons-drag', template: "<div\r\n  [title]=\"'tui-image-editor-angular-menus-buttons-drag' | translate\"\r\n  [class]=\"\r\n    'tie-btn-hand tui-image-editor-item help ' +\r\n    (imageChosen ? 'enabled ' : 'disabled ') +\r\n    (isSelected ? 'active ' : '')\r\n  \"\r\n  (click)=\"imageChosen ? startDrag() : null\"\r\n>\r\n  <svg class=\"svg_ic-menu\">\r\n    <use xlink:href=\"#ic-hand\" class=\"normal use-default\"></use>\r\n    <use xlink:href=\"#ic-hand\" class=\"disabled use-default\"></use>\r\n    <use xlink:href=\"#ic-hand\" class=\"hover use-default\"></use>\r\n  </svg>\r\n</div>\r\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { imageChosen: [{
+                type: Input
+            }], imageEditor: [{
+                type: Input
+            }] } });
+
+class UndoComponent {
+    constructor() {
+        this.cancelCroppingRequested = new EventEmitter();
+        this.undoStackSize = 0;
+    }
+    ngOnChanges(changes) {
+        var that = this;
+        if (changes['imageEditor'] && changes['imageEditor'].currentValue != null) {
+            this.imageEditor.on(eventNames.UNDO_STACK_CHANGED, function (length) {
+                that.undoStackSize = length;
+            });
+        }
+    }
+    undo() {
+        if (this.imageEditor != null && !this.imageEditor.isEmptyUndoStack()) {
+            this.cancelCroppingRequested.emit();
+            this.imageEditor.deactivateAll();
+            this.imageEditor.undo();
+        }
+    }
+}
+UndoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: UndoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+UndoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: UndoComponent, selector: "tui-image-editor-menus-buttons-undo", inputs: { imageEditor: "imageEditor" }, outputs: { cancelCroppingRequested: "cancelCroppingRequested" }, usesOnChanges: true, ngImport: i0, template: "<div\r\n  [title]=\"'tui-image-editor-angular-menus-buttons-undo' | translate\"\r\n  [class]=\"\r\n    'tie-btn-undo tui-image-editor-item help ' +\r\n    (undoStackSize != 0 ? 'enabled' : 'disabled')\r\n  \"\r\n  (click)=\"undoStackSize != 0 ? undo() : null\"\r\n>\r\n  <svg class=\"svg_ic-menu\">\r\n    <use xlink:href=\"#ic-undo\" class=\"normal use-default\"></use>\r\n    <use xlink:href=\"#ic-undo\" class=\"disabled use-default\"></use>\r\n    <use xlink:href=\"#ic-undo\" class=\"hover use-default\"></use>\r\n  </svg>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: UndoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tui-image-editor-menus-buttons-undo', template: "<div\r\n  [title]=\"'tui-image-editor-angular-menus-buttons-undo' | translate\"\r\n  [class]=\"\r\n    'tie-btn-undo tui-image-editor-item help ' +\r\n    (undoStackSize != 0 ? 'enabled' : 'disabled')\r\n  \"\r\n  (click)=\"undoStackSize != 0 ? undo() : null\"\r\n>\r\n  <svg class=\"svg_ic-menu\">\r\n    <use xlink:href=\"#ic-undo\" class=\"normal use-default\"></use>\r\n    <use xlink:href=\"#ic-undo\" class=\"disabled use-default\"></use>\r\n    <use xlink:href=\"#ic-undo\" class=\"hover use-default\"></use>\r\n  </svg>\r\n</div>\r\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { imageEditor: [{
+                type: Input
+            }], cancelCroppingRequested: [{
+                type: Output
+            }] } });
+
+class RedoComponent {
+    constructor() {
+        this.cancelCroppingRequested = new EventEmitter();
+        this.redoStackSize = 0;
+    }
+    ngOnChanges(changes) {
+        var that = this;
+        if (changes['imageEditor'] && changes['imageEditor'].currentValue != null) {
+            this.imageEditor.on(eventNames.REDO_STACK_CHANGED, function (length) {
+                that.redoStackSize = length;
+            });
+        }
+    }
+    redo() {
+        if (this.imageEditor != null && !this.imageEditor.isEmptyRedoStack()) {
+            this.cancelCroppingRequested.emit();
+            this.imageEditor.deactivateAll();
+            this.imageEditor.redo();
+        }
+    }
+}
+RedoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: RedoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+RedoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: RedoComponent, selector: "tui-image-editor-menus-buttons-redo", inputs: { imageEditor: "imageEditor" }, outputs: { cancelCroppingRequested: "cancelCroppingRequested" }, usesOnChanges: true, ngImport: i0, template: "<div\r\n  [title]=\"'tui-image-editor-angular-menus-buttons-redo' | translate\"\r\n  [class]=\"\r\n    'tie-btn-redo tui-image-editor-item help ' +\r\n    (redoStackSize != 0 ? 'enabled' : 'disabled')\r\n  \"\r\n  (click)=\"redoStackSize != 0 ? redo() : null\"\r\n>\r\n  <svg class=\"svg_ic-menu\">\r\n    <use xlink:href=\"#ic-redo\" class=\"normal use-default\"></use>\r\n    <use xlink:href=\"#ic-redo\" class=\"disabled use-default\"></use>\r\n    <use xlink:href=\"#ic-redo\" class=\"hover use-default\"></use>\r\n  </svg>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: RedoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tui-image-editor-menus-buttons-redo', template: "<div\r\n  [title]=\"'tui-image-editor-angular-menus-buttons-redo' | translate\"\r\n  [class]=\"\r\n    'tie-btn-redo tui-image-editor-item help ' +\r\n    (redoStackSize != 0 ? 'enabled' : 'disabled')\r\n  \"\r\n  (click)=\"redoStackSize != 0 ? redo() : null\"\r\n>\r\n  <svg class=\"svg_ic-menu\">\r\n    <use xlink:href=\"#ic-redo\" class=\"normal use-default\"></use>\r\n    <use xlink:href=\"#ic-redo\" class=\"disabled use-default\"></use>\r\n    <use xlink:href=\"#ic-redo\" class=\"hover use-default\"></use>\r\n  </svg>\r\n</div>\r\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { imageEditor: [{
+                type: Input
+            }], cancelCroppingRequested: [{
+                type: Output
+            }] } });
+
+class ResetComponent {
+    constructor() {
+        this.cancelCroppingRequested = new EventEmitter();
+        this.resetImage = new EventEmitter();
+    }
+    reset() {
+        this.cancelCroppingRequested.emit();
+        this.resetImage.emit();
+    }
+}
+ResetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: ResetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ResetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: ResetComponent, selector: "tui-image-editor-menus-buttons-reset", inputs: { imageChosen: "imageChosen", imageEditor: "imageEditor" }, outputs: { cancelCroppingRequested: "cancelCroppingRequested", resetImage: "resetImage" }, ngImport: i0, template: "<div\r\n  [title]=\"'tui-image-editor-angular-menus-buttons-reset' | translate\"\r\n  [class]=\"\r\n    'tie-btn-reset tui-image-editor-item help ' +\r\n    (imageChosen ? 'enabled' : 'disabled')\r\n  \"\r\n  (click)=\"imageChosen ? reset() : null\"\r\n>\r\n  <svg class=\"svg_ic-menu\">\r\n    <use xlink:href=\"#ic-reset\" class=\"normal use-default\"></use>\r\n    <use xlink:href=\"#ic-reset\" class=\"disabled use-default\"></use>\r\n    <use xlink:href=\"#ic-reset\" class=\"hover use-default\"></use>\r\n  </svg>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: ResetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tui-image-editor-menus-buttons-reset', template: "<div\r\n  [title]=\"'tui-image-editor-angular-menus-buttons-reset' | translate\"\r\n  [class]=\"\r\n    'tie-btn-reset tui-image-editor-item help ' +\r\n    (imageChosen ? 'enabled' : 'disabled')\r\n  \"\r\n  (click)=\"imageChosen ? reset() : null\"\r\n>\r\n  <svg class=\"svg_ic-menu\">\r\n    <use xlink:href=\"#ic-reset\" class=\"normal use-default\"></use>\r\n    <use xlink:href=\"#ic-reset\" class=\"disabled use-default\"></use>\r\n    <use xlink:href=\"#ic-reset\" class=\"hover use-default\"></use>\r\n  </svg>\r\n</div>\r\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { imageChosen: [{
+                type: Input
+            }], imageEditor: [{
+                type: Input
+            }], cancelCroppingRequested: [{
+                type: Output
+            }], resetImage: [{
+                type: Output
+            }] } });
+
+class DeleteComponent {
+    constructor() {
+        this.cancelCroppingRequested = new EventEmitter();
+    }
+    ngOnChanges(changes) {
+        var that = this;
+        if (changes['imageEditor'] && changes['imageEditor'].currentValue != null) {
+            this.imageEditor.on(eventNames.OBJECT_ACTIVATED, function (props) {
+                that.activeObjectId = props?.id;
+            });
+        }
+    }
+    deleteActiveObject() {
+        if (this.activeObjectId != null) {
+            this.cancelCroppingRequested.emit();
+            try {
+                this.imageEditor.removeActiveObject();
+            }
+            catch (_err) { }
+            this.activeObjectId = null;
+        }
+    }
+}
+DeleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: DeleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DeleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: DeleteComponent, selector: "tui-image-editor-menus-buttons-delete", inputs: { imageChosen: "imageChosen", imageEditor: "imageEditor" }, outputs: { cancelCroppingRequested: "cancelCroppingRequested" }, usesOnChanges: true, ngImport: i0, template: "<div\r\n  [title]=\"'tui-image-editor-angular-menus-buttons-delete' | translate\"\r\n  [class]=\"\r\n    'tie-btn-delete tui-image-editor-item help ' +\r\n    (activeObjectId != null ? 'enabled' : '')\r\n  \"\r\n  (click)=\"activeObjectId != null ? deleteActiveObject() : null\"\r\n>\r\n  <svg class=\"svg_ic-menu\">\r\n    <use xlink:href=\"#ic-delete\" class=\"normal use-default\"></use>\r\n    <use xlink:href=\"#ic-delete\" class=\"disabled use-default\"></use>\r\n    <use xlink:href=\"#ic-delete\" class=\"hover use-default\"></use>\r\n  </svg>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: DeleteComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tui-image-editor-menus-buttons-delete', template: "<div\r\n  [title]=\"'tui-image-editor-angular-menus-buttons-delete' | translate\"\r\n  [class]=\"\r\n    'tie-btn-delete tui-image-editor-item help ' +\r\n    (activeObjectId != null ? 'enabled' : '')\r\n  \"\r\n  (click)=\"activeObjectId != null ? deleteActiveObject() : null\"\r\n>\r\n  <svg class=\"svg_ic-menu\">\r\n    <use xlink:href=\"#ic-delete\" class=\"normal use-default\"></use>\r\n    <use xlink:href=\"#ic-delete\" class=\"disabled use-default\"></use>\r\n    <use xlink:href=\"#ic-delete\" class=\"hover use-default\"></use>\r\n  </svg>\r\n</div>\r\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { imageChosen: [{
+                type: Input
+            }], imageEditor: [{
+                type: Input
+            }], cancelCroppingRequested: [{
+                type: Output
+            }] } });
+
+class DeleteAllComponent {
+    constructor() {
+        this.cancelCroppingRequested = new EventEmitter();
+    }
+    deleteAll() {
+        if (this.imageEditor != null && this.imageChosen) {
+            this.cancelCroppingRequested.emit();
+            this.imageEditor.clearObjects();
+        }
+    }
+}
+DeleteAllComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: DeleteAllComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DeleteAllComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: DeleteAllComponent, selector: "tui-image-editor-menus-buttons-delete-all", inputs: { imageChosen: "imageChosen", imageEditor: "imageEditor" }, outputs: { cancelCroppingRequested: "cancelCroppingRequested" }, ngImport: i0, template: "<div\r\n  [title]=\"'tui-image-editor-angular-menus-buttons-deleteAll' | translate\"\r\n  [class]=\"\r\n    'tie-btn-deleteAll tui-image-editor-item help ' +\r\n    (imageChosen ? 'enabled' : 'disabled')\r\n  \"\r\n  (click)=\"deleteAll()\"\r\n>\r\n  <svg class=\"svg_ic-menu\">\r\n    <use xlink:href=\"#ic-delete-all\" class=\"normal use-default\"></use>\r\n    <use xlink:href=\"#ic-delete-all\" class=\"disabled use-default\"></use>\r\n    <use xlink:href=\"#ic-delete-all\" class=\"hover use-default\"></use>\r\n  </svg>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: DeleteAllComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tui-image-editor-menus-buttons-delete-all', template: "<div\r\n  [title]=\"'tui-image-editor-angular-menus-buttons-deleteAll' | translate\"\r\n  [class]=\"\r\n    'tie-btn-deleteAll tui-image-editor-item help ' +\r\n    (imageChosen ? 'enabled' : 'disabled')\r\n  \"\r\n  (click)=\"deleteAll()\"\r\n>\r\n  <svg class=\"svg_ic-menu\">\r\n    <use xlink:href=\"#ic-delete-all\" class=\"normal use-default\"></use>\r\n    <use xlink:href=\"#ic-delete-all\" class=\"disabled use-default\"></use>\r\n    <use xlink:href=\"#ic-delete-all\" class=\"hover use-default\"></use>\r\n  </svg>\r\n</div>\r\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { imageChosen: [{
+                type: Input
+            }], imageEditor: [{
+                type: Input
+            }], cancelCroppingRequested: [{
+                type: Output
+            }] } });
+
+class CropComponent$1 {
+    constructor() {
+        this.selected = false;
+        this.clicked = new EventEmitter();
+    }
+}
+CropComponent$1.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: CropComponent$1, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CropComponent$1.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: CropComponent$1, selector: "tui-image-editor-menus-buttons-crop", inputs: { imageChosen: "imageChosen", selected: "selected" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div\r\n  (click)=\"imageChosen ? clicked.emit('crop') : null\"\r\n  [title]=\"\r\n    'tui-image-editor-angular-menus-buttons-crop-tooltip' | translate\r\n  \"\r\n  [class]=\"\r\n    'tie-btn-crop tui-image-editor-item normal ' + (selected ? 'active' : '')\r\n  \"\r\n>\r\n  <svg class=\"svg_ic-menu\">\r\n    <use xlink:href=\"#ic-crop\" class=\"normal use-default\"></use>\r\n    <use xlink:href=\"#ic-crop\" class=\"active use-default\"></use>\r\n    <use xlink:href=\"#ic-crop\" class=\"hover use-default\"></use>\r\n  </svg>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: CropComponent$1, decorators: [{
+            type: Component,
+            args: [{ selector: 'tui-image-editor-menus-buttons-crop', template: "<div\r\n  (click)=\"imageChosen ? clicked.emit('crop') : null\"\r\n  [title]=\"\r\n    'tui-image-editor-angular-menus-buttons-crop-tooltip' | translate\r\n  \"\r\n  [class]=\"\r\n    'tie-btn-crop tui-image-editor-item normal ' + (selected ? 'active' : '')\r\n  \"\r\n>\r\n  <svg class=\"svg_ic-menu\">\r\n    <use xlink:href=\"#ic-crop\" class=\"normal use-default\"></use>\r\n    <use xlink:href=\"#ic-crop\" class=\"active use-default\"></use>\r\n    <use xlink:href=\"#ic-crop\" class=\"hover use-default\"></use>\r\n  </svg>\r\n</div>\r\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { imageChosen: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], clicked: [{
+                type: Output
+            }] } });
+
+class CropComponent {
+    constructor() {
+        this.activeCropMode = cropModes.PRESET_NONE;
+        this.CROPMODE_PRESET_NONE = cropModes.PRESET_NONE;
+        this.CROPMODE_PRESET_SQUARE = cropModes.PRESET_SQUARE;
+        this.CROPMODE_PRESET_16_9 = cropModes.PRESET_16_9;
+        this.CROPMODE_PRESET_3_2 = cropModes.PRESET_3_2;
+        this.CROPMODE_PRESET_4_3 = cropModes.PRESET_4_3;
+        this.CROPMODE_PRESET_5_4 = cropModes.PRESET_5_4;
+        this.CROPMODE_PRESET_7_5 = cropModes.PRESET_7_5;
+        this.cancelCroppingRequested = new EventEmitter();
+    }
+    ngOnChanges(changes) {
+        if (changes['imageEditor'] && changes['imageEditor'].currentValue != null) {
+            this.imageEditor.startDrawingMode('CROPPER');
+        }
+    }
+    setCropMode(cropMode) {
+        this.activeCropMode = cropMode;
+        switch (cropMode) {
+            case cropModes.PRESET_SQUARE:
+                this.setCropzoneRect(1 / 1);
+                break;
+            case cropModes.PRESET_3_2:
+                this.setCropzoneRect(3 / 2);
+                break;
+            case cropModes.PRESET_4_3:
+                this.setCropzoneRect(4 / 3);
+                break;
+            case cropModes.PRESET_5_4:
+                this.setCropzoneRect(5 / 4);
+                break;
+            case cropModes.PRESET_7_5:
+                this.setCropzoneRect(7 / 5);
+                break;
+            case cropModes.PRESET_16_9:
+                this.setCropzoneRect(16 / 9);
+                break;
+        }
+    }
+    setCropzoneRect(mode) {
+        this.imageEditor.setCropzoneRect(mode);
+    }
+    applyCrop() {
+        if (this.imageEditor != null) {
+            const cropRect = this.imageEditor.getCropzoneRect();
+            if (cropRect && !isEmptyCropzone(cropRect)) {
+                this.imageEditor
+                    .crop(cropRect)
+                    .then(() => {
+                    this.cancelCrop();
+                    this.imageEditor._invoker.fire(eventNames.EXECUTE_COMMAND, historyNames.CROP);
+                })['catch']((message) => Promise.reject(message));
+            }
+        }
+    }
+    cancelCrop() {
+        this.cancelCroppingRequested.emit();
+    }
+}
+CropComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: CropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CropComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: CropComponent, selector: "tui-image-editor-submenus-crop", inputs: { imageEditor: "imageEditor" }, outputs: { cancelCroppingRequested: "cancelCroppingRequested" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"tui-image-editor-menu-crop\">\r\n  <div class=\"tui-image-editor-submenu-item\">\r\n    <div\r\n      class=\"tui-image-editor-d-flex tui-image-editor-justify-content-center\"\r\n    >\r\n      <div\r\n        class=\"tie-crop-preset-button tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-flex-nowrap tui-image-editor-align-items-center tui-image-editor-overflowable-x tui-image-editor-py-3\"\r\n      >\r\n        <div\r\n          [class]=\"\r\n            'tui-image-editor-button preset preset-none ' +\r\n            (activeCropMode == CROPMODE_PRESET_NONE ? 'active' : '')\r\n          \"\r\n          (click)=\"setCropMode(CROPMODE_PRESET_NONE)\"\r\n        >\r\n          <div>\r\n            <svg class=\"svg_ic-submenu\">\r\n              <use\r\n                xlink:href=\"#ic-shape-rectangle\"\r\n                class=\"normal use-default\"\r\n              ></use>\r\n              <use\r\n                xlink:href=\"#ic-shape-rectangle\"\r\n                class=\"active use-default\"\r\n              ></use>\r\n            </svg>\r\n          </div>\r\n          <label>\r\n            {{ \"tui-image-editor-angular-submenus-crop-custom\" | translate }}\r\n          </label>\r\n        </div>\r\n        <div\r\n          [class]=\"\r\n            'tui-image-editor-button preset preset-square ' +\r\n            (activeCropMode == CROPMODE_PRESET_SQUARE ? 'active' : '')\r\n          \"\r\n          (click)=\"setCropMode(CROPMODE_PRESET_SQUARE)\"\r\n        >\r\n          <div>\r\n            <svg class=\"svg_ic-submenu\">\r\n              <use xlink:href=\"#ic-crop\" class=\"normal use-default\"></use>\r\n              <use xlink:href=\"#ic-crop\" class=\"active use-default\"></use>\r\n            </svg>\r\n          </div>\r\n          <label>\r\n            {{ \"tui-image-editor-angular-submenus-crop-square\" | translate }}\r\n          </label>\r\n        </div>\r\n        <div\r\n          [class]=\"\r\n            'tui-image-editor-button preset preset-3-2 ' +\r\n            (activeCropMode == CROPMODE_PRESET_3_2 ? 'active' : '')\r\n          \"\r\n          (click)=\"setCropMode(CROPMODE_PRESET_3_2)\"\r\n        >\r\n          <div>\r\n            <svg class=\"svg_ic-submenu\">\r\n              <use xlink:href=\"#ic-crop\" class=\"normal use-default\"></use>\r\n              <use xlink:href=\"#ic-crop\" class=\"active use-default\"></use>\r\n            </svg>\r\n          </div>\r\n          <label> 3:2 </label>\r\n        </div>\r\n        <div\r\n          [class]=\"\r\n            'tui-image-editor-button preset preset-4-3 ' +\r\n            (activeCropMode == CROPMODE_PRESET_4_3 ? 'active' : '')\r\n          \"\r\n          (click)=\"setCropMode(CROPMODE_PRESET_4_3)\"\r\n        >\r\n          <div>\r\n            <svg class=\"svg_ic-submenu\">\r\n              <use xlink:href=\"#ic-crop\" class=\"normal use-default\"></use>\r\n              <use xlink:href=\"#ic-crop\" class=\"active use-default\"></use>\r\n            </svg>\r\n          </div>\r\n          <label> 4:3 </label>\r\n        </div>\r\n        <div\r\n          [class]=\"\r\n            'tui-image-editor-button preset preset-5-4 ' +\r\n            (activeCropMode == CROPMODE_PRESET_5_4 ? 'active' : '')\r\n          \"\r\n          (click)=\"setCropMode(CROPMODE_PRESET_5_4)\"\r\n        >\r\n          <div>\r\n            <svg class=\"svg_ic-submenu\">\r\n              <use xlink:href=\"#ic-crop\" class=\"normal use-default\"></use>\r\n              <use xlink:href=\"#ic-crop\" class=\"active use-default\"></use>\r\n            </svg>\r\n          </div>\r\n          <label> 5:4 </label>\r\n        </div>\r\n        <div\r\n          [class]=\"\r\n            'tui-image-editor-button preset preset-7-5 ' +\r\n            (activeCropMode == CROPMODE_PRESET_7_5 ? 'active' : '')\r\n          \"\r\n          (click)=\"setCropMode(CROPMODE_PRESET_7_5)\"\r\n        >\r\n          <div>\r\n            <svg class=\"svg_ic-submenu\">\r\n              <use xlink:href=\"#ic-crop\" class=\"normal use-default\"></use>\r\n              <use xlink:href=\"#ic-crop\" class=\"active use-default\"></use>\r\n            </svg>\r\n          </div>\r\n          <label> 7:5 </label>\r\n        </div>\r\n        <div\r\n          [class]=\"\r\n            'tui-image-editor-button preset preset-16-9 ' +\r\n            (activeCropMode == CROPMODE_PRESET_16_9 ? 'active' : '')\r\n          \"\r\n          (click)=\"setCropMode(CROPMODE_PRESET_16_9)\"\r\n        >\r\n          <div>\r\n            <svg class=\"svg_ic-submenu\">\r\n              <use xlink:href=\"#ic-crop\" class=\"normal use-default\"></use>\r\n              <use xlink:href=\"#ic-crop\" class=\"active use-default\"></use>\r\n            </svg>\r\n          </div>\r\n          <label> 16:9 </label>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div\r\n      class=\"tie-crop-button action tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-flex-nowrap tui-image-editor-align-items-center tui-image-editor-justify-content-center tui-image-editor-mb-3\"\r\n    >\r\n      <div\r\n        class=\"tui-image-editor-button apply tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-align-items-center\"\r\n        (click)=\"applyCrop()\"\r\n      >\r\n        <svg class=\"svg_ic-menu\">\r\n          <use xlink:href=\"#ic-apply\" class=\"normal use-default\"></use>\r\n          <use xlink:href=\"#ic-apply\" class=\"active use-default\"></use>\r\n        </svg>\r\n        <label>\r\n          {{ \"tui-image-editor-angular-submenus-crop-apply\" | translate }}\r\n        </label>\r\n      </div>\r\n      <div\r\n        class=\"tui-image-editor-button cancel tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-align-items-center\"\r\n        (click)=\"cancelCrop()\"\r\n      >\r\n        <svg class=\"svg_ic-menu\">\r\n          <use xlink:href=\"#ic-cancel\" class=\"normal use-default\"></use>\r\n          <use xlink:href=\"#ic-cancel\" class=\"active use-default\"></use>\r\n        </svg>\r\n        <label>\r\n          {{ \"tui-image-editor-angular-submenus-crop-cancel\" | translate }}\r\n        </label>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: CropComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tui-image-editor-submenus-crop', template: "<div class=\"tui-image-editor-menu-crop\">\r\n  <div class=\"tui-image-editor-submenu-item\">\r\n    <div\r\n      class=\"tui-image-editor-d-flex tui-image-editor-justify-content-center\"\r\n    >\r\n      <div\r\n        class=\"tie-crop-preset-button tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-flex-nowrap tui-image-editor-align-items-center tui-image-editor-overflowable-x tui-image-editor-py-3\"\r\n      >\r\n        <div\r\n          [class]=\"\r\n            'tui-image-editor-button preset preset-none ' +\r\n            (activeCropMode == CROPMODE_PRESET_NONE ? 'active' : '')\r\n          \"\r\n          (click)=\"setCropMode(CROPMODE_PRESET_NONE)\"\r\n        >\r\n          <div>\r\n            <svg class=\"svg_ic-submenu\">\r\n              <use\r\n                xlink:href=\"#ic-shape-rectangle\"\r\n                class=\"normal use-default\"\r\n              ></use>\r\n              <use\r\n                xlink:href=\"#ic-shape-rectangle\"\r\n                class=\"active use-default\"\r\n              ></use>\r\n            </svg>\r\n          </div>\r\n          <label>\r\n            {{ \"tui-image-editor-angular-submenus-crop-custom\" | translate }}\r\n          </label>\r\n        </div>\r\n        <div\r\n          [class]=\"\r\n            'tui-image-editor-button preset preset-square ' +\r\n            (activeCropMode == CROPMODE_PRESET_SQUARE ? 'active' : '')\r\n          \"\r\n          (click)=\"setCropMode(CROPMODE_PRESET_SQUARE)\"\r\n        >\r\n          <div>\r\n            <svg class=\"svg_ic-submenu\">\r\n              <use xlink:href=\"#ic-crop\" class=\"normal use-default\"></use>\r\n              <use xlink:href=\"#ic-crop\" class=\"active use-default\"></use>\r\n            </svg>\r\n          </div>\r\n          <label>\r\n            {{ \"tui-image-editor-angular-submenus-crop-square\" | translate }}\r\n          </label>\r\n        </div>\r\n        <div\r\n          [class]=\"\r\n            'tui-image-editor-button preset preset-3-2 ' +\r\n            (activeCropMode == CROPMODE_PRESET_3_2 ? 'active' : '')\r\n          \"\r\n          (click)=\"setCropMode(CROPMODE_PRESET_3_2)\"\r\n        >\r\n          <div>\r\n            <svg class=\"svg_ic-submenu\">\r\n              <use xlink:href=\"#ic-crop\" class=\"normal use-default\"></use>\r\n              <use xlink:href=\"#ic-crop\" class=\"active use-default\"></use>\r\n            </svg>\r\n          </div>\r\n          <label> 3:2 </label>\r\n        </div>\r\n        <div\r\n          [class]=\"\r\n            'tui-image-editor-button preset preset-4-3 ' +\r\n            (activeCropMode == CROPMODE_PRESET_4_3 ? 'active' : '')\r\n          \"\r\n          (click)=\"setCropMode(CROPMODE_PRESET_4_3)\"\r\n        >\r\n          <div>\r\n            <svg class=\"svg_ic-submenu\">\r\n              <use xlink:href=\"#ic-crop\" class=\"normal use-default\"></use>\r\n              <use xlink:href=\"#ic-crop\" class=\"active use-default\"></use>\r\n            </svg>\r\n          </div>\r\n          <label> 4:3 </label>\r\n        </div>\r\n        <div\r\n          [class]=\"\r\n            'tui-image-editor-button preset preset-5-4 ' +\r\n            (activeCropMode == CROPMODE_PRESET_5_4 ? 'active' : '')\r\n          \"\r\n          (click)=\"setCropMode(CROPMODE_PRESET_5_4)\"\r\n        >\r\n          <div>\r\n            <svg class=\"svg_ic-submenu\">\r\n              <use xlink:href=\"#ic-crop\" class=\"normal use-default\"></use>\r\n              <use xlink:href=\"#ic-crop\" class=\"active use-default\"></use>\r\n            </svg>\r\n          </div>\r\n          <label> 5:4 </label>\r\n        </div>\r\n        <div\r\n          [class]=\"\r\n            'tui-image-editor-button preset preset-7-5 ' +\r\n            (activeCropMode == CROPMODE_PRESET_7_5 ? 'active' : '')\r\n          \"\r\n          (click)=\"setCropMode(CROPMODE_PRESET_7_5)\"\r\n        >\r\n          <div>\r\n            <svg class=\"svg_ic-submenu\">\r\n              <use xlink:href=\"#ic-crop\" class=\"normal use-default\"></use>\r\n              <use xlink:href=\"#ic-crop\" class=\"active use-default\"></use>\r\n            </svg>\r\n          </div>\r\n          <label> 7:5 </label>\r\n        </div>\r\n        <div\r\n          [class]=\"\r\n            'tui-image-editor-button preset preset-16-9 ' +\r\n            (activeCropMode == CROPMODE_PRESET_16_9 ? 'active' : '')\r\n          \"\r\n          (click)=\"setCropMode(CROPMODE_PRESET_16_9)\"\r\n        >\r\n          <div>\r\n            <svg class=\"svg_ic-submenu\">\r\n              <use xlink:href=\"#ic-crop\" class=\"normal use-default\"></use>\r\n              <use xlink:href=\"#ic-crop\" class=\"active use-default\"></use>\r\n            </svg>\r\n          </div>\r\n          <label> 16:9 </label>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div\r\n      class=\"tie-crop-button action tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-flex-nowrap tui-image-editor-align-items-center tui-image-editor-justify-content-center tui-image-editor-mb-3\"\r\n    >\r\n      <div\r\n        class=\"tui-image-editor-button apply tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-align-items-center\"\r\n        (click)=\"applyCrop()\"\r\n      >\r\n        <svg class=\"svg_ic-menu\">\r\n          <use xlink:href=\"#ic-apply\" class=\"normal use-default\"></use>\r\n          <use xlink:href=\"#ic-apply\" class=\"active use-default\"></use>\r\n        </svg>\r\n        <label>\r\n          {{ \"tui-image-editor-angular-submenus-crop-apply\" | translate }}\r\n        </label>\r\n      </div>\r\n      <div\r\n        class=\"tui-image-editor-button cancel tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-align-items-center\"\r\n        (click)=\"cancelCrop()\"\r\n      >\r\n        <svg class=\"svg_ic-menu\">\r\n          <use xlink:href=\"#ic-cancel\" class=\"normal use-default\"></use>\r\n          <use xlink:href=\"#ic-cancel\" class=\"active use-default\"></use>\r\n        </svg>\r\n        <label>\r\n          {{ \"tui-image-editor-angular-submenus-crop-cancel\" | translate }}\r\n        </label>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { imageEditor: [{
+                type: Input
+            }], cancelCroppingRequested: [{
+                type: Output
+            }] } });
+
+class FlipComponent$1 {
+    constructor() {
+        this.selected = false;
+        this.clicked = new EventEmitter();
+    }
+}
+FlipComponent$1.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: FlipComponent$1, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FlipComponent$1.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: FlipComponent$1, selector: "tui-image-editor-menus-buttons-flip", inputs: { imageChosen: "imageChosen", selected: "selected" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div\r\n  (click)=\"imageChosen ? clicked.emit('flip') : null\"\r\n  [title]=\"'tui-image-editor-angular-menus-buttons-flip' | translate\"\r\n  [class]=\"\r\n    'tie-btn-flip tui-image-editor-item normal ' + (selected ? 'active' : '')\r\n  \"\r\n>\r\n  <svg class=\"svg_ic-menu\">\r\n    <use xlink:href=\"#ic-flip\" class=\"normal use-default\"></use>\r\n    <use xlink:href=\"#ic-flip\" class=\"active use-default\"></use>\r\n    <use xlink:href=\"#ic-flip\" class=\"hover use-default\"></use>\r\n  </svg>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: FlipComponent$1, decorators: [{
+            type: Component,
+            args: [{ selector: 'tui-image-editor-menus-buttons-flip', template: "<div\r\n  (click)=\"imageChosen ? clicked.emit('flip') : null\"\r\n  [title]=\"'tui-image-editor-angular-menus-buttons-flip' | translate\"\r\n  [class]=\"\r\n    'tie-btn-flip tui-image-editor-item normal ' + (selected ? 'active' : '')\r\n  \"\r\n>\r\n  <svg class=\"svg_ic-menu\">\r\n    <use xlink:href=\"#ic-flip\" class=\"normal use-default\"></use>\r\n    <use xlink:href=\"#ic-flip\" class=\"active use-default\"></use>\r\n    <use xlink:href=\"#ic-flip\" class=\"hover use-default\"></use>\r\n  </svg>\r\n</div>\r\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { imageChosen: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], clicked: [{
+                type: Output
+            }] } });
+
+class FlipComponent {
+    constructor() { }
+    async flipX() {
+        try {
+            await this.imageEditor?.flipX();
+        }
+        catch (_err) {
+            console.error(_err);
+        }
+    }
+    async flipY() {
+        try {
+            await this.imageEditor?.flipY();
+        }
+        catch (_err) {
+            console.error(_err);
+        }
+    }
+    async resetFlip() {
+        try {
+            await this.imageEditor?.resetFlip();
+        }
+        catch (_err) {
+            console.error(_err);
+        }
+    }
+}
+FlipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: FlipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FlipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: FlipComponent, selector: "tui-image-editor-submenus-flip", inputs: { imageEditor: "imageEditor" }, ngImport: i0, template: "<div class=\"tui-image-editor-menu-flip\">\r\n  <div\r\n    class=\"tie-flip-button tui-image-editor-submenu-item tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-align-items-center tui-image-editor-justify-content-center tui-image-editor-my-3\"\r\n  >\r\n    <div>\r\n      <div class=\"tui-image-editor-button flipX\" (click)=\"flipX()\">\r\n        <div>\r\n          <svg class=\"svg_ic-submenu\">\r\n            <use xlink:href=\"#ic-flip-x\" class=\"normal use-default\"></use>\r\n            <use xlink:href=\"#ic-flip-x\" class=\"active use-default\"></use>\r\n          </svg>\r\n        </div>\r\n        <label>\r\n          {{ \"tui-image-editor-angular-submenus-flip-x\" | translate }}\r\n        </label>\r\n      </div>\r\n      <div class=\"tui-image-editor-button flipY\" (click)=\"flipY()\">\r\n        <div>\r\n          <svg class=\"svg_ic-submenu\">\r\n            <use xlink:href=\"#ic-flip-y\" class=\"normal use-default\"></use>\r\n            <use xlink:href=\"#ic-flip-y\" class=\"active use-default\"></use>\r\n          </svg>\r\n        </div>\r\n        <label>\r\n          {{ \"tui-image-editor-angular-submenus-flip-y\" | translate }}\r\n        </label>\r\n      </div>\r\n    </div>\r\n    <div class=\"tui-image-editor-partition\">\r\n      <div></div>\r\n    </div>\r\n    <div>\r\n      <div class=\"tui-image-editor-button resetFlip\" (click)=\"resetFlip()\">\r\n        <div>\r\n          <svg class=\"svg_ic-submenu\">\r\n            <use xlink:href=\"#ic-flip-reset\" class=\"normal use-default\"></use>\r\n            <use xlink:href=\"#ic-flip-reset\" class=\"active use-default\"></use>\r\n          </svg>\r\n        </div>\r\n        <label>\r\n          {{ \"tui-image-editor-angular-submenus-flip-reset\" | translate }}\r\n        </label>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: FlipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tui-image-editor-submenus-flip', template: "<div class=\"tui-image-editor-menu-flip\">\r\n  <div\r\n    class=\"tie-flip-button tui-image-editor-submenu-item tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-align-items-center tui-image-editor-justify-content-center tui-image-editor-my-3\"\r\n  >\r\n    <div>\r\n      <div class=\"tui-image-editor-button flipX\" (click)=\"flipX()\">\r\n        <div>\r\n          <svg class=\"svg_ic-submenu\">\r\n            <use xlink:href=\"#ic-flip-x\" class=\"normal use-default\"></use>\r\n            <use xlink:href=\"#ic-flip-x\" class=\"active use-default\"></use>\r\n          </svg>\r\n        </div>\r\n        <label>\r\n          {{ \"tui-image-editor-angular-submenus-flip-x\" | translate }}\r\n        </label>\r\n      </div>\r\n      <div class=\"tui-image-editor-button flipY\" (click)=\"flipY()\">\r\n        <div>\r\n          <svg class=\"svg_ic-submenu\">\r\n            <use xlink:href=\"#ic-flip-y\" class=\"normal use-default\"></use>\r\n            <use xlink:href=\"#ic-flip-y\" class=\"active use-default\"></use>\r\n          </svg>\r\n        </div>\r\n        <label>\r\n          {{ \"tui-image-editor-angular-submenus-flip-y\" | translate }}\r\n        </label>\r\n      </div>\r\n    </div>\r\n    <div class=\"tui-image-editor-partition\">\r\n      <div></div>\r\n    </div>\r\n    <div>\r\n      <div class=\"tui-image-editor-button resetFlip\" (click)=\"resetFlip()\">\r\n        <div>\r\n          <svg class=\"svg_ic-submenu\">\r\n            <use xlink:href=\"#ic-flip-reset\" class=\"normal use-default\"></use>\r\n            <use xlink:href=\"#ic-flip-reset\" class=\"active use-default\"></use>\r\n          </svg>\r\n        </div>\r\n        <label>\r\n          {{ \"tui-image-editor-angular-submenus-flip-reset\" | translate }}\r\n        </label>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { imageEditor: [{
+                type: Input
+            }] } });
+
+class RotateComponent$1 {
+    constructor() {
+        this.selected = false;
+        this.clicked = new EventEmitter();
+    }
+}
+RotateComponent$1.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: RotateComponent$1, deps: [], target: i0.ɵɵFactoryTarget.Component });
+RotateComponent$1.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: RotateComponent$1, selector: "tui-image-editor-menus-buttons-rotate", inputs: { imageChosen: "imageChosen", selected: "selected" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div\r\n  (click)=\"imageChosen ? clicked.emit('rotate') : null\"\r\n  [title]=\"'tui-image-editor-angular-menus-buttons-rotate' | translate\"\r\n  [class]=\"\r\n    'tie-btn-rotate tui-image-editor-item normal ' +\r\n    (selected ? 'active' : '')\r\n  \"\r\n>\r\n  <svg class=\"svg_ic-menu\">\r\n    <use xlink:href=\"#ic-rotate\" class=\"normal use-default\"></use>\r\n    <use xlink:href=\"#ic-rotate\" class=\"active use-default\"></use>\r\n    <use xlink:href=\"#ic-rotate\" class=\"hover use-default\"></use>\r\n  </svg>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: RotateComponent$1, decorators: [{
+            type: Component,
+            args: [{ selector: 'tui-image-editor-menus-buttons-rotate', template: "<div\r\n  (click)=\"imageChosen ? clicked.emit('rotate') : null\"\r\n  [title]=\"'tui-image-editor-angular-menus-buttons-rotate' | translate\"\r\n  [class]=\"\r\n    'tie-btn-rotate tui-image-editor-item normal ' +\r\n    (selected ? 'active' : '')\r\n  \"\r\n>\r\n  <svg class=\"svg_ic-menu\">\r\n    <use xlink:href=\"#ic-rotate\" class=\"normal use-default\"></use>\r\n    <use xlink:href=\"#ic-rotate\" class=\"active use-default\"></use>\r\n    <use xlink:href=\"#ic-rotate\" class=\"hover use-default\"></use>\r\n  </svg>\r\n</div>\r\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { imageChosen: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], clicked: [{
+                type: Output
+            }] } });
+
+class RotateComponent {
+    constructor() {
+        this.rotationChange = new EventEmitter();
+    }
+    async rotateImage(rotationAngle) {
+        const newAngle = this.rotation + rotationAngle;
+        const isRotatable = newAngle >= -360 && newAngle <= 360;
+        if (isRotatable) {
+            try {
+                await this.imageEditor?.setAngle(newAngle);
+                this.rotation = newAngle;
+                this.rotationChange.emit(newAngle);
+            }
+            catch (_err) {
+                console.error(_err);
+            }
+        }
+    }
+    async rotationChanged(currentRotationValue, isSilent) {
+        let rotationValueToUse = typeof currentRotationValue === 'number'
+            ? currentRotationValue
+            : this.rotation;
+        let functionToExecute = () => {
+            this.imageEditor
+                ?.setAngle(rotationValueToUse, isSilent)
+                .catch((_err) => {
+                console.error(_err);
+            })
+                .finally(() => {
+                this.rotationChange.emit(rotationValueToUse);
+            });
+        };
+        if (isSilent) {
+            functionToExecute();
+        }
+        else {
+            setTimeout(functionToExecute);
+        }
+    }
+}
+RotateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: RotateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+RotateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: RotateComponent, selector: "tui-image-editor-submenus-rotate", inputs: { imageEditor: "imageEditor", rotation: "rotation" }, outputs: { rotationChange: "rotationChange" }, ngImport: i0, template: "<div class=\"tui-image-editor-menu-rotate\">\r\n  <div class=\"tui-image-editor-submenu-item\">\r\n    <div class=\"tie-rotate-button tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-justify-content-center tui-image-editor-my-3\">\r\n      <div class=\"tui-image-editor-button clockwise\" (click)=\"rotateImage(30)\">\r\n        <div>\r\n          <svg class=\"svg_ic-submenu\">\r\n            <use\r\n              xlink:href=\"#ic-rotate-clockwise\"\r\n              class=\"normal use-default\"\r\n            ></use>\r\n            <use\r\n              xlink:href=\"#ic-rotate-clockwise\"\r\n              class=\"active use-default\"\r\n            ></use>\r\n          </svg>\r\n        </div>\r\n        <label> 30\u00B0 </label>\r\n      </div>\r\n      <div\r\n        class=\"tui-image-editor-button counterclockwise\"\r\n        (click)=\"rotateImage(-30)\"\r\n      >\r\n        <div>\r\n          <svg class=\"svg_ic-submenu\">\r\n            <use\r\n              xlink:href=\"#ic-rotate-counterclockwise\"\r\n              class=\"normal use-default\"\r\n            ></use>\r\n            <use\r\n              xlink:href=\"#ic-rotate-counterclockwise\"\r\n              class=\"active use-default\"\r\n            ></use>\r\n          </svg>\r\n        </div>\r\n        <label> -30\u00B0 </label>\r\n      </div>\r\n    </div>\r\n    <div\r\n      class=\"tui-image-editor-newline tui-image-editor-range-wrap tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-align-items-center tui-image-editor-justify-content-center tui-image-editor-my-3\"\r\n    >\r\n      <label class=\"range\">{{\r\n        \"tui-image-editor-angular-submenus-rotate-slider\" | translate\r\n      }}</label>\r\n      <input\r\n        type=\"range\"\r\n        [(ngModel)]=\"rotation\"\r\n        (ngModelChange)=\"rotationChanged($event, true)\"\r\n        (change)=\"rotationChanged($event, false)\"\r\n        min=\"-360\"\r\n        max=\"360\"\r\n      />\r\n      <input\r\n        type=\"number\"\r\n        min=\"-360\"\r\n        max=\"360\"\r\n        step=\"1\"\r\n        class=\"tie-rotate-range-value tui-image-editor-range-value\"\r\n        [(ngModel)]=\"rotation\"\r\n        (ngModelChange)=\"rotationChanged($event, true)\"\r\n        (change)=\"rotationChanged($event, false)\"\r\n      />\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: RotateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tui-image-editor-submenus-rotate', template: "<div class=\"tui-image-editor-menu-rotate\">\r\n  <div class=\"tui-image-editor-submenu-item\">\r\n    <div class=\"tie-rotate-button tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-justify-content-center tui-image-editor-my-3\">\r\n      <div class=\"tui-image-editor-button clockwise\" (click)=\"rotateImage(30)\">\r\n        <div>\r\n          <svg class=\"svg_ic-submenu\">\r\n            <use\r\n              xlink:href=\"#ic-rotate-clockwise\"\r\n              class=\"normal use-default\"\r\n            ></use>\r\n            <use\r\n              xlink:href=\"#ic-rotate-clockwise\"\r\n              class=\"active use-default\"\r\n            ></use>\r\n          </svg>\r\n        </div>\r\n        <label> 30\u00B0 </label>\r\n      </div>\r\n      <div\r\n        class=\"tui-image-editor-button counterclockwise\"\r\n        (click)=\"rotateImage(-30)\"\r\n      >\r\n        <div>\r\n          <svg class=\"svg_ic-submenu\">\r\n            <use\r\n              xlink:href=\"#ic-rotate-counterclockwise\"\r\n              class=\"normal use-default\"\r\n            ></use>\r\n            <use\r\n              xlink:href=\"#ic-rotate-counterclockwise\"\r\n              class=\"active use-default\"\r\n            ></use>\r\n          </svg>\r\n        </div>\r\n        <label> -30\u00B0 </label>\r\n      </div>\r\n    </div>\r\n    <div\r\n      class=\"tui-image-editor-newline tui-image-editor-range-wrap tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-align-items-center tui-image-editor-justify-content-center tui-image-editor-my-3\"\r\n    >\r\n      <label class=\"range\">{{\r\n        \"tui-image-editor-angular-submenus-rotate-slider\" | translate\r\n      }}</label>\r\n      <input\r\n        type=\"range\"\r\n        [(ngModel)]=\"rotation\"\r\n        (ngModelChange)=\"rotationChanged($event, true)\"\r\n        (change)=\"rotationChanged($event, false)\"\r\n        min=\"-360\"\r\n        max=\"360\"\r\n      />\r\n      <input\r\n        type=\"number\"\r\n        min=\"-360\"\r\n        max=\"360\"\r\n        step=\"1\"\r\n        class=\"tie-rotate-range-value tui-image-editor-range-value\"\r\n        [(ngModel)]=\"rotation\"\r\n        (ngModelChange)=\"rotationChanged($event, true)\"\r\n        (change)=\"rotationChanged($event, false)\"\r\n      />\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { imageEditor: [{
+                type: Input
+            }], rotation: [{
+                type: Input
+            }], rotationChange: [{
+                type: Output
+            }] } });
+
+class DrawComponent$1 {
+    constructor() {
+        this.selected = false;
+        this.clicked = new EventEmitter();
+    }
+}
+DrawComponent$1.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: DrawComponent$1, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DrawComponent$1.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: DrawComponent$1, selector: "tui-image-editor-menus-buttons-draw", inputs: { imageChosen: "imageChosen", selected: "selected" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div\r\n  (click)=\"imageChosen ? clicked.emit('draw') : null\"\r\n  [title]=\"'tui-image-editor-angular-menus-buttons-draw' | translate\"\r\n  [class]=\"\r\n    'tie-btn-draw tui-image-editor-item normal ' + (selected ? 'active' : '')\r\n  \"\r\n>\r\n  <svg class=\"svg_ic-menu\">\r\n    <use xlink:href=\"#ic-draw\" class=\"normal use-default\"></use>\r\n    <use xlink:href=\"#ic-draw\" class=\"active use-default\"></use>\r\n    <use xlink:href=\"#ic-draw\" class=\"hover use-default\"></use>\r\n  </svg>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: DrawComponent$1, decorators: [{
+            type: Component,
+            args: [{ selector: 'tui-image-editor-menus-buttons-draw', template: "<div\r\n  (click)=\"imageChosen ? clicked.emit('draw') : null\"\r\n  [title]=\"'tui-image-editor-angular-menus-buttons-draw' | translate\"\r\n  [class]=\"\r\n    'tie-btn-draw tui-image-editor-item normal ' + (selected ? 'active' : '')\r\n  \"\r\n>\r\n  <svg class=\"svg_ic-menu\">\r\n    <use xlink:href=\"#ic-draw\" class=\"normal use-default\"></use>\r\n    <use xlink:href=\"#ic-draw\" class=\"active use-default\"></use>\r\n    <use xlink:href=\"#ic-draw\" class=\"hover use-default\"></use>\r\n  </svg>\r\n</div>\r\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { imageChosen: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], clicked: [{
+                type: Output
+            }] } });
+
+class ToolsConfigService {
+    constructor() {
+        this.defaultConfig = {
+            pen: {
+                drawStrokeWidthValue: 5,
+                drawType: 'free',
+                drawStrokeColor: 'rgb(60, 60, 60)'
+            },
+            text: {
+                fontSize: 16,
+                fontFamily: 'Arial',
+                color: '#000000',
+            },
+        };
+        this.configSubject = new BehaviorSubject(this.defaultConfig);
+        this.config$ = this.configSubject.asObservable();
+    }
+    updateConfig(tool, newConfig) {
+        const currentConfig = this.configSubject.getValue();
+        const updatedToolConfig = { ...currentConfig[tool], ...newConfig };
+        this.configSubject.next({
+            ...currentConfig,
+            [tool]: updatedToolConfig,
+        });
+    }
+    changePenConfig(newConfig) {
+        const currentConf = this.configSubject.getValue();
+        this.updateConfig('pen', { ...currentConf.pen, ...newConfig });
+    }
+    changeTextConfig(newConfig) {
+        this.updateConfig('text', { ...this.defaultConfig.text, ...newConfig });
+    }
+}
+ToolsConfigService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: ToolsConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ToolsConfigService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: ToolsConfigService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: ToolsConfigService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class DrawComponent {
+    constructor(toolConfigService) {
+        this.toolConfigService = toolConfigService;
+        this.defaultDrawShapeColors = defaultColors;
+        this.drawStrokeWidthValue = 12;
+        this.drawStrokeColor = 'rgba(0, 169, 255, 1)';
+        this.onObjectActivatedEventListener = this.onObjectActivated.bind(this);
+        this.toolConfigService.config$.subscribe(config => {
+            const { drawType, drawStrokeColor, drawStrokeWidthValue } = config.pen;
+            this.drawStrokeWidthValue = drawStrokeWidthValue;
+            this.drawType = drawType;
+            this.drawStrokeColor = drawStrokeColor;
+        });
+    }
+    ngOnChanges(changes) {
+        var that = this;
+        if (changes['imageEditor']) {
+            this.activeObjectId = getActiveObjectId(changes['imageEditor'].currentValue);
+            this.checkActiveObject(this.activeObjectId, true);
+            changes['imageEditor'].previousValue?.off(eventNames.OBJECT_ACTIVATED, that.onObjectActivatedEventListener);
+            changes['imageEditor'].currentValue?.on(eventNames.OBJECT_ACTIVATED, that.onObjectActivatedEventListener);
+        }
+    }
+    ngOnDestroy() {
+        if (this.imageEditor) {
+            this.imageEditor.off(eventNames.OBJECT_ACTIVATED, this.onObjectActivatedEventListener);
+        }
+    }
+    onObjectActivated(props) {
+        this.activeObjectId = props?.id;
+        this.checkActiveObject(this.activeObjectId);
+    }
+    checkActiveObject(activeObjectId, enableDrawModeIfNoActiveObject = false) {
+        let ifNoActiveObject = () => {
+            this.setDrawMode('free', {
+                width: this.drawStrokeWidthValue,
+                color: this.drawStrokeColor,
+            });
+        };
+        if (activeObjectId != null) {
+            var props = this.imageEditor?.getObjectProperties(activeObjectId, [
+                'type',
+                'strokeWidth',
+                'stroke',
+            ]);
+            if (props && (props.type === 'path' || props.type === 'line')) {
+                this.drawStrokeWidthValue = props.strokeWidth;
+                this.drawStrokeColor = props.stroke;
+            }
+            else if (enableDrawModeIfNoActiveObject) {
+                ifNoActiveObject();
+            }
+        }
+        else if (enableDrawModeIfNoActiveObject) {
+            ifNoActiveObject();
+        }
+    }
+    drawStrokeWidthChanged(currentStrokeWidth, isSilent) {
+        this.setDrawMode(this.drawType, {
+            width: typeof currentStrokeWidth === "number" ? currentStrokeWidth : this.drawStrokeWidthValue,
+            color: this.drawStrokeColor,
+        });
+        this.strokeChangeActiveObject('strokeWidth', isSilent);
+        this.toolConfigService.changePenConfig({ drawStrokeWidthValue: (typeof currentStrokeWidth === "number" ? currentStrokeWidth : this.drawStrokeWidthValue) });
+    }
+    setDrawType(type) {
+        clearSelection(this.imageEditor);
+        if (this.drawType != type) {
+            this.drawType = type;
+            this.setDrawMode(this.drawType, {
+                width: this.drawStrokeWidthValue,
+                color: this.drawStrokeColor,
+            });
+            this.toolConfigService.changePenConfig({ drawType: type });
+        }
+        else {
+            this.drawType = null;
+            this.imageEditor.stopDrawingMode();
+        }
+    }
+    drawStrokeColorChanged(currentStrokeColor) {
+        this.setDrawMode(this.drawType, {
+            width: this.drawStrokeWidthValue,
+            color: currentStrokeColor,
+        });
+        this.strokeChangeActiveObject('strokeColor', false);
+        this.toolConfigService.changePenConfig({ drawStrokeColor: currentStrokeColor });
+    }
+    setDrawMode(type, settings) {
+        this.drawType = type;
+        this.imageEditor.stopDrawingMode();
+        if (type === 'free') {
+            clearSelection(this.imageEditor);
+            this.imageEditor.startDrawingMode('FREE_DRAWING', settings);
+        }
+        else if (type === 'line') {
+            clearSelection(this.imageEditor);
+            this.imageEditor.startDrawingMode('LINE_DRAWING', settings);
+        }
+    }
+    strokeChangeActiveObject(changedProperty, isSilent) {
+        if (this.activeObjectId != null &&
+            getActiveObjectId(this.imageEditor) == this.activeObjectId) {
+            var props = this.imageEditor.getObjectProperties(this.activeObjectId, 'type');
+            if (props != null && (props.type === 'path' || props.type === 'line')) {
+                let parameters = null;
+                switch (changedProperty) {
+                    case 'strokeWidth':
+                        parameters = {
+                            strokeWidth: this.drawStrokeWidthValue,
+                        };
+                        break;
+                    case 'strokeColor':
+                        parameters = {
+                            stroke: this.drawStrokeColor,
+                        };
+                        break;
+                }
+                if (isSilent) {
+                    this.imageEditor.setObjectPropertiesQuietly(this.activeObjectId, parameters);
+                }
+                else {
+                    setTimeout(() => {
+                        this.imageEditor.setObjectProperties(this.activeObjectId, parameters);
+                    });
+                }
+            }
+        }
+    }
+}
+DrawComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: DrawComponent, deps: [{ token: ToolsConfigService }], target: i0.ɵɵFactoryTarget.Component });
+DrawComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: DrawComponent, selector: "tui-image-editor-submenus-draw", inputs: { imageEditor: "imageEditor", defaultDrawShapeColors: "defaultDrawShapeColors" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"tui-image-editor-menu-draw\">\r\n  <div class=\"tui-image-editor-submenu-item\">\r\n    <div class=\"tie-draw-line-select-button\">\r\n      <div\r\n        class=\"tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-align-items-center tui-image-editor-justify-content-center tui-image-editor-my-3\"\r\n      >\r\n        <div\r\n          (click)=\"setDrawType('free')\"\r\n          [class]=\"\r\n            'tui-image-editor-button free ' +\r\n            (drawType == 'free' ? 'active' : '')\r\n          \"\r\n        >\r\n          <div>\r\n            <svg class=\"svg_ic-submenu\">\r\n              <use xlink:href=\"#ic-draw-free\" class=\"normal use-default\"></use>\r\n              <use xlink:href=\"#ic-draw-free\" class=\"active use-default\"></use>\r\n            </svg>\r\n          </div>\r\n          <label>\r\n            {{ \"tui-image-editor-angular-submenus-draw-free\" | translate }}\r\n          </label>\r\n        </div>\r\n        <div\r\n          (click)=\"setDrawType('line')\"\r\n          [class]=\"\r\n            'tui-image-editor-button line ' +\r\n            (drawType == 'line' ? 'active' : '')\r\n          \"\r\n        >\r\n          <div>\r\n            <svg class=\"svg_ic-submenu\">\r\n              <use xlink:href=\"#ic-draw-line\" class=\"normal use-default\"></use>\r\n              <use xlink:href=\"#ic-draw-line\" class=\"active use-default\"></use>\r\n            </svg>\r\n          </div>\r\n          <label>\r\n            {{ \"tui-image-editor-angular-submenus-draw-straight\" | translate }}\r\n          </label>\r\n        </div>\r\n        <div class=\"tui-image-editor-partition\">\r\n          <div></div>\r\n        </div>\r\n        <div\r\n          class=\"tie-draw-color tui-image-editor-button tui-image-editor-button-color-picker tui-image-editor-d-flex tui-image-editor-flex-column\"\r\n          title=\"Color\"\r\n        >\r\n          <label>\r\n            <input\r\n              readonly\r\n              class=\"tie-draw-color-picker\"\r\n              [style.background]=\"drawStrokeColor\"\r\n              [(colorPicker)]=\"drawStrokeColor\"\r\n              [cpOutputFormat]=\"'rgba'\"\r\n              [cpPresetColors]=\"defaultDrawShapeColors\"\r\n              [cpUseRootViewContainer]=\"true\"\r\n              (colorPickerChange)=\"drawStrokeColorChanged($event)\"\r\n            />\r\n            <div>\r\n              {{ \"tui-image-editor-angular-submenus-draw-color\" | translate }}\r\n            </div></label\r\n          >\r\n        </div>\r\n      </div>\r\n      <div\r\n        class=\"tui-image-editor-newline tui-image-editor-range-wrap tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-align-items-center tui-image-editor-justify-content-center tui-image-editor-my-3\"\r\n      >\r\n        <label class=\"range\">{{\r\n          \"tui-image-editor-angular-submenus-draw-strokeWidth\" | translate\r\n        }}</label>\r\n        <input\r\n          type=\"range\"\r\n          [(ngModel)]=\"drawStrokeWidthValue\"\r\n          (ngModelChange)=\"drawStrokeWidthChanged($event, true)\"\r\n          (change)=\"drawStrokeWidthChanged($event, false)\"\r\n          min=\"5\"\r\n          max=\"30\"\r\n        />\r\n        <input\r\n          type=\"number\"\r\n          min=\"5\"\r\n          max=\"30\"\r\n          step=\"1\"\r\n          class=\"tie-draw-range-value tui-image-editor-range-value\"\r\n          [(ngModel)]=\"drawStrokeWidthValue\"\r\n          (ngModelChange)=\"drawStrokeWidthChanged($event, true)\"\r\n          (change)=\"drawStrokeWidthChanged($event, false)\"\r\n        />\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.ColorPickerDirective, selector: "[colorPicker]", inputs: ["colorPicker", "cpWidth", "cpHeight", "cpToggle", "cpDisabled", "cpIgnoredElements", "cpFallbackColor", "cpColorMode", "cpCmykEnabled", "cpOutputFormat", "cpAlphaChannel", "cpDisableInput", "cpDialogDisplay", "cpSaveClickOutside", "cpCloseClickOutside", "cpUseRootViewContainer", "cpPosition", "cpPositionOffset", "cpPositionRelativeToArrow", "cpOKButton", "cpOKButtonText", "cpOKButtonClass", "cpCancelButton", "cpCancelButtonText", "cpCancelButtonClass", "cpEyeDropper", "cpPresetLabel", "cpPresetColors", "cpPresetColorsClass", "cpMaxPresetColorsLength", "cpPresetEmptyMessage", "cpPresetEmptyMessageClass", "cpAddColorButton", "cpAddColorButtonText", "cpAddColorButtonClass", "cpRemoveColorButtonClass", "cpExtraTemplate"], outputs: ["cpInputChange", "cpToggleChange", "cpSliderChange", "cpSliderDragEnd", "cpSliderDragStart", "colorPickerOpen", "colorPickerClose", "colorPickerCancel", "colorPickerSelect", "colorPickerChange", "cpCmykColorChange", "cpPresetColorsChange"], exportAs: ["ngxColorPicker"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: DrawComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tui-image-editor-submenus-draw', template: "<div class=\"tui-image-editor-menu-draw\">\r\n  <div class=\"tui-image-editor-submenu-item\">\r\n    <div class=\"tie-draw-line-select-button\">\r\n      <div\r\n        class=\"tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-align-items-center tui-image-editor-justify-content-center tui-image-editor-my-3\"\r\n      >\r\n        <div\r\n          (click)=\"setDrawType('free')\"\r\n          [class]=\"\r\n            'tui-image-editor-button free ' +\r\n            (drawType == 'free' ? 'active' : '')\r\n          \"\r\n        >\r\n          <div>\r\n            <svg class=\"svg_ic-submenu\">\r\n              <use xlink:href=\"#ic-draw-free\" class=\"normal use-default\"></use>\r\n              <use xlink:href=\"#ic-draw-free\" class=\"active use-default\"></use>\r\n            </svg>\r\n          </div>\r\n          <label>\r\n            {{ \"tui-image-editor-angular-submenus-draw-free\" | translate }}\r\n          </label>\r\n        </div>\r\n        <div\r\n          (click)=\"setDrawType('line')\"\r\n          [class]=\"\r\n            'tui-image-editor-button line ' +\r\n            (drawType == 'line' ? 'active' : '')\r\n          \"\r\n        >\r\n          <div>\r\n            <svg class=\"svg_ic-submenu\">\r\n              <use xlink:href=\"#ic-draw-line\" class=\"normal use-default\"></use>\r\n              <use xlink:href=\"#ic-draw-line\" class=\"active use-default\"></use>\r\n            </svg>\r\n          </div>\r\n          <label>\r\n            {{ \"tui-image-editor-angular-submenus-draw-straight\" | translate }}\r\n          </label>\r\n        </div>\r\n        <div class=\"tui-image-editor-partition\">\r\n          <div></div>\r\n        </div>\r\n        <div\r\n          class=\"tie-draw-color tui-image-editor-button tui-image-editor-button-color-picker tui-image-editor-d-flex tui-image-editor-flex-column\"\r\n          title=\"Color\"\r\n        >\r\n          <label>\r\n            <input\r\n              readonly\r\n              class=\"tie-draw-color-picker\"\r\n              [style.background]=\"drawStrokeColor\"\r\n              [(colorPicker)]=\"drawStrokeColor\"\r\n              [cpOutputFormat]=\"'rgba'\"\r\n              [cpPresetColors]=\"defaultDrawShapeColors\"\r\n              [cpUseRootViewContainer]=\"true\"\r\n              (colorPickerChange)=\"drawStrokeColorChanged($event)\"\r\n            />\r\n            <div>\r\n              {{ \"tui-image-editor-angular-submenus-draw-color\" | translate }}\r\n            </div></label\r\n          >\r\n        </div>\r\n      </div>\r\n      <div\r\n        class=\"tui-image-editor-newline tui-image-editor-range-wrap tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-align-items-center tui-image-editor-justify-content-center tui-image-editor-my-3\"\r\n      >\r\n        <label class=\"range\">{{\r\n          \"tui-image-editor-angular-submenus-draw-strokeWidth\" | translate\r\n        }}</label>\r\n        <input\r\n          type=\"range\"\r\n          [(ngModel)]=\"drawStrokeWidthValue\"\r\n          (ngModelChange)=\"drawStrokeWidthChanged($event, true)\"\r\n          (change)=\"drawStrokeWidthChanged($event, false)\"\r\n          min=\"5\"\r\n          max=\"30\"\r\n        />\r\n        <input\r\n          type=\"number\"\r\n          min=\"5\"\r\n          max=\"30\"\r\n          step=\"1\"\r\n          class=\"tie-draw-range-value tui-image-editor-range-value\"\r\n          [(ngModel)]=\"drawStrokeWidthValue\"\r\n          (ngModelChange)=\"drawStrokeWidthChanged($event, true)\"\r\n          (change)=\"drawStrokeWidthChanged($event, false)\"\r\n        />\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+        }], ctorParameters: function () { return [{ type: ToolsConfigService }]; }, propDecorators: { imageEditor: [{
+                type: Input
+            }], defaultDrawShapeColors: [{
+                type: Input
+            }] } });
+
+class ShapeComponent$1 {
+    constructor() {
+        this.selected = false;
+        this.clicked = new EventEmitter();
+    }
+}
+ShapeComponent$1.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: ShapeComponent$1, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ShapeComponent$1.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: ShapeComponent$1, selector: "tui-image-editor-menus-buttons-shape", inputs: { imageChosen: "imageChosen", selected: "selected" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div\r\n  (click)=\"imageChosen ? clicked.emit('shape') : null\"\r\n  [title]=\"'tui-image-editor-angular-menus-buttons-shape' | translate\"\r\n  [class]=\"\r\n    'tie-btn-shape tui-image-editor-item normal ' + (selected ? 'active' : '')\r\n  \"\r\n>\r\n  <svg class=\"svg_ic-menu\">\r\n    <use xlink:href=\"#ic-shape\" class=\"normal use-default\"></use>\r\n    <use xlink:href=\"#ic-shape\" class=\"active use-default\"></use>\r\n    <use xlink:href=\"#ic-shape\" class=\"hover use-default\"></use>\r\n  </svg>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: ShapeComponent$1, decorators: [{
+            type: Component,
+            args: [{ selector: 'tui-image-editor-menus-buttons-shape', template: "<div\r\n  (click)=\"imageChosen ? clicked.emit('shape') : null\"\r\n  [title]=\"'tui-image-editor-angular-menus-buttons-shape' | translate\"\r\n  [class]=\"\r\n    'tie-btn-shape tui-image-editor-item normal ' + (selected ? 'active' : '')\r\n  \"\r\n>\r\n  <svg class=\"svg_ic-menu\">\r\n    <use xlink:href=\"#ic-shape\" class=\"normal use-default\"></use>\r\n    <use xlink:href=\"#ic-shape\" class=\"active use-default\"></use>\r\n    <use xlink:href=\"#ic-shape\" class=\"hover use-default\"></use>\r\n  </svg>\r\n</div>\r\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { imageChosen: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], clicked: [{
+                type: Output
+            }] } });
+
+class ShapeComponent {
+    constructor() {
+        this.defaultShapeStrokeColors = defaultColors;
+        this.defaultShapeFillColors = defaultColors;
+        this.shapeStrokeWidthValue = 3;
+        this.shapeFillColor = 'rgba(255, 255, 255, 0)';
+        this.shapeStrokeColor = 'rgba(0, 169, 255, 1)';
+        this.onObjectActivatedEventListener = this.onObjectActivated.bind(this);
+        this.onObjectAddedEventListener = this.onObjectAdded.bind(this);
+    }
+    ngOnChanges(changes) {
+        var that = this;
+        if (changes['imageEditor']) {
+            this.activeObjectId = getActiveObjectId(changes['imageEditor'].currentValue);
+            this.checkActiveObject(this.activeObjectId);
+            changes['imageEditor'].previousValue?.off(eventNames.OBJECT_ACTIVATED, that.onObjectActivatedEventListener);
+            changes['imageEditor'].currentValue?.on(eventNames.OBJECT_ACTIVATED, that.onObjectActivatedEventListener);
+            changes['imageEditor'].previousValue?.off(eventNames.OBJECT_ADDED, that.onObjectAddedEventListener);
+            changes['imageEditor'].currentValue?.on(eventNames.OBJECT_ADDED, that.onObjectAddedEventListener);
+        }
+    }
+    ngOnDestroy() {
+        if (this.imageEditor) {
+            this.imageEditor.off(eventNames.OBJECT_ACTIVATED, this.onObjectActivatedEventListener);
+            this.imageEditor.off(eventNames.OBJECT_ADDED, this.onObjectAddedEventListener);
+        }
+    }
+    onObjectActivated(props) {
+        this.activeObjectId = props?.id;
+        this.checkActiveObject(this.activeObjectId);
+    }
+    onObjectAdded(props) {
+        if (props && ['rect', 'circle', 'triangle'].indexOf(props.type) > -1) {
+            this.shapeType = null;
+            this.imageEditor?.stopDrawingMode();
+        }
+    }
+    checkActiveObject(activeObjectId) {
+        if (activeObjectId != null) {
+            var props = this.imageEditor?.getObjectProperties(activeObjectId, [
+                'type',
+                'strokeWidth',
+                'stroke',
+                'fill',
+            ]);
+            if (props && ['rect', 'circle', 'triangle'].indexOf(props.type) > -1) {
+                this.shapeStrokeWidthValue = props.strokeWidth;
+                this.shapeFillColor =
+                    typeof props.fill == 'object' && props.fill.type == 'color'
+                        ? props.fill.color
+                        : props.fill == null || props.fill.trim() == ''
+                            ? 'rgba(255, 255, 255, 0)'
+                            : props.fill;
+                this.shapeStrokeColor =
+                    props.stroke == null || props.stroke.trim() == ''
+                        ? 'rgba(255, 255, 255, 0)'
+                        : props.stroke;
+            }
+        }
+    }
+    shapeStrokeWidthChanged(currentStrokeWidth, isSilent) {
+        this.setDrawingShape(this.shapeType, {
+            fill: this.shapeFillColor,
+            stroke: this.shapeStrokeColor,
+            strokeWidth: typeof currentStrokeWidth === "number" ? currentStrokeWidth : this.shapeStrokeWidthValue,
+        });
+        this.shapeChangeActiveObject('strokeWidth', isSilent);
+    }
+    shapeColorChanged(type, currentColor) {
+        switch (type) {
+            case 'fill':
+                this.setDrawingShape(this.shapeType, {
+                    fill: currentColor,
+                    stroke: this.shapeStrokeColor,
+                    strokeWidth: this.shapeStrokeWidthValue,
+                });
+                break;
+            case 'stroke':
+                this.setDrawingShape(this.shapeType, {
+                    fill: this.shapeFillColor,
+                    stroke: currentColor,
+                    strokeWidth: this.shapeStrokeWidthValue,
+                });
+                break;
+        }
+        this.shapeChangeActiveObject(type == 'stroke' ? 'strokeColor' : 'fillColor');
+    }
+    setShapeType(type) {
+        clearSelection(this.imageEditor);
+        if (this.shapeType != type) {
+            this.shapeType = type;
+            this.imageEditor.startDrawingMode('SHAPE');
+            this.setDrawingShape(this.shapeType, {
+                fill: this.shapeFillColor,
+                stroke: this.shapeStrokeColor,
+                strokeWidth: this.shapeStrokeWidthValue,
+            });
+        }
+        else {
+            this.shapeType = null;
+            this.imageEditor.stopDrawingMode();
+        }
+    }
+    setDrawingShape(type, options) {
+        this.imageEditor.setDrawingShape(type, options);
+    }
+    shapeChangeActiveObject(changedProperty, isSilent = false) {
+        if (this.activeObjectId != null &&
+            getActiveObjectId(this.imageEditor) == this.activeObjectId) {
+            var props = this.imageEditor.getObjectProperties(this.activeObjectId, 'type');
+            if (props != null &&
+                ['rect', 'circle', 'triangle'].indexOf(props.type) > -1) {
+                let parameters = null;
+                switch (changedProperty) {
+                    case 'strokeWidth':
+                        parameters = {
+                            strokeWidth: this.shapeStrokeWidthValue,
+                        };
+                        break;
+                    case 'strokeColor':
+                        parameters = {
+                            stroke: this.shapeStrokeColor,
+                        };
+                        break;
+                    case 'fillColor':
+                        parameters = {
+                            fill: this.shapeFillColor,
+                        };
+                        break;
+                }
+                let functionToExecute = () => {
+                    this.imageEditor.changeShape(this.activeObjectId, parameters, isSilent);
+                };
+                if (isSilent) {
+                    functionToExecute();
+                }
+                else {
+                    setTimeout(functionToExecute);
+                }
+            }
+        }
+    }
+}
+ShapeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: ShapeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ShapeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: ShapeComponent, selector: "tui-image-editor-submenus-shape", inputs: { imageEditor: "imageEditor", defaultShapeStrokeColors: "defaultShapeStrokeColors", defaultShapeFillColors: "defaultShapeFillColors" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"tui-image-editor-menu-shape\">\r\n  <div class=\"tui-image-editor-submenu-item\">\r\n    <div class=\"tui-image-editor-d-flex tui-image-editor-justify-content-center\">\r\n      <div class=\"tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-align-items-center tui-image-editor-overflowable-x tui-image-editor-py-3\">\r\n        <div class=\"tie-shape-button\">\r\n          <div\r\n            [class]=\"\r\n              'tui-image-editor-button rect ' +\r\n              (shapeType == 'rect' ? 'active' : '')\r\n            \"\r\n            (click)=\"setShapeType('rect')\"\r\n          >\r\n            <div>\r\n              <svg class=\"svg_ic-submenu\">\r\n                <use\r\n                  xlink:href=\"#ic-shape-rectangle\"\r\n                  class=\"normal use-default\"\r\n                ></use>\r\n                <use\r\n                  xlink:href=\"#ic-shape-rectangle\"\r\n                  class=\"active use-default\"\r\n                ></use>\r\n              </svg>\r\n            </div>\r\n            <label>\r\n              {{\r\n                \"tui-image-editor-angular-submenus-shape-rectangle\" | translate\r\n              }}\r\n            </label>\r\n          </div>\r\n          <div\r\n            [class]=\"\r\n              'tui-image-editor-button circle ' +\r\n              (shapeType == 'circle' ? 'active' : '')\r\n            \"\r\n            (click)=\"setShapeType('circle')\"\r\n          >\r\n            <div>\r\n              <svg class=\"svg_ic-submenu\">\r\n                <use\r\n                  xlink:href=\"#ic-shape-circle\"\r\n                  class=\"normal use-default\"\r\n                ></use>\r\n                <use\r\n                  xlink:href=\"#ic-shape-circle\"\r\n                  class=\"active use-default\"\r\n                ></use>\r\n              </svg>\r\n            </div>\r\n            <label>\r\n              {{ \"tui-image-editor-angular-submenus-shape-circle\" | translate }}\r\n            </label>\r\n          </div>\r\n          <div\r\n            [class]=\"\r\n              'tui-image-editor-button triangle ' +\r\n              (shapeType == 'triangle' ? 'active' : '')\r\n            \"\r\n            (click)=\"setShapeType('triangle')\"\r\n          >\r\n            <div>\r\n              <svg class=\"svg_ic-submenu\">\r\n                <use\r\n                  xlink:href=\"#ic-shape-triangle\"\r\n                  class=\"normal use-default\"\r\n                ></use>\r\n                <use\r\n                  xlink:href=\"#ic-shape-triangle\"\r\n                  class=\"active use-default\"\r\n                ></use>\r\n              </svg>\r\n            </div>\r\n            <label>\r\n              {{\r\n                \"tui-image-editor-angular-submenus-shape-triangle\" | translate\r\n              }}\r\n            </label>\r\n          </div>\r\n        </div>\r\n        <div class=\"tui-image-editor-partition\">\r\n          <div></div>\r\n        </div>\r\n        <div class=\"tie-shape-color-button tui-image-editor-d-flex tui-image-editor-flex-row\">\r\n          <div\r\n            class=\"tie-color-fill tui-image-editor-button tui-image-editor-button-color-picker tui-image-editor-d-flex tui-image-editor-flex-column\"\r\n            title=\"Fill\"\r\n          >\r\n            <label>\r\n              <input\r\n                readonly\r\n                class=\"tie-draw-color-picker\"\r\n                [(colorPicker)]=\"shapeFillColor\"\r\n                [style.background]=\"shapeFillColor\"\r\n                [cpOutputFormat]=\"'rgba'\"\r\n                [cpPresetColors]=\"defaultShapeFillColors\"\r\n                (colorPickerChange)=\"shapeColorChanged('fill', $event)\"\r\n                [cpUseRootViewContainer]=\"true\"\r\n              />\r\n              <div>\r\n                {{ \"tui-image-editor-angular-submenus-shape-fill\" | translate }}\r\n              </div></label\r\n            >\r\n          </div>\r\n          <div\r\n            class=\"tie-color-stroke tui-image-editor-button tui-image-editor-button-color-picker tui-image-editor-d-flex tui-image-editor-flex-column\"\r\n            title=\"Stroke\"\r\n          >\r\n            <label>\r\n              <input\r\n                readonly\r\n                class=\"tie-draw-color-picker\"\r\n                [(colorPicker)]=\"shapeStrokeColor\"\r\n                [style.background]=\"shapeStrokeColor\"\r\n                [cpOutputFormat]=\"'rgba'\"\r\n                [cpPresetColors]=\"defaultShapeStrokeColors\"\r\n                (colorPickerChange)=\"shapeColorChanged('stroke', $event)\"\r\n                [cpUseRootViewContainer]=\"true\"\r\n              />\r\n              <div>\r\n                {{\r\n                  \"tui-image-editor-angular-submenus-shape-stroke\" | translate\r\n                }}\r\n              </div></label\r\n            >\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div\r\n      class=\"tui-image-editor-newline tui-image-editor-range-wrap tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-justify-content-center tui-image-editor-align-items-center tui-image-editor-mb-3\"\r\n    >\r\n      <label class=\"range\">{{\r\n        \"tui-image-editor-angular-submenus-shape-strokeWidth\" | translate\r\n      }}</label>\r\n      <input\r\n        type=\"range\"\r\n        [(ngModel)]=\"shapeStrokeWidthValue\"\r\n        (ngModelChange)=\"shapeStrokeWidthChanged($event, true)\"\r\n        (change)=\"shapeStrokeWidthChanged($event, false)\"\r\n        min=\"2\"\r\n        max=\"300\"\r\n      />\r\n      <input\r\n        type=\"number\"\r\n        min=\"2\"\r\n        max=\"300\"\r\n        step=\"1\"\r\n        class=\"tie-draw-range-value tui-image-editor-range-value\"\r\n        [(ngModel)]=\"shapeStrokeWidthValue\"\r\n        (ngModelChange)=\"shapeStrokeWidthChanged($event, true)\"\r\n        (change)=\"shapeStrokeWidthChanged($event, false)\"\r\n      />\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.ColorPickerDirective, selector: "[colorPicker]", inputs: ["colorPicker", "cpWidth", "cpHeight", "cpToggle", "cpDisabled", "cpIgnoredElements", "cpFallbackColor", "cpColorMode", "cpCmykEnabled", "cpOutputFormat", "cpAlphaChannel", "cpDisableInput", "cpDialogDisplay", "cpSaveClickOutside", "cpCloseClickOutside", "cpUseRootViewContainer", "cpPosition", "cpPositionOffset", "cpPositionRelativeToArrow", "cpOKButton", "cpOKButtonText", "cpOKButtonClass", "cpCancelButton", "cpCancelButtonText", "cpCancelButtonClass", "cpEyeDropper", "cpPresetLabel", "cpPresetColors", "cpPresetColorsClass", "cpMaxPresetColorsLength", "cpPresetEmptyMessage", "cpPresetEmptyMessageClass", "cpAddColorButton", "cpAddColorButtonText", "cpAddColorButtonClass", "cpRemoveColorButtonClass", "cpExtraTemplate"], outputs: ["cpInputChange", "cpToggleChange", "cpSliderChange", "cpSliderDragEnd", "cpSliderDragStart", "colorPickerOpen", "colorPickerClose", "colorPickerCancel", "colorPickerSelect", "colorPickerChange", "cpCmykColorChange", "cpPresetColorsChange"], exportAs: ["ngxColorPicker"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: ShapeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tui-image-editor-submenus-shape', template: "<div class=\"tui-image-editor-menu-shape\">\r\n  <div class=\"tui-image-editor-submenu-item\">\r\n    <div class=\"tui-image-editor-d-flex tui-image-editor-justify-content-center\">\r\n      <div class=\"tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-align-items-center tui-image-editor-overflowable-x tui-image-editor-py-3\">\r\n        <div class=\"tie-shape-button\">\r\n          <div\r\n            [class]=\"\r\n              'tui-image-editor-button rect ' +\r\n              (shapeType == 'rect' ? 'active' : '')\r\n            \"\r\n            (click)=\"setShapeType('rect')\"\r\n          >\r\n            <div>\r\n              <svg class=\"svg_ic-submenu\">\r\n                <use\r\n                  xlink:href=\"#ic-shape-rectangle\"\r\n                  class=\"normal use-default\"\r\n                ></use>\r\n                <use\r\n                  xlink:href=\"#ic-shape-rectangle\"\r\n                  class=\"active use-default\"\r\n                ></use>\r\n              </svg>\r\n            </div>\r\n            <label>\r\n              {{\r\n                \"tui-image-editor-angular-submenus-shape-rectangle\" | translate\r\n              }}\r\n            </label>\r\n          </div>\r\n          <div\r\n            [class]=\"\r\n              'tui-image-editor-button circle ' +\r\n              (shapeType == 'circle' ? 'active' : '')\r\n            \"\r\n            (click)=\"setShapeType('circle')\"\r\n          >\r\n            <div>\r\n              <svg class=\"svg_ic-submenu\">\r\n                <use\r\n                  xlink:href=\"#ic-shape-circle\"\r\n                  class=\"normal use-default\"\r\n                ></use>\r\n                <use\r\n                  xlink:href=\"#ic-shape-circle\"\r\n                  class=\"active use-default\"\r\n                ></use>\r\n              </svg>\r\n            </div>\r\n            <label>\r\n              {{ \"tui-image-editor-angular-submenus-shape-circle\" | translate }}\r\n            </label>\r\n          </div>\r\n          <div\r\n            [class]=\"\r\n              'tui-image-editor-button triangle ' +\r\n              (shapeType == 'triangle' ? 'active' : '')\r\n            \"\r\n            (click)=\"setShapeType('triangle')\"\r\n          >\r\n            <div>\r\n              <svg class=\"svg_ic-submenu\">\r\n                <use\r\n                  xlink:href=\"#ic-shape-triangle\"\r\n                  class=\"normal use-default\"\r\n                ></use>\r\n                <use\r\n                  xlink:href=\"#ic-shape-triangle\"\r\n                  class=\"active use-default\"\r\n                ></use>\r\n              </svg>\r\n            </div>\r\n            <label>\r\n              {{\r\n                \"tui-image-editor-angular-submenus-shape-triangle\" | translate\r\n              }}\r\n            </label>\r\n          </div>\r\n        </div>\r\n        <div class=\"tui-image-editor-partition\">\r\n          <div></div>\r\n        </div>\r\n        <div class=\"tie-shape-color-button tui-image-editor-d-flex tui-image-editor-flex-row\">\r\n          <div\r\n            class=\"tie-color-fill tui-image-editor-button tui-image-editor-button-color-picker tui-image-editor-d-flex tui-image-editor-flex-column\"\r\n            title=\"Fill\"\r\n          >\r\n            <label>\r\n              <input\r\n                readonly\r\n                class=\"tie-draw-color-picker\"\r\n                [(colorPicker)]=\"shapeFillColor\"\r\n                [style.background]=\"shapeFillColor\"\r\n                [cpOutputFormat]=\"'rgba'\"\r\n                [cpPresetColors]=\"defaultShapeFillColors\"\r\n                (colorPickerChange)=\"shapeColorChanged('fill', $event)\"\r\n                [cpUseRootViewContainer]=\"true\"\r\n              />\r\n              <div>\r\n                {{ \"tui-image-editor-angular-submenus-shape-fill\" | translate }}\r\n              </div></label\r\n            >\r\n          </div>\r\n          <div\r\n            class=\"tie-color-stroke tui-image-editor-button tui-image-editor-button-color-picker tui-image-editor-d-flex tui-image-editor-flex-column\"\r\n            title=\"Stroke\"\r\n          >\r\n            <label>\r\n              <input\r\n                readonly\r\n                class=\"tie-draw-color-picker\"\r\n                [(colorPicker)]=\"shapeStrokeColor\"\r\n                [style.background]=\"shapeStrokeColor\"\r\n                [cpOutputFormat]=\"'rgba'\"\r\n                [cpPresetColors]=\"defaultShapeStrokeColors\"\r\n                (colorPickerChange)=\"shapeColorChanged('stroke', $event)\"\r\n                [cpUseRootViewContainer]=\"true\"\r\n              />\r\n              <div>\r\n                {{\r\n                  \"tui-image-editor-angular-submenus-shape-stroke\" | translate\r\n                }}\r\n              </div></label\r\n            >\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div\r\n      class=\"tui-image-editor-newline tui-image-editor-range-wrap tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-justify-content-center tui-image-editor-align-items-center tui-image-editor-mb-3\"\r\n    >\r\n      <label class=\"range\">{{\r\n        \"tui-image-editor-angular-submenus-shape-strokeWidth\" | translate\r\n      }}</label>\r\n      <input\r\n        type=\"range\"\r\n        [(ngModel)]=\"shapeStrokeWidthValue\"\r\n        (ngModelChange)=\"shapeStrokeWidthChanged($event, true)\"\r\n        (change)=\"shapeStrokeWidthChanged($event, false)\"\r\n        min=\"2\"\r\n        max=\"300\"\r\n      />\r\n      <input\r\n        type=\"number\"\r\n        min=\"2\"\r\n        max=\"300\"\r\n        step=\"1\"\r\n        class=\"tie-draw-range-value tui-image-editor-range-value\"\r\n        [(ngModel)]=\"shapeStrokeWidthValue\"\r\n        (ngModelChange)=\"shapeStrokeWidthChanged($event, true)\"\r\n        (change)=\"shapeStrokeWidthChanged($event, false)\"\r\n      />\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { imageEditor: [{
+                type: Input
+            }], defaultShapeStrokeColors: [{
+                type: Input
+            }], defaultShapeFillColors: [{
+                type: Input
+            }] } });
+
+class IconComponent$1 {
+    constructor() {
+        this.selected = false;
+        this.clicked = new EventEmitter();
+    }
+}
+IconComponent$1.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: IconComponent$1, deps: [], target: i0.ɵɵFactoryTarget.Component });
+IconComponent$1.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: IconComponent$1, selector: "tui-image-editor-menus-buttons-icon", inputs: { imageChosen: "imageChosen", selected: "selected" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div\r\n  (click)=\"imageChosen ? clicked.emit('icon') : null\"\r\n  [title]=\"'tui-image-editor-angular-menus-buttons-icon' | translate\"\r\n  [class]=\"\r\n    'tie-btn-icon tui-image-editor-item normal ' +\r\n    (selected ? 'active' : '')\r\n  \"\r\n>\r\n  <svg class=\"svg_ic-menu\">\r\n    <use xlink:href=\"#ic-icon\" class=\"normal use-default\"></use>\r\n    <use xlink:href=\"#ic-icon\" class=\"active use-default\"></use>\r\n    <use xlink:href=\"#ic-icon\" class=\"hover use-default\"></use>\r\n  </svg>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: IconComponent$1, decorators: [{
+            type: Component,
+            args: [{ selector: 'tui-image-editor-menus-buttons-icon', template: "<div\r\n  (click)=\"imageChosen ? clicked.emit('icon') : null\"\r\n  [title]=\"'tui-image-editor-angular-menus-buttons-icon' | translate\"\r\n  [class]=\"\r\n    'tie-btn-icon tui-image-editor-item normal ' +\r\n    (selected ? 'active' : '')\r\n  \"\r\n>\r\n  <svg class=\"svg_ic-menu\">\r\n    <use xlink:href=\"#ic-icon\" class=\"normal use-default\"></use>\r\n    <use xlink:href=\"#ic-icon\" class=\"active use-default\"></use>\r\n    <use xlink:href=\"#ic-icon\" class=\"hover use-default\"></use>\r\n  </svg>\r\n</div>\r\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { imageChosen: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], clicked: [{
+                type: Output
+            }] } });
+
+class IconComponent {
+    constructor() {
+        this.defaultIconColors = defaultColors;
+        this.iconColor = 'rgba(255, 187, 59, 1)';
+        this.onObjectActivatedEventListener = this.onObjectActivated.bind(this);
+        this.onObjectAddedEventListener = this.onObjectAdded.bind(this);
+    }
+    ngOnChanges(changes) {
+        var that = this;
+        if (changes['imageEditor']) {
+            this.activeObjectId = getActiveObjectId(changes['imageEditor'].currentValue);
+            this.checkActiveObject(this.activeObjectId);
+            changes['imageEditor'].previousValue?.off(eventNames.OBJECT_ACTIVATED, that.onObjectActivatedEventListener);
+            changes['imageEditor'].currentValue?.on(eventNames.OBJECT_ACTIVATED, that.onObjectActivatedEventListener);
+            changes['imageEditor'].previousValue?.off(eventNames.OBJECT_ADDED, that.onObjectAddedEventListener);
+            changes['imageEditor'].currentValue?.on(eventNames.OBJECT_ADDED, that.onObjectAddedEventListener);
+        }
+    }
+    ngOnDestroy() {
+        if (this.imageEditor) {
+            this.imageEditor.off(eventNames.OBJECT_ACTIVATED, this.onObjectActivatedEventListener);
+            this.imageEditor.off(eventNames.OBJECT_ADDED, this.onObjectAddedEventListener);
+        }
+    }
+    onObjectActivated(props) {
+        this.activeObjectId = props?.id;
+        this.checkActiveObject(this.activeObjectId);
+    }
+    onObjectAdded(props) {
+        if (props && props.type === 'icon') {
+            this.setActiveIconType(this.iconType, false);
+        }
+    }
+    checkActiveObject(activeObjectId) {
+        if (activeObjectId != null) {
+            var props = this.imageEditor?.getObjectProperties(activeObjectId, [
+                'type',
+                'fill',
+            ]);
+            if (props && props.type === 'icon') {
+                this.iconColor =
+                    typeof props.fill == 'object' && props.fill.type == 'color'
+                        ? props.fill.color
+                        : props.fill == null || props.fill.trim() == ''
+                            ? 'rgba(255, 187, 59, 1)'
+                            : props.fill;
+            }
+        }
+    }
+    setActiveIconType(newIconType, discardSelection = true) {
+        if (discardSelection) {
+            clearSelection(this.imageEditor);
+        }
+        if (this.iconType != newIconType) {
+            this.iconType = newIconType;
+            this.imageEditor.startDrawingMode('ICON');
+            this.imageEditor.setDrawingIcon(newIconType, this.iconColor);
+            this.imageEditor.changeCursor('crosshair');
+        }
+        else {
+            this.iconType = null;
+            this.imageEditor.stopDrawingMode();
+            this.imageEditor.changeCursor('default');
+        }
+    }
+    iconColorChanged(currentColor) {
+        this.iconChangeActiveObject();
+    }
+    iconChangeActiveObject() {
+        if (this.activeObjectId != null &&
+            getActiveObjectId(this.imageEditor) == this.activeObjectId) {
+            var props = this.imageEditor.getObjectProperties(this.activeObjectId, 'type');
+            if (props.type === 'icon') {
+                this.imageEditor.setObjectProperties(this.activeObjectId, {
+                    fill: this.iconColor,
+                });
+            }
+        }
+    }
+    registerIcon(obj) {
+        this.imageEditor.registerIcons(obj);
+    }
+    onIconChosen(event) {
+        let selectedFile = event.target.files[0];
+        if (selectedFile != null) {
+            var imgUrl = URL.createObjectURL(selectedFile);
+            const imagetracer = new ImageTracer();
+            imagetracer.imageToSVG(imgUrl, (svgstr) => {
+                const [, svgPath] = svgstr.match(/path[^>]*d="([^"]*)"/);
+                const iconObj = {};
+                iconObj[selectedFile.name] = svgPath;
+                this.registerIcon(iconObj);
+                this.imageEditor.addIcon(selectedFile.name, {
+                    fill: this.iconColor,
+                    left: 100,
+                    top: 100,
+                });
+            }, ImageTracer.tracerDefaultOption());
+        }
+    }
+}
+IconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+IconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: IconComponent, selector: "tui-image-editor-submenus-icon", inputs: { imageEditor: "imageEditor", defaultIconColors: "defaultIconColors" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"tui-image-editor-menu-icon\">\r\n  <div\r\n    class=\"tui-image-editor-submenu-item tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-align-items-center tui-image-editor-justify-content-center tui-image-editor-flex-nowrap\"\r\n  >\r\n    <div class=\"tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-flex-nowrap tui-image-editor-overflowable-x tui-image-editor-py-3\">\r\n      <div class=\"tie-icon-add-button tui-image-editor-d-flex tui-image-editor-flex-row\">\r\n        <div\r\n          [class]=\"\r\n            'tui-image-editor-button ' +\r\n            (iconType == 'icon-arrow' ? 'active' : '')\r\n          \"\r\n          data-icontype=\"icon-arrow\"\r\n          (click)=\"setActiveIconType('icon-arrow')\"\r\n        >\r\n          <div>\r\n            <svg class=\"svg_ic-submenu\">\r\n              <use xlink:href=\"#ic-icon-arrow\" class=\"normal use-default\"></use>\r\n              <use xlink:href=\"#ic-icon-arrow\" class=\"active use-default\"></use>\r\n            </svg>\r\n          </div>\r\n          <label>\r\n            {{ \"tui-image-editor-angular-submenus-icon-arrow1\" | translate }}\r\n          </label>\r\n        </div>\r\n        <div\r\n          [class]=\"\r\n            'tui-image-editor-button ' +\r\n            (iconType == 'icon-arrow-2' ? 'active' : '')\r\n          \"\r\n          data-icontype=\"icon-arrow-2\"\r\n          (click)=\"setActiveIconType('icon-arrow-2')\"\r\n        >\r\n          <div>\r\n            <svg class=\"svg_ic-submenu\">\r\n              <use\r\n                xlink:href=\"#ic-icon-arrow-2\"\r\n                class=\"normal use-default\"\r\n              ></use>\r\n              <use\r\n                xlink:href=\"#ic-icon-arrow-2\"\r\n                class=\"active use-default\"\r\n              ></use>\r\n            </svg>\r\n          </div>\r\n          <label>\r\n            {{ \"tui-image-editor-angular-submenus-icon-arrow2\" | translate }}\r\n          </label>\r\n        </div>\r\n        <div\r\n          [class]=\"\r\n            'tui-image-editor-button ' +\r\n            (iconType == 'icon-arrow-3' ? 'active' : '')\r\n          \"\r\n          data-icontype=\"icon-arrow-3\"\r\n          (click)=\"setActiveIconType('icon-arrow-3')\"\r\n        >\r\n          <div>\r\n            <svg class=\"svg_ic-submenu\">\r\n              <use\r\n                xlink:href=\"#ic-icon-arrow-3\"\r\n                class=\"normal use-default\"\r\n              ></use>\r\n              <use\r\n                xlink:href=\"#ic-icon-arrow-3\"\r\n                class=\"active use-default\"\r\n              ></use>\r\n            </svg>\r\n          </div>\r\n          <label>\r\n            {{ \"tui-image-editor-angular-submenus-icon-arrow3\" | translate }}\r\n          </label>\r\n        </div>\r\n        <div\r\n          [class]=\"\r\n            'tui-image-editor-button ' +\r\n            (iconType == 'icon-star' ? 'active' : '')\r\n          \"\r\n          data-icontype=\"icon-star\"\r\n          (click)=\"setActiveIconType('icon-star')\"\r\n        >\r\n          <div>\r\n            <svg class=\"svg_ic-submenu\">\r\n              <use xlink:href=\"#ic-icon-star\" class=\"normal use-default\"></use>\r\n              <use xlink:href=\"#ic-icon-star\" class=\"active use-default\"></use>\r\n            </svg>\r\n          </div>\r\n          <label>\r\n            {{ \"tui-image-editor-angular-submenus-icon-star1\" | translate }}\r\n          </label>\r\n        </div>\r\n        <div\r\n          [class]=\"\r\n            'tui-image-editor-button ' +\r\n            (iconType == 'icon-star-2' ? 'active' : '')\r\n          \"\r\n          data-icontype=\"icon-star-2\"\r\n          (click)=\"setActiveIconType('icon-star-2')\"\r\n        >\r\n          <div>\r\n            <svg class=\"svg_ic-submenu\">\r\n              <use\r\n                xlink:href=\"#ic-icon-star-2\"\r\n                class=\"normal use-default\"\r\n              ></use>\r\n              <use\r\n                xlink:href=\"#ic-icon-star-2\"\r\n                class=\"active use-default\"\r\n              ></use>\r\n            </svg>\r\n          </div>\r\n          <label>\r\n            {{ \"tui-image-editor-angular-submenus-icon-star2\" | translate }}\r\n          </label>\r\n        </div>\r\n\r\n        <div\r\n          [class]=\"\r\n            'tui-image-editor-button ' +\r\n            (iconType == 'icon-polygon' ? 'active' : '')\r\n          \"\r\n          data-icontype=\"icon-polygon\"\r\n          (click)=\"setActiveIconType('icon-polygon')\"\r\n        >\r\n          <div>\r\n            <svg class=\"svg_ic-submenu\">\r\n              <use\r\n                xlink:href=\"#ic-icon-polygon\"\r\n                class=\"normal use-default\"\r\n              ></use>\r\n              <use\r\n                xlink:href=\"#ic-icon-polygon\"\r\n                class=\"active use-default\"\r\n              ></use>\r\n            </svg>\r\n          </div>\r\n          <label>\r\n            {{ \"tui-image-editor-angular-submenus-icon-polygon\" | translate }}\r\n          </label>\r\n        </div>\r\n\r\n        <div\r\n          [class]=\"\r\n            'tui-image-editor-button ' +\r\n            (iconType == 'icon-location' ? 'active' : '')\r\n          \"\r\n          data-icontype=\"icon-location\"\r\n          (click)=\"setActiveIconType('icon-location')\"\r\n        >\r\n          <div>\r\n            <svg class=\"svg_ic-submenu\">\r\n              <use\r\n                xlink:href=\"#ic-icon-location\"\r\n                class=\"normal use-default\"\r\n              ></use>\r\n              <use\r\n                xlink:href=\"#ic-icon-location\"\r\n                class=\"active use-default\"\r\n              ></use>\r\n            </svg>\r\n          </div>\r\n          <label>\r\n            {{ \"tui-image-editor-angular-submenus-icon-location\" | translate }}\r\n          </label>\r\n        </div>\r\n\r\n        <div\r\n          [class]=\"\r\n            'tui-image-editor-button ' +\r\n            (iconType == 'icon-heart' ? 'active' : '')\r\n          \"\r\n          data-icontype=\"icon-heart\"\r\n          (click)=\"setActiveIconType('icon-heart')\"\r\n        >\r\n          <div>\r\n            <svg class=\"svg_ic-submenu\">\r\n              <use xlink:href=\"#ic-icon-heart\" class=\"normal use-default\"></use>\r\n              <use xlink:href=\"#ic-icon-heart\" class=\"active use-default\"></use>\r\n            </svg>\r\n          </div>\r\n          <label>\r\n            {{ \"tui-image-editor-angular-submenus-icon-heart\" | translate }}\r\n          </label>\r\n        </div>\r\n\r\n        <div\r\n          [class]=\"\r\n            'tui-image-editor-button ' +\r\n            (iconType == 'icon-bubble' ? 'active' : '')\r\n          \"\r\n          data-icontype=\"icon-bubble\"\r\n          (click)=\"setActiveIconType('icon-bubble')\"\r\n        >\r\n          <div>\r\n            <svg class=\"svg_ic-submenu\">\r\n              <use\r\n                xlink:href=\"#ic-icon-bubble\"\r\n                class=\"normal use-default\"\r\n              ></use>\r\n              <use\r\n                xlink:href=\"#ic-icon-bubble\"\r\n                class=\"active use-default\"\r\n              ></use>\r\n            </svg>\r\n          </div>\r\n          <label>\r\n            {{ \"tui-image-editor-angular-submenus-icon-bubble\" | translate }}\r\n          </label>\r\n        </div>\r\n      </div>\r\n      <div class=\"tui-image-editor-partition\">\r\n        <div></div>\r\n      </div>\r\n      <div class=\"tie-icon-add-button\">\r\n        <div class=\"tui-image-editor-button\" style=\"margin: 0\">\r\n          <div>\r\n            <input\r\n              type=\"file\"\r\n              accept=\"image/*\"\r\n              class=\"tie-icon-image-file\"\r\n              (change)=\"onIconChosen($event)\"\r\n            />\r\n            <svg class=\"svg_ic-submenu\">\r\n              <use xlink:href=\"#ic-icon-load\" class=\"normal use-default\"></use>\r\n              <use xlink:href=\"#ic-icon-load\" class=\"active use-default\"></use>\r\n            </svg>\r\n          </div>\r\n          <label>\r\n            {{\r\n              \"tui-image-editor-angular-submenus-icon-customIcon\" | translate\r\n            }}\r\n          </label>\r\n        </div>\r\n      </div>\r\n      <div class=\"tui-image-editor-partition\">\r\n        <div></div>\r\n      </div>\r\n      <div>\r\n        <div\r\n          class=\"tie-icon-color tui-image-editor-button tui-image-editor-button-color-picker tui-image-editor-d-flex tui-image-editor-flex-column\"\r\n          title=\"Color\"\r\n        >\r\n          <label>\r\n            <input\r\n              readonly\r\n              class=\"tie-icon-color-picker\"\r\n              [(colorPicker)]=\"iconColor\"\r\n              [style.background]=\"iconColor\"\r\n              [cpOutputFormat]=\"'rgba'\"\r\n              [cpPresetColors]=\"defaultIconColors\"\r\n              (colorPickerChange)=\"iconColorChanged($event)\"\r\n              [cpUseRootViewContainer]=\"true\"\r\n            />\r\n            <div>\r\n              {{ \"tui-image-editor-angular-submenus-icon-color\" | translate }}\r\n            </div></label\r\n          >\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2$1.ColorPickerDirective, selector: "[colorPicker]", inputs: ["colorPicker", "cpWidth", "cpHeight", "cpToggle", "cpDisabled", "cpIgnoredElements", "cpFallbackColor", "cpColorMode", "cpCmykEnabled", "cpOutputFormat", "cpAlphaChannel", "cpDisableInput", "cpDialogDisplay", "cpSaveClickOutside", "cpCloseClickOutside", "cpUseRootViewContainer", "cpPosition", "cpPositionOffset", "cpPositionRelativeToArrow", "cpOKButton", "cpOKButtonText", "cpOKButtonClass", "cpCancelButton", "cpCancelButtonText", "cpCancelButtonClass", "cpEyeDropper", "cpPresetLabel", "cpPresetColors", "cpPresetColorsClass", "cpMaxPresetColorsLength", "cpPresetEmptyMessage", "cpPresetEmptyMessageClass", "cpAddColorButton", "cpAddColorButtonText", "cpAddColorButtonClass", "cpRemoveColorButtonClass", "cpExtraTemplate"], outputs: ["cpInputChange", "cpToggleChange", "cpSliderChange", "cpSliderDragEnd", "cpSliderDragStart", "colorPickerOpen", "colorPickerClose", "colorPickerCancel", "colorPickerSelect", "colorPickerChange", "cpCmykColorChange", "cpPresetColorsChange"], exportAs: ["ngxColorPicker"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: IconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tui-image-editor-submenus-icon', template: "<div class=\"tui-image-editor-menu-icon\">\r\n  <div\r\n    class=\"tui-image-editor-submenu-item tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-align-items-center tui-image-editor-justify-content-center tui-image-editor-flex-nowrap\"\r\n  >\r\n    <div class=\"tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-flex-nowrap tui-image-editor-overflowable-x tui-image-editor-py-3\">\r\n      <div class=\"tie-icon-add-button tui-image-editor-d-flex tui-image-editor-flex-row\">\r\n        <div\r\n          [class]=\"\r\n            'tui-image-editor-button ' +\r\n            (iconType == 'icon-arrow' ? 'active' : '')\r\n          \"\r\n          data-icontype=\"icon-arrow\"\r\n          (click)=\"setActiveIconType('icon-arrow')\"\r\n        >\r\n          <div>\r\n            <svg class=\"svg_ic-submenu\">\r\n              <use xlink:href=\"#ic-icon-arrow\" class=\"normal use-default\"></use>\r\n              <use xlink:href=\"#ic-icon-arrow\" class=\"active use-default\"></use>\r\n            </svg>\r\n          </div>\r\n          <label>\r\n            {{ \"tui-image-editor-angular-submenus-icon-arrow1\" | translate }}\r\n          </label>\r\n        </div>\r\n        <div\r\n          [class]=\"\r\n            'tui-image-editor-button ' +\r\n            (iconType == 'icon-arrow-2' ? 'active' : '')\r\n          \"\r\n          data-icontype=\"icon-arrow-2\"\r\n          (click)=\"setActiveIconType('icon-arrow-2')\"\r\n        >\r\n          <div>\r\n            <svg class=\"svg_ic-submenu\">\r\n              <use\r\n                xlink:href=\"#ic-icon-arrow-2\"\r\n                class=\"normal use-default\"\r\n              ></use>\r\n              <use\r\n                xlink:href=\"#ic-icon-arrow-2\"\r\n                class=\"active use-default\"\r\n              ></use>\r\n            </svg>\r\n          </div>\r\n          <label>\r\n            {{ \"tui-image-editor-angular-submenus-icon-arrow2\" | translate }}\r\n          </label>\r\n        </div>\r\n        <div\r\n          [class]=\"\r\n            'tui-image-editor-button ' +\r\n            (iconType == 'icon-arrow-3' ? 'active' : '')\r\n          \"\r\n          data-icontype=\"icon-arrow-3\"\r\n          (click)=\"setActiveIconType('icon-arrow-3')\"\r\n        >\r\n          <div>\r\n            <svg class=\"svg_ic-submenu\">\r\n              <use\r\n                xlink:href=\"#ic-icon-arrow-3\"\r\n                class=\"normal use-default\"\r\n              ></use>\r\n              <use\r\n                xlink:href=\"#ic-icon-arrow-3\"\r\n                class=\"active use-default\"\r\n              ></use>\r\n            </svg>\r\n          </div>\r\n          <label>\r\n            {{ \"tui-image-editor-angular-submenus-icon-arrow3\" | translate }}\r\n          </label>\r\n        </div>\r\n        <div\r\n          [class]=\"\r\n            'tui-image-editor-button ' +\r\n            (iconType == 'icon-star' ? 'active' : '')\r\n          \"\r\n          data-icontype=\"icon-star\"\r\n          (click)=\"setActiveIconType('icon-star')\"\r\n        >\r\n          <div>\r\n            <svg class=\"svg_ic-submenu\">\r\n              <use xlink:href=\"#ic-icon-star\" class=\"normal use-default\"></use>\r\n              <use xlink:href=\"#ic-icon-star\" class=\"active use-default\"></use>\r\n            </svg>\r\n          </div>\r\n          <label>\r\n            {{ \"tui-image-editor-angular-submenus-icon-star1\" | translate }}\r\n          </label>\r\n        </div>\r\n        <div\r\n          [class]=\"\r\n            'tui-image-editor-button ' +\r\n            (iconType == 'icon-star-2' ? 'active' : '')\r\n          \"\r\n          data-icontype=\"icon-star-2\"\r\n          (click)=\"setActiveIconType('icon-star-2')\"\r\n        >\r\n          <div>\r\n            <svg class=\"svg_ic-submenu\">\r\n              <use\r\n                xlink:href=\"#ic-icon-star-2\"\r\n                class=\"normal use-default\"\r\n              ></use>\r\n              <use\r\n                xlink:href=\"#ic-icon-star-2\"\r\n                class=\"active use-default\"\r\n              ></use>\r\n            </svg>\r\n          </div>\r\n          <label>\r\n            {{ \"tui-image-editor-angular-submenus-icon-star2\" | translate }}\r\n          </label>\r\n        </div>\r\n\r\n        <div\r\n          [class]=\"\r\n            'tui-image-editor-button ' +\r\n            (iconType == 'icon-polygon' ? 'active' : '')\r\n          \"\r\n          data-icontype=\"icon-polygon\"\r\n          (click)=\"setActiveIconType('icon-polygon')\"\r\n        >\r\n          <div>\r\n            <svg class=\"svg_ic-submenu\">\r\n              <use\r\n                xlink:href=\"#ic-icon-polygon\"\r\n                class=\"normal use-default\"\r\n              ></use>\r\n              <use\r\n                xlink:href=\"#ic-icon-polygon\"\r\n                class=\"active use-default\"\r\n              ></use>\r\n            </svg>\r\n          </div>\r\n          <label>\r\n            {{ \"tui-image-editor-angular-submenus-icon-polygon\" | translate }}\r\n          </label>\r\n        </div>\r\n\r\n        <div\r\n          [class]=\"\r\n            'tui-image-editor-button ' +\r\n            (iconType == 'icon-location' ? 'active' : '')\r\n          \"\r\n          data-icontype=\"icon-location\"\r\n          (click)=\"setActiveIconType('icon-location')\"\r\n        >\r\n          <div>\r\n            <svg class=\"svg_ic-submenu\">\r\n              <use\r\n                xlink:href=\"#ic-icon-location\"\r\n                class=\"normal use-default\"\r\n              ></use>\r\n              <use\r\n                xlink:href=\"#ic-icon-location\"\r\n                class=\"active use-default\"\r\n              ></use>\r\n            </svg>\r\n          </div>\r\n          <label>\r\n            {{ \"tui-image-editor-angular-submenus-icon-location\" | translate }}\r\n          </label>\r\n        </div>\r\n\r\n        <div\r\n          [class]=\"\r\n            'tui-image-editor-button ' +\r\n            (iconType == 'icon-heart' ? 'active' : '')\r\n          \"\r\n          data-icontype=\"icon-heart\"\r\n          (click)=\"setActiveIconType('icon-heart')\"\r\n        >\r\n          <div>\r\n            <svg class=\"svg_ic-submenu\">\r\n              <use xlink:href=\"#ic-icon-heart\" class=\"normal use-default\"></use>\r\n              <use xlink:href=\"#ic-icon-heart\" class=\"active use-default\"></use>\r\n            </svg>\r\n          </div>\r\n          <label>\r\n            {{ \"tui-image-editor-angular-submenus-icon-heart\" | translate }}\r\n          </label>\r\n        </div>\r\n\r\n        <div\r\n          [class]=\"\r\n            'tui-image-editor-button ' +\r\n            (iconType == 'icon-bubble' ? 'active' : '')\r\n          \"\r\n          data-icontype=\"icon-bubble\"\r\n          (click)=\"setActiveIconType('icon-bubble')\"\r\n        >\r\n          <div>\r\n            <svg class=\"svg_ic-submenu\">\r\n              <use\r\n                xlink:href=\"#ic-icon-bubble\"\r\n                class=\"normal use-default\"\r\n              ></use>\r\n              <use\r\n                xlink:href=\"#ic-icon-bubble\"\r\n                class=\"active use-default\"\r\n              ></use>\r\n            </svg>\r\n          </div>\r\n          <label>\r\n            {{ \"tui-image-editor-angular-submenus-icon-bubble\" | translate }}\r\n          </label>\r\n        </div>\r\n      </div>\r\n      <div class=\"tui-image-editor-partition\">\r\n        <div></div>\r\n      </div>\r\n      <div class=\"tie-icon-add-button\">\r\n        <div class=\"tui-image-editor-button\" style=\"margin: 0\">\r\n          <div>\r\n            <input\r\n              type=\"file\"\r\n              accept=\"image/*\"\r\n              class=\"tie-icon-image-file\"\r\n              (change)=\"onIconChosen($event)\"\r\n            />\r\n            <svg class=\"svg_ic-submenu\">\r\n              <use xlink:href=\"#ic-icon-load\" class=\"normal use-default\"></use>\r\n              <use xlink:href=\"#ic-icon-load\" class=\"active use-default\"></use>\r\n            </svg>\r\n          </div>\r\n          <label>\r\n            {{\r\n              \"tui-image-editor-angular-submenus-icon-customIcon\" | translate\r\n            }}\r\n          </label>\r\n        </div>\r\n      </div>\r\n      <div class=\"tui-image-editor-partition\">\r\n        <div></div>\r\n      </div>\r\n      <div>\r\n        <div\r\n          class=\"tie-icon-color tui-image-editor-button tui-image-editor-button-color-picker tui-image-editor-d-flex tui-image-editor-flex-column\"\r\n          title=\"Color\"\r\n        >\r\n          <label>\r\n            <input\r\n              readonly\r\n              class=\"tie-icon-color-picker\"\r\n              [(colorPicker)]=\"iconColor\"\r\n              [style.background]=\"iconColor\"\r\n              [cpOutputFormat]=\"'rgba'\"\r\n              [cpPresetColors]=\"defaultIconColors\"\r\n              (colorPickerChange)=\"iconColorChanged($event)\"\r\n              [cpUseRootViewContainer]=\"true\"\r\n            />\r\n            <div>\r\n              {{ \"tui-image-editor-angular-submenus-icon-color\" | translate }}\r\n            </div></label\r\n          >\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { imageEditor: [{
+                type: Input
+            }], defaultIconColors: [{
+                type: Input
+            }] } });
+
+class TextComponent$1 {
+    constructor() {
+        this.selected = false;
+        this.clicked = new EventEmitter();
+    }
+}
+TextComponent$1.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TextComponent$1, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TextComponent$1.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: TextComponent$1, selector: "tui-image-editor-menus-buttons-text", inputs: { imageChosen: "imageChosen", selected: "selected" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div\r\n  (click)=\"imageChosen ? clicked.emit('text') : null\"\r\n  [title]=\"'tui-image-editor-angular-menus-buttons-text' | translate\"\r\n  [class]=\"\r\n    'tie-btn-text tui-image-editor-item normal ' + (selected ? 'active' : '')\r\n  \"\r\n>\r\n  <svg class=\"svg_ic-menu\">\r\n    <use xlink:href=\"#ic-text\" class=\"normal use-default\"></use>\r\n    <use xlink:href=\"#ic-text\" class=\"active use-default\"></use>\r\n    <use xlink:href=\"#ic-text\" class=\"hover use-default\"></use>\r\n  </svg>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TextComponent$1, decorators: [{
+            type: Component,
+            args: [{ selector: 'tui-image-editor-menus-buttons-text', template: "<div\r\n  (click)=\"imageChosen ? clicked.emit('text') : null\"\r\n  [title]=\"'tui-image-editor-angular-menus-buttons-text' | translate\"\r\n  [class]=\"\r\n    'tie-btn-text tui-image-editor-item normal ' + (selected ? 'active' : '')\r\n  \"\r\n>\r\n  <svg class=\"svg_ic-menu\">\r\n    <use xlink:href=\"#ic-text\" class=\"normal use-default\"></use>\r\n    <use xlink:href=\"#ic-text\" class=\"active use-default\"></use>\r\n    <use xlink:href=\"#ic-text\" class=\"hover use-default\"></use>\r\n  </svg>\r\n</div>\r\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { imageChosen: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], clicked: [{
+                type: Output
+            }] } });
+
+class TextComponent {
+    constructor() {
+        this.defaultTextColors = defaultColors;
+        this.textColor = 'rgba(255, 187, 59, 1)';
+        this.textSizeValue = 50;
+        this.textAlign = 'left';
+        this.textFontFamily = 'Noto Sans';
+        this.textFontStyle = 'normal';
+        this.textFontWeight = 'normal';
+        this.textDecoration = null;
+        this.onObjectActivatedEventListener = this.onObjectActivated.bind(this);
+        this.onTextAddedEventListener = this.onTextAdded.bind(this);
+    }
+    ngOnChanges(changes) {
+        var that = this;
+        if (changes['imageEditor']) {
+            this.activeObjectId = getActiveObjectId(changes['imageEditor'].currentValue);
+            this.checkActiveObject(this.activeObjectId);
+            changes['imageEditor'].currentValue?.startDrawingMode('TEXT');
+            changes['imageEditor'].previousValue?.off(eventNames.OBJECT_ACTIVATED, that.onObjectActivatedEventListener);
+            changes['imageEditor'].currentValue?.on(eventNames.OBJECT_ACTIVATED, that.onObjectActivatedEventListener);
+            changes['imageEditor'].previousValue?.off(eventNames.ADD_TEXT, that.onTextAddedEventListener);
+            changes['imageEditor'].currentValue?.on(eventNames.ADD_TEXT, that.onTextAddedEventListener);
+        }
+    }
+    ngOnDestroy() {
+        if (this.imageEditor) {
+            this.imageEditor.off(eventNames.OBJECT_ACTIVATED, this.onObjectActivatedEventListener);
+            this.imageEditor.off(eventNames.ADD_TEXT, this.onTextAddedEventListener);
+        }
+    }
+    onObjectActivated(props) {
+        this.activeObjectId = props?.id;
+        this.checkActiveObject(this.activeObjectId);
+    }
+    onTextAdded(e) {
+        this.imageEditor
+            .addText('Edit text', {
+            position: e.originPosition,
+            styles: {
+                fill: this.textColor,
+                fontFamily: this.textFontFamily,
+                fontSize: this.textSizeValue,
+                fontStyle: this.textFontStyle,
+                fontWeight: this.textFontWeight,
+                textAlign: this.textAlign,
+                textDecoration: this.textDecoration,
+                underline: this.textDecoration == 'underline',
+            },
+        })
+            .then(() => {
+            this.imageEditor.changeCursor('default');
+            this.imageEditor?.startDrawingMode('TEXT');
+        });
+    }
+    checkActiveObject(activeObjectId) {
+        if (activeObjectId != null) {
+            var props = this.imageEditor?.getObjectProperties(activeObjectId, [
+                'type',
+                'fill',
+                'textAlign',
+                'textDecoration',
+                'fontFamily',
+                'fontStyle',
+                'fontWeight',
+                'fontSize',
+            ]);
+            if (props && (props.type === 'i-text' || props.type === 'text')) {
+                this.textAlign = props.textAlign;
+                this.textColor = props.fill;
+                this.textDecoration = props.textDecoration;
+                this.textFontFamily = props.fontFamily;
+                this.textFontStyle = props.fontStyle;
+                this.textFontWeight = props.fontWeight;
+                this.textSizeValue = props.fontSize;
+                this.imageEditor?.startDrawingMode('TEXT');
+            }
+        }
+    }
+    changeTextAlignment(newValue) {
+        this.textAlign = newValue;
+        this.textChangeActiveObject('textAlign');
+    }
+    changeTextFontStyle(newFontStyle) {
+        this.textFontStyle = newFontStyle;
+        this.textChangeActiveObject('fontStyle');
+    }
+    changeTextFontWeight(newFontWeight) {
+        this.textFontWeight = newFontWeight;
+        this.textChangeActiveObject('fontWeight');
+    }
+    changeTextDecoration(newTextDecoration) {
+        this.textDecoration = newTextDecoration;
+        this.textChangeActiveObject('textDecoration');
+    }
+    textSizeValueChanged(currentTextSizeValue, isSilent) {
+        this.textChangeActiveObject('fontSize', isSilent);
+    }
+    textColorChanged(currentColor) {
+        this.textChangeActiveObject('color');
+    }
+    textChangeActiveObject(type, isSilent = false) {
+        if (this.activeObjectId != null &&
+            getActiveObjectId(this.imageEditor) == this.activeObjectId) {
+            var props = this.imageEditor.getObjectProperties(this.activeObjectId, 'type');
+            let parameters = null;
+            if (props.type === 'i-text' || props.type === 'text') {
+                switch (type) {
+                    case 'color':
+                        parameters = {
+                            fill: this.textColor,
+                        };
+                        break;
+                    case 'fontFamily':
+                        parameters = {
+                            fontFamily: this.textFontFamily,
+                        };
+                        break;
+                    case 'fontSize':
+                        parameters = {
+                            fontSize: this.textSizeValue,
+                        };
+                        break;
+                    case 'fontStyle':
+                        parameters = {
+                            fontStyle: this.textFontStyle,
+                        };
+                        break;
+                    case 'fontWeight':
+                        parameters = {
+                            fontWeight: this.textFontWeight,
+                        };
+                        break;
+                    case 'textAlign':
+                        parameters = {
+                            textAlign: this.textAlign,
+                        };
+                        break;
+                    case 'textDecoration':
+                        parameters = {
+                            textDecoration: this.textDecoration,
+                        };
+                        break;
+                }
+                let functionToExecute = () => {
+                    this.imageEditor.changeTextStyle(this.activeObjectId, parameters, isSilent);
+                };
+                if (isSilent) {
+                    functionToExecute();
+                }
+                else {
+                    setTimeout(functionToExecute);
+                }
+            }
+        }
+    }
+}
+TextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: TextComponent, selector: "tui-image-editor-submenus-text", inputs: { imageEditor: "imageEditor", defaultTextColors: "defaultTextColors" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"tui-image-editor-menu-text\">\r\n  <div class=\"tui-image-editor-submenu-item\">\r\n    <div\r\n      class=\"tui-image-editor-d-flex tui-image-editor-justify-content-center\"\r\n      [style.maxWidth]=\"'100%'\"\r\n    >\r\n      <div\r\n        class=\"tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-align-items-center tui-image-editor-overflowable-x tui-image-editor-py-3\"\r\n      >\r\n        <div\r\n          class=\"tie-text-effect-button tui-image-editor-d-flex tui-image-editor-flex-row\"\r\n        >\r\n          <div\r\n            [class]=\"\r\n              'tui-image-editor-button bold ' +\r\n              (textFontWeight == 'bold' ? 'active' : '')\r\n            \"\r\n            (click)=\"\r\n              changeTextFontWeight(textFontWeight == 'bold' ? 'normal' : 'bold')\r\n            \"\r\n          >\r\n            <div>\r\n              <svg class=\"svg_ic-submenu\">\r\n                <use\r\n                  xlink:href=\"#ic-text-bold\"\r\n                  class=\"normal use-default\"\r\n                ></use>\r\n                <use\r\n                  xlink:href=\"#ic-text-bold\"\r\n                  class=\"active use-default\"\r\n                ></use>\r\n              </svg>\r\n            </div>\r\n            <label>\r\n              {{ \"tui-image-editor-angular-submenus-text-bold\" | translate }}\r\n            </label>\r\n          </div>\r\n          <div\r\n            [class]=\"\r\n              'tui-image-editor-button italic ' +\r\n              (textFontStyle == 'italic' ? 'active' : '')\r\n            \"\r\n            (click)=\"\r\n              changeTextFontStyle(\r\n                textFontStyle == 'italic' ? 'normal' : 'italic'\r\n              )\r\n            \"\r\n          >\r\n            <div>\r\n              <svg class=\"svg_ic-submenu\">\r\n                <use\r\n                  xlink:href=\"#ic-text-italic\"\r\n                  class=\"normal use-default\"\r\n                ></use>\r\n                <use\r\n                  xlink:href=\"#ic-text-italic\"\r\n                  class=\"active use-default\"\r\n                ></use>\r\n              </svg>\r\n            </div>\r\n            <label>\r\n              {{ \"tui-image-editor-angular-submenus-text-italic\" | translate }}\r\n            </label>\r\n          </div>\r\n          <div\r\n            [class]=\"\r\n              'tui-image-editor-button underline ' +\r\n              (textDecoration == 'underline' ? 'active' : '')\r\n            \"\r\n            (click)=\"\r\n              changeTextDecoration(\r\n                textDecoration == 'underline' ? null : 'underline'\r\n              )\r\n            \"\r\n          >\r\n            <div>\r\n              <svg class=\"svg_ic-submenu\">\r\n                <use\r\n                  xlink:href=\"#ic-text-underline\"\r\n                  class=\"normal use-default\"\r\n                ></use>\r\n                <use\r\n                  xlink:href=\"#ic-text-underline\"\r\n                  class=\"active use-default\"\r\n                ></use>\r\n              </svg>\r\n            </div>\r\n            <label>\r\n              {{\r\n                \"tui-image-editor-angular-submenus-text-underline\" | translate\r\n              }}\r\n            </label>\r\n          </div>\r\n        </div>\r\n        <div class=\"tui-image-editor-partition\">\r\n          <div></div>\r\n        </div>\r\n        <div\r\n          class=\"tie-text-align-button tui-image-editor-d-flex tui-image-editor-flex-row\"\r\n        >\r\n          <div\r\n            [class]=\"\r\n              'tui-image-editor-button left ' +\r\n              (textAlign == 'left' ? 'active' : '')\r\n            \"\r\n            (click)=\"changeTextAlignment('left')\"\r\n          >\r\n            <div>\r\n              <svg class=\"svg_ic-submenu\">\r\n                <use\r\n                  xlink:href=\"#ic-text-align-left\"\r\n                  class=\"normal use-default\"\r\n                ></use>\r\n                <use\r\n                  xlink:href=\"#ic-text-align-left\"\r\n                  class=\"active use-default\"\r\n                ></use>\r\n              </svg>\r\n            </div>\r\n            <label>\r\n              {{ \"tui-image-editor-angular-submenus-text-left\" | translate }}\r\n            </label>\r\n          </div>\r\n          <div\r\n            [class]=\"\r\n              'tui-image-editor-button center ' +\r\n              (textAlign == 'center' ? 'active' : '')\r\n            \"\r\n            (click)=\"changeTextAlignment('center')\"\r\n          >\r\n            <div>\r\n              <svg class=\"svg_ic-submenu\">\r\n                <use\r\n                  xlink:href=\"#ic-text-align-center\"\r\n                  class=\"normal use-default\"\r\n                ></use>\r\n                <use\r\n                  xlink:href=\"#ic-text-align-center\"\r\n                  class=\"active use-default\"\r\n                ></use>\r\n              </svg>\r\n            </div>\r\n            <label>\r\n              {{ \"tui-image-editor-angular-submenus-text-center\" | translate }}\r\n            </label>\r\n          </div>\r\n          <div\r\n            [class]=\"\r\n              'tui-image-editor-button right ' +\r\n              (textAlign == 'right' ? 'active' : '')\r\n            \"\r\n            (click)=\"changeTextAlignment('right')\"\r\n          >\r\n            <div>\r\n              <svg class=\"svg_ic-submenu\">\r\n                <use\r\n                  xlink:href=\"#ic-text-align-right\"\r\n                  class=\"normal use-default\"\r\n                ></use>\r\n                <use\r\n                  xlink:href=\"#ic-text-align-right\"\r\n                  class=\"active use-default\"\r\n                ></use>\r\n              </svg>\r\n            </div>\r\n            <label>\r\n              {{ \"tui-image-editor-angular-submenus-text-right\" | translate }}\r\n            </label>\r\n          </div>\r\n        </div>\r\n        <div class=\"tui-image-editor-partition\">\r\n          <div></div>\r\n        </div>\r\n        <div>\r\n          <div\r\n            class=\"tie-text-color tui-image-editor-button tui-image-editor-button-color-picker tui-image-editor-d-flex tui-image-editor-flex-column\"\r\n            title=\"Color\"\r\n          >\r\n            <label>\r\n              <input\r\n                readonly\r\n                class=\"tie-text-color-picker\"\r\n                [(colorPicker)]=\"textColor\"\r\n                [style.background]=\"textColor\"\r\n                [cpOutputFormat]=\"'rgba'\"\r\n                [cpPresetColors]=\"defaultTextColors\"\r\n                (colorPickerChange)=\"textColorChanged($event)\"\r\n                [cpUseRootViewContainer]=\"true\"\r\n              />\r\n              <div>\r\n                {{ \"tui-image-editor-angular-submenus-text-color\" | translate }}\r\n              </div></label\r\n            >\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div\r\n      class=\"tui-image-editor-newline tui-image-editor-range-wrap tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-align-items-center tui-image-editor-justify-content-center tui-image-editor-mb-3\"\r\n    >\r\n      <label class=\"range\">\r\n        {{\r\n          \"tui-image-editor-angular-submenus-text-textSize\" | translate\r\n        }}</label\r\n      >\r\n      <input\r\n        type=\"range\"\r\n        [(ngModel)]=\"textSizeValue\"\r\n        (ngModelChange)=\"textSizeValueChanged($event, true)\"\r\n        (change)=\"textSizeValueChanged($event, false)\"\r\n        min=\"10\"\r\n        max=\"100\"\r\n      />\r\n      <input\r\n        type=\"number\"\r\n        min=\"10\"\r\n        max=\"100\"\r\n        step=\"1\"\r\n        class=\"tie-text-range-value tui-image-editor-range-value\"\r\n        [(ngModel)]=\"textSizeValue\"\r\n        (ngModelChange)=\"textSizeValueChanged($event, true)\"\r\n        (change)=\"textSizeValueChanged($event, false)\"\r\n      />\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.ColorPickerDirective, selector: "[colorPicker]", inputs: ["colorPicker", "cpWidth", "cpHeight", "cpToggle", "cpDisabled", "cpIgnoredElements", "cpFallbackColor", "cpColorMode", "cpCmykEnabled", "cpOutputFormat", "cpAlphaChannel", "cpDisableInput", "cpDialogDisplay", "cpSaveClickOutside", "cpCloseClickOutside", "cpUseRootViewContainer", "cpPosition", "cpPositionOffset", "cpPositionRelativeToArrow", "cpOKButton", "cpOKButtonText", "cpOKButtonClass", "cpCancelButton", "cpCancelButtonText", "cpCancelButtonClass", "cpEyeDropper", "cpPresetLabel", "cpPresetColors", "cpPresetColorsClass", "cpMaxPresetColorsLength", "cpPresetEmptyMessage", "cpPresetEmptyMessageClass", "cpAddColorButton", "cpAddColorButtonText", "cpAddColorButtonClass", "cpRemoveColorButtonClass", "cpExtraTemplate"], outputs: ["cpInputChange", "cpToggleChange", "cpSliderChange", "cpSliderDragEnd", "cpSliderDragStart", "colorPickerOpen", "colorPickerClose", "colorPickerCancel", "colorPickerSelect", "colorPickerChange", "cpCmykColorChange", "cpPresetColorsChange"], exportAs: ["ngxColorPicker"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TextComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tui-image-editor-submenus-text', template: "<div class=\"tui-image-editor-menu-text\">\r\n  <div class=\"tui-image-editor-submenu-item\">\r\n    <div\r\n      class=\"tui-image-editor-d-flex tui-image-editor-justify-content-center\"\r\n      [style.maxWidth]=\"'100%'\"\r\n    >\r\n      <div\r\n        class=\"tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-align-items-center tui-image-editor-overflowable-x tui-image-editor-py-3\"\r\n      >\r\n        <div\r\n          class=\"tie-text-effect-button tui-image-editor-d-flex tui-image-editor-flex-row\"\r\n        >\r\n          <div\r\n            [class]=\"\r\n              'tui-image-editor-button bold ' +\r\n              (textFontWeight == 'bold' ? 'active' : '')\r\n            \"\r\n            (click)=\"\r\n              changeTextFontWeight(textFontWeight == 'bold' ? 'normal' : 'bold')\r\n            \"\r\n          >\r\n            <div>\r\n              <svg class=\"svg_ic-submenu\">\r\n                <use\r\n                  xlink:href=\"#ic-text-bold\"\r\n                  class=\"normal use-default\"\r\n                ></use>\r\n                <use\r\n                  xlink:href=\"#ic-text-bold\"\r\n                  class=\"active use-default\"\r\n                ></use>\r\n              </svg>\r\n            </div>\r\n            <label>\r\n              {{ \"tui-image-editor-angular-submenus-text-bold\" | translate }}\r\n            </label>\r\n          </div>\r\n          <div\r\n            [class]=\"\r\n              'tui-image-editor-button italic ' +\r\n              (textFontStyle == 'italic' ? 'active' : '')\r\n            \"\r\n            (click)=\"\r\n              changeTextFontStyle(\r\n                textFontStyle == 'italic' ? 'normal' : 'italic'\r\n              )\r\n            \"\r\n          >\r\n            <div>\r\n              <svg class=\"svg_ic-submenu\">\r\n                <use\r\n                  xlink:href=\"#ic-text-italic\"\r\n                  class=\"normal use-default\"\r\n                ></use>\r\n                <use\r\n                  xlink:href=\"#ic-text-italic\"\r\n                  class=\"active use-default\"\r\n                ></use>\r\n              </svg>\r\n            </div>\r\n            <label>\r\n              {{ \"tui-image-editor-angular-submenus-text-italic\" | translate }}\r\n            </label>\r\n          </div>\r\n          <div\r\n            [class]=\"\r\n              'tui-image-editor-button underline ' +\r\n              (textDecoration == 'underline' ? 'active' : '')\r\n            \"\r\n            (click)=\"\r\n              changeTextDecoration(\r\n                textDecoration == 'underline' ? null : 'underline'\r\n              )\r\n            \"\r\n          >\r\n            <div>\r\n              <svg class=\"svg_ic-submenu\">\r\n                <use\r\n                  xlink:href=\"#ic-text-underline\"\r\n                  class=\"normal use-default\"\r\n                ></use>\r\n                <use\r\n                  xlink:href=\"#ic-text-underline\"\r\n                  class=\"active use-default\"\r\n                ></use>\r\n              </svg>\r\n            </div>\r\n            <label>\r\n              {{\r\n                \"tui-image-editor-angular-submenus-text-underline\" | translate\r\n              }}\r\n            </label>\r\n          </div>\r\n        </div>\r\n        <div class=\"tui-image-editor-partition\">\r\n          <div></div>\r\n        </div>\r\n        <div\r\n          class=\"tie-text-align-button tui-image-editor-d-flex tui-image-editor-flex-row\"\r\n        >\r\n          <div\r\n            [class]=\"\r\n              'tui-image-editor-button left ' +\r\n              (textAlign == 'left' ? 'active' : '')\r\n            \"\r\n            (click)=\"changeTextAlignment('left')\"\r\n          >\r\n            <div>\r\n              <svg class=\"svg_ic-submenu\">\r\n                <use\r\n                  xlink:href=\"#ic-text-align-left\"\r\n                  class=\"normal use-default\"\r\n                ></use>\r\n                <use\r\n                  xlink:href=\"#ic-text-align-left\"\r\n                  class=\"active use-default\"\r\n                ></use>\r\n              </svg>\r\n            </div>\r\n            <label>\r\n              {{ \"tui-image-editor-angular-submenus-text-left\" | translate }}\r\n            </label>\r\n          </div>\r\n          <div\r\n            [class]=\"\r\n              'tui-image-editor-button center ' +\r\n              (textAlign == 'center' ? 'active' : '')\r\n            \"\r\n            (click)=\"changeTextAlignment('center')\"\r\n          >\r\n            <div>\r\n              <svg class=\"svg_ic-submenu\">\r\n                <use\r\n                  xlink:href=\"#ic-text-align-center\"\r\n                  class=\"normal use-default\"\r\n                ></use>\r\n                <use\r\n                  xlink:href=\"#ic-text-align-center\"\r\n                  class=\"active use-default\"\r\n                ></use>\r\n              </svg>\r\n            </div>\r\n            <label>\r\n              {{ \"tui-image-editor-angular-submenus-text-center\" | translate }}\r\n            </label>\r\n          </div>\r\n          <div\r\n            [class]=\"\r\n              'tui-image-editor-button right ' +\r\n              (textAlign == 'right' ? 'active' : '')\r\n            \"\r\n            (click)=\"changeTextAlignment('right')\"\r\n          >\r\n            <div>\r\n              <svg class=\"svg_ic-submenu\">\r\n                <use\r\n                  xlink:href=\"#ic-text-align-right\"\r\n                  class=\"normal use-default\"\r\n                ></use>\r\n                <use\r\n                  xlink:href=\"#ic-text-align-right\"\r\n                  class=\"active use-default\"\r\n                ></use>\r\n              </svg>\r\n            </div>\r\n            <label>\r\n              {{ \"tui-image-editor-angular-submenus-text-right\" | translate }}\r\n            </label>\r\n          </div>\r\n        </div>\r\n        <div class=\"tui-image-editor-partition\">\r\n          <div></div>\r\n        </div>\r\n        <div>\r\n          <div\r\n            class=\"tie-text-color tui-image-editor-button tui-image-editor-button-color-picker tui-image-editor-d-flex tui-image-editor-flex-column\"\r\n            title=\"Color\"\r\n          >\r\n            <label>\r\n              <input\r\n                readonly\r\n                class=\"tie-text-color-picker\"\r\n                [(colorPicker)]=\"textColor\"\r\n                [style.background]=\"textColor\"\r\n                [cpOutputFormat]=\"'rgba'\"\r\n                [cpPresetColors]=\"defaultTextColors\"\r\n                (colorPickerChange)=\"textColorChanged($event)\"\r\n                [cpUseRootViewContainer]=\"true\"\r\n              />\r\n              <div>\r\n                {{ \"tui-image-editor-angular-submenus-text-color\" | translate }}\r\n              </div></label\r\n            >\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div\r\n      class=\"tui-image-editor-newline tui-image-editor-range-wrap tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-align-items-center tui-image-editor-justify-content-center tui-image-editor-mb-3\"\r\n    >\r\n      <label class=\"range\">\r\n        {{\r\n          \"tui-image-editor-angular-submenus-text-textSize\" | translate\r\n        }}</label\r\n      >\r\n      <input\r\n        type=\"range\"\r\n        [(ngModel)]=\"textSizeValue\"\r\n        (ngModelChange)=\"textSizeValueChanged($event, true)\"\r\n        (change)=\"textSizeValueChanged($event, false)\"\r\n        min=\"10\"\r\n        max=\"100\"\r\n      />\r\n      <input\r\n        type=\"number\"\r\n        min=\"10\"\r\n        max=\"100\"\r\n        step=\"1\"\r\n        class=\"tie-text-range-value tui-image-editor-range-value\"\r\n        [(ngModel)]=\"textSizeValue\"\r\n        (ngModelChange)=\"textSizeValueChanged($event, true)\"\r\n        (change)=\"textSizeValueChanged($event, false)\"\r\n      />\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { imageEditor: [{
+                type: Input
+            }], defaultTextColors: [{
+                type: Input
+            }] } });
+
+class MaskComponent$1 {
+    constructor() {
+        this.selected = false;
+        this.clicked = new EventEmitter();
+    }
+}
+MaskComponent$1.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: MaskComponent$1, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MaskComponent$1.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: MaskComponent$1, selector: "tui-image-editor-menus-buttons-mask", inputs: { imageChosen: "imageChosen", selected: "selected" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div\r\n  (click)=\"imageChosen ? clicked.emit('mask') : null\"\r\n  [title]=\"'tui-image-editor-angular-menus-buttons-mask' | translate\"\r\n  [class]=\"\r\n    'tie-btn-mask tui-image-editor-item normal ' + (selected ? 'active' : '')\r\n  \"\r\n>\r\n  <svg class=\"svg_ic-menu\">\r\n    <use xlink:href=\"#ic-mask\" class=\"normal use-default\"></use>\r\n    <use xlink:href=\"#ic-mask\" class=\"active use-default\"></use>\r\n    <use xlink:href=\"#ic-mask\" class=\"hover use-default\"></use>\r\n  </svg>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: MaskComponent$1, decorators: [{
+            type: Component,
+            args: [{ selector: 'tui-image-editor-menus-buttons-mask', template: "<div\r\n  (click)=\"imageChosen ? clicked.emit('mask') : null\"\r\n  [title]=\"'tui-image-editor-angular-menus-buttons-mask' | translate\"\r\n  [class]=\"\r\n    'tie-btn-mask tui-image-editor-item normal ' + (selected ? 'active' : '')\r\n  \"\r\n>\r\n  <svg class=\"svg_ic-menu\">\r\n    <use xlink:href=\"#ic-mask\" class=\"normal use-default\"></use>\r\n    <use xlink:href=\"#ic-mask\" class=\"active use-default\"></use>\r\n    <use xlink:href=\"#ic-mask\" class=\"hover use-default\"></use>\r\n  </svg>\r\n</div>\r\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { imageChosen: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], clicked: [{
+                type: Output
+            }] } });
+
+class MaskComponent {
+    constructor() {
+        this.onObjectActivatedEventListener = this.onObjectActivated.bind(this);
+    }
+    ngOnChanges(changes) {
+        var that = this;
+        if (changes['imageEditor']) {
+            this.activeObjectId = getActiveObjectId(changes['imageEditor'].currentValue);
+            changes['imageEditor'].previousValue?.off(eventNames.OBJECT_ACTIVATED, that.onObjectActivatedEventListener);
+            changes['imageEditor'].currentValue?.on(eventNames.OBJECT_ACTIVATED, that.onObjectActivatedEventListener);
+        }
+    }
+    ngOnDestroy() {
+        if (this.imageEditor) {
+            this.imageEditor.off(eventNames.OBJECT_ACTIVATED, this.onObjectActivatedEventListener);
+        }
+    }
+    onObjectActivated(props) {
+        this.activeObjectId = props?.id;
+    }
+    onMaskChosen(event) {
+        let selectedFile = event.target.files[0];
+        if (selectedFile != null) {
+            if (!isFileApiSupported()) {
+                alert('This browser does not support file-api');
+            }
+            let imgUrl = URL.createObjectURL(selectedFile);
+            this.imageEditor
+                .loadImageFromURL(this.imageEditor.toDataURL(), 'FilterImage')
+                .then(() => {
+                this.imageEditor.addImageObject(imgUrl).then(() => {
+                    URL.revokeObjectURL(selectedFile);
+                });
+                this.imageEditor._invoker.fire(eventNames.EXECUTE_COMMAND, historyNames.LOAD_MASK_IMAGE);
+                if (this.fileInput != null) {
+                    this.fileInput.nativeElement.value = '';
+                }
+            });
+        }
+    }
+    applyMask() {
+        if (this.activeObjectId != null &&
+            getActiveObjectId(this.imageEditor) == this.activeObjectId) {
+            var props = this.imageEditor.getObjectProperties(this.activeObjectId, 'type');
+            if (props.type === 'image') {
+                this.imageEditor.applyFilter('mask', {
+                    maskObjId: this.activeObjectId,
+                });
+            }
+        }
+    }
+}
+MaskComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: MaskComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MaskComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: MaskComponent, selector: "tui-image-editor-submenus-mask", inputs: { imageEditor: "imageEditor" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"tui-image-editor-menu-mask\">\r\n  <div class=\"tui-image-editor-submenu-item\">\r\n    <div class=\"tui-image-editor-d-flex tui-image-editor-justify-content-center tui-image-editor-my-3\">\r\n      <div class=\"tui-image-editor-button\">\r\n        <div>\r\n          <input\r\n            #fileInput\r\n            type=\"file\"\r\n            accept=\"image/*\"\r\n            class=\"tie-mask-image-file\"\r\n            (change)=\"onMaskChosen($event)\"\r\n          />\r\n          <svg class=\"svg_ic-submenu\">\r\n            <use xlink:href=\"#ic-mask-load\" class=\"normal use-default\"></use>\r\n            <use xlink:href=\"#ic-mask-load\" class=\"active use-default\"></use>\r\n          </svg>\r\n        </div>\r\n        <label>\r\n          {{\r\n            \"tui-image-editor-angular-submenus-mask-loadMaskImage\" | translate\r\n          }}\r\n        </label>\r\n      </div>\r\n    </div>\r\n    <div\r\n      class=\"tie-mask-apply tui-image-editor-newline apply tui-image-editor-my-3\"\r\n      (click)=\"applyMask()\"\r\n    >\r\n      <div\r\n        class=\"tui-image-editor-button apply tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-flex-nowrap tui-image-editor-align-items-center tui-image-editor-justify-content-center\"\r\n      >\r\n        <svg class=\"svg_ic-menu\">\r\n          <use xlink:href=\"#ic-apply\" class=\"normal use-default\"></use>\r\n          <use xlink:href=\"#ic-apply\" class=\"active use-default\"></use>\r\n        </svg>\r\n        <label>\r\n          {{ \"tui-image-editor-angular-submenus-mask-apply\" | translate }}\r\n        </label>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: MaskComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tui-image-editor-submenus-mask', template: "<div class=\"tui-image-editor-menu-mask\">\r\n  <div class=\"tui-image-editor-submenu-item\">\r\n    <div class=\"tui-image-editor-d-flex tui-image-editor-justify-content-center tui-image-editor-my-3\">\r\n      <div class=\"tui-image-editor-button\">\r\n        <div>\r\n          <input\r\n            #fileInput\r\n            type=\"file\"\r\n            accept=\"image/*\"\r\n            class=\"tie-mask-image-file\"\r\n            (change)=\"onMaskChosen($event)\"\r\n          />\r\n          <svg class=\"svg_ic-submenu\">\r\n            <use xlink:href=\"#ic-mask-load\" class=\"normal use-default\"></use>\r\n            <use xlink:href=\"#ic-mask-load\" class=\"active use-default\"></use>\r\n          </svg>\r\n        </div>\r\n        <label>\r\n          {{\r\n            \"tui-image-editor-angular-submenus-mask-loadMaskImage\" | translate\r\n          }}\r\n        </label>\r\n      </div>\r\n    </div>\r\n    <div\r\n      class=\"tie-mask-apply tui-image-editor-newline apply tui-image-editor-my-3\"\r\n      (click)=\"applyMask()\"\r\n    >\r\n      <div\r\n        class=\"tui-image-editor-button apply tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-flex-nowrap tui-image-editor-align-items-center tui-image-editor-justify-content-center\"\r\n      >\r\n        <svg class=\"svg_ic-menu\">\r\n          <use xlink:href=\"#ic-apply\" class=\"normal use-default\"></use>\r\n          <use xlink:href=\"#ic-apply\" class=\"active use-default\"></use>\r\n        </svg>\r\n        <label>\r\n          {{ \"tui-image-editor-angular-submenus-mask-apply\" | translate }}\r\n        </label>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { imageEditor: [{
+                type: Input
+            }], fileInput: [{
+                type: ViewChild,
+                args: ['fileInput']
+            }] } });
+
+class FilterComponent$1 {
+    constructor() {
+        this.selected = false;
+        this.clicked = new EventEmitter();
+    }
+}
+FilterComponent$1.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: FilterComponent$1, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FilterComponent$1.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: FilterComponent$1, selector: "tui-image-editor-menus-buttons-filter", inputs: { imageChosen: "imageChosen", selected: "selected" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div\r\n  (click)=\"imageChosen ? clicked.emit('filter') : null\"\r\n  [title]=\"'tui-image-editor-angular-menus-buttons-filter' | translate\"\r\n  [class]=\"\r\n    'tie-btn-filter tui-image-editor-item normal ' + (selected ? 'active' : '')\r\n  \"\r\n>\r\n  <!-- <svg class=\"svg_ic-menu\">\r\n    <use xlink:href=\"#ic-filter\" class=\"normal use-default\"></use>\r\n    <use xlink:href=\"#ic-filter\" class=\"active use-default\"></use>\r\n    <use xlink:href=\"#ic-filter\" class=\"hover use-default\"></use>\r\n  </svg> -->\r\n  <svg width=\"24\" height=\"24\" viewBox=\"0 0 22 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n    <path d=\"M11.0014 12.7391C14.243 12.7391 16.8709 10.1112 16.8709 6.86957C16.8709 3.62789 14.243 1 11.0014 1C7.75969 1 5.13179 3.62789 5.13179 6.86957C5.13179 10.1112 7.75969 12.7391 11.0014 12.7391Z\" stroke=\"#8a8a8a\" stroke-width=\"1.5\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n    <path d=\"M14.9144 19C18.1561 19 20.784 16.3721 20.784 13.1304C20.784 9.88876 18.1561 7.26087 14.9144 7.26087C11.6727 7.26087 9.04484 9.88876 9.04484 13.1304C9.04484 16.3721 11.6727 19 14.9144 19Z\" stroke=\"#8a8a8a\" stroke-width=\"1.5\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n    <path d=\"M7.08832 19C10.33 19 12.9579 16.3721 12.9579 13.1304C12.9579 9.88876 10.33 7.26087 7.08832 7.26087C3.84664 7.26087 1.21875 9.88876 1.21875 13.1304C1.21875 16.3721 3.84664 19 7.08832 19Z\" stroke=\"#8a8a8a\" stroke-width=\"1.5\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n    </svg>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: FilterComponent$1, decorators: [{
+            type: Component,
+            args: [{ selector: 'tui-image-editor-menus-buttons-filter', template: "<div\r\n  (click)=\"imageChosen ? clicked.emit('filter') : null\"\r\n  [title]=\"'tui-image-editor-angular-menus-buttons-filter' | translate\"\r\n  [class]=\"\r\n    'tie-btn-filter tui-image-editor-item normal ' + (selected ? 'active' : '')\r\n  \"\r\n>\r\n  <!-- <svg class=\"svg_ic-menu\">\r\n    <use xlink:href=\"#ic-filter\" class=\"normal use-default\"></use>\r\n    <use xlink:href=\"#ic-filter\" class=\"active use-default\"></use>\r\n    <use xlink:href=\"#ic-filter\" class=\"hover use-default\"></use>\r\n  </svg> -->\r\n  <svg width=\"24\" height=\"24\" viewBox=\"0 0 22 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n    <path d=\"M11.0014 12.7391C14.243 12.7391 16.8709 10.1112 16.8709 6.86957C16.8709 3.62789 14.243 1 11.0014 1C7.75969 1 5.13179 3.62789 5.13179 6.86957C5.13179 10.1112 7.75969 12.7391 11.0014 12.7391Z\" stroke=\"#8a8a8a\" stroke-width=\"1.5\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n    <path d=\"M14.9144 19C18.1561 19 20.784 16.3721 20.784 13.1304C20.784 9.88876 18.1561 7.26087 14.9144 7.26087C11.6727 7.26087 9.04484 9.88876 9.04484 13.1304C9.04484 16.3721 11.6727 19 14.9144 19Z\" stroke=\"#8a8a8a\" stroke-width=\"1.5\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n    <path d=\"M7.08832 19C10.33 19 12.9579 16.3721 12.9579 13.1304C12.9579 9.88876 10.33 7.26087 7.08832 7.26087C3.84664 7.26087 1.21875 9.88876 1.21875 13.1304C1.21875 16.3721 3.84664 19 7.08832 19Z\" stroke=\"#8a8a8a\" stroke-width=\"1.5\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n    </svg>\r\n</div>\r\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { imageChosen: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], clicked: [{
+                type: Output
+            }] } });
+
+class FilterComponent {
+    constructor(historyService) {
+        this.historyService = historyService;
+        this.filterBlurChecked = false;
+        this.filterBlurValue = 0.1;
+        this.filterGrayscaleChecked = false;
+        this.filterSepiaChecked = false;
+        this.filterEmbossChecked = false;
+        this.filterInvertChecked = false;
+        this.filterVintageChecked = false;
+        this.filterSharpenChecked = false;
+        this.filterWhiteRemovalChecked = false;
+        this.filterWhiteRemovalDistance = 0.5;
+        this.filterBrightnessChecked = false;
+        this.filterBrightnessValue = 0;
+        this.filterNoiseChecked = false;
+        this.filterNoiseValue = 100;
+        this.filterPixelateChecked = false;
+        this.filterPixelateValue = 15;
+        this.filterColorFilterChecked = false;
+        this.filterColorFilterThreshold = 0;
+        this.defaultFilterTintColors = defaultColors;
+        this.filterTintChecked = false;
+        this.filterTintColor = 'rgba(3, 189, 158, 0.7)';
+        this.defaultFilterMultiplyColors = defaultColors;
+        this.filterMultiplyChecked = false;
+        this.filterMultiplyColor = 'rgb(81, 92, 230)';
+        this.defaultFilterBlendColors = defaultColors;
+        this.filterBlendChecked = false;
+        this.filterBlendColor = 'rgba(255, 187, 59, 1)';
+    }
+    ngOnInit() {
+        this.historyServiceSubscription = this.historyService.onChangeEmitter.subscribe((items) => items != null && items.length != 0
+            ? this.rebindFields(items)
+            : this.rebindFields(this.historyService.items));
+    }
+    ngOnDestroy() {
+        this.historyServiceSubscription?.unsubscribe();
+    }
+    rebindFields(items) {
+        console.debug(items);
+        if (this.imageEditor != null) {
+            this.filterBlurChecked = this.imageEditor.hasFilter('blur');
+            this.filterBrightnessChecked = this.imageEditor.hasFilter('brightness');
+            if (this.filterBrightnessChecked) {
+                this.filterBrightnessValue = this.getAppliedFilterArgument(items, filterType.BRIGHTNESS, 0);
+            }
+            this.filterColorFilterChecked =
+                this.imageEditor.hasFilter('removeColor') &&
+                    this.hasAppliedFilter(items, filterType.REMOVE_COLOR);
+            if (this.filterColorFilterChecked) {
+                this.filterColorFilterThreshold = this.getAppliedFilterArgument(items, filterType.REMOVE_COLOR, 0);
+            }
+            this.filterEmbossChecked = this.imageEditor.hasFilter('emboss');
+            this.filterGrayscaleChecked = this.imageEditor.hasFilter('grayscale');
+            this.filterInvertChecked = this.imageEditor.hasFilter('invert');
+            this.filterNoiseChecked = this.imageEditor.hasFilter('noise');
+            if (this.filterNoiseChecked) {
+                this.filterNoiseValue = this.getAppliedFilterArgument(items, filterType.NOISE, 0);
+            }
+            this.filterPixelateChecked = this.imageEditor.hasFilter('pixelate');
+            if (this.filterPixelateChecked) {
+                this.filterPixelateValue = this.getAppliedFilterArgument(items, filterType.PIXELATE, 0);
+            }
+            this.filterSepiaChecked = this.imageEditor.hasFilter('sepia');
+            this.filterSharpenChecked = this.imageEditor.hasFilter('sharpen');
+            this.filterVintageChecked = this.imageEditor.hasFilter('vintage');
+            this.filterWhiteRemovalChecked =
+                this.imageEditor.hasFilter('removeColor') &&
+                    this.hasAppliedFilter(items, filterType.REMOVE_WHITE);
+            if (this.filterWhiteRemovalChecked) {
+                this.filterWhiteRemovalDistance = this.getAppliedFilterArgument(items, filterType.REMOVE_WHITE, 0);
+            }
+            this.filterMultiplyChecked =
+                this.imageEditor.hasFilter('blendColor') &&
+                    this.hasAppliedFilter(items, filterType.MULTIPLY);
+            if (this.filterMultiplyChecked) {
+                this.filterMultiplyColor = this.getAppliedFilterArgument(items, filterType.MULTIPLY, 0);
+            }
+            this.filterTintChecked =
+                this.imageEditor.hasFilter('blendColor') &&
+                    this.hasAppliedFilter(items, filterType.TINT);
+            if (this.filterTintChecked) {
+                this.filterTintColor = this.getAppliedFilterArgument(items, filterType.TINT, 0);
+            }
+            this.filterBlendChecked =
+                this.imageEditor.hasFilter('blendColor') &&
+                    this.hasAppliedFilter(items, filterType.BLEND);
+            if (this.filterBlendChecked) {
+                this.filterBlendColor = this.getAppliedFilterArgument(items, filterType.BLEND, 0);
+            }
+        }
+    }
+    getAppliedFilterArgument(items, type, index) {
+        let validItems = items.filter((f) => f.filterType === type && f.type === HistoryItemType.ApplyFilter);
+        return validItems[validItems.length - 1].args[index];
+    }
+    hasAppliedFilter(historyItems, type) {
+        let hasFilter = false;
+        for (let i = 0; i < historyItems.length; i++) {
+            let item = historyItems[i];
+            if (item.type === HistoryItemType.ApplyFilter &&
+                item.filterType === type) {
+                hasFilter = true;
+            }
+            else if (hasFilter == true &&
+                [filterType.TINT, filterType.BLEND, filterType.MULTIPLY].some((t) => t === type) &&
+                item.type === HistoryItemType.RemoveFilter &&
+                item.filterType === filterType.BLEND_OR_TINT_OR_MULTIPLY) {
+                hasFilter = false;
+            }
+            else if (hasFilter == true &&
+                [filterType.REMOVE_COLOR, filterType.REMOVE_WHITE].some((t) => t === type) &&
+                item.type === HistoryItemType.RemoveFilter &&
+                item.filterType === filterType.REMOVE_COLOR_OR_WHITE) {
+                hasFilter = false;
+            }
+        }
+        return hasFilter;
+    }
+    filterWhiteRemovalCheckedChanged(newValue) {
+        this.filterApply('white-removal');
+    }
+    filterWhiteRemovalDistanceChanged(newValue, isSilent) {
+        this.filterApply('white-removal', isSilent);
+    }
+    filterBrightnessCheckedChanged(newValue) {
+        this.filterApply('brightness');
+    }
+    filterBrightnessValueChanged(newValue, isSilent) {
+        this.filterApply('brightness', isSilent);
+    }
+    filterNoiseCheckedChanged(newValue) {
+        this.filterApply('noise');
+    }
+    filterNoiseValueChanged(newValue, isSilent) {
+        this.filterApply('noise', isSilent);
+    }
+    filterPixelateCheckedChanged(newValue) {
+        this.filterApply('pixelate');
+    }
+    filterPixelateValueChanged(newValue, isSilent) {
+        this.filterApply('pixelate', isSilent);
+    }
+    filterColorFilterCheckedChanged(newValue) {
+        this.filterApply('removeColor');
+    }
+    filterColorFilterThresholdChanged(newValue, isSilent) {
+        this.filterApply('removeColor', isSilent);
+    }
+    filterTintColorChanged(newColor) {
+        this.filterApply('tint');
+    }
+    filterTintCheckedChanged(newValue) {
+        this.filterApply('tint');
+        if (this.filterTintChecked) {
+            this.filterMultiplyChecked = false;
+            this.filterBlendChecked = false;
+        }
+    }
+    filterMultiplyColorChanged(newColor) {
+        this.filterApply('multiply');
+    }
+    filterMultiplyCheckedChanged(newValue) {
+        this.filterApply('multiply');
+        if (this.filterMultiplyChecked) {
+            this.filterTintChecked = false;
+            this.filterBlendChecked = false;
+        }
+    }
+    filterBlendColorChanged(newColor) {
+        this.filterApply('blend');
+    }
+    filterBlendCheckedChanged(newValue) {
+        this.filterApply('blend');
+        if (this.filterBlendChecked) {
+            this.filterMultiplyChecked = false;
+            this.filterTintChecked = false;
+        }
+    }
+    filterBlurCheckedChanged(newValue) {
+        this.filterApply('blur');
+    }
+    filterGrayscaleCheckedChanged(newValue) {
+        this.filterApply('grayscale');
+    }
+    filterSepiaCheckedChanged(newValue) {
+        this.filterApply('sepia');
+    }
+    filterEmbossCheckedChanged(newValue) {
+        this.filterApply('emboss');
+    }
+    filterInvertCheckedChanged(newValue) {
+        this.filterApply('invert');
+    }
+    filterVintageCheckedChanged(newValue) {
+        this.filterApply('vintage');
+    }
+    filterSharpenCheckedChanged(newValue) {
+        this.filterApply('sharpen');
+    }
+    filterApply(type, isSilent = false) {
+        switch (type) {
+            case 'white-removal':
+                this.filterApplyConfirmed(this.filterWhiteRemovalChecked, 'removeColor', {
+                    color: '#FFFFFF',
+                    useAlpha: false,
+                    distance: this.filterWhiteRemovalDistance,
+                }, isSilent);
+                break;
+            case 'brightness':
+                this.filterApplyConfirmed(this.filterBrightnessChecked, 'brightness', {
+                    brightness: this.filterBrightnessValue,
+                }, isSilent);
+                break;
+            case 'noise':
+                this.filterApplyConfirmed(this.filterNoiseChecked, 'noise', {
+                    noise: this.filterNoiseValue,
+                }, isSilent);
+                break;
+            case 'pixelate':
+                this.filterApplyConfirmed(this.filterPixelateChecked, 'pixelate', {
+                    blocksize: this.filterPixelateValue,
+                }, isSilent);
+                break;
+            case 'removeColor':
+                this.filterApplyConfirmed(this.filterColorFilterChecked, 'removeColor', {
+                    color: '#FFFFFF',
+                    distance: this.filterColorFilterThreshold,
+                }, isSilent);
+                break;
+            case 'blur':
+                this.filterApplyConfirmed(this.filterBlurChecked, 'blur', {
+                    blur: this.filterBlurValue,
+                }, isSilent);
+                break;
+            case 'blend':
+                this.filterApplyConfirmed(this.filterBlendChecked, 'blendColor', {
+                    mode: 'add',
+                    color: this.filterBlendColor,
+                }, isSilent);
+                break;
+            case 'multiply':
+                this.filterApplyConfirmed(this.filterMultiplyChecked, 'blendColor', {
+                    mode: 'multiply',
+                    color: this.filterMultiplyColor,
+                }, isSilent);
+                break;
+            case 'tint':
+                let rgbTint = rgbaToObject(this.filterTintColor);
+                this.filterApplyConfirmed(this.filterTintChecked, 'blendColor', {
+                    mode: 'tint',
+                    color: rgbTint.hexString,
+                    alpha: rgbTint.alpha,
+                }, isSilent);
+                break;
+            case 'grayscale':
+                this.filterApplyConfirmed(this.filterGrayscaleChecked, type, {}, isSilent);
+                break;
+            case 'sepia':
+                this.filterApplyConfirmed(this.filterSepiaChecked, type, {}, isSilent);
+                break;
+            case 'emboss':
+                this.filterApplyConfirmed(this.filterEmbossChecked, type, {}, isSilent);
+                break;
+            case 'invert':
+                this.filterApplyConfirmed(this.filterInvertChecked, type, {}, isSilent);
+                break;
+            case 'vintage':
+                this.filterApplyConfirmed(this.filterVintageChecked, type, {}, isSilent);
+                break;
+            case 'sharpen':
+                this.filterApplyConfirmed(this.filterSharpenChecked, type, {}, isSilent);
+                break;
+        }
+    }
+    async filterApplyConfirmed(applying, type, options, isSilent = false) {
+        let functionToExecute = async () => {
+            if (applying) {
+                if (type === 'blendColor' && this.imageEditor.hasFilter('blendColor')) {
+                    switch (options.mode) {
+                        case 'add':
+                            this.filterTintChecked = false;
+                            this.filterMultiplyChecked = false;
+                            break;
+                        case 'multiply':
+                            this.filterTintChecked = false;
+                            this.filterBlendChecked = false;
+                            break;
+                        case 'tint':
+                            this.filterBlendChecked = false;
+                            this.filterMultiplyChecked = false;
+                            break;
+                    }
+                    await removeFilter(this.imageEditor, type, isSilent);
+                }
+                else if (type === 'removeColor' &&
+                    this.imageEditor.hasFilter('removeColor')) {
+                    if (options.useAlpha != null) {
+                        this.filterColorFilterChecked = false;
+                    }
+                    else {
+                        this.filterWhiteRemovalChecked = false;
+                    }
+                    await removeFilter(this.imageEditor, type, isSilent);
+                }
+                await this.imageEditor.applyFilter(type, options, isSilent);
+            }
+            else if (this.imageEditor.hasFilter(type)) {
+                await removeFilter(this.imageEditor, type, isSilent);
+                if (type == 'blendColor') {
+                    this.filterTintChecked = false;
+                    this.filterMultiplyChecked = false;
+                    this.filterBlendChecked = false;
+                }
+            }
+        };
+        if (isSilent) {
+            await functionToExecute();
+        }
+        else {
+            setTimeout(async () => {
+                await functionToExecute();
+            });
+        }
+    }
+}
+FilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: FilterComponent, deps: [{ token: HistoryService }], target: i0.ɵɵFactoryTarget.Component });
+FilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: FilterComponent, selector: "tui-image-editor-submenus-filter", inputs: { imageEditor: "imageEditor" }, ngImport: i0, template: "<div\r\n  class=\"tui-image-editor-menu-filter tui-image-editor-d-flex tui-image-editor-justify-content-center\"\r\n>\r\n  <div\r\n    class=\"tui-image-editor-submenu-item tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-align-items-center tui-image-editor-overflowable-x tui-image-editor-py-3\"\r\n  >\r\n    <div class=\"tui-image-editor-submenu-align\">\r\n      <div\r\n        class=\"tui-image-editor-checkbox-wrap fixed-width tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-flex-wrap tui-image-editor-justify-content-center\"\r\n      >\r\n        <div class=\"tui-image-editor-checkbox tui-image-editor-align-self-center\">\r\n          <label\r\n            class=\"tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-align-items-center tui-image-editor-flex-nowrap\"\r\n          >\r\n            <input\r\n              type=\"checkbox\"\r\n              class=\"tie-grayscale\"\r\n              [(ngModel)]=\"filterGrayscaleChecked\"\r\n              (ngModelChange)=\"filterGrayscaleCheckedChanged($event)\"\r\n            />\r\n            <span>{{\r\n              \"tui-image-editor-angular-submenus-filter-grayscale\" | translate\r\n            }}</span>\r\n          </label>\r\n        </div>\r\n        <div class=\"tui-image-editor-checkbox tui-image-editor-align-self-center\">\r\n          <label\r\n            class=\"tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-align-items-center tui-image-editor-flex-nowrap\"\r\n          >\r\n            <input\r\n              type=\"checkbox\"\r\n              class=\"tie-invert\"\r\n              [(ngModel)]=\"filterInvertChecked\"\r\n              (ngModelChange)=\"filterInvertCheckedChanged($event)\"\r\n            />\r\n            <span>{{\r\n              \"tui-image-editor-angular-submenus-filter-invert\" | translate\r\n            }}</span>\r\n          </label>\r\n        </div>\r\n        <div class=\"tui-image-editor-checkbox tui-image-editor-align-self-center\">\r\n          <label\r\n            class=\"tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-align-items-center tui-image-editor-flex-nowrap\"\r\n          >\r\n            <input\r\n              type=\"checkbox\"\r\n              class=\"tie-sepia\"\r\n              [(ngModel)]=\"filterSepiaChecked\"\r\n              (ngModelChange)=\"filterSepiaCheckedChanged($event)\"\r\n            />\r\n            <span>{{\r\n              \"tui-image-editor-angular-submenus-filter-sepia\" | translate\r\n            }}</span>\r\n          </label>\r\n        </div>\r\n        <div class=\"tui-image-editor-checkbox tui-image-editor-align-self-center\">\r\n          <label\r\n            class=\"tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-align-items-center tui-image-editor-flex-nowrap\"\r\n          >\r\n            <input\r\n              type=\"checkbox\"\r\n              class=\"tie-vintage\"\r\n              [(ngModel)]=\"filterVintageChecked\"\r\n              (ngModelChange)=\"filterVintageCheckedChanged($event)\"\r\n            />\r\n            <span>{{\r\n              \"tui-image-editor-angular-submenus-filter-sepia2\" | translate\r\n            }}</span>\r\n          </label>\r\n        </div>\r\n        <div class=\"tui-image-editor-checkbox tui-image-editor-align-self-center\">\r\n          <label\r\n            class=\"tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-align-items-center tui-image-editor-flex-nowrap\"\r\n          >\r\n            <input\r\n              type=\"checkbox\"\r\n              class=\"tie-blur\"\r\n              [(ngModel)]=\"filterBlurChecked\"\r\n              (ngModelChange)=\"filterBlurCheckedChanged($event)\"\r\n            />\r\n            <span>{{\r\n              \"tui-image-editor-angular-submenus-filter-blur\" | translate\r\n            }}</span>\r\n          </label>\r\n        </div>\r\n        <div class=\"tui-image-editor-checkbox tui-image-editor-align-self-center\">\r\n          <label\r\n            class=\"tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-align-items-center tui-image-editor-flex-nowrap\"\r\n          >\r\n            <input\r\n              type=\"checkbox\"\r\n              class=\"tie-sharpen\"\r\n              [(ngModel)]=\"filterSharpenChecked\"\r\n              (ngModelChange)=\"filterSharpenCheckedChanged($event)\"\r\n            />\r\n            <span>{{\r\n              \"tui-image-editor-angular-submenus-filter-sharpen\" | translate\r\n            }}</span>\r\n          </label>\r\n        </div>\r\n        <div class=\"tui-image-editor-checkbox tui-image-editor-align-self-center\">\r\n          <label\r\n            class=\"tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-align-items-center tui-image-editor-flex-nowrap\"\r\n          >\r\n            <input\r\n              type=\"checkbox\"\r\n              class=\"tie-emboss\"\r\n              [(ngModel)]=\"filterEmbossChecked\"\r\n              (ngModelChange)=\"filterEmbossCheckedChanged($event)\"\r\n            />\r\n            <span>{{\r\n              \"tui-image-editor-angular-submenus-filter-emboss\" | translate\r\n            }}</span>\r\n          </label>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"tui-image-editor-partition\">\r\n      <div></div>\r\n    </div>\r\n    <div class=\"tui-image-editor-submenu-align\">\r\n      <div\r\n        class=\"tui-image-editor-checkbox-group tui-image-editor-disabled\"\r\n        style=\"margin-bottom: 7px\"\r\n      >\r\n        <div class=\"tui-image-editor-checkbox-wrap\">\r\n          <div class=\"tui-image-editor-checkbox\">\r\n            <label\r\n              class=\"tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-align-items-center tui-image-editor-flex-nowrap\"\r\n            >\r\n              <input\r\n                type=\"checkbox\"\r\n                class=\"tie-remove-white\"\r\n                [(ngModel)]=\"filterWhiteRemovalChecked\"\r\n                (ngModelChange)=\"filterWhiteRemovalCheckedChanged($event)\"\r\n              />\r\n              <span>{{\r\n                \"tui-image-editor-angular-submenus-filter-removeWhite\"\r\n                  | translate\r\n              }}</span>\r\n            </label>\r\n          </div>\r\n        </div>\r\n        <div\r\n          class=\"tui-image-editor-newline tui-image-editor-range-wrap short tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-flex-nowrap tui-image-editor-align-items-center\"\r\n        >\r\n          <label>{{\r\n            \"tui-image-editor-angular-submenus-filter-removeWhite-distance\"\r\n              | translate\r\n          }}</label>\r\n          <input\r\n            type=\"range\"\r\n            [(ngModel)]=\"filterWhiteRemovalDistance\"\r\n            (ngModelChange)=\"filterWhiteRemovalDistanceChanged($event, true)\"\r\n            (change)=\"filterWhiteRemovalDistanceChanged($event, false)\"\r\n            min=\"0\"\r\n            max=\"1\"\r\n            step=\"0.001\"\r\n            [disabled]=\"filterWhiteRemovalChecked == false\"\r\n          />\r\n        </div>\r\n      </div>\r\n      <div class=\"tui-image-editor-checkbox-group tui-image-editor-disabled\">\r\n        <div class=\"tui-image-editor-checkbox\">\r\n          <label\r\n            class=\"tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-align-items-center tui-image-editor-flex-nowrap\"\r\n          >\r\n            <input\r\n              type=\"checkbox\"\r\n              class=\"tie-brightness\"\r\n              [(ngModel)]=\"filterBrightnessChecked\"\r\n              (ngModelChange)=\"filterBrightnessCheckedChanged($event)\"\r\n            />\r\n            <span>{{\r\n              \"tui-image-editor-angular-submenus-filter-brightness\" | translate\r\n            }}</span>\r\n          </label>\r\n        </div>\r\n        <div class=\"tui-image-editor-range-wrap short tui-image-editor-d-flex tui-image-editor-flex-row align-items-center tui-image-editor-my-2\">\r\n          <input\r\n            type=\"range\"\r\n            [(ngModel)]=\"filterBrightnessValue\"\r\n            (ngModelChange)=\"filterBrightnessValueChanged($event, true)\"\r\n            (change)=\"filterBrightnessValueChanged($event, false)\"\r\n            min=\"-1\"\r\n            max=\"1\"\r\n            step=\"0.03\"\r\n            [disabled]=\"filterBrightnessChecked == false\"\r\n          />\r\n        </div>\r\n      </div>\r\n      <div class=\"tui-image-editor-checkbox-group tui-image-editor-disabled\">\r\n        <div class=\"tui-image-editor-checkbox\">\r\n          <label\r\n            class=\"tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-align-items-center tui-image-editor-flex-nowrap\"\r\n          >\r\n            <input\r\n              type=\"checkbox\"\r\n              class=\"tie-noise\"\r\n              [(ngModel)]=\"filterNoiseChecked\"\r\n              (ngModelChange)=\"filterNoiseCheckedChanged($event)\"\r\n            />\r\n            <span>{{\r\n              \"tui-image-editor-angular-submenus-filter-noise\" | translate\r\n            }}</span>\r\n          </label>\r\n        </div>\r\n        <div class=\"tui-image-editor-range-wrap short tui-image-editor-d-flex tui-image-editor-flex-row align-items-center tui-image-editor-my-2\">\r\n          <input\r\n            type=\"range\"\r\n            [(ngModel)]=\"filterNoiseValue\"\r\n            (ngModelChange)=\"filterNoiseValueChanged($event, true)\"\r\n            (change)=\"filterNoiseValueChanged($event, false)\"\r\n            min=\"0\"\r\n            max=\"1000\"\r\n            step=\"10\"\r\n            [disabled]=\"filterNoiseChecked == false\"\r\n          />\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"tui-image-editor-partition only-left-right\">\r\n      <div></div>\r\n    </div>\r\n    <div class=\"tui-image-editor-submenu-align\">\r\n      <div class=\"tui-image-editor-checkbox-group tui-image-editor-disabled\">\r\n        <div class=\"tui-image-editor-checkbox\">\r\n          <label\r\n            class=\"tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-align-items-center tui-image-editor-flex-nowrap\"\r\n          >\r\n            <input\r\n              type=\"checkbox\"\r\n              class=\"tie-pixelate\"\r\n              [(ngModel)]=\"filterPixelateChecked\"\r\n              (ngModelChange)=\"filterPixelateCheckedChanged($event)\"\r\n            />\r\n            <span>{{\r\n              \"tui-image-editor-angular-submenus-filter-pixelate\" | translate\r\n            }}</span>\r\n          </label>\r\n        </div>\r\n        <div class=\"tui-image-editor-range-wrap short tui-image-editor-d-flex tui-image-editor-flex-row align-items-center tui-image-editor-my-2\">\r\n          <input\r\n            type=\"range\"\r\n            [(ngModel)]=\"filterPixelateValue\"\r\n            (ngModelChange)=\"filterPixelateValueChanged($event, true)\"\r\n            (change)=\"filterPixelateValueChanged($event, false)\"\r\n            min=\"2\"\r\n            max=\"20\"\r\n            step=\"1\"\r\n            [disabled]=\"filterPixelateChecked == false\"\r\n          />\r\n        </div>\r\n      </div>\r\n      <div class=\"tui-image-editor-checkbox-group tui-image-editor-disabled\">\r\n        <div class=\"tui-image-editor-newline tui-image-editor-checkbox-wrap\">\r\n          <div class=\"tui-image-editor-checkbox\">\r\n            <label\r\n              class=\"tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-align-items-center tui-image-editor-flex-nowrap\"\r\n            >\r\n              <input\r\n                type=\"checkbox\"\r\n                class=\"tie-color-filter\"\r\n                [(ngModel)]=\"filterColorFilterChecked\"\r\n                (ngModelChange)=\"filterColorFilterCheckedChanged($event)\"\r\n              />\r\n              <span>{{\r\n                \"tui-image-editor-angular-submenus-filter-colorFilter\"\r\n                  | translate\r\n              }}</span>\r\n            </label>\r\n          </div>\r\n        </div>\r\n        <div class=\"tui-image-editor-newline tui-image-editor-range-wrap short\">\r\n          <label>{{\r\n            \"tui-image-editor-angular-submenus-filter-colorFilter-threshold\"\r\n              | translate\r\n          }}</label>\r\n          <div class=\"tie-colorfilter-threshold-range tui-image-editor-range tui-image-editor-d-flex tui-image-editor-flex-row align-items-center tui-image-editor-my-2\">\r\n            <input\r\n              type=\"range\"\r\n              [(ngModel)]=\"filterColorFilterThreshold\"\r\n              (ngModelChange)=\"filterColorFilterThresholdChanged($event, true)\"\r\n              (change)=\"filterColorFilterThresholdChanged($event, false)\"\r\n              min=\"0\"\r\n              max=\"1\"\r\n              step=\"0.02\"\r\n              [disabled]=\"filterColorFilterChecked == false\"\r\n            />\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"tui-image-editor-partition\">\r\n      <div></div>\r\n    </div>\r\n    <div\r\n      class=\"tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-align-items-center\"\r\n    >\r\n      <div class=\"filter-color-item\">\r\n        <div\r\n          [class]=\"\r\n            'tie-filter-tint-color tui-image-editor-button tui-image-editor-button-color-picker tui-image-editor-d-flex tui-image-editor-flex-column tui-image-editor-align-items-center ' +\r\n            (filterTintChecked ? 'active' : '')\r\n          \"\r\n          [title]=\"'tui-image-editor-angular-submenus-filter-tint' | translate\"\r\n        >\r\n          <input\r\n            readonly\r\n            class=\"tie-filter-tint-color-picker tui-image-editor-mb-2\"\r\n            [(colorPicker)]=\"filterTintColor\"\r\n            [style.background]=\"filterTintColor\"\r\n            [cpOutputFormat]=\"'rgba'\"\r\n            [cpPresetColors]=\"defaultFilterTintColors\"\r\n            (colorPickerChange)=\"filterTintColorChanged($event)\"\r\n            [cpUseRootViewContainer]=\"true\"\r\n          />\r\n          <label\r\n            class=\"tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-align-items-center tui-image-editor-flex-nowrap\"\r\n          >\r\n            <input\r\n              type=\"checkbox\"\r\n              class=\"tie-tint\"\r\n              [(ngModel)]=\"filterTintChecked\"\r\n              (ngModelChange)=\"filterTintCheckedChanged($event)\"\r\n            />\r\n            <span>{{\r\n              \"tui-image-editor-angular-submenus-filter-tint\" | translate\r\n            }}</span>\r\n          </label>\r\n        </div>\r\n      </div>\r\n      <div class=\"filter-color-item\">\r\n        <div\r\n          [class]=\"\r\n            'tie-filter-multiply-color tui-image-editor-button tui-image-editor-button-color-picker tui-image-editor-d-flex tui-image-editor-flex-column tui-image-editor-align-items-center ' +\r\n            (filterMultiplyChecked ? 'active' : '')\r\n          \"\r\n          [title]=\"\r\n            'tui-image-editor-angular-submenus-filter-multiply' | translate\r\n          \"\r\n        >\r\n          <input\r\n            readonly\r\n            class=\"tie-filter-multiply-color-picker tui-image-editor-mb-2\"\r\n            [(colorPicker)]=\"filterMultiplyColor\"\r\n            [style.background]=\"filterMultiplyColor\"\r\n            [cpOutputFormat]=\"'hex'\"\r\n            [cpPresetColors]=\"defaultFilterMultiplyColors\"\r\n            (colorPickerChange)=\"filterMultiplyColorChanged($event)\"\r\n            [cpUseRootViewContainer]=\"true\"\r\n          />\r\n          <label\r\n            class=\"tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-align-items-center tui-image-editor-flex-nowrap\"\r\n          >\r\n            <input\r\n              type=\"checkbox\"\r\n              class=\"tie-multiply\"\r\n              [(ngModel)]=\"filterMultiplyChecked\"\r\n              (ngModelChange)=\"filterMultiplyCheckedChanged($event)\"\r\n            />\r\n            <span>{{\r\n              \"tui-image-editor-angular-submenus-filter-multiply\" | translate\r\n            }}</span>\r\n          </label>\r\n        </div>\r\n      </div>\r\n      <div class=\"filter-color-item\">\r\n        <div\r\n          [class]=\"\r\n            'tie-filter-blend-color tui-image-editor-button tui-image-editor-button-color-picker tui-image-editor-d-flex tui-image-editor-flex-column tui-image-editor-align-items-center ' +\r\n            (filterBlendChecked ? 'active' : '')\r\n          \"\r\n          [title]=\"'tui-image-editor-angular-submenus-filter-blend' | translate\"\r\n        >\r\n          <input\r\n            readonly\r\n            class=\"tie-filter-blend-color-picker tui-image-editor-mb-2\"\r\n            [(colorPicker)]=\"filterBlendColor\"\r\n            [style.background]=\"filterBlendColor\"\r\n            [cpOutputFormat]=\"'rgba'\"\r\n            [cpPresetColors]=\"defaultFilterBlendColors\"\r\n            (colorPickerChange)=\"filterBlendColorChanged($event)\"\r\n            [cpUseRootViewContainer]=\"true\"\r\n          />\r\n          <label\r\n            class=\"tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-align-items-center tui-image-editor-flex-nowrap\"\r\n          >\r\n            <input\r\n              type=\"checkbox\"\r\n              class=\"tie-blend\"\r\n              [(ngModel)]=\"filterBlendChecked\"\r\n              (ngModelChange)=\"filterBlendCheckedChanged($event)\"\r\n            />\r\n            <span>{{\r\n              \"tui-image-editor-angular-submenus-filter-blend\" | translate\r\n            }}</span>\r\n          </label>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.ColorPickerDirective, selector: "[colorPicker]", inputs: ["colorPicker", "cpWidth", "cpHeight", "cpToggle", "cpDisabled", "cpIgnoredElements", "cpFallbackColor", "cpColorMode", "cpCmykEnabled", "cpOutputFormat", "cpAlphaChannel", "cpDisableInput", "cpDialogDisplay", "cpSaveClickOutside", "cpCloseClickOutside", "cpUseRootViewContainer", "cpPosition", "cpPositionOffset", "cpPositionRelativeToArrow", "cpOKButton", "cpOKButtonText", "cpOKButtonClass", "cpCancelButton", "cpCancelButtonText", "cpCancelButtonClass", "cpEyeDropper", "cpPresetLabel", "cpPresetColors", "cpPresetColorsClass", "cpMaxPresetColorsLength", "cpPresetEmptyMessage", "cpPresetEmptyMessageClass", "cpAddColorButton", "cpAddColorButtonText", "cpAddColorButtonClass", "cpRemoveColorButtonClass", "cpExtraTemplate"], outputs: ["cpInputChange", "cpToggleChange", "cpSliderChange", "cpSliderDragEnd", "cpSliderDragStart", "colorPickerOpen", "colorPickerClose", "colorPickerCancel", "colorPickerSelect", "colorPickerChange", "cpCmykColorChange", "cpPresetColorsChange"], exportAs: ["ngxColorPicker"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: FilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tui-image-editor-submenus-filter', template: "<div\r\n  class=\"tui-image-editor-menu-filter tui-image-editor-d-flex tui-image-editor-justify-content-center\"\r\n>\r\n  <div\r\n    class=\"tui-image-editor-submenu-item tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-align-items-center tui-image-editor-overflowable-x tui-image-editor-py-3\"\r\n  >\r\n    <div class=\"tui-image-editor-submenu-align\">\r\n      <div\r\n        class=\"tui-image-editor-checkbox-wrap fixed-width tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-flex-wrap tui-image-editor-justify-content-center\"\r\n      >\r\n        <div class=\"tui-image-editor-checkbox tui-image-editor-align-self-center\">\r\n          <label\r\n            class=\"tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-align-items-center tui-image-editor-flex-nowrap\"\r\n          >\r\n            <input\r\n              type=\"checkbox\"\r\n              class=\"tie-grayscale\"\r\n              [(ngModel)]=\"filterGrayscaleChecked\"\r\n              (ngModelChange)=\"filterGrayscaleCheckedChanged($event)\"\r\n            />\r\n            <span>{{\r\n              \"tui-image-editor-angular-submenus-filter-grayscale\" | translate\r\n            }}</span>\r\n          </label>\r\n        </div>\r\n        <div class=\"tui-image-editor-checkbox tui-image-editor-align-self-center\">\r\n          <label\r\n            class=\"tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-align-items-center tui-image-editor-flex-nowrap\"\r\n          >\r\n            <input\r\n              type=\"checkbox\"\r\n              class=\"tie-invert\"\r\n              [(ngModel)]=\"filterInvertChecked\"\r\n              (ngModelChange)=\"filterInvertCheckedChanged($event)\"\r\n            />\r\n            <span>{{\r\n              \"tui-image-editor-angular-submenus-filter-invert\" | translate\r\n            }}</span>\r\n          </label>\r\n        </div>\r\n        <div class=\"tui-image-editor-checkbox tui-image-editor-align-self-center\">\r\n          <label\r\n            class=\"tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-align-items-center tui-image-editor-flex-nowrap\"\r\n          >\r\n            <input\r\n              type=\"checkbox\"\r\n              class=\"tie-sepia\"\r\n              [(ngModel)]=\"filterSepiaChecked\"\r\n              (ngModelChange)=\"filterSepiaCheckedChanged($event)\"\r\n            />\r\n            <span>{{\r\n              \"tui-image-editor-angular-submenus-filter-sepia\" | translate\r\n            }}</span>\r\n          </label>\r\n        </div>\r\n        <div class=\"tui-image-editor-checkbox tui-image-editor-align-self-center\">\r\n          <label\r\n            class=\"tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-align-items-center tui-image-editor-flex-nowrap\"\r\n          >\r\n            <input\r\n              type=\"checkbox\"\r\n              class=\"tie-vintage\"\r\n              [(ngModel)]=\"filterVintageChecked\"\r\n              (ngModelChange)=\"filterVintageCheckedChanged($event)\"\r\n            />\r\n            <span>{{\r\n              \"tui-image-editor-angular-submenus-filter-sepia2\" | translate\r\n            }}</span>\r\n          </label>\r\n        </div>\r\n        <div class=\"tui-image-editor-checkbox tui-image-editor-align-self-center\">\r\n          <label\r\n            class=\"tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-align-items-center tui-image-editor-flex-nowrap\"\r\n          >\r\n            <input\r\n              type=\"checkbox\"\r\n              class=\"tie-blur\"\r\n              [(ngModel)]=\"filterBlurChecked\"\r\n              (ngModelChange)=\"filterBlurCheckedChanged($event)\"\r\n            />\r\n            <span>{{\r\n              \"tui-image-editor-angular-submenus-filter-blur\" | translate\r\n            }}</span>\r\n          </label>\r\n        </div>\r\n        <div class=\"tui-image-editor-checkbox tui-image-editor-align-self-center\">\r\n          <label\r\n            class=\"tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-align-items-center tui-image-editor-flex-nowrap\"\r\n          >\r\n            <input\r\n              type=\"checkbox\"\r\n              class=\"tie-sharpen\"\r\n              [(ngModel)]=\"filterSharpenChecked\"\r\n              (ngModelChange)=\"filterSharpenCheckedChanged($event)\"\r\n            />\r\n            <span>{{\r\n              \"tui-image-editor-angular-submenus-filter-sharpen\" | translate\r\n            }}</span>\r\n          </label>\r\n        </div>\r\n        <div class=\"tui-image-editor-checkbox tui-image-editor-align-self-center\">\r\n          <label\r\n            class=\"tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-align-items-center tui-image-editor-flex-nowrap\"\r\n          >\r\n            <input\r\n              type=\"checkbox\"\r\n              class=\"tie-emboss\"\r\n              [(ngModel)]=\"filterEmbossChecked\"\r\n              (ngModelChange)=\"filterEmbossCheckedChanged($event)\"\r\n            />\r\n            <span>{{\r\n              \"tui-image-editor-angular-submenus-filter-emboss\" | translate\r\n            }}</span>\r\n          </label>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"tui-image-editor-partition\">\r\n      <div></div>\r\n    </div>\r\n    <div class=\"tui-image-editor-submenu-align\">\r\n      <div\r\n        class=\"tui-image-editor-checkbox-group tui-image-editor-disabled\"\r\n        style=\"margin-bottom: 7px\"\r\n      >\r\n        <div class=\"tui-image-editor-checkbox-wrap\">\r\n          <div class=\"tui-image-editor-checkbox\">\r\n            <label\r\n              class=\"tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-align-items-center tui-image-editor-flex-nowrap\"\r\n            >\r\n              <input\r\n                type=\"checkbox\"\r\n                class=\"tie-remove-white\"\r\n                [(ngModel)]=\"filterWhiteRemovalChecked\"\r\n                (ngModelChange)=\"filterWhiteRemovalCheckedChanged($event)\"\r\n              />\r\n              <span>{{\r\n                \"tui-image-editor-angular-submenus-filter-removeWhite\"\r\n                  | translate\r\n              }}</span>\r\n            </label>\r\n          </div>\r\n        </div>\r\n        <div\r\n          class=\"tui-image-editor-newline tui-image-editor-range-wrap short tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-flex-nowrap tui-image-editor-align-items-center\"\r\n        >\r\n          <label>{{\r\n            \"tui-image-editor-angular-submenus-filter-removeWhite-distance\"\r\n              | translate\r\n          }}</label>\r\n          <input\r\n            type=\"range\"\r\n            [(ngModel)]=\"filterWhiteRemovalDistance\"\r\n            (ngModelChange)=\"filterWhiteRemovalDistanceChanged($event, true)\"\r\n            (change)=\"filterWhiteRemovalDistanceChanged($event, false)\"\r\n            min=\"0\"\r\n            max=\"1\"\r\n            step=\"0.001\"\r\n            [disabled]=\"filterWhiteRemovalChecked == false\"\r\n          />\r\n        </div>\r\n      </div>\r\n      <div class=\"tui-image-editor-checkbox-group tui-image-editor-disabled\">\r\n        <div class=\"tui-image-editor-checkbox\">\r\n          <label\r\n            class=\"tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-align-items-center tui-image-editor-flex-nowrap\"\r\n          >\r\n            <input\r\n              type=\"checkbox\"\r\n              class=\"tie-brightness\"\r\n              [(ngModel)]=\"filterBrightnessChecked\"\r\n              (ngModelChange)=\"filterBrightnessCheckedChanged($event)\"\r\n            />\r\n            <span>{{\r\n              \"tui-image-editor-angular-submenus-filter-brightness\" | translate\r\n            }}</span>\r\n          </label>\r\n        </div>\r\n        <div class=\"tui-image-editor-range-wrap short tui-image-editor-d-flex tui-image-editor-flex-row align-items-center tui-image-editor-my-2\">\r\n          <input\r\n            type=\"range\"\r\n            [(ngModel)]=\"filterBrightnessValue\"\r\n            (ngModelChange)=\"filterBrightnessValueChanged($event, true)\"\r\n            (change)=\"filterBrightnessValueChanged($event, false)\"\r\n            min=\"-1\"\r\n            max=\"1\"\r\n            step=\"0.03\"\r\n            [disabled]=\"filterBrightnessChecked == false\"\r\n          />\r\n        </div>\r\n      </div>\r\n      <div class=\"tui-image-editor-checkbox-group tui-image-editor-disabled\">\r\n        <div class=\"tui-image-editor-checkbox\">\r\n          <label\r\n            class=\"tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-align-items-center tui-image-editor-flex-nowrap\"\r\n          >\r\n            <input\r\n              type=\"checkbox\"\r\n              class=\"tie-noise\"\r\n              [(ngModel)]=\"filterNoiseChecked\"\r\n              (ngModelChange)=\"filterNoiseCheckedChanged($event)\"\r\n            />\r\n            <span>{{\r\n              \"tui-image-editor-angular-submenus-filter-noise\" | translate\r\n            }}</span>\r\n          </label>\r\n        </div>\r\n        <div class=\"tui-image-editor-range-wrap short tui-image-editor-d-flex tui-image-editor-flex-row align-items-center tui-image-editor-my-2\">\r\n          <input\r\n            type=\"range\"\r\n            [(ngModel)]=\"filterNoiseValue\"\r\n            (ngModelChange)=\"filterNoiseValueChanged($event, true)\"\r\n            (change)=\"filterNoiseValueChanged($event, false)\"\r\n            min=\"0\"\r\n            max=\"1000\"\r\n            step=\"10\"\r\n            [disabled]=\"filterNoiseChecked == false\"\r\n          />\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"tui-image-editor-partition only-left-right\">\r\n      <div></div>\r\n    </div>\r\n    <div class=\"tui-image-editor-submenu-align\">\r\n      <div class=\"tui-image-editor-checkbox-group tui-image-editor-disabled\">\r\n        <div class=\"tui-image-editor-checkbox\">\r\n          <label\r\n            class=\"tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-align-items-center tui-image-editor-flex-nowrap\"\r\n          >\r\n            <input\r\n              type=\"checkbox\"\r\n              class=\"tie-pixelate\"\r\n              [(ngModel)]=\"filterPixelateChecked\"\r\n              (ngModelChange)=\"filterPixelateCheckedChanged($event)\"\r\n            />\r\n            <span>{{\r\n              \"tui-image-editor-angular-submenus-filter-pixelate\" | translate\r\n            }}</span>\r\n          </label>\r\n        </div>\r\n        <div class=\"tui-image-editor-range-wrap short tui-image-editor-d-flex tui-image-editor-flex-row align-items-center tui-image-editor-my-2\">\r\n          <input\r\n            type=\"range\"\r\n            [(ngModel)]=\"filterPixelateValue\"\r\n            (ngModelChange)=\"filterPixelateValueChanged($event, true)\"\r\n            (change)=\"filterPixelateValueChanged($event, false)\"\r\n            min=\"2\"\r\n            max=\"20\"\r\n            step=\"1\"\r\n            [disabled]=\"filterPixelateChecked == false\"\r\n          />\r\n        </div>\r\n      </div>\r\n      <div class=\"tui-image-editor-checkbox-group tui-image-editor-disabled\">\r\n        <div class=\"tui-image-editor-newline tui-image-editor-checkbox-wrap\">\r\n          <div class=\"tui-image-editor-checkbox\">\r\n            <label\r\n              class=\"tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-align-items-center tui-image-editor-flex-nowrap\"\r\n            >\r\n              <input\r\n                type=\"checkbox\"\r\n                class=\"tie-color-filter\"\r\n                [(ngModel)]=\"filterColorFilterChecked\"\r\n                (ngModelChange)=\"filterColorFilterCheckedChanged($event)\"\r\n              />\r\n              <span>{{\r\n                \"tui-image-editor-angular-submenus-filter-colorFilter\"\r\n                  | translate\r\n              }}</span>\r\n            </label>\r\n          </div>\r\n        </div>\r\n        <div class=\"tui-image-editor-newline tui-image-editor-range-wrap short\">\r\n          <label>{{\r\n            \"tui-image-editor-angular-submenus-filter-colorFilter-threshold\"\r\n              | translate\r\n          }}</label>\r\n          <div class=\"tie-colorfilter-threshold-range tui-image-editor-range tui-image-editor-d-flex tui-image-editor-flex-row align-items-center tui-image-editor-my-2\">\r\n            <input\r\n              type=\"range\"\r\n              [(ngModel)]=\"filterColorFilterThreshold\"\r\n              (ngModelChange)=\"filterColorFilterThresholdChanged($event, true)\"\r\n              (change)=\"filterColorFilterThresholdChanged($event, false)\"\r\n              min=\"0\"\r\n              max=\"1\"\r\n              step=\"0.02\"\r\n              [disabled]=\"filterColorFilterChecked == false\"\r\n            />\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"tui-image-editor-partition\">\r\n      <div></div>\r\n    </div>\r\n    <div\r\n      class=\"tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-align-items-center\"\r\n    >\r\n      <div class=\"filter-color-item\">\r\n        <div\r\n          [class]=\"\r\n            'tie-filter-tint-color tui-image-editor-button tui-image-editor-button-color-picker tui-image-editor-d-flex tui-image-editor-flex-column tui-image-editor-align-items-center ' +\r\n            (filterTintChecked ? 'active' : '')\r\n          \"\r\n          [title]=\"'tui-image-editor-angular-submenus-filter-tint' | translate\"\r\n        >\r\n          <input\r\n            readonly\r\n            class=\"tie-filter-tint-color-picker tui-image-editor-mb-2\"\r\n            [(colorPicker)]=\"filterTintColor\"\r\n            [style.background]=\"filterTintColor\"\r\n            [cpOutputFormat]=\"'rgba'\"\r\n            [cpPresetColors]=\"defaultFilterTintColors\"\r\n            (colorPickerChange)=\"filterTintColorChanged($event)\"\r\n            [cpUseRootViewContainer]=\"true\"\r\n          />\r\n          <label\r\n            class=\"tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-align-items-center tui-image-editor-flex-nowrap\"\r\n          >\r\n            <input\r\n              type=\"checkbox\"\r\n              class=\"tie-tint\"\r\n              [(ngModel)]=\"filterTintChecked\"\r\n              (ngModelChange)=\"filterTintCheckedChanged($event)\"\r\n            />\r\n            <span>{{\r\n              \"tui-image-editor-angular-submenus-filter-tint\" | translate\r\n            }}</span>\r\n          </label>\r\n        </div>\r\n      </div>\r\n      <div class=\"filter-color-item\">\r\n        <div\r\n          [class]=\"\r\n            'tie-filter-multiply-color tui-image-editor-button tui-image-editor-button-color-picker tui-image-editor-d-flex tui-image-editor-flex-column tui-image-editor-align-items-center ' +\r\n            (filterMultiplyChecked ? 'active' : '')\r\n          \"\r\n          [title]=\"\r\n            'tui-image-editor-angular-submenus-filter-multiply' | translate\r\n          \"\r\n        >\r\n          <input\r\n            readonly\r\n            class=\"tie-filter-multiply-color-picker tui-image-editor-mb-2\"\r\n            [(colorPicker)]=\"filterMultiplyColor\"\r\n            [style.background]=\"filterMultiplyColor\"\r\n            [cpOutputFormat]=\"'hex'\"\r\n            [cpPresetColors]=\"defaultFilterMultiplyColors\"\r\n            (colorPickerChange)=\"filterMultiplyColorChanged($event)\"\r\n            [cpUseRootViewContainer]=\"true\"\r\n          />\r\n          <label\r\n            class=\"tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-align-items-center tui-image-editor-flex-nowrap\"\r\n          >\r\n            <input\r\n              type=\"checkbox\"\r\n              class=\"tie-multiply\"\r\n              [(ngModel)]=\"filterMultiplyChecked\"\r\n              (ngModelChange)=\"filterMultiplyCheckedChanged($event)\"\r\n            />\r\n            <span>{{\r\n              \"tui-image-editor-angular-submenus-filter-multiply\" | translate\r\n            }}</span>\r\n          </label>\r\n        </div>\r\n      </div>\r\n      <div class=\"filter-color-item\">\r\n        <div\r\n          [class]=\"\r\n            'tie-filter-blend-color tui-image-editor-button tui-image-editor-button-color-picker tui-image-editor-d-flex tui-image-editor-flex-column tui-image-editor-align-items-center ' +\r\n            (filterBlendChecked ? 'active' : '')\r\n          \"\r\n          [title]=\"'tui-image-editor-angular-submenus-filter-blend' | translate\"\r\n        >\r\n          <input\r\n            readonly\r\n            class=\"tie-filter-blend-color-picker tui-image-editor-mb-2\"\r\n            [(colorPicker)]=\"filterBlendColor\"\r\n            [style.background]=\"filterBlendColor\"\r\n            [cpOutputFormat]=\"'rgba'\"\r\n            [cpPresetColors]=\"defaultFilterBlendColors\"\r\n            (colorPickerChange)=\"filterBlendColorChanged($event)\"\r\n            [cpUseRootViewContainer]=\"true\"\r\n          />\r\n          <label\r\n            class=\"tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-align-items-center tui-image-editor-flex-nowrap\"\r\n          >\r\n            <input\r\n              type=\"checkbox\"\r\n              class=\"tie-blend\"\r\n              [(ngModel)]=\"filterBlendChecked\"\r\n              (ngModelChange)=\"filterBlendCheckedChanged($event)\"\r\n            />\r\n            <span>{{\r\n              \"tui-image-editor-angular-submenus-filter-blend\" | translate\r\n            }}</span>\r\n          </label>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+        }], ctorParameters: function () { return [{ type: HistoryService }]; }, propDecorators: { imageEditor: [{
+                type: Input
+            }] } });
+
+class TuiImageEditorComponent {
+    constructor(historyService) {
+        this.historyService = historyService;
+        this.onInitialization = new EventEmitter();
+        this.options = {
+            usageStatistics: false,
+            selectionStyle: {
+                cornerStyle: 'circle',
+                cornerSize: 32,
+                cornerColor: '#fff',
+                cornerStrokeColor: '#fff',
+                transparentCorners: false,
+                lineWidth: 4,
+                borderColor: '#fff',
+                rotatingPointOffset: 500,
+            },
+            applyCropSelectionStyle: true,
+            applyGroupSelectionStyle: true,
+        };
+        this.template = 'default';
+        this.imageLoaded = false;
+        this.initializeImgUrl = null;
+        this.imageChosen = false;
+        this.showSubmenu = false;
+        this.isMenuExpanded = false;
+        this.rotation = 0;
+        this.onObjectActivatedEventListener = this.onObjectActivated.bind(this);
+        this.onExecuteCommandEventListener = this.onExecuteCommand.bind(this);
+        this.onAfterUndoEventListener = this.onAfterUndo.bind(this);
+        this.onAfterRedoEventListener = this.onAfterRedo.bind(this);
+    }
+    ngOnInit() {
+        this.historyServiceSubscription =
+            this.historyService.onChangeEmitter.subscribe((items) => this.onActiveHistoryElementChanged(items));
+    }
+    ngOnChanges(changes) {
+        if ((changes['options'] && changes['options'].firstChange == false) ||
+            (changes['initialImage'] && changes['initialImage'].firstChange == false)) {
+            this.destroyImageEditor();
+            this.initializeImageEditor();
+        }
+    }
+    initializeImageEditor() {
+        this.historyService.clear();
+        this.imageEditor = new ImageEditor(this.imageContainer.nativeElement, this.options);
+        this.onInitialization.emit({
+            imageEditor: this.imageEditor
+        });
+        console.debug(this.imageEditor);
+        this.imageEditor.registerIcons(defaultIconPath);
+        this.imageEditor.on(eventNames.OBJECT_ACTIVATED, this.onObjectActivatedEventListener);
+        this.imageEditor._invoker.on(eventNames.EXECUTE_COMMAND, this.onExecuteCommandEventListener);
+        this.imageEditor._invoker.on(eventNames.AFTER_UNDO, this.onAfterUndoEventListener);
+        this.imageEditor._invoker.on(eventNames.AFTER_REDO, this.onAfterRedoEventListener);
+        if (this.initialImage != null) {
+            this.loadImage(this.initialImage);
+        }
+    }
+    destroyImageEditor() {
+        console.log('DISPOSING IMAGE EDITOR...');
+        if (this.imageEditor != null) {
+            this.imageEditor.off(eventNames.OBJECT_ACTIVATED, this.onObjectActivatedEventListener);
+            this.imageEditor._invoker.off(eventNames.EXECUTE_COMMAND, this.onExecuteCommandEventListener);
+            this.imageEditor._invoker.off(eventNames.AFTER_UNDO, this.onAfterUndoEventListener);
+            this.imageEditor._invoker.off(eventNames.AFTER_REDO, this.onAfterRedoEventListener);
+            const canvas = this.imageEditor._graphics._canvas;
+            this.imageEditor.destroy();
+            canvas.dispose();
+        }
+    }
+    ngAfterViewInit() {
+        var that = this;
+        this.loadBtn.nativeElement.style.zIndex = '1';
+        this.imageContainer.nativeElement.style.zIndex = '-1';
+        setTimeout(() => {
+            //   this.imageEditor.on(eventNames.SELECTION_CLEARED, function () {
+            //     that.activeObjectId = null;
+            //     if (that.submenu === 'text') {
+            //       that.imageEditor.changeCursor('text');
+            //     } else if (that.submenu !== 'draw' && that.submenu !== 'crop') {
+            //       that.imageEditor.stopDrawingMode();
+            //     }
+            //   });
+            that.initializeImageEditor();
+        });
+    }
+    ngOnDestroy() {
+        if (this.initializeImgUrl != null) {
+            URL.revokeObjectURL(this.initializeImgUrl);
+        }
+        this.destroyImageEditor();
+        this.historyServiceSubscription?.unsubscribe();
+    }
+    onObjectActivated(props) {
+        console.debug(props);
+        this.activeObjectId = props?.id;
+        if (props?.id != null) {
+            if ([
+                objectTypes.shapeRect,
+                objectTypes.shapeCircle,
+                objectTypes.shapeTriangle,
+            ].indexOf(props.type) > -1) {
+                this.showMenu('shape', false);
+            }
+            else if (props.type === objectTypes.line ||
+                props.type === objectTypes.straightLine) {
+                this.showMenu('draw', false);
+            }
+            else if (props.type === objectTypes.itext ||
+                props.type === objectTypes.text) {
+                this.showMenu('text', false);
+            }
+            else if (props.type === objectTypes.icon) {
+                this.showMenu('icon', false);
+            }
+            else if (props.type === objectTypes.image) {
+                this.showMenu('mask', false);
+            }
+        }
+    }
+    onExecuteCommand(command) {
+        if (!isSilentCommand(command)) {
+            this.historyService.add(command, this.imageEditor);
+        }
+    }
+    onAfterUndo() {
+        this.historyService.prev();
+    }
+    onAfterRedo() {
+        this.historyService.next();
+    }
+    onLoad(event) {
+        this.loadBtn.nativeElement.style.zIndex = '-1';
+        this.imageContainer.nativeElement.style.zIndex = '1';
+        this.loadImage(event);
+    }
+    loadImage(file) {
+        const type = file?.name?.split('.').pop();
+        if (type?.toLowerCase() === 'heic') {
+            heic2any({ blob: file }).then(data => {
+                file = data;
+                this.uploadIMage(file);
+            }).catch(err => {
+                console.log("Err", err);
+            });
+        }
+        else {
+            this.uploadIMage(file);
+        }
+    }
+    uploadIMage(file) {
+        if (file != null) {
+            let imageUrl = null;
+            if (typeof file === 'string') {
+                imageUrl = file;
+            }
+            else {
+                if (!isFileApiSupported()) {
+                    alert('This browser does not support file-api');
+                    return;
+                }
+                imageUrl = URL.createObjectURL(file);
+            }
+            if (this.initializeImgUrl != null && imageUrl != this.initializeImgUrl) {
+                URL.revokeObjectURL(this.initializeImgUrl);
+            }
+            this.initializeImgUrl = imageUrl;
+            this.imageEditor
+                .loadImageFromURL(this.initializeImgUrl, 'RandomFileName')
+                .then((sizeValue) => {
+                this.imageChosen = true;
+                this.showMenu('draw', false);
+                this.exitCropOnAction();
+                this.imageEditor.clearUndoStack();
+                this.imageEditor.clearRedoStack();
+                this.historyService.clear();
+                this.imageEditor._invoker.fire(eventNames.EXECUTE_COMMAND, historyNames.LOAD_IMAGE);
+            })['catch']((message) => Promise.reject(message));
+        }
+    }
+    resetImage() {
+        if (this.initializeImgUrl != null) {
+            this.loadImage(this.initializeImgUrl);
+        }
+    }
+    getImage(options = {
+        format: 'png',
+        quality: 1,
+        multiplier: 1,
+    }) {
+        if (this.imageChosen) {
+            return this.imageEditor.toDataURL(options);
+        }
+        return null;
+    }
+    exitCropOnAction() {
+        this.hideMenu('crop');
+    }
+    hideMenu(menuName) {
+        if (this.submenu == menuName) {
+            this.submenu = null;
+            this.showSubmenu = false;
+            clearSelection(this.imageEditor);
+            this.imageEditor.stopDrawingMode();
+        }
+    }
+    onActiveHistoryElementChanged(items) {
+        let rotationEvents = items.filter((i) => i.type === HistoryItemType.Rotate);
+        if (rotationEvents.length > 0) {
+            let lastRotationEvent = rotationEvents[rotationEvents.length - 1];
+            this.rotation = lastRotationEvent.args[0];
+        }
+        else {
+            this.rotation = 0;
+        }
+    }
+    showMenu(menuName, discardSelection = true) {
+        this.submenu = menuName;
+        this.showSubmenu = true;
+        if (discardSelection) {
+            clearSelection(this.imageEditor);
+        }
+        this.imageEditor.stopDrawingMode();
+        //this.stopShape();
+        // this._changeMenu(menuName, toggle, discardSelection);
+        // if (this.submenu == 'draw') {
+        //   this.setDrawMode('free', {
+        //     width: this.drawStrokeWidthValue,
+        //     color: this.drawStrokeColor,
+        //   });
+        // }
+    }
+}
+TuiImageEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TuiImageEditorComponent, deps: [{ token: HistoryService }], target: i0.ɵɵFactoryTarget.Component });
+TuiImageEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: TuiImageEditorComponent, selector: "tui-image-editor", inputs: { options: "options", initialImage: "initialImage", template: "template" }, outputs: { onInitialization: "onInitialization" }, providers: [HistoryService], viewQueries: [{ propertyName: "imageContainer", first: true, predicate: ["imageContainer"], descendants: true }, { propertyName: "loadBtn", first: true, predicate: ["loadBtn"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"template==='default';else newImageEditor\"\r\n  class=\"tui-image-editor-d-flex tui-image-editor-flex-column tui-image-editor-justify-content-center tui-image-editor-h-100 tui-image-editor-w-100 tui-image-editor-container\">\r\n  <div\r\n    class=\"tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-flex-wrap tui-image-editor-justify-content-center tui-image-editor-align-items-center\">\r\n    <div\r\n      class=\"tui-image-editor-help-menu tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-flex-wrap tui-image-editor-align-items-center tui-image-editor-justify-content-center tui-image-editor-p-1\">\r\n      <div></div>\r\n      <!-- <div #loadBtn style=\"position: absolute;\"\r\n        class=\"tui-image-editor-help-menu-item tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-flex-nowrap\">\r\n        <tui-image-editor-menus-buttons-load (loadImage)=\"loadImage($event)\"></tui-image-editor-menus-buttons-load>\r\n        <tui-image-editor-menus-buttons-download [imageChosen]=\"imageChosen\"\r\n          [imageEditor]=\"imageEditor\"></tui-image-editor-menus-buttons-download>\r\n      </div> -->\r\n      <div\r\n        class=\"tui-image-editor-help-menu-item tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-flex-nowrap\">\r\n        <tui-image-editor-menus-buttons-zoom-in [imageChosen]=\"imageChosen\"\r\n          [imageEditor]=\"imageEditor\"></tui-image-editor-menus-buttons-zoom-in>\r\n        <tui-image-editor-menus-buttons-zoom-out [imageChosen]=\"imageChosen\"\r\n          [imageEditor]=\"imageEditor\"></tui-image-editor-menus-buttons-zoom-out>\r\n        <tui-image-editor-menus-buttons-drag [imageChosen]=\"imageChosen\"\r\n          [imageEditor]=\"imageEditor\"></tui-image-editor-menus-buttons-drag>\r\n      </div>\r\n      <div\r\n        class=\"tui-image-editor-help-menu-item tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-flex-nowrap\">\r\n        <tui-image-editor-menus-buttons-history [imageEditor]=\"imageEditor\"></tui-image-editor-menus-buttons-history>\r\n        <tui-image-editor-menus-buttons-undo [imageEditor]=\"imageEditor\"\r\n          (cancelCroppingRequested)=\"exitCropOnAction()\"></tui-image-editor-menus-buttons-undo>\r\n        <tui-image-editor-menus-buttons-redo [imageEditor]=\"imageEditor\"\r\n          (cancelCroppingRequested)=\"exitCropOnAction()\"></tui-image-editor-menus-buttons-redo>\r\n        <tui-image-editor-menus-buttons-reset [imageChosen]=\"imageChosen\" [imageEditor]=\"imageEditor\"\r\n          (cancelCroppingRequested)=\"exitCropOnAction()\"\r\n          (resetImage)=\"resetImage()\"></tui-image-editor-menus-buttons-reset>\r\n      </div>\r\n      <div\r\n        class=\"tui-image-editor-help-menu-item tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-flex-nowrap\">\r\n        <tui-image-editor-menus-buttons-delete [imageChosen]=\"imageChosen\" [imageEditor]=\"imageEditor\"\r\n          (cancelCroppingRequested)=\"exitCropOnAction()\"></tui-image-editor-menus-buttons-delete>\r\n        <tui-image-editor-menus-buttons-delete-all [imageChosen]=\"imageChosen\" [imageEditor]=\"imageEditor\"\r\n          (cancelCroppingRequested)=\"exitCropOnAction()\"></tui-image-editor-menus-buttons-delete-all>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- <div #imageContainer\r\n    class=\"tui-image-editor-flex-grow-1 tui-image-editor-d-flex tui-image-editor-align-items-center tui-image-editor-justify-content-center\"\r\n    [style.height]=\"'0'\"></div> -->\r\n    <div style=\"position: relative;height: 100%; display: flex; justify-content: center; align-items: center;\">\r\n      <div #loadBtn style=\"position: absolute;\"\r\n        class=\"tui-image-editor-help-menu-item tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-flex-nowrap\">\r\n        <tui-image-editor-menus-buttons-load (loadImage)=\"onLoad($event)\"></tui-image-editor-menus-buttons-load>\r\n      </div>\r\n      <div style=\"position: absolute;height: 100%; width: 100%;\" #imageContainer\r\n        class=\"tui-image-editor-flex-grow-1 tui-image-editor-d-flex tui-image-editor-align-items-center tui-image-editor-justify-content-center\">\r\n      </div>\r\n    </div>\r\n  <div class=\"tui-image-editor-submenu\" *ngIf=\"submenu != null\">\r\n    <tui-image-editor-submenus-crop *ngIf=\"submenu == 'crop'\" [imageEditor]=\"imageEditor\"\r\n      (cancelCroppingRequested)=\"exitCropOnAction()\"></tui-image-editor-submenus-crop>\r\n    <tui-image-editor-submenus-flip *ngIf=\"submenu == 'flip'\"\r\n      [imageEditor]=\"imageEditor\"></tui-image-editor-submenus-flip>\r\n    <tui-image-editor-submenus-rotate *ngIf=\"submenu == 'rotate'\" [imageEditor]=\"imageEditor\"\r\n      [(rotation)]=\"rotation\"></tui-image-editor-submenus-rotate>\r\n    <tui-image-editor-submenus-draw *ngIf=\"submenu == 'draw'\"\r\n      [imageEditor]=\"imageEditor\"></tui-image-editor-submenus-draw>\r\n    <tui-image-editor-submenus-shape *ngIf=\"submenu == 'shape'\"\r\n      [imageEditor]=\"imageEditor\"></tui-image-editor-submenus-shape>\r\n    <tui-image-editor-submenus-icon *ngIf=\"submenu == 'icon'\"\r\n      [imageEditor]=\"imageEditor\"></tui-image-editor-submenus-icon>\r\n    <tui-image-editor-submenus-text *ngIf=\"submenu == 'text'\"\r\n      [imageEditor]=\"imageEditor\"></tui-image-editor-submenus-text>\r\n    <tui-image-editor-submenus-mask *ngIf=\"submenu == 'mask'\"\r\n      [imageEditor]=\"imageEditor\"></tui-image-editor-submenus-mask>\r\n    <tui-image-editor-submenus-filter *ngIf=\"submenu == 'filter'\"\r\n      [imageEditor]=\"imageEditor\"></tui-image-editor-submenus-filter>\r\n  </div>\r\n  <div\r\n    class=\"tui-image-editor-controls tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-justify-content-center\">\r\n    <div\r\n      class=\"tui-image-editor-menu tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-flex-nowrap tui-image-editor-align-items-center\">\r\n      <tui-image-editor-menus-buttons-crop [imageChosen]=\"imageChosen\" [selected]=\"submenu == 'crop'\"\r\n        (clicked)=\"submenu == 'crop' ? hideMenu($event) : showMenu($event)\"></tui-image-editor-menus-buttons-crop>\r\n      <tui-image-editor-menus-buttons-flip [imageChosen]=\"imageChosen\" [selected]=\"submenu == 'flip'\"\r\n        (clicked)=\"submenu == 'flip' ? hideMenu($event) : showMenu($event)\">\r\n      </tui-image-editor-menus-buttons-flip>\r\n      <tui-image-editor-menus-buttons-rotate [imageChosen]=\"imageChosen\" [selected]=\"submenu == 'rotate'\"\r\n        (clicked)=\"submenu == 'rotate' ? hideMenu($event) : showMenu($event)\"></tui-image-editor-menus-buttons-rotate>\r\n      <tui-image-editor-menus-buttons-draw [imageChosen]=\"imageChosen\" [selected]=\"submenu == 'draw'\"\r\n        (clicked)=\"submenu == 'draw' ? hideMenu($event) : showMenu($event)\"></tui-image-editor-menus-buttons-draw>\r\n      <tui-image-editor-menus-buttons-shape [imageChosen]=\"imageChosen\" [selected]=\"submenu == 'shape'\"\r\n        (clicked)=\"submenu == 'shape' ? hideMenu($event) : showMenu($event)\"></tui-image-editor-menus-buttons-shape>\r\n      <tui-image-editor-menus-buttons-icon [imageChosen]=\"imageChosen\" [selected]=\"submenu == 'icon'\"\r\n        (clicked)=\"submenu == 'icon' ? hideMenu($event) : showMenu($event)\"></tui-image-editor-menus-buttons-icon>\r\n      <tui-image-editor-menus-buttons-text [imageChosen]=\"imageChosen\" [selected]=\"submenu == 'text'\"\r\n        (clicked)=\"submenu == 'text' ? hideMenu($event) : showMenu($event)\"></tui-image-editor-menus-buttons-text>\r\n      <tui-image-editor-menus-buttons-mask [imageChosen]=\"imageChosen\" [selected]=\"submenu == 'mask'\"\r\n        (clicked)=\"submenu == 'mask' ? hideMenu($event) : showMenu($event)\"></tui-image-editor-menus-buttons-mask>\r\n      <tui-image-editor-menus-buttons-filter [imageChosen]=\"imageChosen\" [selected]=\"submenu == 'filter'\"\r\n        (clicked)=\"submenu == 'filter' ? hideMenu($event) : showMenu($event)\"></tui-image-editor-menus-buttons-filter>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #newImageEditor>\r\n  <div class=\"new-template tui-image-editor-container\">\r\n    <div class=\"image-load-container\">\r\n      <div style=\"position: relative;height: 100%; display: flex; justify-content: center; align-items: center;\">\r\n        <div #loadBtn style=\"position: absolute;\"\r\n          class=\"tui-image-editor-help-menu-item tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-flex-nowrap\">\r\n          <tui-image-editor-menus-buttons-load (loadImage)=\"onLoad($event)\"></tui-image-editor-menus-buttons-load>\r\n        </div>\r\n        <div style=\"position: absolute;height: 100%; width: 100%;\" #imageContainer\r\n          class=\"tui-image-editor-flex-grow-1 tui-image-editor-d-flex tui-image-editor-align-items-center tui-image-editor-justify-content-center\">\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"tools-container\" style=\"position: relative;\" [style.width.px]=\"isMenuExpanded ? 160 : 80\">\r\n      <div class=\"primary-tools\">\r\n        <div class=\"selected-option\" style=\"cursor: pointer;\" (click)=\"showSubmenu=!showSubmenu\">\r\n          <svg *ngIf=\"!showSubmenu\" width=\"18\" height=\"16\" viewBox=\"0 0 18 16\" fill=\"none\"\r\n            xmlns=\"http://www.w3.org/2000/svg\">\r\n            <path opacity=\"0.7\" fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n              d=\"M9.3809 2.67601H17.0011C17.5527 2.67601 18 3.12327 18 3.67491C18 4.22654 17.5527 4.6738 17.0011 4.6738H9.38083C8.94507 6.20757 7.53168 7.33419 5.86014 7.33419C4.18856 7.33419 2.77524 6.20757 2.33944 4.6738H0.998897C0.447224 4.6738 0 4.22651 0 3.67487C0 3.12323 0.447224 2.67597 0.998897 2.67601H2.33951C2.77527 1.14224 4.18863 0.015625 5.86021 0.015625C7.53175 0.015625 8.9451 1.14224 9.3809 2.67601ZM4.19868 3.67484C4.19868 4.59097 4.944 5.33632 5.86017 5.33632C6.77635 5.33632 7.52166 4.59097 7.52166 3.67484C7.52166 2.7587 6.77635 2.01335 5.86017 2.01335C4.944 2.01335 4.19868 2.7587 4.19868 3.67484ZM15.6581 11.3275H17.0011C17.5528 11.3275 18 11.7748 18 12.3264C18 12.8781 17.5528 13.3253 17.0011 13.3253H15.6581C15.2224 14.8591 13.809 15.9857 12.1374 15.9857C10.4659 15.9857 9.05254 14.8591 8.61674 13.3253H0.998897C0.447224 13.3253 0 12.8781 0 12.3264C0 11.7748 0.447224 11.3275 0.998897 11.3275H8.61674C9.05251 9.79378 10.4659 8.66716 12.1374 8.66716C13.809 8.66716 15.2223 9.79378 15.6581 11.3275ZM10.476 12.3264C10.476 13.2426 11.2213 13.9879 12.1374 13.9879C13.0536 13.9879 13.799 13.2426 13.7989 12.3264C13.7989 11.4103 13.0536 10.665 12.1374 10.665C11.2213 10.665 10.476 11.4103 10.476 12.3264Z\"\r\n              fill=\"#25282B\" />\r\n          </svg>\r\n          <svg *ngIf=\"showSubmenu\" width=\"42\" height=\"40\" viewBox=\"0 0 42 40\" fill=\"none\"\r\n            xmlns=\"http://www.w3.org/2000/svg\">\r\n            <rect width=\"42\" height=\"40\" rx=\"8\" fill=\"#25282B\" fill-opacity=\"0.1\" />\r\n            <g opacity=\"0.7\">\r\n              <path\r\n                d=\"M16.1375 25.9935C15.8433 26.0108 15.554 25.9119 15.3305 25.7176C14.8898 25.2691 14.8898 24.5447 15.3305 24.0962L24.9801 14.3337C25.4384 13.8998 26.1576 13.9239 26.5865 14.3876C26.9744 14.807 26.997 15.4515 26.6395 15.8976L16.9331 25.7176C16.7125 25.9091 16.4278 26.0078 16.1375 25.9935Z\"\r\n                fill=\"#25282B\" />\r\n              <path\r\n                d=\"M25.7732 25.9938C25.475 25.9925 25.1893 25.8728 24.9776 25.6603L15.328 15.8978C14.9197 15.4155 14.9752 14.6896 15.452 14.2765C15.8775 13.9078 16.5051 13.9078 16.9306 14.2765L26.637 24.039C27.0952 24.473 27.1189 25.2007 26.6899 25.6643C26.6728 25.6827 26.6552 25.7006 26.637 25.7178C26.3993 25.9269 26.0865 26.0268 25.7732 25.9938Z\"\r\n                fill=\"#25282B\" />\r\n            </g>\r\n          </svg>\r\n        </div>\r\n        <div class=\"hr\">\r\n\r\n        </div>\r\n        <div class=\"menu\">\r\n          <div class=\"tool-icon\">\r\n            <tui-image-editor-menus-buttons-draw #penMenu [imageChosen]=\"imageChosen\" [selected]=\"submenu == 'draw'\"\r\n              (clicked)=\"submenu == 'draw' ? hideMenu($event) : showMenu($event)\"></tui-image-editor-menus-buttons-draw>\r\n          </div>\r\n          <!-- <div class=\"eraser\">\r\n  \r\n          </div> -->\r\n          <div class=\"tool-icon\">\r\n            <tui-image-editor-menus-buttons-text [imageChosen]=\"imageChosen\" [selected]=\"submenu == 'text'\"\r\n              (clicked)=\"submenu == 'text' ? hideMenu($event) : showMenu($event)\"></tui-image-editor-menus-buttons-text>\r\n          </div>\r\n          <div class=\"tool-icon-group\">\r\n            <tui-image-editor-menus-buttons-zoom-in [imageChosen]=\"imageChosen\"\r\n              [imageEditor]=\"imageEditor\"></tui-image-editor-menus-buttons-zoom-in>\r\n            <tui-image-editor-menus-buttons-zoom-out [imageChosen]=\"imageChosen\"\r\n              [imageEditor]=\"imageEditor\"></tui-image-editor-menus-buttons-zoom-out>\r\n            <tui-image-editor-menus-buttons-drag [imageChosen]=\"imageChosen\"\r\n              [imageEditor]=\"imageEditor\"></tui-image-editor-menus-buttons-drag>\r\n          </div>\r\n          <div class=\"tool-icon-group\">\r\n            <tui-image-editor-menus-buttons-history\r\n              [imageEditor]=\"imageEditor\"></tui-image-editor-menus-buttons-history>\r\n            <tui-image-editor-menus-buttons-undo [imageEditor]=\"imageEditor\"\r\n              (cancelCroppingRequested)=\"exitCropOnAction()\"></tui-image-editor-menus-buttons-undo>\r\n            <tui-image-editor-menus-buttons-redo [imageEditor]=\"imageEditor\"\r\n              (cancelCroppingRequested)=\"exitCropOnAction()\"></tui-image-editor-menus-buttons-redo>\r\n            <tui-image-editor-menus-buttons-reset [imageChosen]=\"imageChosen\" [imageEditor]=\"imageEditor\"\r\n              (cancelCroppingRequested)=\"exitCropOnAction()\"\r\n              (resetImage)=\"resetImage()\"></tui-image-editor-menus-buttons-reset>\r\n          </div>\r\n\r\n          <div class=\"tool-icon\">\r\n            <tui-image-editor-menus-buttons-crop [imageChosen]=\"imageChosen\" [selected]=\"submenu == 'crop'\"\r\n              (clicked)=\"submenu == 'crop' ? hideMenu($event) : showMenu($event)\"></tui-image-editor-menus-buttons-crop>\r\n          </div>\r\n          <div class=\"tool-icon\">\r\n            <tui-image-editor-menus-buttons-flip [imageChosen]=\"imageChosen\" [selected]=\"submenu == 'flip'\"\r\n              (clicked)=\"submenu == 'flip' ? hideMenu($event) : showMenu($event)\">\r\n            </tui-image-editor-menus-buttons-flip>\r\n          </div>\r\n          <div class=\"tool-icon\">\r\n            <tui-image-editor-menus-buttons-rotate [imageChosen]=\"imageChosen\" [selected]=\"submenu == 'rotate'\"\r\n              (clicked)=\"submenu == 'rotate' ? hideMenu($event) : showMenu($event)\"></tui-image-editor-menus-buttons-rotate>\r\n          </div>\r\n          <div class=\"tool-icon\">\r\n            <tui-image-editor-menus-buttons-shape [imageChosen]=\"imageChosen\" [selected]=\"submenu == 'shape'\"\r\n              (clicked)=\"submenu == 'shape' ? hideMenu($event) : showMenu($event)\"></tui-image-editor-menus-buttons-shape>\r\n          </div>\r\n          <div class=\"tool-icon\">\r\n            <tui-image-editor-menus-buttons-icon [imageChosen]=\"imageChosen\" [selected]=\"submenu == 'icon'\"\r\n              (clicked)=\"submenu == 'icon' ? hideMenu($event) : showMenu($event)\"></tui-image-editor-menus-buttons-icon>\r\n          </div>\r\n          <div class=\"tool-icon\">\r\n            <tui-image-editor-menus-buttons-mask [imageChosen]=\"imageChosen\" [selected]=\"submenu == 'mask'\"\r\n              (clicked)=\"submenu == 'mask' ? hideMenu($event) : showMenu($event)\"></tui-image-editor-menus-buttons-mask>\r\n          </div>\r\n          <div class=\"tool-icon\">\r\n            <tui-image-editor-menus-buttons-filter [imageChosen]=\"imageChosen\" [selected]=\"submenu == 'filter'\"\r\n              (clicked)=\"submenu == 'filter' ? hideMenu($event) : showMenu($event)\"></tui-image-editor-menus-buttons-filter>\r\n          </div>\r\n          <div class=\"tool-icon\">\r\n            <tui-image-editor-menus-buttons-download [imageChosen]=\"imageChosen\"\r\n              [imageEditor]=\"imageEditor\"></tui-image-editor-menus-buttons-download>\r\n          </div>\r\n        </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n        <div class=\"sub-menu\">\r\n          <div class=\"tui-image-editor-submenu new\" [style.right.px]=\"isMenuExpanded ? 160 : 80\"\r\n            *ngIf=\"submenu != null && showSubmenu\">\r\n            <tui-image-editor-submenus-crop *ngIf=\"submenu == 'crop'\" [imageEditor]=\"imageEditor\"\r\n              (cancelCroppingRequested)=\"exitCropOnAction()\"></tui-image-editor-submenus-crop>\r\n            <tui-image-editor-submenus-flip *ngIf=\"submenu == 'flip'\"\r\n              [imageEditor]=\"imageEditor\"></tui-image-editor-submenus-flip>\r\n            <tui-image-editor-submenus-rotate *ngIf=\"submenu == 'rotate'\" [imageEditor]=\"imageEditor\"\r\n              [(rotation)]=\"rotation\"></tui-image-editor-submenus-rotate>\r\n            <tui-image-editor-submenus-draw *ngIf=\"submenu == 'draw'\"\r\n              [imageEditor]=\"imageEditor\"></tui-image-editor-submenus-draw>\r\n            <tui-image-editor-submenus-shape *ngIf=\"submenu == 'shape'\"\r\n              [imageEditor]=\"imageEditor\"></tui-image-editor-submenus-shape>\r\n            <tui-image-editor-submenus-icon *ngIf=\"submenu == 'icon'\"\r\n              [imageEditor]=\"imageEditor\"></tui-image-editor-submenus-icon>\r\n            <tui-image-editor-submenus-text *ngIf=\"submenu == 'text'\"\r\n              [imageEditor]=\"imageEditor\"></tui-image-editor-submenus-text>\r\n            <tui-image-editor-submenus-mask *ngIf=\"submenu == 'mask'\"\r\n              [imageEditor]=\"imageEditor\"></tui-image-editor-submenus-mask>\r\n            <tui-image-editor-submenus-filter *ngIf=\"submenu == 'filter'\"\r\n              [imageEditor]=\"imageEditor\"></tui-image-editor-submenus-filter>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"toggler\" (click)=\"isMenuExpanded=!isMenuExpanded\" style=\"cursor: pointer;\">\r\n        <svg *ngIf=\"!isMenuExpanded\" width=\"18\" height=\"16\" viewBox=\"0 0 18 16\" fill=\"none\"\r\n          xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n            d=\"M0.864575 7.34425C0.503475 7.70535 0.503475 8.29473 0.864575 8.65583L7.93771 15.7287C8.29937 16.0904 8.88768 16.0904 9.2493 15.7287L9.64494 15.3331C10.0069 14.9711 10.007 14.3831 9.64498 14.0211L4.27939 8.65599C3.91733 8.29401 3.91733 7.7059 4.27939 7.34393L9.64494 1.97882C10.007 1.6168 10.007 1.02885 9.6449 0.66683L9.24926 0.27119C8.88816 -0.0899105 8.29877 -0.0899105 7.93767 0.27119L0.864575 7.34425ZM15.4293 0.27111C15.7907 -0.0903898 16.3796 -0.0903499 16.741 0.27111L17.1367 0.66675C17.498 1.02805 17.498 1.61744 17.1367 1.97878L11.7714 7.34393C11.4094 7.70595 11.4094 8.29398 11.7714 8.65599L17.1367 14.0211C17.4982 14.3825 17.4981 14.9717 17.1367 15.3331L16.7411 15.7288C16.3795 16.0904 15.7909 16.0904 15.4293 15.7288L8.98444 9.28372C7.17658 11.0898 7.63387 10.6318 8.98312 9.2824L8.35659 8.65583C7.99525 8.29449 7.99529 7.70554 8.35659 7.34421L15.4293 0.27111Z\"\r\n            fill=\"#515355\" />\r\n        </svg>\r\n        <svg *ngIf=\"isMenuExpanded\" width=\"18\" height=\"16\" viewBox=\"0 0 18 16\" fill=\"none\"\r\n          xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n            d=\"M17.1354 8.65575C17.4965 8.29465 17.4965 7.70527 17.1354 7.34417L10.0623 0.27127C9.70063 -0.0903886 9.11232 -0.0903885 8.7507 0.271271L8.35506 0.666911C7.99308 1.02889 7.993 1.61688 8.35502 1.97894L13.7206 7.34401C14.0827 7.70599 14.0827 8.2941 13.7206 8.65607L8.35506 14.0212C7.993 14.3832 7.99304 14.9712 8.3551 15.3332L8.75074 15.7288C9.11184 16.0899 9.70123 16.0899 10.0623 15.7288L17.1354 8.65575ZM2.57075 15.7289C2.20929 16.0904 1.62042 16.0904 1.25896 15.7289L0.863319 15.3333C0.50202 14.972 0.50198 14.3826 0.863319 14.0212L6.22863 8.65607C6.59065 8.29406 6.59065 7.70603 6.22863 7.34401L0.86328 1.9789C0.50182 1.61748 0.50186 1.02829 0.86328 0.666871L1.25892 0.27123C1.62054 -0.0903879 2.20909 -0.090428 2.57071 0.27123L9.01556 6.71628C10.8234 4.91023 10.3661 5.36824 9.01688 6.7176L9.64341 7.34417C10.0047 7.70551 10.0047 8.29446 9.64341 8.6558L2.57075 15.7289Z\"\r\n            fill=\"#515355\" />\r\n        </svg>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>", styles: ["::ng-deep .menu-background{height:181px;background-color:#f8f8f8;position:absolute;width:100%;bottom:-182px;z-index:2;display:flex;justify-content:center;align-items:center;border-radius:4px;color:#8d8f9e}::ng-deep .tui-image-editor-d-flex{display:flex!important}::ng-deep .tui-image-editor-flex-row{flex-direction:row!important}::ng-deep .tui-image-editor-flex-column{flex-direction:column!important}::ng-deep .tui-image-editor-flex-wrap{flex-wrap:wrap!important}::ng-deep .tui-image-editor-flex-nowrap{flex-wrap:wrap!important}::ng-deep .tui-image-editor-align-items-center{align-items:center!important}::ng-deep .tui-image-editor-align-self-center{align-self:center!important}::ng-deep .tui-image-editor-justify-content-center{justify-content:center!important}::ng-deep .tui-image-editor-justify-content-between{justify-content:space-between!important}::ng-deep .tui-image-editor-flex-grow-1{flex-grow:1!important;margin-block:4px;cursor:pointer;position:relative}::ng-deep .tui-image-editor-flex-grow-1 .tui-image-editor-canvas-container{min-height:300px;border:1px solid #E8EAED}::ng-deep .tui-image-editor-flex-grow-1 .tui-image-editor-canvas-container .lower-canvas{height:unset!important;width:unset!important;max-height:100%!important;max-width:100%!important;object-fit:contain!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important}::ng-deep .tui-image-editor-flex-grow-1 .tui-image-editor-canvas-container .upper-canvas{height:unset!important;width:unset!important;max-height:100%!important;max-width:100%!important;object-fit:contain!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important}::ng-deep .tui-image-editor-flex-grow-1 .button-background{position:absolute;inset:0px;background-color:#eff0f6;background-image:url(../favicon.ico);background-repeat:no-repeat;background-position:center;z-index:2}::ng-deep .tui-image-editor-h-100{height:100%!important}::ng-deep .tui-image-editor-w-100{width:100%!important}::ng-deep .tui-image-editor-p-1{padding:.25rem!important}::ng-deep .tui-image-editor-pb-1{padding-bottom:.25rem!important}::ng-deep .tui-image-editor-pb-2{padding-bottom:.5rem!important}::ng-deep .tui-image-editor-pb-3{padding-bottom:1rem!important}::ng-deep .tui-image-editor-pt-1{padding-top:.25rem!important}::ng-deep .tui-image-editor-pt-2{padding-top:.5rem!important}::ng-deep .tui-image-editor-pt-3{padding-top:1rem!important}::ng-deep .tui-image-editor-py-1{padding-top:.25rem!important;padding-bottom:.25rem!important}::ng-deep .tui-image-editor-py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}::ng-deep .tui-image-editor-py-3{padding-top:1rem!important;padding-bottom:1rem!important}::ng-deep .tui-image-editor-px-1{padding-left:.25rem!important;padding-right:.25rem!important}::ng-deep .tui-image-editor-px-2{padding-left:.5rem!important;padding-right:.5rem!important}::ng-deep .tui-image-editor-px-3{padding-left:1rem!important;padding-right:1rem!important}::ng-deep .tui-image-editor-my-2{margin-top:.5rem;margin-bottom:.5rem}::ng-deep .tui-image-editor-my-3{margin-top:1rem;margin-bottom:1rem}::ng-deep .tui-image-editor-my-3.apply{display:none}::ng-deep .tui-image-editor-mb-2{margin-bottom:.5rem}::ng-deep .tui-image-editor-mb-3{margin-bottom:1rem}::ng-deep .tui-image-editor-container{background-color:#fff;border-radius:10px;position:relative}::ng-deep .tui-image-editor-container .tui-image-editor-submenu{background-color:#353535;position:absolute;width:100%;bottom:-176px;opacity:.8;height:181px;z-index:3}::ng-deep .tui-image-editor-container label{margin-bottom:0!important}::ng-deep .tui-image-editor-container .tui-image-editor-help-menu .tui-image-editor-item.disabled{cursor:not-allowed}::ng-deep .tui-image-editor-container .tui-image-editor-help-menu svg>use{display:none}::ng-deep .tui-image-editor-container .tui-image-editor-help-menu .enabled svg:hover>use.hover,::ng-deep .tui-image-editor-container .tui-image-editor-help-menu .enabled:hover svg>use.hover,::ng-deep .tui-image-editor-container .tui-image-editor-help-menu .help.enabled svg>use.normal{display:block}::ng-deep .tui-image-editor-container .tui-image-editor-help-menu .help:not(.enabled) svg>use.disabled{display:block}::ng-deep .tui-image-editor-container .tui-image-editor-help-menu>.tui-image-editor-item.tui-image-editor-item-separator{width:10px;padding:0}::ng-deep .tui-image-editor-container .tui-image-editor-controls{width:100%;background-color:#dedede;border-bottom-left-radius:22px;border-bottom-right-radius:22px}::ng-deep .tui-image-editor-container .tui-image-editor-controls svg>use{display:none}::ng-deep .tui-image-editor-container .tui-image-editor-controls svg>use.normal{display:block}::ng-deep .tui-image-editor-container .tui-image-editor-controls .active svg>use.active{display:block}::ng-deep .tui-image-editor-container .tui-image-editor-controls>.tui-image-editor-menu{font-size:16px;justify-content:center}::ng-deep .tui-image-editor-container .tui-image-editor-menu .tui-image-editor-item.active,::ng-deep .tui-image-editor-container .tui-image-editor-help-menu .tui-image-editor-item.active{background-color:#ef736b;transition:all .3s ease;border-radius:6px}::ng-deep .tui-image-editor-container .svg_ic-menu{width:24px;height:24px;fill:#8a8a8a;stroke:#8a8a8a}::ng-deep .tui-image-editor-container .svg_ic-submenu{width:32px;height:32px}::ng-deep .tui-image-editor-container .tui-image-editor-submenu use.normal.use-default{fill-rule:evenodd;fill:#8a8a8a;stroke:#8a8a8a}::ng-deep .tui-image-editor-container .tui-image-editor-submenu use.active.use-default{fill-rule:evenodd;fill:#e9e9e9;stroke:#e9e9e9}::ng-deep .tui-image-editor-container .tui-image-editor-help-menu{margin:0 auto;text-align:center;vertical-align:middle;border-radius:20px;z-index:2}::ng-deep .tui-image-editor-container .tui-image-editor-help-menu use.normal.use-default,::ng-deep .tui-image-editor-container .tui-image-editor-menu use.normal.use-default{fill-rule:evenodd;fill:#3d3d3d;stroke:#3d3d3d}::ng-deep .tui-image-editor-container .tui-image-editor-help-menu use.disabled.use-default,::ng-deep .tui-image-editor-container .tui-image-editor-menu use.disabled.use-default{fill-rule:evenodd;fill:#434343;stroke:#434343}::ng-deep .tui-image-editor-container .tui-image-editor-help-menu use.hover.use-default,::ng-deep .tui-image-editor-container .tui-image-editor-menu use.hover.use-default{fill-rule:evenodd;fill:#e9e9e9;stroke:#e9e9e9}::ng-deep .tui-image-editor-container .tui-image-editor-icpartition{display:inline-block;background-color:#444;width:1px;height:24px}::ng-deep .tui-image-editor-container .tui-image-editor-partition>div{color:#3c3c3c;border-left:1px solid #3c3c3c}::ng-deep .tui-image-editor-container .tui-image-editor-partition>div{width:1px;height:52px;border-left:1px solid #3c3c3c;margin:0 8px}::ng-deep .tui-image-editor-container .tui-image-editor-item{position:relative;display:flex;border-radius:2px;padding:.25em .3em;cursor:pointer;margin:0 .25em;width:2em;height:2em;align-items:center;justify-content:center}::ng-deep .tui-image-editor-container .tui-image-editor-help-menu .tui-image-editor-item{padding-left:.25em;padding-right:.25em;width:2em}::ng-deep .tui-image-editor-container .tui-image-editor-help-menu .tui-image-editor-help-menu-item{background-color:#f8f8f8;border-radius:20px;padding-left:4px;padding-right:4px;margin:4px}::ng-deep .tui-image-editor-container .tui-image-editor-help-menu .tui-image-editor-help-menu-item:first-child{display:none!important}::ng-deep .tui-image-editor-container .tui-image-editor-help-menu .tui-image-editor-help-menu-item tui-image-editor-menus-buttons-history{display:none}::ng-deep .tui-image-editor-container .tui-image-editor-help-menu>.tui-image-editor-item{padding-left:.25em;padding-right:.25em}::ng-deep .tui-image-editor-container .tui-image-editor-load-btn{position:absolute;left:0;right:0;display:inline-block;top:0;bottom:0;width:100%;cursor:pointer;opacity:0}::ng-deep .tui-image-editor-container .tui-image-editor-menu{padding-top:.5rem;padding-bottom:.5rem;overflow-x:auto;margin-left:4px;margin-right:4px}::ng-deep .tui-image-editor-container .tui-image-editor-overflowable-x{overflow-x:auto}::ng-deep .tui-image-editor-container .tie-icon-add-button,::ng-deep .tui-image-editor-container .tie-icon-add-button *{cursor:pointer}::ng-deep .tui-image-editor-container .tie-mask-image-file,::ng-deep .tui-image-editor-container .tie-icon-image-file{opacity:0;position:absolute;width:100%;height:100%;border:1px solid #008000;cursor:inherit;left:0;top:0}::ng-deep .tui-image-editor-container .tui-image-editor-submenu-align:first-child label>span{width:70px;display:inline-block;cursor:pointer}::ng-deep .tui-image-editor-container .tui-image-editor-menu-shape{white-space:nowrap}::ng-deep .tui-image-editor-container .tui-image-editor-checkbox-wrap.fixed-width{width:200px;white-space:normal}::ng-deep .tui-image-editor-container .tui-image-editor-checkbox{display:inline-block;margin:.25rem 0;color:#8a8a8a;font-weight:lighter;font-size:11px}::ng-deep .tui-image-editor-container .tui-image-editor-checkbox input[type=checkbox]:checked+span{color:#fff}::ng-deep .tui-image-editor-container .tui-image-editor-range-wrap label{vertical-align:baseline;font-size:11px;margin-right:7px;color:#fff}::ng-deep .tui-image-editor-container .tui-image-editor-range-wrap .tui-image-editor-range-value{cursor:default;width:40px;height:24px;outline:none;border-radius:2px;box-shadow:none;border:1px solid #d5d5d5;text-align:center;background-color:#1c1c1c;color:#fff;font-weight:lighter;vertical-align:baseline;font-family:Noto Sans,sans-serif;margin-left:4px}::ng-deep .tui-image-editor-container .tui-image-editor-range-wrap .tui-image-editor-range-value{color:#fff;font-weight:lighter;font-size:11px;border:1px solid #353535;background-color:#207c80}::ng-deep .tui-image-editor-container input[type=range]{-webkit-appearance:none;background:transparent}::ng-deep .tui-image-editor-container input[type=range]::-webkit-slider-thumb{-webkit-appearance:none}::ng-deep .tui-image-editor-container input[type=range]:focus{outline:none}::ng-deep .tui-image-editor-container input[type=range]::-ms-track{cursor:pointer;background:transparent;border-color:transparent;color:transparent}::ng-deep .tui-image-editor-container input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;border:1px solid #0d6efd;height:12px;width:12px;border-radius:12px;background:#0d6efd;cursor:pointer;margin-top:-6px}::ng-deep .tui-image-editor-container input[type=range]:disabled::-webkit-slider-thumb,::ng-deep .tui-image-editor-container input[type=range].disabled::-webkit-slider-thumb{cursor:not-allowed;background:#ced4da;border-color:#ced4da}::ng-deep .tui-image-editor-container input[type=range]::-moz-range-thumb{border:1px solid #0d6efd;height:12px;width:12px;border-radius:12px;background:#0d6efd;cursor:pointer}::ng-deep .tui-image-editor-container input[type=range]:disabled::-moz-range-thumb,::ng-deep .tui-image-editor-container input[type=range].disabled::-moz-range-thumb{cursor:not-allowed;background:#ced4da;border-color:#ced4da}::ng-deep .tui-image-editor-container input[type=range]::-ms-thumb{border:1px solid #0d6efd;height:12px;width:12px;border-radius:12px;background:#0d6efd;cursor:pointer}::ng-deep .tui-image-editor-container input[type=range]:disabled::-ms-thumb,::ng-deep .tui-image-editor-container input[type=range].disabled::-ms-thumb{cursor:not-allowed;background:#ced4da;border-color:#ced4da}::ng-deep .tui-image-editor-container input[type=range]::-webkit-slider-runnable-track{height:2px;cursor:pointer;background:#fff;border-radius:1.3px;border:.2px solid #fff}::ng-deep .tui-image-editor-container input[type=range]:disabled::-webkit-slider-runnable-track,::ng-deep .tui-image-editor-container input[type=range].disabled::-webkit-slider-runnable-track{cursor:not-allowed;background:#e9ecef;border-color:#e9ecef}::ng-deep .tui-image-editor-container input[type=range]:focus::-webkit-slider-runnable-track{background:#fff}::ng-deep .tui-image-editor-container input[type=range]::-moz-range-track{height:2px;cursor:pointer;background:#fff;border-radius:1.3px;border:.2px solid #fff}::ng-deep .tui-image-editor-container input[type=range]:disabled::-moz-range-track,::ng-deep .tui-image-editor-container input[type=range].disabled::-moz-range-track{cursor:not-allowed;background:#e9ecef;border-color:#e9ecef}::ng-deep .tui-image-editor-container input[type=range]::-ms-track{height:2px;cursor:pointer;background:transparent;border-color:transparent;border-width:16px 0;color:transparent}::ng-deep .tui-image-editor-container input[type=range]:disabled::-ms-track,::ng-deep .tui-image-editor-container input[type=range].disabled::-ms-track{cursor:not-allowed;background:#e9ecef;border-color:#e9ecef}::ng-deep .tui-image-editor-container input[type=range]::-ms-fill-lower{background:#fff;border:.2px solid #fff;border-radius:2.6px}::ng-deep .tui-image-editor-container input[type=range]:focus::-ms-fill-lower{background:#fff}::ng-deep .tui-image-editor-container input[type=range]::-ms-fill-upper{background:#fff;border:.2px solid #fff;border-radius:2.6px}::ng-deep .tui-image-editor-container input[type=range]:focus::-ms-fill-upper{background:#fff}::ng-deep .tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-image-editor-button.preset{margin:0 9px 0 5px}::ng-deep .tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-image-editor-button{position:relative;cursor:pointer;display:inline-block;font-weight:400;font-size:11px;margin:0 9px;text-align:center}::ng-deep .tui-image-editor-container .tui-image-editor-submenu svg>use{display:none}::ng-deep .tui-image-editor-container .tui-image-editor-submenu svg>use.normal{display:block}::ng-deep .tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button:hover{cursor:pointer}::ng-deep .tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button.apply svg>use.active{display:block}::ng-deep .tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button.apply>label{color:#fff}::ng-deep .tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button.active>label{color:#fff}::ng-deep .tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button>label{color:#8a8a8a;font-weight:lighter}::ng-deep .tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button.tie-draw-color label,::ng-deep .tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button.tie-color-stroke label,::ng-deep .tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button.tie-color-fill label,::ng-deep .tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button.tie-icon-color label,::ng-deep .tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button.tie-text-color label{color:#fff}::ng-deep .tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button:hover svg>use.active,::ng-deep .tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button.active svg>use.active{display:block}::ng-deep .tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button:hover>label,::ng-deep .tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button.active>label{color:#fff;cursor:pointer}::ng-deep .tie-crop-button .tui-image-editor-button.preset.active svg>use.active,::ng-deep .tie-crop-preset-button .tui-image-editor-button.preset.active svg>use.active{display:block}::ng-deep .tie-crop-preset-button>.preset>label{color:#fff;font-weight:lighter}::ng-deep .tui-image-editor-container .tui-image-editor-grid-visual{display:none;position:absolute;width:100%;height:100%;border:1px solid rgba(255,255,255,.7)}::ng-deep .tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-flip,::ng-deep .tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-rotate .tui-image-editor{transition:none}::ng-deep .tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-flip .tui-image-editor-grid-visual,::ng-deep .tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-rotate .tui-image-editor-grid-visual{display:block}::ng-deep .tui-image-editor-container .tui-image-editor-grid-visual table{width:100%;height:100%;border-collapse:collapse}::ng-deep .tui-image-editor-container .tui-image-editor-grid-visual table td{border:1px solid rgba(255,255,255,.3)}::ng-deep .tui-image-editor-container .tui-image-editor-grid-visual table td.dot:before{content:\"\";position:absolute;box-sizing:border-box;width:10px;height:10px;border:0;box-shadow:0 0 1px #0000004d;border-radius:100%;background-color:#fff}::ng-deep .tui-image-editor-container .tui-image-editor-grid-visual table td.dot.left-top:before{top:-5px;left:-5px}::ng-deep .tui-image-editor-container .tui-image-editor-grid-visual table td.dot.right-top:before{top:-5px;right:-5px}::ng-deep .tui-image-editor-container .tui-image-editor-grid-visual table td.dot.left-bottom:before{bottom:-5px;left:-5px}::ng-deep .tui-image-editor-container .tui-image-editor-grid-visual table td.dot.right-bottom:before{bottom:-5px;right:-5px}::ng-deep .tie-text-color-picker,::ng-deep .tie-draw-color-picker,::ng-deep .tie-icon-color-picker,::ng-deep .tie-filter-tint-color-picker,::ng-deep .tie-filter-multiply-color-picker,::ng-deep .tie-filter-blend-color-picker{border-radius:100%;width:32px;height:32px;border:1px solid #1e1e1e;cursor:pointer;font-size:16px}::ng-deep .tie-panel-history{max-height:300px;overflow:auto;padding:.5rem 0}::ng-deep .tie-panel-history .history-list{margin-bottom:0;margin-top:0;list-style-type:none;padding-left:0;padding-right:0}::ng-deep .tie-panel-history .history-list .history-item{min-width:255px;padding:3px 0}::ng-deep .tie-panel-history .history-list .history-item.disabled-item{color:#333;opacity:.3}::ng-deep .tie-panel-history .history-list .history-item:not(:last-child){border-bottom:1px solid black}::ng-deep .tie-panel-history .history-list .history-item.selected-item{background-color:#eee}::ng-deep .tie-panel-history .history-list .history-item:hover{background-color:#e2e2e2}::ng-deep .tie-panel-history .history-list .history-item .history-item-text{flex:1;overflow:hidden;text-overflow:ellipsis;word-break:break-word}::ng-deep .tie-panel-history .history-list .history-item .history-item-text .history-item-text-details{font-size:.85em}::ng-deep .tie-panel-history .history-list .history-item .tui-image-editor-history-item{padding-left:.5em;padding-right:.5em;cursor:pointer}::ng-deep .tie-panel-history .history-list .history-item .tui-image-editor-history-item .history-item-icon{margin-right:.5em}::ng-deep .tie-panel-history .history-list .history-item .tui-image-editor-history-item .history-item-icon svg{width:1em;height:1em}::ng-deep .tie-panel-history .history-list .history-item .tui-image-editor-history-item .history-item-checkbox{margin-left:auto}::ng-deep .tie-panel-history .history-list .history-item .tui-image-editor-history-item .history-item-checkbox svg{width:1em;height:1em;margin-left:.5em}::ng-deep .fade{transition:opacity .15s linear}::ng-deep .popover{position:absolute;top:0;left:0;z-index:10070;display:block;max-width:276px;font-family:var(--bs-font-sans-serif);font-style:normal;font-weight:400;line-height:1.5;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;white-space:normal;line-break:auto;font-size:.875rem;word-wrap:break-word;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.2);border-radius:.3rem}::ng-deep .popover .arrow{position:absolute;display:block;width:1rem;height:.5rem}::ng-deep .popover .arrow:before,::ng-deep .popover .arrow:after{position:absolute;display:block;content:\"\";border-color:transparent;border-style:solid}::ng-deep .bs-popover-top>.arrow,::ng-deep .bs-popover-auto[data-popper-placement^=top]>.arrow{bottom:calc(-.5rem - 1px)}::ng-deep .bs-popover-top>.arrow:before,::ng-deep .bs-popover-auto[data-popper-placement^=top]>.arrow:before{bottom:0;border-width:.5rem .5rem 0;border-top-color:#00000040}::ng-deep .bs-popover-top>.arrow:after,::ng-deep .bs-popover-auto[data-popper-placement^=top]>.arrow:after{bottom:1px;border-width:.5rem .5rem 0;border-top-color:#fff}::ng-deep .bs-popover-end>.arrow,::ng-deep .bs-popover-auto[data-popper-placement^=right]>.arrow{left:calc(-.5rem - 1px);width:.5rem;height:1rem}::ng-deep .bs-popover-end>.arrow:before,::ng-deep .bs-popover-auto[data-popper-placement^=right]>.arrow:before{left:0;border-width:.5rem .5rem .5rem 0;border-right-color:#00000040}::ng-deep .bs-popover-end>.arrow:after,::ng-deep .bs-popover-auto[data-popper-placement^=right]>.arrow:after{left:1px;border-width:.5rem .5rem .5rem 0;border-right-color:#fff}::ng-deep .bs-popover-bottom>.arrow,::ng-deep .bs-popover-auto[data-popper-placement^=bottom]>.arrow{top:calc(-.5rem - 1px)}::ng-deep .bs-popover-bottom>.arrow:before,::ng-deep .bs-popover-auto[data-popper-placement^=bottom]>.arrow:before{top:0;border-width:0 .5rem .5rem .5rem;border-bottom-color:#00000040}::ng-deep .bs-popover-bottom>.arrow:after,::ng-deep .bs-popover-auto[data-popper-placement^=bottom]>.arrow:after{top:1px;border-width:0 .5rem .5rem .5rem;border-bottom-color:#fff}::ng-deep .bs-popover-bottom .popover-header:before,::ng-deep .bs-popover-auto[data-popper-placement^=bottom] .popover-header:before{position:absolute;top:0;left:50%;display:block;width:1rem;margin-left:-.5rem;content:\"\";border-bottom:1px solid #f0f0f0}::ng-deep .bs-popover-start>.arrow,::ng-deep .bs-popover-auto[data-popper-placement^=left]>.arrow{right:calc(-.5rem - 1px);width:.5rem;height:1rem}::ng-deep .bs-popover-start>.arrow:before,::ng-deep .bs-popover-auto[data-popper-placement^=left]>.arrow:before{right:0;border-width:.5rem 0 .5rem .5rem;border-left-color:#00000040}::ng-deep .bs-popover-start>.arrow:after,::ng-deep .bs-popover-auto[data-popper-placement^=left]>.arrow:after{right:1px;border-width:.5rem 0 .5rem .5rem;border-left-color:#fff}::ng-deep .popover-header{padding:.5rem 1rem;margin-bottom:0;font-size:1rem;background-color:#f0f0f0;border-bottom:1px solid #d8d8d8;border-top-left-radius:calc(.3rem - 1px);border-top-right-radius:calc(.3rem - 1px)}::ng-deep .popover-header:empty{display:none}::ng-deep .popover-body{padding:1rem;color:#212529}::ng-deep .tie-history-popover .popover-body{padding:0}::ng-deep .color-picker.open{z-index:1063}.new-template{display:flex;height:100%}.new-template ::ng-deep .tui-image-editor-overflowable-x{overflow-x:unset}.new-template ::ng-deep .color-picker{right:50px!important;top:5px!important;left:unset!important}.new-template .image-load-container{flex:1}.new-template .tools-container{border-left:1px solid #dcdfe4;width:80px;display:flex;align-items:center;justify-content:space-between;padding-top:15px;padding-bottom:15px;flex-direction:column}.new-template .tools-container .primary-tools{height:95%}.new-template .tools-container .primary-tools .selected-option{text-align:center}.new-template .tools-container .primary-tools .hr{height:1px;background-color:#dcdfe4;margin-top:10px}.new-template .tools-container .primary-tools .menu{height:90%;display:flex;flex-direction:column;flex-wrap:wrap-reverse;padding:15px;overflow-x:hidden;gap:15px}.new-template .tools-container .primary-tools .menu .tool-icon ::ng-deep .tui-image-editor-item{border-radius:50%;border:1px solid #E8EAED}.new-template .tools-container .primary-tools .menu .tool-icon ::ng-deep .tui-image-editor-item.active{background-color:#207c8026}.new-template .tools-container .primary-tools .menu .tool-icon ::ng-deep .tui-image-editor-item.active .svg_ic-menu{fill:#207c80;stroke:#207c80}.new-template .tools-container .primary-tools .menu .tool-icon-group{border-radius:50px;border:1px solid #E8EAED}.new-template .tools-container .primary-tools .sub-menu .tui-image-editor-submenu.new{position:absolute;background-color:#353535;top:0;right:80px;z-index:1000;opacity:.8;color:#fff;width:-moz-fit-content;width:fit-content;padding:10px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoadComponent, selector: "tui-image-editor-menus-buttons-load", outputs: ["loadImage"] }, { kind: "component", type: HistoryComponent, selector: "tui-image-editor-menus-buttons-history", inputs: ["imageEditor"] }, { kind: "component", type: DownloadComponent, selector: "tui-image-editor-menus-buttons-download", inputs: ["imageChosen", "imageEditor"] }, { kind: "component", type: ZoomInComponent, selector: "tui-image-editor-menus-buttons-zoom-in", inputs: ["imageChosen", "imageEditor"] }, { kind: "component", type: ZoomOutComponent, selector: "tui-image-editor-menus-buttons-zoom-out", inputs: ["imageChosen", "imageEditor"] }, { kind: "component", type: DragComponent, selector: "tui-image-editor-menus-buttons-drag", inputs: ["imageChosen", "imageEditor"] }, { kind: "component", type: UndoComponent, selector: "tui-image-editor-menus-buttons-undo", inputs: ["imageEditor"], outputs: ["cancelCroppingRequested"] }, { kind: "component", type: RedoComponent, selector: "tui-image-editor-menus-buttons-redo", inputs: ["imageEditor"], outputs: ["cancelCroppingRequested"] }, { kind: "component", type: ResetComponent, selector: "tui-image-editor-menus-buttons-reset", inputs: ["imageChosen", "imageEditor"], outputs: ["cancelCroppingRequested", "resetImage"] }, { kind: "component", type: DeleteComponent, selector: "tui-image-editor-menus-buttons-delete", inputs: ["imageChosen", "imageEditor"], outputs: ["cancelCroppingRequested"] }, { kind: "component", type: DeleteAllComponent, selector: "tui-image-editor-menus-buttons-delete-all", inputs: ["imageChosen", "imageEditor"], outputs: ["cancelCroppingRequested"] }, { kind: "component", type: CropComponent$1, selector: "tui-image-editor-menus-buttons-crop", inputs: ["imageChosen", "selected"], outputs: ["clicked"] }, { kind: "component", type: CropComponent, selector: "tui-image-editor-submenus-crop", inputs: ["imageEditor"], outputs: ["cancelCroppingRequested"] }, { kind: "component", type: FlipComponent$1, selector: "tui-image-editor-menus-buttons-flip", inputs: ["imageChosen", "selected"], outputs: ["clicked"] }, { kind: "component", type: FlipComponent, selector: "tui-image-editor-submenus-flip", inputs: ["imageEditor"] }, { kind: "component", type: RotateComponent$1, selector: "tui-image-editor-menus-buttons-rotate", inputs: ["imageChosen", "selected"], outputs: ["clicked"] }, { kind: "component", type: RotateComponent, selector: "tui-image-editor-submenus-rotate", inputs: ["imageEditor", "rotation"], outputs: ["rotationChange"] }, { kind: "component", type: DrawComponent$1, selector: "tui-image-editor-menus-buttons-draw", inputs: ["imageChosen", "selected"], outputs: ["clicked"] }, { kind: "component", type: DrawComponent, selector: "tui-image-editor-submenus-draw", inputs: ["imageEditor", "defaultDrawShapeColors"] }, { kind: "component", type: ShapeComponent$1, selector: "tui-image-editor-menus-buttons-shape", inputs: ["imageChosen", "selected"], outputs: ["clicked"] }, { kind: "component", type: ShapeComponent, selector: "tui-image-editor-submenus-shape", inputs: ["imageEditor", "defaultShapeStrokeColors", "defaultShapeFillColors"] }, { kind: "component", type: IconComponent$1, selector: "tui-image-editor-menus-buttons-icon", inputs: ["imageChosen", "selected"], outputs: ["clicked"] }, { kind: "component", type: IconComponent, selector: "tui-image-editor-submenus-icon", inputs: ["imageEditor", "defaultIconColors"] }, { kind: "component", type: TextComponent$1, selector: "tui-image-editor-menus-buttons-text", inputs: ["imageChosen", "selected"], outputs: ["clicked"] }, { kind: "component", type: TextComponent, selector: "tui-image-editor-submenus-text", inputs: ["imageEditor", "defaultTextColors"] }, { kind: "component", type: MaskComponent$1, selector: "tui-image-editor-menus-buttons-mask", inputs: ["imageChosen", "selected"], outputs: ["clicked"] }, { kind: "component", type: MaskComponent, selector: "tui-image-editor-submenus-mask", inputs: ["imageEditor"] }, { kind: "component", type: FilterComponent$1, selector: "tui-image-editor-menus-buttons-filter", inputs: ["imageChosen", "selected"], outputs: ["clicked"] }, { kind: "component", type: FilterComponent, selector: "tui-image-editor-submenus-filter", inputs: ["imageEditor"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TuiImageEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tui-image-editor', providers: [HistoryService], template: "<div *ngIf=\"template==='default';else newImageEditor\"\r\n  class=\"tui-image-editor-d-flex tui-image-editor-flex-column tui-image-editor-justify-content-center tui-image-editor-h-100 tui-image-editor-w-100 tui-image-editor-container\">\r\n  <div\r\n    class=\"tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-flex-wrap tui-image-editor-justify-content-center tui-image-editor-align-items-center\">\r\n    <div\r\n      class=\"tui-image-editor-help-menu tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-flex-wrap tui-image-editor-align-items-center tui-image-editor-justify-content-center tui-image-editor-p-1\">\r\n      <div></div>\r\n      <!-- <div #loadBtn style=\"position: absolute;\"\r\n        class=\"tui-image-editor-help-menu-item tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-flex-nowrap\">\r\n        <tui-image-editor-menus-buttons-load (loadImage)=\"loadImage($event)\"></tui-image-editor-menus-buttons-load>\r\n        <tui-image-editor-menus-buttons-download [imageChosen]=\"imageChosen\"\r\n          [imageEditor]=\"imageEditor\"></tui-image-editor-menus-buttons-download>\r\n      </div> -->\r\n      <div\r\n        class=\"tui-image-editor-help-menu-item tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-flex-nowrap\">\r\n        <tui-image-editor-menus-buttons-zoom-in [imageChosen]=\"imageChosen\"\r\n          [imageEditor]=\"imageEditor\"></tui-image-editor-menus-buttons-zoom-in>\r\n        <tui-image-editor-menus-buttons-zoom-out [imageChosen]=\"imageChosen\"\r\n          [imageEditor]=\"imageEditor\"></tui-image-editor-menus-buttons-zoom-out>\r\n        <tui-image-editor-menus-buttons-drag [imageChosen]=\"imageChosen\"\r\n          [imageEditor]=\"imageEditor\"></tui-image-editor-menus-buttons-drag>\r\n      </div>\r\n      <div\r\n        class=\"tui-image-editor-help-menu-item tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-flex-nowrap\">\r\n        <tui-image-editor-menus-buttons-history [imageEditor]=\"imageEditor\"></tui-image-editor-menus-buttons-history>\r\n        <tui-image-editor-menus-buttons-undo [imageEditor]=\"imageEditor\"\r\n          (cancelCroppingRequested)=\"exitCropOnAction()\"></tui-image-editor-menus-buttons-undo>\r\n        <tui-image-editor-menus-buttons-redo [imageEditor]=\"imageEditor\"\r\n          (cancelCroppingRequested)=\"exitCropOnAction()\"></tui-image-editor-menus-buttons-redo>\r\n        <tui-image-editor-menus-buttons-reset [imageChosen]=\"imageChosen\" [imageEditor]=\"imageEditor\"\r\n          (cancelCroppingRequested)=\"exitCropOnAction()\"\r\n          (resetImage)=\"resetImage()\"></tui-image-editor-menus-buttons-reset>\r\n      </div>\r\n      <div\r\n        class=\"tui-image-editor-help-menu-item tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-flex-nowrap\">\r\n        <tui-image-editor-menus-buttons-delete [imageChosen]=\"imageChosen\" [imageEditor]=\"imageEditor\"\r\n          (cancelCroppingRequested)=\"exitCropOnAction()\"></tui-image-editor-menus-buttons-delete>\r\n        <tui-image-editor-menus-buttons-delete-all [imageChosen]=\"imageChosen\" [imageEditor]=\"imageEditor\"\r\n          (cancelCroppingRequested)=\"exitCropOnAction()\"></tui-image-editor-menus-buttons-delete-all>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- <div #imageContainer\r\n    class=\"tui-image-editor-flex-grow-1 tui-image-editor-d-flex tui-image-editor-align-items-center tui-image-editor-justify-content-center\"\r\n    [style.height]=\"'0'\"></div> -->\r\n    <div style=\"position: relative;height: 100%; display: flex; justify-content: center; align-items: center;\">\r\n      <div #loadBtn style=\"position: absolute;\"\r\n        class=\"tui-image-editor-help-menu-item tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-flex-nowrap\">\r\n        <tui-image-editor-menus-buttons-load (loadImage)=\"onLoad($event)\"></tui-image-editor-menus-buttons-load>\r\n      </div>\r\n      <div style=\"position: absolute;height: 100%; width: 100%;\" #imageContainer\r\n        class=\"tui-image-editor-flex-grow-1 tui-image-editor-d-flex tui-image-editor-align-items-center tui-image-editor-justify-content-center\">\r\n      </div>\r\n    </div>\r\n  <div class=\"tui-image-editor-submenu\" *ngIf=\"submenu != null\">\r\n    <tui-image-editor-submenus-crop *ngIf=\"submenu == 'crop'\" [imageEditor]=\"imageEditor\"\r\n      (cancelCroppingRequested)=\"exitCropOnAction()\"></tui-image-editor-submenus-crop>\r\n    <tui-image-editor-submenus-flip *ngIf=\"submenu == 'flip'\"\r\n      [imageEditor]=\"imageEditor\"></tui-image-editor-submenus-flip>\r\n    <tui-image-editor-submenus-rotate *ngIf=\"submenu == 'rotate'\" [imageEditor]=\"imageEditor\"\r\n      [(rotation)]=\"rotation\"></tui-image-editor-submenus-rotate>\r\n    <tui-image-editor-submenus-draw *ngIf=\"submenu == 'draw'\"\r\n      [imageEditor]=\"imageEditor\"></tui-image-editor-submenus-draw>\r\n    <tui-image-editor-submenus-shape *ngIf=\"submenu == 'shape'\"\r\n      [imageEditor]=\"imageEditor\"></tui-image-editor-submenus-shape>\r\n    <tui-image-editor-submenus-icon *ngIf=\"submenu == 'icon'\"\r\n      [imageEditor]=\"imageEditor\"></tui-image-editor-submenus-icon>\r\n    <tui-image-editor-submenus-text *ngIf=\"submenu == 'text'\"\r\n      [imageEditor]=\"imageEditor\"></tui-image-editor-submenus-text>\r\n    <tui-image-editor-submenus-mask *ngIf=\"submenu == 'mask'\"\r\n      [imageEditor]=\"imageEditor\"></tui-image-editor-submenus-mask>\r\n    <tui-image-editor-submenus-filter *ngIf=\"submenu == 'filter'\"\r\n      [imageEditor]=\"imageEditor\"></tui-image-editor-submenus-filter>\r\n  </div>\r\n  <div\r\n    class=\"tui-image-editor-controls tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-justify-content-center\">\r\n    <div\r\n      class=\"tui-image-editor-menu tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-flex-nowrap tui-image-editor-align-items-center\">\r\n      <tui-image-editor-menus-buttons-crop [imageChosen]=\"imageChosen\" [selected]=\"submenu == 'crop'\"\r\n        (clicked)=\"submenu == 'crop' ? hideMenu($event) : showMenu($event)\"></tui-image-editor-menus-buttons-crop>\r\n      <tui-image-editor-menus-buttons-flip [imageChosen]=\"imageChosen\" [selected]=\"submenu == 'flip'\"\r\n        (clicked)=\"submenu == 'flip' ? hideMenu($event) : showMenu($event)\">\r\n      </tui-image-editor-menus-buttons-flip>\r\n      <tui-image-editor-menus-buttons-rotate [imageChosen]=\"imageChosen\" [selected]=\"submenu == 'rotate'\"\r\n        (clicked)=\"submenu == 'rotate' ? hideMenu($event) : showMenu($event)\"></tui-image-editor-menus-buttons-rotate>\r\n      <tui-image-editor-menus-buttons-draw [imageChosen]=\"imageChosen\" [selected]=\"submenu == 'draw'\"\r\n        (clicked)=\"submenu == 'draw' ? hideMenu($event) : showMenu($event)\"></tui-image-editor-menus-buttons-draw>\r\n      <tui-image-editor-menus-buttons-shape [imageChosen]=\"imageChosen\" [selected]=\"submenu == 'shape'\"\r\n        (clicked)=\"submenu == 'shape' ? hideMenu($event) : showMenu($event)\"></tui-image-editor-menus-buttons-shape>\r\n      <tui-image-editor-menus-buttons-icon [imageChosen]=\"imageChosen\" [selected]=\"submenu == 'icon'\"\r\n        (clicked)=\"submenu == 'icon' ? hideMenu($event) : showMenu($event)\"></tui-image-editor-menus-buttons-icon>\r\n      <tui-image-editor-menus-buttons-text [imageChosen]=\"imageChosen\" [selected]=\"submenu == 'text'\"\r\n        (clicked)=\"submenu == 'text' ? hideMenu($event) : showMenu($event)\"></tui-image-editor-menus-buttons-text>\r\n      <tui-image-editor-menus-buttons-mask [imageChosen]=\"imageChosen\" [selected]=\"submenu == 'mask'\"\r\n        (clicked)=\"submenu == 'mask' ? hideMenu($event) : showMenu($event)\"></tui-image-editor-menus-buttons-mask>\r\n      <tui-image-editor-menus-buttons-filter [imageChosen]=\"imageChosen\" [selected]=\"submenu == 'filter'\"\r\n        (clicked)=\"submenu == 'filter' ? hideMenu($event) : showMenu($event)\"></tui-image-editor-menus-buttons-filter>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #newImageEditor>\r\n  <div class=\"new-template tui-image-editor-container\">\r\n    <div class=\"image-load-container\">\r\n      <div style=\"position: relative;height: 100%; display: flex; justify-content: center; align-items: center;\">\r\n        <div #loadBtn style=\"position: absolute;\"\r\n          class=\"tui-image-editor-help-menu-item tui-image-editor-d-flex tui-image-editor-flex-row tui-image-editor-flex-nowrap\">\r\n          <tui-image-editor-menus-buttons-load (loadImage)=\"onLoad($event)\"></tui-image-editor-menus-buttons-load>\r\n        </div>\r\n        <div style=\"position: absolute;height: 100%; width: 100%;\" #imageContainer\r\n          class=\"tui-image-editor-flex-grow-1 tui-image-editor-d-flex tui-image-editor-align-items-center tui-image-editor-justify-content-center\">\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"tools-container\" style=\"position: relative;\" [style.width.px]=\"isMenuExpanded ? 160 : 80\">\r\n      <div class=\"primary-tools\">\r\n        <div class=\"selected-option\" style=\"cursor: pointer;\" (click)=\"showSubmenu=!showSubmenu\">\r\n          <svg *ngIf=\"!showSubmenu\" width=\"18\" height=\"16\" viewBox=\"0 0 18 16\" fill=\"none\"\r\n            xmlns=\"http://www.w3.org/2000/svg\">\r\n            <path opacity=\"0.7\" fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n              d=\"M9.3809 2.67601H17.0011C17.5527 2.67601 18 3.12327 18 3.67491C18 4.22654 17.5527 4.6738 17.0011 4.6738H9.38083C8.94507 6.20757 7.53168 7.33419 5.86014 7.33419C4.18856 7.33419 2.77524 6.20757 2.33944 4.6738H0.998897C0.447224 4.6738 0 4.22651 0 3.67487C0 3.12323 0.447224 2.67597 0.998897 2.67601H2.33951C2.77527 1.14224 4.18863 0.015625 5.86021 0.015625C7.53175 0.015625 8.9451 1.14224 9.3809 2.67601ZM4.19868 3.67484C4.19868 4.59097 4.944 5.33632 5.86017 5.33632C6.77635 5.33632 7.52166 4.59097 7.52166 3.67484C7.52166 2.7587 6.77635 2.01335 5.86017 2.01335C4.944 2.01335 4.19868 2.7587 4.19868 3.67484ZM15.6581 11.3275H17.0011C17.5528 11.3275 18 11.7748 18 12.3264C18 12.8781 17.5528 13.3253 17.0011 13.3253H15.6581C15.2224 14.8591 13.809 15.9857 12.1374 15.9857C10.4659 15.9857 9.05254 14.8591 8.61674 13.3253H0.998897C0.447224 13.3253 0 12.8781 0 12.3264C0 11.7748 0.447224 11.3275 0.998897 11.3275H8.61674C9.05251 9.79378 10.4659 8.66716 12.1374 8.66716C13.809 8.66716 15.2223 9.79378 15.6581 11.3275ZM10.476 12.3264C10.476 13.2426 11.2213 13.9879 12.1374 13.9879C13.0536 13.9879 13.799 13.2426 13.7989 12.3264C13.7989 11.4103 13.0536 10.665 12.1374 10.665C11.2213 10.665 10.476 11.4103 10.476 12.3264Z\"\r\n              fill=\"#25282B\" />\r\n          </svg>\r\n          <svg *ngIf=\"showSubmenu\" width=\"42\" height=\"40\" viewBox=\"0 0 42 40\" fill=\"none\"\r\n            xmlns=\"http://www.w3.org/2000/svg\">\r\n            <rect width=\"42\" height=\"40\" rx=\"8\" fill=\"#25282B\" fill-opacity=\"0.1\" />\r\n            <g opacity=\"0.7\">\r\n              <path\r\n                d=\"M16.1375 25.9935C15.8433 26.0108 15.554 25.9119 15.3305 25.7176C14.8898 25.2691 14.8898 24.5447 15.3305 24.0962L24.9801 14.3337C25.4384 13.8998 26.1576 13.9239 26.5865 14.3876C26.9744 14.807 26.997 15.4515 26.6395 15.8976L16.9331 25.7176C16.7125 25.9091 16.4278 26.0078 16.1375 25.9935Z\"\r\n                fill=\"#25282B\" />\r\n              <path\r\n                d=\"M25.7732 25.9938C25.475 25.9925 25.1893 25.8728 24.9776 25.6603L15.328 15.8978C14.9197 15.4155 14.9752 14.6896 15.452 14.2765C15.8775 13.9078 16.5051 13.9078 16.9306 14.2765L26.637 24.039C27.0952 24.473 27.1189 25.2007 26.6899 25.6643C26.6728 25.6827 26.6552 25.7006 26.637 25.7178C26.3993 25.9269 26.0865 26.0268 25.7732 25.9938Z\"\r\n                fill=\"#25282B\" />\r\n            </g>\r\n          </svg>\r\n        </div>\r\n        <div class=\"hr\">\r\n\r\n        </div>\r\n        <div class=\"menu\">\r\n          <div class=\"tool-icon\">\r\n            <tui-image-editor-menus-buttons-draw #penMenu [imageChosen]=\"imageChosen\" [selected]=\"submenu == 'draw'\"\r\n              (clicked)=\"submenu == 'draw' ? hideMenu($event) : showMenu($event)\"></tui-image-editor-menus-buttons-draw>\r\n          </div>\r\n          <!-- <div class=\"eraser\">\r\n  \r\n          </div> -->\r\n          <div class=\"tool-icon\">\r\n            <tui-image-editor-menus-buttons-text [imageChosen]=\"imageChosen\" [selected]=\"submenu == 'text'\"\r\n              (clicked)=\"submenu == 'text' ? hideMenu($event) : showMenu($event)\"></tui-image-editor-menus-buttons-text>\r\n          </div>\r\n          <div class=\"tool-icon-group\">\r\n            <tui-image-editor-menus-buttons-zoom-in [imageChosen]=\"imageChosen\"\r\n              [imageEditor]=\"imageEditor\"></tui-image-editor-menus-buttons-zoom-in>\r\n            <tui-image-editor-menus-buttons-zoom-out [imageChosen]=\"imageChosen\"\r\n              [imageEditor]=\"imageEditor\"></tui-image-editor-menus-buttons-zoom-out>\r\n            <tui-image-editor-menus-buttons-drag [imageChosen]=\"imageChosen\"\r\n              [imageEditor]=\"imageEditor\"></tui-image-editor-menus-buttons-drag>\r\n          </div>\r\n          <div class=\"tool-icon-group\">\r\n            <tui-image-editor-menus-buttons-history\r\n              [imageEditor]=\"imageEditor\"></tui-image-editor-menus-buttons-history>\r\n            <tui-image-editor-menus-buttons-undo [imageEditor]=\"imageEditor\"\r\n              (cancelCroppingRequested)=\"exitCropOnAction()\"></tui-image-editor-menus-buttons-undo>\r\n            <tui-image-editor-menus-buttons-redo [imageEditor]=\"imageEditor\"\r\n              (cancelCroppingRequested)=\"exitCropOnAction()\"></tui-image-editor-menus-buttons-redo>\r\n            <tui-image-editor-menus-buttons-reset [imageChosen]=\"imageChosen\" [imageEditor]=\"imageEditor\"\r\n              (cancelCroppingRequested)=\"exitCropOnAction()\"\r\n              (resetImage)=\"resetImage()\"></tui-image-editor-menus-buttons-reset>\r\n          </div>\r\n\r\n          <div class=\"tool-icon\">\r\n            <tui-image-editor-menus-buttons-crop [imageChosen]=\"imageChosen\" [selected]=\"submenu == 'crop'\"\r\n              (clicked)=\"submenu == 'crop' ? hideMenu($event) : showMenu($event)\"></tui-image-editor-menus-buttons-crop>\r\n          </div>\r\n          <div class=\"tool-icon\">\r\n            <tui-image-editor-menus-buttons-flip [imageChosen]=\"imageChosen\" [selected]=\"submenu == 'flip'\"\r\n              (clicked)=\"submenu == 'flip' ? hideMenu($event) : showMenu($event)\">\r\n            </tui-image-editor-menus-buttons-flip>\r\n          </div>\r\n          <div class=\"tool-icon\">\r\n            <tui-image-editor-menus-buttons-rotate [imageChosen]=\"imageChosen\" [selected]=\"submenu == 'rotate'\"\r\n              (clicked)=\"submenu == 'rotate' ? hideMenu($event) : showMenu($event)\"></tui-image-editor-menus-buttons-rotate>\r\n          </div>\r\n          <div class=\"tool-icon\">\r\n            <tui-image-editor-menus-buttons-shape [imageChosen]=\"imageChosen\" [selected]=\"submenu == 'shape'\"\r\n              (clicked)=\"submenu == 'shape' ? hideMenu($event) : showMenu($event)\"></tui-image-editor-menus-buttons-shape>\r\n          </div>\r\n          <div class=\"tool-icon\">\r\n            <tui-image-editor-menus-buttons-icon [imageChosen]=\"imageChosen\" [selected]=\"submenu == 'icon'\"\r\n              (clicked)=\"submenu == 'icon' ? hideMenu($event) : showMenu($event)\"></tui-image-editor-menus-buttons-icon>\r\n          </div>\r\n          <div class=\"tool-icon\">\r\n            <tui-image-editor-menus-buttons-mask [imageChosen]=\"imageChosen\" [selected]=\"submenu == 'mask'\"\r\n              (clicked)=\"submenu == 'mask' ? hideMenu($event) : showMenu($event)\"></tui-image-editor-menus-buttons-mask>\r\n          </div>\r\n          <div class=\"tool-icon\">\r\n            <tui-image-editor-menus-buttons-filter [imageChosen]=\"imageChosen\" [selected]=\"submenu == 'filter'\"\r\n              (clicked)=\"submenu == 'filter' ? hideMenu($event) : showMenu($event)\"></tui-image-editor-menus-buttons-filter>\r\n          </div>\r\n          <div class=\"tool-icon\">\r\n            <tui-image-editor-menus-buttons-download [imageChosen]=\"imageChosen\"\r\n              [imageEditor]=\"imageEditor\"></tui-image-editor-menus-buttons-download>\r\n          </div>\r\n        </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n        <div class=\"sub-menu\">\r\n          <div class=\"tui-image-editor-submenu new\" [style.right.px]=\"isMenuExpanded ? 160 : 80\"\r\n            *ngIf=\"submenu != null && showSubmenu\">\r\n            <tui-image-editor-submenus-crop *ngIf=\"submenu == 'crop'\" [imageEditor]=\"imageEditor\"\r\n              (cancelCroppingRequested)=\"exitCropOnAction()\"></tui-image-editor-submenus-crop>\r\n            <tui-image-editor-submenus-flip *ngIf=\"submenu == 'flip'\"\r\n              [imageEditor]=\"imageEditor\"></tui-image-editor-submenus-flip>\r\n            <tui-image-editor-submenus-rotate *ngIf=\"submenu == 'rotate'\" [imageEditor]=\"imageEditor\"\r\n              [(rotation)]=\"rotation\"></tui-image-editor-submenus-rotate>\r\n            <tui-image-editor-submenus-draw *ngIf=\"submenu == 'draw'\"\r\n              [imageEditor]=\"imageEditor\"></tui-image-editor-submenus-draw>\r\n            <tui-image-editor-submenus-shape *ngIf=\"submenu == 'shape'\"\r\n              [imageEditor]=\"imageEditor\"></tui-image-editor-submenus-shape>\r\n            <tui-image-editor-submenus-icon *ngIf=\"submenu == 'icon'\"\r\n              [imageEditor]=\"imageEditor\"></tui-image-editor-submenus-icon>\r\n            <tui-image-editor-submenus-text *ngIf=\"submenu == 'text'\"\r\n              [imageEditor]=\"imageEditor\"></tui-image-editor-submenus-text>\r\n            <tui-image-editor-submenus-mask *ngIf=\"submenu == 'mask'\"\r\n              [imageEditor]=\"imageEditor\"></tui-image-editor-submenus-mask>\r\n            <tui-image-editor-submenus-filter *ngIf=\"submenu == 'filter'\"\r\n              [imageEditor]=\"imageEditor\"></tui-image-editor-submenus-filter>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"toggler\" (click)=\"isMenuExpanded=!isMenuExpanded\" style=\"cursor: pointer;\">\r\n        <svg *ngIf=\"!isMenuExpanded\" width=\"18\" height=\"16\" viewBox=\"0 0 18 16\" fill=\"none\"\r\n          xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n            d=\"M0.864575 7.34425C0.503475 7.70535 0.503475 8.29473 0.864575 8.65583L7.93771 15.7287C8.29937 16.0904 8.88768 16.0904 9.2493 15.7287L9.64494 15.3331C10.0069 14.9711 10.007 14.3831 9.64498 14.0211L4.27939 8.65599C3.91733 8.29401 3.91733 7.7059 4.27939 7.34393L9.64494 1.97882C10.007 1.6168 10.007 1.02885 9.6449 0.66683L9.24926 0.27119C8.88816 -0.0899105 8.29877 -0.0899105 7.93767 0.27119L0.864575 7.34425ZM15.4293 0.27111C15.7907 -0.0903898 16.3796 -0.0903499 16.741 0.27111L17.1367 0.66675C17.498 1.02805 17.498 1.61744 17.1367 1.97878L11.7714 7.34393C11.4094 7.70595 11.4094 8.29398 11.7714 8.65599L17.1367 14.0211C17.4982 14.3825 17.4981 14.9717 17.1367 15.3331L16.7411 15.7288C16.3795 16.0904 15.7909 16.0904 15.4293 15.7288L8.98444 9.28372C7.17658 11.0898 7.63387 10.6318 8.98312 9.2824L8.35659 8.65583C7.99525 8.29449 7.99529 7.70554 8.35659 7.34421L15.4293 0.27111Z\"\r\n            fill=\"#515355\" />\r\n        </svg>\r\n        <svg *ngIf=\"isMenuExpanded\" width=\"18\" height=\"16\" viewBox=\"0 0 18 16\" fill=\"none\"\r\n          xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n            d=\"M17.1354 8.65575C17.4965 8.29465 17.4965 7.70527 17.1354 7.34417L10.0623 0.27127C9.70063 -0.0903886 9.11232 -0.0903885 8.7507 0.271271L8.35506 0.666911C7.99308 1.02889 7.993 1.61688 8.35502 1.97894L13.7206 7.34401C14.0827 7.70599 14.0827 8.2941 13.7206 8.65607L8.35506 14.0212C7.993 14.3832 7.99304 14.9712 8.3551 15.3332L8.75074 15.7288C9.11184 16.0899 9.70123 16.0899 10.0623 15.7288L17.1354 8.65575ZM2.57075 15.7289C2.20929 16.0904 1.62042 16.0904 1.25896 15.7289L0.863319 15.3333C0.50202 14.972 0.50198 14.3826 0.863319 14.0212L6.22863 8.65607C6.59065 8.29406 6.59065 7.70603 6.22863 7.34401L0.86328 1.9789C0.50182 1.61748 0.50186 1.02829 0.86328 0.666871L1.25892 0.27123C1.62054 -0.0903879 2.20909 -0.090428 2.57071 0.27123L9.01556 6.71628C10.8234 4.91023 10.3661 5.36824 9.01688 6.7176L9.64341 7.34417C10.0047 7.70551 10.0047 8.29446 9.64341 8.6558L2.57075 15.7289Z\"\r\n            fill=\"#515355\" />\r\n        </svg>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>", styles: ["::ng-deep .menu-background{height:181px;background-color:#f8f8f8;position:absolute;width:100%;bottom:-182px;z-index:2;display:flex;justify-content:center;align-items:center;border-radius:4px;color:#8d8f9e}::ng-deep .tui-image-editor-d-flex{display:flex!important}::ng-deep .tui-image-editor-flex-row{flex-direction:row!important}::ng-deep .tui-image-editor-flex-column{flex-direction:column!important}::ng-deep .tui-image-editor-flex-wrap{flex-wrap:wrap!important}::ng-deep .tui-image-editor-flex-nowrap{flex-wrap:wrap!important}::ng-deep .tui-image-editor-align-items-center{align-items:center!important}::ng-deep .tui-image-editor-align-self-center{align-self:center!important}::ng-deep .tui-image-editor-justify-content-center{justify-content:center!important}::ng-deep .tui-image-editor-justify-content-between{justify-content:space-between!important}::ng-deep .tui-image-editor-flex-grow-1{flex-grow:1!important;margin-block:4px;cursor:pointer;position:relative}::ng-deep .tui-image-editor-flex-grow-1 .tui-image-editor-canvas-container{min-height:300px;border:1px solid #E8EAED}::ng-deep .tui-image-editor-flex-grow-1 .tui-image-editor-canvas-container .lower-canvas{height:unset!important;width:unset!important;max-height:100%!important;max-width:100%!important;object-fit:contain!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important}::ng-deep .tui-image-editor-flex-grow-1 .tui-image-editor-canvas-container .upper-canvas{height:unset!important;width:unset!important;max-height:100%!important;max-width:100%!important;object-fit:contain!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important}::ng-deep .tui-image-editor-flex-grow-1 .button-background{position:absolute;inset:0px;background-color:#eff0f6;background-image:url(../favicon.ico);background-repeat:no-repeat;background-position:center;z-index:2}::ng-deep .tui-image-editor-h-100{height:100%!important}::ng-deep .tui-image-editor-w-100{width:100%!important}::ng-deep .tui-image-editor-p-1{padding:.25rem!important}::ng-deep .tui-image-editor-pb-1{padding-bottom:.25rem!important}::ng-deep .tui-image-editor-pb-2{padding-bottom:.5rem!important}::ng-deep .tui-image-editor-pb-3{padding-bottom:1rem!important}::ng-deep .tui-image-editor-pt-1{padding-top:.25rem!important}::ng-deep .tui-image-editor-pt-2{padding-top:.5rem!important}::ng-deep .tui-image-editor-pt-3{padding-top:1rem!important}::ng-deep .tui-image-editor-py-1{padding-top:.25rem!important;padding-bottom:.25rem!important}::ng-deep .tui-image-editor-py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}::ng-deep .tui-image-editor-py-3{padding-top:1rem!important;padding-bottom:1rem!important}::ng-deep .tui-image-editor-px-1{padding-left:.25rem!important;padding-right:.25rem!important}::ng-deep .tui-image-editor-px-2{padding-left:.5rem!important;padding-right:.5rem!important}::ng-deep .tui-image-editor-px-3{padding-left:1rem!important;padding-right:1rem!important}::ng-deep .tui-image-editor-my-2{margin-top:.5rem;margin-bottom:.5rem}::ng-deep .tui-image-editor-my-3{margin-top:1rem;margin-bottom:1rem}::ng-deep .tui-image-editor-my-3.apply{display:none}::ng-deep .tui-image-editor-mb-2{margin-bottom:.5rem}::ng-deep .tui-image-editor-mb-3{margin-bottom:1rem}::ng-deep .tui-image-editor-container{background-color:#fff;border-radius:10px;position:relative}::ng-deep .tui-image-editor-container .tui-image-editor-submenu{background-color:#353535;position:absolute;width:100%;bottom:-176px;opacity:.8;height:181px;z-index:3}::ng-deep .tui-image-editor-container label{margin-bottom:0!important}::ng-deep .tui-image-editor-container .tui-image-editor-help-menu .tui-image-editor-item.disabled{cursor:not-allowed}::ng-deep .tui-image-editor-container .tui-image-editor-help-menu svg>use{display:none}::ng-deep .tui-image-editor-container .tui-image-editor-help-menu .enabled svg:hover>use.hover,::ng-deep .tui-image-editor-container .tui-image-editor-help-menu .enabled:hover svg>use.hover,::ng-deep .tui-image-editor-container .tui-image-editor-help-menu .help.enabled svg>use.normal{display:block}::ng-deep .tui-image-editor-container .tui-image-editor-help-menu .help:not(.enabled) svg>use.disabled{display:block}::ng-deep .tui-image-editor-container .tui-image-editor-help-menu>.tui-image-editor-item.tui-image-editor-item-separator{width:10px;padding:0}::ng-deep .tui-image-editor-container .tui-image-editor-controls{width:100%;background-color:#dedede;border-bottom-left-radius:22px;border-bottom-right-radius:22px}::ng-deep .tui-image-editor-container .tui-image-editor-controls svg>use{display:none}::ng-deep .tui-image-editor-container .tui-image-editor-controls svg>use.normal{display:block}::ng-deep .tui-image-editor-container .tui-image-editor-controls .active svg>use.active{display:block}::ng-deep .tui-image-editor-container .tui-image-editor-controls>.tui-image-editor-menu{font-size:16px;justify-content:center}::ng-deep .tui-image-editor-container .tui-image-editor-menu .tui-image-editor-item.active,::ng-deep .tui-image-editor-container .tui-image-editor-help-menu .tui-image-editor-item.active{background-color:#ef736b;transition:all .3s ease;border-radius:6px}::ng-deep .tui-image-editor-container .svg_ic-menu{width:24px;height:24px;fill:#8a8a8a;stroke:#8a8a8a}::ng-deep .tui-image-editor-container .svg_ic-submenu{width:32px;height:32px}::ng-deep .tui-image-editor-container .tui-image-editor-submenu use.normal.use-default{fill-rule:evenodd;fill:#8a8a8a;stroke:#8a8a8a}::ng-deep .tui-image-editor-container .tui-image-editor-submenu use.active.use-default{fill-rule:evenodd;fill:#e9e9e9;stroke:#e9e9e9}::ng-deep .tui-image-editor-container .tui-image-editor-help-menu{margin:0 auto;text-align:center;vertical-align:middle;border-radius:20px;z-index:2}::ng-deep .tui-image-editor-container .tui-image-editor-help-menu use.normal.use-default,::ng-deep .tui-image-editor-container .tui-image-editor-menu use.normal.use-default{fill-rule:evenodd;fill:#3d3d3d;stroke:#3d3d3d}::ng-deep .tui-image-editor-container .tui-image-editor-help-menu use.disabled.use-default,::ng-deep .tui-image-editor-container .tui-image-editor-menu use.disabled.use-default{fill-rule:evenodd;fill:#434343;stroke:#434343}::ng-deep .tui-image-editor-container .tui-image-editor-help-menu use.hover.use-default,::ng-deep .tui-image-editor-container .tui-image-editor-menu use.hover.use-default{fill-rule:evenodd;fill:#e9e9e9;stroke:#e9e9e9}::ng-deep .tui-image-editor-container .tui-image-editor-icpartition{display:inline-block;background-color:#444;width:1px;height:24px}::ng-deep .tui-image-editor-container .tui-image-editor-partition>div{color:#3c3c3c;border-left:1px solid #3c3c3c}::ng-deep .tui-image-editor-container .tui-image-editor-partition>div{width:1px;height:52px;border-left:1px solid #3c3c3c;margin:0 8px}::ng-deep .tui-image-editor-container .tui-image-editor-item{position:relative;display:flex;border-radius:2px;padding:.25em .3em;cursor:pointer;margin:0 .25em;width:2em;height:2em;align-items:center;justify-content:center}::ng-deep .tui-image-editor-container .tui-image-editor-help-menu .tui-image-editor-item{padding-left:.25em;padding-right:.25em;width:2em}::ng-deep .tui-image-editor-container .tui-image-editor-help-menu .tui-image-editor-help-menu-item{background-color:#f8f8f8;border-radius:20px;padding-left:4px;padding-right:4px;margin:4px}::ng-deep .tui-image-editor-container .tui-image-editor-help-menu .tui-image-editor-help-menu-item:first-child{display:none!important}::ng-deep .tui-image-editor-container .tui-image-editor-help-menu .tui-image-editor-help-menu-item tui-image-editor-menus-buttons-history{display:none}::ng-deep .tui-image-editor-container .tui-image-editor-help-menu>.tui-image-editor-item{padding-left:.25em;padding-right:.25em}::ng-deep .tui-image-editor-container .tui-image-editor-load-btn{position:absolute;left:0;right:0;display:inline-block;top:0;bottom:0;width:100%;cursor:pointer;opacity:0}::ng-deep .tui-image-editor-container .tui-image-editor-menu{padding-top:.5rem;padding-bottom:.5rem;overflow-x:auto;margin-left:4px;margin-right:4px}::ng-deep .tui-image-editor-container .tui-image-editor-overflowable-x{overflow-x:auto}::ng-deep .tui-image-editor-container .tie-icon-add-button,::ng-deep .tui-image-editor-container .tie-icon-add-button *{cursor:pointer}::ng-deep .tui-image-editor-container .tie-mask-image-file,::ng-deep .tui-image-editor-container .tie-icon-image-file{opacity:0;position:absolute;width:100%;height:100%;border:1px solid #008000;cursor:inherit;left:0;top:0}::ng-deep .tui-image-editor-container .tui-image-editor-submenu-align:first-child label>span{width:70px;display:inline-block;cursor:pointer}::ng-deep .tui-image-editor-container .tui-image-editor-menu-shape{white-space:nowrap}::ng-deep .tui-image-editor-container .tui-image-editor-checkbox-wrap.fixed-width{width:200px;white-space:normal}::ng-deep .tui-image-editor-container .tui-image-editor-checkbox{display:inline-block;margin:.25rem 0;color:#8a8a8a;font-weight:lighter;font-size:11px}::ng-deep .tui-image-editor-container .tui-image-editor-checkbox input[type=checkbox]:checked+span{color:#fff}::ng-deep .tui-image-editor-container .tui-image-editor-range-wrap label{vertical-align:baseline;font-size:11px;margin-right:7px;color:#fff}::ng-deep .tui-image-editor-container .tui-image-editor-range-wrap .tui-image-editor-range-value{cursor:default;width:40px;height:24px;outline:none;border-radius:2px;box-shadow:none;border:1px solid #d5d5d5;text-align:center;background-color:#1c1c1c;color:#fff;font-weight:lighter;vertical-align:baseline;font-family:Noto Sans,sans-serif;margin-left:4px}::ng-deep .tui-image-editor-container .tui-image-editor-range-wrap .tui-image-editor-range-value{color:#fff;font-weight:lighter;font-size:11px;border:1px solid #353535;background-color:#207c80}::ng-deep .tui-image-editor-container input[type=range]{-webkit-appearance:none;background:transparent}::ng-deep .tui-image-editor-container input[type=range]::-webkit-slider-thumb{-webkit-appearance:none}::ng-deep .tui-image-editor-container input[type=range]:focus{outline:none}::ng-deep .tui-image-editor-container input[type=range]::-ms-track{cursor:pointer;background:transparent;border-color:transparent;color:transparent}::ng-deep .tui-image-editor-container input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;border:1px solid #0d6efd;height:12px;width:12px;border-radius:12px;background:#0d6efd;cursor:pointer;margin-top:-6px}::ng-deep .tui-image-editor-container input[type=range]:disabled::-webkit-slider-thumb,::ng-deep .tui-image-editor-container input[type=range].disabled::-webkit-slider-thumb{cursor:not-allowed;background:#ced4da;border-color:#ced4da}::ng-deep .tui-image-editor-container input[type=range]::-moz-range-thumb{border:1px solid #0d6efd;height:12px;width:12px;border-radius:12px;background:#0d6efd;cursor:pointer}::ng-deep .tui-image-editor-container input[type=range]:disabled::-moz-range-thumb,::ng-deep .tui-image-editor-container input[type=range].disabled::-moz-range-thumb{cursor:not-allowed;background:#ced4da;border-color:#ced4da}::ng-deep .tui-image-editor-container input[type=range]::-ms-thumb{border:1px solid #0d6efd;height:12px;width:12px;border-radius:12px;background:#0d6efd;cursor:pointer}::ng-deep .tui-image-editor-container input[type=range]:disabled::-ms-thumb,::ng-deep .tui-image-editor-container input[type=range].disabled::-ms-thumb{cursor:not-allowed;background:#ced4da;border-color:#ced4da}::ng-deep .tui-image-editor-container input[type=range]::-webkit-slider-runnable-track{height:2px;cursor:pointer;background:#fff;border-radius:1.3px;border:.2px solid #fff}::ng-deep .tui-image-editor-container input[type=range]:disabled::-webkit-slider-runnable-track,::ng-deep .tui-image-editor-container input[type=range].disabled::-webkit-slider-runnable-track{cursor:not-allowed;background:#e9ecef;border-color:#e9ecef}::ng-deep .tui-image-editor-container input[type=range]:focus::-webkit-slider-runnable-track{background:#fff}::ng-deep .tui-image-editor-container input[type=range]::-moz-range-track{height:2px;cursor:pointer;background:#fff;border-radius:1.3px;border:.2px solid #fff}::ng-deep .tui-image-editor-container input[type=range]:disabled::-moz-range-track,::ng-deep .tui-image-editor-container input[type=range].disabled::-moz-range-track{cursor:not-allowed;background:#e9ecef;border-color:#e9ecef}::ng-deep .tui-image-editor-container input[type=range]::-ms-track{height:2px;cursor:pointer;background:transparent;border-color:transparent;border-width:16px 0;color:transparent}::ng-deep .tui-image-editor-container input[type=range]:disabled::-ms-track,::ng-deep .tui-image-editor-container input[type=range].disabled::-ms-track{cursor:not-allowed;background:#e9ecef;border-color:#e9ecef}::ng-deep .tui-image-editor-container input[type=range]::-ms-fill-lower{background:#fff;border:.2px solid #fff;border-radius:2.6px}::ng-deep .tui-image-editor-container input[type=range]:focus::-ms-fill-lower{background:#fff}::ng-deep .tui-image-editor-container input[type=range]::-ms-fill-upper{background:#fff;border:.2px solid #fff;border-radius:2.6px}::ng-deep .tui-image-editor-container input[type=range]:focus::-ms-fill-upper{background:#fff}::ng-deep .tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-image-editor-button.preset{margin:0 9px 0 5px}::ng-deep .tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-image-editor-button{position:relative;cursor:pointer;display:inline-block;font-weight:400;font-size:11px;margin:0 9px;text-align:center}::ng-deep .tui-image-editor-container .tui-image-editor-submenu svg>use{display:none}::ng-deep .tui-image-editor-container .tui-image-editor-submenu svg>use.normal{display:block}::ng-deep .tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button:hover{cursor:pointer}::ng-deep .tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button.apply svg>use.active{display:block}::ng-deep .tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button.apply>label{color:#fff}::ng-deep .tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button.active>label{color:#fff}::ng-deep .tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button>label{color:#8a8a8a;font-weight:lighter}::ng-deep .tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button.tie-draw-color label,::ng-deep .tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button.tie-color-stroke label,::ng-deep .tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button.tie-color-fill label,::ng-deep .tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button.tie-icon-color label,::ng-deep .tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button.tie-text-color label{color:#fff}::ng-deep .tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button:hover svg>use.active,::ng-deep .tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button.active svg>use.active{display:block}::ng-deep .tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button:hover>label,::ng-deep .tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button.active>label{color:#fff;cursor:pointer}::ng-deep .tie-crop-button .tui-image-editor-button.preset.active svg>use.active,::ng-deep .tie-crop-preset-button .tui-image-editor-button.preset.active svg>use.active{display:block}::ng-deep .tie-crop-preset-button>.preset>label{color:#fff;font-weight:lighter}::ng-deep .tui-image-editor-container .tui-image-editor-grid-visual{display:none;position:absolute;width:100%;height:100%;border:1px solid rgba(255,255,255,.7)}::ng-deep .tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-flip,::ng-deep .tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-rotate .tui-image-editor{transition:none}::ng-deep .tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-flip .tui-image-editor-grid-visual,::ng-deep .tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-rotate .tui-image-editor-grid-visual{display:block}::ng-deep .tui-image-editor-container .tui-image-editor-grid-visual table{width:100%;height:100%;border-collapse:collapse}::ng-deep .tui-image-editor-container .tui-image-editor-grid-visual table td{border:1px solid rgba(255,255,255,.3)}::ng-deep .tui-image-editor-container .tui-image-editor-grid-visual table td.dot:before{content:\"\";position:absolute;box-sizing:border-box;width:10px;height:10px;border:0;box-shadow:0 0 1px #0000004d;border-radius:100%;background-color:#fff}::ng-deep .tui-image-editor-container .tui-image-editor-grid-visual table td.dot.left-top:before{top:-5px;left:-5px}::ng-deep .tui-image-editor-container .tui-image-editor-grid-visual table td.dot.right-top:before{top:-5px;right:-5px}::ng-deep .tui-image-editor-container .tui-image-editor-grid-visual table td.dot.left-bottom:before{bottom:-5px;left:-5px}::ng-deep .tui-image-editor-container .tui-image-editor-grid-visual table td.dot.right-bottom:before{bottom:-5px;right:-5px}::ng-deep .tie-text-color-picker,::ng-deep .tie-draw-color-picker,::ng-deep .tie-icon-color-picker,::ng-deep .tie-filter-tint-color-picker,::ng-deep .tie-filter-multiply-color-picker,::ng-deep .tie-filter-blend-color-picker{border-radius:100%;width:32px;height:32px;border:1px solid #1e1e1e;cursor:pointer;font-size:16px}::ng-deep .tie-panel-history{max-height:300px;overflow:auto;padding:.5rem 0}::ng-deep .tie-panel-history .history-list{margin-bottom:0;margin-top:0;list-style-type:none;padding-left:0;padding-right:0}::ng-deep .tie-panel-history .history-list .history-item{min-width:255px;padding:3px 0}::ng-deep .tie-panel-history .history-list .history-item.disabled-item{color:#333;opacity:.3}::ng-deep .tie-panel-history .history-list .history-item:not(:last-child){border-bottom:1px solid black}::ng-deep .tie-panel-history .history-list .history-item.selected-item{background-color:#eee}::ng-deep .tie-panel-history .history-list .history-item:hover{background-color:#e2e2e2}::ng-deep .tie-panel-history .history-list .history-item .history-item-text{flex:1;overflow:hidden;text-overflow:ellipsis;word-break:break-word}::ng-deep .tie-panel-history .history-list .history-item .history-item-text .history-item-text-details{font-size:.85em}::ng-deep .tie-panel-history .history-list .history-item .tui-image-editor-history-item{padding-left:.5em;padding-right:.5em;cursor:pointer}::ng-deep .tie-panel-history .history-list .history-item .tui-image-editor-history-item .history-item-icon{margin-right:.5em}::ng-deep .tie-panel-history .history-list .history-item .tui-image-editor-history-item .history-item-icon svg{width:1em;height:1em}::ng-deep .tie-panel-history .history-list .history-item .tui-image-editor-history-item .history-item-checkbox{margin-left:auto}::ng-deep .tie-panel-history .history-list .history-item .tui-image-editor-history-item .history-item-checkbox svg{width:1em;height:1em;margin-left:.5em}::ng-deep .fade{transition:opacity .15s linear}::ng-deep .popover{position:absolute;top:0;left:0;z-index:10070;display:block;max-width:276px;font-family:var(--bs-font-sans-serif);font-style:normal;font-weight:400;line-height:1.5;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;white-space:normal;line-break:auto;font-size:.875rem;word-wrap:break-word;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.2);border-radius:.3rem}::ng-deep .popover .arrow{position:absolute;display:block;width:1rem;height:.5rem}::ng-deep .popover .arrow:before,::ng-deep .popover .arrow:after{position:absolute;display:block;content:\"\";border-color:transparent;border-style:solid}::ng-deep .bs-popover-top>.arrow,::ng-deep .bs-popover-auto[data-popper-placement^=top]>.arrow{bottom:calc(-.5rem - 1px)}::ng-deep .bs-popover-top>.arrow:before,::ng-deep .bs-popover-auto[data-popper-placement^=top]>.arrow:before{bottom:0;border-width:.5rem .5rem 0;border-top-color:#00000040}::ng-deep .bs-popover-top>.arrow:after,::ng-deep .bs-popover-auto[data-popper-placement^=top]>.arrow:after{bottom:1px;border-width:.5rem .5rem 0;border-top-color:#fff}::ng-deep .bs-popover-end>.arrow,::ng-deep .bs-popover-auto[data-popper-placement^=right]>.arrow{left:calc(-.5rem - 1px);width:.5rem;height:1rem}::ng-deep .bs-popover-end>.arrow:before,::ng-deep .bs-popover-auto[data-popper-placement^=right]>.arrow:before{left:0;border-width:.5rem .5rem .5rem 0;border-right-color:#00000040}::ng-deep .bs-popover-end>.arrow:after,::ng-deep .bs-popover-auto[data-popper-placement^=right]>.arrow:after{left:1px;border-width:.5rem .5rem .5rem 0;border-right-color:#fff}::ng-deep .bs-popover-bottom>.arrow,::ng-deep .bs-popover-auto[data-popper-placement^=bottom]>.arrow{top:calc(-.5rem - 1px)}::ng-deep .bs-popover-bottom>.arrow:before,::ng-deep .bs-popover-auto[data-popper-placement^=bottom]>.arrow:before{top:0;border-width:0 .5rem .5rem .5rem;border-bottom-color:#00000040}::ng-deep .bs-popover-bottom>.arrow:after,::ng-deep .bs-popover-auto[data-popper-placement^=bottom]>.arrow:after{top:1px;border-width:0 .5rem .5rem .5rem;border-bottom-color:#fff}::ng-deep .bs-popover-bottom .popover-header:before,::ng-deep .bs-popover-auto[data-popper-placement^=bottom] .popover-header:before{position:absolute;top:0;left:50%;display:block;width:1rem;margin-left:-.5rem;content:\"\";border-bottom:1px solid #f0f0f0}::ng-deep .bs-popover-start>.arrow,::ng-deep .bs-popover-auto[data-popper-placement^=left]>.arrow{right:calc(-.5rem - 1px);width:.5rem;height:1rem}::ng-deep .bs-popover-start>.arrow:before,::ng-deep .bs-popover-auto[data-popper-placement^=left]>.arrow:before{right:0;border-width:.5rem 0 .5rem .5rem;border-left-color:#00000040}::ng-deep .bs-popover-start>.arrow:after,::ng-deep .bs-popover-auto[data-popper-placement^=left]>.arrow:after{right:1px;border-width:.5rem 0 .5rem .5rem;border-left-color:#fff}::ng-deep .popover-header{padding:.5rem 1rem;margin-bottom:0;font-size:1rem;background-color:#f0f0f0;border-bottom:1px solid #d8d8d8;border-top-left-radius:calc(.3rem - 1px);border-top-right-radius:calc(.3rem - 1px)}::ng-deep .popover-header:empty{display:none}::ng-deep .popover-body{padding:1rem;color:#212529}::ng-deep .tie-history-popover .popover-body{padding:0}::ng-deep .color-picker.open{z-index:1063}.new-template{display:flex;height:100%}.new-template ::ng-deep .tui-image-editor-overflowable-x{overflow-x:unset}.new-template ::ng-deep .color-picker{right:50px!important;top:5px!important;left:unset!important}.new-template .image-load-container{flex:1}.new-template .tools-container{border-left:1px solid #dcdfe4;width:80px;display:flex;align-items:center;justify-content:space-between;padding-top:15px;padding-bottom:15px;flex-direction:column}.new-template .tools-container .primary-tools{height:95%}.new-template .tools-container .primary-tools .selected-option{text-align:center}.new-template .tools-container .primary-tools .hr{height:1px;background-color:#dcdfe4;margin-top:10px}.new-template .tools-container .primary-tools .menu{height:90%;display:flex;flex-direction:column;flex-wrap:wrap-reverse;padding:15px;overflow-x:hidden;gap:15px}.new-template .tools-container .primary-tools .menu .tool-icon ::ng-deep .tui-image-editor-item{border-radius:50%;border:1px solid #E8EAED}.new-template .tools-container .primary-tools .menu .tool-icon ::ng-deep .tui-image-editor-item.active{background-color:#207c8026}.new-template .tools-container .primary-tools .menu .tool-icon ::ng-deep .tui-image-editor-item.active .svg_ic-menu{fill:#207c80;stroke:#207c80}.new-template .tools-container .primary-tools .menu .tool-icon-group{border-radius:50px;border:1px solid #E8EAED}.new-template .tools-container .primary-tools .sub-menu .tui-image-editor-submenu.new{position:absolute;background-color:#353535;top:0;right:80px;z-index:1000;opacity:.8;color:#fff;width:-moz-fit-content;width:fit-content;padding:10px}\n"] }]
+        }], ctorParameters: function () { return [{ type: HistoryService }]; }, propDecorators: { imageContainer: [{
+                type: ViewChild,
+                args: ['imageContainer']
+            }], loadBtn: [{
+                type: ViewChild,
+                args: ['loadBtn']
+            }], onInitialization: [{
+                type: Output
+            }], options: [{
+                type: Input
+            }], initialImage: [{
+                type: Input
+            }], template: [{
+                type: Input
+            }] } });
+
+class SvgDefinitionsComponent {
+    constructor() { }
+}
+SvgDefinitionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SvgDefinitionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SvgDefinitionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SvgDefinitionsComponent, selector: "tui-image-editor-svg-definitions", ngImport: i0, template: "\r\n<svg\r\nxmlns=\"http://www.w3.org/2000/svg\"\r\nxmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\ndisplay=\"none\"\r\n>\r\n<defs id=\"tui-image-editor-svg-default-icons\">\r\n  <symbol id=\"ic-apply\" viewBox=\"0 0 24 24\">\r\n    <path d=\"M0 0h24v24H0z\" stroke=\"none\" fill=\"none\"></path>\r\n    <path fill=\"none\" stroke=\"inherit\" d=\"M4 12.011l5 5L20.011 6\"></path>\r\n  </symbol>\r\n  <symbol id=\"ic-cancel\" viewBox=\"0 0 24 24\">\r\n    <path d=\"M0 0h24v24H0z\" fill=\"none\" stroke=\"none\"></path>\r\n    <path fill=\"none\" stroke=\"inherit\" d=\"M6 6l12 12M18 6L6 18\"></path>\r\n  </symbol>\r\n  <symbol id=\"ic-crop\" viewBox=\"0 0 24 24\">\r\n    <path d=\"M0 0h24v24H0z\" stroke=\"none\" fill=\"none\"></path>\r\n    <path\r\n      stroke=\"none\"\r\n      fill=\"inherit\"\r\n      d=\"M4 0h1v20a1 1 0 0 1-1-1V0zM20 17h-1V5h1v12zm0 2v5h-1v-5h1z\"\r\n    ></path>\r\n    <path\r\n      stroke=\"none\"\r\n      fill=\"inherit\"\r\n      d=\"M5 19h19v1H5zM4.762 4v1H0V4h4.762zM7 4h12a1 1 0 0 1 1 1H7V4z\"\r\n    ></path>\r\n  </symbol>\r\n  <symbol id=\"ic-delete-all\" viewBox=\"0 0 24 24\">\r\n    <path\r\n      stroke=\"none\"\r\n      fill=\"inherit\"\r\n      d=\"M5 23H3a1 1 0 0 1-1-1V6h1v16h2v1zm16-10h-1V6h1v7zM9 13H8v-3h1v3zm3 0h-1v-3h1v3zm3 0h-1v-3h1v3zM14.794 3.794L13 2h-3L8.206 3.794A.963.963 0 0 1 8 2.5l.703-1.055A1 1 0 0 1 9.535 1h3.93a1 1 0 0 1 .832.445L15 2.5a.965.965 0 0 1-.206 1.294zM14.197 4H8.803h5.394z\"\r\n    ></path>\r\n    <path\r\n      stroke=\"none\"\r\n      fill=\"inherit\"\r\n      d=\"M0 3h23v1H0zM11.286 21H8.714L8 23H7l1-2.8V20h.071L9.5 16h1l1.429 4H12v.2l1 2.8h-1l-.714-2zm-.357-1L10 17.4 9.071 20h1.858zM20 22h3v1h-4v-7h1v6zm-5 0h3v1h-4v-7h1v6z\"\r\n    ></path>\r\n  </symbol>\r\n  <symbol id=\"ic-delete\" viewBox=\"0 0 24 24\">\r\n    <path\r\n      stroke=\"none\"\r\n      fill=\"inherit\"\r\n      d=\"M3 6v16h17V6h1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6h1zM14.794 3.794L13 2h-3L8.206 3.794A.963.963 0 0 1 8 2.5l.703-1.055A1 1 0 0 1 9.535 1h3.93a1 1 0 0 1 .832.445L15 2.5a.965.965 0 0 1-.206 1.294zM14.197 4H8.803h5.394z\"\r\n    ></path>\r\n    <path\r\n      stroke=\"none\"\r\n      fill=\"inherit\"\r\n      d=\"M0 3h23v1H0zM8 10h1v6H8v-6zm3 0h1v6h-1v-6zm3 0h1v6h-1v-6z\"\r\n    ></path>\r\n  </symbol>\r\n  <symbol id=\"ic-draw-free\" viewBox=\"0 0 32 32\">\r\n    <path\r\n      fill=\"none\"\r\n      stroke=\"inherit\"\r\n      d=\"M2.5 20.929C2.594 10.976 4.323 6 7.686 6c5.872 0 2.524 19 7.697 19s1.89-14.929 6.414-14.929 1.357 10.858 5.13 10.858c1.802 0 2.657-2.262 2.566-6.786\"\r\n    ></path>\r\n  </symbol>\r\n  <symbol id=\"ic-draw-line\" viewBox=\"0 0 32 32\">\r\n    <path fill=\"none\" stroke=\"inherit\" d=\"M2 15.5h28\"></path>\r\n  </symbol>\r\n  <symbol id=\"ic-draw\" viewBox=\"0 0 24 24\">\r\n    <path\r\n      fill=\"none\"\r\n      stroke=\"inherit\"\r\n      d=\"M2.5 21.5H5c.245 0 .48-.058.691-.168l.124-.065.14.01c.429.028.85-.127 1.16-.437L22.55 5.405a.5.5 0 0 0 0-.707l-3.246-3.245a.5.5 0 0 0-.707 0L3.162 16.888a1.495 1.495 0 0 0-.437 1.155l.01.14-.065.123c-.111.212-.17.448-.17.694v2.5z\"\r\n    ></path>\r\n    <path\r\n      stroke=\"none\"\r\n      fill=\"inherit\"\r\n      d=\"M16.414 3.707l3.89 3.89-.708.706-3.889-3.889z\"\r\n    ></path>\r\n  </symbol>\r\n  <symbol id=\"ic-filter\" viewBox=\"0 0 24 24\">\r\n    <path d=\"M0 0h24v24H0z\" fill=\"none\" stroke=\"none\"></path>\r\n    <path\r\n      stroke=\"none\"\r\n      fill=\"inherit\"\r\n      d=\"M12 7v1H2V7h10zm6 0h4v1h-4V7zM12 16v1h10v-1H12zm-6 0H2v1h4v-1z\"\r\n    ></path>\r\n    <path\r\n      stroke=\"none\"\r\n      fill=\"inherit\"\r\n      d=\"M8.5 20a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7zm0-1a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zM15.5 11a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7zm0-1a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z\"\r\n    ></path>\r\n  </symbol>\r\n  <symbol id=\"ic-flip-reset\" viewBox=\"0 0 31 32\">\r\n    <path fill=\"none\" stroke=\"none\" d=\"M31 0H0v32h31z\"></path>\r\n    <path\r\n      stroke=\"none\"\r\n      fill=\"inherit\"\r\n      d=\"M28 16a8 8 0 0 1-8 8H3v-1h1v-7H3a8 8 0 0 1 8-8h17v1h-1v7h1zM11 9a7 7 0 0 0-7 7v7h16a7 7 0 0 0 7-7V9H11z\"\r\n    ></path>\r\n    <path\r\n      fill=\"none\"\r\n      stroke=\"inherit\"\r\n      stroke-linecap=\"square\"\r\n      d=\"M24 5l3.5 3.5L24 12M7 20l-3.5 3.5L7 27\"\r\n    ></path>\r\n  </symbol>\r\n  <symbol id=\"ic-flip-x\" viewBox=\"0 0 32 32\">\r\n    <path fill=\"none\" stroke=\"none\" d=\"M32 32H0V0h32z\"></path>\r\n    <path\r\n      stroke=\"none\"\r\n      fill=\"inherit\"\r\n      d=\"M17 32h-1V0h1zM27.167 11l.5 3h-1.03l-.546-3h1.076zm-.5-3h-1.122L25 5h-5V4h5.153a1 1 0 0 1 .986.836L26.667 8zm1.5 9l.5 3h-.94l-.545-3h.985zm1 6l.639 3.836A1 1 0 0 1 28.819 28H26v-1h3l-.726-4h.894zM23 28h-3v-1h3v1zM13 4v1H7L3 27h10v1H3.18a1 1 0 0 1-.986-1.164l3.666-22A1 1 0 0 1 6.847 4H13z\"\r\n    ></path>\r\n  </symbol>\r\n  <symbol id=\"ic-flip-y\" viewBox=\"0 0 32 32\">\r\n    <path fill=\"none\" stroke=\"none\" d=\"M0 0v32h32V0z\"></path>\r\n    <path\r\n      stroke=\"none\"\r\n      fill=\"inherit\"\r\n      d=\"M0 16v1h32v-1zM11 27.167l3 .5v-1.03l-3-.546v1.076zm-3-.5v-1.122L5 25v-5H4v5.153a1 1 0 0 0 .836.986L8 26.667zm9 1.5l3 .5v-.94l-3-.545v.985zm6 1l3.836.639A1 1 0 0 0 28 28.82V26h-1v3l-4-.727v.894zM28 23v-3h-1v3h1zM4 13h1V7l22-4v10h1V3.18a1 1 0 0 0-1.164-.986l-22 3.667A1 1 0 0 0 4 6.847V13z\"\r\n    ></path>\r\n  </symbol>\r\n  <symbol id=\"ic-flip\" viewBox=\"0 0 24 24\">\r\n    <path d=\"M0 0h24v24H0z\" fill=\"none\" stroke=\"none\"></path>\r\n    <path\r\n      fill=\"inherit\"\r\n      stroke=\"none\"\r\n      d=\"M11 0h1v24h-1zM19 21v-1h2v-2h1v2a1 1 0 0 1-1 1h-2zm-2 0h-3v-1h3v1zm5-5h-1v-3h1v3zm0-5h-1V8h1v3zm0-5h-1V4h-2V3h2a1 1 0 0 1 1 1v2zm-5-3v1h-3V3h3zM9 3v1H2v16h7v1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h7z\"\r\n    ></path>\r\n  </symbol>\r\n  <symbol id=\"ic-history\" viewBox=\"0 0 24 24\">\r\n    <path\r\n      fill=\"none\"\r\n      stroke=\"none\"\r\n      d=\"M0 0H24V24H0z\"\r\n      transform=\"translate(-740 -16) translate(547 8) translate(193 8)\"\r\n    ></path>\r\n    <path\r\n      fill=\"inherit\"\r\n      stroke=\"none\"\r\n      d=\"M12.5 1C18.299 1 23 5.701 23 11.5S18.299 22 12.5 22c-5.29 0-9.665-3.911-10.394-8.999h1.012C3.838 17.534 7.764 21 12.5 21c5.247 0 9.5-4.253 9.5-9.5S17.747 2 12.5 2C8.49 2 5.06 4.485 3.666 8H3h4v1H2V4h1v3.022C4.68 3.462 8.303 1 12.5 1zm.5 5l-.001 5.291 2.537 2.537-.708.708L12.292 12H12V6h1z\"\r\n      transform=\"translate(-740 -16) translate(547 8) translate(193 8)\"\r\n    ></path>\r\n  </symbol>\r\n  <symbol id=\"ic-history-check\" viewBox=\"0 0 12 12\">\r\n    <g fill=\"none\" fill-rule=\"evenodd\">\r\n      <path\r\n        stroke=\"#555555\"\r\n        d=\"M4.5 -1L1.5 2 6.5 7\"\r\n        transform=\"translate(-60 -804) translate(60 804) translate(2 3) rotate(-90 4 3)\"\r\n      ></path>\r\n    </g>\r\n  </symbol>\r\n  <symbol id=\"ic-history-crop\" viewBox=\"0 0 12 12\">\r\n    <g fill=\"none\" stroke=\"none\" fill-rule=\"evenodd\">\r\n      <path\r\n        d=\"M0 0H12V12H0z\"\r\n        transform=\"translate(-84 -804) translate(84 804)\"\r\n      ></path>\r\n      <path\r\n        fill=\"#434343\"\r\n        d=\"M2 0h1v10c-.552 0-1-.448-1-1V0zM10 9v3H9V9h1zM9 2h1v6H9V2z\"\r\n        transform=\"translate(-84 -804) translate(84 804)\"\r\n      ></path>\r\n      <path\r\n        fill=\"#434343\"\r\n        d=\"M2 9H12V10H2zM9 2c.513 0 .936.386.993.883L10 3H3V2h6zM2 3H0V2h2v1z\"\r\n        transform=\"translate(-84 -804) translate(84 804)\"\r\n      ></path>\r\n    </g>\r\n  </symbol>\r\n  <symbol id=\"ic-history-draw\" viewBox=\"0 0 12 12\">\r\n    <g fill=\"none\" stroke=\"none\" fill-rule=\"evenodd\">\r\n      <path\r\n        d=\"M0 1H12V13H0z\"\r\n        transform=\"translate(-156 -804) translate(156 803)\"\r\n      ></path>\r\n      <path\r\n        stroke=\"#434343\"\r\n        d=\"M9.622 1.584l1.835 1.658-8.31 8.407L.5 12.5V11l9.122-9.416z\"\r\n        transform=\"translate(-156 -804) translate(156 803)\"\r\n      ></path>\r\n      <path\r\n        fill=\"#434343\"\r\n        d=\"M7.628 3.753L10.378 3.753 10.378 4.253 7.628 4.253z\"\r\n        transform=\"translate(-156 -804) translate(156 803) rotate(45 9.003 4.003)\"\r\n      ></path>\r\n    </g>\r\n  </symbol>\r\n  <symbol id=\"ic-history-filter\" viewBox=\"0 0 12 12\">\r\n    <g fill=\"none\" stroke=\"none\" fill-rule=\"evenodd\">\r\n      <path\r\n        d=\"M0 0H12V12H0z\"\r\n        transform=\"translate(-276 -804) translate(276 804)\"\r\n      ></path>\r\n      <path\r\n        fill=\"#434343\"\r\n        d=\"M12 3v1H9V3h3zM7 4H0V3h7v1z\"\r\n        transform=\"translate(-276 -804) translate(276 804)\"\r\n      ></path>\r\n      <path\r\n        fill=\"#434343\"\r\n        d=\"M12 8v1H9V8h3zM7 9H0V8h7v1z\"\r\n        transform=\"translate(-276 -804) translate(276 804) matrix(-1 0 0 1 12 0)\"\r\n      ></path>\r\n      <path\r\n        fill=\"#434343\"\r\n        d=\"M8 1c1.105 0 2 .895 2 2s-.895 2-2 2-2-.895-2-2 .895-2 2-2zm0 1c-.552 0-1 .448-1 1s.448 1 1 1 1-.448 1-1-.448-1-1-1zM4 7c1.105 0 2 .895 2 2s-.895 2-2 2-2-.895-2-2 .895-2 2-2zm0 1c-.552 0-1 .448-1 1s.448 1 1 1 1-.448 1-1-.448-1-1-1z\"\r\n        transform=\"translate(-276 -804) translate(276 804)\"\r\n      ></path>\r\n    </g>\r\n  </symbol>\r\n  <symbol id=\"ic-history-flip\" viewBox=\"0 0 12 12\">\r\n    <g fill=\"none\" stroke=\"none\" fill-rule=\"evenodd\">\r\n      <path\r\n        d=\"M0 0H12V12H0z\"\r\n        transform=\"translate(-108 -804) translate(108 804)\"\r\n      ></path>\r\n      <path\r\n        fill=\"#434343\"\r\n        d=\"M6 0L7 0 7 12 6 12zM11 10V9h1v1.5c0 .276-.224.5-.5.5H10v-1h1zM5 1v1H1v8h4v1H.5c-.276 0-.5-.224-.5-.5v-9c0-.276.224-.5.5-.5H5zm7 5v2h-1V6h1zm0-3v2h-1V3h1zM9 1v1H7V1h2zm2.5 0c.276 0 .5.224.5.5V2h-2V1h1.5zM9 11H7v-1h2v1z\"\r\n        transform=\"translate(-108 -804) translate(108 804)\"\r\n      ></path>\r\n    </g>\r\n  </symbol>\r\n  <symbol id=\"ic-history-icon\" viewBox=\"0 0 12 12\">\r\n    <g fill=\"none\" stroke=\"none\" fill-rule=\"evenodd\">\r\n      <path\r\n        d=\"M0 0H12V12H0z\"\r\n        transform=\"translate(-204 -804) translate(204 804)\"\r\n      ></path>\r\n      <path\r\n        stroke=\"#434343\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n        stroke-width=\"1.1\"\r\n        d=\"M6 9.568L2.601 11 2.975 7.467 0.5 4.82 4.13 4.068 6 1 7.87 4.068 11.5 4.82 9.025 7.467 9.399 11z\"\r\n        transform=\"translate(-204 -804) translate(204 804)\"\r\n      ></path>\r\n    </g>\r\n  </symbol>\r\n  <symbol id=\"ic-history-mask\" viewBox=\"0 0 12 12\">\r\n    <g fill=\"none\" stroke=\"none\" fill-rule=\"evenodd\">\r\n      <g transform=\"translate(-252 -804) translate(252 804)\">\r\n        <path d=\"M0 0H12V12H0z\"></path>\r\n        <circle cx=\"6\" cy=\"6\" r=\"2.5\" stroke=\"#444\"></circle>\r\n        <path\r\n          fill=\"#434343\"\r\n          d=\"M11.5 0c.276 0 .5.224.5.5v11c0 .276-.224.5-.5.5H.5c-.276 0-.5-.224-.5-.5V.5C0 .224.224 0 .5 0h11zM11 1H1v10h10V1z\"\r\n        ></path>\r\n      </g>\r\n    </g>\r\n  </symbol>\r\n  <symbol id=\"ic-history-rotate\" viewBox=\"0 0 12 12\">\r\n    <defs>\r\n      <path\r\n        id=\"rfn4rylffa\"\r\n        d=\"M7 12c-.335 0-.663-.025-.983-.074C3.171 11.492 1 9.205 1 6.444c0-1.363.534-2.613 1.415-3.58\"\r\n      ></path>\r\n      <mask\r\n        id=\"6f9gn2dysb\"\r\n        width=\"6\"\r\n        height=\"9.136\"\r\n        x=\"0\"\r\n        y=\"0\"\r\n        maskUnits=\"objectBoundingBox\"\r\n      >\r\n        <use xlink:href=\"#rfn4rylffa\" stroke=\"434343\"></use>\r\n      </mask>\r\n    </defs>\r\n    <g fill=\"none\" stroke=\"none\" fill-rule=\"evenodd\">\r\n      <g transform=\"translate(-132 -804) translate(132 804)\">\r\n        <path d=\"M0 0.5H12V12.5H0z\"></path>\r\n        <path\r\n          fill=\"#434343\"\r\n          d=\"M6.5 1C9.538 1 12 3.462 12 6.5c0 2.37-1.5 4.39-3.6 5.163l-.407-.916C9.744 10.13 11 8.462 11 6.5 11 4.015 8.985 2 6.5 2c-.777 0-1.509.197-2.147.544L4 1.75l-.205-.04C4.594 1.258 5.517 1 6.5 1z\"\r\n        ></path>\r\n        <use\r\n          stroke=\"#434343\"\r\n          stroke-dasharray=\"2 1.25\"\r\n          stroke-width=\"1\"\r\n          mask=\"url(#6f9gn2dysb)\"\r\n          xlink:href=\"#rfn4rylffa\"\r\n        ></use>\r\n        <path\r\n          fill=\"#434343\"\r\n          d=\"M4.279 0L6 1.75 4.25 3.571 3.543 2.864 4.586 1.75 3.572 0.707z\"\r\n          transform=\"matrix(-1 0 0 1 9.543 0)\"\r\n        ></path>\r\n      </g>\r\n    </g>\r\n  </symbol>\r\n  <symbol id=\"ic-history-shape\" viewBox=\"0 0 12 12\">\r\n    <g fill=\"none\" stroke=\"none\" fill-rule=\"evenodd\">\r\n      <path\r\n        d=\"M0 0H12V12H0z\"\r\n        transform=\"translate(-180 -804) translate(180 804)\"\r\n      ></path>\r\n      <path\r\n        fill=\"#434343\"\r\n        d=\"M11.5 4c.276 0 .5.224.5.5v7c0 .276-.224.5-.5.5h-7c-.276 0-.5-.224-.5-.5V8.8h1V11h6V5H8.341l-.568-1H11.5z\"\r\n        transform=\"translate(-180 -804) translate(180 804)\"\r\n      ></path>\r\n      <path\r\n        stroke=\"#434343\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n        d=\"M4.5 0.5L8.5 7.611 0.5 7.611z\"\r\n        transform=\"translate(-180 -804) translate(180 804)\"\r\n      ></path>\r\n    </g>\r\n  </symbol>\r\n  <symbol id=\"ic-history-text\" viewBox=\"0 0 12 12\">\r\n    <g fill=\"none\" stroke=\"none\" fill-rule=\"evenodd\">\r\n      <path\r\n        d=\"M0 0H12V12H0z\"\r\n        transform=\"translate(-228 -804) translate(228 804)\"\r\n      ></path>\r\n      <path\r\n        fill=\"#434343\"\r\n        d=\"M2 1h8c.552 0 1 .448 1 1H1c0-.552.448-1 1-1z\"\r\n        transform=\"translate(-228 -804) translate(228 804)\"\r\n      ></path>\r\n      <path\r\n        fill=\"#434343\"\r\n        d=\"M1 1H2V3H1zM10 1H11V3H10zM5.5 1L6.5 1 6.5 11 5.5 11z\"\r\n        transform=\"translate(-228 -804) translate(228 804)\"\r\n      ></path>\r\n      <path\r\n        fill=\"#434343\"\r\n        d=\"M4 10H8V11H4z\"\r\n        transform=\"translate(-228 -804) translate(228 804)\"\r\n      ></path>\r\n    </g>\r\n  </symbol>\r\n  <symbol id=\"ic-history-load\" viewBox=\"0 0 12 12\">\r\n    <g fill=\"none\" stroke=\"none\" fill-rule=\"evenodd\">\r\n      <path\r\n        d=\"M0 0H12V12H0z\"\r\n        transform=\"translate(-324 -805) translate(324 805)\"\r\n      ></path>\r\n      <path\r\n        fill=\"#434343\"\r\n        d=\"M5 0c.552 0 1 .448 1 1v1h5.5c.276 0 .5.224.5.5v8c0 .276-.224.5-.5.5H.5c-.276 0-.5-.224-.5-.5V1c0-.552.448-1 1-1h4zm0 1H1v9h10V3H5V1z\"\r\n        transform=\"translate(-324 -805) translate(324 805)\"\r\n      ></path>\r\n      <path\r\n        fill=\"#434343\"\r\n        d=\"M1 2L5 2 5 3 1 3z\"\r\n        transform=\"translate(-324 -805) translate(324 805)\"\r\n      ></path>\r\n    </g>\r\n  </symbol>\r\n  <symbol id=\"ic-history-delete\" viewBox=\"0 0 12 12\">\r\n    <g fill=\"none\" stroke=\"none\" fill-rule=\"evenodd\">\r\n      <g fill=\"#434343\">\r\n        <path\r\n          d=\"M2 9h8V1h1v8.5c0 .276-.224.5-.5.5h-9c-.276 0-.5-.224-.5-.5V1h1v8zM0 0H12V1H0z\"\r\n          transform=\"translate(-300 -804) translate(300 804) translate(0 2)\"\r\n        ></path>\r\n        <path\r\n          d=\"M4 3H5V7H4zM7 3H8V7H7z\"\r\n          transform=\"translate(-300 -804) translate(300 804) translate(0 2)\"\r\n        ></path>\r\n        <path\r\n          d=\"M4 1h4V0h1v1.5c0 .276-.224.5-.5.5h-5c-.276 0-.5-.224-.5-.5V0h1v1z\"\r\n          transform=\"translate(-300 -804) translate(300 804) matrix(1 0 0 -1 0 2)\"\r\n        ></path>\r\n      </g>\r\n    </g>\r\n  </symbol>\r\n  <symbol id=\"ic-history-group\" viewBox=\"0 0 24 24\">\r\n    <g fill=\"none\" stroke=\"none\" fill-rule=\"evenodd\">\r\n      <g transform=\"translate(-348 -804) translate(348 804)\">\r\n        <path d=\"M0 0H12V12H0z\"></path>\r\n        <path\r\n          fill=\"#434343\"\r\n          d=\"M1 9v2h1v1H.5c-.276 0-.5-.224-.5-.5V9h1zm11 1v1.5c0 .276-.224.5-.5.5H9v-1h2v-1h1zm-4 1v1H6v-1h2zm-3 0v1H3v-1h2zm7-4v2h-1V7h1zM1 6v2H0V6h1zm11-2v2h-1V4h1zM1 3v2H0V3h1zm10.5-3c.276 0 .5.224.5.5V3h-1V1h-1V0h1.5zM6 0v1H4V0h2zm3 0v1H7V0h2zM0 .5C0 .224.224 0 .5 0H3v1H1v1H0V.5zM9.5 4c.276 0 .5.224.5.5v5c0 .276-.224.5-.5.5h-5c-.276 0-.5-.224-.5-.5V8.355c.317.094.652.145 1 .145V9h4V5h-.5c0-.348-.05-.683-.145-1H9.5z\"\r\n        ></path>\r\n        <circle cx=\"5\" cy=\"5\" r=\"2.5\" stroke=\"#434343\"></circle>\r\n      </g>\r\n    </g>\r\n  </symbol>\r\n  <symbol id=\"ic-icon-arrow-2\" viewBox=\"0 0 32 32\">\r\n    <path\r\n      fill=\"none\"\r\n      stroke=\"inherit\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n      d=\"M21.793 18.5H2.5v-5h18.935l-7.6-8h5.872l10.5 10.5-10.5 10.5h-5.914l8-8z\"\r\n    ></path>\r\n  </symbol>\r\n  <symbol id=\"ic-icon-arrow-3\" viewBox=\"0 0 32 32\">\r\n    <path\r\n      fill=\"none\"\r\n      stroke=\"inherit\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n      d=\"M25.288 16.42L14.208 27.5H6.792l11.291-11.291L6.826 4.5h7.381l11.661 11.661-.58.258z\"\r\n    ></path>\r\n  </symbol>\r\n  <symbol id=\"ic-icon-arrow\" viewBox=\"0 0 32 32\">\r\n    <path\r\n      fill=\"none\"\r\n      stroke=\"inherit\"\r\n      d=\"M2.5 11.5v9h18v5.293L30.293 16 20.5 6.207V11.5h-18z\"\r\n    ></path>\r\n  </symbol>\r\n  <symbol id=\"ic-icon-bubble\" viewBox=\"0 0 32 32\">\r\n    <path\r\n      fill=\"none\"\r\n      stroke=\"inherit\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n      d=\"M22.207 24.5L16.5 30.207V24.5H8A6.5 6.5 0 0 1 1.5 18V9A6.5 6.5 0 0 1 8 2.5h16A6.5 6.5 0 0 1 30.5 9v9a6.5 6.5 0 0 1-6.5 6.5h-1.793z\"\r\n    ></path>\r\n  </symbol>\r\n  <symbol id=\"ic-icon-heart\" viewBox=\"0 0 32 32\">\r\n    <path\r\n      fill-rule=\"nonzero\"\r\n      fill=\"none\"\r\n      stroke=\"inherit\"\r\n      d=\"M15.996 30.675l1.981-1.79c7.898-7.177 10.365-9.718 12.135-13.012.922-1.716 1.377-3.37 1.377-5.076 0-4.65-3.647-8.297-8.297-8.297-2.33 0-4.86 1.527-6.817 3.824l-.38.447-.381-.447C13.658 4.027 11.126 2.5 8.797 2.5 4.147 2.5.5 6.147.5 10.797c0 1.714.46 3.375 1.389 5.098 1.775 3.288 4.26 5.843 12.123 12.974l1.984 1.806z\"\r\n    ></path>\r\n  </symbol>\r\n  <symbol id=\"ic-icon-load\" viewBox=\"0 0 32 32\">\r\n    <path\r\n      fill=\"none\"\r\n      stroke=\"inherit\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n      d=\"M17.314 18.867l1.951-2.53 4 5.184h-17l6.5-8.84 4.549 6.186z\"\r\n    ></path>\r\n    <path\r\n      stroke=\"none\"\r\n      fill=\"inherit\"\r\n      d=\"M18.01 4a11.798 11.798 0 0 0 0 1H3v24h24V14.986a8.738 8.738 0 0 0 1 0V29a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h15.01z\"\r\n    ></path>\r\n    <path stroke=\"none\" fill=\"inherit\" d=\"M25 3h1v9h-1z\"></path>\r\n    <path fill=\"none\" stroke=\"inherit\" d=\"M22 6l3.5-3.5L29 6\"></path>\r\n  </symbol>\r\n  <symbol id=\"ic-icon-location\" viewBox=\"0 0 32 32\">\r\n    <path\r\n      fill=\"none\"\r\n      stroke=\"inherit\"\r\n      d=\"M16 31.28C23.675 23.302 27.5 17.181 27.5 13c0-6.351-5.149-11.5-11.5-11.5S4.5 6.649 4.5 13c0 4.181 3.825 10.302 11.5 18.28z\"\r\n    ></path>\r\n    <circle fill=\"none\" stroke=\"inherit\" cx=\"16\" cy=\"13\" r=\"4.5\"></circle>\r\n  </symbol>\r\n  <symbol id=\"ic-icon-polygon\" viewBox=\"0 0 32 32\">\r\n    <path\r\n      fill=\"none\"\r\n      stroke=\"inherit\"\r\n      d=\"M.576 16L8.29 29.5h15.42L31.424 16 23.71 2.5H8.29L.576 16z\"\r\n    ></path>\r\n  </symbol>\r\n  <symbol id=\"ic-icon-star-2\" viewBox=\"0 0 32 32\">\r\n    <path\r\n      fill=\"none\"\r\n      stroke=\"inherit\"\r\n      d=\"M19.446 31.592l2.265-3.272 3.946.25.636-3.94 3.665-1.505-1.12-3.832 2.655-2.962-2.656-2.962 1.12-3.832-3.664-1.505-.636-3.941-3.946.25-2.265-3.271L16 3.024 12.554 1.07 10.289 4.34l-3.946-.25-.636 3.941-3.665 1.505 1.12 3.832L.508 16.33l2.656 2.962-1.12 3.832 3.664 1.504.636 3.942 3.946-.25 2.265 3.27L16 29.638l3.446 1.955z\"\r\n    ></path>\r\n  </symbol>\r\n  <symbol id=\"ic-icon-star\" viewBox=\"0 0 32 32\">\r\n    <path\r\n      fill=\"none\"\r\n      stroke=\"inherit\"\r\n      d=\"M25.292 29.878l-1.775-10.346 7.517-7.327-10.388-1.51L16 1.282l-4.646 9.413-10.388 1.51 7.517 7.327-1.775 10.346L16 24.993l9.292 4.885z\"\r\n    ></path>\r\n  </symbol>\r\n  <symbol id=\"ic-icon\" viewBox=\"0 0 24 24\">\r\n    <path\r\n      fill=\"none\"\r\n      stroke=\"inherit\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n      d=\"M11.923 19.136L5.424 22l.715-7.065-4.731-5.296 6.94-1.503L11.923 2l3.574 6.136 6.94 1.503-4.731 5.296L18.42 22z\"\r\n    ></path>\r\n  </symbol>\r\n  <symbol id=\"ic-mask-load\" viewBox=\"0 0 32 32\">\r\n    <path stroke=\"none\" fill=\"none\" d=\"M0 0h32v32H0z\"></path>\r\n    <path\r\n      stroke=\"none\"\r\n      fill=\"inherit\"\r\n      d=\"M18.01 4a11.798 11.798 0 0 0 0 1H3v24h24V14.986a8.738 8.738 0 0 0 1 0V29a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h15.01zM15 23a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-1a5 5 0 1 0 0-10 5 5 0 0 0 0 10z\"\r\n    ></path>\r\n    <path stroke=\"none\" fill=\"inherit\" d=\"M25 3h1v9h-1z\"></path>\r\n    <path fill=\"none\" stroke=\"inherit\" d=\"M22 6l3.5-3.5L29 6\"></path>\r\n  </symbol>\r\n  <symbol id=\"ic-mask\" viewBox=\"0 0 24 24\">\r\n    <circle cx=\"12\" cy=\"12\" r=\"4.5\" stroke=\"inherit\" fill=\"none\"></circle>\r\n    <path\r\n      stroke=\"none\"\r\n      fill=\"inherit\"\r\n      d=\"M2 1h20a1 1 0 0 1 1 1v20a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zm0 1v20h20V2H2z\"\r\n    ></path>\r\n  </symbol>\r\n  <symbol id=\"ic-redo\" viewBox=\"0 0 24 24\">\r\n    <path d=\"M0 0h24v24H0z\" opacity=\".5\" fill=\"none\" stroke=\"none\"></path>\r\n    <path\r\n      stroke=\"none\"\r\n      fill=\"inherit\"\r\n      d=\"M21 6H9a6 6 0 1 0 0 12h12v1H9A7 7 0 0 1 9 5h12v1z\"\r\n    ></path>\r\n    <path\r\n      fill=\"none\"\r\n      stroke=\"inherit\"\r\n      stroke-linecap=\"square\"\r\n      d=\"M19 3l2.5 2.5L19 8\"\r\n    ></path>\r\n  </symbol>\r\n  <symbol id=\"ic-reset\" viewBox=\"0 0 24 24\">\r\n    <path d=\"M0 0h24v24H0z\" opacity=\".5\" stroke=\"none\" fill=\"none\"></path>\r\n    <path\r\n      stroke=\"none\"\r\n      fill=\"inherit\"\r\n      d=\"M2 13v-1a7 7 0 0 1 7-7h13v1h-1v5h1v1a7 7 0 0 1-7 7H2v-1h1v-5H2zm7-7a6 6 0 0 0-6 6v6h12a6 6 0 0 0 6-6V6H9z\"\r\n    ></path>\r\n    <path\r\n      fill=\"none\"\r\n      stroke=\"inherit\"\r\n      stroke-linecap=\"square\"\r\n      d=\"M19 3l2.5 2.5L19 8M5 16l-2.5 2.5L5 21\"\r\n    ></path>\r\n  </symbol>\r\n  <symbol id=\"ic-rotate-clockwise\" viewBox=\"0 0 32 32\">\r\n    <path\r\n      stroke=\"none\"\r\n      fill=\"inherit\"\r\n      d=\"M29 17h-.924c0 6.627-5.373 12-12 12-6.628 0-12-5.373-12-12C4.076 10.398 9.407 5.041 16 5V4C8.82 4 3 9.82 3 17s5.82 13 13 13 13-5.82 13-13z\"\r\n    ></path>\r\n    <path\r\n      fill=\"none\"\r\n      stroke=\"inherit\"\r\n      stroke-linecap=\"square\"\r\n      d=\"M16 1.5l4 3-4 3\"\r\n    ></path>\r\n    <path\r\n      stroke=\"none\"\r\n      fill=\"inherit\"\r\n      fill-rule=\"nonzero\"\r\n      d=\"M16 4h4v1h-4z\"\r\n    ></path>\r\n  </symbol>\r\n  <symbol id=\"ic-rotate-counterclockwise\" viewBox=\"0 0 32 32\">\r\n    <path\r\n      stroke=\"none\"\r\n      d=\"M3 17h.924c0 6.627 5.373 12 12 12 6.628 0 12-5.373 12-12 0-6.602-5.331-11.96-11.924-12V4c7.18 0 13 5.82 13 13s-5.82 13-13 13S3 24.18 3 17z\"\r\n    ></path>\r\n    <path\r\n      stroke=\"none\"\r\n      fill=\"inherit\"\r\n      fill-rule=\"nonzero\"\r\n      d=\"M12 4h4v1h-4z\"\r\n    ></path>\r\n    <path\r\n      fill=\"none\"\r\n      stroke=\"inherit\"\r\n      stroke-linecap=\"square\"\r\n      d=\"M16 1.5l-4 3 4 3\"\r\n    ></path>\r\n  </symbol>\r\n  <symbol id=\"ic-rotate\" viewBox=\"0 0 24 24\">\r\n    <path d=\"M0 0h24v24H0z\" fill=\"none\" stroke=\"none\"></path>\r\n    <path\r\n      fill=\"inherit\"\r\n      stroke=\"none\"\r\n      d=\"M8.349 22.254a10.002 10.002 0 0 1-2.778-1.719l.65-.76a9.002 9.002 0 0 0 2.495 1.548l-.367.931zm2.873.704l.078-.997a9 9 0 1 0-.557-17.852l-.14-.99A10.076 10.076 0 0 1 12.145 3c5.523 0 10 4.477 10 10s-4.477 10-10 10c-.312 0-.62-.014-.924-.042zm-7.556-4.655a9.942 9.942 0 0 1-1.253-2.996l.973-.234a8.948 8.948 0 0 0 1.124 2.693l-.844.537zm-1.502-5.91A9.949 9.949 0 0 1 2.88 9.23l.925.382a8.954 8.954 0 0 0-.644 2.844l-.998-.062zm2.21-5.686c.687-.848 1.51-1.58 2.436-2.166l.523.852a9.048 9.048 0 0 0-2.188 1.95l-.771-.636z\"\r\n    ></path>\r\n    <path\r\n      stroke=\"inherit\"\r\n      fill=\"none\"\r\n      stroke-linecap=\"square\"\r\n      d=\"M13 1l-2.5 2.5L13 6\"\r\n    ></path>\r\n  </symbol>\r\n  <symbol id=\"ic-shape-circle\" viewBox=\"0 0 32 32\">\r\n    <circle cx=\"16\" cy=\"16\" r=\"14.5\" fill=\"none\" stroke=\"inherit\"></circle>\r\n  </symbol>\r\n  <symbol id=\"ic-shape-rectangle\" viewBox=\"0 0 32 32\">\r\n    <rect\r\n      width=\"27\"\r\n      height=\"27\"\r\n      x=\"2.5\"\r\n      y=\"2.5\"\r\n      fill=\"none\"\r\n      stroke=\"inherit\"\r\n      rx=\"1\"\r\n    ></rect>\r\n  </symbol>\r\n  <symbol id=\"ic-shape-triangle\" viewBox=\"0 0 32 32\">\r\n    <path\r\n      fill=\"none\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n      d=\"M16 2.5l15.5 27H.5z\"\r\n    ></path>\r\n  </symbol>\r\n  <symbol id=\"ic-shape\" viewBox=\"0 0 24 24\">\r\n    <path\r\n      stroke=\"none\"\r\n      fill=\"inherit\"\r\n      d=\"M14.706 8H21a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1v-4h1v4h12V9h-5.706l-.588-1z\"\r\n    ></path>\r\n    <path\r\n      fill=\"none\"\r\n      stroke=\"inherit\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n      d=\"M8.5 1.5l7.5 13H1z\"\r\n    ></path>\r\n  </symbol>\r\n  <symbol id=\"ic-text-align-center\" viewBox=\"0 0 32 32\">\r\n    <path stroke=\"none\" fill=\"none\" d=\"M0 0h32v32H0z\"></path>\r\n    <path\r\n      stroke=\"none\"\r\n      fill=\"inherit\"\r\n      d=\"M2 5h28v1H2zM8 12h16v1H8zM2 19h28v1H2zM8 26h16v1H8z\"\r\n    ></path>\r\n  </symbol>\r\n  <symbol id=\"ic-text-align-left\" viewBox=\"0 0 32 32\">\r\n    <path stroke=\"none\" fill=\"none\" d=\"M0 0h32v32H0z\"></path>\r\n    <path\r\n      stroke=\"none\"\r\n      fill=\"inherit\"\r\n      d=\"M2 5h28v1H2zM2 12h16v1H2zM2 19h28v1H2zM2 26h16v1H2z\"\r\n    ></path>\r\n  </symbol>\r\n  <symbol id=\"ic-text-align-right\" viewBox=\"0 0 32 32\">\r\n    <path stroke=\"none\" fill=\"none\" d=\"M0 0h32v32H0z\"></path>\r\n    <path\r\n      stroke=\"none\"\r\n      fill=\"inherit\"\r\n      d=\"M2 5h28v1H2zM14 12h16v1H14zM2 19h28v1H2zM14 26h16v1H14z\"\r\n    ></path>\r\n  </symbol>\r\n  <symbol id=\"ic-text-bold\" viewBox=\"0 0 32 32\">\r\n    <path fill=\"none\" stroke=\"none\" d=\"M0 0h32v32H0z\"></path>\r\n    <path stroke=\"none\" fill=\"inherit\" d=\"M7 2h2v2H7zM7 28h2v2H7z\"></path>\r\n    <path\r\n      fill=\"none\"\r\n      stroke=\"inherit\"\r\n      stroke-width=\"2\"\r\n      d=\"M9 3v12h9a6 6 0 1 0 0-12H9zM9 15v14h10a7 7 0 0 0 0-14H9z\"\r\n    ></path>\r\n  </symbol>\r\n  <symbol id=\"ic-text-italic\" viewBox=\"0 0 32 32\">\r\n    <path fill=\"none\" stroke=\"none\" d=\"M0 0h32v32H0z\"></path>\r\n    <path\r\n      stroke=\"none\"\r\n      fill=\"inherit\"\r\n      d=\"M15 2h5v1h-5zM11 29h5v1h-5zM17 3h1l-4 26h-1z\"\r\n    ></path>\r\n  </symbol>\r\n  <symbol id=\"ic-text-underline\" viewBox=\"0 0 32 32\">\r\n    <path stroke=\"none\" fill=\"none\" d=\"M0 0h32v32H0z\"></path>\r\n    <path\r\n      stroke=\"none\"\r\n      fill=\"inherit\"\r\n      d=\"M8 2v14a8 8 0 1 0 16 0V2h1v14a9 9 0 0 1-18 0V2h1zM3 29h26v1H3z\"\r\n    ></path>\r\n    <path stroke=\"none\" fill=\"inherit\" d=\"M5 2h5v1H5zM22 2h5v1h-5z\"></path>\r\n  </symbol>\r\n  <symbol id=\"ic-text\" viewBox=\"0 0 24 24\">\r\n    <path\r\n      stroke=\"none\"\r\n      fill=\"inherit\"\r\n      d=\"M4 3h15a1 1 0 0 1 1 1H3a1 1 0 0 1 1-1zM3 4h1v1H3zM19 4h1v1h-1z\"\r\n    ></path>\r\n    <path stroke=\"none\" fill=\"inherit\" d=\"M11 3h1v18h-1z\"></path>\r\n    <path stroke=\"none\" fill=\"inherit\" d=\"M10 20h3v1h-3z\"></path>\r\n  </symbol>\r\n  <symbol id=\"ic-undo\" viewBox=\"0 0 24 24\">\r\n    <path d=\"M24 0H0v24h24z\" opacity=\".5\" fill=\"none\" stroke=\"none\"></path>\r\n    <path\r\n      stroke=\"none\"\r\n      fill=\"inherit\"\r\n      d=\"M3 6h12a6 6 0 1 1 0 12H3v1h12a7 7 0 0 0 0-14H3v1z\"\r\n    ></path>\r\n    <path\r\n      fill=\"none\"\r\n      stroke=\"inherit\"\r\n      stroke-linecap=\"square\"\r\n      d=\"M5 3L2.5 5.5 5 8\"\r\n    ></path>\r\n  </symbol>\r\n  <symbol id=\"ic-zoom-in\" viewBox=\"0 0 24 24\">\r\n    <g transform=\"translate(-229 -290) translate(229 290)\">\r\n      <circle cx=\"10.5\" cy=\"10.5\" r=\"9\" stroke=\"inherit\" fill=\"none\"></circle>\r\n      <path\r\n        fill=\"inherit\"\r\n        d=\"M18.828 15.828H19.828V22.828H18.828z\"\r\n        transform=\"rotate(-45 19.328 19.328)\"\r\n      ></path>\r\n      <path fill=\"inherit\" d=\"M7 10H14V11H7z\"></path>\r\n      <path fill=\"inherit\" d=\"M10 7H11V14H10z\"></path>\r\n    </g>\r\n  </symbol>\r\n  <symbol id=\"ic-zoom-out\" viewBox=\"0 0 24 24\">\r\n    <g transform=\"translate(-263 -290) translate(263 290)\">\r\n      <circle cx=\"10.5\" cy=\"10.5\" r=\"9\" stroke=\"inherit\" fill=\"none\"></circle>\r\n      <path\r\n        fill=\"inherit\"\r\n        d=\"M18.828 15.828H19.828V22.828H18.828z\"\r\n        transform=\"rotate(-45 19.328 19.328)\"\r\n      ></path>\r\n      <path fill=\"inherit\" d=\"M7 10H14V11H7z\"></path>\r\n    </g>\r\n  </symbol>\r\n  <symbol id=\"ic-hand\" viewBox=\"0 0 24 24\">\r\n    <g fill=\"none\" fill-rule=\"evenodd\" stroke-linejoin=\"round\">\r\n      <path\r\n        fill=\"inherit\"\r\n        fill-rule=\"nonzero\"\r\n        d=\"M8.672 3.36c1.328 0 2.114.78 2.29 1.869l.014.101.023.006v1.042l-.638-.185c-.187-.055-.323-.211-.354-.399L10 5.713c0-.825-.42-1.353-1.328-1.353C7.695 4.36 7 5.041 7 5.713v7.941c0 .439-.524.665-.843.364l-1.868-1.761c-.595-.528-1.316-.617-1.918-.216-.522.348-.562 1.203-.18 1.8L7.738 22h11.013l.285-.518c1.247-2.326 1.897-4.259 1.96-5.785l.004-.239V8.035c0-.656-.5-1.17-1-1.17-.503 0-1 .456-1 1.17 0 .333-.32.573-.64.48L18 8.41V7.368l.086.026.042-.136c.279-.805.978-1.332 1.738-1.388L20 5.865c1.057 0 2 .967 2 2.17v7.423c0 1.929-.845 4.352-2.521 7.29-.09.156-.255.252-.435.252H7.474c-.166 0-.321-.082-.414-.219l-5.704-8.39c-.653-1.019-.584-2.486.46-3.182 1-.666 2.216-.516 3.148.31L6 12.495V5.713c0-1.18 1.058-2.263 2.49-2.348z\"\r\n        transform=\"translate(-297 -290) translate(297 290)\"\r\n      ></path>\r\n      <path\r\n        fill=\"inherit\"\r\n        fill-rule=\"nonzero\"\r\n        d=\"M12.5 1.5c1.325 0 2.41 1.032 2.495 2.336L15 4v7.22h-1V4c0-.828-.672-1.5-1.5-1.5-.78 0-1.42.595-1.493 1.356L11 4v7.22h-1V4c0-1.38 1.12-2.5 2.5-2.5z\"\r\n        transform=\"translate(-297 -290) translate(297 290)\"\r\n      ></path>\r\n      <path\r\n        fill=\"inherit\"\r\n        fill-rule=\"nonzero\"\r\n        d=\"M16.5 3.5c1.325 0 2.41 1.032 2.495 2.336L19 6v6.3h-1V6c0-.828-.672-1.5-1.5-1.5-.78 0-1.42.595-1.493 1.356L15 6v2.44h-1V6c0-1.38 1.12-2.5 2.5-2.5z\"\r\n        transform=\"translate(-297 -290) translate(297 290)\"\r\n      ></path>\r\n    </g>\r\n  </symbol>\r\n  <symbol id=\"ic-history-rotate\" viewBox=\"0 0 24 24\">\r\n    <g fill=\"none\" stroke=\"none\" fill-rule=\"evenodd\">\r\n      <g transform=\"translate(-132 -804) translate(132 804)\">\r\n        <path d=\"M0 0.5H12V12.5H0z\"></path>\r\n        <path\r\n          fill=\"#434343\"\r\n          d=\"M6.5 1C9.538 1 12 3.462 12 6.5c0 2.37-1.5 4.39-3.6 5.163l-.407-.916C9.744 10.13 11 8.462 11 6.5 11 4.015 8.985 2 6.5 2c-.777 0-1.509.197-2.147.544L4 1.75l-.205-.04C4.594 1.258 5.517 1 6.5 1z\"\r\n        ></path>\r\n        <use\r\n          stroke=\"#434343\"\r\n          stroke-dasharray=\"2 1.25\"\r\n          stroke-width=\"1\"\r\n          mask=\"url(#6f9gn2dysb)\"\r\n          xlink:href=\"#rfn4rylffa\"\r\n        ></use>\r\n        <path\r\n          fill=\"#434343\"\r\n          d=\"M4.279 0L6 1.75 4.25 3.571 3.543 2.864 4.586 1.75 3.572 0.707z\"\r\n          transform=\"matrix(-1 0 0 1 9.543 0)\"\r\n        ></path>\r\n      </g>\r\n    </g>\r\n  </symbol>\r\n  <symbol id=\"ic-file-upload\" viewBox=\"-53 1 511 511.99906\">\r\n    <path\r\n      d=\"M 276.410156 3.957031 C 274.0625 1.484375 270.84375 0 267.507812 0 L 67.777344 0 C 30.921875 0 0.5 30.300781 0.5 67.152344 L 0.5 444.84375 C 0.5 481.699219 30.921875 512 67.777344 512 L 338.863281 512 C 375.71875 512 406.140625 481.699219 406.140625 444.84375 L 406.140625 144.941406 C 406.140625 141.726562 404.65625 138.636719 402.554688 136.285156 Z M 279.996094 43.65625 L 364.464844 132.328125 L 309.554688 132.328125 C 293.230469 132.328125 279.996094 119.21875 279.996094 102.894531 Z M 338.863281 487.265625 L 67.777344 487.265625 C 44.652344 487.265625 25.234375 468.097656 25.234375 444.84375 L 25.234375 67.152344 C 25.234375 44.027344 44.527344 24.734375 67.777344 24.734375 L 255.261719 24.734375 L 255.261719 102.894531 C 255.261719 132.945312 279.503906 157.0625 309.554688 157.0625 L 381.40625 157.0625 L 381.40625 444.84375 C 381.40625 468.097656 362.113281 487.265625 338.863281 487.265625 Z M 338.863281 487.265625 \"\r\n    />\r\n    <path\r\n      d=\"M 305.101562 401.933594 L 101.539062 401.933594 C 94.738281 401.933594 89.171875 407.496094 89.171875 414.300781 C 89.171875 421.101562 94.738281 426.667969 101.539062 426.667969 L 305.226562 426.667969 C 312.027344 426.667969 317.59375 421.101562 317.59375 414.300781 C 317.59375 407.496094 312.027344 401.933594 305.101562 401.933594 Z M 305.101562 401.933594 \"\r\n    />\r\n    <path\r\n      d=\"M 140 268.863281 L 190.953125 214.074219 L 190.953125 349.125 C 190.953125 355.925781 196.519531 361.492188 203.320312 361.492188 C 210.125 361.492188 215.6875 355.925781 215.6875 349.125 L 215.6875 214.074219 L 266.640625 268.863281 C 269.113281 271.457031 272.332031 272.820312 275.667969 272.820312 C 278.636719 272.820312 281.730469 271.707031 284.078125 269.480469 C 289.027344 264.78125 289.398438 256.988281 284.699219 252.042969 L 212.226562 174.253906 C 209.875 171.78125 206.660156 170.296875 203.199219 170.296875 C 199.734375 170.296875 196.519531 171.78125 194.171875 174.253906 L 121.699219 252.042969 C 117 256.988281 117.371094 264.902344 122.316406 269.480469 C 127.511719 274.179688 135.300781 273.808594 140 268.863281 Z M 140 268.863281 \"\r\n    />\r\n  </symbol>\r\n  <symbol id=\"ic-file-download\" viewBox=\"-53 1 511 511.99906\">\r\n    <path\r\n      d=\"M 276.410156 3.957031 C 274.0625 1.484375 270.84375 0 267.507812 0 L 67.777344 0 C 30.921875 0 0.5 30.300781 0.5 67.152344 L 0.5 444.84375 C 0.5 481.699219 30.921875 512 67.777344 512 L 338.863281 512 C 375.71875 512 406.140625 481.699219 406.140625 444.84375 L 406.140625 144.941406 C 406.140625 141.726562 404.65625 138.636719 402.554688 136.285156 Z M 279.996094 43.65625 L 364.464844 132.328125 L 309.554688 132.328125 C 293.230469 132.328125 279.996094 119.21875 279.996094 102.894531 Z M 338.863281 487.265625 L 67.777344 487.265625 C 44.652344 487.265625 25.234375 468.097656 25.234375 444.84375 L 25.234375 67.152344 C 25.234375 44.027344 44.527344 24.734375 67.777344 24.734375 L 255.261719 24.734375 L 255.261719 102.894531 C 255.261719 132.945312 279.503906 157.0625 309.554688 157.0625 L 381.40625 157.0625 L 381.40625 444.84375 C 381.40625 468.097656 362.113281 487.265625 338.863281 487.265625 Z M 338.863281 487.265625 \"\r\n    />\r\n    <path\r\n      d=\"M 305.101562 401.933594 L 101.539062 401.933594 C 94.738281 401.933594 89.171875 407.496094 89.171875 414.300781 C 89.171875 421.101562 94.738281 426.667969 101.539062 426.667969 L 305.226562 426.667969 C 312.027344 426.667969 317.59375 421.101562 317.59375 414.300781 C 317.59375 407.496094 312.027344 401.933594 305.101562 401.933594 Z M 305.101562 401.933594 \"\r\n    />\r\n    <path\r\n      d=\"M 194.292969 357.535156 C 196.644531 360.007812 199.859375 361.492188 203.320312 361.492188 C 206.785156 361.492188 210 360.007812 212.347656 357.535156 L 284.820312 279.746094 C 289.519531 274.796875 289.148438 266.882812 284.203125 262.308594 C 279.253906 257.609375 271.339844 257.976562 266.765625 262.925781 L 215.6875 317.710938 L 215.6875 182.664062 C 215.6875 175.859375 210.121094 170.296875 203.320312 170.296875 C 196.519531 170.296875 190.953125 175.859375 190.953125 182.664062 L 190.953125 317.710938 L 140 262.925781 C 135.300781 257.980469 127.507812 257.609375 122.5625 262.308594 C 117.617188 267.007812 117.246094 274.800781 121.945312 279.746094 Z M 194.292969 357.535156 \"\r\n    />\r\n  </symbol>\r\n</defs>\r\n</svg>\r\n" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SvgDefinitionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tui-image-editor-svg-definitions', template: "\r\n<svg\r\nxmlns=\"http://www.w3.org/2000/svg\"\r\nxmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\ndisplay=\"none\"\r\n>\r\n<defs id=\"tui-image-editor-svg-default-icons\">\r\n  <symbol id=\"ic-apply\" viewBox=\"0 0 24 24\">\r\n    <path d=\"M0 0h24v24H0z\" stroke=\"none\" fill=\"none\"></path>\r\n    <path fill=\"none\" stroke=\"inherit\" d=\"M4 12.011l5 5L20.011 6\"></path>\r\n  </symbol>\r\n  <symbol id=\"ic-cancel\" viewBox=\"0 0 24 24\">\r\n    <path d=\"M0 0h24v24H0z\" fill=\"none\" stroke=\"none\"></path>\r\n    <path fill=\"none\" stroke=\"inherit\" d=\"M6 6l12 12M18 6L6 18\"></path>\r\n  </symbol>\r\n  <symbol id=\"ic-crop\" viewBox=\"0 0 24 24\">\r\n    <path d=\"M0 0h24v24H0z\" stroke=\"none\" fill=\"none\"></path>\r\n    <path\r\n      stroke=\"none\"\r\n      fill=\"inherit\"\r\n      d=\"M4 0h1v20a1 1 0 0 1-1-1V0zM20 17h-1V5h1v12zm0 2v5h-1v-5h1z\"\r\n    ></path>\r\n    <path\r\n      stroke=\"none\"\r\n      fill=\"inherit\"\r\n      d=\"M5 19h19v1H5zM4.762 4v1H0V4h4.762zM7 4h12a1 1 0 0 1 1 1H7V4z\"\r\n    ></path>\r\n  </symbol>\r\n  <symbol id=\"ic-delete-all\" viewBox=\"0 0 24 24\">\r\n    <path\r\n      stroke=\"none\"\r\n      fill=\"inherit\"\r\n      d=\"M5 23H3a1 1 0 0 1-1-1V6h1v16h2v1zm16-10h-1V6h1v7zM9 13H8v-3h1v3zm3 0h-1v-3h1v3zm3 0h-1v-3h1v3zM14.794 3.794L13 2h-3L8.206 3.794A.963.963 0 0 1 8 2.5l.703-1.055A1 1 0 0 1 9.535 1h3.93a1 1 0 0 1 .832.445L15 2.5a.965.965 0 0 1-.206 1.294zM14.197 4H8.803h5.394z\"\r\n    ></path>\r\n    <path\r\n      stroke=\"none\"\r\n      fill=\"inherit\"\r\n      d=\"M0 3h23v1H0zM11.286 21H8.714L8 23H7l1-2.8V20h.071L9.5 16h1l1.429 4H12v.2l1 2.8h-1l-.714-2zm-.357-1L10 17.4 9.071 20h1.858zM20 22h3v1h-4v-7h1v6zm-5 0h3v1h-4v-7h1v6z\"\r\n    ></path>\r\n  </symbol>\r\n  <symbol id=\"ic-delete\" viewBox=\"0 0 24 24\">\r\n    <path\r\n      stroke=\"none\"\r\n      fill=\"inherit\"\r\n      d=\"M3 6v16h17V6h1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6h1zM14.794 3.794L13 2h-3L8.206 3.794A.963.963 0 0 1 8 2.5l.703-1.055A1 1 0 0 1 9.535 1h3.93a1 1 0 0 1 .832.445L15 2.5a.965.965 0 0 1-.206 1.294zM14.197 4H8.803h5.394z\"\r\n    ></path>\r\n    <path\r\n      stroke=\"none\"\r\n      fill=\"inherit\"\r\n      d=\"M0 3h23v1H0zM8 10h1v6H8v-6zm3 0h1v6h-1v-6zm3 0h1v6h-1v-6z\"\r\n    ></path>\r\n  </symbol>\r\n  <symbol id=\"ic-draw-free\" viewBox=\"0 0 32 32\">\r\n    <path\r\n      fill=\"none\"\r\n      stroke=\"inherit\"\r\n      d=\"M2.5 20.929C2.594 10.976 4.323 6 7.686 6c5.872 0 2.524 19 7.697 19s1.89-14.929 6.414-14.929 1.357 10.858 5.13 10.858c1.802 0 2.657-2.262 2.566-6.786\"\r\n    ></path>\r\n  </symbol>\r\n  <symbol id=\"ic-draw-line\" viewBox=\"0 0 32 32\">\r\n    <path fill=\"none\" stroke=\"inherit\" d=\"M2 15.5h28\"></path>\r\n  </symbol>\r\n  <symbol id=\"ic-draw\" viewBox=\"0 0 24 24\">\r\n    <path\r\n      fill=\"none\"\r\n      stroke=\"inherit\"\r\n      d=\"M2.5 21.5H5c.245 0 .48-.058.691-.168l.124-.065.14.01c.429.028.85-.127 1.16-.437L22.55 5.405a.5.5 0 0 0 0-.707l-3.246-3.245a.5.5 0 0 0-.707 0L3.162 16.888a1.495 1.495 0 0 0-.437 1.155l.01.14-.065.123c-.111.212-.17.448-.17.694v2.5z\"\r\n    ></path>\r\n    <path\r\n      stroke=\"none\"\r\n      fill=\"inherit\"\r\n      d=\"M16.414 3.707l3.89 3.89-.708.706-3.889-3.889z\"\r\n    ></path>\r\n  </symbol>\r\n  <symbol id=\"ic-filter\" viewBox=\"0 0 24 24\">\r\n    <path d=\"M0 0h24v24H0z\" fill=\"none\" stroke=\"none\"></path>\r\n    <path\r\n      stroke=\"none\"\r\n      fill=\"inherit\"\r\n      d=\"M12 7v1H2V7h10zm6 0h4v1h-4V7zM12 16v1h10v-1H12zm-6 0H2v1h4v-1z\"\r\n    ></path>\r\n    <path\r\n      stroke=\"none\"\r\n      fill=\"inherit\"\r\n      d=\"M8.5 20a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7zm0-1a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zM15.5 11a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7zm0-1a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z\"\r\n    ></path>\r\n  </symbol>\r\n  <symbol id=\"ic-flip-reset\" viewBox=\"0 0 31 32\">\r\n    <path fill=\"none\" stroke=\"none\" d=\"M31 0H0v32h31z\"></path>\r\n    <path\r\n      stroke=\"none\"\r\n      fill=\"inherit\"\r\n      d=\"M28 16a8 8 0 0 1-8 8H3v-1h1v-7H3a8 8 0 0 1 8-8h17v1h-1v7h1zM11 9a7 7 0 0 0-7 7v7h16a7 7 0 0 0 7-7V9H11z\"\r\n    ></path>\r\n    <path\r\n      fill=\"none\"\r\n      stroke=\"inherit\"\r\n      stroke-linecap=\"square\"\r\n      d=\"M24 5l3.5 3.5L24 12M7 20l-3.5 3.5L7 27\"\r\n    ></path>\r\n  </symbol>\r\n  <symbol id=\"ic-flip-x\" viewBox=\"0 0 32 32\">\r\n    <path fill=\"none\" stroke=\"none\" d=\"M32 32H0V0h32z\"></path>\r\n    <path\r\n      stroke=\"none\"\r\n      fill=\"inherit\"\r\n      d=\"M17 32h-1V0h1zM27.167 11l.5 3h-1.03l-.546-3h1.076zm-.5-3h-1.122L25 5h-5V4h5.153a1 1 0 0 1 .986.836L26.667 8zm1.5 9l.5 3h-.94l-.545-3h.985zm1 6l.639 3.836A1 1 0 0 1 28.819 28H26v-1h3l-.726-4h.894zM23 28h-3v-1h3v1zM13 4v1H7L3 27h10v1H3.18a1 1 0 0 1-.986-1.164l3.666-22A1 1 0 0 1 6.847 4H13z\"\r\n    ></path>\r\n  </symbol>\r\n  <symbol id=\"ic-flip-y\" viewBox=\"0 0 32 32\">\r\n    <path fill=\"none\" stroke=\"none\" d=\"M0 0v32h32V0z\"></path>\r\n    <path\r\n      stroke=\"none\"\r\n      fill=\"inherit\"\r\n      d=\"M0 16v1h32v-1zM11 27.167l3 .5v-1.03l-3-.546v1.076zm-3-.5v-1.122L5 25v-5H4v5.153a1 1 0 0 0 .836.986L8 26.667zm9 1.5l3 .5v-.94l-3-.545v.985zm6 1l3.836.639A1 1 0 0 0 28 28.82V26h-1v3l-4-.727v.894zM28 23v-3h-1v3h1zM4 13h1V7l22-4v10h1V3.18a1 1 0 0 0-1.164-.986l-22 3.667A1 1 0 0 0 4 6.847V13z\"\r\n    ></path>\r\n  </symbol>\r\n  <symbol id=\"ic-flip\" viewBox=\"0 0 24 24\">\r\n    <path d=\"M0 0h24v24H0z\" fill=\"none\" stroke=\"none\"></path>\r\n    <path\r\n      fill=\"inherit\"\r\n      stroke=\"none\"\r\n      d=\"M11 0h1v24h-1zM19 21v-1h2v-2h1v2a1 1 0 0 1-1 1h-2zm-2 0h-3v-1h3v1zm5-5h-1v-3h1v3zm0-5h-1V8h1v3zm0-5h-1V4h-2V3h2a1 1 0 0 1 1 1v2zm-5-3v1h-3V3h3zM9 3v1H2v16h7v1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h7z\"\r\n    ></path>\r\n  </symbol>\r\n  <symbol id=\"ic-history\" viewBox=\"0 0 24 24\">\r\n    <path\r\n      fill=\"none\"\r\n      stroke=\"none\"\r\n      d=\"M0 0H24V24H0z\"\r\n      transform=\"translate(-740 -16) translate(547 8) translate(193 8)\"\r\n    ></path>\r\n    <path\r\n      fill=\"inherit\"\r\n      stroke=\"none\"\r\n      d=\"M12.5 1C18.299 1 23 5.701 23 11.5S18.299 22 12.5 22c-5.29 0-9.665-3.911-10.394-8.999h1.012C3.838 17.534 7.764 21 12.5 21c5.247 0 9.5-4.253 9.5-9.5S17.747 2 12.5 2C8.49 2 5.06 4.485 3.666 8H3h4v1H2V4h1v3.022C4.68 3.462 8.303 1 12.5 1zm.5 5l-.001 5.291 2.537 2.537-.708.708L12.292 12H12V6h1z\"\r\n      transform=\"translate(-740 -16) translate(547 8) translate(193 8)\"\r\n    ></path>\r\n  </symbol>\r\n  <symbol id=\"ic-history-check\" viewBox=\"0 0 12 12\">\r\n    <g fill=\"none\" fill-rule=\"evenodd\">\r\n      <path\r\n        stroke=\"#555555\"\r\n        d=\"M4.5 -1L1.5 2 6.5 7\"\r\n        transform=\"translate(-60 -804) translate(60 804) translate(2 3) rotate(-90 4 3)\"\r\n      ></path>\r\n    </g>\r\n  </symbol>\r\n  <symbol id=\"ic-history-crop\" viewBox=\"0 0 12 12\">\r\n    <g fill=\"none\" stroke=\"none\" fill-rule=\"evenodd\">\r\n      <path\r\n        d=\"M0 0H12V12H0z\"\r\n        transform=\"translate(-84 -804) translate(84 804)\"\r\n      ></path>\r\n      <path\r\n        fill=\"#434343\"\r\n        d=\"M2 0h1v10c-.552 0-1-.448-1-1V0zM10 9v3H9V9h1zM9 2h1v6H9V2z\"\r\n        transform=\"translate(-84 -804) translate(84 804)\"\r\n      ></path>\r\n      <path\r\n        fill=\"#434343\"\r\n        d=\"M2 9H12V10H2zM9 2c.513 0 .936.386.993.883L10 3H3V2h6zM2 3H0V2h2v1z\"\r\n        transform=\"translate(-84 -804) translate(84 804)\"\r\n      ></path>\r\n    </g>\r\n  </symbol>\r\n  <symbol id=\"ic-history-draw\" viewBox=\"0 0 12 12\">\r\n    <g fill=\"none\" stroke=\"none\" fill-rule=\"evenodd\">\r\n      <path\r\n        d=\"M0 1H12V13H0z\"\r\n        transform=\"translate(-156 -804) translate(156 803)\"\r\n      ></path>\r\n      <path\r\n        stroke=\"#434343\"\r\n        d=\"M9.622 1.584l1.835 1.658-8.31 8.407L.5 12.5V11l9.122-9.416z\"\r\n        transform=\"translate(-156 -804) translate(156 803)\"\r\n      ></path>\r\n      <path\r\n        fill=\"#434343\"\r\n        d=\"M7.628 3.753L10.378 3.753 10.378 4.253 7.628 4.253z\"\r\n        transform=\"translate(-156 -804) translate(156 803) rotate(45 9.003 4.003)\"\r\n      ></path>\r\n    </g>\r\n  </symbol>\r\n  <symbol id=\"ic-history-filter\" viewBox=\"0 0 12 12\">\r\n    <g fill=\"none\" stroke=\"none\" fill-rule=\"evenodd\">\r\n      <path\r\n        d=\"M0 0H12V12H0z\"\r\n        transform=\"translate(-276 -804) translate(276 804)\"\r\n      ></path>\r\n      <path\r\n        fill=\"#434343\"\r\n        d=\"M12 3v1H9V3h3zM7 4H0V3h7v1z\"\r\n        transform=\"translate(-276 -804) translate(276 804)\"\r\n      ></path>\r\n      <path\r\n        fill=\"#434343\"\r\n        d=\"M12 8v1H9V8h3zM7 9H0V8h7v1z\"\r\n        transform=\"translate(-276 -804) translate(276 804) matrix(-1 0 0 1 12 0)\"\r\n      ></path>\r\n      <path\r\n        fill=\"#434343\"\r\n        d=\"M8 1c1.105 0 2 .895 2 2s-.895 2-2 2-2-.895-2-2 .895-2 2-2zm0 1c-.552 0-1 .448-1 1s.448 1 1 1 1-.448 1-1-.448-1-1-1zM4 7c1.105 0 2 .895 2 2s-.895 2-2 2-2-.895-2-2 .895-2 2-2zm0 1c-.552 0-1 .448-1 1s.448 1 1 1 1-.448 1-1-.448-1-1-1z\"\r\n        transform=\"translate(-276 -804) translate(276 804)\"\r\n      ></path>\r\n    </g>\r\n  </symbol>\r\n  <symbol id=\"ic-history-flip\" viewBox=\"0 0 12 12\">\r\n    <g fill=\"none\" stroke=\"none\" fill-rule=\"evenodd\">\r\n      <path\r\n        d=\"M0 0H12V12H0z\"\r\n        transform=\"translate(-108 -804) translate(108 804)\"\r\n      ></path>\r\n      <path\r\n        fill=\"#434343\"\r\n        d=\"M6 0L7 0 7 12 6 12zM11 10V9h1v1.5c0 .276-.224.5-.5.5H10v-1h1zM5 1v1H1v8h4v1H.5c-.276 0-.5-.224-.5-.5v-9c0-.276.224-.5.5-.5H5zm7 5v2h-1V6h1zm0-3v2h-1V3h1zM9 1v1H7V1h2zm2.5 0c.276 0 .5.224.5.5V2h-2V1h1.5zM9 11H7v-1h2v1z\"\r\n        transform=\"translate(-108 -804) translate(108 804)\"\r\n      ></path>\r\n    </g>\r\n  </symbol>\r\n  <symbol id=\"ic-history-icon\" viewBox=\"0 0 12 12\">\r\n    <g fill=\"none\" stroke=\"none\" fill-rule=\"evenodd\">\r\n      <path\r\n        d=\"M0 0H12V12H0z\"\r\n        transform=\"translate(-204 -804) translate(204 804)\"\r\n      ></path>\r\n      <path\r\n        stroke=\"#434343\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n        stroke-width=\"1.1\"\r\n        d=\"M6 9.568L2.601 11 2.975 7.467 0.5 4.82 4.13 4.068 6 1 7.87 4.068 11.5 4.82 9.025 7.467 9.399 11z\"\r\n        transform=\"translate(-204 -804) translate(204 804)\"\r\n      ></path>\r\n    </g>\r\n  </symbol>\r\n  <symbol id=\"ic-history-mask\" viewBox=\"0 0 12 12\">\r\n    <g fill=\"none\" stroke=\"none\" fill-rule=\"evenodd\">\r\n      <g transform=\"translate(-252 -804) translate(252 804)\">\r\n        <path d=\"M0 0H12V12H0z\"></path>\r\n        <circle cx=\"6\" cy=\"6\" r=\"2.5\" stroke=\"#444\"></circle>\r\n        <path\r\n          fill=\"#434343\"\r\n          d=\"M11.5 0c.276 0 .5.224.5.5v11c0 .276-.224.5-.5.5H.5c-.276 0-.5-.224-.5-.5V.5C0 .224.224 0 .5 0h11zM11 1H1v10h10V1z\"\r\n        ></path>\r\n      </g>\r\n    </g>\r\n  </symbol>\r\n  <symbol id=\"ic-history-rotate\" viewBox=\"0 0 12 12\">\r\n    <defs>\r\n      <path\r\n        id=\"rfn4rylffa\"\r\n        d=\"M7 12c-.335 0-.663-.025-.983-.074C3.171 11.492 1 9.205 1 6.444c0-1.363.534-2.613 1.415-3.58\"\r\n      ></path>\r\n      <mask\r\n        id=\"6f9gn2dysb\"\r\n        width=\"6\"\r\n        height=\"9.136\"\r\n        x=\"0\"\r\n        y=\"0\"\r\n        maskUnits=\"objectBoundingBox\"\r\n      >\r\n        <use xlink:href=\"#rfn4rylffa\" stroke=\"434343\"></use>\r\n      </mask>\r\n    </defs>\r\n    <g fill=\"none\" stroke=\"none\" fill-rule=\"evenodd\">\r\n      <g transform=\"translate(-132 -804) translate(132 804)\">\r\n        <path d=\"M0 0.5H12V12.5H0z\"></path>\r\n        <path\r\n          fill=\"#434343\"\r\n          d=\"M6.5 1C9.538 1 12 3.462 12 6.5c0 2.37-1.5 4.39-3.6 5.163l-.407-.916C9.744 10.13 11 8.462 11 6.5 11 4.015 8.985 2 6.5 2c-.777 0-1.509.197-2.147.544L4 1.75l-.205-.04C4.594 1.258 5.517 1 6.5 1z\"\r\n        ></path>\r\n        <use\r\n          stroke=\"#434343\"\r\n          stroke-dasharray=\"2 1.25\"\r\n          stroke-width=\"1\"\r\n          mask=\"url(#6f9gn2dysb)\"\r\n          xlink:href=\"#rfn4rylffa\"\r\n        ></use>\r\n        <path\r\n          fill=\"#434343\"\r\n          d=\"M4.279 0L6 1.75 4.25 3.571 3.543 2.864 4.586 1.75 3.572 0.707z\"\r\n          transform=\"matrix(-1 0 0 1 9.543 0)\"\r\n        ></path>\r\n      </g>\r\n    </g>\r\n  </symbol>\r\n  <symbol id=\"ic-history-shape\" viewBox=\"0 0 12 12\">\r\n    <g fill=\"none\" stroke=\"none\" fill-rule=\"evenodd\">\r\n      <path\r\n        d=\"M0 0H12V12H0z\"\r\n        transform=\"translate(-180 -804) translate(180 804)\"\r\n      ></path>\r\n      <path\r\n        fill=\"#434343\"\r\n        d=\"M11.5 4c.276 0 .5.224.5.5v7c0 .276-.224.5-.5.5h-7c-.276 0-.5-.224-.5-.5V8.8h1V11h6V5H8.341l-.568-1H11.5z\"\r\n        transform=\"translate(-180 -804) translate(180 804)\"\r\n      ></path>\r\n      <path\r\n        stroke=\"#434343\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n        d=\"M4.5 0.5L8.5 7.611 0.5 7.611z\"\r\n        transform=\"translate(-180 -804) translate(180 804)\"\r\n      ></path>\r\n    </g>\r\n  </symbol>\r\n  <symbol id=\"ic-history-text\" viewBox=\"0 0 12 12\">\r\n    <g fill=\"none\" stroke=\"none\" fill-rule=\"evenodd\">\r\n      <path\r\n        d=\"M0 0H12V12H0z\"\r\n        transform=\"translate(-228 -804) translate(228 804)\"\r\n      ></path>\r\n      <path\r\n        fill=\"#434343\"\r\n        d=\"M2 1h8c.552 0 1 .448 1 1H1c0-.552.448-1 1-1z\"\r\n        transform=\"translate(-228 -804) translate(228 804)\"\r\n      ></path>\r\n      <path\r\n        fill=\"#434343\"\r\n        d=\"M1 1H2V3H1zM10 1H11V3H10zM5.5 1L6.5 1 6.5 11 5.5 11z\"\r\n        transform=\"translate(-228 -804) translate(228 804)\"\r\n      ></path>\r\n      <path\r\n        fill=\"#434343\"\r\n        d=\"M4 10H8V11H4z\"\r\n        transform=\"translate(-228 -804) translate(228 804)\"\r\n      ></path>\r\n    </g>\r\n  </symbol>\r\n  <symbol id=\"ic-history-load\" viewBox=\"0 0 12 12\">\r\n    <g fill=\"none\" stroke=\"none\" fill-rule=\"evenodd\">\r\n      <path\r\n        d=\"M0 0H12V12H0z\"\r\n        transform=\"translate(-324 -805) translate(324 805)\"\r\n      ></path>\r\n      <path\r\n        fill=\"#434343\"\r\n        d=\"M5 0c.552 0 1 .448 1 1v1h5.5c.276 0 .5.224.5.5v8c0 .276-.224.5-.5.5H.5c-.276 0-.5-.224-.5-.5V1c0-.552.448-1 1-1h4zm0 1H1v9h10V3H5V1z\"\r\n        transform=\"translate(-324 -805) translate(324 805)\"\r\n      ></path>\r\n      <path\r\n        fill=\"#434343\"\r\n        d=\"M1 2L5 2 5 3 1 3z\"\r\n        transform=\"translate(-324 -805) translate(324 805)\"\r\n      ></path>\r\n    </g>\r\n  </symbol>\r\n  <symbol id=\"ic-history-delete\" viewBox=\"0 0 12 12\">\r\n    <g fill=\"none\" stroke=\"none\" fill-rule=\"evenodd\">\r\n      <g fill=\"#434343\">\r\n        <path\r\n          d=\"M2 9h8V1h1v8.5c0 .276-.224.5-.5.5h-9c-.276 0-.5-.224-.5-.5V1h1v8zM0 0H12V1H0z\"\r\n          transform=\"translate(-300 -804) translate(300 804) translate(0 2)\"\r\n        ></path>\r\n        <path\r\n          d=\"M4 3H5V7H4zM7 3H8V7H7z\"\r\n          transform=\"translate(-300 -804) translate(300 804) translate(0 2)\"\r\n        ></path>\r\n        <path\r\n          d=\"M4 1h4V0h1v1.5c0 .276-.224.5-.5.5h-5c-.276 0-.5-.224-.5-.5V0h1v1z\"\r\n          transform=\"translate(-300 -804) translate(300 804) matrix(1 0 0 -1 0 2)\"\r\n        ></path>\r\n      </g>\r\n    </g>\r\n  </symbol>\r\n  <symbol id=\"ic-history-group\" viewBox=\"0 0 24 24\">\r\n    <g fill=\"none\" stroke=\"none\" fill-rule=\"evenodd\">\r\n      <g transform=\"translate(-348 -804) translate(348 804)\">\r\n        <path d=\"M0 0H12V12H0z\"></path>\r\n        <path\r\n          fill=\"#434343\"\r\n          d=\"M1 9v2h1v1H.5c-.276 0-.5-.224-.5-.5V9h1zm11 1v1.5c0 .276-.224.5-.5.5H9v-1h2v-1h1zm-4 1v1H6v-1h2zm-3 0v1H3v-1h2zm7-4v2h-1V7h1zM1 6v2H0V6h1zm11-2v2h-1V4h1zM1 3v2H0V3h1zm10.5-3c.276 0 .5.224.5.5V3h-1V1h-1V0h1.5zM6 0v1H4V0h2zm3 0v1H7V0h2zM0 .5C0 .224.224 0 .5 0H3v1H1v1H0V.5zM9.5 4c.276 0 .5.224.5.5v5c0 .276-.224.5-.5.5h-5c-.276 0-.5-.224-.5-.5V8.355c.317.094.652.145 1 .145V9h4V5h-.5c0-.348-.05-.683-.145-1H9.5z\"\r\n        ></path>\r\n        <circle cx=\"5\" cy=\"5\" r=\"2.5\" stroke=\"#434343\"></circle>\r\n      </g>\r\n    </g>\r\n  </symbol>\r\n  <symbol id=\"ic-icon-arrow-2\" viewBox=\"0 0 32 32\">\r\n    <path\r\n      fill=\"none\"\r\n      stroke=\"inherit\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n      d=\"M21.793 18.5H2.5v-5h18.935l-7.6-8h5.872l10.5 10.5-10.5 10.5h-5.914l8-8z\"\r\n    ></path>\r\n  </symbol>\r\n  <symbol id=\"ic-icon-arrow-3\" viewBox=\"0 0 32 32\">\r\n    <path\r\n      fill=\"none\"\r\n      stroke=\"inherit\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n      d=\"M25.288 16.42L14.208 27.5H6.792l11.291-11.291L6.826 4.5h7.381l11.661 11.661-.58.258z\"\r\n    ></path>\r\n  </symbol>\r\n  <symbol id=\"ic-icon-arrow\" viewBox=\"0 0 32 32\">\r\n    <path\r\n      fill=\"none\"\r\n      stroke=\"inherit\"\r\n      d=\"M2.5 11.5v9h18v5.293L30.293 16 20.5 6.207V11.5h-18z\"\r\n    ></path>\r\n  </symbol>\r\n  <symbol id=\"ic-icon-bubble\" viewBox=\"0 0 32 32\">\r\n    <path\r\n      fill=\"none\"\r\n      stroke=\"inherit\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n      d=\"M22.207 24.5L16.5 30.207V24.5H8A6.5 6.5 0 0 1 1.5 18V9A6.5 6.5 0 0 1 8 2.5h16A6.5 6.5 0 0 1 30.5 9v9a6.5 6.5 0 0 1-6.5 6.5h-1.793z\"\r\n    ></path>\r\n  </symbol>\r\n  <symbol id=\"ic-icon-heart\" viewBox=\"0 0 32 32\">\r\n    <path\r\n      fill-rule=\"nonzero\"\r\n      fill=\"none\"\r\n      stroke=\"inherit\"\r\n      d=\"M15.996 30.675l1.981-1.79c7.898-7.177 10.365-9.718 12.135-13.012.922-1.716 1.377-3.37 1.377-5.076 0-4.65-3.647-8.297-8.297-8.297-2.33 0-4.86 1.527-6.817 3.824l-.38.447-.381-.447C13.658 4.027 11.126 2.5 8.797 2.5 4.147 2.5.5 6.147.5 10.797c0 1.714.46 3.375 1.389 5.098 1.775 3.288 4.26 5.843 12.123 12.974l1.984 1.806z\"\r\n    ></path>\r\n  </symbol>\r\n  <symbol id=\"ic-icon-load\" viewBox=\"0 0 32 32\">\r\n    <path\r\n      fill=\"none\"\r\n      stroke=\"inherit\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n      d=\"M17.314 18.867l1.951-2.53 4 5.184h-17l6.5-8.84 4.549 6.186z\"\r\n    ></path>\r\n    <path\r\n      stroke=\"none\"\r\n      fill=\"inherit\"\r\n      d=\"M18.01 4a11.798 11.798 0 0 0 0 1H3v24h24V14.986a8.738 8.738 0 0 0 1 0V29a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h15.01z\"\r\n    ></path>\r\n    <path stroke=\"none\" fill=\"inherit\" d=\"M25 3h1v9h-1z\"></path>\r\n    <path fill=\"none\" stroke=\"inherit\" d=\"M22 6l3.5-3.5L29 6\"></path>\r\n  </symbol>\r\n  <symbol id=\"ic-icon-location\" viewBox=\"0 0 32 32\">\r\n    <path\r\n      fill=\"none\"\r\n      stroke=\"inherit\"\r\n      d=\"M16 31.28C23.675 23.302 27.5 17.181 27.5 13c0-6.351-5.149-11.5-11.5-11.5S4.5 6.649 4.5 13c0 4.181 3.825 10.302 11.5 18.28z\"\r\n    ></path>\r\n    <circle fill=\"none\" stroke=\"inherit\" cx=\"16\" cy=\"13\" r=\"4.5\"></circle>\r\n  </symbol>\r\n  <symbol id=\"ic-icon-polygon\" viewBox=\"0 0 32 32\">\r\n    <path\r\n      fill=\"none\"\r\n      stroke=\"inherit\"\r\n      d=\"M.576 16L8.29 29.5h15.42L31.424 16 23.71 2.5H8.29L.576 16z\"\r\n    ></path>\r\n  </symbol>\r\n  <symbol id=\"ic-icon-star-2\" viewBox=\"0 0 32 32\">\r\n    <path\r\n      fill=\"none\"\r\n      stroke=\"inherit\"\r\n      d=\"M19.446 31.592l2.265-3.272 3.946.25.636-3.94 3.665-1.505-1.12-3.832 2.655-2.962-2.656-2.962 1.12-3.832-3.664-1.505-.636-3.941-3.946.25-2.265-3.271L16 3.024 12.554 1.07 10.289 4.34l-3.946-.25-.636 3.941-3.665 1.505 1.12 3.832L.508 16.33l2.656 2.962-1.12 3.832 3.664 1.504.636 3.942 3.946-.25 2.265 3.27L16 29.638l3.446 1.955z\"\r\n    ></path>\r\n  </symbol>\r\n  <symbol id=\"ic-icon-star\" viewBox=\"0 0 32 32\">\r\n    <path\r\n      fill=\"none\"\r\n      stroke=\"inherit\"\r\n      d=\"M25.292 29.878l-1.775-10.346 7.517-7.327-10.388-1.51L16 1.282l-4.646 9.413-10.388 1.51 7.517 7.327-1.775 10.346L16 24.993l9.292 4.885z\"\r\n    ></path>\r\n  </symbol>\r\n  <symbol id=\"ic-icon\" viewBox=\"0 0 24 24\">\r\n    <path\r\n      fill=\"none\"\r\n      stroke=\"inherit\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n      d=\"M11.923 19.136L5.424 22l.715-7.065-4.731-5.296 6.94-1.503L11.923 2l3.574 6.136 6.94 1.503-4.731 5.296L18.42 22z\"\r\n    ></path>\r\n  </symbol>\r\n  <symbol id=\"ic-mask-load\" viewBox=\"0 0 32 32\">\r\n    <path stroke=\"none\" fill=\"none\" d=\"M0 0h32v32H0z\"></path>\r\n    <path\r\n      stroke=\"none\"\r\n      fill=\"inherit\"\r\n      d=\"M18.01 4a11.798 11.798 0 0 0 0 1H3v24h24V14.986a8.738 8.738 0 0 0 1 0V29a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h15.01zM15 23a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-1a5 5 0 1 0 0-10 5 5 0 0 0 0 10z\"\r\n    ></path>\r\n    <path stroke=\"none\" fill=\"inherit\" d=\"M25 3h1v9h-1z\"></path>\r\n    <path fill=\"none\" stroke=\"inherit\" d=\"M22 6l3.5-3.5L29 6\"></path>\r\n  </symbol>\r\n  <symbol id=\"ic-mask\" viewBox=\"0 0 24 24\">\r\n    <circle cx=\"12\" cy=\"12\" r=\"4.5\" stroke=\"inherit\" fill=\"none\"></circle>\r\n    <path\r\n      stroke=\"none\"\r\n      fill=\"inherit\"\r\n      d=\"M2 1h20a1 1 0 0 1 1 1v20a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zm0 1v20h20V2H2z\"\r\n    ></path>\r\n  </symbol>\r\n  <symbol id=\"ic-redo\" viewBox=\"0 0 24 24\">\r\n    <path d=\"M0 0h24v24H0z\" opacity=\".5\" fill=\"none\" stroke=\"none\"></path>\r\n    <path\r\n      stroke=\"none\"\r\n      fill=\"inherit\"\r\n      d=\"M21 6H9a6 6 0 1 0 0 12h12v1H9A7 7 0 0 1 9 5h12v1z\"\r\n    ></path>\r\n    <path\r\n      fill=\"none\"\r\n      stroke=\"inherit\"\r\n      stroke-linecap=\"square\"\r\n      d=\"M19 3l2.5 2.5L19 8\"\r\n    ></path>\r\n  </symbol>\r\n  <symbol id=\"ic-reset\" viewBox=\"0 0 24 24\">\r\n    <path d=\"M0 0h24v24H0z\" opacity=\".5\" stroke=\"none\" fill=\"none\"></path>\r\n    <path\r\n      stroke=\"none\"\r\n      fill=\"inherit\"\r\n      d=\"M2 13v-1a7 7 0 0 1 7-7h13v1h-1v5h1v1a7 7 0 0 1-7 7H2v-1h1v-5H2zm7-7a6 6 0 0 0-6 6v6h12a6 6 0 0 0 6-6V6H9z\"\r\n    ></path>\r\n    <path\r\n      fill=\"none\"\r\n      stroke=\"inherit\"\r\n      stroke-linecap=\"square\"\r\n      d=\"M19 3l2.5 2.5L19 8M5 16l-2.5 2.5L5 21\"\r\n    ></path>\r\n  </symbol>\r\n  <symbol id=\"ic-rotate-clockwise\" viewBox=\"0 0 32 32\">\r\n    <path\r\n      stroke=\"none\"\r\n      fill=\"inherit\"\r\n      d=\"M29 17h-.924c0 6.627-5.373 12-12 12-6.628 0-12-5.373-12-12C4.076 10.398 9.407 5.041 16 5V4C8.82 4 3 9.82 3 17s5.82 13 13 13 13-5.82 13-13z\"\r\n    ></path>\r\n    <path\r\n      fill=\"none\"\r\n      stroke=\"inherit\"\r\n      stroke-linecap=\"square\"\r\n      d=\"M16 1.5l4 3-4 3\"\r\n    ></path>\r\n    <path\r\n      stroke=\"none\"\r\n      fill=\"inherit\"\r\n      fill-rule=\"nonzero\"\r\n      d=\"M16 4h4v1h-4z\"\r\n    ></path>\r\n  </symbol>\r\n  <symbol id=\"ic-rotate-counterclockwise\" viewBox=\"0 0 32 32\">\r\n    <path\r\n      stroke=\"none\"\r\n      d=\"M3 17h.924c0 6.627 5.373 12 12 12 6.628 0 12-5.373 12-12 0-6.602-5.331-11.96-11.924-12V4c7.18 0 13 5.82 13 13s-5.82 13-13 13S3 24.18 3 17z\"\r\n    ></path>\r\n    <path\r\n      stroke=\"none\"\r\n      fill=\"inherit\"\r\n      fill-rule=\"nonzero\"\r\n      d=\"M12 4h4v1h-4z\"\r\n    ></path>\r\n    <path\r\n      fill=\"none\"\r\n      stroke=\"inherit\"\r\n      stroke-linecap=\"square\"\r\n      d=\"M16 1.5l-4 3 4 3\"\r\n    ></path>\r\n  </symbol>\r\n  <symbol id=\"ic-rotate\" viewBox=\"0 0 24 24\">\r\n    <path d=\"M0 0h24v24H0z\" fill=\"none\" stroke=\"none\"></path>\r\n    <path\r\n      fill=\"inherit\"\r\n      stroke=\"none\"\r\n      d=\"M8.349 22.254a10.002 10.002 0 0 1-2.778-1.719l.65-.76a9.002 9.002 0 0 0 2.495 1.548l-.367.931zm2.873.704l.078-.997a9 9 0 1 0-.557-17.852l-.14-.99A10.076 10.076 0 0 1 12.145 3c5.523 0 10 4.477 10 10s-4.477 10-10 10c-.312 0-.62-.014-.924-.042zm-7.556-4.655a9.942 9.942 0 0 1-1.253-2.996l.973-.234a8.948 8.948 0 0 0 1.124 2.693l-.844.537zm-1.502-5.91A9.949 9.949 0 0 1 2.88 9.23l.925.382a8.954 8.954 0 0 0-.644 2.844l-.998-.062zm2.21-5.686c.687-.848 1.51-1.58 2.436-2.166l.523.852a9.048 9.048 0 0 0-2.188 1.95l-.771-.636z\"\r\n    ></path>\r\n    <path\r\n      stroke=\"inherit\"\r\n      fill=\"none\"\r\n      stroke-linecap=\"square\"\r\n      d=\"M13 1l-2.5 2.5L13 6\"\r\n    ></path>\r\n  </symbol>\r\n  <symbol id=\"ic-shape-circle\" viewBox=\"0 0 32 32\">\r\n    <circle cx=\"16\" cy=\"16\" r=\"14.5\" fill=\"none\" stroke=\"inherit\"></circle>\r\n  </symbol>\r\n  <symbol id=\"ic-shape-rectangle\" viewBox=\"0 0 32 32\">\r\n    <rect\r\n      width=\"27\"\r\n      height=\"27\"\r\n      x=\"2.5\"\r\n      y=\"2.5\"\r\n      fill=\"none\"\r\n      stroke=\"inherit\"\r\n      rx=\"1\"\r\n    ></rect>\r\n  </symbol>\r\n  <symbol id=\"ic-shape-triangle\" viewBox=\"0 0 32 32\">\r\n    <path\r\n      fill=\"none\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n      d=\"M16 2.5l15.5 27H.5z\"\r\n    ></path>\r\n  </symbol>\r\n  <symbol id=\"ic-shape\" viewBox=\"0 0 24 24\">\r\n    <path\r\n      stroke=\"none\"\r\n      fill=\"inherit\"\r\n      d=\"M14.706 8H21a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1v-4h1v4h12V9h-5.706l-.588-1z\"\r\n    ></path>\r\n    <path\r\n      fill=\"none\"\r\n      stroke=\"inherit\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n      d=\"M8.5 1.5l7.5 13H1z\"\r\n    ></path>\r\n  </symbol>\r\n  <symbol id=\"ic-text-align-center\" viewBox=\"0 0 32 32\">\r\n    <path stroke=\"none\" fill=\"none\" d=\"M0 0h32v32H0z\"></path>\r\n    <path\r\n      stroke=\"none\"\r\n      fill=\"inherit\"\r\n      d=\"M2 5h28v1H2zM8 12h16v1H8zM2 19h28v1H2zM8 26h16v1H8z\"\r\n    ></path>\r\n  </symbol>\r\n  <symbol id=\"ic-text-align-left\" viewBox=\"0 0 32 32\">\r\n    <path stroke=\"none\" fill=\"none\" d=\"M0 0h32v32H0z\"></path>\r\n    <path\r\n      stroke=\"none\"\r\n      fill=\"inherit\"\r\n      d=\"M2 5h28v1H2zM2 12h16v1H2zM2 19h28v1H2zM2 26h16v1H2z\"\r\n    ></path>\r\n  </symbol>\r\n  <symbol id=\"ic-text-align-right\" viewBox=\"0 0 32 32\">\r\n    <path stroke=\"none\" fill=\"none\" d=\"M0 0h32v32H0z\"></path>\r\n    <path\r\n      stroke=\"none\"\r\n      fill=\"inherit\"\r\n      d=\"M2 5h28v1H2zM14 12h16v1H14zM2 19h28v1H2zM14 26h16v1H14z\"\r\n    ></path>\r\n  </symbol>\r\n  <symbol id=\"ic-text-bold\" viewBox=\"0 0 32 32\">\r\n    <path fill=\"none\" stroke=\"none\" d=\"M0 0h32v32H0z\"></path>\r\n    <path stroke=\"none\" fill=\"inherit\" d=\"M7 2h2v2H7zM7 28h2v2H7z\"></path>\r\n    <path\r\n      fill=\"none\"\r\n      stroke=\"inherit\"\r\n      stroke-width=\"2\"\r\n      d=\"M9 3v12h9a6 6 0 1 0 0-12H9zM9 15v14h10a7 7 0 0 0 0-14H9z\"\r\n    ></path>\r\n  </symbol>\r\n  <symbol id=\"ic-text-italic\" viewBox=\"0 0 32 32\">\r\n    <path fill=\"none\" stroke=\"none\" d=\"M0 0h32v32H0z\"></path>\r\n    <path\r\n      stroke=\"none\"\r\n      fill=\"inherit\"\r\n      d=\"M15 2h5v1h-5zM11 29h5v1h-5zM17 3h1l-4 26h-1z\"\r\n    ></path>\r\n  </symbol>\r\n  <symbol id=\"ic-text-underline\" viewBox=\"0 0 32 32\">\r\n    <path stroke=\"none\" fill=\"none\" d=\"M0 0h32v32H0z\"></path>\r\n    <path\r\n      stroke=\"none\"\r\n      fill=\"inherit\"\r\n      d=\"M8 2v14a8 8 0 1 0 16 0V2h1v14a9 9 0 0 1-18 0V2h1zM3 29h26v1H3z\"\r\n    ></path>\r\n    <path stroke=\"none\" fill=\"inherit\" d=\"M5 2h5v1H5zM22 2h5v1h-5z\"></path>\r\n  </symbol>\r\n  <symbol id=\"ic-text\" viewBox=\"0 0 24 24\">\r\n    <path\r\n      stroke=\"none\"\r\n      fill=\"inherit\"\r\n      d=\"M4 3h15a1 1 0 0 1 1 1H3a1 1 0 0 1 1-1zM3 4h1v1H3zM19 4h1v1h-1z\"\r\n    ></path>\r\n    <path stroke=\"none\" fill=\"inherit\" d=\"M11 3h1v18h-1z\"></path>\r\n    <path stroke=\"none\" fill=\"inherit\" d=\"M10 20h3v1h-3z\"></path>\r\n  </symbol>\r\n  <symbol id=\"ic-undo\" viewBox=\"0 0 24 24\">\r\n    <path d=\"M24 0H0v24h24z\" opacity=\".5\" fill=\"none\" stroke=\"none\"></path>\r\n    <path\r\n      stroke=\"none\"\r\n      fill=\"inherit\"\r\n      d=\"M3 6h12a6 6 0 1 1 0 12H3v1h12a7 7 0 0 0 0-14H3v1z\"\r\n    ></path>\r\n    <path\r\n      fill=\"none\"\r\n      stroke=\"inherit\"\r\n      stroke-linecap=\"square\"\r\n      d=\"M5 3L2.5 5.5 5 8\"\r\n    ></path>\r\n  </symbol>\r\n  <symbol id=\"ic-zoom-in\" viewBox=\"0 0 24 24\">\r\n    <g transform=\"translate(-229 -290) translate(229 290)\">\r\n      <circle cx=\"10.5\" cy=\"10.5\" r=\"9\" stroke=\"inherit\" fill=\"none\"></circle>\r\n      <path\r\n        fill=\"inherit\"\r\n        d=\"M18.828 15.828H19.828V22.828H18.828z\"\r\n        transform=\"rotate(-45 19.328 19.328)\"\r\n      ></path>\r\n      <path fill=\"inherit\" d=\"M7 10H14V11H7z\"></path>\r\n      <path fill=\"inherit\" d=\"M10 7H11V14H10z\"></path>\r\n    </g>\r\n  </symbol>\r\n  <symbol id=\"ic-zoom-out\" viewBox=\"0 0 24 24\">\r\n    <g transform=\"translate(-263 -290) translate(263 290)\">\r\n      <circle cx=\"10.5\" cy=\"10.5\" r=\"9\" stroke=\"inherit\" fill=\"none\"></circle>\r\n      <path\r\n        fill=\"inherit\"\r\n        d=\"M18.828 15.828H19.828V22.828H18.828z\"\r\n        transform=\"rotate(-45 19.328 19.328)\"\r\n      ></path>\r\n      <path fill=\"inherit\" d=\"M7 10H14V11H7z\"></path>\r\n    </g>\r\n  </symbol>\r\n  <symbol id=\"ic-hand\" viewBox=\"0 0 24 24\">\r\n    <g fill=\"none\" fill-rule=\"evenodd\" stroke-linejoin=\"round\">\r\n      <path\r\n        fill=\"inherit\"\r\n        fill-rule=\"nonzero\"\r\n        d=\"M8.672 3.36c1.328 0 2.114.78 2.29 1.869l.014.101.023.006v1.042l-.638-.185c-.187-.055-.323-.211-.354-.399L10 5.713c0-.825-.42-1.353-1.328-1.353C7.695 4.36 7 5.041 7 5.713v7.941c0 .439-.524.665-.843.364l-1.868-1.761c-.595-.528-1.316-.617-1.918-.216-.522.348-.562 1.203-.18 1.8L7.738 22h11.013l.285-.518c1.247-2.326 1.897-4.259 1.96-5.785l.004-.239V8.035c0-.656-.5-1.17-1-1.17-.503 0-1 .456-1 1.17 0 .333-.32.573-.64.48L18 8.41V7.368l.086.026.042-.136c.279-.805.978-1.332 1.738-1.388L20 5.865c1.057 0 2 .967 2 2.17v7.423c0 1.929-.845 4.352-2.521 7.29-.09.156-.255.252-.435.252H7.474c-.166 0-.321-.082-.414-.219l-5.704-8.39c-.653-1.019-.584-2.486.46-3.182 1-.666 2.216-.516 3.148.31L6 12.495V5.713c0-1.18 1.058-2.263 2.49-2.348z\"\r\n        transform=\"translate(-297 -290) translate(297 290)\"\r\n      ></path>\r\n      <path\r\n        fill=\"inherit\"\r\n        fill-rule=\"nonzero\"\r\n        d=\"M12.5 1.5c1.325 0 2.41 1.032 2.495 2.336L15 4v7.22h-1V4c0-.828-.672-1.5-1.5-1.5-.78 0-1.42.595-1.493 1.356L11 4v7.22h-1V4c0-1.38 1.12-2.5 2.5-2.5z\"\r\n        transform=\"translate(-297 -290) translate(297 290)\"\r\n      ></path>\r\n      <path\r\n        fill=\"inherit\"\r\n        fill-rule=\"nonzero\"\r\n        d=\"M16.5 3.5c1.325 0 2.41 1.032 2.495 2.336L19 6v6.3h-1V6c0-.828-.672-1.5-1.5-1.5-.78 0-1.42.595-1.493 1.356L15 6v2.44h-1V6c0-1.38 1.12-2.5 2.5-2.5z\"\r\n        transform=\"translate(-297 -290) translate(297 290)\"\r\n      ></path>\r\n    </g>\r\n  </symbol>\r\n  <symbol id=\"ic-history-rotate\" viewBox=\"0 0 24 24\">\r\n    <g fill=\"none\" stroke=\"none\" fill-rule=\"evenodd\">\r\n      <g transform=\"translate(-132 -804) translate(132 804)\">\r\n        <path d=\"M0 0.5H12V12.5H0z\"></path>\r\n        <path\r\n          fill=\"#434343\"\r\n          d=\"M6.5 1C9.538 1 12 3.462 12 6.5c0 2.37-1.5 4.39-3.6 5.163l-.407-.916C9.744 10.13 11 8.462 11 6.5 11 4.015 8.985 2 6.5 2c-.777 0-1.509.197-2.147.544L4 1.75l-.205-.04C4.594 1.258 5.517 1 6.5 1z\"\r\n        ></path>\r\n        <use\r\n          stroke=\"#434343\"\r\n          stroke-dasharray=\"2 1.25\"\r\n          stroke-width=\"1\"\r\n          mask=\"url(#6f9gn2dysb)\"\r\n          xlink:href=\"#rfn4rylffa\"\r\n        ></use>\r\n        <path\r\n          fill=\"#434343\"\r\n          d=\"M4.279 0L6 1.75 4.25 3.571 3.543 2.864 4.586 1.75 3.572 0.707z\"\r\n          transform=\"matrix(-1 0 0 1 9.543 0)\"\r\n        ></path>\r\n      </g>\r\n    </g>\r\n  </symbol>\r\n  <symbol id=\"ic-file-upload\" viewBox=\"-53 1 511 511.99906\">\r\n    <path\r\n      d=\"M 276.410156 3.957031 C 274.0625 1.484375 270.84375 0 267.507812 0 L 67.777344 0 C 30.921875 0 0.5 30.300781 0.5 67.152344 L 0.5 444.84375 C 0.5 481.699219 30.921875 512 67.777344 512 L 338.863281 512 C 375.71875 512 406.140625 481.699219 406.140625 444.84375 L 406.140625 144.941406 C 406.140625 141.726562 404.65625 138.636719 402.554688 136.285156 Z M 279.996094 43.65625 L 364.464844 132.328125 L 309.554688 132.328125 C 293.230469 132.328125 279.996094 119.21875 279.996094 102.894531 Z M 338.863281 487.265625 L 67.777344 487.265625 C 44.652344 487.265625 25.234375 468.097656 25.234375 444.84375 L 25.234375 67.152344 C 25.234375 44.027344 44.527344 24.734375 67.777344 24.734375 L 255.261719 24.734375 L 255.261719 102.894531 C 255.261719 132.945312 279.503906 157.0625 309.554688 157.0625 L 381.40625 157.0625 L 381.40625 444.84375 C 381.40625 468.097656 362.113281 487.265625 338.863281 487.265625 Z M 338.863281 487.265625 \"\r\n    />\r\n    <path\r\n      d=\"M 305.101562 401.933594 L 101.539062 401.933594 C 94.738281 401.933594 89.171875 407.496094 89.171875 414.300781 C 89.171875 421.101562 94.738281 426.667969 101.539062 426.667969 L 305.226562 426.667969 C 312.027344 426.667969 317.59375 421.101562 317.59375 414.300781 C 317.59375 407.496094 312.027344 401.933594 305.101562 401.933594 Z M 305.101562 401.933594 \"\r\n    />\r\n    <path\r\n      d=\"M 140 268.863281 L 190.953125 214.074219 L 190.953125 349.125 C 190.953125 355.925781 196.519531 361.492188 203.320312 361.492188 C 210.125 361.492188 215.6875 355.925781 215.6875 349.125 L 215.6875 214.074219 L 266.640625 268.863281 C 269.113281 271.457031 272.332031 272.820312 275.667969 272.820312 C 278.636719 272.820312 281.730469 271.707031 284.078125 269.480469 C 289.027344 264.78125 289.398438 256.988281 284.699219 252.042969 L 212.226562 174.253906 C 209.875 171.78125 206.660156 170.296875 203.199219 170.296875 C 199.734375 170.296875 196.519531 171.78125 194.171875 174.253906 L 121.699219 252.042969 C 117 256.988281 117.371094 264.902344 122.316406 269.480469 C 127.511719 274.179688 135.300781 273.808594 140 268.863281 Z M 140 268.863281 \"\r\n    />\r\n  </symbol>\r\n  <symbol id=\"ic-file-download\" viewBox=\"-53 1 511 511.99906\">\r\n    <path\r\n      d=\"M 276.410156 3.957031 C 274.0625 1.484375 270.84375 0 267.507812 0 L 67.777344 0 C 30.921875 0 0.5 30.300781 0.5 67.152344 L 0.5 444.84375 C 0.5 481.699219 30.921875 512 67.777344 512 L 338.863281 512 C 375.71875 512 406.140625 481.699219 406.140625 444.84375 L 406.140625 144.941406 C 406.140625 141.726562 404.65625 138.636719 402.554688 136.285156 Z M 279.996094 43.65625 L 364.464844 132.328125 L 309.554688 132.328125 C 293.230469 132.328125 279.996094 119.21875 279.996094 102.894531 Z M 338.863281 487.265625 L 67.777344 487.265625 C 44.652344 487.265625 25.234375 468.097656 25.234375 444.84375 L 25.234375 67.152344 C 25.234375 44.027344 44.527344 24.734375 67.777344 24.734375 L 255.261719 24.734375 L 255.261719 102.894531 C 255.261719 132.945312 279.503906 157.0625 309.554688 157.0625 L 381.40625 157.0625 L 381.40625 444.84375 C 381.40625 468.097656 362.113281 487.265625 338.863281 487.265625 Z M 338.863281 487.265625 \"\r\n    />\r\n    <path\r\n      d=\"M 305.101562 401.933594 L 101.539062 401.933594 C 94.738281 401.933594 89.171875 407.496094 89.171875 414.300781 C 89.171875 421.101562 94.738281 426.667969 101.539062 426.667969 L 305.226562 426.667969 C 312.027344 426.667969 317.59375 421.101562 317.59375 414.300781 C 317.59375 407.496094 312.027344 401.933594 305.101562 401.933594 Z M 305.101562 401.933594 \"\r\n    />\r\n    <path\r\n      d=\"M 194.292969 357.535156 C 196.644531 360.007812 199.859375 361.492188 203.320312 361.492188 C 206.785156 361.492188 210 360.007812 212.347656 357.535156 L 284.820312 279.746094 C 289.519531 274.796875 289.148438 266.882812 284.203125 262.308594 C 279.253906 257.609375 271.339844 257.976562 266.765625 262.925781 L 215.6875 317.710938 L 215.6875 182.664062 C 215.6875 175.859375 210.121094 170.296875 203.320312 170.296875 C 196.519531 170.296875 190.953125 175.859375 190.953125 182.664062 L 190.953125 317.710938 L 140 262.925781 C 135.300781 257.980469 127.507812 257.609375 122.5625 262.308594 C 117.617188 267.007812 117.246094 274.800781 121.945312 279.746094 Z M 194.292969 357.535156 \"\r\n    />\r\n  </symbol>\r\n</defs>\r\n</svg>\r\n" }]
+        }], ctorParameters: function () { return []; } });
+
+const translateModule = TranslateModule.forRoot();
+class TuiImageEditorModule {
+    static forRoot() {
+        return {
+            ngModule: TuiImageEditorModule,
+            providers: [],
+        };
+    }
+}
+TuiImageEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TuiImageEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TuiImageEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.0", ngImport: i0, type: TuiImageEditorModule, declarations: [TuiImageEditorComponent,
+        LoadComponent,
+        HistoryComponent,
+        SvgDefinitionsComponent,
+        DownloadComponent,
+        ZoomInComponent,
+        ZoomOutComponent,
+        DragComponent,
+        UndoComponent,
+        RedoComponent,
+        ResetComponent,
+        DeleteComponent,
+        DeleteAllComponent,
+        CropComponent$1,
+        CropComponent,
+        FlipComponent$1,
+        FlipComponent,
+        RotateComponent$1,
+        RotateComponent,
+        DrawComponent$1,
+        DrawComponent,
+        ShapeComponent$1,
+        ShapeComponent,
+        IconComponent$1,
+        IconComponent,
+        TextComponent$1,
+        TextComponent,
+        MaskComponent$1,
+        MaskComponent,
+        FilterComponent$1,
+        FilterComponent], imports: [CommonModule,
+        FormsModule, i1.TranslateModule, ColorPickerModule,
+        NgbPopoverModule], exports: [TuiImageEditorComponent, SvgDefinitionsComponent] });
+TuiImageEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TuiImageEditorModule, providers: [TranslationService], imports: [CommonModule,
+        FormsModule,
+        translateModule,
+        ColorPickerModule,
+        NgbPopoverModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TuiImageEditorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        TuiImageEditorComponent,
+                        LoadComponent,
+                        HistoryComponent,
+                        SvgDefinitionsComponent,
+                        DownloadComponent,
+                        ZoomInComponent,
+                        ZoomOutComponent,
+                        DragComponent,
+                        UndoComponent,
+                        RedoComponent,
+                        ResetComponent,
+                        DeleteComponent,
+                        DeleteAllComponent,
+                        CropComponent$1,
+                        CropComponent,
+                        FlipComponent$1,
+                        FlipComponent,
+                        RotateComponent$1,
+                        RotateComponent,
+                        DrawComponent$1,
+                        DrawComponent,
+                        ShapeComponent$1,
+                        ShapeComponent,
+                        IconComponent$1,
+                        IconComponent,
+                        TextComponent$1,
+                        TextComponent,
+                        MaskComponent$1,
+                        MaskComponent,
+                        FilterComponent$1,
+                        FilterComponent,
+                    ],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        translateModule,
+                        ColorPickerModule,
+                        NgbPopoverModule,
+                    ],
+                    exports: [TuiImageEditorComponent, SvgDefinitionsComponent],
+                    providers: [TranslationService],
+                }]
+        }] });
+
+/*
+ * Public API Surface of tui-image-editor
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SvgDefinitionsComponent, TranslationService, TuiImageEditorComponent, TuiImageEditorModule, translateModule };
+//# sourceMappingURL=tui-image-editor-angular3.mjs.map