@yoobic/yobi 7.7.41 → 7.7.42

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (42) hide show
  1. package/dist/cjs/design-system.cjs.js +1 -1
  2. package/dist/cjs/{draggable-tags-helpers-b353ad65.js → draggable-tags-helpers-2b62a9fa.js} +2 -1
  3. package/dist/cjs/index.cjs.js +1 -1
  4. package/dist/cjs/loader.cjs.js +1 -1
  5. package/dist/cjs/yoo-form-categorize-words.cjs.entry.js +1 -1
  6. package/dist/cjs/yoo-form-choice_4.cjs.entry.js +1 -1
  7. package/dist/cjs/yoo-form-connect.cjs.entry.js +204 -323
  8. package/dist/cjs/yoo-form-image-tagging.cjs.entry.js +1 -1
  9. package/dist/cjs/yoo-form-missing-word.cjs.entry.js +1 -1
  10. package/dist/cjs/yoo-form-ranking.cjs.entry.js +1 -1
  11. package/dist/cjs/yoo-form-swipe-cards.cjs.entry.js +1 -1
  12. package/dist/collection/components/form/form-connect/form-connect.css +35 -33
  13. package/dist/collection/components/form/form-connect/form-connect.js +207 -375
  14. package/dist/collection/components/form/form-connect/types/index.js +1 -1
  15. package/dist/collection/utils/helpers/draggable-tags-helpers.js +2 -1
  16. package/dist/design-system/design-system.esm.js +1 -1
  17. package/dist/design-system/index.esm.js +1 -1
  18. package/dist/design-system/p-25ffc253.entry.js +1 -0
  19. package/dist/design-system/{p-d5b214f0.entry.js → p-37f863a9.entry.js} +1 -1
  20. package/dist/design-system/{p-adbb882f.entry.js → p-484eb9f2.entry.js} +1 -1
  21. package/dist/design-system/{p-f013d119.entry.js → p-82954c87.entry.js} +1 -1
  22. package/dist/design-system/{p-619154de.entry.js → p-a6091b4d.entry.js} +1 -1
  23. package/dist/design-system/p-f30db1be.js +1 -0
  24. package/dist/design-system/{p-800cb056.entry.js → p-f4317e29.entry.js} +1 -1
  25. package/dist/design-system/{p-47077c2f.entry.js → p-f61d59d7.entry.js} +1 -1
  26. package/dist/esm/design-system.js +1 -1
  27. package/dist/esm/{draggable-tags-helpers-e3b9cd11.js → draggable-tags-helpers-504b4b6d.js} +2 -1
  28. package/dist/esm/index.js +1 -1
  29. package/dist/esm/loader.js +1 -1
  30. package/dist/esm/yoo-form-categorize-words.entry.js +1 -1
  31. package/dist/esm/yoo-form-choice_4.entry.js +1 -1
  32. package/dist/esm/yoo-form-connect.entry.js +206 -325
  33. package/dist/esm/yoo-form-image-tagging.entry.js +1 -1
  34. package/dist/esm/yoo-form-missing-word.entry.js +1 -1
  35. package/dist/esm/yoo-form-ranking.entry.js +1 -1
  36. package/dist/esm/yoo-form-swipe-cards.entry.js +1 -1
  37. package/dist/types/components/form/form-connect/form-connect.d.ts +31 -48
  38. package/dist/types/components/form/form-connect/types/index.d.ts +4 -5
  39. package/dist/types/components.d.ts +0 -9
  40. package/package.json +1 -1
  41. package/dist/design-system/p-72fe82e5.js +0 -1
  42. package/dist/design-system/p-ab3cb64c.entry.js +0 -1
package/dist/esm/yoo-form-connect.entry.js CHANGED
@@ -1,27 +1,50 @@
1
- import { r as registerInstance, c as createEvent, h, g as getElement } from './index-27314512.js';
2
- import { y as findParent, E as getCssColor, U as Draggable, Z as translateMulti, a3 as isNullOrUndefined, T as gsapTo } from './rrule-1b4fc7ac.js';
1
+ import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-27314512.js';
2
+ import { U as Draggable, Z as translateMulti, T as gsapTo } from './rrule-1b4fc7ac.js';
3
3
  import './input-bar.interface-4e956599.js';
4
4
  import { g as getUUID, a as isImageUrl } from './index-e198f864.js';
5
5
  import './ResizeObserver.es-857da850.js';
6
+ import { f as getAppContext } from './common-helpers-736b1b33.js';
7
+ import { c as showWarningAlert } from './draggable-tags-helpers-504b4b6d.js';
6
8
  import { b as setValueAndValidateInput } from './form-input-helpers-d7f93f16.js';
9
+ import { i as isEqual } from './isEqual-1f962694.js';
10
+ import { s as shuffle } from './shuffle-a3cc6057.js';
11
+ import { d as difference } from './difference-0405e176.js';
7
12
  import './document-7259d432.js';
8
13
  import './validate-691c9af1.js';
9
14
  import './isString-632cc436.js';
10
15
  import './isUndefined-11cbe419.js';
11
16
  import './isNumber-3f36713d.js';
12
- import './common-helpers-736b1b33.js';
13
17
  import './get-4d370751.js';
14
18
  import './_baseGet-06c11ad2.js';
19
+ import './countBy-8f0705b9.js';
20
+ import './_baseAssignValue-958a72f8.js';
21
+ import './_defineProperty-eeaa2bfc.js';
22
+ import './_createAggregator-2bcb7b40.js';
23
+ import './_baseEach-a931315b.js';
24
+ import './keys-6c9764cc.js';
25
+ import './_baseUnary-6c757366.js';
26
+ import './_baseKeys-0bb6240a.js';
27
+ import './_baseIteratee-a80c7dd7.js';
28
+ import './_Uint8Array-5a72cae5.js';
29
+ import './_arrayPush-b31ea39a.js';
30
+ import './_baseIsEqual-134a6a6f.js';
31
+ import './_getTag-deac5ef6.js';
32
+ import './identity-db011338.js';
33
+ import './_copyArray-40d7b0e8.js';
34
+ import './_baseFlatten-12bb59d5.js';
35
+ import './_baseRest-ade57aba.js';
36
+ import './_overRest-c9df3b2e.js';
37
+ import './isArrayLikeObject-e239d7fc.js';
15
38
 
