@yoobic/yobi 7.7.41 → 7.7.42

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

@@ -4,7 +4,7 @@ import './input-bar.interface-4e956599.js';
 import './ResizeObserver.es-857da850.js';
 import { e as getPercentPositionStyle } from './annotations-helpers-d026cd25.js';
 import { f as getAppContext } from './common-helpers-736b1b33.js';
-import { k as getTagZone, s as setDynamicTagZoneHeight, c as showWarningAlert, h as hasValuesChanged, b as getNewValue, r as resetTags, d as checkArray, u as initZones, p as initTags, j as getDroppedTagsValues, f as filterDuplicateEntries, e as getTagsValues, a as hasDuplicates, l as isTagsZone } from './draggable-tags-helpers-e3b9cd11.js';
+import { k as getTagZone, s as setDynamicTagZoneHeight, c as showWarningAlert, h as hasValuesChanged, b as getNewValue, r as resetTags, d as checkArray, u as initZones, p as initTags, j as getDroppedTagsValues, f as filterDuplicateEntries, e as getTagsValues, a as hasDuplicates, l as isTagsZone } from './draggable-tags-helpers-504b4b6d.js';
 import { b as setValueAndValidateInput } from './form-input-helpers-d7f93f16.js';
 import { d as debounce } from './debounce-c1950ab1.js';
 import './isUndefined-11cbe419.js';

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

@@ -4,7 +4,7 @@ import './input-bar.interface-4e956599.js';
 import { M as MAX_TAGS_CHARACTERS } from './boost-helpers-17b39a0f.js';
 import { o as isValueATranslationKey, q as formatTranslation } from './form-creator-helpers-ac29a57d.js';
 import './ResizeObserver.es-857da850.js';
-import { k as getTagZone, s as setDynamicTagZoneHeight, c as showWarningAlert, g as getDuplicatedValue, h as hasValuesChanged, b as getNewValue, r as resetTags, d as checkArray, u as initZones, p as initTags, j as getDroppedTagsValues, e as getTagsValues, a as hasDuplicates } from './draggable-tags-helpers-e3b9cd11.js';
+import { k as getTagZone, s as setDynamicTagZoneHeight, c as showWarningAlert, g as getDuplicatedValue, h as hasValuesChanged, b as getNewValue, r as resetTags, d as checkArray, u as initZones, p as initTags, j as getDroppedTagsValues, e as getTagsValues, a as hasDuplicates } from './draggable-tags-helpers-504b4b6d.js';
 import { b as setValueAndValidateInput } from './form-input-helpers-d7f93f16.js';
 import './validate-691c9af1.js';
 import './get-4d370751.js';

package/dist/esm/yoo-form-ranking.entry.js

