Split textarea off from textbox & start implementing

Splitting the two made things a lot simpler to deal with

api/js/etemplate/Et2Textarea.ts

@@ -0,0 +1,85 @@
+/**
+ * EGroupware eTemplate2 - Textbox widget (WebComponent)
+ *
+ * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
+ * @package etemplate
+ * @subpackage api
+ * @link https://www.egroupware.org
+ * @author Nathan Gray
+ */
+
+
+import {css, html} from "../../../node_modules/@lion/core/index.js"
+import {LionTextarea} from "../../../node_modules/@lion/textarea/index.js"
+import {Et2InputWidget} from "./et2_core_inputWidget";
+import {Et2Widget} from "./Et2Widget";
+
+
+export class Et2Textarea extends Et2InputWidget(Et2Widget(LionTextarea))
+{
+	static get styles()
+	{
+		return [
+			...super.styles,
+			css`
+			:host {
+				display: block;
+				width: 100%;
+				height: 100%;
+            }
+			`,
+		];
+	}
+
+	static get properties()
+	{
+		return {
+			...super.properties,
+			/**
+			 * Specify the width of the text area.
+			 * If not set, it will expand to fill the space available.
+			 */
+			width: {type: String, reflect: true},
+			/**
+			 * Specify the height of the text area.
+			 * If not set, it will expand to fill the space available.
+			 */
+			height: {type: String, reflect: true},
+			onkeypress: Function,
+		}
+	}
+
+	constructor()
+	{
+		super();
+
+		// Unset parent's defaults
+		this.rows = undefined;
+		this.maxRows = undefined;
+	}
+
+	connectedCallback()
+	{
+		super.connectedCallback();
+	}
+
+	set width(value)
+	{
+		if(this._inputNode)
+		{
+			this._inputNode.style.width = value;
+		}
+		this.resizeTextarea();
+	}
+
+	set height(value)
+	{
+		if(this._inputNode)
+		{
+			this._inputNode.style.height = value;
+		}
+		this.resizeTextarea();
+	}
+}
+
+customElements.define("et2-textarea", Et2Textarea);

api/js/etemplate/Et2Textbox.ts

@@ -31,7 +31,7 @@ export class Et2Textbox extends Et2InputWidget(Et2Widget(LionInput))
 	{
 		return {
 			...super.properties,
-			onclick: {type: Function}
+			onkeypress: Function,
 		}
 	}
 
@@ -43,7 +43,6 @@ export class Et2Textbox extends Et2InputWidget(Et2Widget(LionInput))
 	connectedCallback()
 	{
 		super.connectedCallback();
-
 	}
 }
 

api/js/etemplate/etemplate2.ts

@@ -26,6 +26,7 @@ import {egwIsMobile} from "../egw_action/egw_action_common.js";
 import './Et2Box';
 import './Et2Button';
 import './Et2Date';
+import './Et2Textarea';
 import './Et2Textbox';
 /* Include all widget classes here, we only care about them registering, not importing anything*/
 import './et2_widget_vfs'; // Vfs must be first (before et2_widget_file) due to import cycle

api/src/Etemplate/Widget/Textbox.php

@@ -179,4 +179,6 @@ class Textbox extends Etemplate\Widget
 		}
 	}
 }
-Etemplate\Widget::registerWidget(__NAMESPACE__.'\\Textbox', array('et2-textbox','textbox','text','int','integer','float','hidden','colorpicker','hidden'));
+Etemplate\Widget::registerWidget(__NAMESPACE__ . '\\Textbox', array('et2-textarea', 'et2-textbox', 'textbox', 'text',
+																	'int', 'integer', 'float', 'hidden', 'colorpicker',
+																	'hidden'));

infolog/templates/default/edit.xet

@@ -3,7 +3,7 @@
 <!-- $Id$ -->
 <overlay>
 	<template id="infolog.edit.description" template="" lang="" group="0" version="1.6.001">
-		<textbox multiline="true"  id="info_des" no_lang="1" width="99.7%" height="245px"/>
+		<et2-textarea  id="info_des" no_lang="1" width="99.7%" height="245px"/>
 		<checkbox id="clean_history"/>
 	</template>
 	<template id="infolog.edit.links" template="" lang="" group="0" version="1.3.001">

package.json

@@ -51,6 +51,7 @@
     "@lion/input": "^0.15.4",
     "@lion/input-date": "^0.12.6",
     "@lion/input-datepicker": "^0.23.6",
+    "@lion/textarea": "^0.13.4",
     "jquery-ui-dist": "^1.12.1",
     "jquery-ui-themes": "^1.12.0",
     "jquery-ui-timepicker-addon": "^1.6.3",