From edf95a4bdfa2ae4f035ee1e636e6a791c86024c3 Mon Sep 17 00:00:00 2001
From: Hadi Nategh <hnategh@gmail.com>
Date: Thu, 6 Feb 2020 12:10:57 +0100
Subject: [PATCH] Convert et2_widget_url to TS

---
 api/js/etemplate/et2_widget_url.js | 907 ++++++++++++++---------------
 api/js/etemplate/et2_widget_url.ts | 509 ++++++++++++++++
 2 files changed, 942 insertions(+), 474 deletions(-)
 create mode 100644 api/js/etemplate/et2_widget_url.ts

diff --git a/api/js/etemplate/et2_widget_url.js b/api/js/etemplate/et2_widget_url.js
index f001f96db2..2e763797ec 100644
--- a/api/js/etemplate/et2_widget_url.js
+++ b/api/js/etemplate/et2_widget_url.js
@@ -1,3 +1,4 @@
+"use strict";
 /**
  * EGroupware eTemplate2 - JS URL object
  *
@@ -9,485 +10,443 @@
  * @copyright Nathan Gray 2011
  * @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
-	et2_textbox;
-	et2_valueWidget;
-	/api/js/jquery/jquery.base64.js;
+    et2_textbox;
+    et2_valueWidget;
+    /api/js/jquery/jquery.base64.js;
 */
-
+var et2_core_widget_1 = require("./et2_core_widget");
+var et2_widget_textbox_1 = require("./et2_widget_textbox");
+var et2_core_inheritance_1 = require("./et2_core_inheritance");
+var et2_core_valueWidget_1 = require("./et2_core_valueWidget");
 /**
  * Class which implements the "url" XET-Tag, which covers URLs, email & phone
  *
  * @augments et2_textbox
  */
