@yoobic/yobi 8.2.0-15 → 8.2.0-18

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

@@ -18,6 +18,7 @@ export class YooFormAutocompleteComponent {
      */
     this.multipleSelectionSuffix = 'SELECTED';
     this.isLoading = true;
+    this.keepSelection = true;
     this.displayType = 'card-list';
     this.disableSingleDeselection = false;
     this.expandHeightOnShow = false;
@@ -121,6 +122,9 @@ export class YooFormAutocompleteComponent {
         value = [value];
       }
     }
+    else if (isArray(value) && !this.multiple) {
+      value = value[0];
+    }
     await this.setValueAndValidateInput(value);
     this.selection = value;
     if (((_a = this.searchedItemSelection) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.idOnly) {
@@ -590,12 +594,7 @@ export class YooFormAutocompleteComponent {
     this.dialog.origin = this.origin;
     this.dialog.infiniteScrollDisabled = this.infiniteScrollDisabled;
     this.dialog.value = this.value;
-    if (this.isLocal) {
-      this.dialog.values = this.localValues;
-      if (this.storeLocalSearchValue !== undefined) {
-        this.dialog.values = this.storeLocalValues;
-      }
-    }
+    this.dialog.values = this.isLocal ? (this.storeLocalSearchValue !== undefined ? this.storeLocalValues : this.localValues) : this.values;
     this.dialog.addEventListener('fetchData', (ev) => {
       ev.stopPropagation();
       this.onFetchData(ev);
@@ -648,7 +647,7 @@ export class YooFormAutocompleteComponent {
       this.host.classList.remove('focused');
       this.arrowIcon = 'arrow-down';
       this.webAutocompleteClosed.emit(this.selection);
-      this.entityType === 'products' && (this.setValue([]));
+      !this.keepSelection && (this.setValue([]));
     });
     this.dialog.addEventListener('filterRadioToggled', (ev) => {
       ev.stopPropagation();
@@ -673,7 +672,7 @@ export class YooFormAutocompleteComponent {
     this.host.classList.remove('focused');
     this.arrowIcon = 'arrow-down';
     this.webAutocompleteClosed.emit(this.selection);
-    this.entityType === 'products' && (this.setValue([]));
+    !this.keepSelection && (this.setValue([]));
   }
   async onItemSelect(ev) {
     ev.stopPropagation();
@@ -1277,6 +1276,24 @@ export class YooFormAutocompleteComponent {
       "attribute": "disabled",
       "reflect": false
     },
+    "keepSelection": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "keep-selection",
+      "reflect": false,
+      "defaultValue": "true"
+    },
     "allowCustomTag": {
       "type": "boolean",
       "mutable": false,

package/dist/collection/components/form/form-autocomplete-dialog/form-autocomplete-dialog.js

@@ -110,9 +110,7 @@ export class YooFormAutocompleteDialogComponent {
     if (this.gridExpandedOnLoad) {
       this.gridIsExpanded = true;
     }
-    if (this.isLocal) {
-      this.onValueChanged();
-    }
+    this.onValueChanged();
   }
   componentDidLoad() {
     if (isNativeMobile()) {

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

@@ -42,9 +42,7 @@ export class YooFormCatalogComponent {
             this.value = {};
           }
         }
-        if (!isWeb(this.host)) {
-          this.addProducts(ev.detail);
-        }
+        this.addProducts(ev.detail);
       }
     }
   }
@@ -304,9 +302,7 @@ export class YooFormCatalogComponent {
   }
   renderEditable() {
     return (h("div", { class: "outer-container" },
-      h("yoo-form-autocomplete", { ref: (el) => (this.formAutocomplete = el), multiple: !this.isCheck, 
-        // value={this.selectedProducts}
-        entityType: "products", displayType: "card-list", iconPrefix: "catalogue", onFetchData: (ev) => this.onFetchData(ev), onFetchFieldFilterData: (ev) => this.onFetchFieldFilterData(ev), onInputChanged: (ev) => this.onSelect(ev), onInputBlurred: (ev) => this.onInputBlurred(ev), onInputFocused: (ev) => this.onInputFocused(ev), onValidityChanged: (ev) => this.onAutoCompleteValidityChanged(ev), onWebAutocompleteClosed: (ev) => this.onWebAutocompleteClosed(ev), placeholder: translate('ADDPRODUCTTOBASKET'), tags: this.tags, isLocal: false, model: this.model, size: this.size }),
+      h("yoo-form-autocomplete", { ref: (el) => (this.formAutocomplete = el), multiple: !this.isCheck, keepSelection: true, entityType: "products", displayType: "card-list", iconPrefix: "catalogue", onFetchData: (ev) => this.onFetchData(ev), onFetchFieldFilterData: (ev) => this.onFetchFieldFilterData(ev), onInputChanged: (ev) => this.onSelect(ev), onInputBlurred: (ev) => this.onInputBlurred(ev), onInputFocused: (ev) => this.onInputFocused(ev), onValidityChanged: (ev) => this.onAutoCompleteValidityChanged(ev), onWebAutocompleteClosed: (ev) => this.onWebAutocompleteClosed(ev), placeholder: translate('ADDPRODUCTTOBASKET'), tags: this.tags, isLocal: false, model: this.model, size: this.size }),
       !this.disableScanner && h("div", { class: "or" }, translate('YOOBICOR')),
       !this.disableScanner && h("yoo-form-barcode", { onInputChanged: (ev) => this.onScanned(ev), placeholder: translate('SCANPRODUCTTOBASKET'), hideValue: true }),
       !this.selectorMode && this.notFoundError ? h("div", { class: "error", innerHTML: this.notFoundError }) : null,

package/dist/collection/components/form/form-choice/form-choice-helpers.js

@@ -25,11 +25,11 @@ export function onItemSelect(item, choiceElement, preventSetValue = false) {
   }
 }
 export function getColor(value, valuesColor, selection) {
-  if (valuesColor && value) {
-    if (!isSelected(value, selection))
-      return '';
-    return valuesColor.find(valueColor => valueColor.key === value).value || '';
+  var _a;
+  if ((valuesColor === null || valuesColor === void 0 ? void 0 : valuesColor.length) && value) {
+    return isSelected(value, selection) ? ((_a = valuesColor.find(({ key }) => key === value)) === null || _a === void 0 ? void 0 : _a.value) || '' : '';
   }
+  return '';
 }
 export function updateValue(newVal, oldVal, choiceElement, onSelectCall) {
   if (!isEqual(oldVal, newVal)) {

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

@@ -98,7 +98,7 @@ export class YooFormChoiceRadioComponent {
     }
     return [
       this.choices &&
-        h("yoo-grid", { class: "choice", blockSelectionMode: true, items: valuesEntity, initialSelection: initialEntity, keepSelection: true, multiple: this.multiple, displayType: "card-list", onSelected: (ev) => this.onItemSelectRadio(ev.detail), hideHeader: true, isLocal: true, useTranslate: this.useTranslate, animated: false, valuesColor: this.valuesColor }),
+        h("yoo-grid", { class: "choice radio-button-choice", blockSelectionMode: true, items: valuesEntity, initialSelection: initialEntity, keepSelection: true, multiple: this.multiple, displayType: "card-list", onSelected: (ev) => this.onItemSelectRadio(ev.detail), hideHeader: true, isLocal: true, useTranslate: this.useTranslate, animated: false, valuesColor: this.valuesColor }),
       this.showOther &&
         h("div", { class: "input-zone" },
           h("textarea", { ref: (el) => (this.textareaRef = el), value: this.textareaValue, onInput: (ev) => this.onInput(ev), onFocus: () => this.onTextAreaFocused() }))

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

@@ -657,6 +657,13 @@ span.fr-img-caption.fr-view {
   width: 12.5rem;
 }
 
+:host(.fill-width:not(.web)) .inputs-container {
+  justify-content: space-between;
+}
+:host(.fill-width:not(.web)) .inputs-container .field-placeholder:not(.custom-width) {
+  width: calc(100% - var(--spacing-96, 6rem));
+}
+
 :host {
   --history-default-width: 11.25rem;
   --inputs-margin: 0 var(--spacing-16, 1rem);
@@ -2150,6 +2157,11 @@ span.fr-img-caption.fr-view {
   box-shadow: unset;
 }
 
+:host(.mission-form),
+:host(.workflow-form),
+:host(.kanban-form) {
+  --mission-form-padding: 0 var(--spacing-08, 0.5rem);
+}
 :host(.mission-form) .information *,
 :host(.workflow-form) .information *,
 :host(.kanban-form) .information * {
@@ -2173,7 +2185,7 @@ span.fr-img-caption.fr-view {
 :host(.workflow-form) .inputs-container,
 :host(.kanban-form) .inputs-container {
   box-sizing: border-box;
-  padding: 0 var(--spacing-08, 0.5rem);
+  padding: var(--mission-form-padding);
 }
 
 :host(.form-creator-preview) .field-placeholder yoo-form-input-container {
@@ -2499,4 +2511,83 @@ span.fr-img-caption.fr-view {
 
 :host(.dark-info) .information {
   color: inherit;
+}
+
+:host(.live-preview-form.mobile:not(.inline):not(.inline-row)) .inputs-container-parent {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  height: 100%;
+  padding-bottom: var(--spacing-64, 4rem);
+  overflow-y: scroll;
+}
+:host(.live-preview-form.mobile:not(.inline):not(.inline-row)) .inputs-container {
+  box-sizing: border-box;
+}
+:host(.live-preview-form.mobile:not(.inline):not(.inline-row)) .toolbar {
+  position: absolute;
+  bottom: 0;
+  box-sizing: border-box;
+  width: 100%;
+  padding-right: var(--spacing-16, 1rem);
+  padding-left: 0;
+}
+
+:host(.web.community-editor) yoo-tabs,
+:host(.community-editor) yoo-tabs {
+  --height-tabs: var(--spacing-48, 3rem);
+  --active-tab-border-color: var(--stable-light, #f1f1f1);
+  --tab-border-color: var(--stable-light, #f1f1f1);
+  --tab-border-width: var(--border-width-01, 0.0625rem);
+  --vertical-tab-gap: 0;
+}
+:host(.web.community-editor) yoo-form-input-container.segment,
+:host(.web.community-editor) yoo-form-input-container.autocomplete,
+:host(.community-editor) yoo-form-input-container.segment,
+:host(.community-editor) yoo-form-input-container.autocomplete {
+  min-width: 15rem;
+  max-width: 50%;
+}
+:host(.web.community-editor) yoo-form-input-container.toggle,
+:host(.community-editor) yoo-form-input-container.toggle {
+  --content-padding-top: 0!important;
+  margin-bottom: 0 !important;
+}
+
+:host(.live-preview-form.web:not(.inline):not(.inline-row):not(.force-mobile)) .main-container {
+  display: flex;
+  flex: initial;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+}
+:host(.live-preview-form.web:not(.inline):not(.inline-row):not(.force-mobile)) .main-container .inputs-container-parent {
+  flex: initial;
+  box-sizing: border-box;
+  margin: var(--spacing-24, 1.5rem);
+  margin-bottom: 0;
+  padding: 0;
+  background: var(--stable-ultralight, #fafafa);
+  border-radius: var(--spacing-08, 0.5rem);
+}
+:host(.live-preview-form.web:not(.inline):not(.inline-row):not(.force-mobile)) .main-container .inputs-container-parent.grid-flex {
+  border-radius: 0px;
+}
+:host(.live-preview-form.web:not(.inline):not(.inline-row):not(.force-mobile)) .main-container .inputs-container {
+  flex: initial;
+  box-sizing: border-box;
+  padding: var(--spacing-16, 1rem);
+  background: var(--stable-ultralight, #fafafa);
+  border-radius: 0px;
+}
+:host(.live-preview-form.web:not(.inline):not(.inline-row):not(.force-mobile)) .main-container .toolbar {
+  margin: var(--spacing-16, 1rem);
+  padding: 0;
+  padding-top: 0;
+  background: var(--stable-ultralight, #fafafa);
+}
+:host(.live-preview-form.web:not(.inline):not(.inline-row):not(.force-mobile)) yoo-tabs {
+  flex-shrink: 0;
+  padding: 0;
 }

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

@@ -486,6 +486,10 @@ export class YooFormDynamicComponent {
       });
     }
   }
+  async getTabName() {
+    var _a, _b;
+    return translate(((_b = (_a = this.tabs) === null || _a === void 0 ? void 0 : _a[this.selectedTabIndex]) === null || _b === void 0 ? void 0 : _b.title) || 'CONTENT');
+  }
   async highlightInvalidFields() {
     const invalidFieldCodes = Object.keys(this.fieldsState).filter((code) => this.fieldsState[code].validity === false);
     this.setFormInputContainerInvalid(false, this.failedSubmission);
@@ -551,6 +555,13 @@ export class YooFormDynamicComponent {
   async forceUpdate() {
     forceUpdate(this);
   }
+  async forceCheckValidityAndEmitChanges() {
+    await this.updateState();
+    this.setDirty(true);
+    if (this.failedSubmission.length > 0) {
+      await this.highlightInvalidFields();
+    }
+  }
   componentWillLoad() {
     var _a;
     if (isNullOrUndefined(this.formInputSize)) {
@@ -2058,7 +2069,7 @@ export class YooFormDynamicComponent {
     return null;
   }
   renderInnerBody() {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     const slides = this.getVisibleSlides();
     if (!slides || slides.length === 0) {
       return (h("div", { class: "no-slide-container" },
@@ -2082,6 +2093,7 @@ export class YooFormDynamicComponent {
           h("slot", { name: "start-before-tabs" }),
           h("yoo-tabs", { class: { 'items-flex-start': true, small: true, 'community-editor': this.host.classList.contains('community-editor') }, vertical: this.showVerticalTabs, showBadges: this.showBadgesVerticalTabs, tabOpenedIndicator: this.tabOpenedIndicator, tabs: this.tabs, autoScroll: this.autoScrollTabs, initialIndex: this.selectedTabIndex || 0, onTabSelected: (ev) => this.onTabSelected(ev) }),
           h("div", { class: "main-container" },
+            h("slot", { name: "main-top" }),
             this.renderLeftPanelSecondary(selectedSlide),
             h("div", { class: {
                 'inputs-container-parent': true,
@@ -2089,7 +2101,9 @@ export class YooFormDynamicComponent {
                 'gridstack': this.useGridstack && !this.gridstackItemNoScroll,
                 'gridstack-no-scroll': this.useGridstack && this.gridstackItemNoScroll,
                 'lesson-detail-answer': (this.formType === 'lesson' && isWeb()) && this.showAnswers && !this.lessonStarted
-              }, ref: (el) => (this.inputContainerParent[selectedSlideIndex] = el) }, this.selectedTabIndexState > -1 && this.renderFormContentFields(selectedSlide, selectedSlideIndex, slides.length - 1))),
+              }, ref: (el) => (this.inputContainerParent[selectedSlideIndex] = el) },
+              this.selectedTabIndexState > -1 && this.renderFormContentFields(selectedSlide, selectedSlideIndex, slides.length - 1),
+              ((_b = this.formExtraOptions) === null || _b === void 0 ? void 0 : _b.livePreview) && this.renderToolbar(selectedSlide))),
           !this.host.classList.contains('no-slide-bottom-toolbar') && this.renderToolbar(selectedSlide)
         ];
       }
@@ -2100,7 +2114,7 @@ export class YooFormDynamicComponent {
             this.renderLeftPanelSecondary(slides[0]),
             h("div", { class: {
                 'inputs-container-parent': true,
-                'grid-flex': !this.showWizard && ((_c = (_b = slides[0]) === null || _b === void 0 ? void 0 : _b.items) === null || _c === void 0 ? void 0 : _c.some((f) => f.type === FormFieldType.grid || f.type === FormFieldType.audience)),
+                'grid-flex': !this.showWizard && ((_d = (_c = slides[0]) === null || _c === void 0 ? void 0 : _c.items) === null || _d === void 0 ? void 0 : _d.some((f) => f.type === FormFieldType.grid || f.type === FormFieldType.audience)),
                 'gridstack': this.useGridstack && !this.gridstackItemNoScroll,
                 'gridstack-no-scroll': this.useGridstack && this.gridstackItemNoScroll,
                 'lesson-detail-answer': this.formType === 'lesson' && isWeb() && this.showAnswers && !this.lessonStarted
@@ -4596,7 +4610,7 @@ export class YooFormDynamicComponent {
     }
   }
   render() {
-    var _a;
+    var _a, _b;
     this.inputElements = [];
     return (h(Host, { class: {
         'lesson-detail': this.isLessonDetail(),
@@ -4605,12 +4619,13 @@ export class YooFormDynamicComponent {
         'mission-form': this.isMission(),
         'mission-validation': this.isMissionValidation,
         'pdf': this.isPdf,
+        'live-preview-form': (_a = this.formExtraOptions) === null || _a === void 0 ? void 0 : _a.livePreview,
         'lesson-form': this.isLesson(),
         'workflow-form': this.hasWorkflow(),
         'kanban-form': this.isKanban(),
         'waitlist-form': this.isWaitlist(),
         'wizard': this.showWizard,
-        'wizard-single': ((_a = this.getVisibleSlides()) === null || _a === void 0 ? void 0 : _a.length) <= 1,
+        'wizard-single': ((_b = this.getVisibleSlides()) === null || _b === void 0 ? void 0 : _b.length) <= 1,
         'form-creator-block': this.isFormCreatorBlock(),
         'vertical-tabs': this.showVerticalTabs,
         'no-animation': isAnimationsDisabled() || this.hasLoaded,
@@ -7235,6 +7250,22 @@ export class YooFormDynamicComponent {
         "tags": []
       }
     },
+    "getTabName": {
+      "complexType": {
+        "signature": "() => Promise<string>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<string>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
     "highlightInvalidFields": {
       "complexType": {
         "signature": "() => Promise<void>",
@@ -7370,6 +7401,22 @@ export class YooFormDynamicComponent {
         "text": "",
         "tags": []
       }
+    },
+    "forceCheckValidityAndEmitChanges": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
     }
   }; }
   static get elementRef() { return "host"; }

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

@@ -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;
@@ -991,6 +1000,9 @@ span.fr-img-caption.fr-view {
   margin-top: var(--spacing-16, 1rem);
 }
 
+: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);
@@ -1075,6 +1087,10 @@ span.fr-img-caption.fr-view {
   height: 100%;
 }
 
+:host(.mobile) .content-container .removable {
+  display: block;
+}
+
 :host(.web.lesson:not(.lesson-live-preview)) {
   display: flex;
   padding: 0 !important;

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

@@ -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 });

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-toggle/form-toggle.css

@@ -213,6 +213,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
+  box-sizing: border-box;
   width: 100%;
   word-break: break-word;
 }