Type option to switch between ordered and unordered list for list com…

…ponent

css/editor.css

@@ -17793,7 +17793,7 @@ https://github.com/givanz/VvvebJs
         .tree > ol li.file:hover .file-actions {
           display: block; }
       .tree > ol li.file > label {
-        background: url(../libs/builder/icons/file.svg);
+        background-image: url(../libs/builder/icons/file.svg);
         background-position: 8px 4px;
         background-size: 19px 19px;
         background-repeat: no-repeat;
@@ -18867,7 +18867,7 @@ li[data-type] {
         .sections-container > div.section-item .controls .info .type {
           font-size: 12px; }
       .sections-container > div.section-item .controls .buttons {
-        margin-right: 2rem;
+        margin-right: 1.3rem;
         margin-top: 0.2rem; }
         .sections-container > div.section-item .controls .buttons a {
           padding: 0.3rem 0.5rem 0.3rem;

libs/builder/components-common.js

@@ -59,10 +59,10 @@ function changeNodeName(node, newNodeName) {
 		newNode.setAttribute(attributes[i].nodeName, attributes[i].nodeValue);
 	}
 
-	for (e of node.childNodes) {
-		newNode.append(e);
+	while (node.hasChildNodes()) {
+		newNode.appendChild(node.removeChild(node.firstChild))
 	}
-	
+
 	node.replaceWith(newNode);
 
 	return newNode;

libs/builder/components-html.js

@@ -900,10 +900,65 @@ Vvveb.Components.extend("_base", "html/list", {
     name: "List",
 	image: "icons/list.svg",
 	html: `<ul>
-				<li>Today I shall be meeting with interference, ingratitude, insolence, disloyalty, ill-will, and selfishness all of them due to the offenders' ignorance of what is good or evil..</li>
-				<li>Today I shall be meeting with interference, ingratitude, insolence, disloyalty, ill-will, and selfishness all of them due to the offenders' ignorance of what is good or evil..</li>
-				<li>Today I shall be meeting with interference, ingratitude, insolence, disloyalty, ill-will, and selfishness all of them due to the offenders' ignorance of what is good or evil..</li>
+				<li>Begin with the possible; begin with one step.</li>
+				<li>Never think of results, just do!</li>
+				<li>Patience is the mother of will.</li>
+				<li>Man must use what he has, not hope for what is not.</li>
+				<li>Only super-efforts count.</li>
 			</ul>`,
+	properties: [{
+        name: "Type",
+        key: "type",
+        inputtype: SelectInput,
+
+        onChange: function(node, value) {
+			return changeNodeName(node, value);
+		},	
+
+        init: function(node) {
+            return node.nodeName.toLowerCase()
+        },
+
+        data:{
+			options: [{
+                value: "ul",
+                text: "Unorderd"
+            }, {
+                value: "ol",
+                text: "Ordered"
+            }]
+       },
+    },{
+		name: "Items",
+        key: "items",
+        inputtype: ListInput,
+		htmlAttr:"data-slides-per-view",
+		inline:true,
+		data: {
+			selector:"li",
+			container:"",
+			prefix:"Item ",
+			removeElement: true,
+			"newElement": `<li>Do everything quickly and well.</li>`
+		},
+		onChange: function(node, value, input, component, event) {
+			let element = node;
+
+			if (event.action) {
+				if (event.action == "add") {
+					//node.append(generateElements(`<li>List item</li>`)[0]);
+
+					//temporary solution to better update list
+					Vvveb.Components.render("html/list");
+				}
+				if (event.action == "remove") {
+				} else if (event.action == "select") {
+				}
+			}
+
+			return node;
+		},
+	}]			
 });
 
 Vvveb.Components.extend("_base", "html/preformatted", {

libs/builder/inputs.js

@@ -732,7 +732,11 @@ let ListInput = { ...Input, ...{
 		let data = input.data;
 
 		if (data.removeElement) {
-			input.node.querySelector(data.container + " " + data.selector + ":nth-child(" + (index + 1) + ")").remove();
+			let container = input.node;
+			if (data.container) {
+				container.querySelector(data.container);
+			}
+			container.querySelector(data.selector + ":nth-child(" + (index + 1) + ")").remove();
 		}
 		sectionItem.remove();
 
@@ -746,7 +750,11 @@ let ListInput = { ...Input, ...{
 	add: function(event, node, input) {
 		let newElement = input.data.newElement ?? false;
 		if (newElement) {
-			event.data.input.node.querySelector(input.data.container).append(generateElements(newElement)[0]);
+			let container = input.node;
+			if (data.container) {
+				container.querySelector(data.container);
+			}			
+			container.append(generateElements(newElement)[0]);
 		}
 
 		event.action = "add";
@@ -782,7 +790,7 @@ let ListInput = { ...Input, ...{
 			if (data.nameElement) {
 				element = element.querySelector(data.nameElement);
 			}
-			let name = (data.name = "text" ? element.textContent : element.id);
+			let name = (data.name = "text" ? element.textContent.substr(0, 15) : element.id);
 			options.push({
 				name: name,
 				type: (data.prefix ?? "") + (i + 1) + (data.suffix ?? ""),

scss/_builder.scss

@@ -1760,7 +1760,7 @@ width:100%;
 		}
 
 		.buttons {
-			margin-right:2rem;
+			margin-right:1.3rem;
 			margin-top:0.2rem;
 
 			//align-self: flex-end;