@yoobic/yobi 8.1.0-23 → 8.1.0-27

package/dist/cjs/{filters-helpers-ca0e834a.js → filters-helpers-7c8d2dba.js}

@@ -7,16 +7,18 @@ const overlays = require('./overlays-0fcc78b9.js');
 
 function isWithValuesField(field) {
   var _a;
-  const types = [index.FormFieldType.autocomplete, index.FormFieldType.select, index.FormFieldType.selectmulti, index.FormFieldType.selectbuttons, index.FormFieldType.selectbuttonsmulti, index.FormFieldType.selectchat];
+  const types = [
+    index.FormFieldType.autocomplete,
+    index.FormFieldType.select,
+    index.FormFieldType.selectmulti,
+    index.FormFieldType.selectbuttons,
+    index.FormFieldType.selectbuttonsmulti,
+    index.FormFieldType.selectchat
+  ];
   return types.indexOf(field.type) >= 0 && ((_a = field.values) === null || _a === void 0 ? void 0 : _a.length) > 0;
 }
 function isAutocompleteField(field) {
-  const AUTOCOMPLETE_FIELD_TYPES = [
-    index.FormFieldType.location,
-    index.FormFieldType.user,
-    index.FormFieldType.catalog,
-    index.FormFieldType.tags
-  ];
+  const AUTOCOMPLETE_FIELD_TYPES = [index.FormFieldType.location, index.FormFieldType.user, index.FormFieldType.catalog, index.FormFieldType.tags];
   return !!(field.type === index.FormFieldType.autocomplete && field.collectionName) || AUTOCOMPLETE_FIELD_TYPES.includes(field.type);
 }
 function filterIsAutocomplete(field) {
@@ -27,17 +29,11 @@ function filterIsAutocompleteLocal(field) {
 }
 function isKanbanColumnField(field) {
   var _a;
-  return ((field.type === index.FormFieldType.select ||
-    field.type === index.FormFieldType.selectbuttons ||
-    field.type === index.FormFieldType.autocomplete) && ((_a = field.values) === null || _a === void 0 ? void 0 : _a.length) > 0) || (field.type === index.FormFieldType.user && !field.multiple);
+  return (((field.type === index.FormFieldType.select || field.type === index.FormFieldType.selectbuttons || field.type === index.FormFieldType.autocomplete) && ((_a = field.values) === null || _a === void 0 ? void 0 : _a.length) > 0) ||
+    (field.type === index.FormFieldType.user && !field.multiple));
 }
 function fieldIsFilter(field) {
-  const AUTOCOMPLETE_FIELD_TYPES = [
-    index.FormFieldType.filtertext,
-    index.FormFieldType.filternumber,
-    index.FormFieldType.filterdate,
-    index.FormFieldType.filterautocomplete
-  ];
+  const AUTOCOMPLETE_FIELD_TYPES = [index.FormFieldType.filtertext, index.FormFieldType.filternumber, index.FormFieldType.filterdate, index.FormFieldType.filterautocomplete];
   return AUTOCOMPLETE_FIELD_TYPES.includes(field.type);
 }
 function filterFromFormField(field, values, operator) {
@@ -86,6 +82,9 @@ function filterCleanupNewField(newField) {
   if (newField.title) {
     delete newField.description;
   }
+  if (newField.forceFilterable) {
+    delete newField.forceHidden;
+  }
   delete newField.allowCreate;
   delete newField.expandHeightOnShow;
   delete newField.isComputed;
@@ -218,16 +217,20 @@ function mapCustomViewToButton(c, currentCustomView, session, authentication, cu
     handler: () => customViewLoaded(c),
     // separator: true,
     actionableIcons: lodash.compact([
-      c.creatorRef === session.userId || authentication.isAdmin() ? {
-        icon: 'pen',
-        iconColor: 'stable',
-        handler: () => customViewSaved(c)
-      } : null,
-      c.creatorRef === session.userId || authentication.isAdmin() ? {
-        icon: 'delete',
-        iconColor: 'stable',
-        handler: () => customViewRemoved(c)
-      } : null
+      c.creatorRef === session.userId || authentication.isAdmin()
+        ? {
+          icon: 'pen',
+          iconColor: 'stable',
+          handler: () => customViewSaved(c)
+        }
+        : null,
+      c.creatorRef === session.userId || authentication.isAdmin()
+        ? {
+          icon: 'delete',
+          iconColor: 'stable',
+          handler: () => customViewRemoved(c)
+        }
+        : null
     ])
   };
 }

package/dist/cjs/{grid-renderers-f00166a0.js → grid-renderers-84a5858e.js}

@@ -42,9 +42,9 @@ function defaultRenderer(params) {
     const color = (_a = valuesColor === null || valuesColor === void 0 ? void 0 : valuesColor.find((c) => c.key === retVal)) === null || _a === void 0 ? void 0 : _a.value;
     const contrast = color ? overlays.getContrastColor(color) : overlays.getCssColor('dark');
     if (params.isExport) {
-      return translateFunction(retVal.toString());
+      return translateFunction(stripHtml((retVal === null || retVal === void 0 ? void 0 : retVal.toString()) || ''));
     }
-    return '<div class="' + (color ? 'color-container' : '') + '" style="background:' + (color || '') + ';color:' + contrast + '"  >' + translateFunction(retVal.toString()) + '</div>';
+    return ('<div class="' + (color ? 'color-container' : '') + '" style="background:' + (color || '') + ';color:' + contrast + '"  >' + translateFunction(retVal.toString()) + '</div>');
   }
 }
 function exportRenderer(params) {
@@ -53,7 +53,7 @@ function exportRenderer(params) {
   let retVal;
   if (params && params.column && params.column.getColDef) {
     const colDef = params.column.getColDef();
-    if (lodash.isFunction(colDef.cellRenderer) && colDef.cellRenderer !== photoRenderer) {
+    if (lodash.isFunction(colDef.cellRenderer)) {
       retVal = colDef.cellRenderer(params);
     }
     else if (colDef.cellRenderer === 'agGroupCellRenderer' && lodash.isNumber(params.value)) {
@@ -408,7 +408,7 @@ function photoRenderer(params) {
       ev.stopPropagation();
       overlays.dispatchCustomEvent('gridcellPhotoSelected', img, { ...params, index: 0 });
     };
-    return img;
+    return isCSVOrExcel(params) ? params.value : img;
   }
   return '';
 }
@@ -430,7 +430,7 @@ function multiphotoRenderer(params) {
       };
       container.appendChild(img);
     });
-    return container;
+    return isCSVOrExcel(params) ? photos : container;
   }
   return '';
 }
