Revert "Fix Et2LinkAdd still tried to use Lion slots" as it seems to break all CSS in 23.1 :(

This reverts commit 874264bc26a1c394c12ea2721dc1c379c9301c7e.

api/js/etemplate/Et2Button/ButtonMixin.ts

@@ -130,7 +130,7 @@ export const ButtonMixin = <T extends Constructor>(superclass : T) => class exte
 			
 			/* Override primary styling - we use variant=primary on first dialog button */
 			.button--standard.button--primary {
-				background-color: var(--sl-color-gray-100);
+				background-color: hsl(240deg 5% 96%);
 				border-color: var(--sl-color-gray-400);
 				color: var(--sl-input-color-hover);
 			}

api/js/etemplate/Et2Link/Et2LinkAdd.ts

@@ -1,18 +1,14 @@
 import {Et2InputWidget} from "../Et2InputWidget/Et2InputWidget";
-import {css, html, LitElement, nothing} from "lit";
+import {css, html, LitElement, PropertyValues} from "lit";
 import {Et2LinkAppSelect} from "./Et2LinkAppSelect";
 import {LinkInfo} from "./Et2Link";
 import {Et2Button} from "../Et2Button/Et2Button";
-import {customElement} from "lit/decorators/custom-element.js";
-import {property} from "lit/decorators/property.js";
-import {classMap} from "lit/directives/class-map.js";
 
 /**
  * Find and select a single entry using the link system.
  *
  *
  */
-@customElement("et2-link-add")
 export class Et2LinkAdd extends Et2InputWidget(LitElement)
 {
 	static get styles()
@@ -20,34 +16,75 @@ export class Et2LinkAdd extends Et2InputWidget(LitElement)
 		return [
 			...super.styles,
 			css`
-				.form-control {
+			:host {
-					display: flex;
+				display: block;
-					align-items: center;
+				border: solid var(--sl-input-border-width) var(--sl-input-border-color);
-					flex-wrap: wrap;
+    			border-radius: var(--sl-input-border-radius-medium);
-				}
-
-				.form-control-input {
-					display: flex;
-					flex: 1 1 auto;
-					position: relative;
-					max-width: 100%;
 			}
 			`
 		];
 	}
 
+	static get properties()
+	{
+		return {
+			...super.properties,
+
 			/**
 			 * Either an array of LinkInfo (defined in Et2Link.ts) or array with keys to_app and to_id
 			 */
-	@property({type: Object})
+			value: {type: Object},
-	value : LinkInfo[] & { to_app : string, to_id : string }
+			/**
+			 * Limit to just this application - hides app selection
+			 */
+			application: {type: String},
 			/**
 			 * Limit to the listed applications (comma seperated)
 			 */
-	@property()
+			applicationList: {type: String}
-	applicationList : string
+		}
+	}
+
+	get slots()
+	{
+		return {
+			...super.slots,
+			app: () =>
+			{
+				const app = <Et2LinkAppSelect>document.createElement("et2-link-apps");
+				app.appIcons = false;
+				if(this.application)
+				{
+					app.onlyApp = this.application;
+				}
+				else if(typeof this._value !== "undefined" && this._value.app)
+				{
+					app.value = this._value.app;
+				}
+				if(this.applicationList)
+				{
+					app.applicationList = this.applicationList;
+				}
+				return app;
+			},
+			button: () =>
+			{
+				const button = <Et2Button>document.createElement("et2-button");
+				button.id = this.id + "_add";
+				button.label = this.egw().lang("Add");
+				button.noSubmit = true;
+
+				return button;
+			}
+		}
+	}
 
 	/**
+	 * We only care about this value until render.  After the sub-nodes are created,
+	 * we take their "live" values for our value.
+	 *
+	 * N.B.: Single underscore!  Otherwise we conflict with parent __value
+	 *
 	 * @type {LinkInfo}
 	 * @private
 	 */
@@ -60,35 +97,98 @@ export class Et2LinkAdd extends Et2InputWidget(LitElement)
 		this.handleButtonClick = this.handleButtonClick.bind(this);
 	}
 
