@yoobic/yobi 8.4.0-1 → 8.4.0-4

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

@@ -215,10 +215,10 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   background-color: transparent;
   perspective: 1000px;
 }
-:host #image.flipped .inner-container {
+:host #image.flipped #inner-container {
   transform: rotateY(180deg);
 }
-:host #image .inner-container {
+:host #image #inner-container {
   position: relative;
   width: 100%;
   height: 100%;
@@ -226,22 +226,22 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   transform-style: preserve-3d;
   transition: transform 0.75s;
 }
-:host #image .inner-container .flip-box-front,
-:host #image .inner-container .flip-box-back {
+:host #image #inner-container #recto,
+:host #image #inner-container #verso {
   width: 100%;
   height: 100%;
   background-color: var(--light, #ffffff);
   backface-visibility: hidden;
 }
-:host #image .inner-container .flip-box-back {
+:host #image #inner-container #verso {
   z-index: 1;
   transform: rotateY(180deg);
 }
-:host #image .inner-container #overlay,
-:host #image .inner-container yoo-img {
+:host #image #inner-container #overlay,
+:host #image #inner-container yoo-img {
   border-radius: var(--border-radius-08, 0.5rem);
 }
-:host #image .inner-container .dropzone {
+:host #image #inner-container .dropzone {
   position: absolute;
   display: flex;
   align-items: center;
@@ -256,7 +256,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host(:not([readonly])) main::-webkit-scrollbar {
   display: none;
 }
-:host(:not([readonly])) #image #overlay {
+:host(:not([readonly])) #image #inner-container #overlay {
   position: absolute;
   top: 0;
   width: 100%;
@@ -265,11 +265,11 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   opacity: 0;
   transition: opacity 350ms ease-in-out;
 }
-:host(:not([readonly])) #image .dropzone[hit] {
+:host(:not([readonly])) #image #inner-container .dropzone[hit] {
   background-color: var(--app-color, #5a30f4);
 }
 :host(:not([readonly])) #instructions {
-  margin: var(--spacing-32, 2rem) 0 0;
+  margin: var(--spacing-16, 1rem) 0 0;
   padding: var(--spacing-08, 0.5rem);
   color: var(--stable, #adadad);
 }

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

