@yoobic/yobi 8.6.35 → 8.6.37

package/dist/cjs/yoo-markdown.cjs.entry.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-91f073fd.js');
-const index$1 = require('./index-0dc9b21d.js');
-const localForage = require('./local-forage-d4fee9d4.js');
-const commonHelpers = require('./common-helpers-907b7aa0.js');
+const index$1 = require('./index-2774b0be.js');
+const localForage = require('./local-forage-c393e31d.js');
+const commonHelpers = require('./common-helpers-4a869a3e.js');
 require('./lodash-1f7fff24.js');
 require('./_commonjsHelpers-94df2ea7.js');
 require('./index-c09665da.js');

package/dist/cjs/yoo-memo-list-dialog.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-91f073fd.js');
-const index$1 = require('./index-0dc9b21d.js');
+const index$1 = require('./index-2774b0be.js');
 require('./lodash-1f7fff24.js');
 require('./_commonjsHelpers-94df2ea7.js');
 require('./index-c09665da.js');

package/dist/cjs/yoo-memo-list.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-91f073fd.js');
-const index$1 = require('./index-0dc9b21d.js');
+const index$1 = require('./index-2774b0be.js');
 require('./lodash-1f7fff24.js');
 require('./_commonjsHelpers-94df2ea7.js');
 require('./index-c09665da.js');

package/dist/cjs/yoo-mention-tag.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-91f073fd.js');
-const index$1 = require('./index-0dc9b21d.js');
+const index$1 = require('./index-2774b0be.js');
 require('./lodash-1f7fff24.js');
 require('./_commonjsHelpers-94df2ea7.js');
 require('./index-c09665da.js');

package/dist/cjs/yoo-mission-details.cjs.entry.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-91f073fd.js');
-const index$1 = require('./index-0dc9b21d.js');
-const missionsHelpers = require('./missions-helpers-356d414d.js');
-const commonHelpers = require('./common-helpers-907b7aa0.js');
+const index$1 = require('./index-2774b0be.js');
+const missionsHelpers = require('./missions-helpers-7220d3fe.js');
+const commonHelpers = require('./common-helpers-4a869a3e.js');
 const lodash = require('./lodash-1f7fff24.js');
-const index$2 = require('./index-5313303d.js');
+const index$2 = require('./index-f0bf4bb8.js');
 require('./_commonjsHelpers-94df2ea7.js');
 require('./index-c09665da.js');
 require('./buffer-es6-ec3b5bf8.js');

package/dist/cjs/yoo-mission-heading.cjs.entry.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-91f073fd.js');
-const index$1 = require('./index-0dc9b21d.js');
-const missionsHelpers = require('./missions-helpers-356d414d.js');
-const commonHelpers = require('./common-helpers-907b7aa0.js');
-const missionLockedBanner = require('./mission-locked-banner-b800a8d3.js');
+const index$1 = require('./index-2774b0be.js');
+const missionsHelpers = require('./missions-helpers-7220d3fe.js');
+const commonHelpers = require('./common-helpers-4a869a3e.js');
+const missionLockedBanner = require('./mission-locked-banner-61ad370c.js');
 require('./lodash-1f7fff24.js');
 require('./_commonjsHelpers-94df2ea7.js');
 require('./index-c09665da.js');

package/dist/cjs/yoo-mission-score.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-91f073fd.js');
-const index$1 = require('./index-0dc9b21d.js');
+const index$1 = require('./index-2774b0be.js');
 require('./lodash-1f7fff24.js');
 require('./_commonjsHelpers-94df2ea7.js');
 require('./index-c09665da.js');

package/dist/cjs/yoo-mission-todo.cjs.entry.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-91f073fd.js');
-const operationHelpers = require('./operation-helpers-2b957a02.js');
+const operationHelpers = require('./operation-helpers-2547e0a9.js');
 const lodash = require('./lodash-1f7fff24.js');
-require('./index-0dc9b21d.js');
+require('./index-2774b0be.js');
 require('./_commonjsHelpers-94df2ea7.js');
 require('./index-c09665da.js');
 

package/dist/cjs/yoo-mobile-tabbar-more.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-91f073fd.js');
-const index$1 = require('./index-0dc9b21d.js');
+const index$1 = require('./index-2774b0be.js');
 require('./lodash-1f7fff24.js');
 require('./_commonjsHelpers-94df2ea7.js');
 require('./index-c09665da.js');

package/dist/cjs/yoo-mobile-tabbar.cjs.entry.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-91f073fd.js');
 const index$1 = require('./index-c09665da.js');
-const index$2 = require('./index-0dc9b21d.js');
-const commonHelpers = require('./common-helpers-907b7aa0.js');
+const index$2 = require('./index-2774b0be.js');
+const commonHelpers = require('./common-helpers-4a869a3e.js');
 const lodash = require('./lodash-1f7fff24.js');
 require('./_commonjsHelpers-94df2ea7.js');
 

package/dist/cjs/yoo-modal-controller.cjs.entry.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-91f073fd.js');
-const overlays = require('./overlays-5ccd36a1.js');
-require('./index-0dc9b21d.js');
+const overlays = require('./overlays-6802948a.js');
+require('./index-2774b0be.js');
 require('./lodash-1f7fff24.js');
 require('./_commonjsHelpers-94df2ea7.js');
 require('./index-c09665da.js');

package/dist/cjs/yoo-modal.cjs.entry.js

@@ -4,12 +4,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-91f073fd.js');
 const index$2 = require('./index-c09665da.js');
-const index$1 = require('./index-0dc9b21d.js');
-const commonHelpers = require('./common-helpers-907b7aa0.js');
-const overlays = require('./overlays-5ccd36a1.js');
-const theme = require('./theme-7d302b3b.js');
+const index$1 = require('./index-2774b0be.js');
+const commonHelpers = require('./common-helpers-4a869a3e.js');
+const overlays = require('./overlays-6802948a.js');
+const theme = require('./theme-c9e7e760.js');
 const lodash = require('./lodash-1f7fff24.js');
