Updated Boostrap version to 5.22, changed default youtube video for v…

…ideo component to fix bug, fixed color input empty color error

editor.html

@@ -237,8 +237,8 @@
 
 													   <div class="search">
 															  <div class="expand">
-																  <a href="#" class="text-sm" title="Expand All" data-vvveb-action="expand"><i class="la la-plus"></i></a>
-																  <a href="#" title="Collapse all" data-vvveb-action="collapse"><i class="la la-minus"></i></a> 
+																  <button class="text-sm" title="Expand All" data-vvveb-action="expand"><i class="la la-plus"></i></button> 
+																  <button title="Collapse all" data-vvveb-action="collapse"><i class="la la-minus"></i></button> 
 															  </div>	
 
 															  <input class="form-control section-search" placeholder="Search sections" type="text" data-vvveb-action="search" data-vvveb-on="keyup">
@@ -284,8 +284,8 @@
 
 												   <div class="search">
 														  <div class="expand">
-															  <a href="#" class="text-sm" title="Expand All" data-vvveb-action="expand"><i class="la la-plus"></i></a>
-															  <a href="#" title="Collapse all" data-vvveb-action="collapse"><i class="la la-minus"></i></a> 
+																  <button class="text-sm" title="Expand All" data-vvveb-action="expand"><i class="la la-plus"></i></button> 
+																  <button title="Collapse all" data-vvveb-action="collapse"><i class="la la-minus"></i></button> 
 														  </div>	
 
 														  <input class="form-control component-search" placeholder="Search components" type="text" data-vvveb-action="search" data-vvveb-on="keyup">
@@ -310,8 +310,8 @@
 
 													   <div class="search">
 															  <div class="expand">
-																  <a href="#" class="text-sm" title="Expand All" data-vvveb-action="expand"><i class="la la-plus"></i></a>
-																  <a href="#" title="Collapse all" data-vvveb-action="collapse"><i class="la la-minus"></i></a> 
+																  <button class="text-sm" title="Expand All" data-vvveb-action="expand"><i class="la la-plus"></i></button> 
+																  <button title="Collapse all" data-vvveb-action="collapse"><i class="la la-minus"></i></button> 
 															  </div>	
 
 															  <input class="form-control block-search" placeholder="Search blocks" type="text" data-vvveb-action="search" data-vvveb-on="keyup">
@@ -1542,6 +1542,7 @@ <h6><b>{%=title%}</b></h6>
 <link href="libs/media/media.css" rel="stylesheet">
 <script>
 window.mediaPath = 'media';
+//Vvveb.themeBaseUrl = 'demo/landing/';
 </script>
 <script src="libs/media/media.js"></script>	
 <script src="libs/media/openverse.js"></script>
@@ -1565,6 +1566,7 @@ <h6><b>{%=title%}</b></h6>
 <script src="libs/builder/components-html.js"></script>	
 
 <!-- sections-->
+<!-- <script src="demo/landing/sections/sections.js"></script>	-->
 <script src="libs/builder/sections-bootstrap4.js"></script>
 
 <!-- blocks-->
@@ -1629,10 +1631,11 @@ <h6><b>{%=title%}</b></h6>
 	Vvveb.Gui.init();
 	Vvveb.FileManager.init();
 	Vvveb.SectionList.init();
+
 	var pages = 
 	[
 		{name:"narrow-jumbotron", title:"Jumbotron",  url: "demo/narrow-jumbotron/index.html", file: "demo/narrow-jumbotron/index.html", assets: ['demo/narrow-jumbotron/narrow-jumbotron.css']},
-		{name:"landing-page", title:"Landing page",  url: "demo/landing/index.html", file: "demo/landing/index.html", assets: ['demo/startbootstrap-landing-page/css/landing-page.min.css']},
+		{name:"landing-page", title:"Landing page",  url: "demo/landing/index.html", file: "demo/landing/index.html", assets: ['demo/landing/css/style.css']},
 		{name:"album", title:"Album",  url: "demo/album/index.html", file: "demo/album/index.html", folder:"content", assets: ['demo/album/album.css']},
 		{name:"blog", title:"Blog",  url: "demo/blog/index.html", file: "demo/blog/index.html", folder:"content", assets: ['demo/blog/blog.css']},
 		{name:"carousel", title:"Carousel",  url: "demo/carousel/index.html",  file: "demo/carousel/index.html", folder:"content", assets: ['demo/carousel/carousel.css']},
@@ -1660,8 +1663,7 @@ <h6><b>{%=title%}</b></h6>
 	];
 
 	Vvveb.FileManager.addPages(pages);
-
-	Vvveb.FileManager.loadPage("narrow-jumbotron");
+	//Vvveb.FileManager.loadPage("landing-page");
 	Vvveb.Breadcrumb.init();
 });
 </script>

libs/builder/builder.js

