@yoobic/yobi 8.3.1-2 → 8.3.1-20

package/dist/collection/components/form/form-missing-word/form-missing-word.css

@@ -280,7 +280,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   display: block;
   padding: var(--spacing-04, 0.25rem);
   overflow: visible;
-  border: 0.0625rem solid transparent;
 }
 :host .instructions {
   margin: var(--spacing-32, 2rem) 0 var(--spacing-08, 0.5rem);
@@ -290,6 +289,10 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host yoo-banner {
   height: 0;
 }
+:host yoo-tag {
+  position: relative;
+  height: fit-content;
+}
 :host .dropzone#zone-tags {
   min-height: 5rem;
   margin: calc(var(--spacing-08, 0.5rem) / -2) calc(var(--spacing-08, 0.5rem) / -2);
@@ -317,13 +320,9 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   border-bottom-color: var(--app-color, #5a30f4);
   transform: translateY(0.75rem);
 }
-:host .dropzone:not(#zone-tags).hit {
+:host .dropzone:not(#zone-tags)[hit] {
   background: var(--stable-alt-40, rgba(208, 208, 208, 0.4));
 }
-:host .dropzone:not(#zone-tags) yoo-tag {
-  position: relative;
-  height: fit-content;
-}
 :host .dropzone-container {
   display: inline-flex;
 }
@@ -332,13 +331,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   user-select: none;
 }
 
-:host(.playing) {
-  background-color: var(--stable-light-40, rgba(241, 241, 241, 0.4));
-  border: 0.0625rem solid var(--stable-alt, #d0d0d0);
-  border-radius: var(--border-radius-08, 0.5rem);
-  transition: background-color 0.5s ease-in-out, border 0.5s ease-in-out;
-}
-
 :host([readonly]) .dropzone:not(#zone-tags) {
   margin-right: 0;
   margin-left: 0;

package/dist/collection/components/form/form-missing-word/form-missing-word.js

@@ -2,7 +2,7 @@ import { formatTranslation, isValueATranslationKey, MAX_TAGS_CHARACTERS, transla
 import { Component, Element, Event, h, Host, Method, Prop, State, Watch } from '@stencil/core';
 import { isEqual } from 'lodash-es';
 import { initTags } from '../../../utils/draggables';
-import { checkArray, getDuplicatedValue, hasDuplicates, showWarningAlert } from '../../../utils/helpers/draggable-tags-helpers';
+import { checkArray, getDuplicatedValue, hasDuplicates, showWarningBanner } from '../../../utils/helpers/draggable-tags-helpers';
 import { setValueAndValidateInput } from '../../../utils/helpers/form-input-helpers';
 // The [[0]] permission is only for YOOBIC users and should never be used for clients.\nThe clientadmin permission gives the permission to access and modify the tenant database and groups .
 export class YooFormMissingWordComponent {
@@ -14,6 +14,9 @@ export class YooFormMissingWordComponent {
     this.bracketsRegexp = /\[\[([^)]+)]]/;
     this.parenthesesRegexp = { g: /\(\(([^)]+)\)\)/g, i: /\(\(([^)]+)\)\)/i };
   }
+  onRequiredChanged() {
+    this.validate();
+  }
   onIsVisibleChanged() {
     var _a;
     this.isVisible && ((_a = this.tags) === null || _a === void 0 ? void 0 : _a.animate());
@@ -21,7 +24,7 @@ export class YooFormMissingWordComponent {
   onAnswerChanged(nv, ov) {
     var _a;
     if (!isEqual(nv, ov)) {
-      showWarningAlert(this.host, !((_a = this.answer) === null || _a === void 0 ? void 0 : _a.length), 'NOMISSINGVALUES');
+      showWarningBanner(this.host, !((_a = this.answer) === null || _a === void 0 ? void 0 : _a.length), 'NOMISSINGVALUES');
     }
   }
   onValuesChanged(newValues, oldValues) {
@@ -58,7 +61,6 @@ export class YooFormMissingWordComponent {
   get tagConfig() {
     const onReleaseTag = () => {
       this.tags.checkOverflowingTags();
-      this.host.classList.remove('playing');
       const userAnswers = this.tags.getDroppedValues(true)
         .map(ua => this.values.find(v => ua === translateMulti(v)));
       if (!this.livePreview) {
@@ -72,7 +74,7 @@ export class YooFormMissingWordComponent {
       clickToDrop: true,
       onFirstTagAnimationFinished: () => this.revealDropzones = true,
       getColorTag: (v) => this.getColorTag(v),
-      pressTagExtraAction: () => this.host.classList.add('playing'),
+      pressTagExtraAction: () => this.tags.setTagsZoneOverflow(false),
       releaseTagExtraAction: () => onReleaseTag(),
       resetTagExtraAction: () => onReleaseTag()
     };
@@ -83,7 +85,7 @@ export class YooFormMissingWordComponent {
   validate() {
     var _a, _b;
     if (checkArray(this.translatedAnswers)) {
-      this.validity = ((_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.filter(v => v)) === null || _b === void 0 ? void 0 : _b.length) === this.translatedAnswers.length;
+      this.validity = !this.required || (((_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.filter(v => v)) === null || _b === void 0 ? void 0 : _b.length) === this.translatedAnswers.length);
       this.validityChanged.emit(this.validity);
       return this.validity;
     }
@@ -109,11 +111,10 @@ export class YooFormMissingWordComponent {
     const hasTooLongValues = newValuesLength === null || newValuesLength === void 0 ? void 0 : newValuesLength.some((n) => n > MAX_TAGS_CHARACTERS);
     const bannerMessage = hasTooLongValues ? 'MAXCHARACTERSREACHEDFORVALUES' : hasDuplicateValues ? 'NODUPLICATEVALUES' : missingValues ? 'NOMISSINGVALUES' : '';
     const showBanner = hasDuplicateValues || hasTooLongValues || missingValues;
-    showWarningAlert(this.host, showBanner, bannerMessage);
+    showWarningBanner(this.host, showBanner, bannerMessage);
   }
   initGame() {
     this.tags = initTags(this.tagConfig, this.zonesConfig);
-    this.showWarning();
   }
   getColorTag(tagValue) {
     if (this.readonly && checkArray(this.value) && this.answer) {
@@ -139,7 +140,7 @@ export class YooFormMissingWordComponent {
       h("div", { class: "dropzone", id: "zone-tags" }));
   }
   renderBanner() {
-    return this.livePreview && h("yoo-banner", null,
+    return this.livePreview && !this.readonly && h("yoo-banner", null,
       h("p", { slot: "content" }));
   }
   renderSentence() {
@@ -190,24 +191,9 @@ export class YooFormMissingWordComponent {
       "reflect": true,
       "defaultValue": "true"
     },
-    "value": {
-      "type": "unknown",
-      "mutable": true,
-      "complexType": {
-        "original": "string[]",
-        "resolved": "string[]",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    },
-    "validity": {
+    "livePreview": {
       "type": "boolean",
-      "mutable": true,
+      "mutable": false,
       "complexType": {
         "original": "boolean",
         "resolved": "boolean",
@@ -219,15 +205,15 @@ export class YooFormMissingWordComponent {
         "tags": [],
         "text": ""
       },
-      "attribute": "validity",
-      "reflect": false
+      "attribute": "live-preview",
+      "reflect": true
     },
-    "placeholder": {
-      "type": "string",
+    "readonly": {
+      "type": "boolean",
       "mutable": false,
       "complexType": {
-        "original": "string",
-        "resolved": "string",
+        "original": "boolean",
+        "resolved": "boolean",
         "references": {}
       },
       "required": false,
@@ -236,16 +222,15 @@ export class YooFormMissingWordComponent {
         "tags": [],
         "text": ""
       },
-      "attribute": "placeholder",
-      "reflect": false,
-      "defaultValue": "'SELECTRIGHTWORDS'"
+      "attribute": "readonly",
+      "reflect": true
     },
-    "livePreview": {
-      "type": "boolean",
-      "mutable": false,
+    "value": {
+      "type": "unknown",
+      "mutable": true,
       "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
+        "original": "string[]",
+        "resolved": "string[]",
         "references": {}
       },
       "required": false,
@@ -253,13 +238,11 @@ export class YooFormMissingWordComponent {
       "docs": {
         "tags": [],
         "text": ""
-      },
-      "attribute": "live-preview",
-      "reflect": false
+      }
     },
-    "required": {
+    "validity": {
       "type": "boolean",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "boolean",
         "resolved": "boolean",
@@ -271,15 +254,15 @@ export class YooFormMissingWordComponent {
         "tags": [],
         "text": ""
       },
-      "attribute": "required",
+      "attribute": "validity",
       "reflect": false
     },
-    "readonly": {
-      "type": "boolean",
+    "placeholder": {
+      "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
+        "original": "string",
+        "resolved": "string",
         "references": {}
       },
       "required": false,
@@ -288,8 +271,9 @@ export class YooFormMissingWordComponent {
         "tags": [],
         "text": ""
       },
-      "attribute": "readonly",
-      "reflect": true
+      "attribute": "placeholder",
+      "reflect": false,
+      "defaultValue": "'SELECTRIGHTWORDS'"
     },
     "sentence": {
       "type": "string",
@@ -308,7 +292,7 @@ export class YooFormMissingWordComponent {
       "attribute": "sentence",
       "reflect": false
     },
-    "isVisible": {
+    "required": {
       "type": "boolean",
       "mutable": false,
       "complexType": {
@@ -322,10 +306,10 @@ export class YooFormMissingWordComponent {
         "tags": [],
         "text": ""
       },
-      "attribute": "is-visible",
+      "attribute": "required",
       "reflect": false
     },
-    "isAnimationFinished": {
+    "isVisible": {
       "type": "boolean",
       "mutable": false,
       "complexType": {
@@ -339,7 +323,7 @@ export class YooFormMissingWordComponent {
         "tags": [],
         "text": ""
       },
-      "attribute": "is-animation-finished",
+      "attribute": "is-visible",
       "reflect": false
     },
     "answer": {
@@ -459,6 +443,9 @@ export class YooFormMissingWordComponent {
   }; }
   static get elementRef() { return "host"; }
   static get watchers() { return [{
+      "propName": "required",
+      "methodName": "onRequiredChanged"
+    }, {
       "propName": "isVisible",
       "methodName": "onIsVisibleChanged"
     }, {

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

@@ -384,8 +384,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   visibility: visible;
   opacity: 1;
 }
-:host(:not([readonly])) #cards,
-:host(:not([readonly])) .card {
+:host(:not([readonly])) #cards, :host(:not([readonly])) .card {
   width: 100%;
   height: 100%;
 }
@@ -425,7 +424,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host(:not([readonly])) #cards .card.current:not(.revealing) {
   transform: translate(0%, 9%) scale(1);
   opacity: 1;
-  transition-delay: 200ms;
+  transition-delay: 0.25s;
 }
 :host(:not([readonly])) #cards .card.current.revealing {
   animation: "current" 0.25s ease-in-out;
@@ -444,7 +443,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host(:not([readonly])) #cards .card.second:not(.revealing) {
   transform: translate(0%, 3.5%) scale(0.95);
   opacity: 1;
-  transition-delay: 400ms;
+  transition-delay: 0.5s;
 }
 :host(:not([readonly])) #cards .card.second.revealing {
   animation: "second" 0.25s ease-in-out;
@@ -463,7 +462,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host(:not([readonly])) #cards .card.third:not(.revealing) {
   transform: translate(0%, -2%) scale(0.9);
   opacity: 1;
-  transition-delay: 600ms;
+  transition-delay: 0.75s;
 }
 :host(:not([readonly])) #cards .card.third.revealing {
   animation: "third" 0.25s ease-in-out;
@@ -728,9 +727,9 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   --inner-height: 5rem;
 }
 :host(.web:not([live-preview])[view=instructions]) yoo-button {
-  position: fixed;
-  right: var(--spacing-32, 2rem);
-  bottom: var(--spacing-16, 1rem);
+  margin-right: 0;
+  margin-left: auto;
+  padding-bottom: 0;
 }
 
 :host([view=instructions]) main {

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

@@ -3,7 +3,7 @@ import { Draggable, findParent, getMedia, getUUID, gsapSet, gsapTimeline, gsapTo
 import { Component, Element, Event, forceUpdate, h, Host, Prop, State, Watch } from '@stencil/core';
 import { clamp, inRange, isEqual, shuffle } from 'lodash-es';
 import { getAppContext } from '../../../utils/helpers/common-helpers';
-import { 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 YooFormSwipeCardsComponent {
   constructor() {
@@ -194,7 +194,7 @@ export class YooFormSwipeCardsComponent {
       const bannerMessage = this.hasDuplicateValues ? 'NODUPLICATEVALUES' : this.hasEmptyValues ? 'NOEMPTYVALUES' : !this.hasTwoCategories ? 'NOTFULFILLEDCATEGORIES' : '';
       const bannerColor = this.hasDuplicateValues || !this.hasTwoCategories ? 'danger' : this.hasEmptyValues ? 'warning' : null;
       const showAlert = !!bannerMessage;
-      showWarningAlert(this.host, showAlert, bannerMessage, bannerColor);
+      showWarningBanner(this.host, showAlert, bannerMessage, bannerColor);
       this.hasDataChanged = !showAlert;
       if (showAlert)
         this.showInstructionView = true;
@@ -366,14 +366,15 @@ export class YooFormSwipeCardsComponent {
           third: hasCurrentCard && i === currentCardIndex + 2,
           revealing: this.revealCards
         }, onTransitionEnd: () => {
+          var _a, _b;
           nbrCardRevealed += 1;
           if (this.revealCards && nbrCardRevealed === Math.min(s.length + 1, 3)) {
             this.enableButtonActions = true;
           }
           if (isCurrentCard) {
-            this.currentCardElement.style.removeProperty('z-index');
+            (_b = (_a = this.currentCardElement) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.removeProperty('z-index');
           }
-        }, ...{
+        }, ref: (el) => (this.cardsElements[i] = el), ...{
           type: this.mode,
           ...(swipedDirection && { direction: swipedDirection })
         } },

package/dist/collection/components/form/form-text-area/form-text-area.js

@@ -24,12 +24,21 @@ export class YooFormTextAreaComponent {
     this.updateSegmentsCountDebounce = debounce(() => this.updateSegmentsCount(), 2000);
     this.scrollIntoViewOnFocus = false;
   }
+  get isRichText() {
+    return this.allowMention || this.allowCustomInput;
+  }
   onValueChanged(value) {
+    if (!this.inputEl) {
+      return;
+    }
     // clean input and sync mention ids when the value is cleared from outside
-    if (this.allowMention && this.inputEl && !value) {
+    if (this.isRichText && !value) {
       this.inputEl.innerHTML = replaceAtTagToMentionTag(value, this.mentions);
       this.syncMentionIds();
     }
+    else if (!this.isRichText) {
+      this.inputEl.value = value;
+    }
   }
   allowMentionChanged() {
     forceUpdate(this);
@@ -106,7 +115,7 @@ export class YooFormTextAreaComponent {
     }
   }
   componentDidLoad() {
-    if (this.allowMention || this.allowCustomInput) {
+    if (this.isRichText) {
       // block click event when editing the tag
       if (this.inputEl) {
         if (this.value) {
@@ -123,6 +132,9 @@ export class YooFormTextAreaComponent {
         const textArea = this.inputEl;
         textArea.setAttribute('style', `resize: ${this.resizable};`);
       }
+      if (this.inputEl && this.value) {
+        this.inputEl.value = this.value;
+      }
     }
     if (isNativeMobile() && isIOS()) {
       enableKeyboardResize();
@@ -385,7 +397,7 @@ export class YooFormTextAreaComponent {
   renderTextArea() {
     const hasValue = !isNullOrUndefined(this.value) && this.value !== '';
     return [
-      h("textarea", { ref: (el) => (this.inputEl = el), value: this.value || '', onClick: (ev) => {
+      h("textarea", { ref: (el) => (this.inputEl = el), onClick: (ev) => {
           if (isWeb() && isFirefox()) {
             this.inputEl.focus();
             this.onInputFocused('textarea');
@@ -401,7 +413,7 @@ export class YooFormTextAreaComponent {
     return [
       h("div", { class: "outer-container" },
         h("div", { class: "inner-container" },
-          this.allowMention || this.allowCustomInput ? this.renderMentionContainer() : this.renderTextArea(),
+          this.isRichText ? this.renderMentionContainer() : this.renderTextArea(),
           h("slot", { name: "placeholder" })),
         h("slot", { name: "right" }),
         ((_a = this.inlineActions) === null || _a === void 0 ? void 0 : _a.length) > 0 &&

package/dist/collection/components/form/form-text-editor/form-text-editor.js

@@ -110,10 +110,6 @@ export class YooFormTextEditorComponent {
   onTranslationsChange() {
     this.setLocalValue(true);
   }
-  async forceUpdateValue(value) {
-    setValueAndValidateInput(value, this.host);
-    this.editor.html.set(value);
-  }
   async updateSizing() {
     var _a;
     if ((_a = this === null || this === void 0 ? void 0 : this.editor) === null || _a === void 0 ? void 0 : _a.size) {
@@ -1292,25 +1288,6 @@ export class YooFormTextEditorComponent {
       }
     }]; }
   static get methods() { return {
-    "forceUpdateValue": {
-      "complexType": {
-        "signature": "(value: string) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
     "updateSizing": {
       "complexType": {
         "signature": "() => Promise<void>",