@yoobic/yobi 8.6.35 → 8.6.37

package/dist/design-system/yoo-mission-heading.entry.js

@@ -1,8 +1,8 @@
 import { r as registerInstance, f as forceUpdate, h, e as Host, g as getElement } from './index-2cf5b950.js';
-import { cA as isIonic, t as translate, a0 as translateMulti } from './index-0a31764b.js';
-import { e as getMissionProgress, c as getMissionTags, d as getMissionUniqueKey } from './missions-helpers-89b72c6e.js';
-import { g as getAppContext } from './common-helpers-f4f92196.js';
-import { M as MissionLockedBanner } from './mission-locked-banner-167e076a.js';
+import { cA as isIonic, t as translate, a0 as translateMulti } from './index-a54080c5.js';
+import { e as getMissionProgress, c as getMissionTags, d as getMissionUniqueKey } from './missions-helpers-3d27e644.js';
+import { g as getAppContext } from './common-helpers-b596408a.js';
+import { M as MissionLockedBanner } from './mission-locked-banner-e7c68650.js';
 import './lodash-cd4a9ba3.js';
 import './_commonjsHelpers-f4d11124.js';
 import './index-ee2b347f.js';

package/dist/design-system/yoo-mission-score.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, i as createEvent, h, e as Host } from './index-2cf5b950.js';
-import { t as translate, a0 as translateMulti } from './index-0a31764b.js';
+import { t as translate, a0 as translateMulti } from './index-a54080c5.js';
 import './lodash-cd4a9ba3.js';
 import './_commonjsHelpers-f4d11124.js';
 import './index-ee2b347f.js';

package/dist/design-system/yoo-mission-todo.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, i as createEvent, f as forceUpdate, h, e as Host } from './index-2cf5b950.js';
-import { c as cleanupTodoSlides } from './operation-helpers-9a26a5f8.js';
+import { c as cleanupTodoSlides } from './operation-helpers-6e7db994.js';
 import { i as isNil } from './lodash-cd4a9ba3.js';
-import './index-0a31764b.js';
+import './index-a54080c5.js';
 import './_commonjsHelpers-f4d11124.js';
 import './index-ee2b347f.js';
 

package/dist/design-system/yoo-mobile-tabbar-more.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, i as createEvent, h, e as Host } from './index-2cf5b950.js';
-import { t as translate } from './index-0a31764b.js';
+import { t as translate } from './index-a54080c5.js';
 import './lodash-cd4a9ba3.js';
 import './_commonjsHelpers-f4d11124.js';
 import './index-ee2b347f.js';

package/dist/design-system/yoo-mobile-tabbar.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, i as createEvent, f as forceUpdate, h, e as Host, g as getElement } from './index-2cf5b950.js';
 import { P as IRoute } from './index-ee2b347f.js';
-import { a0 as translateMulti, t as translate } from './index-0a31764b.js';
-import { g as getAppContext } from './common-helpers-f4f92196.js';
+import { a0 as translateMulti, t as translate } from './index-a54080c5.js';
+import { g as getAppContext } from './common-helpers-b596408a.js';
 import { o as isNumber, p as isString } from './lodash-cd4a9ba3.js';
 import './_commonjsHelpers-f4d11124.js';
 

package/dist/design-system/yoo-modal-controller.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance } from './index-2cf5b950.js';
-import { r as removeLastOverlay, c as createOverlay, d as dismissOverlay } from './overlays-f550cfec.js';
-import './index-0a31764b.js';
+import { r as removeLastOverlay, c as createOverlay, d as dismissOverlay } from './overlays-700aabe7.js';
+import './index-a54080c5.js';
 import './lodash-cd4a9ba3.js';
 import './_commonjsHelpers-f4d11124.js';
 import './index-ee2b347f.js';

package/dist/design-system/yoo-modal.entry.js

@@ -1,11 +1,11 @@
 import { r as registerInstance, i as createEvent, h, e as Host, g as getElement } from './index-2cf5b950.js';
 import { _ as FullscreenImportantModalClass } from './index-ee2b347f.js';