-const modalAnimations = require('./modal-animations-95faf4b5.js');
+const modalAnimations = require('./modal-animations-d08b37d6.js');
 require('./_commonjsHelpers-94df2ea7.js');
 
 async function attachComponent(delegate, container, component, cssClasses, componentProps) {

package/dist/cjs/yoo-navbar.cjs.entry.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-91f073fd.js');
-const index$1 = require('./index-0dc9b21d.js');
-const commonHelpers = require('./common-helpers-907b7aa0.js');
+const index$1 = require('./index-2774b0be.js');
+const commonHelpers = require('./common-helpers-4a869a3e.js');
 const dimensionsHelpers = require('./dimensions-helpers-54685523.js');
 require('./lodash-1f7fff24.js');
 require('./_commonjsHelpers-94df2ea7.js');

package/dist/cjs/yoo-numbers-display.cjs.entry.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-91f073fd.js');
-const index$1 = require('./index-0dc9b21d.js');
-const commonHelpers = require('./common-helpers-907b7aa0.js');
+const index$1 = require('./index-2774b0be.js');
+const commonHelpers = require('./common-helpers-4a869a3e.js');
 const lodash = require('./lodash-1f7fff24.js');
 require('./_commonjsHelpers-94df2ea7.js');
 require('./index-c09665da.js');

package/dist/cjs/yoo-photo-editor.cjs.entry.js

@@ -3,26 +3,29 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-91f073fd.js');
-const index$1 = require('./index-0dc9b21d.js');
-require('./index-b6e726cf.js');
-const annotationsHelpers = require('./annotations-helpers-99a0cac4.js');
-const commonHelpers = require('./common-helpers-907b7aa0.js');
-const photoEditor_helpers = require('./photo-editor.helpers-344138a6.js');
-const formInputHelpers = require('./form-input-helpers-c26411fc.js');
+const index$1 = require('./index-2774b0be.js');
+require('./index-baf466b5.js');
+const annotationsHelpers = require('./annotations-helpers-94de4e37.js');
+const commonHelpers = require('./common-helpers-4a869a3e.js');
+const photoEditor_helpers = require('./photo-editor.helpers-d16c38c7.js');
+const formInputHelpers = require('./form-input-helpers-48af7750.js');
 const lodash = require('./lodash-1f7fff24.js');
-const localForage = require('./local-forage-d4fee9d4.js');
+const localForage = require('./local-forage-c393e31d.js');
 require('./_commonjsHelpers-94df2ea7.js');
 require('./index-c09665da.js');
 
-const Textbox = ({ annotation, onAnnotationClick, onType, readonly, imageSize, hidden }) => {
+const Textbox = ({ annotation, onAnnotationClick, onType, imageSize, hidden }) => {
   return (annotationsHelpers.isAnnotationValid(annotation) &&
-    index.h("div", { class: "annotation", key: annotation._id, id: annotation._id, ...{ hidden, type: 'textbox' }, style: photoEditor_helpers.getAnnotationStyle(annotation, { imageSize, readonly }), onClick: (ev) => onAnnotationClick(ev, annotation), onInput: (ev) => onType(ev) }, annotation.text.split('\n').map((lineValue) => index.h("div", null, lineValue))));
+    index.h("div", { class: "annotation", key: annotation._id, id: annotation._id, ...{ hidden, type: 'textbox' }, style: {
+        ...annotationsHelpers.getPercentPositionStyle(annotation),
+        ...photoEditor_helpers.getTextBoxStyle(annotation.styles, imageSize.width)
+      }, onClick: (ev) => onAnnotationClick(ev, annotation), onInput: (ev) => onType(ev) }, annotation.text.split('\n').map((lineValue) => index.h("div", null, lineValue))));
 };
-const Dot = ({ annotation, tooltipProps, onAnnotationClick, onDotSave, readonly, imageSize, isWeb, disableTooltip, hidden }) => {
+const Dot = ({ annotation, tooltipProps, onAnnotationClick, onDotSave, isWeb, disableTooltip, hidden }) => {
   var _a;
   const dotTextColor = index$1.getContrastColorName((_a = annotation === null || annotation === void 0 ? void 0 : annotation.styles) === null || _a === void 0 ? void 0 : _a.backgroundColor);
   return !annotationsHelpers.isAnnotationDeleted(annotation) &&
-    index.h("div", { class: "annotation", key: annotation._id, id: annotation._id, ...{ hidden, type: 'dot' }, style: photoEditor_helpers.getAnnotationStyle(annotation, { imageSize, readonly }) },
+    index.h("div", { class: "annotation", key: annotation._id, id: annotation._id, ...{ hidden, type: 'dot' }, style: annotationsHelpers.getPercentPositionStyle(annotation) },
       index.h("yoo-tooltip", { placement: "top", content: annotation.text, ...{
           ...tooltipProps,
           size: isWeb ? 'small' : 'large',
@@ -202,7 +205,7 @@ const Actions = ({ submitButton, onActionClick }) => {
 };
 //#endregion
 
-const photoEditorCss = "svg:not(:root){overflow:hidden}:host .annotation{cursor:pointer;-webkit-transition:opacity 0.35s ease-in-out, font-size 0.125s linear, background-color 0.35s linear;transition:opacity 0.35s ease-in-out, font-size 0.125s linear, background-color 0.35s linear}:host .annotation[hidden]{visibility:hidden;opacity:0}:host .annotation[type]{z-index:3}:host .annotation[type=dot]{position:absolute;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:var(--spacing-40, 2.5rem);height:var(--spacing-40, 2.5rem)}:host .annotation[type=dot] .dot-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;color:var(--light, #ffffff);border-color:currentColor;border-style:solid;border-width:var(--border-width-02, 0.125rem);border-radius:50%}:host .annotation[type=textbox]{top:0;left:0;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;word-break:break-word}:host .annotation[type=textbox].focused{z-index:4;cursor:text;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}:host([display=standard]) div[type=dot] .dot-container{width:var(--spacing-32, 2rem);height:var(--spacing-32, 2rem)}:host([display=preview]) div[type=dot] .dot-container{width:var(--spacing-24, 1.5rem);height:var(--spacing-24, 1.5rem)}:host yoo-navbar{--bottom-shadow:0;position:absolute;z-index:10;background:none;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out}:host yoo-navbar.hidden{opacity:0}:host yoo-navbar yoo-button{--disabled-color:var(--text-color, #807f83);--hover-color:var(--stable-light-20, rgba(241, 241, 241, 0.2))}:host yoo-navbar .empty-icon{width:var(--spacing-32, 2rem);height:var(--spacing-32, 2rem)}:host yoo-range{--host-thickness:1.5rem;--bar-active-color:transparent;--bar-trail-color:transparent;--knob-shadow:var(--dark-40, rgba(0, 0, 0, 0.4)) 0 0 var(--spacing-08, 0.5rem);--knob-color:var(--light, #ffffff);--knob-size:1.65rem;position:absolute;top:50%;z-index:6;display:block;height:15rem;-webkit-transform:translate(0%, -50%) translate(var(--x-range-position, -3rem), 0px) scale(var(--scale, 0.5));transform:translate(0%, -50%) translate(var(--x-range-position, -3rem), 0px) scale(var(--scale, 0.5))}:host yoo-range.animated{-webkit-transition:-webkit-transform 750ms ease-in-out;transition:-webkit-transform 750ms ease-in-out;transition:transform 750ms ease-in-out;transition:transform 750ms ease-in-out, -webkit-transform 750ms ease-in-out}:host yoo-range[status=hidden]{--x-range-position:calc(var(--spacing-48, 3rem) * -1)}:host yoo-range[status=inactive]{--scale:1;--x-range-position:calc(var(--spacing-08, 0.5rem) * -1)}:host yoo-range[status=active]{--scale:1.1;--x-range-position:var(--spacing-16, 1rem)}:host yoo-range .triangle{position:absolute;width:0rem;height:0rem;border-color:var(--light, #ffffff) transparent transparent transparent;border-style:solid;border-width:15rem 0.75rem 0rem;opacity:0.75}:host yoo-button[actiontype]{position:absolute;right:0;bottom:-3rem;left:0;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;margin:auto;-webkit-transition:bottom 0.35s linear;transition:bottom 0.35s linear}:host yoo-button[actiontype].active{bottom:5rem;-webkit-animation:scale-up 0.5s ease-in-out;animation:scale-up 0.5s ease-in-out;-webkit-animation-delay:500ms;animation-delay:500ms}:host yoo-button[color]{z-index:4}:host yoo-button[color=danger].hit{-webkit-transform:scale(1.25);transform:scale(1.25);opacity:0.75}:host(.rtl) yoo-range[status=hidden]{--x-range-position:var(--spacing-48, 3rem)}:host(.rtl) yoo-range[status=inactive]{--scale:1;--x-range-position:var(--spacing-08, 0.5rem)}:host(.rtl) yoo-range[status=active]{--scale:1.1;--x-range-position:calc(var(--spacing-16, 1rem) * -1)}:host([animated]) yoo-navbar.animated yoo-button{-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host([animated]) yoo-navbar.animated yoo-button[animated-icon]:nth-child(1){-webkit-animation:scale-up 0.75s ease-in-out;animation:scale-up 0.75s ease-in-out;-webkit-animation-delay:100ms;animation-delay:100ms}:host([animated]) yoo-navbar.animated yoo-button[animated-icon]:nth-child(2){-webkit-animation:scale-up 0.75s ease-in-out;animation:scale-up 0.75s ease-in-out;-webkit-animation-delay:200ms;animation-delay:200ms}:host([animated]) yoo-navbar.animated yoo-button[animated-icon]:nth-child(3){-webkit-animation:scale-up 0.75s ease-in-out;animation:scale-up 0.75s ease-in-out;-webkit-animation-delay:300ms;animation-delay:300ms}:host([animated]) yoo-navbar.animated yoo-button[animated-icon]:nth-child(4){-webkit-animation:scale-up 0.75s ease-in-out;animation:scale-up 0.75s ease-in-out;-webkit-animation-delay:400ms;animation-delay:400ms}:host([animated]) yoo-navbar.animated yoo-button[animated-text]{-webkit-animation:fade-in 0.5s ease-in;animation:fade-in 0.5s ease-in}:host([animated]) yoo-navbar.animated yoo-button.active[color=light]{bottom:5rem;-webkit-animation:scale-up 0.5s ease-in-out;animation:scale-up 0.5s ease-in-out;-webkit-animation-delay:500ms;animation-delay:500ms}:host{--global-image-display:flex;--editor-background:var(--dark, #000000);position:relative;display:block;width:100%;height:100%;min-height:var(--global-image-min-height);overflow:hidden;background-color:var(--editor-background);--img-radius:initial}:host .bg-accent{background-color:var(--accent, #276ef1) !important}:host .accent{color:var(--accent, #276ef1);fill:var(--accent, #276ef1)}:host .border-accent{border:0.0625rem solid var(--accent, #276ef1)}:host .bg-app-color{background-color:var(--app-color, #5a30f4) !important}:host .app-color{color:var(--app-color, #5a30f4);fill:var(--app-color, #5a30f4)}:host .border-app-color{border:0.0625rem solid var(--app-color, #5a30f4)}:host .bg-danger{background-color:var(--danger, #d44333) !important}:host .danger{color:var(--danger, #d44333);fill:var(--danger, #d44333)}:host .border-danger{border:0.0625rem solid var(--danger, #d44333)}:host .bg-dark{background-color:var(--dark, #000000) !important}:host .dark{color:var(--dark, #000000);fill:var(--dark, #000000)}:host .border-dark{border:0.0625rem solid var(--dark, #000000)}:host .bg-energized{background-color:var(--energized, #ffc043) !important}:host .energized{color:var(--energized, #ffc043);fill:var(--energized, #ffc043)}:host .border-energized{border:0.0625rem solid var(--energized, #ffc043)}:host .bg-info{background-color:var(--info, #d84c96) !important}:host .info{color:var(--info, #d84c96);fill:var(--info, #d84c96)}:host .border-info{border:0.0625rem solid var(--info, #d84c96)}:host .bg-light{background-color:var(--light, #ffffff) !important}:host .light{color:var(--light, #ffffff);fill:var(--light, #ffffff)}:host .border-light{border:0.0625rem solid var(--light, #ffffff)}:host .bg-stable{background-color:var(--stable, #adadad) !important}:host .stable{color:var(--stable, #adadad);fill:var(--stable, #adadad)}:host .border-stable{border:0.0625rem solid var(--stable, #adadad)}:host .bg-stable-alt{background-color:var(--stable-alt, #d0d0d0) !important}:host .stable-alt{color:var(--stable-alt, #d0d0d0);fill:var(--stable-alt, #d0d0d0)}:host .border-stable-alt{border:0.0625rem solid var(--stable-alt, #d0d0d0)}:host .bg-stable-light{background-color:var(--stable-light, #f1f1f1) !important}:host .stable-light{color:var(--stable-light, #f1f1f1);fill:var(--stable-light, #f1f1f1)}:host .border-stable-light{border:0.0625rem solid var(--stable-light, #f1f1f1)}:host .bg-stable-ultralight{background-color:var(--stable-ultralight, #fafafa) !important}:host .stable-ultralight{color:var(--stable-ultralight, #fafafa);fill:var(--stable-ultralight, #fafafa)}:host .border-stable-ultralight{border:0.0625rem solid var(--stable-ultralight, #fafafa)}:host .bg-success{background-color:var(--success, #3aa76d) !important}:host .success{color:var(--success, #3aa76d);fill:var(--success, #3aa76d)}:host .border-success{border:0.0625rem solid var(--success, #3aa76d)}:host .bg-text-color{background-color:var(--text-color, #807f83) !important}:host .text-color{color:var(--text-color, #807f83);fill:var(--text-color, #807f83)}:host .border-text-color{border:0.0625rem solid var(--text-color, #807f83)}:host .bg-warning{background-color:var(--warning, #ed6e33) !important}:host .warning{color:var(--warning, #ed6e33);fill:var(--warning, #ed6e33)}:host .border-warning{border:0.0625rem solid var(--warning, #ed6e33)}:host .bg-wood{background-color:var(--wood, #99644c) !important}:host .wood{color:var(--wood, #99644c);fill:var(--wood, #99644c)}:host .border-wood{border:0.0625rem solid var(--wood, #99644c)}@-webkit-keyframes fade-in{from{opacity:0}to{opacity:1}}@keyframes fade-in{from{opacity:0}to{opacity:1}}@-webkit-keyframes scale-up{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.15);transform:scale(1.15)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes scale-up{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.15);transform:scale(1.15)}100%{-webkit-transform:scale(1);transform:scale(1)}}:host yoo-zoom{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;opacity:1}:host yoo-zoom[hidden]{opacity:0.5}:host yoo-zoom[mode=draw] canvas{cursor:crosshair;-ms-touch-action:none;touch-action:none}:host #text-editor,:host div[type=textbox]{position:absolute;display:inline-block;max-width:50%;padding:var(--spacing-08, 0.5rem);border-radius:var(--border-radius-08, 0.5rem);outline:0}:host #text-editor{top:calc(50% - 1.5rem);left:calc(50% - 0.5rem);z-index:6;color:var(--light, #ffffff);text-align:center;-webkit-transition:font-size 0.125s linear, background-color 0.5s linear;transition:font-size 0.125s linear, background-color 0.5s linear;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}:host yoo-img{z-index:1;display:var(--global-image-display);-ms-flex-align:var(--global-image-align);align-items:var(--global-image-align)}:host yoo-loader{background-color:var(--dark, #000000);-webkit-animation:loading 3s forwards;animation:loading 3s forwards}@-webkit-keyframes loading{from{opacity:1}to{opacity:0}}@keyframes loading{from{opacity:1}to{opacity:0}}:host #drawings{z-index:2}:host #src{z-index:1}:host #c-picker{position:absolute;z-index:4;width:var(--spacing-32, 2rem);height:var(--spacing-32, 2rem);border:1px solid var(--light, #ffffff);border-radius:50%;cursor:crosshair;-webkit-transition:opacity 0.5s ease-in-out;transition:opacity 0.5s ease-in-out;will-change:transform}:host #c-picker[hidden]{opacity:0}:host #overlay{z-index:5;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;color:var(--light, #ffffff);font-size:var(--font-size-20, 1.25rem);background-color:var(--dark-40, rgba(0, 0, 0, 0.4));-webkit-transition:background-color 5s ease-in-out;transition:background-color 5s ease-in-out}:host #annotations{position:relative;top:0;margin:auto}:host #overlay,:host canvas,:host yoo-img{position:absolute}:host footer{position:absolute;bottom:-3rem;left:50%;z-index:6;width:100%;margin-bottom:var(--safe-area-inset-bottom);overflow-x:auto;-webkit-transform:translateX(-50%);transform:translateX(-50%);opacity:0}:host footer yoo-color-selector{margin:0 auto;padding-left:var(--spacing-16, 1rem)}:host footer.active{bottom:0;opacity:1}:host footer.has-description{-webkit-transform:inherit;transform:inherit}:host footer .description-container{color:var(--stable, #adadad);text-align:center}:host([animated]) footer{-webkit-transition:all 0.5s linear;transition:all 0.5s linear}:host([display=standard]){-ms-scroll-chaining:none;overscroll-behavior:none}:host([display=preview]) yoo-img{--border-radius:var(--img-radius);-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}";
+const photoEditorCss = "svg:not(:root){overflow:hidden}:host .annotation{cursor:pointer;-webkit-transition:opacity 0.35s ease-in-out, font-size 0.125s linear, background-color 0.35s linear;transition:opacity 0.35s ease-in-out, font-size 0.125s linear, background-color 0.35s linear}:host .annotation[hidden]{visibility:hidden;opacity:0}:host .annotation[type]{z-index:3}:host .annotation[type=dot]{position:absolute;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:var(--spacing-40, 2.5rem);height:var(--spacing-40, 2.5rem)}:host .annotation[type=dot] .dot-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;color:var(--light, #ffffff);border-color:currentColor;border-style:solid;border-width:var(--border-width-02, 0.125rem);border-radius:50%}:host .annotation[type=textbox]{top:0;left:0;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;word-break:break-word}:host .annotation[type=textbox].focused{z-index:4;cursor:text;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}:host([display=standard]) div[type=dot] .dot-container{width:var(--spacing-32, 2rem);height:var(--spacing-32, 2rem)}:host([display=preview]) div[type=dot] .dot-container{width:var(--spacing-24, 1.5rem);height:var(--spacing-24, 1.5rem)}:host yoo-navbar{--bottom-shadow:0;position:absolute;z-index:10;background:none;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out}:host yoo-navbar.hidden{opacity:0}:host yoo-navbar yoo-button{--disabled-color:var(--text-color, #807f83);--hover-color:var(--stable-light-20, rgba(241, 241, 241, 0.2))}:host yoo-navbar .empty-icon{width:var(--spacing-32, 2rem);height:var(--spacing-32, 2rem)}:host yoo-range{--host-thickness:1.5rem;--bar-active-color:transparent;--bar-trail-color:transparent;--knob-shadow:var(--dark-40, rgba(0, 0, 0, 0.4)) 0 0 var(--spacing-08, 0.5rem);--knob-color:var(--light, #ffffff);--knob-size:1.65rem;position:absolute;top:50%;z-index:6;display:block;height:15rem;-webkit-transform:translate(0%, -50%) translate(var(--x-range-position, -3rem), 0px) scale(var(--scale, 0.5));transform:translate(0%, -50%) translate(var(--x-range-position, -3rem), 0px) scale(var(--scale, 0.5))}:host yoo-range.animated{-webkit-transition:-webkit-transform 750ms ease-in-out;transition:-webkit-transform 750ms ease-in-out;transition:transform 750ms ease-in-out;transition:transform 750ms ease-in-out, -webkit-transform 750ms ease-in-out}:host yoo-range[status=hidden]{--x-range-position:calc(var(--spacing-48, 3rem) * -1)}:host yoo-range[status=inactive]{--scale:1;--x-range-position:calc(var(--spacing-08, 0.5rem) * -1)}:host yoo-range[status=active]{--scale:1.1;--x-range-position:var(--spacing-16, 1rem)}:host yoo-range .triangle{position:absolute;width:0rem;height:0rem;border-color:var(--light, #ffffff) transparent transparent transparent;border-style:solid;border-width:15rem 0.75rem 0rem;opacity:0.75}:host yoo-button[actiontype]{position:absolute;right:0;bottom:-3rem;left:0;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;margin:auto;-webkit-transition:bottom 0.35s linear;transition:bottom 0.35s linear}:host yoo-button[actiontype].active{bottom:5rem;-webkit-animation:scale-up 0.5s ease-in-out;animation:scale-up 0.5s ease-in-out;-webkit-animation-delay:500ms;animation-delay:500ms}:host yoo-button[color]{z-index:4}:host yoo-button[color=danger].hit{-webkit-transform:scale(1.25);transform:scale(1.25);opacity:0.75}:host(.rtl) yoo-range[status=hidden]{--x-range-position:var(--spacing-48, 3rem)}:host(.rtl) yoo-range[status=inactive]{--scale:1;--x-range-position:var(--spacing-08, 0.5rem)}:host(.rtl) yoo-range[status=active]{--scale:1.1;--x-range-position:calc(var(--spacing-16, 1rem) * -1)}:host([is-readonly]) yoo-range{display:none}:host([animated]) yoo-navbar.animated yoo-button{-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host([animated]) yoo-navbar.animated yoo-button[animated-icon]:nth-child(1){-webkit-animation:scale-up 0.75s ease-in-out;animation:scale-up 0.75s ease-in-out;-webkit-animation-delay:100ms;animation-delay:100ms}:host([animated]) yoo-navbar.animated yoo-button[animated-icon]:nth-child(2){-webkit-animation:scale-up 0.75s ease-in-out;animation:scale-up 0.75s ease-in-out;-webkit-animation-delay:200ms;animation-delay:200ms}:host([animated]) yoo-navbar.animated yoo-button[animated-icon]:nth-child(3){-webkit-animation:scale-up 0.75s ease-in-out;animation:scale-up 0.75s ease-in-out;-webkit-animation-delay:300ms;animation-delay:300ms}:host([animated]) yoo-navbar.animated yoo-button[animated-icon]:nth-child(4){-webkit-animation:scale-up 0.75s ease-in-out;animation:scale-up 0.75s ease-in-out;-webkit-animation-delay:400ms;animation-delay:400ms}:host([animated]) yoo-navbar.animated yoo-button[animated-text]{-webkit-animation:fade-in 0.5s ease-in;animation:fade-in 0.5s ease-in}:host([animated]) yoo-navbar.animated yoo-button.active[color=light]{bottom:5rem;-webkit-animation:scale-up 0.5s ease-in-out;animation:scale-up 0.5s ease-in-out;-webkit-animation-delay:500ms;animation-delay:500ms}:host{--global-image-display:flex;--editor-background:var(--dark, #000000);position:relative;display:block;width:100%;height:100%;min-height:var(--global-image-min-height);overflow:hidden;background-color:var(--editor-background);--img-radius:initial}:host .bg-accent{background-color:var(--accent, #276ef1) !important}:host .accent{color:var(--accent, #276ef1);fill:var(--accent, #276ef1)}:host .border-accent{border:0.0625rem solid var(--accent, #276ef1)}:host .bg-app-color{background-color:var(--app-color, #5a30f4) !important}:host .app-color{color:var(--app-color, #5a30f4);fill:var(--app-color, #5a30f4)}:host .border-app-color{border:0.0625rem solid var(--app-color, #5a30f4)}:host .bg-danger{background-color:var(--danger, #d44333) !important}:host .danger{color:var(--danger, #d44333);fill:var(--danger, #d44333)}:host .border-danger{border:0.0625rem solid var(--danger, #d44333)}:host .bg-dark{background-color:var(--dark, #000000) !important}:host .dark{color:var(--dark, #000000);fill:var(--dark, #000000)}:host .border-dark{border:0.0625rem solid var(--dark, #000000)}:host .bg-energized{background-color:var(--energized, #ffc043) !important}:host .energized{color:var(--energized, #ffc043);fill:var(--energized, #ffc043)}:host .border-energized{border:0.0625rem solid var(--energized, #ffc043)}:host .bg-info{background-color:var(--info, #d84c96) !important}:host .info{color:var(--info, #d84c96);fill:var(--info, #d84c96)}:host .border-info{border:0.0625rem solid var(--info, #d84c96)}:host .bg-light{background-color:var(--light, #ffffff) !important}:host .light{color:var(--light, #ffffff);fill:var(--light, #ffffff)}:host .border-light{border:0.0625rem solid var(--light, #ffffff)}:host .bg-stable{background-color:var(--stable, #adadad) !important}:host .stable{color:var(--stable, #adadad);fill:var(--stable, #adadad)}:host .border-stable{border:0.0625rem solid var(--stable, #adadad)}:host .bg-stable-alt{background-color:var(--stable-alt, #d0d0d0) !important}:host .stable-alt{color:var(--stable-alt, #d0d0d0);fill:var(--stable-alt, #d0d0d0)}:host .border-stable-alt{border:0.0625rem solid var(--stable-alt, #d0d0d0)}:host .bg-stable-light{background-color:var(--stable-light, #f1f1f1) !important}:host .stable-light{color:var(--stable-light, #f1f1f1);fill:var(--stable-light, #f1f1f1)}:host .border-stable-light{border:0.0625rem solid var(--stable-light, #f1f1f1)}:host .bg-stable-ultralight{background-color:var(--stable-ultralight, #fafafa) !important}:host .stable-ultralight{color:var(--stable-ultralight, #fafafa);fill:var(--stable-ultralight, #fafafa)}:host .border-stable-ultralight{border:0.0625rem solid var(--stable-ultralight, #fafafa)}:host .bg-success{background-color:var(--success, #3aa76d) !important}:host .success{color:var(--success, #3aa76d);fill:var(--success, #3aa76d)}:host .border-success{border:0.0625rem solid var(--success, #3aa76d)}:host .bg-text-color{background-color:var(--text-color, #807f83) !important}:host .text-color{color:var(--text-color, #807f83);fill:var(--text-color, #807f83)}:host .border-text-color{border:0.0625rem solid var(--text-color, #807f83)}:host .bg-warning{background-color:var(--warning, #ed6e33) !important}:host .warning{color:var(--warning, #ed6e33);fill:var(--warning, #ed6e33)}:host .border-warning{border:0.0625rem solid var(--warning, #ed6e33)}:host .bg-wood{background-color:var(--wood, #99644c) !important}:host .wood{color:var(--wood, #99644c);fill:var(--wood, #99644c)}:host .border-wood{border:0.0625rem solid var(--wood, #99644c)}@-webkit-keyframes fade-in{from{opacity:0}to{opacity:1}}@keyframes fade-in{from{opacity:0}to{opacity:1}}@-webkit-keyframes scale-up{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.15);transform:scale(1.15)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes scale-up{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.15);transform:scale(1.15)}100%{-webkit-transform:scale(1);transform:scale(1)}}:host yoo-zoom{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;opacity:1}:host yoo-zoom[hidden]{opacity:0.5}:host yoo-zoom[mode=draw] canvas{cursor:crosshair;-ms-touch-action:none;touch-action:none}:host #text-editor,:host div[type=textbox]{position:absolute;display:inline-block;max-width:50%;padding:var(--spacing-08, 0.5rem);border-radius:var(--border-radius-08, 0.5rem);outline:0}:host #text-editor{top:calc(50% - 1.5rem);left:calc(50% - 0.5rem);z-index:6;color:var(--light, #ffffff);text-align:center;-webkit-transition:font-size 0.125s linear, background-color 0.5s linear;transition:font-size 0.125s linear, background-color 0.5s linear;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}:host yoo-img{z-index:1;display:var(--global-image-display);-ms-flex-align:var(--global-image-align);align-items:var(--global-image-align)}:host yoo-loader{background-color:var(--dark, #000000);-webkit-animation:loading 3s forwards;animation:loading 3s forwards}@-webkit-keyframes loading{from{opacity:1}to{opacity:0}}@keyframes loading{from{opacity:1}to{opacity:0}}:host #drawings{z-index:2}:host #src{z-index:1}:host #c-picker{position:absolute;z-index:4;width:var(--spacing-32, 2rem);height:var(--spacing-32, 2rem);border:1px solid var(--light, #ffffff);border-radius:50%;cursor:crosshair;-webkit-transition:opacity 0.5s ease-in-out;transition:opacity 0.5s ease-in-out;will-change:transform}:host #c-picker[hidden]{opacity:0}:host #overlay{z-index:5;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;color:var(--light, #ffffff);font-size:var(--font-size-20, 1.25rem);background-color:var(--dark-40, rgba(0, 0, 0, 0.4));-webkit-transition:background-color 5s ease-in-out;transition:background-color 5s ease-in-out}:host #annotations{position:relative;top:0;margin:auto}:host #overlay,:host canvas,:host yoo-img{position:absolute}:host footer{position:absolute;bottom:-3rem;left:50%;z-index:6;width:100%;margin-bottom:var(--safe-area-inset-bottom);overflow-x:auto;-webkit-transform:translateX(-50%);transform:translateX(-50%);opacity:0}:host footer yoo-color-selector{margin:0 auto;padding-left:var(--spacing-16, 1rem)}:host footer.active{bottom:0;opacity:1}:host footer.has-description{-webkit-transform:inherit;transform:inherit}:host footer .description-container{color:var(--stable, #adadad);text-align:center}:host([animated]) footer{-webkit-transition:all 0.5s linear;transition:all 0.5s linear}:host([display=standard]){-ms-scroll-chaining:none;overscroll-behavior:none}:host([display=preview]) yoo-img{--border-radius:var(--img-radius);-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}";
 
 const YooPhotoEditorComponent = class {
   constructor(hostRef) {
@@ -217,15 +220,12 @@ const YooPhotoEditorComponent = class {
     this.savedDots = [];
     this.isTextCreateMode = false;
     this.isColorPickerMode = false;
-    this.isViewSwitching = false;
     this.hasAnnotationBeenCreated = false;
     this.hasSliderBeenReleased = false;
     this.hasPencilBeenReleased = false;
     this.hasDotBeenSaved = false;
     this.hasDoneBeenClicked = false;
     this.hasDiscardBeenClicked = false;
-    this.hasKeyboardOpened = false;
-    this.hasZoomSetup = false;
     this.hasImageBeenCleaned = false;
     this.hasInvalidDrawings = false;
     this.color = 'success';
@@ -260,16 +260,12 @@ const YooPhotoEditorComponent = class {
     this.hasExtraActions && (this.mode = 'extras');
   }
   onDrawingsChanged() {
-    if (this.hasZoomSetup) {
-      this.displayDrawings();
-    }
+    this.displayDrawings();
   }
   onReadonlyChanged() {
-    this.hasKeyboardOpened = false;
     this.blockMoves.emit(!this.isReadonly);
     this.hasBackButton = this.isReadonly;
     this.hasDiscardBeenClicked = false;
-    this.isViewSwitching = false;
     this.switchMode();
   }
   async onSrcChanged() {
@@ -291,15 +287,6 @@ const YooPhotoEditorComponent = class {
       }
     });
   }
-  get keyboardActions() {
-    return {
-      DidHide: async () => await this.displayDrawings(this.currentDrawings),
-      DidShow: async () => {
-        this.hasKeyboardOpened = true;
-        await this.displayDrawings(this.currentDrawings);
-      }
-    };
-  }
   get hostBounds() {
     return photoEditor_helpers.getBoundingClient(this.host);
   }
@@ -439,7 +426,8 @@ const YooPhotoEditorComponent = class {
   get currentDrawings() {
     var _a;
     try {
-      return (_a = this.canvasDrawingsElement) === null || _a === void 0 ? void 0 : _a.toDataURL();
+      const canvasData = (_a = this.canvasDrawingsElement) === null || _a === void 0 ? void 0 : _a.toDataURL();
+      return index$1.isBase64(canvasData) ? canvasData : '';
     }
     catch (err) {
       return '';
@@ -469,7 +457,6 @@ const YooPhotoEditorComponent = class {
               this.switchBackToExtras();
             }
             else {
-              this.isLoading = false;
               typeof this.closeHandler === 'function' ? this.closeHandler({
                 drawings: this.drawings,
                 annotations: this.annotations
@@ -482,6 +469,7 @@ const YooPhotoEditorComponent = class {
         var _a;
         (_a = this.canvasContext) === null || _a === void 0 ? void 0 : _a.clearRect(0, 0, this.canvasDrawingsElement.width, this.canvasDrawingsElement.height);
         this.annotations = [];
+        this.drawings = null;
         this.hasImageBeenCleaned = true;
         this.toggleSaveButton(true);
       },
@@ -546,6 +534,7 @@ const YooPhotoEditorComponent = class {
     this.imageSize = null;
     this.isLoading = true;
     await this.getImageSize();
+    this.isLoading = false;
   }
   async hideAllTooltips() {
     photoEditor_helpers.hideAllDotTooltips(this.dotElements);
@@ -561,10 +550,6 @@ const YooPhotoEditorComponent = class {
   }
   componentShouldUpdate(...args) {
     const [newValue, , propName] = args;
-    if (this.isViewSwitching) {
-      this.isLoading = false;
-      this.isReadonly = true;
-    }
     if (['mode', 'isReadonly'].includes(propName)) {
       this.hasDoneBeenClicked = newValue === 'tools';
       this.toggleSaveButton();
@@ -572,7 +557,6 @@ const YooPhotoEditorComponent = class {
     }
   }
   disconnectedCallback() {
-    this.toggleKeyboardListeners(false);
     !this.isPreview && index$1.setStatusBarDarkMode(false);
     [this.viewObserverSwitch,
       this.canvasDrawingsObserver,
@@ -582,7 +566,6 @@ const YooPhotoEditorComponent = class {
   initEditor() {
     this.initResizeObserver();
     this.initMutationObservers();
-    this.toggleKeyboardListeners(true);
     !this.isPreview && index$1.setStatusBarDarkMode(true);
     this.savedAnnotationElements = lodash.cloneDeep(this.annotationElements);
     this.showSaveInitial && getActionButton().validate.classList.add('active');
@@ -607,13 +590,15 @@ const YooPhotoEditorComponent = class {
     const { width, height } = this.maxViewport;
     let imgSize = await index$1.getImageSize(this.finalSrc, !this.isPreview ? this.alertInvalidUrl.bind(this) : () => this.closePhotoEditor());
     imgSize.width > this.maxImageSize.width && (imgSize = await index$1.getResizedImageSize({ imgSize, maxWidth: this.maxImageSize.width, maxHeight: this.maxImageSize.height }));
-    const imgOptions = { imgSize, maxWidth: width, maxHeight: height };
-    const imgResizedSize = await index$1.getResizedImageSize(imgOptions);
-    const imgScaleFactor = await index$1.getImageScaleFactor(imgOptions);
     this.imageSize = {
       natural: imgSize,
-      resized: imgResizedSize,
-      scaleFactor: imgScaleFactor
+      scaleFactor: await index$1.getImageScaleFactor({ imgSize, maxWidth: width, maxHeight: height }),
+      get resized() {
+        return {
+          width: this.natural.width * this.scaleFactor,
+          height: this.natural.height * this.scaleFactor
+        };
+      }
     };
   }
   async prepareEditor() {
@@ -627,25 +612,25 @@ const YooPhotoEditorComponent = class {
   }
   updateEditor() {
     photoEditor_helpers.setDotIndexes(this.dotElements);
+    this.toggleDraggableAnnotations();
     if (!this.isReadonly) {
       this.showActiveTooltip();
       this.toggleShowNavbar(this.navbarVisiblity !== 'hidden');
-      this.toggleDraggableAnnotations();
-      this.updateDraggableBoundings();
       formInputHelpers.focusContentEditable(this.activeElement);
       if (this.hasAnnotationBeenCreated) {
         this.attachNewAnnotation();
       }
     }
+    else {
+      this.clampAnnotationsPosition();
+    }
   }
   initMutationObservers() {
     var _a, _b, _c;
     this.viewObserverSwitch = new MutationObserver(entries => {
-      entries.forEach(async ({ addedNodes, removedNodes }) => {
-        if ([addedNodes === null || addedNodes === void 0 ? void 0 : addedNodes[0], removedNodes === null || removedNodes === void 0 ? void 0 : removedNodes[0]].map(e => e === null || e === void 0 ? void 0 : e['id']).includes('src')) {
-          this.toggleDraggableAnnotations();
-          this.updateDraggableBoundings();
-          await photoEditor_helpers.drawImageOnCanvas(this.finalSrc, this.canvasSrcElement);
+      entries.forEach(async ({ addedNodes }) => {
+        if ((addedNodes === null || addedNodes === void 0 ? void 0 : addedNodes[0]) && addedNodes[0]['id'] === 'src' && addedNodes[0].tagName === 'CANVAS') {
+          await photoEditor_helpers.drawImageOnCanvas(this.finalSrc, addedNodes[0]);
         }
       });
     });
@@ -668,11 +653,6 @@ const YooPhotoEditorComponent = class {
     (_b = this.canvasDrawingsObserver) === null || _b === void 0 ? void 0 : _b.observe(this.canvasDrawingsElement, { attributes: true });
     (_c = this.viewObserverSwitch) === null || _c === void 0 ? void 0 : _c.observe(this.zoomElement, { childList: true });
   }
-  toggleKeyboardListeners(add) {
-    if (index$1.isNativeMobile() && !this.isPreview) {
-      ['DidHide', 'DidShow'].forEach((event) => window[`${add ? 'add' : 'remove'}EventListener`](`keyboard${event}`, this.keyboardActions[event]));
-    }
-  }
   toggleShowNavbar(show = true) {
     var _a;
     if (this.navbarVisiblity !== 'disabled' && !this.isPreview && this.navBarElement) {
@@ -703,6 +683,10 @@ const YooPhotoEditorComponent = class {
     const shouldClose = await index$1.showAlert({ header: 'ERROR', buttonText: [index$1.translate('CONTINUE'), index$1.translate('CLOSE')], message: index$1.translate('INVALIDURLBODY') });
     shouldClose ? this.closePhotoEditor() : (this.isLoading = false);
   }
+  clampAnnotationsPosition() {
+    var _a;
+    (_a = this.annotationElements) === null || _a === void 0 ? void 0 : _a.forEach(element => photoEditor_helpers.setAnnotationPositionToClosestEdge(element, this.imageBounds));
+  }
   pushDrawings() {
     if (!this.drawingsStack.includes(this.currentDrawings)) {
       this.drawingsStackIndex++;
@@ -757,13 +741,15 @@ const YooPhotoEditorComponent = class {
   getDraggableActions(annotationElement) {
     let isDeleting = false;
     if (annotationElement) {
-      const pressAction = (coords) => {
+      const pressAction = ({ x, y, applyBounds, update }) => {
         var _a, _b, _c;
+        applyBounds(this.host);
+        update(true);
         this.activeAnnotation = photoEditor_helpers.getAnnotation(annotationElement === null || annotationElement === void 0 ? void 0 : annotationElement.id, this.annotations);
         this.activeAnnotation = photoEditor_helpers.updateAnnotationLocal(this.activeAnnotation, {
           transform: {
             current: ((_c = (_b = (_a = this.activeAnnotation) === null || _a === void 0 ? void 0 : _a._local) === null || _b === void 0 ? void 0 : _b.transform) === null || _c === void 0 ? void 0 : _c.current) || photoEditor_helpers.INIT_COORDS,
-            previous: coords
+            previous: { x, y }
           }
         });
       };
@@ -802,13 +788,13 @@ const YooPhotoEditorComponent = class {
           }
         }
         this.toggleSaveButton();
+        this.activeAnnotation = null;
       };
       const draggable = new index$1.Draggable(annotationElement, {
         type: 'x,y',
-        bounds: photoEditor_helpers.getAnnotationDraggableBounds(annotationElement, this.hostBounds),
         zIndexBoost: false,
         allowEventDefault: true,
-        onPress() { pressAction({ x: this.x, y: this.y }); },
+        onPress() { pressAction(this); },
         onDragStart: dragStartAction,
         onDrag: dragAction,
         onDragEnd() { dragEndAction({ x: this.x, y: this.y }); }
@@ -859,19 +845,6 @@ const YooPhotoEditorComponent = class {
       }
     }
   }
-  updateDraggableBoundings(annotationElement = this.activeElement) {
-    var _a;
-    if (annotationElement && this.imageBounds) {
-      const elementBounds = photoEditor_helpers.getBoundingClient(annotationElement);
-      const getRelativePosition = (direction) => this.imageBounds[direction === 'left' ? 'width' : 'height'] * (parseFloat(annotationElement.style[direction]) || 0) / 100;
-      (_a = index$1.Draggable.get(annotationElement)) === null || _a === void 0 ? void 0 : _a.applyBounds({
-        minX: 0 - (this.imageBounds.x - this.hostBounds.x) - getRelativePosition('left'),
-        maxX: this.imageBounds.width + this.imageBounds.x - this.hostBounds.x - elementBounds.width - getRelativePosition('left'),
-        minY: this.hostBounds.y - this.imageBounds.y + 44 - getRelativePosition('top'),
-        maxY: this.imageBounds.height + this.imageBounds.y - this.hostBounds.y - (elementBounds.height + 56) - getRelativePosition('top')
-      });
-    }
-  }
   switchMode(newMode = (this.hasExtraActions && this.isReadonly) ? 'extras' : 'tools') {
     if (newMode !== this.mode) {
       this.lastMode = this.mode;
@@ -993,12 +966,14 @@ const YooPhotoEditorComponent = class {
     !this.isDrawMode && this.changeColor();
   }
   leaveColorPickerMode() {
-    this.isColorPickerMode = false;
-    this.toggleAnnotationsVisibility(true);
-    this.canvasSrcElement.style.removeProperty('z-index');
-    this.cursorPickerElement.setAttribute('hidden', 'true');
-    this.colorSelectorElement.selectedColor = this.color;
-    !this.isDrawMode && this.changeColor();
+    if (this.colorSelectorElement) {
+      this.isColorPickerMode = false;
+      this.toggleAnnotationsVisibility(true);
+      this.canvasSrcElement.style.removeProperty('z-index');
+      this.cursorPickerElement.setAttribute('hidden', 'true');
+      this.colorSelectorElement.selectedColor = this.color;
+      !this.isDrawMode && this.changeColor();
+    }
   }
   onPickColor() {
     this.isColorPickerMode = true;
@@ -1130,7 +1105,7 @@ const YooPhotoEditorComponent = class {
   }
   async switchBackToExtras() {
     setTimeout(async () => {
-      this.isViewSwitching = true;
+      this.isReadonly = true;
       if (this.changes.drawings || this.hasImageBeenCleaned) {
         this.drawings = this.hasImageBeenCleaned ? '' : await this.getDrawingsUrl();
         this.drawingsStackIndex = -1;
@@ -1176,7 +1151,6 @@ const YooPhotoEditorComponent = class {
         // Main Actions
         case photoEditor_helpers.EEditorActions.typeTool:
           this.enterEditorMode('text');
-          this.hasKeyboardOpened = false;
           break;
         case photoEditor_helpers.EEditorActions.brush:
           this.enterEditorMode('draw');
@@ -1271,14 +1245,14 @@ const YooPhotoEditorComponent = class {
       annotations: photoEditor_helpers.removeLocalsFromAnnotations(this.annotations)
     };
     this.saveChanges.emit(savedChanges);
+    await Promise.all((_a = this.annotationElements) === null || _a === void 0 ? void 0 : _a.map(e => index$1.gsapSet(e, { clearProps: 'transform' })));
     if (this.hasExtraActions && !this.showSaveInitial && !this.submitButton) {
       this.switchBackToExtras();
     }
     else {
-      await Promise.all((_a = this.annotationElements) === null || _a === void 0 ? void 0 : _a.map(e => index$1.gsapSet(e, { clearProps: 'transform' })));
-      this.isLoading = false;
       ((_b = this.submitButton) === null || _b === void 0 ? void 0 : _b.handler) ? this.submitButton.handler(savedChanges) : this.closePhotoEditor(savedChanges);
     }
+    this.isLoading = false;
   }
   done() {
     var _a, _b, _c;
@@ -1404,9 +1378,8 @@ const YooPhotoEditorComponent = class {
       } });
   }
   renderDot(dot) {
-    var _a;
     const disableTooltip = this.isPreview && !this.isImageZoomable;
-    return index.h(Dot, { annotation: dot, readonly: this.isReadonly, imageSize: (_a = this.imageSize) === null || _a === void 0 ? void 0 : _a.resized, isWeb: index$1.isWeb(this.host), disableTooltip: disableTooltip, tooltipProps: { showOnCreate: !disableTooltip && this.isDotMode }, hidden: this.isLoading, onAnnotationClick: (ev) => this.clickAnnotation(ev, dot), onDotSave: () => this.unfocusAnnotation() });
+    return index.h(Dot, { annotation: dot, readonly: this.isReadonly, isWeb: index$1.isWeb(this.host), disableTooltip: disableTooltip, tooltipProps: { showOnCreate: !disableTooltip && this.isDotMode }, hidden: this.isLoading, onAnnotationClick: (ev) => this.clickAnnotation(ev, dot), onDotSave: () => this.unfocusAnnotation() });
   }
   renderOverlay() {
     return this.isCreateMode && (index.h("div", { id: "overlay", style: this.imageSizeStyle.resized, onClick: (ev) => this.overlayClick(ev) }, this.isDotCreateMode && index.h("div", null, index$1.translate('TAPTOINSERTCOMMENT')), this.isTextCreateMode && this.renderTextEditor()));
@@ -1422,18 +1395,14 @@ const YooPhotoEditorComponent = class {
     return index.h("canvas", { id: "src", onClick: (ev) => ev.preventDefault(), ref: el => this.canvasSrcElement = el, ...this.computedImageSize });
   }
   renderImage() {
-    var _a, _b, _c, _d, _e;
+    var _a, _b;
+    const { width, height } = ((_a = this.imageSize) === null || _a === void 0 ? void 0 : _a.resized) || {};
     return (index.h("yoo-img", { instant: true, id: "src", src: this.finalSrc, ignoreHeight: true, ignoreWidth: true, disableAspectRatioCalc: true, allowCloudinary: false, ...((this.isPreview && !this.isImageZoomable) && {
-        cloudinaryOptions: {
-          width: (_b = (_a = this.imageSize) === null || _a === void 0 ? void 0 : _a.resized) === null || _b === void 0 ? void 0 : _b.width,
-          height: (_d = (_c = this.imageSize) === null || _c === void 0 ? void 0 : _c.resized) === null || _d === void 0 ? void 0 : _d.height,
-          noRatio: true,
-          fit: true
-        }
-      }), ref: el => this.imageElement = el, style: {
+        cloudinaryOptions: { width, height, noRatio: true, fit: true }
+      }), onLoaded: () => this.isLoading = false, ref: el => this.imageElement = el, style: {
         ...this.computedImageSizeStyle,
         ...(this.isImageZoomable && {
-          transform: `scale(${(_e = this.imageSize) === null || _e === void 0 ? void 0 : _e.scaleFactor})`
+          transform: `scale(${(_b = this.imageSize) === null || _b === void 0 ? void 0 : _b.scaleFactor})`
         })
       } }));
   }
@@ -1445,12 +1414,7 @@ const YooPhotoEditorComponent = class {
   }
   renderContent() {
     const { scaleFactor } = this.imageSize || {};
-    return (index.h("yoo-zoom", { maxScale: this.isPreview ? scaleFactor : 1, allowWheelGesture: false, initScale: scaleFactor, minScale: scaleFactor, disabled: !this.isImageZoomable, hidden: this.isLoading, animated: this.isReadonly && !this.isPreview, ref: e => this.zoomElement = e, references: ['#src', '#drawings'], disableZoomOnSelectors: ['.annotation'], onSetup: async () => {
-        if (!this.hasKeyboardOpened) {
-          this.hasZoomSetup = true;
-          this.isLoading = false;
-        }
-      }, ...{ mode: this.mode }, onZoom: (ev) => this.onImageZoom(ev) }, this.renderOverlay(), this.renderDrawingsCanvas(), this.isReadonly ? this.renderImage() : this.renderSrcCanvas(), this.renderCursorPicker(), this.renderAnnotations()));
+    return (index.h("yoo-zoom", { maxScale: this.isPreview ? scaleFactor : 1, allowWheelGesture: false, initScale: scaleFactor, minScale: scaleFactor, disabled: !this.isImageZoomable, hidden: this.isLoading, animated: this.isReadonly && !this.isPreview, ref: e => this.zoomElement = e, references: ['#src', '#drawings'], disableZoomOnSelectors: ['.annotation'], ...{ mode: this.mode }, onZoom: (ev) => this.onImageZoom(ev) }, this.renderOverlay(), this.renderDrawingsCanvas(), this.isReadonly ? this.renderImage() : this.renderSrcCanvas(), this.renderCursorPicker(), this.renderAnnotations()));
   }
   renderLoader() {
     return this.isLoading && index.h("yoo-loader", { class: "absolute", size: "large" });