Et2VfsSelect WIP

- Support for custom footer buttons via slotting inside Et2VfsSelectButton
- pass dialog button ID along to Et2VfsSelectButton method

api/js/etemplate/Et2Vfs/Et2VfsSelectButton.ts

@@ -21,16 +21,12 @@ import {waitForEvent} from "../Et2Widget/event";
  * @dependency et2-vfs-select-dialog
  * @dependency et2-button
  *
- * @slot prefix - Before the toolbar
- * @slot suffix - Like prefix, but after
+ * @slot footer - Buttons are added to the dialog footer.  Control their position with CSS `order` property.
  *
  * @event change - Emitted when the control's value changes.
  *
- * @csspart form-control-input - The textbox's wrapper.
- * @csspart form-control-help-text - The help text's wrapper.
- * @csspart prefix - The container that wraps the prefix slot.
- * @csspart suffix - The container that wraps the suffix slot.
- *
+ * @csspart button - The button control
+ * @csspart dialog - The et2-vfs-select-dialog
  */
 
 export class Et2VfsSelectButton extends Et2InputWidget(LitElement)
@@ -76,7 +72,7 @@ export class Et2VfsSelectButton extends Et2InputWidget(LitElement)
 	 */
 	@property() method : string = "";
 	/** ID passed to method */
-	@property({type: String, reflect: true}) methodId : string;
+	@property({type: String, reflect: true, attribute: "method-id"}) methodId : string;
 
 	protected readonly hasSlotController = new HasSlotController(this, '');
 	protected processingPromise : Promise<FileActionResult> = null;
@@ -89,6 +85,12 @@ export class Et2VfsSelectButton extends Et2InputWidget(LitElement)
 		this.handleClick = this.handleClick.bind(this);
 	}
 
+	/** Programmatically trigger the dialog */
+	public click()
+	{
+		this.handleClick(new Event("click"));
+	}
+
 	protected handleClick(event)
 	{
 		if(this._dialog && typeof this._dialog.show == "function")
@@ -105,10 +107,17 @@ export class Et2VfsSelectButton extends Et2InputWidget(LitElement)
 		}
 	}
 
-	protected processDialogComplete([button, paths])
+	/**
+	 * The select dialog has been closed, now deal with the provided paths
+	 *
+	 * @param {string | number} button
+	 * @param {string[]} paths
+	 * @protected
+	 */
+	protected processDialogComplete([button, paths] : [string | number, string[]])
 	{
 		// Cancel or close do nothing
-		if(!button)
+		if(typeof button !== "undefined" && !button)
 		{
 			return;
 		}
@@ -127,7 +136,7 @@ export class Et2VfsSelectButton extends Et2InputWidget(LitElement)
 		}
 		else if(this.method)
 		{
-			this.sendFiles();
+			this.sendFiles(button);
 		}
 		this.updateComplete.then(() =>
 		{
@@ -142,11 +151,11 @@ export class Et2VfsSelectButton extends Et2InputWidget(LitElement)
 		})
 	}
 
-	protected sendFiles()
+	protected sendFiles(button? : string | number)
 	{
 		this.processingPromise = this.egw().request(
 			this.method,
-			[this.methodId, this.value/*, submit_button_id, savemode*/]
+			[this.methodId, this.value, button/*, savemode*/]
 		).then((data) =>
 			{
 				this.processingPromise = null;
@@ -165,6 +174,7 @@ export class Et2VfsSelectButton extends Et2InputWidget(LitElement)
 	{
 		return html`
             <et2-vfs-select-dialog
+                    part="dialog"
                     .title=${this.title ?? nothing}
                     .value=${this.value ?? nothing}
                     .mode=${this.mode ?? nothing}
@@ -174,6 +184,7 @@ export class Et2VfsSelectButton extends Et2InputWidget(LitElement)
                     .mime=${this.mime ?? nothing}
                     .buttonLabel=${this.buttonLabel ?? nothing}
             >
+                <slot name="footer" slot="footer"></slot>
             </et2-vfs-select-dialog>
 		`;
 	}
@@ -186,7 +197,8 @@ export class Et2VfsSelectButton extends Et2InputWidget(LitElement)
 		const image = processing ? "" : (this.image || "filemanager/navbar");
 
 		return html`
-            <et2-button image=${image}
+            <et2-button part="button"
+                        image=${image}
                         ?disabled=${this.disabled}
                         ?readonly=${this.readonly || processing}
                         .noSubmit=${true}
@@ -195,7 +207,7 @@ export class Et2VfsSelectButton extends Et2InputWidget(LitElement)
                 ${processing ? html`
                     <sl-spinner></sl-spinner>` : nothing}
             </et2-button>
-            <slot>${hasUserDialog ? nothing : this.dialogTemplate()}</slot>
+            ${hasUserDialog ? nothing : this.dialogTemplate()}
 		`;
 	}
 }

api/js/etemplate/Et2Vfs/Et2VfsSelectDialog.ts

@@ -42,10 +42,11 @@ import {Et2VfsPath} from "./Et2VfsPath";
  *
  * @event change - Emitted when the control's value changes.
  *
- * @csspart form-control-input - The textbox's wrapper.
+ * @csspart toolbar - controls at the top
+ * @csspart path
+ * @csspart listbox - The list of files
+ * @csspart mimefilter - Mime filter select
  * @csspart form-control-help-text - The help text's wrapper.
- * @csspart prefix - The container that wraps the prefix slot.
- * @csspart suffix - The container that wraps the suffix slot.
  *
  */
 
@@ -798,12 +799,16 @@ export class Et2VfsSelectDialog extends Et2InputWidget(LitElement) implements Se
 		];
 
 		return html`
+            <slot name="footer" slot="footer"></slot>
             ${repeat(buttons, (button : DialogButton) => button.id, (button, index) =>
 		{
+            // style=order is to allow slotted buttons an opportunity to choose where they go.  
+            // Default is they'll go before our primary button
 			return html`
                     <et2-button id=${button.id}
                                 button_id=${button.button_id}
                                 class="et2_button et2_vfs__button"
+                                style="order: ${(index + 1) * 2}"
                                 label=${button.label}
                                 variant=${index == 0 ? "primary" : "default"}
                                 slot="footer"
@@ -893,7 +898,7 @@ export class Et2VfsSelectDialog extends Et2InputWidget(LitElement) implements Se
                 >
                     <slot name="help-text">${this.helpText}</slot>
                 </div>
-                ${hasFooterSlot ? nothing : this.footerTemplate()}
+                ${this.footerTemplate()}
             </et2-dialog>
 		`;
 	}