@yoobic/yobi 8.7.3 → 8.7.5

package/dist/collection/feature-platform/login/login/login.css

@@ -112,8 +112,6 @@ ________________________________________________________________________________
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
 /* Text Direction - ltr / rtl
 $app-direction: multi | rtl | ltr | null (default)
 multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.
@@ -949,16 +947,10 @@ svg:not(:root) {
   .outer-login-container:not([is-whitelabel]) .main-content .login-sub-title {
     display: none;
   }
-  .outer-login-container.focused .login-sub-title {
-    transform: scale(1.2) translateX(10%);
-  }
 }
 .outer-login-container.emulate-preview:not([is-whitelabel]) .main-content .login-sub-title {
   display: none;
 }
-.outer-login-container.emulate-preview.focused .login-sub-title {
-  transform: scale(1.2) translateX(10%);
-}
 
 .outer-login-container .sidepanel {
   margin-inline-end: var(--spacing-64, 4rem);
@@ -1127,18 +1119,13 @@ svg:not(:root) {
   visibility: hidden !important;
 }
 .outer-input-container .inner-input-container input {
-  -webkit-box-sizing: border-box;
-  /* Safari <= 5 */
-  -moz-box-sizing: border-box;
-  /* Firefox <= 19 */
-  box-sizing: border-box;
   position: relative;
   display: block;
   flex: 1;
+  box-sizing: border-box;
   width: 100%;
   min-width: 0;
   padding: var(--spacing-08, 0.5rem);
-  padding-inline-start: var(--spacing-32, 2rem);
   color: inherit;
   font-weight: var(--font-weight-400, 400);
   font-size: var(--input-font-size);
@@ -1151,27 +1138,11 @@ svg:not(:root) {
   box-shadow: transparent 0 0 0 62.5rem inset;
   -webkit-appearance: none;
   appearance: none;
+  padding-inline-start: var(--spacing-32, 2rem);
   caret-color: var(--caret-color);
 }
