@yoobic/yobi 8.3.1-8 → 8.3.2

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

@@ -1,11 +1,11 @@
-import { r as registerInstance, i as createEvent, f as forceUpdate, h, e as Host, g as getElement } from './index-becca019.js';
-import './index-abd62f7b.js';
+import { r as registerInstance, i as createEvent, f as forceUpdate, h, e as Host, g as getElement } from './index-b1ce6cd4.js';
+import './index-214cd526.js';
 import { a as createCommonjsModule, g as getDefaultExportFromCjs } from './_commonjsHelpers-f4d11124.js';
-import { s as setValidator, a as setValueAndValidateInput } from './form-input-helpers-76052552.js';
-import { K as getCssColor, a3 as getSession, ds as getColorSwatches, j as isNativeMobile, t as translate } from './overlays-d9ef0a1c.js';
-import './lodash-f6e59a8e.js';
+import { s as setValidator, a as setValueAndValidateInput } from './form-input-helpers-d0eac0dd.js';
+import { K as getCssColor, a3 as getSession, du as getColorSwatches, j as isNativeMobile, t as translate } from './overlays-670969b7.js';
+import './lodash-653c0bcd.js';
 import './index-eec8505b.js';
-import './common-helpers-4b9004c1.js';
+import './common-helpers-2339195f.js';
 
 var pickr_min = createCommonjsModule(function (module, exports) {
 /*! Pickr 1.8.2 MIT | https://github.com/Simonwep/pickr */

package/dist/design-system/yoo-form-color-picker.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, i as createEvent, h, e as Host } from './index-becca019.js';
-import './index-abd62f7b.js';
-import { K as getCssColor } from './overlays-d9ef0a1c.js';
-import './lodash-f6e59a8e.js';
+import { r as registerInstance, i as createEvent, h, e as Host } from './index-b1ce6cd4.js';
+import './index-214cd526.js';
+import { K as getCssColor } from './overlays-670969b7.js';
+import './lodash-653c0bcd.js';
 import './index-eec8505b.js';
 import './_commonjsHelpers-f4d11124.js';
 

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

@@ -1,8 +1,8 @@
-import { r as registerInstance, i as createEvent, h, e as Host } from './index-becca019.js';
+import { r as registerInstance, i as createEvent, h, e as Host } from './index-b1ce6cd4.js';
 import { A as ALL_MOBILE_FORM_FIELDS } from './index-eec8505b.js';
-import './index-abd62f7b.js';
-import { n as compact } from './lodash-f6e59a8e.js';
-import { aP as getUUID, t as translate } from './overlays-d9ef0a1c.js';
+import './index-214cd526.js';
+import { n as compact } from './lodash-653c0bcd.js';
+import { aQ as getUUID, t as translate } from './overlays-670969b7.js';
 import './_commonjsHelpers-f4d11124.js';
 
 const formConditionsCss = ":host{width:100%}:host .condition-list{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host .condition-list .row{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-column-gap:var(--spacing-16, 1rem);-moz-column-gap:var(--spacing-16, 1rem);column-gap:var(--spacing-16, 1rem);row-gap:var(--spacing-04, 0.25rem)}:host .condition-list .row .input-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:2.625rem}:host .condition-list .row .input-container yoo-form-input{width:100%}:host .condition-list .row .fields{width:8.5rem}:host .condition-list .row .operator{width:8.5rem}:host .condition-list .row .values{width:8.5rem}:host .condition-list .row .values .feedback-container{height:100%;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}:host .condition-list .row .values .feedback-container yoo-form-feedback{width:100%}:host .condition-list .row.footer{-ms-flex-pack:end;justify-content:flex-end}";

package/dist/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-becca019.js';
-import './index-abd62f7b.js';
-import { A as isEqual, S as shuffle, T as difference } from './lodash-f6e59a8e.js';
-import { s as showWarningAlert } from './draggable-tags-helpers-981d15a0.js';
-import { a as setValueAndValidateInput } from './form-input-helpers-76052552.js';
-import { aP as getUUID, aR as gsapTo, aQ as Draggable, Z as translateMulti, aU as isImageUrl } from './overlays-d9ef0a1c.js';
+import { r as registerInstance, i as createEvent, h, e as Host, g as getElement } from './index-b1ce6cd4.js';
+import './index-214cd526.js';
+import { A as isEqual, T as shuffle, U as difference } from './lodash-653c0bcd.js';
+import { s as showWarningBanner } from './draggable-tags-helpers-379028ae.js';
+import { a as setValueAndValidateInput } from './form-input-helpers-d0eac0dd.js';
+import { aQ as getUUID, aS as gsapTo, aR as Draggable, Z as translateMulti, aV as isImageUrl } from './overlays-670969b7.js';
 import './index-eec8505b.js';
-import './common-helpers-4b9004c1.js';
+import './common-helpers-2339195f.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: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 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 .draggable{z-index:1}:host #overlay{background-color:inherit;border-radius:inherit;opacity:0.6}";
 
 const YooFormConnectComponent = class {
   constructor(hostRef) {
@@ -34,20 +34,16 @@ const YooFormConnectComponent = class {
      * true if component's parent slide is visible within a `yoo-form-dynamic`
      */
     this.isVisible = false;
-    this.colors = ['warning', 'accent', 'app-color', 'info', 'energized'];
   }
   async onValuesChanged() {
     var _a;
-    showWarningAlert(this.host, ((_a = this.values) === null || _a === void 0 ? void 0 : _a.length) > 1 && !this.isGamePairable, 'NOTALLPAIREDVALUES');
+    showWarningBanner(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);
-  }
   onValueChanged() {
     if (!isEqual(this.value, this.userAnswers)) {
       this.connectItems();
-      this.validateUserAnswers(this.value);
+      this.validate();
     }
   }
   initAnswerChanged() {
@@ -70,14 +66,17 @@ const YooFormConnectComponent = class {
   get connectableElements() {
     return Array.from(this.host.shadowRoot.querySelectorAll('.connectable') || []);
   }
+  validate() {
+    var _a;
+    this.validity = !this.required || (!((_a = this.value) === null || _a === void 0 ? void 0 : _a.reduce((acc, v) => acc + v.filter(i => !i).length, 0)));
+    this.validityChanged.emit(this.validity);
+    return this.validity;
+  }
   componentWillLoad() {
     this.prepareGame();
   }
   componentWillUpdate() {
-    var _a;
-    if (!((_a = this.draggables) === null || _a === void 0 ? void 0 : _a.find(d => d === null || d === void 0 ? void 0 : d.draggableInstance))) {
-      this.initGame();
-    }
+    this.initGame();
   }
   componentDidLoad() {
     this.initGame();
@@ -88,19 +87,19 @@ const YooFormConnectComponent = class {
     this.shuffleData();
   }
   async initGame() {
-    await this.scrollToRevealGame();
-    this.setDraggableObserver();
-    this.initDraggables();
-  }
-  initDraggables() {
-    var _a;
-    (_a = this.draggableElements) === null || _a === void 0 ? void 0 : _a.forEach(e => this.initDraggableActions(e));
+    var _a, _b;
+    if (!((_a = this.draggables) === null || _a === void 0 ? void 0 : _a.find(({ draggableInstance }) => draggableInstance))) {
+      await this.scrollToRevealGame();
+      this.setDraggableObserver();
+      (_b = this.draggableElements) === null || _b === void 0 ? void 0 : _b.forEach(e => this.initDraggableActions(e));
+      this.autoCompleteLastConnection();
+    }
   }
   async scrollToRevealGame() {
     var _a;
     const GAP_PADDING = 8;
     const scrollElement = this.host.closest('yoo-ion-scroll');
-    if (scrollElement && ((_a = this.values) === null || _a === void 0 ? void 0 : _a.length) === 2) {
+    if (scrollElement && ((_a = this.values) === null || _a === void 0 ? void 0 : _a.length) === 2 && scrollElement.scrollHeight > scrollElement.clientHeight) {
       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'));
@@ -109,7 +108,7 @@ const YooFormConnectComponent = class {
           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`;
+          this.innerContainerElement.style.height = `${Math.min(formHeight, itemsHeight) - GAP_PADDING * 10}px`;
         }
       };
       await new Promise(resolve => {
@@ -137,7 +136,7 @@ const YooFormConnectComponent = class {
               }
             });
             this.getUserAnswers();
-            this.validateUserAnswers();
+            this.validate();
           }
           if (key === 'hit') {
             this.draggables.map(dr => {
@@ -155,13 +154,14 @@ const YooFormConnectComponent = class {
     this.shuffled && CONNECT_TYPES.forEach(type => this[`${type}s`] = shuffle(this[`${type}s`]));
   }
   prepareData() {
+    const colors = ['warning', 'accent', 'app-color', 'info', 'energized'];
     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: 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]
+          color: colors[i]
         })
       }))) || [];
     });
@@ -206,7 +206,7 @@ const YooFormConnectComponent = class {
         }
         if (tempConnectableElement && !currentDraggable.draggableInstance.hitTest(tempConnectableElement, overlapThreshold)) {
           ['color', 'background-color'].forEach(prop => tempConnectableElement.style.removeProperty(prop));
-          const connectableColor = (_b = (_a = this.draggables) === null || _a === void 0 ? void 0 : _a.find(d => (d === null || d === void 0 ? void 0 : d.connectableId) === tempConnectableElement.id)) === null || _b === void 0 ? void 0 : _b.color;
+          const connectableColor = (_b = (_a = this.draggables) === null || _a === void 0 ? void 0 : _a.find(({ connectableId }) => connectableId === tempConnectableElement.id)) === null || _b === void 0 ? void 0 : _b.color;
           if (connectableColor) {
             Object.assign(tempConnectableElement.style, {
               backgroundColor: `var(--${connectableColor}`,
@@ -221,27 +221,19 @@ const YooFormConnectComponent = class {
         await gsapTo(draggableElement, this.animated ? 0.25 : 0, { x: 0, y: 0 });
         if (tempConnectableElement) {
           currentDraggable.connectableId = tempConnectableElement.id;
-          tempConnectableElement.removeAttribute('hit');
+          [...this.connectableElements, ...this.draggableElements].forEach(e => e.removeAttribute('hit'));
           this.autoCompleteLastConnection();
         }
         tempConnectableElement = null;
         this.blockMoves.emit(false);
       };
-      const onClickElement = async () => {
-        var _a;
-        currentDraggable.hit = { value: !((_a = currentDraggable.hit) === null || _a === void 0 ? void 0 : _a.value) && !currentDraggable.connectableId };
-        delete currentDraggable.connectableId;
-        !currentDraggable.hit.value && this.autoEraseLastConnection();
-        this.getUserAnswers();
-        this.validateUserAnswers();
-      };
       if (!this.readonly && this.isGamePairable && draggableElement) {
         currentDraggable.draggableInstance = new Draggable(draggableElement, {
+          zIndexBoost: false,
           autoScroll: 1,
           bound: this.innerContainerElement,
           onDragStart: onDragStartElement,
           onDrag: onDragElement,
-          onClick: onClickElement,
           onRelease: onReleaseElement
         });
       }
@@ -249,25 +241,15 @@ const YooFormConnectComponent = class {
   }
   getUserAnswers() {
     this.userAnswers = this.draggables.map(d => [d.value, d.connectableId ? this.connectables.find(c => c.id === d.connectableId).value : '']);
-  }
-  validateUserAnswers(userAnswers = this.userAnswers) {
-    this.validity = !(userAnswers === null || userAnswers === void 0 ? void 0 : userAnswers.reduce((acc, v) => acc + v.filter(i => !i).length, 0));
-    this.value = userAnswers;
+    this.value = this.userAnswers;
     setValueAndValidateInput(this.value, this);
   }
-  autoEraseLastConnection() {
-    const connectedDraggables = this.draggables.filter(d => d.connectableId);
-    if ((connectedDraggables === null || connectedDraggables === void 0 ? void 0 : connectedDraggables.length) === 1) {
-      const lastDraggable = connectedDraggables[0];
-      delete lastDraggable.connectableId;
-    }
-  }
   autoCompleteLastConnection() {
     var _a;
     const freeDraggables = this.draggables.filter(d => !d.connectableId);
     if ((freeDraggables === null || freeDraggables === void 0 ? void 0 : freeDraggables.length) === 1) {
       const lastDraggable = freeDraggables[0];
-      const lastConectableId = (_a = difference(this.connectables.map(c => c.id), this.draggables.map(d => d.connectableId))) === null || _a === void 0 ? void 0 : _a[0];
+      const lastConectableId = (_a = difference(this.connectables.map(({ id }) => id), this.draggables.map(({ connectableId }) => connectableId))) === null || _a === void 0 ? void 0 : _a[0];
       lastDraggable.connectableId = lastConectableId;
     }
   }
@@ -280,13 +262,6 @@ const YooFormConnectComponent = class {
       return isTruncabled ? translatedValue.substr(0, MAX_LENGTH).concat('...') : translatedValue;
     }
   }
-  onConnectableClick(connectable) {
-    const hitDraggable = this.draggables.find(d => { var _a; return (_a = d.hit) === null || _a === void 0 ? void 0 : _a.value; });
-    if (hitDraggable && connectable) {
-      hitDraggable.connectableId = connectable.id;
-      this.autoCompleteLastConnection();
-    }
-  }
   renderCorrectionIcon(value) {
     const getCouple = (values) => values === null || values === void 0 ? void 0 : values.find(v => v.includes(value));
     const isCorrect = isEqual(getCouple(this.value), getCouple(this.answer));
@@ -294,24 +269,41 @@ const YooFormConnectComponent = class {
   }
   renderContainer(name) {
     var _a;
-    return (h("section", { id: `${name}s` }, (_a = this[`${name}s`]) === null || _a === void 0 ? void 0 : _a.map((item) => {
-      var _a;
+    const tileType = `${name}s`;
+    const onConnectableClick = (connectable) => {
+      const hitDraggable = this.draggables.find(d => { var _a; return (_a = d.hit) === null || _a === void 0 ? void 0 : _a.value; });
+      if (hitDraggable && connectable) {
+        hitDraggable.connectableId = connectable.id;
+        this.autoCompleteLastConnection();
+      }
+    };
+    const onDraggableClick = (draggable) => {
+      var _a, _b;
+      const currentDraggable = (_a = this.draggables) === null || _a === void 0 ? void 0 : _a.find(({ id }) => id === draggable.id);
+      currentDraggable.hit = { value: !((_b = currentDraggable.hit) === null || _b === void 0 ? void 0 : _b.value) && !currentDraggable.connectableId };
+      delete currentDraggable.connectableId;
+      this.getUserAnswers();
+      this.validate();
+    };
+    return (h("section", { id: tileType }, (_a = this[tileType]) === null || _a === void 0 ? void 0 : _a.map((item) => {
       const isDraggable = name === 'draggable';
-      const { id, value, connectableId, color } = item || {};
+      const { id, value, connectableId, color, hit } = item || {};
       const isImage = value && isImageUrl(value);
-      const connectable = this.draggables.find(d => d.connectableId === id);
+      const connectable = this.draggables.find(({ connectableId }) => 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 };
-      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)));
+      const connectedAttributes = { style: { backgroundColor: `var(--${tileColor})`, color: 'var(--light)' }, connected: true };
+      const tileAttr = {
+        ...(isConnected && connectedAttributes), hit: !!(hit === null || hit === void 0 ? void 0 : hit.value) && isDraggable, type: isImage ? 'image' : 'text'
+      };
+      return !!value && h("div", { ...tileAttr, id: id, key: id, class: name, onClick: () => { isDraggable ? onDraggableClick(item) : 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" }));
+    return this.livePreview && !this.readonly && 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)));
+    return this.hasValues && h("main", { ref: (el) => this.innerContainerElement = el }, CONNECT_TYPES.map(type => this.renderContainer(type)));
   }
   render() {
     return h(Host, null, this.renderBanner(), this.renderMain());
@@ -319,7 +311,6 @@ const YooFormConnectComponent = class {
   get host() { return getElement(this); }
   static get watchers() { return {
     "values": ["onValuesChanged"],
-    "validity": ["onValidityChanged"],
     "value": ["onValueChanged"],
     "answer": ["initAnswerChanged"],
     "isVisible": ["onIsVisibleChanged"]

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-becca019.js';
+import { r as registerInstance, i as createEvent, h, e as Host, g as getElement } from './index-b1ce6cd4.js';
 import { V as FORM_CREATOR_OPTIONS_ALL, A as ALL_MOBILE_FORM_FIELDS, s as FormFieldCategory, q as FormCreatorOptions } from './index-eec8505b.js';
-import './index-abd62f7b.js';
-import { n as compact } from './lodash-f6e59a8e.js';
+import './index-214cd526.js';
+import { n as compact } from './lodash-653c0bcd.js';
 import { N as NON_CONDITION_CATEGORIES } from './index-aea0ac6c.js';
-import { l as setBlockSelection, S as setRestrictionAndConditionActions, T as filterSequentialFields, I as setRestrictionAndFieldConditions, J as setChildFields } from './index-f1aeea85.js';
-import { X as isNullOrUndefined, C as debounce, t as translate, aR as gsapTo, aS as gsapSet, dh as Power3, aT as gsapFromTo, Z as translateMulti } from './overlays-d9ef0a1c.js';
+import { l as setBlockSelection, S as setRestrictionAndConditionActions, T as filterSequentialFields, I as setRestrictionAndFieldConditions, J as setChildFields } from './index-dfebd1fb.js';
+import { X as isNullOrUndefined, C as debounce, t as translate, aS as gsapTo, aT as gsapSet, dj as Power3, aU as gsapFromTo, Z as translateMulti } from './overlays-670969b7.js';
 import './annotations-helpers-628a8ae3.js';
 import './_commonjsHelpers-f4d11124.js';
 
@@ -513,7 +513,7 @@ const YooFormCreatorBlockExpandableComponent = class {
     let conditionValues;
     switch (type) {
       case 'field':
-        conditionValues = condition.values ? condition.values : [condition.value];
+        conditionValues = condition.values ? condition.values : (condition.value ? [condition.value] : []);
         break;
       case 'tags':
         conditionValues = condition.tags;

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

@@ -1,9 +1,9 @@
-import { r as registerInstance, i as createEvent, h, e as Host, g as getElement } from './index-becca019.js';
-import './index-abd62f7b.js';
-import { g as getAppContext } from './common-helpers-4b9004c1.js';
+import { r as registerInstance, i as createEvent, h, e as Host, g as getElement } from './index-b1ce6cd4.js';
+import './index-214cd526.js';
+import { g as getAppContext } from './common-helpers-2339195f.js';
 import { f as fieldStateOptions } from './index-a7443ef7.js';
-import { Z as translateMulti, t as translate } from './overlays-d9ef0a1c.js';
-import './lodash-f6e59a8e.js';
+import { Z as translateMulti, t as translate } from './overlays-670969b7.js';
+import './lodash-653c0bcd.js';
 import './index-eec8505b.js';
 import './_commonjsHelpers-f4d11124.js';
 

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, e as Host } from './index-becca019.js';
+import { r as registerInstance, h, e as Host } from './index-b1ce6cd4.js';
 
 const formCreatorCardCss = ":host{--description-line-clamp:1;--description-min-height:initial;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;height:100%;font-size:var(--font-size-12, 0.75rem);background:var(--light, #ffffff);border-radius:var(--border-radius-08, 0.5rem);-webkit-box-shadow:var(--shadow-02, 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.1));box-shadow:var(--shadow-02, 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.1))}:host ::slotted([slot=footer]){border-top-width:var(--border-width-01, 0.0625rem);border-top-style:solid}:host main,:host ::slotted([slot=footer]){padding:var(--spacing-08, 0.5rem)}:host h1,:host p{margin:0;font-size:inherit;text-align:left}:host main,:host p{-ms-flex:1;flex:1}:host main{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host h1{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host p{overflow:hidden;min-height:var(--description-min-height)}@supports (display: -webkit-box){:host p{display:-webkit-box;-webkit-line-clamp:var(--description-line-clamp);-webkit-box-orient:vertical}}:host([selected]){color:var(--app-color, #5a30f4);background:var(--app-color-20, rgba(90, 48, 244, 0.2));border:var(--border-width-01, 0.0625rem) solid var(--app-color, #5a30f4)}:host([selected]) ::slotted([slot=footer]){border-top-color:var(--app-color, #5a30f4)}:host(:not([selected])) ::slotted([slot=footer]){border-top-color:var(--stable-light, #f1f1f1)}:host(:not([selected])) p{color:var(--stable, #adadad)}";
 

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

@@ -1,10 +1,10 @@
-import { r as registerInstance, i as createEvent, h, e as Host, g as getElement } from './index-becca019.js';
+import { r as registerInstance, i as createEvent, h, e as Host, g as getElement } from './index-b1ce6cd4.js';
 import { A as ALL_MOBILE_FORM_FIELDS } from './index-eec8505b.js';
-import './index-abd62f7b.js';
+import './index-214cd526.js';
 import { f as feedbackValues } from './index-2319a076.js';
-import { l as setBlockSelection, U as setPageSelection } from './index-f1aeea85.js';
-import { t as translate, X as isNullOrUndefined, Z as translateMulti } from './overlays-d9ef0a1c.js';
-import './lodash-f6e59a8e.js';
+import { l as setBlockSelection, U as setPageSelection } from './index-dfebd1fb.js';
+import { t as translate, X as isNullOrUndefined, Z as translateMulti } from './overlays-670969b7.js';
+import './lodash-653c0bcd.js';
 import './annotations-helpers-628a8ae3.js';
 import './_commonjsHelpers-f4d11124.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-becca019.js';
+import { r as registerInstance, i as createEvent, h, g as getElement } from './index-b1ce6cd4.js';
 import { s as FormFieldCategory, c as FormFieldType } from './index-eec8505b.js';
-import './index-abd62f7b.js';
+import './index-214cd526.js';
 import { a as gridstackDdNative } from './gridstack-dd-native-d6cac184.js';
-import { c as cloneDeep, a1 as flatten } from './lodash-f6e59a8e.js';
+import { c as cloneDeep, a1 as flatten } from './lodash-653c0bcd.js';
 import { A as ARROW_PAIR } from './index-aea0ac6c.js';
-import { t as translate } from './overlays-d9ef0a1c.js';
+import { t as translate } from './overlays-670969b7.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-becca019.js';
+import { r as registerInstance, i as createEvent, h, e as Host, g as getElement } from './index-b1ce6cd4.js';
 import { q as FormCreatorOptions } from './index-eec8505b.js';
-import './index-abd62f7b.js';
-import { g as getAppContext } from './common-helpers-4b9004c1.js';
-import { t as translate, Z as translateMulti } from './overlays-d9ef0a1c.js';
-import './lodash-f6e59a8e.js';
+import './index-214cd526.js';
+import { g as getAppContext } from './common-helpers-2339195f.js';
+import { t as translate, Z as translateMulti } from './overlays-670969b7.js';
+import './lodash-653c0bcd.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,12 +1,12 @@
-import { r as registerInstance, i as createEvent, f as forceUpdate, h, e as Host, g as getElement } from './index-becca019.js';
+import { r as registerInstance, i as createEvent, f as forceUpdate, h, e as Host, g as getElement } from './index-b1ce6cd4.js';
 import { p as devices } from './index-eec8505b.js';
-import './index-abd62f7b.js';
-import { g as getAppContext } from './common-helpers-4b9004c1.js';
-import { dg as getTranslateLanguageKeys, t as translate, Z as translateMulti, d5 as replaceSVGColors } from './overlays-d9ef0a1c.js';
-import './lodash-f6e59a8e.js';
+import './index-214cd526.js';
+import { g as getAppContext } from './common-helpers-2339195f.js';
+import { di as getTranslateLanguageKeys, t as translate, Z as translateMulti, d7 as replaceSVGColors } from './overlays-670969b7.js';
+import './lodash-653c0bcd.js';
 import './_commonjsHelpers-f4d11124.js';
 
-const formCreatorLivePreviewCss = ":host{display:block;height:100%}:host h1,:host p{margin:0}:host yoo-navbar{--bottom-shadow:0}:host yoo-navbar:not(.device-preview){--top-container-padding:0;--center-padding: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{position:absolute;top:0;right:0;bottom:0;left:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}: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(.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}";
+const formCreatorLivePreviewCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%}:host h1,:host p{margin:0}:host yoo-navbar.device-preview,:host yoo-navbar.top-navbar{--bottom-shadow:0}:host yoo-navbar.no-heading{--top-container-min-height:auto}:host yoo-navbar.top-navbar{--top-container-padding:0;--center-padding:0}:host .outer-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:100%;overflow:hidden;background:var(--light, #ffffff)}:host .outer-container.not-closable{-ms-flex:1;flex:1;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{position:absolute;top:0;right:0;bottom:0;left:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}: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(.panel)>.outer-container{padding-top:var(--spacing-16, 1rem);padding-bottom:var(--spacing-16, 1rem)}:host(.panel) .outer-container{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:start;justify-content:flex-start;width:21.875rem;padding-right:var(--spacing-24, 1.5rem);padding-left: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}";
 
 const YooFormCreatorLivePreviewComponent = class {
   constructor(hostRef) {
@@ -54,7 +54,7 @@ const YooFormCreatorLivePreviewComponent = class {
   renderHeader() {
     var _a;
     return [
-      h("yoo-header", null, h("yoo-navbar", null, h("div", { class: { 'outer-container': true, 'not-closable': !this.closable } }, !this.hideHeading && h("div", { class: "heading" }, this.mode === 'fullscreen' && this.renderFullscreenHeader(), this.mode === 'panel' && this.renderPanelHeader()), ((_a = this.availableLanguages) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.renderLanguageSelector(), this.showDevices && this.renderSubheader())))
+      h("yoo-header", { class: "secondary" }, h("yoo-navbar", { class: { 'top-navbar': true, 'no-heading': this.hideHeading } }, h("div", { class: { 'outer-container': true, 'not-closable': !this.closable } }, !this.hideHeading && h("div", { class: "heading" }, this.mode === 'fullscreen' && this.renderFullscreenHeader(), this.mode === 'panel' && this.renderPanelHeader()), ((_a = this.availableLanguages) === null || _a === void 0 ? void 0 : _a.length) > 0 && !this.hidden && this.renderLanguageSelector(), this.showDevices && this.renderSubheader())))
     ];
   }
   renderFullscreenHeader() {
@@ -77,7 +77,7 @@ const YooFormCreatorLivePreviewComponent = class {
     return (h("div", { class: "columns-container", style: hasDescription ? { gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', margin: 'var(--spacing-24)' } : undefined }, hasDescription && h("div", { class: "description" }, this.missionDescriptionTitle && h("h1", { innerHTML: translateMulti(this.missionDescriptionTitle) }), this.missionDescriptionText && h("p", { innerHTML: translateMulti(this.missionDescriptionText) })), h("div", { class: "content" }, h("yoo-device", { class: "mobile app-creator-device", deviceEntry: this.selectedDevice, scaledContainerSelector: ".columns-container", resizeOnUpdate: this.mode === 'fullscreen' }, h("div", { class: "form-dynamic-container" }, this.missionDescriptionTitle && (h("yoo-header", null, h("yoo-navbar", { class: "device-preview" }, h("yoo-truncate", null, translateMulti(this.missionDescriptionTitle))))), h("div", { class: "slot-container" }, h("slot", { name: "livePreview" })))))));
   }
   render() {
-    return (h(Host, { class: { panel: this.mode === 'panel', ...getAppContext(this.host) } }, !this.hideHeading && this.renderHeader(), h("div", { class: { 'outer-container': true, 'not-closable': !this.closable } }, this.renderContent(), !!this.logo && (h("div", { class: "image-container" }, h("yoo-img", { src: this.logo, cloudinaryOptions: { pad: true }, svgOptions: { afterLoad: (_, svgString) => replaceSVGColors(svgString) } }))), this.showDescriptionAndFooter && h("slot", { name: "footer" }))));
+    return (h(Host, { class: { panel: this.mode === 'panel', ...getAppContext(this.host) } }, this.renderHeader(), h("div", { class: { 'outer-container': true, 'not-closable': !this.closable } }, this.renderContent(), !!this.logo && (h("div", { class: "image-container" }, h("yoo-img", { src: this.logo, cloudinaryOptions: { pad: true }, svgOptions: { afterLoad: (_, svgString) => replaceSVGColors(svgString) } }))), this.showDescriptionAndFooter && h("slot", { name: "footer" }))));
   }
   get host() { return getElement(this); }
 };

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

@@ -1,11 +1,11 @@
-import { r as registerInstance, i as createEvent, h, e as Host } from './index-becca019.js';
-import './index-abd62f7b.js';
-import { X as isNullOrUndefined, t as translate } from './overlays-d9ef0a1c.js';
-import './lodash-f6e59a8e.js';
+import { r as registerInstance, i as createEvent, h, e as Host } from './index-b1ce6cd4.js';
+import './index-214cd526.js';
+import { X as isNullOrUndefined, t as translate } from './overlays-670969b7.js';
+import './lodash-653c0bcd.js';
 import './index-eec8505b.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}";
+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;margin-top:-1px;margin-left:-2px;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:3rem;margin-left:25.05rem;background:var(--dark, #000000);opacity:0.8}";
 
 const YooFormCreatorOverlayComponent = class {
   constructor(hostRef) {

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

@@ -1,9 +1,9 @@
-import { r as registerInstance, i as createEvent, h, e as Host, g as getElement } from './index-becca019.js';
-import './index-abd62f7b.js';
+import { r as registerInstance, i as createEvent, h, e as Host, g as getElement } from './index-b1ce6cd4.js';
+import './index-214cd526.js';
 import { S as Sortable } from './sortable.esm-f788d1ca.js';
-import { I as setRestrictionAndFieldConditions, Q as getWorkflowFieldState } from './index-f1aeea85.js';
-import { X as isNullOrUndefined, Z as translateMulti, t as translate } from './overlays-d9ef0a1c.js';
-import './lodash-f6e59a8e.js';
+import { I as setRestrictionAndFieldConditions, Q as getWorkflowFieldState } from './index-dfebd1fb.js';
+import { X as isNullOrUndefined, Z as translateMulti, t as translate } from './overlays-670969b7.js';
+import './lodash-653c0bcd.js';
 import './index-eec8505b.js';
 import './annotations-helpers-628a8ae3.js';
 import './_commonjsHelpers-f4d11124.js';

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

@@ -1,8 +1,8 @@
-import { r as registerInstance, i as createEvent, h } from './index-becca019.js';
-import './index-abd62f7b.js';
-import { S as setRestrictionAndConditionActions } from './index-f1aeea85.js';
-import { t as translate } from './overlays-d9ef0a1c.js';
-import './lodash-f6e59a8e.js';
+import { r as registerInstance, i as createEvent, h } from './index-b1ce6cd4.js';
+import './index-214cd526.js';
+import { S as setRestrictionAndConditionActions } from './index-dfebd1fb.js';
+import { t as translate } from './overlays-670969b7.js';
+import './lodash-653c0bcd.js';
 import './index-eec8505b.js';
 import './annotations-helpers-628a8ae3.js';
 import './_commonjsHelpers-f4d11124.js';

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, e as Host } from './index-becca019.js';
+import { r as registerInstance, h, e as Host } from './index-b1ce6cd4.js';
 import { c as conditionBlocksConfig } from './form-field.instance-9dc4d638.js';
 
 const YooFormCreatorRestrictionSelectorComponent = class {

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-becca019.js';
+import { r as registerInstance, i as createEvent, h, e as Host, g as getElement } from './index-b1ce6cd4.js';
 import { V as FORM_CREATOR_OPTIONS_ALL, S as ScoringCategory, A as ALL_MOBILE_FORM_FIELDS, c as FormFieldType } from './index-eec8505b.js';
-import './index-abd62f7b.js';
-import { K as starRatingMaxDefault } from './index-f1aeea85.js';
-import { X as isNullOrUndefined, aR as gsapTo, dh as Power3, aT as gsapFromTo, di as findMaxScore, Z as translateMulti, t as translate, dj as isNotApplicable } from './overlays-d9ef0a1c.js';
-import './lodash-f6e59a8e.js';
+import './index-214cd526.js';
+import { K as starRatingMaxDefault } from './index-dfebd1fb.js';
+import { X as isNullOrUndefined, aS as gsapTo, dj as Power3, aU as gsapFromTo, dk as findMaxScore, Z as translateMulti, t as translate, dl as isNotApplicable } from './overlays-670969b7.js';
+import './lodash-653c0bcd.js';
 import './annotations-helpers-628a8ae3.js';
 import './_commonjsHelpers-f4d11124.js';
 

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

@@ -1,8 +1,8 @@
-import { r as registerInstance, i as createEvent, h, e as Host } from './index-becca019.js';
-import './index-abd62f7b.js';
+import { r as registerInstance, i as createEvent, h, e as Host } from './index-b1ce6cd4.js';
+import './index-214cd526.js';
 import { S as Sortable } from './sortable.esm-f788d1ca.js';
-import { t as translate, Z as translateMulti } from './overlays-d9ef0a1c.js';
-import './lodash-f6e59a8e.js';
+import { t as translate, Z as translateMulti } from './overlays-670969b7.js';
+import './lodash-653c0bcd.js';
 import './index-eec8505b.js';
 import './_commonjsHelpers-f4d11124.js';