@processmaker/modeler 1.42.1 → 1.43.0

package/dist/modeler.umd.js

@@ -13110,7 +13110,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, ".remote-cursor[data-v-70c20f1a]{positi
 
 /***/ }),
 
-/***/ 32455:
+/***/ 11040:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -13124,7 +13124,7 @@ __webpack_require__.r(__webpack_exports__);
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, ".control-submenu[data-v-36ac61a1]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;padding:10px;width:255px;left:616px;background:#fff;-webkit-box-shadow:0 6px 12px rgba(0,0,0,.1);box-shadow:0 6px 12px rgba(0,0,0,.1);border-radius:4px;list-style:none}.control-submenu-item>svg[data-v-36ac61a1]{width:24px;height:24px}.control-submenu-item.active[data-v-36ac61a1]{background-color:#ebeef2}.control-submenu-list[data-v-36ac61a1]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:12px 5px;gap:8px;height:40px;-webkit-box-flex:0;-ms-flex:none;flex:none;-webkit-box-ordinal-group:1;-ms-flex-order:0;order:0;-ms-flex-item-align:stretch;align-self:stretch;-ms-flex-positive:0;flex-grow:0;border-radius:4px;cursor:pointer}.control-submenu-list.active[data-v-36ac61a1]{background-color:#deebff}.control-submenu-list.active svg[data-v-36ac61a1]{fill:#1264aa}.control-submenu-list[data-v-36ac61a1]:hover{background-color:#ebeef2}.control-submenu-list>svg[data-v-36ac61a1]{width:24px;height:24px}.control-submenu-list-label[data-v-36ac61a1]{font-style:normal;font-weight:400;font-size:14px;line-height:21px;letter-spacing:-.02em;color:#000}.control-submenu-options[data-v-36ac61a1]{position:absolute;top:0;right:0;padding:3px;-webkit-transform:rotate(47.59deg);transform:rotate(47.59deg);cursor:pointer}.control-submenu-options>span[data-v-36ac61a1]{display:block;width:4px;height:3px;background-color:#44494e;-webkit-clip-path:polygon(50% 0,0 100%,100% 100%);clip-path:polygon(50% 0,0 100%,100% 100%);-webkit-clip-path:padding-box;clip-path:padding-box}.control-submenu-options~svg[data-v-36ac61a1]{width:24px;height:24px}.is-dragging[data-v-36ac61a1]{background:#3397e1;color:#fff;position:absolute;z-index:10;-webkit-box-shadow:5px 5px 8px 0 rgba(0,0,0,.29);box-shadow:5px 5px 8px 0 rgba(0,0,0,.29);padding:.5rem;pointer-events:none;width:40px;height:40px;background:green}.is-dragging.no-drop[data-v-36ac61a1]{opacity:.8;cursor:no-drop;pointer-events:none}.is-dragging[data-v-36ac61a1]:hover{background-color:#3397e1;color:#fff;pointer-events:none}", ""]);
+___CSS_LOADER_EXPORT___.push([module.id, ".control-submenu[data-v-530402d4]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;padding:10px;width:255px;left:616px;background:#fff;-webkit-box-shadow:0 6px 12px rgba(0,0,0,.1);box-shadow:0 6px 12px rgba(0,0,0,.1);border-radius:4px;list-style:none}.control-submenu-item>svg[data-v-530402d4]{width:24px;height:24px}.control-submenu-item>i[data-v-530402d4]{color:#000;padding:5px}.control-submenu-item.active[data-v-530402d4]{background-color:#ebeef2}.control-submenu-list[data-v-530402d4]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:12px 5px;gap:8px;height:40px;-webkit-box-flex:0;-ms-flex:none;flex:none;-webkit-box-ordinal-group:1;-ms-flex-order:0;order:0;-ms-flex-item-align:stretch;align-self:stretch;-ms-flex-positive:0;flex-grow:0;border-radius:4px;cursor:pointer}.control-submenu-list.active[data-v-530402d4]{background-color:#deebff}.control-submenu-list.active svg[data-v-530402d4]{fill:#1264aa}.control-submenu-list[data-v-530402d4]:hover{background-color:#ebeef2}.control-submenu-list>svg[data-v-530402d4]{width:24px;height:24px}.control-submenu-list-label[data-v-530402d4]{font-style:normal;font-weight:400;font-size:14px;line-height:21px;letter-spacing:-.02em;color:#000}.control-submenu-options[data-v-530402d4]{position:absolute;top:0;right:0;padding:3px;-webkit-transform:rotate(47.59deg);transform:rotate(47.59deg);cursor:pointer}.control-submenu-options>span[data-v-530402d4]{display:block;width:4px;height:3px;background-color:#44494e;-webkit-clip-path:polygon(50% 0,0 100%,100% 100%);clip-path:polygon(50% 0,0 100%,100% 100%);-webkit-clip-path:padding-box;clip-path:padding-box}.control-submenu-options~svg[data-v-530402d4]{width:24px;height:24px}.is-dragging[data-v-530402d4]{background:#3397e1;color:#fff;position:absolute;z-index:10;-webkit-box-shadow:5px 5px 8px 0 rgba(0,0,0,.29);box-shadow:5px 5px 8px 0 rgba(0,0,0,.29);padding:.5rem;pointer-events:none;width:40px;height:40px;background:green}.is-dragging.no-drop[data-v-530402d4]{opacity:.8;cursor:no-drop;pointer-events:none}.is-dragging[data-v-530402d4]:hover{background-color:#3397e1;color:#fff;pointer-events:none}", ""]);
 // Exports
 /* harmony default export */ __webpack_exports__["default"] = (___CSS_LOADER_EXPORT___);
 