@@ -3,7 +3,6 @@ import { Component, Element, Event, forceUpdate, h, Host, Method, Prop, State, W
 import { isEqual } from 'lodash-es';
 import { getFromOfflineStorage } from '../../../utils/cache';
 import { initTags } from '../../../utils/draggables';
-import { Tags } from '../../../utils/draggables/tags';
 import { getPercentPositionStyle } from '../../../utils/helpers/annotations-helpers';
 import { checkArray, filterDuplicateEntries, hasDuplicates, showWarningBanner } from '../../../utils/helpers/draggable-tags-helpers';
 import { setValueAndValidateInput } from '../../../utils/helpers/form-input-helpers';
@@ -16,8 +15,7 @@ export class YooFormImageTaggingComponent {
   }
   async onImageChanged(newImage, oldImage) {
     if (!isEqual(newImage, oldImage)) {
-      this.imageSrc = await this.getImageSrc();
-      this.flipImage = !!this.imageSrc;
+      await this.prepareImage();
       !this.imageSrc && forceUpdate(this);
       this.init();
     }
@@ -25,14 +23,15 @@ export class YooFormImageTaggingComponent {
   onRequireChanged() {
     this.validate();
   }
-  onValuesChanged(newValues, oldValues) {
+  async onValuesChanged(newValues, oldValues) {
     var _a;
     if (!isEqual(newValues === null || newValues === void 0 ? void 0 : newValues.sort(), oldValues === null || oldValues === void 0 ? void 0 : oldValues.sort())) {
       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;
     }
   }
-  async onIsVisibleChanged() {
+  onIsVisibleChanged() {
     var _a;
     if (this.isVisible) {
       (_a = this.tags) === null || _a === void 0 ? void 0 : _a.animate();
@@ -40,86 +39,87 @@ export class YooFormImageTaggingComponent {
       this.init();
     }
   }
+  async isValid() {
+    return this.validity;
+  }
+  validate() {
+    var _a, _b;
+    this.validity = !this.required || (((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) === ((_b = this.annotations) === null || _b === void 0 ? void 0 : _b.length));
+    this.validityChanged.emit(this.validity);
+    return this.validity;
+  }
+  get droppedValues() {
+    var _a;
+    return ((_a = this.tags.getDroppedValues(true)) === null || _a === void 0 ? void 0 : _a.map(droppedValues => this.values.find(value => droppedValues === translateMulti(value)))) || [];
+  }
   get tagConfig() {
+    const showImageOverlay = (showOverlay = true) => {
+      this.tags.setTagsZoneOverflow(false);
+      if (this.imageOverlayElement) {
+        this.imageOverlayElement.style.opacity = (showOverlay ? 1 : 0).toString();
+      }
+    };
+    const getColorTag = (tagValue) => {
+      if (this.readonly && checkArray(this.value) && this.answer) {
+        const indexUserValueAnswer = this.value.indexOf(tagValue);
+        const indexValueAnswer = this.answer.indexOf(tagValue);
+        return this.answer.includes(tagValue) && indexUserValueAnswer === indexValueAnswer ? 'success' : 'danger';
+      }
+      return 'app-color';
+    };
     const onReleaseTag = () => {
-      var _a;
-      this.showImageOverlay(false);
-      this.value = ((_a = this.tags.getDroppedValues(true)) === null || _a === void 0 ? void 0 : _a.map(ua => this.values.find(v => ua === translateMulti(v)))) || [];
+      showImageOverlay(false);
+      this.value = this.droppedValues;
       setValueAndValidateInput(this.value, this);
     };
     return {
       clickToDrop: true,
       dragAndScroll: true,
+      getColorTag,
       onFirstTagAnimationFinished: () => this.flipImage = false,
-      getColorTag: (tagValue) => this.getColorTag(tagValue),
-      pressTagExtraAction: () => this.showImageOverlay(),
-      releaseTagExtraAction: () => onReleaseTag(),
-      resetTagExtraAction: () => onReleaseTag()
+      pressTagExtraAction: () => showImageOverlay(),
+      releaseTagExtraAction: onReleaseTag,
+      resetTagExtraAction: onReleaseTag
     };
   }
   get zonesConfig() {
-    const getZoneConfig = (zoneType) => {
-      return {
-        hasOverflow: zoneType === 'tagZone',
-        colorClass: 'app-color'
-      };
-    };
+    const dropZoneConfig = { colorClass: 'app-color' };
     return {
       hostElement: this.host,
-      tagZoneConfig: getZoneConfig('tagZone'),
-      dropZoneConfig: getZoneConfig('dropZones')
+      tagZoneConfig: { ...dropZoneConfig, hasOverflow: true },
+      dropZoneConfig
     };
   }
-  async isValid() {
-    return this.validity;
-  }
   async componentWillLoad() {
-    this.imageSrc = await this.getImageSrc();
-    this.flipImage = !!this.imageSrc;
+    await this.prepareImage();
   }
   componentDidLoad() {
     this.init();
   }
-  validate() {
-    var _a, _b;
-    this.validity = !this.required || (((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) === ((_b = this.annotations) === null || _b === void 0 ? void 0 : _b.length));
-    this.validityChanged.emit(this.validity);
-    return this.validity;
-  }
-  init() {
-    this.flipImage && setTimeout(() => {
-      var _a, _b;
-      !((_b = (_a = this.tags) === null || _a === void 0 ? void 0 : _a.tags) === null || _b === void 0 ? void 0 : _b.length) && (this.tags = initTags(this.tagConfig, this.zonesConfig));
-      Tags.prepareAutoScroll(this.host);
-      this.flipImage = false;
-    }, 500);
-  }
-  async getImageSrc() {
+  async prepareImage() {
     var _a;
-    return getMedia((await getFromOfflineStorage((_a = this.image) === null || _a === void 0 ? void 0 : _a._downloadURL)), { forceCookieUrlParam: true });
+    this.imageSrc = await getMedia((await getFromOfflineStorage((_a = this.image) === null || _a === void 0 ? void 0 : _a._downloadURL)), { forceCookieUrlParam: true });
+    this.flipImage = !!this.imageSrc;
   }
-  getColorTag(tagValue) {
-    if (this.readonly && checkArray(this.value) && this.answer) {
-      const indexUserValueAnswer = this.value.indexOf(tagValue);
-      const indexValueAnswer = this.answer.indexOf(tagValue);
-      return this.answer.includes(tagValue) && indexUserValueAnswer === indexValueAnswer ? 'success' : 'danger';
-    }
-    return 'app-color';
+  init() {
+    this.flipImage &&
+      setTimeout(() => {
+        var _a, _b;
+        !((_b = (_a = this.tags) === null || _a === void 0 ? void 0 : _a.tags) === null || _b === void 0 ? void 0 : _b.length) && (this.tags = initTags(this.tagConfig, this.zonesConfig));
+        this.flipImage = false;
+      }, 500);
   }
-  showImageOverlay(showOverlay = true) {
-    this.tags.setTagsZoneOverflow(false);
-    if (this.imageOverlayElement) {
-      this.imageOverlayElement.style.opacity = (showOverlay ? 1 : 0).toString();
-    }
+  renderImageOverlay() {
+    return !this.readonly && h("div", { id: "overlay", ref: (element) => (this.imageOverlayElement = element) });
   }
-  renderImageContainer() {
-    return !!this.image && h("section", { id: "image", class: { flipped: this.animated && !!this.flipImage && !this.readonly } },
-      h("div", { class: "inner-container" },
-        h("section", { class: "flip-box-front" },
-          h("yoo-img", { allowCloudinary: false, contained: true, src: this.imageSrc }),
-          !this.readonly && h("div", { id: "overlay", ref: (element) => (this.imageOverlayElement = element) }),
+  renderImage() {
+    return (!!this.imageSrc && (h("section", { id: "image", class: { flipped: this.animated && !!this.flipImage && !this.readonly } },
+      h("div", { id: "inner-container" },
+        h("div", { id: "recto" },
+          h("yoo-img", { instant: true, src: this.imageSrc, ignoreHeight: true, ignoreWidth: true, disableAspectRatioCalc: true, allowCloudinary: false }),
+          this.renderImageOverlay(),
           this.renderDropzones()),
-        h("section", { class: "flip-box-back" })));
+        h("div", { id: "verso" })))));
   }
   renderDropzones() {
     var _a, _b;
@@ -139,7 +139,7 @@ export class YooFormImageTaggingComponent {
   }
   renderMain() {
     return h("main", null,
-      this.renderImageContainer(),
+      this.renderImage(),
       !this.readonly && [this.renderInstruction(), this.renderTagsZone()]);
   }
   render() {
@@ -382,36 +382,6 @@ export class YooFormImageTaggingComponent {
         "resolved": "boolean",
         "references": {}
       }
-    }, {
-      "method": "inputBlurred",
-      "name": "inputBlurred",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "inputFocused",
-      "name": "inputFocused",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
     }, {
       "method": "inputChanged",
       "name": "inputChanged",

package/dist/collection/components/form/form-input-container/form-input-container.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
  */
@@ -916,16 +916,6 @@ span.fr-img-caption.fr-view {
   margin-right: var(--spacing-16, 1rem);
 }
 
-:host([fullscreen]) .top-container {
-  display: inherit !important;
-  width: 100% !important;
-  height: 100% !important;
-}
-:host([fullscreen]) .top-container .content-container {
-  width: 100% !important;
-  height: 100% !important;
-}
-
 :host([readonly]) {
   border: none;
 }
@@ -1015,25 +1005,13 @@ span.fr-img-caption.fr-view {
   border-bottom: none;
 }
 
-:host([readonly]:not(.forcedhistory):not(.custom-width)) ::slotted(yoo-form-input),
-:host([readonly]:not(.forcedhistory):not(.custom-width)) ::slotted(yoo-form-image-tagging),
-:host([readonly]:not(.forcedhistory):not(.custom-width)) ::slotted(yoo-form-ranking),
-:host([readonly]:not(.forcedhistory):not(.custom-width)) ::slotted(yoo-form-autocomplete) {
-  display: block;
+:host([readonly]:not(.forcedhistory):not(.custom-width)) ::slotted(*:not(yoo-form-date-time)) {
   margin-top: var(--spacing-08, 0.5rem);
+  padding: 0;
 }
-: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 {
+:host([readonly]:not(.forcedhistory):not(.custom-width)) ::slotted(*:not(yoo-form-date-time)).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) {
-  display: block;
-  margin-top: var(--spacing-16, 1rem);
-}
 
 :host([readonly].custom-width.inline-row:not(.label-top-aligned)) .top-container {
   justify-content: center;
@@ -1106,13 +1084,18 @@ span.fr-img-caption.fr-view {
 :host([form-type$=lesson]) .top-container {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-08, 0.5rem);
+  gap: var(--spacing-16, 1rem);
   box-sizing: border-box;
   width: 100%;
   height: 100%;
   margin: 0 auto;
   padding: var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);
 }
+:host([form-type$=lesson]) .top-container::after {
+  margin-top: -1rem;
+  border-bottom: var(--spacing-16, 1rem) solid var(--light, #ffffff);
+  content: "";
+}
 :host([form-type$=lesson]) .top-container::-webkit-scrollbar {
   display: none;
 }
@@ -1125,43 +1108,24 @@ span.fr-img-caption.fr-view {
   font-size: var(--font-size-16, 1rem);
 }
 :host([form-type$=lesson]) .top-container .content-container {
+  flex: 1;
   box-sizing: border-box;
   height: fit-content;
+  max-height: calc(100% - var(--spacing-16, 1rem));
   padding: initial;
 }
 :host([form-type$=lesson]) .top-container .content-container ::slotted(*) {
   box-sizing: border-box;
-  height: 100%;
   margin: 0 auto;
-  padding: 0;
-  padding-bottom: var(--spacing-16, 1rem);
-}
-:host([form-type$=lesson]) .top-container .content-container ::slotted(yoo-range) {
-  padding-bottom: var(--spacing-32, 2rem);
-}
-:host([form-type$=lesson]) .top-container .content-container ::slotted(yoo-text-sequence) {
-  height: 100%;
-  margin: 0 auto;
-}
-:host([form-type$=lesson]) .top-container .content-container ::slotted(yoo-form-ranking),
-:host([form-type$=lesson]) .top-container .content-container ::slotted(yoo-form-carousel),
-:host([form-type$=lesson]) .top-container .content-container ::slotted(yoo-form-swipe-cards) {
-  overflow: hidden auto;
-}
-:host([form-type$=lesson]) .top-container .content-container ::slotted(yoo-scratch-card) {
-  max-width: 25rem !important;
-  height: inherit !important;
 }
-:host([form-type$=lesson]) .top-container .content-container ::slotted(yoo-form-carousel),
-:host([form-type$=lesson]) .top-container .content-container ::slotted(yoo-form-videoplayer),
-:host([form-type$=lesson]) .top-container .content-container ::slotted(yoo-form-image-tagging),
-:host([form-type$=lesson]) .top-container .content-container ::slotted(yoo-form-hotzones),
-:host([form-type$=lesson]) .top-container .content-container ::slotted(yoo-text-sequence),
 :host([form-type$=lesson]) .top-container .content-container ::slotted(yoo-form-document) {
-  max-width: 35rem !important;
+  --outer-container-padding: 0;
 }
-:host([form-type$=lesson]) .top-container .content-container ::slotted(*:not(yoo-markdown):not(yoo-form-connect):not(yoo-form-swipe-cards)) {
-  max-width: 50rem;
+:host([form-type$=lesson]) .top-container .content-container ::slotted(yoo-form-connect) {
+  padding-bottom: var(--spacing-08, 0.5rem);
+}
+:host([form-type$=lesson]) .top-container .content-container ::slotted(yoo-markdown) {
+  padding-bottom: var(--spacing-16, 1rem);
 }
 :host([form-type$=lesson]) .top-container .description {
   font-size: var(--font-size-description);
@@ -1174,47 +1138,48 @@ span.fr-img-caption.fr-view {
   text-transform: var(--text-tranform-title-name);
 }
 
-:host(.web[form-type$=lesson]:not([live-preview])) {
+:host(.web[form-type$=lesson]:not([live-preview]):not(.lesson-live-preview)) {
   display: flex;
   margin: 0;
   transition: all 0.5s ease-in-out 0s;
 }
-:host(.web[form-type$=lesson]:not([live-preview])) .top-container {
+:host(.web[form-type$=lesson]:not([live-preview]):not(.lesson-live-preview)) .top-container {
   padding: 0;
-  overflow-y: auto;
 }
-:host(.web[form-type$=lesson]:not([live-preview])) .top-container .description,
-:host(.web[form-type$=lesson]:not([live-preview])) .top-container .instructions,
-:host(.web[form-type$=lesson]:not([live-preview])) .top-container .label {
+:host(.web[form-type$=lesson]:not([live-preview]):not(.lesson-live-preview)) .top-container::after {
+  border-bottom: var(--spacing-16, 1rem) solid var(--stable-ultralight, #fafafa);
+}
+:host(.web[form-type$=lesson]:not([live-preview]):not(.lesson-live-preview)) .top-container .description,
+:host(.web[form-type$=lesson]:not([live-preview]):not(.lesson-live-preview)) .top-container .instructions,
+:host(.web[form-type$=lesson]:not([live-preview]):not(.lesson-live-preview)) .top-container .label {
   text-align: center;
   background-color: unset;
 }
-:host(.web[form-type$=lesson]:not([live-preview])) .top-container .content-container {
-  height: 100%;
+:host(.web[form-type$=lesson]:not([live-preview]):not(.lesson-live-preview)) .top-container .content-container {
   padding: var(--spacing-16, 1rem);
   background-color: var(--light, #ffffff);
   border-radius: var(--border-radius-08, 0.5rem);
   box-shadow: var(--shadow-02, 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.1));
 }
-:host(.web[form-type$=lesson]:not([live-preview])) .top-container .content-container ::slotted(*) {
-  padding-bottom: 0;
+:host(.web[form-type$=lesson]:not([live-preview]):not(.lesson-live-preview)) .top-container .content-container ::slotted(yoo-markdown) {
+  overflow: hidden auto;
 }
-:host(.web[form-type$=lesson]:not([live-preview])) .top-container .content-container ::slotted(yoo-form-input) {
-  display: block;
-  margin: 0 auto;
+:host(.web[form-type$=lesson]:not([live-preview]):not(.lesson-live-preview)) .top-container .content-container ::slotted(yoo-scratch-card) {
+  max-width: 25rem !important;
+  height: inherit !important;
 }
-:host(.web[form-type$=lesson]:not([live-preview])) .top-container .content-container ::slotted(yoo-form-hotzones) {
-  height: max-content !important;
-  --inner-max-width: 75%;
+:host(.web[form-type$=lesson]:not([live-preview]):not(.lesson-live-preview)) .top-container .content-container ::slotted(yoo-form-carousel),
+:host(.web[form-type$=lesson]:not([live-preview]):not(.lesson-live-preview)) .top-container .content-container ::slotted(yoo-form-videoplayer),
+:host(.web[form-type$=lesson]:not([live-preview]):not(.lesson-live-preview)) .top-container .content-container ::slotted(yoo-text-sequence),
+:host(.web[form-type$=lesson]:not([live-preview]):not(.lesson-live-preview)) .top-container .content-container ::slotted(yoo-form-document) {
+  max-width: 35rem !important;
 }
-:host(.web[form-type$=lesson]:not([live-preview])) .top-container .content-container ::slotted(yoo-form-hotzones),
-:host(.web[form-type$=lesson]:not([live-preview])) .top-container .content-container ::slotted(yoo-video-player),
-:host(.web[form-type$=lesson]:not([live-preview])) .top-container .content-container ::slotted(yoo-markdown) {
-  overflow: hidden auto;
+:host(.web[form-type$=lesson]:not([live-preview]):not(.lesson-live-preview)) .top-container .content-container ::slotted(*:not(yoo-markdown):not(yoo-form-connect):not(yoo-form-swipe-cards)) {
+  max-width: 50rem;
 }
-:host(.web[form-type$=lesson]:not([live-preview])) .top-container .content-container ::slotted(yoo-form-swipe-cards) {
+:host(.web[form-type$=lesson]:not([live-preview]):not(.lesson-live-preview)) .top-container .content-container ::slotted(yoo-form-swipe-cards:not([readonly])) {
   width: calc(100% + var(--spacing-32, 2rem));
-  height: calc(100% + var(--spacing-32, 2rem));
+  height: calc(100% + var(--spacing-16, 1rem));
   margin-top: calc(var(--spacing-16, 1rem) * -1);
   margin-left: calc(var(--spacing-16, 1rem) * -1);
 }
@@ -1387,18 +1352,15 @@ span.fr-img-caption.fr-view {
   padding: 0 !important;
 }
 
-:host(.web[form-type$=lesson][field-type=image]) .content-container {
-  overflow: visible !important;
-}
-:host(.web[form-type$=lesson][field-type=image]) .content-container ::slotted(yoo-form-carousel:not([hidden])) {
-  --card-feed-media-height: 100%;
-}
-
 :host([field-type=hotzonecreator]) .label,
 :host([field-type=imagemapcreator]) .label {
   display: none;
 }
 
+:host(.web[field-type=imagetagging]) .content-container {
+  overflow: inherit !important;
+}
+
 :host([field-type=swipecards]) .content-container {
   overflow: hidden !important;
 }

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

@@ -206,27 +206,6 @@ export class YooFormInputContainerComponent {
       forceUpdate(this);
     }
   }
-  animateNumber() {
-    if (this.host.offsetWidth !== 0) {
-      this.host.style.setProperty('--container-width', this.host.offsetWidth + 'px');
-      this.host.style.setProperty('--container-width-reverse', '-' + this.host.offsetWidth + 'px');
-      if (this.descriptionElement)
-        this.descriptionElement.style.animationName = 'sliding-from-left';
-      else if (this.labelElement)
-        this.labelElement.style.animationName = 'sliding-from-left';
-      this.instructionElement.style.animationName = 'sliding-from-left';
-      this.contentContainerElement.style.animationName = 'sliding-from-right';
-    }
-  }
-  animateSelectImage() {
-    if (this.host.offsetWidth !== 0) {
-      this.host.style.setProperty('--container-width-reverse', '-' + this.host.offsetWidth + 'px');
-      if (this.descriptionElement)
-        this.descriptionElement.style.animationName = 'sliding-from-left';
-      else if (this.labelElement)
-        this.labelElement.style.animationName = 'sliding-from-left';
-    }
-  }
   onRTEContentClick(ev) {
     var _a;
     openImageDetailFromRTE(this.host, this.descriptionElement, (_a = ev === null || ev === void 0 ? void 0 : ev.target) === null || _a === void 0 ? void 0 : _a.src);
@@ -279,7 +258,7 @@ export class YooFormInputContainerComponent {
   renderLabel() {
     var _a, _b, _c;
     const contentClass = ((_a = this.field) === null || _a === void 0 ? void 0 : _a.title) ? 'field-title-name ' : '';
-    return (h("label", { ref: (el) => (this.labelElement = el), class: {
+    return (h("label", { class: {
         label: true,
         center: (_c = (_b = this.field) === null || _b === void 0 ? void 0 : _b.extraClass) === null || _c === void 0 ? void 0 : _c.includes('center'),
         readonly: this.readonly,
@@ -296,14 +275,14 @@ export class YooFormInputContainerComponent {
         instructions: true,
         success: this.host.classList.contains('success') && this.fieldType === FormFieldType.plan,
         'app-color': this.host.classList.contains('app-color') && this.fieldType === FormFieldType.plan
-      }, onClick: () => this.headerClicked.emit(), ref: (el) => (this.instructionElement = el) }, this.getFieldDefaultInstructions()));
+      }, onClick: () => this.headerClicked.emit() }, this.getFieldDefaultInstructions()));
   }
   renderTopText() {
     return [this.showLabel && this.renderLabel(), this.showDescription && this.renderDescription(), this.shouldShowDefaultInstructions && this.renderDefaultInstructions()];
   }
   renderInnerContent() {
     var _a, _b;
-    return (h("div", { ref: (el) => (this.contentContainerElement = el), class: {
+    return (h("div", { class: {
         'content-container': true,
         readonly: this.readonly,
         'full-width': this.isCheckboxOrToggle(this.fieldType),
@@ -421,7 +400,7 @@ export class YooFormInputContainerComponent {
       "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",