@yoobic/yobi 8.6.0-0 → 8.6.0-1

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

@@ -113,7 +113,7 @@ export class YooFormDocumentComponent {
     }
   }
   renderCardFile() {
-    return (h("yoo-card-file", { isVisible: this.isVisible, file: this.document }));
+    return (h("yoo-card-file", { type: getType(this.document), isVisible: this.isVisible, file: this.document }));
   }
   renderBase() {
     var _a;

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, 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, showContextMenu, showModal, showToast, slenderizeObject, translate, translateMulti, updateDatasetFilters } from '@shared/utils';
+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, 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';
@@ -1477,6 +1477,7 @@ export class YooFormDynamicComponent {
     ev.stopPropagation();
     this.cleanHiddenReadonlyFieldsByInvalidRules();
     this.save.emit(this.currentData);
+    dispatchCustomEvent('pauseMedia', window);
   }
   onWorflowReject(ev) {
     ev.stopPropagation();

package/dist/collection/components/form/form-swipe-cards/form-swipe-cards.css

@@ -515,7 +515,6 @@ svg:not(:root) {
 :host(:not([readonly])) #game {
   display: grid;
   grid-template-rows: calc(min(65vw, 16rem) * 4 / 3 + 6%) auto;
-  overflow: hidden auto;
 }
 :host(:not([readonly])) #game #background {
   position: relative;
@@ -706,9 +705,13 @@ svg:not(:root) {
 :host([view=instructions]) main {
   grid-template-rows: 1fr auto;
 }
+:host([view=instructions]) main #instructions {
+  overflow-y: auto;
+}
 :host([view=instructions]) main #instructions #header {
   display: flex;
   flex-direction: column;
+  word-break: break-word;
 }
 :host([view=instructions]) main #instructions #header #title {
   font-weight: bold;
@@ -749,6 +752,14 @@ svg:not(:root) {
   --outer-container-padding: cssvar(spacing-16) cssvar(spacing-16);
   width: calc(100% - var(--spacing-16, 1rem));
 }
+:host([view=instructions]) main #start {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  background: var(--light, #ffffff);
+}
 :host([view=instructions]) main yoo-button {
   align-items: flex-end;
 }
@@ -763,10 +774,21 @@ svg:not(:root) {
   font-weight: bold;
   font-size: var(--font-size-28, 1.75rem);
 }
-:host(.mobile[view=instructions]) yoo-button {
-  margin: var(--spacing-16, 1rem) 0;
+:host(.mobile[view=instructions]) #instructions #categories {
+  padding-bottom: calc(var(--spacing-64, 4rem));
+}
+:host(.mobile[view=instructions]) #start {
+  bottom: calc(var(--spacing-08, 0.5rem) * -1);
+  height: 5.875rem;
+}
+:host(.mobile[view=instructions]) #start yoo-button {
+  width: 100%;
+  margin-bottom: var(--safe-area-inset-bottom);
 }
 
+:host(.web[view=instructions]) #instructions {
+  height: calc(100% - (3.875rem - var(--spacing-16, 1rem)));
+}
 :host(.web[view=instructions]) yoo-icon[name=swipe-explanation] {
   width: 5rem;
   height: 5rem;
@@ -774,13 +796,19 @@ svg:not(:root) {
   --inner-width: 5rem;
   --inner-height: 5rem;
 }
-:host(.web[view=instructions]) yoo-button {
+:host(.web[view=instructions]) #start {
+  bottom: calc(var(--spacing-16, 1rem) * -1);
+  height: 3.875rem;
+}
+:host(.web[view=instructions]) #start yoo-button {
+  width: fit-content;
   margin-right: var(--spacing-16, 1rem);
   margin-left: auto;
 }
 
 :host(.web[view=game]) main {
   grid-template-rows: auto 1fr;
+  overflow: hidden auto;
 }
 :host(.web[view=game]) main #actions {
   top: 109%;
@@ -800,6 +828,7 @@ svg:not(:root) {
   padding: var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);
   line-height: 1.75;
   text-align: center;
+  word-break: break-word;
   background-color: var(--stable-ultralight, #fafafa);
 }
 :host(.web) #header #title {

package/dist/collection/components/form/form-swipe-cards/form-swipe-cards.js

@@ -1,5 +1,5 @@
 import { SwipeCardsDirection, SwipeCardsMode } from '@shared/interfaces';
