@yoobic/yobi 8.2.4 → 8.3.0-10

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

@@ -2,17 +2,18 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-fc264952.js');
-const index$3 = require('./index-f3d7c03d.js');
+const index = require('./index-6482c595.js');
+const index$1 = require('./index-920990f8.js');
+require('./index-6886c6f7.js');
 require('./index-c6ecb900.js');
-const index$2 = require('./index-1bc46652.js');
-const index$4 = require('./index-7d3c7ee7.js');
+const index$2 = require('./index-d032658d.js');
+const overlays = require('./overlays-94c28a17.js');
+const index$3 = require('./index-7d3c7ee7.js');
 require('./lodash-597bda6d.js');
-require('./_commonjsHelpers-94df2ea7.js');
 require('./index-dbc0dad6.js');
 require('./index-9c56868f.js');
 require('./annotations-helpers-6cf88388.js');
+require('./_commonjsHelpers-94df2ea7.js');
 
 const formCreatorConditionBlockCss = ":host .outer-container .parent-block-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:100%;min-height:2.5rem;margin:var(--spacing-16, 1rem) 0;background:var(--light, #ffffff);border-radius:0.25rem;-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));-webkit-transition:0.3s;transition:0.3s}:host .outer-container .parent-block-container .header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-height:2.5rem}:host .outer-container .parent-block-container .header .condition-icon,:host .outer-container .parent-block-container .header .form-icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:1.25rem;min-height:1.25rem;margin-left:var(--spacing-08, 0.5rem);border-radius:var(--border-radius-04, 0.25rem)}:host .outer-container .parent-block-container .header .condition-icon yoo-icon,:host .outer-container .parent-block-container .header .condition-icon .position-title,:host .outer-container .parent-block-container .header .form-icon yoo-icon,:host .outer-container .parent-block-container .header .form-icon .position-title{margin:0 var(--spacing-04, 0.25rem)}:host .outer-container .parent-block-container .header .condition-icon yoo-icon,:host .outer-container .parent-block-container .header .form-icon yoo-icon{min-width:var(--icon-size-01, 1rem);font-size:var(--icon-size-01, 1rem)}:host .outer-container .parent-block-container .header .condition-icon .position-title,:host .outer-container .parent-block-container .header .form-icon .position-title{color:var(--light, #ffffff);font-size:var(--font-size-14, 0.875rem)}:host .outer-container .parent-block-container .header .title{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;-ms-flex:1;flex:1;width:100%;margin-left:var(--spacing-08, 0.5rem)}:host .outer-container .parent-block-container .header .icons-container{position:relative;display:-ms-flexbox;display:flex}:host .outer-container .parent-block-container .header .icons-container .icon-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:var(--spacing-16, 1rem);margin-right:var(--spacing-08, 0.5rem)}:host .outer-container .parent-block-container .header .icons-container .icon-container yoo-icon{font-size:var(--font-size-20, 1.25rem)}:host .outer-container .parent-block-container .header .icons-container .icon-container.dropdown{width:2.125rem;margin-right:0}:host .outer-container .parent-block-container .header .icons-container .icon-container.dropdown::after{position:absolute;left:0;width:0.0625rem;height:1.125rem;background:var(--stable-light, #f1f1f1);content:\"\"}:host .outer-container .parent-block-container .header .icons-container .icon-container.plus{width:2.125rem;height:2.125rem}:host .outer-container .parent-block-container .header .icons-container .icon-container.plus yoo-icon{font-size:var(--icon-size-02, 1.5rem)}:host .outer-container .parent-block-container .header .icons-container yoo-context-menu{--width-dropdown-content:10rem;--max-width-dropdown-content:unset}:host .outer-container .header .icons-container.actions{color:var(--app-color, #5a30f4)}:host .outer-container .header .icons-container.actions .action{margin:0 var(--spacing-08, 0.5rem);font-size:var(--font-size-14, 0.875rem)}:host .outer-container .header .condition-icon{background:var(--dark, #000000)}:host .outer-container .header .condition-icon.stable{background:var(--stable, #adadad)}:host .outer-container .header .title.no-flex{-ms-flex:unset;flex:unset;width:auto}:host .outer-container .header .form-icon{background-color:var(--accent, #276ef1);margin-right:auto}:host .outer-container .header .form-icon.multimedia,:host .outer-container .header .form-icon.learn,:host .outer-container .header .form-icon.uiactions{background-color:var(--info, #d84c96)}:host .outer-container .header .form-icon.select,:host .outer-container .header .form-icon.events,:host .outer-container .header .form-icon.dataevents{background-color:var(--accent, #276ef1)}:host .outer-container .header .form-icon.textcategory{background-color:var(--energized, #ffc043)}:host .outer-container .header .form-icon.number,:host .outer-container .header .form-icon.appcreatorapp,:host .outer-container .header .form-icon.customfield{background-color:var(--app-color, #5a30f4)}:host .outer-container .header .form-icon.contactdetail,:host .outer-container .header .form-icon.engage,:host .outer-container .header .form-icon.information,:host .outer-container .header .form-icon.nativeactions{background-color:var(--warning, #ed6e33)}:host .outer-container .header .form-icon.no-scoring{background-color:var(--text-color, #807f83)}:host .outer-container .header .form-icon.actioncategory,:host .outer-container .header .form-icon.logic{background-color:var(--anthracite, #1a1a1a)}:host .outer-container .header .form-icon.dateandtime{background-color:var(--dark, #000000)}:host .outer-container .header .form-icon.catalogandbarcode,:host .outer-container .header .form-icon.notifications{background-color:var(--danger, #d44333)}:host .outer-container .header .form-icon.condition{background-color:var(--stable, #adadad)}:host .outer-container .header .form-icon.page,:host .outer-container .header .form-icon.dataactions,:host .outer-container .header .form-icon.operate{background-color:var(--success, #3aa76d)}:host .outer-container .header .form-icon.lesson,:host .outer-container .header .form-icon.boostcontent{background-color:var(--app-color, #5a30f4)}:host .outer-container .header.collapsed .form-icon{margin-right:var(--spacing-08, 0.5rem)}:host .outer-container .header.collapsed .collapsed-title{margin-right:auto;margin-left:var(--spacing-04, 0.25rem)}:host .outer-container .content-container{display:none;-ms-flex-direction:column;flex-direction:column;height:0;padding:var(--spacing-04, 0.25rem) 0}:host .outer-container .content-container.expanded{display:-ms-flexbox;display:flex;height:auto}:host .outer-container .content-container .middle-container,:host .outer-container .content-container .actions-container{display:-ms-flexbox;display:flex}:host .outer-container .content-container .operator-container,:host .outer-container .content-container .values-container,:host .outer-container .content-container .actions-container{-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;min-height:2.5rem;margin:0 var(--spacing-08, 0.5rem);color:var(--app-color, #5a30f4);font-size:var(--font-size-12, 0.75rem)}:host .outer-container .content-container .operator-container .label,:host .outer-container .content-container .values-container .label,:host .outer-container .content-container .actions-container .label{color:var(--dark, #000000)}:host .outer-container .content-container .operator-container .label.danger,:host .outer-container .content-container .values-container .label.danger,:host .outer-container .content-container .actions-container .label.danger{color:var(--danger, #d44333)}:host .outer-container .content-container .operator-container .actions yoo-button,:host .outer-container .content-container .values-container .actions yoo-button,:host .outer-container .content-container .actions-container .actions yoo-button{width:7.8rem}:host .outer-container .content-container .operator-container .actions yoo-context-menu yoo-button,:host .outer-container .content-container .values-container .actions yoo-context-menu yoo-button,:host .outer-container .content-container .actions-container .actions yoo-context-menu yoo-button{width:7.8rem}:host .outer-container .content-container .middle-container .operator-container{-ms-flex:1;flex:1}:host .outer-container .content-container .middle-container .values-container{-ms-flex:2;flex:2}:host .outer-container .content-container .values-container .values.group-tag{width:80%}:host .outer-container .content-container .values-container .values.number{display:-ms-flexbox;display:flex}:host .outer-container .content-container .values-container .values yoo-context-menu span{width:100%}:host .outer-container .content-container .values-container .inline-form-dynamic-slot{-ms-flex-item-align:start;align-self:flex-start;min-width:calc(100% - 4rem)}:host .outer-container .content-container .values-container .date-time-container{-ms-flex-item-align:start;align-self:flex-start}:host .outer-container .content-container .values-container .date-time-container yoo-form-date-time{z-index:2}:host .outer-container .content-container yoo-context-menu{--width-dropdown-content:12rem;--max-width-dropdown-content:unset;display:-ms-flexbox;display:flex}:host .outer-container .content-container .actions-container{-ms-flex-wrap:wrap;flex-wrap:wrap;padding-top:0.1875rem}:host .outer-container .content-container .actions-container .actions{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;height:100%;overflow:hidden}:host .outer-container .content-container .actions-container .actions yoo-button{-ms-flex-item-align:center;align-self:center;margin-left:var(--spacing-08, 0.5rem);padding-top:var(--spacing-08, 0.5rem)}:host .outer-container .parent-block-container{background:var(--stable-ultralight, #fafafa)}:host .outer-container .parent-block-container .header .form-icon{min-width:2.5rem}:host .outer-container .parent-block-container .header .title.no-flex{min-width:0.75rem}:host .outer-container .parent-block-container.action .header .condition-icon{color:var(--light, #ffffff);background:var(--dark, #000000)}:host .outer-container.dialog .parent-block-container{-webkit-box-shadow:none;box-shadow:none}:host(.new-condition) .outer-container .parent-block-container{border:none;-webkit-box-shadow:var(--web-shadow, 0 0.3125rem 0.8125rem 0 rgba(40, 47, 54, 0.08));box-shadow:var(--web-shadow, 0 0.3125rem 0.8125rem 0 rgba(40, 47, 54, 0.08))}:host(.new-condition) .outer-container .parent-block-container .header{background:var(--light, #ffffff)}:host(.new-condition) .outer-container .parent-block-container .header .condition-icon{background:var(--stable, #adadad)}:host(.new-condition) .outer-container .parent-block-container .header .icons-container .icon-container{cursor:pointer}:host(.condition-child-block) .outer-container .parent-block-container .header{cursor:pointer}";
 
