@yoobic/yobi 8.2.0-9 → 8.2.2

package/dist/collection/components/form/form-entity-value-pairs/form-entity-value-pairs.js

@@ -196,7 +196,7 @@ export class YooFormEntityValuePairsComponent {
       "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\" | \"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-feedback/form-feedback.css

@@ -221,7 +221,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   font-size: var(--font-size-36, 2.25rem);
 }
 
-:host([type=confidence]) yoo-form-choice {
+:host([type=confidence]) yoo-form-choice-card {
   --card-border-color: transparent;
 }
 :host([type=confidence]) .container {

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

@@ -50,7 +50,7 @@ export class YooFormFeedbackComponent {
   renderFormChoice() {
     return this.emojis.map((emoji, index) => {
       var _a;
-      return h("yoo-form-choice", { type: "card", values: [{ description: getConfidenceDescriptionKey((_a = this.confidenceValues) === null || _a === void 0 ? void 0 : _a[index]), emoji, hideCheckbox: true }], customEvent: this.isConfidenceQuiz, selected: this.isConfidenceQuiz && (this.value - 1 === index), onChoiceSelected: () => this.onStateClick(index) });
+      return h("yoo-form-choice-card", { values: [{ description: getConfidenceDescriptionKey((_a = this.confidenceValues) === null || _a === void 0 ? void 0 : _a[index]), emoji, hideCheckbox: true }], customEvent: this.isConfidenceQuiz, selected: this.isConfidenceQuiz && (this.value - 1 === index), onChoiceSelected: () => this.onStateClick(index) });
     });
   }
   renderReadonly() {

package/dist/collection/components/form/form-filter-date/form-filter-date.css

@@ -212,8 +212,9 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   font-size: inherit;
 }
 :host yoo-calendar {
-  width: 12.5rem;
-  height: 11.875rem;
+  width: 13rem;
+  height: 13rem;
+  padding: var(--spacing-08, 0.5rem);
 }
 :host yoo-form-input {
   width: 5rem;

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

@@ -250,6 +250,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host .outer-container .mission-footer .timer-container yoo-progress-bar {
   width: 20%;
   margin: 0;
+  --progress-bar-color: var(--app-color, #5a30f4);
   --stroke-width-circle: 6;
 }
 

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

@@ -30,7 +30,7 @@ export class YooFormFooterComponent {
       }
     };
     return countDownProgress && (h("div", { class: "timer-container" },
-      h("yoo-progress-bar", { shape: "circle", class: "app-color", listenToProgress: true, hideProgressValue: true, progressAnimationDuration: 0, animated: this.animated, value: countDownProgress, onValueChanged: (ev) => onCountingDown(ev) }),
+      h("yoo-progress-bar", { shape: "circle", listenToProgress: true, hideProgressValue: true, progressAnimationDuration: 0, animated: this.animated, value: countDownProgress, onValueChanged: (ev) => onCountingDown(ev) }),
       h("div", null, countDownDisplay)));
   }
   render() {

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

@@ -3,6 +3,7 @@ import { Component, Element, Event, forceUpdate, h, Host, Prop, State, Watch } f
 import { getFromOfflineStorage } from '../../../utils/cache/localForage';
 import { calcCoordPercentage, isElementInsideContainer } from '../../../utils/helpers/annotations-helpers';
 import { getAppContext } from '../../../utils/helpers/common-helpers';
+import { showWarningAlert } from '../../../utils/helpers/draggable-tags-helpers';
 import { setValueAndValidateInput } from '../../../utils/helpers/form-input-helpers';
 export class YooFormHotzonesComponent {
   constructor() {
@@ -17,6 +18,9 @@ export class YooFormHotzonesComponent {
     !this.imageSrc && forceUpdate(this);
     this.init();
   }
+  onHotzonesChanged() {
+    showWarningAlert(this.host, !this.isHotZones && this.hotzones.some(({ description, image }) => !(description || image)), 'NOEMPTYVALUES');
+  }
   onIsVisibleChanged() {
     if (this.isVisible) {
       this.flipImage = true;
@@ -54,15 +58,19 @@ export class YooFormHotzonesComponent {
   initDraggableTarget() {
     const dragEndAction = async () => {
       const containerBound = this.imageElement.getBoundingClientRect();
-      if (!isElementInsideContainer(this.targetElement.getBoundingClientRect(), containerBound, this.targetElement.clientWidth / 2)) {
+      if (!isElementInsideContainer(this.targetElement.getBoundingClientRect(), containerBound, this.targetElement.clientWidth / 2, 'center')) {
         this.resetTarget();
       }
       else {
-        const getTargetPosition = (axis) => calcCoordPercentage(containerBound, this.targetElement, axis);
+        const getTargetCenterPosition = (axis) => {
+          const targetBound = this.targetElement.getBoundingClientRect();
+          const offsetPercentage = ((targetBound[axis === 'x' ? 'width' : 'height'] / 2) / containerBound[axis === 'x' ? 'width' : 'height']) * 100;
+          return calcCoordPercentage(containerBound, this.targetElement, axis) + offsetPercentage;
+        };
         this.validity = true;
         this.value = {
-          x: getTargetPosition('x'),
-          y: getTargetPosition('y')
+          x: getTargetCenterPosition('x'),
+          y: getTargetCenterPosition('y')
         };
         if (!this.livePreview) {
           setValueAndValidateInput(this.value, this);
@@ -82,27 +90,26 @@ export class YooFormHotzonesComponent {
     return getMedia((await getFromOfflineStorage(this.image)), { forceCookieUrlParam: true });
   }
   async showZoneDetails(hotzone) {
+    var _a, _b, _c, _d;
     const { description, image } = hotzone || {};
     if (description || image) {
       await showModal('yoo-form-hotzones', { detailedView: true, selectedHotspot: hotzone }, 'bg-dark-40', 'scaleEnterAnimation', 'scaleLeaveAnimation', true);
       hotzone.revealed = true;
-      this.validity = this.hotzones.filter(h => h.revealed).length === this.hotzones.length;
-      !this.validity && forceUpdate(this);
     }
+    this.validity = ((_b = (_a = this.hotzones) === null || _a === void 0 ? void 0 : _a.filter(({ revealed }) => revealed)) === null || _b === void 0 ? void 0 : _b.length) === ((_d = (_c = this.hotzones) === null || _c === void 0 ? void 0 : _c.filter(({ description, image }) => description || image)) === null || _d === void 0 ? void 0 : _d.length);
+    !this.validity && forceUpdate(this);
   }
   renderZones() {
     var _a;
     return (_a = this.hotzones) === null || _a === void 0 ? void 0 : _a.map(hotzone => {
-      const { x, y } = hotzone.style || {};
-      return h("div", { class: {
-          hotzone: true,
-          revealed: hotzone.revealed,
-          hidden: !this.readonly && this.isHotZones
-        }, style: {
+      const { style, revealed, description, image } = hotzone || {};
+      const { x, y } = style || {};
+      const isValid = this.isHotZones || !!(description || image);
+      return isValid && h("div", { class: { hotzone: true, revealed, hidden: !this.readonly && this.isHotZones }, style: {
           left: x,
           top: y,
           ...hotzone.style,
-          ...(!hotzone.revealed && !this.readonly && {
+          ...(!revealed && !this.readonly && {
             backgroundColor: this.hotzonesColor + '66',
             borderColor: this.hotzonesColor
           })
@@ -155,8 +162,14 @@ export class YooFormHotzonesComponent {
           this.renderZones()),
         h("section", { class: "flip-box-back" })));
   }
+  renderBanner() {
+    return this.livePreview && h("yoo-banner", null,
+      h("p", { slot: "content" }));
+  }
   render() {
-    return (h(Host, { class: { 'swiper-no-swiping': true, ...getAppContext(this.host) } }, this.detailedView ? this.renderDetailedView() : [this.renderImage(), this.renderTarget()]));
+    return (h(Host, { class: { 'swiper-no-swiping': true, ...getAppContext(this.host) } },
+      this.renderBanner(),
+      this.detailedView ? this.renderDetailedView() : [this.renderImage(), this.renderTarget()]));
   }
   static get is() { return "yoo-form-hotzones"; }
   static get encapsulation() { return "shadow"; }
@@ -427,6 +440,9 @@ export class YooFormHotzonesComponent {
   static get watchers() { return [{
       "propName": "image",
       "methodName": "onImageChanged"
+    }, {
+      "propName": "hotzones",
+      "methodName": "onHotzonesChanged"
     }, {
       "propName": "isVisible",
       "methodName": "onIsVisibleChanged"

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

@@ -202,6 +202,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 /* spacing for padding, margin, etc... */
 /* shadow */
 :host {
+  display: block;
   width: 100%;
 }
 :host #gallery {
@@ -277,6 +278,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 :host(.web) .main-container .button {
   margin: auto;
+  padding: var(--spacing-16, 1rem);
 }
 
 :host([detailed-view]) {

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

@@ -1,7 +1,7 @@
 import { closeModal, getMedia, isWeb, parseMarkDown, replaceAllLinks, showModal, translate, translateMulti } from '@shared/utils';
 import { Component, Element, Event, h, Host, Prop, State, Watch } from '@stencil/core';
 import { getFromOfflineStorage } from '../../../utils/cache';
-import { onRTEClick } from '../../../utils/helpers/common-helpers';
+import { openImageDetailFromRTE } from '../../../utils/helpers/common-helpers';
 export class YooFormImageCollectionComponent {
   constructor() {
     this.animated = true;
@@ -27,10 +27,10 @@ export class YooFormImageCollectionComponent {
   }
   onRTEContentClick(ev) {
     var _a;
-    onRTEClick(this.detailDescription, (_a = ev === null || ev === void 0 ? void 0 : ev.target) === null || _a === void 0 ? void 0 : _a.src);
+    openImageDetailFromRTE(this.detailDescription, (_a = ev === null || ev === void 0 ? void 0 : ev.target) === null || _a === void 0 ? void 0 : _a.src);
   }
   async imageClicked(imagePair, index) {
-    await showModal('yoo-form-image-collection', { detailedView: true, selectedPair: imagePair }, 'bg-dark-40 fullscreen', 'scaleEnterAnimation', 'scaleLeaveAnimation', true);
+    await showModal('yoo-form-image-collection', { detailedView: true, selectedPair: imagePair }, 'bg-dark-40', 'scaleEnterAnimation', 'scaleLeaveAnimation', true);
     if (!this.images[index].revealed) {
       this.imagesRevealed += 1;
       this.images[index].revealed = true;

package/dist/collection/components/form/form-image-tagging/form-image-tagging.js

@@ -135,12 +135,12 @@ export class YooFormImageTaggingComponent {
       h("div", { class: "dropzone", id: "zone-tags" }));
   }
   renderBanner() {
-    return h("yoo-banner", null,
+    return this.livePreview && h("yoo-banner", null,
       h("p", { slot: "content" }));
   }
   render() {
     return (h(Host, { class: { ...getAppContext(this.host), 'live-preview': this.livePreview } },
-      this.livePreview && this.renderBanner(),
+      this.renderBanner(),
       this.renderImageContainer(),
       !this.readonly && this.renderInstruction(),
       !this.readonly && this.renderTagsZone()));

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, extractTextFromStringHTML, isAndroid, isAnimationsDisabled, isHTML, isIOS, 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,9 +19,9 @@ export class YooFormInputComponent {
     this.size = 'large';
     this.initialCheckboxParams = null;
     this.fireInputChangeEvent = false;
+    this.allowDecimals = false;
     this.checkboxParams = null;
     this.hostWidth = 0;
-    this.isKeyboardResizeModeInactive = isKeyboardResizeModeInactive();
     this.onWheel = () => {
       if (isWeb(this.host) && this.isNumberInput(this.type)) {
         this.inputElement.blur();
@@ -134,6 +134,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';
@@ -159,9 +160,6 @@ export class YooFormInputComponent {
       this.inputElement.value = this.value;
       this.updateRemainingCharacters();
     }
-    if (isIOS()) {
-      enableKeyboardResize();
-    }
     if (this.focusOnRendered) {
       this.setFocus();
     }
@@ -175,16 +173,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()) {
-      setTimeout(() => {
-        if (this.isKeyboardResizeModeInactive) {
-          disableKeyboardResize();
-        }
-      }, 500);
-    }
   }
   getIconSize() {
     if (this.size === 'medium' || this.size === 'small') {
@@ -203,30 +191,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 +233,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 +245,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 +297,6 @@ export class YooFormInputComponent {
   }
   clearInput() {
     this.localValue = null;
-    this.inputHasValue = false;
     if (this.inputElement) {
       this.inputElement.value = null;
       this.updateRemainingCharacters(true);
@@ -319,7 +310,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) {
@@ -680,7 +671,7 @@ export class YooFormInputComponent {
     },
     "step": {
       "type": "number",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "number",
         "resolved": "number",
@@ -1278,6 +1269,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

@@ -594,6 +594,11 @@ span.fr-img-caption.fr-view {
   --content-padding-bottom: initial;
   --field-title-color: var(--dark, #000000);
   --font-size-description: var(--font-size-28, 1.75rem);
+  --field-title-font-weight: var(--font-weight-400, 400);
+  --field-title-text-transform: unset;
+  --sub-description-text-color: var(--text-color, #807f83);
+  --sub-description-font-size: var(--font-size-16, 1rem);
+  --right-side-margin: auto;
   display: block;
 }
 :host yoo-tag.original-invalid,
@@ -668,7 +673,7 @@ span.fr-img-caption.fr-view {
 :host .top-container .optional .right-side {
   display: flex;
   align-items: center;
-  margin-left: auto;
+  margin-left: var(--right-side-margin);
   color: var(--stable, #adadad);
 }
 :host .description .label .right-side yoo-icon.recent,
@@ -747,7 +752,9 @@ span.fr-img-caption.fr-view {
 }
 :host .description .description.sub-description,
 :host .top-container .description.sub-description {
-  color: var(--text-color, #807f83);
+  color: var(--sub-description-text-color);
+  font-size: var(--sub-description-font-size);
+  text-transform: var(--field-title-text-transform);
 }
 :host .description .media-description,
 :host .top-container .media-description {
@@ -775,6 +782,8 @@ span.fr-img-caption.fr-view {
 :host .description .field-title-name,
 :host .top-container .field-title-name {
   color: var(--field-title-color);
+  font-weight: var(--field-title-font-weight);
+  text-transform: var(--field-title-text-transform);
 }
 :host .hint-container {
   margin-top: 0.25rem;
@@ -984,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) {
@@ -991,6 +1006,17 @@ 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);
+}
 :host(:not(.lesson).readonly) .top-container .label.readonly {
   color: var(--dark, #000000);
   font-weight: var(--font-weight-700, 700);
@@ -1039,6 +1065,7 @@ span.fr-img-caption.fr-view {
 }
 
 :host(.lesson) {
+  --content-padding-bottom: var(--spacing-16, 1rem);
   --font-size-title-name: var(--font-size-28, 1.75rem);
   --font-weight-title-name: var(--font-weight-700, 700);
   --text-tranform-title-name: none;
@@ -1048,7 +1075,6 @@ span.fr-img-caption.fr-view {
 }
 :host(.lesson) .top-container .content-container {
   height: fit-content;
-  padding: 0;
 }
 :host(.lesson) .top-container .description {
   margin-bottom: var(--spacing-08, 0.5rem);
@@ -1072,7 +1098,13 @@ span.fr-img-caption.fr-view {
   height: 100%;
 }
 :host(.textsequence) .top-container .content-container ::slotted(yoo-text-sequence) {
+  max-width: 40rem;
   height: 100%;
+  margin: 0 auto;
+}
+
+:host(.mobile) .content-container .removable {
+  display: block;
 }
 
 :host(.web.lesson:not(.lesson-live-preview)) {
@@ -1172,6 +1204,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;
@@ -1271,9 +1314,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-input-container/form-input-container.js

@@ -3,7 +3,7 @@ import { debounce, getKeyToCache, getMedia, getURLs, isFieldWithNoValue, isNativ
 import { Component, Element, Event, forceUpdate, h, Host, Prop, State } from '@stencil/core';
 import { isNumber } from 'lodash-es';
 import { getFromLocalForage } from '../../../utils/cache';
-import { getAppContext, getConfig, onRTEClick, querySelectorDeep } from '../../../utils/helpers/common-helpers';
+import { getAppContext, getConfig, openImageDetailFromRTE, querySelectorDeep } from '../../../utils/helpers/common-helpers';
 export class YooFormInputContainerComponent {
   constructor() {
     this.animated = true;
@@ -256,7 +256,7 @@ export class YooFormInputContainerComponent {
   }
   onRTEContentClick(ev) {
     var _a;
-    onRTEClick(this.descriptionElement, (_a = ev === null || ev === void 0 ? void 0 : ev.target) === null || _a === void 0 ? void 0 : _a.src);
+    openImageDetailFromRTE(this.descriptionElement, (_a = ev === null || ev === void 0 ? void 0 : ev.target) === null || _a === void 0 ? void 0 : _a.src);
     this.headerClicked.emit();
   }
   renderDescription() {
@@ -268,7 +268,7 @@ export class YooFormInputContainerComponent {
       h("span", { class: "extra-options-container" },
         this.renderOptional(),
         this.renderPdfDownload(),
-        this.renderRightSide())));
+        this.renderRightSide(!!this.field.title && !!this.field.help))));
   }
   renderPdfDownload() {
     return (isPdf(this.field.document) &&
@@ -280,7 +280,7 @@ export class YooFormInputContainerComponent {
       translate('OPTIONAL'),
       ")");
   }
-  renderRightSide() {
+  renderRightSide(hideTooltip) {
     let fieldhelp = this.field.help;
     if (!fieldhelp && this.field.title) {
       const fieldhelpAuto = translate(this.field.title + 'HELP');
@@ -294,8 +294,8 @@ export class YooFormInputContainerComponent {
       this.markAsInvalid && h("yoo-tag", { size: "extra-small", class: "not-compliant", color: "danger" }, translate('NOTSATISFACTORY')),
       this.time && (h("yoo-tooltip", { hoverable: isWeb(this.host), content: translate('LASTEDIT') + ': ' + pipes.dateFormat.transform(this.time, 'L LT'), placement: "top-end" },
         h("yoo-icon", { size: isWeb(this.host) ? 'small' : 'medium', class: "recent", name: "recent" }))),
-      fieldhelp && !this.field.hideTooltip && (h("yoo-tooltip", { hoverable: isWeb(this.host), content: this.getHelpContent(fieldhelp), placement: "top-end" },
-        h("yoo-icon", { size: isWeb(this.host) ? 'small' : 'medium', name: "help", color: "stable" }))))));
+      fieldhelp && !this.field.hideTooltip && !hideTooltip && (h("yoo-tooltip", { hoverable: isWeb(this.host), content: this.getHelpContent(fieldhelp), placement: "top-end" },
+        h("yoo-icon", { size: this.field.tooltipSize ? this.field.tooltipSize : isWeb(this.host) ? 'small' : 'medium', name: "help", color: this.field.tooltipColor ? this.field.tooltipColor : 'stable' }))))));
   }
   renderOriginalMarkAsInvalid() {
     return !this.markAsInvalid && !this.hideComplianceTags && this.originalMarkAsInvalid &&
@@ -363,9 +363,10 @@ export class YooFormInputContainerComponent {
       this.renderInnerContent()));
   }
   renderRemovable() {
-    return (this.field.removable && (h("div", { class: "removable", onClick: () => this.onRemove() },
+    return (this.field.removable && (h("div", { class: "removable", onClick: () => this.onRemove() }, isWeb(this.host) ?
       h("yoo-tooltip", { content: translate('REMOVEFIELD'), placement: "top-end" },
-        h("yoo-icon", { size: this.size || 'medium', color: "danger", name: "cross" })))));
+        h("yoo-icon", { size: this.size || 'medium', color: "danger", name: "cross" }))
+      : h("yoo-icon", { size: this.size || 'medium', color: "danger", name: "cross" }))));
   }
   renderHint() {
     return h("div", { class: "hint-container", innerHTML: this.field.hint });