@@ -451,7 +451,7 @@ function imageRenderer(params) {
       img.src = photo;
       container.appendChild(img);
     });
-    return container;
+    return isCSVOrExcel(params) ? photos : container;
   }
   return '';
 }
@@ -519,7 +519,7 @@ function userRenderer(params) {
   var _a, _b, _c, _d, _e, _f;
   const user = params.value;
   if (params.isExport) {
-    return user ? overlays.getUserDisplayName(user) : (((_a = params === null || params === void 0 ? void 0 : params.data) === null || _a === void 0 ? void 0 : _a.userDisplayname) || ((_b = params === null || params === void 0 ? void 0 : params.data) === null || _b === void 0 ? void 0 : _b.ownerDisplayName));
+    return user ? overlays.getUserDisplayName(user) : ((_a = params === null || params === void 0 ? void 0 : params.data) === null || _a === void 0 ? void 0 : _a.userDisplayname) || ((_b = params === null || params === void 0 ? void 0 : params.data) === null || _b === void 0 ? void 0 : _b.ownerDisplayName);
   }
   if (user) {
     const displayName = document.createElement('span');
@@ -747,17 +747,19 @@ function missionStatusRenderer(params) {
   return isCSVOrExcel(params) ? stripHtml(retVal) : retVal;
 }
 function taskStatsRenderer(params) {
-  var _a;
   let retVal = '';
   const value = params.value;
-  retVal = (value === null || value === void 0 ? void 0 : value.countTasks) > 0 ? `<div class="not-center-container">
+  retVal =
+    (value === null || value === void 0 ? void 0 : value.countTasks) > 0
+      ? `<div class="not-center-container">
               <yoo-tag color="stable-light">
                 <yoo-icon slot="start" size="small" name="mission" color="stable"></yoo-icon>
-              ${(((value === null || value === void 0 ? void 0 : value.countFinished) || 0) + ((value === null || value === void 0 ? void 0 : value.countClosed) || 0)) + '/' + (value === null || value === void 0 ? void 0 : value.countTasks) + ' ' + overlays.translate('TASKS')}
+              ${((value === null || value === void 0 ? void 0 : value.countFinished) || 0) + ((value === null || value === void 0 ? void 0 : value.countClosed) || 0) + '/' + (value === null || value === void 0 ? void 0 : value.countTasks) + ' ' + overlays.translate('TASKS')}
               </yoo-tag>
-            </div>` : null;
+            </div>`
+      : null;
   retVal = retVal ? retVal : '';
-  return ((_a = params) === null || _a === void 0 ? void 0 : _a.type) === 'excel' ? stripHtml(retVal) : retVal;
+  return isCSVOrExcel(params) ? stripHtml(retVal) : retVal;
 }
 function salesAIQuantityRenderer(params) {
   const value = params.value;
@@ -857,7 +859,7 @@ function conformityRelativeProgressValue(node) {
  * @param {ICellRendererParams} params
  */
 function incentiveDateRangeRenderer(params) {
-  if (params.data && (params.data.status !== index.IncentiveStatus.draft)) {
+  if (params.data && params.data.status !== index.IncentiveStatus.draft) {
     return dateRangeRenderer(params);
   }
   return '<div>-</div>';
@@ -869,8 +871,8 @@ function incentiveDateRangeRenderer(params) {
  */
 function incentiveParticipantsRenderer(params) {
   const value = params.value || 0;
-  if (params.data && (params.data.status !== index.IncentiveStatus.draft)) {
-    const text = (params.data.partType === index.IncentivePartType.teams) ? 'INCENTIVETEAMSCOUNT' : 'INCENTIVEUSERSCOUNT';
+  if (params.data && params.data.status !== index.IncentiveStatus.draft) {
+    const text = params.data.partType === index.IncentivePartType.teams ? 'INCENTIVETEAMSCOUNT' : 'INCENTIVEUSERSCOUNT';
     return `<div>${overlays.translate(text, { n: value })}</div>`;
   }
   return '<div>-</div>';

package/dist/cjs/{index-b0c0b879.js → index-b6c80727.js}

@@ -224,7 +224,7 @@ class Tag {
     const { tagsId, element, id, isDropZoneFull } = zone || this.lastZone || {};
     const index = (_a = tagsId === null || tagsId === void 0 ? void 0 : tagsId.indexOf(this.id)) !== null && _a !== void 0 ? _a : -1;
     if (index !== -1 && (zone || this.zone.id !== id)) {
-      tagsId.splice(index, 1);
+      tagsId.slice(index, 1);
     }
     !tagsId.length && element.classList.remove('has-tag');
     !isDropZoneFull && element.classList.remove('completed');
@@ -289,7 +289,10 @@ class Tags extends Dropzones {
       tag.removeFromZone(zone);
       if (zone.element.contains(element)) {
         element.color = 'danger';
-        Tag.scaleUpDown(element, () => zone.element.removeChild(element));
+        Tag.scaleUpDown(element, () => {
+          zone.element.removeChild(element);
+          this.tags = this.tags.filter(t => t.id !== tag.id);
+        });
       }
       this.checkOverflowingTags();
       (_c = (_b = this.tagConfig).onTagDeleted) === null || _c === void 0 ? void 0 : _c.call(_b);

package/dist/cjs/yoo-ag-grid.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-f4b5bbb5.js');
 const lodash = require('./lodash-a046a0e1.js');
 const commonHelpers = require('./common-helpers-2014ee92.js');
-const gridRenderers = require('./grid-renderers-f00166a0.js');
+const gridRenderers = require('./grid-renderers-84a5858e.js');
 require('./index-e7333725.js');
 const overlays = require('./overlays-0fcc78b9.js');
 require('./index-970d5337.js');

package/dist/cjs/yoo-entity-query-builder.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-f4b5bbb5.js');
 const index$1 = require('./index-970d5337.js');
 require('./index-e7333725.js');
 const lodash = require('./lodash-a046a0e1.js');
-const filtersHelpers = require('./filters-helpers-ca0e834a.js');
+const filtersHelpers = require('./filters-helpers-7c8d2dba.js');
 const overlays = require('./overlays-0fcc78b9.js');
 require('./_commonjsHelpers-94df2ea7.js');
 

package/dist/cjs/yoo-entity-search-filters.cjs.entry.js

@@ -7,7 +7,7 @@ const index$1 = require('./index-970d5337.js');
 require('./index-e7333725.js');
 const lodash = require('./lodash-a046a0e1.js');
 const commonHelpers = require('./common-helpers-2014ee92.js');
-const filtersHelpers = require('./filters-helpers-ca0e834a.js');
+const filtersHelpers = require('./filters-helpers-7c8d2dba.js');
 const overlays = require('./overlays-0fcc78b9.js');
 require('./_commonjsHelpers-94df2ea7.js');
 

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-f4b5bbb5.js');
 require('./index-e7333725.js');
 const lodash = require('./lodash-a046a0e1.js');
-const index$1 = require('./index-b0c0b879.js');
+const index$1 = require('./index-b6c80727.js');
 const commonHelpers = require('./common-helpers-2014ee92.js');
 const draggableTagsHelpers = require('./draggable-tags-helpers-770764e5.js');
 const formInputHelpers = require('./form-input-helpers-515ae194.js');
@@ -71,6 +71,7 @@ let YooFormCategorizeWordsComponent = class {
       }
     };
     return {
+      clickToDrop: true,
       onFirstTagAnimationFinished: () => this.revealCategories = true,
       getColorTag: (tagValue, zoneIndex) => getColorTag(tagValue, zoneIndex),
       releaseTagExtraAction: () => onReleaseTag(),
@@ -112,19 +113,17 @@ let YooFormCategorizeWordsComponent = class {
   initGame() {
     this.tags = index$1.initTags(this.tagConfig, this.zonesConfig);
   }
-  getDefaultCounter(zoneIndex) {
-    var _a, _b, _c, _d;
-    return `${((_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a[zoneIndex]) === null || _b === void 0 ? void 0 : _b.length) || 0} / ${((_d = (_c = this.answer) === null || _c === void 0 ? void 0 : _c[zoneIndex]) === null || _d === void 0 ? void 0 : _d.length) || 0}`;
-  }
   renderTagsZone() {
     return index.h("section", { class: "tags" }, index.h("div", { class: "dropzone", id: "zone-tags" }));
   }
   renderDropContainers(zoneIndex) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e, _f, _g;
     const value = (_a = this.value) === null || _a === void 0 ? void 0 : _a[zoneIndex];
     const answer = (_b = this.answer) === null || _b === void 0 ? void 0 : _b[zoneIndex];
     const isZoneCompleted = (value === null || value === void 0 ? void 0 : value.length) === (answer === null || answer === void 0 ? void 0 : answer.length);
-    return (index.h("div", { class: { 'drop-container': true, 'completed': isZoneCompleted } }, index.h("div", { class: "drop-title", hidden: !this.readonly && this.animated && !(value === null || value === void 0 ? void 0 : value.length) && !this.revealCategories }, index.h("span", null, overlays.translateMulti((_c = this.categories) === null || _c === void 0 ? void 0 : _c[zoneIndex])), this.readonly && ` (${this.getDefaultCounter(zoneIndex)})`, !this.readonly && !!(answer === null || answer === void 0 ? void 0 : answer.length) && (index.h("span", { ref: (el) => (this.wordCounterElement[zoneIndex] = el), class: "words-counter" }, ` ${this.getDefaultCounter(zoneIndex)}`))), index.h("div", { class: "dropzone", id: `zone-${zoneIndex}` })));
+    const maxAnswers = ((_d = (_c = this.answer) === null || _c === void 0 ? void 0 : _c[zoneIndex]) === null || _d === void 0 ? void 0 : _d.length) || 0;
+    const nbrDroppedTags = ((_f = (_e = this.value) === null || _e === void 0 ? void 0 : _e[zoneIndex]) === null || _f === void 0 ? void 0 : _f.length) || 0;
+    return (index.h("div", { class: { 'drop-container': true, 'completed': isZoneCompleted } }, index.h("div", { class: "drop-title", hidden: !this.readonly && this.animated && !(value === null || value === void 0 ? void 0 : value.length) && !this.revealCategories }, index.h("span", null, overlays.translateMulti((_g = this.categories) === null || _g === void 0 ? void 0 : _g[zoneIndex])), this.readonly && ` (${nbrDroppedTags} / ${maxAnswers})`, !this.readonly && !!(answer === null || answer === void 0 ? void 0 : answer.length) && (index.h("span", { ref: (el) => (this.wordCounterElement[zoneIndex] = el), class: "words-counter" }, index.h("span", null, nbrDroppedTags), " / ", maxAnswers))), index.h("div", { class: "dropzone", id: `zone-${zoneIndex}` })));
   }
   renderBanner() {
     return this.livePreview && index.h("yoo-banner", null);

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

@@ -14,13 +14,14 @@ require('./_commonjsHelpers-94df2ea7.js');
 
 const CONNECT_TYPES = ['draggable', 'connectable'];
 
-const formConnectCss = ":root{--ease-in-back:cubic-bezier(0.36, 0, 0.66, -0.56);--ease-in-circ:cubic-bezier(0.55, 0, 1, 0.45);--ease-in-cubic:cubic-bezier(0.32, 0, 0.67, 0);--ease-in-expo:cubic-bezier(0.7, 0, 0.84, 0);--ease-in-quad:cubic-bezier(0.11, 0, 0.5, 0);--ease-in-quart:cubic-bezier(0.5, 0, 0.75, 0);--ease-in-quint:cubic-bezier(0.64, 0, 0.78, 0);--ease-in-sine:cubic-bezier(0.12, 0, 0.39, 0);--ease-out-back:cubic-bezier(0.34, 1.56, 0.64, 1);--ease-out-circ:cubic-bezier(0, 0.55, 0.45, 1);--ease-out-cubic:cubic-bezier(0.33, 1, 0.68, 1);--ease-out-expo:cubic-bezier(0.16, 1, 0.3, 1);--ease-out-quad:cubic-bezier(0.5, 1, 0.89, 1);--ease-out-quart:cubic-bezier(0.25, 1, 0.5, 1);--ease-out-quint:cubic-bezier(0.22, 1, 0.36, 1);--ease-out-sine:cubic-bezier(0.61, 1, 0.88, 1);--ease-in-out-back:cubic-bezier(0.68, -0.6, 0.32, 1.6);--ease-in-out-circ:cubic-bezier(0.85, 0, 0.15, 1);--ease-in-out-cubic:cubic-bezier(0.65, 0, 0.35, 1);--ease-in-out-expo:cubic-bezier(0.87, 0, 0.13, 1);--ease-in-out-quad:cubic-bezier(0.45, 0, 0.55, 1);--ease-in-out-quart:cubic-bezier(0.76, 0, 0.24, 1);--ease-in-out-quint:cubic-bezier(0.83, 0, 0.17, 1);--ease-in-out-sine:cubic-bezier(0.37, 0, 0.63, 1)}.tippy-box,.tippy-popper{line-height:1;white-space:pre-wrap}.tippy-box .tippy-tooltip,.tippy-popper .tippy-tooltip{padding:var(--spacing-02, 0.125rem)}.tippy-box{-webkit-box-shadow:var(--shadow-03, 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1));box-shadow:var(--shadow-03, 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1))}.tippy-box .tippy-content.editable{padding:0}.tippy-box .tippy-content .flex{display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around}.tippy-box .tippy-content .hidden{display:none}.tippy-box .tippy-content .editable-content{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;color:var(--dark, #000000)}.tippy-box .tippy-content .editable-content .text-content{min-width:5rem;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}.tippy-box .tippy-content .editable-content .text-content>div{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}.tippy-box .tippy-content .editable-content.readonly{padding:var(--spacing-08, 0.5rem)}.tippy-box .tippy-content .editable-content .maxchar-content{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-item-align:end;align-self:flex-end;height:var(--spacing-24, 1.5rem);padding-right:var(--spacing-08, 0.5rem)}.tippy-box .tippy-content .editable-content .action-content{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.tippy-box .tippy-content .editable-content .action-content yoo-button{padding:0 var(--spacing-08, 0.5rem)}.tippy-box .tippy-content .editable-content .action-content .edit-content{-ms-flex-align:center;align-items:center}.tippy-box .tippy-content .editable-content .action-content .edit-content yoo-icon{padding-left:var(--spacing-08, 0.5rem);cursor:pointer}.tippy-box .tippy-content .editable-content .edit-content>*{cursor:pointer}.tippy-box .tippy-content .request-access{padding:var(--spacing-08, 0.5rem)}.tippy-box .tippy-content .request-access .title{margin-bottom:var(--spacing-08, 0.5rem);font-weight:var(--font-weight-700, 700)}.tippy-box .tippy-content .request-access .sub-title{display:-ms-flexbox;display:flex;margin-bottom:var(--spacing-08, 0.5rem);font-weight:var(--font-weight-300, 300);font-size:var(--font-size-14, 0.875rem)}.tippy-box .tippy-content .request-access .sub-title yoo-avatar{margin:0 var(--spacing-04, 0.25rem)}.tippy-box .tippy-content .request-access yoo-button{max-width:8rem}.tippy-box[data-theme~=startameeting] .tippy-content{padding:0;border-radius:var(--border-radius-04, 0.25rem)}.tippy-box[data-theme~=large]{font-size:var(--font-size-16, 1rem)}.tippy-box[data-theme~=large] .tippy-content{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=large] .tippy-content .editable-content{padding:var(--spacing-04, 0.25rem)}.tippy-box[data-theme~=large] .tippy-content .editable-content .text-content{padding-right:var(--spacing-16, 1rem)}.tippy-box[data-theme~=large] .tippy-content .editable-content yoo-icon{margin:0 var(--spacing-04, 0.25rem)}.tippy-box[data-theme~=small]{font-size:var(--font-size-16, 1rem)}.tippy-box[data-theme~=small] .tippy-content{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=small] .tippy-content .editable-content{padding:var(--spacing-04, 0.25rem)}.tippy-box[data-theme~=small] .tippy-content .editable-content .text-content{padding-right:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=small] .tippy-content .editable-content yoo-icon{margin:0 var(--spacing-04, 0.25rem)}.tippy-box[data-theme~=accent]{background-color:var(--accent, #276ef1)}.tippy-box[data-theme~=accent] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=accent] .tippy-svg-arrow{fill:var(--accent, #276ef1)}.tippy-box[data-theme~=accent][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--accent, #276ef1)}.tippy-box[data-theme~=accent][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--accent, #276ef1)}.tippy-box[data-theme~=accent][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--accent, #276ef1)}.tippy-box[data-theme~=accent][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--accent, #276ef1)}.tippy-box[data-theme~=anthracite]{background-color:var(--anthracite, #1a1a1a)}.tippy-box[data-theme~=anthracite] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=anthracite] .tippy-svg-arrow{fill:var(--anthracite, #1a1a1a)}.tippy-box[data-theme~=anthracite][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--anthracite, #1a1a1a)}.tippy-box[data-theme~=anthracite][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--anthracite, #1a1a1a)}.tippy-box[data-theme~=anthracite][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--anthracite, #1a1a1a)}.tippy-box[data-theme~=anthracite][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--anthracite, #1a1a1a)}.tippy-box[data-theme~=app-color]{background-color:var(--app-color, #5a30f4)}.tippy-box[data-theme~=app-color] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=app-color] .tippy-svg-arrow{fill:var(--app-color, #5a30f4)}.tippy-box[data-theme~=app-color][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--app-color, #5a30f4)}.tippy-box[data-theme~=app-color][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--app-color, #5a30f4)}.tippy-box[data-theme~=app-color][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--app-color, #5a30f4)}.tippy-box[data-theme~=app-color][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--app-color, #5a30f4)}.tippy-box[data-theme~=danger]{background-color:var(--danger, #d44333)}.tippy-box[data-theme~=danger] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=danger] .tippy-svg-arrow{fill:var(--danger, #d44333)}.tippy-box[data-theme~=danger][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--danger, #d44333)}.tippy-box[data-theme~=danger][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--danger, #d44333)}.tippy-box[data-theme~=danger][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--danger, #d44333)}.tippy-box[data-theme~=danger][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--danger, #d44333)}.tippy-box[data-theme~=dark]{background-color:var(--dark, #000000)}.tippy-box[data-theme~=dark] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=dark] .tippy-svg-arrow{fill:var(--dark, #000000)}.tippy-box[data-theme~=dark][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--dark, #000000)}.tippy-box[data-theme~=dark][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--dark, #000000)}.tippy-box[data-theme~=dark][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--dark, #000000)}.tippy-box[data-theme~=dark][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--dark, #000000)}.tippy-box[data-theme~=energized]{background-color:var(--energized, #ffc043)}.tippy-box[data-theme~=energized] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=energized] .tippy-svg-arrow{fill:var(--energized, #ffc043)}.tippy-box[data-theme~=energized][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--energized, #ffc043)}.tippy-box[data-theme~=energized][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--energized, #ffc043)}.tippy-box[data-theme~=energized][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--energized, #ffc043)}.tippy-box[data-theme~=energized][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--energized, #ffc043)}.tippy-box[data-theme~=info]{background-color:var(--info, #d84c96)}.tippy-box[data-theme~=info] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=info] .tippy-svg-arrow{fill:var(--info, #d84c96)}.tippy-box[data-theme~=info][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--info, #d84c96)}.tippy-box[data-theme~=info][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--info, #d84c96)}.tippy-box[data-theme~=info][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--info, #d84c96)}.tippy-box[data-theme~=info][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--info, #d84c96)}.tippy-box[data-theme~=light]{background-color:var(--light, #ffffff)}.tippy-box[data-theme~=light] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=light] .tippy-svg-arrow{fill:var(--light, #ffffff)}.tippy-box[data-theme~=light][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--light, #ffffff)}.tippy-box[data-theme~=light][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--light, #ffffff)}.tippy-box[data-theme~=light][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--light, #ffffff)}.tippy-box[data-theme~=light][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--light, #ffffff)}.tippy-box[data-theme~=stable]{background-color:var(--stable, #adadad)}.tippy-box[data-theme~=stable] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=stable] .tippy-svg-arrow{fill:var(--stable, #adadad)}.tippy-box[data-theme~=stable][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--stable, #adadad)}.tippy-box[data-theme~=stable][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--stable, #adadad)}.tippy-box[data-theme~=stable][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--stable, #adadad)}.tippy-box[data-theme~=stable][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--stable, #adadad)}.tippy-box[data-theme~=stable-alt]{background-color:var(--stable-alt, #d0d0d0)}.tippy-box[data-theme~=stable-alt] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=stable-alt] .tippy-svg-arrow{fill:var(--stable-alt, #d0d0d0)}.tippy-box[data-theme~=stable-alt][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--stable-alt, #d0d0d0)}.tippy-box[data-theme~=stable-alt][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--stable-alt, #d0d0d0)}.tippy-box[data-theme~=stable-alt][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--stable-alt, #d0d0d0)}.tippy-box[data-theme~=stable-alt][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--stable-alt, #d0d0d0)}.tippy-box[data-theme~=stable-light]{background-color:var(--stable-light, #f1f1f1)}.tippy-box[data-theme~=stable-light] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=stable-light] .tippy-svg-arrow{fill:var(--stable-light, #f1f1f1)}.tippy-box[data-theme~=stable-light][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--stable-light, #f1f1f1)}.tippy-box[data-theme~=stable-light][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--stable-light, #f1f1f1)}.tippy-box[data-theme~=stable-light][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--stable-light, #f1f1f1)}.tippy-box[data-theme~=stable-light][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--stable-light, #f1f1f1)}.tippy-box[data-theme~=stable-ultralight]{background-color:var(--stable-ultralight, #fafafa)}.tippy-box[data-theme~=stable-ultralight] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=stable-ultralight] .tippy-svg-arrow{fill:var(--stable-ultralight, #fafafa)}.tippy-box[data-theme~=stable-ultralight][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--stable-ultralight, #fafafa)}.tippy-box[data-theme~=stable-ultralight][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--stable-ultralight, #fafafa)}.tippy-box[data-theme~=stable-ultralight][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--stable-ultralight, #fafafa)}.tippy-box[data-theme~=stable-ultralight][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--stable-ultralight, #fafafa)}.tippy-box[data-theme~=success]{background-color:var(--success, #3aa76d)}.tippy-box[data-theme~=success] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=success] .tippy-svg-arrow{fill:var(--success, #3aa76d)}.tippy-box[data-theme~=success][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--success, #3aa76d)}.tippy-box[data-theme~=success][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--success, #3aa76d)}.tippy-box[data-theme~=success][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--success, #3aa76d)}.tippy-box[data-theme~=success][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--success, #3aa76d)}.tippy-box[data-theme~=text-color]{background-color:var(--text-color, #807f83)}.tippy-box[data-theme~=text-color] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=text-color] .tippy-svg-arrow{fill:var(--text-color, #807f83)}.tippy-box[data-theme~=text-color][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--text-color, #807f83)}.tippy-box[data-theme~=text-color][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--text-color, #807f83)}.tippy-box[data-theme~=text-color][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--text-color, #807f83)}.tippy-box[data-theme~=text-color][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--text-color, #807f83)}.tippy-box[data-theme~=warning]{background-color:var(--warning, #ed6e33)}.tippy-box[data-theme~=warning] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=warning] .tippy-svg-arrow{fill:var(--warning, #ed6e33)}.tippy-box[data-theme~=warning][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--warning, #ed6e33)}.tippy-box[data-theme~=warning][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--warning, #ed6e33)}.tippy-box[data-theme~=warning][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--warning, #ed6e33)}.tippy-box[data-theme~=warning][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--warning, #ed6e33)}:root{--safe-area-inset-top:0rem;--safe-area-inset-right:0rem;--safe-area-inset-bottom:0rem;--safe-area-inset-left:0rem}@supports (top: constant(safe-area-inset-top)){:root{--safe-area-inset-top:constant(safe-area-inset-top);--safe-area-inset-right:constant(safe-area-inset-right);--safe-area-inset-bottom:constant(safe-area-inset-bottom);--safe-area-inset-left:constant(safe-area-inset-left)}}@supports (top: env(safe-area-inset-top)){:root{--safe-area-inset-top:env(safe-area-inset-top);--safe-area-inset-right:env(safe-area-inset-right);--safe-area-inset-bottom:env(safe-area-inset-bottom);--safe-area-inset-left:env(safe-area-inset-left)}}.fr-popup.fr-active{z-index:30004 !important;display:block !important;opacity:1 !important}.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-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))}:host .connectable:before,:host .draggable:before{display:block;width:0;height:0;padding-bottom:75%;content:\"\"}:host .connectable.animated,:host .draggable.animated{-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.image,:host .draggable.image{padding:0;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 = ":root{--ease-in-back:cubic-bezier(0.36, 0, 0.66, -0.56);--ease-in-circ:cubic-bezier(0.55, 0, 1, 0.45);--ease-in-cubic:cubic-bezier(0.32, 0, 0.67, 0);--ease-in-expo:cubic-bezier(0.7, 0, 0.84, 0);--ease-in-quad:cubic-bezier(0.11, 0, 0.5, 0);--ease-in-quart:cubic-bezier(0.5, 0, 0.75, 0);--ease-in-quint:cubic-bezier(0.64, 0, 0.78, 0);--ease-in-sine:cubic-bezier(0.12, 0, 0.39, 0);--ease-out-back:cubic-bezier(0.34, 1.56, 0.64, 1);--ease-out-circ:cubic-bezier(0, 0.55, 0.45, 1);--ease-out-cubic:cubic-bezier(0.33, 1, 0.68, 1);--ease-out-expo:cubic-bezier(0.16, 1, 0.3, 1);--ease-out-quad:cubic-bezier(0.5, 1, 0.89, 1);--ease-out-quart:cubic-bezier(0.25, 1, 0.5, 1);--ease-out-quint:cubic-bezier(0.22, 1, 0.36, 1);--ease-out-sine:cubic-bezier(0.61, 1, 0.88, 1);--ease-in-out-back:cubic-bezier(0.68, -0.6, 0.32, 1.6);--ease-in-out-circ:cubic-bezier(0.85, 0, 0.15, 1);--ease-in-out-cubic:cubic-bezier(0.65, 0, 0.35, 1);--ease-in-out-expo:cubic-bezier(0.87, 0, 0.13, 1);--ease-in-out-quad:cubic-bezier(0.45, 0, 0.55, 1);--ease-in-out-quart:cubic-bezier(0.76, 0, 0.24, 1);--ease-in-out-quint:cubic-bezier(0.83, 0, 0.17, 1);--ease-in-out-sine:cubic-bezier(0.37, 0, 0.63, 1)}.tippy-box,.tippy-popper{line-height:1;white-space:pre-wrap}.tippy-box .tippy-tooltip,.tippy-popper .tippy-tooltip{padding:var(--spacing-02, 0.125rem)}.tippy-box{-webkit-box-shadow:var(--shadow-03, 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1));box-shadow:var(--shadow-03, 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1))}.tippy-box .tippy-content.editable{padding:0}.tippy-box .tippy-content .flex{display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around}.tippy-box .tippy-content .hidden{display:none}.tippy-box .tippy-content .editable-content{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;color:var(--dark, #000000)}.tippy-box .tippy-content .editable-content .text-content{min-width:5rem;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}.tippy-box .tippy-content .editable-content .text-content>div{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}.tippy-box .tippy-content .editable-content.readonly{padding:var(--spacing-08, 0.5rem)}.tippy-box .tippy-content .editable-content .maxchar-content{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-item-align:end;align-self:flex-end;height:var(--spacing-24, 1.5rem);padding-right:var(--spacing-08, 0.5rem)}.tippy-box .tippy-content .editable-content .action-content{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.tippy-box .tippy-content .editable-content .action-content yoo-button{padding:0 var(--spacing-08, 0.5rem)}.tippy-box .tippy-content .editable-content .action-content .edit-content{-ms-flex-align:center;align-items:center}.tippy-box .tippy-content .editable-content .action-content .edit-content yoo-icon{padding-left:var(--spacing-08, 0.5rem);cursor:pointer}.tippy-box .tippy-content .editable-content .edit-content>*{cursor:pointer}.tippy-box .tippy-content .request-access{padding:var(--spacing-08, 0.5rem)}.tippy-box .tippy-content .request-access .title{margin-bottom:var(--spacing-08, 0.5rem);font-weight:var(--font-weight-700, 700)}.tippy-box .tippy-content .request-access .sub-title{display:-ms-flexbox;display:flex;margin-bottom:var(--spacing-08, 0.5rem);font-weight:var(--font-weight-300, 300);font-size:var(--font-size-14, 0.875rem)}.tippy-box .tippy-content .request-access .sub-title yoo-avatar{margin:0 var(--spacing-04, 0.25rem)}.tippy-box .tippy-content .request-access yoo-button{max-width:8rem}.tippy-box[data-theme~=startameeting] .tippy-content{padding:0;border-radius:var(--border-radius-04, 0.25rem)}.tippy-box[data-theme~=large]{font-size:var(--font-size-16, 1rem)}.tippy-box[data-theme~=large] .tippy-content{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=large] .tippy-content .editable-content{padding:var(--spacing-04, 0.25rem)}.tippy-box[data-theme~=large] .tippy-content .editable-content .text-content{padding-right:var(--spacing-16, 1rem)}.tippy-box[data-theme~=large] .tippy-content .editable-content yoo-icon{margin:0 var(--spacing-04, 0.25rem)}.tippy-box[data-theme~=small]{font-size:var(--font-size-16, 1rem)}.tippy-box[data-theme~=small] .tippy-content{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=small] .tippy-content .editable-content{padding:var(--spacing-04, 0.25rem)}.tippy-box[data-theme~=small] .tippy-content .editable-content .text-content{padding-right:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=small] .tippy-content .editable-content yoo-icon{margin:0 var(--spacing-04, 0.25rem)}.tippy-box[data-theme~=accent]{background-color:var(--accent, #276ef1)}.tippy-box[data-theme~=accent] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=accent] .tippy-svg-arrow{fill:var(--accent, #276ef1)}.tippy-box[data-theme~=accent][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--accent, #276ef1)}.tippy-box[data-theme~=accent][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--accent, #276ef1)}.tippy-box[data-theme~=accent][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--accent, #276ef1)}.tippy-box[data-theme~=accent][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--accent, #276ef1)}.tippy-box[data-theme~=anthracite]{background-color:var(--anthracite, #1a1a1a)}.tippy-box[data-theme~=anthracite] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=anthracite] .tippy-svg-arrow{fill:var(--anthracite, #1a1a1a)}.tippy-box[data-theme~=anthracite][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--anthracite, #1a1a1a)}.tippy-box[data-theme~=anthracite][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--anthracite, #1a1a1a)}.tippy-box[data-theme~=anthracite][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--anthracite, #1a1a1a)}.tippy-box[data-theme~=anthracite][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--anthracite, #1a1a1a)}.tippy-box[data-theme~=app-color]{background-color:var(--app-color, #5a30f4)}.tippy-box[data-theme~=app-color] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=app-color] .tippy-svg-arrow{fill:var(--app-color, #5a30f4)}.tippy-box[data-theme~=app-color][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--app-color, #5a30f4)}.tippy-box[data-theme~=app-color][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--app-color, #5a30f4)}.tippy-box[data-theme~=app-color][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--app-color, #5a30f4)}.tippy-box[data-theme~=app-color][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--app-color, #5a30f4)}.tippy-box[data-theme~=danger]{background-color:var(--danger, #d44333)}.tippy-box[data-theme~=danger] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=danger] .tippy-svg-arrow{fill:var(--danger, #d44333)}.tippy-box[data-theme~=danger][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--danger, #d44333)}.tippy-box[data-theme~=danger][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--danger, #d44333)}.tippy-box[data-theme~=danger][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--danger, #d44333)}.tippy-box[data-theme~=danger][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--danger, #d44333)}.tippy-box[data-theme~=dark]{background-color:var(--dark, #000000)}.tippy-box[data-theme~=dark] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=dark] .tippy-svg-arrow{fill:var(--dark, #000000)}.tippy-box[data-theme~=dark][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--dark, #000000)}.tippy-box[data-theme~=dark][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--dark, #000000)}.tippy-box[data-theme~=dark][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--dark, #000000)}.tippy-box[data-theme~=dark][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--dark, #000000)}.tippy-box[data-theme~=energized]{background-color:var(--energized, #ffc043)}.tippy-box[data-theme~=energized] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=energized] .tippy-svg-arrow{fill:var(--energized, #ffc043)}.tippy-box[data-theme~=energized][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--energized, #ffc043)}.tippy-box[data-theme~=energized][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--energized, #ffc043)}.tippy-box[data-theme~=energized][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--energized, #ffc043)}.tippy-box[data-theme~=energized][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--energized, #ffc043)}.tippy-box[data-theme~=info]{background-color:var(--info, #d84c96)}.tippy-box[data-theme~=info] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=info] .tippy-svg-arrow{fill:var(--info, #d84c96)}.tippy-box[data-theme~=info][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--info, #d84c96)}.tippy-box[data-theme~=info][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--info, #d84c96)}.tippy-box[data-theme~=info][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--info, #d84c96)}.tippy-box[data-theme~=info][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--info, #d84c96)}.tippy-box[data-theme~=light]{background-color:var(--light, #ffffff)}.tippy-box[data-theme~=light] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=light] .tippy-svg-arrow{fill:var(--light, #ffffff)}.tippy-box[data-theme~=light][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--light, #ffffff)}.tippy-box[data-theme~=light][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--light, #ffffff)}.tippy-box[data-theme~=light][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--light, #ffffff)}.tippy-box[data-theme~=light][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--light, #ffffff)}.tippy-box[data-theme~=stable]{background-color:var(--stable, #adadad)}.tippy-box[data-theme~=stable] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=stable] .tippy-svg-arrow{fill:var(--stable, #adadad)}.tippy-box[data-theme~=stable][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--stable, #adadad)}.tippy-box[data-theme~=stable][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--stable, #adadad)}.tippy-box[data-theme~=stable][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--stable, #adadad)}.tippy-box[data-theme~=stable][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--stable, #adadad)}.tippy-box[data-theme~=stable-alt]{background-color:var(--stable-alt, #d0d0d0)}.tippy-box[data-theme~=stable-alt] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=stable-alt] .tippy-svg-arrow{fill:var(--stable-alt, #d0d0d0)}.tippy-box[data-theme~=stable-alt][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--stable-alt, #d0d0d0)}.tippy-box[data-theme~=stable-alt][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--stable-alt, #d0d0d0)}.tippy-box[data-theme~=stable-alt][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--stable-alt, #d0d0d0)}.tippy-box[data-theme~=stable-alt][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--stable-alt, #d0d0d0)}.tippy-box[data-theme~=stable-light]{background-color:var(--stable-light, #f1f1f1)}.tippy-box[data-theme~=stable-light] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=stable-light] .tippy-svg-arrow{fill:var(--stable-light, #f1f1f1)}.tippy-box[data-theme~=stable-light][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--stable-light, #f1f1f1)}.tippy-box[data-theme~=stable-light][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--stable-light, #f1f1f1)}.tippy-box[data-theme~=stable-light][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--stable-light, #f1f1f1)}.tippy-box[data-theme~=stable-light][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--stable-light, #f1f1f1)}.tippy-box[data-theme~=stable-ultralight]{background-color:var(--stable-ultralight, #fafafa)}.tippy-box[data-theme~=stable-ultralight] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=stable-ultralight] .tippy-svg-arrow{fill:var(--stable-ultralight, #fafafa)}.tippy-box[data-theme~=stable-ultralight][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--stable-ultralight, #fafafa)}.tippy-box[data-theme~=stable-ultralight][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--stable-ultralight, #fafafa)}.tippy-box[data-theme~=stable-ultralight][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--stable-ultralight, #fafafa)}.tippy-box[data-theme~=stable-ultralight][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--stable-ultralight, #fafafa)}.tippy-box[data-theme~=success]{background-color:var(--success, #3aa76d)}.tippy-box[data-theme~=success] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=success] .tippy-svg-arrow{fill:var(--success, #3aa76d)}.tippy-box[data-theme~=success][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--success, #3aa76d)}.tippy-box[data-theme~=success][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--success, #3aa76d)}.tippy-box[data-theme~=success][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--success, #3aa76d)}.tippy-box[data-theme~=success][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--success, #3aa76d)}.tippy-box[data-theme~=text-color]{background-color:var(--text-color, #807f83)}.tippy-box[data-theme~=text-color] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=text-color] .tippy-svg-arrow{fill:var(--text-color, #807f83)}.tippy-box[data-theme~=text-color][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--text-color, #807f83)}.tippy-box[data-theme~=text-color][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--text-color, #807f83)}.tippy-box[data-theme~=text-color][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--text-color, #807f83)}.tippy-box[data-theme~=text-color][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--text-color, #807f83)}.tippy-box[data-theme~=warning]{background-color:var(--warning, #ed6e33)}.tippy-box[data-theme~=warning] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=warning] .tippy-svg-arrow{fill:var(--warning, #ed6e33)}.tippy-box[data-theme~=warning][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--warning, #ed6e33)}.tippy-box[data-theme~=warning][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--warning, #ed6e33)}.tippy-box[data-theme~=warning][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--warning, #ed6e33)}.tippy-box[data-theme~=warning][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--warning, #ed6e33)}:root{--safe-area-inset-top:0rem;--safe-area-inset-right:0rem;--safe-area-inset-bottom:0rem;--safe-area-inset-left:0rem}@supports (top: constant(safe-area-inset-top)){:root{--safe-area-inset-top:constant(safe-area-inset-top);--safe-area-inset-right:constant(safe-area-inset-right);--safe-area-inset-bottom:constant(safe-area-inset-bottom);--safe-area-inset-left:constant(safe-area-inset-left)}}@supports (top: env(safe-area-inset-top)){:root{--safe-area-inset-top:env(safe-area-inset-top);--safe-area-inset-right:env(safe-area-inset-right);--safe-area-inset-bottom:env(safe-area-inset-bottom);--safe-area-inset-left:env(safe-area-inset-left)}}.fr-popup.fr-active{z-index:30004 !important;display:block !important;opacity:1 !important}.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-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}";
 
 let YooFormConnectComponent = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.validityChanged = index.createEvent(this, "validityChanged", 7);
     this.inputChanged = index.createEvent(this, "inputChanged", 7);
+    this.blockMoves = index.createEvent(this, "blockMoves", 7);
     /**
      * Read-only mode : true if displayed within a quiz summary
      */
@@ -126,18 +127,25 @@ let YooFormConnectComponent = class {
   setDraggableObserver() {
     this.draggables = this.draggables.map(d => {
       return new Proxy(d, {
-        set: (target, key, value) => {
+        set: (draggable, key, value) => {
+          draggable[key] = value;
           if (key === 'connectableId') {
-            target[key] = value;
-            this.draggables.forEach(d => {
-              if (d.connectableId === value && d.id !== target.id) {
-                delete d.connectableId;
+            this.draggables.forEach(dr => {
+              if (dr.connectableId === value && dr.id !== draggable.id) {
+                delete dr.connectableId;
               }
             });
             this.getUserAnswers();
             this.validateUserAnswers();
           }
-          return target[key] = value;
+          if (key === 'hit') {
+            this.draggables.map(dr => {
+              if ((dr.id !== draggable.id)) {
+                delete dr.hit;
+              }
+            });
+          }
+          return true;
         }
       });
     });
@@ -176,6 +184,10 @@ let YooFormConnectComponent = class {
     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 onDragStartElement = () => {
+        this.blockMoves.emit(true);
+        draggableElement.removeAttribute('data-hit');
+      };
       const onDragElement = () => {
         var _a, _b;
         const overlapThreshold = '65%';
@@ -187,7 +199,7 @@ let YooFormConnectComponent = class {
             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)';
+              tempConnectableElement.setAttribute('data-hit', 'true');
             }
           });
         }
@@ -200,6 +212,7 @@ let YooFormConnectComponent = class {
               color: 'var(--light)'
             });
           }
+          tempConnectableElement.removeAttribute('data-hit');
           tempConnectableElement = null;
         }
       };
@@ -207,13 +220,17 @@ let 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');
           this.autoCompleteLastConnection();
         }
         tempConnectableElement = null;
+        this.blockMoves.emit(false);
       };
-      const onCancelConnection = () => {
+      const onClickElement = () => {
+        var _a;
+        currentDraggable.hit = { value: !((_a = currentDraggable.hit) === null || _a === void 0 ? void 0 : _a.value) && !currentDraggable.connectableId };
         delete currentDraggable.connectableId;
-        this.autoEraseLastConnection();
+        !currentDraggable.hit.value && this.autoEraseLastConnection();
         this.getUserAnswers();
         this.validateUserAnswers();
       };
@@ -221,8 +238,9 @@ let YooFormConnectComponent = class {
         currentDraggable.draggableInstance = new overlays.Draggable(draggableElement, {
           autoScroll: 1,
           bound: this.innerContainerElement,
+          onDragStart: onDragStartElement,
           onDrag: onDragElement,
-          onClick: onCancelConnection,
+          onClick: onClickElement,
           onRelease: onReleaseElement
         });
       }
@@ -260,6 +278,13 @@ let YooFormConnectComponent = class {
       return isTruncabled ? translatedValue.substr(0, MAX_LENGTH).concat('...') : translatedValue;
     }
   }
+  onConnectableClick(connectable) {
+    const hitDraggable = this.draggables.find(d => { var _a; return (_a = d.hit) === null || _a === void 0 ? void 0 : _a.value; });
+    if (hitDraggable && connectable) {
+      hitDraggable.connectableId = connectable.id;
+      this.autoCompleteLastConnection();
+    }
+  }
   renderCorrectionIcon(value) {
     const getCouple = (values) => values === null || values === void 0 ? void 0 : values.find(v => v.includes(value));
     const isCorrect = lodash.isEqual(getCouple(this.value), getCouple(this.answer));
@@ -268,12 +293,15 @@ let 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) => {
-      var _a, _b;
+      var _a;
+      const isDraggable = name === 'draggable';
       const { id, value, connectableId, color } = item || {};
       const isImage = !!(value && overlays.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 && (index.h("div", { class: "tile-container" }, index.h("div", { ...(isConnected && { style: { backgroundColor: `var(--${tileColor})`, color: 'var(--light)' }, connected: true }), id: id, key: id, class: { [name]: true, image: isImage, animated: this.animated } }, !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 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))));
     })));
   }
   renderBanner() {

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

@@ -1247,7 +1247,7 @@ let YooFormDynamicComponent = class {
       var _a, _b;
       const step = {
         title: slide.title,
-        valid: ((_a = slidesState[index]) === null || _a === void 0 ? void 0 : _a.validity) ? true : this.failedSubmission.length > 0 ? false : null,
+        valid: slidesState && ((_a = slidesState[index]) === null || _a === void 0 ? void 0 : _a.validity) ? true : this.failedSubmission.length > 0 ? false : null,
         validityPercentage: (_b = slidesState[index]) === null || _b === void 0 ? void 0 : _b.validityPercentage
       };
       return step;

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-f4b5bbb5.js');
 const index$2 = require('./index-e7333725.js');
 const lodash = require('./lodash-a046a0e1.js');
-const index$1 = require('./index-b0c0b879.js');
+const index$1 = require('./index-b6c80727.js');
 const annotationsHelpers = require('./annotations-helpers-48180ded.js');
 const commonHelpers = require('./common-helpers-2014ee92.js');
 const draggableTagsHelpers = require('./draggable-tags-helpers-770764e5.js');

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

@@ -7,7 +7,7 @@ const index$1 = require('./index-e7333725.js');
 const lodash = require('./lodash-a046a0e1.js');
 const commonHelpers = require('./common-helpers-2014ee92.js');
 const formInputHelpers = require('./form-input-helpers-515ae194.js');
-const gridRenderers = require('./grid-renderers-f00166a0.js');
+const gridRenderers = require('./grid-renderers-84a5858e.js');
 const overlays = require('./overlays-0fcc78b9.js');
 require('./index-970d5337.js');
 require('./_commonjsHelpers-94df2ea7.js');

package/dist/cjs/yoo-form-missing-word.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-f4b5bbb5.js');
 require('./index-e7333725.js');
 const lodash = require('./lodash-a046a0e1.js');
-const index$1 = require('./index-b0c0b879.js');
+const index$1 = require('./index-b6c80727.js');
 const draggableTagsHelpers = require('./draggable-tags-helpers-770764e5.js');
 const formInputHelpers = require('./form-input-helpers-515ae194.js');
 const overlays = require('./overlays-0fcc78b9.js');

package/dist/cjs/yoo-grid.cjs.entry.js

@@ -12,9 +12,9 @@ const button_factory = require('./button.factory-2fa67596.js');
 const index$2 = require('./index-39eb46f8.js');
 const commonHelpers = require('./common-helpers-2014ee92.js');
 const dimensionsHelpers = require('./dimensions-helpers-54685523.js');
-const filtersHelpers = require('./filters-helpers-ca0e834a.js');
+const filtersHelpers = require('./filters-helpers-7c8d2dba.js');
 const formInputHelpers = require('./form-input-helpers-515ae194.js');
-const gridRenderers = require('./grid-renderers-f00166a0.js');
+const gridRenderers = require('./grid-renderers-84a5858e.js');
 const overlays = require('./overlays-0fcc78b9.js');
 require('./_commonjsHelpers-94df2ea7.js');
 require('./form-helpers-03d069ea.js');