@yoobic/yobi 8.5.0-6 → 8.5.0-8

package/dist/collection/components/form-creator/form-creator-block-expandable/form-creator-block-expandable.js

@@ -1,6 +1,6 @@
 import { ALL_MOBILE_FORM_FIELDS, FORM_CREATOR_OPTIONS_ALL, FormCreatorOptions, FormFieldCategory } from '@shared/interfaces';
 import { debounce, gsapFromTo, gsapSet, gsapTo, isNullOrUndefined, Power3, translate, translateMulti } from '@shared/utils';
-import { Component, Element, Event, h, Host, Method, Prop, State, Watch } from '@stencil/core';
+import { h, Host } from '@stencil/core';
 import { compact } from 'lodash-es';
 import { NON_CONDITION_CATEGORIES, NON_CONDITION_TYPES } from '../constants';
 import { filterSequentialFields, setBlockSelection, setChildFields, setRestrictionAndConditionActions, setRestrictionAndFieldConditions } from '../helpers';
@@ -473,9 +473,7 @@ export class YooFormCreatorBlockExpandableComponent {
           [this.formField.category]: !isCondition,
           condition: isCondition,
           'has-hover-affect': this.showConditions && isLast
-        } }, this.showConditions && isLast && (h("yoo-tooltip", { placement: "left", hoverable: true, content: translate(condition ? 'NEWFIELDUNDERCONDITION' : 'ADDCONDITION') },
-        h("div", { class: "tooltip-container" },
-          h("yoo-icon", { name: "circle-plus", color: isCondition ? 'stable' : 'dark', class: { [this.formField.category]: !isCondition }, onClick: () => this.onHoverPlusClicked(condition, newConditionIndex) })))))),
+        } }, this.showConditions && isLast && (h("yoo-tooltip", { placement: "left", hoverable: true, content: translate(condition ? 'NEWFIELDUNDERCONDITION' : 'ADDCONDITION') }, h("div", { class: "tooltip-container" }, h("yoo-icon", { name: "circle-plus", color: isCondition ? 'stable' : 'dark', class: { [this.formField.category]: !isCondition }, onClick: () => this.onHoverPlusClicked(condition, newConditionIndex) })))))),
       h("div", { class: {
           'child-block-indicator': true,
           [this.formField.category]: !isCondition,
@@ -506,10 +504,7 @@ export class YooFormCreatorBlockExpandableComponent {
         conditionValues = condition.group;
         break;
     }
-    return (h("div", { class: "child-block-container condition" },
-      this.renderChildBlockMarkerAndIndicator(groupTagCondition, false, isLast),
-      h("yoo-form-creator-condition-block", { class: "condition-child-block", operator: operator, type: type, conditionValues: conditionValues, fieldValues: this.formField.values, parentFieldType: this.formField.type, parentFieldIcon: this.formField.icon, parentFieldName: this.formField.name, condition: condition, itemList: this.itemList, pageIndex: this.formField.pageIndex, expandOnLoad: expandOnLoad, lastSequentialFieldIndex: lastSequentialFieldIndex }, (type === 'groups' || type === 'tags') && (h("div", { class: "tag-group-condition-slot", slot: condition._id },
-        h("slot", { name: condition._id }))))));
+    return (h("div", { class: "child-block-container condition" }, this.renderChildBlockMarkerAndIndicator(groupTagCondition, false, isLast), h("yoo-form-creator-condition-block", { class: "condition-child-block", operator: operator, type: type, conditionValues: conditionValues, fieldValues: this.formField.values, parentFieldType: this.formField.type, parentFieldIcon: this.formField.icon, parentFieldName: this.formField.name, condition: condition, itemList: this.itemList, pageIndex: this.formField.pageIndex, expandOnLoad: expandOnLoad, lastSequentialFieldIndex: lastSequentialFieldIndex }, (type === 'groups' || type === 'tags') && (h("div", { class: "tag-group-condition-slot", slot: condition._id }, h("slot", { name: condition._id }))))));
   }
   renderExpandableFieldBlock({ opValues, required, hideMobile, formCreatorIndex, type, values, title, icon, category, customName, name, isExpanded, parentConditions, condition, nonSequentialConditionalFieldPosition, sequentialConditionalField, hasScoring, selected }, index, isLastCondition, isLastField) {
     var _a;
@@ -547,33 +542,24 @@ export class YooFormCreatorBlockExpandableComponent {
     return (h("div", { class: {
         'sortable-container child-block-container': true,
         indent: this.showConditions
-      }, "data-id": name },
-      this.renderChildBlockMarkerAndIndicator(this.showConditions, false, isLastField, newCondition),
-      !isLastCondition && this.showConditions && this.renderChildBlockMarkerAndIndicator(false, true),
-      h("yoo-form-creator-block-expandable", { key: `yoo-form-creator-block-expandable-${(childFields === null || childFields === void 0 ? void 0 : childFields.length) || 0}`, ref: (el) => {
-          this.expandableChildBlocks[index] = el;
-        }, 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 && (h("div", { class: "nested-child-slot", slot: customName || name },
-          h("slot", { name: customName || name }))), childFields === null || childFields === void 0 ? void 0 :
-        childFields.map((childField) => childField.sequentialConditionalField && (h("div", { class: "child-slot", slot: childField.name },
-          h("slot", { name: childField.name })))))));
+      }, "data-id": name }, this.renderChildBlockMarkerAndIndicator(this.showConditions, false, isLastField, newCondition), !isLastCondition && this.showConditions && this.renderChildBlockMarkerAndIndicator(false, true), h("yoo-form-creator-block-expandable", { key: `yoo-form-creator-block-expandable-${(childFields === null || childFields === void 0 ? void 0 : childFields.length) || 0}`, ref: (el) => {
+        this.expandableChildBlocks[index] = el;
+      }, 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 && (h("div", { class: "nested-child-slot", slot: customName || name }, h("slot", { name: customName || name }))), childFields === null || childFields === void 0 ? void 0 :
+      childFields.map((childField) => childField.sequentialConditionalField && (h("div", { class: "child-slot", slot: childField.name }, h("slot", { name: childField.name })))))));
   }
   renderExpandablePageBlock(pageLinks, index, isLastCondition, isLastField, condition) {
     return (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),
-      h("yoo-form-creator-block-expandable", { ref: (el) => {
-          this.expandableChildBlocks[index] = el;
-        }, pageLinks: pageLinks, mode: "placeholder-page", formField: {
-          title: translate('SHOWPAGES'),
-          category: FormFieldCategory.page,
-          icon: 'pages',
-          pageIndex: this.formField.pageIndex,
-          pageCondition: condition
-        }, itemList: this.itemList })));
+      } }, this.renderChildBlockMarkerAndIndicator(this.showConditions, false, isLastField), !isLastCondition && this.showConditions && this.renderChildBlockMarkerAndIndicator(false, true), h("yoo-form-creator-block-expandable", { ref: (el) => {
+        this.expandableChildBlocks[index] = el;
+      }, pageLinks: pageLinks, mode: "placeholder-page", formField: {
+        title: translate('SHOWPAGES'),
+        category: FormFieldCategory.page,
+        icon: 'pages',
+        pageIndex: this.formField.pageIndex,
+        pageCondition: condition
+      }, itemList: this.itemList })));
   }
   renderHeader() {
     var _a, _b;
@@ -582,43 +568,23 @@ export class YooFormCreatorBlockExpandableComponent {
     if (index > -1) {
       title = this.translations[index][this.baseLanguage];
     }
-    return (h("div", { class: "header" },
-      h("div", { 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() },
-        h("yoo-icon", { name: this.formIcon, color: "light", size: "small" }),
-        (this.mode === 'added' || this.mode === 'no-expand') && (this.formField.formCreatorIndex || this.formField.formCreatorIndex === 0) && (h("div", { class: "position-title" }, `${this.formField.formCreatorIndex + 1}`))),
-      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()));
+    return (h("div", { class: "header" }, h("div", { 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() }, h("yoo-icon", { name: this.formIcon, color: "light", size: "small" }), (this.mode === 'added' || this.mode === 'no-expand') && (this.formField.formCreatorIndex || this.formField.formCreatorIndex === 0) && (h("div", { class: "position-title" }, `${this.formField.formCreatorIndex + 1}`))), 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()));
   }
   renderPagePlaceholder() {
-    return (h("div", { class: "icons-container pages" },
-      h("yoo-context-menu", { contentButtons: this.pagePlaceholderActions, multipleSelection: true, onContextMenuClosed: (ev) => this.onPageCondiionsChanged(ev, this.formField.pageCondition) },
-        h("div", { class: "page-title-container" }, this.pageLinks &&
-          this.pageLinks.length > 0 &&
-          this.pageLinks.map((pageIndex, index) => (h("div", { class: "page-title" },
-            translate('YOOBICPAGE'),
-            " ",
-            pageIndex + 1,
-            index < this.pageLinks.length - 1 ? ',' : ''))))),
-      h("div", { class: "icon-container" },
-        h("yoo-icon", { name: "cross", color: "stable", onClick: (ev) => this.onRemoveAllPageConditions(ev, this.formField.pageCondition) }))));
+    return (h("div", { class: "icons-container pages" }, h("yoo-context-menu", { contentButtons: this.pagePlaceholderActions, multipleSelection: true, onContextMenuClosed: (ev) => this.onPageCondiionsChanged(ev, this.formField.pageCondition) }, h("div", { class: "page-title-container" }, this.pageLinks &&
+      this.pageLinks.length > 0 &&
+      this.pageLinks.map((pageIndex, index) => (h("div", { class: "page-title" }, translate('YOOBICPAGE'), " ", pageIndex + 1, index < this.pageLinks.length - 1 ? ',' : ''))))), h("div", { class: "icon-container" }, 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 (h("div", { class: "icons-container link", onClick: () => this.linkToFieldClicked.emit(linkToField) },
-      h("div", { class: "page-title" }, translate('YOOBICPAGE') + ' ' + (this.formField.nonSequentialConditionalFieldPosition.slideIndex + 1)),
-      h("div", { class: "icon-container" },
-        h("yoo-icon", { name: "view" }),
-        h("yoo-icon", { name: "cross", color: "stable", onClick: (ev) => this.onRemoveCondition(ev, this.formField.name) }))));
+    return (h("div", { class: "icons-container link", onClick: () => this.linkToFieldClicked.emit(linkToField) }, h("div", { class: "page-title" }, translate('YOOBICPAGE') + ' ' + (this.formField.nonSequentialConditionalFieldPosition.slideIndex + 1)), h("div", { class: "icon-container" }, h("yoo-icon", { name: "view" }), h("yoo-icon", { name: "cross", color: "stable", onClick: (ev) => this.onRemoveCondition(ev, this.formField.name) }))));
   }
   onAdditionClicked() {
     this.additionClicked.emit({
@@ -651,27 +617,12 @@ export class YooFormCreatorBlockExpandableComponent {
         handler: () => this.customFieldBlockDeleted.emit(this.formField.name)
       }
     ];
-    return (h("div", { class: { 'icons-container': true, 'custom-field': this.formField.category === FormFieldCategory.customfield }, onClick: () => this.onAdditionClicked() },
-      this.formField.category === FormFieldCategory.customfield && h("yoo-context-menu", { contentButtons: customFieldActions }, this.renderIcon('more')),
-      h("div", { class: { 'icon-container': true, plus: true } },
-        h("yoo-icon", { name: "circle-plus", color: "stable-alt" }))));
+    return (h("div", { class: { 'icons-container': true, 'custom-field': this.formField.category === FormFieldCategory.customfield }, onClick: () => this.onAdditionClicked() }, this.formField.category === FormFieldCategory.customfield && h("yoo-context-menu", { contentButtons: customFieldActions }, this.renderIcon('more')), h("div", { class: { 'icon-container': true, plus: true } }, h("yoo-icon", { name: "circle-plus", color: "stable-alt" }))));
   }
   renderActionIconsContainer() {
     var _a, _b;
-    return (h("div", { class: "icons-container", onClick: (ev) => ev.stopPropagation() },
-      this.invalid &&
-        h("yoo-tooltip", { content: translate('INVALIDFIELDWARNING') },
-          h("div", { class: "icon-container" },
-            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(FormCreatorOptions.logic) && ((_b = this.formField.parentFieldConditions) === null || _b === void 0 ? void 0 : _b.length) > 0 && (h("yoo-tooltip", { placement: "left", hoverable: true, content: translate('DISPLAYRESTRICTIONCONDITION') },
-        h("yoo-context-menu", { contentButtons: this.conditionActions }, this.renderIcon('condition', 'app-color')))),
-      this.options.includes(FormCreatorOptions.logic) && this.hasRestriction() && (h("yoo-tooltip", { placement: "left", hoverable: true, content: translate('DISPLAYRESTRICTIONCONDITION') },
-        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'),
-      h("yoo-context-menu", { contentButtons: this.secondaryActions, onContextMenuClosed: () => (this.showInvisibleContent = false) }, this.renderIcon('more')),
-      this.renderIcon(this.isExpanded ? 'arrow-up' : 'arrow-down')));
+    return (h("div", { class: "icons-container", onClick: (ev) => ev.stopPropagation() }, this.invalid &&
+      h("yoo-tooltip", { content: translate('INVALIDFIELDWARNING') }, h("div", { class: "icon-container" }, 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(FormCreatorOptions.logic) && ((_b = this.formField.parentFieldConditions) === null || _b === void 0 ? void 0 : _b.length) > 0 && (h("yoo-tooltip", { placement: "left", hoverable: true, content: translate('DISPLAYRESTRICTIONCONDITION') }, h("yoo-context-menu", { contentButtons: this.conditionActions }, this.renderIcon('condition', 'app-color')))), this.options.includes(FormCreatorOptions.logic) && this.hasRestriction() && (h("yoo-tooltip", { placement: "left", hoverable: true, content: translate('DISPLAYRESTRICTIONCONDITION') }, 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'), 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;
@@ -679,39 +630,26 @@ export class YooFormCreatorBlockExpandableComponent {
     return (h("div", { class: {
         'icon-container': true,
         dropdown: isDropdown
-      }, onClick: () => this.onHeaderIconClicked(icon) },
-      h("yoo-icon", { "data-id": this.formField.name, ref: (el) => {
-          if (isDropdown) {
-            this.arrowElement = el;
-          }
-        }, name: icon, color: color, class: {
-          conditional: ((_a = this.formField.parentFieldConditions) === null || _a === void 0 ? void 0 : _a.length) > 0
-        } })));
+      }, onClick: () => this.onHeaderIconClicked(icon) }, h("yoo-icon", { "data-id": this.formField.name, ref: (el) => {
+        if (isDropdown) {
+          this.arrowElement = el;
+        }
+      }, name: icon, color: color, class: {
+        conditional: ((_a = this.formField.parentFieldConditions) === null || _a === void 0 ? void 0 : _a.length) > 0
+      } })));
   }
   renderContent() {
-    return (h("div", { class: "content-container", ref: (el) => (this.contentBlockElement = el) },
-      h("slot", { name: this.formField.customName || this.formField.name }),
-      h("div", { class: { invisible: true, show: this.showInvisibleContent } }),
-      this.campaignType !== 'lesson' && !NON_CONDITION_CATEGORIES.includes(this.formField.category) && !NON_CONDITION_TYPES.includes(this.formField.type) && (h("div", { class: "bottom-button-container", ref: (el) => (this.contentBottomElement = el) },
-        h("yoo-tooltip", { placement: "left", hoverable: true, content: translate('ADDCONDITIONTOOLTIP') },
-          h("yoo-button", { size: "medium", color: "light", onClick: () => this.createNewCondition.emit({ name: this.formField.name }) },
-            h("yoo-icon", { size: "small", slot: "start", name: "condition" }),
-            " ",
-            translate('ADDCONDITION')))))));
+    return (h("div", { class: "content-container", ref: (el) => (this.contentBlockElement = el) }, h("slot", { name: this.formField.customName || this.formField.name }), h("div", { class: { invisible: true, show: this.showInvisibleContent } }), this.campaignType !== 'lesson' && !NON_CONDITION_CATEGORIES.includes(this.formField.category) && !NON_CONDITION_TYPES.includes(this.formField.type) && (h("div", { class: "bottom-button-container", ref: (el) => (this.contentBottomElement = el) }, h("yoo-tooltip", { placement: "left", hoverable: true, content: translate('ADDCONDITIONTOOLTIP') }, h("yoo-button", { size: "medium", color: "light", onClick: () => this.createNewCondition.emit({ name: this.formField.name }) }, h("yoo-icon", { size: "small", slot: "start", name: "condition" }), " ", translate('ADDCONDITION')))))));
   }
   renderOuterContainer() {
     var _a, _b, _c;
     const showHeaderBlock = !!(this.formField || (this.mode === 'placeholder-page' && this.pageLinks));
     const showContentBlock = !!(this.formField && this.mode !== 'placeholder' && this.mode !== 'placeholder-page');
-    return (h("div", { class: "outer-container" },
-      h("div", { class: {
-          'parent-block-container': true,
-          [(_b = (_a = this.formField) === null || _a === void 0 ? void 0 : _a.category) === null || _b === void 0 ? void 0 : _b.toLowerCase()]: true,
-          [(_c = this.formField) === null || _c === void 0 ? void 0 : _c.type]: true
-        } },
-        showHeaderBlock && this.renderHeader(),
-        showContentBlock && this.renderContent()),
-      this.hasCondition() && this.mode !== 'placeholder' && this.renderConditions()));
+    return (h("div", { class: "outer-container" }, h("div", { class: {
+        'parent-block-container': true,
+        [(_b = (_a = this.formField) === null || _a === void 0 ? void 0 : _a.category) === null || _b === void 0 ? void 0 : _b.toLowerCase()]: true,
+        [(_c = this.formField) === null || _c === void 0 ? void 0 : _c.type]: true
+      } }, showHeaderBlock && this.renderHeader(), showContentBlock && this.renderContent()), this.hasCondition() && this.mode !== 'placeholder' && this.renderConditions()));
   }
   render() {
     var _a, _b;
@@ -722,829 +660,841 @@ export class YooFormCreatorBlockExpandableComponent {
         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 && (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 === FormFieldCategory.customfield && this.formField.description ? (h("yoo-tooltip", { content: 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 && (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 === FormFieldCategory.customfield && this.formField.description ? (h("yoo-tooltip", { content: translateMulti(this.formField.description) }, this.renderOuterContainer())) : (this.renderOuterContainer())));
   }
   static get is() { return "yoo-form-creator-block-expandable"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["form-creator-block-expandable.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["form-creator-block-expandable.css"]
-  }; }
-  static get properties() { return {
-    "invalid": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Will display the block as invalid"
-      },
-      "attribute": "invalid",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "options": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "FormCreatorOptions[]",
-        "resolved": "FormCreatorOptions[]",
-        "references": {
-          "FormCreatorOptions": {
-            "location": "import",
-            "path": "@shared/interfaces"
+  static get originalStyleUrls() {
+    return {
+      "$": ["form-creator-block-expandable.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["form-creator-block-expandable.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "invalid": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Will display the block as invalid"
+        },
+        "attribute": "invalid",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "options": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "FormCreatorOptions[]",
+          "resolved": "FormCreatorOptions[]",
+          "references": {
+            "FormCreatorOptions": {
+              "location": "import",
+              "path": "@shared/interfaces"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Defines enabled actions."
-      },
-      "defaultValue": "FORM_CREATOR_OPTIONS_ALL"
-    },
-    "itemList": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "IFormCreatorItemList[]",
-        "resolved": "IFormCreatorItemList[]",
-        "references": {
-          "IFormCreatorItemList": {
-            "location": "import",
-            "path": "../../../interfaces"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Defines enabled actions."
+        },
+        "defaultValue": "FORM_CREATOR_OPTIONS_ALL"
+      },
+      "itemList": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IFormCreatorItemList[]",
+          "resolved": "IFormCreatorItemList[]",
+          "references": {
+            "IFormCreatorItemList": {
+              "location": "import",
+              "path": "../../../interfaces"
+            }
           }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The list of fields passed from the form creator, this prop gets passed to a condition block so\nthat the existing field can be linked to any item in the form creator"
         }
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The list of fields passed from the form creator, this prop gets passed to a condition block so\nthat the existing field can be linked to any item in the form creator"
-      }
-    },
-    "sequentialConditionFields": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "{\n    conditionId: string;\n    lastSequentialFieldIndex: number;\n  }[]",
-        "resolved": "{ conditionId: string; lastSequentialFieldIndex: number; }[]",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "An array of all the conditonas with sequential fields and the index of the last field"
-      }
-    },
-    "isInSelectionMode": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Will set the block in selection mode, which will overide any other mode"
-      },
-      "attribute": "is-in-selection-mode",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "disableFieldTranslation": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Will disable the secondary action to translate field"
-      },
-      "attribute": "disable-field-translation",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "blockFieldExpansion": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "This will block the ability to expand the field"
-      },
-      "attribute": "block-field-expansion",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "campaignType": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "TMissionDescriptionType",
-        "resolved": "\"customform\" | \"dataset\" | \"feed\" | \"kanban\" | \"lesson\" | \"mission\" | \"poll\" | \"pollfeed\" | \"service\" | \"todo\"",
-        "references": {
-          "TMissionDescriptionType": {
-            "location": "import",
-            "path": "@shared/interfaces"
-          }
+      "sequentialConditionFields": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "{\n    conditionId: string;\n    lastSequentialFieldIndex: number;\n  }[]",
+          "resolved": "{ conditionId: string; lastSequentialFieldIndex: number; }[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "An array of all the conditonas with sequential fields and the index of the last field"
         }
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "tells the block if conditions are allowed or not"
-      },
-      "attribute": "campaign-type",
-      "reflect": false
-    },
-    "pageLinks": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "number[]",
-        "resolved": "number[]",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Links to the pages that are connected to this block"
-      }
-    },
-    "translations": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "ITranslation[]",
-        "resolved": "ITranslation[]",
-        "references": {
-          "ITranslation": {
-            "location": "import",
-            "path": "@shared/interfaces"
+      "isInSelectionMode": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Will set the block in selection mode, which will overide any other mode"
+        },
+        "attribute": "is-in-selection-mode",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "disableFieldTranslation": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Will disable the secondary action to translate field"
+        },
+        "attribute": "disable-field-translation",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "blockFieldExpansion": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "This will block the ability to expand the field"
+        },
+        "attribute": "block-field-expansion",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "campaignType": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "TMissionDescriptionType",
+          "resolved": "\"customform\" | \"dataset\" | \"feed\" | \"kanban\" | \"lesson\" | \"mission\" | \"poll\" | \"pollfeed\" | \"service\" | \"todo\"",
+          "references": {
+            "TMissionDescriptionType": {
+              "location": "import",
+              "path": "@shared/interfaces"
+            }
           }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "tells the block if conditions are allowed or not"
+        },
+        "attribute": "campaign-type",
+        "reflect": false
+      },
+      "pageLinks": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "number[]",
+          "resolved": "number[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Links to the pages that are connected to this block"
         }
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    },
-    "baseLanguage": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "base-language",
-      "reflect": false
-    },
-    "useAppColour": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "use-app-colour",
-      "reflect": false
-    },
-    "numberOfBlocksToRender": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The amount of blocks to render"
-      },
-      "attribute": "number-of-blocks-to-render",
-      "reflect": false
-    },
-    "parentConditionId": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The condition ID of the blocks parent condition"
-      },
-      "attribute": "parent-condition-id",
-      "reflect": false
-    },
-    "invalidFields": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "string[]",
-        "resolved": "string[]",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "The list of fields in an invalid state"
-      },
-      "defaultValue": "[]"
-    },
-    "initialBlockIndentation": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "This will stop the indentation of the block if the parent block has reach the threshold size. this is to stop the blocks becoming infinitely smaller."
-      },
-      "attribute": "initial-block-indentation",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "mode": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "FormCreatorBlockModes",
-        "resolved": "\"added\" | \"existing\" | \"new\" | \"new-selection\" | \"no-expand\" | \"placeholder\" | \"placeholder-page\" | \"scoring\" | \"scoring-percentage\"",
-        "references": {
-          "FormCreatorBlockModes": {
-            "location": "import",
-            "path": "../../../interfaces"
+      "translations": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "ITranslation[]",
+          "resolved": "ITranslation[]",
+          "references": {
+            "ITranslation": {
+              "location": "import",
+              "path": "@shared/interfaces"
+            }
           }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
         }
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The mode of the block determines if it has been added or not"
-      },
-      "attribute": "mode",
-      "reflect": false,
-      "defaultValue": "'added'"
-    },
-    "showConditions": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Determines whether condition blocks are hidden or shown in the form-creator."
-      },
-      "attribute": "show-conditions",
-      "reflect": false
-    },
-    "formField": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "IFormCreatorBlock",
-        "resolved": "IFormCreatorBlock",
-        "references": {
-          "IFormCreatorBlock": {
-            "location": "import",
-            "path": "../../../interfaces"
+      "baseLanguage": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "base-language",
+        "reflect": false
+      },
+      "useAppColour": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "use-app-colour",
+        "reflect": false
+      },
+      "numberOfBlocksToRender": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The amount of blocks to render"
+        },
+        "attribute": "number-of-blocks-to-render",
+        "reflect": false
+      },
+      "parentConditionId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The condition ID of the blocks parent condition"
+        },
+        "attribute": "parent-condition-id",
+        "reflect": false
+      },
+      "invalidFields": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "string[]",
+          "resolved": "string[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The list of fields in an invalid state"
+        },
+        "defaultValue": "[]"
+      },
+      "initialBlockIndentation": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "This will stop the indentation of the block if the parent block has reach the threshold size. this is to stop the blocks becoming infinitely smaller."
+        },
+        "attribute": "initial-block-indentation",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "mode": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "FormCreatorBlockModes",
+          "resolved": "\"added\" | \"existing\" | \"new\" | \"new-selection\" | \"no-expand\" | \"placeholder\" | \"placeholder-page\" | \"scoring\" | \"scoring-percentage\"",
+          "references": {
+            "FormCreatorBlockModes": {
+              "location": "import",
+              "path": "../../../interfaces"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The form field that will render as a form creator block"
-      }
-    }
-  }; }
-  static get states() { return {
-    "showInvisibleContent": {},
-    "showConditionBlock": {},
-    "blockIndentation": {}
-  }; }
-  static get events() { return [{
-      "method": "blockExpanded",
-      "name": "blockExpanded",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emits an event when the dropdown icon is clicked; the block is expanded before we emit this event"
-      },
-      "complexType": {
-        "original": "{ expanded: boolean; name: string }",
-        "resolved": "{ expanded: boolean; name: string; }",
-        "references": {}
-      }
-    }, {
-      "method": "headerClicked",
-      "name": "headerClicked",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emits an event when the header of the block is clicked"
-      },
-      "complexType": {
-        "original": "{ name: string }",
-        "resolved": "{ name: string; }",
-        "references": {}
-      }
-    }, {
-      "method": "duplicateClicked",
-      "name": "duplicateClicked",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emits an event when the duplicate action is clicked; the relevant block is duplicated by the form creator"
-      },
-      "complexType": {
-        "original": "{ name: string }",
-        "resolved": "{ name: string; }",
-        "references": {}
-      }
-    }, {
-      "method": "moveUpClicked",
-      "name": "moveUpClicked",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emits an event when the move up action is clicked; the relevant block is moved up by the form creator"
-      },
-      "complexType": {
-        "original": "{ name: string }",
-        "resolved": "{ name: string; }",
-        "references": {}
-      }
-    }, {
-      "method": "moveDownClicked",
-      "name": "moveDownClicked",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emits an event when the move down action is clicked; the relevant block is moved down by the form creator"
-      },
-      "complexType": {
-        "original": "{ name: string }",
-        "resolved": "{ name: string; }",
-        "references": {}
-      }
-    }, {
-      "method": "saveAsTemplateClicked",
-      "name": "saveAsTemplateClicked",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emits an event when the save as template action is clicked; there is currentlu no binding for this event"
-      },
-      "complexType": {
-        "original": "{ name: string }",
-        "resolved": "{ name: string; }",
-        "references": {}
-      }
-    }, {
-      "method": "markAsMandatoryClicked",
-      "name": "markAsMandatoryClicked",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emits an event when the mark as mandatory action is clicked; the relevant block is marked as mandatory by the form creator"
-      },
-      "complexType": {
-        "original": "{ name: string }",
-        "resolved": "{ name: string; }",
-        "references": {}
-      }
-    }, {
-      "method": "deleteClicked",
-      "name": "deleteClicked",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emits an event when the delete action is clicked; the relevant block is deleted by the form creator"
-      },
-      "complexType": {
-        "original": "{ name: string }",
-        "resolved": "{ name: string; }",
-        "references": {}
-      }
-    }, {
-      "method": "restrictionConditionClicked",
-      "name": "restrictionConditionClicked",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emits an event when a restriction condition is selected"
-      },
-      "complexType": {
-        "original": "{ conditionId: string }",
-        "resolved": "{ conditionId: string; }",
-        "references": {}
-      }
-    }, {
-      "method": "additionClicked",
-      "name": "additionClicked",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emits an event when the plus icon is clicked."
-      },
-      "complexType": {
-        "original": "{\n    conditionType?: ConditionType;\n    pageRestriction?: boolean;\n    field?: IFormFieldDescription;\n    condition?: ICondition;\n    customFieldId?: string;\n  }",
-        "resolved": "{ conditionType?: ConditionType; pageRestriction?: boolean; field?: IFormFieldDescription; condition?: ICondition; customFieldId?: string; }",
-        "references": {
-          "ConditionType": {
-            "location": "import",
-            "path": "@shared/interfaces"
-          },
-          "IFormFieldDescription": {
-            "location": "import",
-            "path": "@shared/interfaces"
-          },
-          "ICondition": {
-            "location": "import",
-            "path": "@shared/interfaces"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The mode of the block determines if it has been added or not"
+        },
+        "attribute": "mode",
+        "reflect": false,
+        "defaultValue": "'added'"
+      },
+      "showConditions": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Determines whether condition blocks are hidden or shown in the form-creator."
+        },
+        "attribute": "show-conditions",
+        "reflect": false
+      },
+      "formField": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IFormCreatorBlock",
+          "resolved": "IFormCreatorBlock",
+          "references": {
+            "IFormCreatorBlock": {
+              "location": "import",
+              "path": "../../../interfaces"
+            }
           }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The form field that will render as a form creator block"
         }
       }
