@yoobic/yobi 8.3.0-15 → 8.3.0-18

package/dist/design-system/yoo-form-connect.entry.js

@@ -1,16 +1,16 @@
 import { r as registerInstance, i as createEvent, h, e as Host, g as getElement } from './index-54cb3c5d.js';
-import './index-15ad2410.js';
-import { y as isEqual, Q as shuffle, R as difference } from './lodash-bf91c7a4.js';
-import { b as getAppContext } from './common-helpers-9eaafeae.js';
-import { s as showWarningAlert } from './draggable-tags-helpers-6af08fa7.js';
-import { a as setValueAndValidateInput } from './form-input-helpers-9d0b0a02.js';
-import { aB as getUUID, aD as gsapTo, aC as Draggable, V as translateMulti, aG as isImageUrl } from './overlays-6764f2a0.js';
-import './index-785487ed.js';
+import './index-4cc245a0.js';
+import { y as isEqual, Q as shuffle, R as difference } from './lodash-9e6ab91e.js';
+import { s as showWarningAlert } from './draggable-tags-helpers-b5167def.js';
+import { a as setValueAndValidateInput } from './form-input-helpers-b90bf146.js';
+import { aB as getUUID, aD as gsapTo, aC as Draggable, V as translateMulti, aG as isImageUrl } from './overlays-733d0adb.js';
+import './index-58b8d008.js';
+import './common-helpers-36ac7622.js';
 import './_commonjsHelpers-f4d11124.js';
 
 const CONNECT_TYPES = ['draggable', 'connectable'];
 