-import { y as isWeb, b5 as gsapTo, B as findDevice, dd as MODAL_BASE_ZINDEX, b4 as gsapSet, df as isAnimationsDisabled, de as fadeScaleAnimation, db as present, dc as dismiss, b7 as Draggable, w as getModalAnimation, dE as getDialogPosition, C as isRTL, m as isSafari, bA as isOffline, D as isIphoneX, a6 as getSession } from './index-0a31764b.js';
-import { l as lifecycleEvents, q as querySelectorDeep, g as getAppContext } from './common-helpers-f4f92196.js';
-import { B as BACKDROP, e as eventMethod } from './overlays-f550cfec.js';
-import { c as createThemedClasses, g as getClassMap } from './theme-70bd714b.js';
+import { y as isWeb, b5 as gsapTo, B as findDevice, dd as MODAL_BASE_ZINDEX, b4 as gsapSet, df as isAnimationsDisabled, de as fadeScaleAnimation, db as present, dc as dismiss, b7 as Draggable, w as getModalAnimation, dE as getDialogPosition, C as isRTL, m as isSafari, bA as isOffline, D as isIphoneX, a6 as getSession } from './index-a54080c5.js';
+import { l as lifecycleEvents, q as querySelectorDeep, g as getAppContext } from './common-helpers-b596408a.js';
+import { B as BACKDROP, e as eventMethod } from './overlays-700aabe7.js';
+import { c as createThemedClasses, g as getClassMap } from './theme-e7156c94.js';
 import { V as inRange, $ as debounce } from './lodash-cd4a9ba3.js';
-import { m as modalAnimationFactory } from './modal-animations-0386a58b.js';
+import { m as modalAnimationFactory } from './modal-animations-fa18b239.js';
 import './_commonjsHelpers-f4d11124.js';
 
 async function attachComponent(delegate, container, component, cssClasses, componentProps) {

package/dist/design-system/yoo-navbar.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, e as Host, g as getElement } from './index-2cf5b950.js';
-import { C as isRTL, a6 as getSession } from './index-0a31764b.js';
-import { q as querySelectorDeep, g as getAppContext } from './common-helpers-f4f92196.js';
+import { C as isRTL, a6 as getSession } from './index-a54080c5.js';
+import { q as querySelectorDeep, g as getAppContext } from './common-helpers-b596408a.js';
 import { g as getElementDimensions } from './dimensions-helpers-74309fae.js';
 import './lodash-cd4a9ba3.js';
 import './_commonjsHelpers-f4d11124.js';

package/dist/design-system/yoo-numbers-display.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h } from './index-2cf5b950.js';
-import { t as translate } from './index-0a31764b.js';
-import { m as filterDuplicateItems } from './common-helpers-f4f92196.js';
+import { t as translate } from './index-a54080c5.js';
+import { m as filterDuplicateItems } from './common-helpers-b596408a.js';
 import { o as isNumber } from './lodash-cd4a9ba3.js';
 import './_commonjsHelpers-f4d11124.js';
 import './index-ee2b347f.js';

package/dist/design-system/yoo-photo-editor.entry.js

@@ -1,24 +1,27 @@
 import { h, r as registerInstance, i as createEvent, f as forceUpdate, e as Host, g as getElement$1 } from './index-2cf5b950.js';
