new web-component et2-groupbox based on et2-details

also modernized et2-details code a bit using decorators

api/etemplate.php

@@ -198,6 +198,19 @@ function send_template()
 			return "<et2-details" . stringAttrs($attrs) . '>' . $matches[2] . "</et2-details>";
 		}, $str);
 
+		// Change groupbox <caption label="..."/> --> summary attribute
+		$str = preg_replace_callback('#<groupbox([^>]*?)>(.*?)</groupbox>#su', static function ($matches)
+		{
+			$attrs = parseAttrs($matches[1]);
+
+			if (preg_match('#^\n?\s*<caption([^>]*?)/?>(.*?)(</caption>)?#su', $matches[2], $caption))
+			{
+				$attrs['summary'] = parseAttrs($caption[1])['label'];
+				$matches[2] = str_replace($caption[0], '', $matches[2]);
+			}
+			return "<et2-groupbox" . stringAttrs($attrs) . '>' . $matches[2] . "</et2-groupbox>";
+		}, $str);
+
 		// Change splitter dockside -> primary + vertical
 		$str = preg_replace_callback('#<split([^>]*?)>(.*?)</split>#su', static function ($matches)
 		{

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

@@ -11,7 +11,10 @@ import {Et2Widget} from "../../Et2Widget/Et2Widget";
 import {css} from "lit";
 import {SlDetails} from "@shoelace-style/shoelace";
 import shoelace from "../../Styles/shoelace";
+import {property} from "lit/decorators/property.js";
+import {customElement} from "lit/decorators/custom-element.js";
 
+@customElement("et2-details")
 export class Et2Details extends Et2Widget(SlDetails)
 {
 	static get styles()
@@ -38,7 +41,7 @@ export class Et2Details extends Et2Widget(SlDetails)
             	/* Stop images from growing.  In general we want them to stay */
             	flex-grow: 0;
             }
-            ::slotted([align="left"]) {
+			::slotted([align="left"]) {
             	margin-right: auto;
             	order: -1;
             }
@@ -47,68 +50,57 @@ export class Et2Details extends Et2Widget(SlDetails)
             	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%;
-                min-width: fit-content;
-                border-radius: var(--sl-border-radius-small);
-                border: 1px solid var(--sl-color-neutral-200);
-                max-height: 15em;
-                overflow-y: auto;
-              }
-              .details.hoist .details__body.overlaySummaryLeftAligned {
+			.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%;
+				min-width: fit-content;
+				border-radius: var(--sl-border-radius-small);
+				border: 1px solid var(--sl-color-neutral-200);
+				max-height: 15em;
+				overflow-y: auto;
+			}
+			.details.hoist .details__body.overlaySummaryLeftAligned {
 				top: 0;
 				left: 2em;
 				width: calc(100% - 2em);
-			  }
-              .details.hoist .details__body.overlaySummaryRightAligned {
-                top: 0;
-              }
+			}
+			.details.hoist .details__body.overlaySummaryRightAligned {
+				top: 0;
+			}
 			`,
 		];
 	}
 
-	static get properties()
-	{
-		return {
-			...super.properties,
+	/**
+	 * Toggle when hover over
+	 */
+	@property({type: Boolean})
+	toggleOnHover = false;
 
-			/**
-			 * Toggle when hover over
-			 */
-			toggleOnHover: {
-				type: Boolean
-			},
+	/**
+	 * Makes details content fixed position to break out of the container
+	 */
+	@property({type: Boolean})
+	hoist = false;
 
-			/**
-			 * Makes details content fixed position to break out of the container
-			 */
-			hoist: {
-				type: Boolean
-			},
+	/**
+	 * set toggle alignment either to left or right. Default is right alignment.
+	 */
+	@property({type: String})
+	toggleAlign : "right" | "left" = "right";
 
-			/**
-			 * set toggle alignment either to left or right. Default is right alignment.
-			 */
-			toggleAlign: {
-				type: String
-			},
-
-			/**
-			 * Overlay summary container with the details container when in open state
-			 */
-			overlaySummaryOnOpen: {
-				type: Boolean
-			}
-		}
-	}
+	/**
+	 * Overlay summary container with the details container when in open state
+	 */
+	@property({type: Boolean})
+	overlaySummaryOnOpen = false;
 
 	/**
 	 * List of properties that get translated
@@ -123,16 +115,6 @@ export class Et2Details extends Et2Widget(SlDetails)
 		}
 	}
 
-
-	constructor(...args : any[])
-	{
-		super();
-		this.toggleOnHover = false;
-		this.toggleAlign = 'right';
-		this.hoist = false;
-		this.overlaySummaryOnOpen = false;
-	}
-
 	connectedCallback()
 	{
 		super.connectedCallback();
@@ -172,5 +154,4 @@ export class Et2Details extends Et2Widget(SlDetails)
 	{
 		if (!this.getDOMNode().contains(event.relatedTarget)) this.hide();
 	}
-}
-customElements.define("et2-details", Et2Details);
+}

api/js/etemplate/Layout/Et2Groupbox/Et2Groupbox.ts

@@ -0,0 +1,60 @@
+/**
+ * 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 {Et2Details} from "../Et2Details/Et2Details";
+import {css} from "lit";
+import shoelace from "../../Styles/shoelace";
+import {property} from "lit/decorators/property.js";
+import {customElement} from "lit/decorators/custom-element.js";
+
+/**
+ * Groupbox shows content in a box with a summary
+ */
+@customElement("et2-groupbox")
+export class Et2Groupbox extends Et2Details
+{
+	static get styles()
+	{
+		return [
+			...super.styles,
+			shoelace,
+			css`
+			slot[name="collapse-icon"], slot[name="expand-icon"] {
+				display: none;
+			}
+			details {
+				position: relative;
+				padding-top: .5rem;
+				margin: 2px;
+				margin-top: .5rem;
+			}
+			summary {
+                position: absolute;
+                pointer-events: none;
+				width: fit-content;
+				line-height: 0;
+				top: -.5rem;
+				left: .5rem;
+				background: var(--sl-color-neutral-0);
+			}
+			.details {
+				border-color: var(--sl-color-neutral-500);
+				border-width: 2px;
+			}
+			`,
+		];
+	}
+
+	constructor()
+	{
+		super();
+		// groupbox is always open
+		this.open = true;
+	}
+}

api/js/etemplate/et2_widget_groupbox.ts

@@ -1,71 +0,0 @@
-/**
- * EGroupware eTemplate2 - JS Groupbox object
- *
- * @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
- * @copyright Nathan Gray 2012
- */
-
-/*egw:uses
-	et2_core_baseWidget;
-*/
-
-import {et2_register_widget, WidgetConfig} from "./et2_core_widget";
-import {et2_baseWidget} from "./et2_core_baseWidget";
-import {ClassWithAttributes} from "./et2_core_inheritance";
-
-/**
- * Class which implements the groupbox tag
- *
- * @augments et2_baseWidget
- */
-export class et2_groupbox extends et2_baseWidget
-{
-	/**
-	 * Constructor
-	 *
-	 * @memberOf et2_groupbox
-	 */
-	constructor(_parent, _attrs? : WidgetConfig, _child? : object)
-	{
-		// Call the inherited constructor
-		super(_parent, _attrs, ClassWithAttributes.extendAttributes(et2_groupbox._attributes, _child || {}));
-
-		this.setDOMNode(document.createElement("fieldset"));
-	}
-}
-et2_register_widget(et2_groupbox, ["groupbox"]);
-
-/**
- * @augments et2_baseWidget
- */
-export class et2_groupbox_legend extends et2_baseWidget
-{
-	static readonly _attributes : any = {
-		"label": {
-			"name": "Label",
-			"type": "string",
-			"default": "",
-			"description": "Label for group box",
-			"translate" : true
-		}
-	};
-
-	/**
-	 * Constructor
-	 *
-	 * @memberOf et2_groupbox_legend
-	 */
-	constructor(_parent, _attrs? : WidgetConfig, _child? : object)
-	{
-		// Call the inherited constructor
-		super(_parent, _attrs, ClassWithAttributes.extendAttributes(et2_groupbox_legend._attributes, _child || {}));
-		let legend = jQuery(document.createElement("legend")).text(this.options.label);
-		this.setDOMNode(legend[0]);
-	}
-}
-et2_register_widget(et2_groupbox_legend, ["caption"]);
-

api/js/etemplate/etemplate2.ts

@@ -24,6 +24,7 @@ import '../jsapi/egw_json.js';
 import {egwIsMobile} from "../egw_action/egw_action_common";
 import './Layout/Et2Box/Et2Box';
 import './Layout/Et2Details/Et2Details';
+import './Layout/Et2Groupbox/Et2Groupbox';
 import './Layout/Et2Tabs/Et2Tab';
 import './Layout/Et2Tabs/Et2Tabs';
 import './Layout/Et2Tabs/Et2TabPanel';
@@ -120,7 +121,6 @@ import './et2_widget_template';
 import './et2_widget_grid';
 import './et2_widget_box';
 import './et2_widget_hbox';
-import './et2_widget_groupbox';
 import './et2_widget_button';
 import './et2_widget_entry';
 import './et2_widget_textbox';

doc/etemplate2-rng.php

@@ -94,6 +94,9 @@ $overwrites = [
 	'et2-details' => [
 		'.children' => 'Widgets',
 	],
+	'et2-groupbox' => [
+		'.children' => 'Widgets',
+	],
 	'et2-split' => [
 		'.children' => 'Widgets',
 	],

doc/etemplate2/etemplate2.0.dtd

@@ -21,27 +21,27 @@
 ==========================================================
 -->
 
-<!ENTITY % Widgets "template|grid|groupbox|caption|entry|contact-value|contact-account|contact-template|infolog-value
+<!ENTITY % Widgets "template|grid|caption|entry|contact-value|contact-account|contact-template|infolog-value
                     |tracker-value|records-value|hidden|radio|radiogroup|diff|styles|customfields|customfields-list|html
-                    |htmlarea|toolbar|historylog|hrule|file|progress|vfs|vfs-name|vfs-size|vfs-mode|vfs-upload|video
-                    |audio|barcode|itempicker|script|countdown|customfields-types|nextmatch|nextmatch-header
+                    |htmlarea|toolbar|historylog|hrule|file|progress|vfs|vfs-size|vfs-mode|vfs-upload|video|audio
+                    |barcode|itempicker|script|countdown|customfields-types|nextmatch|nextmatch-header
                     |nextmatch-customfields|nextmatch-sortheader|et2-nextmatch-header-account|et2-appicon|et2-avatar
-                    |et2-avatar-group|et2-box|et2-button|et2-button-icon|et2-button-scroll|et2-button-timestamp
-                    |et2-category-tag|et2-checkbox|et2-colorpicker|et2-nextmatch-columnselection
+                    |et2-avatar-group|et2-box|et2-button|et2-button-copy|et2-button-icon|et2-button-scroll
+                    |et2-button-timestamp|et2-category-tag|et2-checkbox|et2-colorpicker|et2-nextmatch-columnselection
                     |et2-nextmatch-header-custom|et2-date|et2-date-duration|et2-date-range|et2-date-since|et2-date-time
                     |et2-date-timeonly|et2-date-time-today|et2-description|et2-description-expose|et2-details|et2-dialog
                     |et2-dropdown-button|et2-email|et2-email-tag|et2-nextmatch-header-entry|et2-favorites
-                    |et2-favorites-menu|et2-nextmatch-header-filter|et2-hbox|et2-iframe|et2-image|et2-image-expose
-                    |et2-lavatar|et2-label|et2-link|et2-link-add|et2-link-apps|et2-link-entry|et2-link-list
-                    |et2-link-paste-dialog|et2-link-search|et2-link-string|et2-link-to|et2-listbox|et2-merge-dialog
-                    |et2-number|et2-password|et2-portlet|et2-searchbox|et2-select|et2-select-access|et2-select-account
-                    |et2-select-app|et2-select-bitwise|et2-select-bool|et2-select-cat|et2-select-country|et2-select-day
-                    |et2-select-dow|et2-select-hour|et2-select-lang|et2-select-month|et2-select-number
-                    |et2-select-percent|et2-select-priority|et2-select-state|et2-select-tab|et2-select-thumbnail
-                    |et2-select-timezone|et2-select-year|et2-spinner|et2-split|et2-switch|et2-tabbox|et2-tag
-                    |et2-textarea|et2-textbox|et2-thumbnail-tag|et2-tree|et2-tree-dropdown|et2-tree-cat|et2-url
-                    |et2-url-email|et2-url-fax|et2-url-phone|et2-vbox|et2-vfs-gid|et2-vfs-mime|et2-vfs-path
-                    |et2-vfs-select|et2-vfs-select-dialog|et2-vfs-select-row|et2-vfs-uid">
+                    |et2-favorites-menu|et2-nextmatch-header-filter|et2-groupbox|et2-hbox|et2-iframe|et2-image
+                    |et2-image-expose|et2-lavatar|et2-label|et2-link|et2-link-add|et2-link-apps|et2-link-entry
+                    |et2-link-list|et2-link-paste-dialog|et2-link-search|et2-link-string|et2-link-to|et2-listbox
+                    |et2-merge-dialog|et2-number|et2-password|et2-portlet|et2-searchbox|et2-select|et2-select-access
+                    |et2-select-account|et2-select-app|et2-select-bitwise|et2-select-bool|et2-select-cat
+                    |et2-select-country|et2-select-day|et2-select-dow|et2-select-hour|et2-select-lang|et2-select-month
+                    |et2-select-number|et2-select-percent|et2-select-priority|et2-select-state|et2-select-tab
+                    |et2-select-thumbnail|et2-select-timezone|et2-select-year|et2-spinner|et2-split|et2-switch
+                    |et2-tabbox|et2-tag|et2-textarea|et2-textbox|et2-thumbnail-tag|et2-tree|et2-tree-dropdown
+                    |et2-tree-cat|et2-url|et2-url-email|et2-url-fax|et2-url-phone|et2-vbox|et2-vfs-gid|et2-vfs-mime
+                    |et2-vfs-name|et2-vfs-path|et2-vfs-select|et2-vfs-select-dialog|et2-vfs-select-row|et2-vfs-uid">
 
 <!ELEMENT overlay (template)*>
 
@@ -128,31 +128,6 @@
     readonly CDATA #IMPLIED
     attributes CDATA #IMPLIED>
 
-<!ELEMENT groupbox (%Widgets;)*>
-
-<!ATTLIST groupbox
-    statustext CDATA #IMPLIED
-    statustext_html (false|true|1) 'false'
-    align CDATA 'left'
-    onclick CDATA #IMPLIED
-    disabled (false|true|1) 'false'
-    width CDATA #IMPLIED
-    height CDATA #IMPLIED
-    class CDATA #IMPLIED
-    overflow CDATA #IMPLIED
-    parent_node CDATA #IMPLIED
-    actions CDATA #IMPLIED
-    default_execute CDATA #IMPLIED
-    resize_ratio CDATA #IMPLIED
-    data CDATA #IMPLIED
-    background CDATA #IMPLIED
-    id CDATA #IMPLIED
-    no_lang (false|true|1) 'false'
-    span CDATA #IMPLIED
-    type CDATA #IMPLIED
-    readonly CDATA #IMPLIED
-    attributes CDATA #IMPLIED>
-
 <!ELEMENT caption EMPTY>
 
 <!ATTLIST caption
@@ -919,46 +894,6 @@
     readonly CDATA #IMPLIED
     attributes CDATA #IMPLIED>
 
-<!ELEMENT vfs-name EMPTY>
-
-<!ATTLIST vfs-name
-    multiline (false|true|1) 'false'
-    size CDATA #IMPLIED
-    maxlength CDATA #IMPLIED
-    blur CDATA #IMPLIED
-    rows CDATA #IMPLIED
-    cols CDATA #IMPLIED
-    validator CDATA #IMPLIED
-    onkeypress CDATA #IMPLIED
-    needed (false|true|1) 'false'
-    onchange CDATA #IMPLIED
-    onfocus CDATA #IMPLIED
-    validation_error CDATA #IMPLIED
-    tabindex CDATA #IMPLIED
-    readonly (false|true|1) 'false'
-    label CDATA #IMPLIED
-    value CDATA #IMPLIED
-    statustext CDATA #IMPLIED
-    statustext_html (false|true|1) 'false'
-    align CDATA 'left'
-    onclick CDATA #IMPLIED
-    disabled (false|true|1) 'false'
-    width CDATA #IMPLIED
-    height CDATA #IMPLIED
-    class CDATA #IMPLIED
-    overflow CDATA #IMPLIED
-    parent_node CDATA #IMPLIED
-    actions CDATA #IMPLIED
-    default_execute CDATA #IMPLIED
-    resize_ratio CDATA #IMPLIED
-    data CDATA #IMPLIED
-    background CDATA #IMPLIED
-    id CDATA #IMPLIED
-    no_lang (false|true|1) 'false'
-    span CDATA #IMPLIED
-    type CDATA #IMPLIED
-    attributes CDATA #IMPLIED>
-
 <!ELEMENT vfs-size EMPTY>
 
 <!ATTLIST vfs-size
@@ -1504,6 +1439,35 @@
     variant (default|primary|success|neutral|warning|danger|text) #IMPLIED
     width CDATA #IMPLIED>
 
+<!ELEMENT et2-button-copy EMPTY>
+
+<!ATTLIST et2-button-copy
+    accesskey CDATA #IMPLIED
+    align CDATA #IMPLIED
+    class CDATA #IMPLIED
+    copy-label CDATA #IMPLIED
+    data CDATA #IMPLIED
+    disabled (false|true|1) #IMPLIED
+    error-label CDATA #IMPLIED
+    feedback-duration CDATA #IMPLIED
+    from CDATA #IMPLIED
+    height CDATA #IMPLIED
+    hidden (false|true|1) #IMPLIED
+    hoist (false|true|1) #IMPLIED
+    id CDATA #IMPLIED
+    label CDATA #IMPLIED
+    noLang (false|true|1) #IMPLIED
+    onclick CDATA #IMPLIED
+    parentId CDATA #IMPLIED
+    slot CDATA #IMPLIED
+    span (all|2|3|4) #IMPLIED
+    statustext CDATA #IMPLIED
+    style CDATA #IMPLIED
+    success-label CDATA #IMPLIED
+    tooltip-placement (top|right|bottom|left) #IMPLIED
+    value CDATA #IMPLIED
+    width CDATA #IMPLIED>
+
 <!ELEMENT et2-button-icon EMPTY>
 
 <!ATTLIST et2-button-icon
@@ -1667,7 +1631,7 @@
     parentId CDATA #IMPLIED
     readonly (false|true|1) #IMPLIED
     required (false|true|1) #IMPLIED
-    selectedValue CDATA #IMPLIED
+    selectedValue (false|true|1) #IMPLIED
     size (small|medium|large) #IMPLIED
     slot CDATA #IMPLIED
     span (all|2|3|4) #IMPLIED
@@ -1675,7 +1639,7 @@
     style CDATA #IMPLIED
     tabindex CDATA #IMPLIED
     title CDATA #IMPLIED
-    unselectedValue CDATA #IMPLIED
+    unselectedValue (false|true|1) #IMPLIED
     value CDATA #IMPLIED
     width CDATA #IMPLIED>
 
@@ -1855,7 +1819,6 @@
     slot CDATA #IMPLIED
     span (all|2|3|4) #IMPLIED
     statustext CDATA #IMPLIED
-    step CDATA #IMPLIED
     style CDATA #IMPLIED
     tabindex CDATA #IMPLIED
     width CDATA #IMPLIED>
@@ -2362,6 +2325,33 @@
     value CDATA #IMPLIED
     width CDATA #IMPLIED>
 
+<!ELEMENT et2-groupbox (%Widgets;)+>
+
+<!ATTLIST et2-groupbox
+    accesskey CDATA #IMPLIED
+    align CDATA #IMPLIED
+    class CDATA #IMPLIED
+    data CDATA #IMPLIED
+    disabled (false|true|1) #IMPLIED
+    height CDATA #IMPLIED
+    hidden (false|true|1) #IMPLIED
+    hoist (false|true|1) #IMPLIED
+    id CDATA #IMPLIED
+    label CDATA #IMPLIED
+    noLang (false|true|1) #IMPLIED
+    onclick CDATA #IMPLIED
+    open (false|true|1) #IMPLIED
+    overlaySummaryOnOpen (false|true|1) #IMPLIED
+    parentId CDATA #IMPLIED
+    slot CDATA #IMPLIED
+    span (all|2|3|4) #IMPLIED
+    statustext CDATA #IMPLIED
+    style CDATA #IMPLIED
+    summary CDATA #IMPLIED
+    toggleAlign CDATA #IMPLIED
+    toggleOnHover (false|true|1) #IMPLIED
+    width CDATA #IMPLIED>
+
 <!ELEMENT et2-hbox (%Widgets;)+>
 
 <!ATTLIST et2-hbox
@@ -2908,6 +2898,7 @@
     class CDATA #IMPLIED
     clearable (false|true|1) #IMPLIED
     data CDATA #IMPLIED
+    decimalSeparator CDATA #IMPLIED
     disabled (false|true|1) #IMPLIED
     enterkeyhint (enter|done|go|next|previous|search|send) #IMPLIED
     filled (false|true|1) #IMPLIED
@@ -2919,6 +2910,7 @@
     id CDATA #IMPLIED
     inputmode (none|text|decimal|numeric|tel|search|email|url) #IMPLIED
     label CDATA #IMPLIED
+    mask CDATA #IMPLIED
     max CDATA #IMPLIED
     maxlength CDATA #IMPLIED
     min CDATA #IMPLIED
@@ -2936,6 +2928,7 @@
     pill (false|true|1) #IMPLIED
     placeholder CDATA #IMPLIED
     precision CDATA #IMPLIED
+    prefix CDATA #IMPLIED
     readonly (false|true|1) #IMPLIED
     required (false|true|1) #IMPLIED
     size (small|medium|large) #IMPLIED
@@ -2945,7 +2938,9 @@
     statustext CDATA #IMPLIED
     step CDATA #IMPLIED
     style CDATA #IMPLIED
+    suffix CDATA #IMPLIED
     tabindex CDATA #IMPLIED
+    thousandsSeparator CDATA #IMPLIED
     title CDATA #IMPLIED
     type CDATA #IMPLIED
     validator CDATA #IMPLIED
@@ -2977,6 +2972,7 @@
     id CDATA #IMPLIED
     inputmode (none|text|decimal|numeric|tel|search|email|url) #IMPLIED
     label CDATA #IMPLIED
+    mask CDATA #IMPLIED
     max CDATA #IMPLIED
     maxlength CDATA #IMPLIED
     min CDATA #IMPLIED
@@ -3063,6 +3059,7 @@
     id CDATA #IMPLIED
     inputmode (none|text|decimal|numeric|tel|search|email|url) #IMPLIED
     label CDATA #IMPLIED
+    mask CDATA #IMPLIED
     max CDATA #IMPLIED
     maxlength CDATA #IMPLIED
     min CDATA #IMPLIED
@@ -3226,6 +3223,7 @@
     accesskey CDATA #IMPLIED
     align CDATA #IMPLIED
     allowFreeEntries (false|true|1) #IMPLIED
+    apps CDATA #IMPLIED
     ariaDescription CDATA #IMPLIED
     ariaLabel CDATA #IMPLIED
     autocomplete CDATA #IMPLIED
@@ -3814,6 +3812,7 @@
     accesskey CDATA #IMPLIED
     align CDATA #IMPLIED
     allowFreeEntries (false|true|1) #IMPLIED
+    apps CDATA #IMPLIED
     ariaDescription CDATA #IMPLIED
     ariaLabel CDATA #IMPLIED
     autocomplete CDATA #IMPLIED
@@ -4208,6 +4207,7 @@
     id CDATA #IMPLIED
     inputmode (none|text|decimal|numeric|tel|search|email|url) #IMPLIED
     label CDATA #IMPLIED
+    mask CDATA #IMPLIED
     max CDATA #IMPLIED
     maxlength CDATA #IMPLIED
     min CDATA #IMPLIED
@@ -4413,6 +4413,7 @@
     id CDATA #IMPLIED
     inputmode (none|text|decimal|numeric|tel|search|email|url) #IMPLIED
     label CDATA #IMPLIED
+    mask CDATA #IMPLIED
     max CDATA #IMPLIED
     maxlength CDATA #IMPLIED
     min CDATA #IMPLIED
@@ -4472,6 +4473,7 @@
     id CDATA #IMPLIED
     inputmode (none|text|decimal|numeric|tel|search|email|url) #IMPLIED
     label CDATA #IMPLIED
+    mask CDATA #IMPLIED
     max CDATA #IMPLIED
     maxlength CDATA #IMPLIED
     min CDATA #IMPLIED
@@ -4529,6 +4531,7 @@
     id CDATA #IMPLIED
     inputmode (none|text|decimal|numeric|tel|search|email|url) #IMPLIED
     label CDATA #IMPLIED
+    mask CDATA #IMPLIED
     max CDATA #IMPLIED
     maxlength CDATA #IMPLIED
     min CDATA #IMPLIED
@@ -4586,6 +4589,7 @@
     id CDATA #IMPLIED
     inputmode (none|text|decimal|numeric|tel|search|email|url) #IMPLIED
     label CDATA #IMPLIED
+    mask CDATA #IMPLIED
     max CDATA #IMPLIED
     maxlength CDATA #IMPLIED
     min CDATA #IMPLIED
@@ -4679,6 +4683,64 @@
     value CDATA #IMPLIED
     width CDATA #IMPLIED>
 
+<!ELEMENT et2-vfs-name EMPTY>
+
+<!ATTLIST et2-vfs-name
+    accesskey CDATA #IMPLIED
+    align CDATA #IMPLIED
+    ariaDescription CDATA #IMPLIED
+    ariaLabel CDATA #IMPLIED
+    autocapitalize (off|none|on|sentences|words|characters) #IMPLIED
+    autocomplete CDATA #IMPLIED
+    autocorrect (off|on) #IMPLIED
+    autofocus (false|true|1) #IMPLIED
+    class CDATA #IMPLIED
+    clearable (false|true|1) #IMPLIED
+    data CDATA #IMPLIED
+    disabled (false|true|1) #IMPLIED
+    enterkeyhint (enter|done|go|next|previous|search|send) #IMPLIED
+    filled (false|true|1) #IMPLIED
+    form CDATA #IMPLIED
+    height CDATA #IMPLIED
+    help-text CDATA #IMPLIED
+    helpText CDATA #IMPLIED
+    hidden (false|true|1) #IMPLIED
+    id CDATA #IMPLIED
+    inputmode (none|text|decimal|numeric|tel|search|email|url) #IMPLIED
+    label CDATA #IMPLIED
+    mask CDATA #IMPLIED
+    max CDATA #IMPLIED
+    maxlength CDATA #IMPLIED
+    min CDATA #IMPLIED
+    minlength CDATA #IMPLIED
+    name CDATA #IMPLIED
+    no-spin-buttons (false|true|1) #IMPLIED
+    noLang (false|true|1) #IMPLIED
+    onchange CDATA #IMPLIED
+    onclick CDATA #IMPLIED
+    onkeypress CDATA #IMPLIED
+    parentId CDATA #IMPLIED
+    password-toggle (false|true|1) #IMPLIED
+    password-visible (false|true|1) #IMPLIED
+    pattern CDATA #IMPLIED
+    pill (false|true|1) #IMPLIED
+    placeholder CDATA #IMPLIED
+    readonly (false|true|1) #IMPLIED
+    required (false|true|1) #IMPLIED
+    size (small|medium|large) #IMPLIED
+    slot CDATA #IMPLIED
+    span (all|2|3|4) #IMPLIED
+    spellcheck (false|true|1) #IMPLIED
+    statustext CDATA #IMPLIED
+    step CDATA #IMPLIED
+    style CDATA #IMPLIED
+    tabindex CDATA #IMPLIED
+    title CDATA #IMPLIED
+    type CDATA #IMPLIED
+    validator CDATA #IMPLIED
+    value CDATA #IMPLIED
+    width CDATA #IMPLIED>
+
 <!ELEMENT et2-vfs-path EMPTY>
 
 <!ATTLIST et2-vfs-path