-const formConnectCss = ".bg-accent{background-color:var(--accent, #276ef1) !important}.accent{color:var(--accent, #276ef1);fill:var(--accent, #276ef1)}.border-accent{border:var(--border-width-02, 0.125rem) solid var(--accent, #276ef1)}.bg-app-color{background-color:var(--app-color, #5a30f4) !important}.app-color{color:var(--app-color, #5a30f4);fill:var(--app-color, #5a30f4)}.border-app-color{border:var(--border-width-02, 0.125rem) solid var(--app-color, #5a30f4)}.bg-danger{background-color:var(--danger, #d44333) !important}.danger{color:var(--danger, #d44333);fill:var(--danger, #d44333)}.border-danger{border:var(--border-width-02, 0.125rem) solid var(--danger, #d44333)}.bg-dark{background-color:var(--dark, #000000) !important}.dark{color:var(--dark, #000000);fill:var(--dark, #000000)}.border-dark{border:var(--border-width-02, 0.125rem) solid var(--dark, #000000)}.bg-energized{background-color:var(--energized, #ffc043) !important}.energized{color:var(--energized, #ffc043);fill:var(--energized, #ffc043)}.border-energized{border:var(--border-width-02, 0.125rem) solid var(--energized, #ffc043)}.bg-info{background-color:var(--info, #d84c96) !important}.info{color:var(--info, #d84c96);fill:var(--info, #d84c96)}.border-info{border:var(--border-width-02, 0.125rem) solid var(--info, #d84c96)}.bg-light{background-color:var(--light, #ffffff) !important}.light{color:var(--light, #ffffff);fill:var(--light, #ffffff)}.border-light{border:var(--border-width-02, 0.125rem) solid var(--light, #ffffff)}.bg-stable{background-color:var(--stable, #adadad) !important}.stable{color:var(--stable, #adadad);fill:var(--stable, #adadad)}.border-stable{border:var(--border-width-02, 0.125rem) solid var(--stable, #adadad)}.bg-stable-alt{background-color:var(--stable-alt, #d0d0d0) !important}.stable-alt{color:var(--stable-alt, #d0d0d0);fill:var(--stable-alt, #d0d0d0)}.border-stable-alt{border:var(--border-width-02, 0.125rem) solid var(--stable-alt, #d0d0d0)}.bg-stable-light{background-color:var(--stable-light, #f1f1f1) !important}.stable-light{color:var(--stable-light, #f1f1f1);fill:var(--stable-light, #f1f1f1)}.border-stable-light{border:var(--border-width-02, 0.125rem) solid var(--stable-light, #f1f1f1)}.bg-stable-ultralight{background-color:var(--stable-ultralight, #fafafa) !important}.stable-ultralight{color:var(--stable-ultralight, #fafafa);fill:var(--stable-ultralight, #fafafa)}.border-stable-ultralight{border:var(--border-width-02, 0.125rem) solid var(--stable-ultralight, #fafafa)}.bg-success{background-color:var(--success, #3aa76d) !important}.success{color:var(--success, #3aa76d);fill:var(--success, #3aa76d)}.border-success{border:var(--border-width-02, 0.125rem) solid var(--success, #3aa76d)}.bg-text-color{background-color:var(--text-color, #807f83) !important}.text-color{color:var(--text-color, #807f83);fill:var(--text-color, #807f83)}.border-text-color{border:var(--border-width-02, 0.125rem) solid var(--text-color, #807f83)}.bg-warning{background-color:var(--warning, #ed6e33) !important}.warning{color:var(--warning, #ed6e33);fill:var(--warning, #ed6e33)}.border-warning{border:var(--border-width-02, 0.125rem) solid var(--warning, #ed6e33)}.bg-wood{background-color:var(--wood, #99644c) !important}.wood{color:var(--wood, #99644c);fill:var(--wood, #99644c)}.border-wood{border:var(--border-width-02, 0.125rem) solid var(--wood, #99644c)}:host{display:block;width:100%;max-width:24rem;margin:0 auto}:host p{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:var(--spacing-16, 1rem);overflow:hidden;font-size:var(--font-size-14, 0.875rem);text-align:center}:host yoo-banner{height:0}:host yoo-banner p{padding:0}:host yoo-icon{position:absolute;top:var(--spacing-08, 0.5rem);right:var(--spacing-08, 0.5rem);background:var(--light, #ffffff);border-radius:50%}:host yoo-img{border-radius:inherit}:host .inner-container,:host .draggables,:host .connectables{display:grid;grid-gap:var(--spacing-08, 0.5rem)}:host .draggables,:host .connectables{height:-webkit-max-content;height:-moz-max-content;height:max-content;padding:var(--spacing-08, 0.5rem) 0}:host .inner-container{grid-template-rows:repeat(auto-fit, 75%);grid-template-columns:1fr 1fr;padding:0 var(--spacing-08, 0.5rem);overflow:hidden auto;word-break:break-word;background-color:var(--stable-alt-20, rgba(208, 208, 208, 0.2));border-radius:var(--border-radius-04, 0.25rem);-webkit-transition:height 500ms linear;transition:height 500ms linear;}:host .inner-container::-webkit-scrollbar{width:var(--spacing-08, 0.5rem)}:host .inner-container::-webkit-scrollbar-track{border-radius:var(--border-radius-04, 0.25rem);-webkit-box-shadow:inset 0 0 5px var(--stable, #adadad);box-shadow:inset 0 0 5px var(--stable, #adadad)}:host .inner-container::-webkit-scrollbar-thumb{background:var(--app-color, #5a30f4);border-radius:var(--border-radius-04, 0.25rem)}:host .connectable,:host .draggable{position:relative;width:100%;max-width:12rem;height:100%;background-color:var(--light, #ffffff);border-radius:var(--border-radius-08, 0.5rem);-webkit-box-shadow:var(--shadow-02, 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.1));box-shadow:var(--shadow-02, 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.1));cursor:pointer;-webkit-transition:background-color 0.25s ease-in-out, color 0.25s ease-in-out;transition:background-color 0.25s ease-in-out, color 0.25s ease-in-out}:host .connectable[data-hit],:host .draggable[data-hit]{background-color:var(--stable-light, #f1f1f1)}:host .connectable:before,:host .draggable:before{display:block;width:0;height:0;padding-bottom:75%;content:\"\"}:host .connectable.image,:host .draggable.image{padding:0}:host .connectable.image:not([data-hit]),:host .draggable.image:not([data-hit]){background-color:transparent}:host .connectable>*:not(yoo-icon),:host .draggable>*:not(yoo-icon){position:absolute;top:0;left:0;width:100%;height:100%}:host .overlay{background-color:inherit;border-radius:inherit;opacity:0.6}";
+const formConnectCss = ".bg-accent{background-color:var(--accent, #276ef1) !important}.accent{color:var(--accent, #276ef1);fill:var(--accent, #276ef1)}.border-accent{border:var(--border-width-02, 0.125rem) solid var(--accent, #276ef1)}.bg-app-color{background-color:var(--app-color, #5a30f4) !important}.app-color{color:var(--app-color, #5a30f4);fill:var(--app-color, #5a30f4)}.border-app-color{border:var(--border-width-02, 0.125rem) solid var(--app-color, #5a30f4)}.bg-danger{background-color:var(--danger, #d44333) !important}.danger{color:var(--danger, #d44333);fill:var(--danger, #d44333)}.border-danger{border:var(--border-width-02, 0.125rem) solid var(--danger, #d44333)}.bg-dark{background-color:var(--dark, #000000) !important}.dark{color:var(--dark, #000000);fill:var(--dark, #000000)}.border-dark{border:var(--border-width-02, 0.125rem) solid var(--dark, #000000)}.bg-energized{background-color:var(--energized, #ffc043) !important}.energized{color:var(--energized, #ffc043);fill:var(--energized, #ffc043)}.border-energized{border:var(--border-width-02, 0.125rem) solid var(--energized, #ffc043)}.bg-info{background-color:var(--info, #d84c96) !important}.info{color:var(--info, #d84c96);fill:var(--info, #d84c96)}.border-info{border:var(--border-width-02, 0.125rem) solid var(--info, #d84c96)}.bg-light{background-color:var(--light, #ffffff) !important}.light{color:var(--light, #ffffff);fill:var(--light, #ffffff)}.border-light{border:var(--border-width-02, 0.125rem) solid var(--light, #ffffff)}.bg-stable{background-color:var(--stable, #adadad) !important}.stable{color:var(--stable, #adadad);fill:var(--stable, #adadad)}.border-stable{border:var(--border-width-02, 0.125rem) solid var(--stable, #adadad)}.bg-stable-alt{background-color:var(--stable-alt, #d0d0d0) !important}.stable-alt{color:var(--stable-alt, #d0d0d0);fill:var(--stable-alt, #d0d0d0)}.border-stable-alt{border:var(--border-width-02, 0.125rem) solid var(--stable-alt, #d0d0d0)}.bg-stable-light{background-color:var(--stable-light, #f1f1f1) !important}.stable-light{color:var(--stable-light, #f1f1f1);fill:var(--stable-light, #f1f1f1)}.border-stable-light{border:var(--border-width-02, 0.125rem) solid var(--stable-light, #f1f1f1)}.bg-stable-ultralight{background-color:var(--stable-ultralight, #fafafa) !important}.stable-ultralight{color:var(--stable-ultralight, #fafafa);fill:var(--stable-ultralight, #fafafa)}.border-stable-ultralight{border:var(--border-width-02, 0.125rem) solid var(--stable-ultralight, #fafafa)}.bg-success{background-color:var(--success, #3aa76d) !important}.success{color:var(--success, #3aa76d);fill:var(--success, #3aa76d)}.border-success{border:var(--border-width-02, 0.125rem) solid var(--success, #3aa76d)}.bg-text-color{background-color:var(--text-color, #807f83) !important}.text-color{color:var(--text-color, #807f83);fill:var(--text-color, #807f83)}.border-text-color{border:var(--border-width-02, 0.125rem) solid var(--text-color, #807f83)}.bg-warning{background-color:var(--warning, #ed6e33) !important}.warning{color:var(--warning, #ed6e33);fill:var(--warning, #ed6e33)}.border-warning{border:var(--border-width-02, 0.125rem) solid var(--warning, #ed6e33)}.bg-wood{background-color:var(--wood, #99644c) !important}.wood{color:var(--wood, #99644c);fill:var(--wood, #99644c)}.border-wood{border:var(--border-width-02, 0.125rem) solid var(--wood, #99644c)}:host{display:block;width:100%;max-width:30rem;margin:0 auto}:host p{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:var(--spacing-16, 1rem);overflow:hidden;font-size:var(--font-size-14, 0.875rem);text-align:center}:host yoo-banner{height:0}:host yoo-banner p{padding:0}:host yoo-icon{position:absolute;top:var(--spacing-08, 0.5rem);right:var(--spacing-08, 0.5rem);background:var(--light, #ffffff);border-radius:50%}:host yoo-img{border-radius:inherit}:host main,:host #draggables,:host #connectables{display:grid;grid-gap:var(--spacing-08, 0.5rem)}:host #draggables,:host #connectables{height:-webkit-max-content;height:-moz-max-content;height:max-content;padding:var(--spacing-08, 0.5rem) 0}:host main{grid-template-rows:repeat(auto-fit, 75%);grid-template-columns:1fr 1fr;padding:0 var(--spacing-08, 0.5rem);word-break:break-word;background-color:var(--stable-alt-20, rgba(208, 208, 208, 0.2));border-radius:var(--border-radius-04, 0.25rem);-webkit-transition:height 750ms ease-in-out;transition:height 750ms ease-in-out}:host main.overflowing{overflow:hidden auto}:host main.overflowing::-webkit-scrollbar{width:var(--spacing-08, 0.5rem)}:host main.overflowing::-webkit-scrollbar-track{border-radius:var(--border-radius-04, 0.25rem);-webkit-box-shadow:inset 0 0 5px var(--stable, #adadad);box-shadow:inset 0 0 5px var(--stable, #adadad)}:host main.overflowing::-webkit-scrollbar-thumb{background:var(--app-color, #5a30f4);border-radius:var(--border-radius-04, 0.25rem)}:host .connectable,:host .draggable{position:relative;width:100%;max-width:15rem;height:100%;background-color:var(--light, #ffffff);border-radius:var(--border-radius-08, 0.5rem);-webkit-box-shadow:var(--shadow-02, 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.1));box-shadow:var(--shadow-02, 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.1));cursor:pointer;-webkit-transition:background-color 0.25s ease-in-out, color 0.25s ease-in-out;transition:background-color 0.25s ease-in-out, color 0.25s ease-in-out}:host .connectable:before,:host .draggable:before{display:block;width:0;height:0;padding-bottom:75%;content:\"\"}:host .connectable[type=image],:host .draggable[type=image]{padding:0}:host .connectable[type=image]:not([data-hit]),:host .draggable[type=image]:not([data-hit]){background-color:transparent}:host .connectable[type=image][hit] yoo-img,:host .draggable[type=image][hit] yoo-img{opacity:0.6;-webkit-transition:opacity 0.25s ease-in-out;transition:opacity 0.25s ease-in-out}:host .connectable[type=text][hit],:host .draggable[type=text][hit]{background-color:var(--stable-light, #f1f1f1)}:host .connectable>*:not(yoo-icon),:host .draggable>*:not(yoo-icon){position:absolute;top:0;left:0;width:100%;height:100%}:host #overlay{background-color:inherit;border-radius:inherit;opacity:0.6}";
 
 const YooFormConnectComponent = class {
   constructor(hostRef) {
@@ -36,8 +36,10 @@ const YooFormConnectComponent = class {
     this.isVisible = false;
     this.colors = ['warning', 'accent', 'app-color', 'info', 'energized'];
   }
-  onValuesChanged() {
-    showWarningAlert(this.host, !this.isGameMatchable, 'NOTALLPAIREDVALUES');
+  async onValuesChanged() {
+    var _a;
+    showWarningAlert(this.host, ((_a = this.values) === null || _a === void 0 ? void 0 : _a.length) > 1 && !this.isGamePairable, 'NOTALLPAIREDVALUES');
+    await this.scrollToRevealGame();
   }
   onValidityChanged() {
     this.validityChanged.emit(this.validity);
@@ -51,19 +53,16 @@ const YooFormConnectComponent = class {
   initAnswerChanged() {
     this.prepareGame();
   }
-  async onIsVisibleChanged(state) {
-    if (state) {
-      await this.scrollToRevealGame();
-      this.setScrollableHeight();
-    }
+  async onIsVisibleChanged() {
+    this.isVisible && this.scrollToRevealGame();
   }
   get hasValues() {
     var _a, _b, _c, _d;
     return !!(((_b = (_a = this.values) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.length) || ((_d = (_c = this.values) === null || _c === void 0 ? void 0 : _c[1]) === null || _d === void 0 ? void 0 : _d.length));
   }
-  get isGameMatchable() {
+  get isGamePairable() {
     var _a, _b, _c, _d, _e, _f;
-    return ((_c = (_b = (_a = this.values) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.filter(v => v)) === null || _c === void 0 ? void 0 : _c.length) === ((_f = (_e = (_d = this.values) === null || _d === void 0 ? void 0 : _d[1]) === null || _e === void 0 ? void 0 : _e.filter(v => v)) === null || _f === void 0 ? void 0 : _f.length);
+    return ((_a = this.values) === null || _a === void 0 ? void 0 : _a.length) && ((_c = (_b = this.values[0]) === null || _b === void 0 ? void 0 : _b.filter(v => v)) === null || _c === void 0 ? void 0 : _c.length) === ((_f = (_e = (_d = this.values) === null || _d === void 0 ? void 0 : _d[1]) === null || _e === void 0 ? void 0 : _e.filter(v => v)) === null || _f === void 0 ? void 0 : _f.length);
   }
   get draggableElements() {
     return Array.from(this.host.shadowRoot.querySelectorAll('.draggable') || []);
@@ -84,45 +83,49 @@ const YooFormConnectComponent = class {
     this.initGame();
   }
   prepareGame() {
-    this.prepareItems();
+    this.prepareData();
     this.connectItems();
-    this.shuffleItems();
+    this.shuffleData();
   }
   async initGame() {
     await this.scrollToRevealGame();
-    this.setScrollableHeight();
     this.setDraggableObserver();
     this.initDraggables();
-    showWarningAlert(this.host, !this.isGameMatchable, 'NOTALLPAIREDVALUES');
   }
   initDraggables() {
     var _a;
     (_a = this.draggableElements) === null || _a === void 0 ? void 0 : _a.forEach(e => this.initDraggableActions(e));
   }
   async scrollToRevealGame() {
-    const scrollElement = this.host.closest('yoo-ion-scroll');
-    return scrollElement && !this.livePreview && new Promise(resolve => {
-      setTimeout(() => {
-        scrollElement.scrollTo({ top: scrollElement.scrollHeight, behavior: 'smooth' });
-        resolve();
-      }, 1000);
-    });
-  }
-  setScrollableHeight() {
-    var _a, _b, _c, _d, _e, _f, _g;
     const GAP_PADDING = 8;
-    const { bottom } = this.host.getBoundingClientRect();
-    const numberOfItems = ((_b = (_a = this.values) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.length) || 0;
-    const formBounding = (_c = this.host.closest('form')) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect();
-    const itemHeight = ((_e = (_d = this.innerContainerElement) === null || _d === void 0 ? void 0 : _d.querySelector('[id]')) === null || _e === void 0 ? void 0 : _e.clientHeight) + GAP_PADDING + GAP_PADDING / numberOfItems + 1;
-    if (itemHeight && formBounding && bottom > formBounding.bottom && ((_g = (_f = this.values) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.length)) {
-      const maxItems = Math.floor(formBounding.height / itemHeight);
-      const maxHeight = maxItems * itemHeight + (maxItems + 1) * GAP_PADDING;
-      this.innerContainerElement.style.maxHeight = `${Math.min(formBounding.height, maxHeight + GAP_PADDING)}px`;
+    const scrollElement = this.host.closest('yoo-ion-scroll');
+    if (scrollElement && this.values.length === 2) {
+      const setScrollableHeight = () => {
+        const getHeight = (el) => { var _a; return (_a = el === null || el === void 0 ? void 0 : el.getBoundingClientRect()) === null || _a === void 0 ? void 0 : _a.height; };
+        const formHeight = getHeight(this.host.closest('yoo-form-input-container'));
+        const tileHeight = getHeight(this.innerContainerElement.querySelector('[type]'));
+        if (formHeight && tileHeight && !this.readonly) {
+          const numberItems = Math.max(this.values[0].length, this.values[1].length);
+          const itemsHeight = numberItems * tileHeight + (numberItems + 1) * GAP_PADDING;
+          this.innerContainerElement.classList.toggle('overflowing', itemsHeight > formHeight);
+          this.innerContainerElement.style.height = `${Math.min(formHeight, itemsHeight)}px`;
+        }
+      };
+      await new Promise(resolve => {
+        setTimeout(() => {
+          scrollElement.scrollTo({
+            top: scrollElement.scrollHeight,
+            behavior: 'smooth'
+          });
+          resolve();
+        }, 1000);
+      });
+      setScrollableHeight();
     }
   }
   setDraggableObserver() {
-    this.draggables = this.draggables.map(d => {
+    var _a;
+    this.draggables = ((_a = this.draggables) === null || _a === void 0 ? void 0 : _a.map(d => {
       return new Proxy(d, {
         set: (draggable, key, value) => {
           draggable[key] = value;
@@ -145,16 +148,16 @@ const YooFormConnectComponent = class {
           return true;
         }
       });
-    });
+    })) || [];
   }
-  shuffleItems() {
+  shuffleData() {
     this.shuffled && CONNECT_TYPES.forEach(type => this[`${type}s`] = shuffle(this[`${type}s`]));
   }
-  prepareItems() {
+  prepareData() {
     CONNECT_TYPES.forEach((type, index) => {
       var _a, _b;
       this[`${type}s`] = ((_b = (_a = this.values) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b.map((value, i) => ({
-        value,
+        value: typeof value === 'string' ? value : (value === null || value === void 0 ? void 0 : value['text']) || (value === null || value === void 0 ? void 0 : value['file']),
         id: getUUID(),
         ...(!index && {
           color: this.colors[i]
@@ -178,25 +181,25 @@ const YooFormConnectComponent = class {
   }
   initDraggableActions(draggableElement) {
     var _a;
-    if (draggableElement) {
+    const currentDraggable = draggableElement && ((_a = this.draggables) === null || _a === void 0 ? void 0 : _a.find(({ id }) => id === draggableElement.id));
+    if (currentDraggable) {
       let tempConnectableElement;
-      const currentDraggable = (_a = this.draggables) === null || _a === void 0 ? void 0 : _a.find(d => (d === null || d === void 0 ? void 0 : d.id) === draggableElement.id);
       const onDragStartElement = () => {
         this.blockMoves.emit(true);
-        draggableElement.removeAttribute('data-hit');
+        draggableElement.removeAttribute('hit');
       };
       const onDragElement = () => {
         var _a, _b;
         const overlapThreshold = '65%';
         const { x, width } = draggableElement.getBoundingClientRect();
-        const connectableThreshold = this.innerContainerElement.querySelector('.connectables').getBoundingClientRect().x;
+        const connectableThreshold = this.innerContainerElement.querySelector('#connectables').getBoundingClientRect().x;
         const isInConnectableArea = x + width >= connectableThreshold;
         if (isInConnectableArea) {
           this.connectableElements.forEach(e => {
             var _a, _b;
             if (((_b = (_a = currentDraggable === null || currentDraggable === void 0 ? void 0 : currentDraggable.draggableInstance) === null || _a === void 0 ? void 0 : _a.hitTest) === null || _b === void 0 ? void 0 : _b.call(_a, e, overlapThreshold)) && e.id !== currentDraggable.connectableId) {
               tempConnectableElement = e;
-              tempConnectableElement.setAttribute('data-hit', 'true');
+              tempConnectableElement.setAttribute('hit', 'true');
             }
           });
         }
@@ -209,7 +212,7 @@ const YooFormConnectComponent = class {
               color: 'var(--light)'
             });
           }
-          tempConnectableElement.removeAttribute('data-hit');
+          tempConnectableElement.removeAttribute('hit');
           tempConnectableElement = null;
         }
       };
@@ -217,13 +220,13 @@ const YooFormConnectComponent = class {
         await gsapTo(draggableElement, this.animated ? 0.25 : 0, { x: 0, y: 0 });
         if (tempConnectableElement) {
           currentDraggable.connectableId = tempConnectableElement.id;
-          tempConnectableElement.removeAttribute('data-hit');
+          tempConnectableElement.removeAttribute('hit');
           this.autoCompleteLastConnection();
         }
         tempConnectableElement = null;
         this.blockMoves.emit(false);
       };
-      const onClickElement = () => {
+      const onClickElement = async () => {
         var _a;
         currentDraggable.hit = { value: !((_a = currentDraggable.hit) === null || _a === void 0 ? void 0 : _a.value) && !currentDraggable.connectableId };
         delete currentDraggable.connectableId;
@@ -231,7 +234,7 @@ const YooFormConnectComponent = class {
         this.getUserAnswers();
         this.validateUserAnswers();
       };
-      if (!this.readonly && this.isGameMatchable && draggableElement) {
+      if (!this.readonly && this.isGamePairable && draggableElement) {
         currentDraggable.draggableInstance = new Draggable(draggableElement, {
           autoScroll: 1,
           bound: this.innerContainerElement,
@@ -248,7 +251,8 @@ const YooFormConnectComponent = class {
   }
   validateUserAnswers(userAnswers = this.userAnswers) {
     this.validity = !(userAnswers === null || userAnswers === void 0 ? void 0 : userAnswers.reduce((acc, v) => acc + v.filter(i => !i).length, 0));
-    setValueAndValidateInput(userAnswers, this);
+    this.value = userAnswers;
+    setValueAndValidateInput(this.value, this);
   }
   autoEraseLastConnection() {
     const connectedDraggables = this.draggables.filter(d => d.connectableId);
@@ -289,23 +293,27 @@ const YooFormConnectComponent = class {
   }
   renderContainer(name) {
     var _a;
-    return (h("section", { class: { [`${name}s`]: true } }, (_a = this[`${name}s`]) === null || _a === void 0 ? void 0 : _a.map((item) => {
+    return (h("section", { id: `${name}s` }, (_a = this[`${name}s`]) === null || _a === void 0 ? void 0 : _a.map((item) => {
       var _a;
       const isDraggable = name === 'draggable';
       const { id, value, connectableId, color } = item || {};
-      const isImage = !!(value && isImageUrl(value));
+      const isImage = value && isImageUrl(value);
       const connectable = this.draggables.find(d => d.connectableId === id);
       const isConnected = !!(connectableId || connectable);
       const tileColor = color || (connectable === null || connectable === void 0 ? void 0 : connectable.color);
       const connectedAttr = { style: { backgroundColor: `var(--${tileColor})`, color: 'var(--light)' }, connected: true };
-      return !!value && (h("div", { class: "tile-container" }, h("div", { ...(isConnected && connectedAttr), "data-hit": !!((_a = item === null || item === void 0 ? void 0 : item.hit) === null || _a === void 0 ? void 0 : _a.value) && isDraggable, id: id, key: id, class: { [name]: true, image: isImage }, onClick: () => { !isDraggable && this.onConnectableClick(item); } }, !isImage ? h("p", null, this.truncateValue(value)) : [h("yoo-img", { type: "background", src: value }), h("div", { class: "overlay" })], this.readonly && this.renderCorrectionIcon(value))));
+      const tileAttr = { ...(isConnected && connectedAttr), hit: !!((_a = item === null || item === void 0 ? void 0 : item.hit) === null || _a === void 0 ? void 0 : _a.value) && isDraggable, type: isImage ? 'image' : 'text' };
+      return !!value && (h("div", { ...tileAttr, id: id, key: id, class: { [name]: true }, onClick: () => { !isDraggable && this.onConnectableClick(item); } }, !isImage ? h("p", null, this.truncateValue(value)) : [h("yoo-img", { type: "background", src: value }), h("div", { id: "overlay" })], this.readonly && this.renderCorrectionIcon(value)));
     })));
   }
   renderBanner() {
     return this.livePreview && h("yoo-banner", null, h("p", { slot: "content" }));
   }
+  renderMain() {
+    return this.hasValues && h("main", { ref: element => (this.innerContainerElement = element) }, CONNECT_TYPES.map(type => this.renderContainer(type)));
+  }
   render() {
-    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)))));
+    return h(Host, null, this.renderBanner(), this.renderMain());
   }
   get host() { return getElement(this); }
   static get watchers() { return {

package/dist/design-system/yoo-form-creator-block-expandable.entry.js

@@ -1,10 +1,10 @@
 import { r as registerInstance, i as createEvent, h, e as Host, g as getElement } from './index-54cb3c5d.js';
-import { R as FORM_CREATOR_OPTIONS_ALL, A as ALL_MOBILE_FORM_FIELDS, s as FormFieldCategory, q as FormCreatorOptions } from './index-785487ed.js';
-import './index-15ad2410.js';
-import { n as compact } from './lodash-bf91c7a4.js';
-import { N as NON_CONDITION_CATEGORIES } from './index-08c73368.js';
-import { l as setBlockSelection, S as setRestrictionAndConditionActions, T as filterSequentialFields, I as setRestrictionAndFieldConditions, J as setChildFields } from './index-76dfcb25.js';
-import { U as isNullOrUndefined, r as debounce, t as translate, aD as gsapTo, aE as gsapSet, d0 as Power3, aF as gsapFromTo, V as translateMulti } from './overlays-6764f2a0.js';
+import { R as FORM_CREATOR_OPTIONS_ALL, A as ALL_MOBILE_FORM_FIELDS, s as FormFieldCategory, q as FormCreatorOptions } from './index-58b8d008.js';
+import './index-4cc245a0.js';
+import { n as compact } from './lodash-9e6ab91e.js';
+import { N as NON_CONDITION_CATEGORIES } from './index-035dc1ca.js';
+import { l as setBlockSelection, S as setRestrictionAndConditionActions, T as filterSequentialFields, I as setRestrictionAndFieldConditions, J as setChildFields } from './index-e4f17371.js';
+import { U as isNullOrUndefined, r as debounce, t as translate, aD as gsapTo, aE as gsapSet, d0 as Power3, aF as gsapFromTo, V as translateMulti } from './overlays-733d0adb.js';
 import './annotations-helpers-628a8ae3.js';
 import './_commonjsHelpers-f4d11124.js';
 
@@ -333,9 +333,6 @@ const YooFormCreatorBlockExpandableComponent = class {
             if (this.contentBottomElement) {
               this.contentBottomElement.style.display = 'flex';
             }
-            if (this.arrowElement) {
-              this.arrowElement.name = this.isExpanded ? 'arrow-up' : 'arrow-down';
-            }
             gsapSet(slotContent, { overflow: 'unset' });
           },
           ease: Power3.easeIn
@@ -343,6 +340,9 @@ const YooFormCreatorBlockExpandableComponent = class {
         const animationDelay = 0.5;
         this.isExpanded = shouldExpand;
         this.blockExpanded.emit({ expanded: shouldExpand, name: this.formField.name });
+        if (this.arrowElement) {
+          this.arrowElement.name = this.isExpanded ? 'arrow-up' : 'arrow-down';
+        }
         gsapFromTo(contentBlock, animationDelay, from, to);
       }
     }

package/dist/design-system/yoo-form-creator-block-simple.entry.js

@@ -1,13 +1,13 @@
 import { r as registerInstance, i as createEvent, h, e as Host, g as getElement } from './index-54cb3c5d.js';
-import './index-15ad2410.js';
+import './index-4cc245a0.js';
 import './index-33005dee.js';
-import { b as getAppContext } from './common-helpers-9eaafeae.js';
-import { V as translateMulti, t as translate } from './overlays-6764f2a0.js';
+import { b as getAppContext } from './common-helpers-36ac7622.js';
+import { V as translateMulti, t as translate } from './overlays-733d0adb.js';
 import { f as fieldStateOptions } from './index-a7443ef7.js';
-import './lodash-bf91c7a4.js';
+import './lodash-9e6ab91e.js';
 import './index-cab1603b.js';
 import './index-2319a076.js';
-import './index-785487ed.js';
+import './index-58b8d008.js';
 import './_commonjsHelpers-f4d11124.js';
 
 const formCreatorBlockSimpleCss = ":host .outer-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;width:100%;height:2.375rem;background:var(--light, #ffffff);border-radius:var(--border-radius-08, 0.5rem)}:host .outer-container .form-icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:2.5rem;height:1.25rem;margin:0 var(--spacing-08, 0.5rem);color:var(--light, #ffffff);font-size:var(--font-size-12, 0.75rem);border-radius:var(--border-radius-04, 0.25rem);background-color:var(--accent, #276ef1)}:host .outer-container .form-icon.multimedia,:host .outer-container .form-icon.learn,:host .outer-container .form-icon.uiactions{background-color:var(--info, #d84c96)}:host .outer-container .form-icon.select,:host .outer-container .form-icon.events,:host .outer-container .form-icon.dataevents{background-color:var(--accent, #276ef1)}:host .outer-container .form-icon.textcategory{background-color:var(--energized, #ffc043)}:host .outer-container .form-icon.number,:host .outer-container .form-icon.appcreatorapp,:host .outer-container .form-icon.customfield{background-color:var(--app-color, #5a30f4)}:host .outer-container .form-icon.contactdetail,:host .outer-container .form-icon.engage,:host .outer-container .form-icon.information,:host .outer-container .form-icon.nativeactions{background-color:var(--warning, #ed6e33)}:host .outer-container .form-icon.no-scoring{background-color:var(--text-color, #807f83)}:host .outer-container .form-icon.actioncategory,:host .outer-container .form-icon.logic{background-color:var(--anthracite, #1a1a1a)}:host .outer-container .form-icon.dateandtime{background-color:var(--dark, #000000)}:host .outer-container .form-icon.catalogandbarcode,:host .outer-container .form-icon.notifications{background-color:var(--danger, #d44333)}:host .outer-container .form-icon.condition{background-color:var(--stable, #adadad)}:host .outer-container .form-icon.page,:host .outer-container .form-icon.dataactions,:host .outer-container .form-icon.operate{background-color:var(--success, #3aa76d)}:host .outer-container .form-icon.lesson,:host .outer-container .form-icon.boostcontent{background-color:var(--app-color, #5a30f4)}:host .outer-container .form-icon yoo-icon{margin:0 var(--spacing-04, 0.25rem)}:host .outer-container .title-container{width:100%}:host .outer-container yoo-form-autocomplete{width:100%;min-width:7.5rem;max-width:10rem;margin-right:var(--spacing-08, 0.5rem)}:host .outer-container .conditional-indicator{position:absolute;top:2.375rem;right:auto;bottom:auto;left:1.5rem;position:absolute;width:0.125rem;height:2rem;background:var(--stable, #adadad)}:host .outer-container .conditional-marker{width:0.5rem;height:0.5rem;background:var(--stable, #adadad);border-radius:var(--border-radius-02, 0.125rem);position:absolute;top:4rem;right:auto;bottom:auto;left:1.3125rem}:host .outer-container .conditional-text{position:absolute;top:3.75rem;right:auto;bottom:auto;left:2.75rem;color:var(--light, #ffffff);font-weight:var(--font-weight-300, 300);font-size:var(--font-size-12, 0.75rem)}:host .outer-container .conditional-border{position:absolute;top:3rem;right:auto;bottom:auto;left:5rem;width:4rem;height:2.5rem;border:var(--border-width-01, 0.0625rem) dashed var(--light, #ffffff);border-radius:var(--border-radius-02, 0.125rem);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}:host(.shadow) .outer-container{-webkit-box-shadow:0 5px 15px 0 rgba(0, 0, 0, 0.05);box-shadow:0 5px 15px 0 rgba(0, 0, 0, 0.05)}";

package/dist/design-system/yoo-form-creator-condition-block.entry.js

@@ -1,11 +1,11 @@
 import { r as registerInstance, i as createEvent, h, e as Host, g as getElement } from './index-54cb3c5d.js';
-import { A as ALL_MOBILE_FORM_FIELDS } from './index-785487ed.js';
-import './index-15ad2410.js';
+import { A as ALL_MOBILE_FORM_FIELDS } from './index-58b8d008.js';
+import './index-4cc245a0.js';
 import './index-33005dee.js';
-import { l as setBlockSelection, U as setPageSelection } from './index-76dfcb25.js';
-import { t as translate, U as isNullOrUndefined, V as translateMulti } from './overlays-6764f2a0.js';
+import { l as setBlockSelection, U as setPageSelection } from './index-e4f17371.js';
+import { t as translate, U as isNullOrUndefined, V as translateMulti } from './overlays-733d0adb.js';
 import { f as feedbackValues } from './index-2319a076.js';
-import './lodash-bf91c7a4.js';
+import './lodash-9e6ab91e.js';
 import './index-cab1603b.js';
 import './index-a7443ef7.js';
 import './annotations-helpers-628a8ae3.js';

package/dist/design-system/yoo-form-creator-field-selector.entry.js

@@ -1,10 +1,10 @@
 import { r as registerInstance, i as createEvent, h, g as getElement } from './index-54cb3c5d.js';
-import { s as FormFieldCategory, c as FormFieldType } from './index-785487ed.js';
-import './index-15ad2410.js';
+import { s as FormFieldCategory, c as FormFieldType } from './index-58b8d008.js';
+import './index-4cc245a0.js';
 import { a as gridstackDdNative } from './gridstack-dd-native-d6cac184.js';
-import { c as cloneDeep, $ as flatten } from './lodash-bf91c7a4.js';
-import { A as ARROW_PAIR } from './index-08c73368.js';
-import { t as translate } from './overlays-6764f2a0.js';
+import { c as cloneDeep, $ as flatten } from './lodash-9e6ab91e.js';
+import { A as ARROW_PAIR } from './index-035dc1ca.js';
+import { t as translate } from './overlays-733d0adb.js';
 import './_commonjsHelpers-f4d11124.js';
 
 const formCreatorFieldSelectorCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%;overflow:hidden}:host .category-block-selection{padding:0 var(--spacing-08, 0.5rem)}:host yoo-accordion{--outer-container-padding:0 var(--spacing-16, 1rem);--outer-container-width:calc(100% - 2.5rem);--title-icon-color:var(--stable-alt, #d0d0d0)}:host yoo-accordion yoo-accordion.sub-accordion{--outer-container-padding:0;--outer-container-width:100%}:host .new-widget{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-height:2.5rem;margin:var(--spacing-08, 0.5rem) 0;padding:0 var(--spacing-16, 1rem);background:var(--light, #ffffff);border-radius:0.25rem;-webkit-box-shadow:0 0.3125rem 0.9375rem 0 rgba(40, 47, 54, 0.08);box-shadow:0 0.3125rem 0.9375rem 0 rgba(40, 47, 54, 0.08);cursor:pointer}:host .new-widget yoo-icon{margin-right:var(--spacing-08, 0.5rem);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host .new-widget .title{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}";

package/dist/design-system/yoo-form-creator-header.entry.js

@@ -1,9 +1,9 @@
 import { r as registerInstance, i as createEvent, h, e as Host, g as getElement } from './index-54cb3c5d.js';
-import { q as FormCreatorOptions } from './index-785487ed.js';
-import './index-15ad2410.js';
-import { b as getAppContext } from './common-helpers-9eaafeae.js';
-import { t as translate, V as translateMulti } from './overlays-6764f2a0.js';
-import './lodash-bf91c7a4.js';
+import { q as FormCreatorOptions } from './index-58b8d008.js';
+import './index-4cc245a0.js';
+import { b as getAppContext } from './common-helpers-36ac7622.js';
+import { t as translate, V as translateMulti } from './overlays-733d0adb.js';
+import './lodash-9e6ab91e.js';
 import './_commonjsHelpers-f4d11124.js';
 
 const formCreatorHeaderCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:3rem;border-bottom:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1)}:host .image-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:3rem;height:100%}:host .image-container yoo-img{display:-ms-flexbox;display:flex;width:1.5rem;height:1.5rem}:host .image-container::after{position:absolute;right:0;width:0.0625rem;height:1.125rem;background:var(--stable-light, #f1f1f1);content:\"\"}:host .title{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;padding-left:var(--spacing-16, 1rem);font-size:var(--font-size-14, 0.875rem)}:host .title .stable{margin-right:var(--spacing-04, 0.25rem)}:host .buttons-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:100%}:host .buttons-container .icon-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:1.125rem;margin-right:var(--spacing-16, 1rem);font-size:var(--font-size-18, 1.125rem);text-align:center}:host .buttons-container .icon-container.context-menu{position:relative}:host .buttons-container yoo-button{margin-right:var(--spacing-16, 1rem)}:host(.custom-theme){background:var(--app-color-10, rgba(90, 48, 244, 0.1))}";

package/dist/design-system/yoo-form-creator-live-preview.entry.js

@@ -1,9 +1,9 @@
 import { r as registerInstance, i as createEvent, f as forceUpdate, h, e as Host, g as getElement } from './index-54cb3c5d.js';
-import { p as devices } from './index-785487ed.js';
-import './index-15ad2410.js';
-import { b as getAppContext } from './common-helpers-9eaafeae.js';
-import { c$ as getTranslateLanguageKeys, t as translate, V as translateMulti, cQ as replaceSVGColors } from './overlays-6764f2a0.js';
-import './lodash-bf91c7a4.js';
+import { p as devices } from './index-58b8d008.js';
+import './index-4cc245a0.js';
+import { b as getAppContext } from './common-helpers-36ac7622.js';
+import { c$ as getTranslateLanguageKeys, t as translate, V as translateMulti, cQ as replaceSVGColors } from './overlays-733d0adb.js';
+import './lodash-9e6ab91e.js';
 import './_commonjsHelpers-f4d11124.js';
 
 const formCreatorLivePreviewCss = ":host{display:block;height:100%}:host h1,:host p{margin:0}:host .outer-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:100%;height:100%;overflow:hidden;background:var(--light, #ffffff)}:host .outer-container.not-closable{height:100%;border-top-left-radius:var(--border-radius-04, 0.25rem);border-top-right-radius:var(--border-radius-04, 0.25rem)}:host .outer-container.not-closable .heading{margin:0;padding-right:1rem;padding-left:0.5rem;border-top-left-radius:var(--border-radius-04, 0.25rem);border-top-right-radius:var(--border-radius-04, 0.25rem)}:host .outer-container .image-container{position:absolute;top:auto;right:auto;bottom:2.5rem;left:2.5rem;width:6.25rem}:host .outer-container .image-container yoo-img{width:6.25rem}:host .outer-container .heading{position:relative;display:-ms-flexbox;display:flex;-ms-flex:0 0 3.5rem;flex:0 0 3.5rem;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0 var(--spacing-16, 1rem);border-bottom:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1)}:host .outer-container .heading .campaign-title{margin-left:var(--spacing-04, 0.25rem);color:var(--stable, #adadad);font-size:var(--font-size-16, 1rem)}:host .outer-container .heading .title{position:absolute;top:auto;right:var(--spacing-16, 1rem);bottom:auto;left:var(--spacing-16, 1rem);color:var(--dark, #000000);font-size:var(--font-size-16, 1rem);text-align:center}:host .outer-container .heading .title.align-left{position:initial;-ms-flex:1;flex:1;text-align:left}:host .outer-container .sub-header{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;height:4.125rem}:host .outer-container .sub-header .device-selector{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .outer-container .columns-container{display:grid;gap:var(--spacing-48, 3rem);-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;overflow:hidden}:host .outer-container .columns-container .description{-webkit-box-sizing:border-box;box-sizing:border-box;height:100%;padding:var(--spacing-24, 1.5rem);color:var(--dark, #000000);background:var(--stable-ultralight, #fafafa);border-radius:var(--border-radius-04, 0.25rem)}:host .outer-container .columns-container .description h1{margin-bottom:var(--spacing-16, 1rem);font-weight:var(--font-weight-900, 900);font-size:var(--font-size-20, 1.25rem);line-height:1.6;overflow:hidden}@supports (display: -webkit-box){:host .outer-container .columns-container .description h1{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}}:host .outer-container .columns-container .description p{line-height:1.13}:host .outer-container .columns-container .form-dynamic-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:calc(100% - 2rem)}:host .outer-container .columns-container .form-dynamic-container .slot-container{position:relative;height:100%;overflow-y:auto;}:host .outer-container .columns-container .form-dynamic-container .slot-container::-webkit-scrollbar{width:var(--spacing-04, 0.25rem);height:var(--spacing-04, 0.25rem)}:host .outer-container .columns-container .form-dynamic-container .slot-container::-webkit-scrollbar-track{background-color:transparent;border-radius:var(--border-radius-04, 0.25rem)}:host .outer-container .columns-container .form-dynamic-container .slot-container::-webkit-scrollbar-thumb{background-color:transparent;border-radius:var(--border-radius-04, 0.25rem)}:host .outer-container .columns-container yoo-device{z-index:1}:host .outer-container .content{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;overflow:hidden}:host .outer-container slot[name=footer]{display:block;height:3.5rem}:host .outer-container .icons-container{z-index:2;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .outer-container .icons-container>*+*{margin-left:var(--spacing-16, 1rem)}:host .outer-container .icons-container .icon-container{display:-ms-flexbox;display:flex;cursor:pointer}:host(.iphone-x) .form-dynamic-container{position:absolute;top:2rem;right:0;bottom:0;left:0}:host(:not(.iphone-x)) .form-dynamic-container{position:absolute;top:0;right:0;bottom:0;left:0}:host(.panel) .outer-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:start;justify-content:flex-start;width:21.875rem;padding:0 var(--spacing-24, 1.5rem);background:var(--light, #ffffff);border-left:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1);-webkit-transition:0.3s;transition:0.3s}:host(.panel) .outer-container .heading{display:-ms-flexbox;display:flex;-ms-flex-align:fle;align-items:fle;-ms-flex-item-align:end;align-self:flex-end;-ms-flex-pack:justify;justify-content:space-between;width:100%;height:2.75rem;margin:0 0 var(--spacing-16, 1rem);padding:0;font-weight:var(--font-weight-700, 700);font-size:var(--font-size-18, 1.125rem);white-space:nowrap;border-bottom:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1);-webkit-transition:0.5s;transition:0.5s}:host(.panel) .outer-container .heading .title{position:unset}:host(.panel) .outer-container .heading .icons-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host([hidden]) yoo-device{display:none}:host([hidden]) .outer-container{width:0;min-width:3rem !important;padding:0}:host([hidden]) .outer-container .heading{-ms-flex-pack:center;justify-content:center}";

package/dist/design-system/yoo-form-creator-overlay.entry.js

@@ -1,8 +1,8 @@
 import { r as registerInstance, i as createEvent, h, e as Host } from './index-54cb3c5d.js';
-import './index-15ad2410.js';
-import { U as isNullOrUndefined, t as translate } from './overlays-6764f2a0.js';
-import './lodash-bf91c7a4.js';
-import './index-785487ed.js';
+import './index-4cc245a0.js';
+import { U as isNullOrUndefined, t as translate } from './overlays-733d0adb.js';
+import './lodash-9e6ab91e.js';
+import './index-58b8d008.js';
 import './_commonjsHelpers-f4d11124.js';
 
 const formCreatorOverlayCss = ":host .overlay{position:absolute;top:3.0625rem;right:0;bottom:0;left:25.1875rem;z-index:2;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:center;justify-content:center}:host .overlay .overlay-background{z-index:-1;background:var(--dark, #000000);opacity:0.8;position:absolute;top:0;right:0;bottom:0;left:0}:host .overlay.only-live-preview{left:auto;width:29rem}:host .overlay.only-live-preview.live-preview-hidden{width:3rem}:host .overlay.left-panel-only{left:0;width:25rem}:host .overlay .overlay-title{display:-ms-flexbox;display:flex;margin-bottom:var(--spacing-24, 1.5rem);margin-left:var(--spacing-80, 5rem);color:var(--light, #ffffff);font-size:var(--font-size-18, 1.125rem)}:host .overlay .overlay-title yoo-icon{margin-right:var(--spacing-08, 0.5rem)}:host .overlay .overlay-title.sub{margin-bottom:var(--spacing-16, 1rem);font-weight:var(--font-weight-300, 300)}:host .overlay yoo-form-creator-block-simple{margin-left:var(--spacing-80, 5rem)}:host .header-overlay{position:absolute;top:0;right:0;bottom:auto;left:0;height:3.0625rem;background:var(--dark, #000000);opacity:0.8}";

package/dist/design-system/yoo-form-creator-page-card-list.entry.js

@@ -1,10 +1,10 @@
 import { r as registerInstance, i as createEvent, h, e as Host, g as getElement } from './index-54cb3c5d.js';
-import './index-15ad2410.js';
+import './index-4cc245a0.js';
 import { S as Sortable } from './sortable.esm-f788d1ca.js';
-import { I as setRestrictionAndFieldConditions, Q as getWorkflowFieldState } from './index-76dfcb25.js';
-import { U as isNullOrUndefined, V as translateMulti, t as translate } from './overlays-6764f2a0.js';
-import './lodash-bf91c7a4.js';
-import './index-785487ed.js';
+import { I as setRestrictionAndFieldConditions, Q as getWorkflowFieldState } from './index-e4f17371.js';
+import { U as isNullOrUndefined, V as translateMulti, t as translate } from './overlays-733d0adb.js';
+import './lodash-9e6ab91e.js';
+import './index-58b8d008.js';
 import './annotations-helpers-628a8ae3.js';
 import './_commonjsHelpers-f4d11124.js';
 

package/dist/design-system/yoo-form-creator-page-card.entry.js

@@ -1,9 +1,9 @@
 import { r as registerInstance, i as createEvent, h } from './index-54cb3c5d.js';
-import './index-15ad2410.js';
-import { S as setRestrictionAndConditionActions } from './index-76dfcb25.js';
-import { t as translate } from './overlays-6764f2a0.js';
-import './lodash-bf91c7a4.js';
-import './index-785487ed.js';
+import './index-4cc245a0.js';
+import { S as setRestrictionAndConditionActions } from './index-e4f17371.js';
+import { t as translate } from './overlays-733d0adb.js';
+import './lodash-9e6ab91e.js';
+import './index-58b8d008.js';
 import './annotations-helpers-628a8ae3.js';
 import './_commonjsHelpers-f4d11124.js';
 

package/dist/design-system/yoo-form-creator-score-expandable.entry.js

@@ -1,9 +1,9 @@
 import { r as registerInstance, i as createEvent, h, e as Host, g as getElement } from './index-54cb3c5d.js';
-import { R as FORM_CREATOR_OPTIONS_ALL, S as ScoringCategory, A as ALL_MOBILE_FORM_FIELDS, c as FormFieldType } from './index-785487ed.js';
-import './index-15ad2410.js';
-import { K as starRatingMaxDefault } from './index-76dfcb25.js';
-import { U as isNullOrUndefined, aD as gsapTo, d0 as Power3, aF as gsapFromTo, d1 as findMaxScore, V as translateMulti, t as translate, d2 as isNotApplicable } from './overlays-6764f2a0.js';
-import './lodash-bf91c7a4.js';
+import { R as FORM_CREATOR_OPTIONS_ALL, S as ScoringCategory, A as ALL_MOBILE_FORM_FIELDS, c as FormFieldType } from './index-58b8d008.js';
+import './index-4cc245a0.js';
+import { K as starRatingMaxDefault } from './index-e4f17371.js';
+import { U as isNullOrUndefined, aD as gsapTo, d0 as Power3, aF as gsapFromTo, d1 as findMaxScore, V as translateMulti, t as translate, d2 as isNotApplicable } from './overlays-733d0adb.js';
+import './lodash-9e6ab91e.js';
 import './annotations-helpers-628a8ae3.js';
 import './_commonjsHelpers-f4d11124.js';
 

package/dist/design-system/yoo-form-creator-scoring-card-list.entry.js

@@ -1,9 +1,9 @@
 import { r as registerInstance, i as createEvent, h, e as Host } from './index-54cb3c5d.js';
-import './index-15ad2410.js';
+import './index-4cc245a0.js';
 import { S as Sortable } from './sortable.esm-f788d1ca.js';
-import { t as translate, V as translateMulti } from './overlays-6764f2a0.js';
-import './lodash-bf91c7a4.js';
-import './index-785487ed.js';
+import { t as translate, V as translateMulti } from './overlays-733d0adb.js';
+import './lodash-9e6ab91e.js';
+import './index-58b8d008.js';
 import './_commonjsHelpers-f4d11124.js';
 
 const formCreatorScoringCardListCss = ":host p{margin:0;color:var(--stable, #adadad)}:host yoo-form-creator-scoring-card{cursor:pointer}:host .scoring-container{display:grid;grid-template-columns:repeat(3, 7.5rem);gap:var(--spacing-08, 0.5rem)}:host .sortable-ghost{border:var(--border-width-02, 0.125rem) dashed var(--stable-alt, #d0d0d0);border-radius:var(--border-radius-04, 0.25rem)}:host .sortable-ghost yoo-form-creator-scoring-card{visibility:hidden}";

package/dist/design-system/yoo-form-creator-scoring-card.entry.js

@@ -1,8 +1,8 @@
 import { r as registerInstance, h } from './index-54cb3c5d.js';
-import './index-15ad2410.js';
-import { t as translate } from './overlays-6764f2a0.js';
-import './lodash-bf91c7a4.js';
-import './index-785487ed.js';
+import './index-4cc245a0.js';
+import { t as translate } from './overlays-733d0adb.js';
+import './lodash-9e6ab91e.js';
+import './index-58b8d008.js';
 import './_commonjsHelpers-f4d11124.js';
 
 const formCreatorScoringCardCss = ":host{display:block}:host yoo-form-creator-card{--description-line-clamp:2;--description-min-height:2.25rem}:host yoo-icon:not([name=more]){margin-right:var(--spacing-08, 0.5rem)}:host yoo-icon[name=variable]{--inner-width:0.5rem;--inner-height:0.5rem;-ms-flex-negative:0;flex-shrink:0;border-radius:var(--border-radius-04, 0.25rem)}:host yoo-tooltip{margin-left:var(--spacing-16, 1rem)}:host .fields,:host .points,:host .start{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;overflow:hidden}:host .points{margin-top:var(--spacing-16, 1rem)}:host .fields{-ms-flex-pack:justify;justify-content:space-between}:host .truncated{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host([selected]) yoo-icon[name=variable]{background:var(--app-color, #5a30f4)}:host(:not([selected])) yoo-icon[name=variable]{background:var(--warning, #ed6e33)}";

package/dist/design-system/yoo-form-creator-scoring-quick-setup.entry.js

@@ -1,8 +1,8 @@
 import { h, r as registerInstance, i as createEvent, e as Host } from './index-54cb3c5d.js';
-import './index-15ad2410.js';
-import { t as translate } from './overlays-6764f2a0.js';
-import './lodash-bf91c7a4.js';
-import './index-785487ed.js';
+import './index-4cc245a0.js';
+import { t as translate } from './overlays-733d0adb.js';
+import './lodash-9e6ab91e.js';
+import './index-58b8d008.js';
 import './_commonjsHelpers-f4d11124.js';
 
 const EmptyState = () => [h("yoo-empty-state", null), h("p", null, translate('NOQUICKSETUP'))];

package/dist/design-system/yoo-form-creator-translate-dialog.entry.js

@@ -1,9 +1,9 @@
 import { r as registerInstance, i as createEvent, h, e as Host, g as getElement } from './index-54cb3c5d.js';
-import { T as TRANSLATABLE_FORM_FIELD_ATTRIBUTES, c as FormFieldType, C as COMPLEX_ARRAY_TRANSLATABLE_FORM_FIELD_ATTRIBUTES, e as SINGLE_ARRAY_TRANSLATABLE_FORM_FIELD_ATTRIBUTES } from './index-785487ed.js';
-import './index-15ad2410.js';
-import { n as compact, c as cloneDeep, t as isObject, w as isEmpty, q as isString } from './lodash-bf91c7a4.js';
-import { R as updateLocaleTranslation } from './index-76dfcb25.js';
-import { r as debounce, aR as formatSlides, an as getCurrentLanguage, dl as getLocaleTranslation, dm as isHTML, V as translateMulti, t as translate, aM as findField, K as closeModal, c$ as getTranslateLanguageKeys } from './overlays-6764f2a0.js';
+import { T as TRANSLATABLE_FORM_FIELD_ATTRIBUTES, c as FormFieldType, C as COMPLEX_ARRAY_TRANSLATABLE_FORM_FIELD_ATTRIBUTES, e as SINGLE_ARRAY_TRANSLATABLE_FORM_FIELD_ATTRIBUTES } from './index-58b8d008.js';
+import './index-4cc245a0.js';
+import { n as compact, c as cloneDeep, t as isObject, w as isEmpty, q as isString } from './lodash-9e6ab91e.js';
+import { R as updateLocaleTranslation } from './index-e4f17371.js';
+import { r as debounce, aR as formatSlides, an as getCurrentLanguage, dl as getLocaleTranslation, dm as isHTML, V as translateMulti, t as translate, aM as findField, K as closeModal, c$ as getTranslateLanguageKeys } from './overlays-733d0adb.js';
 import './annotations-helpers-628a8ae3.js';
 import './_commonjsHelpers-f4d11124.js';
 

package/dist/design-system/yoo-form-creator-translate.entry.js

@@ -1,9 +1,9 @@
 import { r as registerInstance, i as createEvent, h, e as Host } from './index-54cb3c5d.js';
-import './index-15ad2410.js';
-import { c as cloneDeep, y as isEqual, _ as remove } from './lodash-bf91c7a4.js';
-import { L as resetKey, M as resetFieldTranslations, t as translateAll, N as isAlreadyTranslated, O as addRow } from './index-76dfcb25.js';
-import { aR as formatSlides, d3 as cleanUnusedTranslations, c$ as getTranslateLanguageKeys, aP as hasImageRecognitionFields, U as isNullOrUndefined, t as translate, ak as getLanguageKey, a7 as showAlert, K as closeModal, d4 as updateScoringWithTranslations, d5 as updateAuditWithTranslations, p as showModal } from './overlays-6764f2a0.js';
-import './index-785487ed.js';
+import './index-4cc245a0.js';
+import { c as cloneDeep, y as isEqual, _ as remove } from './lodash-9e6ab91e.js';
+import { L as resetKey, M as resetFieldTranslations, t as translateAll, N as isAlreadyTranslated, O as addRow } from './index-e4f17371.js';
+import { aR as formatSlides, d3 as cleanUnusedTranslations, c$ as getTranslateLanguageKeys, aP as hasImageRecognitionFields, U as isNullOrUndefined, t as translate, ak as getLanguageKey, a7 as showAlert, K as closeModal, d4 as updateScoringWithTranslations, d5 as updateAuditWithTranslations, p as showModal } from './overlays-733d0adb.js';
+import './index-58b8d008.js';
 import './annotations-helpers-628a8ae3.js';
 import './_commonjsHelpers-f4d11124.js';
 

package/dist/design-system/yoo-form-creator-workflow-side-selection.entry.js

@@ -1,10 +1,10 @@
 import { r as registerInstance, i as createEvent, h, e as Host, g as getElement } from './index-54cb3c5d.js';
-import './index-15ad2410.js';
-import { b as getAppContext } from './common-helpers-9eaafeae.js';
-import { P as onWorkflowStepClicked } from './index-76dfcb25.js';
-import { t as translate } from './overlays-6764f2a0.js';
-import './lodash-bf91c7a4.js';
-import './index-785487ed.js';
+import './index-4cc245a0.js';
+import { b as getAppContext } from './common-helpers-36ac7622.js';
+import { P as onWorkflowStepClicked } from './index-e4f17371.js';
+import { t as translate } from './overlays-733d0adb.js';
+import './lodash-9e6ab91e.js';
+import './index-58b8d008.js';
 import './annotations-helpers-628a8ae3.js';
 import './_commonjsHelpers-f4d11124.js';