-import { eS as getContrastColorName, H as getCssColor, t as translate, b as isNativeMobile, fO as getTransformInfos, fP as getMaxViewPortImage, y as isWeb, j as closeModal, dD as resizeObserve, cM as setStatusBarDarkMode, S as ScreenOrientation, bz as getMedia, v as cleanupWKWebViewFilePath, fQ as getImageSize, dP as getResizedImageSize, fR as getImageScaleFactor, M as getAsyncExtraData, aj as showAlert, b7 as Draggable, b5 as gsapTo, cs as vibrateHapticMedium, E as isIOS, af as enableKeyboardResize, bC as scaleUpAnimation, b4 as gsapSet, b9 as getContrastColor, aF as showContextMenu, cn as showActionSheet } from './index-0a31764b.js';
-import './index-80a8a7d5.js';
-import { a as isAnnotationValid, e as isAnnotationDeleted, b as getElement, o as isAnnotationFocused, i as isAnnotationEmpty, n as isElementInsideContainer, d as getPointerCoordinates, f as createBaseAnnotation } from './annotations-helpers-20068c12.js';
-import { v as cloudinary, g as getAppContext } from './common-helpers-f4f92196.js';
-import { k as getAnnotationStyle, i as saveTooltipContent, B as BUTTONS_CONFIG, A as ANIMATION_DELAY, l as isCanvasBlank, m as getPredefinedTexts, n as getBoundingClient, b as getDotToolTipElement, g as getDotInnerElement, S as SLIDER_THRESHOLD, L as LOADING_DELAY, h as hideAllDotTooltips, p as prepareAnnotationsData, s as setDotIndexes, o as drawImageOnCanvas, q as focusAnnotation, t as getAnnotation, u as updateAnnotationLocal, I as INIT_COORDS, v as setAnnotationPositionToClosestEdge, w as getAnnotationDraggableBounds, x as getFormattedAnnotationSize, y as getAbsoluteCenter, z as getRelativeCenter, C as showPredefinedTextsDialog, c as createDot, D as DOT_RADIUS, E as removeLocalsFromAnnotations, F as EEditorActions, a as showDotTooltip, G as formatAnnotationsForExport, H as deCenterAnnotation } from './photo-editor.helpers-5d62c9b4.js';
-import { k as focusContentEditable } from './form-input-helpers-c4bbb638.js';
+import { eS as getContrastColorName, H as getCssColor, t as translate, b as isNativeMobile, fP as getTransformInfos, cl as isBase64, fQ as getMaxViewPortImage, y as isWeb, j as closeModal, dD as resizeObserve, cM as setStatusBarDarkMode, S as ScreenOrientation, bz as getMedia, v as cleanupWKWebViewFilePath, fR as getImageSize, dP as getResizedImageSize, fS as getImageScaleFactor, M as getAsyncExtraData, aj as showAlert, b7 as Draggable, b5 as gsapTo, cs as vibrateHapticMedium, E as isIOS, af as enableKeyboardResize, bC as scaleUpAnimation, b4 as gsapSet, b9 as getContrastColor, aF as showContextMenu, cn as showActionSheet } from './index-a54080c5.js';
+import './index-94a3b28a.js';
+import { a as isAnnotationValid, g as getPercentPositionStyle, e as isAnnotationDeleted, b as getElement, n as isAnnotationFocused, i as isAnnotationEmpty, m as isElementInsideContainer, d as getPointerCoordinates, f as createBaseAnnotation } from './annotations-helpers-8f5b683c.js';
+import { v as cloudinary, g as getAppContext } from './common-helpers-b596408a.js';
+import { k as getTextBoxStyle, i as saveTooltipContent, B as BUTTONS_CONFIG, A as ANIMATION_DELAY, l as isCanvasBlank, m as getPredefinedTexts, n as getBoundingClient, b as getDotToolTipElement, g as getDotInnerElement, S as SLIDER_THRESHOLD, L as LOADING_DELAY, h as hideAllDotTooltips, p as prepareAnnotationsData, s as setDotIndexes, o as drawImageOnCanvas, q as setAnnotationPositionToClosestEdge, t as focusAnnotation, u as getAnnotation, v as updateAnnotationLocal, I as INIT_COORDS, w as getFormattedAnnotationSize, x as getAbsoluteCenter, y as getRelativeCenter, z as showPredefinedTextsDialog, c as createDot, D as DOT_RADIUS, C as removeLocalsFromAnnotations, E as EEditorActions, a as showDotTooltip, F as formatAnnotationsForExport, G as deCenterAnnotation } from './photo-editor.helpers-53679900.js';
+import { k as focusContentEditable } from './form-input-helpers-c04ef082.js';
 import { b as isFunction, B as isEqual, D as cloneDeep, t as capitalize } from './lodash-cd4a9ba3.js';
-import { g as getFromOfflineStorage } from './local-forage-8fb4c0ee.js';
+import { g as getFromOfflineStorage } from './local-forage-a02b5189.js';
 import './_commonjsHelpers-f4d11124.js';
 import './index-ee2b347f.js';
 