-    }, {
-      "method": "customFieldBlockEdited",
-      "name": "customFieldBlockEdited",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emits and event when a custom field is edited"
-      },
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      }
-    }, {
-      "method": "customFieldBlockDeleted",
-      "name": "customFieldBlockDeleted",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emits and event when a custom field is deleted"
-      },
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      }
-    }, {
-      "method": "conditionClicked",
-      "name": "conditionClicked",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emits an event when the block logic icon is clicked. This will switch to the logic tab in the form-creator."
-      },
-      "complexType": {
-        "original": "{ conditionId: string }",
-        "resolved": "{ conditionId: string; }",
-        "references": {}
-      }
-    }, {
-      "method": "removeConditionClicked",
-      "name": "removeConditionClicked",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emits an event when the remove condition is clicked on a block."
-      },
-      "complexType": {
-        "original": "{\n    name: string;\n    conditionId?: string;\n  }",
-        "resolved": "{ name: string; conditionId?: string; }",
-        "references": {}
-      }
-    }, {
-      "method": "linkToFieldClicked",
-      "name": "linkToFieldClicked",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emits an event when the link in a placholder block is pressed. This will tell the form creator to focus that field."
-      },
-      "complexType": {
-        "original": "{\n    slideIndex: number;\n    itemIndex?: number;\n    name?: string;\n  }",
-        "resolved": "{ slideIndex: number; itemIndex?: number; name?: string; }",
-        "references": {}
-      }
-    }, {
-      "method": "pagePlaceholderClicked",
-      "name": "pagePlaceholderClicked",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emits an event to edit page settings"
-      },
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      }
-    }, {
-      "method": "itemSelected",
-      "name": "itemSelected",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emits an event when the block is in selection mode and item is clicked"
-      },
-      "complexType": {
-        "original": "{ name: string }",
-        "resolved": "{ name: string; }",
-        "references": {}
-      }
-    }, {
-      "method": "addPageCondition",
-      "name": "addPageCondition",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emits an event when the conditions for a page placholder block are changed"
-      },
-      "complexType": {
-        "original": "{\n    slideIndex: number;\n    condition: ICondition;\n  }",
-        "resolved": "{ slideIndex: number; condition: ICondition; }",
-        "references": {
-          "ICondition": {
-            "location": "import",
-            "path": "@shared/interfaces"
+    };
+  }
+  static get states() {
+    return {
+      "showInvisibleContent": {},
+      "showConditionBlock": {},
+      "blockIndentation": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "blockExpanded",
+        "name": "blockExpanded",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emits an event when the dropdown icon is clicked; the block is expanded before we emit this event"
+        },
+        "complexType": {
+          "original": "{ expanded: boolean; name: string }",
+          "resolved": "{ expanded: boolean; name: string; }",
+          "references": {}
+        }
+      }, {
+        "method": "headerClicked",
+        "name": "headerClicked",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emits an event when the header of the block is clicked"
+        },
+        "complexType": {
+          "original": "{ name: string }",
+          "resolved": "{ name: string; }",
+          "references": {}
+        }
+      }, {
+        "method": "duplicateClicked",
+        "name": "duplicateClicked",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emits an event when the duplicate action is clicked; the relevant block is duplicated by the form creator"
+        },
+        "complexType": {
+          "original": "{ name: string }",
+          "resolved": "{ name: string; }",
+          "references": {}
+        }
+      }, {
+        "method": "moveUpClicked",
+        "name": "moveUpClicked",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emits an event when the move up action is clicked; the relevant block is moved up by the form creator"
+        },
+        "complexType": {
+          "original": "{ name: string }",
+          "resolved": "{ name: string; }",
+          "references": {}
+        }
+      }, {
+        "method": "moveDownClicked",
+        "name": "moveDownClicked",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emits an event when the move down action is clicked; the relevant block is moved down by the form creator"
+        },
+        "complexType": {
+          "original": "{ name: string }",
+          "resolved": "{ name: string; }",
+          "references": {}
+        }
+      }, {
+        "method": "saveAsTemplateClicked",
+        "name": "saveAsTemplateClicked",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emits an event when the save as template action is clicked; there is currentlu no binding for this event"
+        },
+        "complexType": {
+          "original": "{ name: string }",
+          "resolved": "{ name: string; }",
+          "references": {}
+        }
+      }, {
+        "method": "markAsMandatoryClicked",
+        "name": "markAsMandatoryClicked",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emits an event when the mark as mandatory action is clicked; the relevant block is marked as mandatory by the form creator"
+        },
+        "complexType": {
+          "original": "{ name: string }",
+          "resolved": "{ name: string; }",
+          "references": {}
+        }
+      }, {
+        "method": "deleteClicked",
+        "name": "deleteClicked",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emits an event when the delete action is clicked; the relevant block is deleted by the form creator"
+        },
+        "complexType": {
+          "original": "{ name: string }",
+          "resolved": "{ name: string; }",
+          "references": {}
+        }
+      }, {
+        "method": "restrictionConditionClicked",
+        "name": "restrictionConditionClicked",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emits an event when a restriction condition is selected"
+        },
+        "complexType": {
+          "original": "{ conditionId: string }",
+          "resolved": "{ conditionId: string; }",
+          "references": {}
+        }
+      }, {
+        "method": "additionClicked",
+        "name": "additionClicked",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emits an event when the plus icon is clicked."
+        },
+        "complexType": {
+          "original": "{\n    conditionType?: ConditionType;\n    pageRestriction?: boolean;\n    field?: IFormFieldDescription;\n    condition?: ICondition;\n    customFieldId?: string;\n  }",
+          "resolved": "{ conditionType?: ConditionType; pageRestriction?: boolean; field?: IFormFieldDescription; condition?: ICondition; customFieldId?: string; }",
+          "references": {
+            "ConditionType": {
+              "location": "import",
+              "path": "@shared/interfaces"
+            },
+            "IFormFieldDescription": {
+              "location": "import",
+              "path": "@shared/interfaces"
+            },
+            "ICondition": {
+              "location": "import",
+              "path": "@shared/interfaces"
+            }
           }
         }
