From 68849a2b7965c711d37a692ce025f2da03f79a31 Mon Sep 17 00:00:00 2001
From: nathan <nathangray.bsc+github@gmail.com>
Date: Thu, 21 Jul 2022 13:32:06 -0600
Subject: [PATCH] Use et2-select & et2-textbox in Et2DateDuration for
 consistent styling

---
 api/js/etemplate/Et2Date/Et2DateDuration.ts | 47 +++++++++------------
 1 file changed, 21 insertions(+), 26 deletions(-)

diff --git a/api/js/etemplate/Et2Date/Et2DateDuration.ts b/api/js/etemplate/Et2Date/Et2DateDuration.ts
index 8d1e857247..cce72269c6 100644
--- a/api/js/etemplate/Et2Date/Et2DateDuration.ts
+++ b/api/js/etemplate/Et2Date/Et2DateDuration.ts
@@ -13,7 +13,6 @@ import {css, html, LitElement} from "@lion/core";
 import {Et2InputWidget} from "../Et2InputWidget/Et2InputWidget";
 import {sprintf} from "../../egw_action/egw_action_common";
 import {dateStyles} from "./DateStyles";
-import {cssImage} from "../Et2Widget/Et2Widget";
 import {FormControlMixin} from "@lion/form-core";
 
 export interface formatOptions
@@ -121,31 +120,25 @@ export class Et2DateDuration extends Et2InputWidget(FormControlMixin(LitElement)
 			css`
 			.form-field__group-two {
 				width: 100%;
-			}
-			select {
-				color: var(--input-text-color);
 				border: 1px solid var(--input-border-color);
-				flex: 2 1 auto;
-				
-				-webkit-appearance: none;
-				-moz-appearance: none;
-				margin: 0;
-				background: #fff no-repeat center right;
-				background-image: ${cssImage('arrow_down')};
-				background-size: 8px auto;
-				background-position-x: calc(100% - 8px);
-				text-indent: 5px;
+				border-radius: var(--sl-input-border-radius-medium, 3px);
 			}
-			input {
+			et2-select {
 				color: var(--input-text-color);
-				padding-top: 4px;
-				padding-bottom: 4px;
-			    border: 1px solid var(--input-border-color);
-				border-right: none;
+				border-left: 1px solid var(--input-border-color);
+				flex: 2 1 auto;
+			}
+			et2-select::part(form-control-input) {
+				border: none;
+			}
+			et2-textbox {
 				flex: 1 1 auto;
 				max-width: 4.5em;
 			}
-			input:last-child {
+			et2-textbox::part(base) {
+				border: none;
+			}
+			et2-textbox:not(:last-of-type) {
 				border-right: 1px solid var(--input-border-color);
 			}
 				
@@ -533,8 +526,10 @@ export class Et2DateDuration extends Et2InputWidget(FormControlMixin(LitElement)
 			inputs.push(input);
 		}
 		return html`${inputs.map((input : any) =>
-                html`<input type="number" name=${input.name} min=${input.min} max=${input.max} title=${input.title}
-                            value=${input.value}/>`
+                html`
+                    <et2-textbox part="duration__${input.name}" type="number" class="duration__input" name=${input.name}
+                                 min=${input.min} max=${input.max} title=${input.title}
+                                 value=${input.value}></et2-textbox>`
         )}
 		`;
 	}
@@ -562,14 +557,14 @@ export class Et2DateDuration extends Et2InputWidget(FormControlMixin(LitElement)
 		};
 		// It would be nice to use an et2-select here, but something goes weird with the styling
 		return html`
-            <select>
+            <et2-select value="${this._display.unit}">
                 ${[...this.displayFormat].map((format : string) =>
                         html`
-                            <option value=${format} ?selected=${this._display.unit === format}>
+                            <sl-menu-item value=${format} ?checked=${this._display.unit === format}>
                                 ${this.time_formats[format]}
-                            </option>`
+                            </sl-menu-item>`
                 )}
-            </select>
+            </et2-select>
 		`;
 	}