diff --git a/api/js/etemplate/et2_widget_color.js b/api/js/etemplate/et2_widget_color.js
index d33448217b..193d07e303 100644
--- a/api/js/etemplate/et2_widget_color.js
+++ b/api/js/etemplate/et2_widget_color.js
@@ -1,3 +1,4 @@
+"use strict";
 /**
  * EGroupware eTemplate2 - JS Color picker object
  *
@@ -9,109 +10,111 @@
  * @copyright Nathan Gray 2012
  * @version $Id$
  */
-
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
 /*egw:uses
-	/vendor/bower-asset/jquery/dist/jquery.js;
-	et2_core_inputWidget;
-	et2_core_valueWidget;
+    /vendor/bower-asset/jquery/dist/jquery.js;
+    et2_core_inputWidget;
+    et2_core_valueWidget;
 */
-
+var et2_core_widget_1 = require("./et2_core_widget");
+var et2_core_valueWidget_1 = require("./et2_core_valueWidget");
+var et2_core_inputWidget_1 = require("./et2_core_inputWidget");
+var et2_core_inheritance_1 = require("./et2_core_inheritance");
 /**
  * Class which implements the "colorpicker" XET-Tag
  *
- * @augments et2_inputWidget
  */
-var et2_color = (function(){ "use strict"; return et2_inputWidget.extend(
-{
-	attributes: {
-	},
-
-	/**
-	 * Constructor
-	 *
-	 * @memberOf et2_color
-	 */
-	init: function() {
-		this._super.apply(this, arguments);
-
-		// included via etemplate2.css
-		//this.egw().includeCSS("phpgwapi/js/jquery/jpicker/css/jPicker-1.1.6.min.css");
-		this.input = this.$node = jQuery("<input type='color' class='et2_color'/>");
-
-		this.setDOMNode(this.$node[0]);
-		this.set_value(this.options.value);
-	},
-
-	getValue: function() {
-		var value = this.$node.val();
-		if(value === '#FFFFFF' || value === '#ffffff')
-		{
-			return '';
-		}
-		return value;
-	},
-
-	set_value: function(color) {
-		if(!color)
-		{
-			color = '#ffffff';
-		}
-		this.$node.val(color);
-	}
-});}).call(this);
-et2_register_widget(et2_color, ["colorpicker"]);
-
+var et2_color = /** @class */ (function (_super) {
+    __extends(et2_color, _super);
+    /**
+     * Constructor
+     */
+    function et2_color(_parent, _attrs, _child) {
+        var _this = 
+        // Call the inherited constructor
+        _super.call(this, _parent, _attrs, et2_core_inheritance_1.ClassWithAttributes.extendAttributes(et2_color._attributes, _child || {})) || this;
+        // included via etemplate2.css
+        //this.egw().includeCSS("phpgwapi/js/jquery/jpicker/css/jPicker-1.1.6.min.css");
+        _this.input = jQuery("<input type='color' class='et2_color'/>");
+        _this.setDOMNode(_this.input[0]);
+        return _this;
+    }
+    et2_color.prototype.getValue = function () {
+        var value = this.input.val();
+        if (value === '#FFFFFF' || value === '#ffffff') {
+            return '';
+        }
+        return value;
+    };
+    et2_color.prototype.set_value = function (color) {
+        if (!color) {
+            color = '#ffffff';
+        }
+        this.input.val(color);
+    };
+    return et2_color;
+}(et2_core_inputWidget_1.et2_inputWidget));
+exports.et2_color = et2_color;
+et2_core_widget_1.et2_register_widget(et2_color, ["colorpicker"]);
 /**
  * et2_textbox_ro is the dummy readonly implementation of the textbox.
  * @augments et2_valueWidget
  */
