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

@@ -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;

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}
 			}
 		}
 

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 */

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;
+			}
 		`];
 	}
 

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 {

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;
+}

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";