Fix validation errors were not visible, improve required css

It looks weird if you use et2_required class instead of setting required attribute.

api/js/etemplate/Et2InputWidget/Et2InputWidget.ts

@@ -22,6 +22,8 @@ export declare class Et2InputWidgetInterface
 	readonly : boolean;
 	protected value : string | number | Object;
 
+	public required : boolean;
+
 	public set_value(any) : void;
 
 	public get_value() : any;
@@ -67,6 +69,7 @@ const Et2InputWidgetMixin = <T extends Constructor<LitElement>>(superclass : T)
 				.input-group__container > .input-group__input ::slotted(.form-control) {
 					width: 100%;
 				}
+				
 				`
 			];
 		}
@@ -171,14 +174,11 @@ const Et2InputWidgetMixin = <T extends Constructor<LitElement>>(superclass : T)
 			// required changed, add / remove validator
 			if(changedProperties.has('required'))
 			{
-				// Remove class
-				this.classList.remove("et2_required")
 				// Remove all existing Required validators (avoids duplicates)
 				this.validators = (this.validators || []).filter((validator) => validator instanceof Required)
 				if(this.required)
 				{
 					this.validators.push(new Required());
-					this.classList.add("et2_required");
 				}
 			}
 		}

api/templates/default/etemplate2.css

@@ -82,6 +82,7 @@
     display: flex;
     align-items: center;
     gap: 1em;
+    flex-wrap: wrap;
 }
 
 ::part(form-control-label) {
@@ -93,6 +94,11 @@
     flex: 1 1 auto;
 }
 
+::part(form-control-help-text) {
+    flex-basis: 100%;
+    position: relative;
+}
+
 /* Use .et2-label-fixed class to give fixed label size */
 .et2-label-fixed::part(form-control-label) {
     width: initial;
@@ -1982,7 +1988,7 @@ img.vfsMimeIcon[src*="/etemplate/thumbnail.php"] {
 /**
 * Validation
 */
-.et2_required, [required] {
+.et2_required, .et2_required::part(base), [required]::part(base) {
     background-color: #ffffd0;
 }
 
@@ -2106,6 +2112,11 @@ div.message.floating, lion-validation-feedback[type] {
     left: 0px;
 }
 
+lion-validation-feedback[type] {
+    top: initial;
+    margin-top: calc(-0.5 * var(--sl-input-height-medium));
+}
+
 .message.validation_error, lion-validation-feedback[type="error"] {
     color: var(--error-color);
     border-color: var(--error-color);

pixelegg/css/mobile.css

@@ -603,7 +603,7 @@
 * Validation
 */
   .et2_required,
-  [required] {
+  [required]::part(base) {
     background-color: #FFDD73;
     -webkit-border-top-right-radius: 3px;
     -webkit-border-bottom-right-radius: 3px;
@@ -5590,8 +5590,13 @@ span.overlayContainer img.overlay {
 #egw_fw_topmenu_info_items #topmenu_info_quick_add .chzn-container .chzn-results {
   max-height: none;
 }
-#egw_fw_topmenu_info_items #topmenu_info_quick_add select#quick_add_selectbox {
+#egw_fw_topmenu_info_items #topmenu_info_quick_add #quick_add_selectbox {
-  visibility: hidden;
+  height: 0px;
+  float: left;
+  display: inline-block;
+}
+#egw_fw_topmenu_info_items #topmenu_info_quick_add #quick_add_selectbox::part(form-control-input) {
+  border: none !important;
 }
 #egw_fw_topmenu_info_items img#topmenu_info_error {
   width: 16px;

pixelegg/css/monochrome.css

@@ -583,7 +583,7 @@
 * Validation
 */
   .et2_required,
-  [required] {
+  [required]::part(base) {
     background-color: #FFDD73;
     -webkit-border-top-right-radius: 3px;
     -webkit-border-bottom-right-radius: 3px;
@@ -5570,8 +5570,13 @@ span.overlayContainer img.overlay {
 #egw_fw_topmenu_info_items #topmenu_info_quick_add .chzn-container .chzn-results {
   max-height: none;
 }
-#egw_fw_topmenu_info_items #topmenu_info_quick_add select#quick_add_selectbox {
+#egw_fw_topmenu_info_items #topmenu_info_quick_add #quick_add_selectbox {
-  visibility: hidden;
+  height: 0px;
+  float: left;
+  display: inline-block;
+}
+#egw_fw_topmenu_info_items #topmenu_info_quick_add #quick_add_selectbox::part(form-control-input) {
+  border: none !important;
 }
 #egw_fw_topmenu_info_items img#topmenu_info_error {
   width: 16px;

pixelegg/css/pixelegg.css

@@ -593,7 +593,7 @@
 * Validation
 */
   .et2_required,
-  [required] {
+  [required]::part(base) {
     background-color: #FFDD73;
     -webkit-border-top-right-radius: 3px;
     -webkit-border-bottom-right-radius: 3px;

pixelegg/less/etemplate2.less

@@ -437,7 +437,7 @@ div.et2_file input.et2_file_upload{
 /**
 * Validation
 */
-.et2_required, [required] {
+.et2_required, [required]::part(base) {
     background-color: @egw_color_1_e;
     .border_radius (3px, 3px ,3px ,3px );
 }

pixelegg/mobile/fw_mobile.css

@@ -614,7 +614,7 @@
 * Validation
 */
   .et2_required,
-  [required] {
+  [required]::part(base) {
     background-color: #FFDD73;
     -webkit-border-top-right-radius: 3px;
     -webkit-border-bottom-right-radius: 3px;
@@ -5601,8 +5601,13 @@ span.overlayContainer img.overlay {
 #egw_fw_topmenu_info_items #topmenu_info_quick_add .chzn-container .chzn-results {
   max-height: none;
 }
-#egw_fw_topmenu_info_items #topmenu_info_quick_add select#quick_add_selectbox {
+#egw_fw_topmenu_info_items #topmenu_info_quick_add #quick_add_selectbox {
-  visibility: hidden;
+  height: 0px;
+  float: left;
+  display: inline-block;
+}
+#egw_fw_topmenu_info_items #topmenu_info_quick_add #quick_add_selectbox::part(form-control-input) {
+  border: none !important;
 }
 #egw_fw_topmenu_info_items img#topmenu_info_error {
   width: 16px;