Switch placeholder widget to using Et2Dialog

api/js/etemplate/et2_widget_placeholder.ts

@@ -15,7 +15,7 @@
 	et2_widget_description;
 */
 
-import {et2_createWidget, et2_register_widget, WidgetConfig} from "./et2_core_widget";
+import {et2_register_widget, WidgetConfig} from "./et2_core_widget";
 import {ClassWithAttributes} from "./et2_core_inheritance";
 import {et2_dialog} from "./et2_widget_dialog";
 import {et2_inputWidget} from "./et2_core_inputWidget";
@@ -24,6 +24,7 @@ import {et2_selectbox} from "./et2_widget_selectbox";
 import {et2_description} from "./et2_widget_description";
 import {et2_link_entry} from "./et2_widget_link";
 import type {et2_button} from "./et2_widget_button";
+import {Et2Dialog} from "./Et2Dialog/Et2Dialog";
 
 
 /**
@@ -48,7 +49,7 @@ export class et2_placeholder_select extends et2_inputWidget
 
 	button : JQuery;
 	submit_callback : any;
-	dialog : et2_dialog;
+	dialog : Et2Dialog;
 	protected value : any;
 
 	protected LIST_URL = 'EGroupware\\Api\\Etemplate\\Widget\\Placeholder::ajax_get_placeholders';
@@ -116,7 +117,7 @@ export class et2_placeholder_select extends et2_inputWidget
 		let self = this;
 		let buttons = [
 			{
-				text: this.egw().lang("Insert"),
+				label: this.egw().lang("Insert"),
 				id: "submit",
 				image: "export"
 			}
@@ -133,7 +134,7 @@ export class et2_placeholder_select extends et2_inputWidget
 			}
 
 		}
-		buttons.push({text: this.egw().lang("Cancel"), id: "cancel", image: "cancel"});
+		buttons.push({label: this.egw().lang("Cancel"), id: "cancel", image: "cancel"});
 
 		let data = {
 			content: {app: '', group: '', entry: {}},
@@ -178,22 +179,17 @@ export class et2_placeholder_select extends et2_inputWidget
 			}
 		}.bind(this);
 
-		this.dialog = <et2_dialog>et2_createWidget("dialog",
-			{
+		this.dialog = new Et2Dialog(this.egw());
+		this.dialog.transformAttributes({
 			callback: this.submit_callback,
-				title: this.egw().lang(this.options.dialog_title) || this.egw().lang("Insert Placeholder"),
+			title: this.options.dialog_title || "Insert Placeholder",
 			buttons: buttons,
-				minWidth: 500,
-				minHeight: 400,
-				width: 400,
 			value: data,
 			template: this.egw().webserverUrl + this.TEMPLATE,
 			resizable: true
-			}, et2_dialog._create_parent('api'));
-		this.dialog.template.uniqueId = 'api.insert_merge_placeholder';
-
-
-		this.dialog.div.on('load', this._on_template_load.bind(this));
+		});
+		document.body.appendChild(<HTMLElement><unknown>this.dialog);
+		this.dialog.addEventListener('load', this._on_template_load.bind(this));
 	}
 
 	doLoadingFinished()

api/templates/default/insert_merge_placeholder.xet

@@ -25,17 +25,17 @@
         </vbox>
         <styles>
             /** Structural stuff **/
-            #api\.insert_merge_placeholder_outer_box > #api\.insert_merge_placeholder_selects {
+            #insert_merge_placeholder #_outer_box > #api\.insert_merge_placeholder_selects {
             flex: 1 1 80%;
             }
-            #api\.insert_merge_placeholder_outer_box > label.et2_label {
+            #insert_merge_placeholder #_outer_box > label.et2_label {
             flex: 0 1 auto;
             }
-            #api\.insert_merge_placeholder_outer_box .preview {
+            #insert_merge_placeholder #_outer_box .preview {
             flex: 1 1 2em;
             font-size: larger;
             }
-            select#api\.insert_merge_placeholder_app {
+            select#_app {
             flex-grow: 0;
             }
             .ui-dialog-content, div.et2_box_widget, div.et2_box_widget > div.et2_box_widget {
@@ -78,7 +78,11 @@
             }
 
             /** Cosmetics **/
-            #api\.insert_merge_placeholder_outer_box option:first-letter {
+            #insert_merge_placeholder {
+            min-width: 500px;
+            min-height: 250px;
+            }
+            #_outer_box option:first-letter {
             text-transform: capitalize;
             }
         </styles>

api/templates/default/placeholder_snippet.xet

@@ -15,18 +15,21 @@
             </hbox>
         </vbox>
         <styles>
-
-            #api\.insert_merge_placeholder_outer_box > #api\.insert_merge_placeholder_selects {
+            #placeholder_snippet {
+            min-width: 500px;
+            min-height: 300px;
+            }
+            #_outer_box > #_selects {
             flex: 1 1 50%;
             }
-            #api\.insert_merge_placeholder_outer_box > label.et2_label {
+            #_outer_box > label.et2_label {
             flex: 0 1 auto;
             }
-            #api\.insert_merge_placeholder_outer_box .preview {
+            #_outer_box .preview {
             flex: 1 1 50%;
             font-size: larger;
             }
-            select#api\.insert_merge_placeholder_app {
+            select#_app {
             flex-grow: 0;
             }
             .ui-dialog-content, div.et2_box_widget, div.et2_box_widget > div.et2_box_widget {