@conectate/ct-dialog/ct-promp.js

HTML dialog made with Web Components

/**
 @license
 Copyright (c) 2020 Herberth Obregón. All rights reserved.
 This code may only be used under the BSD style license found at
 https://open.grupoconectate.com/LICENSE.txt The complete set of authors may be found at
 https://open.grupoconectate.com/AUTHORS.txt The complete set of contributors may be
 found at https://open.grupoconectate.com/CONTRIBUTORS.txt Code distributed by Herberth Obregón as
 part of the Conectate Open Source Project is also subject to an additional IP rights grant
 found at https://open.grupoconectate.com/PATENTS.txt
 */
import { __decorate } from "tslib";
import "@conectate/ct-button";
import "@conectate/ct-card";
import "@conectate/ct-input";
import { CtLit, css, customElement, html, property, query } from "@conectate/ct-lit";
import { showCtDialog } from "./ct-dialog.js";
export function showCtPrompt(title, body, ok, cancel, neutral, options) {
    let ctPromp = new CTPromp();
    ctPromp.ttl = title;
    ctPromp.body = body;
    ctPromp.ok = ok ? ok : "OK";
    ctPromp.options = options;
    ctPromp.wordwrap = options?.wordwrap || false;
    neutral && (ctPromp.neutral = neutral);
    cancel && (ctPromp.cancel = cancel);
    ctPromp.dialog = showCtDialog(ctPromp);
    return ctPromp.onResult();
}
let CTPromp = class CTPromp extends CtLit {
    constructor() {
        super(...arguments);
        this.body = "";
        this.ttl = "Title";
        this.ok = "OK";
        this.neutral = "";
        this.cancel = "Cancel";
        this.wordwrap = false;
    }
    static { this.styles = [
        css `
			:host {
				display: block;
			}

			.title {
				font-family: "Google Sans", "Ubuntu", "Roboto", sans-serif;
				font-size: 1.5em;
				font-weight: 400;
				margin: 24px 24px 0;
			}

			.body {
				margin: 20px 24px 24px;
				color: var(--color-on-surface, #fff);
				max-height: 62vh;
				overflow: hidden auto;
			}
			:host([wordwrap]) .body {
				white-space: pre-wrap;
				word-wrap: break-word;
			}
			.actions {
				margin: 0 16px;
			}

			.buttons {
				display: flex;
				flex-direction: row;
				justify-content: flex-end;
				color: var(--color-primary);
				font-weight: bold;
				padding: 16px;
			}

			#ok {
				color: var(--color-on-primary, #fff);
			}

			a {
				text-decoration: none;
				color: var(--color-primary);
			}

			@media (max-width: 800px) {
				.buttons_vert {
					flex-direction: column;
					text-align: right;
				}
				.buttons_vert .ok,
				.buttons_vert .cancel {
					margin-top: 8px;
				}
			}

			ct-card {
				display: flex;
				flex-direction: column;
				max-height: 80vh;
				margin: 0;
			}

			#in {
				display: block;
			}
		`
    ]; }
    render() {
        return html `
			<ct-card shadow decorator>
				<div class="title">${this.ttl}</div>
				<div class="body">${this.body}</div>
				<div class="actions">
					<ct-input id="in"></ct-input>
				</div>
				<div id="buttons" class="buttons">
					<ct-button id="cancel" @click="${this.cancelbtn}" shadow>${this.cancel}</ct-button>
					<ct-button id="ok" @click="${this.okbtn}" raised>${this.ok}</ct-button>
				</div>
			</ct-card>
		`;
    }
    firstUpdated() {
        this.computeBtns(this.ok, this.neutral, this.cancel);
        if (this.options.label) {
            this.$in.label = this.options.label;
        }
        if (this.options.value) {
            this.$in.value = this.options.value;
        }
        if (this.options.placeholder) {
            this.$in.placeholder = this.options.placeholder;
        }
        if (this.options.rawplaceholder) {
            this.$in.rawPlaceholder = this.options.rawplaceholder;
        }
    }
    computeBtns(ok, neutral, cancel) {
        let auxok = ok || "", auxcancel = cancel || "", auxneutral = neutral || "";
        if (neutral == null) {
            this.$neutral.style.display = "none";
        }
        if (auxneutral.length > 15 || auxok.length > 15 || auxcancel.length > 15) {
            this.$buttons.classList.add("buttons_vert");
        }
        if (cancel == null) {
            this.$cancel.style.display = "none";
        }
    }
    async okbtn(e) {
        await this.dialog.close(e, "click");
        this.solve(this.$in.value);
    }
    async cancelbtn(e) {
        await this.dialog.close(e, "click");
        this.solve();
    }
    onResult() {
        return new Promise((resolve, reject) => {
            // @ts-ignore
            this.solve = resolve;
            this.reject = reject;
        });
    }
};
__decorate([
    property({ type: String })
], CTPromp.prototype, "body", void 0);
__decorate([
    property({ type: String })
], CTPromp.prototype, "ttl", void 0);
__decorate([
    property({ type: String })
], CTPromp.prototype, "ok", void 0);
__decorate([
    property({ type: String })
], CTPromp.prototype, "neutral", void 0);
__decorate([
    property({ type: String })
], CTPromp.prototype, "cancel", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], CTPromp.prototype, "wordwrap", void 0);
__decorate([
    property({ type: Object })
], CTPromp.prototype, "options", void 0);
__decorate([
    query("#buttons")
], CTPromp.prototype, "$buttons", void 0);
__decorate([
    query("#neutral")
], CTPromp.prototype, "$neutral", void 0);
__decorate([
    query("#cancel")
], CTPromp.prototype, "$cancel", void 0);
__decorate([
    query("#in")
], CTPromp.prototype, "$in", void 0);
CTPromp = __decorate([
    customElement("ct-promp")
], CTPromp);