@yoobic/yobi 8.7.3 → 8.7.5

package/dist/design-system/{draggable-tags-helpers-9d5dd8a5.js → draggable-tags-helpers-117488d7.js}

@@ -1,6 +1,6 @@
-import './index-4db360f2.js';
+import './index-8968d0fb.js';
 import { U as countBy } from './lodash-8307f78b.js';
-import { t as translate, W as findParent } from './index-4680b731.js';
+import { t as translate, W as findParent } from './index-339f53e6.js';
 
 function checkArray(array) {
   return !!((array === null || array === void 0 ? void 0 : array.length) && Array.isArray(array));

package/dist/{esm/entities-helpers-c7f67962.js → design-system/entities-helpers-df513ef2.js}

@@ -1,7 +1,7 @@
-import { M as MessageType } from './index-e089429b.js';
-import './index-4db360f2.js';
+import { M as MessageType } from './index-c1ffdb32.js';
+import './index-8968d0fb.js';
 import { b as isNumber, e as compact, z as isObject } from './lodash-8307f78b.js';
-import { ak as getUserDisplayName, r as pipes, aA as replaceAtTagToMentionTag, aG as isCloudinaryLink, aH as getCurrentLanguage, V as getAsyncExtraData, aB as replaceAllLinks, aI as parseMarkDown, ag as getSession, aJ as isPhotoEdited, z as changeExtension, a9 as translateMulti, aK as getCardFeedEntryFromFeed, aL as toButton, aM as toDate, aN as capitalizeFirstLetter, av as isGif, t as translate, af as dateFormat, aO as displayInTimezone, au as isVideo, aP as MONGODB_ID_REGEX } from './index-4680b731.js';
+import { ak as getUserDisplayName, r as pipes, aw as replaceAtTagToMentionTag, aC as isCloudinaryLink, aD as getCurrentLanguage, V as getAsyncExtraData, ax as replaceAllLinks, aE as parseMarkDown, ag as getSession, aF as isPhotoEdited, z as changeExtension, ae as translateMulti, aG as getCardFeedEntryFromFeed, aH as toButton, aI as toDate, aJ as capitalizeFirstLetter, ar as isGif, t as translate, af as dateFormat, aK as displayInTimezone, aq as isVideo, aL as MONGODB_ID_REGEX } from './index-339f53e6.js';
 
 const mentionRegex = /<yoo-mention-tag[^>]*>([\s\S]*?)<\/yoo-mention-tag>/g;
 /**

package/dist/{esm/filters-helpers-191304c2.js → design-system/filters-helpers-54d022a4.js}

@@ -1,8 +1,8 @@
-import { b as FormFieldType, r as FormFilterAutocompleteOperator } from './index-e089429b.js';
-import './index-4db360f2.js';
-import { g as getExtraDataFieldName, S as SELECTED_RADIO_BUTTON_SUFFIX } from './form-helpers-14103df0.js';
+import { b as FormFieldType, r as FormFilterAutocompleteOperator } from './index-c1ffdb32.js';
+import './index-8968d0fb.js';
+import { g as getExtraDataFieldName, S as SELECTED_RADIO_BUTTON_SUFFIX } from './form-helpers-364354f2.js';
 import { E as get, Q as set, e as compact } from './lodash-8307f78b.js';
-import { aT as isTextField, t as translate, H as isWeb } from './index-4680b731.js';
+import { aR as isTextField, t as translate, H as isWeb } from './index-339f53e6.js';
 
 function isWithValuesField(field) {
   var _a;

package/dist/design-system/{form-choice-helpers-45921a8d.js → form-choice-helpers-c4268f91.js}

@@ -1,6 +1,6 @@
 import { V as findIndex, f as isEqual, e as compact, T as shuffle, i as isNil } from './lodash-8307f78b.js';
-import { h as hasDuplicates, s as showWarningBanner } from './draggable-tags-helpers-9d5dd8a5.js';
-import { s as setValueAndValidateInput, a as setValidator } from './form-input-helpers-27809f0f.js';
+import { h as hasDuplicates, s as showWarningBanner } from './draggable-tags-helpers-117488d7.js';
+import { s as setValueAndValidateInput, a as setValidator } from './form-input-helpers-fc7a99da.js';
 
 function isSelected(item, selection) {
   const tmpSelection = [].concat(selection);

package/dist/design-system/{form-helpers-14103df0.js → form-helpers-364354f2.js}

@@ -1,7 +1,7 @@
-import { b as FormFieldType } from './index-e089429b.js';
-import { V as VALIDATORS, g as getReducedValidator } from './index-4db360f2.js';
+import { b as FormFieldType } from './index-c1ffdb32.js';
+import { V as VALIDATORS, g as getReducedValidator } from './index-8968d0fb.js';
 import { i as isNil, r as isString, a as isArray, z as isObject, k as concat, Q as set, E as get, R as sumBy, f as isEqual, S as range, c as cloneDeep, b as isNumber } from './lodash-8307f78b.js';
-import { ag as getSession, aY as evalInContext, aZ as evalConditionsInContext, a_ as getNameAndData, a$ as getFieldsFromSlides, b0 as getFieldValue, b1 as getFieldReplacement, V as getAsyncExtraData, b2 as getSessionReplacementValue, b3 as isFormulaField, b4 as slenderizeObject, b5 as getFormulaReplacement, b6 as isDateTimeField, t as translate } from './index-4680b731.js';
+import { ag as getSession, aW as evalInContext, aX as evalConditionsInContext, aY as getNameAndData, aZ as getFieldsFromSlides, a_ as getFieldValue, a$ as getFieldReplacement, V as getAsyncExtraData, b0 as getSessionReplacementValue, b1 as isFormulaField, b2 as slenderizeObject, b3 as getFormulaReplacement, b4 as isDateTimeField, t as translate } from './index-339f53e6.js';
 
 function escapeStringRegexp(string) {
 	if (typeof string !== 'string') {

package/dist/design-system/{form-input-helpers-27809f0f.js → form-input-helpers-fc7a99da.js}

@@ -1,8 +1,8 @@
-import { W as findParent, aU as dateIsValid, aM as toDate, af as dateFormat, t as translate, M as isIOS, aV as dateSub, aW as dateAdd, m as isAndroid, aX as Keyboard } from './index-4680b731.js';
-import { b as FormFieldType } from './index-e089429b.js';
-import { g as getReducedValidator, a as getReducedAsyncValidator } from './index-4db360f2.js';
+import { W as findParent, aS as dateIsValid, aI as toDate, af as dateFormat, t as translate, M as isIOS, aT as dateSub, aU as dateAdd, m as isAndroid, aV as Keyboard } from './index-339f53e6.js';
+import { b as FormFieldType } from './index-c1ffdb32.js';
+import { g as getReducedValidator, a as getReducedAsyncValidator } from './index-8968d0fb.js';
 import { i as isNil } from './lodash-8307f78b.js';
-import { b as getActiveElementShadow, q as querySelectorDeep, c as querySelectorAllDeep } from './common-helpers-57151af2.js';
+import { b as getActiveElementShadow, q as querySelectorDeep, c as querySelectorAllDeep } from './common-helpers-6a15cd02.js';
 
 let inputBlur = true;
 function focusContentEditable(inputElement) {

package/dist/{esm/form-text-area-helpers-3896a932.js → design-system/form-text-area-helpers-4a583a5b.js}

@@ -1,6 +1,6 @@
-import { d as getRange } from './index-4db360f2.js';
+import { d as getRange } from './index-8968d0fb.js';
 import { Z as inRange } from './lodash-8307f78b.js';
-import { x as isSafari, M as isIOS, P as getCssColor, a9 as translateMulti, ak as getUserDisplayName, H as isWeb, l as isNativeMobile } from './index-4680b731.js';
+import { x as isSafari, M as isIOS, P as getCssColor, ae as translateMulti, ak as getUserDisplayName, H as isWeb, l as isNativeMobile } from './index-339f53e6.js';
 
 /**
  * Safely insert element

package/dist/{esm/grid-renderers-e8ee0332.js → design-system/grid-renderers-9eb954c2.js}

@@ -1,12 +1,12 @@
-import { b as FormFieldType, a1 as isPaletteColor, i as IncentiveStatus, p as IncentivePartType, j as IncentiveType } from './index-e089429b.js';
-import './index-4db360f2.js';
+import { b as FormFieldType, a1 as isPaletteColor, i as IncentiveStatus, p as IncentivePartType, j as IncentiveType } from './index-c1ffdb32.js';
+import './index-8968d0fb.js';
 import { a8 as findKey, a as isArray, h as isFunction, b as isNumber, e as compact, r as isString, E as get, B as isEmpty, H as indexOf, z as isObject, n as keys, o as map, t as round, a9 as partition } from './lodash-8307f78b.js';
-import { a as getPositionText } from './incentive-helpers-09679f49.js';
-import { f as getWorkflowStepBadge, h as getValidationTag } from './missions-helpers-5319678f.js';
-import { d as dateRangeState } from './common-helpers-57151af2.js';
-import { a as getJSONHighlighted } from './form-helpers-14103df0.js';
+import { a as getPositionText } from './incentive-helpers-288f3013.js';
+import { f as getWorkflowStepBadge, h as getValidationTag } from './missions-helpers-8e1bb81f.js';
+import { d as dateRangeState } from './common-helpers-6a15cd02.js';
+import { a as getJSONHighlighted } from './form-helpers-364354f2.js';
 import { f as formatDistance } from './geolocation-helpers-c870e06d.js';
-import { P as getCssColor, a9 as translateMulti, t as translate, dN as groupsResolver, dO as aclRolesResolver, ag as getSession, r as pipes, dP as dateWeekParse, af as dateFormat, aM as toDate, bZ as dateParse, ay as dispatchCustomEvent, bO as dateDiff, dQ as toHours, dR as utc, ak as getUserDisplayName, H as isWeb, cY as salesAIGetColorFromPattern, cZ as salesAIFormatDemand, aL as toButton } from './index-4680b731.js';
+import { P as getCssColor, ae as translateMulti, t as translate, dJ as groupsResolver, dK as aclRolesResolver, ag as getSession, r as pipes, dL as dateWeekParse, af as dateFormat, aI as toDate, bX as dateParse, au as dispatchCustomEvent, bM as dateDiff, dM as toHours, dN as utc, ak as getUserDisplayName, H as isWeb, cZ as salesAIGetColorFromPattern, c_ as salesAIFormatDemand, aH as toButton } from './index-339f53e6.js';
 
 const countryFlag = (country) => {
   return getFlagEmoji(getCountryCode(country));
@@ -1418,43 +1418,6 @@ function courseGridStatusRenderer(params) {
     return container;
   }
 }
-function courseGridKpiRenderer(params) {
-  const courseList = params.data;
-  const kpis = [
-    {
-      title: translate('YOOBICASSIGNEDUSERS'),
-      type: 'number',
-      value: courseList === null || courseList === void 0 ? void 0 : courseList.usersCount
-    },
-    {
-      title: translate('COMPLETED'),
-      type: 'number',
-      value: courseList === null || courseList === void 0 ? void 0 : courseList.completedCount
-    },
-    {
-      title: translate('COMPLETION'),
-      type: 'percent',
-      value: courseList === null || courseList === void 0 ? void 0 : courseList.completionRate
-    },
-    {
-      title: translate('CORRECTANSWERS'),
-      type: 'percent',
-      value: courseList === null || courseList === void 0 ? void 0 : courseList.averageScore
-    }
-  ];
-  const kpiCard = document.createElement('yoo-kpi-card');
-  kpiCard.kpiData = kpis;
-  kpiCard.hideIllustration = true;
-  kpiCard.classList.add('content-only');
-  kpiCard.style.setProperty('--value-font-weight', 'normal');
-  kpiCard.style.setProperty('--value-font-size', '0.875rem');
-  kpiCard.style.setProperty('--value-separator', ` 0.0625rem solid ${getCssColor('stable-light')}`);
-  kpiCard.style.setProperty('--value-title-color', getCssColor('text-color'));
-  kpiCard.style.setProperty('--value-title-font-size', '0.75rem');
-  const container = document.createElement('div');
-  container.appendChild(kpiCard);
-  return container;
-}
 function getColorFromKey(key) {
   if (key === 'finished') {
     return 'dark';
@@ -1506,6 +1469,76 @@ function getKeyTemplate(key, count, suffix = '', hideKey = false, hideColor = fa
   }
   return `<yoo-tag color=${circleColor}>${(hideKey ? '' : displayName + ':') + count + (suffix || '')}</yoo-tag>`;
 }
+class CourseGridKpiRenderer {
+  getGui() {
+    return this.eGui;
+  }
+  getKpisData(params) {
+    var _a, _b, _c, _d;
+    const plan = params.data;
+    const kpis = [
+      {
+        title: translate('YOOBICASSIGNEDUSERS'),
+        type: 'number',
+        value: (_a = plan === null || plan === void 0 ? void 0 : plan.planStats) === null || _a === void 0 ? void 0 : _a.usersCount
+      },
+      {
+        title: translate('COMPLETED'),
+        type: 'number',
+        value: (_b = plan === null || plan === void 0 ? void 0 : plan.planStats) === null || _b === void 0 ? void 0 : _b.completedCount
+      },
+      {
+        title: translate('COMPLETION'),
+        type: 'percent',
+        value: (_c = plan === null || plan === void 0 ? void 0 : plan.planStats) === null || _c === void 0 ? void 0 : _c.completionRate
+      },
+      {
+        title: translate('CORRECTANSWERS'),
+        type: 'percent',
+        value: (_d = plan === null || plan === void 0 ? void 0 : plan.planStats) === null || _d === void 0 ? void 0 : _d.averageScore
+      }
+    ];
+    return kpis;
+  }
+  isLoading(params) {
+    var _a;
+    const plan = params.data;
+    return (_a = plan === null || plan === void 0 ? void 0 : plan.planStats) === null || _a === void 0 ? void 0 : _a.loading;
+  }
+  init(params) {
+    const kpis = this.getKpisData(params);
+    const kpiCard = document.createElement('yoo-kpi-card');
+    kpiCard.kpiData = kpis;
+    kpiCard.hideIllustration = true;
+    kpiCard.classList.add('content-only');
+    kpiCard.style.setProperty('--value-font-weight', 'normal');
+    kpiCard.style.setProperty('--value-font-size', '0.875rem');
+    kpiCard.style.setProperty('--value-separator', ` 0.0625rem solid ${getCssColor('stable-light')}`);
+    kpiCard.style.setProperty('--value-title-color', getCssColor('text-color'));
+    kpiCard.style.setProperty('--value-title-font-size', '0.75rem');
+    this.kpiCard = kpiCard;
+    const container = document.createElement('div');
+    container.appendChild(kpiCard);
+    if (this.isLoading(params)) {
+      container.classList.add('loading');
+    }
+    this.eGui = container;
+  }
+  refresh(params) {
+    var _a, _b;
+    if (this.isLoading(params)) {
+      (_a = this.getGui()) === null || _a === void 0 ? void 0 : _a.classList.add('loading');
+    }
+    else {
+      (_b = this.getGui()) === null || _b === void 0 ? void 0 : _b.classList.remove('loading');
+    }
+    const kpis = this.getKpisData(params);
+    if (this.kpiCard) {
+      this.kpiCard.kpiData = kpis;
+    }
+    return true;
+  }
+}
 class EntityRenderer {
   getGui() {
     return this.eGui;
@@ -1819,7 +1852,7 @@ function getRenderer(renderer) {
     case 'courseGridStatusRenderer':
       return courseGridStatusRenderer;
     case 'courseGridKpiRenderer':
-      return courseGridKpiRenderer;
+      return CourseGridKpiRenderer;
     case 'entityRenderer':
       return EntityRenderer;
     case 'actionsRenderer':

package/dist/{esm/haptic-helpers-e98d9183.js → design-system/haptic-helpers-4300d645.js}

@@ -1,5 +1,5 @@
-import { cy as registerPlugin, l as isNativeMobile } from './index-4680b731.js';
-import './index-4db360f2.js';
+import { cx as registerPlugin, l as isNativeMobile } from './index-339f53e6.js';
+import './index-8968d0fb.js';
 
 var ImpactStyle;
 (function (ImpactStyle) {
@@ -55,7 +55,7 @@ const HapticsNotificationType = NotificationType;
 const HapticsImpactStyle = ImpactStyle;
 
 const Haptics = registerPlugin('Haptics', {
-    web: () => import('./web-aaa94909.js').then(m => new m.HapticsWeb()),
+    web: () => import('./web-47c5bbb3.js').then(m => new m.HapticsWeb()),
 });
 
 async function vibrateHapticMedium() {

package/dist/{esm/incentive-helpers-09679f49.js → design-system/incentive-helpers-288f3013.js}

@@ -1,7 +1,7 @@
-import { o as IncentiveStatusBadges, p as IncentivePartType } from './index-e089429b.js';
-import './index-4db360f2.js';
+import { o as IncentiveStatusBadges, p as IncentivePartType } from './index-c1ffdb32.js';
+import './index-8968d0fb.js';
 import { t as round } from './lodash-8307f78b.js';
-import { ah as getIncentiveState, t as translate, ai as appendIncentiveUnit, aj as getParticipantsScore } from './index-4680b731.js';
+import { ah as getIncentiveState, t as translate, ai as appendIncentiveUnit, aj as getParticipantsScore } from './index-339f53e6.js';
 
 /**
  * @function getIncentiveStatusBadgeSettings

package/dist/design-system/index-23c5c388.js

@@ -0,0 +1 @@
+import './local-forage-b6216ff9.js';

package/dist/{esm/index-a9d32bf6.js → design-system/index-27e759ab.js}

@@ -1,4 +1,4 @@
-import { u as FormFieldCategory, b as FormFieldType } from './index-e089429b.js';
+import { u as FormFieldCategory, b as FormFieldType } from './index-c1ffdb32.js';
 
 const ARROW_PAIR = ['arrow-down', 'arrow-up'];
 const NON_CONDITION_CATEGORIES = [FormFieldCategory.information, FormFieldCategory.multimedia];

package/dist/design-system/{index-c6d707fb.js → index-303cb217.js}

@@ -1,7 +1,7 @@
-import './index-4db360f2.js';
+import './index-8968d0fb.js';
 import { T as shuffle } from './lodash-8307f78b.js';
-import { e as getTransformInfos } from './common-helpers-57151af2.js';
-import { b9 as gsapSet, ba as gsapTo, bb as getUUID, bc as Draggable, a9 as translateMulti, H as isWeb, bd as gsapFromTo } from './index-4680b731.js';
+import { e as getTransformInfos } from './common-helpers-6a15cd02.js';
+import { b7 as gsapSet, b8 as gsapTo, b9 as getUUID, ba as Draggable, ae as translateMulti, H as isWeb, bb as gsapFromTo } from './index-339f53e6.js';
 
 const COMPONENT_PROPS = ['animated', 'readonly', 'shuffled', 'answer', 'value', 'values'];
 function resetTransform(element) {
@@ -15,6 +15,7 @@ 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) => {
@@ -23,7 +24,9 @@ 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) => {
@@ -31,24 +34,19 @@ 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);
 }
 async function scaleUpDown(element) {
@@ -76,11 +74,11 @@ 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;
@@ -100,7 +98,7 @@ 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`;
         }
       }
     }
@@ -111,20 +109,20 @@ 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');
       }
@@ -143,9 +141,9 @@ 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)) || []);
   }
 }
 class Tag {
@@ -168,7 +166,7 @@ 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);
@@ -185,20 +183,17 @@ 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 = [];
@@ -207,7 +202,7 @@ 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);
@@ -239,15 +234,10 @@ 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);
@@ -261,11 +251,12 @@ 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'));
@@ -310,7 +301,7 @@ 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;
@@ -320,9 +311,7 @@ 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);
   }
@@ -343,7 +332,7 @@ 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;
@@ -356,18 +345,22 @@ 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);
@@ -393,8 +386,8 @@ 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();
@@ -409,13 +402,13 @@ 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();
@@ -429,26 +422,24 @@ 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];