@yoobic/yobi 8.7.2 → 8.7.4

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

@@ -21,7 +21,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 +31,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 +71,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 +95,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 +106,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 +138,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 +163,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 +180,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 +199,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 +231,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);
@@ -263,7 +252,7 @@ export class Tag {
           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 +297,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 +307,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 +328,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 +341,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 +382,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 +398,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 +418,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'}`)) || []);

package/dist/collection/utils/helpers/draggable-dots-helpers.js

@@ -36,8 +36,7 @@ export function createDot(ev, dotConfig, dots) {
         gsapTo(emptyDotElement, .25, {
           left: `${destPosition.percentX}%`,
           top: `${destPosition.percentY}%`,
-          x: 0,
-          y: 0,
+          clearProps: 'transform',
           onComplete() {
             Object.assign(emptyDot.coords, destPosition);
             showDotTooltip(emptyDotElement.firstElementChild, true);
@@ -71,10 +70,10 @@ export function reorderDotIndexes(dots, containerElement) {
       const dotElement = getElement(dot._id, containerElement);
       if (dotElement) {
         const transformDotElement = dotElement.style.transform;
-        return (scaleUpAnimation(dotElement) || Promise.resolve()).then(() => {
+        const dotInnerElement = getDotInnerElement(dotElement);
+        return (scaleUpAnimation(dotInnerElement) || Promise.resolve()).then(() => {
           dotElement.style.transform = transformDotElement;
           const newIndex = (index + 1).toString();
-          const dotInnerElement = getDotInnerElement(dotElement);
           if (dotInnerElement && (!dotInnerElement.textContent || newIndex !== dotInnerElement.textContent)) {
             dotInnerElement.textContent = newIndex;
           }

package/dist/{esm/annotations-helpers-2f9599f4.js → design-system/annotations-helpers-54ce96d3.js}

@@ -1,5 +1,5 @@
-import './index-4db360f2.js';
-import { bb as getUUID } from './index-4680b731.js';
+import './index-45fc8fac.js';
+import { b9 as getUUID } from './index-1d968c40.js';
 
 function isAnnotationEmpty(annotation) {
   return !(annotation === null || annotation === void 0 ? void 0 : annotation.text);
@@ -94,7 +94,7 @@ function isElementInsideContainer(elementBounds, containerBounds, acceptationThr
 }
 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;
 }
 function getAnnotationElements(containerElement, type) {
   return Array.from((containerElement === null || containerElement === void 0 ? void 0 : containerElement.querySelectorAll(`.${type || 'pa'}`)) || []);