@yoobic/yobi 8.1.0-13 → 8.1.0-17

package/dist/collection/components/form/form-dynamic/form-dynamic.js

@@ -43,6 +43,7 @@ export class YooFormDynamicComponent {
     this.workflowButtons = [];
     this.containsRenderComponent = false;
     this.hasTimerStarted = false;
+    this.dirtyFields = [];
     this.onKeyboardWillShow = debounce((event) => {
       var _a;
       if (event && !isAndroid() && !this.isInline()) {
@@ -496,7 +497,7 @@ export class YooFormDynamicComponent {
     lockSwipes(this.ionSlides, false);
     if (!this.slidesState || (this.slidesState[index] && !this.getSlideState(index).locked) || (this.isLivePreview() && this.slides[index])) {
       if (this.ionSlides) {
-        this.ionSlides.slideTo(this.showRecap !== false ? index + 1 : index, animated ? 200 : 0);
+        await this.ionSlides.slideTo(this.showRecap !== false ? index + 1 : index, animated ? 200 : 0);
       }
       else if (this.isWeb) {
         this.activeIndex = index;
@@ -1129,6 +1130,14 @@ export class YooFormDynamicComponent {
     if (field.type === FormFieldType.filterautocomplete) {
       fieldChangedValues.operator = this.filterAutocompleteOperator || getFieldValue(field, this.currentData, 'operator');
     }
+    this.dirtyFields.push(field.name);
+    if (this.isMarkedAsInvalid(field)) {
+      this.markAsInvalid(field, false);
+      this.originalMarkAsInvalid(field, true);
+    }
+    else if (this.hasMarkAsInvalidFields()) {
+      this.markAsModified(field, true);
+    }
     this.fieldChanged.emit(fieldChangedValues);
     this.setDirty(true);
     this.checkValidityAndEmitChanges();
@@ -1170,6 +1179,31 @@ export class YooFormDynamicComponent {
     }
     this.checkValidityAndEmitChanges();
   }
+  onFieldValidationCommented(ev, field) {
+    ev.stopPropagation();
+    setFieldData(field, ev.detail, this.currentData, '.validationComments');
+    this.updateLMT(field);
+    const el = this.getFieldByCode(field.name);
+    if (el) {
+      const container = findParent(el, 'yoo-form-input-container');
+      container.validationComments = ev.detail;
+    }
+    this.checkValidityAndEmitChanges();
+  }
+  onFieldValidationMarkAsInvalid(ev, field) {
+    ev.stopPropagation();
+    this.markAsInvalid(field, ev.detail);
+    if (ev.detail) {
+      this.markAsModified(field, false);
+    }
+    this.updateLMT(field);
+    const el = this.getFieldByCode(field.name);
+    if (el) {
+      const container = findParent(el, 'yoo-form-input-container');
+      container.markAsInvalid = ev.detail;
+    }
+    this.checkValidityAndEmitChanges();
+  }
   onFieldEditTask(ev, field) {
     ev.stopPropagation();
     setFieldData(field, ev.detail, this.currentData, '.tasks');
@@ -1237,6 +1271,7 @@ export class YooFormDynamicComponent {
     }, 500);
   }
   onFieldExtraDataChanged(ev, field) {
+    var _a;
     ev.stopPropagation();
     const data = ev.detail;
     if (!field) {
@@ -1372,13 +1407,15 @@ export class YooFormDynamicComponent {
     }
     if (field.type === FormFieldType.multiphotos || field.type === FormFieldType.photo) {
       const formCaptureEl = this.getFieldByCode(fieldName);
-      formCaptureEl.validators = formCaptureEl.validators.map((v) => {
-        const validator = v;
-        if (validator.name !== 'required' && validator.name !== 'dynamicRequired') {
-          validator.options.extraData = data;
-        }
-        return validator;
-      });
+      if (formCaptureEl) {
+        formCaptureEl.validators = (_a = formCaptureEl.validators) === null || _a === void 0 ? void 0 : _a.map((v) => {
+          const validator = v;
+          if (validator.name !== 'required' && validator.name !== 'dynamicRequired') {
+            validator.options.extraData = data;
+          }
+          return validator;
+        });
+      }
     }
     this.updateState();
   }
@@ -1428,6 +1465,7 @@ export class YooFormDynamicComponent {
   }
   onSave(ev) {
     ev.stopPropagation();
+    this.cleanHiddenReadonlyFieldsByInvalidRules();
     this.save.emit(this.currentData);
   }
   onWorflowReject(ev) {
@@ -1597,6 +1635,7 @@ export class YooFormDynamicComponent {
     let fieldsStateWereUpdated = forceRefresh || false;
     this.updateDataFlatten();
     const slideState = this.slidesState ? cloneDeep(this.slidesState) : Array.from({ length: this.slides ? this.slides.length : 0 }, () => ({}));
+    const hasMarkAsInvalidFields = this.hasMarkAsInvalidFields();
     (this.slides || []).forEach((slide, i) => {
       let isValid = true;
       let totalRequiredFields = 0;
@@ -1656,7 +1695,9 @@ export class YooFormDynamicComponent {
             !field.hideMobile &&
             field.deleteOnHidden !== false &&
             field.forceHidden !== true &&
-            (!field.readonly || field.dontSaveIfHidden)) {
+            (!field.readonly || field.dontSaveIfHidden) &&
+            !hasMarkAsInvalidFields &&
+            !this.isFieldReadonlyByInvalidRules(field)) {
             this.onFieldClear(field, false);
           }
           if (isFieldWithNoValue(field) && this.suffix) {
@@ -1951,26 +1992,46 @@ export class YooFormDynamicComponent {
     if (((_a = this.steps) === null || _a === void 0 ? void 0 : _a.length) === 0) {
       this.updateSteps();
     }
-    return this.showRecap !== false && this.activeIndex < 1
-      ? [
+    if (this.showRecap !== false && this.activeIndex < 1) {
+      return [
         h("yoo-ion-scroll", { forceOverscroll: false },
           h("div", { class: "flex flex-column" }, slides.map((s, slideIndex) => {
+            var _a;
             let sharedUsers;
             if (this.sharedWith) {
               sharedUsers = this.sharedWith.filter((row) => row[1].some((p) => p.title === s.title)).map((row) => row[0]);
             }
             if (this.steps[slideIndex]) {
+              const invalidFields = (_a = s.items) === null || _a === void 0 ? void 0 : _a.filter((field) => this.isMarkedAsInvalid(field));
+              const hasInvalidFields = (invalidFields === null || invalidFields === void 0 ? void 0 : invalidFields.length) > 0;
               return (h("yoo-form-recap-step", { class: isNativeMobile() ? '' : ' swiper-no-swiping', onClick: () => {
                   this.goToSlide(slideIndex, slideIndex < 2);
                   this.slideTransition = 'recap';
-                }, stepNumber: slideIndex + 1, mainTitle: s.title, subTitle: s.description, locked: this.getSlideState(slideIndex).locked, step: this.steps[slideIndex], users: sharedUsers }));
+                }, stepNumber: slideIndex + 1, mainTitle: s.title, subTitle: s.description, locked: this.getSlideState(slideIndex).locked, step: this.steps[slideIndex], users: sharedUsers, icon: hasInvalidFields ? 'warning' : null }, hasInvalidFields && h("div", { class: "field-invalids" }, invalidFields === null || invalidFields === void 0 ? void 0 : invalidFields.map((f) => {
+                const validationComments = getFieldValue(f, this.currentData, '.validationComments');
+                return h("div", { class: "field-invalid", onClick: () => {
+                    this.goToSlide(slideIndex, slideIndex < 2).then(() => {
+                      setTimeout(() => {
+                        const fieldHTML = this.getFieldByCode(f.name);
+                        this.scrollToField(fieldHTML, true);
+                      }, 500);
+                    });
+                  } },
+                  h("div", { class: "field-invalid-header" },
+                    h("div", { class: "title" },
+                      h("yoo-icon", { color: "danger", name: "inquiry", size: "small" }),
+                      f.title || f.name),
+                    h("yoo-icon", { color: "danger", name: "view", size: "small" })),
+                  validationComments &&
+                    h("yoo-form-input-comments", { readonly: true, user: this.validationCommentsUser, comments: validationComments }));
+              }))));
             }
           })),
           h("yoo-mission-score", { class: "light", charts: this.charts }),
           h("div", { class: "scroll-spacer bottom-bar" })),
         this.renderFormFooter('recap')
-      ]
-      : null;
+      ];
+    }
   }
   renderBody() {
     if (this.slides && this.slides.length > 0) {
@@ -2027,20 +2088,29 @@ export class YooFormDynamicComponent {
         return null;
       }
     }
+    const totalInvalidFields = slides.reduce((total, s) => {
+      var _a;
+      return total + ((_a = s.items) === null || _a === void 0 ? void 0 : _a.reduce((sum, field) => this.isMarkedAsInvalid(field) ? ++sum : sum, 0));
+    }, 0);
     // everytime you catch an event from yoo-ion-slides here, take care to stop the propagation of these same events into yoo-calendar, to prevent them to bubble up until the yoo-form-dynamic and avoid conflicts
     const isHeaderVisible = this.isHeaderVisible(slides);
-    return (h("yoo-ion-slides", { ref: (el) => (this.ionSlides = el), navigation: false, options: this.slidesOptions, onIonSlideTransitionEnd: (ev) => this.onIonSlideTransitionEnd(ev), onIonSlideTouchEnd: (ev) => this.onIonSlideTouchEnd(ev), class: { 'has-header': isHeaderVisible } },
-      this.showRecap !== false ? h("yoo-ion-slide", { class: "recap" },
-        " ",
-        this.renderRecap(),
-        " ") : null,
-      slides.map((slide, slideIndex) => (h("yoo-ion-slide", { class: {
-          'flex-column': true,
-          'dynamic': this.showTabs,
-          'bg-light': !this.showTabs,
-          'zoomed': this.getSlideState(slideIndex).zoomed,
-          'readonly': this.forceReadonly
-        } }, this.renderFormContent(slide, slideIndex, slides.length - (this.showRecap ? 1 : 0)))))));
+    let bannerRef;
+    return [
+      totalInvalidFields > 0 && h("yoo-banner", { ref: (el) => (bannerRef = el), mode: "card", class: "warning-banner field-invalids-banner", leftIcon: "warning", leftIconColor: "light", leftIconSize: "small", heading: translate('WARNINGNOTCOMPLIANTFIELDS', { smart_count: totalInvalidFields }) },
+        h("yoo-icon", { slot: "right", name: "cross", color: "light", size: "small", onClick: () => bannerRef.close() })),
+      h("yoo-ion-slides", { ref: (el) => (this.ionSlides = el), navigation: false, options: this.slidesOptions, onIonSlideTransitionEnd: (ev) => this.onIonSlideTransitionEnd(ev), onIonSlideTouchEnd: (ev) => this.onIonSlideTouchEnd(ev), class: { 'has-header': isHeaderVisible } },
+        this.showRecap !== false ? h("yoo-ion-slide", { class: "recap" },
+          " ",
+          this.renderRecap(),
+          " ") : null,
+        slides.map((slide, slideIndex) => (h("yoo-ion-slide", { class: {
+            'flex-column': true,
+            'dynamic': this.showTabs,
+            'bg-light': !this.showTabs,
+            'zoomed': this.getSlideState(slideIndex).zoomed,
+            'readonly': this.forceReadonly
+          } }, this.renderFormContent(slide, slideIndex, slides.length - (this.showRecap ? 1 : 0))))))
+    ];
   }
   renderLeftPanelSecondary(slide) {
     var _a;
@@ -2171,6 +2241,61 @@ export class YooFormDynamicComponent {
     const sectionFields = orderedFields.filter((f) => { var _a; return ((_a = f[areaName]) === null || _a === void 0 ? void 0 : _a.length) > 0; });
     return groupBy(sectionFields, areaName);
   }
+  isMarkedAsInvalid(field) {
+    return getFieldValue(field, this.currentData, '.markAsInvalid');
+  }
+  isOriginalMarkedAsInvalid(field) {
+    return getFieldValue(field, this.currentData, '.originalMarkAsInvalid');
+  }
+  isMarkedAsModified(field) {
+    return getFieldValue(field, this.currentData, '.markAsModified');
+  }
+  hasValidationComments(field) {
+    return !!getFieldValue(field, this.currentData, '.validationComments');
+  }
+  markAsInvalid(field, state) {
+    setFieldData(field, state, this.currentData, '.markAsInvalid');
+  }
+  originalMarkAsInvalid(field, state) {
+    setFieldData(field, state, this.currentData, '.originalMarkAsInvalid');
+  }
+  markAsModified(field, state) {
+    setFieldData(field, state, this.currentData, '.markAsModified');
+  }
+  hasMarkAsInvalidFields() {
+    const slides = this.getVisibleSlides();
+    return slides === null || slides === void 0 ? void 0 : slides.some((s) => { var _a; return (_a = s === null || s === void 0 ? void 0 : s.items) === null || _a === void 0 ? void 0 : _a.some((f) => this.isMarkedAsInvalid(f) || this.isOriginalMarkedAsInvalid(f)); });
+  }
+  isFieldReadonlyByInvalidRules(field) {
+    var _a;
+    const markAsInvalid = this.isMarkedAsInvalid(field);
+    const originalMarkAsInvalid = this.isOriginalMarkedAsInvalid(field);
+    return this.limitToMarkAsInvalid && !markAsInvalid && !originalMarkAsInvalid && hasValue(field, this.currentData, this.suffix) && !(((_a = this.dirtyFields) === null || _a === void 0 ? void 0 : _a.indexOf(field.name)) >= 0);
+  }
+  cleanHiddenReadonlyFieldsByInvalidRules() {
+    var _a;
+    const hasMarkAsInvalidFields = this.hasMarkAsInvalidFields();
+    if (hasMarkAsInvalidFields) {
+      (_a = this.slides) === null || _a === void 0 ? void 0 : _a.forEach((slide) => {
+        var _a;
+        (_a = slide.items) === null || _a === void 0 ? void 0 : _a.forEach((field) => {
+          if (this.isFieldReadonlyByInvalidRules(field) &&
+            !this.forceReadonly &&
+            field.condition &&
+            !isEmpty(field.condition) &&
+            !field.hideMobile &&
+            field.deleteOnHidden !== false &&
+            field.forceHidden !== true &&
+            (!field.readonly || field.dontSaveIfHidden)) {
+            const fieldState = getFieldState(field, this.fieldsState || {});
+            if (fieldState.hasValue && !fieldState.visible) {
+              this.onFieldClear(field, false);
+            }
+          }
+        });
+      });
+    }
+  }
   renderFormContentFields(slide, slideIndex, slideLength) {
     var _a, _b, _c, _d, _e;
     let isPreviousFieldReadonlyAndVisible;
@@ -2206,7 +2331,16 @@ export class YooFormDynamicComponent {
         this.renderDetailComponent(),
         fields.map((field, inputIndex) => {
           const previousField = this.findPreviousVisibleField(inputIndex, fields);
-          return this.renderFormContentField({ field, inputIndex, slideIndex, slideItems, isPreviousFieldReadonlyAndVisible, previousField, slideLength, useGridstack: this.useGridstack });
+          return this.renderFormContentField({
+            field,
+            inputIndex,
+            slideIndex,
+            slideItems,
+            isPreviousFieldReadonlyAndVisible,
+            previousField,
+            slideLength,
+            useGridstack: this.useGridstack
+          });
         }), (_d = keys(fieldsPerSections)) === null || _d === void 0 ? void 0 :
         _d.map((section) => {
           let inputIndex = 0;
@@ -2264,8 +2398,13 @@ export class YooFormDynamicComponent {
   }
   renderFormContentField({ field, inputIndex, slideIndex, slideItems, isPreviousFieldReadonlyAndVisible, previousField, slideLength, collapsible, useGridstack }) {
     var _a, _b, _c;
-    const readonly = getFieldState(field, this.fieldsState).readonly || this.forceReadonly;
+    const hasMarkAsInvalidFields = this.hasMarkAsInvalidFields();
+    const markAsInvalid = this.isMarkedAsInvalid(field);
+    const markAsModified = this.isMarkedAsModified(field);
+    const originalMarkAsInvalid = this.isOriginalMarkedAsInvalid(field);
+    const readonly = getFieldState(field, this.fieldsState).readonly || this.forceReadonly || (hasMarkAsInvalidFields && this.isFieldReadonlyByInvalidRules(field));
     const comments = getFieldValue(field, this.currentData, '.comments');
+    const validationComments = getFieldValue(field, this.currentData, '.validationComments');
     const time = this.forceReadonly ? getFieldValue(field, this.currentData, '.time') : null;
     const isFieldVisible = this.getFieldVisibility(field);
     const fieldState = getFieldState(field, this.fieldsState);
@@ -2419,9 +2558,11 @@ export class YooFormDynamicComponent {
                   'quickview': this.isQuickview() || this.isInCard(),
                   'lesson': this.isLesson(),
                   'forcedhistory': this.forceHistory,
+                  'mission': this.isMission(),
+                  'pdf': this.isPdf,
                   [field.type]: true,
                   [(field === null || field === void 0 ? void 0 : field.extraClass) || '']: true
-                }, style: field.containerStyle, slotInputConfig: isPdfMultiplePhotos ? slotInputConfig : null, field: field, required: required, readonly: readonly, forceReadonly: this.forceReadonly, forceDescription: this.forceDescription, comments: comments, time: time, size: this.formInputSize, showDefaultInstructions: this.isLesson(), onCommented: (ev) => this.onFieldCommented(ev, field), hideOptional: this.hideOptional || field.hideOptional || isFieldWithNoValue(field), onCommentFocused: (ev) => this.onFieldFocused(null, ev.detail), onHeaderClicked: (ev) => {
+                }, style: field.containerStyle, slotInputConfig: isPdfMultiplePhotos ? slotInputConfig : null, field: field, required: required, readonly: readonly, allowFieldValidation: this.allowFieldValidation, commentsUser: this.commentsUser, validationCommentsUser: this.validationCommentsUser, hideComplianceTags: this.hideComplianceTags, forceReadonly: this.forceReadonly, forceDescription: this.forceDescription, comments: comments, validationComments: validationComments, markAsInvalid: markAsInvalid, markAsModified: markAsModified, originalMarkAsInvalid: originalMarkAsInvalid, time: time, size: this.formInputSize, showDefaultInstructions: this.isLesson(), onCommented: (ev) => this.onFieldCommented(ev, field), onValidationCommented: (ev) => this.onFieldValidationCommented(ev, field), onValidationMarkAsInvalid: (ev) => this.onFieldValidationMarkAsInvalid(ev, field), hideOptional: this.hideOptional || field.hideOptional || isFieldWithNoValue(field), onCommentFocused: (ev) => this.onFieldFocused(null, ev.detail), onHeaderClicked: (ev) => {
                   ev.stopPropagation();
                   this.onFormContainerClicked(slideIndex, inputIndex);
                 }, onRemoved: (ev) => this.onFieldRemoved(ev), isLesson: this.isLesson(), isPreview: this.isLessonPreview(), animated: isAnimationsDisabled() ? false : this.animated, fullscreen: this.isFullscreenFieldType(field.type) }, !isPdfMultiplePhotos && inputFn())),
@@ -3067,11 +3208,12 @@ export class YooFormDynamicComponent {
           isFilter: field.type === FormFieldType.filterautocomplete,
           forceDisableCustomTags: field.forceDisableCustomTags,
           extraData: this.getExtraData(field, data),
+          forceHideSearch: !!field.forceHideSearch,
           onFetchFieldFilterData: (ev) => this.onFetchFieldFilterData(ev),
           onFetchData: (ev) => this.onFetchData(field, ev),
           onFetchCustomData: (ev) => this.onFetchCustomData(field, ev),
           onExtraDataChanged: (ev) => this.onFieldExtraDataChanged(ev, field),
-          forceHideSearch: !!field.forceHideSearch
+          customDataLoader: field.customDataLoader
         };
         if (((field.min && field.min > 1) || (field.max && field.max > 0)) && attrs.validators) {
           attrs.validators.push({ name: field.type, options: { ...extraAttrs } });
@@ -3706,6 +3848,7 @@ export class YooFormDynamicComponent {
           values: field.values,
           linked: field.linked,
           disabled: this.isLivePreview(),
+          customDataLoader: field.customDataLoader,
           onFieldFetchData: (ev) => {
             ev.stopPropagation();
             this.fieldFetchData.emit(ev.detail);
@@ -3730,6 +3873,7 @@ export class YooFormDynamicComponent {
           linked: field.linked,
           type: field.type,
           hideTitle: true,
+          customDataLoader: field.customDataLoader,
           onFieldFetchData: (ev) => {
             ev.stopPropagation();
             this.fieldFetchData.emit(ev.detail);
@@ -3760,6 +3904,7 @@ export class YooFormDynamicComponent {
         extraAttrs = {
           collectionName: field.collectionName,
           tmpValues: field.tmpValues,
+          model: field.model,
           customModel: field.customModel,
           displayType: field.displayType || 'card-list',
           entityType: field.entityType || field.collectionName,
@@ -5250,6 +5395,97 @@ export class YooFormDynamicComponent {
       "attribute": "is-preview",
       "reflect": false
     },
+    "allowFieldValidation": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "allow-field-validation",
+      "reflect": false
+    },
+    "limitToMarkAsInvalid": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "limit-to-mark-as-invalid",
+      "reflect": false
+    },
+    "commentsUser": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "IUser",
+        "resolved": "IUser",
+        "references": {
+          "IUser": {
+            "location": "import",
+            "path": "@shared/interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    },
+    "validationCommentsUser": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "IUser",
+        "resolved": "IUser",
+        "references": {
+          "IUser": {
+            "location": "import",
+            "path": "@shared/interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    },
+    "hideComplianceTags": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "hide-compliance-tags",
+      "reflect": false
+    },
     "useGridstack": {
       "type": "boolean",
       "mutable": false,

package/dist/collection/components/form/form-image-tagging-creator/form-image-tagging-creator.js

@@ -1,5 +1,6 @@
 import { blobToBase64, debounce, Draggable, getUUID, gsapSet, gsapTo, isFile, isTranslationKey, scaleUpAnimation, translate } from '@shared/utils';
-import { Component, Element, Event, forceUpdate, h, Host, Listen, Prop, Watch } from '@stencil/core';
+import { Component, Element, Event, forceUpdate, h, Host, Listen, Prop, State, Watch } from '@stencil/core';
+import { cloneDeep } from 'lodash-es';
 import { getAnnotationPositionStyle, getElement, isAnnotationValid } from '../../../utils/helpers/annotations-helpers';
 import { getAppContext, showImageCropper } from '../../../utils/helpers/common-helpers';
 import { createDot, deleteDot, deleteEmptyDots, getDotInnerElement, getDotToolTipElement, hideAllDotTooltips, hideAllUnFocusedTooltips, reorderDotIndexes, saveTooltipContent, setDotIndexes, showDotTooltip } from '../../../utils/helpers/draggable-dots-helpers';
@@ -11,7 +12,8 @@ export class YooFormImageTaggingCreatorComponent {
   }
   validate() {
     var _a, _b;
-    const validity = !this.required || (!!this.value && !!this.value.imageUrl && !!((_b = (_a = this.value.annotations) === null || _a === void 0 ? void 0 : _a.filter((annotation) => isAnnotationValid(annotation))) === null || _b === void 0 ? void 0 : _b.length));
+    this.internalValue = cloneDeep(this.value);
+    const validity = !this.required || (!!this.internalValue && !!this.internalValue.imageUrl && !!((_b = (_a = this.internalValue.annotations) === null || _a === void 0 ? void 0 : _a.filter((annotation) => isAnnotationValid(annotation))) === null || _b === void 0 ? void 0 : _b.length));
     if (this.validity !== validity) {
       this.validity = validity;
       this.validityChanged.emit(this.validity);
@@ -24,25 +26,26 @@ export class YooFormImageTaggingCreatorComponent {
       const result = await showImageCropper({ file: ev.detail, preventBlob: true });
       const image = result === null || result === void 0 ? void 0 : result.data;
       if (isFile(image)) {
-        this.value.imageUrl = await blobToBase64(image);
+        this.internalValue.imageUrl = await blobToBase64(image);
       }
       else {
-        this.value = {
+        this.internalValue = {
           imageUrl: image,
           annotations: []
         };
         this.captureImageElement.value = image;
       }
-      this.inputChanged.emit(this.value);
+      this.inputChanged.emit(this.internalValue);
     }
-    else if (this.value && !((_a = ev.detail) === null || _a === void 0 ? void 0 : _a['imageUrl'])) {
+    else if (this.internalValue && !((_a = ev.detail) === null || _a === void 0 ? void 0 : _a['imageUrl'])) {
       this.captureImageElement.value = null;
     }
   }
   componentWillLoad() {
     var _a, _b;
-    if ((_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.annotations) === null || _b === void 0 ? void 0 : _b.length) {
-      this.value.annotations = this.value.annotations
+    this.internalValue = cloneDeep(this.value);
+    if ((_b = (_a = this.internalValue) === null || _a === void 0 ? void 0 : _a.annotations) === null || _b === void 0 ? void 0 : _b.length) {
+      this.internalValue.annotations = this.internalValue.annotations
         .filter(a => { var _a; return (a === null || a === void 0 ? void 0 : a.text) && !((_a = a._local) === null || _a === void 0 ? void 0 : _a.isDeleted); })
         .map((a) => {
         var _a;
@@ -84,7 +87,7 @@ export class YooFormImageTaggingCreatorComponent {
   }
   initEditorSetup() {
     var _a, _b;
-    (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.annotations) === null || _b === void 0 ? void 0 : _b.forEach((a) => this.getDotDraggableActions(a));
+    (_b = (_a = this.internalValue) === null || _a === void 0 ? void 0 : _a.annotations) === null || _b === void 0 ? void 0 : _b.forEach((a) => this.getDotDraggableActions(a));
     this.resizeListener = debounce(() => forceUpdate(this), 100).bind(this);
     window.addEventListener('resize', this.resizeListener);
     setDotIndexes(this.dotElements);
@@ -96,12 +99,12 @@ export class YooFormImageTaggingCreatorComponent {
       const MAX_ALLOWED_DOTS = 9;
       const DOT_RADIUS = 12;
       (_a = this.dotElements) === null || _a === void 0 ? void 0 : _a.forEach((element) => gsapSet(element, { x: 0, y: 0 }));
-      if (((_b = this.value) === null || _b === void 0 ? void 0 : _b.imageUrl) && ((_c = this.dotElements) === null || _c === void 0 ? void 0 : _c.length) <= MAX_ALLOWED_DOTS) {
+      if (((_b = this.internalValue) === null || _b === void 0 ? void 0 : _b.imageUrl) && ((_c = this.dotElements) === null || _c === void 0 ? void 0 : _c.length) <= MAX_ALLOWED_DOTS) {
         hideAllDotTooltips(this.dotElements);
-        const newDot = createDot(ev, { radius: DOT_RADIUS, containerElement: this.imageContainerElement }, this.value.annotations);
+        const newDot = createDot(ev, { radius: DOT_RADIUS, containerElement: this.imageContainerElement }, this.internalValue.annotations);
         if (newDot) {
           this.hasDotBeenCreated = true;
-          this.value.annotations.push(newDot);
+          this.internalValue.annotations.push(newDot);
           forceUpdate(this);
         }
       }
@@ -109,9 +112,9 @@ export class YooFormImageTaggingCreatorComponent {
   }
   attachNewDot() {
     var _a, _b, _c;
-    if (((_a = this.value) === null || _a === void 0 ? void 0 : _a.imageUrl) && this.hasDotBeenCreated) {
-      const lastIndex = ((_b = this.value.annotations) === null || _b === void 0 ? void 0 : _b.length) - 1 || 0;
-      const newDot = this.value.annotations[lastIndex];
+    if (((_a = this.internalValue) === null || _a === void 0 ? void 0 : _a.imageUrl) && this.hasDotBeenCreated) {
+      const lastIndex = ((_b = this.internalValue.annotations) === null || _b === void 0 ? void 0 : _b.length) - 1 || 0;
+      const newDot = this.internalValue.annotations[lastIndex];
       if (newDot) {
         const newElement = (_c = this.dotElements) === null || _c === void 0 ? void 0 : _c.filter(d => d).slice(-1)[0];
         if (newElement) {
@@ -139,7 +142,7 @@ export class YooFormImageTaggingCreatorComponent {
       hideAllUnFocusedTooltips(this.dotElements, dotElement);
     };
     const pressAction = () => {
-      this.activeDot = getAnnotation(dotElement.id, this.value.annotations);
+      this.activeDot = getAnnotation(dotElement.id, this.internalValue.annotations);
     };
     const dragStartAction = () => {
       hideAllDotTooltips(this.dotElements);
@@ -169,24 +172,24 @@ export class YooFormImageTaggingCreatorComponent {
         this.translationValueUpdated.emit({ key, value });
       }
       else {
-        this.inputChanged.emit(this.value);
+        this.inputChanged.emit(this.internalValue);
       }
     }
     else {
-      this.inputChanged.emit(this.value);
+      this.inputChanged.emit(this.internalValue);
     }
     validate && this.validate();
-    reorderDotIndexes(this.value.annotations, this.imageContainerElement);
+    reorderDotIndexes(this.internalValue.annotations, this.imageContainerElement);
   }
   setupImage() {
     this.dotElements.forEach((element) => gsapSet(element, { x: 0, y: 0, opacity: 1 }));
   }
   renderImageCapture() {
     var _a;
-    return h("yoo-form-capture", { type: "photo", required: true, value: ((_a = this.value) === null || _a === void 0 ? void 0 : _a.imageUrl) || '', ref: (el) => (this.captureImageElement = el), allowLibrary: true, allowUnsplash: true });
+    return h("yoo-form-capture", { type: "photo", required: true, value: ((_a = this.internalValue) === null || _a === void 0 ? void 0 : _a.imageUrl) || '', ref: (el) => (this.captureImageElement = el), allowLibrary: true, allowUnsplash: true });
   }
   renderDots() {
-    return this.value.annotations.map((dot) => {
+    return this.internalValue.annotations.map((dot) => {
       return (h("div", { id: dot._id, class: "pa dot", onClick: (ev) => ev === null || ev === void 0 ? void 0 : ev.stopPropagation(), style: getAnnotationPositionStyle(dot) },
         h("yoo-tooltip", { clickable: false, hoverable: false, editable: true, placement: "auto", maxCharacters: 25, content: dot.text, onDeleteTooltip: (ev) => ev && deleteDot(dot, this.imageContainerElement).then(() => this.emitAnnotations()), onSaveTooltip: (ev) => ev && saveTooltipContent(ev, dot).then(() => this.emitAnnotations(true, dot._id, ev.detail.value)) },
           h("div", { class: "dot-container" }))));
@@ -194,17 +197,17 @@ export class YooFormImageTaggingCreatorComponent {
   }
   renderImage() {
     var _a, _b, _c;
-    return (((_a = this.value) === null || _a === void 0 ? void 0 : _a.imageUrl) && [
+    return (((_a = this.internalValue) === null || _a === void 0 ? void 0 : _a.imageUrl) && [
       h("div", { class: "image-container", ref: (el) => (this.imageContainerElement = el) },
-        h("yoo-img", { disableAspectRatioCalc: true, scaledUp: true, onScaleUpDone: () => this.setupImage(), contained: true, onClick: (ev) => this.imageClick(ev), src: this.value.imageUrl }),
-        !!((_c = (_b = this.value) === null || _b === void 0 ? void 0 : _b.annotations) === null || _c === void 0 ? void 0 : _c.length) && this.renderDots()),
+        h("yoo-img", { disableAspectRatioCalc: true, scaledUp: true, onScaleUpDone: () => this.setupImage(), contained: true, onClick: (ev) => this.imageClick(ev), src: this.internalValue.imageUrl }),
+        !!((_c = (_b = this.internalValue) === null || _b === void 0 ? void 0 : _b.annotations) === null || _c === void 0 ? void 0 : _c.length) && this.renderDots()),
       h("div", { class: "instructions stable" },
         h("yoo-icon", { size: "small", name: "info", color: "stable" }),
         h("span", null, translate('ADDIMAGETAG')))
     ]);
   }
   render() {
-    return (h(Host, { onClick: (ev) => { var _a; return ev && deleteEmptyDots((_a = this.value) === null || _a === void 0 ? void 0 : _a.annotations, this.imageContainerElement); }, class: { ...getAppContext(this.host) } },
+    return (h(Host, { onClick: (ev) => { var _a; return ev && deleteEmptyDots((_a = this.internalValue) === null || _a === void 0 ? void 0 : _a.annotations, this.imageContainerElement); }, class: { ...getAppContext(this.host) } },
       h("div", { class: "outer-container" },
         this.renderImageCapture(),
         this.renderImage())));
@@ -293,6 +296,9 @@ export class YooFormImageTaggingCreatorComponent {
       }
     }
   }; }
+  static get states() { return {
+    "internalValue": {}
+  }; }
   static get events() { return [{
       "method": "inputChanged",
       "name": "inputChanged",