@yoobic/yobi 8.5.29 → 8.5.31

package/dist/cjs/yoo-form-dynamic.cjs.entry.js

@@ -4397,7 +4397,7 @@ const YooFormDynamicComponent = class {
           'lesson-live-preview': this.isLessonPreview() || this.isCoursePreview(),
           [field.type]: true
         };
-        return (markdown && index$2.h("yoo-markdown", { class: cssClass, isVisible: this.isCurrentSlide(slideIndex), style: { color: `${color}` }, linkPreviews: field.linkPreviews, content: index$1.translateMulti(index$1.pipes.https.transform(markdown)) }));
+        return (markdown && index$2.h("yoo-markdown", { class: cssClass, isVisible: this.isCurrentSlide(slideIndex), style: { color: `${color}`, ...(field.style || {}) }, linkPreviews: field.linkPreviews, content: index$1.translateMulti(index$1.pipes.https.transform(markdown)) }));
       }
       case index.FormFieldType.renderer:
         return field.handler && index$2.h("div", { innerHTML: field.handler(this.currentData, field, this.injector) });
@@ -4447,7 +4447,7 @@ const YooFormDynamicComponent = class {
         };
         break;
       case index.FormFieldType.imagetagging:
-        field.answer = (_x = field.annotations) === null || _x === void 0 ? void 0 : _x.map(({ text }) => text);
+        field.answer = (_x = field.annotations) === null || _x === void 0 ? void 0 : _x.map(({ text }) => index$1.extractTextFromStringHTML(text).trim());
         TagType = 'yoo-form-image-tagging';
         extraAttrs = {
           ...extraAttrs,

package/dist/cjs/yoo-form-image-tagging-creator.cjs.entry.js

@@ -137,7 +137,7 @@ const YooFormImageTaggingCreatorComponent = class {
     };
     const onTooltipSaved = (ev, dot) => {
       draggableDotsHelpers.saveTooltipContent(ev, dot).then(() => {
-        this.emitValues(dot._id, ev.detail.value);
+        this.emitValues(dot._id, index$1.extractTextFromStringHTML(ev.detail.value).trim());
         draggableDotsHelpers.reorderDotIndexes(this.annotations, this.imageContainerElement);
       });
     };

package/dist/cjs/yoo-form-image-tagging.cjs.entry.js

@@ -86,8 +86,7 @@ const YooFormImageTaggingComponent = class {
     };
     const onReleaseTag = () => {
       showImageOverlay(false);
-      this.value = this.droppedValues;
-      formInputHelpers.setValueAndValidateInput(this.value, this);
+      formInputHelpers.setValueAndValidateInput(this.droppedValues.map(v => index$1.extractTextFromStringHTML(v)), this);
     };
     return {
       clickToDrop: true,

package/dist/cjs/yoo-form-qrcode.cjs.entry.js

@@ -11,7 +11,7 @@ require('./index-ec5dad3e.js');
 require('./common-helpers-a637ad85.js');
 require('./_commonjsHelpers-94df2ea7.js');
 
-const formQrcodeCss = "svg:not(:root){overflow:hidden}:host .outer-container .inner-container{margin:var(--spacing-08, 0.5rem) 0}:host .outer-container.readonly yoo-img{width:50%;margin:auto}:host .outer-container.readonly p.description{margin-bottom:var(--spacing-24, 1.5rem);font-size:var(--font-size-14, 0.875rem)}:host .outer-container.readonly .inner-container{-ms-flex-align:center;align-items:center;margin-top:var(--spacing-08, 0.5rem);padding:var(--spacing-08, 0.5rem);background:var(--stable-light, #f1f1f1);border-radius:var(--border-radius-08, 0.5rem)}:host .outer-container.readonly .inner-container .header-container{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host .outer-container.readonly .inner-container .header-container span{width:100%;font-weight:var(--font-weight-700, 700)}:host .outer-container.readonly .inner-container .header-container yoo-button{width:100%}:host .outer-container.readonly .inner-container .canvas-container{width:6.25rem;height:6.25rem;margin-top:var(--spacing-16, 1rem);padding:var(--spacing-16, 1rem);background-color:var(--light, #ffffff);border-radius:var(--border-radius-16, 1rem)}:host([size=large]) .outer-container.readonly .inner-container{margin-top:var(--spacing-16, 1rem);padding:var(--spacing-16, 1rem);border-radius:var(--border-radius-08, 0.5rem)}:host([size=large]) .outer-container.readonly .inner-container .canvas-container{width:12.5rem;height:12.5rem}";
+const formQrcodeCss = "svg:not(:root){overflow:hidden}:host .outer-container .inner-container{margin:var(--spacing-08, 0.5rem) 0}:host .outer-container.readonly yoo-img{width:50%;margin:auto}:host .outer-container.readonly .inner-container{-ms-flex-align:center;align-items:center;margin-top:var(--spacing-08, 0.5rem);padding:var(--spacing-08, 0.5rem);background:var(--stable-light, #f1f1f1);border-radius:var(--border-radius-08, 0.5rem)}:host .outer-container.readonly .inner-container .header-container{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host .outer-container.readonly .inner-container .header-container span{width:100%;font-weight:var(--font-weight-700, 700)}:host .outer-container.readonly .inner-container .header-container yoo-button{width:100%}:host .outer-container.readonly .inner-container .canvas-container{width:6.25rem;height:6.25rem;margin-top:var(--spacing-16, 1rem);padding:var(--spacing-16, 1rem);background-color:var(--light, #ffffff);border-radius:var(--border-radius-16, 1rem)}:host([size=large]) .outer-container.readonly .inner-container{margin-top:var(--spacing-16, 1rem);padding:var(--spacing-16, 1rem);border-radius:var(--border-radius-08, 0.5rem)}:host([size=large]) .outer-container.readonly .inner-container .canvas-container{width:12.5rem;height:12.5rem}";
 
 const YooFormQrcodeComponent = class {
   constructor(hostRef) {
@@ -26,9 +26,11 @@ const YooFormQrcodeComponent = class {
     this.validate();
   }
   onValueChanged() {
+    this.sanitizeValue();
     this.generateQRCode();
   }
   componentWillLoad() {
+    this.sanitizeValue();
     formInputHelpers.setValidator(this);
   }
   componentDidLoad() {
@@ -45,10 +47,11 @@ const YooFormQrcodeComponent = class {
     }
     return this.validity;
   }
+  sanitizeValue() {
+    this.value = index$1.extractTextFromStringHTML(this.value);
+  }
   generateQRCode() {
-    if (this.canvasEl) {
-      return index$1.generateYoobicQRCode(this.value, this.canvasEl, this.size, this.logo, this.whiteLabel);
-    }
+    this.value && index$1.generateYoobicQRCode(this.value, this.canvasEl, this.size, this.logo, this.whiteLabel);
   }
   onDownloadQRCode() {
     index$1.downloadFile(this.canvasEl.toDataURL('image/jpeg'), index$1.translate('QRCODE'));
@@ -70,7 +73,7 @@ const YooFormQrcodeComponent = class {
     return (index.h("div", { class: "inner-container" }, this.showDownload && this.renderDownload(), index.h("div", { class: "canvas-container" }, index.h("canvas", { class: "canvas", ref: (el) => (this.canvasEl = el) }))));
   }
   render() {
-    return this.value && (index.h("div", { class: { 'outer-container': true, readonly: this.readonly } }, this.showIllustration && this.renderIllustration(), !!this.description && index.h("p", { class: "description" }, this.description), this.showShareLink && this.renderShareLink(), this.renderQRCode()));
+    return (index.h("div", { class: { 'outer-container': true, readonly: this.readonly }, hidden: !this.value }, this.showIllustration && this.renderIllustration(), this.showShareLink && this.renderShareLink(), this.renderQRCode()));
   }
   static get assetsDirs() { return ["assets/form-qrcode"]; }
   static get watchers() { return {

package/dist/cjs/yoo-photo-editor.cjs.entry.js

@@ -1163,7 +1163,7 @@ const YooPhotoEditorComponent = class {
     });
   }
   optionsClick(ev, content) {
-    var _a, _b;
+    var _a, _b, _c;
     if (ev === null || ev === void 0 ? void 0 : ev.target) {
       ev.stopPropagation();
       const clickedElement = ev.target;
@@ -1176,18 +1176,18 @@ const YooPhotoEditorComponent = class {
         if (extraAction.icon === 'photo-annotated') {
           this.isReadonly = false;
         }
+        else if ((extraAction === null || extraAction === void 0 ? void 0 : extraAction['subActions']) || (extraAction === null || extraAction === void 0 ? void 0 : extraAction['subMenu'])) {
+          const actions = (extraAction === null || extraAction === void 0 ? void 0 : extraAction['subActions']) || (extraAction === null || extraAction === void 0 ? void 0 : extraAction['subMenu']);
+          index$1.isWeb(this.host) ?
+            index$1.showContextMenu(ev, {
+              hostElement: ev === null || ev === void 0 ? void 0 : ev.target,
+              contentButtons: actions
+            }) : index$1.showActionSheet(actions, null, {}, null, ev);
+        }
         else {
-          extraAction.handler(ev);
+          (_c = extraAction === null || extraAction === void 0 ? void 0 : extraAction.handler) === null || _c === void 0 ? void 0 : _c.call(extraAction, ev);
         }
       }
-      if (extraAction === null || extraAction === void 0 ? void 0 : extraAction['subActions']) {
-        const actions = extraAction['subActions'];
-        index$1.isWeb(this.host) ?
-          index$1.showContextMenu(ev, {
-            hostElement: ev === null || ev === void 0 ? void 0 : ev.target,
-            contentButtons: actions
-          }) : index$1.showActionSheet(actions, null, {}, null, ev);
-      }
       switch (actionName) {
         // Main Actions
         case draggableDotsHelpers.EEditorActions.typeTool:

package/dist/cjs/yoo-slides-media.cjs.entry.js

@@ -473,13 +473,12 @@ const YooSlidesMediaComponent = class {
     return index.h("yoo-videoplayer-core", { class: "video", onClick: () => this.onItemClicked(), ref: (el) => (this.videoPlayerElement = el), ...attrs });
   }
   renderPhotoEditor(item, index$2) {
-    var _a, _b, _c, _d, _e;
-    const extraActions = (_a = this.secondaryActions) === null || _a === void 0 ? void 0 : _a.filter((item) => { var _a; return ((_a = item === null || item === void 0 ? void 0 : item.isVisible) === null || _a === void 0 ? void 0 : _a.call(item, index$2)) || true; });
+    var _a, _b, _c, _d, _e, _f;
     return (index.h("yoo-photo-editor", { id: `${index$2}`, class: {
         current: index$2 === this.currentIndex,
         light: this.isLight,
         [item === null || item === void 0 ? void 0 : item.extraClass]: !!(item === null || item === void 0 ? void 0 : item.extraClass)
-      }, editable: this.canAnnotate, zoomable: true, ref: (el) => this.photoEditorElements[index$2] = el, onZoomClicked: () => this.onItemClicked(), isReadonly: true, src: this.getPhotoSrc(item), animated: item.animated, display: item.display, cloudinaryOptions: item.cloudinaryOptions, submitView: item.submitView, extraActions: !this.displayType && extraActions, drawings: (_d = (_c = (item.drawings || ((_b = item.photoEditorParams) === null || _b === void 0 ? void 0 : _b.drawings) || '')) !== null && _c !== void 0 ? _c : item.edit) !== null && _d !== void 0 ? _d : item.svgData, annotations: item.annotations || ((_e = item.photoEditorParams) === null || _e === void 0 ? void 0 : _e.annotations) || item.texts, submitButton: this.submitPhotoEditorButton, onImageZoomed: (ev) => this.hideContainer = ev === null || ev === void 0 ? void 0 : ev.detail, onImageClicked: () => !index$1.isWeb(this.host) && this.showPhotoDetailView(), onSaveChanges: (ev) => {
+      }, editable: this.canAnnotate, zoomable: true, ref: (el) => this.photoEditorElements[index$2] = el, onZoomClicked: () => this.onItemClicked(), isReadonly: true, src: this.getPhotoSrc(item), animated: item.animated, display: item.display, cloudinaryOptions: item.cloudinaryOptions, submitView: item.submitView, extraActions: !this.displayType && ((_b = (_a = (this.secondaryActions)) === null || _a === void 0 ? void 0 : _a.map((a) => lodash.isFunction(a === null || a === void 0 ? void 0 : a.icon) ? index$1.toButton(a, item) : a)) === null || _b === void 0 ? void 0 : _b.filter(a => a.isVisible())), drawings: (_e = (_d = (item.drawings || ((_c = item.photoEditorParams) === null || _c === void 0 ? void 0 : _c.drawings) || '')) !== null && _d !== void 0 ? _d : item.edit) !== null && _e !== void 0 ? _e : item.svgData, annotations: item.annotations || ((_f = item.photoEditorParams) === null || _f === void 0 ? void 0 : _f.annotations) || item.texts, submitButton: this.submitPhotoEditorButton, onImageZoomed: (ev) => this.hideContainer = ev === null || ev === void 0 ? void 0 : ev.detail, onImageClicked: () => !index$1.isWeb(this.host) && this.showPhotoDetailView(), onSaveChanges: (ev) => {
         if (ev === null || ev === void 0 ? void 0 : ev.detail) {
           const { drawings, annotations } = ev.detail;
           this.items[index$2] = { ...this.items[index$2], drawings, annotations };

package/dist/cjs/yoo-tooltip.cjs.entry.js

@@ -84,7 +84,7 @@ const YooTooltipComponent = class {
       if (!(state === null || state === void 0 ? void 0 : state.isDestroyed)) {
         hide();
       }
-      this.saveTooltip.emit({ value: (_a = this.contentEditableElement) === null || _a === void 0 ? void 0 : _a.innerHTML, refTooltip: reference });
+      this.saveTooltip.emit({ value: (_a = this.contentEditableElement) === null || _a === void 0 ? void 0 : _a.innerText, refTooltip: reference });
     }
   }
   async toggleHoverable(isEnable = !this.hoverable) {

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

@@ -74,7 +74,7 @@ export class YooTooltipComponent {
       if (!(state === null || state === void 0 ? void 0 : state.isDestroyed)) {
         hide();
       }
-      this.saveTooltip.emit({ value: (_a = this.contentEditableElement) === null || _a === void 0 ? void 0 : _a.innerHTML, refTooltip: reference });
+      this.saveTooltip.emit({ value: (_a = this.contentEditableElement) === null || _a === void 0 ? void 0 : _a.innerText, refTooltip: reference });
     }
   }
   async toggleHoverable(isEnable = !this.hoverable) {

package/dist/collection/components/3.organisms/photo-editor/photo-editor.js

@@ -978,7 +978,7 @@ export class YooPhotoEditorComponent {
     });
   }
   optionsClick(ev, content) {
-    var _a, _b;
+    var _a, _b, _c;
     if (ev === null || ev === void 0 ? void 0 : ev.target) {
       ev.stopPropagation();
       const clickedElement = ev.target;
@@ -991,18 +991,18 @@ export class YooPhotoEditorComponent {
         if (extraAction.icon === 'photo-annotated') {
           this.isReadonly = false;
         }
+        else if ((extraAction === null || extraAction === void 0 ? void 0 : extraAction['subActions']) || (extraAction === null || extraAction === void 0 ? void 0 : extraAction['subMenu'])) {
+          const actions = (extraAction === null || extraAction === void 0 ? void 0 : extraAction['subActions']) || (extraAction === null || extraAction === void 0 ? void 0 : extraAction['subMenu']);
+          isWeb(this.host) ?
+            showContextMenu(ev, {
+              hostElement: ev === null || ev === void 0 ? void 0 : ev.target,
+              contentButtons: actions
+            }) : showActionSheet(actions, null, {}, null, ev);
+        }
         else {
-          extraAction.handler(ev);
+          (_c = extraAction === null || extraAction === void 0 ? void 0 : extraAction.handler) === null || _c === void 0 ? void 0 : _c.call(extraAction, ev);
         }
       }
-      if (extraAction === null || extraAction === void 0 ? void 0 : extraAction['subActions']) {
-        const actions = extraAction['subActions'];
-        isWeb(this.host) ?
-          showContextMenu(ev, {
-            hostElement: ev === null || ev === void 0 ? void 0 : ev.target,
-            contentButtons: actions
-          }) : showActionSheet(actions, null, {}, null, ev);
-      }
       switch (actionName) {
         // Main Actions
         case EEditorActions.typeTool:

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

@@ -1,5 +1,5 @@
 import { FormFieldType, IncentivePartType, QUIZZ_COMPONENTS_FORM_FIELDS } from '@shared/interfaces';
-import { answerIsValid, cancelRequestInterval, closeModal, debounce, disableKeyboardResize, dispatchCustomEvent, enableKeyboardResize, evalInContext, findField, findParent, getConfidenceDescriptionKey, getConfidenceEmoji, getCssColor, getDistance, getFieldReplacement, getFieldValue, getModalAnimation, getSession, hasValue, isAndroid, isAnimationsDisabled, isChromeForIos, isConfidenceAssessment, isContentOnly, isFieldWithDirectValue, isFieldWithNoValue, isIonic, isIOS, isIphoneX, isKeyboardResizeModeInactive, isNativeMobile, isNullOrUndefined, isPhotoOrMultiPhotosField, isPresent, isQuiz, isSafari, isSamsung, isTimedQuiz, isValueATranslationKey, isVisible, isWeb, pipes, requestInterval, sanitizeInputValue, showContextMenu, showModal, showToast, slenderizeObject, translate, translateMulti, updateDatasetFilters } from '@shared/utils';
+import { answerIsValid, cancelRequestInterval, closeModal, debounce, disableKeyboardResize, dispatchCustomEvent, enableKeyboardResize, evalInContext, extractTextFromStringHTML, findField, findParent, getConfidenceDescriptionKey, getConfidenceEmoji, getCssColor, getDistance, getFieldReplacement, getFieldValue, getModalAnimation, getSession, hasValue, isAndroid, isAnimationsDisabled, isChromeForIos, isConfidenceAssessment, isContentOnly, isFieldWithDirectValue, isFieldWithNoValue, isIonic, isIOS, isIphoneX, isKeyboardResizeModeInactive, isNativeMobile, isNullOrUndefined, isPhotoOrMultiPhotosField, isPresent, isQuiz, isSafari, isSamsung, isTimedQuiz, isValueATranslationKey, isVisible, isWeb, pipes, requestInterval, sanitizeInputValue, showContextMenu, showModal, showToast, slenderizeObject, translate, translateMulti, updateDatasetFilters } from '@shared/utils';
 import { forceUpdate, h, Host } from '@stencil/core';
 import { assign, cloneDeep, compact, findLastIndex, flatten, get, groupBy, isArray, isEmpty, isEqual, isFunction, isNumber, isObject, isString, keys, orderBy, pick, range, result, uniqBy } from 'lodash-es';
 import { getMissionStatusIconName } from '../../../feature-operate/campaign/helpers/operation-helpers';
@@ -4197,7 +4197,7 @@ export class YooFormDynamicComponent {
           'lesson-live-preview': this.isLessonPreview() || this.isCoursePreview(),
           [field.type]: true
         };
-        return (markdown && h("yoo-markdown", { class: cssClass, isVisible: this.isCurrentSlide(slideIndex), style: { color: `${color}` }, linkPreviews: field.linkPreviews, content: translateMulti(pipes.https.transform(markdown)) }));
+        return (markdown && h("yoo-markdown", { class: cssClass, isVisible: this.isCurrentSlide(slideIndex), style: { color: `${color}`, ...(field.style || {}) }, linkPreviews: field.linkPreviews, content: translateMulti(pipes.https.transform(markdown)) }));
       }
       case FormFieldType.renderer:
         return field.handler && h("div", { innerHTML: field.handler(this.currentData, field, this.injector) });
@@ -4247,7 +4247,7 @@ export class YooFormDynamicComponent {
         };
         break;
       case FormFieldType.imagetagging:
-        field.answer = (_x = field.annotations) === null || _x === void 0 ? void 0 : _x.map(({ text }) => text);
+        field.answer = (_x = field.annotations) === null || _x === void 0 ? void 0 : _x.map(({ text }) => extractTextFromStringHTML(text).trim());
         TagType = 'yoo-form-image-tagging';
         extraAttrs = {
           ...extraAttrs,

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

@@ -1,4 +1,4 @@
-import { getMedia, translate, translateMulti } from '@shared/utils';
+import { extractTextFromStringHTML, getMedia, translate, translateMulti } from '@shared/utils';
 import { forceUpdate, h, Host } from '@stencil/core';
 import { isEqual } from 'lodash-es';
 import { getFromOfflineStorage } from '../../../utils/cache';
@@ -71,8 +71,7 @@ export class YooFormImageTaggingComponent {
     };
     const onReleaseTag = () => {
       showImageOverlay(false);
-      this.value = this.droppedValues;
-      setValueAndValidateInput(this.value, this);
+      setValueAndValidateInput(this.droppedValues.map(v => extractTextFromStringHTML(v)), this);
     };
     return {
       clickToDrop: true,

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

@@ -1,4 +1,4 @@
-import { Draggable, getUUID, gsapSet, gsapTo, isTranslationKey, translate } from '@shared/utils';
+import { Draggable, extractTextFromStringHTML, getUUID, gsapSet, gsapTo, isTranslationKey, translate } from '@shared/utils';
 import { forceUpdate, h, Host } from '@stencil/core';
 import { getAnnotationPositionStyle, getElement, isAnnotationValid } from '../../../utils/helpers/annotations-helpers';
 import { getAppContext } from '../../../utils/helpers/common-helpers';
@@ -123,7 +123,7 @@ export class YooFormImageTaggingCreatorComponent {
     };
     const onTooltipSaved = (ev, dot) => {
       saveTooltipContent(ev, dot).then(() => {
-        this.emitValues(dot._id, ev.detail.value);
+        this.emitValues(dot._id, extractTextFromStringHTML(ev.detail.value).trim());
         reorderDotIndexes(this.annotations, this.imageContainerElement);
       });
     };

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

@@ -212,10 +212,6 @@ svg:not(:root) {
   width: 50%;
   margin: auto;
 }
-:host .outer-container.readonly p.description {
-  margin-bottom: var(--spacing-24, 1.5rem);
-  font-size: var(--font-size-14, 0.875rem);
-}
 :host .outer-container.readonly .inner-container {
   align-items: center;
   margin-top: var(--spacing-08, 0.5rem);

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

@@ -1,4 +1,4 @@
-import { copyToClipboard, downloadFile, generateYoobicQRCode, translate, updateSVGCustomColors } from '@shared/utils';
+import { copyToClipboard, downloadFile, extractTextFromStringHTML, generateYoobicQRCode, translate, updateSVGCustomColors } from '@shared/utils';
 import { getAssetPath, h } from '@stencil/core';
 import { setValidator } from '../../../utils/helpers/form-input-helpers';
 export class YooFormQrcodeComponent {
@@ -9,9 +9,11 @@ export class YooFormQrcodeComponent {
     this.validate();
   }
   onValueChanged() {
+    this.sanitizeValue();
     this.generateQRCode();
   }
   componentWillLoad() {
+    this.sanitizeValue();
     setValidator(this);
   }
   componentDidLoad() {
@@ -28,10 +30,11 @@ export class YooFormQrcodeComponent {
     }
     return this.validity;
   }
+  sanitizeValue() {
+    this.value = extractTextFromStringHTML(this.value);
+  }
   generateQRCode() {
-    if (this.canvasEl) {
-      return generateYoobicQRCode(this.value, this.canvasEl, this.size, this.logo, this.whiteLabel);
-    }
+    this.value && generateYoobicQRCode(this.value, this.canvasEl, this.size, this.logo, this.whiteLabel);
   }
   onDownloadQRCode() {
     downloadFile(this.canvasEl.toDataURL('image/jpeg'), translate('QRCODE'));
@@ -53,7 +56,7 @@ export class YooFormQrcodeComponent {
     return (h("div", { class: "inner-container" }, this.showDownload && this.renderDownload(), h("div", { class: "canvas-container" }, h("canvas", { class: "canvas", ref: (el) => (this.canvasEl = el) }))));
   }
   render() {
-    return this.value && (h("div", { class: { 'outer-container': true, readonly: this.readonly } }, this.showIllustration && this.renderIllustration(), !!this.description && h("p", { class: "description" }, this.description), this.showShareLink && this.renderShareLink(), this.renderQRCode()));
+    return (h("div", { class: { 'outer-container': true, readonly: this.readonly }, hidden: !this.value }, this.showIllustration && this.renderIllustration(), this.showShareLink && this.renderShareLink(), this.renderQRCode()));
   }
   static get is() { return "yoo-form-qrcode"; }
   static get encapsulation() { return "shadow"; }
@@ -121,23 +124,6 @@ export class YooFormQrcodeComponent {
           "text": ""
         }
       },
-      "placeholder": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "placeholder",
-        "reflect": false
-      },
       "readonly": {
         "type": "boolean",
         "mutable": false,
@@ -155,23 +141,6 @@ export class YooFormQrcodeComponent {
         "attribute": "readonly",
         "reflect": false
       },
-      "type": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "type",
-        "reflect": false
-      },
       "whiteLabel": {
         "type": "boolean",
         "mutable": false,
@@ -223,23 +192,6 @@ export class YooFormQrcodeComponent {
         "attribute": "show-illustration",
         "reflect": false
       },
-      "description": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Description displayed on top of Share Link button and QR Code"
-        },
-        "attribute": "description",
-        "reflect": false
-      },
       "showShareLink": {
         "type": "boolean",
         "mutable": false,
@@ -298,7 +250,7 @@ export class YooFormQrcodeComponent {
       },
       "value": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "string",
           "resolved": "string",

package/dist/collection/components/form/slides-media/slides-media.js

@@ -1,7 +1,7 @@
 import { ScreenOrientation } from '@awesome-cordova-plugins/screen-orientation';
-import { capitalizeFirstLetter, closeModal, findParent, getAsyncExtraData, gsapTimeline, gsapTo, isAndroid, isImage, isImageUrl, isIphoneX, isNativeMobile, isPhotoEdited, isVideo, isWeb, pipes, showModal, showToast, translate, translateMulti } from '@shared/utils';
+import { capitalizeFirstLetter, closeModal, findParent, getAsyncExtraData, gsapTimeline, gsapTo, isAndroid, isImage, isImageUrl, isIphoneX, isNativeMobile, isPhotoEdited, isVideo, isWeb, pipes, showModal, showToast, toButton, translate, translateMulti } from '@shared/utils';
 import { forceUpdate, h, Host } from '@stencil/core';
-import { isArray } from 'lodash-es';
+import { isArray, isFunction } from 'lodash-es';
 import { lockSwipes } from '../../../utils/helpers/common-helpers';
 import { parseEntityForCardMedia } from '../../../utils/helpers/entities-helpers';
 import { fuzzySearch } from '../../../utils/helpers/form-text-area-helpers';
@@ -454,13 +454,12 @@ export class YooSlidesMediaComponent {
     return h("yoo-videoplayer-core", { class: "video", onClick: () => this.onItemClicked(), ref: (el) => (this.videoPlayerElement = el), ...attrs });
   }
   renderPhotoEditor(item, index) {
-    var _a, _b, _c, _d, _e;
-    const extraActions = (_a = this.secondaryActions) === null || _a === void 0 ? void 0 : _a.filter((item) => { var _a; return ((_a = item === null || item === void 0 ? void 0 : item.isVisible) === null || _a === void 0 ? void 0 : _a.call(item, index)) || true; });
+    var _a, _b, _c, _d, _e, _f;
     return (h("yoo-photo-editor", { id: `${index}`, class: {
         current: index === this.currentIndex,
         light: this.isLight,
         [item === null || item === void 0 ? void 0 : item.extraClass]: !!(item === null || item === void 0 ? void 0 : item.extraClass)
-      }, editable: this.canAnnotate, zoomable: true, ref: (el) => this.photoEditorElements[index] = el, onZoomClicked: () => this.onItemClicked(), isReadonly: true, src: this.getPhotoSrc(item), animated: item.animated, display: item.display, cloudinaryOptions: item.cloudinaryOptions, submitView: item.submitView, extraActions: !this.displayType && extraActions, drawings: (_d = (_c = (item.drawings || ((_b = item.photoEditorParams) === null || _b === void 0 ? void 0 : _b.drawings) || '')) !== null && _c !== void 0 ? _c : item.edit) !== null && _d !== void 0 ? _d : item.svgData, annotations: item.annotations || ((_e = item.photoEditorParams) === null || _e === void 0 ? void 0 : _e.annotations) || item.texts, submitButton: this.submitPhotoEditorButton, onImageZoomed: (ev) => this.hideContainer = ev === null || ev === void 0 ? void 0 : ev.detail, onImageClicked: () => !isWeb(this.host) && this.showPhotoDetailView(), onSaveChanges: (ev) => {
+      }, editable: this.canAnnotate, zoomable: true, ref: (el) => this.photoEditorElements[index] = el, onZoomClicked: () => this.onItemClicked(), isReadonly: true, src: this.getPhotoSrc(item), animated: item.animated, display: item.display, cloudinaryOptions: item.cloudinaryOptions, submitView: item.submitView, extraActions: !this.displayType && ((_b = (_a = (this.secondaryActions)) === null || _a === void 0 ? void 0 : _a.map((a) => isFunction(a === null || a === void 0 ? void 0 : a.icon) ? toButton(a, item) : a)) === null || _b === void 0 ? void 0 : _b.filter(a => a.isVisible())), drawings: (_e = (_d = (item.drawings || ((_c = item.photoEditorParams) === null || _c === void 0 ? void 0 : _c.drawings) || '')) !== null && _d !== void 0 ? _d : item.edit) !== null && _e !== void 0 ? _e : item.svgData, annotations: item.annotations || ((_f = item.photoEditorParams) === null || _f === void 0 ? void 0 : _f.annotations) || item.texts, submitButton: this.submitPhotoEditorButton, onImageZoomed: (ev) => this.hideContainer = ev === null || ev === void 0 ? void 0 : ev.detail, onImageClicked: () => !isWeb(this.host) && this.showPhotoDetailView(), onSaveChanges: (ev) => {
         if (ev === null || ev === void 0 ? void 0 : ev.detail) {
           const { drawings, annotations } = ev.detail;
           this.items[index] = { ...this.items[index], drawings, annotations };

package/dist/design-system/{button.factory-e2e53dca.js → button.factory-bb5cd95d.js}

@@ -1,4 +1,4 @@
-import { a3 as translateMulti } from './index-0eb79e4c.js';
+import { a3 as translateMulti } from './index-73ceb752.js';
 import { h } from './index-a6a92b3d.js';
 
 const getButton = (button) => {

package/dist/design-system/{camera-helpers-6163ae70.js → camera-helpers-21871c9e.js}

@@ -1,5 +1,5 @@
-import { cw as cordova, cx as AwesomeCordovaNativePlugin, cy as cordovaPropertyGet, cz as cordovaPropertySet, cA as registerPlugin, a8 as getSession, cB as isIonic, o as isNativeMobile, cC as Device, p as isAndroid, N as isIOS, cD as getMediaDevices, G as showModal, F as getModalAnimation, H as isWeb } from './index-0eb79e4c.js';
-import './index-a9b67724.js';
+import { cx as cordova, cy as AwesomeCordovaNativePlugin, cz as cordovaPropertyGet, cA as cordovaPropertySet, cB as registerPlugin, a8 as getSession, cC as isIonic, o as isNativeMobile, cD as Device, p as isAndroid, N as isIOS, cE as getMediaDevices, G as showModal, F as getModalAnimation, H as isWeb } from './index-73ceb752.js';
+import './index-1b41388b.js';
 
 var __extends$2 = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -249,7 +249,7 @@ var CameraResultType;
 })(CameraResultType || (CameraResultType = {}));
 
 const Camera = registerPlugin('Camera', {
-    web: () => import('./web-040d24c0.js').then(m => new m.CameraWeb()),
+    web: () => import('./web-4984e700.js').then(m => new m.CameraWeb()),
 });
 
 var MediaPictureOptions;

package/dist/{esm/chat-helpers-b25a352a.js → design-system/chat-helpers-f7921178.js}

@@ -1,6 +1,6 @@
-import './index-a9b67724.js';
+import './index-1b41388b.js';
 import { i as isArray } from './lodash-24d266e4.js';
-import { aq as is24Hour, ar as isFile, as as replaceAtTagToMentionTag, at as replaceAllLinks, a3 as translateMulti } from './index-0eb79e4c.js';
+import { aq as is24Hour, ar as isFile, as as replaceAtTagToMentionTag, at as replaceAllLinks, a3 as translateMulti } from './index-73ceb752.js';
 
 /**
  * Get the proper data format for a single message aswell as grouped messages

package/dist/{esm/common-helpers-0ab09760.js → design-system/common-helpers-151ea84e.js}

@@ -1,5 +1,5 @@
-import { F as getModalAnimation, t as translate, G as showModal, H as isWeb, I as debounce, J as querySelectorDeep$1, o as isNativeMobile, S as ScreenOrientation, K as findDevice, L as isRTL, M as isIphoneX, q as isIpadPro, s as isTablet, n as isFullScreenFalse, N as isIOS, p as isAndroid, O as setAnimation, P as animations, Q as getCssColor, Y as YOOBICON_ENTITIES_MAP, R as startOf, T as isDateBefore, U as dateDiffInCalendarDays, V as isDateAfter, W as getAsyncExtraData, X as findParent, Z as isNativeFilePath, $ as cleanupWKWebViewFilePath, a0 as Cloudinary, a1 as getProtocol, a2 as CloudinaryGradientLayer } from './index-0eb79e4c.js';
-import './index-a9b67724.js';
+import { F as getModalAnimation, t as translate, G as showModal, H as isWeb, I as debounce, J as querySelectorDeep$1, o as isNativeMobile, S as ScreenOrientation, K as findDevice, L as isRTL, M as isIphoneX, q as isIpadPro, s as isTablet, n as isFullScreenFalse, N as isIOS, p as isAndroid, O as setAnimation, P as animations, Q as getCssColor, Y as YOOBICON_ENTITIES_MAP, R as startOf, T as isDateBefore, U as dateDiffInCalendarDays, V as isDateAfter, W as getAsyncExtraData, X as findParent, Z as isNativeFilePath, $ as cleanupWKWebViewFilePath, a0 as Cloudinary, a1 as getProtocol, a2 as CloudinaryGradientLayer } from './index-73ceb752.js';
+import './index-1b41388b.js';
 import { C as get } from './lodash-24d266e4.js';
 
 function getDefaultModalAnimation(host) {