@yoobic/yobi 8.2.0-7 → 8.2.0

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';
@@ -11,6 +11,7 @@ export class YooFormInputComponent {
     this.uiValidation = { valid: true, invalid: true }; // valid to show success, invalid to show fail
     this.disabled = false;
     this.hasIconPrefix = true;
+    this.inputmode = '';
     this.type = 'text';
     this.showPasswordToggle = true;
     this.clearable = true;
@@ -18,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();
@@ -91,7 +92,7 @@ export class YooFormInputComponent {
   }
   async stepDown() {
     if (this.inputElement) {
-      if (!this.inputElement.value && this.type === 'number') {
+      if (!this.inputElement.value && this.isNumberInput(this.type)) {
         this.value = initNumber(this.min ? +this.min : undefined, this.max ? +this.max : undefined, 'down');
       }
       else {
@@ -103,7 +104,7 @@ export class YooFormInputComponent {
   }
   async stepUp() {
     if (this.inputElement) {
-      if (!this.inputElement.value && this.type === 'number') {
+      if (!this.inputElement.value && this.isNumberInput(this.type)) {
         this.value = initNumber(this.min ? +this.min : undefined, this.max ? +this.max : undefined, 'up');
       }
       else {
@@ -126,12 +127,14 @@ export class YooFormInputComponent {
       }
       this.validityChanged.emit(this.validity);
     }, this.debounce || 0);
-    switch (this.type) {
+    const type = this.isNumberInput(this.type) ? 'number' : this.type;
+    switch (type) {
       case 'email':
         this.finalIconPrefix = 'email';
         break;
       case 'number':
         this.finalIconPrefix = this.iconPrefix ? this.iconPrefix : 'ranking';
+        !this.allowDecimals && this.step == undefined && (this.step = 1);
         break;
       case 'password':
         this.finalIconPrefix = 'password';
@@ -157,9 +160,6 @@ export class YooFormInputComponent {
       this.inputElement.value = this.value;
       this.updateRemainingCharacters();
     }
-    if (isIOS()) {
-      enableKeyboardResize();
-    }
     if (this.focusOnRendered) {
       this.setFocus();
     }
@@ -173,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') {
@@ -196,34 +186,39 @@ export class YooFormInputComponent {
     let value;
     if (el) {
       const isNumberInput = this.isNumberInput(this.type);
+      const type = isNumberInput ? 'number' : this.type;
       if (isIOS() && isNumberInput && ev.data === ',') {
         el.value = this.localValue + '.';
       }
       if (!isNumberInput || el.value || ev.data !== '-') {
-        if (isNumberInput && ['e', '+'].includes(ev.data)) {
-          el.value = this.value;
-        }
-        value = convertValueForInputType(el.value, this.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();
@@ -238,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;
@@ -250,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
@@ -302,7 +297,6 @@ export class YooFormInputComponent {
   }
   clearInput() {
     this.localValue = null;
-    this.inputHasValue = false;
     if (this.inputElement) {
       this.inputElement.value = null;
       this.updateRemainingCharacters(true);
@@ -316,11 +310,11 @@ export class YooFormInputComponent {
   }
   getPattern() {
     if (this.isNumberInput(this.inputType)) {
-      return '[+-]?[0-9]+[,.]?([0-9]+)?';
+      return `^([+-]{1})?[0-9]+${this.allowDecimals ? '[,.]?([0-9]+)?' : ''}`;
     }
   }
   isTextInput(inputType) {
-    return inputType === 'text';
+    return inputType === 'text' && this.inputmode !== 'numeric';
   }
   isTelInput(inputType) {
     return inputType === 'tel';
@@ -329,7 +323,7 @@ export class YooFormInputComponent {
     return inputType === 'password';
   }
   isNumberInput(inputType) {
-    return inputType === 'number';
+    return inputType === 'number' || this.inputmode === 'numeric';
   }
   animateContent() {
     if (this.animation) {
@@ -404,7 +398,7 @@ export class YooFormInputComponent {
         } },
         this.finalIconPrefix && this.hasIconPrefix && (h("div", { class: "icon-prefix", onClick: () => (this.inputElement && this.inputElement.focus ? this.inputElement.focus() : null) },
           h("yoo-icon", { name: this.finalIconPrefix, size: this.getIconSize() }))),
-        h("input", { type: this.inputType, name: this.name, tabindex: this.inputTabIndex, ref: (el) => (this.inputElement = el), autocapitalize: this.autocapitalize, autocorrect: this.autocorrect, placeholder: !this.placeholdertolabel && this.internalPlaceholder ? translate(this.internalPlaceholder) : '', required: this.required, onBlur: (ev) => onInputBlurred(ev, this, '.input-container', this.type, this.uiValidation), onChange: (ev) => this.fireInputChangeEvent ? this.onInputChanged(ev) : ev === null || ev === void 0 ? void 0 : ev.stopPropagation(), onInput: (ev) => this.onInputChanged(ev), onFocus: () => onInputFocused(this, '.input-container'), onKeyDown: (ev) => this.onKeyPress(ev), onWheel: this.onWheel, min: this.min, max: this.max, pattern: this.getPattern(), step: this.step, class: {
+        h("input", { type: this.inputType, name: this.name, tabindex: this.inputTabIndex, ref: (el) => (this.inputElement = el), autocapitalize: this.autocapitalize, autocorrect: this.autocorrect, inputmode: this.inputmode ? this.inputmode : undefined, placeholder: !this.placeholdertolabel && this.internalPlaceholder ? translate(this.internalPlaceholder) : '', required: this.required, onBlur: (ev) => onInputBlurred(ev, this, '.input-container', this.type, this.uiValidation), onChange: (ev) => this.fireInputChangeEvent ? this.onInputChanged(ev) : ev === null || ev === void 0 ? void 0 : ev.stopPropagation(), onInput: (ev) => this.onInputChanged(ev), onFocus: () => onInputFocused(this, '.input-container'), onKeyDown: (ev) => this.onKeyPress(ev), onWheel: this.onWheel, min: this.min, max: this.max, pattern: this.getPattern(), step: this.step, class: {
             last: !((hasValue && this.clearable) || (this.type === 'password' && this.showPasswordToggle) || (this.uiValidation.invalid && this.validity === false)),
             'hide-value': (_a = this.checkboxParams) === null || _a === void 0 ? void 0 : _a.value,
             'has-icon-prefix': this.finalIconPrefix && this.hasIconPrefix
@@ -677,7 +671,7 @@ export class YooFormInputComponent {
     },
     "step": {
       "type": "number",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "number",
         "resolved": "number",
@@ -810,6 +804,24 @@ export class YooFormInputComponent {
       "attribute": "tooltip",
       "reflect": false
     },
+    "inputmode": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "inputmode",
+      "reflect": false,
+      "defaultValue": "''"
+    },
     "type": {
       "type": "string",
       "mutable": false,
@@ -1257,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%;