@yoobic/yobi 8.3.1-9 → 8.3.1

package/dist/collection/components/2.molecules/modal-controller/modal-controller.js

@@ -30,7 +30,8 @@ export class YooIonModalControllerComponent {
     }
   }
   modalWillDismiss(ev) {
-    this.modals.delete(ev.target.overlayId);
+    var _a, _b;
+    this.modals.delete(ev.target.nodeName === 'YOO-ION-MODAL' ? ev.target.overlayId : (_b = (_a = ev.composedPath()) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.overlayId);
     this.topOverlayID = Math.max(...this.modals.keys(), 0);
   }
   escapeKeyUp(event) {

package/dist/collection/components/2.molecules/toast-controller/toast-controller.js

@@ -27,7 +27,8 @@ export class YooIonToastControllerComponent {
     }
   }
   toastWillDismiss(ev) {
-    this.toasts.delete(ev.target.overlayId);
+    var _a, _b;
+    this.toasts.delete(ev.target.nodeName === 'YOO-TOAST' ? ev.target.overlayId : (_b = (_a = ev.composedPath()) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.overlayId);
   }
   escapeKeyUp(event) {
     if (event && event.key && event.key.toLowerCase && event.key.toLowerCase() === 'escape') {

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

@@ -203,7 +203,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 /* shadow */
 yoo-header {
   position: relative;
-  z-index: 11 !important;
   display: block;
   order: -1;
   width: 100%;
@@ -215,8 +214,8 @@ yoo-header.transparent {
   background: transparent;
 }
 
-yoo-header.secondary {
-  z-index: unset !important;
+yoo-header:not(.secondary) {
+  z-index: 11 !important;
 }
 
 yoo-header.device-min-height {

package/dist/collection/components/3.organisms/video-player/videoplayer-videojs/videoplayer-videojs.js

@@ -353,10 +353,6 @@ export class YooVideoPlayerVideojsComponent {
     }
   }
   onVideoJSError() {
-    var _a;
-    if (this.currentFallbackSrcIndex === 0 && !((_a = this.source) === null || _a === void 0 ? void 0 : _a.includes('q_auto:eco'))) {
-      this.currentFallbackSrcIndex++;
-    }
     if (this.currentFallbackSrcIndex < this.fallbackSrc.length) {
       this.onFixSource(this.fallbackSrc[this.currentFallbackSrcIndex]);
       this.currentFallbackSrcIndex++;

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

@@ -1,6 +1,8 @@
+import { FormFieldType } from '@shared/interfaces';
 import { getAsyncExtraData, getDefaultAudience, isWeb, translate } from '@shared/utils';
 import { Component, Element, Event, h, Host, Prop, State } from '@stencil/core';
 import { cloneDeep, isEmpty, isEqual } from 'lodash-es';
+import { filterIsAutocompleteLocal } from '../../../utils/helpers/filters-helpers';
 import { setValidator, setValueAndValidateInput } from '../../../utils/helpers/form-input-helpers'; //
 export class YooFormAudienceComponent {
   constructor() {
@@ -322,28 +324,42 @@ export class YooFormAudienceComponent {
       h("yoo-form-radio", { flow: "row", options: this.typeValues, readonly: this.forceManualType || this.readonly, size: "medium", value: type, onInputChanged: (ev) => this.onTypeChanged(ev), helpers: this.typeValues.map((option) => translate((this.tooltipPrefix || '') + `AUDIENCETYPE${option.toUpperCase()}HELP`)) }, this.typeValues.map((option, index) => h("div", { class: "radio-container", slot: `${index}` },
         h("span", { class: "radio-title" }, translate('AUDIENCETYPE' + option.toUpperCase()))))));
   }
+  updateFilterFields(model) {
+    var _a;
+    if (!isWeb(this.host)) {
+      (_a = model === null || model === void 0 ? void 0 : model.fields) === null || _a === void 0 ? void 0 : _a.forEach((field) => {
+        if (filterIsAutocompleteLocal(field)) {
+          field.filterType = FormFieldType.filterautocomplete;
+        }
+      });
+    }
+  }
   renderUserRules() {
     var _a, _b, _c;
     const type = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.type) || 'automatic';
     const value = ((_c = (_b = this.value) === null || _b === void 0 ? void 0 : _b.usersQuery) === null || _c === void 0 ? void 0 : _c.sortsAndFilters) || {};
+    const model = this.models[0];
+    this.updateFilterFields(model);
     return (h("div", { class: "rule-container" },
       h("div", { class: "rule-title" },
         h("yoo-icon", { name: "user", color: "dark", size: "small" }),
         translate(type === 'manual' ? 'AUDIENCEFILTERUSER' : 'AUDIENCERULEUSER')),
       h("div", { class: "rule" },
-        h("yoo-form-query-builder", { readonly: this.readonly, size: isWeb(this.host) ? 'small' : 'medium', hideSorts: true, value: value, model: this.models[0], onInputChanged: (ev) => this.onUserQueryChanged(ev) }))));
+        h("yoo-form-query-builder", { readonly: this.readonly, size: isWeb(this.host) ? 'small' : 'medium', hideSorts: true, value: value, model: model, onInputChanged: (ev) => this.onUserQueryChanged(ev) }))));
   }
   renderStoreRules() {
     var _a, _b, _c;
     const type = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.type) || 'automatic';
     const value = ((_c = (_b = this.value) === null || _b === void 0 ? void 0 : _b.storesQuery) === null || _c === void 0 ? void 0 : _c.sortsAndFilters) || {};
+    const model = this.models[1];
+    this.updateFilterFields(model);
     return (h("div", { class: "rule-container" },
       h("div", { class: "rule-title" },
         h("yoo-icon", { name: "pin", color: "dark", size: "small" }),
         translate(type === 'manual' ? 'AUDIENCEFILTERSITE' : 'AUDIENCERULESITE'),
         this.renderHelp('AUDIENCEFILTERSITEHELP')),
       h("div", { class: "rule" },
-        h("yoo-form-query-builder", { readonly: this.readonly, size: isWeb(this.host) ? 'small' : 'medium', hideSorts: true, value: value, model: this.models[1], onInputChanged: (ev) => this.onStoreQueryChanged(ev) }))));
+        h("yoo-form-query-builder", { readonly: this.readonly, size: isWeb(this.host) ? 'small' : 'medium', hideSorts: true, value: value, model: model, onInputChanged: (ev) => this.onStoreQueryChanged(ev) }))));
   }
   renderRules() {
     var _a;

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

@@ -123,7 +123,7 @@ export class YooFormCarouselComponent {
                     const filename = (item === null || item === void 0 ? void 0 : item._filename) || new Date().getTime().toString();
                     getAsyncExtraData({
                       type: 'email-dialog',
-                      params: { item: (item === null || item === void 0 ? void 0 : item._downloadURL) ? item : { _downloadURL: item, filename } }
+                      params: { item: (item === null || item === void 0 ? void 0 : item._downloadURL) ? item : { _downloadURL: item, filename }, forceMobile: !isWeb(this.host) }
                     });
                   }
                 },

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

@@ -202,90 +202,100 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 /* spacing for padding, margin, etc... */
 /* shadow */
 :host {
-  display: flex;
-  flex-direction: column;
-  overflow: visible;
+  display: block;
+  overflow: hidden auto;
 }
 :host yoo-banner {
   height: 0;
 }
 :host yoo-tag {
   position: relative;
-  max-width: calc(100% - 5rem);
+  max-width: 100%;
   height: fit-content;
 }
-:host .drop-title span:first-of-type {
+:host [placement] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-08, 0.5rem);
+  box-sizing: border-box;
+  width: 100%;
+  margin: 0 auto;
+  padding: var(--spacing-16, 1rem);
+}
+:host [placement] #counter {
+  padding-left: var(--spacing-04, 0.25rem);
+  font-size: var(--font-size-12, 0.75rem);
+  opacity: 0.5;
+}
+:host [placement] #title[hidden] {
+  opacity: 0;
+}
+:host [placement] #title span:first-of-type {
   font-weight: bold;
 }
