@yoobic/yobi 8.3.0-13 → 8.3.0-16

package/dist/cjs/yoo-form-capture.cjs.entry.js

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6482c595.js');
-const overlays = require('./overlays-0e172d6f.js');
-const cameraHelpers = require('./camera-helpers-29978dd5.js');
-require('./index-d57a414a.js');
+const overlays = require('./overlays-c38df680.js');
+const cameraHelpers = require('./camera-helpers-5223f268.js');
+require('./index-d98508ad.js');
 const lodash = require('./lodash-597bda6d.js');
-const commonHelpers = require('./common-helpers-927fed3f.js');
-const formHelpers = require('./form-helpers-ae896c99.js');
-const formInputHelpers = require('./form-input-helpers-07b24360.js');
+const commonHelpers = require('./common-helpers-99012e88.js');
+const formHelpers = require('./form-helpers-628e2480.js');
+const formInputHelpers = require('./form-input-helpers-f64b157e.js');
 require('./index-01fc939d.js');
 require('./_commonjsHelpers-94df2ea7.js');
 

package/dist/cjs/yoo-form-carousel.cjs.entry.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6482c595.js');
-const index$1 = require('./index-d57a414a.js');
+const index$1 = require('./index-d98508ad.js');
 const lodash = require('./lodash-597bda6d.js');
-const commonHelpers = require('./common-helpers-927fed3f.js');
-const overlays = require('./overlays-0e172d6f.js');
+const commonHelpers = require('./common-helpers-99012e88.js');
+const overlays = require('./overlays-c38df680.js');
 require('./index-01fc939d.js');
 require('./_commonjsHelpers-94df2ea7.js');
 

package/dist/cjs/yoo-form-catalog-dialog.cjs.entry.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6482c595.js');
-require('./index-d57a414a.js');
-const commonHelpers = require('./common-helpers-927fed3f.js');
+require('./index-d98508ad.js');
+const commonHelpers = require('./common-helpers-99012e88.js');
 const dimensionsHelpers = require('./dimensions-helpers-54685523.js');
-const overlays = require('./overlays-0e172d6f.js');
+const overlays = require('./overlays-c38df680.js');
 require('./lodash-597bda6d.js');
 require('./index-01fc939d.js');
 require('./_commonjsHelpers-94df2ea7.js');

package/dist/cjs/yoo-form-catalog.cjs.entry.js

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6482c595.js');
-require('./index-d57a414a.js');
+require('./index-d98508ad.js');
 const lodash = require('./lodash-597bda6d.js');
-const formInputHelpers = require('./form-input-helpers-07b24360.js');
-const overlays = require('./overlays-0e172d6f.js');
+const formInputHelpers = require('./form-input-helpers-f64b157e.js');
+const overlays = require('./overlays-c38df680.js');
 require('./index-01fc939d.js');
-require('./common-helpers-927fed3f.js');
+require('./common-helpers-99012e88.js');
 require('./_commonjsHelpers-94df2ea7.js');
 
 const formCatalogCss = ":host .readonly{padding:0.5rem 0.5rem 0 0}:host .outer-container .or,:host .readonly .or{padding:0.5rem;color:var(--text-color, #807f83);font-size:var(--font-size-14, 0.875rem);text-align:center}:host .outer-container .selected,:host .readonly .selected{background-color:var(--light, #ffffff)}:host .outer-container .error,:host .readonly .error{color:var(--danger, #d44333)}:host .outer-container .products>.title,:host .readonly .products>.title{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;margin-top:0.5rem;color:var(--dark, #000000);font-weight:var(--font-weight-400, 400);font-size:var(--font-size-16, 1rem);line-height:1.5;text-align:left;text-transform:uppercase}:host .outer-container .products .subtitle,:host .readonly .products .subtitle{margin-top:0.125rem;color:var(--text-color, #807f83);font-size:var(--font-size-12, 0.75rem)}:host .outer-container .products .remove,:host .readonly .products .remove{display:-ms-flexbox;display:flex;-ms-flex-line-pack:center;align-content:center;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:40px;text-align:center}:host .outer-container .products .entity,:host .readonly .products .entity{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;padding:1rem 0}:host .outer-container .products .toolbar,:host .readonly .products .toolbar{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;padding:0.5rem;font-size:var(--font-size-16, 1rem);border-top:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1);border-bottom:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1)}:host .outer-container .products .toolbar.history,:host .readonly .products .toolbar.history{font-size:var(--font-size-14, 0.875rem)}:host .outer-container .products .toolbar .title,:host .readonly .products .toolbar .title{-ms-flex:1;flex:1;padding:3px 0.5rem 3px 0;color:var(--dark, #000000);font-size:var(--font-size-12, 0.75rem)}:host .outer-container .products .toolbar .title.align-right,:host .readonly .products .toolbar .title.align-right{text-align:right}:host .outer-container .products .toolbar .price,:host .readonly .products .toolbar .price{-ms-flex:1;flex:1;min-width:4rem;padding-left:0.5rem;color:var(--dark, #000000);white-space:nowrap;text-align:right}:host .outer-container .products .toolbar .price-title,:host .readonly .products .toolbar .price-title{min-width:5rem;font-size:var(--font-size-12, 0.75rem)}:host .outer-container .products .toolbar.wrap,:host .readonly .products .toolbar.wrap{-ms-flex-wrap:wrap;flex-wrap:wrap}:host .outer-container .products .toolbar.wrap .price-title,:host .outer-container .products .toolbar.wrap .price,:host .readonly .products .toolbar.wrap .price-title,:host .readonly .products .toolbar.wrap .price{margin-top:var(--spacing-08, 0.5rem)}:host .outer-container .products .footer,:host .readonly .products .footer{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;padding:0.5rem;padding-top:1rem;padding-bottom:0.5rem;color:var(--dark, #000000);font-weight:var(--font-weight-900, 900)}:host .outer-container .products .footer .title,:host .readonly .products .footer .title{-ms-flex:1;flex:1;text-transform:uppercase}:host .outer-container .products .footer .price,:host .readonly .products .footer .price{text-align:right}:host(.history) .readonly{max-width:800px}:host(.grid-cell) .readonly{padding:0}:host(.grid-cell) .readonly .title{display:none}:host(.grid-cell) .readonly .products .subtitle{margin-top:0}:host(.grid-cell) .readonly .subtitle{color:var(--dark, #000000);font-weight:var(--font-weight-400, 400);font-size:var(--font-size-16, 1rem)}:host(.grid-cell) .readonly .footer{padding:0;font-weight:var(--font-weight-400, 400)}";