-      }
-    }, {
-      "method": "removePageCondition",
-      "name": "removePageCondition",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emits an event when a page condition is removed"
-      },
-      "complexType": {
-        "original": "{\n    slideIndex: number;\n    conditionId: string;\n  }",
-        "resolved": "{ slideIndex: number; conditionId: string; }",
-        "references": {}
-      }
-    }, {
-      "method": "translateFieldClicked",
-      "name": "translateFieldClicked",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emits an event when translate field clicked"
-      },
-      "complexType": {
-        "original": "{ name: string }",
-        "resolved": "{ name: string; }",
-        "references": {}
-      }
-    }, {
-      "method": "newConditionalFieldClicked",
-      "name": "newConditionalFieldClicked",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emits an event when the plus button is clicked to add a new conditional field"
-      },
-      "complexType": {
-        "original": "{\n    condition: ICondition;\n    index: number;\n  }",
-        "resolved": "{ condition: ICondition; index: number; }",
-        "references": {
-          "ICondition": {
-            "location": "import",
-            "path": "@shared/interfaces"
+      }, {
+        "method": "customFieldBlockEdited",
+        "name": "customFieldBlockEdited",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emits and event when a custom field is edited"
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }, {
+        "method": "customFieldBlockDeleted",
+        "name": "customFieldBlockDeleted",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emits and event when a custom field is deleted"
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }, {
+        "method": "conditionClicked",
+        "name": "conditionClicked",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emits an event when the block logic icon is clicked. This will switch to the logic tab in the form-creator."
+        },
+        "complexType": {
+          "original": "{ conditionId: string }",
+          "resolved": "{ conditionId: string; }",
+          "references": {}
+        }
+      }, {
+        "method": "removeConditionClicked",
+        "name": "removeConditionClicked",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emits an event when the remove condition is clicked on a block."
+        },
+        "complexType": {
+          "original": "{\n    name: string;\n    conditionId?: string;\n  }",
+          "resolved": "{ name: string; conditionId?: string; }",
+          "references": {}
+        }
+      }, {
+        "method": "linkToFieldClicked",
+        "name": "linkToFieldClicked",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emits an event when the link in a placholder block is pressed. This will tell the form creator to focus that field."
+        },
+        "complexType": {
+          "original": "{\n    slideIndex: number;\n    itemIndex?: number;\n    name?: string;\n  }",
+          "resolved": "{ slideIndex: number; itemIndex?: number; name?: string; }",
+          "references": {}
+        }
+      }, {
+        "method": "pagePlaceholderClicked",
+        "name": "pagePlaceholderClicked",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emits an event to edit page settings"
+        },
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        }
+      }, {
+        "method": "itemSelected",
+        "name": "itemSelected",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emits an event when the block is in selection mode and item is clicked"
+        },
+        "complexType": {
+          "original": "{ name: string }",
+          "resolved": "{ name: string; }",
+          "references": {}
+        }
+      }, {
+        "method": "addPageCondition",
+        "name": "addPageCondition",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emits an event when the conditions for a page placholder block are changed"
+        },
+        "complexType": {
+          "original": "{\n    slideIndex: number;\n    condition: ICondition;\n  }",
+          "resolved": "{ slideIndex: number; condition: ICondition; }",
+          "references": {
+            "ICondition": {
+              "location": "import",
+              "path": "@shared/interfaces"
+            }
           }
         }
