@yoobic/yobi 8.5.0-60 → 8.5.0-62

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

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-9ca0e46c.js');
-const index$1 = require('./index-a1bbe627.js');
-require('./index-9aadeb94.js');
+const index$1 = require('./index-cb8276bc.js');
+require('./index-7790c794.js');
 const lodash = require('./lodash-a9050d79.js');
-const index$3 = require('./index-6262b0ee.js');
-const index$2 = require('./index-ba1443ff.js');
-const overlays = require('./overlays-e5d2ff76.js');
+const index$4 = require('./index-57c6f364.js');
+const index$3 = require('./index-c178e61e.js');
+const index$2 = require('./index-4cdf7949.js');
 require('./annotations-helpers-fb554cca.js');
 require('./_commonjsHelpers-94df2ea7.js');
 
@@ -91,7 +91,7 @@ const YooFormCreatorBlockExpandableComponent = class {
   }
   get formIcon() {
     let retrievedIcon = this.formField.icon;
-    if (overlays.isNullOrUndefined(retrievedIcon)) {
+    if (index$2.isNullOrUndefined(retrievedIcon)) {
       const index = index$1.ALL_MOBILE_FORM_FIELDS.findIndex((formField) => formField.type === this.formField.type);
       if (index > -1) {
         retrievedIcon = index$1.ALL_MOBILE_FORM_FIELDS[index].icon;
@@ -153,7 +153,7 @@ const YooFormCreatorBlockExpandableComponent = class {
     var _a, _b;
     if (this.mode === 'added') {
       this.onBlockResize();
-      this.resizeListener = overlays.debounce(this.onBlockResize, 500).bind(this);
+      this.resizeListener = index$2.debounce(this.onBlockResize, 500).bind(this);
       // eslint-disable-next-line no-undef
       window.addEventListener('resize', this.resizeListener);
     }
@@ -185,7 +185,7 @@ const YooFormCreatorBlockExpandableComponent = class {
       return;
     }
     const selectedFields = [{ name: this.formField.name, slideIndex: this.formField.pageIndex, itemIndex: this.formField.formCreatorIndex }];
-    this.moveActions = index$2.setBlockSelection(this.itemList, null, (slideIndex, _itemIndex, itemId) => this.moveFieldClicked.emit({ targetFieldName: itemId, targetFieldSlideIndex: slideIndex, selectedField: selectedFields }), {
+    this.moveActions = index$3.setBlockSelection(this.itemList, null, (slideIndex, _itemIndex, itemId) => this.moveFieldClicked.emit({ targetFieldName: itemId, targetFieldSlideIndex: slideIndex, selectedField: selectedFields }), {
       selectedFields,
       extraStartingItems: [
         {
@@ -203,7 +203,7 @@ const YooFormCreatorBlockExpandableComponent = class {
     });
     this.secondaryActions = lodash.compact([
       {
-        text: overlays.translate('DUPLICATE'),
+        text: index$2.translate('DUPLICATE'),
         icon: 'duplicate',
         handler: () => this.duplicateClicked.emit({ name: this.formField.name })
       },
@@ -223,24 +223,24 @@ const YooFormCreatorBlockExpandableComponent = class {
       // },
       this.moveActions
         ? {
-          text: overlays.translate('YOOBICMOVE'),
+          text: index$2.translate('YOOBICMOVE'),
           icon: 'move',
           subMenu: this.moveActions,
           hasDivider: true
         }
         : null,
       {
-        text: overlays.translate('LOGIC'),
+        text: index$2.translate('LOGIC'),
         icon: 'logic',
         isVisible: () => this.campaignType !== 'lesson',
         subMenu: [
           {
-            text: overlays.translate('CREATECONDITION'),
+            text: index$2.translate('CREATECONDITION'),
             icon: 'condition',
             handler: () => this.createNewCondition.emit({ name: this.formField.name })
           },
           {
-            text: overlays.translate('ADDRESTRICTION'),
+            text: index$2.translate('ADDRESTRICTION'),
             icon: 'restriction',
             handler: () => this.createNewRestriction.emit({
               name: this.formField.name,
@@ -253,7 +253,7 @@ const YooFormCreatorBlockExpandableComponent = class {
         ]
       },
       {
-        text: overlays.translate('ENABLETRANSLATION'),
+        text: index$2.translate('ENABLETRANSLATION'),
         icon: 'translate',
         handler: () => {
           if (this.isExpanded) {
@@ -270,26 +270,26 @@ const YooFormCreatorBlockExpandableComponent = class {
       //   isVisible: () => this.campaignType !== 'lesson' && this.formField.category !== 'information'
       // },
       {
-        text: overlays.translate('SAVEASTEMPLATE'),
+        text: index$2.translate('SAVEASTEMPLATE'),
         icon: 'dashboards',
         handler: () => this.saveAsTemplateClicked.emit({ name: this.formField.name }),
         isVisible: () => this.campaignType !== 'lesson'
       },
       {
-        text: overlays.translate('DELETE'),
+        text: index$2.translate('DELETE'),
         icon: 'delete',
         isVisible: () => !this.formField.locked,
         handler: () => this.deleteClicked.emit({ name: this.formField.name })
       }
     ]);
     if (this.hasRestriction()) {
-      this.restrictionActions = index$2.setRestrictionAndConditionActions(true, (_a = this.formField) === null || _a === void 0 ? void 0 : _a.restrictionConditions, this.restrictionConditionClicked, {
+      this.restrictionActions = index$3.setRestrictionAndConditionActions(true, (_a = this.formField) === null || _a === void 0 ? void 0 : _a.restrictionConditions, this.restrictionConditionClicked, {
         event: this.removeConditionClicked,
         options: { name: this.formField.name }
       });
     }
     if (((_c = (_b = this.formField) === null || _b === void 0 ? void 0 : _b.parentFieldConditions) === null || _c === void 0 ? void 0 : _c.length) > 0) {
-      this.conditionActions = index$2.setRestrictionAndConditionActions(false, (_d = this.formField) === null || _d === void 0 ? void 0 : _d.parentFieldConditions, this.conditionClicked, {
+      this.conditionActions = index$3.setRestrictionAndConditionActions(false, (_d = this.formField) === null || _d === void 0 ? void 0 : _d.parentFieldConditions, this.conditionClicked, {
         event: this.removeConditionClicked,
         options: { name: this.formField.name }
       });
@@ -332,14 +332,14 @@ const YooFormCreatorBlockExpandableComponent = class {
             this.isAnimating = false;
             if (slotContent) {
               slotContent.style.display = 'block';
-              overlays.gsapTo(slotContent, 0.35, { opacity: 1 });
+              index$2.gsapTo(slotContent, 0.35, { opacity: 1 });
             }
             if (this.contentBottomElement) {
               this.contentBottomElement.style.display = 'flex';
             }
-            overlays.gsapSet(slotContent, { overflow: 'unset' });
+            index$2.gsapSet(slotContent, { overflow: 'unset' });
           },
-          ease: overlays.Power3.easeIn
+          ease: index$2.Power3.easeIn
         };
         const animationDelay = 0.5;
         this.isExpanded = shouldExpand;
@@ -347,7 +347,7 @@ const YooFormCreatorBlockExpandableComponent = class {
         if (this.arrowElement) {
           this.arrowElement.name = this.isExpanded ? 'arrow-up' : 'arrow-down';
         }
-        overlays.gsapFromTo(contentBlock, animationDelay, from, to);
+        index$2.gsapFromTo(contentBlock, animationDelay, from, to);
       }
     }
   }
@@ -461,7 +461,7 @@ const YooFormCreatorBlockExpandableComponent = class {
   }
   renderFieldConditionBlocks(fieldCondition, index, isLastCondition) {
     if (fieldCondition.fields) {
-      const { sequentialFields, nonSequentialFields } = index$2.filterSequentialFields(fieldCondition);
+      const { sequentialFields, nonSequentialFields } = index$3.filterSequentialFields(fieldCondition);
       const containsSequentialFields = sequentialFields && sequentialFields.length > 0;
       return [
         nonSequentialFields === null || nonSequentialFields === void 0 ? void 0 : nonSequentialFields.map((field, fieldIndex) => {
@@ -495,7 +495,7 @@ const YooFormCreatorBlockExpandableComponent = class {
           [this.formField.category]: !isCondition,
           condition: isCondition,
           'has-hover-affect': this.showConditions && isLast
-        } }, this.showConditions && isLast && (index.h("yoo-tooltip", { placement: "left", hoverable: true, content: overlays.translate(condition ? 'NEWFIELDUNDERCONDITION' : 'ADDCONDITION') }, index.h("div", { class: "tooltip-container" }, index.h("yoo-icon", { name: "circle-plus", color: isCondition ? 'stable' : 'dark', class: { [this.formField.category]: !isCondition }, onClick: () => this.onHoverPlusClicked(condition, newConditionIndex) })))))),
+        } }, this.showConditions && isLast && (index.h("yoo-tooltip", { placement: "left", hoverable: true, content: index$2.translate(condition ? 'NEWFIELDUNDERCONDITION' : 'ADDCONDITION') }, index.h("div", { class: "tooltip-container" }, index.h("yoo-icon", { name: "circle-plus", color: isCondition ? 'stable' : 'dark', class: { [this.formField.category]: !isCondition }, onClick: () => this.onHoverPlusClicked(condition, newConditionIndex) })))))),
       index.h("div", { class: {
           'child-block-indicator': true,
           [this.formField.category]: !isCondition,
@@ -531,7 +531,7 @@ const YooFormCreatorBlockExpandableComponent = class {
   renderExpandableFieldBlock({ opValues, required, hideMobile, formCreatorIndex, type, values, title, icon, category, customName, name, isExpanded, parentConditions, condition, nonSequentialConditionalFieldPosition, sequentialConditionalField, hasScoring, selected }, index$1, isLastCondition, isLastField) {
     var _a;
     const childConditions = condition;
-    const { restrictionConditions, fieldConditions } = index$2.setRestrictionAndFieldConditions(childConditions);
+    const { restrictionConditions, fieldConditions } = index$3.setRestrictionAndFieldConditions(childConditions);
     if (values === null && opValues && opValues.length > 0) {
       values = opValues[0];
     }
@@ -559,7 +559,7 @@ const YooFormCreatorBlockExpandableComponent = class {
     if (!isSequential && nonSequentialConditionalFieldPosition && !this.showConditionBlock) {
       return null;
     }
-    const { childFields, sequentialConditionFields } = index$2.setChildFields(parentConditions, formCreatorIndex);
+    const { childFields, sequentialConditionFields } = index$3.setChildFields(parentConditions, formCreatorIndex);
     const newCondition = Array.isArray(condition) ? condition[0] : condition;
     return (index.h("div", { class: {
         'sortable-container child-block-container': true,
@@ -569,14 +569,14 @@ const YooFormCreatorBlockExpandableComponent = class {
       }, formField: formField, initialBlockIndentation: this.blockIndentation, mode: nonSequentialConditionalFieldPosition && !isSequential ? 'placeholder' : 'added', isInSelectionMode: this.isInSelectionMode, blockFieldExpansion: this.blockFieldExpansion, showConditions: this.showConditionBlock, numberOfBlocksToRender: this.numberOfBlocksToRender, sequentialConditionFields: sequentialConditionFields, itemList: this.itemList, parentConditionId: condition._id, translations: this.translations, baseLanguage: this.baseLanguage, invalid: (_a = this.invalidFields) === null || _a === void 0 ? void 0 : _a.includes(name), invalidFields: this.invalidFields, disableFieldTranslation: this.disableFieldTranslation }, isSequential && (index.h("div", { class: "nested-child-slot", slot: customName || name }, index.h("slot", { name: customName || name }))), childFields === null || childFields === void 0 ? void 0 :
       childFields.map((childField) => childField.sequentialConditionalField && (index.h("div", { class: "child-slot", slot: childField.name }, index.h("slot", { name: childField.name })))))));
   }
-  renderExpandablePageBlock(pageLinks, index$2, isLastCondition, isLastField, condition) {
+  renderExpandablePageBlock(pageLinks, index$3, isLastCondition, isLastField, condition) {
     return (index.h("div", { class: {
         'sortable-container child-block-container': true,
         indent: this.showConditions
       } }, this.renderChildBlockMarkerAndIndicator(this.showConditions, false, isLastField), !isLastCondition && this.showConditions && this.renderChildBlockMarkerAndIndicator(false, true), index.h("yoo-form-creator-block-expandable", { ref: (el) => {
-        this.expandableChildBlocks[index$2] = el;
+        this.expandableChildBlocks[index$3] = el;
       }, pageLinks: pageLinks, mode: "placeholder-page", formField: {
-        title: overlays.translate('SHOWPAGES'),
+        title: index$2.translate('SHOWPAGES'),
         category: index$1.FormFieldCategory.page,
         icon: 'pages',
         pageIndex: this.formField.pageIndex,
@@ -585,7 +585,7 @@ const YooFormCreatorBlockExpandableComponent = class {
   }
   renderHeader() {
     var _a, _b;
-    let title = overlays.translateMulti(this.formField.title);
+    let title = index$2.translateMulti(this.formField.title);
     const index$1 = (_a = this.translations) === null || _a === void 0 ? void 0 : _a.findIndex((tran) => { var _a, _b; return tran.key === ((_b = (_a = this.formField) === null || _a === void 0 ? void 0 : _a.title) === null || _b === void 0 ? void 0 : _b.replace(/%/g, '')); });
     if (index$1 > -1) {
       title = this.translations[index$1][this.baseLanguage];
@@ -594,19 +594,19 @@ const YooFormCreatorBlockExpandableComponent = class {
         'form-icon': true,
         'boost lesson': this.campaignType === 'lesson',
         [(_b = this.formField.category) === null || _b === void 0 ? void 0 : _b.toLowerCase()]: !this.useAppColour
-      }, onClick: () => this.onHeaderClicked() }, index.h("yoo-icon", { name: this.formIcon, color: "light", size: "small" }), (this.mode === 'added' || this.mode === 'no-expand') && (this.formField.formCreatorIndex || this.formField.formCreatorIndex === 0) && (index.h("div", { class: "position-title" }, `${this.formField.formCreatorIndex + 1}`))), index.h("div", { class: "title", innerHTML: title, "data-id": this.formField.name, onClick: () => this.onHeaderClicked() }), (this.mode === 'added' || this.mode === 'no-expand') && this.renderActionIconsContainer(), this.mode === 'new' && this.renderAdd(), this.mode === 'placeholder' && this.renderPlaceholderLink(), this.mode === 'placeholder-page' && this.renderPagePlaceholder()));
+      }, onClick: () => this.onHeaderClicked() }, index.h("yoo-icon", { name: this.formIcon, color: "light", size: "small" }), (this.mode === 'added' || this.mode === 'no-expand') && (this.formField.formCreatorIndex || this.formField.formCreatorIndex === 0) && (index.h("div", { class: "position-title" }, `${this.formField.formCreatorIndex + 1}`))), index.h("div", { class: "title", innerHTML: title, "data-id": this.formField.name, onClick: () => this.onHeaderClicked() }), this.formField.isNew && index.h("yoo-tag", { style: { 'margin-left': '0.5rem' }, color: "app-color" }, index$2.translate('YOOBICNEW')), (this.mode === 'added' || this.mode === 'no-expand') && this.renderActionIconsContainer(), this.mode === 'new' && this.renderAdd(), this.mode === 'placeholder' && this.renderPlaceholderLink(), this.mode === 'placeholder-page' && this.renderPagePlaceholder()));
   }
   renderPagePlaceholder() {
     return (index.h("div", { class: "icons-container pages" }, index.h("yoo-context-menu", { contentButtons: this.pagePlaceholderActions, multipleSelection: true, onContextMenuClosed: (ev) => this.onPageCondiionsChanged(ev, this.formField.pageCondition) }, index.h("div", { class: "page-title-container" }, this.pageLinks &&
       this.pageLinks.length > 0 &&
-      this.pageLinks.map((pageIndex, index$1) => (index.h("div", { class: "page-title" }, overlays.translate('YOOBICPAGE'), " ", pageIndex + 1, index$1 < this.pageLinks.length - 1 ? ',' : ''))))), index.h("div", { class: "icon-container" }, index.h("yoo-icon", { name: "cross", color: "stable", onClick: (ev) => this.onRemoveAllPageConditions(ev, this.formField.pageCondition) }))));
+      this.pageLinks.map((pageIndex, index$1) => (index.h("div", { class: "page-title" }, index$2.translate('YOOBICPAGE'), " ", pageIndex + 1, index$1 < this.pageLinks.length - 1 ? ',' : ''))))), index.h("div", { class: "icon-container" }, index.h("yoo-icon", { name: "cross", color: "stable", onClick: (ev) => this.onRemoveAllPageConditions(ev, this.formField.pageCondition) }))));
   }
   renderPlaceholderLink() {
     const linkToField = {
       ...this.formField.nonSequentialConditionalFieldPosition,
       name: this.formField.name
     };
-    return (index.h("div", { class: "icons-container link", onClick: () => this.linkToFieldClicked.emit(linkToField) }, index.h("div", { class: "page-title" }, overlays.translate('YOOBICPAGE') + ' ' + (this.formField.nonSequentialConditionalFieldPosition.slideIndex + 1)), index.h("div", { class: "icon-container" }, index.h("yoo-icon", { name: "view" }), index.h("yoo-icon", { name: "cross", color: "stable", onClick: (ev) => this.onRemoveCondition(ev, this.formField.name) }))));
+    return (index.h("div", { class: "icons-container link", onClick: () => this.linkToFieldClicked.emit(linkToField) }, index.h("div", { class: "page-title" }, index$2.translate('YOOBICPAGE') + ' ' + (this.formField.nonSequentialConditionalFieldPosition.slideIndex + 1)), index.h("div", { class: "icon-container" }, index.h("yoo-icon", { name: "view" }), index.h("yoo-icon", { name: "cross", color: "stable", onClick: (ev) => this.onRemoveCondition(ev, this.formField.name) }))));
   }
   onAdditionClicked() {
     this.additionClicked.emit({
@@ -624,17 +624,17 @@ const YooFormCreatorBlockExpandableComponent = class {
   renderAdd() {
     const customFieldActions = [
       {
-        text: overlays.translate('YOOBICADD'),
+        text: index$2.translate('YOOBICADD'),
         icon: 'plus',
         handler: () => this.onAdditionClicked()
       },
       {
-        text: overlays.translate('YOOBICEDIT'),
+        text: index$2.translate('YOOBICEDIT'),
         icon: 'pen',
         handler: () => this.customFieldBlockEdited.emit(this.formField.name)
       },
       {
-        text: overlays.translate('DELETE'),
+        text: index$2.translate('DELETE'),
         icon: 'delete',
         handler: () => this.customFieldBlockDeleted.emit(this.formField.name)
       }
@@ -644,7 +644,7 @@ const YooFormCreatorBlockExpandableComponent = class {
   renderActionIconsContainer() {
     var _a, _b;
     return (index.h("div", { class: "icons-container", onClick: (ev) => ev.stopPropagation() }, this.invalid &&
-      index.h("yoo-tooltip", { content: overlays.translate('INVALIDFIELDWARNING') }, index.h("div", { class: "icon-container" }, index.h("yoo-icon", { name: "warning", color: "danger" }))), ((_a = this.formField) === null || _a === void 0 ? void 0 : _a.title) === null && this.mode === 'added' && this.renderIcon('rejected', 'danger'), this.options.includes(index$1.FormCreatorOptions.logic) && ((_b = this.formField.parentFieldConditions) === null || _b === void 0 ? void 0 : _b.length) > 0 && (index.h("yoo-tooltip", { placement: "left", hoverable: true, content: overlays.translate('DISPLAYRESTRICTIONCONDITION') }, index.h("yoo-context-menu", { contentButtons: this.conditionActions }, this.renderIcon('condition', 'app-color')))), this.options.includes(index$1.FormCreatorOptions.logic) && this.hasRestriction() && (index.h("yoo-tooltip", { placement: "left", hoverable: true, content: overlays.translate('DISPLAYRESTRICTIONCONDITION') }, index.h("yoo-context-menu", { contentButtons: this.restrictionActions }, this.renderIcon('restriction', 'app-color')))), this.formField && this.formField.required && this.campaignType !== 'lesson' && this.renderIcon('mandatory', 'danger'), this.formField && this.formField.hideMobile && this.renderIcon('offline', 'text-color'), index.h("yoo-context-menu", { contentButtons: this.secondaryActions, onContextMenuClosed: () => (this.showInvisibleContent = false) }, this.renderIcon('more')), this.renderIcon(this.isExpanded ? 'arrow-up' : 'arrow-down')));
+      index.h("yoo-tooltip", { content: index$2.translate('INVALIDFIELDWARNING') }, index.h("div", { class: "icon-container" }, index.h("yoo-icon", { name: "warning", color: "danger" }))), ((_a = this.formField) === null || _a === void 0 ? void 0 : _a.title) === null && this.mode === 'added' && this.renderIcon('rejected', 'danger'), this.options.includes(index$1.FormCreatorOptions.logic) && ((_b = this.formField.parentFieldConditions) === null || _b === void 0 ? void 0 : _b.length) > 0 && (index.h("yoo-tooltip", { placement: "left", hoverable: true, content: index$2.translate('DISPLAYRESTRICTIONCONDITION') }, index.h("yoo-context-menu", { contentButtons: this.conditionActions }, this.renderIcon('condition', 'app-color')))), this.options.includes(index$1.FormCreatorOptions.logic) && this.hasRestriction() && (index.h("yoo-tooltip", { placement: "left", hoverable: true, content: index$2.translate('DISPLAYRESTRICTIONCONDITION') }, index.h("yoo-context-menu", { contentButtons: this.restrictionActions }, this.renderIcon('restriction', 'app-color')))), this.formField && this.formField.required && this.campaignType !== 'lesson' && this.renderIcon('mandatory', 'danger'), this.formField && this.formField.hideMobile && this.renderIcon('offline', 'text-color'), index.h("yoo-context-menu", { contentButtons: this.secondaryActions, onContextMenuClosed: () => (this.showInvisibleContent = false) }, this.renderIcon('more')), this.renderIcon(this.isExpanded ? 'arrow-up' : 'arrow-down')));
   }
   renderIcon(icon, color = 'stable') {
     var _a;
@@ -661,7 +661,7 @@ const YooFormCreatorBlockExpandableComponent = class {
       } })));
   }
   renderContent() {
-    return (index.h("div", { class: "content-container", ref: (el) => (this.contentBlockElement = el) }, index.h("slot", { name: this.formField.customName || this.formField.name }), index.h("div", { class: { invisible: true, show: this.showInvisibleContent } }), this.campaignType !== 'lesson' && !index$3.NON_CONDITION_CATEGORIES.includes(this.formField.category) && !index$3.NON_CONDITION_TYPES.includes(this.formField.type) && (index.h("div", { class: "bottom-button-container", ref: (el) => (this.contentBottomElement = el) }, index.h("yoo-tooltip", { placement: "left", hoverable: true, content: overlays.translate('ADDCONDITIONTOOLTIP') }, index.h("yoo-button", { size: "medium", color: "light", onClick: () => this.createNewCondition.emit({ name: this.formField.name }) }, index.h("yoo-icon", { size: "small", slot: "start", name: "condition" }), " ", overlays.translate('ADDCONDITION')))))));
+    return (index.h("div", { class: "content-container", ref: (el) => (this.contentBlockElement = el) }, index.h("slot", { name: this.formField.customName || this.formField.name }), index.h("div", { class: { invisible: true, show: this.showInvisibleContent } }), this.campaignType !== 'lesson' && !index$4.NON_CONDITION_CATEGORIES.includes(this.formField.category) && !index$4.NON_CONDITION_TYPES.includes(this.formField.type) && (index.h("div", { class: "bottom-button-container", ref: (el) => (this.contentBottomElement = el) }, index.h("yoo-tooltip", { placement: "left", hoverable: true, content: index$2.translate('ADDCONDITIONTOOLTIP') }, index.h("yoo-button", { size: "medium", color: "light", onClick: () => this.createNewCondition.emit({ name: this.formField.name }) }, index.h("yoo-icon", { size: "small", slot: "start", name: "condition" }), " ", index$2.translate('ADDCONDITION')))))));
   }
   renderOuterContainer() {
     var _a, _b, _c;
@@ -682,7 +682,7 @@ const YooFormCreatorBlockExpandableComponent = class {
         expanded: this.isExpanded,
         'no-indentation': this.blockIndentation,
         invalid: ((_a = this.formField) === null || _a === void 0 ? void 0 : _a.title) === null && this.mode === 'added'
-      }, "data-type": (_b = this.formField) === null || _b === void 0 ? void 0 : _b.type, onClick: (ev) => this.onParentBlockClick(ev) }, this.isInSelectionMode && (index.h("yoo-icon", { class: "select", name: this.formField.selected ? 'check' : 'circle', color: this.formField.selected ? 'app-color' : 'stable', size: "small" })), this.mode === 'new' && this.formField.category === index$1.FormFieldCategory.customfield && this.formField.description ? (index.h("yoo-tooltip", { content: overlays.translateMulti(this.formField.description) }, this.renderOuterContainer())) : (this.renderOuterContainer())));
+      }, "data-type": (_b = this.formField) === null || _b === void 0 ? void 0 : _b.type, onClick: (ev) => this.onParentBlockClick(ev) }, this.isInSelectionMode && (index.h("yoo-icon", { class: "select", name: this.formField.selected ? 'check' : 'circle', color: this.formField.selected ? 'app-color' : 'stable', size: "small" })), this.mode === 'new' && this.formField.category === index$1.FormFieldCategory.customfield && this.formField.description ? (index.h("yoo-tooltip", { content: index$2.translateMulti(this.formField.description) }, this.renderOuterContainer())) : (this.renderOuterContainer())));
   }
   get host() { return index.getElement(this); }
   static get watchers() { return {

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

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-9ca0e46c.js');
-require('./index-9aadeb94.js');
-const commonHelpers = require('./common-helpers-9f63a319.js');
-const index$1 = require('./index-9c56868f.js');
-const overlays = require('./overlays-e5d2ff76.js');
+require('./index-7790c794.js');
+const commonHelpers = require('./common-helpers-0724ae60.js');
+const index$2 = require('./index-9c56868f.js');
+const index$1 = require('./index-4cdf7949.js');
 require('./lodash-a9050d79.js');
-require('./index-a1bbe627.js');
+require('./index-cb8276bc.js');
 require('./_commonjsHelpers-94df2ea7.js');
 
 const formCreatorBlockSimpleCss = "svg:not(:root){overflow:hidden}:host .outer-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;width:100%;height:2.375rem;background:var(--light, #ffffff);border-radius:var(--border-radius-08, 0.5rem)}:host .outer-container .form-icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:2.5rem;height:1.25rem;margin:0 var(--spacing-08, 0.5rem);color:var(--light, #ffffff);font-size:var(--font-size-12, 0.75rem);border-radius:var(--border-radius-04, 0.25rem);background-color:var(--accent, #276ef1)}:host .outer-container .form-icon.multimedia,:host .outer-container .form-icon.learn,:host .outer-container .form-icon.uiactions,:host .outer-container .form-icon.action{background-color:var(--info, #d84c96)}:host .outer-container .form-icon.select,:host .outer-container .form-icon.events,:host .outer-container .form-icon.dataevents,:host .outer-container .form-icon.trigger{background-color:var(--accent, #276ef1)}:host .outer-container .form-icon.textcategory,:host .outer-container .form-icon.condition{background-color:var(--energized, #ffc043)}:host .outer-container .form-icon.number,:host .outer-container .form-icon.appcreatorapp,:host .outer-container .form-icon.customfield,:host .outer-container .form-icon.lesson,:host .outer-container .form-icon.boostcontent{background-color:var(--app-color, #5a30f4)}:host .outer-container .form-icon.contactdetail,:host .outer-container .form-icon.engage,:host .outer-container .form-icon.information,:host .outer-container .form-icon.nativeactions,:host .outer-container .form-icon.entity,:host .outer-container .form-icon.notification{background-color:var(--warning, #ed6e33)}:host .outer-container .form-icon.no-scoring,:host .outer-container .form-icon.waitfor{background-color:var(--text-color, #807f83)}:host .outer-container .form-icon.actioncategory,:host .outer-container .form-icon.logic{background-color:var(--anthracite, #1a1a1a)}:host .outer-container .form-icon.dateandtime{background-color:var(--dark, #000000)}:host .outer-container .form-icon.catalogandbarcode,:host .outer-container .form-icon.notifications{background-color:var(--danger, #d44333)}:host .outer-container .form-icon.condition{background-color:var(--stable, #adadad)}:host .outer-container .form-icon.page,:host .outer-container .form-icon.dataactions,:host .outer-container .form-icon.operate{background-color:var(--success, #3aa76d)}:host .outer-container .form-icon yoo-icon{margin:0 var(--spacing-04, 0.25rem)}:host .outer-container .title-container{width:100%}:host .outer-container yoo-form-autocomplete{width:100%;min-width:7.5rem;max-width:10rem;margin-right:var(--spacing-08, 0.5rem)}:host .outer-container .conditional-indicator{position:absolute;top:2.375rem;right:auto;bottom:auto;left:1.5rem;position:absolute;width:0.125rem;height:2rem;background:var(--stable, #adadad)}:host .outer-container .conditional-marker{width:0.5rem;height:0.5rem;background:var(--stable, #adadad);border-radius:var(--border-radius-02, 0.125rem);position:absolute;top:4rem;right:auto;bottom:auto;left:1.3125rem}:host .outer-container .conditional-text{position:absolute;top:3.75rem;right:auto;bottom:auto;left:2.75rem;color:var(--light, #ffffff);font-weight:var(--font-weight-300, 300);font-size:var(--font-size-12, 0.75rem)}:host .outer-container .conditional-border{position:absolute;top:3rem;right:auto;bottom:auto;left:5rem;width:4rem;height:2.5rem;border:var(--border-width-01, 0.0625rem) dashed var(--light, #ffffff);border-radius:var(--border-radius-02, 0.125rem);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}:host(.shadow) .outer-container{-webkit-box-shadow:0 5px 15px 0 rgba(0, 0, 0, 0.05);box-shadow:0 5px 15px 0 rgba(0, 0, 0, 0.05)}";
@@ -21,16 +21,16 @@ const YooFormCreatorBlockSimpleComponent = class {
     this.showConditionalBlock = false;
   }
   render() {
-    return (index.h(index.Host, { class: commonHelpers.getAppContext(this.host) }, index.h("div", { class: "outer-container" }, index.h("div", { class: { 'form-icon': true, [this.formField.category]: true } }, index.h("yoo-icon", { color: "light", name: this.formField.icon, size: "small" }), this.formField.formCreatorIndex && `${this.formField.formCreatorIndex}`), this.formField.title && index.h("div", { class: "title-container" }, overlays.translateMulti(this.formField.title)), this.isWorkflow && (index.h("yoo-form-autocomplete", { idAttributeName: "title", size: "small", value: this.fieldState, values: index$1.fieldStateOptions, disableSingleDeselection: true, onInputChanged: (ev) => {
+    return (index.h(index.Host, { class: commonHelpers.getAppContext(this.host) }, index.h("div", { class: "outer-container" }, index.h("div", { class: { 'form-icon': true, [this.formField.category]: true } }, index.h("yoo-icon", { color: "light", name: this.formField.icon, size: "small" }), this.formField.formCreatorIndex && `${this.formField.formCreatorIndex}`), this.formField.title && index.h("div", { class: "title-container" }, index$1.translateMulti(this.formField.title)), this.isWorkflow && (index.h("yoo-form-autocomplete", { idAttributeName: "title", size: "small", value: this.fieldState, values: index$2.fieldStateOptions, disableSingleDeselection: true, onInputChanged: (ev) => {
         ev.stopImmediatePropagation();
         this.fieldStateChanged.emit(ev.detail);
       } })), this.showConditionalBlock && [
-      overlays.translate('FIELDIF'),
+      index$1.translate('FIELDIF'),
       index.h("div", { class: "form-icon select" }, index.h("yoo-icon", { color: "light", name: "buttons-single-choice", size: "small" }), "1")
     ], this.showConditionalBlock && [
       index.h("div", { class: "conditional-indicator" }),
       index.h("div", { class: "conditional-marker" }),
-      index.h("div", { class: "conditional-text" }, overlays.translate('YOOBICTHEN')),
+      index.h("div", { class: "conditional-text" }, index$1.translate('YOOBICTHEN')),
       index.h("div", { class: "conditional-border" }, index.h("div", { class: "form-icon information" }, index.h("yoo-icon", { color: "light", name: "image", size: "small" }), "2"))
     ])));
   }

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

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-9ca0e46c.js');
-const index$1 = require('./index-a1bbe627.js');
-require('./index-9aadeb94.js');
-const index$3 = require('./index-7d3c7ee7.js');
-const index$2 = require('./index-ba1443ff.js');
-const overlays = require('./overlays-e5d2ff76.js');
+const index$1 = require('./index-cb8276bc.js');
+require('./index-7790c794.js');
+const index$4 = require('./index-7d3c7ee7.js');
+const index$2 = require('./index-c178e61e.js');
+const index$3 = require('./index-4cdf7949.js');
 require('./lodash-a9050d79.js');
 require('./annotations-helpers-fb554cca.js');
 require('./_commonjsHelpers-94df2ea7.js');
@@ -121,7 +121,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: overlays.translate('DELETE'), icon: 'delete', handler: () => this.deleteCondition.emit({ conditionId: this.condition._id }) }];
+    this.secondaryActions = [{ text: index$3.translate('DELETE'), icon: 'delete', handler: () => this.deleteCondition.emit({ conditionId: this.condition._id }) }];
   }
   onSelectItem(slideIndex, itemIndex) {
     this.addCondition.emit({ slideIndex, itemIndex, condition: this.condition });
@@ -142,10 +142,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 (overlays.isNullOrUndefined((_a = condition === null || condition === void 0 ? void 0 : condition.field) === null || _a === void 0 ? void 0 : _a.values)) {
+    if (index$3.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' && !overlays.isNullOrUndefined(condition.value)) {
+    if (conditionAttribute === 'values' && !index$3.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
@@ -177,13 +177,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 ? 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 :
+      } }, 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 :
       _b.map((conditionValue) => {
         if (this.parentFieldType === 'feedback') {
-          return index$3.feedbackValues[conditionValue - 1];
+          return index$4.feedbackValues[conditionValue - 1];
         }
-        else if (!overlays.isNullOrUndefined(conditionValue)) {
-          return `"${overlays.translateMulti(conditionValue)}" `;
+        else if (!index$3.isNullOrUndefined(conditionValue)) {
+          return `"${index$3.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))));
@@ -216,14 +216,14 @@ const YooFormCreatorConditionBlockComponent = class {
     let operatorInterfaces = [];
     if (this.type === 'tags' || this.type === 'groups') {
       operatorInterfaces = [
-        { text: overlays.translate('YOOBICIN'), operator: 'in' },
-        { text: overlays.translate('ISNOTIN'), operator: 'notin' }
+        { text: index$3.translate('YOOBICIN'), operator: 'in' },
+        { text: index$3.translate('ISNOTIN'), operator: 'notin' }
       ];
     }
     else {
       if (this.parentField && this.parentField.conditionalOperators) {
         this.parentField.conditionalOperators.forEach((operator) => {
-          const operatorAction = { text: overlays.translate(operator.toUpperCase()), operator: operator };
+          const operatorAction = { text: index$3.translate(operator.toUpperCase()), operator: operator };
           operatorInterfaces.push(operatorAction);
         });
       }
@@ -275,12 +275,12 @@ const YooFormCreatorConditionBlockComponent = class {
   renderOperatorContainer() {
     var _a;
     const operatorActions = this.getOperatorActions();
-    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)));
+    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)));
   }
   renderValuesContainer() {
-    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()));
+    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()));
   }
   renderFieldValues() {
     switch (this.parentField.conditionalValues) {
@@ -303,7 +303,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: overlays.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: index$3.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) })));
@@ -319,25 +319,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: overlays.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: index$3.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 = overlays.translate('PLEASESELECTVALUE');
+    const valuesPlaceholder = index$3.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)
-      : overlays.translate('NOVALUESPLEASEADD')));
+      : index$3.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" }, 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')))));
+    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')))));
   }
   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

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-9ca0e46c.js');
-const index$1 = require('./index-a1bbe627.js');
-require('./index-9aadeb94.js');
+const index$1 = require('./index-cb8276bc.js');
+require('./index-7790c794.js');
 const gridstackDdNative = require('./gridstack-dd-native-f6c2bb35.js');
 const lodash = require('./lodash-a9050d79.js');
-const index$2 = require('./index-6262b0ee.js');
-const overlays = require('./overlays-e5d2ff76.js');
+const index$3 = require('./index-57c6f364.js');
+const index$2 = require('./index-4cdf7949.js');
 require('./_commonjsHelpers-94df2ea7.js');
 
 const formCreatorFieldSelectorCss = "svg:not(:root){overflow:hidden}: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}";
@@ -96,7 +96,7 @@ const YooFormCreatorFieldSelectorComponent = class {
             const child = document.createElement('div');
             child.classList.add('grid-stack-item-content');
             const title = document.createElement('div.title');
-            title.innerText = overlays.translate(event.currentTarget.getAttribute('attr-title'));
+            title.innerText = index$2.translate(event.currentTarget.getAttribute('attr-title'));
             child.appendChild(title);
             el.appendChild(child);
             return el;
@@ -113,7 +113,7 @@ const YooFormCreatorFieldSelectorComponent = class {
       this.categories.forEach((category) => {
         this.simpleFormBlocks[category] = initialBlocks[category].filter((block) => {
           var _a;
-          const translatedFormBlockTitle = overlays.translate(block.title);
+          const translatedFormBlockTitle = index$2.translate(block.title);
           return translatedFormBlockTitle.toUpperCase().includes((_a = ev.detail) === null || _a === void 0 ? void 0 : _a.toUpperCase());
         });
       });
@@ -141,7 +141,8 @@ const YooFormCreatorFieldSelectorComponent = class {
         name: field.name,
         description: field.description,
         expanded: false,
-        config: field.config
+        config: field.config,
+        isNew: field.isNew
       };
       return (index.h("div", { class: { 'simple-block-container': true, [`custom-field-${itemIndex}`]: category === index$1.FormFieldCategory.customfield } }, !this.useGridstack && index.h("yoo-form-creator-block-expandable", { options: this.options, ref: (el) => {
           if (category !== index$1.FormFieldCategory.customfield) {
@@ -149,7 +150,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" }, overlays.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" }, index$2.translate(formField.title)), index.h("div", { class: "grid-stack-item-content" }))));
     }
   }
   shouldRenderEmptyState(entries) {
@@ -170,7 +171,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$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) => {
+    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) => {
       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

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-9ca0e46c.js');
-const index$1 = require('./index-a1bbe627.js');
-require('./index-9aadeb94.js');
-const commonHelpers = require('./common-helpers-9f63a319.js');
-const overlays = require('./overlays-e5d2ff76.js');
+const index$1 = require('./index-cb8276bc.js');
+require('./index-7790c794.js');
+const commonHelpers = require('./common-helpers-0724ae60.js');
+const index$2 = require('./index-4cdf7949.js');
 require('./lodash-a9050d79.js');
 require('./_commonjsHelpers-94df2ea7.js');
 
@@ -44,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" }, overlays.translate(this.prefixTitle || (this.isLesson ? 'LESSONCREATOR' : 'CAMPAIGNCREATOR'))), index.h("div", { class: "stable" }, "/"), index.h("span", null, overlays.translateMulti(this.formTitle))));
+    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))));
   }
   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" }, overlays.translate('YOOBICSAVE')), index.h("yoo-button", { onClick: () => this.closeClicked.emit(), size: "medium", color: "stable" }, overlays.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" }, index$2.translate('YOOBICSAVE')), index.h("yoo-button", { onClick: () => this.closeClicked.emit(), size: "medium", color: "stable" }, index$2.translate('CLOSE'))));
   }
   renderWarning() {
     return (index.h("yoo-button", { "ripple-type": "unbounded", fill: "transparent", shape: "circular", color: "stable", onClick: (ev) => {
@@ -57,7 +57,7 @@ const YooFormCreatorHeaderComponent = class {
       } }, index.h("yoo-icon", { name: "warning", color: "warning" })));
   }
   renderQrCodeScanner() {
-    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) => {
+    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) => {
         ev.stopImmediatePropagation();
         this.showQrCode.emit();
       } }, index.h("yoo-icon", { name: "scan", color: "stable" }))));