@@ -13152,7 +13152,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, "#searchNodeTypes i[data-v-c468f432]{to
 
 /***/ }),
 
-/***/ 78437:
+/***/ 77426:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -13173,7 +13173,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, "#nodeTypesList .pinnedObjects{margin-b
 
 /***/ }),
 
-/***/ 59059:
+/***/ 55368:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -13187,7 +13187,7 @@ __webpack_require__.r(__webpack_exports__);
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, ".pm-block-node-types__item{display:block;padding:.5rem .3rem;border-radius:4px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-bottom:8px}.pm-block-node-types__item:hover{background-color:#ebeef2}.pm-block-node-types__item__icon{width:1.5rem;height:1.5rem}.pm-block-node-types__item label{max-width:225px;font-size:14px;line-height:15px}.pm-block-node-types__item span{margin-left:1.6rem;font-size:13px;color:#6c757d}", ""]);
+___CSS_LOADER_EXPORT___.push([module.id, "#pmBlockNodeTypesList .pinnedBlocks{margin-bottom:1rem}.pm-block-node-types__item{display:block;padding:.5rem .3rem;border-radius:4px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-bottom:8px}.pm-block-node-types__item:hover{background-color:#ebeef2}.pm-block-node-types__item:hover .pinIcon{background-color:#dadddf}.pm-block-node-types__item__icon{width:1.5rem;height:1.5rem}.pm-block-node-types__item label{max-width:225px;font-size:14px;line-height:15px}.pm-block-node-types__item span{margin-left:1.6rem;font-size:13px;color:#6c757d}.pm-block-node-types__item .pinIcon{margin-left:auto;border-radius:4px;padding:.3rem}", ""]);
 // Exports
 /* harmony default export */ __webpack_exports__["default"] = (___CSS_LOADER_EXPORT___);
 