package/dist/cjs/yoo-form-categorize-words.cjs.entry.js

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6482c595.js');
-require('./index-d57a414a.js');
+require('./index-d98508ad.js');
 const lodash = require('./lodash-597bda6d.js');
-const index$1 = require('./index-f1e13e48.js');
-const commonHelpers = require('./common-helpers-927fed3f.js');
-const draggableTagsHelpers = require('./draggable-tags-helpers-c8fe9a9f.js');
-const formInputHelpers = require('./form-input-helpers-07b24360.js');
-const overlays = require('./overlays-0e172d6f.js');
+const index$1 = require('./index-03655cc3.js');
+const commonHelpers = require('./common-helpers-99012e88.js');
+const draggableTagsHelpers = require('./draggable-tags-helpers-b2f20766.js');
+const formInputHelpers = require('./form-input-helpers-f64b157e.js');
+const overlays = require('./overlays-c38df680.js');
 require('./index-01fc939d.js');
 require('./_commonjsHelpers-94df2ea7.js');
 

package/dist/cjs/yoo-form-checkbox.cjs.entry.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6482c595.js');
-require('./index-d57a414a.js');
-const commonHelpers = require('./common-helpers-927fed3f.js');
-const formInputHelpers = require('./form-input-helpers-07b24360.js');
-const overlays = require('./overlays-0e172d6f.js');
+require('./index-d98508ad.js');
+const commonHelpers = require('./common-helpers-99012e88.js');
+const formInputHelpers = require('./form-input-helpers-f64b157e.js');
+const overlays = require('./overlays-c38df680.js');
 require('./lodash-597bda6d.js');
 require('./index-01fc939d.js');
 require('./_commonjsHelpers-94df2ea7.js');

package/dist/cjs/yoo-form-checklist.cjs.entry.js

@@ -4,11 +4,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6482c595.js');
 const index$1 = require('./index-01fc939d.js');
-require('./index-d57a414a.js');
-const formInputHelpers = require('./form-input-helpers-07b24360.js');
-const overlays = require('./overlays-0e172d6f.js');
+require('./index-d98508ad.js');
+const formInputHelpers = require('./form-input-helpers-f64b157e.js');
+const overlays = require('./overlays-c38df680.js');
 require('./lodash-597bda6d.js');
-require('./common-helpers-927fed3f.js');
+require('./common-helpers-99012e88.js');
 require('./_commonjsHelpers-94df2ea7.js');
 
 const formChecklistCss = ":host yoo-truncate{--max-lines:2}:host .outer-container,:host .readonly{text-align:left}:host .outer-container .title,:host .readonly .title{margin-top:0.5rem;margin-bottom:0.625rem;font-size:var(--font-size-16, 1rem)}:host .outer-container .title:first-child,:host .readonly .title:first-child{margin-top:0}:host .outer-container yoo-form-input,:host .readonly yoo-form-input{margin-bottom:0.5rem}:host .outer-container .flex,:host .readonly .flex{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1}:host .outer-container .previous,:host .outer-container .task,:host .readonly .previous,:host .readonly .task{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;margin-bottom:0.25rem;padding:0.6rem 0;font-weight:var(--font-weight-400, 400);font-size:var(--font-size-16, 1rem);line-height:17px;border-bottom:var(--border-width-01, 0.0625rem) solid var(--stable-alt, #d0d0d0)}:host .outer-container .previous yoo-icon,:host .outer-container .task yoo-icon,:host .readonly .previous yoo-icon,:host .readonly .task yoo-icon{padding:0 0.2rem;opacity:0.3}:host .outer-container .previous yoo-icon.repeat,:host .outer-container .task yoo-icon.repeat,:host .readonly .previous yoo-icon.repeat,:host .readonly .task yoo-icon.repeat{opacity:1}:host .outer-container .previous .text,:host .outer-container .task .text,:host .readonly .previous .text,:host .readonly .task .text{padding-left:0.2rem}:host .outer-container .previous.first,:host .outer-container .task.first,:host .readonly .previous.first,:host .readonly .task.first{padding-top:var(--spacing-08, 0.5rem)}:host .outer-container .previous.validated yoo-icon.check,:host .outer-container .task.validated yoo-icon.check,:host .readonly .previous.validated yoo-icon.check,:host .readonly .task.validated yoo-icon.check{opacity:1}:host .outer-container .previous.rejected yoo-icon.cross,:host .outer-container .task.rejected yoo-icon.cross,:host .readonly .previous.rejected yoo-icon.cross,:host .readonly .task.rejected yoo-icon.cross{opacity:1}:host .readonly{padding:0.5rem 0.5rem 0 0}:host .readonly .task,:host .readonly .previous{border-bottom:none}:host(.history) .outer-container .title,:host(.history) .readonly .title{margin-top:0rem;margin-bottom:0rem}:host(.history) .outer-container .previous,:host(.history) .outer-container .task,:host(.history) .readonly .previous,:host(.history) .readonly .task{margin-bottom:0}";

package/dist/cjs/yoo-form-choice-button.cjs.entry.js

@@ -3,16 +3,16 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6482c595.js');
-require('./index-d57a414a.js');
+require('./index-d98508ad.js');
 const highcharts = require('./highcharts-874d9bd2.js');
-const formChoiceHelpers = require('./form-choice-helpers-e1fa0f35.js');
-const overlays = require('./overlays-0e172d6f.js');
+const formChoiceHelpers = require('./form-choice-helpers-a17e8630.js');
+const overlays = require('./overlays-c38df680.js');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./draggable-tags-helpers-c8fe9a9f.js');
-require('./form-input-helpers-07b24360.js');
+require('./draggable-tags-helpers-b2f20766.js');
+require('./form-input-helpers-f64b157e.js');
 require('./index-01fc939d.js');
