@yoobic/yobi 8.2.2 → 8.3.0-2

package/dist/cjs/{grid-renderers-3ac73ae6.js → grid-renderers-66983c8b.js}

@@ -1,13 +1,14 @@
 'use strict';
 
-const index$1 = require('./index-fc264952.js');
-const index = require('./index-f3d7c03d.js');
+const index = require('./index-de8540eb.js');
+require('./index-1fdbd9b3.js');
 const lodash = require('./lodash-597bda6d.js');
-const incentiveHelpers = require('./incentive-helpers-7c50738b.js');
-const missionsHelpers = require('./missions-helpers-a2279e7c.js');
-const commonHelpers = require('./common-helpers-6970c46c.js');
-const formHelpers = require('./form-helpers-3480a64b.js');
+const incentiveHelpers = require('./incentive-helpers-a7243401.js');
+const missionsHelpers = require('./missions-helpers-210de6b1.js');
+const commonHelpers = require('./common-helpers-a4efe957.js');
+const formHelpers = require('./form-helpers-93ee135f.js');
 const geolocationHelpers = require('./geolocation-helpers-c499cf4c.js');
+const overlays = require('./overlays-b6c94fc8.js');
 
 const countryFlag = (country) => {
   return getFlagEmoji(getCountryCode(country));
@@ -274,7 +275,7 @@ const imageStyle = {
 };
 const roundedImageStyle = {
   ...imageStyle,
-  border: `1px solid ${index.getCssColor('stable-40')}`,
+  border: `1px solid ${overlays.getCssColor('stable-40')}`,
   'border-radius': '50%'
 };
 function isCSVOrExcel(params) {
@@ -283,9 +284,9 @@ function isCSVOrExcel(params) {
 function defaultRenderer(params) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j;
   let retVal = params.value || '';
-  let translateFunction = index.translateMulti;
+  let translateFunction = overlays.translateMulti;
   if ((_a = params === null || params === void 0 ? void 0 : params.colDef) === null || _a === void 0 ? void 0 : _a.translate) {
-    translateFunction = index.translate;
+    translateFunction = overlays.translate;
   }
   if (lodash.isArray(retVal)) {
     return retVal.map((v) => translateFunction(v || '')).join(', ');
@@ -333,8 +334,8 @@ function exportRenderer(params) {
 }
 function groupRenderer(params) {
   let retVal = [].concat(params.value || []);
-  retVal = index.groupsResolver(retVal);
-  const translateFunction = index.translateMulti;
+  retVal = overlays.groupsResolver(retVal);
+  const translateFunction = overlays.translateMulti;
   const tooltip = document.createElement('yoo-tooltip');
   tooltip.setAttribute('hoverable', 'true');
   tooltip.delay = [1500, 0];
@@ -353,8 +354,8 @@ function groupRenderer(params) {
 }
 function aclRoleRenderer(params) {
   let retVal = [].concat(params.value || []);
-  retVal = index.aclRolesResolver(retVal);
-  const translateFunction = index.translateMulti;
+  retVal = overlays.aclRolesResolver(retVal);
+  const translateFunction = overlays.translateMulti;
   const tooltip = document.createElement('yoo-tooltip');
   tooltip.setAttribute('hoverable', 'true');
   const content = retVal.map((v) => translateFunction(v || '')).join('<br/>');
@@ -379,7 +380,7 @@ function tagsRenderer(params) {
       value = value.tag;
     }
     if ((_a = params) === null || _a === void 0 ? void 0 : _a.translate) {
-      value = index.translate(value);
+      value = overlays.translate(value);
     }
     return value;
   });
@@ -447,6 +448,13 @@ function booleanRenderer(params) {
   }
   return '';
 }
+function colorRenderer(params) {
+  const value = params.value;
+  if (params.isExport) {
+    return value;
+  }
+  return value ? `<yoo-form-color-field value="${value}" />` : '';
+}
 function translateRenderer(params) {
   var _a;
   const value = params.value;
@@ -454,10 +462,10 @@ function translateRenderer(params) {
     return value;
   }
   else if (value === null || value === void 0 ? void 0 : value.toUpperCase) {
-    return index.translateMulti(value.toUpperCase());
+    return overlays.translateMulti(value.toUpperCase());
   }
   else if ((_a = value === null || value === void 0 ? void 0 : value.value) === null || _a === void 0 ? void 0 : _a.toUpperCase) {
-    return index.translateMulti(value.value.toUpperCase());
+    return overlays.translateMulti(value.value.toUpperCase());
   }
   return '';
 }
@@ -526,7 +534,7 @@ function percentageRenderer(params) {
     }
     return `<div>${params.noValue || ''}</div>`;
   }
-  const percentage = index.pipes.percent.transform(retVal, precision, factor);
+  const percentage = overlays.pipes.percent.transform(retVal, precision, factor);
   if (params.isExport) {
     return `<div>${percentage.toString()}</div>`;
   }
@@ -537,11 +545,11 @@ function percentageRenderer(params) {
 }
 function currencyRenderer(params) {
   const value = params.value;
-  return lodash.isNumber(value) ? index.pipes.currency.transform(value, params.numberPrecision, params.symbol, params.forceSymbol) : value.toString();
+  return lodash.isNumber(value) ? overlays.pipes.currency.transform(value, params.numberPrecision, params.symbol, params.forceSymbol) : value.toString();
 }
 function durationRenderer(params) {
   const value = params.value;
-  return lodash.isNumber(value) ? Math.round(value) + ' ' + index.translate('YOOBICMIN').toLowerCase() + '.' : value;
+  return lodash.isNumber(value) ? Math.round(value) + ' ' + overlays.translate('YOOBICMIN').toLowerCase() + '.' : value;
 }
 function distanceRenderer(params) {
   var _a, _b;
@@ -596,7 +604,7 @@ function datetimeGenericRenderer(params, format) {
     value = value.value;
   }
   if (value) {
-    const finalDate = index.dateFormat(index.toDate(value), format);
+    const finalDate = overlays.dateFormat(overlays.toDate(value), format);
     if (params.isExport) {
       return finalDate;
     }
@@ -616,10 +624,10 @@ function timeRenderer(params) {
   const value = params.value;
   if (value) {
     if (/^\d\d:\d\d/.test(value)) {
-      return '<div class="not-center-container">' + index.dateFormat(index.dateParse(value, 'HH:mm'), 'LT') + '</div>';
+      return '<div class="not-center-container">' + overlays.dateFormat(overlays.dateParse(value, 'HH:mm'), 'LT') + '</div>';
     }
     else {
-      return '<div class="not-center-container">' + index.dateFormat(index.toDate(value), 'LT') + '</div>';
+      return '<div class="not-center-container">' + overlays.dateFormat(overlays.toDate(value), 'LT') + '</div>';
     }
   }
   return '';
@@ -654,8 +662,8 @@ function dateRangeRenderer(params) {
   const range = document.createElement('div');
   range.classList.add('flex-center');
   range.classList.add('stable');
-  const startDate = index.dateFormat(params.data.startDate, 'L');
-  const endDate = index.dateFormat(params.data.endDate, 'L');
+  const startDate = overlays.dateFormat(params.data.startDate, 'L');
+  const endDate = overlays.dateFormat(params.data.endDate, 'L');
   range.appendChild(document.createTextNode(`${startDate} - ${endDate}`));
   wrapper.appendChild(relative);
   wrapper.appendChild(range);
@@ -680,7 +688,7 @@ function photoRenderer(params) {
     if (value !== emptyImage) {
       img.onclick = (ev) => {
         ev.stopPropagation();
-        index.dispatchCustomEvent('gridcellPhotoSelected', img, { ...params, index: 0 });
+        overlays.dispatchCustomEvent('gridcellPhotoSelected', img, { ...params, index: 0 });
       };
     }
     return isCSVOrExcel(params) ? params.value : img;
@@ -705,7 +713,7 @@ function multiphotoRenderer(params) {
   if (photos && lodash.isArray(photos) && photos.length > 0) {
     const container = document.createElement('div');
     container.style.display = 'inherit';
-    photos.forEach((photo, index$1) => {
+    photos.forEach((photo, index) => {
       const img = document.createElement('yoo-img');
       lodash.keys(roundedImageStyle).forEach((k) => {
         img.style[k] = roundedImageStyle[k];
@@ -713,7 +721,7 @@ function multiphotoRenderer(params) {
       img.src = photo;
       img.onclick = (ev) => {
         ev.stopPropagation();
-        index.dispatchCustomEvent('gridcellPhotoSelected', img, { ...params, index: index$1 });
+        overlays.dispatchCustomEvent('gridcellPhotoSelected', img, { ...params, index });
       };
       container.appendChild(img);
     });
@@ -744,13 +752,16 @@ function imageRenderer(params) {
 function videoRenderer(params) {
   return (params === null || params === void 0 ? void 0 : params.value) ? '<video class="ag-cell-image video" src="' + params.value + '"></video>' : '';
 }
+function audioRenderer(params) {
+  return (params === null || params === void 0 ? void 0 : params.value) ? '<yoo-form-capture readonly="true" size="small" type="audio" value="' + params.value + '"></yoo-form-capture>' : '';
+}
 function starratingRenderer(params) {
-  var _a, _b;
+  var _a, _b, _c, _d;
   let max = 5;
   if ((_b = (_a = params.colDef) === null || _a === void 0 ? void 0 : _a.cellRendererParams) === null || _b === void 0 ? void 0 : _b.max) {
     max = params.colDef.cellRendererParams.max;
   }
-  return '<yoo-form-star-rating class="ag-cell-image app-color" readonly="true" max="' + max + '" value="' + params.value + '"></yoo-form-star-rating>';
+  return '<yoo-form-star-rating class="ag-cell-image app-color" readonly="true" type="' + (((_d = (_c = params === null || params === void 0 ? void 0 : params.colDef) === null || _c === void 0 ? void 0 : _c.fieldDefinition) === null || _d === void 0 ? void 0 : _d.useButtons) ? 'button' : 'star') + '" max="' + max + '" value="' + params.value + '"></yoo-form-star-rating>';
 }
 function jsonRenderer(params) {
   const json = formHelpers.getJSONHighlighted(params.value);
@@ -780,8 +791,8 @@ function todoRenderer(params) {
 function timerRenderer(params) {
   const value = params.value;
   if ((value === null || value === void 0 ? void 0 : value.startDate) && (value === null || value === void 0 ? void 0 : value.endDate)) {
-    const ms = index.dateDiff(index.toDate(value.endDate), index.toDate(value.startDate));
-    const s = Math.floor(index.toHours(ms)) + index.dateFormat(index.utc(new Date(ms)), ':mm:ss');
+    const ms = overlays.dateDiff(overlays.toDate(value.endDate), overlays.toDate(value.startDate));
+    const s = Math.floor(overlays.toHours(ms)) + overlays.dateFormat(overlays.utc(new Date(ms)), ':mm:ss');
     return s;
   }
   else {
@@ -792,13 +803,13 @@ function checklistRenderer(params) {
   var _a, _b, _c, _d;
   let retVal = '';
   if (((_b = (_a = params === null || params === void 0 ? void 0 : params.value) === null || _a === void 0 ? void 0 : _a.currentTasks) === null || _b === void 0 ? void 0 : _b.length) >= 0) {
-    retVal += index.translate('NEXTACTIONS') + ': ' + params.value.currentTasks.length;
+    retVal += overlays.translate('NEXTACTIONS') + ': ' + params.value.currentTasks.length;
   }
   if (((_d = (_c = params === null || params === void 0 ? void 0 : params.value) === null || _c === void 0 ? void 0 : _c.previousTasks) === null || _d === void 0 ? void 0 : _d.length) >= 0) {
     if (retVal.length > 0) {
       retVal += '<br>';
     }
-    retVal += index.translate('PREVIOUSACTIONS') + ': ' + params.value.previousTasks.length;
+    retVal += overlays.translate('PREVIOUSACTIONS') + ': ' + params.value.previousTasks.length;
   }
   return retVal;
 }
@@ -806,11 +817,11 @@ function userRenderer(params) {
   var _a, _b, _c, _d, _e, _f;
   const user = params.value;
   if (params.isExport) {
-    return user ? index.getUserDisplayName(user) : ((_a = params === null || params === void 0 ? void 0 : params.data) === null || _a === void 0 ? void 0 : _a.userDisplayname) || ((_b = params === null || params === void 0 ? void 0 : params.data) === null || _b === void 0 ? void 0 : _b.ownerDisplayName);
+    return user ? overlays.getUserDisplayName(user) : ((_a = params === null || params === void 0 ? void 0 : params.data) === null || _a === void 0 ? void 0 : _a.userDisplayname) || ((_b = params === null || params === void 0 ? void 0 : params.data) === null || _b === void 0 ? void 0 : _b.ownerDisplayName);
   }
   if (user) {
     const displayName = document.createElement('span');
-    displayName.innerHTML = index.getUserDisplayName(user);
+    displayName.innerHTML = overlays.getUserDisplayName(user);
     const avatar = document.createElement('yoo-avatar');
     avatar.classList.add('inline');
     avatar.user = user;
@@ -841,7 +852,7 @@ function courseRenderer(params) {
   wrapper.appendChild(image);
   const title = document.createElement('div');
   title.classList.add('text');
-  title.innerText = index.translateMulti((params.data.courseName || '').toString());
+  title.innerText = overlays.translateMulti((params.data.courseName || '').toString());
   wrapper.appendChild(title);
   return wrapper;
 }
@@ -880,10 +891,10 @@ function battleAnswersRenderer(params) {
   correctTag.style.margin = incorrectTag.style.margin = '0';
   correctTag.style.setProperty('--padding', '0');
   correctTag.appendChild(correctIcon);
-  correctTag.appendChild(document.createTextNode(`${correctScore} ${index.translate('CORRECT')}`));
+  correctTag.appendChild(document.createTextNode(`${correctScore} ${overlays.translate('CORRECT')}`));
   incorrectTag.style.setProperty('--padding', '0');
   incorrectTag.appendChild(incorrectIcon);
-  incorrectTag.appendChild(document.createTextNode(`${incorrectScore} ${index.translate('INCORRECT')}`));
+  incorrectTag.appendChild(document.createTextNode(`${incorrectScore} ${overlays.translate('INCORRECT')}`));
   const wrapper = document.createElement('div');
   wrapper.classList.add('col');
   wrapper.style.justifyContent = 'space-between';
@@ -937,7 +948,7 @@ function documentRenderer(params) {
   var _a, _b, _c;
   let documents = [];
   const colDef = (_a = params.column) === null || _a === void 0 ? void 0 : _a.getColDef();
-  if (((_c = (_b = colDef) === null || _b === void 0 ? void 0 : _b.fieldDefinition) === null || _c === void 0 ? void 0 : _c.type) === index$1.FormFieldType.document) {
+  if (((_c = (_b = colDef) === null || _b === void 0 ? void 0 : _b.fieldDefinition) === null || _c === void 0 ? void 0 : _c.type) === index.FormFieldType.document) {
     documents = lodash.compact([].concat(colDef.fieldDefinition.document));
   }
   else {
@@ -1000,17 +1011,17 @@ function missionValidationRenderer(params) {
   }
   let retVal = '';
   if (value === true || value === 'true' || value === 'validated') {
-    retVal = `<yoo-tag custom-color="${index.getCssColor('success')}">${index.translate('VALIDATED')}</yoo-tag>`;
+    retVal = `<yoo-tag custom-color="${overlays.getCssColor('success')}">${overlays.translate('VALIDATED')}</yoo-tag>`;
   }
   else if (value === false || value === 'false' || value === 'rejected') {
-    retVal = `<yoo-tag custom-color="${index.getCssColor('danger')}">${index.translate('REJECTED')}</yoo-tag>`;
+    retVal = `<yoo-tag custom-color="${overlays.getCssColor('danger')}">${overlays.translate('REJECTED')}</yoo-tag>`;
   }
   else if (!((_d = (_c = (_b = params === null || params === void 0 ? void 0 : params.node) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.description) === null || _d === void 0 ? void 0 : _d.withoutValidation) &&
     ((status === 'finished' && value !== false && value !== true && value !== 'false' && value !== 'true') || value === 'tobevalidated')) {
-    retVal = `<yoo-tag custom-color="${index.getCssColor('warning')}">${index.translate('TOBEVALIDATED')}</yoo-tag>`;
+    retVal = `<yoo-tag custom-color="${overlays.getCssColor('warning')}">${overlays.translate('TOBEVALIDATED')}</yoo-tag>`;
   }
   if (((_e = params === null || params === void 0 ? void 0 : params.node) === null || _e === void 0 ? void 0 : _e.group) && ((_f = params === null || params === void 0 ? void 0 : params.colDef) === null || _f === void 0 ? void 0 : _f.cellRenderer) === 'group') {
-    retVal = `<yoo-tag custom-color="${index.getCssColor('stable')}">${index.translate('N/A')}</yoo-tag>`;
+    retVal = `<yoo-tag custom-color="${overlays.getCssColor('stable')}">${overlays.translate('N/A')}</yoo-tag>`;
   }
   return isCSVOrExcel(params) ? stripHtml(retVal) : retVal;
 }
@@ -1031,23 +1042,23 @@ function missionStatusRenderer(params) {
   else {
     const value = params.value;
     if (value === 'finished') {
-      retVal = `<div class="not-center-container"><yoo-tag custom-color="${index.getCssColor('accent')}">${index.translate('FINISHED')}</yoo-tag></div>`;
+      retVal = `<div class="not-center-container"><yoo-tag custom-color="${overlays.getCssColor('accent')}">${overlays.translate('FINISHED')}</yoo-tag></div>`;
     }
     else if (value === 'booked') {
-      retVal = `<div class="not-center-container"><yoo-tag custom-color="${index.getCssColor('info')}">${index.translate('MISSIONSSTARTED')}</yoo-tag></div>`;
+      retVal = `<div class="not-center-container"><yoo-tag custom-color="${overlays.getCssColor('info')}">${overlays.translate('MISSIONSSTARTED')}</yoo-tag></div>`;
     }
     else if (value === 'scheduled') {
-      retVal = `<div class="not-center-container"><yoo-tag custom-color="${index.getCssColor('warning')}">${index.translate('SCHEDULED')}</yoo-tag></div>`;
+      retVal = `<div class="not-center-container"><yoo-tag custom-color="${overlays.getCssColor('warning')}">${overlays.translate('SCHEDULED')}</yoo-tag></div>`;
     }
     else if (value === 'archived') {
-      retVal = `<div class="not-center-container"><yoo-tag color="${getColorFromKey(value)}">${index.translate('MISSIONARCHIVED', { mission_name: '' })}</yoo-tag></div>`;
+      retVal = `<div class="not-center-container"><yoo-tag color="${getColorFromKey(value)}">${overlays.translate('MISSIONARCHIVED', { mission_name: '' })}</yoo-tag></div>`;
     }
     else if (value === 'pausedmission') {
-      retVal = `<div class="not-center-container"><yoo-tag custom-color="${index.getCssColor('dark')}">${index.translate('PAUSEDMISSION')}</yoo-tag></div>`;
+      retVal = `<div class="not-center-container"><yoo-tag custom-color="${overlays.getCssColor('dark')}">${overlays.translate('PAUSEDMISSION')}</yoo-tag></div>`;
     }
     else if (value === 'available' || !value) {
       // (params as any).hasWorkflow &&
-      retVal = `<div class="not-center-container"><yoo-tag color="${getColorFromKey('available')}">${index.translate('AVAILABLE')}</yoo-tag></div>`;
+      retVal = `<div class="not-center-container"><yoo-tag color="${getColorFromKey('available')}">${overlays.translate('AVAILABLE')}</yoo-tag></div>`;
     }
     retVal = retVal ? retVal : value ? value.toString() : retVal || '';
   }
@@ -1057,22 +1068,22 @@ function missionStatusOnlyRenderer(params) {
   let retVal = '';
   const value = params.value;
   if (value === 'finished') {
-    retVal = `<div class="not-center-container"><yoo-tag custom-color="${index.getCssColor('accent')}">${index.translate('FINISHED')}</yoo-tag></div>`;
+    retVal = `<div class="not-center-container"><yoo-tag custom-color="${overlays.getCssColor('accent')}">${overlays.translate('FINISHED')}</yoo-tag></div>`;
   }
   else if (value === 'booked') {
-    retVal = `<div class="not-center-container"><yoo-tag custom-color="${index.getCssColor('info')}">${index.translate('MISSIONSSTARTED')}</yoo-tag></div>`;
+    retVal = `<div class="not-center-container"><yoo-tag custom-color="${overlays.getCssColor('info')}">${overlays.translate('MISSIONSSTARTED')}</yoo-tag></div>`;
   }
   else if (value === 'scheduled') {
-    retVal = `<div class="not-center-container"><yoo-tag custom-color="${index.getCssColor('warning')}">${index.translate('SCHEDULED')}</yoo-tag></div>`;
+    retVal = `<div class="not-center-container"><yoo-tag custom-color="${overlays.getCssColor('warning')}">${overlays.translate('SCHEDULED')}</yoo-tag></div>`;
   }
   else if (value === 'archived') {
-    retVal = `<div class="not-center-container"><yoo-tag color="${getColorFromKey(value)}">${index.translate('MISSIONARCHIVED', { mission_name: '' })}</yoo-tag></div>`;
+    retVal = `<div class="not-center-container"><yoo-tag color="${getColorFromKey(value)}">${overlays.translate('MISSIONARCHIVED', { mission_name: '' })}</yoo-tag></div>`;
   }
   else if (value === 'pausedmission') {
-    retVal = `<div class="not-center-container"><yoo-tag custom-color="${index.getCssColor('dark')}">${index.translate('PAUSEDMISSION')}</yoo-tag></div>`;
+    retVal = `<div class="not-center-container"><yoo-tag custom-color="${overlays.getCssColor('dark')}">${overlays.translate('PAUSEDMISSION')}</yoo-tag></div>`;
   }
   else if (value === 'available' || !value) {
-    retVal = `<div class="not-center-container"><yoo-tag color="${getColorFromKey('available')}">${index.translate('AVAILABLE')}</yoo-tag></div>`;
+    retVal = `<div class="not-center-container"><yoo-tag color="${getColorFromKey('available')}">${overlays.translate('AVAILABLE')}</yoo-tag></div>`;
   }
   retVal = retVal ? retVal : value ? value.toString() : retVal || '';
   return isCSVOrExcel(params) ? stripHtml(retVal) : retVal;
@@ -1085,7 +1096,7 @@ function taskStatsRenderer(params) {
       ? `<div class="not-center-container">
               <yoo-tag color="stable-light">
                 <yoo-icon slot="start" size="small" name="mission" color="stable"></yoo-icon>
-              ${((value === null || value === void 0 ? void 0 : value.countFinished) || 0) + ((value === null || value === void 0 ? void 0 : value.countClosed) || 0) + '/' + (value === null || value === void 0 ? void 0 : value.countTasks) + ' ' + index.translate('YOOBICACTIONS')}
+              ${((value === null || value === void 0 ? void 0 : value.countFinished) || 0) + ((value === null || value === void 0 ? void 0 : value.countClosed) || 0) + '/' + (value === null || value === void 0 ? void 0 : value.countTasks) + ' ' + overlays.translate('YOOBICACTIONS')}
               </yoo-tag>
             </div>`
       : null;
@@ -1094,8 +1105,8 @@ function taskStatsRenderer(params) {
 }
 function salesAIQuantityRenderer(params) {
   const value = params.value;
-  const color = index.salesAIGetColorFromPattern(value);
-  const quantity = index.salesAIFormatDemand(value);
+  const color = overlays.salesAIGetColorFromPattern(value);
+  const quantity = overlays.salesAIFormatDemand(value);
   return `<yoo-tag class="inverse-color" color="${color}">${quantity}</yoo-tag>`;
 }
 function stripHtml(originalString) {
@@ -1109,7 +1120,7 @@ function boardRenderer(params) {
     if (board) {
       return `
         <div class="not-center-container">
-          <yoo-tag custom-color="${board.color}">${index.translate(board.title)}</yoo-tag>
+          <yoo-tag custom-color="${board.color}">${overlays.translate(board.title)}</yoo-tag>
         </div>`;
     }
   }
@@ -1197,7 +1208,7 @@ function conformityRelativeProgressValue(node) {
  * @param {ICellRendererParams} params
  */
 function incentiveDateRangeRenderer(params) {
-  if (params.data && params.data.status !== index$1.IncentiveStatus.draft) {
+  if (params.data && params.data.status !== index.IncentiveStatus.draft) {
     return dateRangeRenderer(params);
   }
   return '<div>-</div>';
@@ -1209,9 +1220,9 @@ function incentiveDateRangeRenderer(params) {
  */
 function incentiveParticipantsRenderer(params) {
   const value = params.value || 0;
-  if (params.data && params.data.status !== index$1.IncentiveStatus.draft) {
-    const text = params.data.partType === index$1.IncentivePartType.teams ? 'INCENTIVETEAMSCOUNT' : 'INCENTIVEUSERSCOUNT';
-    return `<div>${index.translate(text, { n: value })}</div>`;
+  if (params.data && params.data.status !== index.IncentiveStatus.draft) {
+    const text = params.data.partType === index.IncentivePartType.teams ? 'INCENTIVETEAMSCOUNT' : 'INCENTIVEUSERSCOUNT';
+    return `<div>${overlays.translate(text, { n: value })}</div>`;
   }
   return '<div>-</div>';
 }
@@ -1222,11 +1233,11 @@ function incentiveParticipantsRenderer(params) {
  */
 function incentiveTotalRenderer(params) {
   if (params.data) {
-    const isCompetition = params.data.type === index$1.IncentiveType.competition;
+    const isCompetition = params.data.type === index.IncentiveType.competition;
     const unitValue = params.data.unit;
     // use 'K' or 'YOOBICM' suffix only if the number is greater than or equal to 10000
-    let totalKpis = params.data.totalKpis >= 10000 ? index.pipes.number.transform(params.data.totalKpis) : lodash.round(params.data.totalKpis, 2).toString();
-    let totalTargets = params.data.totalTargets >= 10000 ? index.pipes.number.transform(params.data.totalTargets) : lodash.round(params.data.totalTargets, 2).toString();
+    let totalKpis = params.data.totalKpis >= 10000 ? overlays.pipes.number.transform(params.data.totalKpis) : lodash.round(params.data.totalKpis, 2).toString();
+    let totalTargets = params.data.totalTargets >= 10000 ? overlays.pipes.number.transform(params.data.totalTargets) : lodash.round(params.data.totalTargets, 2).toString();
     if (params.data.isUnitCurrency && unitValue) {
       totalKpis = `${unitValue} ${totalKpis}`;
       totalTargets = `${unitValue} ${totalTargets}`;
@@ -1261,7 +1272,7 @@ function incentiveTotalRenderer(params) {
  */
 function incentiveRankingRenderer(params) {
   const awardIcon = '<yoo-tag color="app-color-10" icon="award-trophy-star" size="small"></yoo-tag>';
-  if (params.data.type === index$1.IncentiveType.milestones) {
+  if (params.data.type === index.IncentiveType.milestones) {
     // TODO: GET POSITION
     const position = 1;
     const positionText = incentiveHelpers.getPositionText(position);
@@ -1274,7 +1285,7 @@ function incentiveRankingRenderer(params) {
 function courseStatusRenderer(params) {
   var _a;
   const status = lodash.isString(params.value) ? params.value : (_a = params.value) === null || _a === void 0 ? void 0 : _a.tag;
-  const content = status ? `<yoo-tag color="${status === 'completed' ? 'success' : status === 'notstarted' ? 'stable' : 'info'}">${index.translate(status.toUpperCase())}</yoo-tag>` : '';
+  const content = status ? `<yoo-tag color="${status === 'completed' ? 'success' : status === 'notstarted' ? 'stable' : 'info'}">${overlays.translate(status.toUpperCase())}</yoo-tag>` : '';
   const truncate = document.createElement('yoo-truncate');
   truncate.classList.add('grid');
   truncate.style.cssText = '--max-lines: ' + (params.maxLine || 2);
@@ -1288,7 +1299,7 @@ function courseStatusRenderer(params) {
   return container;
 }
 function campaignStatusRenderer(params) {
-  const options = !params.data.archived && (params.data.active || params.data.recurring) ? { text: index.translate('ACTIVE'), color: 'success' } : { text: index.translate('INACTIVE'), color: 'stable' };
+  const options = !params.data.archived && (params.data.active || params.data.recurring) ? { text: overlays.translate('ACTIVE'), color: 'success' } : { text: overlays.translate('INACTIVE'), color: 'stable' };
   const tag = document.createElement('yoo-tag');
   tag.size = 'small';
   const icon = document.createElement('yoo-icon');
@@ -1327,7 +1338,7 @@ function getColorFromKey(key) {
 function getKeyTemplate(key, count, suffix = '', hideKey = false, hideColor = false) {
   let displayName = key;
   if (key === null || key === void 0 ? void 0 : key.toUpperCase) {
-    displayName = index.translate(key.toUpperCase());
+    displayName = overlays.translate(key.toUpperCase());
   }
   if (isNaN(count)) {
     count = '?';
@@ -1513,7 +1524,7 @@ class ActionsRenderer {
       }
       if (item && menuActions.length > 0) {
         this.menu = document.createElement('yoo-context-menu');
-        this.menu.contentButtons = menuActions.map((a) => index.toButton(a, item, true));
+        this.menu.contentButtons = menuActions.map((a) => overlays.toButton(a, item, true));
         this.menu.appendChild(htmlToElement('<div class="center-container"><yoo-button color="light" size="medium" shape="square"><yoo-icon size="small" name="more"></yoo-icon></yoo-button></div>'));
         container.classList.add('center-container');
         container.appendChild(this.menu);
@@ -1555,6 +1566,8 @@ function getRenderer(renderer) {
       return tagsRenderer;
     case 'booleanRenderer':
       return booleanRenderer;
+    case 'colorRenderer':
+      return colorRenderer;
     case 'numberRenderer':
       return numberRenderer;
     case 'numberWithVariationRenderer':
@@ -1587,6 +1600,8 @@ function getRenderer(renderer) {
       return multiphotoRenderer;
     case 'imageRenderer':
       return imageRenderer;
+    case 'audioRenderer':
+      return audioRenderer;
     case 'videoRenderer':
       return videoRenderer;
     case 'starratingRenderer':

package/dist/cjs/{gridstack-dd-native-dca9e336.js → gridstack-dd-native-f6c2bb35.js}

@@ -5,7 +5,7 @@ const _commonjsHelpers = require('./_commonjsHelpers-94df2ea7.js');
 var ddManager = _commonjsHelpers.createCommonjsModule(function (module, exports) {
 "use strict";
 /**
- * dd-manager.ts 5.1.0
+ * dd-manager.ts 5.1.1
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
  */
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -21,7 +21,7 @@ const ddManager$1 = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(ddMana
 var ddResizableHandle = _commonjsHelpers.createCommonjsModule(function (module, exports) {
 "use strict";
 /**
- * dd-resizable-handle.ts 5.1.0
+ * dd-resizable-handle.ts 5.1.1
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
  */
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -108,7 +108,7 @@ const ddResizableHandle$1 = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCj
 var ddBaseImpl = _commonjsHelpers.createCommonjsModule(function (module, exports) {
 "use strict";
 /**
- * dd-base-impl.ts 5.1.0
+ * dd-base-impl.ts 5.1.1
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
  */
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -153,7 +153,7 @@ var ddUtils = _commonjsHelpers.createCommonjsModule(function (module, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DDUtils = void 0;
 /**
- * dd-utils.ts 5.1.0
+ * dd-utils.ts 5.1.1
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
  */
 class DDUtils {
@@ -250,7 +250,7 @@ const ddUtils$1 = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(ddUtils)
 var utils = _commonjsHelpers.createCommonjsModule(function (module, exports) {
 "use strict";
 /**
- * utils.ts 5.1.0
+ * utils.ts 5.1.1
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
  */
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -662,7 +662,7 @@ const utils$1 = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(utils);
 var ddResizable = _commonjsHelpers.createCommonjsModule(function (module, exports) {
 "use strict";
 /**
- * dd-resizable.ts 5.1.0
+ * dd-resizable.ts 5.1.1
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
  */
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -946,7 +946,7 @@ const ddResizable$1 = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(ddRe
 var ddDraggable = _commonjsHelpers.createCommonjsModule(function (module, exports) {
 "use strict";
 /**
- * dd-draggable.ts 5.1.0
+ * dd-draggable.ts 5.1.1
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
  */
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -1145,11 +1145,11 @@ class DDDraggable extends ddBaseImpl.DDBaseImplement {
         // don't bother restoring styles if we're gonna remove anyway...
         if (this.dragElementOriginStyle && (!node || !node._isAboutToRemove)) {
             let helper = this.helper;
-            DDDraggable.originStyleProp.forEach(prop => helper.style[prop] = this.dragElementOriginStyle[prop] || null);
-            // show up instantly otherwise we animate to off the grid when switching back to 'absolute' from 'fixed'
-            helper.style.transition = 'none';
+            // don't animate, otherwise we animate offseted when switching back to 'absolute' from 'fixed' 
             let transition = this.dragElementOriginStyle['transition'] || null;
-            setTimeout(() => helper.style.transition = transition, 0); // recover animation from saved vars
+            helper.style.transition = this.dragElementOriginStyle['transition'] = 'none';
+            DDDraggable.originStyleProp.forEach(prop => helper.style[prop] = this.dragElementOriginStyle[prop] || null);
+            setTimeout(() => helper.style.transition = transition, 50); // recover animation from saved vars after a pause (0 isn't enough #1973)
         }
         delete this.dragElementOriginStyle;
         return this;
@@ -1253,7 +1253,7 @@ const ddDraggable$1 = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(ddDr
 var ddDroppable = _commonjsHelpers.createCommonjsModule(function (module, exports) {
 "use strict";
 /**
- * dd-droppable.ts 5.1.0
+ * dd-droppable.ts 5.1.1
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
  */
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -1426,7 +1426,7 @@ const ddDroppable$1 = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(ddDr
 var ddElement = _commonjsHelpers.createCommonjsModule(function (module, exports) {
 "use strict";
 /**
- * dd-elements.ts 5.1.0
+ * dd-elements.ts 5.1.1
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
  */
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -1526,7 +1526,7 @@ const ddElement$1 = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(ddElem
 var gridstackDdi = _commonjsHelpers.createCommonjsModule(function (module, exports) {
 "use strict";
 /**
- * gridstack-ddi.ts 5.1.0
+ * gridstack-ddi.ts 5.1.1
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
  */
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -1559,7 +1559,7 @@ const gridstackDdi$1 = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(gri
 var gridstackEngine = _commonjsHelpers.createCommonjsModule(function (module, exports) {
 "use strict";
 /**
- * gridstack-engine.ts 5.1.0
+ * gridstack-engine.ts 5.1.1
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
  */
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -2468,7 +2468,7 @@ const gridstackEngine$1 = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(
 var types = _commonjsHelpers.createCommonjsModule(function (module, exports) {
 "use strict";
 /**
- * types.ts 5.1.0
+ * types.ts 5.1.1
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
  */
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -2492,7 +2492,7 @@ var __exportStar = (_commonjsHelpers.commonjsGlobal && _commonjsHelpers.commonjs
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GridStack = void 0;
 /*!
- * GridStack 5.1.0
+ * GridStack 5.1.1
  * https://gridstackjs.com/
  *
  * Copyright (c) 2021-2022 Alain Dumesny
@@ -3957,7 +3957,7 @@ const gridstack$1 = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(gridst
 var gridstackDd = _commonjsHelpers.createCommonjsModule(function (module, exports) {
 "use strict";
 /**
- * gridstack-dd.ts 5.1.0
+ * gridstack-dd.ts 5.1.1
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
  */
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -4613,7 +4613,7 @@ const gridstackDd$1 = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(grid
 var gridstackDdNative = _commonjsHelpers.createCommonjsModule(function (module, exports) {
 "use strict";
 /**
- * gridstack-dd-native.ts 5.1.0
+ * gridstack-dd-native.ts 5.1.1
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
  */
 var __createBinding = (_commonjsHelpers.commonjsGlobal && _commonjsHelpers.commonjsGlobal.__createBinding) || (Object.create ? (function(o, m, k, k2) {