-var et2_url = (function(){ "use strict"; return et2_textbox.extend(
-{
-	attributes: {
-		"multiline": {
-			"ignore": true
-		},
-		"allow_path": {
-			type: "boolean",
-			name: "Allow path",
-			description: "Allow a path instead of a URL, path must start with /",
-			default: false
-		},
-		"trailing_slash": {
-			type: "boolean",
-			name: "Trailing slash",
-			description: "Require (or forbid) that the path ends with a /",
-			default: et2_no_init
-		}
-	},
-
-	/**
-	 * Regexes for validating email addresses incl. email in angle-brackets eg.
-	 * + "Ralf Becker <rb@stylite.de>"
-	 * + "Ralf Becker (Stylite AG) <rb@stylite.de>"
-	 * + "<rb@stylite.de>" or "rb@stylite.de"
-	 * + '"Becker, Ralf" <rb@stylite.de>'
-	 * + "'Becker, Ralf' <rb@stylite.de>"
-	 * but NOT:
-	 * - "Becker, Ralf <rb@stylite.de>" (contains comma outside " or ' enclosed block)
-	 * - "Becker < Ralf <rb@stylite.de>" (contains <    ----------- " ---------------)
-	 *
-	 * About umlaut or IDN domains: we currently only allow German umlauts in domain part!
-	 * We forbid all non-ascii chars in local part, as Horde does not yet support SMTPUTF8 extension (rfc6531)
-	 * and we get a "SMTP server does not support internationalized header data" error otherwise.
-	 *
-	 * Using \042 instead of " to NOT stall minifyer!
-	 *
-	 * Similar, but not identical, preg is in Etemplate\Widget\Url PHP class!
-	 * We can not use "(?<![.\s])", used to check that name-part does not end in
-	 * a dot or white-space. The expression is valid in recent Chrome, but fails
-	 * eg. in Safari 11.0 or node.js 4.8.3 and therefore grunt uglify!
-	 * Server-side will fail in that case because it uses the full regexp.
-	 */
-	EMAIL_PREG: new RegExp(/^(([^\042',<][^,<]+|\042[^\042]+\042|\'[^\']+\'|"(?:[^"\\]|\\.)*")\s?<)?[^\x00-\x20()\xe2\x80\x8b<>@,;:\042\[\]\x80-\xff]+@([a-z0-9ÄÖÜäöüß](|[a-z0-9ÄÖÜäöüß_-]*[a-z0-9ÄÖÜäöüß])\.)+[a-z]{2,}>?$/i),
-	/**
-	 * @memberOf et2_url
-	 */
-	createInputWidget: function() {
-		this.input = jQuery(document.createElement("input"))
-			.blur(this,this.validate)
-			.blur(this,function(e){e.data.set_value(e.data.getValue());});
-
-		this._button = null;
-
-		if(this.size) {
-			this.set_size(this.size);
-		}
-
-		this.setDOMNode(this.input[0]);
-	},
-
-	destroy: function() {
-		if(this.input) {
-			this.input.unbind();
-		}
-		this._button = null;
-		this._super.apply(this);
-	},
-
-	/**
-	 * Override parent to update href of 'button'
-	 *
-	 * @param _value value to set
-	 */
-	set_value: function(_value) {
-		this.update_button(_value);
-		this._super.apply(this, arguments);
-	},
-
-	update_button: function(_value) {
-		if(this.value == _value) return;
-		if(_value)
-		{
-			// Create button if it doesn't exist yet
-			if(this._button == null)
-			{
-				this._button = jQuery(document.createElement("a")).addClass("et2_url");
-				this.getSurroundings().insertDOMNode(this._button[0]);
-				this.getSurroundings().update();
-			}
-			this._button.removeClass("url phone email").removeAttr("href");
-			_value = this.get_link(this._type, _value);
-			switch(this._type)
-			{
-				case "url":
-					// Silently use http if no protocol
-					this._button.attr("href", _value).attr("target", "_blank").addClass("url");
-					break;
-				case "url-phone":
-					if(_value) {
-						if(typeof _value == 'function')
-						{
-							this._button.click(this, _value).addClass("phone").show();
-						}
-						else
-						{
-							this._button.attr("href", _value).addClass("phone").show();
-						}
-					} else if (_value === false) {
-						// Can't make a good handler, hide button
-						this._button.hide();
-					}
-					break;
-				case "url-email":
-					if(typeof _value == 'function')
-					{
-						this._button.click(this, _value).addClass("email");
-					}
-					else
-					{
-						this._button.attr("href", _value).addClass("email");
-					}
-					break;
-			}
-		}
-		else
-		{
-			if(this._button) this._button.hide();
-			if(this._button && this.getSurroundings && this.getSurroundings().removeDOMNode)
-			{
-				this.getSurroundings().removeDOMNode(this._button[0]);
-			}
-			this._button = null;
-		}
-	},
-
-	get_link: function(type, value) {
-		if(!value) return false;
-		switch(type)
-		{
-			case "url":
-				// Silently use http if no protocol
-				if(value.indexOf("://") == -1) value = "http://"+value;
-				break;
-			case "url-phone":
-				// Clean number
-				value = value.replace('&#9829;','').replace('(0)','');
-				value = value.replace(/[abc]/gi,2).replace(/[def]/gi,3).replace(/[ghi]/gi,4).replace(/[jkl]/gi,5).replace(/[mno]/gi,6);
-				value = value.replace(/[pqrs]/gi,7).replace(/[tuv]/gi,8).replace(/[wxyz]/gi,9);
-				// remove everything but numbers and plus, as telephon software might not like it
-				value = value.replace(/[^0-9+]/g, '');
-
-				// movile Webkit (iPhone, Android) have precedence over server configuration!
-				if (navigator.userAgent.indexOf('AppleWebKit') !== -1 &&
-					(navigator.userAgent.indexOf("iPhone") !== -1 || navigator.userAgent.indexOf("Android") !== -1) &&
-					value.indexOf("tel:") == -1)
-				{
-					 value = "tel:"+value;
-				}
-				else if (this.egw().config("call_link"))
-				{
-					var link = this.egw().config("call_link")
-						// tel: links use no URL encoding according to rfc3966 section-5.1.4
-						.replace("%1", this.egw().config("call_link").substr(0, 4) == 'tel:' ?
-							value : encodeURIComponent(value))
-						.replace("%u",this.egw().user('account_lid'))
-						.replace("%t",this.egw().user('account_phone'));
-					var popup = this.egw().config("call_popup");
-					value = function() { egw.open_link(link, '_phonecall', popup); };
-				}
-				else {
-					// Can't make a good handler
-					return false;
-				}
-				break;
-			case "url-email":
-				if(value.indexOf("mailto:") == -1)
-				{
-					value = "mailto:"+value;
-				}
-				if((this.egw().user('apps').mail || this.egw().user('apps').felamimail) &&
-					this.egw().preference('force_mailto','addressbook') != '1' )
-				{
-					return function() {egw.open_link(value);};
-				}
-				break;
-		}
-
-		return value;
-	},
-
-	validate: function(e) {
-		e.data.hideMessage();
-
-		if(e.data._super) {
-			e.data._super.apply(this, arguments);
-		}
-
-		// Check value, and correct if possible
-		var value = jQuery.trim(e.data.getValue());
-		if(value == "") return;
-		switch(e.data._type) {
-			case "url":
-				if(value.indexOf("://") == -1 && !e.data.options.allow_path) {
-					e.data.set_value("http://"+value);
-					e.data.showMessage(e.data.egw().lang("Protocol is required"), "hint", true);
-				}
-				else if (e.data.options.allow_path && value[0] !== '/')
-				{
-					e.data.showMessage(e.data.egw().lang("Path must start with '/'"), "hint", true);
-				}
-
-				// Adjust trailing slash - required or forbidden
-				if(e.data.options.trailing_slash === true && value[value.length-1] !== '/' )
-				{
-					e.data.set_value(value+'/');
-				}
-				else if (e.data.options.trailing_slash === false && value[value.length-1] === '/'  )
-				{
-					e.data.set_value(value.substr(0,value.length-1));
-				}
-				break;
-			case "url-email":
-				if(!e.data.EMAIL_PREG.test(value) ||
-					// If they use Text <email>, make sure the <> match
-					(value.indexOf("<") > 0 && value.indexOf(">") != value.length-1) ||
-					(value.indexOf(">") > 0 && value.indexOf("<") < 0)
-				)
-				{
-					e.data.showMessage("Invalid email","validation_error",true);
-				}
-		}
-	},
-
-	attachToDOM: function()
-	{
-		this._super.apply(this, arguments);
-
-		if (this.input[0].parentNode) jQuery(this.input[0].parentNode).addClass('et2_url_span');
-	}
-});}).call(this);
-et2_register_widget(et2_url, ["url", "url-email", "url-phone"]);
-
+var et2_url = /** @class */ (function (_super_1) {
+    __extends(et2_url, _super_1);
+    function et2_url() {
+        var _this = _super_1 !== null && _super_1.apply(this, arguments) || this;
+        _this._button = null;
+        _this.value = "";
+        return _this;
+    }
+    /**
+     * @memberOf et2_url
+     */
+    et2_url.prototype.createInputWidget = function () {
+        this.input = jQuery(document.createElement("input"))
+            .blur(this, this.validate)
+            .blur(this, function (e) { e.data.set_value(e.data.getValue()); });
+        this._button = null;
+        if (this.size) {
+            this.set_size(this.size);
+        }
+        this.setDOMNode(this.input[0]);
+    };
+    et2_url.prototype.destroy = function () {
+        if (this.input) {
+            this.input.unbind();
+        }
+        this._button = null;
+        _super_1.prototype.destroy.call(this);
+    };
+    /**
+     * Override parent to update href of 'button'
+     *
+     * @param _value value to set
+     */
+    et2_url.prototype.set_value = function (_value) {
+        this.update_button(_value);
+        _super_1.prototype.set_value.call(this, _value);
+    };
+    et2_url.prototype.update_button = function (_value) {
+        if (this.value == _value)
+            return;
+        if (_value) {
+            // Create button if it doesn't exist yet
+            if (this._button == null) {
+                this._button = jQuery(document.createElement("a")).addClass("et2_url");
+                this.getSurroundings().insertDOMNode(this._button[0]);
+                this.getSurroundings().update();
+            }
+            this._button.removeClass("url phone email").removeAttr("href");
+            _value = this.get_link(this.getType(), _value);
+            switch (this.getType()) {
+                case "url":
+                    // Silently use http if no protocol
+                    this._button.attr("href", _value).attr("target", "_blank").addClass("url");
+                    break;
+                case "url-phone":
+                    if (_value) {
+                        if (typeof _value == 'function') {
+                            this._button.click(this, _value).addClass("phone").show();
+                        }
+                        else {
+                            this._button.attr("href", _value).addClass("phone").show();
+                        }
+                    }
+                    else if (_value === false) {
+                        // Can't make a good handler, hide button
+                        this._button.hide();
+                    }
+                    break;
+                case "url-email":
+                    if (typeof _value == 'function') {
+                        this._button.click(this, _value).addClass("email");
+                    }
+                    else {
+                        this._button.attr("href", _value).addClass("email");
+                    }
+                    break;
+            }
+        }
+        else {
+            if (this._button)
+                this._button.hide();
+            if (this._button && this.getSurroundings && this.getSurroundings().removeDOMNode) {
+                this.getSurroundings().removeDOMNode(this._button[0]);
+            }
+            this._button = null;
+        }
+    };
+    et2_url.prototype.get_link = function (type, value) {
+        if (!value)
+            return false;
+        switch (type) {
+            case "url":
+                // Silently use http if no protocol
+                if (value.indexOf("://") == -1)
+                    value = "http://" + value;
+                break;
+            case "url-phone":
+                // Clean number
+                value = value.replace('&#9829;', '').replace('(0)', '');
+                value = value.replace(/[abc]/gi, 2).replace(/[def]/gi, 3).replace(/[ghi]/gi, 4).replace(/[jkl]/gi, 5).replace(/[mno]/gi, 6);
+                value = value.replace(/[pqrs]/gi, 7).replace(/[tuv]/gi, 8).replace(/[wxyz]/gi, 9);
+                // remove everything but numbers and plus, as telephon software might not like it
+                value = value.replace(/[^0-9+]/g, '');
+                // movile Webkit (iPhone, Android) have precedence over server configuration!
+                if (navigator.userAgent.indexOf('AppleWebKit') !== -1 &&
+                    (navigator.userAgent.indexOf("iPhone") !== -1 || navigator.userAgent.indexOf("Android") !== -1) &&
+                    value.indexOf("tel:") == -1) {
+                    value = "tel:" + value;
+                }
+                else if (this.egw().config("call_link")) {
+                    var link = this.egw().config("call_link")
+                        // tel: links use no URL encoding according to rfc3966 section-5.1.4
+                        .replace("%1", this.egw().config("call_link").substr(0, 4) == 'tel:' ?
+                        value : encodeURIComponent(value))
+                        .replace("%u", this.egw().user('account_lid'))
+                        .replace("%t", this.egw().user('account_phone'));
+                    var popup = this.egw().config("call_popup");
+                    value = function () { egw.open_link(link, '_phonecall', popup); };
+                }
+                else {
+                    // Can't make a good handler
+                    return false;
+                }
+                break;
+            case "url-email":
+                if (value.indexOf("mailto:") == -1) {
+                    value = "mailto:" + value;
+                }
+                if ((this.egw().user('apps').mail || this.egw().user('apps').felamimail) &&
+                    this.egw().preference('force_mailto', 'addressbook') != '1') {
+                    return function () { egw.open_link(value); };
+                }
+                break;
+        }
+        return value;
+    };
+    et2_url.prototype.validate = function (e) {
+        e.data.hideMessage();
+        if (e.data._super) {
+            e.data._super.apply(this, arguments);
+        }
+        // Check value, and correct if possible
+        var value = jQuery.trim(e.data.getValue());
+        if (value == "")
+            return;
+        switch (e.data._type) {
+            case "url":
+                if (value.indexOf("://") == -1 && !e.data.options.allow_path) {
+                    e.data.set_value("http://" + value);
+                    e.data.showMessage(e.data.egw().lang("Protocol is required"), "hint", true);
+                }
+                else if (e.data.options.allow_path && value[0] !== '/') {
+                    e.data.showMessage(e.data.egw().lang("Path must start with '/'"), "hint", true);
+                }
+                // Adjust trailing slash - required or forbidden
+                if (e.data.options.trailing_slash === true && value[value.length - 1] !== '/') {
+                    e.data.set_value(value + '/');
+                }
+                else if (e.data.options.trailing_slash === false && value[value.length - 1] === '/') {
+                    e.data.set_value(value.substr(0, value.length - 1));
+                }
+                break;
+            case "url-email":
+                if (!e.data.EMAIL_PREG.test(value) ||
+                    // If they use Text <email>, make sure the <> match
+                    (value.indexOf("<") > 0 && value.indexOf(">") != value.length - 1) ||
+                    (value.indexOf(">") > 0 && value.indexOf("<") < 0)) {
+                    e.data.showMessage("Invalid email", "validation_error", true);
+                }
+        }
+    };
+    et2_url.prototype.attachToDOM = function () {
+        var res = _super_1.prototype.attachToDOM.call(this);
+        if (this.input[0].parentNode)
+            jQuery(this.input[0].parentNode).addClass('et2_url_span');
+        return res;
+    };
+    et2_url._attributes = {
+        "multiline": {
+            "ignore": true
+        },
+        "allow_path": {
+            type: "boolean",
+            name: "Allow path",
+            description: "Allow a path instead of a URL, path must start with /",
+            default: false
+        },
+        "trailing_slash": {
+            type: "boolean",
+            name: "Trailing slash",
+            description: "Require (or forbid) that the path ends with a /",
+            default: et2_no_init
+        }
+    };
+    /**
+     * Regexes for validating email addresses incl. email in angle-brackets eg.
+     * + "Ralf Becker <rb@stylite.de>"
+     * + "Ralf Becker (Stylite AG) <rb@stylite.de>"
+     * + "<rb@stylite.de>" or "rb@stylite.de"
+     * + '"Becker, Ralf" <rb@stylite.de>'
+     * + "'Becker, Ralf' <rb@stylite.de>"
+     * but NOT:
+     * - "Becker, Ralf <rb@stylite.de>" (contains comma outside " or ' enclosed block)
+     * - "Becker < Ralf <rb@stylite.de>" (contains <    ----------- " ---------------)
+     *
+     * About umlaut or IDN domains: we currently only allow German umlauts in domain part!
+     * We forbid all non-ascii chars in local part, as Horde does not yet support SMTPUTF8 extension (rfc6531)
+     * and we get a "SMTP server does not support internationalized header data" error otherwise.
+     *
+     * Using \042 instead of " to NOT stall minifyer!
+     *
+     * Similar, but not identical, preg is in Etemplate\Widget\Url PHP class!
+     * We can not use "(?<![.\s])", used to check that name-part does not end in
+     * a dot or white-space. The expression is valid in recent Chrome, but fails
+     * eg. in Safari 11.0 or node.js 4.8.3 and therefore grunt uglify!
+     * Server-side will fail in that case because it uses the full regexp.
+     */
+    et2_url.EMAIL_PREG = new RegExp(/^(([^\042',<][^,<]+|\042[^\042]+\042|\'[^\']+\'|"(?:[^"\\]|\\.)*")\s?<)?[^\x00-\x20()\xe2\x80\x8b<>@,;:\042\[\]\x80-\xff]+@([a-z0-9ÄÖÜäöüß](|[a-z0-9ÄÖÜäöüß_-]*[a-z0-9ÄÖÜäöüß])\.)+[a-z]{2,}>?$/i);
+    return et2_url;
+}(et2_widget_textbox_1.et2_textbox));
+et2_core_widget_1.et2_register_widget(et2_url, ["url", "url-email", "url-phone"]);
 /**
- * et2_url_ro is the readonly implementation of the url, email & phone.
- * It renders things as links, when possible
- *
- * @augments et2_valueWidget
- */
-var et2_url_ro = (function(){ "use strict"; return et2_valueWidget.extend([et2_IDetachedDOM],
-{
-	attributes: {
-		"contact_plus": {
-			"name": "Add contact button",
-			"type": "boolean",
-			"default": false,
-			"description": "Allow to add email as contact to addressbook"
-		},
-		"full_email": {
-			"name": "Show full email address",
-			"type": "boolean",
-			"default": true,
-			"description": "Allow to show full email address if ture otherwise show only name"
-		}
-	},
-
-	/**
-	 * Constructor
-	 *
-	 * @memberOf et2_url_ro
-	 */
-	init: function() {
-		this._super.apply(this, arguments);
-
-		this.value = "";
-		this.span = jQuery(document.createElement("a"))
-			.addClass("et2_textbox readonly");
-		// Do not a tag if no call_link is set and not in mobile, empty a tag may conflict
-		// with some browser telephony addons (eg. telify in FF)
-		if (!egw.config('call_link') && this._type == 'url-phone' && !egwIsMobile()){
-			this.span = jQuery(document.createElement("span"))
-				.addClass("et2_textbox readonly");
-		}
-		if(this._type == 'url-email')
-		{
-			this.span.addClass('et2_email');
-		}
-		this.setDOMNode(this.span[0]);
-	},
-
-	set_value: function(_value) {
-		this.value = _value;
-
-		var link = et2_url.prototype.get_link(this._type, _value);
-
-		if(!link)
-		{
-			this.span.text(_value);
-			this.span.removeAttr("href");
-			return;
-		}
-		this.span.text(_value);
-		switch(this._type) {
-			case "url":
-				this.span.attr("href", link).attr("target", "_blank");
-				break;
-			case "url-phone":
-				if(typeof link == 'function')
-				{
-					this.span.off('click.et2_url');
-					this.span.on('click.et2_url', link);
-					this.span.attr("href", "#");
-				}
-				else if (link)
-				{
-					this.span.attr("href", link);
-				}
-				break;
-			case "url-email":
-				if(typeof link == 'function')
-				{
-					this.span.off('click.et2_url');
-					this.span.on('click.et2_url', link);
-					this.span.removeAttr("href");
-				}
-				else
-				{
-					this.span.attr("href", link);
-					if(!this.span.attr("target"))
-					{
-					    this.span.attr("target", "_blank");
-					}
-				}
-				// wrap email address if there's a name
-				if (this.span.text() && this.span.text().split("<") && this.options.full_email)
-				{
-					var val = this.span.text().split("<");
-					val = val[0] != ""? val[0]: val[2];
-
-					// need to preserve the original value somehow
-					// as it's been used for add contact plus feature
-					this.span.attr('title',_value);
-
-					this.span.text(val.replace(/"/g,''));
-					this.span.append("<span class='noemail'>"+
-						_value.replace(val,'')
-						.replace(/</g, '&lt;')
-						.replace(/>/g, '&gt;')
-					+"</span>");
-
-				}
-
-				// Add contact_plus button
-				if (this.options.contact_plus)
-				{
-					// If user doesn't have access to addressbook, stop
-					if(!egw.app('addressbook')) return;
-
-					// Bind onmouseenter event on <a> tag in order to add contact plus
-					// Need to keep span & value so it works inside nextmatch
-					this.span.on ('mouseenter', jQuery.proxy(function (event) {
-							event.stopImmediatePropagation();
-							this.widget._add_contact_tooltip.call(this, et2_url_ro.email_cache[this.value]);
-							if(typeof et2_url_ro.email_cache[this.value] === 'undefined')
-							{
-								// Ask server if we know this email
-								this.widget.egw().jsonq('EGroupware\\Api\\Etemplate\\Widget\\Url::ajax_contact',
-									this.value, this.widget._add_contact_tooltip, this
-								);
-							}
-						},{widget: this, span: this.span, value: this.value}));
-				}
-				break;
-		}
-	},
-
-	/**
-	 * Add a button to add the email address as a contact
-	 *
-	 * @param {boolean} email_exists True, or else nothing happens
-	 */
-	_add_contact_tooltip: function(email_exists)
-	{
-		var value = this.value || this.widget.value || null;
-		et2_url_ro.email_cache[value] = email_exists;
-
-		// Close all the others
-		jQuery('.et2_email').each(function() {
-			if(jQuery(this).tooltip('instance')) {
-				jQuery(this).tooltip('close');
-			}
-		});
-
-		if(email_exists || !this.span.is(':hover')) return;
-
-		this.span.tooltip({
-			items: 'a.et2_email',
-			position: {my:"right top", at:"left top", collision:"flipfit"},
-			tooltipClass: "et2_email_popup",
-			content: function()
-			{
-				// Here we could do all sorts of things
-				var extra = {
-					'presets[email]': jQuery(this).attr('title') ? jQuery(this).attr('title') : jQuery(this).text()
-				};
-
-				return jQuery('<a href="#" class= "et2_url_email_contactPlus" title="'+egw.lang('Add a new contact')+'"><img src="'
-						+ (typeof email_exists === 'undefined' ? egw.image("loading") : egw.image("new")) +'"/></a>')
-					.on('click', function() {
-						egw.open('','addressbook','add',extra);
-					});
-			},
-			close: function( event, ui )
-			{
-				ui.tooltip.hover(
-					function () {
-						jQuery(this).stop(true).fadeTo(400, 1);
-						//.fadeIn("slow"); // doesn't work because of stop()
-					},
-					function () {
-						jQuery(this).fadeOut("400", function(){	jQuery(this).remove();});
-					}
-				);
-			}
-		})
-		.tooltip("open");
-
-		jQuery('.egwGridView_scrollarea').one('scroll', jQuery.proxy(function() {
-			if(this.tooltip("instance"))
-			{
-				this.tooltip('destroy');
-			}
-		}, this.span));
-
-	},
-
-	/**
-	 * Code for implementing et2_IDetachedDOM
-	 *
-	 * @param {array} _attrs array to add further attributes to
-	 */
-	getDetachedAttributes: function(_attrs)
-	{
-		_attrs.push("value", "class", "statustext");
-	},
-
-	getDetachedNodes: function()
-	{
-		return [this.span[0]];
-	},
-
-	setDetachedAttributes: function(_nodes, _values)
-	{
-		// Update the properties
-		this.span = jQuery(_nodes[0]);
-		if (typeof _values["value"] != "undefined")
-		{
-			this.set_value(_values["value"]);
-		}
-		if (typeof _values["class"] != "undefined")
-		{
-			_nodes[0].setAttribute("class", _values["class"]);
-		}
-
-		// Set to original status text if not set for this row
-		this.span.attr('title',_values.statustext ? _values.statustext : this.options.statustext);
-	}
-});}).call(this);
-et2_url_ro.email_cache = [];
-et2_register_widget(et2_url_ro, ["url_ro", "url-email_ro", "url-phone_ro"]);
+* et2_url_ro is the readonly implementation of the url, email & phone.
+* It renders things as links, when possible
+*
+* @augments et2_valueWidget
+*/
+var et2_url_ro = /** @class */ (function (_super_1) {
+    __extends(et2_url_ro, _super_1);
+    /**
+     * Constructor
+     *
+     * @memberOf et2_url_ro
+     */
+    function et2_url_ro(_parent, _attrs, _child) {
+        var _this = 
+        // Call the inherited constructor
+        _super_1.call(this, _parent, _attrs, et2_core_inheritance_1.ClassWithAttributes.extendAttributes(et2_url_ro._attributes, _child || {})) || this;
+        _this.value = "";
+        _this.span = null;
+        _this.value = "";
+        _this.span = jQuery(document.createElement("a"))
+            .addClass("et2_textbox readonly");
+        // Do not a tag if no call_link is set and not in mobile, empty a tag may conflict
+        // with some browser telephony addons (eg. telify in FF)
+        if (!egw.config('call_link') && _this.getType() == 'url-phone' && !egwIsMobile()) {
+            _this.span = jQuery(document.createElement("span"))
+                .addClass("et2_textbox readonly");
+        }
+        if (_this.getType() == 'url-email') {
+            _this.span.addClass('et2_email');
+        }
+        _this.setDOMNode(_this.span[0]);
+        return _this;
+    }
+    et2_url_ro.prototype.set_value = function (_value) {
+        this.value = _value;
+        var link = et2_url.prototype.get_link(this.getType(), _value);
+        if (!link) {
+            this.span.text(_value);
+            this.span.removeAttr("href");
+            return;
+        }
+        this.span.text(_value);
+        switch (this.getType()) {
+            case "url":
+                this.span.attr("href", link).attr("target", "_blank");
+                break;
+            case "url-phone":
+                if (typeof link == 'function') {
+                    this.span.off('click.et2_url');
+                    this.span.on('click.et2_url', link);
+                    this.span.attr("href", "#");
+                }
+                else if (link) {
+                    this.span.attr("href", link);
+                }
+                break;
+            case "url-email":
+                if (typeof link == 'function') {
+                    this.span.off('click.et2_url');
+                    this.span.on('click.et2_url', link);
+                    this.span.removeAttr("href");
+                }
+                else {
+                    this.span.attr("href", link);
+                    if (!this.span.attr("target")) {
+                        this.span.attr("target", "_blank");
+                    }
+                }
+                // wrap email address if there's a name
+                if (this.span.text() && this.span.text().split("<") && this.options.full_email) {
+                    var val = this.span.text().split("<");
+                    val = val[0] != "" ? val[0] : val[2];
+                    // need to preserve the original value somehow
+                    // as it's been used for add contact plus feature
+                    this.span.attr('title', _value);
+                    this.span.text(val.replace(/"/g, ''));
+                    this.span.append("<span class='noemail'>" +
+                        _value.replace(val, '')
+                            .replace(/</g, '&lt;')
+                            .replace(/>/g, '&gt;')
+                        + "</span>");
+                }
+                // Add contact_plus button
+                if (this.options.contact_plus) {
+                    // If user doesn't have access to addressbook, stop
+                    if (!egw.app('addressbook'))
+                        return;
+                    // Bind onmouseenter event on <a> tag in order to add contact plus
+                    // Need to keep span & value so it works inside nextmatch
+                    this.span.on('mouseenter', jQuery.proxy(function (event) {
+                        event.stopImmediatePropagation();
+                        this.widget._add_contact_tooltip.call(this, et2_url_ro.email_cache[this.value]);
+                        if (typeof et2_url_ro.email_cache[this.value] === 'undefined') {
+                            // Ask server if we know this email
+                            this.widget.egw().jsonq('EGroupware\\Api\\Etemplate\\Widget\\Url::ajax_contact', this.value, this.widget._add_contact_tooltip, this);
+                        }
+                    }, { widget: this, span: this.span, value: this.value }));
+                }
+                break;
+        }
+    };
+    /**
+     * Add a button to add the email address as a contact
+     *
+     * @param {boolean} email_exists True, or else nothing happens
+     */
+    et2_url_ro.prototype._add_contact_tooltip = function (email_exists) {
+        var value = this.value || this.widget.value || null;
+        et2_url_ro.email_cache[value] = email_exists;
+        // Close all the others
+        jQuery('.et2_email').each(function () {
+            if (jQuery(this).tooltip('instance')) {
+                jQuery(this).tooltip('close');
+            }
+        });
+        if (email_exists || !this.span.is(':hover'))
+            return;
+        this.span.tooltip({
+            items: 'a.et2_email',
+            position: { my: "right top", at: "left top", collision: "flipfit" },
+            tooltipClass: "et2_email_popup",
+            content: function () {
+                // Here we could do all sorts of things
+                var extra = {
+                    'presets[email]': jQuery(this).attr('title') ? jQuery(this).attr('title') : jQuery(this).text()
+                };
+                return jQuery('<a href="#" class= "et2_url_email_contactPlus" title="' + egw.lang('Add a new contact') + '"><img src="'
+                    + (typeof email_exists === 'undefined' ? egw.image("loading") : egw.image("new")) + '"/></a>')
+                    .on('click', function () {
+                    egw.open('', 'addressbook', 'add', extra);
+                });
+            },
+            close: function (event, ui) {
+                ui.tooltip.hover(function () {
+                    jQuery(this).stop(true).fadeTo(400, 1);
+                    //.fadeIn("slow"); // doesn't work because of stop()
+                }, function () {
+                    jQuery(this).fadeOut("400", function () { jQuery(this).remove(); });
+                });
+            }
+        })
+            .tooltip("open");
+        jQuery('.egwGridView_scrollarea').one('scroll', jQuery.proxy(function () {
+            if (this.tooltip("instance")) {
+                this.tooltip('destroy');
+            }
+        }, this.span));
+    };
+    /**
+     * Code for implementing et2_IDetachedDOM
+     *
+     * @param {array} _attrs array to add further attributes to
+     */
+    et2_url_ro.prototype.getDetachedAttributes = function (_attrs) {
+        _attrs.push("value", "class", "statustext");
+    };
+    et2_url_ro.prototype.getDetachedNodes = function () {
+        return [this.span[0]];
+    };
+    et2_url_ro.prototype.setDetachedAttributes = function (_nodes, _values) {
+        // Update the properties
+        this.span = jQuery(_nodes[0]);
+        if (typeof _values["value"] != "undefined") {
+            this.set_value(_values["value"]);
+        }
+        if (typeof _values["class"] != "undefined") {
+            _nodes[0].setAttribute("class", _values["class"]);
+        }
+        // Set to original status text if not set for this row
+        this.span.attr('title', _values.statustext ? _values.statustext : this.options.statustext);
+    };
+    et2_url_ro._attributes = {
+        "contact_plus": {
+            "name": "Add contact button",
+            "type": "boolean",
+            "default": false,
+            "description": "Allow to add email as contact to addressbook"
+        },
+        "full_email": {
+            "name": "Show full email address",
+            "type": "boolean",
+            "default": true,
+            "description": "Allow to show full email address if ture otherwise show only name"
+        }
+    };
+    et2_url_ro.email_cache = [];
+    return et2_url_ro;
+}(et2_core_valueWidget_1.et2_valueWidget));
+et2_core_widget_1.et2_register_widget(et2_url_ro, ["url_ro", "url-email_ro", "url-phone_ro"]);
+//# sourceMappingURL=et2_widget_url.js.map
\ No newline at end of file
diff --git a/api/js/etemplate/et2_widget_url.ts b/api/js/etemplate/et2_widget_url.ts
new file mode 100644
index 0000000000..c9ed9747e4
--- /dev/null
+++ b/api/js/etemplate/et2_widget_url.ts
@@ -0,0 +1,509 @@
+/**
+ * EGroupware eTemplate2 - JS URL 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 2011
+ * @version $Id$
+ */
+
+/*egw:uses
+	et2_textbox;
+	et2_valueWidget;
+	/api/js/jquery/jquery.base64.js;
+*/
+
+import {et2_register_widget, WidgetConfig} from "./et2_core_widget";
+import {et2_textbox} from "./et2_widget_textbox";
+import {ClassWithAttributes} from "./et2_core_inheritance";
+import {et2_valueWidget} from "./et2_core_valueWidget";
+
+/**
+ * Class which implements the "url" XET-Tag, which covers URLs, email & phone
+ *
+ * @augments et2_textbox
+ */
+class et2_url extends et2_textbox
+{
+	static readonly _attributes : any = {
+		"multiline": {
+			"ignore": true
+		},
+		"allow_path": {
+			type: "boolean",
+			name: "Allow path",
+			description: "Allow a path instead of a URL, path must start with /",
+			default: false
+		},
+		"trailing_slash": {
+			type: "boolean",
+			name: "Trailing slash",
+			description: "Require (or forbid) that the path ends with a /",
+			default: et2_no_init
+		}
+	};
+
+	/**
+	 * Regexes for validating email addresses incl. email in angle-brackets eg.
+	 * + "Ralf Becker <rb@stylite.de>"
+	 * + "Ralf Becker (Stylite AG) <rb@stylite.de>"
+	 * + "<rb@stylite.de>" or "rb@stylite.de"
+	 * + '"Becker, Ralf" <rb@stylite.de>'
+	 * + "'Becker, Ralf' <rb@stylite.de>"
+	 * but NOT:
+	 * - "Becker, Ralf <rb@stylite.de>" (contains comma outside " or ' enclosed block)
+	 * - "Becker < Ralf <rb@stylite.de>" (contains <    ----------- " ---------------)
+	 *
+	 * About umlaut or IDN domains: we currently only allow German umlauts in domain part!
+	 * We forbid all non-ascii chars in local part, as Horde does not yet support SMTPUTF8 extension (rfc6531)
+	 * and we get a "SMTP server does not support internationalized header data" error otherwise.
+	 *
+	 * Using \042 instead of " to NOT stall minifyer!
+	 *
+	 * Similar, but not identical, preg is in Etemplate\Widget\Url PHP class!
+	 * We can not use "(?<![.\s])", used to check that name-part does not end in
+	 * a dot or white-space. The expression is valid in recent Chrome, but fails
+	 * eg. in Safari 11.0 or node.js 4.8.3 and therefore grunt uglify!
+	 * Server-side will fail in that case because it uses the full regexp.
+	 */
+	static EMAIL_PREG : RegExp = new RegExp(/^(([^\042',<][^,<]+|\042[^\042]+\042|\'[^\']+\'|"(?:[^"\\]|\\.)*")\s?<)?[^\x00-\x20()\xe2\x80\x8b<>@,;:\042\[\]\x80-\xff]+@([a-z0-9ÄÖÜäöüß](|[a-z0-9ÄÖÜäöüß_-]*[a-z0-9ÄÖÜäöüß])\.)+[a-z]{2,}>?$/i);
+
+	private _button : JQuery = null;
+	value: string = "";
+
+	/**
+	 * @memberOf et2_url
+	 */
+	createInputWidget() {
+		this.input = jQuery(document.createElement("input"))
+			.blur(this,this.validate)
+			.blur(this,function(e){e.data.set_value(e.data.getValue());});
+
+		this._button = null;
+
+		if(this.size) {
+			this.set_size(this.size);
+		}
+
+		this.setDOMNode(this.input[0]);
+	}
+
+	destroy() {
+		if(this.input) {
+			this.input.unbind();
+		}
+		this._button = null;
+		super.destroy();
+	}
+
+	/**
+	 * Override parent to update href of 'button'
+	 *
+	 * @param _value value to set
+	 */
+	set_value(_value: any) {
+		this.update_button(_value);
+		super.set_value(_value);
+	}
+
+	update_button(_value) {
+		if(this.value == _value) return;
+		if(_value)
+		{
+			// Create button if it doesn't exist yet
+			if(this._button == null)
+			{
+				this._button = jQuery(document.createElement("a")).addClass("et2_url");
+				this.getSurroundings().insertDOMNode(this._button[0]);
+				this.getSurroundings().update();
+			}
+			this._button.removeClass("url phone email").removeAttr("href");
+			_value = this.get_link(this.getType(), _value);
+			switch(this.getType())
+			{
+				case "url":
+					// Silently use http if no protocol
+					this._button.attr("href", _value).attr("target", "_blank").addClass("url");
+					break;
+				case "url-phone":
+					if(_value) {
+						if(typeof _value == 'function')
+						{
+							this._button.click(this, _value).addClass("phone").show();
+						}
+						else
+						{
+							this._button.attr("href", _value).addClass("phone").show();
+						}
+					} else if (_value === false) {
+						// Can't make a good handler, hide button
+						this._button.hide();
+					}
+					break;
+				case "url-email":
+					if(typeof _value == 'function')
+					{
+						this._button.click(this, _value).addClass("email");
+					}
+					else
+					{
+						this._button.attr("href", _value).addClass("email");
+					}
+					break;
+			}
+		}
+		else
+		{
+			if(this._button) this._button.hide();
+			if(this._button && this.getSurroundings && this.getSurroundings().removeDOMNode)
+			{
+				this.getSurroundings().removeDOMNode(this._button[0]);
+			}
+			this._button = null;
+		}
+	}
+
+	get_link(type, value) {
+		if(!value) return false;
+		switch(type)
+		{
+			case "url":
+				// Silently use http if no protocol
+				if(value.indexOf("://") == -1) value = "http://"+value;
+				break;
+			case "url-phone":
+				// Clean number
+				value = value.replace('&#9829;','').replace('(0)','');
+				value = value.replace(/[abc]/gi,2).replace(/[def]/gi,3).replace(/[ghi]/gi,4).replace(/[jkl]/gi,5).replace(/[mno]/gi,6);
+				value = value.replace(/[pqrs]/gi,7).replace(/[tuv]/gi,8).replace(/[wxyz]/gi,9);
+				// remove everything but numbers and plus, as telephon software might not like it
+				value = value.replace(/[^0-9+]/g, '');
+
+				// movile Webkit (iPhone, Android) have precedence over server configuration!
+				if (navigator.userAgent.indexOf('AppleWebKit') !== -1 &&
+					(navigator.userAgent.indexOf("iPhone") !== -1 || navigator.userAgent.indexOf("Android") !== -1) &&
+					value.indexOf("tel:") == -1)
+				{
+					value = "tel:"+value;
+				}
+				else if (this.egw().config("call_link"))
+				{
+					var link = this.egw().config("call_link")
+						// tel: links use no URL encoding according to rfc3966 section-5.1.4
+						.replace("%1", this.egw().config("call_link").substr(0, 4) == 'tel:' ?
+							value : encodeURIComponent(value))
+						.replace("%u",this.egw().user('account_lid'))
+						.replace("%t",this.egw().user('account_phone'));
+					var popup = this.egw().config("call_popup");
+					value = function() { egw.open_link(link, '_phonecall', popup); };
+				}
+				else {
+					// Can't make a good handler
+					return false;
+				}
+				break;
+			case "url-email":
+				if(value.indexOf("mailto:") == -1)
+				{
+					value = "mailto:"+value;
+				}
+				if((this.egw().user('apps').mail || this.egw().user('apps').felamimail) &&
+					this.egw().preference('force_mailto','addressbook') != '1' )
+				{
+					return function() {egw.open_link(value);};
+				}
+				break;
+		}
+
+		return value;
+	}
+
+	validate(e) {
+		e.data.hideMessage();
+
+		if(e.data._super) {
+			e.data._super.apply(this, arguments);
+		}
+
+		// Check value, and correct if possible
+		var value = jQuery.trim(e.data.getValue());
+		if(value == "") return;
+		switch(e.data._type) {
+			case "url":
+				if(value.indexOf("://") == -1 && !e.data.options.allow_path) {
+					e.data.set_value("http://"+value);
+					e.data.showMessage(e.data.egw().lang("Protocol is required"), "hint", true);
+				}
+				else if (e.data.options.allow_path && value[0] !== '/')
+				{
+					e.data.showMessage(e.data.egw().lang("Path must start with '/'"), "hint", true);
+				}
+
+				// Adjust trailing slash - required or forbidden
+				if(e.data.options.trailing_slash === true && value[value.length-1] !== '/' )
+				{
+					e.data.set_value(value+'/');
+				}
+				else if (e.data.options.trailing_slash === false && value[value.length-1] === '/'  )
+				{
+					e.data.set_value(value.substr(0,value.length-1));
+				}
+				break;
+			case "url-email":
+				if(!e.data.EMAIL_PREG.test(value) ||
+					// If they use Text <email>, make sure the <> match
+					(value.indexOf("<") > 0 && value.indexOf(">") != value.length-1) ||
+					(value.indexOf(">") > 0 && value.indexOf("<") < 0)
+				)
+				{
+					e.data.showMessage("Invalid email","validation_error",true);
+				}
+		}
+	}
+
+	attachToDOM() : boolean
+	{
+		let res = super.attachToDOM();
+
+		if (this.input[0].parentNode) jQuery(this.input[0].parentNode).addClass('et2_url_span');
+		return res;
+	}
+}
+et2_register_widget(et2_url, ["url", "url-email", "url-phone"]);
+
+/**
+* et2_url_ro is the readonly implementation of the url, email & phone.
+* It renders things as links, when possible
+*
+* @augments et2_valueWidget
+*/
+class et2_url_ro extends et2_valueWidget
+{
+	static readonly _attributes : any = {
+		"contact_plus": {
+			"name": "Add contact button",
+			"type": "boolean",
+			"default": false,
+			"description": "Allow to add email as contact to addressbook"
+		},
+		"full_email": {
+			"name": "Show full email address",
+			"type": "boolean",
+			"default": true,
+			"description": "Allow to show full email address if ture otherwise show only name"
+		}
+	};
+
+	value : string = "";
+	span : JQuery = null;
+	static email_cache : string[] = [];
+
+	/**
+	 * Constructor
+	 *
+	 * @memberOf et2_url_ro
+	 */
+	constructor(_parent, _attrs? : WidgetConfig, _child? : object)
+	{
+		// Call the inherited constructor
+		super(_parent, _attrs, ClassWithAttributes.extendAttributes(et2_url_ro._attributes, _child || {}));
+
+		this.value = "";
+		this.span = jQuery(document.createElement("a"))
+			.addClass("et2_textbox readonly");
+		// Do not a tag if no call_link is set and not in mobile, empty a tag may conflict
+		// with some browser telephony addons (eg. telify in FF)
+		if (!egw.config('call_link') && this.getType() == 'url-phone' && !egwIsMobile()) {
+			this.span = jQuery(document.createElement("span"))
+				.addClass("et2_textbox readonly");
+		}
+		if(this.getType() == 'url-email')
+		{
+			this.span.addClass('et2_email');
+		}
+		this.setDOMNode(this.span[0]);
+	}
+
+	set_value(_value)
+	{
+		this.value = _value;
+
+		let link = et2_url.prototype.get_link(this.getType(), _value);
+
+		if(!link)
+		{
+			this.span.text(_value);
+			this.span.removeAttr("href");
+			return;
+		}
+		this.span.text(_value);
+		switch(this.getType())
+		{
+			case "url":
+				this.span.attr("href", link).attr("target", "_blank");
+				break;
+			case "url-phone":
+				if(typeof link == 'function')
+				{
+					this.span.off('click.et2_url');
+					this.span.on('click.et2_url', link);
+					this.span.attr("href", "#");
+				}
+				else if (link)
+				{
+					this.span.attr("href", link);
+				}
+				break;
+			case "url-email":
+				if(typeof link == 'function')
+				{
+					this.span.off('click.et2_url');
+					this.span.on('click.et2_url', link);
+					this.span.removeAttr("href");
+				}
+				else
+				{
+					this.span.attr("href", link);
+					if(!this.span.attr("target"))
+					{
+						this.span.attr("target", "_blank");
+					}
+				}
+				// wrap email address if there's a name
+				if (this.span.text() && this.span.text().split("<") && this.options.full_email)
+				{
+					let val : any = this.span.text().split("<");
+					val = val[0] != ""? val[0]: val[2];
+
+					// need to preserve the original value somehow
+					// as it's been used for add contact plus feature
+					this.span.attr('title',_value);
+
+					this.span.text(val.replace(/"/g,''));
+					this.span.append("<span class='noemail'>"+
+						_value.replace(val,'')
+							.replace(/</g, '&lt;')
+							.replace(/>/g, '&gt;')
+						+"</span>");
+				}
+
+				// Add contact_plus button
+				if (this.options.contact_plus)
+				{
+					// If user doesn't have access to addressbook, stop
+					if(!egw.app('addressbook')) return;
+
+					// Bind onmouseenter event on <a> tag in order to add contact plus
+					// Need to keep span & value so it works inside nextmatch
+					this.span.on ('mouseenter', jQuery.proxy(function (event) {
+						event.stopImmediatePropagation();
+						this.widget._add_contact_tooltip.call(this, et2_url_ro.email_cache[this.value]);
+						if(typeof et2_url_ro.email_cache[this.value] === 'undefined')
+						{
+							// Ask server if we know this email
+							this.widget.egw().jsonq('EGroupware\\Api\\Etemplate\\Widget\\Url::ajax_contact',
+								this.value, this.widget._add_contact_tooltip, this
+							);
+						}
+					},{widget: this, span: this.span, value: this.value}));
+				}
+				break;
+		}
+	}
+
+	/**
+	 * Add a button to add the email address as a contact
+	 *
+	 * @param {boolean} email_exists True, or else nothing happens
+	 */
+	private _add_contact_tooltip(email_exists)
+	{
+		var value = this.value || this.widget.value || null;
+		et2_url_ro.email_cache[value] = email_exists;
+
+		// Close all the others
+		jQuery('.et2_email').each(function() {
+			if(jQuery(this).tooltip('instance')) {
+				jQuery(this).tooltip('close');
+			}
+		});
+
+		if(email_exists || !this.span.is(':hover')) return;
+
+		this.span.tooltip({
+			items: 'a.et2_email',
+			position: {my:"right top", at:"left top", collision:"flipfit"},
+			tooltipClass: "et2_email_popup",
+			content()
+			{
+				// Here we could do all sorts of things
+				var extra = {
+					'presets[email]': jQuery(this).attr('title') ? jQuery(this).attr('title') : jQuery(this).text()
+				};
+
+				return jQuery('<a href="#" class= "et2_url_email_contactPlus" title="'+egw.lang('Add a new contact')+'"><img src="'
+					+ (typeof email_exists === 'undefined' ? egw.image("loading") : egw.image("new")) +'"/></a>')
+					.on('click', function() {
+						egw.open('','addressbook','add',extra);
+					});
+			},
+			close( event, ui )
+			{
+				ui.tooltip.hover(
+					function () {
+						jQuery(this).stop(true).fadeTo(400, 1);
+						//.fadeIn("slow"); // doesn't work because of stop()
+					},
+					function () {
+						jQuery(this).fadeOut("400", function(){	jQuery(this).remove();});
+					}
+				);
+			}
+		})
+			.tooltip("open");
+
+		jQuery('.egwGridView_scrollarea').one('scroll', jQuery.proxy(function() {
+			if(this.tooltip("instance"))
+			{
+				this.tooltip('destroy');
+			}
+		}, this.span));
+	}
+
+	/**
+	 * Code for implementing et2_IDetachedDOM
+	 *
+	 * @param {array} _attrs array to add further attributes to
+	 */
+	getDetachedAttributes(_attrs)
+	{
+		_attrs.push("value", "class", "statustext");
+	}
+
+	getDetachedNodes()
+	{
+		return [this.span[0]];
+	}
+
+	setDetachedAttributes(_nodes, _values)
+	{
+		// Update the properties
+		this.span = jQuery(_nodes[0]);
+		if (typeof _values["value"] != "undefined")
+		{
+			this.set_value(_values["value"]);
+		}
+		if (typeof _values["class"] != "undefined")
+		{
+			_nodes[0].setAttribute("class", _values["class"]);
+		}
+
+		// Set to original status text if not set for this row
+		this.span.attr('title',_values.statustext ? _values.statustext : this.options.statustext);
+	}
+}
+et2_register_widget(et2_url_ro, ["url_ro", "url-email_ro", "url-phone_ro"]);
+