@yoobic/yobi 8.4.0-2 → 8.4.0-5

package/dist/collection/components/form/form-input-container/form-input-container.css

@@ -202,7 +202,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 /* spacing for padding, margin, etc... */
 /* shadow */
 /*!
- * froala_editor v4.0.13 (https://www.froala.com/wysiwyg-editor)
+ * froala_editor v4.0.14 (https://www.froala.com/wysiwyg-editor)
  * License https://froala.com/wysiwyg-editor/terms/
  * Copyright 2014-2022 Froala Labs
  */
@@ -916,16 +916,6 @@ span.fr-img-caption.fr-view {
   margin-right: var(--spacing-16, 1rem);
 }
 
-:host([fullscreen]) .top-container {
-  display: inherit !important;
-  width: 100% !important;
-  height: 100% !important;
-}
-:host([fullscreen]) .top-container .content-container {
-  width: 100% !important;
-  height: 100% !important;
-}
-
 :host([readonly]) {
   border: none;
 }
@@ -1015,25 +1005,13 @@ span.fr-img-caption.fr-view {
   border-bottom: none;
 }
 
-:host([readonly]:not(.forcedhistory):not(.custom-width)) ::slotted(yoo-form-input),
-:host([readonly]:not(.forcedhistory):not(.custom-width)) ::slotted(yoo-form-image-tagging),
-:host([readonly]:not(.forcedhistory):not(.custom-width)) ::slotted(yoo-form-ranking),
-:host([readonly]:not(.forcedhistory):not(.custom-width)) ::slotted(yoo-form-autocomplete) {
-  display: block;
+:host([readonly]:not(.forcedhistory):not(.custom-width)) ::slotted(*:not(yoo-form-date-time)) {
   margin-top: var(--spacing-08, 0.5rem);
+  padding: 0;
 }
-:host([readonly]:not(.forcedhistory):not(.custom-width)) ::slotted(yoo-form-input).inline,
-:host([readonly]:not(.forcedhistory):not(.custom-width)) ::slotted(yoo-form-image-tagging).inline,
-:host([readonly]:not(.forcedhistory):not(.custom-width)) ::slotted(yoo-form-ranking).inline,
-:host([readonly]:not(.forcedhistory):not(.custom-width)) ::slotted(yoo-form-autocomplete).inline {
+:host([readonly]:not(.forcedhistory):not(.custom-width)) ::slotted(*:not(yoo-form-date-time)).inline {
   margin-top: 0;
 }
-:host([readonly]:not(.forcedhistory):not(.custom-width)) ::slotted(yoo-form-categorize-words),
-:host([readonly]:not(.forcedhistory):not(.custom-width)) ::slotted(yoo-form-connect),
-:host([readonly]:not(.forcedhistory):not(.custom-width)) ::slotted(yoo-form-swipe-cards) {
-  display: block;
-  margin-top: var(--spacing-16, 1rem);
-}
 
 :host([readonly].custom-width.inline-row:not(.label-top-aligned)) .top-container {
   justify-content: center;
@@ -1106,13 +1084,18 @@ span.fr-img-caption.fr-view {
 :host([form-type$=lesson]) .top-container {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-08, 0.5rem);
+  gap: var(--spacing-16, 1rem);
   box-sizing: border-box;
   width: 100%;
   height: 100%;
   margin: 0 auto;
   padding: var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);
 }
+:host([form-type$=lesson]) .top-container::after {
+  margin-top: -1rem;
+  border-bottom: var(--spacing-16, 1rem) solid var(--light, #ffffff);
+  content: "";
+}
 :host([form-type$=lesson]) .top-container::-webkit-scrollbar {
   display: none;
 }
@@ -1125,43 +1108,24 @@ span.fr-img-caption.fr-view {
   font-size: var(--font-size-16, 1rem);
 }
 :host([form-type$=lesson]) .top-container .content-container {
+  flex: 1;
   box-sizing: border-box;
   height: fit-content;
+  max-height: calc(100% - var(--spacing-16, 1rem));
   padding: initial;
 }
 :host([form-type$=lesson]) .top-container .content-container ::slotted(*) {
   box-sizing: border-box;
-  height: 100%;
   margin: 0 auto;
-  padding: 0;
-  padding-bottom: var(--spacing-16, 1rem);
-}
-:host([form-type$=lesson]) .top-container .content-container ::slotted(yoo-range) {
-  padding-bottom: var(--spacing-32, 2rem);
-}
-:host([form-type$=lesson]) .top-container .content-container ::slotted(yoo-text-sequence) {
-  height: 100%;
-  margin: 0 auto;
-}
-:host([form-type$=lesson]) .top-container .content-container ::slotted(yoo-form-ranking),
-:host([form-type$=lesson]) .top-container .content-container ::slotted(yoo-form-carousel),
-:host([form-type$=lesson]) .top-container .content-container ::slotted(yoo-form-swipe-cards) {
-  overflow: hidden auto;
-}
-:host([form-type$=lesson]) .top-container .content-container ::slotted(yoo-scratch-card) {
-  max-width: 25rem !important;
-  height: inherit !important;
 }
-:host([form-type$=lesson]) .top-container .content-container ::slotted(yoo-form-carousel),
-:host([form-type$=lesson]) .top-container .content-container ::slotted(yoo-form-videoplayer),
-:host([form-type$=lesson]) .top-container .content-container ::slotted(yoo-form-image-tagging),
-:host([form-type$=lesson]) .top-container .content-container ::slotted(yoo-form-hotzones),
-:host([form-type$=lesson]) .top-container .content-container ::slotted(yoo-text-sequence),
 :host([form-type$=lesson]) .top-container .content-container ::slotted(yoo-form-document) {
-  max-width: 35rem !important;
+  --outer-container-padding: 0;
 }
-:host([form-type$=lesson]) .top-container .content-container ::slotted(*:not(yoo-markdown):not(yoo-form-connect):not(yoo-form-swipe-cards)) {
-  max-width: 50rem;
+:host([form-type$=lesson]) .top-container .content-container ::slotted(yoo-form-connect) {
+  padding-bottom: var(--spacing-08, 0.5rem);
+}
+:host([form-type$=lesson]) .top-container .content-container ::slotted(yoo-markdown) {
+  padding-bottom: var(--spacing-16, 1rem);
 }
 :host([form-type$=lesson]) .top-container .description {
   font-size: var(--font-size-description);
@@ -1174,47 +1138,48 @@ span.fr-img-caption.fr-view {
   text-transform: var(--text-tranform-title-name);
 }
 
-:host(.web[form-type$=lesson]:not([live-preview])) {
+:host(.web[form-type$=lesson]:not([live-preview]):not(.lesson-live-preview)) {
   display: flex;
   margin: 0;
   transition: all 0.5s ease-in-out 0s;
 }
-:host(.web[form-type$=lesson]:not([live-preview])) .top-container {
+:host(.web[form-type$=lesson]:not([live-preview]):not(.lesson-live-preview)) .top-container {
   padding: 0;
-  overflow-y: auto;
 }
-:host(.web[form-type$=lesson]:not([live-preview])) .top-container .description,
-:host(.web[form-type$=lesson]:not([live-preview])) .top-container .instructions,
-:host(.web[form-type$=lesson]:not([live-preview])) .top-container .label {
+:host(.web[form-type$=lesson]:not([live-preview]):not(.lesson-live-preview)) .top-container::after {
+  border-bottom: var(--spacing-16, 1rem) solid var(--stable-ultralight, #fafafa);
+}
+:host(.web[form-type$=lesson]:not([live-preview]):not(.lesson-live-preview)) .top-container .description,
+:host(.web[form-type$=lesson]:not([live-preview]):not(.lesson-live-preview)) .top-container .instructions,
+:host(.web[form-type$=lesson]:not([live-preview]):not(.lesson-live-preview)) .top-container .label {
   text-align: center;
   background-color: unset;
 }
-:host(.web[form-type$=lesson]:not([live-preview])) .top-container .content-container {
-  height: 100%;
+:host(.web[form-type$=lesson]:not([live-preview]):not(.lesson-live-preview)) .top-container .content-container {
   padding: var(--spacing-16, 1rem);
   background-color: var(--light, #ffffff);
   border-radius: var(--border-radius-08, 0.5rem);
   box-shadow: var(--shadow-02, 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.1));
 }
-:host(.web[form-type$=lesson]:not([live-preview])) .top-container .content-container ::slotted(*) {
-  padding-bottom: 0;
+:host(.web[form-type$=lesson]:not([live-preview]):not(.lesson-live-preview)) .top-container .content-container ::slotted(yoo-markdown) {
+  overflow: hidden auto;
 }
-:host(.web[form-type$=lesson]:not([live-preview])) .top-container .content-container ::slotted(yoo-form-input) {
-  display: block;
-  margin: 0 auto;
+:host(.web[form-type$=lesson]:not([live-preview]):not(.lesson-live-preview)) .top-container .content-container ::slotted(yoo-scratch-card) {
+  max-width: 25rem !important;
+  height: inherit !important;
 }
-:host(.web[form-type$=lesson]:not([live-preview])) .top-container .content-container ::slotted(yoo-form-hotzones) {
-  height: max-content !important;
-  --inner-max-width: 75%;
+:host(.web[form-type$=lesson]:not([live-preview]):not(.lesson-live-preview)) .top-container .content-container ::slotted(yoo-form-carousel),
+:host(.web[form-type$=lesson]:not([live-preview]):not(.lesson-live-preview)) .top-container .content-container ::slotted(yoo-form-videoplayer),
+:host(.web[form-type$=lesson]:not([live-preview]):not(.lesson-live-preview)) .top-container .content-container ::slotted(yoo-text-sequence),
+:host(.web[form-type$=lesson]:not([live-preview]):not(.lesson-live-preview)) .top-container .content-container ::slotted(yoo-form-document) {
+  max-width: 35rem !important;
 }
-:host(.web[form-type$=lesson]:not([live-preview])) .top-container .content-container ::slotted(yoo-form-hotzones),
-:host(.web[form-type$=lesson]:not([live-preview])) .top-container .content-container ::slotted(yoo-video-player),
-:host(.web[form-type$=lesson]:not([live-preview])) .top-container .content-container ::slotted(yoo-markdown) {
-  overflow: hidden auto;
+:host(.web[form-type$=lesson]:not([live-preview]):not(.lesson-live-preview)) .top-container .content-container ::slotted(*:not(yoo-markdown):not(yoo-form-connect):not(yoo-form-swipe-cards)) {
+  max-width: 50rem;
 }
-:host(.web[form-type$=lesson]:not([live-preview])) .top-container .content-container ::slotted(yoo-form-swipe-cards) {
+:host(.web[form-type$=lesson]:not([live-preview]):not(.lesson-live-preview)) .top-container .content-container ::slotted(yoo-form-swipe-cards:not([readonly])) {
   width: calc(100% + var(--spacing-32, 2rem));
-  height: calc(100% + var(--spacing-32, 2rem));
+  height: calc(100% + var(--spacing-16, 1rem));
   margin-top: calc(var(--spacing-16, 1rem) * -1);
   margin-left: calc(var(--spacing-16, 1rem) * -1);
 }
@@ -1387,18 +1352,15 @@ span.fr-img-caption.fr-view {
   padding: 0 !important;
 }
 
-:host(.web[form-type$=lesson][field-type=image]) .content-container {
-  overflow: visible !important;
-}
-:host(.web[form-type$=lesson][field-type=image]) .content-container ::slotted(yoo-form-carousel:not([hidden])) {
-  --card-feed-media-height: 100%;
-}
-
 :host([field-type=hotzonecreator]) .label,
 :host([field-type=imagemapcreator]) .label {
   display: none;
 }
 
+:host(.web[field-type=imagetagging]) .content-container {
+  overflow: inherit !important;
+}
+
 :host([field-type=swipecards]) .content-container {
   overflow: hidden !important;
 }

package/dist/collection/components/form/form-input-container/form-input-container.js

@@ -206,27 +206,6 @@ export class YooFormInputContainerComponent {
       forceUpdate(this);
     }
   }
-  animateNumber() {
-    if (this.host.offsetWidth !== 0) {
-      this.host.style.setProperty('--container-width', this.host.offsetWidth + 'px');
-      this.host.style.setProperty('--container-width-reverse', '-' + this.host.offsetWidth + 'px');
-      if (this.descriptionElement)
-        this.descriptionElement.style.animationName = 'sliding-from-left';
-      else if (this.labelElement)
-        this.labelElement.style.animationName = 'sliding-from-left';
-      this.instructionElement.style.animationName = 'sliding-from-left';
-      this.contentContainerElement.style.animationName = 'sliding-from-right';
-    }
-  }
-  animateSelectImage() {
-    if (this.host.offsetWidth !== 0) {
-      this.host.style.setProperty('--container-width-reverse', '-' + this.host.offsetWidth + 'px');
-      if (this.descriptionElement)
-        this.descriptionElement.style.animationName = 'sliding-from-left';
-      else if (this.labelElement)
-        this.labelElement.style.animationName = 'sliding-from-left';
-    }
-  }
   onRTEContentClick(ev) {
     var _a;
     openImageDetailFromRTE(this.host, this.descriptionElement, (_a = ev === null || ev === void 0 ? void 0 : ev.target) === null || _a === void 0 ? void 0 : _a.src);
@@ -279,7 +258,7 @@ export class YooFormInputContainerComponent {
   renderLabel() {
     var _a, _b, _c;
     const contentClass = ((_a = this.field) === null || _a === void 0 ? void 0 : _a.title) ? 'field-title-name ' : '';
-    return (h("label", { ref: (el) => (this.labelElement = el), class: {
+    return (h("label", { class: {
         label: true,
         center: (_c = (_b = this.field) === null || _b === void 0 ? void 0 : _b.extraClass) === null || _c === void 0 ? void 0 : _c.includes('center'),
         readonly: this.readonly,
@@ -296,14 +275,14 @@ export class YooFormInputContainerComponent {
         instructions: true,
         success: this.host.classList.contains('success') && this.fieldType === FormFieldType.plan,
         'app-color': this.host.classList.contains('app-color') && this.fieldType === FormFieldType.plan
-      }, onClick: () => this.headerClicked.emit(), ref: (el) => (this.instructionElement = el) }, this.getFieldDefaultInstructions()));
+      }, onClick: () => this.headerClicked.emit() }, this.getFieldDefaultInstructions()));
   }
   renderTopText() {
     return [this.showLabel && this.renderLabel(), this.showDescription && this.renderDescription(), this.shouldShowDefaultInstructions && this.renderDefaultInstructions()];
   }
   renderInnerContent() {
     var _a, _b;
-    return (h("div", { ref: (el) => (this.contentContainerElement = el), class: {
+    return (h("div", { class: {
         'content-container': true,
         readonly: this.readonly,
         'full-width': this.isCheckboxOrToggle(this.fieldType),
@@ -421,7 +400,7 @@ export class YooFormInputContainerComponent {
       "mutable": false,
       "complexType": {
         "original": "FormDynamicType",
-        "resolved": "\"form-creator-announcement\" | \"form-creator-block\" | \"form-creator-preview\" | \"form-creator-preview-kanban\" | \"form-creator-preview-lesson\" | \"form-creator-preview-workflow\" | \"kanban\" | \"lesson\" | \"lesson-detail\" | \"lesson-question-result\" | \"mission\" | \"mission-validation\" | \"poll\" | \"service\" | \"todo\" | \"visit\" | \"waitlist\" | \"workflow\"",
+        "resolved": "\"feed\" | \"form-creator-announcement\" | \"form-creator-block\" | \"form-creator-preview\" | \"form-creator-preview-kanban\" | \"form-creator-preview-lesson\" | \"form-creator-preview-workflow\" | \"kanban\" | \"lesson\" | \"lesson-detail\" | \"lesson-question-result\" | \"mission\" | \"mission-validation\" | \"poll\" | \"service\" | \"todo\" | \"visit\" | \"waitlist\" | \"workflow\"",
         "references": {
           "FormDynamicType": {
             "location": "import",

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

@@ -21,19 +21,35 @@ export class YooFormMissingWordComponent {
     var _a;
     this.isVisible && ((_a = this.tags) === null || _a === void 0 ? void 0 : _a.animate());
   }
-  onAnswerChanged(nv, ov) {
+  onAnswerChanged(newValues, oldValues) {
     var _a;
-    if (!isEqual(nv, ov)) {
+    if (!isEqual(newValues, oldValues)) {
       showWarningBanner(this.host, !((_a = this.answer) === null || _a === void 0 ? void 0 : _a.length), 'NOMISSINGVALUES');
     }
   }
-  onValuesChanged(newValues, oldValues) {
+  async onValuesChanged(newValues, oldValues) {
     var _a;
     if (!isEqual(newValues, oldValues)) {
       this.showWarning();
-      (_a = this.tags) === null || _a === void 0 ? void 0 : _a.updateTags({ newValues, oldValues });
+      this.tags = await ((_a = this.tags) === null || _a === void 0 ? void 0 : _a.updateTags({ newValues, oldValues }));
+      this.value = this.droppedValues;
+    }
+  }
+  async isValid() {
+    return this.validity;
+  }
+  validate() {
+    var _a, _b;
+    if (checkArray(this.translatedAnswers)) {
+      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;
     }
   }
+  get droppedValues() {
+    var _a;
+    return (_a = this.tags.getDroppedValues(true)) === null || _a === void 0 ? void 0 : _a.map(droppedValues => this.values.find(value => droppedValues === translateMulti(value)));
+  }
   get isMatchingBrackets() {
     var _a;
     return !!((_a = this.translatedSentence.match(this.bracketsRegexp)) === null || _a === void 0 ? void 0 : _a.length);
@@ -51,40 +67,34 @@ export class YooFormMissingWordComponent {
       });
   }
   get zonesConfig() {
-    const getZoneConfig = (zoneType) => ({ hasOverflow: zoneType === 'tagZone', colorClass: 'light' });
+    const dropZoneConfig = { colorClass: 'light' };
     return {
       hostElement: this.host,
-      tagZoneConfig: getZoneConfig('tagZone'),
-      dropZoneConfig: getZoneConfig('dropZones')
+      tagZoneConfig: { ...dropZoneConfig, hasOverflow: true },
+      dropZoneConfig
     };
   }
   get tagConfig() {
+    const getColorTag = (tagValue) => {
+      if (this.readonly && checkArray(this.value) && this.answer) {
+        return this.value.indexOf(tagValue) === this.answer.indexOf(tagValue) ? 'success-20' : 'danger-20';
+      }
+      return 'app-color';
+    };
     const onReleaseTag = () => {
       this.tags.checkOverflowingTags();
-      this.value = this.tags.getDroppedValues(true)
-        .map(ua => this.values.find(v => ua === translateMulti(v)));
+      this.value = this.droppedValues;
       setValueAndValidateInput(this.value, this);
     };
     return {
       clickToDrop: true,
+      getColorTag,
       onFirstTagAnimationFinished: () => this.revealDropzones = true,
-      getColorTag: (v) => this.getColorTag(v),
       pressTagExtraAction: () => this.tags.setTagsZoneOverflow(false),
-      releaseTagExtraAction: () => onReleaseTag(),
-      resetTagExtraAction: () => onReleaseTag()
+      releaseTagExtraAction: onReleaseTag,
+      resetTagExtraAction: onReleaseTag
     };
   }
-  async isValid() {
-    return this.validity;
-  }
-  validate() {
-    var _a, _b;
-    if (checkArray(this.translatedAnswers)) {
-      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;
-    }
-  }
   componentWillLoad() {
     this.revealDropzones = this.livePreview;
   }
@@ -111,22 +121,6 @@ export class YooFormMissingWordComponent {
   initGame() {
     this.tags = initTags(this.tagConfig, this.zonesConfig);
   }
-  getColorTag(tagValue) {
-    if (this.readonly && checkArray(this.value) && this.answer) {
-      return this.value.indexOf(tagValue) === this.answer.indexOf(tagValue) ? 'success-20' : 'danger-20';
-    }
-    return 'app-color';
-  }
-  getZoneIndex(value) {
-    var _a;
-    if (value.match(this.bracketsRegexp)) {
-      return parseInt(value.match(this.bracketsRegexp)[1], 10);
-    }
-    else if ((_a = this.translatedAnswers) === null || _a === void 0 ? void 0 : _a.includes(value)) {
-      return this.translatedAnswers.indexOf(value);
-    }
-    return -1;
-  }
   renderInstructions() {
     return h("section", { id: "instructions" }, translate(this.placeholder));
   }
@@ -139,9 +133,19 @@ export class YooFormMissingWordComponent {
   }
   renderSentence() {
     const sentence = this.isMatchingBrackets ? this.translatedSentence.split(' ') : this.translatedSentence.split(this.parenthesesRegexp.g);
+    const getZoneIndex = (value) => {
+      var _a;
+      if (value.match(this.bracketsRegexp)) {
+        return parseInt(value.match(this.bracketsRegexp)[1], 10);
+      }
+      else if ((_a = this.translatedAnswers) === null || _a === void 0 ? void 0 : _a.includes(value)) {
+        return this.translatedAnswers.indexOf(value);
+      }
+      return -1;
+    };
     return (h("section", { id: "paragraph" }, (sentence === null || sentence === void 0 ? void 0 : sentence.map(v => {
       var _a;
-      const zoneIndex = this.getZoneIndex(v);
+      const zoneIndex = getZoneIndex(v);
       if (zoneIndex >= 0) {
         return zoneIndex <= this.translatedAnswers.length - 1 ? (h("div", { class: "dropzone", id: `zone-${zoneIndex}`, hidden: this.animated && !this.readonly && !((_a = this.value) === null || _a === void 0 ? void 0 : _a[zoneIndex]) && !this.revealDropzones })) : '';
       }
@@ -188,7 +192,7 @@ export class YooFormMissingWordComponent {
       "reflect": true,
       "defaultValue": "true"
     },
-    "livePreview": {
+    "readonly": {
       "type": "boolean",
       "mutable": false,
       "complexType": {
@@ -202,10 +206,10 @@ export class YooFormMissingWordComponent {
         "tags": [],
         "text": ""
       },
-      "attribute": "live-preview",
+      "attribute": "readonly",
       "reflect": true
     },
-    "readonly": {
+    "livePreview": {
       "type": "boolean",
       "mutable": false,
       "complexType": {
@@ -219,7 +223,7 @@ export class YooFormMissingWordComponent {
         "tags": [],
         "text": ""
       },
-      "attribute": "readonly",
+      "attribute": "live-preview",
       "reflect": true
     },
     "value": {
@@ -374,36 +378,6 @@ export class YooFormMissingWordComponent {
         "resolved": "boolean",
         "references": {}
       }
-    }, {
-      "method": "inputBlurred",
-      "name": "inputBlurred",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "inputFocused",
-      "name": "inputFocused",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
     }, {
       "method": "inputChanged",
       "name": "inputChanged",

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

@@ -207,6 +207,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   width: 100%;
 }
 :host ul {
+  margin: 0;
   padding: 0;
   list-style: none;
 }

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

@@ -1,21 +1,23 @@
 import { Draggable, gsapSet, gsapTimeline, gsapTo, translateMulti } from '@shared/utils';
-import { Component, Element, Event, h, Host, Prop, State, Watch } from '@stencil/core';
-import { clamp } from 'lodash-es';
+import { Component, Element, Event, h, Host, Method, Prop, State, Watch } from '@stencil/core';
+import { clamp, isEqual } from 'lodash-es';
 import { setValueAndValidateInput } from '../../../utils/helpers/form-input-helpers';
 export class YooFormRankingComponent {
   constructor() {
     this.isVisible = false;
     this.sortables = [];
   }
+  onValuesChanged(newValues, oldValues) {
+    this.hasDataChanged = !isEqual(newValues.sort(), oldValues.sort());
+  }
   onIsVisibleChanged() {
     this.isVisible && this.init();
   }
   onModalAnimationFinished() {
     this.isAnimationFinished && this.init();
   }
-  get itemElements() {
-    var _a;
-    return Array.from((_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('li')) || [];
+  async isValid() {
+    return this.validity;
   }
   validate() {
     var _a;
@@ -23,13 +25,22 @@ export class YooFormRankingComponent {
     this.validityChanged.emit(this.validity);
     return this.validity;
   }
+  get itemElements() {
+    return Array.from(this.host.shadowRoot.querySelectorAll('li')) || [];
+  }
   componentDidLoad() {
     this.init();
   }
+  componentDidUpdate() {
+    if (this.hasDataChanged) {
+      this.init();
+    }
+  }
   async init() {
     await this.prepareItems();
     const fittedHeight = this.itemElements.reduce((acc, el) => (acc += el.clientHeight), 0);
-    this.host.style.height = `${fittedHeight + 24}px`;
+    this.host.style.height = `${fittedHeight}px`;
+    this.hasDataChanged = false;
   }
   async prepareItems() {
     !this.readonly && (this.sortables = await Promise.all(this.itemElements.map(element => element && this.initDraggable(element))));
@@ -116,21 +127,6 @@ export class YooFormRankingComponent {
     "$": ["form-ranking.css"]
   }; }
   static get properties() { return {
-    "values": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "string[]",
-        "resolved": "string[]",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    },
     "value": {
       "type": "unknown",
       "mutable": true,
@@ -212,6 +208,21 @@ export class YooFormRankingComponent {
       "attribute": "live-preview",
       "reflect": false
     },
+    "values": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "string[]",
+        "resolved": "string[]",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    },
     "isVisible": {
       "type": "boolean",
       "mutable": false,
@@ -282,8 +293,29 @@ export class YooFormRankingComponent {
         "references": {}
       }
     }]; }
+  static get methods() { return {
+    "isValid": {
+      "complexType": {
+        "signature": "() => Promise<boolean>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
   static get elementRef() { return "host"; }
   static get watchers() { return [{
+      "propName": "values",
+      "methodName": "onValuesChanged"
+    }, {
       "propName": "isVisible",
       "methodName": "onIsVisibleChanged"
     }, {

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

@@ -610,7 +610,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 @keyframes show {
   from {
-    transform: scale(0.85);
+    transform: scale(0.95);
     opacity: 0;
   }
   to {
@@ -786,5 +786,4 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 :host([view=instructions]) main yoo-button {
   align-items: flex-end;
-  padding-bottom: var(--spacing-16, 1rem);
 }

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

@@ -468,12 +468,9 @@ export class YooFormSwipeCardsComponent {
     return (this.readonly &&
       this.categories.map((categoryValue, catIndex) => [
         h("div", { class: "category-title" }, getAnswerCounter(categoryValue)),
-        h("ul", null, Array.from(new Set(this.value[catIndex])).map((userAnswer) => {
-          var _a;
-          return (h("li", { class: getValidationClass(catIndex, userAnswer) },
-            !!((_a = this.images) === null || _a === void 0 ? void 0 : _a.length) && h("yoo-img", { src: getAnswerImage(userAnswer) }),
-            !this.isMode.image && h("yoo-truncate", null, translateMulti(userAnswer))));
-        }))
+        h("ul", null, Array.from(new Set(this.value[catIndex])).map((userAnswer) => (h("li", { class: getValidationClass(catIndex, userAnswer) },
+          !this.isMode.text && h("yoo-img", { src: getAnswerImage(userAnswer) }),
+          !this.isMode.image && h("yoo-truncate", null, translateMulti(userAnswer))))))
       ]));
   }
   renderBanner() {

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

@@ -386,7 +386,7 @@ export class YooFormTextAreaComponent {
   renderTextArea() {
     const hasValue = !isNullOrUndefined(this.value) && this.value !== '';
     return [
-      h("textarea", { ref: (el) => (this.inputEl = el), onClick: (ev) => {
+      h("textarea", { style: { maxHeight: this.maxRows ? `${this.maxRows * LINE_HEIGHT + PADDING}px` : 'auto' }, ref: (el) => (this.inputEl = el), onClick: (ev) => {
           if (isWeb() && isFirefox()) {
             this.inputEl.focus();
             this.onInputFocused('textarea');

package/dist/collection/components/grid/grid-calendar/grid-calendar.css

@@ -2002,7 +2002,7 @@ vertical slots in both the header AND the body
 
 
 /*!
- * froala_editor v4.0.13 (https://www.froala.com/wysiwyg-editor)
+ * froala_editor v4.0.14 (https://www.froala.com/wysiwyg-editor)
  * License https://froala.com/wysiwyg-editor/terms/
  * Copyright 2014-2022 Froala Labs
  */