+:host [placement] .dropzone {
+  flex-grow: 1;
+}
 :host .dropzone {
-  transition: background-color 500ms ease-in-out;
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-content: baseline;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  white-space: nowrap;
+  border-radius: var(--border-radius-08, 0.5rem);
 }
-:host .dropzone.hit {
+:host .dropzone[hit] {
   background-color: var(--light-10, rgba(255, 255, 255, 0.1));
 }
-:host .dropzone > * {
-  margin: calc(var(--spacing-08, 0.5rem) / 2) calc(var(--spacing-08, 0.5rem) / 2);
-}
-
-:host([readonly]) .drop-container:last-of-type {
-  margin-top: var(--spacing-16, 1rem);
-}
-:host([readonly]) .drop-title {
+:host .dropzone yoo-tag {
+  margin-right: var(--spacing-08, 0.5rem);
   margin-bottom: var(--spacing-08, 0.5rem);
 }
+:host .dropzone#zone-tags {
+  height: calc(var(--spacing-64, 4rem) * 2);
+  padding: var(--spacing-08, 0.5rem);
+}
 
-:host(:not([readonly])) h1 {
-  margin: 0 0 var(--spacing-16, 1rem);
-  color: var(--stable, #adadad);
-  font-weight: normal;
-  font-size: var(--font-size-18, 1.125rem);
+:host(:not([readonly])) main::-webkit-scrollbar {
+  display: none;
 }
-:host(:not([readonly])) .drop-container,
-:host(:not([readonly])) .dropzone {
+:host(:not([readonly])) [placement] {
+  min-height: calc(var(--spacing-32, 2rem) * 5);
   border-radius: var(--border-radius-08, 0.5rem);
-  transition: background-color 500ms ease-in-out;
-}
-:host(:not([readonly])) .drop-container {
-  z-index: 1;
-  display: grid;
-  grid-template-rows: 1.75rem 1fr;
-  box-sizing: border-box;
-  width: 100%;
-  min-height: 11rem;
-  margin: 0 auto;
-  padding: var(--spacing-16, 1rem);
   box-shadow: var(--card-shadow-2, 0 0.3125rem 0.9375rem 0 rgba(40, 47, 54, 0.08));
 }
-:host(:not([readonly])) .drop-container:first-of-type {
-  margin-bottom: var(--spacing-04, 0.25rem);
+:host(:not([readonly])) [placement] .dropzone {
+  min-height: calc(var(--spacing-32, 2rem) * 2);
+}
+:host(:not([readonly])) [placement] #title {
+  color: var(--light, #ffffff);
+}
+:host(:not([readonly])) [placement][placement=top] {
   background: var(--warning, #ed6e33);
 }
-:host(:not([readonly])) .drop-container:first-of-type.completed {
+:host(:not([readonly])) [placement][placement=top].completed {
   background-color: var(--warning-60, rgba(237, 110, 51, 0.6));
 }
-:host(:not([readonly])) .drop-container:last-of-type {
-  margin-top: var(--spacing-04, 0.25rem);
+:host(:not([readonly])) [placement][placement=bottom] {
   background: var(--app-color, #5a30f4);
 }
-:host(:not([readonly])) .drop-container:last-of-type.completed {
+:host(:not([readonly])) [placement][placement=bottom].completed {
   background-color: var(--app-color-60, rgba(90, 48, 244, 0.6));
 }
-:host(:not([readonly])) .drop-container .drop-title {
-  color: var(--light, #ffffff);
-}
-:host(:not([readonly])) section.tags #zone-tags {
-  height: 7.5rem;
-  margin: 0 var(--spacing-08, 0.5rem);
+
+:host([readonly]) .drop-container:last-of-type {
+  margin-top: var(--spacing-16, 1rem);
 }
-:host(:not([readonly])) .words-counter {
-  padding-left: var(--spacing-04, 0.25rem);
-  font-size: var(--font-size-12, 0.75rem);
-  opacity: 0.5;
+:host([readonly]) #title {
+  margin-bottom: var(--spacing-08, 0.5rem);
 }
 
-:host([animated]) .drop-title {
-  transition: opacity 750ms ease-in-out;
+:host([animated]) .dropzone,
+:host([animated]) section {
+  transition: background-color 500ms ease-in-out, height 750ms ease-in-out;
 }
-:host([animated]) .drop-title[hidden] {
-  opacity: 0;
+:host([animated]) #title {
+  transition: opacity 750ms ease-in-out;
 }

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

@@ -2,31 +2,32 @@ import { translateMulti } from '@shared/utils';
 import { Component, Element, Event, h, Host, Method, Prop, State, Watch } from '@stencil/core';
 import { isEqual } from 'lodash-es';
 import { initTags } from '../../../utils/draggables';
-import { getAppContext } from '../../../utils/helpers/common-helpers';
-import { getDeletedValues, hasDuplicates, showWarningAlert } from '../../../utils/helpers/draggable-tags-helpers';
+import { hasDuplicates, showWarningBanner } from '../../../utils/helpers/draggable-tags-helpers';
 import { setValueAndValidateInput } from '../../../utils/helpers/form-input-helpers';
 export class YooFormCategorizeWordsComponent {
   constructor() {
     this.animated = true;
-    /**
-     * Value previously given by user, mostly used in read-only mode
-     */
-    this.value = null;
     /**
      * Read-only mode : true if displayed within a quiz summary
      */
     this.readonly = false;
-    this.wordCounterElement = [];
+    /**
+     * Value previously given by user, mostly used in read-only mode
+     */
+    this.value = null;
+    this.counterElement = [];
   }
   onCategoriesChanged() {
     var _a;
     this.revealCategories = !!((_a = this.categories) === null || _a === void 0 ? void 0 : _a.length);
   }
+  onRequireChanged() {
+    this.validate();
+  }
   onValuesChanged(newValues, oldValues) {
     var _a;
     if (!isEqual(newValues, oldValues)) {
-      this.deletedValues = getDeletedValues(oldValues, newValues);
-      showWarningAlert(this.host, hasDuplicates(newValues));
+      showWarningBanner(this.host, hasDuplicates(newValues));
       (_a = this.tags) === null || _a === void 0 ? void 0 : _a.updateTags({ newValues, oldValues });
     }
   }
@@ -37,14 +38,9 @@ export class YooFormCategorizeWordsComponent {
   get tagConfig() {
     const onReleaseTag = () => {
       this.tags.checkOverflowingTags();
-      const userAnswers = this.tags.getDroppedValues()
+      this.value = this.tags.getDroppedValues()
         .map(uas => uas.map(ua => this.values.find(v => ua === translateMulti(v))));
-      if (!this.livePreview) {
-        setValueAndValidateInput(userAnswers, this);
-      }
-      else {
-        this.value = userAnswers;
-      }
+      setValueAndValidateInput(this.value, this);
     };
     const getColorTag = (tagValue, zoneIndex) => {
       if (this.readonly && this.value.length === this.answer.length) {
@@ -60,6 +56,7 @@ export class YooFormCategorizeWordsComponent {
       onFirstTagAnimationFinished: () => this.revealCategories = true,
       getColorTag: (tagValue, zoneIndex) => getColorTag(tagValue, zoneIndex),
       releaseTagExtraAction: () => onReleaseTag(),
+      pressTagExtraAction: () => this.tags.setTagsZoneOverflow(false),
       resetTagExtraAction: () => onReleaseTag()
     };
   }
@@ -67,7 +64,6 @@ export class YooFormCategorizeWordsComponent {
     const getZoneConfig = (zoneType) => {
       const isTagZone = zoneType === 'tagZone';
       return {
-        threshold: '100%',
         hasOverflow: isTagZone
       };
     };
@@ -83,25 +79,17 @@ export class YooFormCategorizeWordsComponent {
   componentDidLoad() {
     this.initGame();
   }
-  componentWillUpdate() {
-    var _a;
-    if (this.newValue || ((_a = this.deletedValues) === null || _a === void 0 ? void 0 : _a.length)) {
-      this.value = this.tags.getDroppedValues();
-    }
-  }
   validate() {
     var _a, _b;
-    this.validity = 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.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);
-    showWarningAlert(this.host, hasDuplicates(this.values));
   }
   renderTagsZone() {
-    return h("section", { class: "tags" },
-      h("div", { class: "dropzone", id: "zone-tags" }));
+    return !this.readonly && h("section", { class: "dropzone", id: "zone-tags" });
   }
   renderDropContainers(zoneIndex) {
     var _a, _b, _c, _d, _e, _f, _g;
@@ -110,26 +98,30 @@ export class YooFormCategorizeWordsComponent {
     const isZoneCompleted = (value === null || value === void 0 ? void 0 : value.length) === (answer === null || answer === void 0 ? void 0 : answer.length);
     const maxAnswers = ((_d = (_c = this.answer) === null || _c === void 0 ? void 0 : _c[zoneIndex]) === null || _d === void 0 ? void 0 : _d.length) || 0;
     const nbrDroppedTags = ((_f = (_e = this.value) === null || _e === void 0 ? void 0 : _e[zoneIndex]) === null || _f === void 0 ? void 0 : _f.length) || 0;
-    return (h("div", { class: { 'drop-container': true, 'completed': isZoneCompleted } },
-      h("div", { class: "drop-title", hidden: !this.readonly && this.animated && !(value === null || value === void 0 ? void 0 : value.length) && !this.revealCategories },
+    return (h("section", { ...{ placement: !zoneIndex ? 'top' : 'bottom', ...(isZoneCompleted && { class: 'completed' }) } },
+      h("div", { id: "title", hidden: !this.readonly && this.animated && !(value === null || value === void 0 ? void 0 : value.length) && !this.revealCategories },
         h("span", null, translateMulti((_g = this.categories) === null || _g === void 0 ? void 0 : _g[zoneIndex])),
         this.readonly && ` (${nbrDroppedTags} / ${maxAnswers})`,
-        !this.readonly && !!(answer === null || answer === void 0 ? void 0 : answer.length) && (h("span", { ref: (el) => (this.wordCounterElement[zoneIndex] = el), class: "words-counter" },
+        !this.readonly && !!(answer === null || answer === void 0 ? void 0 : answer.length) && (h("span", { ref: (el) => (this.counterElement[zoneIndex] = el), id: "counter" },
           h("span", null, nbrDroppedTags),
           " / ",
           maxAnswers))),
       h("div", { class: "dropzone", id: `zone-${zoneIndex}` })));
   }
   renderBanner() {
-    return this.livePreview && h("yoo-banner", null,
+    return this.livePreview && !this.readonly && h("yoo-banner", null,
       h("p", { slot: "content" }));
   }
-  render() {
-    return (h(Host, { class: { ...getAppContext(this.host) } },
-      this.renderBanner(),
+  renderMain() {
+    return h("main", null,
       this.renderDropContainers(0),
       this.renderTagsZone(),
-      this.renderDropContainers(1)));
+      this.renderDropContainers(1));
+  }
+  render() {
+    return h(Host, null,
+      this.renderBanner(),
+      this.renderMain());
   }
   static get is() { return "yoo-form-categorize-words"; }
   static get encapsulation() { return "shadow"; }
@@ -158,6 +150,41 @@ export class YooFormCategorizeWordsComponent {
       "reflect": true,
       "defaultValue": "true"
     },
+    "readonly": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Read-only mode : true if displayed within a quiz summary"
+      },
+      "attribute": "readonly",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "livePreview": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "true if the component is loaded within the preview mode in the course-creator"
+      },
+      "attribute": "live-preview",
+      "reflect": true
+    },
     "categories": {
       "type": "unknown",
       "mutable": false,
@@ -173,6 +200,23 @@ export class YooFormCategorizeWordsComponent {
         "text": "Categories (2 required)"
       }
     },
+    "required": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "required",
+      "reflect": false
+    },
     "answer": {
       "type": "unknown",
       "mutable": false,
@@ -221,41 +265,6 @@ export class YooFormCategorizeWordsComponent {
       "attribute": "validity",
       "reflect": false
     },
-    "readonly": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Read-only mode : true if displayed within a quiz summary"
-      },
-      "attribute": "readonly",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "livePreview": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "true if the component is loaded within the preview mode in the course-creator"
-      },
-      "attribute": "live-preview",
-      "reflect": true
-    },
     "values": {
       "type": "unknown",
       "mutable": false,
@@ -375,6 +384,9 @@ export class YooFormCategorizeWordsComponent {
   static get watchers() { return [{
       "propName": "categories",
       "methodName": "onCategoriesChanged"
+    }, {
+      "propName": "required",
+      "methodName": "onRequireChanged"
     }, {
       "propName": "values",
       "methodName": "onValuesChanged"

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

@@ -43,7 +43,7 @@ export class YooFormChoiceButtonComponent {
     return (!((_b = (_a = this.valuesColor) === null || _a === void 0 ? void 0 : _a.find((e) => e.key === value)) === null || _b === void 0 ? void 0 : _b.value) && 'app-color');
   }
   renderBanner() {
-    return this.livePreview && h("yoo-banner", null,
+    return this.livePreview && !this.readonly && h("yoo-banner", null,
       h("p", { slot: "content" }));
   }
   render() {

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

@@ -70,7 +70,7 @@ export class YooFormChoiceCardComponent {
     return (h("section", { class: { 'card-grid': true, selected: this.selected } }, this.choices && this.choices.map((item, index) => this.renderSelect(item, index))));
   }
   renderBanner() {
-    return this.livePreview && h("yoo-banner", null,
+    return this.livePreview && !this.readonly && h("yoo-banner", null,
       h("p", { slot: "content" }));
   }
   render() {

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

@@ -38,7 +38,7 @@ export class YooFormChoiceChatComponent {
           h("yoo-chat-message", { class: { choice: true, radius: true, selected: isSelected(value, this.selection) }, style: this.animated ? { '--choice-index': index.toString() } : {}, message: getMessage({ content: value, isFirst: !index, isLast: index === s.length - 1, isAlternate: true }), onClick: () => onItemSelect(value, this) }))));
   }
   renderBanner() {
-    return this.livePreview && h("yoo-banner", null,
+    return this.livePreview && !this.readonly && h("yoo-banner", null,
       h("p", { slot: "content" }));
   }
   render() {

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

@@ -1,6 +1,6 @@
 import { isNullOrUndefined } from '@shared/utils';
 import { compact, findIndex, isEqual, shuffle } from 'lodash-es';
-import { hasDuplicates, showWarningAlert } from '../../../utils/helpers/draggable-tags-helpers';
+import { hasDuplicates, showWarningBanner } from '../../../utils/helpers/draggable-tags-helpers';
 import { setValidator, setValueAndValidateInput } from '../../../utils/helpers/form-input-helpers';
 import { YooFormChoiceCardComponent } from './card/form-choice-card';
 export function isSelected(item, selection) {
@@ -56,7 +56,7 @@ export function prepareChoice(choiceElement) {
 export function hasWarnings(values, choiceElement, warningMsgs) {
   const duplicateMessage = 'NODUPLICATEVALUES';
   const hasDuplicatedValues = hasDuplicates(values === null || values === void 0 ? void 0 : values.map(v => (v === null || v === void 0 ? void 0 : v.text) || v));
-  showWarningAlert(choiceElement.host, hasDuplicatedValues || !!(warningMsgs === null || warningMsgs === void 0 ? void 0 : warningMsgs.length), hasDuplicatedValues ? duplicateMessage : warningMsgs === null || warningMsgs === void 0 ? void 0 : warningMsgs[0]);
+  showWarningBanner(choiceElement.host, hasDuplicatedValues || !!(warningMsgs === null || warningMsgs === void 0 ? void 0 : warningMsgs.length), hasDuplicatedValues ? duplicateMessage : warningMsgs === null || warningMsgs === void 0 ? void 0 : warningMsgs[0]);
   return hasDuplicatedValues && (warningMsgs === null || warningMsgs === void 0 ? void 0 : warningMsgs.length) > 0;
 }
 function updateChoices(values, shuffled) {

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

@@ -20,8 +20,7 @@ export class YooFormChoiceImageComponent {
     updateValue(newValue, oldValue, this);
   }
   get hasEmptyValues() {
-    var _a;
-    return this.values.length >= 2 && !!((_a = this.values) === null || _a === void 0 ? void 0 : _a.filter(v => (v.image && !v.text) || (!v.image && v.text)).length);
+    return this.values.length >= 2 && !!this.values.filter(({ image, text }) => (image && !text) || (!image && text)).length;
   }
   componentWillLoad() {
     prepareChoice(this);
@@ -36,7 +35,7 @@ export class YooFormChoiceImageComponent {
     const isCorrect = answer.includes(text);
     const onOpenImage = (values, index) => showSlidesMedia(this.host, { items: values.map(({ image }) => ({ value: image })), currentSlideIndex: index, showBottomContainer: false });
     return (h("div", { class: "image-container", onClick: () => this.isHistory && onOpenImage(values, index), style: this.animated ? { '--choice-index': index.toString() } : {} },
-      h("div", { class: { 'content': true, 'correct-answer': this.readonly && isCorrect && !noValidation, 'wrong-answer': this.readonly && !isCorrect && !noValidation } },
+      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(text, this) }),
         !readonly && [
           h("yoo-form-checkbox", { value: isSelected(text, this.selection), onClick: () => onItemSelect(text, this), animated: this.animated }),
@@ -56,12 +55,12 @@ export class YooFormChoiceImageComponent {
     });
   }
   renderBanner() {
-    return this.livePreview && h("yoo-banner", null,
+    return this.livePreview && !this.readonly && h("yoo-banner", null,
       h("p", { slot: "content" }));
   }
   render() {
     return (h(Host, null,
-      !this.readonly && this.renderBanner(),
+      this.renderBanner(),
       (this.readonly || this.choices) && this.renderImages()));
   }
   static get is() { return "yoo-form-choice-image"; }