@yoobic/yobi 8.3.1-2 → 8.3.1-20

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.css

@@ -330,7 +330,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   --card-width: 8rem;
   --item-spacing: var(--spacing-16, 1rem);
   width: 100%;
-  height: 100%;
 }
 :host yoo-banner {
   height: 0;

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/radio/form-choice-radio.js

@@ -1,4 +1,4 @@
-import { isNullOrUndefined, translate, translateMulti } from '@shared/utils';
+import { debounce, isNullOrUndefined, translate, translateMulti } from '@shared/utils';
 import { Component, Element, Event, h, Host, Prop, State, Watch } from '@stencil/core';
 import { compact, isString } from 'lodash-es';
 import { setValueAndValidateInput } from '../../../../utils/helpers/form-input-helpers';
@@ -32,12 +32,24 @@ export class YooFormChoiceRadioComponent {
     prepareChoice(this);
     this.textareaValue = !((_a = this.choices) === null || _a === void 0 ? void 0 : _a.includes(this.value)) && (this.value || '');
   }
+  componentWillRender() {
+    const finalDebounceTime = this.showOther ? this.debounce : 0;
+    if (this.finalDebounceTime !== finalDebounceTime) {
+      this.finalDebounceTime = finalDebounceTime;
+      this.setValueAndValidateInputDebounce = debounce((value, inputElement) => {
+        setValueAndValidateInput(value, inputElement);
+      }, this.finalDebounceTime);
+    }
+  }
   componentDidLoad() {
     hasWarnings(this.values, this);
     this.focusTextArea();
   }
   componentDidUpdate() {
-    this.focusTextArea();
+    if (this.focusTextarea) {
+      this.focusTextArea();
+      this.focusTextarea = false;
+    }
   }
   convertToEntities(values) {
     return values.map((value) => ({ _id: value, title: translateMulti(value) }));
@@ -55,21 +67,22 @@ export class YooFormChoiceRadioComponent {
     ev.stopPropagation();
     this.textareaValue = ev.target.value;
     this.selection = [this.textareaValue];
-    setValueAndValidateInput(this.multiple ? this.selection : (_a = this.selection) === null || _a === void 0 ? void 0 : _a[0], this);
+    this.setValueAndValidateInputDebounce(this.multiple ? this.selection : (_a = this.selection) === null || _a === void 0 ? void 0 : _a[0], this);
   }
   onItemSelectRadio(item, preventSetValue = false) {
     var _a;
     if (this.multiple && !preventSetValue) {
       this.selection = this.convertToChoiceFormat(item);
-      setValueAndValidateInput(this.selection, this);
+      this.setValueAndValidateInputDebounce(this.selection, this);
     }
     else {
       const itemVal = isString(item) || isNullOrUndefined(item) ? item : item._id;
       if (itemVal === translate('OTHER')) {
         this.showOther = true;
+        this.focusTextarea = true;
         if (this.textareaValue !== this.value) {
           this.selection = [this.textareaValue];
-          setValueAndValidateInput(this.multiple ? this.selection : (_a = this.selection) === null || _a === void 0 ? void 0 : _a[0], this);
+          this.setValueAndValidateInputDebounce(this.multiple ? this.selection : (_a = this.selection) === null || _a === void 0 ? void 0 : _a[0], this);
         }
       }
       else if (!preventSetValue && !this.isTextareaFocused) {
@@ -102,7 +115,7 @@ export class YooFormChoiceRadioComponent {
     ];
   }
   renderBanner() {
-    return this.livePreview && h("yoo-banner", null,
+    return this.livePreview && !this.readonly && h("yoo-banner", null,
       h("p", { slot: "content" }));
   }
   render() {
@@ -332,6 +345,23 @@ export class YooFormChoiceRadioComponent {
       "attribute": "description",
       "reflect": false
     },
+    "debounce": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "debounce",
+      "reflect": false
+    },
     "values": {
       "type": "unknown",
       "mutable": false,