@@ -26696,19 +26696,19 @@ var update = add("3635bc05", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
-/***/ 60336:
+/***/ 20887:
 /***/ (function(module, __unused_webpack_exports, __webpack_require__) {
 
 // style-loader: Adds some css to the DOM by adding a <style> tag
 
 // load the styles
-var content = __webpack_require__(32455);
+var content = __webpack_require__(11040);
 if(content.__esModule) content = content.default;
 if(typeof content === 'string') content = [[module.id, content, '']];
 if(content.locals) module.exports = content.locals;
 // add the styles to the DOM
 var add = (__webpack_require__(54402)/* ["default"] */ .Z)
-var update = add("768e271e", content, true, {"sourceMap":false,"shadowMode":false});
+var update = add("7d29724c", content, true, {"sourceMap":false,"shadowMode":false});
 
 /***/ }),
 
@@ -26728,35 +26728,35 @@ var update = add("85639c58", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
-/***/ 15293:
+/***/ 44532:
 /***/ (function(module, __unused_webpack_exports, __webpack_require__) {
 
 // style-loader: Adds some css to the DOM by adding a <style> tag
 
 // load the styles
-var content = __webpack_require__(78437);
+var content = __webpack_require__(77426);
 if(content.__esModule) content = content.default;
 if(typeof content === 'string') content = [[module.id, content, '']];
 if(content.locals) module.exports = content.locals;
 // add the styles to the DOM
 var add = (__webpack_require__(54402)/* ["default"] */ .Z)
-var update = add("61accce6", content, true, {"sourceMap":false,"shadowMode":false});
+var update = add("33f0754c", content, true, {"sourceMap":false,"shadowMode":false});
 
 /***/ }),
 
-/***/ 4675:
+/***/ 50786:
 /***/ (function(module, __unused_webpack_exports, __webpack_require__) {
 
 // style-loader: Adds some css to the DOM by adding a <style> tag
 
 // load the styles
-var content = __webpack_require__(59059);
+var content = __webpack_require__(55368);
 if(content.__esModule) content = content.default;
 if(typeof content === 'string') content = [[module.id, content, '']];
 if(content.locals) module.exports = content.locals;
 // add the styles to the DOM
 var add = (__webpack_require__(54402)/* ["default"] */ .Z)
-var update = add("58d36a3f", content, true, {"sourceMap":false,"shadowMode":false});
+var update = add("5389a608", content, true, {"sourceMap":false,"shadowMode":false});
 
 /***/ }),
 
@@ -49126,8 +49126,8 @@ var filterNodeTypes_component = normalizeComponent(
 )
 
 /* harmony default export */ var filterNodeTypes = (filterNodeTypes_component.exports);
-;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/rails/explorer-rail/nodeTypesLoop/nodeTypesLoop.vue?vue&type=template&id=d776371a&
-var nodeTypesLoopvue_type_template_id_d776371a_render = function render() {
+;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/rails/explorer-rail/nodeTypesLoop/nodeTypesLoop.vue?vue&type=template&id=66d24e08&
+var nodeTypesLoopvue_type_template_id_66d24e08_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('div', {
@@ -49284,7 +49284,7 @@ var nodeTypesLoopvue_type_template_id_d776371a_render = function render() {
     })])];
   })], 2)] : _vm._e()], 2);
 };
-var nodeTypesLoopvue_type_template_id_d776371a_staticRenderFns = [];
+var nodeTypesLoopvue_type_template_id_66d24e08_staticRenderFns = [];
 
 ;// CONCATENATED MODULE: ./src/assets/pin-angle.svg
 var pin_angle_namespaceObject = __webpack_require__.p + "img/pin-angle.95ef112b.svg";
@@ -49399,6 +49399,9 @@ var pin_angle_fill_namespaceObject = __webpack_require__.p + "img/pin-angle-fill
         tempGhost.src = control.icon;
       } else {
         tempGhost.setAttribute('class', control.icon);
+        tempGhost.style.fontSize = '42px';
+        tempGhost.style.width = '42px';
+        tempGhost.style.height = '42px';
       }
       document.body.appendChild(tempGhost);
       nodeTypesStore.commit('setGhostNode', tempGhost);