-      }
-    }, {
-      "method": "createNewCondition",
-      "name": "createNewCondition",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emits an event to create a new condition associated with this field"
-      },
-      "complexType": {
-        "original": "{ name: string }",
-        "resolved": "{ name: string; }",
-        "references": {}
-      }
-    }, {
-      "method": "createNewRestriction",
-      "name": "createNewRestriction",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emits an event to create a new restriction associated with this field"
-      },
-      "complexType": {
-        "original": "{ name: string; icon: TIconName; category: string; title: string; index: number }",
-        "resolved": "{ name: string; icon: \"number\" | \"calendar\" | \"toggle\" | \"info\" | \"warning\" | \"right\" | \"left\" | \"1x\" | \"2x\" | \"3x\" | \"4x\" | \"5x\" | \"achievement\" | \"action-plan\" | \"action-plan-create\" | \"activity\" | \"activity-history\" | \"aggregation\" | \"aisles\" | \"alarm\" | \"align-center\" | \"align-left\" | \"align-right\" | \"analysis\" | \"analytics-board-bars\" | \"analytics-boost\" | \"analytics-graph-line\" | \"answer\" | \"app-creator\" | \"apple-pay\" | \"archive\" | \"arrow-down\" | \"arrow-left\" | \"arrow-right\" | \"arrow-up\" | \"arrows-up-down\" | \"assign\" | \"assign-group\" | \"assigned\" | \"attach-file\" | \"attachment\" | \"audio-offline\" | \"audit\" | \"author\" | \"auto-flash\" | \"autocomplete\" | \"automotive-airplane\" | \"automotive-bus\" | \"automotive-car\" | \"automotive-cycle\" | \"automotive-gas\" | \"automotive-road\" | \"automotive-route\" | \"automotive-route-sign\" | \"automotive-scooter\" | \"automotive-shipping\" | \"award-trophy-star\" | \"background-off\" | \"background-on\" | \"badge\" | \"badge-book\" | \"badge-brain\" | \"badge-crown\" | \"badge-makeup-1\" | \"badge-stats\" | \"barcode\" | \"battery-status-bar\" | \"battle\" | \"beverages-beer\" | \"beverages-bottle\" | \"beverages-champagne\" | \"beverages-cocktail\" | \"beverages-coffee\" | \"beverages-drink\" | \"beverages-hot-drink\" | \"beverages-tropical-cocktail\" | \"beverages-water\" | \"beverages-wine\" | \"big-arrow-down\" | \"big-arrow-left\" | \"big-arrow-right\" | \"big-arrow-up\" | \"bigfont\" | \"blocks\" | \"bluetooth\" | \"bookmark\" | \"boost\" | \"branch\" | \"brush\" | \"bulb\" | \"buttons-single-choice\" | \"calendar-date\" | \"calendar-end-date\" | \"calendar-error\" | \"calendar-new-event\" | \"calendar-received\" | \"calendar-sent\" | \"calendar-warning\" | \"camera\" | \"campaign\" | \"campaign-create\" | \"campaign-filter\" | \"catalogue\" | \"catch-them\" | \"categories\" | \"certificate\" | \"chart\" | \"chat\" | \"chat-new\" | \"check\" | \"check-product\" | \"circle\" | \"circle-minor\" | \"circle-plus\" | \"circle1\" | \"circle2\" | \"clap\" | \"close\" | \"color-picker\" | \"column\" | \"comment\" | \"community\" | \"company\" | \"compass-direction\" | \"condition\" | \"connect\" | \"contact\" | \"cosmetics-brush\" | \"cosmetics-brush-scissors\" | \"cosmetics-brush-set\" | \"cosmetics-comb\" | \"cosmetics-hairdryer\" | \"cosmetics-lips\" | \"cosmetics-lipstick\" | \"cosmetics-mirror\" | \"cosmetics-nail-polish\" | \"courses\" | \"create-chat\" | \"cross\" | \"custom\" | \"cut\" | \"daily\" | \"darkmode\" | \"dashboards\" | \"dashboards-new\" | \"data-file-add\" | \"database\" | \"database-add\" | \"database-check\" | \"database-download\" | \"database-edit\" | \"database-history\" | \"database-import\" | \"database-lock\" | \"database-question\" | \"database-refresh\" | \"database-remove\" | \"database-search\" | \"database-settings\" | \"database-star\" | \"database-subtract\" | \"database-sync\" | \"database-warning\" | \"date-time\" | \"day-view\" | \"delete\" | \"desktop\" | \"diagram-arrow-right\" | \"diploma\" | \"diploma-history\" | \"diploma-manager\" | \"diploma-new\" | \"dislike\" | \"dot\" | \"double-tick\" | \"down\" | \"down-circle\" | \"download\" | \"downloaded\" | \"draggable\" | \"duplicate\" | \"email\" | \"emoji\" | \"end-call\" | \"expand-chart\" | \"explore\" | \"export\" | \"eye\" | \"facebook\" | \"fashion-boot\" | \"fashion-bra\" | \"fashion-coat\" | \"fashion-dress\" | \"fashion-perfume\" | \"fashion-pump\" | \"fashion-shoe\" | \"fashion-t-shirt\" | \"fashion-trousers\" | \"fashion-women\" | \"feed\" | \"feed-create-post\" | \"feedback\" | \"feedback-neutral\" | \"feedback-sad\" | \"file\" | \"file-add\" | \"file-csv\" | \"file-download\" | \"file-excel\" | \"file-pdf\" | \"file-powerpoint\" | \"file-upload\" | \"file-word\" | \"filter\" | \"first\" | \"fixed\" | \"flag\" | \"flash-off\" | \"flash-on\" | \"flip\" | \"folder\" | \"folder-add\" | \"folder-download\" | \"folder-edit\" | \"folder-remove\" | \"folder-upload\" | \"food-apple\" | \"food-banana\" | \"food-bowl\" | \"food-carrot\" | \"food-cherry\" | \"food-egg\" | \"food-orange\" | \"food-pear\" | \"food-pineapple\" | \"food-strawberry\" | \"formula\" | \"forward\" | \"frame\" | \"full-height\" | \"furniture\" | \"geo-filter\" | \"gif\" | \"go-to\" | \"gps\" | \"grid-phone\" | \"grid-view\" | \"group\" | \"hashtag\" | \"heart\" | \"help\" | \"help-centre\" | \"history\" | \"home\" | \"hotel-award\" | \"hotel-award-book\" | \"hotel-bed\" | \"hotel-bell\" | \"hotel-bellhop\" | \"hotel-building\" | \"hotel-dnd\" | \"hotel-room-service-1\" | \"hotel-room-service-2\" | \"hotel-room-service-3\" | \"hotzone\" | \"hourglass\" | \"hr\" | \"image\" | \"image-map\" | \"image-offline\" | \"import\" | \"inbox\" | \"incentive-manager\" | \"incentive-manager1\" | \"indeterminate\" | \"inquiry\" | \"instagram\" | \"instant-play\" | \"iphone\" | \"journey\" | \"journey-app\" | \"keyboard\" | \"large-with-info\" | \"large-without-info\" | \"last\" | \"layout\" | \"leaderboard\" | \"learning-path\" | \"left-circle\" | \"left-web\" | \"lesson\" | \"like\" | \"link\" | \"link-broken\" | \"linkedin\" | \"list-view\" | \"livestream\" | \"loading\" | \"lock\" | \"logic\" | \"logic-visible\" | \"low-power\" | \"luxury-bag\" | \"luxury-bottle\" | \"luxury-gift\" | \"luxury-glasses\" | \"luxury-handbag\" | \"luxury-necklace\" | \"luxury-necklace-2\" | \"luxury-necklace-3\" | \"luxury-stars\" | \"luxury-watch\" | \"mandatory\" | \"map\" | \"maximize\" | \"maximize-web\" | \"medal\" | \"media\" | \"mention\" | \"menu\" | \"microphone\" | \"minimize\" | \"minimize-web\" | \"minus\" | \"missing-word\" | \"mission\" | \"mission-data\" | \"mission-download\" | \"month-view\" | \"monthly\" | \"more\" | \"more-2\" | \"more-circle\" | \"more-shapes\" | \"move\" | \"move-down\" | \"move-up\" | \"multiple-photos\" | \"mute-microphone\" | \"new-article\" | \"new-lesson\" | \"new-rectangle\" | \"new-section\" | \"new-task\" | \"news\" | \"next-photo\" | \"no-data\" | \"no-video\" | \"not-allowed\" | \"note\" | \"offline\" | \"offline-play\" | \"ongoing\" | \"operations\" | \"out-of-stock-product\" | \"pages\" | \"password\" | \"paste\" | \"pause\" | \"pause-audio\" | \"pen\" | \"personal-development\" | \"pharma-drug-box\" | \"pharma-first-aid\" | \"pharma-first-aid-kit\" | \"pharma-heartrate\" | \"pharma-hospital\" | \"pharma-iv-bag\" | \"pharma-medication\" | \"pharma-pill\" | \"pharma-pills-box\" | \"pharma-syringe\" | \"phone\" | \"phone-action-camera\" | \"photo-annotated\" | \"photo-library\" | \"photo-mandatory\" | \"pin\" | \"pin-new-site\" | \"pin-selected\" | \"pivot\" | \"play\" | \"play-audio\" | \"plugin\" | \"plus\" | \"podcast\" | \"poll\" | \"price-dollar\" | \"price-euro\" | \"price-sterling\" | \"print\" | \"priority\" | \"product\" | \"product-briefcase\" | \"profile\" | \"publish\" | \"pull-to-refresh\" | \"qr-code\" | \"question-new\" | \"questions\" | \"radio-button-off\" | \"radio-button-on\" | \"ranking\" | \"ranking-toggle\" | \"read\" | \"reason\" | \"recent\" | \"redo\" | \"refresh\" | \"rejected\" | \"rejector\" | \"repeat\" | \"request\" | \"restart\" | \"restaurant-bread\" | \"restaurant-chef\" | \"restaurant-croissant\" | \"restaurant-flatware\" | \"restaurant-grocery\" | \"restaurant-kitchen-bell\" | \"restaurant-knife-board\" | \"restaurant-menu\" | \"restaurant-platware-2\" | \"restaurant-vegetables-plate\" | \"restriction\" | \"right-circle\" | \"right-web\" | \"rotate-camera\" | \"rubber\" | \"sales\" | \"save\" | \"scale-rating\" | \"scan\" | \"schedule-user\" | \"schedule-view\" | \"scoring\" | \"scoring-visible\" | \"scratch\" | \"screenshare\" | \"search\" | \"search-product\" | \"security\" | \"select\" | \"select-all\" | \"send\" | \"send-story\" | \"settings\" | \"share\" | \"share-file\" | \"shipment-smartphone-arrive\" | \"shopping-basket\" | \"side-menu-collapse\" | \"side-menu-expand\" | \"sidebar-left\" | \"sidebar-right\" | \"signal-status-bar\" | \"signature\" | \"single-choice\" | \"single-view\" | \"slider\" | \"small-with-info\" | \"small-without-info\" | \"sms\" | \"sort-down\" | \"sort-up\" | \"sort-up-and-down\" | \"star\" | \"start-recording\" | \"start-rectangle\" | \"stats\" | \"step\" | \"stop-watch\" | \"store\" | \"store-archived\" | \"support\" | \"support-like\" | \"swipe-detail\" | \"swipe-explanation\" | \"sync-product\" | \"tab\" | \"table\" | \"tableau\" | \"tablet\" | \"tag\" | \"tags-settings\" | \"task\" | \"text-predefined\" | \"theme\" | \"tick\" | \"to-do\" | \"todo-boost\" | \"toggle-off-video\" | \"transaction\" | \"translate\" | \"translation-check\" | \"translation-warning\" | \"trash\" | \"triangle\" | \"twitter\" | \"type-tool\" | \"unarchive\" | \"unassign\" | \"unassign-group\" | \"unbook\" | \"undo\" | \"unlocked\" | \"unread\" | \"up\" | \"up-circle\" | \"upgrade\" | \"upload\" | \"user\" | \"user-block\" | \"user-live\" | \"user-lock\" | \"user-new\" | \"validate\" | \"validation-date\" | \"validator\" | \"value\" | \"variable\" | \"verified\" | \"videocamera\" | \"view\" | \"virtual-queuing\" | \"visit\" | \"visual-merchandising\" | \"volume-off\" | \"volume-on\" | \"waiting-list\" | \"warning-2\" | \"warning-product\" | \"webcam\" | \"week-view\" | \"weekdays\" | \"weekly\" | \"weeks\" | \"wifi-status-bar\" | \"word-search\" | \"workflow\" | \"yearly\" | \"yoobic\" | \"zip-file\" | \"zoom-in\" | \"zoom-out\"; category: string; title: string; index: number; }",
-        "references": {
-          "TIconName": {
-            "location": "import",
-            "path": "@shared/interfaces"
+      }, {
+        "method": "removePageCondition",
+        "name": "removePageCondition",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emits an event when a page condition is removed"
+        },
+        "complexType": {
+          "original": "{\n    slideIndex: number;\n    conditionId: string;\n  }",
+          "resolved": "{ slideIndex: number; conditionId: string; }",
+          "references": {}
+        }
+      }, {
+        "method": "translateFieldClicked",
+        "name": "translateFieldClicked",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emits an event when translate field clicked"
+        },
+        "complexType": {
+          "original": "{ name: string }",
+          "resolved": "{ name: string; }",
+          "references": {}
+        }
+      }, {
+        "method": "newConditionalFieldClicked",
+        "name": "newConditionalFieldClicked",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emits an event when the plus button is clicked to add a new conditional field"
+        },
+        "complexType": {
+          "original": "{\n    condition: ICondition;\n    index: number;\n  }",
+          "resolved": "{ condition: ICondition; index: number; }",
+          "references": {
+            "ICondition": {
+              "location": "import",
+              "path": "@shared/interfaces"
+            }
           }
         }
