@yoobic/yobi 8.2.0-4 → 8.2.0-42

package/dist/collection/components/form-creator/workflow/workflow.css

@@ -348,9 +348,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   margin-bottom: unset;
 }
 :host .empty-state-with-text div {
-  color: var(--text-color, #807f83);
+  color: var(--text-color-80, rgba(128, 127, 131, 0.8));
   font-size: var(--font-size-16, 1rem);
-  opacity: 0.7;
   max-width: 25rem;
   padding: var(--spacing-08, 0.5rem);
   text-align: center;

package/dist/collection/components/grid/ag-grid/ag-grid.css

@@ -8690,6 +8690,7 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
   display: flex;
   align-items: center;
   justify-content: flex-start;
+  white-space: nowrap;
 }
 :host .ag-cell pre {
   display: block;
@@ -8755,6 +8756,9 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
 :host .ag-cell .color-container {
   height: 100%;
   padding: 0.2rem !important;
+  padding-right: 0.5rem !important;
+  padding-left: 0.5rem !important;
+  border-radius: 0.5rem;
 }
 :host .ag-cell .margin-right {
   margin-right: var(--spacing-08, 0.5rem);
@@ -8776,6 +8780,7 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
   font-family: "yoobicons" !important;
 }
 :host .ag-cell[col-id=checkboxes] {
+  align-items: center;
   padding-top: 1rem !important;
   padding-right: 0 !important;
   padding-right: 0.5rem !important;
@@ -8785,13 +8790,13 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
 :host .ag-cell[col-id=checkboxes] .ag-cell-wrapper {
   align-items: center !important;
 }
-:host .ag-cell[col-id=detailToogles] {
+:host .ag-cell[col-id=detailToggles] {
   padding: 0 !important;
 }
-:host .ag-cell[col-id=detailToogles] .ag-cell-wrapper.ag-row-group {
+:host .ag-cell[col-id=detailToggles] .ag-cell-wrapper.ag-row-group {
   align-items: center;
 }
-:host .ag-cell[col-id=detailToogles] .ag-group-value {
+:host .ag-cell[col-id=detailToggles] .ag-group-value {
   flex: 1;
 }
 :host .ag-cell[col-id=ag-Grid-AutoColumn] .ag-group-value {
@@ -8944,6 +8949,9 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
   right: 4px;
   opacity: 0;
 }
+:host(.grid-alternate) .ag-theme-balham .ag-body-viewport {
+  background: var(--stable-ultralight, #fafafa);
+}
 :host(.grid-alternate) .ag-theme-balham .ag-row.ag-row-selected {
   background-color: var(--app-color-20, rgba(90, 48, 244, 0.2)) !important;
 }

package/dist/collection/components/grid/ag-grid/ag-grid.js

@@ -11,7 +11,8 @@ if (LicenseManager) {
 }
 export class YooAgGridComponent {
   async exportCSV(filename) {
-    if (this.options && this.options.api) {
+    var _a;
+    if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.api) {
       this.options.api.exportDataAsCsv({
         fileName: filename + '.csv',
         columnSeparator: ';',
@@ -20,7 +21,8 @@ export class YooAgGridComponent {
     }
   }
   async exportXLSX(filename) {
-    if (this.options && this.options.api) {
+    var _a;
+    if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.api) {
       this.options.api.exportDataAsExcel({
         fileName: filename + '.xlsx',
         processCellCallback: (params) => this.exportProcessCallback(params)
@@ -64,7 +66,6 @@ export class YooAgGridComponent {
         cellRendererParams: c.cellRendererParams ? { ...c.cellRendererParams, innerRenderer: getRenderer(c.cellRendererParams.innerRenderer) } : null,
         cellEditor: c.editable ? (isString(c.cellEditor) || !c.cellEditor ? getEditor(c.cellEditor) : c.cellEditor) : null,
         comparator: c.comparator ? getComparator(c.comparator) : null
-        // headerComponent: isString(c.headerComponent) ? getHeaderComponent(c.headerComponent as TGridColumnHeader) : null
       };
       if (c.type === 'rightAligned') {
         finalColDef.headerClass = 'ag-right-aligned-header';

package/dist/collection/components/grid/ag-grid/grid-renderers.js

@@ -1,7 +1,8 @@
 import { FormFieldType, IncentivePartType, IncentiveStatus, IncentiveType } from '@shared/interfaces';
-import { aclRolesResolver, dateDiff, dateFormat, dateParse, dispatchCustomEvent, getContrastColor, getCssColor, getUserDisplayName, groupsResolver, pipes, salesAIFormatDemand, salesAIGetColorFromPattern, toButton, toDate, toHours, translate, translateMulti, utc } from '@shared/utils';
+import { aclRolesResolver, dateDiff, dateFormat, dateParse, dispatchCustomEvent, getCssColor, getUserDisplayName, groupsResolver, pipes, salesAIFormatDemand, salesAIGetColorFromPattern, toButton, toDate, toHours, translate, translateMulti, utc } from '@shared/utils';
 import { compact, get, indexOf, isArray, isEmpty, isFunction, isNumber, isObject, isString, keys, map, round } from 'lodash-es';
 import { countryFlag } from '../../..//utils/helpers/country-helpers';
+import { getPositionText } from '../../../feature-learn/incentive/helpers/incentive-helpers';
 import { getWorkflowStepBadge } from '../../../feature-operate/mission/helpers/missions-helpers';
 import { dateRangeState } from '../../../utils/helpers/common-helpers';
 import { getJSONHighlighted } from '../../../utils/helpers/form-helpers';
@@ -20,10 +21,10 @@ function isCSVOrExcel(params) {
   return (params === null || params === void 0 ? void 0 : params.type) === 'excel' || (params === null || params === void 0 ? void 0 : params.type) === 'csv';
 }
 function defaultRenderer(params) {
-  var _a;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
   let retVal = params.value || '';
   let translateFunction = translateMulti;
-  if (params && params.colDef && params.colDef.translate) {
+  if ((_a = params === null || params === void 0 ? void 0 : params.colDef) === null || _a === void 0 ? void 0 : _a.translate) {
     translateFunction = translate;
   }
   if (isArray(retVal)) {
@@ -34,22 +35,25 @@ function defaultRenderer(params) {
     if (retVal === null || retVal === void 0 ? void 0 : retVal.title) {
       retVal = retVal.title;
     }
-    if (params && params.colDef && params.colDef.fieldDefinition && params.colDef.fieldDefinition.valuesColor) {
+    if ((_c = (_b = params === null || params === void 0 ? void 0 : params.colDef) === null || _b === void 0 ? void 0 : _b.fieldDefinition) === null || _c === void 0 ? void 0 : _c.valuesColor) {
       valuesColor = params.colDef.fieldDefinition.valuesColor;
     }
-    const color = (_a = valuesColor === null || valuesColor === void 0 ? void 0 : valuesColor.find((c) => c.key === retVal)) === null || _a === void 0 ? void 0 : _a.value;
-    const contrast = color ? getContrastColor(color) : getCssColor('dark');
+    const color = (_d = valuesColor === null || valuesColor === void 0 ? void 0 : valuesColor.find((c) => c.key === retVal)) === null || _d === void 0 ? void 0 : _d.value;
+    if ((_f = (_e = params === null || params === void 0 ? void 0 : params.colDef) === null || _e === void 0 ? void 0 : _e.fieldDefinition) === null || _f === void 0 ? void 0 : _f.values) {
+      const title = (_j = (_h = (_g = params === null || params === void 0 ? void 0 : params.colDef) === null || _g === void 0 ? void 0 : _g.fieldDefinition) === null || _h === void 0 ? void 0 : _h.values.find((v) => (v === null || v === void 0 ? void 0 : v.value) === retVal)) === null || _j === void 0 ? void 0 : _j.title;
+      retVal = title || retVal;
+    }
     if (params.isExport) {
       return translateFunction(stripHtml((retVal === null || retVal === void 0 ? void 0 : retVal.toString()) || ''));
     }
-    return ('<div class="' + (color ? 'color-container' : '') + '" style="background:' + (color || '') + ';color:' + contrast + '"  >' + translateFunction(retVal.toString()) + '</div>');
+    return color ? `<yoo-tag custom-color="${color}">${translateFunction(retVal.toString())}</yoo-tag>` : ('<div>' + translateFunction(retVal.toString()) + '</div>');
   }
 }
 function exportRenderer(params) {
-  //params = cloneDeep(params || {} as any);
+  var _a;
   params.isExport = true;
   let retVal;
-  if (params && params.column && params.column.getColDef) {
+  if ((_a = params === null || params === void 0 ? void 0 : params.column) === null || _a === void 0 ? void 0 : _a.getColDef) {
     const colDef = params.column.getColDef();
     if (isFunction(colDef.cellRenderer)) {
       retVal = colDef.cellRenderer(params);
@@ -110,15 +114,19 @@ function aclRoleRenderer(params) {
 function tagsRenderer(params) {
   let retVal = compact([].concat(params.value || []));
   retVal = retVal.map((value) => {
+    var _a;
     if (!isString(value)) {
       value = value.tag;
     }
+    if ((_a = params) === null || _a === void 0 ? void 0 : _a.translate) {
+      value = translate(value);
+    }
     return value;
   });
   const tooltip = document.createElement('yoo-tooltip');
   tooltip.setAttribute('hoverable', 'true');
   const tooltipContent = retVal.join(', ');
-  const content = retVal.map((t) => `<yoo-tag color="stable">${t}</yoo-tag>`).join('');
+  const content = retVal.map((t) => { var _a, _b; return `<yoo-tag color="${((_b = (_a = params) === null || _a === void 0 ? void 0 : _a.getColor) === null || _b === void 0 ? void 0 : _b.call(_a, params.value)) || 'stable'}">${t}</yoo-tag>`; }).join('');
   tooltip.delay = [1500, 0];
   tooltip.content = tooltipContent;
   tooltip.placement = 'bottom';
@@ -128,20 +136,18 @@ function tagsRenderer(params) {
   truncate.innerHTML = content;
   tooltip.appendChild(truncate);
   const container = document.createElement('div');
-  // container.classList.add('scrollable');
-  // container.classList.add('margin-top');
   container.appendChild(tooltip);
   if (params.isExport) {
     return content;
   }
-  return container; // tooltip; // ;
+  return container;
 }
 function truncateRenderer(params, extraHtml) {
   const tooltip = document.createElement('yoo-tooltip');
   tooltip.setAttribute('hoverable', 'true');
   let content = (isArray(params.value) ? params.value.join(', ') : params.value) || '';
   if (extraHtml) {
-    content = '<div style="white-space: nowrap;display:flex">' + extraHtml + '<span style="white-space: nowrap;flex:1;;overflow:hidden;text-overflow:ellipsis;">' + content + '</span></div>';
+    content = '<div style="white-space: nowrap;display:flex">' + extraHtml + '<span style="white-space:nowrap;flex:1;;overflow:hidden;text-overflow:ellipsis;">' + content + '</span></div>';
   }
   tooltip.content = content;
   tooltip.placement = 'bottom';
@@ -187,10 +193,10 @@ function translateRenderer(params) {
   if (isNumber(value)) {
     return value;
   }
-  else if (value && value.toUpperCase) {
+  else if (value === null || value === void 0 ? void 0 : value.toUpperCase) {
     return translateMulti(value.toUpperCase());
   }
-  else if ((value === null || value === void 0 ? void 0 : value.value) && ((_a = value === null || value === void 0 ? void 0 : value.value) === null || _a === void 0 ? void 0 : _a.toUpperCase)) {
+  else if ((_a = value === null || value === void 0 ? void 0 : value.value) === null || _a === void 0 ? void 0 : _a.toUpperCase) {
     return translateMulti(value.value.toUpperCase());
   }
   return '';
@@ -229,7 +235,7 @@ function numberRenderer(params) {
   else if (isNumber(params.defaultValue)) {
     retVal = params.defaultValue.toString();
   }
-  else if (retVal && retVal.toString) {
+  else if (retVal === null || retVal === void 0 ? void 0 : retVal.toString) {
     retVal = retVal.toString();
   }
   else if ((_a = params) === null || _a === void 0 ? void 0 : _a.loader) {
@@ -279,9 +285,7 @@ function durationRenderer(params) {
 }
 function distanceRenderer(params) {
   var _a, _b;
-  // const keyPath = params.colDef.field.split('.');
   let value;
-  // if (isArray(keyPath) && keyPath.indexOf('distance') > -1 && params && params.node && params.data && params.node.data.getIn) {
   let _geoloc = (_a = params.node.data) === null || _a === void 0 ? void 0 : _a._geoloc;
   let _geolocSave = (_b = params.node.data) === null || _b === void 0 ? void 0 : _b._geolocSave;
   _geoloc = isEmpty(_geoloc) === false ? (_geoloc.toJS ? _geoloc.toJS() : _geoloc) : '';
@@ -289,7 +293,6 @@ function distanceRenderer(params) {
   if (_geoloc && _geoloc.length === 2 && _geolocSave && _geolocSave.length === 2) {
     value = getDistance(_geolocSave[1], _geolocSave[0], _geoloc[1], _geoloc[0]);
   }
-  // }
   return formatDistance(value);
 }
 function getDistance(lat1, lon1, lat2, lon2, unit = 'K') {
@@ -440,7 +443,6 @@ function photoRenderer(params) {
 function multiphotoRenderer(params) {
   const photos = params.value;
   if (photos && isArray(photos) && photos.length > 0) {
-    //return photos.map((photo) => `<yoo-img style="${getStyle(roundedImageStyle)}" src="${photo || ''}" />`).join(' ');
     const container = document.createElement('div');
     container.style.display = 'inherit';
     photos.forEach((photo, index) => {
@@ -465,7 +467,6 @@ function imageRenderer(params) {
   const colDef = (_a = params.column) === null || _a === void 0 ? void 0 : _a.getColDef();
   photos = compact([].concat((_c = (_b = colDef) === null || _b === void 0 ? void 0 : _b.fieldDefinition) === null || _c === void 0 ? void 0 : _c.imagesCarousel));
   if (photos && isArray(photos) && photos.length > 0) {
-    //return photos.map((photo) => `<yoo-img style="${getStyle(roundedImageStyle)}" src="${photo || ''}" />`).join(' ');
     const container = document.createElement('div');
     container.style.display = 'inherit';
     photos.forEach((photo) => {
@@ -481,11 +482,12 @@ function imageRenderer(params) {
   return '';
 }
 function videoRenderer(params) {
-  return '<video class="ag-cell-image video" [src]="' + params.value + '"></video>';
+  return (params === null || params === void 0 ? void 0 : params.value) ? '<video class="ag-cell-image video" src="' + params.value + '"></video>' : '';
 }
 function starratingRenderer(params) {
+  var _a, _b;
   let max = 5;
-  if (params.colDef && params.colDef.cellRendererParams && params.colDef.cellRendererParams.max) {
+  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>';
@@ -510,14 +512,14 @@ function taskRenderer(params) {
 }
 function todoRenderer(params) {
   const value = params.value;
-  if (value && value.values) {
+  if (value === null || value === void 0 ? void 0 : value.values) {
     return map(value.values, (v) => v.text.value).join(', ');
   }
   return '';
 }
 function timerRenderer(params) {
   const value = params.value;
-  if (value && value.startDate && value.endDate) {
+  if ((value === null || value === void 0 ? void 0 : value.startDate) && (value === null || value === void 0 ? void 0 : value.endDate)) {
     const ms = dateDiff(toDate(value.endDate), toDate(value.startDate));
     const s = Math.floor(toHours(ms)) + dateFormat(utc(new Date(ms)), ':mm:ss');
     return s;
@@ -572,17 +574,14 @@ function userRenderer(params) {
 function courseRenderer(params) {
   const wrapper = document.createElement('div');
   wrapper.classList.add('col');
-  // const imageWrapper = document.createElement('div');
   const image = document.createElement('yoo-img');
   image.classList.add('image');
-  // imageWrapper.appendChild(image);
   image.type = 'background';
   image.src = params.data.courseImage;
   wrapper.appendChild(image);
   const title = document.createElement('div');
   title.classList.add('text');
   title.innerText = translateMulti((params.data.courseName || '').toString());
-  // wrapper.appendChild(imageWrapper);
   wrapper.appendChild(title);
   return wrapper;
 }
@@ -651,6 +650,7 @@ function progressbarRenderer(params) {
   const progressbar = document.createElement('yoo-progress-bar');
   progressbar.classList.add('grid-cell');
   progressbar.value = params.value;
+  progressbar.animated = params.animated === true;
   return progressbar;
 }
 function chartRenderer(params) {
@@ -716,14 +716,14 @@ function folderIconRenderer(params) {
     img = `<yoo-img style="width:1.5rem; margin-right:0.5rem" src="${folder.imgSrc || ((_b = folder.background) === null || _b === void 0 ? void 0 : _b._downloadURL)}"></yoo-img>`;
   }
   else {
-    img = ` <yoo-avatar style="margin-right:0.5rem" size="small" icon="${folder.icon || 'folder'}" color="${folder.color || 'app-color'}"></yoo-avatar>`;
+    img = ` <yoo-avatar style="margin-right:0.5rem" size="small" icon="${folder.folderType === 'article' ? 'pages' : folder.icon || 'folder'}" color="${folder.color || 'app-color'}"></yoo-avatar>`;
   }
   return truncateRenderer({ value: folder.name, maxLine: 1 }, img);
 }
 function buttonRenderer(params) {
-  if (params.colDef && params.colDef.cellRendererParams) {
+  var _a;
+  if ((_a = params.colDef) === null || _a === void 0 ? void 0 : _a.cellRendererParams) {
     const color = params.colDef.cellRendererParams.color || '';
-    // let text = translate(params.colDef.context.text) || '';
     const icon = params.colDef.cellRendererParams.icon || '';
     return `<yoo-button class="small outline-dark ${color}">
          <yoo-icon name="${icon}"</yoo-icon>
@@ -732,10 +732,10 @@ function buttonRenderer(params) {
   return '';
 }
 function missionValidationRenderer(params) {
-  var _a, _b, _c, _d, _e;
+  var _a, _b, _c, _d, _e, _f;
   const value = params.value;
   let status = '';
-  if (params.node && params.node.data) {
+  if ((_a = params.node) === null || _a === void 0 ? void 0 : _a.data) {
     status = params.node.data.status;
   }
   let retVal = '';
@@ -745,11 +745,11 @@ function missionValidationRenderer(params) {
   else if (value === false || value === 'false' || value === 'rejected') {
     retVal = `<yoo-tag custom-color="${getCssColor('danger')}">${translate('REJECTED')}</yoo-tag>`;
   }
-  else if (!((_c = (_b = (_a = params === null || params === void 0 ? void 0 : params.node) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.description) === null || _c === void 0 ? void 0 : _c.withoutValidation) &&
+  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="${getCssColor('warning')}">${translate('TOBEVALIDATED')}</yoo-tag>`;
   }
-  if (((_d = params === null || params === void 0 ? void 0 : params.node) === null || _d === void 0 ? void 0 : _d.group) && ((_e = params === null || params === void 0 ? void 0 : params.colDef) === null || _e === void 0 ? void 0 : _e.cellRenderer) === 'group') {
+  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="${getCssColor('stable')}">${translate('N/A')}</yoo-tag>`;
   }
   return isCSVOrExcel(params) ? stripHtml(retVal) : retVal;
@@ -866,53 +866,60 @@ function missionUniqueKeyRenderer(params) {
   return '';
 }
 function conformityProgressRenderer(params) {
+  var _a, _b, _c, _d;
   let retVal = '';
-  if (params.node && params.node.aggData && params.node.aggData.status && params.node.aggData.validated) {
+  if (((_b = (_a = params.node) === null || _a === void 0 ? void 0 : _a.aggData) === null || _b === void 0 ? void 0 : _b.status) && ((_d = (_c = params.node) === null || _c === void 0 ? void 0 : _c.aggData) === null || _d === void 0 ? void 0 : _d.validated)) {
     params.node.aggData.conformityprogress = conformityProgressValue(params.node);
     retVal += getKeyTemplate('conformityprogress', params.node.aggData.conformityprogress, ' %', true);
   }
   return retVal;
 }
 export function conformityProgressValue(node) {
-  if (node.aggData && node.aggData.validated && node.aggData.validated.counts) {
+  var _a, _b;
+  if ((_b = (_a = node.aggData) === null || _a === void 0 ? void 0 : _a.validated) === null || _b === void 0 ? void 0 : _b.counts) {
     const retVal = Math.round(((node.aggData.validated.counts.validated || 0) * 100) / ((node.aggData.validated.counts.validated || 0) + (node.aggData.validated.counts.rejected || 0)));
     return isNaN(retVal) ? 0 : retVal;
   }
   return 0;
 }
 function progressRenderer(params) {
+  var _a, _b, _c, _d;
   let retVal = '';
-  if (params.node && params.node.aggData && params.node.aggData.status && params.node.aggData.validated) {
+  if (((_b = (_a = params.node) === null || _a === void 0 ? void 0 : _a.aggData) === null || _b === void 0 ? void 0 : _b.status) && ((_d = (_c = params.node) === null || _c === void 0 ? void 0 : _c.aggData) === null || _d === void 0 ? void 0 : _d.validated)) {
     params.node.aggData.progress = progressValue(params.node);
     retVal += getKeyTemplate('progress', params.node.aggData.progress, ' %', true);
   }
   return retVal;
 }
 export function progressValue(node) {
-  if (node && node.aggData && node.aggData.status && node.aggData.status.counts) {
+  var _a, _b;
+  if ((_b = (_a = node.aggData) === null || _a === void 0 ? void 0 : _a.status) === null || _b === void 0 ? void 0 : _b.counts) {
     const retVal = Math.round(((node.aggData.status.counts.finished || 0) * 100) / ((node.aggData.status.counts.finished || 0) + (node.aggData.status.counts.available || 0)));
     return isNaN(retVal) ? 0 : retVal;
   }
   return 0;
 }
 function validationProgressRenderer(params) {
+  var _a, _b, _c, _d;
   let retVal = '';
-  if (params.node && params.node.aggData && params.node.aggData.status && params.node.aggData.validated) {
+  if (((_b = (_a = params.node) === null || _a === void 0 ? void 0 : _a.aggData) === null || _b === void 0 ? void 0 : _b.status) && ((_d = (_c = params.node) === null || _c === void 0 ? void 0 : _c.aggData) === null || _d === void 0 ? void 0 : _d.validated)) {
     params.node.aggData.validationprogress = validationProgressValue(params.node);
     retVal += getKeyTemplate('validationprogress', params.node.aggData.validationprogress, ' %', true);
   }
   return retVal;
 }
 export function validationProgressValue(node) {
-  if (node.aggData && node.aggData.validated && node.aggData.validated.counts) {
+  var _a, _b;
+  if ((_b = (_a = node.aggData) === null || _a === void 0 ? void 0 : _a.validated) === null || _b === void 0 ? void 0 : _b.counts) {
     const retVal = Math.round((((node.aggData.validated.counts.validated || 0) + (node.aggData.validated.counts.rejected || 0)) * 100) / (node.aggData.status.counts.finished || 0));
     return isNaN(retVal) ? 0 : retVal;
   }
   return 0;
 }
 function conformityRelativeProgressRenderer(params) {
+  var _a, _b, _c, _d;
   let retVal = '';
-  if (params.node && params.node.aggData && params.node.aggData.status && params.node.aggData.validated) {
+  if (((_b = (_a = params.node) === null || _a === void 0 ? void 0 : _a.aggData) === null || _b === void 0 ? void 0 : _b.status) && ((_d = (_c = params.node) === null || _c === void 0 ? void 0 : _c.aggData) === null || _d === void 0 ? void 0 : _d.validated)) {
     params.node.aggData.conformityrelativeprogress = conformityRelativeProgressValue(params.node);
     retVal += getKeyTemplate('conformityrelativeprogress', params.node.aggData.conformityrelativeprogress, ' %', true);
   }
@@ -987,6 +994,23 @@ function incentiveTotalRenderer(params) {
   }
   return '-';
 }
+/**
+ * @function incentiveRankingRenderer
+ * @description Display the user rank
+ * @param {ICellRendererParams} params
+ */
+function incentiveRankingRenderer(params) {
+  const awardIcon = '<yoo-tag color="app-color-10" icon="award-trophy-star" size="small"></yoo-tag>';
+  if (params.data.type === IncentiveType.milestones) {
+    // TODO: GET POSITION
+    const position = 1;
+    const positionText = getPositionText(position);
+    return `${awardIcon} ${positionText}`;
+  }
+  else {
+    return `${awardIcon} -`;
+  }
+}
 function courseStatusRenderer(params) {
   var _a;
   const status = isString(params.value) ? params.value : (_a = params.value) === null || _a === void 0 ? void 0 : _a.tag;
@@ -997,7 +1021,6 @@ function courseStatusRenderer(params) {
   truncate.innerHTML = content;
   const container = document.createElement('div');
   container.classList.add('scrollable');
-  // container.classList.add('margin-top');
   container.appendChild(truncate);
   if (params.isExport) {
     return status;
@@ -1015,7 +1038,10 @@ function campaignStatusRenderer(params) {
   icon.slot = 'start';
   tag.appendChild(icon);
   tag.appendChild(document.createTextNode(options.text));
-  return isCSVOrExcel(params) ? options.text : tag;
+  const container = document.createElement('div');
+  container.classList.add('center-container');
+  container.appendChild(tag);
+  return isCSVOrExcel(params) ? options.text : container;
 }
 export function getColorFromKey(key) {
   if (key === 'finished') {
@@ -1039,7 +1065,6 @@ export function getColorFromKey(key) {
   return null;
 }
 export function getKeyTemplate(key, count, suffix = '', hideKey = false, hideColor = false) {
-  // let color = getColor(key);
   let displayName = key;
   if (key === null || key === void 0 ? void 0 : key.toUpperCase) {
     displayName = translate(key.toUpperCase());
@@ -1120,9 +1145,6 @@ class EntityRenderer {
     this.entity.disableRowClick = params.disableRowClick;
     this.entity.isGridCell = true;
     this.entity.item = params.useValue ? params.value : params.data;
-    // if (entityType === 'missions') {
-    //   this.entity.displayType = 'card-inbox';
-    // }
     if (entityType === 'missiondatas' && ((_b = (_a = params === null || params === void 0 ? void 0 : params.data) === null || _a === void 0 ? void 0 : _a.mission) === null || _b === void 0 ? void 0 : _b.hasWorkflow)) {
       this.entity.entityType = 'missions';
       this.entity.item = (_c = params.data) === null || _c === void 0 ? void 0 : _c.mission;
@@ -1132,9 +1154,6 @@ class EntityRenderer {
     if ((params === null || params === void 0 ? void 0 : params.displayType) === 'card-campaign') {
       this.entity.extraClass = 'grid-card-campaign';
     }
-    // this.entity.forceUpdate();
-    // container.style.height = params.height + 'px';
-    // container.style.minHeight = params.minheight + 'px';
     if ((_e = params.style) === null || _e === void 0 ? void 0 : _e.width) {
       container.style.width = params.style.width;
     }
@@ -1170,31 +1189,6 @@ class GridRenderer {
     }
   }
 }
-// class SalesairecommondationRenderer implements ICellRendererComp {
-//   eGui: HTMLElement;
-//   getGui(): HTMLElement {
-//     return this.eGui;
-//   }
-//   init(_params: any) {
-//     const container = document.createElement('div');
-//     container.innerHTML += 'Extra stuff';
-//     // this.grid = document.createElement('yoo-grid');
-//     // this.grid.displayType = params.displayType || 'card-list';
-//     // this.grid.collectionName = params.collectionName;
-//     // this.grid.customModel = params.customModel;
-//     // this.grid.items = params.value;
-//     // this.grid.isLocal = true;
-//     // container.appendChild(this.grid);
-//     this.eGui = container;
-//   }
-//   refresh(_params) {
-//     // if (this.grid) {
-//     //   this.grid.items = params.value;
-//     //   return true;
-//     // }
-//     return true;
-//   }
-// }
 class ActionsRenderer {
   getGui() {
     return this.eGui;
@@ -1417,6 +1411,8 @@ export function getRenderer(renderer) {
       return incentiveParticipantsRenderer;
     case 'incentiveTotalRenderer':
       return incentiveTotalRenderer;
+    case 'incentiveRankingRenderer':
+      return incentiveRankingRenderer;
     case 'courseStatusRenderer':
       return courseStatusRenderer;
     case 'entityRenderer':
@@ -1425,8 +1421,6 @@ export function getRenderer(renderer) {
       return ActionsRenderer;
     case 'gridRenderer':
       return GridRenderer;
-    // case 'salesairecommondationRenderer':
-    //   return SalesairecommondationRenderer;
     case 'exportRenderer':
       return exportRenderer;
     case 'defaultRenderer':

package/dist/collection/components/grid/grid/grid.css

@@ -243,6 +243,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   --framed-shadow: initial;
   --framed-radius: initial;
   --framed-margin: 0;
+  --card-feed-border-color: var(--stable-alt-60, rgba(208, 208, 208, 0.6));
   display: block;
 }
 :host .flex {
@@ -276,12 +277,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   padding: var(--spacing-16, 1rem);
   padding-bottom: 0;
 }
-:host yoo-empty-state {
-  height: var(--empty-state-height, 10rem);
-}
-:host yoo-empty-state + yoo-button {
-  max-width: 15rem;
-  margin: 0 auto;
+:host .grid-progress yoo-progress-bar {
+  --progress-bar-color: var(--app-color, #5a30f4);
 }
 :host yoo-lottie {
   max-width: 31rem;
@@ -354,20 +351,22 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   width: 100%;
   padding: 0 var(--spacing-24, 1.5rem);
 }
-:host .empty-state h4 {
-  justify-self: center;
-  margin: unset;
+:host .empty-state yoo-empty-state {
+  height: var(--empty-state-height, 10rem);
 }
-:host .empty-state div {
-  color: var(--text-color, #807f83);
+:host .empty-state .empty-state-details {
+  color: var(--text-color-80, rgba(128, 127, 131, 0.8));
   font-size: var(--font-size-16, 1rem);
-  opacity: 0.7;
+  display: flex;
+  flex-direction: column;
+  grid-gap: var(--spacing-08, 0.5rem);
+  width: 100%;
   padding-bottom: var(--spacing-16, 1rem);
   text-align: center;
 }
-:host .empty-state yoo-empty-state {
-  height: 10rem;
-  padding-top: var(--spacing-16, 1rem);
+:host .empty-state h4 {
+  justify-self: center;
+  margin: unset;
 }
 :host .entity-container-map {
   overflow: hidden;
@@ -816,7 +815,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host .body-container.card-feed .item.item-md {
   padding: 0;
   background: var(--light-10, rgba(255, 255, 255, 0.1));
-  border-bottom: var(--spacing-08, 0.5rem) solid var(--stable-alt-60, rgba(208, 208, 208, 0.6));
+  border-bottom: var(--spacing-08, 0.5rem) solid var(--card-feed-border-color);
 }
 :host .body-container.card-feed .item.item-ios yoo-entity,
 :host .body-container.card-feed .item.item-md yoo-entity {
@@ -2824,7 +2823,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host(.web:not(.framed)) .container-base .entity-container {
   overflow: hidden;
 }
-:host(.web:not(.framed)) .container-base .entity-inner-container.card-list,
+:host(.web:not(.framed)) .container-base .entity-inner-container.card-list:not(.entitycomments),
 :host(.web:not(.framed)) .container-base .entity-inner-container.card-course-row,
 :host(.web:not(.framed)) .container-base .entity-inner-container.card-battle,
 :host(.web:not(.framed)) .container-base .entity-inner-container.card-notification {
@@ -3339,6 +3338,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   display: flex;
   flex-direction: column;
   grid-gap: var(--spacing-08, 0.5rem);
+  align-items: center;
+  width: unset;
 }
 
 :host(.card-cell.small.channel) yoo-empty-state,
@@ -3654,11 +3655,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   height: 100%;
 }
 
-:host(.plans.empty),
-:host(.productbatch.empty) {
-  height: auto;
-}
-
 :host(.photos-tab) .container-base .search-toggle-container {
   display: flex;
   justify-content: center;
@@ -3786,7 +3782,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 :host(.tree) .container-base {
   flex: 1;
-  margin-left: 0 !important;
 }
 
 :host(.giphy) .grid-cell {