@yoobic/yobi 8.3.7 → 8.4.0-1

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

@@ -1703,7 +1703,6 @@ span.fr-img-caption.fr-view {
 }
 :host(.lesson-form.web:not(.lesson-live-preview)) form .inputs-container yoo-form-input-container {
   width: 100%;
-  max-height: calc(100% - 2rem) !important;
 }
 :host(.lesson-form.web:not(.lesson-live-preview)) form yoo-form-choice-button,
 :host(.lesson-form.web:not(.lesson-live-preview)) form yoo-form-choice-chat,
@@ -1716,12 +1715,17 @@ span.fr-img-caption.fr-view {
 :host(.lesson-form.web:not(.lesson-live-preview)) form yoo-form-videoplayer {
   height: 33.3333333333vw;
 }
+:host(.lesson-form.web:not(.lesson-live-preview)) .footer-spacer {
+  height: 0;
+  min-height: 0;
+}
 
 :host(.lesson-form) .progress-container {
   z-index: 2;
   box-sizing: border-box;
   width: 100%;
   padding: var(--spacing-16, 1rem);
+  padding-bottom: 0;
 }
 :host(.lesson-form) .swiper-container {
   height: calc(100% - 3rem);
@@ -1850,18 +1854,20 @@ span.fr-img-caption.fr-view {
 :host(.web.lesson-form:not(.lesson-live-preview)) .progress-container yoo-progress-bar.top-content {
   width: 25rem;
 }
-:host(.web.lesson-form:not(.lesson-live-preview)) yoo-form-input-container.imagetagging {
-  max-width: 50rem;
-  margin: 0 auto;
+:host(.web.lesson-form:not(.lesson-live-preview)) yoo-form-input-container {
+  padding: var(--spacing-16, 1rem);
+  background-color: var(--stable-ultralight, #fafafa);
 }
 
 :host(.lesson-form) yoo-ion-scroll,
 :host(.lesson-live-preview) yoo-ion-scroll {
-  height: 100%;
+  height: 100;
+  min-height: 100%;
 }
 :host(.lesson-form) yoo-ion-scroll .inputs-container,
 :host(.lesson-live-preview) yoo-ion-scroll .inputs-container {
   height: 100%;
+  min-height: 100%;
 }
 :host(.lesson-form) yoo-ion-scroll .inputs-container .field-placeholder,
 :host(.lesson-live-preview) yoo-ion-scroll .inputs-container .field-placeholder {
@@ -1874,17 +1880,12 @@ span.fr-img-caption.fr-view {
   box-sizing: border-box;
   width: 100%;
   height: 100%;
-  padding: var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);
   --font-size-description: inherit;
 }
 :host(.lesson-form) .scroll-spacer,
 :host(.lesson-live-preview) .scroll-spacer {
   height: 0;
 }
-:host(.lesson-form) .footer-spacer,
-:host(.lesson-live-preview) .footer-spacer {
-  min-height: 0;
-}
 :host(.lesson-form) yoo-form-footer,
 :host(.lesson-live-preview) yoo-form-footer {
   position: relative;

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

@@ -1250,6 +1250,10 @@ export class YooFormDynamicComponent {
     if (!this.fieldsState[field.name]) {
       this.fieldsState[field.name] = {};
     }
+    if ((ev === null || ev === void 0 ? void 0 : ev.target) && 'value' in ev.target) {
+      const el = ev.target;
+      field.value = el['value'];
+    }
     const fieldValidity = this.fieldsState[field.name].validity;
     // only update when validity is different than the previous one
     if (fieldValidity !== ev.detail) {
@@ -1678,6 +1682,7 @@ export class YooFormDynamicComponent {
         slideState[i].validity = isValid;
       }
       (slide.items || []).forEach((field, fieldIndex) => {
+        var _a, _b, _c, _d, _e;
         if (field.type === FormFieldType.renderer && calledInWillLoad) {
           this.containsRenderComponent = true;
         }
@@ -1707,16 +1712,37 @@ export class YooFormDynamicComponent {
           if (required === false) {
             fieldState.validity = !(fieldState.validity === false && !field.required);
           }
-          else if (required === true &&
-            !fieldState.hasValue &&
+          else if (required &&
             field.type !== FormFieldType.checklist &&
             field.type !== FormFieldType.reveal &&
             field.type !== FormFieldType.textsequence &&
             field.type !== FormFieldType.slider &&
+            field.type !== FormFieldType.number &&
             field.type !== FormFieldType.imagecollection &&
+            field.type !== FormFieldType.imagemap &&
             field.type !== FormFieldType.scratch &&
             field.type !== FormFieldType.radio) {
-            fieldState.validity = false;
+            const value = (field === null || field === void 0 ? void 0 : field.value) || ((_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a[field.name]) === null || _b === void 0 ? void 0 : _b.value) || [];
+            if ((field === null || field === void 0 ? void 0 : field.answer) || (field === null || field === void 0 ? void 0 : field.complexAnswer)) {
+              const answers = (field === null || field === void 0 ? void 0 : field.answer) || (field === null || field === void 0 ? void 0 : field.complexAnswer);
+              const getArray = (v) => (flatten(Array.isArray(v) ? v : [v])).filter(Boolean);
+              fieldState.validity = (value === null || value === void 0 ? void 0 : value.length) && (((_c = getArray(value)) === null || _c === void 0 ? void 0 : _c.length) === ((_d = getArray(answers)) === null || _d === void 0 ? void 0 : _d.length));
+              if ([
+                FormFieldType.radio,
+                FormFieldType.selectimage,
+                FormFieldType.select,
+                FormFieldType.selectmulti,
+                FormFieldType.selectchat
+              ].includes(field.type)) {
+                fieldState.validity = !!((_e = getArray(value)) === null || _e === void 0 ? void 0 : _e.length);
+              }
+            }
+            if (!fieldState.hasValue) {
+              fieldState.validity = false;
+            }
+            if (field.type === FormFieldType.hotzone) {
+              fieldState.validity = value && 'x' in value && 'y' in value;
+            }
           }
           this.setFieldState(field, fieldState);
           if (!this.forceReadonly &&
@@ -1996,8 +2022,7 @@ export class YooFormDynamicComponent {
     return this.isLesson();
   }
   isFullscreenFieldType(fieldType) {
-    const FULLSCREEN_FIELDS = [FormFieldType.textsequence, FormFieldType.information, FormFieldType.swipecards];
-    return FULLSCREEN_FIELDS.includes(fieldType);
+    return [FormFieldType.textsequence, FormFieldType.information, FormFieldType.swipecards].includes(fieldType);
   }
   renderHeader() {
     var _a, _b;
@@ -2388,9 +2413,6 @@ export class YooFormDynamicComponent {
       h(TagType, { key: 'slide-' + slideIndex, class: {
           'inputs-container': true,
           'label-top-aligned': (_b = (_a = this.host) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.contains('label-top-aligned'),
-          'full-height': !!slide.items.filter((field) => [FormFieldType.imagecollection, FormFieldType.reveal].includes(field.type)).length,
-          'textsequence': !!slide.items.filter((field) => field.type === FormFieldType.textsequence).length,
-          'swipecards': !!slide.items.filter((field) => field.type === FormFieldType.swipecards).length,
           'confidence': !!slide.items.filter((field) => field.type === FormFieldType.confidence).length,
           'grid-flex': !this.showWizard && ((_c = slideItems === null || slideItems === void 0 ? void 0 : slideItems.filter((f) => this.getFieldVisibility(f))) === null || _c === void 0 ? void 0 : _c.some((f) => f.type === FormFieldType.grid || f.type === FormFieldType.audience)),
           'large': this.isFormCreatorBlock() || this.host.classList.contains('translate-dialog') || this.host.classList.contains('large'),
@@ -2670,17 +2692,16 @@ export class YooFormDynamicComponent {
                   'no-padding-top': field.hideLabel && (this.isInlineRow() || this.isInline()),
                   'form-readonly': this.forceReadonly,
                   'quickview': this.isQuickview() || this.isInCard(),
-                  'lesson': this.isLesson(),
                   'forcedhistory': this.forceHistory,
                   'mission': this.isMission() || this.hasWorkflow(),
                   'mission-validation': this.isMissionValidation,
                   'pdf': this.isPdf,
                   [field.type]: true,
                   [(field === null || field === void 0 ? void 0 : field.extraClass) || '']: true
-                }, style: field.containerStyle, slotInputConfig: isPdfMultiplePhotos ? slotInputConfig : null, field: field, required: required, readonly: readonly, allowFieldValidation: this.allowFieldValidation, commentsUser: this.commentsUser, validationCommentsUser: this.validationCommentsUser, hideComplianceTags: this.hideComplianceTags, forceReadonly: this.forceReadonly, forceDescription: this.forceDescription, comments: comments, validationComments: validationComments, markAsInvalid: markAsInvalid, markAsModified: markAsModified, originalMarkAsInvalid: originalMarkAsInvalid, time: time, useUppercaseLabel: this.host.classList.contains('login-sso'), size: this.formInputSize, showDefaultInstructions: this.isLesson(), onCommented: (ev) => this.onFieldCommented(ev, field), onValidationCommented: (ev) => this.onFieldValidationCommented(ev, field), onValidationMarkAsInvalid: (ev) => this.onFieldValidationMarkAsInvalid(ev, field), hideOptional: this.hideOptional || field.hideOptional || isFieldWithNoValue(field), onCommentFocused: (ev) => this.onFieldFocused(null, ev.detail), onHeaderClicked: (ev) => {
+                }, style: field.containerStyle, slotInputConfig: isPdfMultiplePhotos ? slotInputConfig : null, field: field, formType: this.formType, livePreview: this.isLivePreview(), required: required, readonly: readonly, allowFieldValidation: this.allowFieldValidation, commentsUser: this.commentsUser, validationCommentsUser: this.validationCommentsUser, hideComplianceTags: this.hideComplianceTags, forceReadonly: this.forceReadonly, forceDescription: this.forceDescription, comments: comments, validationComments: validationComments, markAsInvalid: markAsInvalid, markAsModified: markAsModified, originalMarkAsInvalid: originalMarkAsInvalid, time: time, useUppercaseLabel: this.host.classList.contains('login-sso'), size: this.formInputSize, onCommented: (ev) => this.onFieldCommented(ev, field), onValidationCommented: (ev) => this.onFieldValidationCommented(ev, field), onValidationMarkAsInvalid: (ev) => this.onFieldValidationMarkAsInvalid(ev, field), hideOptional: this.hideOptional || field.hideOptional || isFieldWithNoValue(field), onCommentFocused: (ev) => this.onFieldFocused(null, ev.detail), onHeaderClicked: (ev) => {
                   ev.stopPropagation();
                   this.onFormContainerClicked(slideIndex, inputIndex);
-                }, onRemoved: (ev) => this.onFieldRemoved(ev), isLesson: this.isLesson(), isPreview: this.isLessonPreview(), animated: isAnimationsDisabled() ? false : this.animated, fullscreen: this.isFullscreenFieldType(field.type) }, !isPdfMultiplePhotos && inputFn())),
+                }, onRemoved: (ev) => this.onFieldRemoved(ev), animated: isAnimationsDisabled() ? false : this.animated, fullscreen: this.isFullscreenFieldType(field.type) }, !isPdfMultiplePhotos && inputFn())),
               !this.forceHistory && this.renderHistory(field, slideIndex, slideItems, inputIndex),
               isAnswer &&
                 (field.explanation || field.explanationDocument) && [
@@ -3065,7 +3086,7 @@ export class YooFormDynamicComponent {
     this.openPreview.emit('');
   }
   renderInput({ field, data, slideIndex, slideItems, inputIndex, readonly, cssClass, isHistory, previousField, slots }) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _u;
     const fieldState = getFieldState(field, this.fieldsState);
     const required = isRequired(field, this.currentData, this.currentDataFlatten, fieldState.visible, this.suffix, this.session);
     const disabled = isDisabled(field, this.currentData, this.currentDataFlatten, this.suffix, this.session);
@@ -3623,8 +3644,7 @@ export class YooFormDynamicComponent {
           isAnimationFinished: this.isAnimationFinished,
           values: field.values,
           answers: field.answer,
-          isVisible: this.isCurrentSlide(slideIndex),
-          livePreview: this.isLessonPreview()
+          isVisible: this.isCurrentSlide(slideIndex)
         };
         break;
       case FormFieldType.reorder:
@@ -3693,12 +3713,16 @@ export class YooFormDynamicComponent {
           multiple,
           allowOther: field.allowOther,
           useTranslate: field.translate,
+          disableSingleDeselection: field.disableSingleDeselection,
           shuffled: (_k = field.shuffled) !== null && _k !== void 0 ? _k : this.formType === 'lesson',
           answer: field.answer,
           class: field.extraClass,
           description: field.description,
-          debounce: 500,
-          livePreview: this.isLivePreview()
+          livePreview: this.isLivePreview(),
+          ...(field.value && field.disableSingleDeselection && {
+            value: field.value
+          }),
+          debounce: 500
         };
         break;
       }
@@ -3892,6 +3916,7 @@ export class YooFormDynamicComponent {
           allowGif: field.allowGif,
           allowUnsplash: field.allowUnsplash,
           allowAnnotate: field.allowAnnotate,
+          allowCamera: field.allowCamera,
           allowUserImages: field.allowUserImages,
           isImageRecognition: field.isImageRecognition,
           algorithm: field.imageRecognitionAlgorithm,
@@ -4312,6 +4337,7 @@ export class YooFormDynamicComponent {
           values: field.values,
           images: field.images,
           answer: field.answer || field.complexAnswer,
+          required: field.required,
           isVisible: this.isCurrentSlide(slideIndex),
           numberSteps: this.steps && this.steps.length,
           mode: field.swipeMode,
@@ -4322,24 +4348,24 @@ export class YooFormDynamicComponent {
       case FormFieldType.missingword:
         TagType = 'yoo-form-missing-word';
         extraAttrs = {
-          isAnimationFinished: this.isAnimationFinished,
           sentence: field.sentence,
           values: field.values,
           answer: field.answer,
+          required: field.required,
           isVisible: this.isCurrentSlide(slideIndex),
           livePreview: this.isLessonPreview()
         };
         setTimeout(() => this.forceLockIonSlides(), 500); // lock after rendering
         break;
       case FormFieldType.imagetagging:
+        field.answer = (_u = field.annotations) === null || _u === void 0 ? void 0 : _u.map(({ text }) => text);
         TagType = 'yoo-form-image-tagging';
         extraAttrs = {
-          isAnimationFinished: this.isAnimationFinished,
           values: field.values,
           answer: field.answer,
           image: field.image,
+          required: field.required,
           annotations: field.annotations,
-          slideIndex,
           isVisible: this.isCurrentSlide(slideIndex),
           livePreview: this.isLessonPreview()
         };
@@ -4356,7 +4382,7 @@ export class YooFormDynamicComponent {
         extraAttrs = {
           livePreview: this.isLessonPreview(),
           isVisible: this.isCurrentSlide(slideIndex),
-          complexValues: field.complexCategorizeWordsValues,
+          required: field.required,
           categories: field.categories,
           values: field.values,
           answer: field.complexAnswer
@@ -4365,12 +4391,11 @@ export class YooFormDynamicComponent {
       case FormFieldType.connect:
         TagType = 'yoo-form-connect';
         extraAttrs = {
+          shuffled: field.shuffled,
           livePreview: this.isLessonPreview(),
           isVisible: this.isCurrentSlide(slideIndex),
-          description: field.description,
           values: field.complexValues,
-          answer: field.answer,
-          isAnimationFinished: this.isAnimationFinished
+          answer: field.answer
         };
         break;
       case FormFieldType.menu:
@@ -4480,6 +4505,7 @@ export class YooFormDynamicComponent {
         extraAttrs = {
           livePreview: this.isLessonPreview(),
           isVisible: this.isCurrentSlide(slideIndex),
+          required: field.required,
           image: field.image,
           hotzones: field.hotzones,
           hotzonesColor: field.hotzonesColor,

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

@@ -214,41 +214,49 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 
 :host {
-  display: block;
-  max-width: 25rem;
+  --hotzones-color: unset;
+  --inner-max-width: 100%;
+}
+:host yoo-banner {
+  height: 0;
+}
+:host main {
+  position: relative;
+  max-width: var(--inner-max-width);
+  height: max-content;
   margin: 0 auto;
 }
-:host .image {
+:host main .image {
   margin: 0 auto;
   background-color: transparent;
   perspective: 1000px;
 }
-:host .image.flipped .inner-container {
+:host main .image.flipped .inner-container {
   transform: rotateY(180deg);
 }
-:host .image .inner-container {
+:host main .image .inner-container {
   width: 100%;
   height: 100%;
   margin: 0 auto;
   transform-style: preserve-3d;
   transition: transform 0.8s;
 }
-:host .image .inner-container .flip-box-front,
-:host .image .inner-container .flip-box-back {
+:host main .image .inner-container .flip-box-front,
+:host main .image .inner-container .flip-box-back {
   width: 100%;
   height: fit-content;
   background-color: var(--light, #ffffff);
   backface-visibility: hidden;
 }
-:host .image .inner-container .flip-box-back {
+:host main .image .inner-container .flip-box-back {
   z-index: 1;
   transform: rotateY(180deg);
 }
-:host .image .inner-container yoo-img {
+:host main .image .inner-container yoo-img {
   position: relative;
   border-radius: var(--border-radius-08, 0.5rem);
 }
-:host .image .inner-container .hotzone {
+:host main .image .inner-container .hotzone {
   position: absolute;
   display: flex;
   align-items: center;
@@ -261,9 +269,9 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   cursor: pointer;
   transition: background-color 250ms ease-in-out;
 }
-:host .image .inner-container .hotzone.revealed {
-  background-color: var(--success-20, rgba(58, 167, 109, 0.2));
-  border-color: var(--success, #3aa76d);
+:host main .image .inner-container .hotzone.revealed {
+  background-color: var(--success-20, rgba(58, 167, 109, 0.2)) !important;
+  border-color: var(--success, #3aa76d) !important;
 }
 
 :host([detailed-view]) {
@@ -275,7 +283,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   justify-content: space-between;
   max-width: 30rem;
   margin: 0 auto;
-  overflow: scroll;
+  overflow: hidden auto;
 }
 :host([detailed-view]) main #content yoo-img {
   --border-radius: var(--border-radius-08, 0.5rem);
@@ -307,39 +315,21 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   margin: var(--spacing-16, 1rem) auto;
 }
 
-:host(.web) main {
-  height: calc(100% - 3.5rem);
+:host([type=hotzone]) {
+  --initial-target-top-pos: calc(100% + var(--spacing-16, 1rem));
+  --initial-target-left-pos: calc(50% - var(--spacing-24, 1.5rem));
 }
-
 :host([type=hotzone]) yoo-icon[name=gps] {
-  margin: var(--spacing-08, 0.5rem) auto;
+  position: absolute;
+  top: var(--initial-target-top-pos);
+  left: var(--initial-target-left-pos);
   cursor: move;
 }
 
-:host(.modal-view) {
-  max-width: inherit;
-}
-
-:host([readonly]) {
-  position: relative;
-  margin: inherit;
-}
 :host([readonly]) yoo-icon[name=gps] {
-  position: absolute;
-  margin: 0;
   cursor: auto;
 }
 :host([readonly]) .image .inner-container div.hotzone {
   display: flex;
   cursor: auto;
-}
-
-:host([animated]) .image-container {
-  --image-index: 0;
-  transform: translateY(100vh);
-  animation-name: slide-up;
-  animation-duration: 0.4s;
-  animation-timing-function: var(--ease-out-quad);
-  animation-delay: calc(0.5s + var(--image-index) * 0.1s);
-  animation-fill-mode: forwards;
 }