@yoobic/yobi 8.4.0-2 → 8.4.0-5

package/dist/collection/components/form/form-categorize-words/form-categorize-words.js

@@ -7,13 +7,7 @@ import { setValueAndValidateInput } from '../../../utils/helpers/form-input-help
 export class YooFormCategorizeWordsComponent {
   constructor() {
     this.animated = true;
-    /**
-     * Read-only mode : true if displayed within a quiz summary
-     */
     this.readonly = false;
-    /**
-     * Value previously given by user, mostly used in read-only mode
-     */
     this.value = null;
     this.counterElement = [];
   }
@@ -24,24 +18,32 @@ export class YooFormCategorizeWordsComponent {
   onRequireChanged() {
     this.validate();
   }
-  onValuesChanged(newValues, oldValues) {
+  async onValuesChanged(newValues, oldValues) {
     var _a;
     if (!isEqual(newValues, oldValues)) {
       showWarningBanner(this.host, hasDuplicates(newValues));
-      (_a = this.tags) === null || _a === void 0 ? void 0 : _a.updateTags({ newValues, oldValues });
+      this.tags = await ((_a = this.tags) === null || _a === void 0 ? void 0 : _a.updateTags({ newValues, oldValues }));
+      this.value = this.droppedValues;
     }
   }
   onIsVisibleChanged() {
     var _a;
     this.isVisible && ((_a = this.tags) === null || _a === void 0 ? void 0 : _a.animate());
   }
+  async isValid() {
+    return this.validity;
+  }
+  validate() {
+    var _a, _b;
+    this.validity = !this.required || isEqual((_a = this.value) === null || _a === void 0 ? void 0 : _a.map(v => v.length), (_b = this.answer) === null || _b === void 0 ? void 0 : _b.map(a => a.length));
+    this.validityChanged.emit(this.validity);
+    return this.validity;
+  }
+  get droppedValues() {
+    var _a;
+    return ((_a = this.tags.getDroppedValues()) === null || _a === void 0 ? void 0 : _a.map(droppedValues => droppedValues.map(droppedValue => { var _a; return (_a = this.values) === null || _a === void 0 ? void 0 : _a.find(value => droppedValue === translateMulti(value)); }))) || [];
+  }
   get tagConfig() {
-    const onReleaseTag = () => {
-      this.tags.checkOverflowingTags();
-      this.value = this.tags.getDroppedValues()
-        .map(uas => uas.map(ua => this.values.find(v => ua === translateMulti(v))));
-      setValueAndValidateInput(this.value, this);
-    };
     const getColorTag = (tagValue, zoneIndex) => {
       if (this.readonly && this.value.length === this.answer.length) {
         const isCorrect = this.answer[zoneIndex].includes(tagValue);
@@ -51,40 +53,30 @@ export class YooFormCategorizeWordsComponent {
         return zoneIndex === 2 ? 'stable-light' : 'light';
       }
     };
+    const onReleaseTag = () => {
+      this.tags.checkOverflowingTags();
+      this.value = this.droppedValues;
+      setValueAndValidateInput(this.value, this);
+    };
     return {
       clickToDrop: true,
+      getColorTag,
       onFirstTagAnimationFinished: () => this.revealCategories = true,
-      getColorTag: (tagValue, zoneIndex) => getColorTag(tagValue, zoneIndex),
-      releaseTagExtraAction: () => onReleaseTag(),
+      releaseTagExtraAction: onReleaseTag,
       pressTagExtraAction: () => this.tags.setTagsZoneOverflow(false),
-      resetTagExtraAction: () => onReleaseTag()
+      resetTagExtraAction: onReleaseTag
     };
   }
   get zonesConfig() {
-    const getZoneConfig = (zoneType) => {
-      const isTagZone = zoneType === 'tagZone';
-      return {
-        hasOverflow: isTagZone
-      };
-    };
     return {
       hostElement: this.host,
-      tagZoneConfig: getZoneConfig('tagZone'),
-      dropZoneConfig: getZoneConfig('dropZones')
+      tagZoneConfig: { hasOverflow: true },
+      dropZoneConfig: {}
     };
   }
-  async isValid() {
-    return this.validity;
-  }
   componentDidLoad() {
     this.initGame();
   }
-  validate() {
-    var _a, _b;
-    this.validity = !this.required || isEqual((_a = this.value) === null || _a === void 0 ? void 0 : _a.map(v => v.length), (_b = this.answer) === null || _b === void 0 ? void 0 : _b.map(a => a.length));
-    this.validityChanged.emit(this.validity);
-    return this.validity;
-  }
   initGame() {
     this.tags = initTags(this.tagConfig, this.zonesConfig);
   }
@@ -162,7 +154,7 @@ export class YooFormCategorizeWordsComponent {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Read-only mode : true if displayed within a quiz summary"
+        "text": ""
       },
       "attribute": "readonly",
       "reflect": true,
@@ -180,29 +172,30 @@ export class YooFormCategorizeWordsComponent {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "true if the component is loaded within the preview mode in the course-creator"
+        "text": ""
       },
       "attribute": "live-preview",
       "reflect": true
     },
-    "categories": {
+    "value": {
       "type": "unknown",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
-        "original": "string[]",
-        "resolved": "string[]",
+        "original": "string[][]",
+        "resolved": "string[][]",
         "references": {}
       },
       "required": false,
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Categories (2 required)"
-      }
+        "text": ""
+      },
+      "defaultValue": "null"
     },
-    "required": {
+    "validity": {
       "type": "boolean",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "boolean",
         "resolved": "boolean",
@@ -214,7 +207,7 @@ export class YooFormCategorizeWordsComponent {
         "tags": [],
         "text": ""
       },
-      "attribute": "required",
+      "attribute": "validity",
       "reflect": false
     },
     "answer": {
@@ -229,28 +222,27 @@ export class YooFormCategorizeWordsComponent {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Expected answer. Consisting of 2 arrays (matching categories order),\neach one containing all expected values for given category"
+        "text": ""
       }
     },
-    "value": {
+    "categories": {
       "type": "unknown",
-      "mutable": true,
+      "mutable": false,
       "complexType": {
-        "original": "string[][]",
-        "resolved": "string[][]",
+        "original": "string[]",
+        "resolved": "string[]",
         "references": {}
       },
       "required": false,
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Value previously given by user, mostly used in read-only mode"
-      },
-      "defaultValue": "null"
+        "text": ""
+      }
     },
-    "validity": {
+    "required": {
       "type": "boolean",
-      "mutable": true,
+      "mutable": false,
       "complexType": {
         "original": "boolean",
         "resolved": "boolean",
@@ -260,9 +252,9 @@ export class YooFormCategorizeWordsComponent {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Used by parent component (`yoo-form-dynamic`)"
+        "text": ""
       },
-      "attribute": "validity",
+      "attribute": "required",
       "reflect": false
     },
     "values": {
@@ -277,7 +269,7 @@ export class YooFormCategorizeWordsComponent {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Poll of words to categorize"
+        "text": ""
       }
     },
     "isVisible": {
@@ -292,7 +284,7 @@ export class YooFormCategorizeWordsComponent {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Set to true when the component is in the current visible slide"
+        "text": ""
       },
       "attribute": "is-visible",
       "reflect": false

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

@@ -319,7 +319,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   flex-wrap: wrap;
   justify-content: center;
   width: 100%;
-  height: 100%;
 }
 :host yoo-banner {
   width: 100%;
@@ -346,7 +345,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   cursor: pointer;
 }
 :host .text {
-  margin-top: var(--spacing-08, 0.5rem);
+  margin: var(--spacing-08, 0.5rem) 0;
   text-align: center;
   cursor: pointer;
 }
@@ -366,25 +365,23 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   color: var(--app-color, #5a30f4);
 }
 
-:host([animated]) {
-  --image-choice-animation-delay-start: 0.3s;
-  --image-choice-animation-delay-step: 0.1s;
-  --choice-index: 0;
-}
-:host([animated]) .image-container {
-  transform: translateY(42rem);
-  animation-name: "slide-in-from-bottom";
+:host([animated]:not([readonly])) {
+  --image-index: 0;
+}
+:host([animated]:not([readonly])) .image-container {
+  transform: scale(0);
+  animation-name: scale;
   animation-duration: 400ms;
   animation-timing-function: var(--ease-out-quad);
-  animation-delay: calc(var(--image-choice-animation-delay-start) + var(--choice-index) * var(--image-choice-animation-delay-step));
+  animation-delay: calc(0.5s + var(--image-index) * 0.1s);
   animation-fill-mode: forwards;
 }
-@keyframes slide-in-from-bottom {
+@keyframes scale {
   from {
-    transform: translateY(42rem);
+    transform: scale(0);
   }
   to {
-    transform: translateY(0);
+    transform: scale(1);
   }
 }
 

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

@@ -42,7 +42,7 @@ export class YooFormChoiceImageComponent {
     const noValidation = !((_a = this.answer) === null || _a === void 0 ? void 0 : _a.length);
     const isCorrect = this.answer.includes(item);
     const onOpenImage = () => showSlidesMedia(this.host, { items: this.values.map(({ image }) => ({ value: image })), currentSlideIndex: index, showBottomContainer: false });
-    return (h("div", { class: "image-container", onClick: () => this.isHistory && onOpenImage(), style: this.animated ? { '--choice-index': index.toString() } : {} },
+    return (h("div", { class: "image-container", onClick: () => this.isHistory && onOpenImage(), style: this.animated ? { '--image-index': index.toString() } : {} },
       h("div", { class: { content: true, 'correct-answer': this.readonly && isCorrect && !noValidation, 'wrong-answer': this.readonly && !isCorrect && !noValidation } },
         h("yoo-img", { cloudinaryOptions: { pad: true }, scaledUp: this.isPdf, src: image, onClick: () => !readonly && onItemSelect(item, this) }),
         !readonly && [

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

@@ -107,7 +107,7 @@ export class YooFormChoiceRadioComponent {
     }
     return [
       this.choices &&
-        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), onChecked: (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", disableSingleDeselection: this.disableSingleDeselection, onSelected: (ev) => this.onItemSelectRadio(ev.detail), onChecked: (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), onBlur: () => this.isTextareaFocused = false, value: this.textareaValue, onInput: (ev) => this.onInput(ev), onFocus: () => this.onTextAreaFocused() }))
@@ -259,6 +259,23 @@ export class YooFormChoiceRadioComponent {
         "text": ""
       }
     },
+    "disableSingleDeselection": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "disable-single-deselection",
+      "reflect": false
+    },
     "livePreview": {
       "type": "boolean",
       "mutable": false,

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

@@ -437,6 +437,9 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   border-radius: var(--border-radius-04, 0.25rem);
   transition: height 750ms ease-in-out;
 }
+:host main[style*=height] {
+  overflow: hidden auto;
+}
 :host main.overflowing {
   overflow: hidden auto;
 }

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

@@ -87,18 +87,9 @@ export class YooFormConnectComponent {
     var _a;
     const GAP_PADDING = 8;
     const scrollElement = this.host.closest('yoo-ion-scroll');
-    if (scrollElement && ((_a = this.values) === null || _a === void 0 ? void 0 : _a.length) === 2 && scrollElement.scrollHeight > scrollElement.clientHeight) {
-      const setScrollableHeight = () => {
-        const getHeight = (el) => { var _a; return (_a = el === null || el === void 0 ? void 0 : el.getBoundingClientRect()) === null || _a === void 0 ? void 0 : _a.height; };
-        const formHeight = getHeight(this.host.closest('yoo-form-input-container'));
-        const tileHeight = getHeight(this.innerContainerElement.querySelector('[type]'));
-        if (formHeight && tileHeight && !this.readonly) {
-          const numberItems = Math.max(this.values[0].length, this.values[1].length);
-          const itemsHeight = numberItems * tileHeight + (numberItems + 1) * GAP_PADDING;
-          this.innerContainerElement.classList.toggle('overflowing', itemsHeight > formHeight);
-          this.innerContainerElement.style.height = `${Math.min(formHeight, itemsHeight) - GAP_PADDING * 10}px`;
-        }
-      };
+    const formHeight = scrollElement === null || scrollElement === void 0 ? void 0 : scrollElement.offsetHeight;
+    const fittedHeight = (this.draggableElements.reduce((acc, el) => (acc += (el.clientHeight + GAP_PADDING)), 0) + GAP_PADDING);
+    if (formHeight && ((_a = this.values) === null || _a === void 0 ? void 0 : _a.length) === 2 && fittedHeight > formHeight) {
       await new Promise(resolve => {
         setTimeout(() => {
           scrollElement.scrollTo({
@@ -108,7 +99,7 @@ export class YooFormConnectComponent {
           resolve();
         }, 1000);
       });
-      setScrollableHeight();
+      this.innerContainerElement.style.height = `${formHeight - GAP_PADDING * 2}px`;
     }
   }
   setDraggableObserver() {

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

@@ -202,7 +202,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 /* spacing for padding, margin, etc... */
 /* shadow */
 /*!
- * froala_editor v4.0.13 (https://www.froala.com/wysiwyg-editor)
+ * froala_editor v4.0.14 (https://www.froala.com/wysiwyg-editor)
  * License https://froala.com/wysiwyg-editor/terms/
  * Copyright 2014-2022 Froala Labs
  */
@@ -795,8 +795,8 @@ span.fr-img-caption.fr-view {
 }
 :host .answer-separator {
   width: 100%;
-  height: 0.5rem;
-  margin: var(--spacing-24, 1.5rem) 0;
+  height: var(--spacing-08, 0.5rem);
+  margin: 0;
   background: var(--stable-ultralight, #fafafa);
   border: 0;
 }
@@ -1503,7 +1503,7 @@ span.fr-img-caption.fr-view {
 }
 :host .footer-spacer {
   width: 100%;
-  min-height: 1rem;
+  min-height: 0;
 }
 
 :host(.mobile) {
@@ -1867,6 +1867,7 @@ span.fr-img-caption.fr-view {
 }
 :host(.web.lesson-form:not(.lesson-live-preview)) yoo-form-input-container {
   padding: var(--spacing-16, 1rem);
+  padding-bottom: 0;
   background-color: var(--stable-ultralight, #fafafa);
 }
 
@@ -2435,14 +2436,10 @@ span.fr-img-caption.fr-view {
   padding-bottom: 0.5rem;
 }
 
-:host(.mobile.lesson-detail) .field-placeholder,
-:host(.mobile.lesson-question-result.readonly) .field-placeholder {
+:host(.mobile.lesson-detail) .field-placeholder {
   margin: 0 var(--spacing-16, 1rem);
 }
 
-:host(.web.lesson-detail) yoo-form-image-tagging {
-  max-width: 37.5rem;
-}
 :host(.web.lesson-detail) .inputs-container-parent {
   margin: 0 !important;
   padding: 0;
@@ -2453,10 +2450,16 @@ span.fr-img-caption.fr-view {
 :host(.web.lesson-detail) .inputs-container-parent .inputs-container .field-placeholder {
   margin: 0 var(--spacing-24, 1.5rem);
 }
+:host(.web.lesson-detail) .inputs-container-parent .inputs-container .field-placeholder yoo-form-input-container {
+  max-width: 37.5rem;
+}
 
 :host(.web.lesson-detail.readonly) .field-placeholder {
   width: -webkit-fill-available;
 }
+:host(.web.lesson-detail.readonly) .field-placeholder .answer-validity {
+  padding-top: var(--spacing-16, 1rem);
+}
 
 :host(.lesson-detail.readonly),
 :host(.lesson-question-result.readonly) {

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

@@ -644,7 +644,7 @@ export class YooFormDynamicComponent {
       }, 300);
     }
     // Disabled this because of the warnings from stencil , not sure we still need it
-    if ((this.showTabs || this.showVerticalTabs) && !this.isLivePreview() && this.formType !== 'form-creator-block' && !(this.isMission() && !isWeb(this.host))) {
+    if ((this.showTabs || this.showVerticalTabs) && !this.isLivePreview() && !['form-creator-announcement', 'form-creator-block'].includes(this.formType) && !(this.isMission() && !isWeb(this.host))) {
       this.updateState(true);
     }
     this.host.classList.remove('no-initial-height');
@@ -1023,7 +1023,7 @@ export class YooFormDynamicComponent {
     }
   }
   getworkflowButtonTextColors() {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _u, _v, _w, _x, _y, _z, _0;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
     const rejectKey = ((_c = (_b = (_a = this.currentWorkflowStep) === null || _a === void 0 ? void 0 : _a.actions) === null || _b === void 0 ? void 0 : _b.find((action) => (action === null || action === void 0 ? void 0 : action.type) === 'reject')) === null || _c === void 0 ? void 0 : _c.text)
       ? (_f = (_e = (_d = this.currentWorkflowStep) === null || _d === void 0 ? void 0 : _d.actions) === null || _e === void 0 ? void 0 : _e.find((action) => (action === null || action === void 0 ? void 0 : action.type) === 'reject')) === null || _f === void 0 ? void 0 : _f.text
       : 'UNVALIDATED';
@@ -1031,10 +1031,10 @@ export class YooFormDynamicComponent {
       ? (_m = (_l = (_k = this.currentWorkflowStep) === null || _k === void 0 ? void 0 : _k.actions) === null || _l === void 0 ? void 0 : _l.find((action) => (action === null || action === void 0 ? void 0 : action.type) === 'sendback')) === null || _m === void 0 ? void 0 : _m.text
       : 'SENDBACK';
     const reassignKey = ((_q = (_p = (_o = this.currentWorkflowStep) === null || _o === void 0 ? void 0 : _o.actions) === null || _p === void 0 ? void 0 : _p.find((action) => (action === null || action === void 0 ? void 0 : action.type) === 'reassign')) === null || _q === void 0 ? void 0 : _q.text)
-      ? (_u = (_s = (_r = this.currentWorkflowStep) === null || _r === void 0 ? void 0 : _r.actions) === null || _s === void 0 ? void 0 : _s.find((action) => (action === null || action === void 0 ? void 0 : action.type) === 'reassign')) === null || _u === void 0 ? void 0 : _u.text
+      ? (_t = (_s = (_r = this.currentWorkflowStep) === null || _r === void 0 ? void 0 : _r.actions) === null || _s === void 0 ? void 0 : _s.find((action) => (action === null || action === void 0 ? void 0 : action.type) === 'reassign')) === null || _t === void 0 ? void 0 : _t.text
       : 'REASSIGN';
-    const submitKey = ((_x = (_w = (_v = this.currentWorkflowStep) === null || _v === void 0 ? void 0 : _v.actions) === null || _w === void 0 ? void 0 : _w.find((action) => (action === null || action === void 0 ? void 0 : action.type) === 'submit')) === null || _x === void 0 ? void 0 : _x.text)
-      ? (_0 = (_z = (_y = this.currentWorkflowStep) === null || _y === void 0 ? void 0 : _y.actions) === null || _z === void 0 ? void 0 : _z.find((action) => (action === null || action === void 0 ? void 0 : action.type) === 'submit')) === null || _0 === void 0 ? void 0 : _0.text
+    const submitKey = ((_w = (_v = (_u = this.currentWorkflowStep) === null || _u === void 0 ? void 0 : _u.actions) === null || _v === void 0 ? void 0 : _v.find((action) => (action === null || action === void 0 ? void 0 : action.type) === 'submit')) === null || _w === void 0 ? void 0 : _w.text)
+      ? (_z = (_y = (_x = this.currentWorkflowStep) === null || _x === void 0 ? void 0 : _x.actions) === null || _y === void 0 ? void 0 : _y.find((action) => (action === null || action === void 0 ? void 0 : action.type) === 'submit')) === null || _z === void 0 ? void 0 : _z.text
       : 'SUBMIT';
     return [
       { key: translateMulti(rejectKey), value: getCssColor('danger') },
@@ -2124,13 +2124,19 @@ export class YooFormDynamicComponent {
     if (this.isRenderFormSlidesWithTab()) {
       if (slides.length > 1) {
         this.slidesState = this.slidesState || [];
-        this.tabs = slides.map((s, i) => ({
-          title: s.title,
-          value: s.value || s.title,
-          icon: s.icon,
-          iconColor: this.showBadgesVerticalTabs ? this.slidesState[i].validity ? 'success' : 'danger' : null,
-          description: s.description
-        })).filter((_t, i) => { var _a; return !((_a = this.slidesState[i]) === null || _a === void 0 ? void 0 : _a.locked); });
+        this.tabs = this.slides.map((s, i) => {
+          var _a, _b, _c, _d;
+          return ({
+            tabConfig: {
+              title: (_a = this.slides[i]) === null || _a === void 0 ? void 0 : _a.title,
+              value: ((_b = this.slides[i]) === null || _b === void 0 ? void 0 : _b.value) || this.slides[i].title,
+              icon: (_c = this.slides[i]) === null || _c === void 0 ? void 0 : _c.icon,
+              iconColor: this.showBadgesVerticalTabs ? this.slidesState[i].validity ? 'success' : 'danger' : null,
+              description: (_d = this.slides[i]) === null || _d === void 0 ? void 0 : _d.description
+            },
+            slide: s
+          });
+        }).filter((item, index) => { var _a; return this.isSlideVisible(item.slide) && !((_a = this.slidesState[index]) === null || _a === void 0 ? void 0 : _a.locked); }).map(item => ({ ...item.tabConfig }));
         const selectedSlideIndex = slides.findIndex((s) => { var _a; return (s.value || s.title) === ((_a = this.tabs[this.selectedTabIndex || 0]) === null || _a === void 0 ? void 0 : _a.value); }) || 0;
         const selectedSlide = slides[selectedSlideIndex];
         this.setTabSelectedValue(this.selectedTabIndex || 0);
@@ -2958,7 +2964,7 @@ export class YooFormDynamicComponent {
       }
       buttons = getLastButtons(this.host, {
         text: translate(submitText),
-        color: !this.isLesson() && isDisabled ? 'stable-light' : this.appColor,
+        color: isDisabled ? 'stable-light' : this.appColor,
         size: isWeb(this.host) && !this.isLivePreview() ? 'medium' : 'large',
         cssClass: !isNativeMobile() ? 'swiper-no-swiping' : undefined,
         disabled: this.isLesson() && isDisabled,
@@ -2968,7 +2974,7 @@ export class YooFormDynamicComponent {
     return buttons;
   }
   getLastButtonsWorkflow() {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _u, _v, _w;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
     let buttons = [];
     let dialogTextValues;
     if (this.currentWorkflowStep.type !== 'start') {
@@ -3032,8 +3038,8 @@ export class YooFormDynamicComponent {
     }
     const submitFn = (e) => (this.validity ? this.onSave(e) : this.focusInvalidField(true));
     let submitText = 'SUBMIT';
-    if ((_u = (_s = (_r = this.currentWorkflowStep) === null || _r === void 0 ? void 0 : _r.actions) === null || _s === void 0 ? void 0 : _s.find((a) => a.type === 'submit')) === null || _u === void 0 ? void 0 : _u.text) {
-      submitText = (_v = this.currentWorkflowStep.actions.find((a) => a.type === 'submit')) === null || _v === void 0 ? void 0 : _v.text;
+    if ((_t = (_s = (_r = this.currentWorkflowStep) === null || _r === void 0 ? void 0 : _r.actions) === null || _s === void 0 ? void 0 : _s.find((a) => a.type === 'submit')) === null || _t === void 0 ? void 0 : _t.text) {
+      submitText = (_u = this.currentWorkflowStep.actions.find((a) => a.type === 'submit')) === null || _u === void 0 ? void 0 : _u.text;
     }
     buttons.push({
       text: translate(submitText),
@@ -3045,7 +3051,7 @@ export class YooFormDynamicComponent {
     });
     if ((buttons === null || buttons === void 0 ? void 0 : buttons.length) > 2) {
       const subMenuButtons = buttons;
-      const currentSelectedButtonText = (_w = this.selectedButtonText) === null || _w === void 0 ? void 0 : _w.find((selectedText) => selectedText);
+      const currentSelectedButtonText = (_v = this.selectedButtonText) === null || _v === void 0 ? void 0 : _v.find((selectedText) => selectedText);
       const selectedSubMenuButton = subMenuButtons.find((subMenuButton) => subMenuButton.text === currentSelectedButtonText);
       buttons = buttons.filter((button) => button.subMenu);
       dialogTextValues = subMenuButtons.map((button) => button.text);
@@ -3084,7 +3090,7 @@ export class YooFormDynamicComponent {
     this.openPreview.emit('');
   }
   renderInput({ field, data, slideIndex, slideItems, inputIndex, readonly, cssClass, isHistory, previousField, slots }) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _u;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
     const fieldState = getFieldState(field, this.fieldsState);
     const required = isRequired(field, this.currentData, this.currentDataFlatten, fieldState.visible, this.suffix, this.session);
     const disabled = isDisabled(field, this.currentData, this.currentDataFlatten, this.suffix, this.session);
@@ -4334,6 +4340,7 @@ export class YooFormDynamicComponent {
           categories: field.categories,
           values: field.values,
           images: field.images,
+          showInstructionView: (_t = field.showInstructionView) !== null && _t !== void 0 ? _t : true,
           answer: field.answer || field.complexAnswer,
           required: field.required,
           isVisible: this.isCurrentSlide(slideIndex),
@@ -4383,7 +4390,7 @@ export class YooFormDynamicComponent {
           required: field.required,
           categories: field.categories,
           values: field.values,
-          answer: field.complexAnswer
+          answer: field.answer || field.complexAnswer
         };
         break;
       case FormFieldType.connect:
@@ -4392,7 +4399,7 @@ export class YooFormDynamicComponent {
           shuffled: field.shuffled,
           livePreview: this.isLessonPreview(),
           isVisible: this.isCurrentSlide(slideIndex),
-          values: field.complexValues,
+          values: field.values || field.complexValues,
           answer: field.answer
         };
         break;
@@ -5152,7 +5159,7 @@ export class YooFormDynamicComponent {
       "mutable": false,
       "complexType": {
         "original": "FormDynamicType",
-        "resolved": "\"form-creator-announcement\" | \"form-creator-block\" | \"form-creator-preview\" | \"form-creator-preview-kanban\" | \"form-creator-preview-lesson\" | \"form-creator-preview-workflow\" | \"kanban\" | \"lesson\" | \"lesson-detail\" | \"lesson-question-result\" | \"mission\" | \"mission-validation\" | \"poll\" | \"service\" | \"todo\" | \"visit\" | \"waitlist\" | \"workflow\"",
+        "resolved": "\"feed\" | \"form-creator-announcement\" | \"form-creator-block\" | \"form-creator-preview\" | \"form-creator-preview-kanban\" | \"form-creator-preview-lesson\" | \"form-creator-preview-workflow\" | \"kanban\" | \"lesson\" | \"lesson-detail\" | \"lesson-question-result\" | \"mission\" | \"mission-validation\" | \"poll\" | \"service\" | \"todo\" | \"visit\" | \"waitlist\" | \"workflow\"",
         "references": {
           "FormDynamicType": {
             "location": "import",