@yoobic/yobi 7.7.40 → 7.7.44

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

@@ -1,7 +1,8 @@
-import { Draggable, findParent, getCssColor, getUUID, gsapTo, isImageUrl, isNullOrUndefined, translateMulti } from '@shared/utils';
-import { Component, Element, Event, h, Prop, Watch } from '@stencil/core';
-import { setValueAndValidateInput } from '@utils';
-const ITEM_TYPES = ['draggable', 'connectable'];
+import { Draggable, getUUID, gsapTo, isImageUrl, translateMulti } from '@shared/utils';
+import { Component, Element, Event, h, Host, Prop, State, Watch } from '@stencil/core';
+import { getAppContext, setValueAndValidateInput, showWarningAlert } from '@utils';
+import { difference, isEqual, shuffle } from 'lodash-es';
+import { CONNECT_TYPES } from './types';
 export class YooFormConnectComponent {
   constructor() {
     /**
@@ -20,391 +21,251 @@ export class YooFormConnectComponent {
      * true if component's parent slide is visible within a `yoo-form-dynamic`
      */
     this.isVisible = false;
-    this.overlapThreshold = '65%';
-    this.hoverColor = 'stable-light';
-    this.subContainerElements = [];
     this.colors = ['warning', 'accent', 'royal', 'info', 'energized'];
-    this.defaultColors = ['light-to-dark', 'dark-to-light'];
-    this.animationDelay = this.animated ? 0.25 : 0;
-    this.validationClasses = { valid: { icon: 'check', iconColor: 'success' }, invalid: { icon: 'cross', iconColor: 'danger' } };
   }
-  onRequireChanged() {
-    this.checkAnswersValidity();
+  onValuesChanged() {
+    showWarningAlert(this.host, !this.isGameMatchable, 'NOTALLPAIREDVALUES');
   }
-  isValid() {
+  onValidityChanged() {
     this.validityChanged.emit(this.validity);
   }
-  initValues() {
-    this.dragEnded.emit(true);
-    this.initItems();
-    this.shuffleConnectValues();
-    this.initUserAnswersArray();
-  }
-  onIsVisibleChanged(state) {
-    if (state) {
-      this.initConnect();
+  onValueChanged() {
+    if (!isEqual(this.value, this.userAnswers)) {
+      this.connectItems();
+      this.validateUserAnswers(this.value);
     }
   }
-  onModalAnimationFinished(state) {
-    if (state) {
-      this.initConnect();
-    }
+  initAnswerChanged() {
+    this.prepareGame();
   }
-  componentWillLoad() {
-    this.initValues();
-  }
-  componentDidLoad() {
-    this.initConnect();
-    this.preserveColors();
-    this.updateDraggables();
-  }
-  componentDidUpdate() {
-    if (this.livePreview) {
-      this.initConnect();
-      this.preserveColors();
-      this.updateDraggables();
+  async onIsVisibleChanged(state) {
+    if (state) {
+      await this.scrollToRevealGame();
+      this.setScrollableHeight();
     }
   }
   get hasValues() {
-    var _a;
-    return !!(((_a = this.values) === null || _a === void 0 ? void 0 : _a.length) && (this.values[0].length || this.values[1].length));
+    var _a, _b, _c, _d;
+    return !!(((_b = (_a = this.values) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.length) || ((_d = (_c = this.values) === null || _c === void 0 ? void 0 : _c[1]) === null || _d === void 0 ? void 0 : _d.length));
   }
-  get isConnectMatchable() {
-    var _a, _b;
-    return ((_a = this.draggables) === null || _a === void 0 ? void 0 : _a.length) === ((_b = this.connectables) === null || _b === void 0 ? void 0 : _b.length);
+  get isGameMatchable() {
+    var _a, _b, _c, _d;
+    return ((_b = (_a = this.values) === null || _a === void 0 ? void 0 : _a[0].filter(v => v)) === null || _b === void 0 ? void 0 : _b.length) === ((_d = (_c = this.values) === null || _c === void 0 ? void 0 : _c[1].filter(v => v)) === null || _d === void 0 ? void 0 : _d.length);
   }
-  updateDraggables() {
-    if (this.draggables) {
-      this.draggables = this.draggables.map((draggable) => Object.assign(draggable, { draggableInstance: this.getDraggableInstance(draggable.id) }));
-    }
+  get draggableElements() {
+    return Array.from(this.host.shadowRoot.querySelectorAll('.draggable') || []);
   }
-  initConnect() {
-    if (this.mainContainerElement) {
-      this.getScrollableArea();
-    }
+  get connectableElements() {
+    return Array.from(this.host.shadowRoot.querySelectorAll('.connectable') || []);
   }
-  shuffleObjects(items) {
-    if (items === null || items === void 0 ? void 0 : items.length) {
-      const newItems = items;
-      for (let i = items.length - 1; i > 0; i--) {
-        const pos = Math.floor(Math.random() * (i + 1));
-        const temp = newItems[i];
-        newItems[i] = newItems[pos];
-        newItems[pos] = temp;
-      }
-      return newItems;
-    }
+  componentWillLoad() {
+    this.prepareGame();
   }
-  shuffleConnectValues() {
+  componentWillUpdate() {
     var _a;
-    if (((_a = this.values) === null || _a === void 0 ? void 0 : _a.length) && this.shuffled) {
-      [this.draggables, this.connectables].forEach((items) => (items = this.shuffleObjects(items)));
+    if (!((_a = this.draggables) === null || _a === void 0 ? void 0 : _a.find(d => d === null || d === void 0 ? void 0 : d.draggableInstance))) {
+      this.initGame();
     }
   }
-  getElement(id, container) {
-    const containerElement = this.mainContainerElement.querySelector(`div.${container}-container`);
-    return containerElement === null || containerElement === void 0 ? void 0 : containerElement.querySelector(`[id="${id}"]`);
+  componentDidLoad() {
+    this.initGame();
   }
-  getConnectable(id) {
-    var _a;
-    return (_a = this.connectables) === null || _a === void 0 ? void 0 : _a.find((connectable) => connectable.id === id);
+  prepareGame() {
+    this.prepareItems();
+    this.connectItems();
+    this.shuffleItems();
   }
-  getDraggable(id) {
-    var _a;
-    return (_a = this.draggables) === null || _a === void 0 ? void 0 : _a.find((draggable) => draggable.id === id);
-  }
-  getScrollableArea() {
-    var _a, _b, _c;
-    if (!this.readonly && this.isVisible && ((_a = this.values) === null || _a === void 0 ? void 0 : _a.length) && ((_b = this.subContainerElements) === null || _b === void 0 ? void 0 : _b.length)) {
-      const arrAllElementLoaded = !!(this.subContainerElements[0].childElementCount === ((_c = this.values) === null || _c === void 0 ? void 0 : _c[0].length) && this.subContainerElements[1].childElementCount === this.values[1].length);
-      if (arrAllElementLoaded) {
-        setTimeout(() => {
-          const absoluteConnectContainerHeight = this.subContainerElements[0].clientHeight;
-          const pageContent = findParent(this.host, 'form');
-          if (pageContent) {
-            const pageContentBR = pageContent.getBoundingClientRect();
-            const availableHeight = pageContentBR.height - (this.host.getBoundingClientRect().top - pageContentBR.top);
-            if (availableHeight < absoluteConnectContainerHeight) {
-              this.mainContainerElement.style.height = `${availableHeight}px`;
-              this.mainContainerElement.style.overflowY = 'auto';
-              this.mainContainerElement.style.overflowX = 'hidden';
-              if (this.draggableInstances) {
-                this.draggableInstances.forEach((draggableInstance) => (draggableInstance.autoScroll = 1));
-              }
-            }
-          }
-        }, 500);
-      }
-    }
+  async initGame() {
+    await this.scrollToRevealGame();
+    this.setScrollableHeight();
+    this.setDraggableObserver();
+    this.initDraggables();
   }
-  preserveColors() {
+  initDraggables() {
     var _a;
-    if ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) {
-      this.value.forEach((couple) => {
-        const [leftValue, rightValue] = couple;
-        let draggable = this.draggables.find((drag) => drag.value === leftValue);
-        let connectable = this.connectables.find((connect) => connect.value === rightValue);
-        if (!draggable) {
-          draggable = this.draggables.find((drag) => drag.value === rightValue);
-          connectable = this.connectables.find((connect) => connect.value === leftValue);
-        }
-        if (draggable && connectable) {
-          this.attachConnectable(draggable, connectable.id);
-          this.applyColorChanges();
-        }
-      });
-    }
+    (_a = this.draggableElements) === null || _a === void 0 ? void 0 : _a.forEach(e => this.initDraggableActions(e));
+  }
+  async scrollToRevealGame() {
+    const scrollElement = this.host.closest('yoo-ion-scroll');
+    return scrollElement && new Promise(resolve => {
+      setTimeout(() => {
+        scrollElement.scrollTo({ top: scrollElement.scrollHeight, behavior: 'smooth' });
+        resolve();
+      }, 1000);
+    });
   }
-  applyCorrections(draggable, connectableId) {
-    draggable.isCorrect = draggable.id === connectableId;
+  setScrollableHeight() {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const GAP_PADDING = 8;
+    const { bottom } = this.host.getBoundingClientRect();
+    const numberOfItems = ((_b = (_a = this.values) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.length) || 0;
+    const formBounding = (_c = this.host.closest('form')) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect();
+    const itemHeight = ((_e = (_d = this.innerContainerElement) === null || _d === void 0 ? void 0 : _d.querySelector('[id]')) === null || _e === void 0 ? void 0 : _e.clientHeight) + GAP_PADDING + GAP_PADDING / numberOfItems + 1;
+    if (itemHeight && formBounding && bottom > formBounding.bottom && ((_g = (_f = this.values) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.length)) {
+      const maxItems = Math.floor(formBounding.height / itemHeight);
+      const maxHeight = maxItems * itemHeight + (maxItems + 1) * GAP_PADDING;
+      this.innerContainerElement.style.maxHeight = `${Math.min(formBounding.height, maxHeight + GAP_PADDING)}px`;
+    }
   }
-  initUserAnswersArray() {
-    this.userAnswers = [];
-    if (this.values && this.values.length && Array.isArray(this.values[0])) {
-      this.values[0].forEach((value, index) => {
-        var _a, _b;
-        if (value) {
-          this.userAnswers.push([(_b = (_a = this.draggables) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b.id, '']);
+  setDraggableObserver() {
+    this.draggables = this.draggables.map(d => {
+      return new Proxy(d, {
+        set: (target, key, value) => {
+          if (key === 'connectableId') {
+            target[key] = value;
+            this.draggables.forEach(d => {
+              if (d.connectableId === value && d.id !== target.id) {
+                delete d.connectableId;
+              }
+            });
+            this.getUserAnswers();
+            this.validateUserAnswers();
+          }
+          return target[key] = value;
         }
       });
-    }
-  }
-  initItems() {
-    var _a, _b;
-    const ids = [];
-    (_b = (_a = this.values) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.forEach(() => {
-      ids.push(getUUID());
     });
-    ITEM_TYPES.forEach((type, index) => {
+  }
+  shuffleItems() {
+    this.shuffled && CONNECT_TYPES.forEach(type => this[`${type}s`] = shuffle(this[`${type}s`]));
+  }
+  prepareItems() {
+    CONNECT_TYPES.forEach((type, index) => {
       var _a, _b;
-      this[`${type}s`] =
-        ((_b = (_a = this.values) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b.map((value, valueIndex) => Object.assign({
-          value,
-          id: ids[valueIndex]
-        }, !index
-          ? {
-            color: this.colors[valueIndex],
-            isCorrect: false
-          }
-          : {
-            isConnected: false
-          }))) || [];
+      this[`${type}s`] = ((_b = (_a = this.values) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b.map((value, i) => (Object.assign({ value, id: getUUID() }, (!index && {
+        color: this.colors[i]
+      }))))) || [];
     });
   }
-  setColor(elements, color) {
-    const colorValue = getCssColor(this.colors.includes(color) ? this.defaultColors[0] : this.defaultColors[1]);
-    const bgColor = getCssColor(color);
-    this.updateColor(elements, bgColor, colorValue);
-  }
-  removeColor(elements) {
-    const colorValue = getCssColor(this.defaultColors[1]);
-    const bgColor = getCssColor(this.defaultColors[0]);
-    const images = elements.filter((el) => el.classList.contains('image'));
-    const el = elements.filter((val) => !(images === null || images === void 0 ? void 0 : images.includes(val)));
-    if (images) {
-      this.updateColor(images, 'transparent', 'transparent');
+  connectItems() {
+    if (this.value) {
+      this.draggables = this.draggables.map(draggable => {
+        var _a, _b, _c;
+        const [value1, value2] = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.find(v => v.includes(draggable.value))) || [];
+        return Object.assign(Object.assign({}, draggable), (value1 && value2 && {
+          connectableId: (_c = (_b = this.connectables) === null || _b === void 0 ? void 0 : _b.find(c => c.value === value1 || c.value === value2)) === null || _c === void 0 ? void 0 : _c.id
+        }));
+      });
     }
-    this.updateColor(el, bgColor, colorValue);
   }
-  updateColor(els, bgColor, color) {
-    els === null || els === void 0 ? void 0 : els.forEach((el) => {
-      if (el) {
-        el.style.backgroundColor = bgColor;
-        el.style.color = color;
-      }
-    });
-  }
-  getDraggableInstance(id) {
-    if (this.mainContainerElement && id) {
-      const currentDraggable = this.getDraggable(id);
-      const currentDragEl = this.getElement(currentDraggable.id, 'draggable');
+  initDraggableActions(draggableElement) {
+    var _a;
+    if (draggableElement) {
+      let tempConnectableElement;
+      const currentDraggable = (_a = this.draggables) === null || _a === void 0 ? void 0 : _a.find(d => (d === null || d === void 0 ? void 0 : d.id) === draggableElement.id);
       const onDragElement = () => {
-        const draggedElementBR = currentDragEl.getBoundingClientRect();
-        const connectableThreshold = this.subContainerElements[1].getBoundingClientRect().x;
-        const isInConnectableArea = draggedElementBR.x + draggedElementBR.width >= connectableThreshold;
+        var _a, _b;
+        const overlapThreshold = '65%';
+        const { x, width } = draggableElement.getBoundingClientRect();
+        const connectableThreshold = this.innerContainerElement.querySelector('.connectables').getBoundingClientRect().x;
+        const isInConnectableArea = x + width >= connectableThreshold;
         if (isInConnectableArea) {
-          this.connectables.forEach((connectable) => {
-            const connectableEl = this.getElement(connectable.id, 'connectable');
-            if (currentDraggable && isInConnectableArea) {
-              if (currentDraggable.draggableInstance.hitTest(connectableEl, this.overlapThreshold)) {
-                currentDraggable.tempConnectableId = connectable.id;
-                this.setColor([connectableEl], this.hoverColor);
-              }
+          this.connectableElements.forEach(e => {
+            var _a, _b;
+            if (((_b = (_a = currentDraggable === null || currentDraggable === void 0 ? void 0 : currentDraggable.draggableInstance) === null || _a === void 0 ? void 0 : _a.hitTest) === null || _b === void 0 ? void 0 : _b.call(_a, e, overlapThreshold)) && e.id !== currentDraggable.connectableId) {
+              tempConnectableElement = e;
+              tempConnectableElement.style.backgroundColor = 'var(--stable-light)';
             }
           });
         }
-        const connectableEl = this.getElement(currentDraggable.tempConnectableId, 'connectable');
-        if (currentDraggable.tempConnectableId && !currentDraggable.draggableInstance.hitTest(connectableEl, this.overlapThreshold)) {
-          const tempItem = this.getConnectable(currentDraggable.tempConnectableId);
-          if (!tempItem.isConnected) {
-            this.removeColor([connectableEl]);
-          }
-          else {
-            const sourceColor = this.draggables
-              .filter((item) => item === null || item === void 0 ? void 0 : item.connectable)
-              .find((item) => item.connectable.id === currentDraggable.tempConnectableId).color;
-            this.setColor([connectableEl], sourceColor);
+        if (tempConnectableElement && !currentDraggable.draggableInstance.hitTest(tempConnectableElement, overlapThreshold)) {
+          ['color', 'background-color'].forEach(prop => tempConnectableElement.style.removeProperty(prop));
+          const connectableColor = (_b = (_a = this.draggables) === null || _a === void 0 ? void 0 : _a.find(d => (d === null || d === void 0 ? void 0 : d.connectableId) === tempConnectableElement.id)) === null || _b === void 0 ? void 0 : _b.color;
+          if (connectableColor) {
+            tempConnectableElement.style.backgroundColor = `var(--${connectableColor}`;
+            tempConnectableElement.style.color = 'var(--light)';
           }
-          delete currentDraggable.tempConnectableId;
+          tempConnectableElement = null;
         }
       };
-      const onReleaseElement = () => {
-        gsapTo(currentDragEl, this.animationDelay, {
-          x: 0,
-          y: 0
-        }).then(() => {
-          if (currentDraggable === null || currentDraggable === void 0 ? void 0 : currentDraggable.tempConnectableId) {
-            // get temp connectable
-            const connectedElement = this.getElement(currentDraggable.tempConnectableId, 'connectable');
-            const itemContainerElement = connectedElement.parentElement;
-            this.setColor([itemContainerElement.firstElementChild], 'transparent');
-            // attach temp connectable as connected
-            this.attachConnectable(currentDraggable, currentDraggable.tempConnectableId);
-            // check for isolated colored connectable
-            this.removeOldConnectable();
-            this.applyColorChanges();
-            this.autoCompleteLastConnection();
-            this.addAnswer(currentDraggable.id, currentDraggable.tempConnectableId);
-            delete currentDraggable.tempConnectableId;
-          }
-        });
+      const onReleaseElement = async () => {
+        await gsapTo(draggableElement, this.animated ? 0.25 : 0, { x: 0, y: 0 });
+        if (tempConnectableElement) {
+          currentDraggable.connectableId = tempConnectableElement.id;
+          this.autoCompleteLastConnection();
+        }
+        tempConnectableElement = null;
       };
       const onCancelConnection = () => {
-        if (currentDraggable === null || currentDraggable === void 0 ? void 0 : currentDraggable.connectable) {
-          const connectedElement = this.getElement(currentDraggable.connectable.id, 'connectable');
-          const clickedDraggableElement = this.getElement(currentDraggable.id, 'draggable');
-          this.removeColor([clickedDraggableElement, connectedElement]);
-          this.getConnectable(currentDraggable.connectable.id).isConnected = false;
-          delete currentDraggable.connectable;
-          this.addAnswer(currentDraggable.id, '');
-        }
+        delete currentDraggable.connectableId;
+        this.autoEraseLastConnection();
+        this.getUserAnswers();
+        this.validateUserAnswers();
       };
-      if (!this.readonly && this.isConnectMatchable && currentDragEl && this.mainContainerElement) {
-        return new Draggable(currentDragEl, {
-          bound: this.mainContainerElement,
+      if (!this.readonly && this.isGameMatchable && draggableElement) {
+        currentDraggable.draggableInstance = new Draggable(draggableElement, {
           autoScroll: 1,
+          bound: this.innerContainerElement,
           onDrag: onDragElement,
-          onPress: onCancelConnection,
+          onClick: onCancelConnection,
           onRelease: onReleaseElement
         });
       }
     }
   }
-  applyColorChanges() {
-    this.draggables.forEach((draggable) => {
-      var _a;
-      if (draggable) {
-        const sourceColor = draggable.color;
-        const draggedElement = this.getElement(draggable.id, 'draggable');
-        const connectableElement = this.getElement((_a = draggable.connectable) === null || _a === void 0 ? void 0 : _a.id, 'connectable');
-        if (connectableElement) {
-          if (this.readonly) {
-            this.applyCorrections(draggable, draggable.connectable.id);
-            for (const element of [draggedElement, connectableElement]) {
-              const icon = element.getElementsByTagName('yoo-icon')[0];
-              icon.name = draggable.isCorrect ? this.validationClasses.valid.icon : this.validationClasses.invalid.icon;
-              icon.color = draggable.isCorrect ? this.validationClasses.valid.iconColor : this.validationClasses.invalid.iconColor;
-            }
-          }
-          this.setColor([draggedElement, connectableElement], sourceColor);
-        }
-      }
-    });
-  }
-  removeOldConnectable() {
-    this.connectables.forEach((connectable) => {
-      const isConnected = this.draggables.find((srcItem) => { var _a; return ((_a = srcItem === null || srcItem === void 0 ? void 0 : srcItem.connectable) === null || _a === void 0 ? void 0 : _a.id) === connectable.id; });
-      if (!isConnected) {
-        this.removeColor([this.getElement(connectable.id, 'connectable')]);
-      }
-    });
-  }
-  attachConnectable(draggableToConnect, connectableId) {
-    const connectable = this.getConnectable(connectableId);
-    const oldConnectedItem = this.draggables.find((dragItem) => { var _a; return ((_a = dragItem === null || dragItem === void 0 ? void 0 : dragItem.connectable) === null || _a === void 0 ? void 0 : _a.id) === connectableId; });
-    if (oldConnectedItem && oldConnectedItem.id !== (draggableToConnect === null || draggableToConnect === void 0 ? void 0 : draggableToConnect.id)) {
-      const oldConnectEl = this.getElement(oldConnectedItem.id, 'draggable');
-      const oldConnectedEl = this.getElement(oldConnectedItem.connectable.id, 'connectable');
-      this.removeColor([oldConnectEl, oldConnectedEl]);
-      oldConnectedItem.connectable.isConnected = false;
-      delete oldConnectedItem.connectable;
-    }
-    draggableToConnect.connectable = connectable;
-    connectable.isConnected = true;
-  }
-  addAnswer(draggableId, connectableId) {
-    if (draggableId && connectableId) {
-      const answerIndex = this.userAnswers.findIndex((el) => (el === null || el === void 0 ? void 0 : el[0]) === draggableId);
-      this.userAnswers[answerIndex] = [draggableId, connectableId];
-      this.checkAnswersValidity();
-    }
+  getUserAnswers() {
+    this.userAnswers = this.draggables.map(d => [d.value, d.connectableId ? this.connectables.find(c => c.id === d.connectableId).value : '']);
   }
-  checkAnswersValidity() {
-    var _a, _b;
-    let _validity = false;
-    if (((_a = this.userAnswers) === null || _a === void 0 ? void 0 : _a.length) === ((_b = this.answer) === null || _b === void 0 ? void 0 : _b.length)) {
-      _validity = !this.userAnswers.find((gAnswer) => gAnswer[1] === '');
-    }
-    if (_validity !== this.validity) {
-      this.validity = _validity;
-    }
-    if (_validity === true) {
-      this.valideAnswers();
-    }
+  validateUserAnswers(userAnswers = this.userAnswers) {
+    this.validity = !(userAnswers === null || userAnswers === void 0 ? void 0 : userAnswers.reduce((acc, v) => acc + v.filter(i => !i).length, 0));
+    setValueAndValidateInput(userAnswers, this);
   }
-  valideAnswers() {
-    if (!this.livePreview) {
-      this.value = this.userAnswers;
-      const answerValues = [];
-      this.value.forEach((answers) => {
-        const drag = this.getDraggable(answers[0]);
-        const connect = this.getConnectable(answers[1]);
-        if ((drag === null || drag === void 0 ? void 0 : drag.value) && (connect === null || connect === void 0 ? void 0 : connect.value)) {
-          answerValues.push([drag.value, connect.value]);
-        }
-      });
-      setValueAndValidateInput(answerValues, this);
+  autoEraseLastConnection() {
+    const connectedDraggables = this.draggables.filter(d => d.connectableId);
+    if ((connectedDraggables === null || connectedDraggables === void 0 ? void 0 : connectedDraggables.length) === 1) {
+      const lastDraggable = connectedDraggables[0];
+      delete lastDraggable.connectableId;
     }
   }
   autoCompleteLastConnection() {
-    const freeDraggables = this.draggables.filter((draggable) => !draggable.connectable);
-    const freeConnectables = this.connectables.filter((connectable) => !connectable.isConnected);
-    if ((freeDraggables === null || freeDraggables === void 0 ? void 0 : freeDraggables.length) === 1 && (freeConnectables === null || freeConnectables === void 0 ? void 0 : freeConnectables.length) === 1) {
-      const lastFreeDraggable = freeDraggables[0];
-      const lastFreeConnectable = freeConnectables[0];
-      const sourceColor = lastFreeDraggable.color;
-      lastFreeConnectable.isConnected = true;
-      this.setColor([this.getElement(lastFreeConnectable.id, 'connectable'), this.getElement(lastFreeDraggable.id, 'draggable')], sourceColor);
-      lastFreeDraggable.connectable = lastFreeConnectable;
-      this.addAnswer(lastFreeDraggable.id, lastFreeConnectable.id);
+    var _a;
+    const freeDraggables = this.draggables.filter(d => !d.connectableId);
+    if ((freeDraggables === null || freeDraggables === void 0 ? void 0 : freeDraggables.length) === 1) {
+      const lastDraggable = freeDraggables[0];
+      const lastConectableId = (_a = difference(this.connectables.map(c => c.id), this.draggables.map(d => d.connectableId))) === null || _a === void 0 ? void 0 : _a[0];
+      lastDraggable.connectableId = lastConectableId;
     }
   }
   truncateValue(valueToTruncate) {
     if (valueToTruncate) {
-      const maxAuthorizedLength = 50;
+      const MAX_LENGTH = 50;
       const translatedValue = translateMulti(valueToTruncate);
       const valueLength = translatedValue.length;
-      if (valueLength > maxAuthorizedLength) {
-        return translatedValue.substr(0, maxAuthorizedLength).concat('...');
-      }
-      else {
-        return translatedValue;
-      }
+      const isTruncabled = valueLength > MAX_LENGTH;
+      return isTruncabled ? translatedValue.substr(0, MAX_LENGTH).concat('...') : translatedValue;
     }
   }
+  renderCorrectionIcon(value) {
+    const getCouple = (values) => values === null || values === void 0 ? void 0 : values.find(v => v.includes(value));
+    const isCorrect = isEqual(getCouple(this.value), getCouple(this.answer));
+    return h("yoo-icon", { size: "medium", name: isCorrect ? 'check' : 'cross', color: isCorrect ? 'success' : 'danger' });
+  }
   renderContainer(name) {
-    const type = name === 'draggable' ? 0 : 1;
-    const values = name === 'draggable' ? this.draggables : this.connectables;
-    return (h("div", { class: `${name}-container`, ref: (element) => (this.subContainerElements[type] = element) }, values === null || values === void 0 ? void 0 : values.map((item) => {
-      const hasImage = !isNullOrUndefined(item === null || item === void 0 ? void 0 : item.value) && isImageUrl(item === null || item === void 0 ? void 0 : item.value);
-      return ((item === null || item === void 0 ? void 0 : item.value) && (h("div", { class: "item-container" },
-        h("div", { id: item === null || item === void 0 ? void 0 : item.id, class: { [name]: true, image: hasImage, animated: this.animated } },
-          !hasImage ? h("p", null, this.truncateValue(item.value)) : [h("yoo-img", { type: "background", src: item.value }), h("div", { class: "overlay" })],
-          this.readonly && h("yoo-icon", { size: "medium" })))));
+    var _a;
+    return (h("section", { class: { [`${name}s`]: true } }, (_a = this[`${name}s`]) === null || _a === void 0 ? void 0 : _a.map((item) => {
+      var _a, _b;
+      const { id, value, connectableId, color } = item || {};
+      const isImage = !!(value && isImageUrl(value));
+      const isConnected = !!(connectableId || this.draggables.find(d => d.connectableId === id));
+      const tileColor = color || ((_b = (_a = this.draggables) === null || _a === void 0 ? void 0 : _a.find(d => d.connectableId === id)) === null || _b === void 0 ? void 0 : _b.color);
+      return !!value && (h("div", { class: "tile-container" },
+        h("div", Object.assign({}, (isConnected && {
+          style: {
+            backgroundColor: `var(--${tileColor})`,
+            color: 'var(--light)'
+          }
+        }), { id: id, key: id, class: { [name]: true, image: isImage, animated: this.animated } }),
+          !isImage ? h("p", null, this.truncateValue(value)) : [h("yoo-img", { type: "background", src: value }), h("div", { class: "overlay" })],
+          this.readonly && this.renderCorrectionIcon(value))));
     })));
   }
+  renderBanner() {
+    return this.livePreview && h("yoo-banner", null);
+  }
   render() {
-    return this.hasValues && (h("div", { class: "connect-container", ref: (element) => (this.mainContainerElement = element) }, ITEM_TYPES.map((itemType) => this.renderContainer(itemType))));
+    return this.hasValues && (h(Host, { class: getAppContext(this.host) },
+      this.renderBanner(),
+      h("div", { class: "inner-container", ref: (element) => (this.innerContainerElement = element) }, CONNECT_TYPES.map(type => this.renderContainer(type)))));
   }
   static get is() { return "yoo-form-connect"; }
   static get encapsulation() { return "shadow"; }
@@ -430,21 +291,6 @@ export class YooFormConnectComponent {
         "text": "Poll of words to connect, dispatched in 2 arrays (Left and Right respectively)"
       }
     },
-    "value": {
-      "type": "unknown",
-      "mutable": true,
-      "complexType": {
-        "original": "string[][]",
-        "resolved": "string[][]",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Value previously given by user, mostly used in read-only mode"
-      }
-    },
     "readonly": {
       "type": "boolean",
       "mutable": false,
@@ -550,7 +396,7 @@ export class YooFormConnectComponent {
       "attribute": "validity",
       "reflect": false
     },
-    "answer": {
+    "value": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
@@ -562,28 +408,25 @@ export class YooFormConnectComponent {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Expected answer. consisting of an array of arrays,\neach sub-array containing a pair of correctly connected words"
+        "text": "Value previously given by user, mostly used in read-only mode"
       }
     },
-    "isVisible": {
-      "type": "boolean",
+    "answer": {
+      "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
+        "original": "string[][]",
+        "resolved": "string[][]",
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
-        "text": "true if component's parent slide is visible within a `yoo-form-dynamic`"
-      },
-      "attribute": "is-visible",
-      "reflect": false,
-      "defaultValue": "false"
+        "text": "Expected answer. consisting of an array of arrays,\neach sub-array containing a pair of correctly connected words"
+      }
     },
-    "isAnimationFinished": {
+    "isVisible": {
       "type": "boolean",
       "mutable": false,
       "complexType": {
@@ -592,15 +435,19 @@ export class YooFormConnectComponent {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
-        "text": "Used to check when modal is loaded"
+        "text": "true if component's parent slide is visible within a `yoo-form-dynamic`"
       },
-      "attribute": "is-animation-finished",
-      "reflect": false
+      "attribute": "is-visible",
+      "reflect": false,
+      "defaultValue": "false"
     }
   }; }
+  static get states() { return {
+    "userAnswers": {}
+  }; }
   static get events() { return [{
       "method": "validityChanged",
       "name": "validityChanged",
@@ -631,37 +478,22 @@ export class YooFormConnectComponent {
         "resolved": "string[]",
         "references": {}
       }
-    }, {
-      "method": "dragEnded",
-      "name": "dragEnded",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      }
     }]; }
   static get elementRef() { return "host"; }
   static get watchers() { return [{
-      "propName": "required",
-      "methodName": "onRequireChanged"
+      "propName": "values",
+      "methodName": "onValuesChanged"
     }, {
       "propName": "validity",
-      "methodName": "isValid"
+      "methodName": "onValidityChanged"
+    }, {
+      "propName": "value",
+      "methodName": "onValueChanged"
     }, {
       "propName": "answer",
-      "methodName": "initValues"
+      "methodName": "initAnswerChanged"
     }, {
       "propName": "isVisible",
       "methodName": "onIsVisibleChanged"
-    }, {
-      "propName": "isAnimationFinished",
-      "methodName": "onModalAnimationFinished"
     }]; }
 }