Implements Et2Details webcomponent widget

api/etemplate.php

@@ -17,7 +17,7 @@ const ADD_ET2_PREFIX_REGEXP = '#<((/?)([vh]?box))(/?|\s[^>]*)>#m';
 const ADD_ET2_PREFIX_LAST_GROUP = 4;
 
 // unconditional of legacy add et2- prefix to this widgets
-const ADD_ET2_PREFIX_LEGACY_REGEXP = '#<(description|searchbox|textbox|label|avatar|lavatar|image|colorpicker|checkbox|url(-email|-phone|-fax)?|vfs-mime|vfs-uid|vfs-gid|link|link-[a-z]+|favorites)\s([^>]+)/>#m';
+const ADD_ET2_PREFIX_LEGACY_REGEXP = '#<(description|details|searchbox|textbox|label|avatar|lavatar|image|colorpicker|checkbox|url(-email|-phone|-fax)?|vfs-mime|vfs-uid|vfs-gid|link|link-[a-z]+|favorites)\s([^>]+)/>#m';
 const ADD_ET2_PREFIX_LEGACY_LAST_GROUP = 3;
 
 // switch evtl. set output-compression off, as we can't calculate a Content-Length header with transparent compression

api/js/etemplate/Layout/Et2Details/Et2Details.ts

@@ -0,0 +1,125 @@
+/**
+ * EGroupware eTemplate2 - Details WebComponent
+ *
+ * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
+ * @package api
+ * @link https://www.egroupware.org
+ * @author Hadi Nategh
+ */
+
+import {Et2Widget} from "../../Et2Widget/Et2Widget";
+import {css} from "@lion/core";
+import {SlDetails} from "@shoelace-style/shoelace";
+import shoelace from "../../Styles/shoelace";
+
+export class Et2Details extends Et2Widget(SlDetails)
+{
+	static get styles()
+	{
+		return [
+			...super.styles,
+			shoelace,
+			css`
+            :host {
+				display: block;
+            }
+            
+			:host([align="right"]) > div {
+				justify-content: flex-end;
+			}
+			:host([align="left"]) > div {
+				justify-content: flex-start;
+			}
+			/* CSS for child elements */
+            ::slotted(*) {
+            	flex: 1 1 auto;
+            }
+            ::slotted(img),::slotted(et2-image) {
+            	/* Stop images from growing.  In general we want them to stay */
+            	flex-grow: 0;
+            }
+            ::slotted([align="left"]) {
+            	margin-right: auto;
+            	order: -1;
+            }
+            ::slotted([align="right"]) {
+            	margin-left: auto;
+            	order: 1;
+            }
+            
+            .details.hoist {
+            	position: relative;
+            }
+            .details.hoist .details__body {
+            	position: absolute;
+            	z-index: var(--sl-z-index-drawer);
+				background: var(--sl-color-neutral-0);
+				box-shadow: var(--sl-shadow-large);
+				width: 100%;
+				border-radius: var(--sl-border-radius-small);
+				border: 1px solid var(--sl-color-neutral-200);
+            }
+            `,
+		];
+	}
+
+	static get properties()
+	{
+		return {
+			...super.properties,
+
+			/**
+			 * Toggle when hover over
+			 */
+			toggleOnHover: {
+				type: Boolean
+			},
+
+			/**
+			 * Makes details content fixed position to break out of the container
+			 */
+			hoist: {
+				type: Boolean
+			}
+		}
+	}
+
+	constructor(...args : any[])
+	{
+		super();
+		this.toggleOnHover = false;
+		this.hoist = false;
+	}
+
+	connectedCallback()
+	{
+		super.connectedCallback();
+
+		this.updateComplete.then(() => {
+			if (this.toggleOnHover) {
+				this.addEventListener("mouseover", this.show);
+				window.document.addEventListener('mouseout', this._mouseOutEvent.bind(this));
+			}
+			if (this.hoist)
+			{
+				this.shadowRoot.querySelector('.details').classList.add('hoist');
+			}
+		});
+	}
+
+	disconnectedCallback()
+	{
+		super.disconnectedCallback();
+		window.document.removeEventListener('mouseout', this._mouseOutEvent);
+	}
+
+	/**
+	 * Handle mouse out event for hiding out details
+	 * @param event
+	 */
+	_mouseOutEvent(event)
+	{
+		if (!this.getDOMNode().contains(event.relatedTarget)) this.hide();
+	}
+}
+customElements.define("et2-details", Et2Details);

api/js/etemplate/etemplate2.ts

@@ -24,6 +24,7 @@ import {et2_tabbox} from "./et2_widget_tabs";
 import '../jsapi/egw_json.js';
 import {egwIsMobile} from "../egw_action/egw_action_common.js";
 import './Layout/Et2Box/Et2Box';
+import './Layout/Et2Details/Et2Details';
 import './Et2Avatar/Et2Avatar';
 import './Et2Button/Et2Button';
 import './Et2Checkbox/Et2Checkbox';