Better readonly styling

api/js/etemplate/Et2Link/Et2LinkEntry.ts

@@ -7,12 +7,12 @@
  * @author Nathan Gray
  */
 
-import {css, html, LitElement, SlotMixin} from "@lion/core";
+import {css, html, LitElement, PropertyValues, SlotMixin} from "@lion/core";
 import {Et2LinkAppSelect} from "./Et2LinkAppSelect";
 import {Et2InputWidget} from "../Et2InputWidget/Et2InputWidget";
 import {FormControlMixin, ValidateMixin} from "@lion/form-core";
 import {Et2LinkSearch} from "./Et2LinkSearch";
-import {LinkInfo} from "./Et2Link";
+import {Et2Link, LinkInfo} from "./Et2Link";
 
 /**
  * Find and select a single entry using the link system.
@@ -132,7 +132,10 @@ export class Et2LinkEntry extends Et2InputWidget(FormControlMixin(ValidateMixin(
 		// Clear initial value
 		this._value = undefined;
 
-		this._bindListeners();
+		if(!this.readonly)
+		{
+			this._bindListeners();
+		}
 	}
 
 	disconnectedCallback()
@@ -141,6 +144,16 @@ export class Et2LinkEntry extends Et2InputWidget(FormControlMixin(ValidateMixin(
 		this._unbindListeners();
 	}
 
+	updated(changedProperties : PropertyValues)
+	{
+		super.updated(changedProperties);
+		if(changedProperties.has("readonly"))
+		{
+			this._appNode.readonly = this.readonly;
+			this._searchNode.readonly = this.readonly;
+		}
+	}
+
 	set only_app(app)
 	{
 		this.__only_app = app || "";
@@ -266,7 +279,7 @@ export class Et2LinkEntry extends Et2InputWidget(FormControlMixin(ValidateMixin(
 		{
 			return this._searchNode?.value;
 		}
-		return this._searchNode ? {
+		return this._searchNode ? <LinkInfo>{
 			id: this._searchNode.value,
 			app: this.app,
 			//search: this._searchNode...	// content of search field
@@ -328,5 +341,11 @@ export class Et2LinkEntry extends Et2InputWidget(FormControlMixin(ValidateMixin(
 	}
 }
 
-// @ts-ignore TypeScript is not recognizing that this widget is a LitElement
-customElements.define("et2-link-entry", Et2LinkEntry);
+customElements.define("et2-link-entry", Et2LinkEntry);
+
+export class Et2LinkEntryReadonly extends Et2Link
+{
+
+}
+
+customElements.define("et2-link-entry_ro", Et2LinkEntryReadonly);

api/js/etemplate/Et2Link/Et2LinkSearch.ts

@@ -82,6 +82,10 @@ export class Et2LinkSearch extends Et2Select
 		{
 			this._missingOption(this.value)
 		}
+		if(changedProperties.has("readonly"))
+		{
+			this.clearable = !this.readonly;
+		}
 	}
 
 	/**

api/js/etemplate/Et2Select/Et2Select.ts

@@ -385,18 +385,26 @@ export class Et2Select extends Et2WithSearchMixin(Et2InvokerMixin(Et2WidgetWithS
 		tag.value = item.value;
 		tag.textContent = this.getItemLabel(item);
 		tag.class = item.classList.value + " search_tag";
-		tag.addEventListener("dblclick", this._handleDoubleClick);
-		tag.addEventListener("click", this.handleTagInteraction);
-		tag.addEventListener("keydown", this.handleTagInteraction);
-		tag.addEventListener("sl-remove", (event) =>
+		if(this.readonly)
 		{
-			event.stopPropagation();
-			if(!this.disabled)
+			tag.removable = false;
+			tag.readonly = true;
+		}
+		else
+		{
+			tag.addEventListener("dblclick", this._handleDoubleClick);
+			tag.addEventListener("click", this.handleTagInteraction);
+			tag.addEventListener("keydown", this.handleTagInteraction);
+			tag.addEventListener("sl-remove", (event) =>
 			{
-				item.checked = false;
-				this.syncValueFromItems();
-			}
-		});
+				event.stopPropagation();
+				if(!this.disabled)
+				{
+					item.checked = false;
+					this.syncValueFromItems();
+				}
+			});
+		}
 		let image = this._createImage(item);
 		if(image)
 		{

api/js/etemplate/Et2Select/SearchMixin.ts

@@ -122,7 +122,7 @@ export const Et2WithSearchMixin = <T extends Constructor<LitElement>>(superclass
 					font-size: 120% !important;
 					display:none;
 				}
-				:host([search]) ::slotted([slot="suffix"]) {
+				:host([search]):not([readonly]) ::slotted([slot="suffix"]) {
 					display: initial;
 				}
 				
@@ -195,9 +195,27 @@ export const Et2WithSearchMixin = <T extends Constructor<LitElement>>(superclass
 					display: none;
 				}
 				/* Different cursor for editable tags */
-				:host([allowfreeentries]) .search_tag::part(base)  {
+				:host([allowfreeentries]):not([readonly]) .search_tag::part(base)  {
 					cursor: text;
 				}
+				
+				/** Readonly **/
+				/* No border */
+				:host([readonly]) .form-control-input {
+					border: none;
+				}
+				/* disable focus border */
+				:host([readonly]) .form-control-input:focus-within {
+					box-shadow: none;
+				}
+				/* no menu */
+				:host([readonly]) sl-menu {
+					display: none;
+				}
+				/* normal cursor */
+				:host([readonly]) .select__control {
+					cursor: initial;
+				}
 				`
 			]
 		}
@@ -261,7 +279,8 @@ export const Et2WithSearchMixin = <T extends Constructor<LitElement>>(superclass
 			this.classList.toggle("search", this.searchEnabled);
 
 			// Missing any of the required attributes?  Don't change anything.
-			if(!this.searchEnabled && !this.editModeEnabled)
+			// If readonly, skip it
+			if(!this.searchEnabled && !this.editModeEnabled || this.readonly)
 			{
 				return;
 			}
@@ -342,7 +361,7 @@ export const Et2WithSearchMixin = <T extends Constructor<LitElement>>(superclass
 		 */
 		public get searchEnabled() : boolean
 		{
-			return this.search || this.searchUrl.length > 0;
+			return !this.readonly && (this.search || this.searchUrl.length > 0);
 		}
 
 		protected get _searchButtonNode()

api/js/etemplate/Et2Select/Tag/Et2Tag.ts

@@ -29,9 +29,13 @@ export class Et2Tag extends Et2Widget(SlTag)
 			height: 20px;
 			width: 20px;
 		}
+		.tag__content {
+			padding: 0px 0.2rem;
+		}
 		/* Avoid button getting truncated by right side of button */
 		.tag__remove {
 			margin-right: 0;
+			margin-left: 0;
 		}
 		`];
 	}