From 57d7c211a9e59eee01d9830ed1e80cf10f6dd6c6 Mon Sep 17 00:00:00 2001
From: Allan Karlson <beesforever@gmx.de>
Date: Thu, 5 Sep 2019 15:56:44 +0200
Subject: [PATCH 01/12] feat pagebuilder module position from DB

---
 .../moduleposition/moduleposition.php         | 22 +++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/plugins/pagebuilder/moduleposition/moduleposition.php b/plugins/pagebuilder/moduleposition/moduleposition.php
index f2041e457d..6d03d1871e 100644
--- a/plugins/pagebuilder/moduleposition/moduleposition.php
+++ b/plugins/pagebuilder/moduleposition/moduleposition.php
@@ -26,6 +26,24 @@ class PlgPagebuilderModuleposition extends CMSPlugin
 	 */
 	protected $autoloadLanguage = true;
 
+	private function loadValidModulePositions(){
+        $db = JFactory::getDbo();
+        $query = $db->getQuery(true)
+            ->select([$db->quoteName('position')]) #
+            ->from($db->quoteName('#__modules'))
+            ->where($db->quoteName('published') . ' = 1')
+            ->order('position asc');
+
+        $modelresults = $db->setQuery($query)->loadObjectList();
+        $positions = [];
+        foreach($modelresults as $res){
+            $res = $res->position;
+            if ($res == NULL) $res = "NONE";
+            $positions[$res] = $res;
+        }
+        return $positions;
+    }
+
 	/**
 	 * Add moduleposition element which can have every other element as child
 	 *
@@ -59,8 +77,8 @@ public function onAddElement($params)
 			'message'     => false,
 			'config'  => array(
 				'position_name' => array(
-					'value' => '',
-					'type' => 'text',
+					'value' => $this->loadValidModulePositions(),
+					'type' => 'select',
 					'required' => true,
 					'show' => true,
 					'label' => Text::_('PLG_PAGEBUILDER_MODULEPOSITION_CONFIG_POSITION_NAME'),

From 9451124bbcaa72428ab15da4a094092dd6059b8c Mon Sep 17 00:00:00 2001
From: Allan Karlson <beesforever@gmx.de>
Date: Thu, 5 Sep 2019 16:09:20 +0200
Subject: [PATCH 02/12] code style

---
 .../moduleposition/moduleposition.php         | 73 ++++++++++---------
 1 file changed, 38 insertions(+), 35 deletions(-)

diff --git a/plugins/pagebuilder/moduleposition/moduleposition.php b/plugins/pagebuilder/moduleposition/moduleposition.php
index 6d03d1871e..1cbd19a075 100644
--- a/plugins/pagebuilder/moduleposition/moduleposition.php
+++ b/plugins/pagebuilder/moduleposition/moduleposition.php
@@ -26,23 +26,26 @@ class PlgPagebuilderModuleposition extends CMSPlugin
 	 */
 	protected $autoloadLanguage = true;
 