@@ -49436,6 +49439,8 @@ var pin_angle_fill_namespaceObject = __webpack_require__.p + "img/pin-angle-fill
 
 
 
+
+
 /* harmony default export */ var nodeTypesLoopvue_type_script_lang_js_ = ({
   name: 'NodeTypesLoop',
   mixins: [clickAndDrop, iconHelper],
@@ -49466,7 +49471,14 @@ var pin_angle_fill_namespaceObject = __webpack_require__.p + "img/pin-angle-fill
   },
   computed: {
     pinnedObjects: function pinnedObjects() {
-      return nodeTypesStore.getters.getPinnedNodeTypes;
+      var pinnedNodeTypes = nodeTypesStore.getters.getPinnedNodeTypes;
+
+      // Filter pinnedNodeTypes to exclude objects with PM Blocks type.
+      var filteredPinnedNodeTypes = pinnedNodeTypes.filter(function (obj) {
+        var _obj$type;
+        return !((_obj$type = obj.type) !== null && _obj$type !== void 0 && _obj$type.includes('processmaker-pm-block'));
+      });
+      return filteredPinnedNodeTypes;
     },
     objects: function objects() {
       return nodeTypesStore.getters.getNodeTypes;
@@ -49490,9 +49502,9 @@ var pin_angle_fill_namespaceObject = __webpack_require__.p + "img/pin-angle-fill
 });
 ;// CONCATENATED MODULE: ./src/components/rails/explorer-rail/nodeTypesLoop/nodeTypesLoop.vue?vue&type=script&lang=js&
  /* harmony default export */ var nodeTypesLoop_nodeTypesLoopvue_type_script_lang_js_ = (nodeTypesLoopvue_type_script_lang_js_); 
-// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-65.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-65.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-65.use[2]!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-65.use[3]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-65.use[4]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/rails/explorer-rail/nodeTypesLoop/nodeTypesLoop.vue?vue&type=style&index=0&id=d776371a&prod&lang=scss&
-var nodeTypesLoopvue_type_style_index_0_id_d776371a_prod_lang_scss_ = __webpack_require__(15293);
-;// CONCATENATED MODULE: ./src/components/rails/explorer-rail/nodeTypesLoop/nodeTypesLoop.vue?vue&type=style&index=0&id=d776371a&prod&lang=scss&
+// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-65.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-65.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-65.use[2]!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-65.use[3]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-65.use[4]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/rails/explorer-rail/nodeTypesLoop/nodeTypesLoop.vue?vue&type=style&index=0&id=66d24e08&prod&lang=scss&
+var nodeTypesLoopvue_type_style_index_0_id_66d24e08_prod_lang_scss_ = __webpack_require__(44532);
+;// CONCATENATED MODULE: ./src/components/rails/explorer-rail/nodeTypesLoop/nodeTypesLoop.vue?vue&type=style&index=0&id=66d24e08&prod&lang=scss&
 
 ;// CONCATENATED MODULE: ./src/components/rails/explorer-rail/nodeTypesLoop/nodeTypesLoop.vue
 
@@ -49505,8 +49517,8 @@ var nodeTypesLoopvue_type_style_index_0_id_d776371a_prod_lang_scss_ = __webpack_
 
 var nodeTypesLoop_component = normalizeComponent(
   nodeTypesLoop_nodeTypesLoopvue_type_script_lang_js_,
-  nodeTypesLoopvue_type_template_id_d776371a_render,
-  nodeTypesLoopvue_type_template_id_d776371a_staticRenderFns,
+  nodeTypesLoopvue_type_template_id_66d24e08_render,
+  nodeTypesLoopvue_type_template_id_66d24e08_staticRenderFns,
   false,
   null,
   null,
@@ -49515,8 +49527,8 @@ var nodeTypesLoop_component = normalizeComponent(
 )
 
 /* harmony default export */ var nodeTypesLoop = (nodeTypesLoop_component.exports);
-;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/rails/explorer-rail/pmBlocksLoop/pmBlocksLoop.vue?vue&type=template&id=49022f8a&
-var pmBlocksLoopvue_type_template_id_49022f8a_render = function render() {
+;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/rails/explorer-rail/pmBlocksLoop/pmBlocksLoop.vue?vue&type=template&id=3b6640fb&
+var pmBlocksLoopvue_type_template_id_3b6640fb_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('div', {
@@ -49531,7 +49543,16 @@ var pmBlocksLoopvue_type_template_id_49022f8a_render = function render() {
     return [_c('div', {
       key: object.id,
       staticClass: "node-types__item",
+      attrs: {
+        "data-test": object.type
+      },
       on: {
+        "mouseover": function mouseover($event) {
+          _vm.showPin = true;
+        },
+        "mouseleave": function mouseleave($event) {
+          _vm.showPin = false;
+        },
         "click": function click($event) {
           $event.stopPropagation();
           return _vm.onClickHandler($event, object);
@@ -49548,23 +49569,94 @@ var pmBlocksLoopvue_type_template_id_49022f8a_render = function render() {
         "src": object.svgIcon,
         "alt": _vm.$t(object.label)
       }
-    }), _c('label', [_vm._v(_vm._s(_vm.$t(object.label)))])])])];
-  })], 2) : _vm._e(), _vm.filteredPmBlockNodes.length === 0 && !_vm.searchTerm ? [_c('div', {
-    staticClass: "pmBlocksContainer p-2"
-  }, [_vm._l(_vm.pmBlockNodeTypes, function (nodeType) {
+    }), _c('label', [_vm._v(_vm._s(_vm.$t(object.label)))]), _vm.blockAlreadyPinned(object, object.type) ? _c('img', {
+      staticClass: "pinIcon",
+      attrs: {
+        "src": _vm.pinFillIcon,
+        "alt": "Unpin Element"
+      },
+      on: {
+        "click": function click($event) {
+          return _vm.unPin(object);
+        }
+      }
+    }) : _c('img', {
+      staticClass: "pinIcon",
+      attrs: {
+        "src": _vm.pinIcon,
+        "alt": "Pin Element"
+      },
+      on: {
+        "click": function click($event) {
+          return _vm.addPin(object);
+        }
+      }
+    })])])];
+  })], 2) : _vm._e(), _vm.filteredPmBlockNodes.length === 0 && !_vm.searchTerm ? [_vm.pinnedBlocks.length > 0 ? _c('div', {
+    staticClass: "pinnedBlocks"
+  }, [_c('p', [_vm._v(_vm._s(_vm.$t('Pinned PM Blocks')))]), _vm._l(_vm.pinnedBlocks, function (pinnedBlock) {
+    return [_c('div', {
+      key: pinnedBlock.id,
+      staticClass: "node-types__item",
+      attrs: {
+        "data-test": pinnedBlock.type
+      },
+      on: {
+        "mouseover": function mouseover($event) {
+          _vm.showPin = true;
+        },
+        "mouseleave": function mouseleave($event) {
+          _vm.showPin = false;
+        },
+        "click": function click($event) {
+          $event.stopPropagation();
+          return _vm.onClickHandler($event, pinnedBlock);
+        }
+      }
+    }, [!_vm.containsSvg(pinnedBlock.icon) ? _c('i', {
+      staticClass: "fa-lg",
+      class: pinnedBlock.customIcon
+    }) : _c('img', {
+      staticClass: "node-types__item__icon",
+      attrs: {
+        "src": pinnedBlock.svgIcon,
+        "alt": _vm.$t(pinnedBlock.label)
+      }
+    }), _c('span', [_vm._v(_vm._s(_vm.$t(pinnedBlock.label)))]), _c('img', {
+      staticClass: "pinIcon",
+      attrs: {
+        "src": _vm.pinFillIcon,
+        "alt": "Pin/Unpin Element"
+      },
+      on: {
+        "click": function click($event) {
+          return _vm.unPin(pinnedBlock);
+        }
+      }
+    })])];
+  })], 2) : _vm._e(), _c('div', {
+    staticClass: "objectCategory"
+  }, [_c('p', [_vm._v(_vm._s(_vm.$t('PM Block Category')))]), _vm._l(_vm.unpinnedBlocks, function (nodeType) {
     return [_c('div', {
       key: nodeType.id,
-      staticClass: "pm-block-node-types__item p-2 d-block",
+      staticClass: "node-types__item",
+      attrs: {
+        "data-test": nodeType.type
+      },
       on: {
+        "mouseover": function mouseover($event) {
+          _vm.showPin = true;
+        },
+        "mouseleave": function mouseleave($event) {
+          _vm.showPin = false;
+        },
         "click": function click($event) {
           $event.stopPropagation();
           return _vm.onClickHandler($event, nodeType);
         }
       }
-    }, [_c('div', {
-      staticClass: "d-flex"
-    }, [!nodeType.svgIcon ? _c('i', {
-      staticClass: "node-types__item__icon",
+    }, [!_vm.containsSvg(nodeType.icon) ? _c('i', {
+      staticClass: "fa-lg",
       class: nodeType.customIcon
     }) : _c('img', {
       staticClass: "node-types__item__icon",
@@ -49572,18 +49664,81 @@ var pmBlocksLoopvue_type_template_id_49022f8a_render = function render() {
         "src": nodeType.svgIcon,
         "alt": _vm.$t(nodeType.label)
       }
-    }), _c('label', [_vm._v(_vm._s(_vm.$t(nodeType.label)))])])])];
+    }), _c('span', [_vm._v(_vm._s(_vm.$t(nodeType.label)))]), _c('img', {
+      staticClass: "pinIcon",
+      attrs: {
+        "src": _vm.pinIcon,
+        "alt": "Pin/Unpin Element"
+      },
+      on: {
+        "click": function click($event) {
+          return _vm.addPin(nodeType);
+        }
+      }
+    })])];
   })], 2)] : _vm._e()], 2);
 };