-	/**
+	connectedCallback()
-	 * Limit to just this application - hides app selection
+	{
-	 */
+		super.connectedCallback();
-	@property()
+
+		// Clear initial value, no longer needed
+		this._value = undefined;
+
+		this._bindListeners();
+	}
+
+	updated(changedProperties : PropertyValues)
+	{
+		super.updated(changedProperties);
+		if(changedProperties.has("readonly"))
+		{
+			this._appNode.readonly = this.readonly;
+		}
+		// Pass some properties on to app selection
+		if(changedProperties.has("only_app"))
+		{
+			this._appNode.only_app = this.only_app;
+		}
+		if(changedProperties.has("applicationList"))
+		{
+			this._appNode.applicationList = this.applicationList;
+		}
+		if(changedProperties.has("app_icons"))
+		{
+			this._appNode.app_icons = this.app_icons;
+		}
+	}
+
 	set application(app)
 	{
 		app = app || "";
 
 		// If initial value got set before only_app, it still needs app in pre-render value
-		if(this.value && app)
+		if(this._value && app)
 		{
-			this.value.app = app;
+			this._value.app = app;
+		}
+		if(this._appNode)
+		{
+			this._appNode.value = app;
 		}
-		this.requestUpdate("application")
 	}
 
 	get application()
 	{
-		return this.value.app;
+		if(this._value)
+		{
+			return this._value.app;
+		}
+		if(this._appNode)
+		{
+			return this._appNode.value;
+		}
 	}
 
 	get _appNode() : Et2LinkAppSelect
 	{
-		return this.shadowRoot.querySelector("et2-link-apps");
+		return this.querySelector("[slot='app']");
 	}
 
 	get _buttonNode() : Et2Button
 	{
-		return this.shadowRoot.querySelector("et2-button");
+		return this.querySelector("[slot='button']");
+	}
+
+	/**
+	 * @return {TemplateResult}
+	 * @protected
+	 */
+	_inputGroupInputTemplate()
+	{
+		return html`
+            <div class="input-group__input">
+                <slot name="app"></slot>
+                <slot name="button"></slot>
+            </div>
+		`;
+	}
+
+	protected _bindListeners()
+	{
+		//this._appNode.addEventListener("change", this._handleAppChange);
+		this._buttonNode.addEventListener("click", this.handleButtonClick)
+	}
+
+	protected _unbindListeners()
+	{
+		this._buttonNode.removeEventListener("click", this.handleButtonClick)
 	}
 
 	/**
@@ -99,55 +199,6 @@ export class Et2LinkAdd extends Et2InputWidget(LitElement)
 	{
 		this.egw().open(this.value.to_app + ":" + this.value.to_id, this._appNode.value, 'add');
 	}
-
-	render()
-	{
-		const hasLabel = this.label ? true : false;
-		const hasHelpText = this.helpText ? true : false;
-		const isEditable = !(this.disabled || this.readonly);
-
-		return html`
-            <div
-                    part="form-control"
-                    class=${classMap({
-                        'link-add': true,
-                        'link-add__readonly': !isEditable,
-                        'vlink-add__disabled': this.disabled,
-                        'form-control': true,
-                        'form-control--medium': true,
-                        'form-control--has-label': hasLabel,
-                        'form-control--has-help-text': hasHelpText
-                    })}
-            >
-                <label
-                        id="label"
-                        part="form-control-label"
-                        class="form-control__label"
-                        aria-hidden=${hasLabel ? 'false' : 'true'}
-                >
-                    <slot name="label">${this.label}</slot>
-                </label>
-                <div part="form-control-input" class="form-control-input">
-                    <slot part="prefix" name="prefix"></slot>
-                    <et2-link-apps
-                            onlyApp=${this.application || nothing}
-                            applicationList=${this.applicationList || nothing}
-                            ?disabled=${this.disabled}
-                            ?readonly=${this.readonly}
-                            .value=${this.value?.app}
-                    ></et2-link-apps>
-                    <et2-button
-                            id=${this.id + "_add"}
-                            image="add"
-                            aria-label=${this.egw().lang("Add entry")}
-                            ?disabled=${this.disabled}
-                            ?readonly=${this.readonly}
-                            noSubmit
-                            @click=${this.handleButtonClick}
-                    ></et2-button>
-                    <slot part="suffix" name="suffix"></slot>
-                </div>
-            </div>
-		`;
-	}
 }
+
+customElements.define("et2-link-add", Et2LinkAdd);

api/js/etemplate/Styles/shoelace.ts

@@ -1,3 +1,4 @@
+import sl_css from '@shoelace-style/shoelace/dist/themes/light.styles.js';
 import {css} from "lit";
 
 import {registerIconLibrary} from '@shoelace-style/shoelace/dist/utilities/icon-library.js';
@@ -37,7 +38,7 @@ if(typeof egw !== "undefined" && typeof egw.image == "function")
  * Customise shoelace styles to match our stuff
  * External CSS & widget styles will override this
  */
-export default [css`
+export default [sl_css, css`
   :root,
   :host,
   .sl-theme-light {
@@ -53,9 +54,9 @@ export default [css`
 	--indicator-color: #696969;
 	--sl-input-focus-ring-color: #26537C;
 	--sl-focus-ring-width: 2px;
-	  --sl-color-gray-150: hsl(240, 4.9%, 92.5%);
+	--sl-color-gray-150: #f0f0f0;
-  }
       
+  }
   .tab-group--top .tab-group__tabs {
       --track-width: 3px;
   }