-var et2_color_ro = (function(){ "use strict"; return et2_valueWidget.extend([et2_IDetachedDOM],
-{
-	/**
-	 * Constructor
-	 *
-	 * @memberOf et2_color_ro
-	 */
-	init: function() {
-		this._super.apply(this, arguments);
-
-		this.value = "";
-		this.$node = jQuery(document.createElement("div"))
-			.addClass("et2_color");
-
-		this.setDOMNode(this.$node[0]);
-	},
-
-	set_value: function(_value) {
-		this.value = _value;
-
-		if(!_value) _value = "inherit";
-		this.$node.css("background-color", _value);
-	},
-	/**
-	 * Code for implementing et2_IDetachedDOM
-	 *
-	 * @param {array} _attrs array to add further attributes to
-	 */
-	getDetachedAttributes: function(_attrs)
-	{
-		_attrs.push("value");
-	},
-
-	getDetachedNodes: function()
-	{
-		return [this.node];
-	},
-
-	setDetachedAttributes: function(_nodes, _values)
-	{
-		this.$node = jQuery(_nodes[0]);
-		if(typeof _values["value"] != 'undefined')
-		{
-			this.set_value(_values["value"]);
-		}
-	}
-});}).call(this);
-
-et2_register_widget(et2_color_ro, ["colorpicker_ro"]);
-
+var et2_color_ro = /** @class */ (function (_super) {
+    __extends(et2_color_ro, _super);
+    /**
+     * Constructor
+     *
+     * @memberOf et2_color_ro
+     */
+    function et2_color_ro(_parent, _attrs, _child) {
+        var _this = 
+        // Call the inherited constructor
+        _super.call(this, _parent, _attrs, _child || {}) || this;
+        _this.value = "";
+        _this.$node = jQuery(document.createElement("div"))
+            .addClass("et2_color");
+        _this.setDOMNode(_this.$node[0]);
+        return _this;
+    }
+    et2_color_ro.prototype.set_value = function (_value) {
+        this.value = _value;
+        if (!_value)
+            _value = "inherit";
+        this.$node.css("background-color", _value);
+    };
+    /**
+     * Code for implementing et2_IDetachedDOM
+     *
+     * @param {array} _attrs array to add further attributes to
+     */
+    et2_color_ro.prototype.getDetachedAttributes = function (_attrs) {
+        _attrs.push("value");
+    };
+    et2_color_ro.prototype.getDetachedNodes = function () {
+        return [this.node];
+    };
+    et2_color_ro.prototype.setDetachedAttributes = function (_nodes, _values) {
+        this.$node = jQuery(_nodes[0]);
+        if (typeof _values["value"] != 'undefined') {
+            this.set_value(_values["value"]);
+        }
+    };
+    return et2_color_ro;
+}(et2_core_valueWidget_1.et2_valueWidget));
+exports.et2_color_ro = et2_color_ro;
+et2_core_widget_1.et2_register_widget(et2_color_ro, ["colorpicker_ro"]);
+//# sourceMappingURL=et2_widget_color.js.map
\ No newline at end of file
diff --git a/api/js/etemplate/et2_widget_color.ts b/api/js/etemplate/et2_widget_color.ts
new file mode 100644
index 0000000000..70df271e0c
--- /dev/null
+++ b/api/js/etemplate/et2_widget_color.ts
@@ -0,0 +1,123 @@
+/**
+ * EGroupware eTemplate2 - JS Color picker object
+ *
+ * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
+ * @package etemplate
+ * @subpackage api
+ * @link http://www.egroupware.org
+ * @author Nathan Gray
+ * @copyright Nathan Gray 2012
+ * @version $Id$
+ */
+
+/*egw:uses
+	/vendor/bower-asset/jquery/dist/jquery.js;
+	et2_core_inputWidget;
+	et2_core_valueWidget;
+*/
+
+import {et2_register_widget, WidgetConfig} from "./et2_core_widget";
+import {et2_valueWidget} from "./et2_core_valueWidget";
+import {et2_inputWidget} from "./et2_core_inputWidget";
+import {ClassWithAttributes} from "./et2_core_inheritance";
+
+/**
+ * Class which implements the "colorpicker" XET-Tag
+ *
+ */
+export class et2_color extends et2_inputWidget
+{
+	private input: JQuery;
+	/**
+	 * Constructor
+	 */
+	constructor(_parent, _attrs? : WidgetConfig, _child? : object)
+	{
+		// Call the inherited constructor
+		super(_parent, _attrs, ClassWithAttributes.extendAttributes(et2_color._attributes, _child || {}));
+		// included via etemplate2.css
+		//this.egw().includeCSS("phpgwapi/js/jquery/jpicker/css/jPicker-1.1.6.min.css");
+		this.input = jQuery("<input type='color' class='et2_color'/>");
+
+		this.setDOMNode(this.input[0]);
+	}
+
+	getValue( )
+	{
+		var value = this.input.val();
+		if(value === '#FFFFFF' || value === '#ffffff')
+		{
+			return '';
+		}
+		return value;
+	}
+
+	set_value( color)
+	{
+		if(!color)
+		{
+			color = '#ffffff';
+		}
+		this.input.val(color);
+	}
+}
+et2_register_widget(et2_color, ["colorpicker"]);
+
+/**
+ * et2_textbox_ro is the dummy readonly implementation of the textbox.
+ * @augments et2_valueWidget
+ */
+export class et2_color_ro extends et2_valueWidget implements et2_IDetachedDOM
+{
+	private value: string;
+	private $node: JQuery;
+	/**
+	 * Constructor
+	 *
+	 * @memberOf et2_color_ro
+	 */
+	constructor(_parent, _attrs? : WidgetConfig, _child? : object)
+	{
+		// Call the inherited constructor
+		super(_parent, _attrs, _child || {});
+
+		this.value = "";
+		this.$node = jQuery(document.createElement("div"))
+			.addClass("et2_color");
+
+		this.setDOMNode(this.$node[0]);
+	}
+
+	set_value( _value)
+	{
+		this.value = _value;
+
+		if(!_value) _value = "inherit";
+		this.$node.css("background-color", _value);
+	}
+	/**
+	 * Code for implementing et2_IDetachedDOM
+	 *
+	 * @param {array} _attrs array to add further attributes to
+	 */
+	getDetachedAttributes(_attrs)
+	{
+		_attrs.push("value");
+	}
+
+	getDetachedNodes()
+	{
+		return [this.node];
+	}
+
+	setDetachedAttributes(_nodes, _values)
+	{
+		this.$node = jQuery(_nodes[0]);
+		if(typeof _values["value"] != 'undefined')
+		{
+			this.set_value(_values["value"]);
+		}
+	}
+}
+et2_register_widget(et2_color_ro, ["colorpicker_ro"]);
+