-	private function loadValidModulePositions(){
-        $db = JFactory::getDbo();
-        $query = $db->getQuery(true)
-            ->select([$db->quoteName('position')]) #
-            ->from($db->quoteName('#__modules'))
-            ->where($db->quoteName('published') . ' = 1')
-            ->order('position asc');
+	private function loadValidModulePositions()
+	{
+		$db    = JFactory::getDbo();
+		$query = $db->getQuery(true)
+			->select([$db->quoteName('position')])#
+			->from($db->quoteName('#__modules'))
+			->where($db->quoteName('published') . ' = 1')
+			->order('position asc');
 
-        $modelresults = $db->setQuery($query)->loadObjectList();
-        $positions = [];
-        foreach($modelresults as $res){
-            $res = $res->position;
-            if ($res == NULL) $res = "NONE";
-            $positions[$res] = $res;
-        }
-        return $positions;
-    }
+		$modelresults = $db->setQuery($query)->loadObjectList();
+		$positions    = [];
+		foreach ($modelresults as $res)
+		{
+			$res = $res->position;
+			if ($res == null) $res = "NONE";
+			$positions[$res] = $res;
+		}
+
+		return $positions;
+	}
 
 	/**
 	 * Add moduleposition element which can have every other element as child
@@ -58,13 +61,13 @@ public function onAddElement($params)
 		Text::script('PLG_PAGEBUILDER_MODULEPOSITION_NAME');
 
 		$chromeValues = array(
-			Text::_('PLG_PAGEBUILDER_MODULEPOSITION_CONFIG_CHROME_NONE') => '',
-			Text::_('PLG_PAGEBUILDER_MODULEPOSITION_CONFIG_CHROME_HTML5') => 'html5',
-			Text::_('PLG_PAGEBUILDER_MODULEPOSITION_CONFIG_CHROME_HORZ') => 'horz',
+			Text::_('PLG_PAGEBUILDER_MODULEPOSITION_CONFIG_CHROME_NONE')    => '',
+			Text::_('PLG_PAGEBUILDER_MODULEPOSITION_CONFIG_CHROME_HTML5')   => 'html5',
+			Text::_('PLG_PAGEBUILDER_MODULEPOSITION_CONFIG_CHROME_HORZ')    => 'horz',
 			Text::_('PLG_PAGEBUILDER_MODULEPOSITION_CONFIG_CHROME_OUTLINE') => 'outline',
 			Text::_('PLG_PAGEBUILDER_MODULEPOSITION_CONFIG_CHROME_ROUNDED') => 'rounded',
-			Text::_('PLG_PAGEBUILDER_MODULEPOSITION_CONFIG_CHROME_TABLE') => 'table',
-			Text::_('PLG_PAGEBUILDER_MODULEPOSITION_CONFIG_CHROME_XHTML') => 'xhtml',
+			Text::_('PLG_PAGEBUILDER_MODULEPOSITION_CONFIG_CHROME_TABLE')   => 'table',
+			Text::_('PLG_PAGEBUILDER_MODULEPOSITION_CONFIG_CHROME_XHTML')   => 'xhtml',
 		);
 
 		return array(
@@ -75,21 +78,21 @@ public function onAddElement($params)
 			'children'    => false,
 			'component'   => false,
 			'message'     => false,
-			'config'  => array(
+			'config'      => array(
 				'position_name' => array(
-					'value' => $this->loadValidModulePositions(),
-					'type' => 'select',
-					'required' => true,
-					'show' => true,
-					'label' => Text::_('PLG_PAGEBUILDER_MODULEPOSITION_CONFIG_POSITION_NAME'),
+					'value'       => $this->loadValidModulePositions(),
+					'type'        => 'select',
+					'required'    => true,
+					'show'        => true,
+					'label'       => Text::_('PLG_PAGEBUILDER_MODULEPOSITION_CONFIG_POSITION_NAME'),
 					'placeholder' => Text::_('PLG_PAGEBUILDER_MODULEPOSITION_ENTER_NAME')
 				),
 				'module_chrome' => array(
-					'value' => $chromeValues,
-					'type' => 'select',
+					'value'    => $chromeValues,
+					'type'     => 'select',
 					'required' => false,
-					'show' => true,
-					'label' => Text::_('PLG_PAGEBUILDER_MODULEPOSITION_CONFIG_CHROME')
+					'show'     => true,
+					'label'    => Text::_('PLG_PAGEBUILDER_MODULEPOSITION_CONFIG_CHROME')
 				)
 			)
 		);
@@ -124,11 +127,11 @@ public function onRenderPagebuilderElement($context, $data)
 		$html .= ' />';
 
 		return array(
-			'title' => Text::_('PLG_PAGEBUILDER_MODULEPOSITION_NAME'),
+			'title'  => Text::_('PLG_PAGEBUILDER_MODULEPOSITION_NAME'),
 			'config' => $data->options,
-			'id'    => 'moduleposition',
-			'start' => $html,
-			'end'   => null
+			'id'     => 'moduleposition',
+			'start'  => $html,
+			'end'    => null
 		);
 	}
 }

From e89653d4c75984f992dcb90060724fe1c9997dbd Mon Sep 17 00:00:00 2001
From: Allan Karlson <beesforever@gmx.de>
Date: Thu, 5 Sep 2019 17:15:10 +0200
Subject: [PATCH 03/12] load only positions from frontend

---
 plugins/pagebuilder/moduleposition/moduleposition.php | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/plugins/pagebuilder/moduleposition/moduleposition.php b/plugins/pagebuilder/moduleposition/moduleposition.php
index 1cbd19a075..b55879bb3e 100644
--- a/plugins/pagebuilder/moduleposition/moduleposition.php
+++ b/plugins/pagebuilder/moduleposition/moduleposition.php
@@ -30,9 +30,9 @@ private function loadValidModulePositions()
 	{
 		$db    = JFactory::getDbo();
 		$query = $db->getQuery(true)
-			->select([$db->quoteName('position')])#
-			->from($db->quoteName('#__modules'))
-			->where($db->quoteName('published') . ' = 1')
+			->select([$db->quoteName('m.position')])
+			->from($db->quoteName('#__modules', 'm'))
+			->join("", $db->quoteName('#__extensions', 'e'), ' m.module = e.name and e.`client_id` = 0')
 			->order('position asc');
 
 		$modelresults = $db->setQuery($query)->loadObjectList();

From a56609eacc9dae9d24a03c1b9a68eec16ab90560 Mon Sep 17 00:00:00 2001
From: Allan Karlson <beesforever@gmx.de>
Date: Fri, 6 Sep 2019 10:19:35 +0200
Subject: [PATCH 04/12] render a list to a input - idea

---
 .../components/modals/modal-add-element.vue   | 31 ++++++++++++++++++-
 .../moduleposition/moduleposition.php         |  2 +-
 2 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/build/media_source/system/js/fields/pagebuilder/components/modals/modal-add-element.vue b/build/media_source/system/js/fields/pagebuilder/components/modals/modal-add-element.vue
index 80a5e60a03..c3767b66c9 100644
--- a/build/media_source/system/js/fields/pagebuilder/components/modals/modal-add-element.vue
+++ b/build/media_source/system/js/fields/pagebuilder/components/modals/modal-add-element.vue
@@ -22,6 +22,8 @@
 					</div>
 				</div>
 				<div class="col-8 tab-content">
+
+
 					<div v-for="element in allowedChildren" :id="'list-'+element.id" class="tab-pane fade" role="tabpanel">
 						{{ element.description }}
 
@@ -54,8 +56,20 @@
 									v-model="config[id]" @blur="check(element.id, $event)">
 								<option v-for="(value, key) in conf.value" :value="key">{{ value }}</option>
 							</select>
-							<input v-else :type="conf.type" :id="id" :name="id" class="form-control" required
+							<input v-else-if="conf.type === 'input'" :type="conf.type" :id="id" :name="id" class="form-control" required
 									:placeholder="conf.placeholder" v-model="config[id]" @blur="check(element.id, $event)"/>
+
+
+							<div v-else>
+								<input style="max-width: 91%;" :type="conf.type" :id="id" :name="id" class="form-control" required
+									   :placeholder="conf.placeholder" v-model="config[id]" @blur="check(element.id, $event)"/>
+								<div id="inputselection_wrapper">
+									<span class="inputselection_list" v-for="custom_pos in Object.keys(conf.value)">{{custom_pos}}</span>
+								</div>
+
+							</div>
+
+
 						</div>
 					</div>
 				</div>
@@ -75,9 +89,13 @@
 
 <script>
   import {mapState} from 'vuex';
+  import VueSimpleSuggest from 'vue-simple-suggest'
 
   export default {
     name: 'modal-add-element',
+      components: {
+          VueSimpleSuggest
+      },
     data() {
       return {
         images: window.Joomla.getOptions('system.pagebuilder').images,
@@ -85,6 +103,7 @@
         config: '',
         childConfig: '',
         select: [],
+          list : ['a','b','c']
       };
     },
     computed: {
@@ -170,3 +189,13 @@
     },
   };
 </script>
+
+
+<style>
+	#inputselection_wrapper {
+
+	}
+	.inputselection_list{
+		display: block;
+	}
+</style>
diff --git a/plugins/pagebuilder/moduleposition/moduleposition.php b/plugins/pagebuilder/moduleposition/moduleposition.php
index b55879bb3e..0e4ed92826 100644
--- a/plugins/pagebuilder/moduleposition/moduleposition.php
+++ b/plugins/pagebuilder/moduleposition/moduleposition.php
@@ -81,7 +81,7 @@ public function onAddElement($params)
 			'config'      => array(
 				'position_name' => array(
 					'value'       => $this->loadValidModulePositions(),
-					'type'        => 'select',
+					'type'        => 'inputselect',
 					'required'    => true,
 					'show'        => true,
 					'label'       => Text::_('PLG_PAGEBUILDER_MODULEPOSITION_CONFIG_POSITION_NAME'),

From 3cc8cc0b981d2258ee2205f34c854d45dbcec589 Mon Sep 17 00:00:00 2001
From: Allan Karlson <beesforever@gmx.de>
Date: Fri, 6 Sep 2019 11:06:38 +0200
Subject: [PATCH 05/12] create component to handle input / selection

---
 .../components/modals/input-selection.vue     |  57 ++++
 .../components/modals/modal-add-element.vue   |  27 +-
 package-lock.json                             | 248 +++++++++++++-----
 package.json                                  |   5 +-
 webpack.config.js                             |  60 +++--
 5 files changed, 291 insertions(+), 106 deletions(-)
 create mode 100644 build/media_source/system/js/fields/pagebuilder/components/modals/input-selection.vue

diff --git a/build/media_source/system/js/fields/pagebuilder/components/modals/input-selection.vue b/build/media_source/system/js/fields/pagebuilder/components/modals/input-selection.vue
new file mode 100644
index 0000000000..04b6848dd7
--- /dev/null
+++ b/build/media_source/system/js/fields/pagebuilder/components/modals/input-selection.vue
@@ -0,0 +1,57 @@
+<template>
+	<div>
+		<input  :type="type" :id="id" :name="id" class="form-control" required
+				:placeholder="placeholder" v-model="content"  @click="toggleSelection" />
+		<div id="inputselection_wrapper" v-if="show_list">
+			<span @click="select_item(custom_pos)" class="inputselection_list" v-for="custom_pos in options">{{custom_pos}}</span>
+		</div>
+
+	</div>
+</template>
+
+<script>
+    export default {
+        name: "input-selection",
+		props: ['placeholder', 'value', 'id', 'type', 'options'],
+		data() {
+          return {
+              show_list: false,
+			  content: this.value
+		  }
+		},
+		methods: {
+            select_item(payload){
+                this.content = payload
+				this.toggleSelection()
+			},
+            toggleSelection(){
+                this.show_list = !this.show_list
+			}
+		},
+        watch:{
+            content(inew){
+                this.$emit('input', inew)
+			}
+
+		}
+    }
+</script>
+
+<style scoped>
+	#inputselection_wrapper {
+		max-width: 100%;
+		overflow-y: scroll;
+		overflow-x: hidden;
+		height: 150px;
+		border: 1px solid #cdcdcd;
+	}
+	.inputselection_list{
+		display: block;
+		padding: 8px 12px;
+	}
+	.inputselection_list:hover{
+		color: #fff;
+		background-color: #0d2538;
+		border-color: #0d2538;
+	}
+</style>
diff --git a/build/media_source/system/js/fields/pagebuilder/components/modals/modal-add-element.vue b/build/media_source/system/js/fields/pagebuilder/components/modals/modal-add-element.vue
index c3767b66c9..d806d7f0ca 100644
--- a/build/media_source/system/js/fields/pagebuilder/components/modals/modal-add-element.vue
+++ b/build/media_source/system/js/fields/pagebuilder/components/modals/modal-add-element.vue
@@ -60,14 +60,9 @@
 									:placeholder="conf.placeholder" v-model="config[id]" @blur="check(element.id, $event)"/>
 
 
-							<div v-else>
-								<input style="max-width: 91%;" :type="conf.type" :id="id" :name="id" class="form-control" required
-									   :placeholder="conf.placeholder" v-model="config[id]" @blur="check(element.id, $event)"/>
-								<div id="inputselection_wrapper">
-									<span class="inputselection_list" v-for="custom_pos in Object.keys(conf.value)">{{custom_pos}}</span>
-								</div>
-
-							</div>
+							<input-selection :id="id" :name="id" v-model="config[id]" @blur="check(element.id, $event)" v-else
+											 required :placeholder="conf.placeholder"  :type="conf.type"
+											 :options="Object.keys(conf.value)"></input-selection>
 
 
 						</div>
@@ -89,12 +84,12 @@
 
 <script>
   import {mapState} from 'vuex';
-  import VueSimpleSuggest from 'vue-simple-suggest'
+  import inputSelection from './input-selection.vue'
 
   export default {
     name: 'modal-add-element',
       components: {
-          VueSimpleSuggest
+          inputSelection
       },
     data() {
       return {
@@ -102,8 +97,7 @@
         selectedElement: '',
         config: '',
         childConfig: '',
-        select: [],
-          list : ['a','b','c']
+        select: []
       };
     },
     computed: {
@@ -190,12 +184,3 @@
   };
 </script>
 
-
-<style>
-	#inputselection_wrapper {
-
-	}
-	.inputselection_list{
-		display: block;
-	}
-</style>
diff --git a/package-lock.json b/package-lock.json
index c4b3c284df..ae5c5ba27a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1720,8 +1720,7 @@
     "ajv-keywords": {
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.4.1.tgz",
-      "integrity": "sha512-RO1ibKvd27e6FEShVFfPALuHI3WjSVNeK5FIsmme/LYRNxjKuNj+Dt7bucLa6NdSv3JcVTyMlm9kGR84z1XpaQ==",
-      "dev": true
+      "integrity": "sha512-RO1ibKvd27e6FEShVFfPALuHI3WjSVNeK5FIsmme/LYRNxjKuNj+Dt7bucLa6NdSv3JcVTyMlm9kGR84z1XpaQ=="
     },
     "alphanum-sort": {
       "version": "1.0.2",
@@ -1777,7 +1776,6 @@
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.0.3.tgz",
       "integrity": "sha512-c6IvoeBECQlMVuYUjSwimnhmztImpErfxJzWZhIQinIvQWoGOnB0dLIgifbPHQt5heS6mNlaZG16f06H3C8t1g==",
-      "dev": true,
       "requires": {
         "normalize-path": "^3.0.0",
         "picomatch": "^2.0.4"
@@ -2085,6 +2083,43 @@
       "integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==",
       "dev": true
     },
+    "axios": {
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.0.tgz",
+      "integrity": "sha512-1uvKqKQta3KBxIz14F2v06AEHZ/dIoeKfbTRkK1E5oqjDnuEerLmYTgJB5AiQZHJcljpg1TuRzdjDR06qNk0DQ==",
+      "requires": {
+        "follow-redirects": "1.5.10",
+        "is-buffer": "^2.0.2"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "follow-redirects": {
+          "version": "1.5.10",
+          "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
+          "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
+          "requires": {
+            "debug": "=3.1.0"
+          }
+        },
+        "is-buffer": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.3.tgz",
+          "integrity": "sha512-U15Q7MXTuZlrbymiz95PJpZxu8IlipAp4dtS3wOdgPXx3mqBnslrWU14kxfHB+Py/+2PVKSr37dMAgM2A4uArw=="
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+        }
+      }
+    },
     "babel-code-frame": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
@@ -2539,8 +2574,7 @@
     "binary-extensions": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.0.0.tgz",
-      "integrity": "sha512-Phlt0plgpIIBOGTT/ehfFnbNlfsDEiqmzE2KRXoX1bLIlir4X/MR+zSyBEkL05ffWgnRSf/DXv+WrUAVr93/ow==",
-      "dev": true
+      "integrity": "sha512-Phlt0plgpIIBOGTT/ehfFnbNlfsDEiqmzE2KRXoX1bLIlir4X/MR+zSyBEkL05ffWgnRSf/DXv+WrUAVr93/ow=="
     },
     "bl": {
       "version": "2.2.0",
@@ -2677,7 +2711,6 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
       "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-      "dev": true,
       "requires": {
         "fill-range": "^7.0.1"
       }
@@ -3053,7 +3086,6 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.0.2.tgz",
       "integrity": "sha512-c4PR2egjNjI1um6bamCQ6bUNPDiyofNQruHvKgHQ4gDUP/ITSVSzNsiI5OWtHOsX323i5ha/kk4YmOZ1Ktg7KA==",
-      "dev": true,
       "requires": {
         "anymatch": "^3.0.1",
         "braces": "^3.0.2",
@@ -3243,6 +3275,16 @@
       "integrity": "sha1-2jCcwmPfFZlMaIypAheco8fNfH4=",
       "dev": true
     },
+    "clone-deep": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz",
+      "integrity": "sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==",
+      "requires": {
+        "is-plain-object": "^2.0.4",
+        "kind-of": "^6.0.2",
+        "shallow-clone": "^3.0.0"
+      }
+    },
     "coa": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/coa/-/coa-2.0.2.tgz",
@@ -5199,10 +5241,13 @@
       }
     },
     "eslint-utils": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-1.3.1.tgz",
-      "integrity": "sha512-Z7YjnIldX+2XMcjr7ZkgEsOj/bREONV60qYeB/bjMAqqqZ4zxKyWX+BOUkdmRmA9riiIPVvo5x86m5elviOk0Q==",
-      "dev": true
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-1.4.2.tgz",
+      "integrity": "sha512-eAZS2sEUMlIeCjBeubdj45dmBHQwPHWyBcT1VSYB7o9x9WRRqKxyUoiXlRjyAwzN7YEzHJlYg0NmzDRWx6GP4Q==",
+      "dev": true,
+      "requires": {
+        "eslint-visitor-keys": "^1.0.0"
+      }
     },
     "eslint-visitor-keys": {
       "version": "1.0.0",
@@ -5560,8 +5605,7 @@
     "fast-deep-equal": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz",
-      "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=",
-      "dev": true
+      "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk="
     },
     "fast-glob": {
       "version": "2.2.7",
@@ -5603,8 +5647,7 @@
     "fast-json-stable-stringify": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz",
-      "integrity": "sha1-1RQsDK7msRifh9OnYREGT4bIu/I=",
-      "dev": true
+      "integrity": "sha1-1RQsDK7msRifh9OnYREGT4bIu/I="
     },
     "fast-levenshtein": {
       "version": "2.0.6",
@@ -5680,7 +5723,6 @@
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
       "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-      "dev": true,
       "requires": {
         "to-regex-range": "^5.0.1"
       }
@@ -5993,7 +6035,6 @@
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.0.7.tgz",
       "integrity": "sha512-a7YT0SV3RB+DjYcppwVDLtn13UQnmg0SWZS7ezZD0UjnLwXmy8Zm21GMVGLaFGimIqcvyMQaOJBrop8MyOp1kQ==",
-      "dev": true,
       "optional": true
     },
     "fstream": {
@@ -6149,7 +6190,6 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.0.0.tgz",
       "integrity": "sha512-Z2RwiujPRGluePM6j699ktJYxmPpJKCfpGA13jz2hmFZC7gKetzrWvg5KN3+OsIFmydGyZ1AVwERCq1w/ZZwRg==",
-      "dev": true,
       "requires": {
         "is-glob": "^4.0.1"
       }
@@ -7117,7 +7157,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
       "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "dev": true,
       "requires": {
         "binary-extensions": "^2.0.0"
       }
@@ -7208,8 +7247,7 @@
     "is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
-      "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
-      "dev": true
+      "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI="
     },
     "is-finite": {
       "version": "1.0.2",
@@ -7230,7 +7268,6 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
       "integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==",
-      "dev": true,
       "requires": {
         "is-extglob": "^2.1.1"
       }
@@ -7238,8 +7275,7 @@
     "is-number": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="
     },
     "is-obj": {
       "version": "1.0.1",
@@ -7281,7 +7317,6 @@
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
       "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
-      "dev": true,
       "requires": {
         "isobject": "^3.0.1"
       }
@@ -7379,8 +7414,7 @@
     "isobject": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
-      "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
-      "dev": true
+      "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
     },
     "isstream": {
       "version": "0.1.2",
@@ -7695,8 +7729,7 @@
     "json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-      "dev": true
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
     },
     "json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
@@ -7908,8 +7941,7 @@
     "kind-of": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz",
-      "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==",
-      "dev": true
+      "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA=="
     },
     "launch-editor": {
       "version": "2.2.1",
@@ -9100,8 +9132,7 @@
     "normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "dev": true
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA=="
     },
     "normalize-range": {
       "version": "0.1.2",
@@ -9747,8 +9778,7 @@
     "picomatch": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.0.7.tgz",
-      "integrity": "sha512-oLHIdio3tZ0qH76NybpeneBhYVj0QFTfXEFTc/B3zKQspYfYYkWYgFsmzo+4kvId/bQRcNkVeguI3y+CD22BtA==",
-      "dev": true
+      "integrity": "sha512-oLHIdio3tZ0qH76NybpeneBhYVj0QFTfXEFTc/B3zKQspYfYYkWYgFsmzo+4kvId/bQRcNkVeguI3y+CD22BtA=="
     },
     "pify": {
       "version": "2.3.0",
@@ -10591,7 +10621,6 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.1.1.tgz",
       "integrity": "sha512-XXdSXZrQuvqoETj50+JAitxz1UPdt5dupjT6T5nVB+WvjMv2XKYj+s7hPeAVCXvmJrL36O4YYyWlIC3an2ePiQ==",
-      "dev": true,
       "requires": {
         "picomatch": "^2.0.4"
       }
@@ -11048,6 +11077,14 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "dev": true
     },
+    "sass": {
+      "version": "1.23.0-module.beta.1",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.23.0-module.beta.1.tgz",
+      "integrity": "sha512-Cb6l+z/z5mIpOe8lPp+DttHhHyb6J8SsscSIhLUzqDH2Ta2+9mpz8TRvYezD1n+Ey1TWi3EKz8VUPg42Zc1vmA==",
+      "requires": {
+        "chokidar": ">=2.0.0 <4.0.0"
+      }
+    },
     "sass-graph": {
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-2.2.4.tgz",
@@ -11246,6 +11283,50 @@
         }
       }
     },
+    "sass-loader": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-8.0.0.tgz",
+      "integrity": "sha512-+qeMu563PN7rPdit2+n5uuYVR0SSVwm0JsOUsaJXzgYcClWSlmX0iHDnmeOobPkf5kUglVot3QS6SyLyaQoJ4w==",
+      "requires": {
+        "clone-deep": "^4.0.1",
+        "loader-utils": "^1.2.3",
+        "neo-async": "^2.6.1",
+        "schema-utils": "^2.1.0",
+        "semver": "^6.3.0"
+      },
+      "dependencies": {
+        "ajv": {
+          "version": "6.10.2",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.10.2.tgz",
+          "integrity": "sha512-TXtUUEYHuaTEbLZWIKUr5pmBuhDLy+8KYtPYdcV8qC+pOZL+NKqYwvWSRrVXHn+ZmRRAu8vJTAznH7Oag6RVRw==",
+          "requires": {
+            "fast-deep-equal": "^2.0.1",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.4.1",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "neo-async": {
+          "version": "2.6.1",
+          "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.1.tgz",
+          "integrity": "sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw=="
+        },
+        "schema-utils": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.2.0.tgz",
+          "integrity": "sha512-5EwsCNhfFTZvUreQhx/4vVQpJ/lnCAkgoIHLhSpp4ZirE+4hzFvdJi0FMub6hxbFVBJYSpeVVmon+2e7uEGRrA==",
+          "requires": {
+            "ajv": "^6.10.2",
+            "ajv-keywords": "^3.4.1"
+          }
+        },
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
+        }
+      }
+    },
     "sax": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
@@ -11501,6 +11582,14 @@
         "safe-buffer": "^5.0.1"
       }
     },
+    "shallow-clone": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-3.0.1.tgz",
+      "integrity": "sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==",
+      "requires": {
+        "kind-of": "^6.0.2"
+      }
+    },
     "shebang-command": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
@@ -12799,7 +12888,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
       "requires": {
         "is-number": "^7.0.0"
       }
@@ -13138,7 +13226,6 @@
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.2.2.tgz",
       "integrity": "sha512-KY9Frmirql91X2Qgjry0Wd4Y+YTdrdZheS8TFwvkbLWf/G5KNJDCh6pKL5OZctEW4+0Baa5idK2ZQuELRwPznQ==",
-      "dev": true,
       "requires": {
         "punycode": "^2.1.0"
       },
@@ -13146,8 +13233,7 @@
         "punycode": {
           "version": "2.1.1",
           "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
-          "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
-          "dev": true
+          "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A=="
         }
       }
     },
@@ -13548,7 +13634,8 @@
             "ansi-regex": {
               "version": "2.1.1",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "aproba": {
               "version": "1.2.0",
@@ -13569,12 +13656,14 @@
             "balanced-match": {
               "version": "1.0.0",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "brace-expansion": {
               "version": "1.1.11",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "balanced-match": "^1.0.0",
                 "concat-map": "0.0.1"
@@ -13589,17 +13678,20 @@
             "code-point-at": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "concat-map": {
               "version": "0.0.1",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "console-control-strings": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -13716,7 +13808,8 @@
             "inherits": {
               "version": "2.0.3",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "ini": {
               "version": "1.3.5",
@@ -13728,6 +13821,7 @@
               "version": "1.0.0",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -13742,6 +13836,7 @@
               "version": "3.0.4",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "brace-expansion": "^1.1.7"
               }
@@ -13749,12 +13844,14 @@
             "minimist": {
               "version": "0.0.8",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "minipass": {
               "version": "2.3.5",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.2",
                 "yallist": "^3.0.0"
@@ -13773,6 +13870,7 @@
               "version": "0.5.1",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -13853,7 +13951,8 @@
             "number-is-nan": {
               "version": "1.0.1",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "object-assign": {
               "version": "4.1.1",
@@ -13865,6 +13964,7 @@
               "version": "1.4.0",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -13950,7 +14050,8 @@
             "safe-buffer": {
               "version": "5.1.2",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "safer-buffer": {
               "version": "2.1.2",
@@ -13986,6 +14087,7 @@
               "version": "1.0.2",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",
@@ -14005,6 +14107,7 @@
               "version": "3.0.1",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "ansi-regex": "^2.0.0"
               }
@@ -14048,12 +14151,14 @@
             "wrappy": {
               "version": "1.0.2",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "yallist": {
               "version": "3.0.3",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             }
           }
         },
@@ -14648,7 +14753,8 @@
             "ansi-regex": {
               "version": "2.1.1",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "aproba": {
               "version": "1.2.0",
@@ -14669,12 +14775,14 @@
             "balanced-match": {
               "version": "1.0.0",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "brace-expansion": {
               "version": "1.1.11",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "balanced-match": "^1.0.0",
                 "concat-map": "0.0.1"
@@ -14689,17 +14797,20 @@
             "code-point-at": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "concat-map": {
               "version": "0.0.1",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "console-control-strings": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -14816,7 +14927,8 @@
             "inherits": {
               "version": "2.0.3",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "ini": {
               "version": "1.3.5",
@@ -14828,6 +14940,7 @@
               "version": "1.0.0",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -14842,6 +14955,7 @@
               "version": "3.0.4",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "brace-expansion": "^1.1.7"
               }
@@ -14849,12 +14963,14 @@
             "minimist": {
               "version": "0.0.8",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "minipass": {
               "version": "2.3.5",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.2",
                 "yallist": "^3.0.0"
@@ -14873,6 +14989,7 @@
               "version": "0.5.1",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -14953,7 +15070,8 @@
             "number-is-nan": {
               "version": "1.0.1",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "object-assign": {
               "version": "4.1.1",
@@ -14965,6 +15083,7 @@
               "version": "1.4.0",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -15050,7 +15169,8 @@
             "safe-buffer": {
               "version": "5.1.2",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "safer-buffer": {
               "version": "2.1.2",
@@ -15086,6 +15206,7 @@
               "version": "1.0.2",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",
@@ -15105,6 +15226,7 @@
               "version": "3.0.1",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "ansi-regex": "^2.0.0"
               }
@@ -15148,12 +15270,14 @@
             "wrappy": {
               "version": "1.0.2",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "yallist": {
               "version": "3.0.3",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             }
           }
         },
diff --git a/package.json b/package.json
index 84f9e5e105..1b402077f3 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "@claviska/jquery-minicolors": "2.2.6",
     "@webcomponents/webcomponentsjs": "2.1.2",
     "awesomplete": "1.1.4",
+    "axios": "^0.19.0",
     "bootstrap": "~4.3",
     "choices.js": "^7.0.0",
     "chosen-js": "1.6.2",
@@ -47,8 +48,10 @@
     "metismenujs": "^1.0.3",
     "popper.js": "^1.15.0",
     "punycode": "1.4.1",
-    "roboto-fontface": "^0.10.0",
     "qrcode-generator": "^1.4.3",
+    "roboto-fontface": "^0.10.0",
+    "sass": "^1.23.0-module.beta.1",
+    "sass-loader": "^8.0.0",
     "skipto": "^2.0.4",
     "tinymce": "5.0.1",
     "vue": "^2.6.10",
diff --git a/webpack.config.js b/webpack.config.js
index cafe6c34e9..8247b37efa 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -2,27 +2,43 @@ const path = require('path');
 const VueLoaderPlugin = require('vue-loader/lib/plugin');
 
 module.exports = {
-  mode: 'production',
-  entry: [
-    './build/media_source/system/js/fields/pagebuilder/pagebuilder.js'
-  ],
-  output: {
-    path: path.resolve(__dirname, './media/system/js/fields/pagebuilder'),
-    filename: 'pagebuilder.min.js',
-  },
-  module: {
-    rules: [
-      {
-        test: /\.vue$/,
-        loader: 'vue-loader',
-      },
+    mode: 'production',
+    entry: [
+        './build/media_source/system/js/fields/pagebuilder/pagebuilder.js'
     ],
-  },
-  plugins: [
-    new VueLoaderPlugin(),
-  ],
-  performance: {
-    hints: false
-  },
-  devtool: 'eval-source-map',
+    output: {
+        path: path.resolve(__dirname, './media/system/js/fields/pagebuilder'),
+        filename: 'pagebuilder.min.js',
+    },
+    module: {
+        rules: [
+            {
+                test: /\.vue$/,
+                loader: 'vue-loader',
+            },
+            {
+                test: /\.scss$/,
+                use: [
+                    'vue-style-loader',
+                    'css-loader',
+                    'sass-loader'
+                ]
+            },
+            {
+                test: /\.css/,
+                use: [
+                    'vue-style-loader',
+                    'css-loader',
+
+                ]
+            }
+        ],
+    },
+    plugins: [
+        new VueLoaderPlugin(),
+    ],
+    performance: {
+        hints: false
+    },
+    devtool: 'eval-source-map',
 };

From 4c8444614b6a0fab5a5a2b76d95396f65e2ab107 Mon Sep 17 00:00:00 2001
From: Allan Karlson <beesforever@gmx.de>
Date: Fri, 6 Sep 2019 11:08:06 +0200
Subject: [PATCH 06/12] clean up code

---
 .../js/fields/pagebuilder/pagebuilder.js      |  5 ++--
 .../store/plugins/persistedstate.js           |  6 ++---
 .../js/fields/pagebuilder/store/state.js      |  6 ++---
 .../js/fields/pagebuilder/store/store.js      | 26 +++++++++----------
 4 files changed, 20 insertions(+), 23 deletions(-)

diff --git a/build/media_source/system/js/fields/pagebuilder/pagebuilder.js b/build/media_source/system/js/fields/pagebuilder/pagebuilder.js
index c918efd4a1..25b1735bb6 100644
--- a/build/media_source/system/js/fields/pagebuilder/pagebuilder.js
+++ b/build/media_source/system/js/fields/pagebuilder/pagebuilder.js
@@ -1,6 +1,7 @@
 import './bootstrap/bootstrap.min.js';
 import Vue from 'vue';
 import VueJsModal from 'vue-js-modal';
+import VueGridLayout from 'vue-grid-layout';
 import App from './components/app.vue';
 import Translate from './plugins/translate';
 import editelement from './components/settings/editelement.vue';
@@ -9,7 +10,6 @@ import AddElementModal from './components/modals/modal-add-element.vue';
 import store from './store/store';
 import Item from './components/elements/item.vue';
 import Grid from './components/elements/grid.vue';
-import VueGridLayout from 'vue-grid-layout';
 
 // Add the plugins
 Vue.use(Translate);
@@ -31,5 +31,4 @@ document.addEventListener('DOMContentLoaded',
     el: '#pagebuilder-editor',
     store,
     render: h => h(App),
-  })
-);
+  }));
diff --git a/build/media_source/system/js/fields/pagebuilder/store/plugins/persistedstate.js b/build/media_source/system/js/fields/pagebuilder/store/plugins/persistedstate.js
index 569a6291ef..c2dd809fd5 100644
--- a/build/media_source/system/js/fields/pagebuilder/store/plugins/persistedstate.js
+++ b/build/media_source/system/js/fields/pagebuilder/store/plugins/persistedstate.js
@@ -2,7 +2,7 @@
 export const persistedStateOptions = {
   key: 'joomlaPageBuilder',
   paths: [
-    'activeDevice'
+    'activeDevice',
   ],
-  storage: window.localStorage
-}
+  storage: window.localStorage,
+};
diff --git a/build/media_source/system/js/fields/pagebuilder/store/state.js b/build/media_source/system/js/fields/pagebuilder/store/state.js
index 55ad6d9ed6..bd33a13a1c 100644
--- a/build/media_source/system/js/fields/pagebuilder/store/state.js
+++ b/build/media_source/system/js/fields/pagebuilder/store/state.js
@@ -29,6 +29,6 @@ export default {
     sm: '576px',
     md: '768px',
     lg: '992px',
-    xl: '1200px'
-  }
-}
+    xl: '1200px',
+  },
+};
diff --git a/build/media_source/system/js/fields/pagebuilder/store/store.js b/build/media_source/system/js/fields/pagebuilder/store/store.js
index e23a6b3564..c2d879dfb8 100644
--- a/build/media_source/system/js/fields/pagebuilder/store/store.js
+++ b/build/media_source/system/js/fields/pagebuilder/store/store.js
@@ -1,7 +1,7 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
-import state from './state';
 import createPersistedState from 'vuex-persistedstate';
+import state from './state';
 import { persistedStateOptions } from './plugins/persistedstate';
 
 Vue.use(Vuex);
@@ -41,7 +41,7 @@ const mutations = {
     mutations.fillAllowedChildren(state, parent.type);
     state.parent = parent.children || parent;
   },
-  addElement(state, {name, config, childConfig}) {
+  addElement(state, { name, config, childConfig }) {
     const type = state.elements.find(el => el.id === name);
     state.maxKey += 1;
 
@@ -88,7 +88,7 @@ const mutations = {
       configs.forEach((config) => {
         state.maxKey += 1;
 
-        let newChild = {
+        const newChild = {
           key: state.maxKey,
           type: type.id,
           title: type.title,
@@ -109,7 +109,7 @@ const mutations = {
               xl: 0,
             },
           },
-          children: []
+          children: [],
         };
         newChild.options.size[state.activeDevice] = config;
 
@@ -130,7 +130,7 @@ const mutations = {
 
     findMaxKey(state.elementArray);
   },
-  editElement(state, {element, parent}) {
+  editElement(state, { element, parent }) {
     state.selectedSettings = 'edit-element';
     state.elementSelected = element;
     state.parent = parent;
@@ -147,7 +147,7 @@ const mutations = {
       element.children.forEach(child => this.checkComponent(state, child));
     }
   },
-  deleteElement(state, {element, parent}) {
+  deleteElement(state, { element, parent }) {
     const elements = parent ? parent.children : state.elementArray;
     const index = elements.indexOf(element);
     mutations.checkComponent(state, element);
@@ -175,21 +175,21 @@ const mutations = {
   updateDeviceWidth(state, device) {
     state.activeDevice = device;
   },
-  updateChildrenOrder(state, {parent, children}) {
+  updateChildrenOrder(state, { parent, children }) {
     parent.children = children;
   },
   updateGrid(state) {
     document.getElementById('jform_params_grid').value = JSON.stringify(state.elementArray);
   },
   restorePosition(state, location) {
-    let element = document.getElementsByClassName('drag_' + location)[0];
+    const element = document.getElementsByClassName(`drag_${location}`)[0];
     if (element) {
       element.__vue__.$data.element.options[location] = false;
-      element.classList.remove('drag_' + location);
+      element.classList.remove(`drag_${location}`);
     }
-    document.getElementById('placeholder_' + location).appendChild(document.getElementById('drag_' + location));
+    document.getElementById(`placeholder_${location}`).appendChild(document.getElementById(`drag_${location}`));
     mutations.updateGrid(state);
-  }
+  },
 };
 
 const getters = {
@@ -217,9 +217,7 @@ const getters = {
 
     return state.size;
   },
-  getType: state => (element) => {
-    return state.elements.find(el => el.id === element.type || element.id);
-  },
+  getType: state => element => state.elements.find(el => el.id === element.type || element.id),
 };
 
 export default new Vuex.Store({

From 32c47775ab717af5b68f1dd60f28d008e6c8fd4a Mon Sep 17 00:00:00 2001
From: Allan Karlson <beesforever@gmx.de>
Date: Fri, 6 Sep 2019 12:19:26 +0200
Subject: [PATCH 07/12] load pagebuilder module names

---
 .../com_modules/Helper/ModulesHelper.php      | 68 +++++++++++++++----
 .../com_modules/Service/HTML/Modules.php      |  2 +
 2 files changed, 57 insertions(+), 13 deletions(-)

diff --git a/administrator/components/com_modules/Helper/ModulesHelper.php b/administrator/components/com_modules/Helper/ModulesHelper.php
index c1c84e3210..b6a3e69161 100644
--- a/administrator/components/com_modules/Helper/ModulesHelper.php
+++ b/administrator/components/com_modules/Helper/ModulesHelper.php
@@ -55,6 +55,47 @@ public static function getClientOptions()
 		return $options;
 	}
 
+	/**
+	 * Get a list of modules positions which are defined / used in the pagebuilder
+	 *
+	 * @return  array  A list of positions
+	 * @since 4.0
+	 */
+
+	public static function getPageBuilderPositions()
+	{
+		$customPosNames = [];
+		$db             = Factory::getDbo();
+		$query          = $db->getQuery(true)
+			->select('params')
+			->from('#__template_styles');
+
+		$db->setQuery($query);
+
+		$list = $db->loadObjectList();
+		foreach ($list as $param)
+		{
+			$paramsConf = json_decode($param->params, true);
+			if ($paramsConf != null && isset($paramsConf["grid"]))
+			{
+				$paramsGridConf = json_decode($paramsConf["grid"], true);
+
+				array_walk_recursive($paramsGridConf, function ($value, $key) use (&$customPosNames) {
+					if ($key == "position_name")
+					{
+						$customPosNames[] = [
+							"value"   => $value,
+							"text"    => $value,
+							"disable" => false
+						];
+					}
+				});
+			}
+		}
+
+		return $customPosNames;
+	}
+
 	/**
 	 * Get a list of modules positions
 	 *
@@ -65,6 +106,7 @@ public static function getClientOptions()
 	 */
 	public static function getPositions($clientId, $editPositions = false)
 	{
+
 		$db    = Factory::getDbo();
 		$query = $db->getQuery(true)
 			->select('DISTINCT(position)')
@@ -168,15 +210,15 @@ public static function getModules($clientId)
 
 		$db->setQuery($query);
 		$modules = $db->loadObjectList();
-		$lang = Factory::getLanguage();
+		$lang    = Factory::getLanguage();
 
 		foreach ($modules as $i => $module)
 		{
 			$extension = $module->value;
-			$path = $clientId ? JPATH_ADMINISTRATOR : JPATH_SITE;
-			$source = $path . "/modules/$extension";
-				$lang->load("$extension.sys", $path, null, false, true)
-			||	$lang->load("$extension.sys", $source, null, false, true);
+			$path      = $clientId ? JPATH_ADMINISTRATOR : JPATH_SITE;
+			$source    = $path . "/modules/$extension";
+			$lang->load("$extension.sys", $path, null, false, true)
+			|| $lang->load("$extension.sys", $source, null, false, true);
 			$modules[$i]->text = Text::_($module->text);
 		}
 
@@ -194,7 +236,7 @@ public static function getModules($clientId)
 	 */
 	public static function getAssignmentOptions($clientId)
 	{
-		$options = array();
+		$options   = array();
 		$options[] = HTMLHelper::_('select.option', '0', 'COM_MODULES_OPTION_MENU_ALL');
 		$options[] = HTMLHelper::_('select.option', '-', 'COM_MODULES_OPTION_MENU_NONE');
 
@@ -230,20 +272,20 @@ public static function getTranslatedModulePosition($clientId, $template, $positi
 		if (!$loaded)
 		{
 			$lang->load('tpl_' . $template . '.sys', $path, null, false, false)
-			||	$lang->load('tpl_' . $template . '.sys', $path . '/templates/' . $template, null, false, false)
-			||	$lang->load('tpl_' . $template . '.sys', $path, $lang->getDefault(), false, false)
-			||	$lang->load('tpl_' . $template . '.sys', $path . '/templates/' . $template, $lang->getDefault(), false, false);
+			|| $lang->load('tpl_' . $template . '.sys', $path . '/templates/' . $template, null, false, false)
+			|| $lang->load('tpl_' . $template . '.sys', $path, $lang->getDefault(), false, false)
+			|| $lang->load('tpl_' . $template . '.sys', $path . '/templates/' . $template, $lang->getDefault(), false, false);
 		}
 
 		$langKey = strtoupper('TPL_' . $template . '_POSITION_' . $position);
-		$text = Text::_($langKey);
+		$text    = Text::_($langKey);
 
 		// Avoid untranslated strings
 		if (!self::isTranslatedText($langKey, $text))
 		{
 			// Modules component translation
 			$langKey = strtoupper('COM_MODULES_POSITION_' . $position);
-			$text = Text::_($langKey);
+			$text    = Text::_($langKey);
 
 			// Avoid untranslated strings
 			if (!self::isTranslatedText($langKey, $text))
@@ -289,7 +331,7 @@ public static function createOption($value = '', $text = '')
 			$text = $value;
 		}
 
-		$option = new \stdClass;
+		$option        = new \stdClass;
 		$option->value = $value;
 		$option->text  = $text;
 
@@ -308,7 +350,7 @@ public static function createOption($value = '', $text = '')
 	 */
 	public static function createOptionGroup($label = '', $options = array())
 	{
-		$group = array();
+		$group          = array();
 		$group['value'] = $label;
 		$group['text']  = $label;
 		$group['items'] = $options;
diff --git a/administrator/components/com_modules/Service/HTML/Modules.php b/administrator/components/com_modules/Service/HTML/Modules.php
index a04efcc841..ab5d8d27ff 100644
--- a/administrator/components/com_modules/Service/HTML/Modules.php
+++ b/administrator/components/com_modules/Service/HTML/Modules.php
@@ -183,6 +183,8 @@ public function positions($clientId, $state = 1, $selectedPosition = '')
 		$customGroupText = Text::_('COM_MODULES_CUSTOM_POSITION');
 		$editPositions   = true;
 		$customPositions = ModulesHelper::getPositions($clientId, $editPositions);
+		$pagebuilderPositions = ModulesHelper::getPageBuilderPositions();
+		$customPositions = array_merge($customPositions, $pagebuilderPositions);
 
 		$app = Factory::getApplication();
 

From f7649aa3ec7c2d31beb3f50bb347889f68e35dcc Mon Sep 17 00:00:00 2001
From: Allan Karlson <beesforever@gmx.de>
Date: Fri, 6 Sep 2019 14:20:05 +0200
Subject: [PATCH 08/12] use \Registry instead of json_encode

---
 .../components/com_modules/Helper/ModulesHelper.php         | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/administrator/components/com_modules/Helper/ModulesHelper.php b/administrator/components/com_modules/Helper/ModulesHelper.php
index b6a3e69161..f813dee6b2 100644
--- a/administrator/components/com_modules/Helper/ModulesHelper.php
+++ b/administrator/components/com_modules/Helper/ModulesHelper.php
@@ -15,6 +15,7 @@
 use Joomla\CMS\HTML\HTMLHelper;
 use Joomla\CMS\Language\Text;
 use Joomla\Utilities\ArrayHelper;
+use Joomla\Registry\Registry;
 
 /**
  * Modules component helper.
@@ -75,10 +76,11 @@ public static function getPageBuilderPositions()
 		$list = $db->loadObjectList();
 		foreach ($list as $param)
 		{
-			$paramsConf = json_decode($param->params, true);
+			$paramsConf = (new Registry($param->params))->toArray();
+
 			if ($paramsConf != null && isset($paramsConf["grid"]))
 			{
-				$paramsGridConf = json_decode($paramsConf["grid"], true);
+				$paramsGridConf = (new Registry($paramsConf["grid"]))->toArray();
 
 				array_walk_recursive($paramsGridConf, function ($value, $key) use (&$customPosNames) {
 					if ($key == "position_name")

From babf444422f612a5ad06e0cd823f1a346eb0a25c Mon Sep 17 00:00:00 2001
From: Allan Karlson <beesforever@gmx.de>
Date: Mon, 9 Sep 2019 11:02:41 +0200
Subject: [PATCH 09/12] clean up modal window

---
 .../pagebuilder/components/modals/input-selection.vue     | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/build/media_source/system/js/fields/pagebuilder/components/modals/input-selection.vue b/build/media_source/system/js/fields/pagebuilder/components/modals/input-selection.vue
index 04b6848dd7..10c048804d 100644
--- a/build/media_source/system/js/fields/pagebuilder/components/modals/input-selection.vue
+++ b/build/media_source/system/js/fields/pagebuilder/components/modals/input-selection.vue
@@ -19,10 +19,14 @@
 			  content: this.value
 		  }
 		},
+        beforeDestroy() {
+            this.content = "";
+            this.$emit('input', "")
+        },
 		methods: {
             select_item(payload){
-                this.content = payload
-				this.toggleSelection()
+                this.content = payload;
+                this.toggleSelection();
 			},
             toggleSelection(){
                 this.show_list = !this.show_list

From 49077885dfd9cbe1c5bb07eb017da32c72dd633c Mon Sep 17 00:00:00 2001
From: Allan Karlson <beesforever@gmx.de>
Date: Tue, 10 Sep 2019 11:45:45 +0200
Subject: [PATCH 10/12] spelling issues

---
 .../language/en-GB/en-GB.lib_joomla.ini       | 20 +++++++++----------
 language/en-GB/en-GB.lib_joomla.ini           | 20 +++++++++----------
 2 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/administrator/language/en-GB/en-GB.lib_joomla.ini b/administrator/language/en-GB/en-GB.lib_joomla.ini
index d8953f3257..5a56e5d911 100644
--- a/administrator/language/en-GB/en-GB.lib_joomla.ini
+++ b/administrator/language/en-GB/en-GB.lib_joomla.ini
@@ -704,16 +704,16 @@ JLIB_PAGEBUILDER_COMPONENT="Component"
 JLIB_PAGEBUILDER_CUSTOM="Custom"
 JLIB_PAGEBUILDER_DELETE_COLUMN="Delete Column"
 JLIB_PAGEBUILDER_DELETE_GRID="Delete Grid"
-JLIB_PAGEBUILDER_DEVICE_LG="Devices with >= 992px"
-JLIB_PAGEBUILDER_DEVICE_LG_SR_DESC="Create a layout for large devices with more than 992px"
-JLIB_PAGEBUILDER_DEVICE_MD="Devices with >= 768px"
-JLIB_PAGEBUILDER_DEVICE_MD_SR_DESC="Create a layout for medium sized devices with more than 768px"
-JLIB_PAGEBUILDER_DEVICE_SM="Devices with >= 576px"
-JLIB_PAGEBUILDER_DEVICE_SM_SR_DESC="Create a layout for small devices with more than 576px"
-JLIB_PAGEBUILDER_DEVICE_XL="Devices with >= 1200px"
-JLIB_PAGEBUILDER_DEVICE_XL_SR_DESC="Create a layout for very large devices with more than 1200px"
-JLIB_PAGEBUILDER_DEVICE_XS="Devices with < 576px"
-JLIB_PAGEBUILDER_DEVICE_XS_SR_DESC="Create a layout for very small devices with less than 576px"
+JLIB_PAGEBUILDER_DEVICE_LG="Devices width >= 992px"
+JLIB_PAGEBUILDER_DEVICE_LG_SR_DESC="Create a layout for large devices with a width more than 992px"
+JLIB_PAGEBUILDER_DEVICE_MD="Devices width >= 768px"
+JLIB_PAGEBUILDER_DEVICE_MD_SR_DESC="Create a layout for medium sized devices with a width more than 768px"
+JLIB_PAGEBUILDER_DEVICE_SM="Devices width >= 576px"
+JLIB_PAGEBUILDER_DEVICE_SM_SR_DESC="Create a layout for small devices with a width more than 576px"
+JLIB_PAGEBUILDER_DEVICE_XL="Devices width >= 1200px"
+JLIB_PAGEBUILDER_DEVICE_XL_SR_DESC="Create a layout for very large devices with a width more than 1200px"
+JLIB_PAGEBUILDER_DEVICE_XS="Devices width < 576px"
+JLIB_PAGEBUILDER_DEVICE_XS_SR_DESC="Create a layout for very small devices with a width less than 576px"
 JLIB_PAGEBUILDER_EDIT_COLUMN="Edit Column"
 JLIB_PAGEBUILDER_EDIT="Edit "
 JLIB_PAGEBUILDER_EDIT_POSITION="Edit Module position"
diff --git a/language/en-GB/en-GB.lib_joomla.ini b/language/en-GB/en-GB.lib_joomla.ini
index cb9bec902b..1c892d93a3 100644
--- a/language/en-GB/en-GB.lib_joomla.ini
+++ b/language/en-GB/en-GB.lib_joomla.ini
@@ -692,16 +692,16 @@ JLIB_PAGEBUILDER_COMPONENT="Component"
 JLIB_PAGEBUILDER_CUSTOM="Custom"
 JLIB_PAGEBUILDER_DELETE_COLUMN="Delete Column"
 JLIB_PAGEBUILDER_DELETE_GRID="Delete Grid"
-JLIB_PAGEBUILDER_DEVICE_LG="Devices with >= 992px"
-JLIB_PAGEBUILDER_DEVICE_LG_SR_DESC="Create a layout for large devices with more than 992px"
-JLIB_PAGEBUILDER_DEVICE_MD="Devices with >= 768px"
-JLIB_PAGEBUILDER_DEVICE_MD_SR_DESC="Create a layout for medium sized devices with more than 768px"
-JLIB_PAGEBUILDER_DEVICE_SM="Devices with >= 576px"
-JLIB_PAGEBUILDER_DEVICE_SM_SR_DESC="Create a layout for small devices with more than 576px"
-JLIB_PAGEBUILDER_DEVICE_XL="Devices with >= 1200px"
-JLIB_PAGEBUILDER_DEVICE_XL_SR_DESC="Create a layout for very large devices with more than 1200px"
-JLIB_PAGEBUILDER_DEVICE_XS="Devices with < 576px"
-JLIB_PAGEBUILDER_DEVICE_XS_SR_DESC="Create a layout for very small devices with less than 576px"
+JLIB_PAGEBUILDER_DEVICE_LG="Devices width >= 992px"
+JLIB_PAGEBUILDER_DEVICE_LG_SR_DESC="Create a layout for large devices with a width more than 992px"
+JLIB_PAGEBUILDER_DEVICE_MD="Devices width >= 768px"
+JLIB_PAGEBUILDER_DEVICE_MD_SR_DESC="Create a layout for medium sized devices with a width more than 768px"
+JLIB_PAGEBUILDER_DEVICE_SM="Devices width >= 576px"
+JLIB_PAGEBUILDER_DEVICE_SM_SR_DESC="Create a layout for small devices with a width more than 576px"
+JLIB_PAGEBUILDER_DEVICE_XL="Devices width >= 1200px"
+JLIB_PAGEBUILDER_DEVICE_XL_SR_DESC="Create a layout for very large devices with a width more than 1200px"
+JLIB_PAGEBUILDER_DEVICE_XS="Devices width < 576px"
+JLIB_PAGEBUILDER_DEVICE_XS_SR_DESC="Create a layout for very small devices with a width less than 576px"
 JLIB_PAGEBUILDER_EDIT_COLUMN="Edit Column"
 JLIB_PAGEBUILDER_EDIT="Edit "
 JLIB_PAGEBUILDER_EDIT_POSITION="Edit Module position"

From d16066d3e11f6c8d1981e997280c105724f9c567 Mon Sep 17 00:00:00 2001
From: Roland Dalmulder <contact@rolandd.com>
Date: Sun, 9 Feb 2020 11:45:39 +0100
Subject: [PATCH 11/12] Code cleanup and review #46

Signed-off-by: Roland Dalmulder <contact@rolandd.com>
---
 .../com_modules/Helper/ModulesHelper.php      | 55 +++++++------
 .../com_modules/Service/HTML/Modules.php      | 35 ++++----
 layouts/joomla/form/field/pagebuilder.php     | 16 ++--
 package.json                                  |  1 -
 plugins/pagebuilder/column/column.php         |  4 +-
 plugins/pagebuilder/container/container.php   | 22 +++--
 plugins/pagebuilder/grid/grid.php             |  4 +-
 .../moduleposition/moduleposition.php         | 81 +++++++++++--------
 8 files changed, 117 insertions(+), 101 deletions(-)

diff --git a/administrator/components/com_modules/Helper/ModulesHelper.php b/administrator/components/com_modules/Helper/ModulesHelper.php
index 315bf43ad9..4bb0435976 100644
--- a/administrator/components/com_modules/Helper/ModulesHelper.php
+++ b/administrator/components/com_modules/Helper/ModulesHelper.php
@@ -1,10 +1,10 @@
 <?php
 /**
  * @package     Joomla.Administrator
- * @subpackage  com_modules
- *
  * @copyright   Copyright (C) 2005 - 2019 Open Source Matters, Inc. All rights reserved.
  * @license     GNU General Public License version 2 or later; see LICENSE.txt
+ * @subpackage  com_modules
+ *
  */
 
 namespace Joomla\Component\Modules\Administrator\Helper;
@@ -16,7 +16,6 @@
 use Joomla\CMS\Language\Text;
 use Joomla\Database\ParameterType;
 use Joomla\Utilities\ArrayHelper;
-use Joomla\Registry\Registry;
 
 /**
  * Modules component helper.
@@ -33,7 +32,7 @@ abstract class ModulesHelper
 	public static function getStateOptions()
 	{
 		// Build the filter options.
-		$options   = array();
+		$options   = [];
 		$options[] = HTMLHelper::_('select.option', '1', Text::_('JPUBLISHED'));
 		$options[] = HTMLHelper::_('select.option', '0', Text::_('JUNPUBLISHED'));
 		$options[] = HTMLHelper::_('select.option', '-2', Text::_('JTRASHED'));
@@ -50,7 +49,7 @@ public static function getStateOptions()
 	public static function getClientOptions()
 	{
 		// Build the filter options.
-		$options   = array();
+		$options   = [];
 		$options[] = HTMLHelper::_('select.option', '0', Text::_('JSITE'));
 		$options[] = HTMLHelper::_('select.option', '1', Text::_('JADMINISTRATOR'));
 
@@ -60,39 +59,46 @@ public static function getClientOptions()
 	/**
 	 * Get a list of modules positions which are defined / used in the pagebuilder
 	 *
+	 * @param   int  $clientId  The client ID the template styles belong to
+	 *
 	 * @return  array  A list of positions
-	 * @since 4.0
+	 *
+	 * @since   4.0.0
 	 */
-
-	public static function getPageBuilderPositions()
+	public static function getLayoutBuilderPositions(int $clientId): array
 	{
 		$customPosNames = [];
 		$db             = Factory::getDbo();
 		$query          = $db->getQuery(true)
-			->select('params')
-			->from('#__template_styles');
+			->select($db->quoteName('params'))
+			->from($db->quoteName('#__template_styles'))
+			->where($db->quoteName('client_id') . ' = ' . $clientId);
 
 		$db->setQuery($query);
 
 		$list = $db->loadObjectList();
+
 		foreach ($list as $param)
 		{
-			$paramsConf = (new Registry($param->params))->toArray();
+			$params = json_decode($param->params, true);
 
-			if ($paramsConf != null && isset($paramsConf["grid"]))
+			if ($params['grid'] ?? false)
 			{
-				$paramsGridConf = (new Registry($paramsConf["grid"]))->toArray();
-
-				array_walk_recursive($paramsGridConf, function ($value, $key) use (&$customPosNames) {
-					if ($key == "position_name")
-					{
-						$customPosNames[] = [
-							"value"   => $value,
-							"text"    => $value,
-							"disable" => false
-						];
+				$paramsGridConf = json_decode($params['grid'], true);
+
+				array_walk_recursive(
+					$paramsGridConf,
+					static function ($value, $key) use (&$customPosNames) {
+						if ($key === 'position_name')
+						{
+							$customPosNames[] = [
+								'value'   => $value,
+								'text'    => $value,
+								'disable' => false
+							];
+						}
 					}
-				});
+				);
 			}
 		}
 
@@ -127,7 +133,8 @@ public static function getPositions($clientId, $editPositions = false)
 		}
 		catch (\RuntimeException $e)
 		{
-			Factory::getApplication()->enqueueMessage($e->getMessage(), 'error');
+			Factory::getApplication()
+				->enqueueMessage($e->getMessage(), 'error');
 
 			return;
 		}
diff --git a/administrator/components/com_modules/Service/HTML/Modules.php b/administrator/components/com_modules/Service/HTML/Modules.php
index f04659e0c5..39015584bc 100644
--- a/administrator/components/com_modules/Service/HTML/Modules.php
+++ b/administrator/components/com_modules/Service/HTML/Modules.php
@@ -1,10 +1,10 @@
 <?php
 /**
  * @package     Joomla.Administrator
- * @subpackage  com_modules
- *
  * @copyright   Copyright (C) 2005 - 2019 Open Source Matters, Inc. All rights reserved.
  * @license     GNU General Public License version 2 or later; see LICENSE.txt
+ * @subpackage  com_modules
+ *
  */
 
 namespace Joomla\Component\Modules\Administrator\Service\HTML;
@@ -54,7 +54,7 @@ public function templates($clientId = 0, $state = '')
 	 */
 	public function types()
 	{
-		$options = array();
+		$options   = array();
 		$options[] = HTMLHelper::_('select.option', 'user', 'COM_MODULES_OPTION_POSITION_USER_DEFINED');
 		$options[] = HTMLHelper::_('select.option', 'template', 'COM_MODULES_OPTION_POSITION_TEMPLATE_DEFINED');
 
@@ -68,7 +68,7 @@ public function types()
 	 */
 	public function templateStates()
 	{
-		$options = array();
+		$options   = array();
 		$options[] = HTMLHelper::_('select.option', '1', 'JENABLED');
 		$options[] = HTMLHelper::_('select.option', '0', 'JDISABLED');
 
@@ -78,14 +78,16 @@ public function templateStates()
 	/**
 	 * Returns a published state on a grid
 	 *
-	 * @param   integer  $value     The state value.
+	 * @see     HTMLHelperJGrid::state
+	 *
 	 * @param   integer  $i         The row index
 	 * @param   boolean  $enabled   An optional setting for access control on the action.
 	 * @param   string   $checkbox  An optional prefix for checkboxes.
 	 *
+	 * @param   integer  $value     The state value.
+	 *
 	 * @return  string        The Html code
 	 *
-	 * @see     HTMLHelperJGrid::state
 	 * @since   1.7.1
 	 */
 	public function state($value, $i, $enabled = true, $checkbox = 'cb')
@@ -139,9 +141,11 @@ public function state($value, $i, $enabled = true, $checkbox = 'cb')
 	 * @param   integer  $state             The state of the module (enabled, unenabled, trashed).
 	 * @param   string   $selectedPosition  The currently selected position for the module.
 	 *
-	 * @return  string   The necessary positions for the widget.
+	 * @return  array   The necessary positions for the widget.
 	 *
 	 * @since   2.5
+	 *
+	 * @throws \Exception
 	 */
 	public function positions($clientId, $state = 1, $selectedPosition = '')
 	{
@@ -149,7 +153,7 @@ public function positions($clientId, $state = 1, $selectedPosition = '')
 		$templateGroups = array();
 
 		// Add an empty value to be able to deselect a module position
-		$option = ModulesHelper::createOption('', Text::_('COM_MODULES_NONE'));
+		$option             = ModulesHelper::createOption('', Text::_('COM_MODULES_NONE'));
 		$templateGroups[''] = ModulesHelper::createOptionGroup('', array($option));
 
 		// Add positions from templates
@@ -165,7 +169,7 @@ public function positions($clientId, $state = 1, $selectedPosition = '')
 			{
 				foreach ($positions as $position)
 				{
-					$text = ModulesHelper::getTranslatedModulePosition($clientId, $template, $position) . ' [' . $position . ']';
+					$text      = ModulesHelper::getTranslatedModulePosition($clientId, $template, $position) . ' [' . $position . ']';
 					$options[] = ModulesHelper::createOption($position, $text);
 
 					if (!$isTemplatePosition && $selectedPosition === $position)
@@ -181,11 +185,11 @@ public function positions($clientId, $state = 1, $selectedPosition = '')
 		}
 
 		// Add custom position to options
-		$customGroupText = Text::_('COM_MODULES_CUSTOM_POSITION');
-		$editPositions   = true;
-		$customPositions = ModulesHelper::getPositions($clientId, $editPositions);
-		$pagebuilderPositions = ModulesHelper::getPageBuilderPositions();
-		$customPositions = array_merge($customPositions, $pagebuilderPositions);
+		$customGroupText        = Text::_('COM_MODULES_CUSTOM_POSITION');
+		$editPositions          = true;
+		$customPositions        = ModulesHelper::getPositions($clientId, $editPositions);
+		$layoutBuilderPositions = ModulesHelper::getLayoutBuilderPositions($clientId);
+		$customPositions        = array_merge($customPositions, $layoutBuilderPositions);
 
 		$app = Factory::getApplication();
 
@@ -249,7 +253,8 @@ public function positionList($clientId = 0)
 		}
 		catch (\RuntimeException $e)
 		{
-			Factory::getApplication()->enqueueMessage($e->getMessage(), 'error');
+			Factory::getApplication()
+				->enqueueMessage($e->getMessage(), 'error');
 		}
 
 		// Pop the first item off the array if it's blank
diff --git a/layouts/joomla/form/field/pagebuilder.php b/layouts/joomla/form/field/pagebuilder.php
index 340c051ff2..27711af97c 100644
--- a/layouts/joomla/form/field/pagebuilder.php
+++ b/layouts/joomla/form/field/pagebuilder.php
@@ -27,26 +27,24 @@
  * @var   boolean  $readonly        Is this field read only?
  * @var   string   $value           Value attribute of the field.
  */
-extract($displayData);
+extract($displayData, EXTR_OVERWRITE);
 
 // Add JavaScript
-HTMLHelper::_('script', 'media/system/js/fields/pagebuilder/pagebuilder.js');
+HTMLHelper::_('script', 'media/system/js/fields/pagebuilder/pagebuilder.js', [], ['type' => 'module']);
 
 // Add stylesheet
 HTMLHelper::_('stylesheet', 'media/system/css/fields/pagebuilder.css');
 
 // Include plugins for pagebuilder elements like container or columns
 PluginHelper::importPlugin('pagebuilder');
-$pluginElements = Factory::getApplication()->triggerEvent(
-	'onAddElement', array('param')
-);
+$pluginElements = Factory::getApplication()->triggerEvent('onAddElement');
 
-$options = array(
+$options = [
 	'disabled' => $disabled,
 	'elements' => $pluginElements,
 	'id' => $id,
 	// Images to select new elements
-	'images' => array(
+	'images' => [
 		'row12'   => HTMLHelper::_('image', 'media/system/images/pagebuilder/row_12.png', 'row12'),
 		'row84'   => HTMLHelper::_('image', 'media/system/images/pagebuilder/row_8_4.png', 'row84'),
 		'row66'   => HTMLHelper::_('image', 'media/system/images/pagebuilder/row_6_6.png', 'row66'),
@@ -54,9 +52,9 @@
 		'row444'  => HTMLHelper::_('image', 'media/system/images/pagebuilder/row_4_4_4.png', 'row444'),
 		'row363'  => HTMLHelper::_('image', 'media/system/images/pagebuilder/row_3_6_3.png', 'row363'),
 		'row3333' => HTMLHelper::_('image', 'media/system/images/pagebuilder/row_3_3_3_3.png', 'row3333'),
-	),
+	],
 	'readonly' => $readonly
-);
+];
 
 Factory::getDocument()->addScriptOptions('system.pagebuilder', $options);
 
diff --git a/package.json b/package.json
index 9452faae33..4d6b4083d2 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,6 @@
     "@claviska/jquery-minicolors": "2.2.6",
     "@webcomponents/webcomponentsjs": "2.1.2",
     "awesomplete": "1.1.4",
-    "axios": "^0.19.0",
     "bootstrap": "^4.4.1",
     "choices.js": "^9.0.0",
     "chosen-js": "1.6.2",
diff --git a/plugins/pagebuilder/column/column.php b/plugins/pagebuilder/column/column.php
index d3f824a2db..ed7c61df3b 100644
--- a/plugins/pagebuilder/column/column.php
+++ b/plugins/pagebuilder/column/column.php
@@ -29,13 +29,11 @@ class PlgPagebuilderColumn extends CMSPlugin
 	/**
 	 * Add column element which can be a child of grids
 	 *
-	 * @param   array  $params  Data for the element
-	 *
 	 * @return  array   data for the element inside the editor
 	 *
 	 * @since   __DEPLOY_VERSION__
 	 */
-	public function onAddElement($params)
+	public function onAddElement(): array
 	{
 		Text::script('PLG_PAGEBUILDER_COLUMN_NAME');
 
diff --git a/plugins/pagebuilder/container/container.php b/plugins/pagebuilder/container/container.php
index 6483f482bc..b73e334a35 100644
--- a/plugins/pagebuilder/container/container.php
+++ b/plugins/pagebuilder/container/container.php
@@ -29,13 +29,11 @@ class PlgPagebuilderContainer extends CMSPlugin
 	/**
 	 * Add container element which can have every other element as child
 	 *
-	 * @param   array  $params  Data for the element
-	 *
 	 * @return  array   data for the element inside the editor
 	 *
 	 * @since   __DEPLOY_VERSION__
 	 */
-	public function onAddElement($params)
+	public function onAddElement(): array
 	{
 		Text::script('PLG_PAGEBUILDER_CONTAINER_NAME');
 
@@ -49,12 +47,12 @@ public function onAddElement($params)
 			'message'     => true,
 			'config'      => [
 				'fluid' => [
-					'type' => 'select',
-					'value' => [
+					'type'    => 'select',
+					'value'   => [
 						Text::_('JYES') => 1,
-						Text::_('JNO') => 0
+						Text::_('JNO')  => 0
 					],
-					'label' => Text::_('PLG_PAGEBUILDER_CONTAINER_FLUID'),
+					'label'   => Text::_('PLG_PAGEBUILDER_CONTAINER_FLUID'),
 					'default' => 0
 				]
 			]
@@ -78,7 +76,7 @@ public function onRenderPagebuilderElement($context, $data)
 			return array();
 		}
 
-		$html = '<div ';
+		$html    = '<div ';
 		$classes = array('container');
 
 		if (isset($data->options))
@@ -98,11 +96,11 @@ public function onRenderPagebuilderElement($context, $data)
 		$html .= '>';
 
 		return array(
-			'title' => Text::_('PLG_PAGEBUILDER_CONTAINER_NAME'),
+			'title'  => Text::_('PLG_PAGEBUILDER_CONTAINER_NAME'),
 			'config' => $data->options,
-			'id'    => 'container',
-			'start' => $html,
-			'end'   => '</div>'
+			'id'     => 'container',
+			'start'  => $html,
+			'end'    => '</div>'
 		);
 	}
 }
diff --git a/plugins/pagebuilder/grid/grid.php b/plugins/pagebuilder/grid/grid.php
index 68400a0147..e549b3d5f7 100644
--- a/plugins/pagebuilder/grid/grid.php
+++ b/plugins/pagebuilder/grid/grid.php
@@ -29,13 +29,11 @@ class PlgPagebuilderGrid extends CMSPlugin
 	/**
 	 * Add grid element which can have every other element as child
 	 *
-	 * @param   array  $params  Data for the element
-	 *
 	 * @return  array   data for the element inside the editor
 	 *
 	 * @since   __DEPLOY_VERSION__
 	 */
-	public function onAddElement($params)
+	public function onAddElement(): array
 	{
 		Text::script('PLG_PAGEBUILDER_GRID_NAME');
 
diff --git a/plugins/pagebuilder/moduleposition/moduleposition.php b/plugins/pagebuilder/moduleposition/moduleposition.php
index 0e4ed92826..ebe8be5b05 100644
--- a/plugins/pagebuilder/moduleposition/moduleposition.php
+++ b/plugins/pagebuilder/moduleposition/moduleposition.php
@@ -8,11 +8,12 @@
 
 defined('_JEXEC') or die;
 
+use Joomla\CMS\Factory;
 use Joomla\CMS\Language\Text;
 use Joomla\CMS\Plugin\CMSPlugin;
 
 /**
- * Plugin to add a moduleposition element to the pagebuilder
+ * Plugin to add a module position element to the layout builder
  *
  * @since  __DEPLOY_VERSION__
  */
@@ -26,23 +27,37 @@ class PlgPagebuilderModuleposition extends CMSPlugin
 	 */
 	protected $autoloadLanguage = true;
 
-	private function loadValidModulePositions()
+	/**
+	 * Load a list of used module positions.
+	 *
+	 * @return  array  List of used module positions.
+	 *
+	 * @since   __DEPLOY_VERSION__
+	 */
+	private function loadValidModulePositions(): array
 	{
-		$db    = JFactory::getDbo();
+		$db    = Factory::getDbo();
 		$query = $db->getQuery(true)
-			->select([$db->quoteName('m.position')])
-			->from($db->quoteName('#__modules', 'm'))
-			->join("", $db->quoteName('#__extensions', 'e'), ' m.module = e.name and e.`client_id` = 0')
-			->order('position asc');
-
-		$modelresults = $db->setQuery($query)->loadObjectList();
-		$positions    = [];
-		foreach ($modelresults as $res)
-		{
-			$res = $res->position;
-			if ($res == null) $res = "NONE";
-			$positions[$res] = $res;
-		}
+			->select($db->quoteName('modules.position'))
+			->from($db->quoteName('#__modules', 'modules'))
+			->innerJoin(
+				$db->quoteName('#__extensions', 'extensions'),
+				$db->quoteName('modules.module') . ' = ' . $db->quoteName('extensions.name') .
+				' AND ' . $db->quoteName('extensions.client_id') . ' = 0'
+			)
+			->order($db->quoteName('position') . ' ASC');
+
+		$results   = $db->setQuery($query)
+			->loadObjectList();
+		$positions = [];
+
+		array_walk($results,
+			static function ($result) use (&$positions) {
+				$position = $result->position;
+
+				$positions[$position] = $position ?? 'NONE';
+			}
+		);
 
 		return $positions;
 	}
@@ -50,17 +65,15 @@ private function loadValidModulePositions()
 	/**
 	 * Add moduleposition element which can have every other element as child
 	 *
-	 * @param   array  $params  Data for the element
-	 *
 	 * @return  array   data for the element inside the editor
 	 *
 	 * @since   __DEPLOY_VERSION__
 	 */
-	public function onAddElement($params)
+	public function onAddElement(): array
 	{
 		Text::script('PLG_PAGEBUILDER_MODULEPOSITION_NAME');
 
-		$chromeValues = array(
+		$chromeValues = [
 			Text::_('PLG_PAGEBUILDER_MODULEPOSITION_CONFIG_CHROME_NONE')    => '',
 			Text::_('PLG_PAGEBUILDER_MODULEPOSITION_CONFIG_CHROME_HTML5')   => 'html5',
 			Text::_('PLG_PAGEBUILDER_MODULEPOSITION_CONFIG_CHROME_HORZ')    => 'horz',
@@ -68,34 +81,34 @@ public function onAddElement($params)
 			Text::_('PLG_PAGEBUILDER_MODULEPOSITION_CONFIG_CHROME_ROUNDED') => 'rounded',
 			Text::_('PLG_PAGEBUILDER_MODULEPOSITION_CONFIG_CHROME_TABLE')   => 'table',
 			Text::_('PLG_PAGEBUILDER_MODULEPOSITION_CONFIG_CHROME_XHTML')   => 'xhtml',
-		);
+		];
 
-		return array(
+		return [
 			'title'       => Text::_('PLG_PAGEBUILDER_MODULEPOSITION_NAME'),
 			'description' => Text::_('PLG_PAGEBUILDER_MODULEPOSITION_DESC'),
 			'id'          => 'moduleposition',
-			'parent'      => array('root', 'grid', 'container', 'column'),
+			'parent'      => ['root', 'grid', 'container', 'column'],
 			'children'    => false,
 			'component'   => false,
 			'message'     => false,
-			'config'      => array(
-				'position_name' => array(
+			'config'      => [
+				'position_name' => [
 					'value'       => $this->loadValidModulePositions(),
 					'type'        => 'inputselect',
 					'required'    => true,
 					'show'        => true,
 					'label'       => Text::_('PLG_PAGEBUILDER_MODULEPOSITION_CONFIG_POSITION_NAME'),
 					'placeholder' => Text::_('PLG_PAGEBUILDER_MODULEPOSITION_ENTER_NAME')
-				),
-				'module_chrome' => array(
+				],
+				'module_chrome' => [
 					'value'    => $chromeValues,
 					'type'     => 'select',
 					'required' => false,
 					'show'     => true,
 					'label'    => Text::_('PLG_PAGEBUILDER_MODULEPOSITION_CONFIG_CHROME')
-				)
-			)
-		);
+				]
+			]
+		];
 	}
 
 	/**
@@ -108,11 +121,11 @@ public function onAddElement($params)
 	 *
 	 * @since   __DEPLOY_VERSION__
 	 */
-	public function onRenderPagebuilderElement($context, $data)
+	public function onRenderPagebuilderElement(string $context, array $data): array
 	{
 		if ($context !== 'com_template.pagebuilder.moduleposition')
 		{
-			return array();
+			return [];
 		}
 
 		$html = '<jdoc:include';
@@ -126,12 +139,12 @@ public function onRenderPagebuilderElement($context, $data)
 
 		$html .= ' />';
 
-		return array(
+		return [
 			'title'  => Text::_('PLG_PAGEBUILDER_MODULEPOSITION_NAME'),
 			'config' => $data->options,
 			'id'     => 'moduleposition',
 			'start'  => $html,
 			'end'    => null
-		);
+		];
 	}
 }

From 49c93cb65f4d7ccac053338792e092ca21607f77 Mon Sep 17 00:00:00 2001
From: Roland Dalmulder <contact@rolandd.com>
Date: Sun, 9 Feb 2020 13:11:36 +0100
Subject: [PATCH 12/12] Revert changes to the file docblock #46

Signed-off-by: Roland Dalmulder <contact@rolandd.com>
---
 administrator/components/com_modules/Helper/ModulesHelper.php | 3 ++-
 administrator/components/com_modules/Service/HTML/Modules.php | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/administrator/components/com_modules/Helper/ModulesHelper.php b/administrator/components/com_modules/Helper/ModulesHelper.php
index 4bb0435976..074cd810c4 100644
--- a/administrator/components/com_modules/Helper/ModulesHelper.php
+++ b/administrator/components/com_modules/Helper/ModulesHelper.php
@@ -1,9 +1,10 @@
 <?php
 /**
  * @package     Joomla.Administrator
+ * @subpackage  com_modules
+ *
  * @copyright   Copyright (C) 2005 - 2019 Open Source Matters, Inc. All rights reserved.
  * @license     GNU General Public License version 2 or later; see LICENSE.txt
- * @subpackage  com_modules
  *
  */
 
diff --git a/administrator/components/com_modules/Service/HTML/Modules.php b/administrator/components/com_modules/Service/HTML/Modules.php
index 39015584bc..e9e540f09a 100644
--- a/administrator/components/com_modules/Service/HTML/Modules.php
+++ b/administrator/components/com_modules/Service/HTML/Modules.php
@@ -1,9 +1,10 @@
 <?php
 /**
  * @package     Joomla.Administrator
+ * @subpackage  com_modules
+ *
  * @copyright   Copyright (C) 2005 - 2019 Open Source Matters, Inc. All rights reserved.
  * @license     GNU General Public License version 2 or later; see LICENSE.txt
- * @subpackage  com_modules
  *
  */