16
- 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{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)}.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)}.tippy-box[data-theme~=app-color][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--app-color)}.tippy-box[data-theme~=app-color][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--app-color)}.tippy-box[data-theme~=app-color][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--app-color)}.tippy-box[data-theme~=app-color][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--app-color)}.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~=danger-light]{background-color:var(--danger-light, #f46885)}.tippy-box[data-theme~=danger-light] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=danger-light] .tippy-svg-arrow{fill:var(--danger-light, #f46885)}.tippy-box[data-theme~=danger-light][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--danger-light, #f46885)}.tippy-box[data-theme~=danger-light][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--danger-light, #f46885)}.tippy-box[data-theme~=danger-light][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--danger-light, #f46885)}.tippy-box[data-theme~=danger-light][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--danger-light, #f46885)}.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, #fed05b)}.tippy-box[data-theme~=energized] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=energized] .tippy-svg-arrow{fill:var(--energized, #fed05b)}.tippy-box[data-theme~=energized][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--energized, #fed05b)}.tippy-box[data-theme~=energized][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--energized, #fed05b)}.tippy-box[data-theme~=energized][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--energized, #fed05b)}.tippy-box[data-theme~=energized][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--energized, #fed05b)}.tippy-box[data-theme~=info]{background-color:var(--info, #fc459e)}.tippy-box[data-theme~=info] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=info] .tippy-svg-arrow{fill:var(--info, #fc459e)}.tippy-box[data-theme~=info][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--info, #fc459e)}.tippy-box[data-theme~=info][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--info, #fc459e)}.tippy-box[data-theme~=info][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--info, #fc459e)}.tippy-box[data-theme~=info][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--info, #fc459e)}.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~=light-orange]{background-color:var(--light-orange, #fcae49)}.tippy-box[data-theme~=light-orange] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=light-orange] .tippy-svg-arrow{fill:var(--light-orange, #fcae49)}.tippy-box[data-theme~=light-orange][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--light-orange, #fcae49)}.tippy-box[data-theme~=light-orange][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--light-orange, #fcae49)}.tippy-box[data-theme~=light-orange][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--light-orange, #fcae49)}.tippy-box[data-theme~=light-orange][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--light-orange, #fcae49)}.tippy-box[data-theme~=light-to-text-color]{background-color:var(--light-to-text-color, #ffffff)}.tippy-box[data-theme~=light-to-text-color] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=light-to-text-color] .tippy-svg-arrow{fill:var(--light-to-text-color, #ffffff)}.tippy-box[data-theme~=light-to-text-color][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--light-to-text-color, #ffffff)}.tippy-box[data-theme~=light-to-text-color][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--light-to-text-color, #ffffff)}.tippy-box[data-theme~=light-to-text-color][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--light-to-text-color, #ffffff)}.tippy-box[data-theme~=light-to-text-color][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--light-to-text-color, #ffffff)}.tippy-box[data-theme~=royal]{background-color:var(--royal, #7577ff)}.tippy-box[data-theme~=royal] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=royal] .tippy-svg-arrow{fill:var(--royal, #7577ff)}.tippy-box[data-theme~=royal][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--royal, #7577ff)}.tippy-box[data-theme~=royal][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--royal, #7577ff)}.tippy-box[data-theme~=royal][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--royal, #7577ff)}.tippy-box[data-theme~=royal][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--royal, #7577ff)}.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, #ff6402)}.tippy-box[data-theme~=warning] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=warning] .tippy-svg-arrow{fill:var(--warning, #ff6402)}.tippy-box[data-theme~=warning][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--warning, #ff6402)}.tippy-box[data-theme~=warning][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--warning, #ff6402)}.tippy-box[data-theme~=warning][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--warning, #ff6402)}.tippy-box[data-theme~=warning][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--warning, #ff6402)}.tippy-box[data-theme~=anthracite-to-text-color]{background-color:var(--anthracite-to-text-color, #1a1a1a)}.tippy-box[data-theme~=anthracite-to-text-color] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=anthracite-to-text-color] .tippy-svg-arrow{fill:var(--anthracite-to-text-color, #1a1a1a)}.tippy-box[data-theme~=anthracite-to-text-color][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--anthracite-to-text-color, #1a1a1a)}.tippy-box[data-theme~=anthracite-to-text-color][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--anthracite-to-text-color, #1a1a1a)}.tippy-box[data-theme~=anthracite-to-text-color][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--anthracite-to-text-color, #1a1a1a)}.tippy-box[data-theme~=anthracite-to-text-color][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--anthracite-to-text-color, #1a1a1a)}:root{--safe-area-inset-top:0;--safe-area-inset-right:0;--safe-area-inset-bottom:0;--safe-area-inset-left:0}@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-app-color{background-color:var(--app-color) !important}.app-color{color:var(--app-color);fill:var(--app-color)}.border-app-color{border:var(--border-width-02, 0.125rem) solid var(--app-color)}.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-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-danger-light{background-color:var(--danger-light, #f46885) !important}.danger-light{color:var(--danger-light, #f46885);fill:var(--danger-light, #f46885)}.border-danger-light{border:var(--border-width-02, 0.125rem) solid var(--danger-light, #f46885)}.bg-energized{background-color:var(--energized, #fed05b) !important}.energized{color:var(--energized, #fed05b);fill:var(--energized, #fed05b)}.border-energized{border:var(--border-width-02, 0.125rem) solid var(--energized, #fed05b)}.bg-royal{background-color:var(--royal, #7577ff) !important}.royal{color:var(--royal, #7577ff);fill:var(--royal, #7577ff)}.border-royal{border:var(--border-width-02, 0.125rem) solid var(--royal, #7577ff)}.bg-info{background-color:var(--info, #fc459e) !important}.info{color:var(--info, #fc459e);fill:var(--info, #fc459e)}.border-info{border:var(--border-width-02, 0.125rem) solid var(--info, #fc459e)}.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-dark-to-light{background-color:var(--dark-to-light, #000000) !important}.dark-to-light{color:var(--dark-to-light, #000000);fill:var(--dark-to-light, #000000)}.border-dark-to-light{border:var(--border-width-02, 0.125rem) solid var(--dark-to-light, #000000)}.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-text-color-to-light-60{background-color:var(--text-color-to-light-60, #807f83) !important}.text-color-to-light-60{color:var(--text-color-to-light-60, #807f83);fill:var(--text-color-to-light-60, #807f83)}.border-text-color-to-light-60{border:var(--border-width-02, 0.125rem) solid var(--text-color-to-light-60, #807f83)}.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-light-to-dark{background-color:var(--light-to-dark, #ffffff) !important}.light-to-dark{color:var(--light-to-dark, #ffffff);fill:var(--light-to-dark, #ffffff)}.border-light-to-dark{border:var(--border-width-02, 0.125rem) solid var(--light-to-dark, #ffffff)}.bg-light-orange{background-color:var(--light-orange, #fcae49) !important}.light-orange{color:var(--light-orange, #fcae49);fill:var(--light-orange, #fcae49)}.border-light-orange{border:var(--border-width-02, 0.125rem) solid var(--light-orange, #fcae49)}.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-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-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-warning{background-color:var(--warning, #ff6402) !important}.warning{color:var(--warning, #ff6402);fill:var(--warning, #ff6402)}.border-warning{border:var(--border-width-02, 0.125rem) solid var(--warning, #ff6402)}.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-text-color-to-stable{background-color:var(--text-color-to-stable, #807f83) !important}.text-color-to-stable{color:var(--text-color-to-stable, #807f83);fill:var(--text-color-to-stable, #807f83)}.border-text-color-to-stable{border:var(--border-width-02, 0.125rem) solid var(--text-color-to-stable, #807f83)}.bg-stable-to-stable-20{background-color:var(--stable-to-stable-20, #adadad) !important}.stable-to-stable-20{color:var(--stable-to-stable-20, #adadad);fill:var(--stable-to-stable-20, #adadad)}.border-stable-to-stable-20{border:var(--border-width-02, 0.125rem) solid var(--stable-to-stable-20, #adadad)}.bg-stable-to-light{background-color:var(--stable-to-light, #adadad) !important}.stable-to-light{color:var(--stable-to-light, #adadad);fill:var(--stable-to-light, #adadad)}.border-stable-to-light{border:var(--border-width-02, 0.125rem) solid var(--stable-to-light, #adadad)}.bg-stable-alt-to-light-10{background-color:var(--stable-alt-to-light-10, #d0d0d0) !important}.stable-alt-to-light-10{color:var(--stable-alt-to-light-10, #d0d0d0);fill:var(--stable-alt-to-light-10, #d0d0d0)}.border-stable-alt-to-light-10{border:var(--border-width-02, 0.125rem) solid var(--stable-alt-to-light-10, #d0d0d0)}:host{display:block}: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-icon{position:absolute;top:var(--spacing-08, 0.5rem);right:var(--spacing-08, 0.5rem);background:var(--light-to-dark, #ffffff);border-radius:50%}:host yoo-img{border-radius:inherit}:host .draggable-container,:host .connectable-container{display:grid;grid-auto-rows:1fr;grid-auto-columns:minmax(0, 1fr)}:host .connect-container{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr))}:host .connect-container::-webkit-scrollbar{width:0}:host .item-container{display:-ms-flexbox;display:flex;color:var(--dark-to-light, #000000)}:host .connectable-container .item-container{-ms-flex-pack:start;justify-content:flex-start}:host .draggable-container .item-container{-ms-flex-pack:end;justify-content:flex-end}:host .connectable,:host .draggable{position:relative;width:100%;max-width:13rem;background-color:var(--light-to-dark, #ffffff);border-radius:var(--border-radius-08, 0.5rem)}:host .connectable:before,:host .draggable:before{display:block;width:0;height:0;padding-bottom:calc(3 / 4 * 100%);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}:host([readonly]) .connect-container,:host([readonly]) .draggable-container,:host([readonly]) .connectable-container{grid-gap:var(--spacing-16, 1rem)}:host(:not([readonly])) .connect-container,:host(:not([readonly])) .draggable-container,:host(:not([readonly])) .connectable-container{grid-gap:0.0625rem}:host(:not([readonly])) .item-container{padding:var(--spacing-08, 0.5rem);background:var(--stable-light-40-to-stable-light-10, rgba(241, 241, 241, 0.4))}";
39
+ const CONNECT_TYPES = ['draggable', 'connectable'];
40
+
41
+ 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{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)}.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)}.tippy-box[data-theme~=app-color][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--app-color)}.tippy-box[data-theme~=app-color][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--app-color)}.tippy-box[data-theme~=app-color][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--app-color)}.tippy-box[data-theme~=app-color][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--app-color)}.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~=danger-light]{background-color:var(--danger-light, #f46885)}.tippy-box[data-theme~=danger-light] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=danger-light] .tippy-svg-arrow{fill:var(--danger-light, #f46885)}.tippy-box[data-theme~=danger-light][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--danger-light, #f46885)}.tippy-box[data-theme~=danger-light][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--danger-light, #f46885)}.tippy-box[data-theme~=danger-light][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--danger-light, #f46885)}.tippy-box[data-theme~=danger-light][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--danger-light, #f46885)}.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, #fed05b)}.tippy-box[data-theme~=energized] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=energized] .tippy-svg-arrow{fill:var(--energized, #fed05b)}.tippy-box[data-theme~=energized][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--energized, #fed05b)}.tippy-box[data-theme~=energized][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--energized, #fed05b)}.tippy-box[data-theme~=energized][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--energized, #fed05b)}.tippy-box[data-theme~=energized][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--energized, #fed05b)}.tippy-box[data-theme~=info]{background-color:var(--info, #fc459e)}.tippy-box[data-theme~=info] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=info] .tippy-svg-arrow{fill:var(--info, #fc459e)}.tippy-box[data-theme~=info][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--info, #fc459e)}.tippy-box[data-theme~=info][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--info, #fc459e)}.tippy-box[data-theme~=info][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--info, #fc459e)}.tippy-box[data-theme~=info][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--info, #fc459e)}.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~=light-orange]{background-color:var(--light-orange, #fcae49)}.tippy-box[data-theme~=light-orange] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=light-orange] .tippy-svg-arrow{fill:var(--light-orange, #fcae49)}.tippy-box[data-theme~=light-orange][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--light-orange, #fcae49)}.tippy-box[data-theme~=light-orange][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--light-orange, #fcae49)}.tippy-box[data-theme~=light-orange][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--light-orange, #fcae49)}.tippy-box[data-theme~=light-orange][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--light-orange, #fcae49)}.tippy-box[data-theme~=light-to-text-color]{background-color:var(--light-to-text-color, #ffffff)}.tippy-box[data-theme~=light-to-text-color] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=light-to-text-color] .tippy-svg-arrow{fill:var(--light-to-text-color, #ffffff)}.tippy-box[data-theme~=light-to-text-color][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--light-to-text-color, #ffffff)}.tippy-box[data-theme~=light-to-text-color][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--light-to-text-color, #ffffff)}.tippy-box[data-theme~=light-to-text-color][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--light-to-text-color, #ffffff)}.tippy-box[data-theme~=light-to-text-color][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--light-to-text-color, #ffffff)}.tippy-box[data-theme~=royal]{background-color:var(--royal, #7577ff)}.tippy-box[data-theme~=royal] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=royal] .tippy-svg-arrow{fill:var(--royal, #7577ff)}.tippy-box[data-theme~=royal][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--royal, #7577ff)}.tippy-box[data-theme~=royal][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--royal, #7577ff)}.tippy-box[data-theme~=royal][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--royal, #7577ff)}.tippy-box[data-theme~=royal][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--royal, #7577ff)}.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, #ff6402)}.tippy-box[data-theme~=warning] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=warning] .tippy-svg-arrow{fill:var(--warning, #ff6402)}.tippy-box[data-theme~=warning][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--warning, #ff6402)}.tippy-box[data-theme~=warning][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--warning, #ff6402)}.tippy-box[data-theme~=warning][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--warning, #ff6402)}.tippy-box[data-theme~=warning][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--warning, #ff6402)}.tippy-box[data-theme~=anthracite-to-text-color]{background-color:var(--anthracite-to-text-color, #1a1a1a)}.tippy-box[data-theme~=anthracite-to-text-color] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=anthracite-to-text-color] .tippy-svg-arrow{fill:var(--anthracite-to-text-color, #1a1a1a)}.tippy-box[data-theme~=anthracite-to-text-color][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--anthracite-to-text-color, #1a1a1a)}.tippy-box[data-theme~=anthracite-to-text-color][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--anthracite-to-text-color, #1a1a1a)}.tippy-box[data-theme~=anthracite-to-text-color][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--anthracite-to-text-color, #1a1a1a)}.tippy-box[data-theme~=anthracite-to-text-color][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--anthracite-to-text-color, #1a1a1a)}:root{--safe-area-inset-top:0;--safe-area-inset-right:0;--safe-area-inset-bottom:0;--safe-area-inset-left:0}@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-app-color{background-color:var(--app-color) !important}.app-color{color:var(--app-color);fill:var(--app-color)}.border-app-color{border:var(--border-width-02, 0.125rem) solid var(--app-color)}.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-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-danger-light{background-color:var(--danger-light, #f46885) !important}.danger-light{color:var(--danger-light, #f46885);fill:var(--danger-light, #f46885)}.border-danger-light{border:var(--border-width-02, 0.125rem) solid var(--danger-light, #f46885)}.bg-energized{background-color:var(--energized, #fed05b) !important}.energized{color:var(--energized, #fed05b);fill:var(--energized, #fed05b)}.border-energized{border:var(--border-width-02, 0.125rem) solid var(--energized, #fed05b)}.bg-royal{background-color:var(--royal, #7577ff) !important}.royal{color:var(--royal, #7577ff);fill:var(--royal, #7577ff)}.border-royal{border:var(--border-width-02, 0.125rem) solid var(--royal, #7577ff)}.bg-info{background-color:var(--info, #fc459e) !important}.info{color:var(--info, #fc459e);fill:var(--info, #fc459e)}.border-info{border:var(--border-width-02, 0.125rem) solid var(--info, #fc459e)}.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-dark-to-light{background-color:var(--dark-to-light, #000000) !important}.dark-to-light{color:var(--dark-to-light, #000000);fill:var(--dark-to-light, #000000)}.border-dark-to-light{border:var(--border-width-02, 0.125rem) solid var(--dark-to-light, #000000)}.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-text-color-to-light-60{background-color:var(--text-color-to-light-60, #807f83) !important}.text-color-to-light-60{color:var(--text-color-to-light-60, #807f83);fill:var(--text-color-to-light-60, #807f83)}.border-text-color-to-light-60{border:var(--border-width-02, 0.125rem) solid var(--text-color-to-light-60, #807f83)}.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-light-to-dark{background-color:var(--light-to-dark, #ffffff) !important}.light-to-dark{color:var(--light-to-dark, #ffffff);fill:var(--light-to-dark, #ffffff)}.border-light-to-dark{border:var(--border-width-02, 0.125rem) solid var(--light-to-dark, #ffffff)}.bg-light-orange{background-color:var(--light-orange, #fcae49) !important}.light-orange{color:var(--light-orange, #fcae49);fill:var(--light-orange, #fcae49)}.border-light-orange{border:var(--border-width-02, 0.125rem) solid var(--light-orange, #fcae49)}.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-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-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-warning{background-color:var(--warning, #ff6402) !important}.warning{color:var(--warning, #ff6402);fill:var(--warning, #ff6402)}.border-warning{border:var(--border-width-02, 0.125rem) solid var(--warning, #ff6402)}.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-text-color-to-stable{background-color:var(--text-color-to-stable, #807f83) !important}.text-color-to-stable{color:var(--text-color-to-stable, #807f83);fill:var(--text-color-to-stable, #807f83)}.border-text-color-to-stable{border:var(--border-width-02, 0.125rem) solid var(--text-color-to-stable, #807f83)}.bg-stable-to-stable-20{background-color:var(--stable-to-stable-20, #adadad) !important}.stable-to-stable-20{color:var(--stable-to-stable-20, #adadad);fill:var(--stable-to-stable-20, #adadad)}.border-stable-to-stable-20{border:var(--border-width-02, 0.125rem) solid var(--stable-to-stable-20, #adadad)}.bg-stable-to-light{background-color:var(--stable-to-light, #adadad) !important}.stable-to-light{color:var(--stable-to-light, #adadad);fill:var(--stable-to-light, #adadad)}.border-stable-to-light{border:var(--border-width-02, 0.125rem) solid var(--stable-to-light, #adadad)}.bg-stable-alt-to-light-10{background-color:var(--stable-alt-to-light-10, #d0d0d0) !important}.stable-alt-to-light-10{color:var(--stable-alt-to-light-10, #d0d0d0);fill:var(--stable-alt-to-light-10, #d0d0d0)}.border-stable-alt-to-light-10{border:var(--border-width-02, 0.125rem) solid var(--stable-alt-to-light-10, #d0d0d0)}: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-to-dark, #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;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);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-to-dark, #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:calc(3 / 4 * 100%);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}";
17
42
 
18
- const ITEM_TYPES = ['draggable', 'connectable'];
19
43
  const YooFormConnectComponent = class {
20
44
  constructor(hostRef) {
21
45
  registerInstance(this, hostRef);
22
46
  this.validityChanged = createEvent(this, "validityChanged", 7);
23
47
  this.inputChanged = createEvent(this, "inputChanged", 7);
24
- this.dragEnded = createEvent(this, "dragEnded", 7);
25
48
  /**
26
49
  * Read-only mode : true if displayed within a quiz summary
27
50
  */
@@ -38,396 +61,254 @@ const YooFormConnectComponent = class {
38
61
  * true if component's parent slide is visible within a `yoo-form-dynamic`
39
62
  */
40
63
  this.isVisible = false;
41
- this.overlapThreshold = '65%';
42
- this.hoverColor = 'stable-light';
43
- this.subContainerElements = [];
44
64
  this.colors = ['warning', 'accent', 'royal', 'info', 'energized'];
45
- this.defaultColors = ['light-to-dark', 'dark-to-light'];
46
- this.animationDelay = this.animated ? 0.25 : 0;
47
- this.validationClasses = { valid: { icon: 'check', iconColor: 'success' }, invalid: { icon: 'cross', iconColor: 'danger' } };
48
65
  }
49
- onRequireChanged() {
50
- this.checkAnswersValidity();
66
+ onValuesChanged() {
67
+ showWarningAlert(this.host, !this.isGameMatchable, 'NOTALLPAIREDVALUES');
51
68
  }
52
- isValid() {
69
+ onValidityChanged() {
53
70
  this.validityChanged.emit(this.validity);
54
71
  }
55
- initValues() {
56
- this.dragEnded.emit(true);
57
- this.initItems();
58
- this.shuffleConnectValues();
59
- this.initUserAnswersArray();
60
- }
61
- onIsVisibleChanged(state) {
62
- if (state) {
63
- this.initConnect();
64
- }
65
- }
66
- onModalAnimationFinished(state) {
67
- if (state) {
68
- this.initConnect();
72
+ onValueChanged() {
73
+ if (!isEqual(this.value, this.userAnswers)) {
74
+ this.connectItems();
75
+ this.validateUserAnswers(this.value);
69
76
  }
70
77
  }
71
- componentWillLoad() {
72
- this.initValues();
78
+ initAnswerChanged() {
79
+ this.prepareGame();
73
80
  }
74
- componentDidLoad() {
75
- this.initConnect();
76
- this.preserveColors();
77
- this.updateDraggables();
78
- }
79
- componentDidUpdate() {
80
- if (this.livePreview) {
81
- this.initConnect();
82
- this.preserveColors();
83
- this.updateDraggables();
81
+ async onIsVisibleChanged(state) {
82
+ if (state) {
83
+ await this.scrollToRevealGame();
84
+ this.setScrollableHeight();
84
85
  }
85
86
  }
86
87
  get hasValues() {
87
- var _a;
88
- return !!(((_a = this.values) === null || _a === void 0 ? void 0 : _a.length) && (this.values[0].length || this.values[1].length));
88
+ var _a, _b, _c, _d;
89
+ 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));
89
90
  }
90
- get isConnectMatchable() {
91
- var _a, _b;
92
- return ((_a = this.draggables) === null || _a === void 0 ? void 0 : _a.length) === ((_b = this.connectables) === null || _b === void 0 ? void 0 : _b.length);
91
+ get isGameMatchable() {
92
+ var _a, _b, _c, _d;
93
+ return ((_b = (_a = this.values) === null || _a === void 0 ? void 0 : _a[0].filter(v => v)) === null || _b === void 0 ? void 0 : _b.length) === ((_d = (_c = this.values) === null || _c === void 0 ? void 0 : _c[1].filter(v => v)) === null || _d === void 0 ? void 0 : _d.length);
93
94
  }
94
- updateDraggables() {
95
- if (this.draggables) {
96
- this.draggables = this.draggables.map((draggable) => Object.assign(draggable, { draggableInstance: this.getDraggableInstance(draggable.id) }));
97
- }
95
+ get draggableElements() {
96
+ return Array.from(this.host.shadowRoot.querySelectorAll('.draggable') || []);
98
97
  }
99
- initConnect() {
100
- if (this.mainContainerElement) {
101
- this.getScrollableArea();
102
- }
98
+ get connectableElements() {
99
+ return Array.from(this.host.shadowRoot.querySelectorAll('.connectable') || []);
103
100
  }
104
- shuffleObjects(items) {
105
- if (items === null || items === void 0 ? void 0 : items.length) {
106
- const newItems = items;
107
- for (let i = items.length - 1; i > 0; i--) {
108
- const pos = Math.floor(Math.random() * (i + 1));
109
- const temp = newItems[i];
110
- newItems[i] = newItems[pos];
111
- newItems[pos] = temp;
112
- }
113
- return newItems;
114
- }
101
+ componentWillLoad() {
102
+ this.prepareGame();
115
103
  }
116
- shuffleConnectValues() {
104
+ componentWillUpdate() {
117
105
  var _a;
118
- if (((_a = this.values) === null || _a === void 0 ? void 0 : _a.length) && this.shuffled) {
119
- [this.draggables, this.connectables].forEach((items) => (items = this.shuffleObjects(items)));
106
+ if (!((_a = this.draggables) === null || _a === void 0 ? void 0 : _a.find(d => d === null || d === void 0 ? void 0 : d.draggableInstance))) {
107
+ this.initGame();
120
108
  }
121
109
  }
122
- getElement(id, container) {
123
- const containerElement = this.mainContainerElement.querySelector(`div.${container}-container`);
124
- return containerElement === null || containerElement === void 0 ? void 0 : containerElement.querySelector(`[id="${id}"]`);
110
+ componentDidLoad() {
111
+ this.initGame();
125
112
  }
126
- getConnectable(id) {
127
- var _a;
128
- return (_a = this.connectables) === null || _a === void 0 ? void 0 : _a.find((connectable) => connectable.id === id);
113
+ prepareGame() {
114
+ this.prepareItems();
115
+ this.connectItems();
116
+ this.shuffleItems();
129
117
  }
130
- getDraggable(id) {
131
- var _a;
132
- return (_a = this.draggables) === null || _a === void 0 ? void 0 : _a.find((draggable) => draggable.id === id);
133
- }
134
- getScrollableArea() {
135
- var _a, _b, _c;
136
- if (!this.readonly && this.isVisible && ((_a = this.values) === null || _a === void 0 ? void 0 : _a.length) && ((_b = this.subContainerElements) === null || _b === void 0 ? void 0 : _b.length)) {
137
- const arrAllElementLoaded = !!(this.subContainerElements[0].childElementCount === ((_c = this.values) === null || _c === void 0 ? void 0 : _c[0].length) && this.subContainerElements[1].childElementCount === this.values[1].length);
138
- if (arrAllElementLoaded) {
139
- setTimeout(() => {
140
- const absoluteConnectContainerHeight = this.subContainerElements[0].clientHeight;
141
- const pageContent = findParent(this.host, 'form');
142
- if (pageContent) {
143
- const pageContentBR = pageContent.getBoundingClientRect();
144
- const availableHeight = pageContentBR.height - (this.host.getBoundingClientRect().top - pageContentBR.top);
145
- if (availableHeight < absoluteConnectContainerHeight) {
146
- this.mainContainerElement.style.height = `${availableHeight}px`;
147
- this.mainContainerElement.style.overflowY = 'auto';
148
- this.mainContainerElement.style.overflowX = 'hidden';
149
- if (this.draggableInstances) {
150
- this.draggableInstances.forEach((draggableInstance) => (draggableInstance.autoScroll = 1));
151
- }
152
- }
153
- }
154
- }, 500);
155
- }
156
- }
118
+ async initGame() {
119
+ await this.scrollToRevealGame();
120
+ this.setScrollableHeight();
121
+ this.setDraggableObserver();
122
+ this.initDraggables();
157
123
  }
158
- preserveColors() {
124
+ initDraggables() {
159
125
  var _a;
160
- if ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) {
161
- this.value.forEach((couple) => {
162
- const [leftValue, rightValue] = couple;
163
- let draggable = this.draggables.find((drag) => drag.value === leftValue);
164
- let connectable = this.connectables.find((connect) => connect.value === rightValue);
165
- if (!draggable) {
166
- draggable = this.draggables.find((drag) => drag.value === rightValue);
167
- connectable = this.connectables.find((connect) => connect.value === leftValue);
168
- }
169
- if (draggable && connectable) {
170
- this.attachConnectable(draggable, connectable.id);
171
- this.applyColorChanges();
172
- }
173
- });
174
- }
126
+ (_a = this.draggableElements) === null || _a === void 0 ? void 0 : _a.forEach(e => this.initDraggableActions(e));
127
+ }
128
+ async scrollToRevealGame() {
129
+ const scrollElement = this.host.closest('yoo-ion-scroll');
130
+ return scrollElement && new Promise(resolve => {
131
+ setTimeout(() => {
132
+ scrollElement.scrollTo({ top: scrollElement.scrollHeight, behavior: 'smooth' });
133
+ resolve();
134
+ }, 1000);
135
+ });
175
136
  }
176
- applyCorrections(draggable, connectableId) {
177
- draggable.isCorrect = draggable.id === connectableId;
137
+ setScrollableHeight() {
138
+ var _a, _b, _c, _d, _e, _f, _g;
139
+ const GAP_PADDING = 8;
140
+ const { bottom } = this.host.getBoundingClientRect();
141
+ const numberOfItems = ((_b = (_a = this.values) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.length) || 0;
142
+ const formBounding = (_c = this.host.closest('form')) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect();
143
+ 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;
144
+ 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)) {
145
+ const maxItems = Math.floor(formBounding.height / itemHeight);
146
+ const maxHeight = maxItems * itemHeight + (maxItems + 1) * GAP_PADDING;
147
+ this.innerContainerElement.style.maxHeight = `${Math.min(formBounding.height, maxHeight + GAP_PADDING)}px`;
148
+ }
178
149
  }
179
- initUserAnswersArray() {
180
- this.userAnswers = [];
181
- if (this.values && this.values.length && Array.isArray(this.values[0])) {
182
- this.values[0].forEach((value, index) => {
183
- var _a, _b;
184
- if (value) {
185
- this.userAnswers.push([(_b = (_a = this.draggables) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b.id, '']);
150
+ setDraggableObserver() {
151
+ this.draggables = this.draggables.map(d => {
152
+ return new Proxy(d, {
153
+ set: (target, key, value) => {
154
+ if (key === 'connectableId') {
155
+ target[key] = value;
156
+ this.draggables.forEach(d => {
157
+ if (d.connectableId === value && d.id !== target.id) {
158
+ delete d.connectableId;
159
+ }
160
+ });
161
+ this.getUserAnswers();
162
+ this.validateUserAnswers();
163
+ }
164
+ return target[key] = value;
186
165
  }
187
166
  });
188
- }
189
- }
190
- initItems() {
191
- var _a, _b;
192
- const ids = [];
193
- (_b = (_a = this.values) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.forEach(() => {
194
- ids.push(getUUID());
195
167
  });
196
- ITEM_TYPES.forEach((type, index) => {
168
+ }
169
+ shuffleItems() {
170
+ this.shuffled && CONNECT_TYPES.forEach(type => this[`${type}s`] = shuffle(this[`${type}s`]));
171
+ }
172
+ prepareItems() {
173
+ CONNECT_TYPES.forEach((type, index) => {
197
174
  var _a, _b;
198
- this[`${type}s`] =
199
- ((_b = (_a = this.values) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b.map((value, valueIndex) => Object.assign({
200
- value,
201
- id: ids[valueIndex]
202
- }, !index
203
- ? {
204
- color: this.colors[valueIndex],
205
- isCorrect: false
206
- }
207
- : {
208
- isConnected: false
209
- }))) || [];
175
+ this[`${type}s`] = ((_b = (_a = this.values) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b.map((value, i) => (Object.assign({ value, id: getUUID() }, (!index && {
176
+ color: this.colors[i]
177
+ }))))) || [];
210
178
  });
211
179
  }
212
- setColor(elements, color) {
213
- const colorValue = getCssColor(this.colors.includes(color) ? this.defaultColors[0] : this.defaultColors[1]);
214
- const bgColor = getCssColor(color);
215
- this.updateColor(elements, bgColor, colorValue);
216
- }
217
- removeColor(elements) {
218
- const colorValue = getCssColor(this.defaultColors[1]);
219
- const bgColor = getCssColor(this.defaultColors[0]);
220
- const images = elements.filter((el) => el.classList.contains('image'));
221
- const el = elements.filter((val) => !(images === null || images === void 0 ? void 0 : images.includes(val)));
222
- if (images) {
223
- this.updateColor(images, 'transparent', 'transparent');
180
+ connectItems() {
181
+ if (this.value) {
182
+ this.draggables = this.draggables.map(draggable => {
183
+ var _a, _b, _c;
184
+ const [value1, value2] = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.find(v => v.includes(draggable.value))) || [];
185
+ return Object.assign(Object.assign({}, draggable), (value1 && value2 && {
186
+ connectableId: (_c = (_b = this.connectables) === null || _b === void 0 ? void 0 : _b.find(c => c.value === value1 || c.value === value2)) === null || _c === void 0 ? void 0 : _c.id
187
+ }));
188
+ });
224
189
  }
225
- this.updateColor(el, bgColor, colorValue);
226
190
  }
227
- updateColor(els, bgColor, color) {
228
- els === null || els === void 0 ? void 0 : els.forEach((el) => {
229
- if (el) {
230
- el.style.backgroundColor = bgColor;
231
- el.style.color = color;
232
- }
233
- });
234
- }
235
- getDraggableInstance(id) {
236
- if (this.mainContainerElement && id) {
237
- const currentDraggable = this.getDraggable(id);
238
- const currentDragEl = this.getElement(currentDraggable.id, 'draggable');
191
+ initDraggableActions(draggableElement) {
192
+ var _a;
193
+ if (draggableElement) {
194
+ let tempConnectableElement;
195
+ 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);
239
196
  const onDragElement = () => {
240
- const draggedElementBR = currentDragEl.getBoundingClientRect();
241
- const connectableThreshold = this.subContainerElements[1].getBoundingClientRect().x;
242
- const isInConnectableArea = draggedElementBR.x + draggedElementBR.width >= connectableThreshold;
197
+ var _a, _b;
198
+ const overlapThreshold = '65%';
199
+ const { x, width } = draggableElement.getBoundingClientRect();
200
+ const connectableThreshold = this.innerContainerElement.querySelector('.connectables').getBoundingClientRect().x;
201
+ const isInConnectableArea = x + width >= connectableThreshold;
243
202
  if (isInConnectableArea) {
244
- this.connectables.forEach((connectable) => {
245
- const connectableEl = this.getElement(connectable.id, 'connectable');
246
- if (currentDraggable && isInConnectableArea) {
247
- if (currentDraggable.draggableInstance.hitTest(connectableEl, this.overlapThreshold)) {
248
- currentDraggable.tempConnectableId = connectable.id;
249
- this.setColor([connectableEl], this.hoverColor);
250
- }
203
+ this.connectableElements.forEach(e => {
204
+ var _a, _b;
205
+ 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) {
206
+ tempConnectableElement = e;
207
+ tempConnectableElement.style.backgroundColor = 'var(--stable-light)';
251
208
  }
252
209
  });
253
210
  }
254
- const connectableEl = this.getElement(currentDraggable.tempConnectableId, 'connectable');
255
- if (currentDraggable.tempConnectableId && !currentDraggable.draggableInstance.hitTest(connectableEl, this.overlapThreshold)) {
256
- const tempItem = this.getConnectable(currentDraggable.tempConnectableId);
257
- if (!tempItem.isConnected) {
258
- this.removeColor([connectableEl]);
211
+ if (tempConnectableElement && !currentDraggable.draggableInstance.hitTest(tempConnectableElement, overlapThreshold)) {
212
+ ['color', 'background-color'].forEach(prop => tempConnectableElement.style.removeProperty(prop));
213
+ const connectableColor = (_b = (_a = this.draggables) === null || _a === void 0 ? void 0 : _a.find(d => (d === null || d === void 0 ? void 0 : d.connectableId) === tempConnectableElement.id)) === null || _b === void 0 ? void 0 : _b.color;
214
+ if (connectableColor) {
215
+ tempConnectableElement.style.backgroundColor = `var(--${connectableColor}`;
216
+ tempConnectableElement.style.color = 'var(--light)';
259
217
  }
260
- else {
261
- const sourceColor = this.draggables
262
- .filter((item) => item === null || item === void 0 ? void 0 : item.connectable)
263
- .find((item) => item.connectable.id === currentDraggable.tempConnectableId).color;
264
- this.setColor([connectableEl], sourceColor);
265
- }
266
- delete currentDraggable.tempConnectableId;
218
+ tempConnectableElement = null;
267
219
  }
268
220
  };
269
- const onReleaseElement = () => {
270
- gsapTo(currentDragEl, this.animationDelay, {
271
- x: 0,
272
- y: 0
273
- }).then(() => {
274
- if (currentDraggable === null || currentDraggable === void 0 ? void 0 : currentDraggable.tempConnectableId) {
275
- // get temp connectable
276
- const connectedElement = this.getElement(currentDraggable.tempConnectableId, 'connectable');
277
- const itemContainerElement = connectedElement.parentElement;
278
- this.setColor([itemContainerElement.firstElementChild], 'transparent');
279
- // attach temp connectable as connected
280
- this.attachConnectable(currentDraggable, currentDraggable.tempConnectableId);
281
- // check for isolated colored connectable
282
- this.removeOldConnectable();
283
- this.applyColorChanges();
284
- this.autoCompleteLastConnection();
285
- this.addAnswer(currentDraggable.id, currentDraggable.tempConnectableId);
286
- delete currentDraggable.tempConnectableId;
287
- }
288
- });
221
+ const onReleaseElement = async () => {
222
+ await gsapTo(draggableElement, this.animated ? 0.25 : 0, { x: 0, y: 0 });
223
+ if (tempConnectableElement) {
224
+ currentDraggable.connectableId = tempConnectableElement.id;
225
+ this.autoCompleteLastConnection();
226
+ }
227
+ tempConnectableElement = null;
289
228
  };
290
229
  const onCancelConnection = () => {
291
- if (currentDraggable === null || currentDraggable === void 0 ? void 0 : currentDraggable.connectable) {
292
- const connectedElement = this.getElement(currentDraggable.connectable.id, 'connectable');
293
- const clickedDraggableElement = this.getElement(currentDraggable.id, 'draggable');
294
- this.removeColor([clickedDraggableElement, connectedElement]);
295
- this.getConnectable(currentDraggable.connectable.id).isConnected = false;
296
- delete currentDraggable.connectable;
297
- this.addAnswer(currentDraggable.id, '');
298
- }
230
+ delete currentDraggable.connectableId;
231
+ this.autoEraseLastConnection();
232
+ this.getUserAnswers();
233
+ this.validateUserAnswers();
299
234
  };
300
- if (!this.readonly && this.isConnectMatchable && currentDragEl && this.mainContainerElement) {
301
- return new Draggable(currentDragEl, {
302
- bound: this.mainContainerElement,
235
+ if (!this.readonly && this.isGameMatchable && draggableElement) {
236
+ currentDraggable.draggableInstance = new Draggable(draggableElement, {
303
237
  autoScroll: 1,
238
+ bound: this.innerContainerElement,
304
239
  onDrag: onDragElement,
305
- onPress: onCancelConnection,
240
+ onClick: onCancelConnection,
306
241
  onRelease: onReleaseElement
307
242
  });
308
243
  }
309
244
  }
310
245
  }
311
- applyColorChanges() {
312
- this.draggables.forEach((draggable) => {
313
- var _a;
314
- if (draggable) {
315
- const sourceColor = draggable.color;
316
- const draggedElement = this.getElement(draggable.id, 'draggable');
317
- const connectableElement = this.getElement((_a = draggable.connectable) === null || _a === void 0 ? void 0 : _a.id, 'connectable');
318
- if (connectableElement) {
319
- if (this.readonly) {
320
- this.applyCorrections(draggable, draggable.connectable.id);
321
- for (const element of [draggedElement, connectableElement]) {
322
- const icon = element.getElementsByTagName('yoo-icon')[0];
323
- icon.name = draggable.isCorrect ? this.validationClasses.valid.icon : this.validationClasses.invalid.icon;
324
- icon.color = draggable.isCorrect ? this.validationClasses.valid.iconColor : this.validationClasses.invalid.iconColor;
325
- }
326
- }
327
- this.setColor([draggedElement, connectableElement], sourceColor);
328
- }
329
- }
330
- });
331
- }
332
- removeOldConnectable() {
333
- this.connectables.forEach((connectable) => {
334
- const isConnected = this.draggables.find((srcItem) => { var _a; return ((_a = srcItem === null || srcItem === void 0 ? void 0 : srcItem.connectable) === null || _a === void 0 ? void 0 : _a.id) === connectable.id; });
335
- if (!isConnected) {
336
- this.removeColor([this.getElement(connectable.id, 'connectable')]);
337
- }
338
- });
246
+ getUserAnswers() {
247
+ this.userAnswers = this.draggables.map(d => [d.value, d.connectableId ? this.connectables.find(c => c.id === d.connectableId).value : '']);
339
248
  }
340
- attachConnectable(draggableToConnect, connectableId) {
341
- const connectable = this.getConnectable(connectableId);
342
- const oldConnectedItem = this.draggables.find((dragItem) => { var _a; return ((_a = dragItem === null || dragItem === void 0 ? void 0 : dragItem.connectable) === null || _a === void 0 ? void 0 : _a.id) === connectableId; });
343
- if (oldConnectedItem && oldConnectedItem.id !== (draggableToConnect === null || draggableToConnect === void 0 ? void 0 : draggableToConnect.id)) {
344
- const oldConnectEl = this.getElement(oldConnectedItem.id, 'draggable');
345
- const oldConnectedEl = this.getElement(oldConnectedItem.connectable.id, 'connectable');
346
- this.removeColor([oldConnectEl, oldConnectedEl]);
347
- oldConnectedItem.connectable.isConnected = false;
348
- delete oldConnectedItem.connectable;
349
- }
350
- draggableToConnect.connectable = connectable;
351
- connectable.isConnected = true;
352
- }
353
- addAnswer(draggableId, connectableId) {
354
- if (draggableId && connectableId) {
355
- const answerIndex = this.userAnswers.findIndex((el) => (el === null || el === void 0 ? void 0 : el[0]) === draggableId);
356
- this.userAnswers[answerIndex] = [draggableId, connectableId];
357
- this.checkAnswersValidity();
358
- }
249
+ validateUserAnswers(userAnswers = this.userAnswers) {
250
+ this.validity = !(userAnswers === null || userAnswers === void 0 ? void 0 : userAnswers.reduce((acc, v) => acc + v.filter(i => !i).length, 0));
251
+ setValueAndValidateInput(userAnswers, this);
359
252
  }
360
- checkAnswersValidity() {
361
- var _a, _b;
362
- let _validity = false;
363
- if (((_a = this.userAnswers) === null || _a === void 0 ? void 0 : _a.length) === ((_b = this.answer) === null || _b === void 0 ? void 0 : _b.length)) {
364
- _validity = !this.userAnswers.find((gAnswer) => gAnswer[1] === '');
365
- }
366
- if (_validity !== this.validity) {
367
- this.validity = _validity;
368
- }
369
- if (_validity === true) {
370
- this.valideAnswers();
371
- }
372
- }
373
- valideAnswers() {
374
- if (!this.livePreview) {
375
- this.value = this.userAnswers;
376
- const answerValues = [];
377
- this.value.forEach((answers) => {
378
- const drag = this.getDraggable(answers[0]);
379
- const connect = this.getConnectable(answers[1]);
380
- if ((drag === null || drag === void 0 ? void 0 : drag.value) && (connect === null || connect === void 0 ? void 0 : connect.value)) {
381
- answerValues.push([drag.value, connect.value]);
382
- }
383
- });
384
- setValueAndValidateInput(answerValues, this);
253
+ autoEraseLastConnection() {
254
+ const connectedDraggables = this.draggables.filter(d => d.connectableId);
255
+ if ((connectedDraggables === null || connectedDraggables === void 0 ? void 0 : connectedDraggables.length) === 1) {
256
+ const lastDraggable = connectedDraggables[0];
257
+ delete lastDraggable.connectableId;
385
258
  }
386
259
  }
387
260
  autoCompleteLastConnection() {
388
- const freeDraggables = this.draggables.filter((draggable) => !draggable.connectable);
389
- const freeConnectables = this.connectables.filter((connectable) => !connectable.isConnected);
390
- if ((freeDraggables === null || freeDraggables === void 0 ? void 0 : freeDraggables.length) === 1 && (freeConnectables === null || freeConnectables === void 0 ? void 0 : freeConnectables.length) === 1) {
391
- const lastFreeDraggable = freeDraggables[0];
392
- const lastFreeConnectable = freeConnectables[0];
393
- const sourceColor = lastFreeDraggable.color;
394
- lastFreeConnectable.isConnected = true;
395
- this.setColor([this.getElement(lastFreeConnectable.id, 'connectable'), this.getElement(lastFreeDraggable.id, 'draggable')], sourceColor);
396
- lastFreeDraggable.connectable = lastFreeConnectable;
397
- this.addAnswer(lastFreeDraggable.id, lastFreeConnectable.id);
261
+ var _a;
262
+ const freeDraggables = this.draggables.filter(d => !d.connectableId);
263
+ if ((freeDraggables === null || freeDraggables === void 0 ? void 0 : freeDraggables.length) === 1) {
264
+ const lastDraggable = freeDraggables[0];
265
+ const lastConectableId = (_a = difference(this.connectables.map(c => c.id), this.draggables.map(d => d.connectableId))) === null || _a === void 0 ? void 0 : _a[0];
266
+ lastDraggable.connectableId = lastConectableId;
398
267
  }
399
268
  }
400
269
  truncateValue(valueToTruncate) {
401
270
  if (valueToTruncate) {
402
- const maxAuthorizedLength = 50;
271
+ const MAX_LENGTH = 50;
403
272
  const translatedValue = translateMulti(valueToTruncate);
404
273
  const valueLength = translatedValue.length;
405
- if (valueLength > maxAuthorizedLength) {
406
- return translatedValue.substr(0, maxAuthorizedLength).concat('...');
407
- }
408
- else {
409
- return translatedValue;
410
- }
274
+ const isTruncabled = valueLength > MAX_LENGTH;
275
+ return isTruncabled ? translatedValue.substr(0, MAX_LENGTH).concat('...') : translatedValue;
411
276
  }
412
277
  }
278
+ renderCorrectionIcon(value) {
279
+ const getCouple = (values) => values === null || values === void 0 ? void 0 : values.find(v => v.includes(value));
280
+ const isCorrect = isEqual(getCouple(this.value), getCouple(this.answer));
281
+ return h("yoo-icon", { size: "medium", name: isCorrect ? 'check' : 'cross', color: isCorrect ? 'success' : 'danger' });
282
+ }
413
283
  renderContainer(name) {
414
- const type = name === 'draggable' ? 0 : 1;
415
- const values = name === 'draggable' ? this.draggables : this.connectables;
416
- return (h("div", { class: `${name}-container`, ref: (element) => (this.subContainerElements[type] = element) }, values === null || values === void 0 ? void 0 : values.map((item) => {
417
- const hasImage = !isNullOrUndefined(item === null || item === void 0 ? void 0 : item.value) && isImageUrl(item === null || item === void 0 ? void 0 : item.value);
418
- return ((item === null || item === void 0 ? void 0 : item.value) && (h("div", { class: "item-container" }, h("div", { id: item === null || item === void 0 ? void 0 : item.id, class: { [name]: true, image: hasImage, animated: this.animated } }, !hasImage ? h("p", null, this.truncateValue(item.value)) : [h("yoo-img", { type: "background", src: item.value }), h("div", { class: "overlay" })], this.readonly && h("yoo-icon", { size: "medium" })))));
284
+ var _a;
285
+ return (h("section", { class: { [`${name}s`]: true } }, (_a = this[`${name}s`]) === null || _a === void 0 ? void 0 : _a.map((item) => {
286
+ var _a, _b;
287
+ const { id, value, connectableId, color } = item || {};
288
+ const isImage = !!(value && isImageUrl(value));
289
+ const isConnected = !!(connectableId || this.draggables.find(d => d.connectableId === id));
290
+ 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);
291
+ return !!value && (h("div", { class: "tile-container" }, h("div", Object.assign({}, (isConnected && {
292
+ style: {
293
+ backgroundColor: `var(--${tileColor})`,
294
+ color: 'var(--light)'
295
+ }
296
+ }), { id: id, key: id, class: { [name]: true, image: isImage, animated: this.animated } }), !isImage ? h("p", null, this.truncateValue(value)) : [h("yoo-img", { type: "background", src: value }), h("div", { class: "overlay" })], this.readonly && this.renderCorrectionIcon(value))));
419
297
  })));
420
298
  }
299
+ renderBanner() {
300
+ return this.livePreview && h("yoo-banner", null);
301
+ }
421
302
  render() {
422
- return this.hasValues && (h("div", { class: "connect-container", ref: (element) => (this.mainContainerElement = element) }, ITEM_TYPES.map((itemType) => this.renderContainer(itemType))));
303
+ return this.hasValues && (h(Host, { class: getAppContext(this.host) }, this.renderBanner(), h("div", { class: "inner-container", ref: (element) => (this.innerContainerElement = element) }, CONNECT_TYPES.map(type => this.renderContainer(type)))));
423
304
  }
424
305
  get host() { return getElement(this); }
425
306
  static get watchers() { return {
426
- "required": ["onRequireChanged"],
427
- "validity": ["isValid"],
428
- "answer": ["initValues"],
429
- "isVisible": ["onIsVisibleChanged"],
430
- "isAnimationFinished": ["onModalAnimationFinished"]
307
+ "values": ["onValuesChanged"],
308
+ "validity": ["onValidityChanged"],
309
+ "value": ["onValueChanged"],
310
+ "answer": ["initAnswerChanged"],
311
+ "isVisible": ["onIsVisibleChanged"]
431
312
  }; }
432
313
  };
433
314
  YooFormConnectComponent.style = formConnectCss;