Allow custom dialogs, better styling support.

Fix registration bug with tp-form.
2026-07-06 12:30:51 +02:00
parent e84eab678e
commit 4ea22025ca
5 changed files with 179 additions and 34 deletions
@@ -0,0 +1,146 @@
+/**
+@license
+Copyright (c) 2026 trading_peter
+This program is available under Apache License Version 2.0
+*/
+
+import '@tp/tp-dialog/tp-dialog.js';
+import '@tp/tp-form/tp-form.js';
+import '@tp/tp-input/tp-input.js';
+import '@tp/tp-button/tp-button.js';
+import { LitElement, html, css } from 'lit';
+
+export class TpRtbLinkDialog extends LitElement {
+  static get styles() {
+    return css`
+      :host {
+        display: contents;
+      }
+
+      tp-dialog::part(dialog) {
+        width: min(420px, calc(100vw - 32px));
+      }
+
+      .wrap {
+        min-width: 300px;
+      }
+
+      h3 {
+        margin: 0 0 18px 0;
+        padding-right: 20px;
+      }
+
+      tp-form {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+      }
+
+      label {
+        display: block;
+        margin: 0 0 4px 0;
+        color: var(--tp-rtb-link-dialog-label-color, #666666);
+      }
+
+      .buttons-justified {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        margin-top: 20px;
+      }
+    `;
+  }
+
+  render() {
+    return html`
+      <tp-dialog closeOnEsc showClose>
+        <div class="wrap">
+          <h3>${this.dialogTitle}</h3>
+
+          <tp-form @submit=${this._submit}>
+            <div>
+              <label>${this.urlLabel}</label>
+              <tp-input name="url" .value=${this.url} required .errorMessage=${this.requiredMessage}>
+                <input type="text" placeholder=${this.urlPlaceholder}>
+              </tp-input>
+            </div>
+
+            <div>
+              <label>${this.textLabel}</label>
+              <tp-input name="text" .value=${this.text}>
+                <input type="text" placeholder=${this.textPlaceholder}>
+              </tp-input>
+            </div>
+
+            <div class="buttons-justified">
+              <tp-button dialog-dismiss>${this.cancelLabel}</tp-button>
+              <tp-button submit primary>${this.saveLabel}</tp-button>
+            </div>
+          </tp-form>
+        </div>
+      </tp-dialog>
+    `;
+  }
+
+  static get properties() {
+    return {
+      url: { type: String },
+      text: { type: String },
+      dialogTitle: { type: String },
+      urlLabel: { type: String },
+      textLabel: { type: String },
+      urlPlaceholder: { type: String },
+      textPlaceholder: { type: String },
+      requiredMessage: { type: String },
+      cancelLabel: { type: String },
+      saveLabel: { type: String }
+    };
+  }
+
+  constructor() {
+    super();
+
+    this.url = '';
+    this.text = '';
+    this.dialogTitle = 'Add Link';
+    this.urlLabel = 'URL';
+    this.textLabel = 'Text';
+    this.urlPlaceholder = 'https://example.com';
+    this.textPlaceholder = '';
+    this.requiredMessage = 'Required';
+    this.cancelLabel = 'Cancel';
+    this.saveLabel = 'Save';
+  }
+
+  async show({ url = '', text = '' } = {}) {
+    this.url = url;
+    this.text = text;
+
+    await this.updateComplete;
+
+    return this._dialog.show();
+  }
+
+  close() {
+    this._dialog.close();
+  }
+
+  get _dialog() {
+    return this.shadowRoot.querySelector('tp-dialog');
+  }
+
+  _submit(e) {
+    const event = new CustomEvent('link-save', {
+      detail: e.detail,
+      bubbles: true,
+      composed: true,
+      cancelable: true
+    });
+
+    if (this.dispatchEvent(event)) {
+      this.close();
+    }
+  }
+}
+
+customElements.define('tp-rtb-link-dialog', TpRtbLinkDialog);