-import { Draggable, findParent, getMedia, getUUID, gsapSet, gsapTimeline, gsapTo, isCloudinaryLink, isWeb, Power1, translate, translateMulti } from '@shared/utils';
+import { Draggable, findParent, getMedia, getUUID, gsapSet, gsapTimeline, gsapTo, isCloudinaryLink, isIOS, isNativeMobile, isWeb, Power1, translate, translateMulti } from '@shared/utils';
 import { forceUpdate, h, Host } from '@stencil/core';
 import { clamp, inRange, isEqual, shuffle } from 'lodash-es';
 import { getAppContext } from '../../../utils/helpers/common-helpers';
@@ -171,9 +171,9 @@ export class YooFormSwipeCardsComponent {
       this.hasDataChanged = false;
       this.initDraggable();
       setTimeout(() => {
-        if (this.host.scrollHeight > this.host.clientHeight) {
-          this.host.scrollTo({
-            top: this.host.scrollHeight,
+        if (this.mainElement.scrollHeight > this.mainElement.clientHeight) {
+          this.mainElement.scrollTo({
+            top: this.mainElement.scrollHeight,
             behavior: 'smooth'
           });
         }
@@ -291,6 +291,11 @@ export class YooFormSwipeCardsComponent {
     swipeAnimation.fromTo(this.buttons.left, 1, { scale: 1.5 }, { scale: 1 }, 0).fromTo(this.buttons.right, 1, { scale: 1 }, { scale: 1.5 }, 1).progress(0.5);
     const onStartSwiping = () => {
       if (isSwipeable(cardElement)) {
+        const { width, height } = cardElement.getBoundingClientRect();
+        isNativeMobile() && isIOS() && Object.assign(cardElement.style, {
+          width: `${width}px`,
+          height: `${height}px`
+        });
         returnedAnimation === null || returnedAnimation === void 0 ? void 0 : returnedAnimation.kill();
       }
     };
@@ -421,11 +426,11 @@ export class YooFormSwipeCardsComponent {
   }
   renderStartButton() {
     return (!this.readonly &&
-      this.showInstructionView && (h("yoo-button", { disabled: !this.hasData || !this.isDataValid, size: isWeb(this.host) ? 'medium' : 'large', color: "app-color", onClick: () => {
+      this.showInstructionView && (h("section", { id: "start" }, h("yoo-button", { disabled: !this.hasData || !this.isDataValid, size: isWeb(this.host) ? 'medium' : 'large', color: "app-color", onClick: () => {
         this.revealCards = true;
         this.showInstructionView = false;
         this.displayFooterElement();
-      } }, translate('START'))));
+      } }, translate('START')))));
   }
   renderInstructions() {
     return [h("section", { id: "instructions" }, this.renderHeaderInstructions()), this.renderStartButton()];
@@ -451,7 +456,7 @@ export class YooFormSwipeCardsComponent {
       !this.readonly && (h("yoo-banner", null, h("p", { slot: "content" }))));
   }
   renderMain() {
-    return h("main", null, !this.readonly && (this.showInstructionView ? this.renderInstructions() : this.renderGame()));
+    return h("main", { ref: (el) => this.mainElement = el }, !this.readonly && (this.showInstructionView ? this.renderInstructions() : this.renderGame()));
   }
   render() {
     return (h(Host, { class: { ...getAppContext(this.host), 'swiper-no-swiping': !this.readonly }, ...{ view: this.showInstructionView ? 'instructions' : 'game' } }, this.renderBanner(), this.renderMain(), this.renderSummary()));

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

@@ -17,6 +17,10 @@ export class YooFormVideoPlayerComponent {
       this.videoInstance.pauseVideo();
     }
   }
+  onPauseMedia() {
+    var _a, _b;
+    (_b = (_a = this.videoInstance) === null || _a === void 0 ? void 0 : _a.pauseVideo) === null || _b === void 0 ? void 0 : _b.call(_a);
+  }
   connectedCallback() {
     if (isOffline()) {
       this.inputChanged.emit(true);
@@ -153,4 +157,13 @@ export class YooFormVideoPlayerComponent {
         "methodName": "updateVisibility"
       }];
   }
+  static get listeners() {
+    return [{
+        "name": "pauseMedia",
+        "method": "onPauseMedia",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }];
+  }
 }