@yoobic/yobi 8.2.0-15 → 8.2.0-16

package/dist/collection/components/1.atoms/markdown/markdown.js

@@ -1,7 +1,7 @@
-import { cleanupWKWebViewFilePath, findParent, getAsyncExtraData, getKeyToCache, getURLs, isOffline, isYoobicSecuredDocTenant, setSecuredContent } from '@shared/utils';
+import { cleanupWKWebViewFilePath, getKeyToCache, getURLs, isOffline, isYoobicSecuredDocTenant, setSecuredContent } from '@shared/utils';
 import { Component, Element, forceUpdate, h, Host, Method, Prop, Watch } from '@stencil/core';
 import { getFromLocalForage } from '../../../utils/cache/localForage';
-import { querySelectorAllDeep, showSlidesMedia } from '../../../utils/helpers/common-helpers';
+import { onRTEClick } from '../../../utils/helpers/common-helpers';
 export class YooMarkdownComponent {
   constructor() {
     this.linkPreviews = [];
@@ -17,26 +17,14 @@ export class YooMarkdownComponent {
     this.setContent();
   }
   onContentClick(e) {
-    var _a, _b, _c;
+    var _a;
     const targetElement = e.target;
     const isTargetImage = (targetElement === null || targetElement === void 0 ? void 0 : targetElement.tagName) === 'IMG' && ((_a = targetElement === null || targetElement === void 0 ? void 0 : targetElement.parentElement) === null || _a === void 0 ? void 0 : _a.tagName) !== 'A';
     if (isTargetImage) {
-      const lessonForm = (_b = findParent(this.host, 'yoo-form-dynamic')) === null || _b === void 0 ? void 0 : _b.classList.contains('lesson-form');
       e.stopPropagation();
       e.stopImmediatePropagation();
       e.preventDefault();
-      const imgs = Array.from(querySelectorAllDeep(this.contentDiv, 'img'));
-      const items = ((_c = imgs.map((e) => e === null || e === void 0 ? void 0 : e.src)) === null || _c === void 0 ? void 0 : _c.map(value => ({ value }))) || [];
-      const slideIndex = imgs === null || imgs === void 0 ? void 0 : imgs.indexOf(targetElement);
-      if (items === null || items === void 0 ? void 0 : items.length) {
-        showSlidesMedia({ items, isTagging: false, isReadonly: true, canAnnotate: false, currentSlideIndex: slideIndex });
-      }
-      if (!lessonForm) {
-        return;
-      }
-      if (slideIndex >= 0) {
-        getAsyncExtraData({ type: 'image-forms', params: { slideIndex, imgs } });
-      }
+      onRTEClick(this.contentDiv, targetElement.src);
     }
   }
   async setContent() {

package/dist/collection/components/1.atoms/navbar/navbar.css

@@ -208,6 +208,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   --bottom-shadow: 0 0.0625rem 0 0 var(--stable-light, #f1f1f1);
   --center-padding: 0 var(--spacing-16, 1rem);
   --flex-safe-area: var(--safe-area-inset-top);
+  --center-display: flex;
   z-index: 10;
   display: block;
   width: 100%;
@@ -388,7 +389,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   align-items: center;
 }
 .top-container .center-container {
-  display: flex;
+  display: var(--center-display);
   flex: 1;
   flex-direction: row;
   align-items: center;

package/dist/collection/components/1.atoms/tabs/tabs.css

@@ -203,7 +203,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 /* shadow */
 :host {
   --justify-tabs: flex-start;
-  --height-tabs: 2.5rem;
+  --height-tabs: var(--spacing-40, 2.5rem);
   --opacity-tabs: 1;
   --active-tab-background: none;
   --active-text-color: var(--text-color, #807f83);
@@ -380,16 +380,15 @@ yoo-tag {
 yoo-badge.margin-right {
   margin-right: var(--spacing-08, 0.5rem);
 }
+yoo-badge[shape=dot] {
+  align-self: flex-start;
+}
 
 yoo-badge:not([shape=dot]),
 yoo-tag {
   align-self: center;
 }
 
-yoo-badge[shape=dot] {
-  align-self: flex-start;
-}
-
 .outer-container {
   position: relative;
   height: var(--height-tabs);
@@ -404,6 +403,7 @@ yoo-badge[shape=dot] {
   box-sizing: border-box;
   width: 100%;
   height: 2.5rem;
+  height: var(--height-tabs);
   padding: var(--spacing-08, 0.5rem);
   color: var(--dark, #000000);
   text-align: left;
@@ -428,18 +428,16 @@ yoo-badge[shape=dot] {
   width: 100%;
 }
 .outer-container-vertical .tab-container .tab-title.plus-one {
-  width: calc(100% - 2rem);
+  width: calc(100% - var(--spacing-32, 2rem));
 }
 .outer-container-vertical .tab-container .tab-title.sandwich {
-  width: calc(100% - 4rem);
+  width: calc(100% - var(--spacing-64, 4rem));
 }
 .outer-container-vertical .tab-container + .tab-container {
   margin-top: var(--vertical-tab-gap);
 }
 .outer-container-vertical .tab-description {
-  padding-right: var(--spacing-16, 1rem);
-  padding-bottom: var(--spacing-08, 0.5rem);
-  padding-left: var(--spacing-32, 2rem);
+  padding: var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);
   color: var(--text-color);
   font-size: var(--font-size-14, 0.875rem);
   border-bottom: var(--tab-border-width) solid var(--tab-border-color);
@@ -483,23 +481,4 @@ yoo-badge[shape=dot] {
 
 .extra.active {
   color: var(--app-color, #5a30f4);
-}
-
-:host(.community-editor) .tab-container {
-  padding-bottom: 0px;
-  border: none;
-  transition: color 0.3s ease;
-}
-:host(.community-editor) .tab-container:not(.active) {
-  padding-bottom: var(--spacing-08, 0.5rem);
-  border-bottom: var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1);
-}
-:host(.community-editor) .tab-container.active {
-  background-color: transparent;
-}
-:host(.community-editor) .tab-container + .tab-container {
-  margin: 0;
-}
-:host(.community-editor) .tab-description {
-  border-bottom: var(--tab-border-width) solid var(--active-tab-border-color);
 }

package/dist/collection/components/1.atoms/tooltip/tooltip.js

@@ -94,9 +94,8 @@ export class YooTooltipComponent {
     }
   }
   onTextChange() {
-    var _a, _b;
-    if (!((_a = this.tippyInstance) === null || _a === void 0 ? void 0 : _a.state.isDestroyed) && !this.requestAccess) {
-      this.editable ? this.contentEditableElement.innerHTML = this.content : (_b = this.tippyInstance) === null || _b === void 0 ? void 0 : _b.setContent(this.content);
+    if (this.tippyInstance && !this.tippyInstance.state.isDestroyed && !this.requestAccess) {
+      this.editable ? this.contentEditableElement.innerHTML = this.content : this.tippyInstance.setContent(this.content);
     }
     else {
       this.configureTooltip();

package/dist/collection/components/3.organisms/device/device.css

@@ -2963,6 +2963,13 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   height: calc(100% - 20px);
 }
 
+:host(.responsive.notch-normal) .marvel-device {
+  box-sizing: border-box;
+}
+:host(.responsive.notch-normal) .marvel-device.iphone-x .notch {
+  left: 0;
+}
+
 :host(.responsive) {
   display: flex;
   align-items: center;

package/dist/collection/components/entities/entity-query-builder/entity-query-builder.css

@@ -268,6 +268,9 @@ yoo-banner {
   margin-right: var(--spacing-04, 0.25rem);
   text-align: center;
 }
+.filters-container yoo-form-dynamic.fill-width:not(.web) {
+  width: 100%;
+}
 
 :host(.no-padding) yoo-button.filters.margin-left {
   margin-left: 0;

package/dist/collection/components/entities/entity-query-builder/entity-query-builder.js

@@ -321,7 +321,7 @@ export class YooEntityQueryBuilderComponent {
           const contentButtons = this.getContextMenuButtons(index);
           const finalData = { ...data, operator: operatorValue };
           return [
-            h("yoo-form-dynamic", { class: "inline inline-row inline-row-narrow transparent", ref: (el) => (this.formFiltersAdvanced[index] = el), animated: false, showRecap: false, slides: slides, scrollable: false, forceReadonly: this.readonly, data: finalData, hideOptional: true, formInputSize: this.size || 'medium', formInputcolor: this.alwaysShow ? 'light' : 'stable-light', onFieldChanged: (ev) => this.onAutocompleteChangeAdvanced(ev, index), onFieldFetchData: (ev) => this.onFieldFetchDataAdvanced(ev, index), onFieldFetchCustomData: (ev) => this.onFieldFetchCustomDataAdvanced(ev, index), onFieldRemoved: (ev) => this.onRemoveFormFieldFromAdvancedSegment(ev, index), onFormValidityChanged: (ev) => ev.stopPropagation(), onDataChanged: (ev) => ev.stopPropagation() },
+            h("yoo-form-dynamic", { class: "inline inline-row inline-row-narrow transparent fill-width", ref: (el) => (this.formFiltersAdvanced[index] = el), animated: false, showRecap: false, slides: slides, scrollable: false, forceReadonly: this.readonly, data: finalData, hideOptional: true, formInputSize: this.size || 'medium', formInputcolor: this.alwaysShow ? 'light' : 'stable-light', onFieldChanged: (ev) => this.onAutocompleteChangeAdvanced(ev, index), onFieldFetchData: (ev) => this.onFieldFetchDataAdvanced(ev, index), onFieldFetchCustomData: (ev) => this.onFieldFetchCustomDataAdvanced(ev, index), onFieldRemoved: (ev) => this.onRemoveFormFieldFromAdvancedSegment(ev, index), onFormValidityChanged: (ev) => ev.stopPropagation(), onDataChanged: (ev) => ev.stopPropagation() },
               !this.readonly && isWeb(this.host) && h("yoo-context-menu", { contentButtons: contentButtons, placement: "below", slot: "end" },
                 h("yoo-button", { color: "app-color", class: "margin-right", shape: "square", size: this.size || 'medium' },
                   h("yoo-icon", { color: "light", name: "plus", class: "add", size: "small" }))),
@@ -358,11 +358,10 @@ export class YooEntityQueryBuilderComponent {
         !this.readonly && isWeb(this.host) && h("yoo-context-menu", { contentButtons: contentButtons, placement: "below", class: { 'no-margin': !this.advancedSegments || this.advancedSegments.length <= 0 }, tooltipContent: this.disabled ? translate('AUDIENCESTOREQUERYACTIVEFILTER') : '', disabled: this.disabled },
           h("yoo-button", { color: "app-color", class: "add-filter", size: this.size },
             h("yoo-icon", { name: "plus", color: "light", slot: "start", size: "small" }),
-            isWeb(this.host) && translate('ADDFILTER'))),
+            translate('ADDFILTER'))),
         !this.readonly && !isWeb(this.host) &&
           h("yoo-button", { color: "app-color", class: "add-filter", onClick: () => showActionSheet(contentButtons), size: this.size },
-            h("yoo-icon", { name: "plus", color: "light", slot: "start", size: "small" }),
-            isWeb(this.host) && translate('ADDFILTER')),
+            h("yoo-icon", { name: "plus", color: "light", size: "small" })),
         this.renderAdvancedFiltersSegments()
       ];
     }

package/dist/collection/components/entities/entity-search/entity-search.css

@@ -246,9 +246,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   height: 6.25rem;
 }
 :host .empty-state div {
-  color: var(--text-color, #807f83);
+  color: var(--text-color-80, rgba(128, 127, 131, 0.8));
   font-size: var(--font-size-16, 1rem);
-  opacity: 0.7;
   text-align: center;
 }
 :host .content {

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

@@ -1,7 +1,7 @@
 import { getAsyncExtraData, isWeb, translate } from '@shared/utils';
 import { Component, Element, Event, h, Host, Prop, State } from '@stencil/core';
 import { assign, cloneDeep, isEmpty, isEqual } from 'lodash-es';
-import { setValidator, setValueAndValidateInput } from '../../../utils/helpers/form-input-helpers'; // 
+import { setValidator, setValueAndValidateInput } from '../../../utils/helpers/form-input-helpers'; //
 export class YooFormAudienceComponent {
   constructor() {
     this.validators = [];
@@ -325,7 +325,7 @@ export class YooFormAudienceComponent {
     const index = this.targetValues.findIndex((v) => v.id === target);
     return this.enableTarget && h("yoo-form-input-container", { class: "bordered", hideOptional: true, field: { title: translate('AUDIENCETARGET') } },
       h("div", { class: "segment-container" },
-        h("yoo-segmented-control", { readonly: this.readonly, values: this.targetValues, initialIndex: index, onSegmentSelected: (ev) => this.onTargetChanged(ev) }),
+        h("yoo-segment", { readonly: this.readonly, size: "medium", class: "segment", values: this.targetValues, initialIndex: index, onSegmentSelected: (ev) => this.onTargetChanged(ev) }),
         this.renderHelp(`AUDIENCETARGET${target.toUpperCase()}HELP`)));
   }
   renderStoreTarget() {

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

@@ -304,9 +304,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: false, 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/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-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;