-require('./common-helpers-927fed3f.js');
+require('./common-helpers-99012e88.js');
 
 const formChoiceButtonCss = ":host([readonly]){padding:0.5rem 0.5rem 0 0;-ms-flex-pack:start;justify-content:flex-start;color:var(--dark, #000000)}:host([readonly]) .image-container{max-width:var(--spacing-80, 5rem);margin-right:var(--spacing-24, 1.5rem);margin-bottom:0;padding-bottom:0;border-bottom:none}:host([readonly]) .image-container .content{position:relative;width:var(--spacing-80, 5rem);height:var(--spacing-80, 5rem);overflow:hidden;border-radius:var(--border-radius-08, 0.5rem)}:host([readonly]) .image-container .content::before{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;opacity:0.4;content:\"\"}:host([readonly]) .image-container .content yoo-img{height:100%;border-radius:var(--border-radius-08, 0.5rem)}:host([readonly]) .image-container .content.correct-answer{border:var(--border-width-01, 0.0625rem) solid var(--success, #3aa76d)}:host([readonly]) .image-container .content.correct-answer::before{background-color:var(--success, #3aa76d)}:host([readonly]) .image-container .content.wrong-answer{border:var(--border-width-01, 0.0625rem) solid var(--danger, #d44333)}:host([readonly]) .image-container .content.wrong-answer::before{background-color:var(--danger, #d44333)}:host([readonly]) .image-container .text{white-space:unset;text-align:center;-webkit-line-clamp:2}:host([is-pdf]) .image-container{width:100%}:host([is-pdf]) .image-container .content{max-width:22.5rem}:host([is-pdf]) .image-container .content yoo-img{border:none;border-radius:0}:host([is-pdf]) .image-container .text{text-align:left}:host([is-pdf]) .image-container:not(:last-child){margin-bottom:var(--spacing-16, 1rem);padding-bottom:var(--spacing-16, 1rem)}.readonly-card{width:100%}.readonly-card .invalid{color:var(--danger, #d44333)}.readonly-card .valid{color:var(--success, #3aa76d)}.readonly-card.chat{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;color:var(--dark, #000000)}.readonly-card.chat .text:not(:last-of-type){margin-bottom:var(--spacing-08, 0.5rem)}.readonly-card.chat .text{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;padding:var(--spacing-04, 0.25rem) var(--spacing-08, 0.5rem);border-radius:var(--border-radius-16, 1rem)}.readonly-card.chat .text.valid{color:var(--light, #ffffff);background-color:var(--success, #3aa76d)}.readonly-card.chat .text.invalid{color:var(--light, #ffffff);background-color:var(--danger, #d44333)}:host(.history:not(.forcedhistory)){padding:0}:host(.history:not(.forcedhistory))>.text,:host(.history:not(.forcedhistory)) .card .text,:host(.history:not(.forcedhistory)) .button .text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block;margin-right:var(--spacing-16, 1rem)}:host{--button-columns:2;--item-spacing:var(--spacing-16, 1rem);display:block;width:100%;height:100%}:host yoo-banner{height:0}:host #buttons{display:grid;grid-gap:var(--item-spacing);grid-template-columns:repeat(var(--button-columns), minmax(0, 1fr))}:host yoo-button{--side-padding:0 var(--spacing-16, 1rem)}";
 

package/dist/cjs/yoo-form-choice-card.cjs.entry.js

@@ -2,15 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const formChoiceHelpers = require('./form-choice-helpers-e1fa0f35.js');
-require('./index-d57a414a.js');
-require('./overlays-0e172d6f.js');
+const formChoiceHelpers = require('./form-choice-helpers-a17e8630.js');
+require('./index-d98508ad.js');
+require('./overlays-c38df680.js');
 require('./lodash-597bda6d.js');
 require('./index-01fc939d.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./draggable-tags-helpers-c8fe9a9f.js');
-require('./form-input-helpers-07b24360.js');
-require('./common-helpers-927fed3f.js');
+require('./draggable-tags-helpers-b2f20766.js');
+require('./form-input-helpers-f64b157e.js');
+require('./common-helpers-99012e88.js');
 require('./index-6482c595.js');
 require('./highcharts-874d9bd2.js');
 

package/dist/cjs/yoo-form-choice-chat.cjs.entry.js

@@ -4,13 +4,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6482c595.js');
 const index$1 = require('./index-01fc939d.js');
-require('./index-d57a414a.js');
-const formChoiceHelpers = require('./form-choice-helpers-e1fa0f35.js');
-const overlays = require('./overlays-0e172d6f.js');
+require('./index-d98508ad.js');
+const formChoiceHelpers = require('./form-choice-helpers-a17e8630.js');
+const overlays = require('./overlays-c38df680.js');
 require('./lodash-597bda6d.js');
-require('./draggable-tags-helpers-c8fe9a9f.js');
-require('./form-input-helpers-07b24360.js');
-require('./common-helpers-927fed3f.js');
+require('./draggable-tags-helpers-b2f20766.js');
+require('./form-input-helpers-f64b157e.js');
+require('./common-helpers-99012e88.js');
 require('./highcharts-874d9bd2.js');
 require('./_commonjsHelpers-94df2ea7.js');
 

package/dist/cjs/yoo-form-choice-image.cjs.entry.js

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6482c595.js');
-require('./index-d57a414a.js');
-const lodash = require('./lodash-597bda6d.js');
-const commonHelpers = require('./common-helpers-927fed3f.js');
-const formChoiceHelpers = require('./form-choice-helpers-e1fa0f35.js');
-const overlays = require('./overlays-0e172d6f.js');
-require('./draggable-tags-helpers-c8fe9a9f.js');
-require('./form-input-helpers-07b24360.js');
+require('./index-d98508ad.js');
+const commonHelpers = require('./common-helpers-99012e88.js');
+const formChoiceHelpers = require('./form-choice-helpers-a17e8630.js');
+const overlays = require('./overlays-c38df680.js');
+require('./lodash-597bda6d.js');
+require('./draggable-tags-helpers-b2f20766.js');
+require('./form-input-helpers-f64b157e.js');
 require('./index-01fc939d.js');
 require('./highcharts-874d9bd2.js');
 require('./_commonjsHelpers-94df2ea7.js');