-.outer-input-container .inner-input-container input::-webkit-input-placeholder {
+.outer-input-container .inner-input-container input::placeholder {
   color: var(--stable, #adadad);
-  font-weight: var(--font-weight-400, 400);
-  font-family: var(--font-family, "Varela Round", "Lato") !important;
-}
-.outer-input-container .inner-input-container input:-moz-placeholder {
-  color: var(--stable, #adadad);
-  font-weight: var(--font-weight-400, 400);
-  font-family: var(--font-family, "Varela Round", "Lato") !important;
-}
-.outer-input-container .inner-input-container input::-moz-placeholder {
-  color: var(--stable, #adadad);
-  font-weight: var(--font-weight-400, 400);
-  font-family: var(--font-family, "Varela Round", "Lato") !important;
-}
-.outer-input-container .inner-input-container input:-ms-input-placeholder {
-  color: var(--stable, #adadad);
-  font-weight: var(--font-weight-400, 400);
-  font-family: var(--font-family, "Varela Round", "Lato") !important;
 }
 .outer-input-container .inner-input-container input:focus {
   outline: none;
@@ -1236,16 +1207,7 @@ svg:not(:root) {
 .outer-input-container.medium .inner-input-container input {
   font-size: var(--font-size-14, 0.875rem);
 }
-.outer-input-container.medium .inner-input-container input::-webkit-input-placeholder {
-  font-size: var(--font-size-14, 0.875rem);
-}
-.outer-input-container.medium .inner-input-container input:-moz-placeholder {
-  font-size: var(--font-size-14, 0.875rem);
-}
-.outer-input-container.medium .inner-input-container input::-moz-placeholder {
-  font-size: var(--font-size-14, 0.875rem);
-}
-.outer-input-container.medium .inner-input-container input:-ms-input-placeholder {
+.outer-input-container.medium .inner-input-container input::placeholder {
   font-size: var(--font-size-14, 0.875rem);
 }
 
@@ -1273,16 +1235,7 @@ svg:not(:root) {
 .accent .inner-input-container input {
   color: var(--accent, #276ef1);
 }
-.accent .inner-input-container input::-webkit-input-placeholder {
-  color: var(--accent, #276ef1);
-}
-.accent .inner-input-container input:-moz-placeholder {
-  color: var(--accent, #276ef1);
-}
-.accent .inner-input-container input::-moz-placeholder {
-  color: var(--accent, #276ef1);
-}
-.accent .inner-input-container input:-ms-input-placeholder {
+.accent .inner-input-container input::placeholder {
   color: var(--accent, #276ef1);
 }
 
@@ -1302,16 +1255,7 @@ svg:not(:root) {
 .success .inner-input-container input {
   color: var(--success, #3aa76d);
 }
-.success .inner-input-container input::-webkit-input-placeholder {
-  color: var(--success, #3aa76d);
-}
-.success .inner-input-container input:-moz-placeholder {
-  color: var(--success, #3aa76d);
-}
-.success .inner-input-container input::-moz-placeholder {
-  color: var(--success, #3aa76d);
-}
-.success .inner-input-container input:-ms-input-placeholder {
+.success .inner-input-container input::placeholder {
   color: var(--success, #3aa76d);
 }
 
@@ -1331,16 +1275,7 @@ svg:not(:root) {
 .app-color .inner-input-container input {
   color: var(--app-color, #5a30f4);
 }
-.app-color .inner-input-container input::-webkit-input-placeholder {
-  color: var(--app-color, #5a30f4);
-}
-.app-color .inner-input-container input:-moz-placeholder {
-  color: var(--app-color, #5a30f4);
-}
-.app-color .inner-input-container input::-moz-placeholder {
-  color: var(--app-color, #5a30f4);
-}
-.app-color .inner-input-container input:-ms-input-placeholder {
+.app-color .inner-input-container input::placeholder {
   color: var(--app-color, #5a30f4);
 }
 
@@ -1360,16 +1295,7 @@ svg:not(:root) {
 .info .inner-input-container input {
   color: var(--info, #d84c96);
 }
-.info .inner-input-container input::-webkit-input-placeholder {
-  color: var(--info, #d84c96);
-}
-.info .inner-input-container input:-moz-placeholder {
-  color: var(--info, #d84c96);
-}
-.info .inner-input-container input::-moz-placeholder {
-  color: var(--info, #d84c96);
-}
-.info .inner-input-container input:-ms-input-placeholder {
+.info .inner-input-container input::placeholder {
   color: var(--info, #d84c96);
 }
 
@@ -1389,16 +1315,7 @@ svg:not(:root) {
 .warning .inner-input-container input {
   color: var(--warning, #ed6e33);
 }
-.warning .inner-input-container input::-webkit-input-placeholder {
-  color: var(--warning, #ed6e33);
-}
-.warning .inner-input-container input:-moz-placeholder {
-  color: var(--warning, #ed6e33);
-}
-.warning .inner-input-container input::-moz-placeholder {
-  color: var(--warning, #ed6e33);
-}
-.warning .inner-input-container input:-ms-input-placeholder {
+.warning .inner-input-container input::placeholder {
   color: var(--warning, #ed6e33);
 }
 
@@ -1418,16 +1335,7 @@ svg:not(:root) {
 .danger .inner-input-container input {
   color: var(--danger, #d44333);
 }
-.danger .inner-input-container input::-webkit-input-placeholder {
-  color: var(--danger, #d44333);
-}
-.danger .inner-input-container input:-moz-placeholder {
-  color: var(--danger, #d44333);
-}
-.danger .inner-input-container input::-moz-placeholder {
-  color: var(--danger, #d44333);
-}
-.danger .inner-input-container input:-ms-input-placeholder {
+.danger .inner-input-container input::placeholder {
   color: var(--danger, #d44333);
 }
 
@@ -1447,16 +1355,7 @@ svg:not(:root) {
 .dark .inner-input-container input {
   color: var(--dark, #000000);
 }
-.dark .inner-input-container input::-webkit-input-placeholder {
-  color: var(--dark, #000000);
-}
-.dark .inner-input-container input:-moz-placeholder {
-  color: var(--dark, #000000);
-}
-.dark .inner-input-container input::-moz-placeholder {
-  color: var(--dark, #000000);
-}
-.dark .inner-input-container input:-ms-input-placeholder {
+.dark .inner-input-container input::placeholder {
   color: var(--dark, #000000);
 }
 
@@ -1476,16 +1375,7 @@ svg:not(:root) {
 .stable-light .inner-input-container input {
   color: var(--stable-light, #f1f1f1);
 }
-.stable-light .inner-input-container input::-webkit-input-placeholder {
-  color: var(--stable-light, #f1f1f1);
-}
-.stable-light .inner-input-container input:-moz-placeholder {
-  color: var(--stable-light, #f1f1f1);
-}
-.stable-light .inner-input-container input::-moz-placeholder {
-  color: var(--stable-light, #f1f1f1);
-}
-.stable-light .inner-input-container input:-ms-input-placeholder {
+.stable-light .inner-input-container input::placeholder {
   color: var(--stable-light, #f1f1f1);
 }
 
@@ -1505,16 +1395,7 @@ svg:not(:root) {
 .stable .inner-input-container input {
   color: var(--stable, #adadad);
 }
-.stable .inner-input-container input::-webkit-input-placeholder {
-  color: var(--stable, #adadad);
-}
-.stable .inner-input-container input:-moz-placeholder {
-  color: var(--stable, #adadad);
-}
-.stable .inner-input-container input::-moz-placeholder {
-  color: var(--stable, #adadad);
-}
-.stable .inner-input-container input:-ms-input-placeholder {
+.stable .inner-input-container input::placeholder {
   color: var(--stable, #adadad);
 }
 
@@ -1534,15 +1415,6 @@ svg:not(:root) {
 .light .inner-input-container input {
   color: var(--light, #ffffff);
 }
-.light .inner-input-container input::-webkit-input-placeholder {
-  color: var(--light, #ffffff);
-}
-.light .inner-input-container input:-moz-placeholder {
-  color: var(--light, #ffffff);
-}
-.light .inner-input-container input::-moz-placeholder {
-  color: var(--light, #ffffff);
-}
-.light .inner-input-container input:-ms-input-placeholder {
+.light .inner-input-container input::placeholder {
   color: var(--light, #ffffff);
 }

package/dist/collection/feature-platform/menu/about/about.css

@@ -112,8 +112,6 @@ ________________________________________________________________________________
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
 /* Text Direction - ltr / rtl
 $app-direction: multi | rtl | ltr | null (default)
 multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.

package/dist/collection/feature-platform/menu/copyright/copyright.css

@@ -112,8 +112,6 @@ ________________________________________________________________________________
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
 /* Text Direction - ltr / rtl
 $app-direction: multi | rtl | ltr | null (default)
 multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.

package/dist/collection/feature-platform/menu/side-menu/side-menu.css

@@ -112,8 +112,6 @@ ________________________________________________________________________________
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
 /* Text Direction - ltr / rtl
 $app-direction: multi | rtl | ltr | null (default)
 multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.

package/dist/collection/feature-platform/menu/side-menu-tree/side-menu-tree.css

@@ -112,8 +112,6 @@ ________________________________________________________________________________
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
 /* Text Direction - ltr / rtl
 $app-direction: multi | rtl | ltr | null (default)
 multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.

package/dist/collection/feature-platform/menu/start-meeting-popup/start-meeting-popup.css

@@ -112,8 +112,6 @@ ________________________________________________________________________________
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
 /* Text Direction - ltr / rtl
 $app-direction: multi | rtl | ltr | null (default)
 multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.

package/dist/collection/feature-platform/menu/user-detail/user-detail.css

@@ -112,8 +112,6 @@ ________________________________________________________________________________
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
 /* Text Direction - ltr / rtl
 $app-direction: multi | rtl | ltr | null (default)
 multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.

package/dist/collection/feature-platform/menu/user-profile/user-profile.css

@@ -112,8 +112,6 @@ ________________________________________________________________________________
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
 /* Text Direction - ltr / rtl
 $app-direction: multi | rtl | ltr | null (default)
 multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.

package/dist/collection/feature-platform/menu/web-menu/web-menu.css

@@ -112,8 +112,6 @@ ________________________________________________________________________________
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
 /* Text Direction - ltr / rtl
 $app-direction: multi | rtl | ltr | null (default)
 multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.

package/dist/collection/utils/draggables/index.js

@@ -13,6 +13,7 @@ export function updateBounds(options) {
   const hostElement = options.host;
   const mainElement = (options === null || options === void 0 ? void 0 : options.containerElement) || ((_a = hostElement === null || hostElement === void 0 ? void 0 : hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('main'));
   if (mainElement) {
+    mainElement.classList.add('swiper-no-swiping');
     const { dragHandler, dragHandlerZone = dragHandler.parentElement, draggable } = options;
     const zonePosition = getComputedStyle(dragHandlerZone).position;
     const getBaseOuterOffset = (axis) => {
@@ -21,7 +22,9 @@ export function updateBounds(options) {
     };
     const getBaseInnerOffset = (axis) => {
       const offsetBound = `offset${axis === 'x' ? 'Left' : 'Top'}`;
-      return dragHandler[offsetBound] + getTransformInfos(dragHandlerZone)[axis === 'x' ? 'tsX' : 'tsY'] + (zonePosition !== 'static' ? dragHandlerZone[offsetBound] + mainElement[offsetBound] : 0);
+      return (dragHandler[offsetBound] +
+        getTransformInfos(dragHandlerZone)[axis === 'x' ? 'tsX' : 'tsY'] +
+        (zonePosition !== 'static' ? dragHandlerZone[offsetBound] + mainElement[offsetBound] : 0));
     };
     const getMin = (axis) => getBaseOuterOffset(axis) - getBaseInnerOffset(axis);
     const getMax = (axis) => {
@@ -29,24 +32,19 @@ export function updateBounds(options) {
       const innerOffset = getBaseInnerOffset(axis) + dragHandler[`offset${axis === 'x' ? 'Width' : 'Height'}`];
       return outerOffset - innerOffset;
     };
-    draggable.applyBounds({
-      maxY: getMax('y'),
-      maxX: getMax('x'),
-      minY: getMin('y'),
-      minX: getMin('x')
-    });
+    draggable.applyBounds({ maxY: getMax('y'), maxX: getMax('x'), minY: getMin('y'), minX: getMin('x') });
     draggable.update(true);
   }
 }
 function getComponentProps(hostElement) {
   const propsObject = {};
-  hostElement && COMPONENT_PROPS.forEach((prop) => propsObject[prop] = hostElement[prop]);
+  hostElement && COMPONENT_PROPS.forEach((prop) => (propsObject[prop] = hostElement[prop]));
   return propsObject;
 }
 async function scale(scaleType, element) {
   const SCALE_TAG_COEFF = 1.065;
   const isScaledDown = scaleType === 'down';
-  await gsapTo(element, .35, { scale: isScaledDown ? 1 : SCALE_TAG_COEFF });
+  await gsapTo(element, 0.35, { scale: isScaledDown ? 1 : SCALE_TAG_COEFF });
   element.classList.toggle('active', !isScaledDown);
 }
 export async function scaleUpDown(element) {
@@ -74,11 +72,11 @@ export class Dropzone {
     return this.element.hasAttribute('hit');
   }
   get tagsId() {
-    return this.tagElements.map(e => e.id) || [];
+    return this.tagElements.map((e) => e.id) || [];
   }
   get tagsLimit() {
     const answers = this.element.getRootNode()['host']['answer'] || {};
-    return !this.isTagsZone && (Array.isArray(answers === null || answers === void 0 ? void 0 : answers[this.index]) && answers[this.index].length) || 1;
+    return (!this.isTagsZone && Array.isArray(answers === null || answers === void 0 ? void 0 : answers[this.index]) && answers[this.index].length) || 1;
   }
   get isTagsZone() {
     var _a;
@@ -98,7 +96,7 @@ export class Dropzone {
         const zoneBR = this.element.getBoundingClientRect();
         const calculateTagZoneHeight = window.innerHeight - (zoneBR.top + footerHeight);
         if (calculateTagZoneHeight) {
-          this.element.style.height = `${calculateTagZoneHeight * .75}px`;
+          this.element.style.height = `${calculateTagZoneHeight * 0.75}px`;
         }
       }
     }
@@ -109,20 +107,20 @@ export class Dropzones {
     this.zonesConfig = zonesConfig;
   }
   get tagsZone() {
-    return Dropzones.getZones(this.zonesConfig).find(zone => zone.id === 'zone-tags');
+    return Dropzones.getZones(this.zonesConfig).find((zone) => zone.id === 'zone-tags');
   }
   setTagsZoneOverflow(set) {
     var _a, _b;
     const { element } = this.tagsZone || {};
     if (element && ((_b = (_a = this.zonesConfig) === null || _a === void 0 ? void 0 : _a.tagZoneConfig) === null || _b === void 0 ? void 0 : _b.hasOverflow)) {
-      set ? element.style.overflow = 'hidden' : element.style.removeProperty('overflow');
+      set ? (element.style.overflow = 'hidden') : element.style.removeProperty('overflow');
     }
   }
   async hideOverflowingTagInZone(zoneElement, tagElement, onShowTag) {
     const { tagZoneConfig } = this.zonesConfig || {};
     if (tagElement && zoneElement && tagZoneConfig.hasOverflow) {
       const zonePadding = Math.round(parseFloat(getComputedStyle(zoneElement).padding)) / 2;
-      const isTagOverflowing = tagElement.offsetTop >= (zoneElement.offsetTop + zoneElement.offsetHeight - zonePadding);
+      const isTagOverflowing = tagElement.offsetTop >= zoneElement.offsetTop + zoneElement.offsetHeight - zonePadding;
       if (isTagOverflowing) {
         tagElement.setAttribute('inactive', 'true');
       }
@@ -141,9 +139,9 @@ export class Dropzones {
   }
   static getZones(config) {
     const { tagZoneConfig, dropZoneConfig, hostElement } = config;
-    return (Array.from(hostElement.shadowRoot.querySelectorAll('.dropzone')) || [])
-      .sort((a, b) => a.id > b.id ? 1 : -1)
-      .map((e, i) => new Dropzone(e.id === 'zone-tags' ? tagZoneConfig : dropZoneConfig, e, i)) || [];
+    return ((Array.from(hostElement.shadowRoot.querySelectorAll('.dropzone')) || [])
+      .sort((a, b) => (a.id > b.id ? 1 : -1))
+      .map((e, i) => new Dropzone(e.id === 'zone-tags' ? tagZoneConfig : dropZoneConfig, e, i)) || []);
   }
 }
 export class Tag {
@@ -166,7 +164,7 @@ export class Tag {
     return Dropzones.getZones(this.zonesConfig);
   }
   async reset() {
-    await this.dropToZone(this.zones.find(zone => zone.isTagsZone));
+    await this.dropToZone(this.zones.find((zone) => zone.isTagsZone));
   }
   isTagOverlapping(zone) {
     return Draggable.hitTest(this.element, zone.element, zone.config.threshold || 0);
@@ -183,20 +181,17 @@ export class Tag {
       }
     }
   }
+  destroy() {
+    var _a;
+    (_a = this.draggable) === null || _a === void 0 ? void 0 : _a.kill();
+  }
   createTagElement() {
     const { getColorTag, extraTagsClasses } = this.config;
     const { isTagsZone } = this.zone;
     const tagElement = document.createElement('yoo-tag');
     extraTagsClasses && tagElement.classList.add(extraTagsClasses);
-    !isTagsZone ? tagElement.classList.add('dropped') :
-      this.hostElement['animated'] && !tagElement.classList.contains('new') && (tagElement.style.opacity = '0');
-    return Object.assign(tagElement, {
-      id: this.id,
-      key: this.id,
-      innerHTML: translateMulti(this.value),
-      size: 'medium',
-      color: getColorTag(this.value, this.zone.index)
-    });
+    !isTagsZone ? tagElement.classList.add('dropped') : this.hostElement['animated'] && !tagElement.classList.contains('new') && (tagElement.style.opacity = '0');
+    return Object.assign(tagElement, { id: this.id, key: this.id, innerHTML: translateMulti(this.value), size: 'medium', color: getColorTag(this.value, this.zone.index) });
   }
   initDraggable() {
     let tagsZoneElements = [];
@@ -205,7 +200,7 @@ export class Tag {
     const { boundElement, clickToDrop, clickExtrasActions, pressExtrasActions, dragStartExtrasActions, resetExtrasActions, dragExtrasActions } = this.config || {};
     const clickOnTag = async () => {
       var _a;
-      const freeZones = this.zones.filter(zone => !(zone === null || zone === void 0 ? void 0 : zone.isTagsZone) && !(zone === null || zone === void 0 ? void 0 : zone.isDropZoneFull));
+      const freeZones = this.zones.filter((zone) => !(zone === null || zone === void 0 ? void 0 : zone.isTagsZone) && !(zone === null || zone === void 0 ? void 0 : zone.isDropZoneFull));
       if (!((_a = this.zone) === null || _a === void 0 ? void 0 : _a.isTagsZone)) {
         await this.reset();
         resetExtrasActions === null || resetExtrasActions === void 0 ? void 0 : resetExtrasActions(this);
@@ -237,15 +232,10 @@ export class Tag {
           if (scrollElement) {
             hostElement.style.height = `${scrollElement.getBoundingClientRect().top + scrollElement.offsetHeight - hostElement.getBoundingClientRect().top}px`;
           }
-          updateBounds({
-            draggable: this.draggable,
-            dragHandler: this.element,
-            dragHandlerZone: this.zone.element,
-            host: this.hostElement
-          });
+          updateBounds({ draggable: this.draggable, dragHandler: this.element, dragHandlerZone: this.zone.element, host: this.hostElement });
         },
         onDrag: () => {
-          this.zones.forEach(zone => {
+          this.zones.forEach((zone) => {
             if (zone === null || zone === void 0 ? void 0 : zone.element) {
               if (this.isTagOverlapping(zone) && !zone.isDropZoneFull) {
                 this.element.color = this.config.getColorTag(this.value, zone.index);
@@ -259,11 +249,12 @@ export class Tag {
           dragExtrasActions === null || dragExtrasActions === void 0 ? void 0 : dragExtrasActions(this);
         },
         onRelease: async () => {
+          this.mainElement.classList.remove('swiper-no-swiping');
           scaleUpDown(this.element);
           resetTransform(this.element);
           await this.release();
           if (scrollElement) {
-            await gsapTo(this.mainElement, .5, { scrollTo: 0, delay: .5 });
+            await gsapTo(this.mainElement, 0.5, { scrollTo: 0, delay: 0.5 });
             hostElement.style.removeProperty('height');
           }
           tagsZoneElements.forEach((element) => element.classList.remove('inverse-color'));
@@ -308,7 +299,7 @@ export class Tag {
   async release(fromReset = false) {
     var _a, _b;
     if (!fromReset) {
-      this.zones.forEach(zone => {
+      this.zones.forEach((zone) => {
         if (zone.hit && !zone.isDropZoneFull && zone.id !== this.zone.id) {
           this.lastZone = this.zone;
           this.zone = zone;
@@ -318,9 +309,7 @@ export class Tag {
     }
     this.addToZone();
     this.removeFromZone();
-    this.zones
-      .map(z => z.element)
-      .forEach(e => !e.firstChild && e.classList.remove('has-tag'));
+    this.zones.map((z) => z.element).forEach((e) => !e.firstChild && e.classList.remove('has-tag'));
     await this.element.componentOnReady();
     (_b = (_a = this.config).dragEndExtrasActions) === null || _b === void 0 ? void 0 : _b.call(_a, this);
   }
@@ -341,7 +330,7 @@ export class Tags extends Dropzones {
   }
   get droppableTagElements() {
     var _a;
-    return ((_a = this.tagElements) === null || _a === void 0 ? void 0 : _a.filter(element => element && element.parentElement.id === 'zone-tags')) || [];
+    return ((_a = this.tagElements) === null || _a === void 0 ? void 0 : _a.filter((element) => element && element.parentElement.id === 'zone-tags')) || [];
   }
   get hostElement() {
     return this.zonesConfig.hostElement;
@@ -354,18 +343,22 @@ export class Tags extends Dropzones {
     if (this.tagConfig) {
       this.populate();
       if ((_a = this.tagElements) === null || _a === void 0 ? void 0 : _a.length) {
-        await Promise.all(this.tagElements.map(tagElement => tagElement.componentOnReady()));
+        await Promise.all(this.tagElements.map((tagElement) => tagElement.componentOnReady()));
         this.setTagsZoneOverflow(true);
         await this.animate();
-        new IntersectionObserver(entries => entries.forEach(({ isIntersecting }) => {
+        new IntersectionObserver((entries) => entries.forEach(({ isIntersecting }) => {
           isIntersecting && this.tags.forEach((tag) => tag.initDraggable());
         })).observe(this.tagElements[0]);
       }
     }
   }
+  destroy() {
+    var _a;
+    (_a = this.tags) === null || _a === void 0 ? void 0 : _a.forEach((tag) => tag === null || tag === void 0 ? void 0 : tag.destroy());
+  }
   deleteTagFromValue(value) {
     var _a, _b, _c;
-    const tag = (_a = this.tags) === null || _a === void 0 ? void 0 : _a.find(tag => tag.value === value);
+    const tag = (_a = this.tags) === null || _a === void 0 ? void 0 : _a.find((tag) => tag.value === value);
     if (tag) {
       const { element, zone } = tag;
       tag.removeFromZone(zone);
@@ -391,8 +384,8 @@ export class Tags extends Dropzones {
       setTimeout(async () => {
         var _a;
         const formatValues = (values) => (values === null || values === void 0 ? void 0 : values.filter((e, i, a) => a.indexOf(e) === i)) || [];
-        formatValues(oldValues).forEach(v => this.deleteTagFromValue(v));
-        formatValues(newValues).forEach(v => this.addTagFromValue(v));
+        formatValues(oldValues).forEach((v) => this.deleteTagFromValue(v));
+        formatValues(newValues).forEach((v) => this.addTagFromValue(v));
         await Promise.all((_a = this.tagElements) === null || _a === void 0 ? void 0 : _a.map((tagElement) => tagElement === null || tagElement === void 0 ? void 0 : tagElement.componentOnReady()));
         this.checkOverflowingTags();
         resolve();
@@ -407,13 +400,13 @@ export class Tags extends Dropzones {
   }
   getDroppedValues() {
     var _a, _b, _c, _d;
-    return ((_d = (_c = (_b = (_a = this.zones) === null || _a === void 0 ? void 0 : _a.filter(({ id }) => id.match(/[0-9]/g))) === null || _b === void 0 ? void 0 : _b.sort((a, b) => a.index - b.index)) === null || _c === void 0 ? void 0 : _c.map(({ tagsId }) => tagsId)) === null || _d === void 0 ? void 0 : _d.map((tagsId) => tagsId.map((tagId) => { var _a; return (_a = this.tags.find(({ id }) => id === tagId)) === null || _a === void 0 ? void 0 : _a.value; }))) || [];
+    return (((_d = (_c = (_b = (_a = this.zones) === null || _a === void 0 ? void 0 : _a.filter(({ id }) => id.match(/[0-9]/g))) === null || _b === void 0 ? void 0 : _b.sort((a, b) => a.index - b.index)) === null || _c === void 0 ? void 0 : _c.map(({ tagsId }) => tagsId)) === null || _d === void 0 ? void 0 : _d.map((tagsId) => tagsId.map((tagId) => { var _a; return (_a = this.tags.find(({ id }) => id === tagId)) === null || _a === void 0 ? void 0 : _a.value; }))) || []);
   }
   checkOverflowingTags() {
-    this.zones.forEach(zone => {
+    this.zones.forEach((zone) => {
       var _a;
       if ((_a = zone === null || zone === void 0 ? void 0 : zone.config) === null || _a === void 0 ? void 0 : _a.hasOverflow) {
-        zone.isTagsZone && (zone.element.style.removeProperty('overflow'));
+        zone.isTagsZone && zone.element.style.removeProperty('overflow');
         this.hideOverflowingTagsInZone(zone.element, (tagId) => {
           const tag = this.tags.find(({ id }) => id === tagId);
           tag === null || tag === void 0 ? void 0 : tag.initDraggable();
@@ -427,26 +420,24 @@ export class Tags extends Dropzones {
     const tagValues = shuffled ? shuffle(values) : values;
     const getTag = (value, zi) => this.tags.push(new Tag(this.tagConfig, value, this.zones[zi], this.zonesConfig));
     value === null || value === void 0 ? void 0 : value.forEach((v, zoneIndex) => {
-      Array.isArray(v) ? v.forEach(value => getTag(value, zoneIndex)) : getTag(v, zoneIndex);
+      Array.isArray(v) ? v.forEach((value) => getTag(value, zoneIndex)) : getTag(v, zoneIndex);
     });
-    !readonly && ((_a = tagValues === null || tagValues === void 0 ? void 0 : tagValues.filter(v => { var _a; return !((_a = (value === null || value === void 0 ? void 0 : value.reduce((a, b) => a.concat(b), []))) === null || _a === void 0 ? void 0 : _a.includes(v)); })) === null || _a === void 0 ? void 0 : _a.forEach(v => getTag(v, this.zones.length - 1)));
+    !readonly && ((_a = tagValues === null || tagValues === void 0 ? void 0 : tagValues.filter((v) => { var _a; return !((_a = value === null || value === void 0 ? void 0 : value.reduce((a, b) => a.concat(b), [])) === null || _a === void 0 ? void 0 : _a.includes(v)); })) === null || _a === void 0 ? void 0 : _a.forEach((v) => getTag(v, this.zones.length - 1)));
   }
   async animate() {
     var _a;
     if (this.tagsZone && this.componentProps.animated && ((_a = this.droppableTagElements) === null || _a === void 0 ? void 0 : _a.length)) {
       const { hasOverflow } = this.zonesConfig.tagZoneConfig;
-      const elements = this.droppableTagElements.filter(e => !e.hasAttribute('inactive'));
+      const elements = this.droppableTagElements.filter((e) => !e.hasAttribute('inactive'));
       const { onFirstTagAnimationFinished, onTagsAnimationFinished } = this.tagConfig || {};
       const hideOverflowingTag = (tagElement) => this.hideOverflowingTagInZone(this.tagsZone.element, tagElement);
       const firstElement = elements === null || elements === void 0 ? void 0 : elements[0];
       hasOverflow && (this.tagsZone.element.style.overflow = 'hidden');
-      elements.forEach((element) => element.style.opacity = '0.25');
-      await gsapFromTo(elements, .5, {
-        scale: 0
-      }, {
+      elements.forEach((element) => (element.style.opacity = '0.25'));
+      await gsapFromTo(elements, 0.5, { scale: 0 }, {
         scale: 1,
         stagger: {
-          each: .2,
+          each: 0.2,
           onStart() {
             var _a;
             const element = (_a = this.targets()) === null || _a === void 0 ? void 0 : _a[0];

package/dist/collection/utils/helpers/annotations-helpers.js

@@ -92,7 +92,7 @@ export function isElementInsideContainer(elementBounds, containerBounds, accepta
 }
 export function calcCoordPercentage(containerBR, annotationEl, axis) {
   const annotationBR = annotationEl === null || annotationEl === void 0 ? void 0 : annotationEl.getBoundingClientRect();
-  return containerBR && annotationBR ? Math.abs(((annotationBR[axis] - containerBR[axis]) / containerBR[getBound(axis)]) * 100) : 0;
+  return containerBR && annotationBR ? Math.round(Math.abs(((annotationBR[axis] - containerBR[axis]) / containerBR[getBound(axis)]) * 100)) : 0;
 }
 export function getAnnotationElements(containerElement, type) {
   return Array.from((containerElement === null || containerElement === void 0 ? void 0 : containerElement.querySelectorAll(`.${type || 'pa'}`)) || []);