@yoobic/yobi 8.2.0-16 → 8.2.0-19

package/dist/collection/components/form/form-input/form-input.js

@@ -1,4 +1,4 @@
-import { copyToClipboard, debounce as _debounce, disableKeyboardResize, enableKeyboardResize, extractTextFromStringHTML, isAndroid, isAnimationsDisabled, isHTML, isIOS, isKeyboardResizeModeInactive, isNativeMobile, isNullOrUndefined, isPresent, isSafari, isWeb, resizeObserve, showToast, translate } from '@shared/utils';
+import { copyToClipboard, debounce as _debounce, disableKeyboardResize, enableKeyboardResize, extractTextFromStringHTML, isAndroid, isAnimationsDisabled, isHTML, isIOS, isKeyboardResizeModeInactive, isNativeMobile, isNullOrUndefined, isSafari, isWeb, resizeObserve, showToast, translate } from '@shared/utils';
 import { Component, Element, Event, h, Host, Method, Prop, State, Watch } from '@stencil/core';
 import { isFunction, isNumber, isString } from 'lodash-es';
 import { getAppContext } from '../../../utils/helpers/common-helpers';
@@ -19,6 +19,7 @@ export class YooFormInputComponent {
     this.size = 'large';
     this.initialCheckboxParams = null;
     this.fireInputChangeEvent = false;
+    this.allowDecimals = false;
     this.checkboxParams = null;
     this.hostWidth = 0;
     this.isKeyboardResizeModeInactive = isKeyboardResizeModeInactive();
@@ -134,6 +135,7 @@ export class YooFormInputComponent {
         break;
       case 'number':
         this.finalIconPrefix = this.iconPrefix ? this.iconPrefix : 'ranking';
+        !this.allowDecimals && this.step == undefined && (this.step = 1);
         break;
       case 'password':
         this.finalIconPrefix = 'password';
@@ -175,7 +177,6 @@ export class YooFormInputComponent {
     this.internalPlaceholder = ((_b = this.checkboxParams) === null || _b === void 0 ? void 0 : _b.value) ? null : this.placeholder;
     this.inputType = this.type;
     this.setLocalValue(true);
-    this.inputHasValue = isPresent(this.value);
   }
   disconnectedCallback() {
     if (isIOS()) {
@@ -203,30 +204,34 @@ export class YooFormInputComponent {
         el.value = this.localValue + '.';
       }
       if (!isNumberInput || el.value || ev.data !== '-') {
-        if (isNumberInput && ['e', '+'].includes(ev.data)) {
-          el.value = this.value;
-        }
-        value = convertValueForInputType(el.value, type);
-        this.wasPreviousKeyPressMinus = ev.data === '-';
-        this.inputHasValue = value === '' ? false : isPresent(value);
-        if (this.maxCharacters) {
-          if (this.maxCharacters - el.value.length < 0) {
-            value = value.substring(0, this.maxCharacters);
-            el.value = value;
-            this.remainingCharacters = 0;
+        if (!(isNumberInput && (el.value.length === 1 && el.value[0] === '-'))) {
+          if (isNumberInput && ['e', '+'].includes(ev.data)) {
+            el.value = this.value;
           }
-          else {
-            this.remainingCharacters = this.maxCharacters - el.value.length;
+          value = convertValueForInputType(el.value, type);
+          if (this.maxCharacters) {
+            if (this.maxCharacters - el.value.length < 0) {
+              value = value.substring(0, this.maxCharacters);
+              el.value = value;
+              this.remainingCharacters = 0;
+            }
+            else {
+              this.remainingCharacters = this.maxCharacters - el.value.length;
+            }
           }
+          const skipValueAssignment = !((this.localValue === null && value) || (this.localValue && (!isNullOrUndefined(value) || value === '')));
+          this.emitValueAndSetValidity(value, skipValueAssignment);
+          this.localValue = value;
         }
-        const skipValueAssignment = !((this.localValue === null && value) || (this.localValue && (!isNullOrUndefined(value) || value === '')));
-        this.emitValueAndSetValidity(value, skipValueAssignment);
-        this.localValue = value;
+      }
+      if (isNumberInput && (ev.data === '-' || !el.value)) {
+        this.wasPreviousKeyPressMinus = ev.data === '-';
       }
     }
   }
   onKeyPress(ev) {
     const keycode = ev.keyCode;
+    const inputValue = ev.target.value;
     const BACKSPACE_KEYCODE = 8;
     if (keycode !== BACKSPACE_KEYCODE && this.maxCharacters && this.remainingCharacters < 1) {
       ev.preventDefault();
@@ -241,9 +246,9 @@ export class YooFormInputComponent {
       if (ev.key === 'Tab') {
         this.tabPressed.emit(true);
       }
-      if (this.type === 'number') {
-        // prevent decimal point if minimal step is 1
-        if (this.step && Number.isInteger(this.step) && ev.key === '.') {
+      if (this.isNumberInput(this.type)) {
+        // prevent decimal point if not allowed
+        if (!this.allowDecimals && ev.key === '.') {
           ev.preventDefault();
         }
         const MINUS_KEYCODE = 189;
@@ -253,7 +258,7 @@ export class YooFormInputComponent {
          * For example '222-2', as this will return a value of null which leads to validation issues in an
          * optional field.
          */
-        if ((this.inputHasValue || this.wasPreviousKeyPressMinus) && keycode === MINUS_KEYCODE) {
+        if ((inputValue || this.wasPreviousKeyPressMinus) && keycode === MINUS_KEYCODE) {
           ev.preventDefault();
         }
         // This only allows the keycodes of numbers 0-9
@@ -305,7 +310,6 @@ export class YooFormInputComponent {
   }
   clearInput() {
     this.localValue = null;
-    this.inputHasValue = false;
     if (this.inputElement) {
       this.inputElement.value = null;
       this.updateRemainingCharacters(true);
@@ -319,7 +323,7 @@ export class YooFormInputComponent {
   }
   getPattern() {
     if (this.isNumberInput(this.inputType)) {
-      return '[+-]?[0-9]+[,.]?([0-9]+)?';
+      return `^([+-]{1})?[0-9]+${this.allowDecimals ? '[,.]?([0-9]+)?' : ''}`;
     }
   }
   isTextInput(inputType) {
@@ -1278,6 +1282,24 @@ export class YooFormInputComponent {
       "attribute": "fire-input-change-event",
       "reflect": false,
       "defaultValue": "false"
+    },
+    "allowDecimals": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "allow-decimals",
+      "reflect": false,
+      "defaultValue": "false"
     }
   }; }
   static get states() { return {

package/dist/collection/components/form/form-input-container/form-input-container.css

@@ -993,6 +993,12 @@ span.fr-img-caption.fr-view {
   display: block;
   margin-top: var(--spacing-08, 0.5rem);
 }
+:host(.readonly:not(.forcedhistory):not(.custom-width)) ::slotted(yoo-form-input).inline,
+:host(.readonly:not(.forcedhistory):not(.custom-width)) ::slotted(yoo-form-image-tagging).inline,
+:host(.readonly:not(.forcedhistory):not(.custom-width)) ::slotted(yoo-form-ranking).inline,
+:host(.readonly:not(.forcedhistory):not(.custom-width)) ::slotted(yoo-form-autocomplete).inline {
+  margin-top: 0;
+}
 :host(.readonly:not(.forcedhistory):not(.custom-width)) ::slotted(yoo-form-categorize-words),
 :host(.readonly:not(.forcedhistory):not(.custom-width)) ::slotted(yoo-form-connect),
 :host(.readonly:not(.forcedhistory):not(.custom-width)) ::slotted(yoo-form-swipe-cards) {
@@ -1000,6 +1006,14 @@ span.fr-img-caption.fr-view {
   margin-top: var(--spacing-16, 1rem);
 }
 
+:host(.readonly.custom-width.inline-row:not(.label-top-aligned)) .top-container {
+  justify-content: center;
+}
+
+:host(.readonly.inline-row:not(.label-top-aligned)) ::slotted(yoo-form-autocomplete) {
+  margin-top: 0;
+}
+
 :host(:not(.lesson).readonly) {
   --field-title-font-weight: var(--font-weight-700, 700);
 }
@@ -1188,6 +1202,17 @@ span.fr-img-caption.fr-view {
   padding-top: var(--label-padding-top);
 }
 
+:host(.web.operator) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 2rem;
+  padding: 0;
+}
+:host(.web.operator) .top-container .content-container {
+  padding: 0 0 var(--spacing-04, 0.25rem) 0;
+}
+
 .fr-view h1, .fr-view h2, .fr-view h3, .fr-view h4, .fr-view h5, .fr-view h6 {
   margin: 0;
   padding: 0;
@@ -1287,9 +1312,16 @@ span.fr-img-caption.fr-view {
   min-width: 5rem;
   margin-right: var(--spacing-08, 0.5rem);
 }
+:host(.inline-row:not(.label-top-aligned)) .top-container .label.readonly {
+  min-width: fit-content;
+  padding-top: 0;
+}
 :host(.inline-row:not(.label-top-aligned)) .top-container .content-container {
   width: 100%;
 }
+:host(.inline-row:not(.label-top-aligned)) .top-container .content-container.readonly {
+  width: fit-content;
+}
 
 :host(.inline-row.label-right-aligned) .top-container .label > span {
   width: 100%;

package/dist/collection/components/form/form-multi-input/form-multi-input.js

@@ -31,13 +31,13 @@ export class YooFormMultiInputComponent {
     this.dragAndDropPendingEvent = null;
     this.dragAndDropPendingEventTimeout = null;
     this.sortables = [];
-    this.setValueAndEmitChanges = debounce((value, skipValueAssignment = false) => {
+    this.setValueAndEmitChanges = (value, skipValueAssignment = false) => {
       if (!skipValueAssignment) {
         this.value = value;
       }
       const finalValue = this.isSimpleArray ? this.value[0] : this.value;
       setValueAndValidateInput(finalValue, this, false, true, true);
-    }, 500);
+    };
   }
   async reset(keys) {
     this.cells = this.getCells();
@@ -403,7 +403,8 @@ export class YooFormMultiInputComponent {
     if (this.reverseValueDimensions) {
       values = this.arrayTransposing(values);
     }
-    this.setValueAndEmitChanges(values);
+    // use debounce to prevent performance issue while typing
+    debounce(this.setValueAndEmitChanges.bind(this), 500)(values);
   }
   onTranslationValueUpdated(ev) {
     ev.stopPropagation();

package/dist/collection/components/form/form-radio/form-radio.css

@@ -438,7 +438,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   overflow: hidden;
   white-space: nowrap;
 }
-:host label yoo-tooltip {
+:host yoo-tooltip {
   padding-left: var(--spacing-08, 0.5rem);
 }
 

package/dist/collection/components/form/form-radio/form-radio.js

@@ -65,10 +65,10 @@ export class YooFormRadioComponent {
       h("slot", { name: (_a = this.options.findIndex((option) => this.value === option)) === null || _a === void 0 ? void 0 : _a.toString() }))) : ((_c = (_b = this.options) === null || _b === void 0 ? void 0 : _b.map((option, index) => ({ option, id: index.toString() }))) === null || _c === void 0 ? void 0 : _c.map(({ option, id }, index) => (h("div", null,
       h("input", { checked: this.value === option, disabled: this.disabled, id: id, name: this.name, required: this.required, type: "radio", value: typeof option === 'boolean' ? option.toString() : option, onChange: this.onChange.bind(this, option) }),
       h("label", { htmlFor: id },
-        h("slot", { name: id }),
-        this.helpers && this.helpers[index] &&
-          h("yoo-tooltip", { hoverable: true, placement: "bottom", content: this.helpers[index] },
-            h("yoo-icon", { name: "info", color: "stable", size: "small" })))))));
+        h("slot", { name: id })),
+      this.helpers && this.helpers[index] &&
+        h("yoo-tooltip", { hoverable: true, placement: "bottom", content: this.helpers[index] },
+          h("yoo-icon", { name: "info", color: "stable", size: "small" }))))));
   }
   static get is() { return "yoo-form-radio"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/form/form-recurrence-preview/form-recurrence-preview.css

@@ -206,6 +206,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   flex-direction: column;
   height: 100%;
   background-color: var(--light, #ffffff);
+  box-shadow: var(--shadow-01, 0 0.0625rem 0.25rem 0 rgba(0, 0, 0, 0.1));
 }
 :host footer {
   display: flex;

package/dist/collection/components/form/form-recurrence-preview/form-recurrence-preview.js

@@ -1,5 +1,6 @@
-import { getNextRecurrences, guessCurrentTimezone, pipes, TIMEZONES, translate } from '@shared/utils';
-import { Component, Event, h, Host, Prop } from '@stencil/core';
+import { closeModal, getNextRecurrences, guessCurrentTimezone, pipes, TIMEZONES, translate } from '@shared/utils';
+import { Component, Element, Event, h, Host, Prop } from '@stencil/core';
+import { getAppContext } from '../../../utils/helpers/common-helpers';
 const EmptyState = () => [h("yoo-empty-state", null), h("p", null, translate('LISTEMPTY'))];
 const Recurrences = ({ dates, label }) => (h("div", { class: "recurrences" },
   h("h1", null, translate(label)),
@@ -31,16 +32,17 @@ export class YooFormRecurrencePreviewComponent {
   }
   finish() {
     this.close.emit();
+    closeModal(null);
   }
   render() {
     const recurrences = getNextRecurrences(this.value, { max: this.max, timezone: this.timezone });
     const hasRecurrences = !!(recurrences === null || recurrences === void 0 ? void 0 : recurrences.length);
-    return (h(Host, null,
+    return (h(Host, { class: { ...getAppContext(this.host) } },
       h("header", null,
         h("yoo-navbar", null,
           h("yoo-items", { slot: "start" },
             h("yoo-button", { animated: true, color: "stable", fill: "transparent", rippleType: "unbounded", shape: "circular", onClick: () => this.finish() },
-              h("yoo-icon", { color: "stable", name: "left" }))),
+              h("yoo-icon", { color: "stable", name: "close" }))),
           h("yoo-truncate", null, translate('RECURRENCEPREVIEWTITLE')))),
       h("main", { class: { empty: !hasRecurrences } },
         hasRecurrences && h(Timezones, { value: this.timezone, values: TIMEZONES, onUpdate: (timezone) => (this.timezone = timezone) }),
@@ -133,4 +135,5 @@ export class YooFormRecurrencePreviewComponent {
         "references": {}
       }
     }]; }
+  static get elementRef() { return "host"; }
 }

package/dist/collection/components/form/form-star-rating/form-star-rating.css

@@ -270,8 +270,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   display: flex;
   align-items: center;
   justify-content: center;
-  min-width: 30px;
-  height: 30px;
+  min-width: 1.875rem;
+  height: 1.875rem;
   color: var(--dark, #000000);
   font-size: var(--font-size-14, 0.875rem);
   background: var(--stable-light, #f1f1f1);

package/dist/collection/components/form/form-table/form-table.js

@@ -382,7 +382,7 @@ export class YooFormTableComponent {
       "mutable": false,
       "complexType": {
         "original": "EntityType",
-        "resolved": "\"aisles\" | \"community\" | \"courses\" | \"dashboards\" | \"operations\" | \"pages\" | \"questions\" | \"scoring\" | \"tableau\" | \"tag\" | \"user\" | \"weekdays\" | \"campaignfilters\" | \"channel\" | \"communities\" | \"custommodels\" | \"geofilters\" | \"hierarchy\" | \"incentives\" | \"locationtypes\" | \"plans\" | \"translations\" | \"aclRole\" | \"blog\" | \"emails\" | \"feeds\" | \"files\" | \"groups\" | \"htmltemplates\" | \"lessons\" | \"locations\" | \"memos\" | \"missiondescriptions\" | \"missiondescriptiontemplates\" | \"missions\" | \"productbatch\" | \"products\" | \"tenants\" | \"userranks\" | \"users\" | \"type\" | \"aclPermission\" | \"aclPermissionList\" | \"aislelist\" | \"algorithm\" | \"apps\" | \"arexperience\" | \"armodel\" | \"badges\" | \"broadcasts\" | \"calendarEvents\" | \"campaigntypes\" | \"catalogs\" | \"certificates\" | \"channels\" | \"charttype\" | \"contacts\" | \"coursecategories\" | \"courses-small\" | \"courseselection\" | \"currencies\" | \"customapps\" | \"customforms\" | \"days\" | \"entitycomments\" | \"environnement\" | \"feedsComments\" | \"filesFolders\" | \"folders\" | \"formfield\" | \"giphy\" | \"googlemaps\" | \"hashtags\" | \"icons\" | \"language\" | \"lessondescriptions\" | \"liveshoppings\" | \"locationspublic\" | \"markas\" | \"mediacapturedevices\" | \"memolist\" | \"missiondatas\" | \"missiondescriptioncategories\" | \"missionfield\" | \"notes\" | \"notifications\" | \"photos\" | \"productbatchlist\" | \"productweightpair\" | \"publicAPITokens\" | \"questionsAnswers\" | \"regex\" | \"reporttemplates\" | \"reviewapps\" | \"salesdata\" | \"scorms\" | \"scormcloud\" | \"slots\" | \"tableauShared\" | \"tagGroups\" | \"topusers\" | \"unsplash\" | \"userlearningmanager\" | \"usercourseinfo\" | \"violetproducts\" | \"violetproductofferskus\" | \"violetbasketitems\" | \"violetshippingmethods\" | \"version\" | \"videocallusers\" | \"visits\" | \"waitlistvisit\" | \"waitlistcustomer\" | \"waitliststats\" | \"plansorlessons\" | \"widgets\"",
+        "resolved": "\"aisles\" | \"community\" | \"courses\" | \"dashboards\" | \"operations\" | \"pages\" | \"questions\" | \"scoring\" | \"tableau\" | \"tag\" | \"user\" | \"weekdays\" | \"campaignfilters\" | \"channel\" | \"communities\" | \"custommodels\" | \"geofilters\" | \"hierarchy\" | \"incentives\" | \"locationtypes\" | \"plans\" | \"translations\" | \"aclRole\" | \"blog\" | \"emails\" | \"feeds\" | \"files\" | \"groups\" | \"htmltemplates\" | \"lessons\" | \"locations\" | \"memos\" | \"missiondescriptions\" | \"missiondescriptiontemplates\" | \"missions\" | \"productbatch\" | \"products\" | \"tenants\" | \"userranks\" | \"users\" | \"type\" | \"aclPermission\" | \"aclPermissionList\" | \"aislelist\" | \"algorithm\" | \"apps\" | \"arexperience\" | \"armodel\" | \"audiences\" | \"badges\" | \"broadcasts\" | \"calendarEvents\" | \"campaigntypes\" | \"catalogs\" | \"certificates\" | \"channels\" | \"charttype\" | \"contacts\" | \"coursecategories\" | \"courses-small\" | \"courseselection\" | \"currencies\" | \"customapps\" | \"customforms\" | \"days\" | \"entitycomments\" | \"environnement\" | \"feedsComments\" | \"filesFolders\" | \"folders\" | \"formfield\" | \"giphy\" | \"googlemaps\" | \"hashtags\" | \"icons\" | \"language\" | \"lessondescriptions\" | \"liveshoppings\" | \"locationsaudience\" | \"locationspublic\" | \"markas\" | \"mediacapturedevices\" | \"memolist\" | \"missiondatas\" | \"missiondescriptioncategories\" | \"missiondescriptionreviewhistories\" | \"missionfield\" | \"notes\" | \"notifications\" | \"photos\" | \"productbatchlist\" | \"productweightpair\" | \"publicAPITokens\" | \"questionsAnswers\" | \"regex\" | \"reporttemplates\" | \"reviewapps\" | \"salesdata\" | \"scorms\" | \"scormcloud\" | \"slots\" | \"tableauShared\" | \"tagGroups\" | \"topusers\" | \"unsplash\" | \"useraudience\" | \"userlearningmanager\" | \"usercourseinfo\" | \"violetproducts\" | \"violetproductofferskus\" | \"violetbasketitems\" | \"violetshippingmethods\" | \"version\" | \"videocallusers\" | \"visits\" | \"waitlistvisit\" | \"waitlistcustomer\" | \"waitliststats\" | \"plansorlessons\" | \"widgets\"",
         "references": {
           "EntityType": {
             "location": "import",

package/dist/collection/components/form/form-text-editor/form-text-editor.css

@@ -218,4 +218,10 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 :host(.link) yoo-links-preview {
   order: 2;
+}
+
+:host(.android) .container.fullscreen {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
 }

package/dist/collection/components/form/form-text-editor/form-text-editor.js

@@ -49,7 +49,7 @@ import { Component, Element, Event, h, Host, Method, Prop, Watch } from '@stenci
 import FroalaEditor from 'froala-editor';
 import { assign, compact, isArray, isString } from 'lodash-es';
 import sanitizeHtml from 'sanitize-html';
-import { querySelectorDeep } from '../../../utils/helpers/common-helpers';
+import { getAppContext, querySelectorDeep } from '../../../utils/helpers/common-helpers';
 import { sanitizeMentionTag } from '../../../utils/helpers/entities-helpers';
 import { setValueAndValidateInput } from '../../../utils/helpers/form-input-helpers';
 import { getInsertElementProp, getTagHTML, isMentionTag, safeInsert, safeInsertElements, safeReplaceElement } from '../../../utils/helpers/form-text-area-helpers';
@@ -244,7 +244,7 @@ export class YooFormTextEditorComponent {
       linkInsertButtons: ['linkBack'],
       pastePlain: false,
       zIndex: this.customZIndex,
-      quickInsertEnabled: true,
+      quickInsertEnabled: isWeb(this.host),
       quickInsertButtons: compact(['yooUploadButtonQuick', 'yooDocumentImporterButtonQuick', 'image', 'video', 'table', 'ul', 'ol', 'hr', 'emoticons', 'yooTemplateQuick']),
       quickInsertTags: ['', 'p', 'div', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'pre', 'blockquote', 'br'],
       colorsBackground: hasTenantColors ? (_k = session === null || session === void 0 ? void 0 : session.tenant) === null || _k === void 0 ? void 0 : _k.rteColors : getColorSwatches(),
@@ -274,14 +274,14 @@ export class YooFormTextEditorComponent {
       toolbarInline: false,
       toolbarButtons: {
         moreRich: {
-          buttons: ['yooUploadButton', 'yooDocumentImporterButton', 'emoticons', 'insertImage', 'insertVideo', 'insertTable', 'insertLink', 'specialCharacters', 'insertFile', 'insertHR'],
+          buttons: compact([isWeb(this.host) ? 'yooUploadButton' : null, 'yooDocumentImporterButton', 'emoticons', 'insertImage', 'insertVideo', 'insertTable', 'insertLink', 'specialCharacters', 'insertFile', 'insertHR']),
           align: 'left',
-          buttonsVisible: this.isFullscreen ? 7 : 2
+          buttonsVisible: this.isFullscreen && isWeb(this.host) ? 7 : 2
         },
         moreText: {
           buttons: ['bold', 'italic', 'underline', 'textColor', 'backgroundColor', 'strikeThrough', 'subscript', 'superscript', 'fontFamily', 'fontSize', 'clearFormatting'],
           align: 'left',
-          buttonsVisible: this.isFullscreen ? 5 : 1
+          buttonsVisible: this.isFullscreen && isWeb(this.host) ? 5 : 1
         },
         moreParagraph: {
           buttons: [
@@ -299,22 +299,22 @@ export class YooFormTextEditorComponent {
             'quote'
           ],
           align: 'left',
-          buttonsVisible: this.isFullscreen ? 4 : 2
+          buttonsVisible: this.isFullscreen && isWeb(this.host) ? 4 : 2
         },
         moreMisc: {
           buttons: compact([
             this.isFullscreen ? null : this.getFullScreenButtonId(),
-            'yooTemplate',
+            this.isFullscreen ? 'yooFullscreenClose' : null,
+            isWeb(this.host) ? 'yooTemplate' : null,
             'undo',
             'redo',
             'spellChecker',
             'selectAll',
             'html',
-            'help',
-            this.isFullscreen ? 'yooFullscreenClose' : null
+            'help'
           ]),
           align: 'right',
-          buttonsVisible: this.isFullscreen ? 7 : 1
+          buttonsVisible: this.isFullscreen && isWeb(this.host) ? 7 : 1
         }
       },
       fullPage: false,
@@ -749,7 +749,7 @@ export class YooFormTextEditorComponent {
     return h("div", { class: "readonly fr-view", innerHTML: translateMulti(this.value) || '' });
   }
   render() {
-    return (h(Host, { class: { link: this.allowLinkPreview } }, this.readonly ? this.renderReadonly() : this.renderEditable()));
+    return (h(Host, { class: { link: this.allowLinkPreview, ...getAppContext(this.host) } }, this.readonly ? this.renderReadonly() : this.renderEditable()));
   }
   static get is() { return "yoo-form-text-editor"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/components/form/form-todo/form-todo.js

@@ -97,7 +97,7 @@ export class YooFormTodoComponent {
               t.comments.value) : null,
             t.finished && t.finished.date ? (h("div", { class: "subtitle" },
               h("span", { class: "date-label" },
-                translate('FINISHEDDATE'),
+                translate('YOOBICFINISHEDDATE'),
                 ":"),
               h("span", null,
                 " ",

package/dist/collection/components/form-creator/form-creator/form-creator.js

@@ -1849,7 +1849,7 @@ export class YooFormCreatorComponent {
     }
   }
   renderBlockCategorySelection() {
-    return (h("yoo-form-creator-field-selector", { ref: (el) => (this.fieldSelectorElement = el), masterTitle: this.selectedLeftMenuOption.toUpperCase(), categories: this.categories, initialSimpleFormBlocks: this.simpleFormBlocks, initialCustomFormFields: this.customFormFields, onElementReferencesLoaded: (ev) => {
+    return (h("yoo-form-creator-field-selector", { ref: (el) => (this.fieldSelectorElement = el), masterTitle: (this.selectedLeftMenuOption === 'fields' ? 'YOOBIC' : '') + this.selectedLeftMenuOption.toUpperCase(), categories: this.categories, initialSimpleFormBlocks: this.simpleFormBlocks, initialCustomFormFields: this.customFormFields, onElementReferencesLoaded: (ev) => {
         this.newFieldContainerBlocks = ev.detail.newFieldContainerBlocks;
         this.newFieldCategoryBlocks = ev.detail.newFieldCategoryBlocks;
         this.initNewFieldsSortable(true);

package/dist/collection/components/form-creator/form-creator-live-preview/form-creator-live-preview.js

@@ -96,7 +96,7 @@ export class YooFormCreatorLivePreviewComponent {
     var _a;
     return (h(Host, { class: { panel: this.mode === 'panel', 'iphone-x': this.selectedDevice.device === 'iphone-x', ...getAppContext(this.host) } },
       h("div", { class: { 'outer-container': true, 'not-closable': !this.closable } },
-        h("div", { class: "heading" },
+        !this.hideHeading && h("div", { class: "heading" },
           this.mode === 'fullscreen' && this.renderFullscreenHeader(),
           this.mode === 'panel' && this.renderPanelHeader()),
         ((_a = this.availableLanguages) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.renderLanguageSelector(),
@@ -338,6 +338,23 @@ export class YooFormCreatorLivePreviewComponent {
       },
       "attribute": "fullscreen-heading",
       "reflect": false
+    },
+    "hideHeading": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "hide-heading",
+      "reflect": false
     }
   }; }
   static get states() { return {

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;
@@ -8779,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;

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

@@ -2,6 +2,7 @@ import { FormFieldType, IncentivePartType, IncentiveStatus, IncentiveType } from
 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';
@@ -649,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) {
@@ -992,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;
@@ -1019,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') {
@@ -1389,6 +1411,8 @@ export function getRenderer(renderer) {
       return incentiveParticipantsRenderer;
     case 'incentiveTotalRenderer':
       return incentiveTotalRenderer;
+    case 'incentiveRankingRenderer':
+      return incentiveRankingRenderer;
     case 'courseStatusRenderer':
       return courseStatusRenderer;
     case 'entityRenderer':

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 {
@@ -814,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 {
@@ -2822,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 {