fix showing label for progressbar

For this the html progress entry is not used since it is not cross
browser compatible regarding the label.
Also, I didn't regenerate the css because sass produces totally
different output.

apply suggestions and clean up

Apply suggestion to Libraries/iTasks/UI/WebPublic/js/itasks-components-display.js

correctly break cases

Libraries/iTasks/UI/WebPublic/css/itasks-orangeblue.css

@@ -980,6 +980,27 @@ div.itasks-exception {
   padding: 5px;
 }
 
+.itasks-progress {
+  height: 1.5em;
+  width: 100%;
+  background-color: #c9c9c9;
+  position: relative;
+}
+.itasks-progress:before {
+  content: attr(data-label);
+  font-size: 0.8em;
+  position: absolute;
+  text-align: center;
+  top: 5px;
+  left: 0;
+  right: 0;
+}
+.itasks-progress .value {
+  background-color: #7cc4ff;
+  display: inline-block;
+  height: 100%;
+}
+
 .itasks-checkgroup {
   margin: 0;
   padding: 0;

Libraries/iTasks/UI/WebPublic/css/itasks.css

@@ -980,6 +980,27 @@ div.itasks-exception {
   padding: 5px;
 }
 
+.itasks-progress {
+  height: 1.5em;
+  width: 100%;
+  background-color: #c9c9c9;
+  position: relative;
+}
+.itasks-progress:before {
+  content: attr(data-label);
+  font-size: 0.8em;
+  position: absolute;
+  text-align: center;
+  top: 5px;
+  left: 0;
+  right: 0;
+}
+.itasks-progress .value {
+  background-color: #7cc4ff;
+  display: inline-block;
+  height: 100%;
+}
+
 .itasks-checkgroup {
   margin: 0;
   padding: 0;

Libraries/iTasks/UI/WebPublic/css/src/components-display.scss

 .#{$prefix}textview, .#{$prefix}htmlview {
 	padding: 5px;
 }
+
+.#{$prefix}progress {
+	height: 1.5em;
+	width: 100%;
+	background-color: #c9c9c9;
+	position: relative;
+}
+.#{$prefix}progress:before {
+	content: attr(data-label);
+	font-size: 0.8em;
+	position: absolute;
+	text-align: center;
+	top: 5px;
+	left: 0;
+	right: 0;
+}
+.#{$prefix}progress .value {
+	background-color: #7cc4ff;
+	display: inline-block;
+	height: 100%;
+}

Libraries/iTasks/UI/WebPublic/js/itasks-components-display.js

@@ -28,23 +28,34 @@ itasks.HtmlView = {
 	}
 };
 itasks.ProgressBar = {
-    domTag: 'progress',
+	domTag: 'div',
 	cssCls: 'progress',
-    initDOMEl: function() {
-        var me = this,
-            el = this.domEl;
+	initDOMEl: function() {
+		var me = this,
+			el = this.domEl;
+
+		//https://stackoverflow.com/questions/41429906/how-to-display-data-label-inside-html5-progress-bar-cross-browser-compatible
+		var child = document.createElement('span');
+		child.setAttribute('class', 'value');
+		el.appendChild(child);
 
-        el.innerHTML = me.attributes.text;
-		el.min = 0;
-        el.max = 100;
-        if(typeof me.attributes.value == 'number') {
-            el.value = me.attributes.value;
-        }
-    },
+		me.setProgress(me.attributes.value);
+		me.setText(me.attributes.text);
+	},
+	setProgress:function(value) {
+		this.domEl.children[0].style=typeof value == 'number' ? ('width:'+value+'%;') : '';
+	},
+	setText:function(text) {
+		this.domEl.setAttribute('data-label', text);
+	},
 	onAttributeChange:function(name,value) {
 		switch(name) {
-			case 'value': if (value == null) this.domEl.removeAttribute('value'); else this.domEl.value = value; break;
-			case 'text': this.domEl.innerHTML = value; break;
+			case 'value':
+				this.setProgress(value);
+				break;
+			case 'text':
+				this.setText(value);
+				break;
 		}
 	}
 };