@@ -50,10 +50,11 @@ const YooFormChoiceImageComponent = class {
   }
   renderImage(image, text, values, index$1) {
     const readonly = this.readonly || this.isPdf;
-    const isCorrect = this.answer.some(val => lodash.isEqual({ text, image }, val));
+    const answer = [].concat(this.answer).map(a => { var _a; return (_a = a.text) !== null && _a !== void 0 ? _a : a; });
+    const isCorrect = answer.includes(text);
     const onOpenImage = (values, index) => commonHelpers.showSlidesMedia({ items: values.map(({ image }) => ({ value: image })), currentSlideIndex: index, showBottomContainer: false });
-    return (index.h("div", { class: "image-container", onClick: () => this.isHistory && onOpenImage(values, index$1), style: this.animated ? { '--choice-index': index$1.toString() } : {} }, index.h("div", { class: { 'content': true, 'correct-answer': this.readonly && this.answer.length && isCorrect, 'wrong-answer': this.readonly && this.answer.length && !isCorrect } }, index.h("yoo-img", { cloudinaryOptions: { pad: true }, scaledUp: this.isPdf, src: image, onClick: () => !readonly && formChoiceHelpers.onItemSelect(values[index$1], this) }), !readonly && [
-      index.h("yoo-form-checkbox", { value: formChoiceHelpers.isSelected(values[index$1], this.selection), onClick: () => formChoiceHelpers.onItemSelect(values[index$1], this), animated: this.animated }),
+    return (index.h("div", { class: "image-container", onClick: () => this.isHistory && onOpenImage(values, index$1), style: this.animated ? { '--choice-index': index$1.toString() } : {} }, index.h("div", { class: { 'content': true, 'correct-answer': this.readonly && isCorrect, 'wrong-answer': this.readonly && !isCorrect } }, index.h("yoo-img", { cloudinaryOptions: { pad: true }, scaledUp: this.isPdf, src: image, onClick: () => !readonly && formChoiceHelpers.onItemSelect(text, this) }), !readonly && [
+      index.h("yoo-form-checkbox", { value: formChoiceHelpers.isSelected(text, this.selection), onClick: () => formChoiceHelpers.onItemSelect(text, this), animated: this.animated }),
       index.h("yoo-tag", { color: "dark-60", icon: "maximize", iconOnlyColor: "light", size: "small", onClick: () => onOpenImage(values, index$1) })
     ]), text && index.h("div", { class: "text truncate" }, overlays.translateMulti(text))));
   }
@@ -61,7 +62,7 @@ const YooFormChoiceImageComponent = class {
     let values = this.choices || [];
     if (this.readonly && this.value) {
       const answers = Array.isArray(this.value) ? this.value : [this.value];
-      values = values.filter(value => answers.some((answer) => lodash.isString(answer) ? answer === value.text : lodash.isEqual(answer, value)));
+      values = values.filter(({ text }) => answers.some((answer) => answer === text));
     }
     return values.map((value, index) => {
       const { text, image } = value || {};

package/dist/cjs/yoo-form-choice-radio.cjs.entry.js

@@ -3,14 +3,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6482c595.js');
-require('./index-d57a414a.js');
+require('./index-d98508ad.js');
 const lodash = require('./lodash-597bda6d.js');
-const formInputHelpers = require('./form-input-helpers-07b24360.js');
-const formChoiceHelpers = require('./form-choice-helpers-e1fa0f35.js');
-const overlays = require('./overlays-0e172d6f.js');
+const formInputHelpers = require('./form-input-helpers-f64b157e.js');
+const formChoiceHelpers = require('./form-choice-helpers-a17e8630.js');
+const overlays = require('./overlays-c38df680.js');
 require('./index-01fc939d.js');
-require('./common-helpers-927fed3f.js');
-require('./draggable-tags-helpers-c8fe9a9f.js');
+require('./common-helpers-99012e88.js');
+require('./draggable-tags-helpers-b2f20766.js');
 require('./highcharts-874d9bd2.js');
 require('./_commonjsHelpers-94df2ea7.js');
 

package/dist/cjs/yoo-form-color-field.cjs.entry.js

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6482c595.js');
-require('./index-d57a414a.js');
+require('./index-d98508ad.js');
 const _commonjsHelpers = require('./_commonjsHelpers-94df2ea7.js');
-const formInputHelpers = require('./form-input-helpers-07b24360.js');
-const overlays = require('./overlays-0e172d6f.js');
+const formInputHelpers = require('./form-input-helpers-f64b157e.js');
+const overlays = require('./overlays-c38df680.js');
 require('./lodash-597bda6d.js');
 require('./index-01fc939d.js');
-require('./common-helpers-927fed3f.js');
+require('./common-helpers-99012e88.js');
 
 var pickr_min = _commonjsHelpers.createCommonjsModule(function (module, exports) {
 /*! Pickr 1.8.2 MIT | https://github.com/Simonwep/pickr */

package/dist/cjs/yoo-form-color-picker.cjs.entry.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6482c595.js');
-require('./index-d57a414a.js');
-const overlays = require('./overlays-0e172d6f.js');
+require('./index-d98508ad.js');
+const overlays = require('./overlays-c38df680.js');
 require('./lodash-597bda6d.js');
 require('./index-01fc939d.js');
 require('./_commonjsHelpers-94df2ea7.js');

package/dist/cjs/yoo-form-conditions.cjs.entry.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6482c595.js');
 const index$1 = require('./index-01fc939d.js');
-require('./index-d57a414a.js');
+require('./index-d98508ad.js');
 const lodash = require('./lodash-597bda6d.js');
-const overlays = require('./overlays-0e172d6f.js');
+const overlays = require('./overlays-c38df680.js');
 require('./_commonjsHelpers-94df2ea7.js');
 
 const formConditionsCss = ":host{width:100%}:host .condition-list{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host .condition-list .row{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-column-gap:var(--spacing-16, 1rem);-moz-column-gap:var(--spacing-16, 1rem);column-gap:var(--spacing-16, 1rem);row-gap:var(--spacing-04, 0.25rem)}:host .condition-list .row .input-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:2.625rem}:host .condition-list .row .input-container yoo-form-input{width:100%}:host .condition-list .row .fields{width:8.5rem}:host .condition-list .row .operator{width:8.5rem}:host .condition-list .row .values{width:8.5rem}:host .condition-list .row .values .feedback-container{height:100%;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}:host .condition-list .row .values .feedback-container yoo-form-feedback{width:100%}:host .condition-list .row.footer{-ms-flex-pack:end;justify-content:flex-end}";

package/dist/cjs/yoo-form-connect.cjs.entry.js

@@ -3,18 +3,18 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6482c595.js');
-require('./index-d57a414a.js');
+require('./index-d98508ad.js');
 const lodash = require('./lodash-597bda6d.js');
-const commonHelpers = require('./common-helpers-927fed3f.js');
-const draggableTagsHelpers = require('./draggable-tags-helpers-c8fe9a9f.js');
-const formInputHelpers = require('./form-input-helpers-07b24360.js');
-const overlays = require('./overlays-0e172d6f.js');
+const draggableTagsHelpers = require('./draggable-tags-helpers-b2f20766.js');
+const formInputHelpers = require('./form-input-helpers-f64b157e.js');
+const overlays = require('./overlays-c38df680.js');
 require('./index-01fc939d.js');
+require('./common-helpers-99012e88.js');
 require('./_commonjsHelpers-94df2ea7.js');
 
 const CONNECT_TYPES = ['draggable', 'connectable'];
 
-const formConnectCss = ".bg-accent{background-color:var(--accent, #276ef1) !important}.accent{color:var(--accent, #276ef1);fill:var(--accent, #276ef1)}.border-accent{border:var(--border-width-02, 0.125rem) solid var(--accent, #276ef1)}.bg-app-color{background-color:var(--app-color, #5a30f4) !important}.app-color{color:var(--app-color, #5a30f4);fill:var(--app-color, #5a30f4)}.border-app-color{border:var(--border-width-02, 0.125rem) solid var(--app-color, #5a30f4)}.bg-danger{background-color:var(--danger, #d44333) !important}.danger{color:var(--danger, #d44333);fill:var(--danger, #d44333)}.border-danger{border:var(--border-width-02, 0.125rem) solid var(--danger, #d44333)}.bg-dark{background-color:var(--dark, #000000) !important}.dark{color:var(--dark, #000000);fill:var(--dark, #000000)}.border-dark{border:var(--border-width-02, 0.125rem) solid var(--dark, #000000)}.bg-energized{background-color:var(--energized, #ffc043) !important}.energized{color:var(--energized, #ffc043);fill:var(--energized, #ffc043)}.border-energized{border:var(--border-width-02, 0.125rem) solid var(--energized, #ffc043)}.bg-info{background-color:var(--info, #d84c96) !important}.info{color:var(--info, #d84c96);fill:var(--info, #d84c96)}.border-info{border:var(--border-width-02, 0.125rem) solid var(--info, #d84c96)}.bg-light{background-color:var(--light, #ffffff) !important}.light{color:var(--light, #ffffff);fill:var(--light, #ffffff)}.border-light{border:var(--border-width-02, 0.125rem) solid var(--light, #ffffff)}.bg-stable{background-color:var(--stable, #adadad) !important}.stable{color:var(--stable, #adadad);fill:var(--stable, #adadad)}.border-stable{border:var(--border-width-02, 0.125rem) solid var(--stable, #adadad)}.bg-stable-alt{background-color:var(--stable-alt, #d0d0d0) !important}.stable-alt{color:var(--stable-alt, #d0d0d0);fill:var(--stable-alt, #d0d0d0)}.border-stable-alt{border:var(--border-width-02, 0.125rem) solid var(--stable-alt, #d0d0d0)}.bg-stable-light{background-color:var(--stable-light, #f1f1f1) !important}.stable-light{color:var(--stable-light, #f1f1f1);fill:var(--stable-light, #f1f1f1)}.border-stable-light{border:var(--border-width-02, 0.125rem) solid var(--stable-light, #f1f1f1)}.bg-stable-ultralight{background-color:var(--stable-ultralight, #fafafa) !important}.stable-ultralight{color:var(--stable-ultralight, #fafafa);fill:var(--stable-ultralight, #fafafa)}.border-stable-ultralight{border:var(--border-width-02, 0.125rem) solid var(--stable-ultralight, #fafafa)}.bg-success{background-color:var(--success, #3aa76d) !important}.success{color:var(--success, #3aa76d);fill:var(--success, #3aa76d)}.border-success{border:var(--border-width-02, 0.125rem) solid var(--success, #3aa76d)}.bg-text-color{background-color:var(--text-color, #807f83) !important}.text-color{color:var(--text-color, #807f83);fill:var(--text-color, #807f83)}.border-text-color{border:var(--border-width-02, 0.125rem) solid var(--text-color, #807f83)}.bg-warning{background-color:var(--warning, #ed6e33) !important}.warning{color:var(--warning, #ed6e33);fill:var(--warning, #ed6e33)}.border-warning{border:var(--border-width-02, 0.125rem) solid var(--warning, #ed6e33)}.bg-wood{background-color:var(--wood, #99644c) !important}.wood{color:var(--wood, #99644c);fill:var(--wood, #99644c)}.border-wood{border:var(--border-width-02, 0.125rem) solid var(--wood, #99644c)}:host{display:block;width:100%;max-width:24rem;margin:0 auto}:host p{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:var(--spacing-16, 1rem);overflow:hidden;font-size:var(--font-size-14, 0.875rem);text-align:center}:host yoo-banner{height:0}:host yoo-banner p{padding:0}:host yoo-icon{position:absolute;top:var(--spacing-08, 0.5rem);right:var(--spacing-08, 0.5rem);background:var(--light, #ffffff);border-radius:50%}:host yoo-img{border-radius:inherit}:host .inner-container,:host .draggables,:host .connectables{display:grid;grid-gap:var(--spacing-08, 0.5rem)}:host .draggables,:host .connectables{height:-webkit-max-content;height:-moz-max-content;height:max-content;padding:var(--spacing-08, 0.5rem) 0}:host .inner-container{grid-template-rows:repeat(auto-fit, 75%);grid-template-columns:1fr 1fr;padding:0 var(--spacing-08, 0.5rem);overflow:hidden auto;word-break:break-word;background-color:var(--stable-alt-20, rgba(208, 208, 208, 0.2));border-radius:var(--border-radius-04, 0.25rem);-webkit-transition:height 500ms linear;transition:height 500ms linear;}:host .inner-container::-webkit-scrollbar{width:var(--spacing-08, 0.5rem)}:host .inner-container::-webkit-scrollbar-track{border-radius:var(--border-radius-04, 0.25rem);-webkit-box-shadow:inset 0 0 5px var(--stable, #adadad);box-shadow:inset 0 0 5px var(--stable, #adadad)}:host .inner-container::-webkit-scrollbar-thumb{background:var(--app-color, #5a30f4);border-radius:var(--border-radius-04, 0.25rem)}:host .connectable,:host .draggable{position:relative;width:100%;max-width:12rem;height:100%;background-color:var(--light, #ffffff);border-radius:var(--border-radius-08, 0.5rem);-webkit-box-shadow:var(--shadow-02, 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.1));box-shadow:var(--shadow-02, 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.1));cursor:pointer;-webkit-transition:background-color 0.25s ease-in-out, color 0.25s ease-in-out;transition:background-color 0.25s ease-in-out, color 0.25s ease-in-out}:host .connectable[data-hit],:host .draggable[data-hit]{background-color:var(--stable-light, #f1f1f1)}:host .connectable:before,:host .draggable:before{display:block;width:0;height:0;padding-bottom:75%;content:\"\"}:host .connectable.image,:host .draggable.image{padding:0}:host .connectable.image:not([data-hit]),:host .draggable.image:not([data-hit]){background-color:transparent}:host .connectable>*:not(yoo-icon),:host .draggable>*:not(yoo-icon){position:absolute;top:0;left:0;width:100%;height:100%}:host .overlay{background-color:inherit;border-radius:inherit;opacity:0.6}";
+const formConnectCss = ".bg-accent{background-color:var(--accent, #276ef1) !important}.accent{color:var(--accent, #276ef1);fill:var(--accent, #276ef1)}.border-accent{border:var(--border-width-02, 0.125rem) solid var(--accent, #276ef1)}.bg-app-color{background-color:var(--app-color, #5a30f4) !important}.app-color{color:var(--app-color, #5a30f4);fill:var(--app-color, #5a30f4)}.border-app-color{border:var(--border-width-02, 0.125rem) solid var(--app-color, #5a30f4)}.bg-danger{background-color:var(--danger, #d44333) !important}.danger{color:var(--danger, #d44333);fill:var(--danger, #d44333)}.border-danger{border:var(--border-width-02, 0.125rem) solid var(--danger, #d44333)}.bg-dark{background-color:var(--dark, #000000) !important}.dark{color:var(--dark, #000000);fill:var(--dark, #000000)}.border-dark{border:var(--border-width-02, 0.125rem) solid var(--dark, #000000)}.bg-energized{background-color:var(--energized, #ffc043) !important}.energized{color:var(--energized, #ffc043);fill:var(--energized, #ffc043)}.border-energized{border:var(--border-width-02, 0.125rem) solid var(--energized, #ffc043)}.bg-info{background-color:var(--info, #d84c96) !important}.info{color:var(--info, #d84c96);fill:var(--info, #d84c96)}.border-info{border:var(--border-width-02, 0.125rem) solid var(--info, #d84c96)}.bg-light{background-color:var(--light, #ffffff) !important}.light{color:var(--light, #ffffff);fill:var(--light, #ffffff)}.border-light{border:var(--border-width-02, 0.125rem) solid var(--light, #ffffff)}.bg-stable{background-color:var(--stable, #adadad) !important}.stable{color:var(--stable, #adadad);fill:var(--stable, #adadad)}.border-stable{border:var(--border-width-02, 0.125rem) solid var(--stable, #adadad)}.bg-stable-alt{background-color:var(--stable-alt, #d0d0d0) !important}.stable-alt{color:var(--stable-alt, #d0d0d0);fill:var(--stable-alt, #d0d0d0)}.border-stable-alt{border:var(--border-width-02, 0.125rem) solid var(--stable-alt, #d0d0d0)}.bg-stable-light{background-color:var(--stable-light, #f1f1f1) !important}.stable-light{color:var(--stable-light, #f1f1f1);fill:var(--stable-light, #f1f1f1)}.border-stable-light{border:var(--border-width-02, 0.125rem) solid var(--stable-light, #f1f1f1)}.bg-stable-ultralight{background-color:var(--stable-ultralight, #fafafa) !important}.stable-ultralight{color:var(--stable-ultralight, #fafafa);fill:var(--stable-ultralight, #fafafa)}.border-stable-ultralight{border:var(--border-width-02, 0.125rem) solid var(--stable-ultralight, #fafafa)}.bg-success{background-color:var(--success, #3aa76d) !important}.success{color:var(--success, #3aa76d);fill:var(--success, #3aa76d)}.border-success{border:var(--border-width-02, 0.125rem) solid var(--success, #3aa76d)}.bg-text-color{background-color:var(--text-color, #807f83) !important}.text-color{color:var(--text-color, #807f83);fill:var(--text-color, #807f83)}.border-text-color{border:var(--border-width-02, 0.125rem) solid var(--text-color, #807f83)}.bg-warning{background-color:var(--warning, #ed6e33) !important}.warning{color:var(--warning, #ed6e33);fill:var(--warning, #ed6e33)}.border-warning{border:var(--border-width-02, 0.125rem) solid var(--warning, #ed6e33)}.bg-wood{background-color:var(--wood, #99644c) !important}.wood{color:var(--wood, #99644c);fill:var(--wood, #99644c)}.border-wood{border:var(--border-width-02, 0.125rem) solid var(--wood, #99644c)}:host{display:block;width:100%;max-width:30rem;margin:0 auto}:host p{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:var(--spacing-16, 1rem);overflow:hidden;font-size:var(--font-size-14, 0.875rem);text-align:center}:host yoo-banner{height:0}:host yoo-banner p{padding:0}:host yoo-icon{position:absolute;top:var(--spacing-08, 0.5rem);right:var(--spacing-08, 0.5rem);background:var(--light, #ffffff);border-radius:50%}:host yoo-img{border-radius:inherit}:host main,:host #draggables,:host #connectables{display:grid;grid-gap:var(--spacing-08, 0.5rem)}:host #draggables,:host #connectables{height:-webkit-max-content;height:-moz-max-content;height:max-content;padding:var(--spacing-08, 0.5rem) 0}:host main{grid-template-rows:repeat(auto-fit, 75%);grid-template-columns:1fr 1fr;padding:0 var(--spacing-08, 0.5rem);word-break:break-word;background-color:var(--stable-alt-20, rgba(208, 208, 208, 0.2));border-radius:var(--border-radius-04, 0.25rem);-webkit-transition:height 750ms ease-in-out;transition:height 750ms ease-in-out}:host main.overflowing{overflow:hidden auto}:host main.overflowing::-webkit-scrollbar{width:var(--spacing-08, 0.5rem)}:host main.overflowing::-webkit-scrollbar-track{border-radius:var(--border-radius-04, 0.25rem);-webkit-box-shadow:inset 0 0 5px var(--stable, #adadad);box-shadow:inset 0 0 5px var(--stable, #adadad)}:host main.overflowing::-webkit-scrollbar-thumb{background:var(--app-color, #5a30f4);border-radius:var(--border-radius-04, 0.25rem)}:host .connectable,:host .draggable{position:relative;width:100%;max-width:15rem;height:100%;background-color:var(--light, #ffffff);border-radius:var(--border-radius-08, 0.5rem);-webkit-box-shadow:var(--shadow-02, 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.1));box-shadow:var(--shadow-02, 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.1));cursor:pointer;-webkit-transition:background-color 0.25s ease-in-out, color 0.25s ease-in-out;transition:background-color 0.25s ease-in-out, color 0.25s ease-in-out}:host .connectable:before,:host .draggable:before{display:block;width:0;height:0;padding-bottom:75%;content:\"\"}:host .connectable[type=image],:host .draggable[type=image]{padding:0}:host .connectable[type=image]:not([data-hit]),:host .draggable[type=image]:not([data-hit]){background-color:transparent}:host .connectable[type=image][hit] yoo-img,:host .draggable[type=image][hit] yoo-img{opacity:0.6;-webkit-transition:opacity 0.25s ease-in-out;transition:opacity 0.25s ease-in-out}:host .connectable[type=text][hit],:host .draggable[type=text][hit]{background-color:var(--stable-light, #f1f1f1)}:host .connectable>*:not(yoo-icon),:host .draggable>*:not(yoo-icon){position:absolute;top:0;left:0;width:100%;height:100%}:host #overlay{background-color:inherit;border-radius:inherit;opacity:0.6}";
 
 const YooFormConnectComponent = class {
   constructor(hostRef) {
@@ -40,8 +40,10 @@ const YooFormConnectComponent = class {
     this.isVisible = false;
     this.colors = ['warning', 'accent', 'app-color', 'info', 'energized'];
   }
-  onValuesChanged() {
-    draggableTagsHelpers.showWarningAlert(this.host, !this.isGameMatchable, 'NOTALLPAIREDVALUES');
+  async onValuesChanged() {
+    var _a;
+    draggableTagsHelpers.showWarningAlert(this.host, ((_a = this.values) === null || _a === void 0 ? void 0 : _a.length) > 1 && !this.isGamePairable, 'NOTALLPAIREDVALUES');
+    await this.scrollToRevealGame();
   }
   onValidityChanged() {
     this.validityChanged.emit(this.validity);
@@ -55,19 +57,16 @@ const YooFormConnectComponent = class {
   initAnswerChanged() {
     this.prepareGame();
   }
-  async onIsVisibleChanged(state) {
-    if (state) {
-      await this.scrollToRevealGame();
-      this.setScrollableHeight();
-    }
+  async onIsVisibleChanged() {
+    this.isVisible && this.scrollToRevealGame();
   }
   get hasValues() {
     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 isGameMatchable() {
+  get isGamePairable() {
     var _a, _b, _c, _d, _e, _f;
-    return ((_c = (_b = (_a = this.values) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.filter(v => v)) === null || _c === void 0 ? void 0 : _c.length) === ((_f = (_e = (_d = this.values) === null || _d === void 0 ? void 0 : _d[1]) === null || _e === void 0 ? void 0 : _e.filter(v => v)) === null || _f === void 0 ? void 0 : _f.length);
+    return ((_a = this.values) === null || _a === void 0 ? void 0 : _a.length) && ((_c = (_b = this.values[0]) === null || _b === void 0 ? void 0 : _b.filter(v => v)) === null || _c === void 0 ? void 0 : _c.length) === ((_f = (_e = (_d = this.values) === null || _d === void 0 ? void 0 : _d[1]) === null || _e === void 0 ? void 0 : _e.filter(v => v)) === null || _f === void 0 ? void 0 : _f.length);
   }
   get draggableElements() {
     return Array.from(this.host.shadowRoot.querySelectorAll('.draggable') || []);
@@ -88,45 +87,49 @@ const YooFormConnectComponent = class {
     this.initGame();
   }
   prepareGame() {
-    this.prepareItems();
+    this.prepareData();
     this.connectItems();
-    this.shuffleItems();
+    this.shuffleData();
   }
   async initGame() {
     await this.scrollToRevealGame();
-    this.setScrollableHeight();
     this.setDraggableObserver();
     this.initDraggables();
-    draggableTagsHelpers.showWarningAlert(this.host, !this.isGameMatchable, 'NOTALLPAIREDVALUES');
   }
   initDraggables() {
     var _a;
     (_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 && !this.livePreview && new Promise(resolve => {
-      setTimeout(() => {
-        scrollElement.scrollTo({ top: scrollElement.scrollHeight, behavior: 'smooth' });
-        resolve();
-      }, 1000);
-    });
-  }
-  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`;
+    const scrollElement = this.host.closest('yoo-ion-scroll');
+    if (scrollElement && this.values.length === 2) {
+      const setScrollableHeight = () => {
+        const getHeight = (el) => { var _a; return (_a = el === null || el === void 0 ? void 0 : el.getBoundingClientRect()) === null || _a === void 0 ? void 0 : _a.height; };
+        const formHeight = getHeight(this.host.closest('yoo-form-input-container'));
+        const tileHeight = getHeight(this.innerContainerElement.querySelector('[type]'));
+        if (formHeight && tileHeight && !this.readonly) {
+          const numberItems = Math.max(this.values[0].length, this.values[1].length);
+          const itemsHeight = numberItems * tileHeight + (numberItems + 1) * GAP_PADDING;
+          this.innerContainerElement.classList.toggle('overflowing', itemsHeight > formHeight);
+          this.innerContainerElement.style.height = `${Math.min(formHeight, itemsHeight)}px`;
+        }
+      };
+      await new Promise(resolve => {
+        setTimeout(() => {
+          scrollElement.scrollTo({
+            top: scrollElement.scrollHeight,
+            behavior: 'smooth'
+          });
+          resolve();
+        }, 1000);
+      });
+      setScrollableHeight();
     }
   }
   setDraggableObserver() {
-    this.draggables = this.draggables.map(d => {
+    var _a;
+    this.draggables = ((_a = this.draggables) === null || _a === void 0 ? void 0 : _a.map(d => {
       return new Proxy(d, {
         set: (draggable, key, value) => {
           draggable[key] = value;
@@ -149,16 +152,16 @@ const YooFormConnectComponent = class {
           return true;
         }
       });
-    });
+    })) || [];
   }
-  shuffleItems() {
+  shuffleData() {
     this.shuffled && CONNECT_TYPES.forEach(type => this[`${type}s`] = lodash.shuffle(this[`${type}s`]));
   }
-  prepareItems() {
+  prepareData() {
     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, i) => ({
-        value,
+        value: typeof value === 'string' ? value : (value === null || value === void 0 ? void 0 : value['text']) || (value === null || value === void 0 ? void 0 : value['file']),
         id: overlays.getUUID(),
         ...(!index && {
           color: this.colors[i]
@@ -182,25 +185,25 @@ const YooFormConnectComponent = class {
   }
   initDraggableActions(draggableElement) {
     var _a;
-    if (draggableElement) {
+    const currentDraggable = draggableElement && ((_a = this.draggables) === null || _a === void 0 ? void 0 : _a.find(({ id }) => id === draggableElement.id));
+    if (currentDraggable) {
       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 onDragStartElement = () => {
         this.blockMoves.emit(true);
-        draggableElement.removeAttribute('data-hit');
+        draggableElement.removeAttribute('hit');
       };
       const onDragElement = () => {
         var _a, _b;
         const overlapThreshold = '65%';
         const { x, width } = draggableElement.getBoundingClientRect();
-        const connectableThreshold = this.innerContainerElement.querySelector('.connectables').getBoundingClientRect().x;
+        const connectableThreshold = this.innerContainerElement.querySelector('#connectables').getBoundingClientRect().x;
         const isInConnectableArea = x + width >= connectableThreshold;
         if (isInConnectableArea) {
           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.setAttribute('data-hit', 'true');
+              tempConnectableElement.setAttribute('hit', 'true');
             }
           });
         }
@@ -213,7 +216,7 @@ const YooFormConnectComponent = class {
               color: 'var(--light)'
             });
           }
-          tempConnectableElement.removeAttribute('data-hit');
+          tempConnectableElement.removeAttribute('hit');
           tempConnectableElement = null;
         }
       };
@@ -221,13 +224,13 @@ const YooFormConnectComponent = class {
         await overlays.gsapTo(draggableElement, this.animated ? 0.25 : 0, { x: 0, y: 0 });
         if (tempConnectableElement) {
           currentDraggable.connectableId = tempConnectableElement.id;
-          tempConnectableElement.removeAttribute('data-hit');
+          tempConnectableElement.removeAttribute('hit');
           this.autoCompleteLastConnection();
         }
         tempConnectableElement = null;
         this.blockMoves.emit(false);
       };
-      const onClickElement = () => {
+      const onClickElement = async () => {
         var _a;
         currentDraggable.hit = { value: !((_a = currentDraggable.hit) === null || _a === void 0 ? void 0 : _a.value) && !currentDraggable.connectableId };
         delete currentDraggable.connectableId;
@@ -235,7 +238,7 @@ const YooFormConnectComponent = class {
         this.getUserAnswers();
         this.validateUserAnswers();
       };
-      if (!this.readonly && this.isGameMatchable && draggableElement) {
+      if (!this.readonly && this.isGamePairable && draggableElement) {
         currentDraggable.draggableInstance = new overlays.Draggable(draggableElement, {
           autoScroll: 1,
           bound: this.innerContainerElement,
@@ -252,7 +255,8 @@ const YooFormConnectComponent = class {
   }
   validateUserAnswers(userAnswers = this.userAnswers) {
     this.validity = !(userAnswers === null || userAnswers === void 0 ? void 0 : userAnswers.reduce((acc, v) => acc + v.filter(i => !i).length, 0));
-    formInputHelpers.setValueAndValidateInput(userAnswers, this);
+    this.value = userAnswers;
+    formInputHelpers.setValueAndValidateInput(this.value, this);
   }
   autoEraseLastConnection() {
     const connectedDraggables = this.draggables.filter(d => d.connectableId);
@@ -293,23 +297,27 @@ const YooFormConnectComponent = class {
   }
   renderContainer(name) {
     var _a;
-    return (index.h("section", { class: { [`${name}s`]: true } }, (_a = this[`${name}s`]) === null || _a === void 0 ? void 0 : _a.map((item) => {
+    return (index.h("section", { id: `${name}s` }, (_a = this[`${name}s`]) === null || _a === void 0 ? void 0 : _a.map((item) => {
       var _a;
       const isDraggable = name === 'draggable';
       const { id, value, connectableId, color } = item || {};
-      const isImage = !!(value && overlays.isImageUrl(value));
+      const isImage = value && overlays.isImageUrl(value);
       const connectable = this.draggables.find(d => d.connectableId === id);
       const isConnected = !!(connectableId || connectable);
       const tileColor = color || (connectable === null || connectable === void 0 ? void 0 : connectable.color);
       const connectedAttr = { style: { backgroundColor: `var(--${tileColor})`, color: 'var(--light)' }, connected: true };
-      return !!value && (index.h("div", { class: "tile-container" }, index.h("div", { ...(isConnected && connectedAttr), "data-hit": !!((_a = item === null || item === void 0 ? void 0 : item.hit) === null || _a === void 0 ? void 0 : _a.value) && isDraggable, id: id, key: id, class: { [name]: true, image: isImage }, onClick: () => { !isDraggable && this.onConnectableClick(item); } }, !isImage ? index.h("p", null, this.truncateValue(value)) : [index.h("yoo-img", { type: "background", src: value }), index.h("div", { class: "overlay" })], this.readonly && this.renderCorrectionIcon(value))));
+      const tileAttr = { ...(isConnected && connectedAttr), hit: !!((_a = item === null || item === void 0 ? void 0 : item.hit) === null || _a === void 0 ? void 0 : _a.value) && isDraggable, type: isImage ? 'image' : 'text' };
+      return !!value && (index.h("div", { ...tileAttr, id: id, key: id, class: { [name]: true }, onClick: () => { !isDraggable && this.onConnectableClick(item); } }, !isImage ? index.h("p", null, this.truncateValue(value)) : [index.h("yoo-img", { type: "background", src: value }), index.h("div", { id: "overlay" })], this.readonly && this.renderCorrectionIcon(value)));
     })));
   }
   renderBanner() {
     return this.livePreview && index.h("yoo-banner", null, index.h("p", { slot: "content" }));
   }
+  renderMain() {
+    return this.hasValues && index.h("main", { ref: element => (this.innerContainerElement = element) }, CONNECT_TYPES.map(type => this.renderContainer(type)));
+  }
   render() {
-    return this.hasValues && (index.h(index.Host, { class: commonHelpers.getAppContext(this.host) }, this.renderBanner(), index.h("div", { class: "inner-container", ref: (element) => (this.innerContainerElement = element) }, CONNECT_TYPES.map(type => this.renderContainer(type)))));
+    return index.h(index.Host, null, this.renderBanner(), this.renderMain());
   }
   get host() { return index.getElement(this); }
   static get watchers() { return {