-const Textbox = ({ annotation, onAnnotationClick, onType, readonly, imageSize, hidden }) => {
+const Textbox = ({ annotation, onAnnotationClick, onType, imageSize, hidden }) => {
   return (isAnnotationValid(annotation) &&
-    h("div", { class: "annotation", key: annotation._id, id: annotation._id, ...{ hidden, type: 'textbox' }, style: getAnnotationStyle(annotation, { imageSize, readonly }), onClick: (ev) => onAnnotationClick(ev, annotation), onInput: (ev) => onType(ev) }, annotation.text.split('\n').map((lineValue) => h("div", null, lineValue))));
+    h("div", { class: "annotation", key: annotation._id, id: annotation._id, ...{ hidden, type: 'textbox' }, style: {
+        ...getPercentPositionStyle(annotation),
+        ...getTextBoxStyle(annotation.styles, imageSize.width)
+      }, onClick: (ev) => onAnnotationClick(ev, annotation), onInput: (ev) => onType(ev) }, annotation.text.split('\n').map((lineValue) => 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 = getContrastColorName((_a = annotation === null || annotation === void 0 ? void 0 : annotation.styles) === null || _a === void 0 ? void 0 : _a.backgroundColor);
   return !isAnnotationDeleted(annotation) &&
-    h("div", { class: "annotation", key: annotation._id, id: annotation._id, ...{ hidden, type: 'dot' }, style: getAnnotationStyle(annotation, { imageSize, readonly }) },
+    h("div", { class: "annotation", key: annotation._id, id: annotation._id, ...{ hidden, type: 'dot' }, style: getPercentPositionStyle(annotation) },
       h("yoo-tooltip", { placement: "top", content: annotation.text, ...{
           ...tooltipProps,
           size: isWeb ? 'small' : 'large',
@@ -198,7 +201,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) {
@@ -213,15 +216,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';
@@ -256,16 +256,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() {
@@ -287,15 +283,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 getBoundingClient(this.host);
   }
@@ -435,7 +422,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 isBase64(canvasData) ? canvasData : '';
     }
     catch (err) {
       return '';
@@ -465,7 +453,6 @@ const YooPhotoEditorComponent = class {
               this.switchBackToExtras();
             }
             else {
-              this.isLoading = false;
               typeof this.closeHandler === 'function' ? this.closeHandler({
                 drawings: this.drawings,
                 annotations: this.annotations
@@ -478,6 +465,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);
       },
@@ -542,6 +530,7 @@ const YooPhotoEditorComponent = class {
     this.imageSize = null;
     this.isLoading = true;
     await this.getImageSize();
+    this.isLoading = false;
   }
   async hideAllTooltips() {
     hideAllDotTooltips(this.dotElements);
@@ -557,10 +546,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();
@@ -568,7 +553,6 @@ const YooPhotoEditorComponent = class {
     }
   }
   disconnectedCallback() {
-    this.toggleKeyboardListeners(false);
     !this.isPreview && setStatusBarDarkMode(false);
     [this.viewObserverSwitch,
       this.canvasDrawingsObserver,
@@ -578,7 +562,6 @@ const YooPhotoEditorComponent = class {
   initEditor() {
     this.initResizeObserver();
     this.initMutationObservers();
-    this.toggleKeyboardListeners(true);
     !this.isPreview && setStatusBarDarkMode(true);
     this.savedAnnotationElements = cloneDeep(this.annotationElements);
     this.showSaveInitial && getActionButton().validate.classList.add('active');
@@ -603,13 +586,15 @@ const YooPhotoEditorComponent = class {
     const { width, height } = this.maxViewport;
     let imgSize = await getImageSize(this.finalSrc, !this.isPreview ? this.alertInvalidUrl.bind(this) : () => this.closePhotoEditor());
     imgSize.width > this.maxImageSize.width && (imgSize = await getResizedImageSize({ imgSize, maxWidth: this.maxImageSize.width, maxHeight: this.maxImageSize.height }));
-    const imgOptions = { imgSize, maxWidth: width, maxHeight: height };
-    const imgResizedSize = await getResizedImageSize(imgOptions);
-    const imgScaleFactor = await getImageScaleFactor(imgOptions);
     this.imageSize = {
       natural: imgSize,
-      resized: imgResizedSize,
-      scaleFactor: imgScaleFactor
+      scaleFactor: await getImageScaleFactor({ imgSize, maxWidth: width, maxHeight: height }),
+      get resized() {
+        return {
+          width: this.natural.width * this.scaleFactor,
+          height: this.natural.height * this.scaleFactor
+        };
+      }
     };
   }
   async prepareEditor() {
@@ -623,25 +608,25 @@ const YooPhotoEditorComponent = class {
   }
   updateEditor() {
     setDotIndexes(this.dotElements);
+    this.toggleDraggableAnnotations();
     if (!this.isReadonly) {
       this.showActiveTooltip();
       this.toggleShowNavbar(this.navbarVisiblity !== 'hidden');
-      this.toggleDraggableAnnotations();
-      this.updateDraggableBoundings();
       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 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 drawImageOnCanvas(this.finalSrc, addedNodes[0]);
         }
       });
     });
@@ -664,11 +649,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 (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) {
@@ -699,6 +679,10 @@ const YooPhotoEditorComponent = class {
     const shouldClose = await showAlert({ header: 'ERROR', buttonText: [translate('CONTINUE'), translate('CLOSE')], message: translate('INVALIDURLBODY') });
     shouldClose ? this.closePhotoEditor() : (this.isLoading = false);
   }
+  clampAnnotationsPosition() {
+    var _a;
+    (_a = this.annotationElements) === null || _a === void 0 ? void 0 : _a.forEach(element => setAnnotationPositionToClosestEdge(element, this.imageBounds));
+  }
   pushDrawings() {
     if (!this.drawingsStack.includes(this.currentDrawings)) {
       this.drawingsStackIndex++;
@@ -753,13 +737,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 = getAnnotation(annotationElement === null || annotationElement === void 0 ? void 0 : annotationElement.id, this.annotations);
         this.activeAnnotation = 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) || INIT_COORDS,
-            previous: coords
+            previous: { x, y }
           }
         });
       };
@@ -798,13 +784,13 @@ const YooPhotoEditorComponent = class {
           }
         }
         this.toggleSaveButton();
+        this.activeAnnotation = null;
       };
       const draggable = new Draggable(annotationElement, {
         type: 'x,y',
-        bounds: 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 }); }
@@ -855,19 +841,6 @@ const YooPhotoEditorComponent = class {
       }
     }
   }
-  updateDraggableBoundings(annotationElement = this.activeElement) {
-    var _a;
-    if (annotationElement && this.imageBounds) {
-      const elementBounds = getBoundingClient(annotationElement);
-      const getRelativePosition = (direction) => this.imageBounds[direction === 'left' ? 'width' : 'height'] * (parseFloat(annotationElement.style[direction]) || 0) / 100;
-      (_a = 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;
@@ -989,12 +962,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;
@@ -1126,7 +1101,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;
@@ -1172,7 +1147,6 @@ const YooPhotoEditorComponent = class {
         // Main Actions
         case EEditorActions.typeTool:
           this.enterEditorMode('text');
-          this.hasKeyboardOpened = false;
           break;
         case EEditorActions.brush:
           this.enterEditorMode('draw');
@@ -1267,14 +1241,14 @@ const YooPhotoEditorComponent = class {
       annotations: removeLocalsFromAnnotations(this.annotations)
     };
     this.saveChanges.emit(savedChanges);
+    await Promise.all((_a = this.annotationElements) === null || _a === void 0 ? void 0 : _a.map(e => 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 => 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;
@@ -1400,9 +1374,8 @@ const YooPhotoEditorComponent = class {
       } });
   }
   renderDot(dot) {
-    var _a;
     const disableTooltip = this.isPreview && !this.isImageZoomable;
-    return h(Dot, { annotation: dot, readonly: this.isReadonly, imageSize: (_a = this.imageSize) === null || _a === void 0 ? void 0 : _a.resized, isWeb: isWeb(this.host), disableTooltip: disableTooltip, tooltipProps: { showOnCreate: !disableTooltip && this.isDotMode }, hidden: this.isLoading, onAnnotationClick: (ev) => this.clickAnnotation(ev, dot), onDotSave: () => this.unfocusAnnotation() });
+    return h(Dot, { annotation: dot, readonly: this.isReadonly, isWeb: 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 && (h("div", { id: "overlay", style: this.imageSizeStyle.resized, onClick: (ev) => this.overlayClick(ev) }, this.isDotCreateMode && h("div", null, translate('TAPTOINSERTCOMMENT')), this.isTextCreateMode && this.renderTextEditor()));
@@ -1418,18 +1391,14 @@ const YooPhotoEditorComponent = class {
     return 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 (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})`
         })
       } }));
   }
@@ -1441,12 +1410,7 @@ const YooPhotoEditorComponent = class {
   }
   renderContent() {
     const { scaleFactor } = this.imageSize || {};
-    return (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 (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 && h("yoo-loader", { class: "absolute", size: "large" });

package/dist/design-system/yoo-pivot-table.entry.js

@@ -1,13 +1,13 @@
 import { r as registerInstance, i as createEvent, h, g as getElement } from './index-2cf5b950.js';
-import { t as translate } from './index-0a31764b.js';
-import { g as getRenderer } from './grid-renderers-649f8b12.js';
+import { t as translate } from './index-a54080c5.js';
+import { g as getRenderer } from './grid-renderers-f4ce45d0.js';
 import { a as createCommonjsModule, c as commonjsGlobal } from './_commonjsHelpers-f4d11124.js';
 import { $ as debounce, D as cloneDeep, Y as assign, C as sortBy, B as isEqual } from './lodash-cd4a9ba3.js';
 import './index-ee2b347f.js';
-import './incentive-helpers-94537d6e.js';
-import './missions-helpers-89b72c6e.js';
-import './common-helpers-f4f92196.js';
-import './form-helpers-a0e4c777.js';
+import './incentive-helpers-c0109300.js';
+import './missions-helpers-3d27e644.js';
+import './common-helpers-b596408a.js';
+import './form-helpers-01e49f74.js';
 import './geolocation-helpers-6e76eea4.js';
 
 var domToImage = createCommonjsModule(function (module) {

package/dist/design-system/yoo-podium.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, i as createEvent, h, e as Host, j as getAssetPath, g as getElement } from './index-2cf5b950.js';
-import { H as getCssColor, C as isRTL, P as Cloudinary, y as isWeb, aa as getUserDisplayName, cK as updateSVGCustomColors } from './index-0a31764b.js';
+import { H as getCssColor, C as isRTL, P as Cloudinary, y as isWeb, aa as getUserDisplayName, cK as updateSVGCustomColors } from './index-a54080c5.js';
 import { o as isNumber, E as get } from './lodash-cd4a9ba3.js';
 import './_commonjsHelpers-f4d11124.js';
 import './index-ee2b347f.js';
@@ -203,7 +203,7 @@ const YooPodiumComponent = class {
   onBeforeInjectSVG(svgElement) {
     if (svgElement) {
       isWeb(this.host) && svgElement.setAttribute('height', window.innerHeight.toString());
-      svgElement.style.width = 'auto';
+      svgElement.style.width = '100%';
       const mainSVGElement = svgElement.querySelector('#main-svg');
       if (mainSVGElement) {
         PODIUM_POSITION.forEach((posObj) => {

package/dist/design-system/yoo-profile-list.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, i as createEvent, h, e as Host, g as getElement } from './index-2cf5b950.js';
-import { t as translate, at as copyToClipboard, bl as showToast, a5 as dateFormat, a6 as getSession, y as isWeb } from './index-0a31764b.js';
-import { g as getAppContext } from './common-helpers-f4f92196.js';
+import { t as translate, at as copyToClipboard, bl as showToast, a5 as dateFormat, a6 as getSession, y as isWeb } from './index-a54080c5.js';
+import { g as getAppContext } from './common-helpers-b596408a.js';
 import './lodash-cd4a9ba3.js';
 import './_commonjsHelpers-f4d11124.js';
 import './index-ee2b347f.js';

package/dist/design-system/yoo-profile-summary.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, i as createEvent, h, e as Host, g as getElement } from './index-2cf5b950.js';
-import { cZ as getDownloadAction, y as isWeb, t as translate, aa as getUserDisplayName } from './index-0a31764b.js';
-import { e as showPhotoEditor } from './common-helpers-f4f92196.js';
+import { cZ as getDownloadAction, y as isWeb, t as translate, aa as getUserDisplayName } from './index-a54080c5.js';
+import { e as showPhotoEditor } from './common-helpers-b596408a.js';
 import { o as isNumber } from './lodash-cd4a9ba3.js';
 import './_commonjsHelpers-f4d11124.js';
 import './index-ee2b347f.js';

package/dist/design-system/yoo-progress-bar.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, i as createEvent, h, e as Host, g as getElement } from './index-2cf5b950.js';
-import { df as isAnimationsDisabled, fU as Linear, b8 as gsapFromTo, t as translate } from './index-0a31764b.js';
-import { g as getAppContext } from './common-helpers-f4f92196.js';
+import { df as isAnimationsDisabled, fV as Linear, b8 as gsapFromTo, t as translate } from './index-a54080c5.js';
+import { g as getAppContext } from './common-helpers-b596408a.js';
 import { $ as debounce, W as clamp, a as isFinite } from './lodash-cd4a9ba3.js';
 import './_commonjsHelpers-f4d11124.js';
 import './index-ee2b347f.js';

package/dist/design-system/yoo-progress-loader.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, e as Host } from './index-2cf5b950.js';
-import { t as translate } from './index-0a31764b.js';
+import { t as translate } from './index-a54080c5.js';
 import './lodash-cd4a9ba3.js';
 import './_commonjsHelpers-f4d11124.js';
 import './index-ee2b347f.js';