@yoobic/yobi 8.3.1-1 → 8.3.1-2

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

@@ -10,7 +10,7 @@ const overlays = require('./overlays-69c47931.js');
 require('./lodash-72d493b9.js');
 require('./_commonjsHelpers-94df2ea7.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{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: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 YooFormCreatorLivePreviewComponent = class {
   constructor(hostRef) {
@@ -55,6 +55,12 @@ const YooFormCreatorLivePreviewComponent = class {
   renderLanguageSelector() {
     return index.h("div", { class: "language-selector" }, index.h("yoo-form-autocomplete", { value: this.selectedLanguage, values: overlays.getTranslateLanguageKeys(this.availableLanguages), onInputChanged: (ev) => this.onLanguageChanged(ev), idOnly: true, entityType: "language", useTranslate: true, displayType: "card-list", forceHideSearch: true, iconPrefix: "feed", size: "medium" }));
   }
+  renderHeader() {
+    var _a;
+    return [
+      index.h("yoo-header", null, index.h("yoo-navbar", null, index.h("div", { class: { 'outer-container': true, 'not-closable': !this.closable } }, !this.hideHeading && index.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())))
+    ];
+  }
   renderFullscreenHeader() {
     return [
       index.h("div", { class: { title: true, 'align-left': !this.closable } }, overlays.translate(this.fullscreenHeading || 'LIVEPREVIEW')),
@@ -72,11 +78,10 @@ const YooFormCreatorLivePreviewComponent = class {
   }
   renderContent() {
     const hasDescription = this.showDescriptionAndFooter && (this.missionDescriptionTitle || this.missionDescriptionText);
-    return (index.h("div", { class: "columns-container", style: hasDescription ? { gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', margin: 'var(--spacing-24)' } : undefined }, hasDescription && index.h("div", { class: "description" }, this.missionDescriptionTitle && index.h("h1", { innerHTML: overlays.translateMulti(this.missionDescriptionTitle) }), this.missionDescriptionText && index.h("p", { innerHTML: overlays.translateMulti(this.missionDescriptionText) })), index.h("div", { class: "content" }, index.h("yoo-device", { class: "mobile app-creator-device", deviceEntry: this.selectedDevice, scaledContainerSelector: ".columns-container", resizeOnUpdate: this.mode === 'fullscreen' }, index.h("div", { class: "form-dynamic-container" }, this.missionDescriptionTitle && (index.h("yoo-header", null, index.h("yoo-navbar", null, index.h("yoo-truncate", null, overlays.translateMulti(this.missionDescriptionTitle))))), index.h("div", { class: "slot-container" }, index.h("slot", { name: "livePreview" })))))));
+    return (index.h("div", { class: "columns-container", style: hasDescription ? { gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', margin: 'var(--spacing-24)' } : undefined }, hasDescription && index.h("div", { class: "description" }, this.missionDescriptionTitle && index.h("h1", { innerHTML: overlays.translateMulti(this.missionDescriptionTitle) }), this.missionDescriptionText && index.h("p", { innerHTML: overlays.translateMulti(this.missionDescriptionText) })), index.h("div", { class: "content" }, index.h("yoo-device", { class: "mobile app-creator-device", deviceEntry: this.selectedDevice, scaledContainerSelector: ".columns-container", resizeOnUpdate: this.mode === 'fullscreen' }, index.h("div", { class: "form-dynamic-container" }, this.missionDescriptionTitle && (index.h("yoo-header", null, index.h("yoo-navbar", { class: "device-preview" }, index.h("yoo-truncate", null, overlays.translateMulti(this.missionDescriptionTitle))))), index.h("div", { class: "slot-container" }, index.h("slot", { name: "livePreview" })))))));
   }
   render() {
-    var _a;
-    return (index.h(index.Host, { class: { panel: this.mode === 'panel', ...commonHelpers.getAppContext(this.host) } }, index.h("div", { class: { 'outer-container': true, 'not-closable': !this.closable } }, !this.hideHeading && index.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(), this.renderContent(), !!this.logo && (index.h("div", { class: "image-container" }, index.h("yoo-img", { src: this.logo, cloudinaryOptions: { pad: true }, svgOptions: { afterLoad: (_, svgString) => overlays.replaceSVGColors(svgString) } }))), this.showDescriptionAndFooter && index.h("slot", { name: "footer" }))));
+    return (index.h(index.Host, { class: { panel: this.mode === 'panel', ...commonHelpers.getAppContext(this.host) } }, !this.hideHeading && this.renderHeader(), index.h("div", { class: { 'outer-container': true, 'not-closable': !this.closable } }, this.renderContent(), !!this.logo && (index.h("div", { class: "image-container" }, index.h("yoo-img", { src: this.logo, cloudinaryOptions: { pad: true }, svgOptions: { afterLoad: (_, svgString) => overlays.replaceSVGColors(svgString) } }))), this.showDescriptionAndFooter && index.h("slot", { name: "footer" }))));
   }
   get host() { return index.getElement(this); }
 };

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

@@ -3840,7 +3840,7 @@ const YooFormDynamicComponent = class {
       }
       case index.FormFieldType.selectimage: {
         const multiple = field.multiple;
-        const values = field.values || ((_m = field.opValues) === null || _m === void 0 ? void 0 : _m.find((opValue) => opValue));
+        const values = lodash.flatten((field === null || field === void 0 ? void 0 : field.complexSelectImageValues) || (field === null || field === void 0 ? void 0 : field.values) || ((_m = field === null || field === void 0 ? void 0 : field.opValues) === null || _m === void 0 ? void 0 : _m.find((opValue) => opValue || [])));
         TagType = 'yoo-form-choice-image';
         attrs = {
           ...attrs,

package/dist/cjs/yoo-form-phone-number.cjs.entry.js

@@ -4167,17 +4167,17 @@ var AsYouTypeState = /*#__PURE__*/function () {
     key: "setCallingCode",
     value: function setCallingCode(callingCode) {
       this.callingCode = callingCode;
-      return this.onCallingCodeChange(this.country, callingCode);
+      this.onCallingCodeChange(callingCode, this.country);
     }
   }, {
     key: "startInternationalNumber",
-    value: function startInternationalNumber() {
+    value: function startInternationalNumber(country, callingCode) {
       // Prepend the `+` to parsed input.
       this.international = true; // If a default country was set then reset it
       // because an explicitly international phone
       // number is being entered.
 
-      this.initCountryAndCallingCode();
+      this.initCountryAndCallingCode(country, callingCode);
     }
   }, {
     key: "appendDigits",
@@ -6037,7 +6037,10 @@ var AsYouTypeParser = /*#__PURE__*/function () {
         state.update({
           IDDPrefix: digits.slice(0, digits.length - numberWithoutIDD.length)
         });
-        this.startInternationalNumber(state);
+        this.startInternationalNumber(state, {
+          country: undefined,
+          callingCode: undefined
+        });
         return true;
       }
     }
@@ -6053,15 +6056,20 @@ var AsYouTypeParser = /*#__PURE__*/function () {
           state.update({
             missingPlus: true
           });
-          this.startInternationalNumber(state);
+          this.startInternationalNumber(state, {
+            country: state.country,
+            callingCode: newCallingCode
+          });
           return true;
         }
       }
     }
   }, {
     key: "startInternationalNumber",
-    value: function startInternationalNumber(state) {
-      state.startInternationalNumber(); // If a national (significant) number has been extracted before, reset it.
+    value: function startInternationalNumber(state, _ref3) {
+      var country = _ref3.country,
+          callingCode = _ref3.callingCode;
+      state.startInternationalNumber(country, callingCode); // If a national (significant) number has been extracted before, reset it.
 
       if (state.nationalSignificantNumber) {
         state.resetNationalSignificantNumber();
@@ -6288,7 +6296,7 @@ var AsYouType$1 = /*#__PURE__*/function () {
           // with the old versions.
           _this.country = country;
         },
-        onCallingCodeChange: function onCallingCodeChange(country, callingCode) {
+        onCallingCodeChange: function onCallingCodeChange(callingCode, country) {
           _this.metadata.selectNumberingPlan(country, callingCode);
 
           _this.formatter.reset(_this.metadata.numberingPlan, _this.state);

package/dist/cjs/yoo-form-stripe-card.cjs.entry.js

@@ -52,7 +52,7 @@ var registerWrapper = function registerWrapper(stripe, startTime) {
 
   stripe._registerWrapper({
     name: 'stripe-js',
-    version: "1.32.0",
+    version: "1.33.0",
     startTime: startTime
   });
 };

package/dist/collection/components/form/form-dynamic/form-dynamic.js

@@ -3710,7 +3710,7 @@ export class YooFormDynamicComponent {
       }
       case FormFieldType.selectimage: {
         const multiple = field.multiple;
-        const values = field.values || ((_m = field.opValues) === null || _m === void 0 ? void 0 : _m.find((opValue) => opValue));
+        const values = flatten((field === null || field === void 0 ? void 0 : field.complexSelectImageValues) || (field === null || field === void 0 ? void 0 : field.values) || ((_m = field === null || field === void 0 ? void 0 : field.opValues) === null || _m === void 0 ? void 0 : _m.find((opValue) => opValue || [])));
         TagType = 'yoo-form-choice-image';
         attrs = {
           ...attrs,

package/dist/collection/components/form-creator/form-creator-live-preview/form-creator-live-preview.css

@@ -208,6 +208,13 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :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: flex;
   flex-direction: column;

package/dist/collection/components/form-creator/form-creator-live-preview/form-creator-live-preview.js

@@ -38,6 +38,19 @@ export class YooFormCreatorLivePreviewComponent {
     return h("div", { class: "language-selector" },
       h("yoo-form-autocomplete", { value: this.selectedLanguage, values: getTranslateLanguageKeys(this.availableLanguages), onInputChanged: (ev) => this.onLanguageChanged(ev), idOnly: true, entityType: "language", useTranslate: true, displayType: "card-list", forceHideSearch: true, iconPrefix: "feed", size: "medium" }));
   }
+  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())))
+    ];
+  }
   renderFullscreenHeader() {
     return [
       h("div", { class: { title: true, 'align-left': !this.closable } }, translate(this.fullscreenHeading || 'LIVEPREVIEW')),
@@ -87,20 +100,15 @@ export class YooFormCreatorLivePreviewComponent {
         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", null,
+              h("yoo-navbar", { class: "device-preview" },
                 h("yoo-truncate", null, translateMulti(this.missionDescriptionTitle))))),
             h("div", { class: "slot-container" },
               h("slot", { name: "livePreview" })))))));
   }
   render() {
-    var _a;
     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.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(),
         this.renderContent(),
         !!this.logo && (h("div", { class: "image-container" },
           h("yoo-img", { src: this.logo, cloudinaryOptions: { pad: true }, svgOptions: { afterLoad: (_, svgString) => replaceSVGColors(svgString) } }))),

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

@@ -6,7 +6,7 @@ import { dg as getTranslateLanguageKeys, t as translate, Z as translateMulti, d5
 import './lodash-f6e59a8e.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{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: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 YooFormCreatorLivePreviewComponent = class {
   constructor(hostRef) {
@@ -51,6 +51,12 @@ const YooFormCreatorLivePreviewComponent = class {
   renderLanguageSelector() {
     return h("div", { class: "language-selector" }, h("yoo-form-autocomplete", { value: this.selectedLanguage, values: getTranslateLanguageKeys(this.availableLanguages), onInputChanged: (ev) => this.onLanguageChanged(ev), idOnly: true, entityType: "language", useTranslate: true, displayType: "card-list", forceHideSearch: true, iconPrefix: "feed", size: "medium" }));
   }
+  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())))
+    ];
+  }
   renderFullscreenHeader() {
     return [
       h("div", { class: { title: true, 'align-left': !this.closable } }, translate(this.fullscreenHeading || 'LIVEPREVIEW')),
@@ -68,11 +74,10 @@ const YooFormCreatorLivePreviewComponent = class {
   }
   renderContent() {
     const hasDescription = this.showDescriptionAndFooter && (this.missionDescriptionTitle || this.missionDescriptionText);
-    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", null, h("yoo-truncate", null, translateMulti(this.missionDescriptionTitle))))), h("div", { class: "slot-container" }, h("slot", { name: "livePreview" })))))));
+    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() {
-    var _a;
-    return (h(Host, { class: { panel: this.mode === 'panel', ...getAppContext(this.host) } }, 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(), 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.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" }))));
   }
   get host() { return getElement(this); }
 };

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

@@ -1,7 +1,7 @@
 import { r as registerInstance, i as createEvent, f as forceUpdate, h, e as Host, g as getElement } from './index-becca019.js';
 import { c as FormFieldType, n as IncentivePartType } from './index-e917d10e.js';
 import './index-32c18efc.js';
-import { a as isNumber, A as isEqual, i as isArray, c as cloneDeep, b as isFunction, v as isObject, s as assign, a7 as result, y as isEmpty, a8 as findLastIndex, o as orderBy, a2 as groupBy, k as keys, a6 as range, q as isString, Z as uniqBy, n as compact, a1 as flatten, C as get, J as pick } from './lodash-f6e59a8e.js';
+import { a as isNumber, A as isEqual, i as isArray, c as cloneDeep, b as isFunction, v as isObject, s as assign, a7 as result, y as isEmpty, a8 as findLastIndex, o as orderBy, a2 as groupBy, k as keys, a6 as range, q as isString, Z as uniqBy, a1 as flatten, n as compact, C as get, J as pick } from './lodash-f6e59a8e.js';
 import { b as getMissionStatusIconName } from './operation-helpers-cf026010.js';
 import { q as querySelectorDeep, c as querySelectorAllDeep, k as lockSwipes, b as getActiveElementShadow, n as hideShowTabbar, g as getAppContext } from './common-helpers-ac10c412.js';
 import { a as isRequired, b as getTypeValidation, c as isReadonly, s as setFieldData, u as updateFormulas, d as getDynamicProperty, e as isDisabled, f as isCreationAllowed, h as isEditionAllowed, j as generateLabel } from './form-helpers-11a823cf.js';
@@ -3836,7 +3836,7 @@ const YooFormDynamicComponent = class {
       }
       case FormFieldType.selectimage: {
         const multiple = field.multiple;
-        const values = field.values || ((_m = field.opValues) === null || _m === void 0 ? void 0 : _m.find((opValue) => opValue));
+        const values = flatten((field === null || field === void 0 ? void 0 : field.complexSelectImageValues) || (field === null || field === void 0 ? void 0 : field.values) || ((_m = field === null || field === void 0 ? void 0 : field.opValues) === null || _m === void 0 ? void 0 : _m.find((opValue) => opValue || [])));
         TagType = 'yoo-form-choice-image';
         attrs = {
           ...attrs,

package/dist/design-system/yoo-form-phone-number.entry.js

@@ -4163,17 +4163,17 @@ var AsYouTypeState = /*#__PURE__*/function () {
     key: "setCallingCode",
     value: function setCallingCode(callingCode) {
       this.callingCode = callingCode;
-      return this.onCallingCodeChange(this.country, callingCode);
+      this.onCallingCodeChange(callingCode, this.country);
     }
   }, {
     key: "startInternationalNumber",
-    value: function startInternationalNumber() {
+    value: function startInternationalNumber(country, callingCode) {
       // Prepend the `+` to parsed input.
       this.international = true; // If a default country was set then reset it
       // because an explicitly international phone
       // number is being entered.
 
-      this.initCountryAndCallingCode();
+      this.initCountryAndCallingCode(country, callingCode);
     }
   }, {
     key: "appendDigits",
@@ -6033,7 +6033,10 @@ var AsYouTypeParser = /*#__PURE__*/function () {
         state.update({
           IDDPrefix: digits.slice(0, digits.length - numberWithoutIDD.length)
         });
-        this.startInternationalNumber(state);
+        this.startInternationalNumber(state, {
+          country: undefined,
+          callingCode: undefined
+        });
         return true;
       }
     }
@@ -6049,15 +6052,20 @@ var AsYouTypeParser = /*#__PURE__*/function () {
           state.update({
             missingPlus: true
           });
-          this.startInternationalNumber(state);
+          this.startInternationalNumber(state, {
+            country: state.country,
+            callingCode: newCallingCode
+          });
           return true;
         }
       }
     }
   }, {
     key: "startInternationalNumber",
-    value: function startInternationalNumber(state) {
-      state.startInternationalNumber(); // If a national (significant) number has been extracted before, reset it.
+    value: function startInternationalNumber(state, _ref3) {
+      var country = _ref3.country,
+          callingCode = _ref3.callingCode;
+      state.startInternationalNumber(country, callingCode); // If a national (significant) number has been extracted before, reset it.
 
       if (state.nationalSignificantNumber) {
         state.resetNationalSignificantNumber();
@@ -6284,7 +6292,7 @@ var AsYouType$1 = /*#__PURE__*/function () {
           // with the old versions.
           _this.country = country;
         },
-        onCallingCodeChange: function onCallingCodeChange(country, callingCode) {
+        onCallingCodeChange: function onCallingCodeChange(callingCode, country) {
           _this.metadata.selectNumberingPlan(country, callingCode);
 
           _this.formatter.reset(_this.metadata.numberingPlan, _this.state);

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

@@ -48,7 +48,7 @@ var registerWrapper = function registerWrapper(stripe, startTime) {
 
   stripe._registerWrapper({
     name: 'stripe-js',
-    version: "1.32.0",
+    version: "1.33.0",
     startTime: startTime
   });
 };

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

@@ -6,7 +6,7 @@ import { dg as getTranslateLanguageKeys, t as translate, Z as translateMulti, d5
 import './lodash-f6e59a8e.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{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: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 YooFormCreatorLivePreviewComponent = class {
   constructor(hostRef) {
@@ -51,6 +51,12 @@ const YooFormCreatorLivePreviewComponent = class {
   renderLanguageSelector() {
     return h("div", { class: "language-selector" }, h("yoo-form-autocomplete", { value: this.selectedLanguage, values: getTranslateLanguageKeys(this.availableLanguages), onInputChanged: (ev) => this.onLanguageChanged(ev), idOnly: true, entityType: "language", useTranslate: true, displayType: "card-list", forceHideSearch: true, iconPrefix: "feed", size: "medium" }));
   }
+  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())))
+    ];
+  }
   renderFullscreenHeader() {
     return [
       h("div", { class: { title: true, 'align-left': !this.closable } }, translate(this.fullscreenHeading || 'LIVEPREVIEW')),
@@ -68,11 +74,10 @@ const YooFormCreatorLivePreviewComponent = class {
   }
   renderContent() {
     const hasDescription = this.showDescriptionAndFooter && (this.missionDescriptionTitle || this.missionDescriptionText);
-    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", null, h("yoo-truncate", null, translateMulti(this.missionDescriptionTitle))))), h("div", { class: "slot-container" }, h("slot", { name: "livePreview" })))))));
+    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() {
-    var _a;
-    return (h(Host, { class: { panel: this.mode === 'panel', ...getAppContext(this.host) } }, 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(), 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.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" }))));
   }
   get host() { return getElement(this); }
 };

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

@@ -1,7 +1,7 @@
 import { r as registerInstance, i as createEvent, f as forceUpdate, h, e as Host, g as getElement } from './index-becca019.js';
 import { c as FormFieldType, n as IncentivePartType } from './index-e917d10e.js';
 import './index-32c18efc.js';
-import { a as isNumber, A as isEqual, i as isArray, c as cloneDeep, b as isFunction, v as isObject, s as assign, a7 as result, y as isEmpty, a8 as findLastIndex, o as orderBy, a2 as groupBy, k as keys, a6 as range, q as isString, Z as uniqBy, n as compact, a1 as flatten, C as get, J as pick } from './lodash-f6e59a8e.js';
+import { a as isNumber, A as isEqual, i as isArray, c as cloneDeep, b as isFunction, v as isObject, s as assign, a7 as result, y as isEmpty, a8 as findLastIndex, o as orderBy, a2 as groupBy, k as keys, a6 as range, q as isString, Z as uniqBy, a1 as flatten, n as compact, C as get, J as pick } from './lodash-f6e59a8e.js';
 import { b as getMissionStatusIconName } from './operation-helpers-cf026010.js';
 import { q as querySelectorDeep, c as querySelectorAllDeep, k as lockSwipes, b as getActiveElementShadow, n as hideShowTabbar, g as getAppContext } from './common-helpers-ac10c412.js';
 import { a as isRequired, b as getTypeValidation, c as isReadonly, s as setFieldData, u as updateFormulas, d as getDynamicProperty, e as isDisabled, f as isCreationAllowed, h as isEditionAllowed, j as generateLabel } from './form-helpers-11a823cf.js';
@@ -3836,7 +3836,7 @@ const YooFormDynamicComponent = class {
       }
       case FormFieldType.selectimage: {
         const multiple = field.multiple;
-        const values = field.values || ((_m = field.opValues) === null || _m === void 0 ? void 0 : _m.find((opValue) => opValue));
+        const values = flatten((field === null || field === void 0 ? void 0 : field.complexSelectImageValues) || (field === null || field === void 0 ? void 0 : field.values) || ((_m = field === null || field === void 0 ? void 0 : field.opValues) === null || _m === void 0 ? void 0 : _m.find((opValue) => opValue || [])));
         TagType = 'yoo-form-choice-image';
         attrs = {
           ...attrs,

package/dist/esm/yoo-form-phone-number.entry.js

@@ -4163,17 +4163,17 @@ var AsYouTypeState = /*#__PURE__*/function () {
     key: "setCallingCode",
     value: function setCallingCode(callingCode) {
       this.callingCode = callingCode;
-      return this.onCallingCodeChange(this.country, callingCode);
+      this.onCallingCodeChange(callingCode, this.country);
     }
   }, {
     key: "startInternationalNumber",
-    value: function startInternationalNumber() {
+    value: function startInternationalNumber(country, callingCode) {
       // Prepend the `+` to parsed input.
       this.international = true; // If a default country was set then reset it
       // because an explicitly international phone
       // number is being entered.
 
-      this.initCountryAndCallingCode();
+      this.initCountryAndCallingCode(country, callingCode);
     }
   }, {
     key: "appendDigits",
@@ -6033,7 +6033,10 @@ var AsYouTypeParser = /*#__PURE__*/function () {
         state.update({
           IDDPrefix: digits.slice(0, digits.length - numberWithoutIDD.length)
         });
-        this.startInternationalNumber(state);
+        this.startInternationalNumber(state, {
+          country: undefined,
+          callingCode: undefined
+        });
         return true;
       }
     }
@@ -6049,15 +6052,20 @@ var AsYouTypeParser = /*#__PURE__*/function () {
           state.update({
             missingPlus: true
           });
-          this.startInternationalNumber(state);
+          this.startInternationalNumber(state, {
+            country: state.country,
+            callingCode: newCallingCode
+          });
           return true;
         }
       }
     }
   }, {
     key: "startInternationalNumber",
-    value: function startInternationalNumber(state) {
-      state.startInternationalNumber(); // If a national (significant) number has been extracted before, reset it.
+    value: function startInternationalNumber(state, _ref3) {
+      var country = _ref3.country,
+          callingCode = _ref3.callingCode;
+      state.startInternationalNumber(country, callingCode); // If a national (significant) number has been extracted before, reset it.
 
       if (state.nationalSignificantNumber) {
         state.resetNationalSignificantNumber();
@@ -6284,7 +6292,7 @@ var AsYouType$1 = /*#__PURE__*/function () {
           // with the old versions.
           _this.country = country;
         },
-        onCallingCodeChange: function onCallingCodeChange(country, callingCode) {
+        onCallingCodeChange: function onCallingCodeChange(callingCode, country) {
           _this.metadata.selectNumberingPlan(country, callingCode);
 
           _this.formatter.reset(_this.metadata.numberingPlan, _this.state);

package/dist/esm/yoo-form-stripe-card.entry.js

@@ -48,7 +48,7 @@ var registerWrapper = function registerWrapper(stripe, startTime) {
 
   stripe._registerWrapper({
     name: 'stripe-js',
-    version: "1.32.0",
+    version: "1.33.0",
     startTime: startTime
   });
 };

package/dist/types/components/form-creator/form-creator-live-preview/form-creator-live-preview.d.ts

@@ -33,6 +33,7 @@ export declare class YooFormCreatorLivePreviewComponent {
   onLanguageChanged(ev: CustomEvent<string>): void;
   toggleLivePreviewClicked(): void;
   renderLanguageSelector(): any;
+  renderHeader(): any[];
   renderFullscreenHeader(): any[];
   renderPanelHeader(): any[];
   renderSubheader(): any;

package/package.json

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