From ad82ea8faf01715d2cf43f6c8d2bf38462a9fd99 Mon Sep 17 00:00:00 2001
From: nathan <nathangray.bsc+github@gmail.com>
Date: Mon, 11 Jul 2022 17:27:17 -0600
Subject: [PATCH] Et2Select layout improvements - Added RowLimitedMixin to
 limit rows - when multiple=true tags take full width by default, but
 intelligently resize - No longer showing search icon - Move Et2EmailTag add /
 CRM button to left of remove button

---
 api/js/etemplate/Et2Select/Et2Select.ts       |  9 +++-
 .../Et2Select/Et2WidgetWithSelectMixin.ts     |  5 ++
 api/js/etemplate/Et2Select/SearchMixin.ts     |  2 +-
 api/js/etemplate/Et2Select/Tag/Et2EmailTag.ts |  3 ++
 api/js/etemplate/Et2Select/Tag/Et2Tag.ts      |  4 ++
 api/js/etemplate/Layout/RowLimitedMixin.ts    | 49 +++++++++++++++++++
 api/js/etemplate/etemplate2.ts                |  1 +
 7 files changed, 70 insertions(+), 3 deletions(-)
 create mode 100644 api/js/etemplate/Layout/RowLimitedMixin.ts

diff --git a/api/js/etemplate/Et2Select/Et2Select.ts b/api/js/etemplate/Et2Select/Et2Select.ts
index 67d42ee333..585bf0617f 100644
--- a/api/js/etemplate/Et2Select/Et2Select.ts
+++ b/api/js/etemplate/Et2Select/Et2Select.ts
@@ -17,9 +17,10 @@ import shoelace from "../Styles/shoelace";
 import {Et2WithSearchMixin} from "./SearchMixin";
 import {Et2Tag} from "./Tag/Et2Tag";
 import {LionValidationFeedback} from "@lion/form-core";
+import {RowLimitedMixin} from "../Layout/RowLimitedMixin";
 
 // export Et2WidgetWithSelect which is used as type in other modules
-export class Et2WidgetWithSelect extends Et2widgetWithSelectMixin(SlSelect)
+export class Et2WidgetWithSelect extends RowLimitedMixin(Et2widgetWithSelectMixin(SlSelect))
 {
 };
 
@@ -94,11 +95,15 @@ export class Et2Select extends Et2WithSearchMixin(Et2WidgetWithSelect)
 			/* Maximum height + scrollbar on tags (+ other styling) */
 			.select__tags {
 				margin-left: 0px;
-				max-height: 5em;
+				max-height: initial;
 				overflow-y: auto;
 				
+				flex: 1 1 auto;
 				gap: 0.1rem 0.5rem;
 			}
+			:host([rows]) .select__tags {
+				max-height: calc(var(--rows, 5) * 1.3rem);
+			}
 			/* Keep overflow tag right-aligned.  It's the only sl-tag. */
 			 .select__tags sl-tag {
 				margin-left: auto;
diff --git a/api/js/etemplate/Et2Select/Et2WidgetWithSelectMixin.ts b/api/js/etemplate/Et2Select/Et2WidgetWithSelectMixin.ts
index 9bf8fa5fa9..1f958417ad 100644
--- a/api/js/etemplate/Et2Select/Et2WidgetWithSelectMixin.ts
+++ b/api/js/etemplate/Et2Select/Et2WidgetWithSelectMixin.ts
@@ -79,6 +79,11 @@ export const Et2widgetWithSelectMixin = <T extends Constructor<LitElement>>(supe
 				 * <option/> children, or using widget.select_options = SelectOption[]
 				 */
 				select_options: {type: Object, noAccessor: true},
+
+				/**
+				 * Limit size
+				 */
+				rows: {type: Number, noAccessor: true, reflect: true}
 			}
 		}
 
diff --git a/api/js/etemplate/Et2Select/SearchMixin.ts b/api/js/etemplate/Et2Select/SearchMixin.ts
index 7a7e1ea95b..a519860cfe 100644
--- a/api/js/etemplate/Et2Select/SearchMixin.ts
+++ b/api/js/etemplate/Et2Select/SearchMixin.ts
@@ -127,7 +127,7 @@ export const Et2WithSearchMixin = <T extends Constructor<LitElement>>(superclass
 					display:none;
 				}
 				:host([search]:not([readonly])) ::slotted(sl-icon[slot="suffix"]) {
-					display: initial;
+					display: hidden;
 				}
 				
 				/* Move the widget border */
