146 lines
3.3 KiB
JavaScript
146 lines
3.3 KiB
JavaScript
/**
|
|
@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); |