-var pmBlocksLoopvue_type_template_id_49022f8a_staticRenderFns = [];
+var pmBlocksLoopvue_type_template_id_3b6640fb_staticRenderFns = [];
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/rails/explorer-rail/pmBlocksLoop/pmBlocksLoop.vue?vue&type=script&lang=js&
 
 
+
+
+
+
+
+
+
+
 /* harmony default export */ var pmBlocksLoopvue_type_script_lang_js_ = ({
   name: 'PmBlocksLoop',
-  mixins: [clickAndDrop],
+  mixins: [clickAndDrop, iconHelper],
+  data: function data() {
+    return {
+      pinIcon: pin_angle_namespaceObject,
+      pinFillIcon: pin_angle_fill_namespaceObject,
+      showPin: false
+    };
+  },
+  created: function created() {
+    nodeTypesStore.dispatch('getUserPinnedObjects');
+  },
+  methods: {
+    blockAlreadyPinned: function blockAlreadyPinned(object, type) {
+      return !!this.pinnedBlocks.find(function (obj) {
+        return obj.type === type;
+      });
+    },
+    unPin: function unPin(object) {
+      this.deselect();
+      return nodeTypesStore.dispatch('removeUserPinnedObject', object);
+    },
+    addPin: function addPin(object) {
+      this.deselect();
+      return nodeTypesStore.dispatch('addUserPinnedObject', object);
+    }
+  },
   computed: {
+    pinnedBlocks: function pinnedBlocks() {
+      var pinnedNodeTypes = nodeTypesStore.getters.getPinnedNodeTypes;
+
+      //Filter pinnedNodeTypes to only return objects with PM Blocks type.
+      var filteredPinnedNodeTypes = pinnedNodeTypes.filter(function (obj) {
+        var _obj$type;
+        return (_obj$type = obj.type) === null || _obj$type === void 0 ? void 0 : _obj$type.includes('processmaker-pm-block');
+      });
+      return filteredPinnedNodeTypes;
+    },
+    unpinnedBlocks: function unpinnedBlocks() {
+      var _this = this;
+      var objects = this.pmBlockNodeTypes;
+      return objects.filter(function (obj) {
+        return !_this.pinnedBlocks.some(function (pinnedObj) {
+          return pinnedObj.type === obj.type;
+        });
+      });
+    },
     pmBlockNodeTypes: function pmBlockNodeTypes() {
       return nodeTypesStore.getters.getPmBlockNodeTypes;
     },
@@ -49597,9 +49752,9 @@ var pmBlocksLoopvue_type_template_id_49022f8a_staticRenderFns = [];
 });
 ;// CONCATENATED MODULE: ./src/components/rails/explorer-rail/pmBlocksLoop/pmBlocksLoop.vue?vue&type=script&lang=js&
  /* harmony default export */ var pmBlocksLoop_pmBlocksLoopvue_type_script_lang_js_ = (pmBlocksLoopvue_type_script_lang_js_); 
-// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-65.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-65.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-65.use[2]!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-65.use[3]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-65.use[4]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/rails/explorer-rail/pmBlocksLoop/pmBlocksLoop.vue?vue&type=style&index=0&id=49022f8a&prod&lang=scss&
-var pmBlocksLoopvue_type_style_index_0_id_49022f8a_prod_lang_scss_ = __webpack_require__(4675);
-;// CONCATENATED MODULE: ./src/components/rails/explorer-rail/pmBlocksLoop/pmBlocksLoop.vue?vue&type=style&index=0&id=49022f8a&prod&lang=scss&
+// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-65.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-65.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-65.use[2]!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-65.use[3]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-65.use[4]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/rails/explorer-rail/pmBlocksLoop/pmBlocksLoop.vue?vue&type=style&index=0&id=3b6640fb&prod&lang=scss&
+var pmBlocksLoopvue_type_style_index_0_id_3b6640fb_prod_lang_scss_ = __webpack_require__(50786);
+;// CONCATENATED MODULE: ./src/components/rails/explorer-rail/pmBlocksLoop/pmBlocksLoop.vue?vue&type=style&index=0&id=3b6640fb&prod&lang=scss&
 
 ;// CONCATENATED MODULE: ./src/components/rails/explorer-rail/pmBlocksLoop/pmBlocksLoop.vue
 
@@ -49612,8 +49767,8 @@ var pmBlocksLoopvue_type_style_index_0_id_49022f8a_prod_lang_scss_ = __webpack_r
 
 var pmBlocksLoop_component = normalizeComponent(
   pmBlocksLoop_pmBlocksLoopvue_type_script_lang_js_,
-  pmBlocksLoopvue_type_template_id_49022f8a_render,
-  pmBlocksLoopvue_type_template_id_49022f8a_staticRenderFns,
+  pmBlocksLoopvue_type_template_id_3b6640fb_render,
+  pmBlocksLoopvue_type_template_id_3b6640fb_staticRenderFns,
   false,
   null,
   null,
@@ -54912,8 +55067,8 @@ var Controlsvue_type_template_id_0e6b16b8_scoped_true_render = function render()
 };
 var Controlsvue_type_template_id_0e6b16b8_scoped_true_staticRenderFns = [];
 
-;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/railBottom/controls/SubmenuPopper/SubmenuPopper.vue?vue&type=template&id=36ac61a1&scoped=true&
-var SubmenuPoppervue_type_template_id_36ac61a1_scoped_true_render = function render() {
+;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/railBottom/controls/SubmenuPopper/SubmenuPopper.vue?vue&type=template&id=530402d4&scoped=true&
+var SubmenuPoppervue_type_template_id_530402d4_scoped_true_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _vm.data.items ? _c('popper', {
@@ -54987,7 +55142,7 @@ var SubmenuPoppervue_type_template_id_36ac61a1_scoped_true_render = function ren
   }, [_c('span')]), !_vm.containsSvg(_vm.data.icon) ? _c('i', {
     staticClass: "fa-lg",
     class: _vm.data.icon
-  }) : _vm._e(), _c('inline-svg', {
+  }) : _c('inline-svg', {
     attrs: {
       "src": _vm.data.icon
     }
@@ -55013,13 +55168,13 @@ var SubmenuPoppervue_type_template_id_36ac61a1_scoped_true_render = function ren
   }, [!_vm.containsSvg(_vm.data.icon) ? _c('i', {
     staticClass: "fa-lg",
     class: _vm.data.icon
-  }) : _vm._e(), _c('inline-svg', {
+  }) : _c('inline-svg', {
     attrs: {
       "src": _vm.data.icon
     }
   })], 1);
 };
-var SubmenuPoppervue_type_template_id_36ac61a1_scoped_true_staticRenderFns = [];
+var SubmenuPoppervue_type_template_id_530402d4_scoped_true_staticRenderFns = [];
 
 // EXTERNAL MODULE: ./node_modules/vue-popperjs/dist/vue-popper.min.js
 var vue_popper_min = __webpack_require__(95951);
@@ -55067,9 +55222,9 @@ var vue_popper = __webpack_require__(54340);
 });
 ;// CONCATENATED MODULE: ./src/components/railBottom/controls/SubmenuPopper/SubmenuPopper.vue?vue&type=script&lang=js&
  /* harmony default export */ var SubmenuPopper_SubmenuPoppervue_type_script_lang_js_ = (SubmenuPoppervue_type_script_lang_js_); 
-// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-65.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-65.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-65.use[2]!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-65.use[3]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-65.use[4]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/railBottom/controls/SubmenuPopper/SubmenuPopper.vue?vue&type=style&index=0&id=36ac61a1&prod&lang=scss&scoped=true&
-var SubmenuPoppervue_type_style_index_0_id_36ac61a1_prod_lang_scss_scoped_true_ = __webpack_require__(60336);
-;// CONCATENATED MODULE: ./src/components/railBottom/controls/SubmenuPopper/SubmenuPopper.vue?vue&type=style&index=0&id=36ac61a1&prod&lang=scss&scoped=true&
+// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-65.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-65.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-65.use[2]!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-65.use[3]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-65.use[4]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/railBottom/controls/SubmenuPopper/SubmenuPopper.vue?vue&type=style&index=0&id=530402d4&prod&lang=scss&scoped=true&
+var SubmenuPoppervue_type_style_index_0_id_530402d4_prod_lang_scss_scoped_true_ = __webpack_require__(20887);
+;// CONCATENATED MODULE: ./src/components/railBottom/controls/SubmenuPopper/SubmenuPopper.vue?vue&type=style&index=0&id=530402d4&prod&lang=scss&scoped=true&
 
 ;// CONCATENATED MODULE: ./src/components/railBottom/controls/SubmenuPopper/SubmenuPopper.vue
 
@@ -55082,11 +55237,11 @@ var SubmenuPoppervue_type_style_index_0_id_36ac61a1_prod_lang_scss_scoped_true_
 
 var SubmenuPopper_component = normalizeComponent(
   SubmenuPopper_SubmenuPoppervue_type_script_lang_js_,
-  SubmenuPoppervue_type_template_id_36ac61a1_scoped_true_render,
-  SubmenuPoppervue_type_template_id_36ac61a1_scoped_true_staticRenderFns,
+  SubmenuPoppervue_type_template_id_530402d4_scoped_true_render,
+  SubmenuPoppervue_type_template_id_530402d4_scoped_true_staticRenderFns,
   false,
   null,
-  "36ac61a1",
+  "530402d4",
   null
   
 )