diff --git a/api/js/etemplate/Et2Select/Tag/Et2EmailTag.ts b/api/js/etemplate/Et2Select/Tag/Et2EmailTag.ts
index 1f9ca75ddd..0787d0f5c3 100644
--- a/api/js/etemplate/Et2Select/Tag/Et2EmailTag.ts
+++ b/api/js/etemplate/Et2Select/Tag/Et2EmailTag.ts
@@ -59,6 +59,9 @@ export class Et2EmailTag extends Et2Tag
 			.tag__prefix.contact_plus_contact {
 				background-image: ${cssImage("contact")}
 			}
+			.tag__remove {
+				order: 3;
+			}
 		`];
 	}
 
diff --git a/api/js/etemplate/Et2Select/Tag/Et2Tag.ts b/api/js/etemplate/Et2Select/Tag/Et2Tag.ts
index f364ad44d8..3f15233ae8 100644
--- a/api/js/etemplate/Et2Select/Tag/Et2Tag.ts
+++ b/api/js/etemplate/Et2Select/Tag/Et2Tag.ts
@@ -21,6 +21,9 @@ export class Et2Tag extends Et2Widget(SlTag)
 		return [
 			super.styles,
 			shoelace, css`
+		:host {
+			flex: 1 1 auto;
+		}
 		.tag--pill {
 			overflow: hidden;
 		}
@@ -31,6 +34,7 @@ export class Et2Tag extends Et2Widget(SlTag)
 		}
 		.tag__content {
 			padding: 0px 0.2rem;
+			flex: 1 1 auto;
 		}
 		/* Avoid button getting truncated by right side of button */
 		.tag__remove {
diff --git a/api/js/etemplate/Layout/RowLimitedMixin.ts b/api/js/etemplate/Layout/RowLimitedMixin.ts
new file mode 100644
index 0000000000..88e559d510
--- /dev/null
+++ b/api/js/etemplate/Layout/RowLimitedMixin.ts
@@ -0,0 +1,49 @@
+// Export the Interface for TypeScript
+import {LitElement} from "@lion/core";
+
+type Constructor<T = {}> = new (...args : any[]) => T;
+
+/**
+ * Mixin to support widgets that have a set number of rows.
+ * Whether that's a maximum or a fixed size, implementation is up to the widget.
+ * Set rows=0 to clear.
+ *
+ * To implement in a webcomponent set height or max-height based on the --rows CSS variable:
+ *  max-height: calc(var(--rows, 5) * 1.3rem);
+ * @param {T} superclass
+ * @constructor
+ */
+export const RowLimitedMixin = <T extends Constructor<LitElement>>(superclass : T) =>
+{
+	class RowLimit extends superclass
+	{
+		static get properties()
+		{
+			return {
+				...super.properties,
+			}
+		}
+
+		set rows(row_count : string | number)
+		{
+			if(isNaN(Number(row_count)) || !row_count)
+			{
+				this.style.removeProperty("--rows");
+				this.removeAttribute("rows");
+			}
+			else
+			{
+				this.style.setProperty("--rows", row_count);
+				this.setAttribute("rows", row_count)
+			}
+		}
+
+		get rows() : string | number
+		{
+			return this.style.getPropertyValue("--rows");
+		}
+
+	}
+
+	return RowLimit;// as unknown as superclass & T;
+}
\ No newline at end of file
diff --git a/api/js/etemplate/etemplate2.ts b/api/js/etemplate/etemplate2.ts
index 11cc4a426a..bceb1b3e72 100644
--- a/api/js/etemplate/etemplate2.ts
+++ b/api/js/etemplate/etemplate2.ts
@@ -80,6 +80,7 @@ import './Et2Url/Et2UrlPhoneReadonly';
 import './Et2Url/Et2UrlFax';
 import './Et2Url/Et2UrlFaxReadonly';
 import "./Layout/Et2Split/Et2Split";
+import "./Layout/RowLimitedMixin";
 import "./Et2Vfs/Et2VfsMime";
 import "./Et2Vfs/Et2VfsUid";