@@ -117,7 +118,7 @@ const YooFormCreatorConditionBlockComponent = class {
   setActionList() {
     this.blockSelectionButtons = index$2.setBlockSelection(this.itemList, this.condition, (slideIndex, itemIndex) => this.onSelectItem(slideIndex, itemIndex));
     this.pageSelectionButtons = index$2.setPageSelection(this.itemList, this.condition, this.pageIndex, (slideIndex) => this.onSelectNewPageCondition(slideIndex));
-    this.secondaryActions = [{ text: index$3.translate('DELETE'), icon: 'delete', handler: () => this.deleteCondition.emit({ conditionId: this.condition._id }) }];
+    this.secondaryActions = [{ text: overlays.translate('DELETE'), icon: 'delete', handler: () => this.deleteCondition.emit({ conditionId: this.condition._id }) }];
   }
   onSelectItem(slideIndex, itemIndex) {
     this.addCondition.emit({ slideIndex, itemIndex, condition: this.condition });
@@ -138,10 +139,10 @@ const YooFormCreatorConditionBlockComponent = class {
     const condition = this.condition;
     const newCondition = interfaces === null || interfaces === void 0 ? void 0 : interfaces.find((action) => action.text === ev.detail);
     condition[conditionAttribute] = newCondition ? newCondition[conditionAttribute] : isNotArray ? [ev.detail] : ev.detail;
-    if (index$3.isNullOrUndefined((_a = condition === null || condition === void 0 ? void 0 : condition.field) === null || _a === void 0 ? void 0 : _a.values)) {
+    if (overlays.isNullOrUndefined((_a = condition === null || condition === void 0 ? void 0 : condition.field) === null || _a === void 0 ? void 0 : _a.values)) {
       condition.field.values = this.getConditionalFieldValues();
     }
-    if (conditionAttribute === 'values' && !index$3.isNullOrUndefined(condition.value)) {
+    if (conditionAttribute === 'values' && !overlays.isNullOrUndefined(condition.value)) {
       delete condition.value;
     }
     //Different operators will change the values to multiple or single selection so when an operator is changed the selected value needs to be reset
@@ -173,13 +174,13 @@ const YooFormCreatorConditionBlockComponent = class {
     return (index.h("div", { class: { header: true, collapsed: !this.isExpanded }, onClick: () => this.onExpand() }, index.h("div", { class: {
         'condition-icon': true,
         stable: addedMode
-      } }, index.h("yoo-icon", { name: this.type === 'field' ? 'condition' : 'restriction', color: "light", size: "small" })), index.h("div", { class: { title: true, 'no-flex': addedMode } }, addedMode ? index$3.translate('FIELDIF') : index$3.translate(this.getHeaderText())), addedMode && (index.h("div", { class: { 'form-icon': true, [this.parentField.category]: true } }, index.h("yoo-icon", { name: this.parentFieldIcon || this.parentField.icon, color: "light", size: "small" }), index.h("div", { class: "position-title" }, this.itemPosition))), addedMode && !this.isExpanded && (index.h("div", { class: "collapsed-title" }, index.h("yoo-truncate", null, ' ', `${index$3.translate((_a = this.operator) === null || _a === void 0 ? void 0 : _a.toUpperCase())}: `, (_b = this.conditionValues) === null || _b === void 0 ? void 0 :
+      } }, index.h("yoo-icon", { name: this.type === 'field' ? 'condition' : 'restriction', color: "light", size: "small" })), index.h("div", { class: { title: true, 'no-flex': addedMode } }, addedMode ? overlays.translate('FIELDIF') : overlays.translate(this.getHeaderText())), addedMode && (index.h("div", { class: { 'form-icon': true, [this.parentField.category]: true } }, index.h("yoo-icon", { name: this.parentFieldIcon || this.parentField.icon, color: "light", size: "small" }), index.h("div", { class: "position-title" }, this.itemPosition))), addedMode && !this.isExpanded && (index.h("div", { class: "collapsed-title" }, index.h("yoo-truncate", null, ' ', `${overlays.translate((_a = this.operator) === null || _a === void 0 ? void 0 : _a.toUpperCase())}: `, (_b = this.conditionValues) === null || _b === void 0 ? void 0 :
       _b.map((conditionValue) => {
         if (this.parentFieldType === 'feedback') {
-          return index$4.feedbackValues[conditionValue - 1];
+          return index$3.feedbackValues[conditionValue - 1];
         }
-        else if (!index$3.isNullOrUndefined(conditionValue)) {
-          return `"${index$3.translateMulti(conditionValue)}" `;
+        else if (!overlays.isNullOrUndefined(conditionValue)) {
+          return `"${overlays.translateMulti(conditionValue)}" `;
         }
       })))), addedMode && this.renderIconsContainer(), this.isModeNew() &&
       (this.type === 'field' || this.mode === 'new-selection' ? (this.renderAdd()) : (index.h("yoo-context-menu", { contentButtons: this.secondaryActions }, this.renderAdd()))), this.mode === 'existing' && index.h("yoo-context-menu", null, this.renderIconsContainer(false))));
@@ -212,14 +213,14 @@ const YooFormCreatorConditionBlockComponent = class {
     let operatorInterfaces = [];
     if (this.type === 'tags' || this.type === 'groups') {
       operatorInterfaces = [
-        { text: index$3.translate('YOOBICIN'), operator: 'in' },
-        { text: index$3.translate('ISNOTIN'), operator: 'notin' }
+        { text: overlays.translate('YOOBICIN'), operator: 'in' },
+        { text: overlays.translate('ISNOTIN'), operator: 'notin' }
       ];
     }
     else {
       if (this.parentField && this.parentField.conditionalOperators) {
         this.parentField.conditionalOperators.forEach((operator) => {
-          const operatorAction = { text: index$3.translate(operator.toUpperCase()), operator: operator };
+          const operatorAction = { text: overlays.translate(operator.toUpperCase()), operator: operator };
           operatorInterfaces.push(operatorAction);
         });
       }
@@ -271,12 +272,12 @@ const YooFormCreatorConditionBlockComponent = class {
   renderOperatorContainer() {
     var _a;
     const operatorActions = this.getOperatorActions();
-    const operatorPlaceholder = index$3.translate('PLEASESELECTOPERATOR');
-    const operatorValue = this.operator ? index$3.translate((_a = this.operator) === null || _a === void 0 ? void 0 : _a.toUpperCase()) : null;
-    return (index.h("div", { class: "operator-container" }, index.h("div", { class: "label" }, index$3.translate('OPERATOR')), this.renderAutocomplete(operatorPlaceholder, 'operator', operatorActions, operatorValue)));
+    const operatorPlaceholder = overlays.translate('PLEASESELECTOPERATOR');
+    const operatorValue = this.operator ? overlays.translate((_a = this.operator) === null || _a === void 0 ? void 0 : _a.toUpperCase()) : null;
+    return (index.h("div", { class: "operator-container" }, index.h("div", { class: "label" }, overlays.translate('OPERATOR')), this.renderAutocomplete(operatorPlaceholder, 'operator', operatorActions, operatorValue)));
   }
   renderValuesContainer() {
-    return (index.h("div", { class: { 'values-container': true } }, index.h("div", { class: { label: true } }, index$3.translate('VALUES')), this.type === 'field' && this.parentField && this.renderFieldValues(), (this.type === 'groups' || this.type === 'tags') && this.renderInlineFormDynamicSlot()));
+    return (index.h("div", { class: { 'values-container': true } }, index.h("div", { class: { label: true } }, overlays.translate('VALUES')), this.type === 'field' && this.parentField && this.renderFieldValues(), (this.type === 'groups' || this.type === 'tags') && this.renderInlineFormDynamicSlot()));
   }
   renderFieldValues() {
     switch (this.parentField.conditionalValues) {
@@ -299,7 +300,7 @@ const YooFormCreatorConditionBlockComponent = class {
     return (index.h("div", { class: "date-time-container" }, index.h("yoo-form-date-time", { class: "condition-block", type: type, value: this.condition.values ? this.condition.values[0] : undefined, onInputChanged: (ev) => this.onConditionChanged(ev, 'values') })));
   }
   renderStringValues() {
-    return (index.h("yoo-form-input", { clearable: false, hasIconPrefix: false, class: "condition-form", type: "text", size: "medium", value: this.condition.values ? this.condition.values[0] : undefined, debounce: 500, onInputChanged: (ev) => this.onConditionChanged(ev, 'values', null, true), placeholder: index$3.translate('ENTERVALUE') }));
+    return (index.h("yoo-form-input", { clearable: false, hasIconPrefix: false, class: "condition-form", type: "text", size: "medium", value: this.condition.values ? this.condition.values[0] : undefined, debounce: 500, onInputChanged: (ev) => this.onConditionChanged(ev, 'values', null, true), placeholder: overlays.translate('ENTERVALUE') }));
   }
   renderStarratingValues() {
     return (index.h("div", { class: "star-container" }, index.h("yoo-form-star-rating", { value: this.condition.values ? this.condition.values[0] : undefined, scrollable: false, onInputChanged: (ev) => this.onConditionChanged(ev, 'values', null, true) })));
@@ -315,25 +316,25 @@ const YooFormCreatorConditionBlockComponent = class {
       return this.renderFeedbackValues();
     }
     else {
-      return (index.h("div", { class: "values number" }, this.operator === 'between' && (index.h("div", { class: "min-input-container" }, index.h("yoo-form-input", { class: "small", type: "number" }))), index.h("yoo-form-input", { clearable: false, hasIconPrefix: false, class: "condition-form", size: "medium", type: "number", value: this.condition.values ? this.condition.values[0] : undefined, placeholder: index$3.translate('ENTERVALUE'), debounce: 500, onInputChanged: (ev) => this.onConditionChanged(ev, 'values', null, true) })));
+      return (index.h("div", { class: "values number" }, this.operator === 'between' && (index.h("div", { class: "min-input-container" }, index.h("yoo-form-input", { class: "small", type: "number" }))), index.h("yoo-form-input", { clearable: false, hasIconPrefix: false, class: "condition-form", size: "medium", type: "number", value: this.condition.values ? this.condition.values[0] : undefined, placeholder: overlays.translate('ENTERVALUE'), debounce: 500, onInputChanged: (ev) => this.onConditionChanged(ev, 'values', null, true) })));
     }
   }
   renderDropdownValues(trueFalse = false) {
     const valueInterfaces = this.type === 'field' && this.parentField ? this.getConditionalFieldValues() : [];
-    const valuesPlaceholder = index$3.translate('PLEASESELECTVALUE');
+    const valuesPlaceholder = overlays.translate('PLEASESELECTVALUE');
     let valuesValue = this.conditionValues ? (trueFalse ? `${this.conditionValues}` : this.conditionValues) : null;
     if (trueFalse && valuesValue) {
       valuesValue = `${valuesValue === null || valuesValue === void 0 ? void 0 : valuesValue.toUpperCase()}ABSOLUTE`;
     }
     return (index.h("div", { class: "values" }, valueInterfaces && valueInterfaces.length > 0
       ? this.renderAutocomplete(valuesPlaceholder, 'values', valueInterfaces, valuesValue, this.operator === 'in' || this.operator === 'notin', trueFalse ? 'text' : null)
-      : index$3.translate('NOVALUESPLEASEADD')));
+      : overlays.translate('NOVALUESPLEASEADD')));
   }
   renderInlineFormDynamicSlot() {
     return (index.h("div", { class: "inline-form-dynamic-slot" }, index.h("slot", { name: this.condition._id })));
   }
   renderActions() {
-    return (index.h("div", { class: "actions-container" }, index.h("div", { class: "label" }, index$3.translate('SHOWBLOCK')), index.h("div", { class: "actions" }, this.type === 'field' && (index.h("yoo-context-menu", { class: "overflow-contained flex", contentButtons: this.pageSelectionButtons }, index.h("yoo-button", { size: "medium" }, index$3.translate('EXISTINGPAGE'), index.h("yoo-icon", { size: "small", name: "arrow-down", slot: "end" })))), index.h("yoo-context-menu", { class: "overflow-contained flex", contentButtons: this.blockSelectionButtons }, index.h("yoo-button", { size: "medium" }, index$3.translate('EXISTINGBLOCK'), index.h("yoo-icon", { size: "small", name: "arrow-down", slot: "end" }))), index.h("yoo-button", { size: "medium", color: "app-color", onClick: () => this.newConditionalFieldClicked.emit({ condition: this.condition, index: this.lastSequentialFieldIndex + 1 }) }, index$3.translate('NEWBLOCK')))));
+    return (index.h("div", { class: "actions-container" }, index.h("div", { class: "label" }, overlays.translate('SHOWBLOCK')), index.h("div", { class: "actions" }, this.type === 'field' && (index.h("yoo-context-menu", { class: "overflow-contained flex", contentButtons: this.pageSelectionButtons }, index.h("yoo-button", { size: "medium" }, overlays.translate('EXISTINGPAGE'), index.h("yoo-icon", { size: "small", name: "arrow-down", slot: "end" })))), index.h("yoo-context-menu", { class: "overflow-contained flex", contentButtons: this.blockSelectionButtons }, index.h("yoo-button", { size: "medium" }, overlays.translate('EXISTINGBLOCK'), index.h("yoo-icon", { size: "small", name: "arrow-down", slot: "end" }))), index.h("yoo-button", { size: "medium", color: "app-color", onClick: () => this.newConditionalFieldClicked.emit({ condition: this.condition, index: this.lastSequentialFieldIndex + 1 }) }, overlays.translate('NEWBLOCK')))));
   }
   renderContent() {
     return (index.h("div", { class: { 'content-container': true, expanded: this.isExpanded || this.isDialog } }, index.h("div", { class: "middle-container" }, this.renderOperatorContainer(), this.renderValuesContainer()), this.renderActions()));

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

@@ -2,12 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-fc264952.js');
-const index$2 = require('./index-f3d7c03d.js');
-const gridstackDdNative = require('./gridstack-dd-native-dca9e336.js');
+const index = require('./index-6482c595.js');
+const index$1 = require('./index-920990f8.js');
+require('./index-6886c6f7.js');
+const gridstackDdNative = require('./gridstack-dd-native-f6c2bb35.js');
 const lodash = require('./lodash-597bda6d.js');
-const index$3 = require('./index-81e10acc.js');
+const index$2 = require('./index-1df4423f.js');
+const overlays = require('./overlays-94c28a17.js');
 require('./_commonjsHelpers-94df2ea7.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}";
@@ -91,7 +92,7 @@ const YooFormCreatorFieldSelectorComponent = class {
             const child = document.createElement('div');
             child.classList.add('grid-stack-item-content');
             const title = document.createElement('div.title');
-            title.innerText = index$2.translate(event.currentTarget.getAttribute('attr-title'));
+            title.innerText = overlays.translate(event.currentTarget.getAttribute('attr-title'));
             child.appendChild(title);
             el.appendChild(child);
             return el;
@@ -108,7 +109,7 @@ const YooFormCreatorFieldSelectorComponent = class {
       this.categories.forEach((category) => {
         this.simpleFormBlocks[category] = initialBlocks[category].filter((block) => {
           var _a;
-          const translatedFormBlockTitle = index$2.translate(block.title);
+          const translatedFormBlockTitle = overlays.translate(block.title);
           return translatedFormBlockTitle.toUpperCase().includes((_a = ev.detail) === null || _a === void 0 ? void 0 : _a.toUpperCase());
         });
       });
@@ -144,7 +145,7 @@ const YooFormCreatorFieldSelectorComponent = class {
           }
         }, mode: "new", formField: formField, onAdditionClicked: (ev) => this.plusClicked.emit(ev.detail) }), this.useGridstack && index.h("div", { "attr-type": formField.type, "attr-title": formField.title, class: "new-widget grid-stack-item ui-draggable ui-resizable ui-resizable-autohide", ref: (el) => {
           this.newFieldCategoryBlocks[categoryIndex][itemIndex] = el;
-        } }, formField.icon && index.h("yoo-icon", { name: formField.icon }), index.h("div", { class: "title" }, index$2.translate(formField.title)), index.h("div", { class: "grid-stack-item-content" }))));
+        } }, formField.icon && index.h("yoo-icon", { name: formField.icon }), index.h("div", { class: "title" }, overlays.translate(formField.title)), index.h("div", { class: "grid-stack-item-content" }))));
     }
   }
   shouldRenderEmptyState(entries) {
@@ -165,7 +166,7 @@ const YooFormCreatorFieldSelectorComponent = class {
   }
   render() {
     var _a;
-    return (index.h("yoo-accordion", { class: "sub-accordion master-search", entries: this.entries, masterSearch: true, masterTitle: this.masterTitle.toUpperCase(), iconPairLeft: index$3.ARROW_PAIR, showBottomBorder: true, allowMultipleSelection: true, onSearchInputChanged: (ev) => this.onSearchFilterChange(ev), forceEntryUpdate: true }, index.h("slot", { slot: "header", name: "header" }), this.categories.map((category, categoryIndex) => {
+    return (index.h("yoo-accordion", { class: "sub-accordion master-search", entries: this.entries, masterSearch: true, masterTitle: this.masterTitle.toUpperCase(), iconPairLeft: index$2.ARROW_PAIR, showBottomBorder: true, allowMultipleSelection: true, onSearchInputChanged: (ev) => this.onSearchFilterChange(ev), forceEntryUpdate: true }, index.h("slot", { slot: "header", name: "header" }), this.categories.map((category, categoryIndex) => {
       var _a;
       return (index.h("div", { slot: category.toUpperCase() }, index.h("div", { class: "category-block-selection", ref: (el) => (this.newFieldContainerBlocks[categoryIndex] = el) }, (_a = this.simpleFormBlocks[category]) === null || _a === void 0 ? void 0 : _a.map((field, fieldIndex) => this.renderSimpleBlock(field, category, categoryIndex, fieldIndex)))));
     }), ((_a = this.customFormFields) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.renderCustomFormFieldSelection()));

package/dist/cjs/yoo-form-creator-header.cjs.entry.js

@@ -2,10 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-fc264952.js');
-const index$2 = require('./index-f3d7c03d.js');
-const commonHelpers = require('./common-helpers-6970c46c.js');
+const index = require('./index-6482c595.js');
+const index$1 = require('./index-920990f8.js');
+require('./index-6886c6f7.js');
+const commonHelpers = require('./common-helpers-81853232.js');
+const overlays = require('./overlays-94c28a17.js');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
 
@@ -43,11 +44,11 @@ const YooFormCreatorHeaderComponent = class {
     return (index.h("div", { class: "image-container" }, index.h("yoo-img", { src: this.logo })));
   }
   renderBreadCrumbs() {
-    return (index.h("div", { class: "title" }, index.h("div", { class: "stable" }, index$2.translate(this.prefixTitle || (this.isLesson ? 'LESSONCREATOR' : 'CAMPAIGNCREATOR'))), index.h("div", { class: "stable" }, "/"), index.h("span", null, index$2.translateMulti(this.formTitle))));
+    return (index.h("div", { class: "title" }, index.h("div", { class: "stable" }, overlays.translate(this.prefixTitle || (this.isLesson ? 'LESSONCREATOR' : 'CAMPAIGNCREATOR'))), index.h("div", { class: "stable" }, "/"), index.h("span", null, overlays.translateMulti(this.formTitle))));
   }
   renderButtons() {
     // The secondary actions have been removed until they funcitionality has been implemented
-    return (index.h("div", { class: "buttons-container" }, this.showWarning && this.renderWarning(), !this.hideSave && index.h("yoo-button", { onClick: () => this.saveClicked.emit(), size: "medium", disabled: this.saveButtonDisabled, color: "app-color" }, index$2.translate('YOOBICSAVE')), index.h("yoo-button", { onClick: () => this.closeClicked.emit(), size: "medium", color: "stable" }, index$2.translate('CLOSE'))));
+    return (index.h("div", { class: "buttons-container" }, this.showWarning && this.renderWarning(), !this.hideSave && index.h("yoo-button", { onClick: () => this.saveClicked.emit(), size: "medium", disabled: this.saveButtonDisabled, color: "app-color" }, overlays.translate('YOOBICSAVE')), index.h("yoo-button", { onClick: () => this.closeClicked.emit(), size: "medium", color: "stable" }, overlays.translate('CLOSE'))));
   }
   renderWarning() {
     return (index.h("yoo-button", { "ripple-type": "unbounded", fill: "transparent", shape: "circular", color: "stable", onClick: (ev) => {
@@ -56,7 +57,7 @@ const YooFormCreatorHeaderComponent = class {
       } }, index.h("yoo-icon", { name: "warning", color: "warning" })));
   }
   renderQrCodeScanner() {
-    return (index.h("yoo-tooltip", { placement: "bottom", content: index$2.translate('SHAREONMOBILE') }, index.h("yoo-button", { "ripple-type": "unbounded", fill: "transparent", shape: "circular", color: "stable", onClick: (ev) => {
+    return (index.h("yoo-tooltip", { placement: "bottom", content: overlays.translate('SHAREONMOBILE') }, index.h("yoo-button", { "ripple-type": "unbounded", fill: "transparent", shape: "circular", color: "stable", onClick: (ev) => {
         ev.stopImmediatePropagation();
         this.showQrCode.emit();
       } }, index.h("yoo-icon", { name: "scan", color: "stable" }))));

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

@@ -2,10 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-fc264952.js');
-const index$2 = require('./index-f3d7c03d.js');
-const commonHelpers = require('./common-helpers-6970c46c.js');
+const index = require('./index-6482c595.js');
+const index$1 = require('./index-920990f8.js');
+require('./index-6886c6f7.js');
+const commonHelpers = require('./common-helpers-81853232.js');
+const overlays = require('./overlays-94c28a17.js');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
 
@@ -52,18 +53,18 @@ const YooFormCreatorLivePreviewComponent = class {
     }, TRANSITION_TIME);
   }
   renderLanguageSelector() {
-    return index.h("div", { class: "language-selector" }, index.h("yoo-form-autocomplete", { value: this.selectedLanguage, values: index$2.getTranslateLanguageKeys(this.availableLanguages), onInputChanged: (ev) => this.onLanguageChanged(ev), idOnly: true, entityType: "language", useTranslate: true, displayType: "card-list", forceHideSearch: true, iconPrefix: "feed", size: "medium" }));
+    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" }));
   }
   renderFullscreenHeader() {
     return [
-      index.h("div", { class: { title: true, 'align-left': !this.closable } }, index$2.translate(this.fullscreenHeading || 'LIVEPREVIEW')),
-      index.h("div", { class: "icons-container" }, this.showShare && !this.hidden && (index.h("yoo-tooltip", { content: index$2.translate('SHARECAMPAIGN'), hoverable: true, placement: "left" }, index.h("div", { onClick: () => this.shared.emit(), class: "icon-container" }, index.h("yoo-icon", { size: "medium", name: "share", color: "stable" })))), this.closable && (index.h("div", { class: "icon-container", onClick: () => this.closeClicked.emit() }, index.h("yoo-icon", { name: this.hideHeaderTitle ? 'close' : 'left', color: "stable" }), !this.hideHeaderTitle && index.h("div", { class: "campaign-title" }, index$2.translateMulti(this.missionDescriptionTitle)))), !this.closable && (index.h("div", { class: "icon-container", onClick: () => this.fullscreenClicked.emit() }, index.h("yoo-icon", { name: "view", color: "stable" }))))
+      index.h("div", { class: { title: true, 'align-left': !this.closable } }, overlays.translate(this.fullscreenHeading || 'LIVEPREVIEW')),
+      index.h("div", { class: "icons-container" }, this.showShare && !this.hidden && (index.h("yoo-tooltip", { content: overlays.translate('SHARECAMPAIGN'), hoverable: true, placement: "left" }, index.h("div", { onClick: () => this.shared.emit(), class: "icon-container" }, index.h("yoo-icon", { size: "medium", name: "share", color: "stable" })))), this.closable && (index.h("div", { class: "icon-container", onClick: () => this.closeClicked.emit() }, index.h("yoo-icon", { name: this.hideHeaderTitle ? 'close' : 'left', color: "stable" }), !this.hideHeaderTitle && index.h("div", { class: "campaign-title" }, overlays.translateMulti(this.missionDescriptionTitle)))), !this.closable && (index.h("div", { class: "icon-container", onClick: () => this.fullscreenClicked.emit() }, index.h("yoo-icon", { name: "view", color: "stable" }))))
     ];
   }
   renderPanelHeader() {
     return [
-      !this.hidden && index.h("div", { class: "title" }, index$2.translate('LIVEPREVIEW')),
-      index.h("div", { class: "icons-container" }, this.showShare && !this.hidden && (index.h("yoo-tooltip", { content: index$2.translate('SHARECAMPAIGN'), hoverable: true, placement: "left" }, index.h("div", { onClick: () => this.shared.emit(), class: "icon-container" }, index.h("yoo-icon", { size: "medium", name: "share", color: "stable" })))), !this.hidden && (index.h("yoo-tooltip", { content: index$2.translate('OPENPREVIEW'), hoverable: true, placement: "left" }, index.h("div", { onClick: () => this.openFullPageLivePreviewClicked.emit(), class: "icon-container" }, index.h("yoo-icon", { size: "medium", name: "view", color: "stable" })))), index.h("yoo-tooltip", { content: index$2.translate(!this.hidden ? 'HIDEPREVIEW' : 'OPENPREVIEW'), hoverable: true, placement: "left" }, index.h("div", { onClick: () => this.toggleLivePreviewClicked(), class: "icon-container" }, index.h("yoo-icon", { size: "medium", name: "sidebar-right", color: this.hidden ? 'app-color' : 'stable' }))))
+      !this.hidden && index.h("div", { class: "title" }, overlays.translate('LIVEPREVIEW')),
+      index.h("div", { class: "icons-container" }, this.showShare && !this.hidden && (index.h("yoo-tooltip", { content: overlays.translate('SHARECAMPAIGN'), hoverable: true, placement: "left" }, index.h("div", { onClick: () => this.shared.emit(), class: "icon-container" }, index.h("yoo-icon", { size: "medium", name: "share", color: "stable" })))), !this.hidden && (index.h("yoo-tooltip", { content: overlays.translate('OPENPREVIEW'), hoverable: true, placement: "left" }, index.h("div", { onClick: () => this.openFullPageLivePreviewClicked.emit(), class: "icon-container" }, index.h("yoo-icon", { size: "medium", name: "view", color: "stable" })))), index.h("yoo-tooltip", { content: overlays.translate(!this.hidden ? 'HIDEPREVIEW' : 'OPENPREVIEW'), hoverable: true, placement: "left" }, index.h("div", { onClick: () => this.toggleLivePreviewClicked(), class: "icon-container" }, index.h("yoo-icon", { size: "medium", name: "sidebar-right", color: this.hidden ? 'app-color' : 'stable' }))))
     ];
   }
   renderSubheader() {
@@ -71,11 +72,11 @@ 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: index$2.translateMulti(this.missionDescriptionTitle) }), this.missionDescriptionText && index.h("p", { innerHTML: index$2.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, index$2.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", null, 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', 'iphone-x': this.selectedDevice.device === 'iphone-x', ...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) => index$2.replaceSVGColors(svgString) } }))), this.showDescriptionAndFooter && index.h("slot", { name: "footer" }))));
+    return (index.h(index.Host, { class: { panel: this.mode === 'panel', 'iphone-x': this.selectedDevice.device === 'iphone-x', ...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" }))));
   }
   get host() { return index.getElement(this); }
 };

package/dist/cjs/yoo-form-creator-overlay.cjs.entry.js

@@ -2,11 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-f3d7c03d.js');
+const index = require('./index-6482c595.js');
+require('./index-6886c6f7.js');
+const overlays = require('./overlays-94c28a17.js');
 require('./lodash-597bda6d.js');
+require('./index-920990f8.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.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}";
 
@@ -44,14 +45,14 @@ const YooFormCreatorOverlayComponent = class {
     return (index.h("yoo-form-creator-block-simple", { formField: { category: category, icon, formCreatorIndex: index$1, title }, showConditionalBlock: showConditionalBlock }));
   }
   render() {
-    return (index.h(index.Host, null, (this.newFieldCondition || this.newRestrictionCondition) && (index.h("div", { onClick: () => this.removeOverlays(), class: { overlay: true, 'only-live-preview': !index$1.isNullOrUndefined(this.newUndefinedCondition), 'live-preview-hidden': this.isLivePreviewHidden } }, index.h("div", { class: "overlay-background" }), this.newFieldCondition && [
-      index.h("div", { class: "overlay-title sub" }, index$1.translate('ADDNEWBLOCKFROMCOLUMN')),
+    return (index.h(index.Host, null, (this.newFieldCondition || this.newRestrictionCondition) && (index.h("div", { onClick: () => this.removeOverlays(), class: { overlay: true, 'only-live-preview': !overlays.isNullOrUndefined(this.newUndefinedCondition), 'live-preview-hidden': this.isLivePreviewHidden } }, index.h("div", { class: "overlay-background" }), this.newFieldCondition && [
+      index.h("div", { class: "overlay-title sub" }, overlays.translate('ADDNEWBLOCKFROMCOLUMN')),
       this.renderDummyBlock('condition', 'condition', null, null, true)
     ], this.newRestrictionCondition && [
-      index.h("div", { class: "overlay-title" }, ' ', index.h("yoo-icon", { name: "restriction", color: "light" }), index$1.translate('HOWDOESRESTRICTIONWORK')),
-      index.h("div", { class: "overlay-title sub" }, index$1.translate('RESTRICTIONEXPLANATION')),
+      index.h("div", { class: "overlay-title" }, ' ', index.h("yoo-icon", { name: "restriction", color: "light" }), overlays.translate('HOWDOESRESTRICTIONWORK')),
+      index.h("div", { class: "overlay-title sub" }, overlays.translate('RESTRICTIONEXPLANATION')),
       this.renderDummyBlock(this.newRestrictionCondition.category, this.newRestrictionCondition.icon, this.newRestrictionCondition.index + 1, this.newRestrictionCondition.title)
-    ])), this.newUndefinedCondition && (index.h("div", { onClick: () => this.removeOverlays(), class: "overlay left-panel-only" }, index.h("div", { class: "overlay-background" }), index.h("div", { class: "overlay-title" }, index$1.translate(this.newUndefinedCondition.pageCondition ? 'ADDNEWPAGECONDITIONFROMCOLUMN' : 'ADDNEWCONDITIONFROMCOLUMN', { type: this.newUndefinedCondition.type })))), this.newCustomFormField && (index.h("div", { onClick: () => this.removeOverlays(), class: "overlay left-panel-only" }, index.h("div", { class: "overlay-background" }), index.h("div", { class: "overlay-title" }, index$1.translate('NEWCUSTOMFORMFIELDSELECTION')))), (this.newUndefinedCondition || this.newRestrictionCondition || this.newFieldCondition || this.newCustomFormField) && index.h("div", { class: "header-overlay", onClick: () => this.removeOverlays() })));
+    ])), this.newUndefinedCondition && (index.h("div", { onClick: () => this.removeOverlays(), class: "overlay left-panel-only" }, index.h("div", { class: "overlay-background" }), index.h("div", { class: "overlay-title" }, overlays.translate(this.newUndefinedCondition.pageCondition ? 'ADDNEWPAGECONDITIONFROMCOLUMN' : 'ADDNEWCONDITIONFROMCOLUMN', { type: this.newUndefinedCondition.type })))), this.newCustomFormField && (index.h("div", { onClick: () => this.removeOverlays(), class: "overlay left-panel-only" }, index.h("div", { class: "overlay-background" }), index.h("div", { class: "overlay-title" }, overlays.translate('NEWCUSTOMFORMFIELDSELECTION')))), (this.newUndefinedCondition || this.newRestrictionCondition || this.newFieldCondition || this.newCustomFormField) && index.h("div", { class: "header-overlay", onClick: () => this.removeOverlays() })));
   }
   static get watchers() { return {
     "initialNewFieldCondition": ["onInitialNewFieldConditionChanged"],

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

@@ -2,14 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$2 = require('./index-f3d7c03d.js');
+const index = require('./index-6482c595.js');
+require('./index-6886c6f7.js');
 const sortable_esm = require('./sortable.esm-00e15691.js');
-const index$1 = require('./index-1bc46652.js');
+const index$1 = require('./index-d032658d.js');
+const overlays = require('./overlays-94c28a17.js');
 require('./lodash-597bda6d.js');
-require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
+require('./index-920990f8.js');
 require('./annotations-helpers-6cf88388.js');
+require('./_commonjsHelpers-94df2ea7.js');
 
 const formCreatorPageCardListCss = ":host yoo-ion-slides{margin:calc(-1 * var(--spacing-16, 1rem));padding:var(--spacing-16, 1rem)}:host yoo-ion-slide{width:7.5rem}:host yoo-ion-slide.sortable-ghost{border:var(--border-width-02, 0.125rem) dashed var(--stable-alt, #d0d0d0);border-radius:var(--border-radius-04, 0.25rem)}:host yoo-ion-slide.sortable-ghost yoo-form-creator-page-card,:host yoo-ion-slide.sortable-ghost yoo-form-creator-workflow-card{visibility:hidden}:host yoo-ion-slide>*{width:100%}:host yoo-ion-slide+yoo-ion-slide{margin-left:var(--spacing-08, 0.5rem)}";
 
@@ -133,7 +134,7 @@ const YooFormCreatorPageCardListComponent = class {
         this.pageCardSortables.sort(order);
       }
     }, 0);
-    return this.missionSlides.map((slide, index$3) => {
+    return this.missionSlides.map((slide, index$2) => {
       var _a, _b;
       const { restrictionConditions, fieldConditions } = index$1.setRestrictionAndFieldConditions(slide.condition);
       let invalid = false;
@@ -145,7 +146,7 @@ const YooFormCreatorPageCardListComponent = class {
         });
       }
       let fieldsWithScoringInPage = null;
-      if (!index$2.isNullOrUndefined(this.scoringMode)) {
+      if (!overlays.isNullOrUndefined(this.scoringMode)) {
         fieldsWithScoringInPage = this.scoringMode.selectedFields.reduce((acc, item) => {
           var _a;
           if (((_a = slide === null || slide === void 0 ? void 0 : slide.items) === null || _a === void 0 ? void 0 : _a.findIndex((field) => field.name === item.name)) >= 0) {
@@ -154,23 +155,23 @@ const YooFormCreatorPageCardListComponent = class {
           return acc;
         }, 0);
       }
-      const page = index$3 + 1;
-      const selected = (!this.selectPageIndexState && index$3 === 0) || this.selectPageIndexState === index$3;
+      const page = index$2 + 1;
+      const selected = (!this.selectPageIndexState && index$2 === 0) || this.selectPageIndexState === index$2;
       const title = slide.title;
       const translatedTitleIndex = (_a = this.translations) === null || _a === void 0 ? void 0 : _a.findIndex((tran) => tran.key === (title === null || title === void 0 ? void 0 : title.replace(/%/g, '')));
-      const translatedTitle = index$2.translateMulti(translatedTitleIndex > 1 ? this.translations[translatedTitleIndex][this.baseLanguage] : slide.title);
+      const translatedTitle = overlays.translateMulti(translatedTitleIndex > 1 ? this.translations[translatedTitleIndex][this.baseLanguage] : slide.title);
       let workflowState;
       const secondaryActions = [
-        { text: index$2.translate('YOOBICEDIT'), icon: 'settings', handler: () => this.editPageClicked.emit(index$3) },
-        { text: index$2.translate('DUPLICATE'), icon: 'duplicate', handler: () => this.duplicatePageClicked.emit(index$3) },
-        { text: index$2.translate('INSERTPAGEAFTER'), icon: 'move-up', handler: () => this.insertPageAfterClicked.emit(index$3) },
+        { text: overlays.translate('YOOBICEDIT'), icon: 'settings', handler: () => this.editPageClicked.emit(index$2) },
+        { text: overlays.translate('DUPLICATE'), icon: 'duplicate', handler: () => this.duplicatePageClicked.emit(index$2) },
+        { text: overlays.translate('INSERTPAGEAFTER'), icon: 'move-up', handler: () => this.insertPageAfterClicked.emit(index$2) },
         {
-          text: index$2.translate('LOGIC'), icon: 'logic', subMenu: [
-            { text: index$2.translate('ADDSITETAGRESTRICTION'), icon: 'restriction', handler: () => this.addSiteTagRestrictionClicked.emit(index$3) },
-            { text: index$2.translate('ADDUSERGROUPRESTRICTION'), icon: 'restriction', handler: () => this.addUserGroupRestrictionClicked.emit(index$3) }
+          text: overlays.translate('LOGIC'), icon: 'logic', subMenu: [
+            { text: overlays.translate('ADDSITETAGRESTRICTION'), icon: 'restriction', handler: () => this.addSiteTagRestrictionClicked.emit(index$2) },
+            { text: overlays.translate('ADDUSERGROUPRESTRICTION'), icon: 'restriction', handler: () => this.addUserGroupRestrictionClicked.emit(index$2) }
           ]
         },
-        { text: index$2.translate('DELETE'), icon: 'delete', handler: () => this.deletePageClicked.emit(index$3) }
+        { text: overlays.translate('DELETE'), icon: 'delete', handler: () => this.deletePageClicked.emit(index$2) }
       ];
       if (this.workflowVisibility) {
         workflowState = this.workflowVisibility;
@@ -179,10 +180,10 @@ const YooFormCreatorPageCardListComponent = class {
           workflowState = index$1.getWorkflowFieldState(pagePermission, this.workflowVisibility);
         }
       }
-      return (index.h("yoo-ion-slide", { class: "swiper-no-swiping", "data-id": `${title}-${index$3}` }, index.h("yoo-tooltip", { placement: "top", content: translatedTitle }, !!this.workflowVisibility && (index.h("yoo-form-creator-workflow-card", { description: translatedTitle, heading: `${index$2.translate('YOOBICPAGE')} ${page}`, selected: selected, state: workflowState, onClick: (event) => this.onPageClicked(event, index$3), onPageStateChanged: (ev) => {
+      return (index.h("yoo-ion-slide", { class: "swiper-no-swiping", "data-id": `${title}-${index$2}` }, index.h("yoo-tooltip", { placement: "top", content: translatedTitle }, !!this.workflowVisibility && (index.h("yoo-form-creator-workflow-card", { description: translatedTitle, heading: `${overlays.translate('YOOBICPAGE')} ${page}`, selected: selected, state: workflowState, onClick: (event) => this.onPageClicked(event, index$2), onPageStateChanged: (ev) => {
           ev.stopPropagation();
-          this.pageStateChanged.emit({ index: index$3, newState: ev.detail });
-        } })), !this.workflowVisibility && (index.h("yoo-form-creator-page-card", { actions: index$2.isNullOrUndefined(this.scoringMode) && secondaryActions, block: totalFieldsInPage, conditions: fieldConditions, description: translatedTitle, heading: `${index$2.translate('YOOBICPAGE')} ${page}`, invalid: invalid, page: index$3 + 1, restrictions: restrictionConditions, scoringFields: fieldsWithScoringInPage, selected: selected, onClick: (event) => this.onPageClicked(event, index$3) })))));
+          this.pageStateChanged.emit({ index: index$2, newState: ev.detail });
+        } })), !this.workflowVisibility && (index.h("yoo-form-creator-page-card", { actions: overlays.isNullOrUndefined(this.scoringMode) && secondaryActions, block: totalFieldsInPage, conditions: fieldConditions, description: translatedTitle, heading: `${overlays.translate('YOOBICPAGE')} ${page}`, invalid: invalid, page: index$2 + 1, restrictions: restrictionConditions, scoringFields: fieldsWithScoringInPage, selected: selected, onClick: (event) => this.onPageClicked(event, index$2) })))));
     });
   }
   render() {

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

@@ -2,13 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$2 = require('./index-f3d7c03d.js');
-const index$1 = require('./index-1bc46652.js');
+const index = require('./index-6482c595.js');
+require('./index-6886c6f7.js');
+const index$1 = require('./index-d032658d.js');
+const overlays = require('./overlays-94c28a17.js');
 require('./lodash-597bda6d.js');
-require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
+require('./index-920990f8.js');
 require('./annotations-helpers-6cf88388.js');
+require('./_commonjsHelpers-94df2ea7.js');
 
 const formCreatorPageCardCss = ":host{display:block}:host yoo-context-menu.actions,:host yoo-tooltip.actions{grid-column:3}:host yoo-context-menu.conditions,:host yoo-tooltip.conditions{grid-column:1}:host yoo-context-menu.restrictions,:host yoo-tooltip.restrictions{grid-column:2}:host yoo-icon[name=categories]{margin-right:var(--spacing-04, 0.25rem)}:host .actions{display:grid;grid-template-columns:repeat(3, 1rem);gap:var(--spacing-04, 0.25rem);-ms-flex-align:center;align-items:center}:host .content{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;margin-top:var(--spacing-08, 0.5rem)}:host .count{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;overflow:hidden}:host .truncated{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}";
 
@@ -46,7 +47,7 @@ const YooFormCreatorPageCardComponent = class {
     const hasConditions = ((_b = this.conditions) === null || _b === void 0 ? void 0 : _b.length) > 0;
     const hasRestrictions = ((_c = this.restrictions) === null || _c === void 0 ? void 0 : _c.length) > 0;
     const hasScoringFields = this.scoringFields != null;
-    return (index.h("yoo-form-creator-card", { description: this.description, heading: this.heading, selected: this.selected }, index.h("div", { class: "content", slot: "main" }, index.h("div", { class: "count" }, index.h("yoo-icon", { color: this.selected ? 'app-color' : undefined, name: "categories", size: "small" }), index.h("span", { class: "truncated" }, hasScoringFields && `${this.scoringFields} ${index$2.translate('SCORES')}`, !hasScoringFields && hasBlock && this.block, !hasScoringFields && !hasBlock && index$2.translate('NA'))), !this.invalid && (hasActions || hasConditions || hasRestrictions) && (index.h("div", { class: "actions" }, hasConditions && (index.h("yoo-context-menu", { class: "conditions", contentButtons: this.conditionActions, onClick: (ev) => ev.stopPropagation() }, index.h("yoo-icon", { color: this.selected ? 'app-color' : 'info', name: "condition", size: "small" }))), hasRestrictions && (index.h("yoo-tooltip", { class: "restrictions", hoverable: true, content: index$2.translate('DISPLAYRESTRICTIONCONDITION') }, index.h("yoo-context-menu", { contentButtons: this.restrictionActions, onClick: (ev) => ev.stopPropagation() }, index.h("yoo-icon", { color: this.selected ? 'app-color' : 'info', name: "restriction", size: "small" })))), hasActions && (index.h("yoo-context-menu", { class: "actions", contentButtons: this.actions, onClick: (ev) => ev.stopPropagation() }, index.h("yoo-icon", { color: this.selected ? 'app-color' : 'stable-alt', name: "more", size: "small" }))))), this.invalid && (index.h("yoo-tooltip", { content: index$2.translate('INVALIDFIELDWARNINGONPAGE') }, index.h("yoo-icon", { color: "danger", name: "warning", size: "small" }))))));
+    return (index.h("yoo-form-creator-card", { description: this.description, heading: this.heading, selected: this.selected }, index.h("div", { class: "content", slot: "main" }, index.h("div", { class: "count" }, index.h("yoo-icon", { color: this.selected ? 'app-color' : undefined, name: "categories", size: "small" }), index.h("span", { class: "truncated" }, hasScoringFields && `${this.scoringFields} ${overlays.translate('SCORES')}`, !hasScoringFields && hasBlock && this.block, !hasScoringFields && !hasBlock && overlays.translate('NA'))), !this.invalid && (hasActions || hasConditions || hasRestrictions) && (index.h("div", { class: "actions" }, hasConditions && (index.h("yoo-context-menu", { class: "conditions", contentButtons: this.conditionActions, onClick: (ev) => ev.stopPropagation() }, index.h("yoo-icon", { color: this.selected ? 'app-color' : 'info', name: "condition", size: "small" }))), hasRestrictions && (index.h("yoo-tooltip", { class: "restrictions", hoverable: true, content: overlays.translate('DISPLAYRESTRICTIONCONDITION') }, index.h("yoo-context-menu", { contentButtons: this.restrictionActions, onClick: (ev) => ev.stopPropagation() }, index.h("yoo-icon", { color: this.selected ? 'app-color' : 'info', name: "restriction", size: "small" })))), hasActions && (index.h("yoo-context-menu", { class: "actions", contentButtons: this.actions, onClick: (ev) => ev.stopPropagation() }, index.h("yoo-icon", { color: this.selected ? 'app-color' : 'stable-alt', name: "more", size: "small" }))))), this.invalid && (index.h("yoo-tooltip", { content: overlays.translate('INVALIDFIELDWARNINGONPAGE') }, index.h("yoo-icon", { color: "danger", name: "warning", size: "small" }))))));
   }
 };
 YooFormCreatorPageCardComponent.style = formCreatorPageCardCss;

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
+const index = require('./index-6482c595.js');
 const formField_instance = require('./form-field.instance-610e61e1.js');
 
 const YooFormCreatorRestrictionSelectorComponent = class {