@yoobic/yobi 8.7.3 → 8.7.4

package/dist/collection/components/entities/entity/entity.js

@@ -664,207 +664,214 @@ export class YooEntityComponent {
     const heading = translateMulti(this.item.title);
     const session = getSession();
     const randomColor = getRandomSwatchColor(this.index);
-    const CONFIG = {
-      missions: (item) => {
-        var _a, _b;
-        const address = this.getMissionLocation(item);
-        const tags = getMissionStateTags(item, session, true) || [];
-        const processIcon = (_a = item === null || item === void 0 ? void 0 : item.description) === null || _a === void 0 ? void 0 : _a.processIcon;
-        const iconTopLeft = (processIcon === null || processIcon === void 0 ? void 0 : processIcon.substring(0, 3)) === 'yo-' ? processIcon.substring(3, processIcon.length) : processIcon;
-        color = ((_b = item.description) === null || _b === void 0 ? void 0 : _b.color) || getCssColor('app-color');
-        return {
-          items: [
-            {
-              placement: 'header',
-              heading,
-              color,
-              icons: [
-                {
-                  place: 'left',
-                  name: iconTopLeft || 'request'
-                },
-                {
-                  place: 'right',
-                  name: 'circle-plus'
-                }
-              ]
-            },
-            {
-              placement: 'body',
-              progress: item.hasWorkflow ? getWorkflowProgress(item).value : null,
-              subHeadingDescription: address || ''
-            },
-            {
-              placement: 'footer',
-              tagElements: tags.map((tag) => {
-                return { ...tag, customColor: getCssColor(color) };
-              })
-            }
-          ]
-        };
-      },
-      missiondatas: (item) => {
-        var _a, _b;
-        item = this.item.mission;
-        item.description = this.item.missiondescription;
-        const address = this.getMissionLocation(item);
-        const tags = getMissionStateTags(item, session, true) || [];
-        const processIcon = (_a = item === null || item === void 0 ? void 0 : item.description) === null || _a === void 0 ? void 0 : _a.processIcon;
-        const iconTopLeft = (processIcon === null || processIcon === void 0 ? void 0 : processIcon.substring(0, 3)) === 'yo-' ? processIcon.substring(3, processIcon.length) : processIcon;
-        color = ((_b = item.description) === null || _b === void 0 ? void 0 : _b.color) || getCssColor('app-color');
-        return {
-          items: [
-            {
-              placement: 'header',
-              heading,
-              color,
-              icons: [
-                {
-                  place: 'left',
-                  name: iconTopLeft || 'request'
-                },
-                {
-                  place: 'right',
-                  name: 'circle-plus'
-                }
-              ]
-            },
-            {
-              placement: 'body',
-              progress: item.hasWorkflow ? getWorkflowProgress(item).value : null,
-              subHeadingDescription: address || ''
-            },
-            {
-              placement: 'footer',
-              tagElements: tags.map((tag) => {
-                return { ...tag, customColor: getCssColor(color) };
-              })
-            }
-          ]
-        };
-      },
-      missiondescriptions: (item) => {
-        var _a;
-        const colorDefault = item.type === 'poll' ? getCssColor('success') : item.type === 'service' ? getCssColor('app-color') : randomColor;
-        const iconTopLeftDefault = item.type === 'poll' ? 'poll' : 'request';
-        const iconTopLeft = ((_a = item.processIcon) === null || _a === void 0 ? void 0 : _a.substring(0, 3)) === 'yo-' ? item.processIcon.substring(3, item.processIcon.length) : item.processIcon;
-        size = ['large', 'small'].includes(this.extraClass) ? this.extraClass : 'medium';
-        return {
-          items: [
-            {
-              placement: 'header',
-              heading,
-              icons: [
-                {
-                  place: 'left',
-                  name: iconTopLeft || iconTopLeftDefault,
-                  customColor: item.color || colorDefault
-                }
-              ]
-            },
-            {
-              placement: 'body',
-              ...(this.direction === 'horizontal' ? {} : { subHeadingDescription: item.text }),
-              tagElements: item.category ? [{ innerHTML: translateMulti(item.category.title), customColor: getCssColor(item.category.color) }] : null
-            }
-          ]
-        };
-      },
-      dashboards: () => {
-        size = 'medium';
-        return {
-          items: [
-            {
-              placement: 'header',
-              heading,
-              icons: [
-                {
-                  place: 'left',
-                  name: 'analytics-boost',
-                  color: 'app-color'
-                },
-                {
-                  place: 'right',
-                  name: 'big-arrow-right',
-                  color: 'stable-alt'
-                }
-              ]
-            }
-          ]
-        };
-      },
-      creationtypes: (item) => {
-        return {
-          tooltip: item.needsUpgrade ? item.tooltip : null,
-          items: [
-            {
-              placement: 'header',
-              heading,
-              icons: [
-                {
-                  place: 'left',
-                  name: item.topLeftIcon,
-                  color: item.color,
-                  size: 'large'
-                }
-              ],
-              tagDefaultSize: 'small',
-              tagElements: compact([
-                item.isBeta ? { innerHTML: translate('BETA'), customColor: getCssColor(item.color) } : null,
-                item.needsUpgrade ? { innerHTML: translate('NEEDSUPGRADE'), customColor: getCssColor(item.color) } : null
-              ])
-            },
-            {
-              placement: 'body',
-              subheading: translateMulti(item.subtitle),
-              imgSrc: item.imgSrc
-            }
-          ]
-        };
-      },
-      missiondescriptiontemplates: (item) => {
-        return {
-          items: [
-            {
-              placement: 'header',
-              icons: [
-                {
-                  place: 'left',
-                  name: getCampaignIcon(item),
-                  color: getCampaignColor(item),
-                  size: 'large'
-                }
-              ]
-            },
-            {
-              placement: 'body',
-              tagDefaultSize: 'extra-small',
-              ...(item.category ? { tagElements: [{ innerHTML: item.category.title, customColor: getCssColor(item.category.color), size: 'extra-small' }] } : {}),
-              heading,
-              subHeadingDescription: translateMulti(item.text)
-            }
-          ]
-        };
-      },
-      coursecategories: (item) => {
-        return {
-          items: [
-            {
-              placement: 'header',
-              heading,
-              icons: [
-                {
-                  ...(item.color ? { customColor: item.color } : {}),
-                  place: 'middle',
-                  name: item.icon || 'catalogue'
-                }
-              ]
-            }
-          ]
-        };
-      }
-    };
-    return (h("yoo-card-list-color", { style: { '--fill': color }, entry: CONFIG[this.entityType](this.item), size: size, class: {
+    let entry;
+    if (this.entityMapping) {
+      entry = this.entityMapping(this.item, this.entityType, this.displayType);
+    }
+    else {
+      const CONFIG = {
+        missions: (item) => {
+          var _a, _b;
+          const address = this.getMissionLocation(item);
+          const tags = getMissionStateTags(item, session, true) || [];
+          const processIcon = (_a = item === null || item === void 0 ? void 0 : item.description) === null || _a === void 0 ? void 0 : _a.processIcon;
+          const iconTopLeft = (processIcon === null || processIcon === void 0 ? void 0 : processIcon.substring(0, 3)) === 'yo-' ? processIcon.substring(3, processIcon.length) : processIcon;
+          color = ((_b = item.description) === null || _b === void 0 ? void 0 : _b.color) || getCssColor('app-color');
+          return {
+            items: [
+              {
+                placement: 'header',
+                heading,
+                color,
+                icons: [
+                  {
+                    place: 'left',
+                    name: iconTopLeft || 'request'
+                  },
+                  {
+                    place: 'right',
+                    name: 'circle-plus'
+                  }
+                ]
+              },
+              {
+                placement: 'body',
+                progress: item.hasWorkflow ? getWorkflowProgress(item).value : null,
+                subHeadingDescription: address || ''
+              },
+              {
+                placement: 'footer',
+                tagElements: tags.map((tag) => {
+                  return { ...tag, customColor: getCssColor(color) };
+                })
+              }
+            ]
+          };
+        },
+        missiondatas: (item) => {
+          var _a, _b;
+          item = this.item.mission;
+          item.description = this.item.missiondescription;
+          const address = this.getMissionLocation(item);
+          const tags = getMissionStateTags(item, session, true) || [];
+          const processIcon = (_a = item === null || item === void 0 ? void 0 : item.description) === null || _a === void 0 ? void 0 : _a.processIcon;
+          const iconTopLeft = (processIcon === null || processIcon === void 0 ? void 0 : processIcon.substring(0, 3)) === 'yo-' ? processIcon.substring(3, processIcon.length) : processIcon;
+          color = ((_b = item.description) === null || _b === void 0 ? void 0 : _b.color) || getCssColor('app-color');
+          return {
+            items: [
+              {
+                placement: 'header',
+                heading,
+                color,
+                icons: [
+                  {
+                    place: 'left',
+                    name: iconTopLeft || 'request'
+                  },
+                  {
+                    place: 'right',
+                    name: 'circle-plus'
+                  }
+                ]
+              },
+              {
+                placement: 'body',
+                progress: item.hasWorkflow ? getWorkflowProgress(item).value : null,
+                subHeadingDescription: address || ''
+              },
+              {
+                placement: 'footer',
+                tagElements: tags.map((tag) => {
+                  return { ...tag, customColor: getCssColor(color) };
+                })
+              }
+            ]
+          };
+        },
+        missiondescriptions: (item) => {
+          var _a;
+          const colorDefault = item.type === 'poll' ? getCssColor('success') : item.type === 'service' ? getCssColor('app-color') : randomColor;
+          const iconTopLeftDefault = item.type === 'poll' ? 'poll' : 'request';
+          const iconTopLeft = ((_a = item.processIcon) === null || _a === void 0 ? void 0 : _a.substring(0, 3)) === 'yo-' ? item.processIcon.substring(3, item.processIcon.length) : item.processIcon;
+          size = ['large', 'small'].includes(this.extraClass) ? this.extraClass : 'medium';
+          return {
+            items: [
+              {
+                placement: 'header',
+                heading,
+                icons: [
+                  {
+                    place: 'left',
+                    name: iconTopLeft || iconTopLeftDefault,
+                    customColor: item.color || colorDefault
+                  }
+                ]
+              },
+              {
+                placement: 'body',
+                ...(this.direction === 'horizontal' ? {} : { subHeadingDescription: item.text }),
+                tagElements: item.category ? [{ innerHTML: translateMulti(item.category.title), customColor: getCssColor(item.category.color) }] : null
+              }
+            ]
+          };
+        },
+        dashboards: () => {
+          size = 'medium';
+          return {
+            items: [
+              {
+                placement: 'header',
+                heading,
+                icons: [
+                  {
+                    place: 'left',
+                    name: 'analytics-boost',
+                    color: 'app-color'
+                  },
+                  {
+                    place: 'right',
+                    name: 'big-arrow-right',
+                    color: 'stable-alt'
+                  }
+                ]
+              }
+            ]
+          };
+        },
+        creationtypes: (item) => {
+          return {
+            tooltip: item.needsUpgrade ? item.tooltip : null,
+            items: [
+              {
+                placement: 'header',
+                heading,
+                icons: [
+                  {
+                    place: 'left',
+                    name: item.topLeftIcon,
+                    color: item.color,
+                    size: 'large'
+                  }
+                ],
+                tagDefaultSize: 'small',
+                tagElements: compact([
+                  item.isBeta ? { innerHTML: translate('BETA'), customColor: getCssColor(item.color) } : null,
+                  item.needsUpgrade ? { innerHTML: translate('NEEDSUPGRADE'), customColor: getCssColor(item.color) } : null
+                ])
+              },
+              {
+                placement: 'body',
+                subheading: translateMulti(item.subtitle),
+                imgSrc: item.imgSrc
+              }
+            ]
+          };
+        },
+        missiondescriptiontemplates: (item) => {
+          return {
+            items: [
+              {
+                placement: 'header',
+                icons: [
+                  {
+                    place: 'left',
+                    name: getCampaignIcon(item),
+                    color: getCampaignColor(item),
+                    size: 'large'
+                  }
+                ]
+              },
+              {
+                placement: 'body',
+                tagDefaultSize: 'extra-small',
+                ...(item.category ? { tagElements: [{ innerHTML: item.category.title, customColor: getCssColor(item.category.color), size: 'extra-small' }] } : {}),
+                heading,
+                subHeadingDescription: translateMulti(item.text)
+              }
+            ]
+          };
+        },
+        coursecategories: (item) => {
+          return {
+            items: [
+              {
+                placement: 'header',
+                heading,
+                icons: [
+                  {
+                    ...(item.color ? { customColor: item.color } : {}),
+                    place: 'middle',
+                    name: item.icon || 'catalogue'
+                  }
+                ]
+              }
+            ]
+          };
+        }
+      };
+      entry = CONFIG[this.entityType](this.item);
+    }
+    return (h("yoo-card-list-color", { style: { '--fill': color }, entry: entry, size: size, class: {
         [extraClasses]: true,
         [this.entityType]: this.entityType !== undefined,
         cell: this.displayType === 'card-cell-color',
@@ -3400,7 +3407,7 @@ export class YooEntityComponent {
         "mutable": false,
         "complexType": {
           "original": "TEntityMapping",
-          "resolved": "(item: IEntity, entityType: EntityType, displayType: CardType, displaySize?: TSize, useCellOverlay?: boolean) => string | ICardListEntry | ICardMediaEntry",
+          "resolved": "(item: IEntity, entityType: EntityType, displayType: CardType, displaySize?: TSize, useCellOverlay?: boolean) => string | ICardListEntry | ICardListColorEntry | ICardMediaEntry",
           "references": {
             "TEntityMapping": {
               "location": "import",

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

@@ -2610,7 +2610,7 @@ export class YooFormAutocompleteComponent {
         "mutable": false,
         "complexType": {
           "original": "TEntityMapping",
-          "resolved": "(item: IEntity, entityType: EntityType, displayType: CardType, displaySize?: TSize, useCellOverlay?: boolean) => string | ICardListEntry | ICardMediaEntry",
+          "resolved": "(item: IEntity, entityType: EntityType, displayType: CardType, displaySize?: TSize, useCellOverlay?: boolean) => string | ICardListEntry | ICardListColorEntry | ICardMediaEntry",
           "references": {
             "TEntityMapping": {
               "location": "import",

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

@@ -206,7 +206,7 @@ svg:not(:root) {
 }
 
 yoo-banner {
-  margin: var(--spacing-08, 0.5rem);
+  margin: var(--spacing-08, 0.5rem) 0;
 }
 yoo-banner.mobile {
   --font-size: var(--font-size-16, 1rem);

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

@@ -424,9 +424,12 @@ svg:not(:root) {
 :host .outer-container .multiple .camera-containers {
   display: inline-flex;
   flex-wrap: wrap;
-  gap: var(--spacing-08, 0.5rem);
   align-items: center;
-  margin-bottom: var(--spacing-08, 0.5rem);
+  padding-bottom: var(--spacing-08, 0.5rem);
+  margin: calc(var(--spacing-08, 0.5rem) / -2);
+}
+:host .outer-container .multiple .camera-containers > * {
+  margin: calc(var(--spacing-08, 0.5rem) / 2);
 }
 :host .outer-container .multiple .camera-containers:not(.no-padding) {
   padding-top: var(--spacing-08, 0.5rem);

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

@@ -75,6 +75,10 @@ export class YooFormCategorizeWordsComponent {
   componentDidLoad() {
     this.init();
   }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.tags) === null || _a === void 0 ? void 0 : _a.destroy();
+  }
   init() {
     var _a;
     let initialWidth = (_a = this.host) === null || _a === void 0 ? void 0 : _a.clientWidth;

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

@@ -260,8 +260,6 @@ svg:not(:root) {
 }
 :host([is-pdf]) .image-container .content {
   max-width: 22.5rem;
-}
-:host([is-pdf]) .image-container .content yoo-img {
   border: none;
   border-radius: 0;
 }

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

@@ -260,8 +260,6 @@ svg:not(:root) {
 }
 :host([is-pdf]) .image-container .content {
   max-width: 22.5rem;
-}
-:host([is-pdf]) .image-container .content yoo-img {
   border: none;
   border-radius: 0;
 }

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

@@ -260,8 +260,6 @@ svg:not(:root) {
 }
 :host([is-pdf]) .image-container .content {
   max-width: 22.5rem;
-}
-:host([is-pdf]) .image-container .content yoo-img {
   border: none;
   border-radius: 0;
 }

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

@@ -260,8 +260,6 @@ svg:not(:root) {
 }
 :host([is-pdf]) .image-container .content {
   max-width: 22.5rem;
-}
-:host([is-pdf]) .image-container .content yoo-img {
   border: none;
   border-radius: 0;
 }
@@ -332,10 +330,11 @@ svg:not(:root) {
 }
 :host .content {
   position: relative;
+  border: var(--border-width-01, 0.0625rem) solid var(--stable-alt, #d0d0d0);
+  border-radius: var(--border-radius-08, 0.5rem);
 }
 :host .content yoo-img {
-  border: solid var(--border-width-01, 0.0625rem) var(--stable-alt, #d0d0d0);
-  border-radius: var(--border-radius-08, 0.5rem);
+  border-radius: inherit;
 }
 :host .content yoo-form-checkbox {
   position: absolute;

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

@@ -260,8 +260,6 @@ svg:not(:root) {
 }
 :host([is-pdf]) .image-container .content {
   max-width: 22.5rem;
-}
-:host([is-pdf]) .image-container .content yoo-img {
   border: none;
   border-radius: 0;
 }

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

@@ -243,7 +243,7 @@ export class YooFormDynamicComponent {
     }
   }
   async lockSlides(index) {
-    this.lockSlideSwipe(index !== null && index !== void 0 ? index : this.activeIndex);
+    this.lockSlideSwipe(index);
   }
   async onPhotoUploadingComplete(field) {
     const photo = this.getFieldByCode(field.name);
@@ -982,7 +982,7 @@ export class YooFormDynamicComponent {
     }
     if (this.isWeb && this.ionSlides) {
       await this.ionSlides.update();
-      this.lockSlideSwipe(this.activeIndex);
+      this.lockSlideSwipe();
     }
   }
   initValidity() {
@@ -1639,12 +1639,12 @@ export class YooFormDynamicComponent {
   isFirstSlide() {
     return this.activeIndex === 0;
   }
-  lockSlideSwipe(index) {
+  lockSlideSwipe(index = this.activeIndex) {
     if (this.slides && this.slides.length > 0) {
       index = this.showRecap ? index - 1 : index;
-      const shouldLockSlide = (slideIndex) => { var _a; return !isQuiz(this.lessonType) && ((_a = this.slidesState.filter((item) => !(item === null || item === void 0 ? void 0 : item.hidden))[slideIndex]) === null || _a === void 0 ? void 0 : _a.validity); };
-      const lockSwipeToNext = this.isLesson() ? !shouldLockSlide(index) : index + 1 === this.slides.length ? false : this.getSlideState(index + 1).locked;
-      const lockSwipeToPrev = (this.isLesson() && !isContentOnly(this.lessonType)) ? !shouldLockSlide(index - 1) : index - 1 < 0 ? false : this.getSlideState(index - 1).locked;
+      const [backButton, nextButton] = ['goback', 'next'].map(actionType => { var _a; return (_a = this.getNextButtons(index)) === null || _a === void 0 ? void 0 : _a.find((button) => button.actionType === actionType); });
+      const lockSwipeToNext = this.isLesson() ? nextButton === null || nextButton === void 0 ? void 0 : nextButton.disabled : index + 1 === this.slides.length ? false : this.getSlideState(index + 1).locked;
+      const lockSwipeToPrev = this.isLesson() ? backButton === null || backButton === void 0 ? void 0 : backButton.disabled : index - 1 < 0 ? false : this.getSlideState(index - 1).locked;
       if (this.ionSlides) {
         this.ionSlides.lockSwipeToNext(lockSwipeToNext);
         this.ionSlides.lockSwipeToPrev(lockSwipeToPrev);
@@ -1897,7 +1897,7 @@ export class YooFormDynamicComponent {
       this.validity = newValidity;
       this.formValidityChanged.emit(this.validity);
     }
-    this.lockSlideSwipe(this.activeIndex);
+    this.lockSlideSwipe();
   }
   onKeyboardWillShow(ev) {
     var _a;
@@ -2263,7 +2263,7 @@ export class YooFormDynamicComponent {
     let bannerRef;
     return [
       totalInvalidFields > 0 && h("yoo-banner", { ref: (el) => (bannerRef = el), fill: true, leftIcon: { name: 'warning' }, closable: true, onCloseClick: () => bannerRef.close() }, h("p", { slot: "content" }, translate('WARNINGNOTCOMPLIANTFIELDS', { smart_count: totalInvalidFields }))),
-      h("yoo-ion-slides", { ref: (el) => (this.ionSlides = el), navigation: false, initialSlide: this.selectedTabIndex || 0, options: this.slidesOptions, onIonSlidesDidLoad: () => this.isLesson() && this.lockSlideSwipe(this.activeIndex), onIonSlideTransitionEnd: (ev) => this.onIonSlideTransitionEnd(ev), onIonSlideTouchEnd: (ev) => this.onIonSlideTouchEnd(ev), class: {
+      h("yoo-ion-slides", { ref: (el) => (this.ionSlides = el), navigation: false, initialSlide: this.selectedTabIndex || 0, options: this.slidesOptions, onIonSlidesDidLoad: () => this.isLesson() && this.lockSlideSwipe(), onIonSlideTransitionEnd: (ev) => this.onIonSlideTransitionEnd(ev), onIonSlideTouchEnd: (ev) => this.onIonSlideTouchEnd(ev), class: {
           'has-header': isHeaderVisible, 'has-header-simple': this.isSimpleProgressBar(), 'recap': this.showRecap && this.activeIndex === 0
         } }, this.showRecap !== false ? h("yoo-ion-slide", { class: "recap" }, " ", this.renderRecap(), " ") : null, slides.map((slide, slideIndex) => (h("yoo-ion-slide", { class: {
           'flex-column': true,
@@ -3588,13 +3588,6 @@ export class YooFormDynamicComponent {
           includeSessionValues: field.includeSessionValues
         };
         break;
-      case FormFieldType.sorts:
-        TagType = 'yoo-form-sorts';
-        extraAttrs = {
-          value,
-          model: field.model
-        };
-        break;
       case FormFieldType.productssales:
         TagType = 'yoo-form-products-sales';
         extraAttrs = {
@@ -4533,7 +4526,9 @@ export class YooFormDynamicComponent {
         TagType = 'yoo-scratch-card';
         extraAttrs = {
           values: field.values,
-          isVisible: this.isCurrentSlide(slideIndex)
+          isVisible: this.isCurrentSlide(slideIndex),
+          onRedone: () => this.lockSlideSwipe(),
+          onRevealed: () => this.lockSlideSwipe()
         };
         break;
       case FormFieldType.scratchcreator:
@@ -7054,7 +7049,7 @@ export class YooFormDynamicComponent {
       },
       "scrollToPoint": {
         "complexType": {
-          "signature": "({ relativeScrollDistance, duration, scrollToBottom }: { relativeScrollDistance: number; duration?: number; scrollToBottom?: boolean; }) => Promise<any>",
+          "signature": "({ relativeScrollDistance, duration, scrollToBottom }: { relativeScrollDistance: number; duration?: number; scrollToBottom?: boolean; }) => Promise<void>",
           "parameters": [{
               "tags": [],
               "text": ""
@@ -7067,7 +7062,7 @@ export class YooFormDynamicComponent {
               "location": "global"
             }
           },
-          "return": "Promise<any>"
+          "return": "Promise<void>"
         },
         "docs": {
           "text": "",

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

@@ -64,6 +64,7 @@ export function getPreviousAndNextButtons({ host, hasPreviousButton, isDisabled,
   }
   if (nextButtonHandler) {
     buttons.push({
+      actionType: 'next',
       text: translate(nextButtonText || 'YOOBICNEXT'),
       color: nextButtonColor || 'app-color',
       size: size || (isWeb(host) ? 'medium' : 'large'),