@@ -3,7 +3,7 @@ import { y as findParent, T as gsapTo, X as gsapTimeline, E as getCssColor, U as
 import './input-bar.interface-4e956599.js';
 import './ResizeObserver.es-857da850.js';
 import { f as getAppContext } from './common-helpers-736b1b33.js';
-import { d as checkArray } from './draggable-tags-helpers-e3b9cd11.js';
+import { d as checkArray } from './draggable-tags-helpers-504b4b6d.js';
 import { b as setValueAndValidateInput } from './form-input-helpers-d7f93f16.js';
 import './isUndefined-11cbe419.js';
 import './isNumber-3f36713d.js';

package/dist/esm/yoo-form-swipe-cards.entry.js

@@ -4,7 +4,7 @@ import './input-bar.interface-4e956599.js';
 import { g as getUUID } from './index-e198f864.js';
 import './ResizeObserver.es-857da850.js';
 import { f as getAppContext } from './common-helpers-736b1b33.js';
-import { c as showWarningAlert, a as hasDuplicates } from './draggable-tags-helpers-e3b9cd11.js';
+import { c as showWarningAlert, a as hasDuplicates } from './draggable-tags-helpers-504b4b6d.js';
 import { b as setValueAndValidateInput } from './form-input-helpers-d7f93f16.js';
 import { s as shuffle } from './shuffle-a3cc6057.js';
 import { i as inRange } from './inRange-5b02d8f6.js';

package/dist/types/components/form/form-connect/form-connect.d.ts

@@ -4,10 +4,7 @@ export declare class YooFormConnectComponent {
    * Poll of words to connect, dispatched in 2 arrays (Left and Right respectively)
    */
   values: string[][];
-  /**
-   * Value previously given by user, mostly used in read-only mode
-   */
-  value: string[][];
+  onValuesChanged(): void;
   /**
    * Read-only mode : true if displayed within a quiz summary
    */
@@ -32,72 +29,58 @@ export declare class YooFormConnectComponent {
    * Used by parent component (`yoo-form-dynamic`)
    */
   validity: boolean;
+  onValidityChanged(): void;
+  /**
+ * Value previously given by user, mostly used in read-only mode
+ */
+  value: string[][];
+  onValueChanged(): void;
   /**
    * Expected answer. consisting of an array of arrays,
    * each sub-array containing a pair of correctly connected words
    */
   answer: string[][];
+  initAnswerChanged(): void;
   /**
    * true if component's parent slide is visible within a `yoo-form-dynamic`
    */
   isVisible?: boolean;
-  /**
-   * Used to check when modal is loaded
-   */
-  isAnimationFinished: boolean;
+  onIsVisibleChanged(state: boolean): Promise<void>;
+  userAnswers: string[][];
   /**
    * Used by parent component (form-dynamic)
    */
   validityChanged: EventEmitter<boolean>;
   inputChanged: EventEmitter<string[]>;
-  dragEnded: EventEmitter<boolean>;
   host: HTMLYooFormConnectElement;
-  private overlapThreshold;
-  private hoverColor;
-  private mainContainerElement;
-  private subContainerElements;
+  private innerContainerElement;
   private colors;
-  private defaultColors;
   private draggables;
   private connectables;
-  private userAnswers;
-  private draggableInstances;
-  private animationDelay;
-  private validationClasses;
-  onRequireChanged(): void;
-  isValid(): void;
-  initValues(): void;
-  onIsVisibleChanged(state: boolean): void;
-  onModalAnimationFinished(state: boolean): void;
+  get hasValues(): boolean;
+  get isGameMatchable(): boolean;
+  get draggableElements(): HTMLElement[];
+  get connectableElements(): HTMLElement[];
   componentWillLoad(): void;
+  componentWillUpdate(): void;
   componentDidLoad(): void;
-  componentDidUpdate(): void;
-  get hasValues(): boolean;
-  get isConnectMatchable(): boolean;
-  private updateDraggables;
-  private initConnect;
-  private shuffleObjects;
-  private shuffleConnectValues;
-  private getElement;
-  private getConnectable;
-  private getDraggable;
-  private getScrollableArea;
-  private preserveColors;
-  private applyCorrections;
-  private initUserAnswersArray;
-  private initItems;
-  private setColor;
-  private removeColor;
-  private updateColor;
-  private getDraggableInstance;
-  private applyColorChanges;
-  private removeOldConnectable;
-  private attachConnectable;
-  private addAnswer;
-  private checkAnswersValidity;
-  private valideAnswers;
+  private prepareGame;
+  private initGame;
+  private initDraggables;
+  private scrollToRevealGame;
+  private setScrollableHeight;
+  private setDraggableObserver;
+  private shuffleItems;
+  private prepareItems;
+  private connectItems;
+  private initDraggableActions;
+  private getUserAnswers;
+  private validateUserAnswers;
+  private autoEraseLastConnection;
   private autoCompleteLastConnection;
   private truncateValue;
+  renderCorrectionIcon(value: string): any;
   renderContainer(name: string): any;
+  renderBanner(): any;
   render(): any;
 }

package/dist/types/components/form/form-connect/types/index.d.ts

@@ -1,13 +1,12 @@
 import { TColor } from '@shared/interfaces';
 import { Draggable } from '@shared/utils';
-export interface IFormConnectReliable {
+export declare const CONNECT_TYPES: readonly ["draggable", "connectable"];
+export interface IConnect {
   id?: string;
   value?: string;
   color?: TColor;
-  element?: HTMLElement;
   draggableInstance?: Draggable;
-  tempConnectableId?: string;
-  connectable?: IFormConnectReliable;
+  connectableId?: string;
   isCorrect?: boolean;
-  isConnected?: boolean;
+  colorize?: () => void;
 }

package/dist/types/components.d.ts

@@ -1997,10 +1997,6 @@ export namespace Components {
           * Expected answer. consisting of an array of arrays, each sub-array containing a pair of correctly connected words
          */
         "answer": string[][];
-        /**
-          * Used to check when modal is loaded
-         */
-        "isAnimationFinished": boolean;
         /**
           * true if component's parent slide is visible within a `yoo-form-dynamic`
          */
@@ -11233,10 +11229,6 @@ declare namespace LocalJSX {
           * Expected answer. consisting of an array of arrays, each sub-array containing a pair of correctly connected words
          */
         "answer"?: string[][];
-        /**
-          * Used to check when modal is loaded
-         */
-        "isAnimationFinished"?: boolean;
         /**
           * true if component's parent slide is visible within a `yoo-form-dynamic`
          */
@@ -11245,7 +11237,6 @@ declare namespace LocalJSX {
           * true if the component is loaded within the preview mode in the course-creator
          */
         "livePreview"?: boolean;
-        "onDragEnded"?: (event: CustomEvent<boolean>) => void;
         "onInputChanged"?: (event: CustomEvent<string[]>) => void;
         /**
           * Used by parent component (form-dynamic)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yoobic/yobi",
-  "version": "7.7.41",
+  "version": "7.7.42",
   "description": "Yobi - Yoobic Design System",
   "module": "dist/index.js",
   "main": "dist/index.cjs.js",

package/dist/design-system/p-72fe82e5.js

@@ -1 +0,0 @@
-import{t as n,W as o,U as t,Q as i,X as a,Y as u,Z as r,T as s}from"./p-cef3e535.js";import"./p-4d956bd4.js";import{c as l}from"./p-2293f794.js";function c(n){if(n){const o=92,t=n.getBoundingClientRect(),i=window.innerHeight-(t.top+o);i&&(n.parentElement.style.height=.75*i+"px")}}function e(n,o){return h(n)&&!(!n.filter((n=>!o.includes(n)))&&!o.filter((o=>!n.includes(o))))}function f(n){return(null==n?void 0:n.length)&&n.length-new Set(n).size}function d(n){return Object.keys(l(n)).find((o=>l(n)[o]>=2))}function v(n,o){return h(o)&&o.filter((o=>!n.includes(o)))[0]}function y(t,i=!0,a="NODUPLICATEVALUES"){if(t&&a){const u=t.querySelector("yoo-banner");if(u){u.heading=n(a);const t=u.clientHeight;i&&!t?(u.style.display="block",o(u,.75,{height:"0px",opacity:0},{height:"auto",opacity:1})):!i&&t&&o(u,.75,{height:"auto",opacity:1},{height:"0px",opacity:0,onComplete:()=>u.style.display="none"})}}}function p(n){if(n){const o=n.map((n=>n&&n.tags))||[];if(o.length){const t=o.reduce(((n,o)=>n.concat(o)),[]);(null==t?void 0:t.length)&&t.forEach((o=>{C(o.zone)||P(o,n)}))}}}function h(n){return!(!(null==n?void 0:n.length)||!Array.isArray(n))}function g(n,o){return n.filter(((n,t,i)=>t===i.findIndex((t=>t[o]===n[o]))))}function w(n,o,t){return Array.from(n&&(null==o?void 0:o.length)&&!t?new Set(n.filter((n=>!o.includes(n)))):new Set(n))}function m(n){return!(!h(n)||!n.find((n=>!C(n))))}function A(n,o){const t=((null==n?void 0:n.filter((n=>!C(n))))||[]).map((n=>n.tags)).map((n=>n.map((n=>n.value))));return o?t.reduce(((n,o)=>n.concat(o)),[]):t}function b(n){return h(n)&&n.find((n=>C(n)))}function C(n){return"zone-tags"===(null==n?void 0:n.id)}function j(n,o){return t.hitTest(o,n.element.parentElement,n.threshold||0)}function x(n){var o;return!C(n)&&(null===(o=null==n?void 0:n.tags)||void 0===o?void 0:o.length)===((null==n?void 0:n.tagsLimit)||1)&&n.element&&Array.from(n.element.querySelectorAll("yoo-tag")).length===(n.tagsLimit||1)}function S(n){var o;return(null===(o=n.zone)||void 0===o?void 0:o.tags.includes(n))&&!!Array.from(n.zone.element.querySelectorAll("yoo-tag")).find((o=>o===n.element))}function k(n){if(n&&h(n.zones)){let o;n.zones.forEach((n=>{C(n)&&(o=Array.from(n.element.querySelectorAll("yoo-tag")),N(n.element,o))})),n.isReadonly||!n.shouldAnimateTags||i()?z(n):U(n,o)}}function U(n,o){if(h(o))return a().then((t=>{if(!t)return;const i=t({paused:!0,onComplete:()=>{z(n)}});i.staggerFrom(o,.15,{autoAlpha:0,scale:0,ease:u.easeOut},.15),i.play()}))}function z(n){h(n.value)&&n.value.forEach(((o,t)=>{if(!Array.isArray(o))return D(o,t,n);o.forEach((o=>D(o,t,n)))})),!n.isReadonly&&h(n.values)&&n.values.forEach((o=>D(o,n.zones.length-1,n))),I(n.zones)}function D(n,o,i){const a=function(n,o,t){const i={};return i.value=n,i.zone=t.zones[o],i.zone&&(i.element=function(n,o,t){var i;if(null===(i=n.zone)||void 0===i?void 0:i.element){const i=h(t.value)&&!x(n.zone);if(C(n.zone)){const o=Array.from(n.zone.element.querySelectorAll("yoo-tag"));if(o.length){const i=o.find((o=>o.textContent===r(n.value)));if(i)return t.newValue===n.value&&(i.classList.add("info"),O(i,"up",(()=>{O(i,"down"),i.classList.remove("info")}))),i}}else if(i){const i=document.createElement("yoo-tag"),a=t.getColorTag(n.value,o);return i.innerHTML=r(n.value),i.size="medium",i.darkTheme=!1,i.classList.add(t.extraTagsClasses||"basic","dropped"),i.color=a,n.zone.element.classList.add("has-tag"),n.zone.element.appendChild(i),i}}}(i,o,t),t.isReadonly||(i.lastZone=i.zone)),i}(n,o,i);return(null==a?void 0:a.element)&&!i.isReadonly&&(a.draggable=function(n,o){return new t(n.element,{bound:o.boundingElement,onClick:async()=>{var t,i;if(C(n.zone)){if(o.clickToDrop){const t=o.zones.filter((n=>{var o;return!(null===(o=null==n?void 0:n.element)||void 0===o?void 0:o.classList.contains("has-tag"))}))[0];await L(n,t,o.zones),null===(i=null==o?void 0:o.clickTagExtraAction)||void 0===i||i.call(o,n)}}else P(n,o.zones),null===(t=null==o?void 0:o.resetTagExtraAction)||void 0===t||t.call(o,n)},onPress:()=>{var t;O(n.element,"up"),null===(t=null==o?void 0:o.pressTagExtraAction)||void 0===t||t.call(o,n)},onDrag:()=>{var t;o.zones.forEach((o=>{(null==o?void 0:o.element)&&(j(o,n.element)&&!x(o)?(o.hit=!0,o.element.classList.contains("hit")||o.element.classList.add("hit")):o.hit&&o.element.classList.remove("hit"))})),null===(t=null==o?void 0:o.dragTagExtraAction)||void 0===t||t.call(o,n)},onRelease:async()=>{var t;await T(n,o.zones),null===(t=null==o?void 0:o.releaseTagExtraAction)||void 0===t||t.call(o,n)}})}(a,i)),E(a),a}function E(n){var o;const t=!S(n)&&!x(n.zone);n.element&&(null===(o=n.zone)||void 0===o?void 0:o.element)&&t&&(n.zone.tags.unshift(n),n.zone.element.contains(n.element)||(n.zone.element.prepend(n.element),n.zone.element.classList.contains("has-tag")||n.zone.element.classList.add("has-tag")))}async function L(n,o,t){n&&o&&(O(n.element,"up"),n.zone.element.classList.remove("has-tag"),n.lastZone=n.zone,n.zone=o,await T(n,t,!0))}function O(n,t,i){const a="down"===t,u=a?[1.2,1]:[1,1.2];n.style.zIndex=a?"auto":"200",o(n,.25,{scale:u[0]},{scale:u[1],onComplete:i})}async function P(n,o){const t=o.find((n=>C(n)));await L(n,t,o)}async function T(n,o,t=!1){t||o.forEach((o=>{!j(o,n.element)||!C(o)&&x(o)||(n.lastZone=n.zone,n.zone=o,n.zone.element.classList.remove("hit"))})),E(n),await s(n.element,0,{x:0,y:0,onComplete:()=>{O(n.element,"down"),function(n){const o=n.lastZone.tags.indexOf(n);-1!==o&&n.zone.id!==n.lastZone.id&&(n.lastZone.element.classList.remove("has-tag"),n.lastZone.tags.splice(o,1))}(n),I(o)}})}function q(n){const o=n.zoneElements;if(null==o?void 0:o.length)return o.sort(((n,o)=>n.id>o.id?1:-1)).map(((t,i)=>{const a={},u=()=>C(a)?n.tagZone:n.dropZones,r=u().answers;return a.id=t.id,a.element=t,a.threshold=u().threshold,a.hasOverflow=u().hasOverflow,a.dynamicZoneHeight=u().dynamicZoneHeight,a.tags=[],a.colorClass=Array.isArray(u().colorClass)?u().colorClass[i]:u().colorClass,(null==r?void 0:r.length)&&i<=o.filter((n=>"zone-tags"!==n.id)).length&&(a.tagsLimit=Array.isArray(r[i])?r[i].length:1),C(a)&&a.dynamicZoneHeight&&c(a.element),a}))}function I(n){n.forEach((n=>{if(null==n?void 0:n.hasOverflow){const o=h(n.tags)&&n.tags.map((n=>n&&n.element));N(n.element,o)}}))}function N(n,t){if(n){const i=n.getBoundingClientRect(),a=(n,o=!0)=>{n.style.opacity=(o?0:1).toString()};if(null==t?void 0:t.length)return t.map((n=>{if(n){const t=4,u=n.getBoundingClientRect();return u.top&&i.top&&i.height&&u.top+t>=i.top+i.height?a(n):"0"===n.style.opacity?o(n,.1,{opacity:0,scale:0,visibility:"hidden"},{opacity:1,scale:1,visibility:"inherit"},.1):a(n,!1),n}})).filter((n=>"1"===(null==n?void 0:n.style.opacity)))}}export{f as a,v as b,y as c,h as d,w as e,g as f,d as g,e as h,m as i,A as j,b as k,C as l,j as m,x as n,S as o,k as p,U as q,p as r,c as s,L as t,q as u}

package/dist/design-system/p-ab3cb64c.entry.js

@@ -1 +0,0 @@
-import{r as t,c as a,h as e,g as o}from"./p-c26cc6ff.js";import{y as r,E as i,U as l,Z as p,a3 as d,T as n}from"./p-cef3e535.js";import"./p-4d956bd4.js";import{g as c,a as b}from"./p-2e351be9.js";import"./p-09088888.js";import{b as s}from"./p-c492e667.js";import"./p-8b07fc6e.js";import"./p-e0d6fbed.js";import"./p-eba60085.js";import"./p-bd19a341.js";import"./p-c4388b4c.js";import"./p-e68604b7.js";import"./p-d9e56655.js";import"./p-29203fa2.js";const h=["draggable","connectable"],f=class{constructor(e){t(this,e),this.validityChanged=a(this,"validityChanged",7),this.inputChanged=a(this,"inputChanged",7),this.dragEnded=a(this,"dragEnded",7),this.readonly=!1,this.animated=!0,this.shuffled=!0,this.isVisible=!1,this.overlapThreshold="65%",this.hoverColor="stable-light",this.subContainerElements=[],this.colors=["warning","accent","royal","info","energized"],this.defaultColors=["light-to-dark","dark-to-light"],this.animationDelay=this.animated?.25:0,this.validationClasses={valid:{icon:"check",iconColor:"success"},invalid:{icon:"cross",iconColor:"danger"}}}onRequireChanged(){this.checkAnswersValidity()}isValid(){this.validityChanged.emit(this.validity)}initValues(){this.dragEnded.emit(!0),this.initItems(),this.shuffleConnectValues(),this.initUserAnswersArray()}onIsVisibleChanged(t){t&&this.initConnect()}onModalAnimationFinished(t){t&&this.initConnect()}componentWillLoad(){this.initValues()}componentDidLoad(){this.initConnect(),this.preserveColors(),this.updateDraggables()}componentDidUpdate(){this.livePreview&&(this.initConnect(),this.preserveColors(),this.updateDraggables())}get hasValues(){var t;return!(!(null===(t=this.values)||void 0===t?void 0:t.length)||!this.values[0].length&&!this.values[1].length)}get isConnectMatchable(){var t,a;return(null===(t=this.draggables)||void 0===t?void 0:t.length)===(null===(a=this.connectables)||void 0===a?void 0:a.length)}updateDraggables(){this.draggables&&(this.draggables=this.draggables.map((t=>Object.assign(t,{draggableInstance:this.getDraggableInstance(t.id)}))))}initConnect(){this.mainContainerElement&&this.getScrollableArea()}shuffleObjects(t){if(null==t?void 0:t.length){const a=t;for(let e=t.length-1;e>0;e--){const t=Math.floor(Math.random()*(e+1)),o=a[e];a[e]=a[t],a[t]=o}return a}}shuffleConnectValues(){var t;(null===(t=this.values)||void 0===t?void 0:t.length)&&this.shuffled&&[this.draggables,this.connectables].forEach((t=>this.shuffleObjects(t)))}getElement(t,a){const e=this.mainContainerElement.querySelector(`div.${a}-container`);return null==e?void 0:e.querySelector(`[id="${t}"]`)}getConnectable(t){var a;return null===(a=this.connectables)||void 0===a?void 0:a.find((a=>a.id===t))}getDraggable(t){var a;return null===(a=this.draggables)||void 0===a?void 0:a.find((a=>a.id===t))}getScrollableArea(){var t,a,e;!this.readonly&&this.isVisible&&(null===(t=this.values)||void 0===t?void 0:t.length)&&(null===(a=this.subContainerElements)||void 0===a?void 0:a.length)&&this.subContainerElements[0].childElementCount===(null===(e=this.values)||void 0===e?void 0:e[0].length)&&this.subContainerElements[1].childElementCount===this.values[1].length&&setTimeout((()=>{const t=this.subContainerElements[0].clientHeight,a=r(this.host,"form");if(a){const e=a.getBoundingClientRect(),o=e.height-(this.host.getBoundingClientRect().top-e.top);o<t&&(this.mainContainerElement.style.height=`${o}px`,this.mainContainerElement.style.overflowY="auto",this.mainContainerElement.style.overflowX="hidden",this.draggableInstances&&this.draggableInstances.forEach((t=>t.autoScroll=1)))}}),500)}preserveColors(){var t;(null===(t=this.value)||void 0===t?void 0:t.length)&&this.value.forEach((t=>{const[a,e]=t;let o=this.draggables.find((t=>t.value===a)),r=this.connectables.find((t=>t.value===e));o||(o=this.draggables.find((t=>t.value===e)),r=this.connectables.find((t=>t.value===a))),o&&r&&(this.attachConnectable(o,r.id),this.applyColorChanges())}))}applyCorrections(t,a){t.isCorrect=t.id===a}initUserAnswersArray(){this.userAnswers=[],this.values&&this.values.length&&Array.isArray(this.values[0])&&this.values[0].forEach(((t,a)=>{var e,o;t&&this.userAnswers.push([null===(o=null===(e=this.draggables)||void 0===e?void 0:e[a])||void 0===o?void 0:o.id,""])}))}initItems(){var t,a;const e=[];null===(a=null===(t=this.values)||void 0===t?void 0:t[0])||void 0===a||a.forEach((()=>{e.push(c())})),h.forEach(((t,a)=>{var o,r;this[`${t}s`]=(null===(r=null===(o=this.values)||void 0===o?void 0:o[a])||void 0===r?void 0:r.map(((t,o)=>Object.assign({value:t,id:e[o]},a?{isConnected:!1}:{color:this.colors[o],isCorrect:!1}))))||[]}))}setColor(t,a){const e=i(this.colors.includes(a)?this.defaultColors[0]:this.defaultColors[1]),o=i(a);this.updateColor(t,o,e)}removeColor(t){const a=i(this.defaultColors[1]),e=i(this.defaultColors[0]),o=t.filter((t=>t.classList.contains("image"))),r=t.filter((t=>!(null==o?void 0:o.includes(t))));o&&this.updateColor(o,"transparent","transparent"),this.updateColor(r,e,a)}updateColor(t,a,e){null==t||t.forEach((t=>{t&&(t.style.backgroundColor=a,t.style.color=e)}))}getDraggableInstance(t){if(this.mainContainerElement&&t){const a=this.getDraggable(t),e=this.getElement(a.id,"draggable"),o=()=>{const t=e.getBoundingClientRect(),o=this.subContainerElements[1].getBoundingClientRect().x,r=t.x+t.width>=o;r&&this.connectables.forEach((t=>{const e=this.getElement(t.id,"connectable");a&&r&&a.draggableInstance.hitTest(e,this.overlapThreshold)&&(a.tempConnectableId=t.id,this.setColor([e],this.hoverColor))}));const i=this.getElement(a.tempConnectableId,"connectable");if(a.tempConnectableId&&!a.draggableInstance.hitTest(i,this.overlapThreshold)){if(this.getConnectable(a.tempConnectableId).isConnected){const t=this.draggables.filter((t=>null==t?void 0:t.connectable)).find((t=>t.connectable.id===a.tempConnectableId)).color;this.setColor([i],t)}else this.removeColor([i]);delete a.tempConnectableId}},r=()=>{n(e,this.animationDelay,{x:0,y:0}).then((()=>{if(null==a?void 0:a.tempConnectableId){const t=this.getElement(a.tempConnectableId,"connectable");this.setColor([t.parentElement.firstElementChild],"transparent"),this.attachConnectable(a,a.tempConnectableId),this.removeOldConnectable(),this.applyColorChanges(),this.autoCompleteLastConnection(),this.addAnswer(a.id,a.tempConnectableId),delete a.tempConnectableId}}))},i=()=>{if(null==a?void 0:a.connectable){const t=this.getElement(a.connectable.id,"connectable"),e=this.getElement(a.id,"draggable");this.removeColor([e,t]),this.getConnectable(a.connectable.id).isConnected=!1,delete a.connectable,this.addAnswer(a.id,"")}};if(!this.readonly&&this.isConnectMatchable&&e&&this.mainContainerElement)return new l(e,{bound:this.mainContainerElement,autoScroll:1,onDrag:o,onPress:i,onRelease:r})}}applyColorChanges(){this.draggables.forEach((t=>{var a;if(t){const e=t.color,o=this.getElement(t.id,"draggable"),r=this.getElement(null===(a=t.connectable)||void 0===a?void 0:a.id,"connectable");if(r){if(this.readonly){this.applyCorrections(t,t.connectable.id);for(const a of[o,r]){const e=a.getElementsByTagName("yoo-icon")[0];e.name=t.isCorrect?this.validationClasses.valid.icon:this.validationClasses.invalid.icon,e.color=t.isCorrect?this.validationClasses.valid.iconColor:this.validationClasses.invalid.iconColor}}this.setColor([o,r],e)}}}))}removeOldConnectable(){this.connectables.forEach((t=>{this.draggables.find((a=>{var e;return(null===(e=null==a?void 0:a.connectable)||void 0===e?void 0:e.id)===t.id}))||this.removeColor([this.getElement(t.id,"connectable")])}))}attachConnectable(t,a){const e=this.getConnectable(a),o=this.draggables.find((t=>{var e;return(null===(e=null==t?void 0:t.connectable)||void 0===e?void 0:e.id)===a}));if(o&&o.id!==(null==t?void 0:t.id)){const t=this.getElement(o.id,"draggable"),a=this.getElement(o.connectable.id,"connectable");this.removeColor([t,a]),o.connectable.isConnected=!1,delete o.connectable}t.connectable=e,e.isConnected=!0}addAnswer(t,a){if(t&&a){const e=this.userAnswers.findIndex((a=>(null==a?void 0:a[0])===t));this.userAnswers[e]=[t,a],this.checkAnswersValidity()}}checkAnswersValidity(){var t,a;let e=!1;(null===(t=this.userAnswers)||void 0===t?void 0:t.length)===(null===(a=this.answer)||void 0===a?void 0:a.length)&&(e=!this.userAnswers.find((t=>""===t[1]))),e!==this.validity&&(this.validity=e),!0===e&&this.valideAnswers()}valideAnswers(){if(!this.livePreview){this.value=this.userAnswers;const t=[];this.value.forEach((a=>{const e=this.getDraggable(a[0]),o=this.getConnectable(a[1]);(null==e?void 0:e.value)&&(null==o?void 0:o.value)&&t.push([e.value,o.value])})),s(t,this)}}autoCompleteLastConnection(){const t=this.draggables.filter((t=>!t.connectable)),a=this.connectables.filter((t=>!t.isConnected));if(1===(null==t?void 0:t.length)&&1===(null==a?void 0:a.length)){const e=t[0],o=a[0],r=e.color;o.isConnected=!0,this.setColor([this.getElement(o.id,"connectable"),this.getElement(e.id,"draggable")],r),e.connectable=o,this.addAnswer(e.id,o.id)}}truncateValue(t){if(t){const a=50,e=p(t);return e.length>a?e.substr(0,a).concat("..."):e}}renderContainer(t){const a="draggable"===t?0:1,o="draggable"===t?this.draggables:this.connectables;return e("div",{class:`${t}-container`,ref:t=>this.subContainerElements[a]=t},null==o?void 0:o.map((a=>{const o=!d(null==a?void 0:a.value)&&b(null==a?void 0:a.value);return(null==a?void 0:a.value)&&e("div",{class:"item-container"},e("div",{id:null==a?void 0:a.id,class:{[t]:!0,image:o,animated:this.animated}},o?[e("yoo-img",{type:"background",src:a.value}),e("div",{class:"overlay"})]:e("p",null,this.truncateValue(a.value)),this.readonly&&e("yoo-icon",{size:"medium"})))})))}render(){return this.hasValues&&e("div",{class:"connect-container",ref:t=>this.mainContainerElement=t},h.map((t=>this.renderContainer(t))))}get host(){return o(this)}static get watchers(){return{required:["onRequireChanged"],validity:["isValid"],answer:["initValues"],isVisible:["onIsVisibleChanged"],isAnimationFinished:["onModalAnimationFinished"]}}};f.style=':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))}';export{f as yoo_form_connect}