-      }
-    }, {
-      "method": "moveFieldClicked",
-      "name": "moveFieldClicked",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emits an event to move a field anywhere in the slides array"
-      },
-      "complexType": {
-        "original": "{ targetFieldName: string; targetFieldSlideIndex: number; selectedField: { name: string; itemIndex: number; slideIndex: number }[] }",
-        "resolved": "{ targetFieldName: string; targetFieldSlideIndex: number; selectedField: { name: string; itemIndex: number; slideIndex: number; }[]; }",
-        "references": {}
-      }
-    }]; }
-  static get methods() { return {
-    "expandBlock": {
-      "complexType": {
-        "signature": "(expanded: boolean, manipulateChildren?: boolean, formCreatorIndexToSkip?: number) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }, {
-            "tags": [],
-            "text": ""
-          }, {
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
+      }, {
+        "method": "createNewCondition",
+        "name": "createNewCondition",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emits an event to create a new condition associated with this field"
+        },
+        "complexType": {
+          "original": "{ name: string }",
+          "resolved": "{ name: string; }",
+          "references": {}
+        }
+      }, {
+        "method": "createNewRestriction",
+        "name": "createNewRestriction",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emits an event to create a new restriction associated with this field"
+        },
+        "complexType": {
+          "original": "{ name: string; icon: TIconName; category: string; title: string; index: number }",
+          "resolved": "{ name: string; icon: \"number\" | \"1x\" | \"2x\" | \"3x\" | \"4x\" | \"5x\" | \"achievement\" | \"action-plan\" | \"action-plan-create\" | \"activity\" | \"activity-history\" | \"aggregation\" | \"aisles\" | \"alarm\" | \"align-center\" | \"align-left\" | \"align-right\" | \"analysis\" | \"analytics-board-bars\" | \"analytics-boost\" | \"analytics-graph-line\" | \"answer\" | \"app-creator\" | \"apple-pay\" | \"archive\" | \"arrow-down\" | \"arrow-left\" | \"arrow-right\" | \"arrow-up\" | \"arrows-up-down\" | \"assign\" | \"assign-group\" | \"assigned\" | \"attach-file\" | \"attachment\" | \"audio-offline\" | \"audit\" | \"author\" | \"auto-flash\" | \"autocomplete\" | \"automotive-airplane\" | \"automotive-bus\" | \"automotive-car\" | \"automotive-cycle\" | \"automotive-gas\" | \"automotive-road\" | \"automotive-route\" | \"automotive-route-sign\" | \"automotive-scooter\" | \"automotive-shipping\" | \"award-trophy-star\" | \"background-off\" | \"background-on\" | \"badge\" | \"badge-book\" | \"badge-brain\" | \"badge-crown\" | \"badge-makeup-1\" | \"badge-stats\" | \"barcode\" | \"battery-status-bar\" | \"battle\" | \"beverages-beer\" | \"beverages-bottle\" | \"beverages-champagne\" | \"beverages-cocktail\" | \"beverages-coffee\" | \"beverages-drink\" | \"beverages-hot-drink\" | \"beverages-tropical-cocktail\" | \"beverages-water\" | \"beverages-wine\" | \"big-arrow-down\" | \"big-arrow-left\" | \"big-arrow-right\" | \"big-arrow-up\" | \"bigfont\" | \"blocks\" | \"bluetooth\" | \"bookmark\" | \"boost\" | \"branch\" | \"brush\" | \"bulb\" | \"buttons-single-choice\" | \"calendar\" | \"calendar-date\" | \"calendar-end-date\" | \"calendar-error\" | \"calendar-new-event\" | \"calendar-received\" | \"calendar-sent\" | \"calendar-warning\" | \"camera\" | \"campaign\" | \"campaign-create\" | \"campaign-filter\" | \"catalogue\" | \"catch-them\" | \"categories\" | \"certificate\" | \"chart\" | \"chat\" | \"chat-new\" | \"check\" | \"check-product\" | \"circle\" | \"circle-minor\" | \"circle-plus\" | \"circle1\" | \"circle2\" | \"clap\" | \"close\" | \"color-picker\" | \"column\" | \"comment\" | \"community\" | \"company\" | \"compass-direction\" | \"condition\" | \"connect\" | \"contact\" | \"cosmetics-brush\" | \"cosmetics-brush-scissors\" | \"cosmetics-brush-set\" | \"cosmetics-comb\" | \"cosmetics-hairdryer\" | \"cosmetics-lips\" | \"cosmetics-lipstick\" | \"cosmetics-mirror\" | \"cosmetics-nail-polish\" | \"courses\" | \"create-chat\" | \"cross\" | \"custom\" | \"cut\" | \"daily\" | \"darkmode\" | \"dashboards\" | \"dashboards-new\" | \"data-file-add\" | \"database\" | \"database-add\" | \"database-check\" | \"database-download\" | \"database-edit\" | \"database-history\" | \"database-import\" | \"database-lock\" | \"database-question\" | \"database-refresh\" | \"database-remove\" | \"database-search\" | \"database-settings\" | \"database-star\" | \"database-subtract\" | \"database-sync\" | \"database-warning\" | \"date-time\" | \"day-view\" | \"delete\" | \"desktop\" | \"diagram-arrow-right\" | \"diploma\" | \"diploma-history\" | \"diploma-manager\" | \"diploma-new\" | \"dislike\" | \"dot\" | \"double-tick\" | \"down\" | \"down-circle\" | \"download\" | \"downloaded\" | \"draggable\" | \"duplicate\" | \"email\" | \"emoji\" | \"end-call\" | \"expand-chart\" | \"explore\" | \"export\" | \"eye\" | \"facebook\" | \"fashion-boot\" | \"fashion-bra\" | \"fashion-coat\" | \"fashion-dress\" | \"fashion-perfume\" | \"fashion-pump\" | \"fashion-shoe\" | \"fashion-t-shirt\" | \"fashion-trousers\" | \"fashion-women\" | \"feed\" | \"feed-create-post\" | \"feedback\" | \"feedback-neutral\" | \"feedback-sad\" | \"file\" | \"file-add\" | \"file-csv\" | \"file-download\" | \"file-excel\" | \"file-pdf\" | \"file-powerpoint\" | \"file-upload\" | \"file-word\" | \"filter\" | \"first\" | \"fixed\" | \"flag\" | \"flash-off\" | \"flash-on\" | \"flip\" | \"folder\" | \"folder-add\" | \"folder-download\" | \"folder-edit\" | \"folder-remove\" | \"folder-upload\" | \"food-apple\" | \"food-banana\" | \"food-bowl\" | \"food-carrot\" | \"food-cherry\" | \"food-egg\" | \"food-orange\" | \"food-pear\" | \"food-pineapple\" | \"food-strawberry\" | \"formula\" | \"forward\" | \"frame\" | \"full-height\" | \"furniture\" | \"geo-filter\" | \"gif\" | \"go-to\" | \"gps\" | \"grid-phone\" | \"grid-view\" | \"group\" | \"hashtag\" | \"heart\" | \"help\" | \"help-centre\" | \"history\" | \"home\" | \"hotel-award\" | \"hotel-award-book\" | \"hotel-bed\" | \"hotel-bell\" | \"hotel-bellhop\" | \"hotel-building\" | \"hotel-dnd\" | \"hotel-room-service-1\" | \"hotel-room-service-2\" | \"hotel-room-service-3\" | \"hotzone\" | \"hourglass\" | \"hr\" | \"image\" | \"image-map\" | \"image-offline\" | \"import\" | \"inbox\" | \"incentive-manager\" | \"incentive-manager1\" | \"indeterminate\" | \"info\" | \"inquiry\" | \"instagram\" | \"instant-play\" | \"iphone\" | \"journey\" | \"journey-app\" | \"keyboard\" | \"large-with-info\" | \"large-without-info\" | \"last\" | \"layout\" | \"leaderboard\" | \"learning-path\" | \"left\" | \"left-circle\" | \"left-web\" | \"lesson\" | \"like\" | \"link\" | \"link-broken\" | \"linkedin\" | \"list-view\" | \"livestream\" | \"loading\" | \"lock\" | \"logic\" | \"logic-visible\" | \"low-power\" | \"luxury-bag\" | \"luxury-bottle\" | \"luxury-gift\" | \"luxury-glasses\" | \"luxury-handbag\" | \"luxury-necklace\" | \"luxury-necklace-2\" | \"luxury-necklace-3\" | \"luxury-stars\" | \"luxury-watch\" | \"mandatory\" | \"map\" | \"maximize\" | \"maximize-web\" | \"medal\" | \"media\" | \"mention\" | \"menu\" | \"microphone\" | \"minimize\" | \"minimize-web\" | \"minus\" | \"missing-word\" | \"mission\" | \"mission-data\" | \"mission-download\" | \"month-view\" | \"monthly\" | \"more\" | \"more-2\" | \"more-circle\" | \"more-shapes\" | \"move\" | \"move-down\" | \"move-up\" | \"multiple-photos\" | \"mute-microphone\" | \"new-article\" | \"new-lesson\" | \"new-rectangle\" | \"new-section\" | \"new-task\" | \"news\" | \"next-photo\" | \"no-data\" | \"no-video\" | \"not-allowed\" | \"note\" | \"offline\" | \"offline-play\" | \"ongoing\" | \"operations\" | \"out-of-stock-product\" | \"pages\" | \"password\" | \"paste\" | \"pause\" | \"pause-audio\" | \"pen\" | \"personal-development\" | \"pharma-drug-box\" | \"pharma-first-aid\" | \"pharma-first-aid-kit\" | \"pharma-heartrate\" | \"pharma-hospital\" | \"pharma-iv-bag\" | \"pharma-medication\" | \"pharma-pill\" | \"pharma-pills-box\" | \"pharma-syringe\" | \"phone\" | \"phone-action-camera\" | \"photo-annotated\" | \"photo-library\" | \"photo-mandatory\" | \"pin\" | \"pin-new-site\" | \"pin-selected\" | \"pivot\" | \"play\" | \"play-audio\" | \"plugin\" | \"plus\" | \"podcast\" | \"poll\" | \"price-dollar\" | \"price-euro\" | \"price-sterling\" | \"print\" | \"priority\" | \"product\" | \"product-briefcase\" | \"profile\" | \"publish\" | \"pull-to-refresh\" | \"qr-code\" | \"question-new\" | \"questions\" | \"radio-button-off\" | \"radio-button-on\" | \"ranking\" | \"ranking-toggle\" | \"read\" | \"reason\" | \"recent\" | \"redo\" | \"refresh\" | \"rejected\" | \"rejector\" | \"repeat\" | \"request\" | \"restart\" | \"restaurant-bread\" | \"restaurant-chef\" | \"restaurant-croissant\" | \"restaurant-flatware\" | \"restaurant-grocery\" | \"restaurant-kitchen-bell\" | \"restaurant-knife-board\" | \"restaurant-menu\" | \"restaurant-platware-2\" | \"restaurant-vegetables-plate\" | \"restriction\" | \"right\" | \"right-circle\" | \"right-web\" | \"rotate-camera\" | \"rubber\" | \"sales\" | \"save\" | \"scale-rating\" | \"scan\" | \"schedule-user\" | \"schedule-view\" | \"scoring\" | \"scoring-visible\" | \"scratch\" | \"screenshare\" | \"search\" | \"search-product\" | \"security\" | \"select\" | \"select-all\" | \"send\" | \"send-story\" | \"settings\" | \"share\" | \"share-file\" | \"shipment-smartphone-arrive\" | \"shopping-basket\" | \"side-menu-collapse\" | \"side-menu-expand\" | \"sidebar-left\" | \"sidebar-right\" | \"signal-status-bar\" | \"signature\" | \"single-choice\" | \"single-view\" | \"slider\" | \"small-with-info\" | \"small-without-info\" | \"sms\" | \"sort-down\" | \"sort-up\" | \"sort-up-and-down\" | \"star\" | \"start-recording\" | \"start-rectangle\" | \"stats\" | \"step\" | \"stop-watch\" | \"store\" | \"store-archived\" | \"support\" | \"support-like\" | \"swipe-detail\" | \"swipe-explanation\" | \"sync-product\" | \"tab\" | \"table\" | \"tableau\" | \"tablet\" | \"tag\" | \"tags-settings\" | \"task\" | \"text-predefined\" | \"theme\" | \"tick\" | \"to-do\" | \"todo-boost\" | \"toggle\" | \"toggle-off-video\" | \"transaction\" | \"translate\" | \"translation-check\" | \"translation-warning\" | \"trash\" | \"triangle\" | \"twitter\" | \"type-tool\" | \"unarchive\" | \"unassign\" | \"unassign-group\" | \"unbook\" | \"undo\" | \"unlocked\" | \"unread\" | \"up\" | \"up-circle\" | \"upgrade\" | \"upload\" | \"user\" | \"user-block\" | \"user-live\" | \"user-lock\" | \"user-new\" | \"validate\" | \"validation-date\" | \"validator\" | \"value\" | \"variable\" | \"verified\" | \"videocamera\" | \"view\" | \"virtual-queuing\" | \"visit\" | \"visual-merchandising\" | \"volume-off\" | \"volume-on\" | \"waiting-list\" | \"warning\" | \"warning-2\" | \"warning-product\" | \"webcam\" | \"week-view\" | \"weekdays\" | \"weekly\" | \"weeks\" | \"wifi-status-bar\" | \"word-search\" | \"workflow\" | \"yearly\" | \"yoobic\" | \"zip-file\" | \"zoom-in\" | \"zoom-out\"; category: string; title: string; index: number; }",
+          "references": {
+            "TIconName": {
+              "location": "import",
+              "path": "@shared/interfaces"
+            }
           }
+        }
+      }, {
+        "method": "moveFieldClicked",
+        "name": "moveFieldClicked",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emits an event to move a field anywhere in the slides array"
         },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "getExpandableChildBlocks": {
-      "complexType": {
-        "signature": "() => Promise<HTMLYooFormCreatorBlockExpandableElement[]>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
+        "complexType": {
+          "original": "{ targetFieldName: string; targetFieldSlideIndex: number; selectedField: { name: string; itemIndex: number; slideIndex: number }[] }",
+          "resolved": "{ targetFieldName: string; targetFieldSlideIndex: number; selectedField: { name: string; itemIndex: number; slideIndex: number; }[]; }",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "expandBlock": {
+        "complexType": {
+          "signature": "(expanded: boolean, manipulateChildren?: boolean, formCreatorIndexToSkip?: number) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
           },
-          "HTMLYooFormCreatorBlockExpandableElement": {
-            "location": "global"
-          }
+          "return": "Promise<void>"
         },
-        "return": "Promise<HTMLYooFormCreatorBlockExpandableElement[]>"
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "toggleInvisibleDiv": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "getExpandableChildBlocks": {
+        "complexType": {
+          "signature": "() => Promise<HTMLYooFormCreatorBlockExpandableElement[]>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "HTMLYooFormCreatorBlockExpandableElement": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<HTMLYooFormCreatorBlockExpandableElement[]>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "",
-        "tags": []
+      "toggleInvisibleDiv": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       }
-    }
-  }; }
+    };
+  }
   static get elementRef() { return "host"; }
-  static get watchers() { return [{
-      "propName": "formField",
-      "methodName": "onFormField"
-    }, {
-      "propName": "showConditions",
-      "methodName": "onShowConditions"
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "formField",
+        "methodName": "onFormField"
+      }, {
+        "propName": "showConditions",
+        "methodName": "onShowConditions"
+      }];
+  }
 }