@@ -117,7 +117,7 @@ Vvveb.Components = {
 	},
 
 	getProperty: function(type, key) {
-		let properties = this._components[type]["properties"];
+		let properties = this._components[type] ? this._components[type]["properties"] : [];
 		for (property in properties) {
 			if (key == properties[property]["key"])  {
 				return properties[property];
@@ -305,6 +305,7 @@ Vvveb.Components = {
 	render: function(type, panel = false) {
 
 		var component = this._components[type];
+		if (!component) return;
 
 		if (panel) {
 			componentsPanel = panel;
@@ -334,7 +335,7 @@ Vvveb.Components = {
 		}
 
 		componentsPanelSections[defaultSection].find('[data-header="default"] span').html(component.name);
-		section.html("")	
+		section.html("");	
 
 		if (component.beforeInit) component.beforeInit(Vvveb.Builder.selectedEl.get(0));
 
@@ -2018,11 +2019,11 @@ Vvveb.Gui = {
 	},
 
 	expand : function (e) {
-		$('input.header_check[type="checkbox"]', this.parentNode.parentNode.parentNode).prop("checked", true)
+		$('input.header_check[type="checkbox"]', this.parentNode.parentNode.parentNode).prop("checked", true);
 	},
 
 	collapse : function (e) {
-		$('input.header_check[type="checkbox"]', this.parentNode.parentNode.parentNode).prop("checked", false)
+		$('input.header_check[type="checkbox"]', this.parentNode.parentNode.parentNode).prop("checked", false);
 	},
 
 
@@ -2263,8 +2264,6 @@ Vvveb.StyleManager = {
 		}
 
 		this.cssContainer.html(css);
-
-		return element;
 	},
 
 
@@ -2906,7 +2905,7 @@ Vvveb.ColorPaletteManager = {
 
 						 if (value.startsWith("#")) {
 							 type = "color";
-						} else if (value.indexOf('"') > 0) {
+						} else if (value.indexOf('"') >= 0 || value.indexOf("'") >= 0) {
 							type = "font";
 						} else if (value.endsWith('em') > 0 || value.endsWith('px') > 0) {
 							type = "dimensions";
@@ -2927,6 +2926,7 @@ Vvveb.ColorPaletteManager = {
 	   return cssVars;
 	},
 
+
 	init: function(document) {
 		Vvveb.Builder.selectedEl = $(document.body);
 		Vvveb.Components.render("config/bootstrap", "#configuration .component-properties")

libs/builder/components-widgets.js

@@ -82,7 +82,7 @@ Vvveb.Components.extend("_base", "widgets/video", {
     attributes: ["data-component-video"],
     image: "icons/video.svg",
     dragHtml: '<img src="' + Vvveb.baseUrl + 'icons/video.svg" width="100" height="100">', //use image for drag and swap with iframe on drop for drag performance
-    html: '<div data-component-video style="min-height:240px;min-width:240px;position:relative"><iframe frameborder="0" src="https://www.youtube.com/embed/3xsP3u-CVO4" style="width:100%;height:100%;position:absolute;left:0px;pointer-events:none"></iframe></div>',
+    html: '<div data-component-video style="min-height:240px;min-width:240px;position:relative"><iframe frameborder="0" src="https://www.youtube.com/embed/M7lc1UVf-VE" style="width:100%;height:100%;position:absolute;left:0px;pointer-events:none"></iframe></div>',
 
 
     //url parameters set with onChange

libs/builder/inputs.js

@@ -346,15 +346,17 @@ var ColorInput = $.extend({}, Input, {
 
 	 //html5 color input only supports setting values as hex colors even if the picker returns only rgb
 	 rgb2hex: function(value) {
-		 value = value.trim();
-
-		 if (value && (rgb = value.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i))) {
+		 if (value) {
+			 value = value.trim();
 
-			 return (rgb && rgb.length === 4) ? "#" +
-			  ("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
-			  ("0" + parseInt(rgb[2],10).toString(16)).slice(-2) +
-			  ("0" + parseInt(rgb[3],10).toString(16)).slice(-2) : rgb;
-		 }
+			 if (rgb = value.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i)) {
+
+				 return (rgb && rgb.length === 4) ? "#" +
+				  ("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
+				  ("0" + parseInt(rgb[2],10).toString(16)).slice(-2) +
+				  ("0" + parseInt(rgb[3],10).toString(16)).slice(-2) : rgb;
+			 }
+		}
 
 		 return value;
 	},

libs/builder/plugin-google-fonts.js

@@ -56,18 +56,20 @@ $.ajax({
 		$("#font-family").append(fontSelect);	
 
 		let list = Vvveb.Components.getProperty("_base", "font-family");
-		list.onChange = function (node,value, input, component) {
-			let option = input.options[input.selectedIndex];
-			Vvveb.FontsManager.addFont(option.dataset.provider, value, node);
-			return node;
-		};
-
-		list.data.options.push({optgroup:"Google Fonts"});
-		list.data.options = list.data.options.concat(googlefontNames);
+		if (list) {
+			list.onChange = function (node,value, input, component) {
+				let option = input.options[input.selectedIndex];
+				Vvveb.FontsManager.addFont(option.dataset.provider, value, node);
+				return node;
+			};
+
+			list.data.options.push({optgroup:"Google Fonts"});
+			list.data.options = list.data.options.concat(googlefontNames);
 
-		Vvveb.Components.updateProperty("_base", "font-family", {data:list.data});
-
-		//update default font list
-		fontList = list.data.options;
+			Vvveb.Components.updateProperty("_base", "font-family", {data:list.data});
+
+			//update default font list
+			fontList = list.data.options;
+		}
 	}
 });

scss/_builder.scss

@@ -126,7 +126,7 @@ $font-size-base: 16px;
 		font-size: 11px;
 		color: #000;
 		background-repeat: no-repeat;
-		padding-top: 0px;
+		padding: 0px;
 		margin:1rem auto;
 
 		display:block;
@@ -607,11 +607,13 @@ body
 
 		.expand {
 			position: absolute;
-			top: 7px;
+			top: 4px;
 			right: 3px; 
 
-			a {
+			button {
 				padding:0.2rem;
+				background:transparent;
+				border:none;
 
 				&:hover {
 					background:#eee;
@@ -1149,6 +1151,7 @@ body
 							border: none;
 						}				  
 				}
+
 			}
 
 			select {

scss/bootstrap/_accordion.scss

@@ -4,7 +4,7 @@
 
 .accordion {
   // scss-docs-start accordion-css-vars
-  --#{$prefix}accordion-color: #{color-contrast($accordion-bg)};
+  --#{$prefix}accordion-color: #{$accordion-color};
   --#{$prefix}accordion-bg: #{$accordion-bg};
   --#{$prefix}accordion-transition: #{$accordion-transition};
   --#{$prefix}accordion-border-color: #{$accordion-border-color};
@@ -13,7 +13,7 @@
   --#{$prefix}accordion-inner-border-radius: #{$accordion-inner-border-radius};
   --#{$prefix}accordion-btn-padding-x: #{$accordion-button-padding-x};
   --#{$prefix}accordion-btn-padding-y: #{$accordion-button-padding-y};
-  --#{$prefix}accordion-btn-color: #{$accordion-color};
+  --#{$prefix}accordion-btn-color: #{$accordion-button-color};
   --#{$prefix}accordion-btn-bg: #{$accordion-button-bg};
   --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon)};
   --#{$prefix}accordion-btn-icon-width: #{$accordion-icon-width};
@@ -47,7 +47,7 @@
   &:not(.collapsed) {
     color: var(--#{$prefix}accordion-active-color);
     background-color: var(--#{$prefix}accordion-active-bg);
-    box-shadow: inset 0 calc(var(--#{$prefix}accordion-border-width) * -1) 0 var(--#{$prefix}accordion-border-color); // stylelint-disable-line function-disallowed-list
+    box-shadow: inset 0 calc(-1 * var(--#{$prefix}accordion-border-width)) 0 var(--#{$prefix}accordion-border-color); // stylelint-disable-line function-disallowed-list
 
     &::after {
       background-image: var(--#{$prefix}accordion-btn-active-icon);
@@ -140,7 +140,10 @@
     &:last-child { border-bottom: 0; }
 
     .accordion-button {
-      @include border-radius(0);
+      &,
+      &.collapsed {
+        @include border-radius(0);
+      }
     }
   }
 }

scss/bootstrap/_alert.scss

@@ -20,7 +20,7 @@
   color: var(--#{$prefix}alert-color);
   background-color: var(--#{$prefix}alert-bg);
   border: var(--#{$prefix}alert-border);
-  border-radius: var(--#{$prefix}alert-border-radius, 0); // stylelint-disable-line property-disallowed-list
+  @include border-radius(var(--#{$prefix}alert-border-radius));
 }
 
 // Headings for larger alerts

scss/bootstrap/_badge.scss

@@ -1,5 +1,3 @@
-// stylelint-disable custom-property-empty-line-before
-
 // Base class
 //
 // Requires one of the contextual, color modifier classes for `color` and
@@ -24,7 +22,7 @@
   text-align: center;
   white-space: nowrap;
   vertical-align: baseline;
-  border-radius: var(--#{$prefix}badge-border-radius, 0); // stylelint-disable-line property-disallowed-list
+  @include border-radius(var(--#{$prefix}badge-border-radius));
   @include gradient-bg();
 
   // Empty badges collapse automatically

scss/bootstrap/_breadcrumb.scss

@@ -1,5 +1,3 @@
-// stylelint-disable custom-property-empty-line-before
-
 .breadcrumb {
   // scss-docs-start breadcrumb-css-vars
   --#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x};

scss/bootstrap/_button-group.scss

@@ -37,7 +37,7 @@
   @include border-radius($btn-border-radius);
 
   // Prevent double borders when buttons are next to each other
-  > .btn:not(:first-child),
+  > :not(.btn-check:first-child) + .btn,
   > .btn-group:not(:first-child) {
     margin-left: -$btn-border-width;
   }