'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const core = require('./core-1276587e.js');
const tick = require('./tick-aee2ba6f.js');

var description = "Description";
var title = "Title";
var update = "Update";
const i18n = {
	"delete": "Delete",
	description: description,
	title: title,
	update: update
};

const AlEdgeEditor = class {
    constructor(hostRef) {
        core.registerInstance(this, hostRef);
        this._contentStrings = i18n;
        this.deleteEdge = core.createEvent(this, "deleteEdge", 7);
        this.saveEdge = core.createEvent(this, "saveEdge", 7);
    }
    render() {
        if (this.edge) {
            const [edgeId, edge] = this.edge;
            return (core.h("form", { onSubmit: e => e.preventDefault() }, core.h("ion-item", null, core.h("ion-input", { id: "title", value: edge.title, placeholder: this._contentStrings.title, required: true, onIonChange: e => (edge.title = e.detail.value), maxlength: 20 })), core.h("ion-item", null, core.h("ion-textarea", { id: "description", value: edge.description, placeholder: this._contentStrings.description, rows: 5, onIonChange: e => (edge.description = e.detail.value), maxlength: 280 })), core.h("ion-item", null, core.h("ion-button", { size: "small", onClick: () => {
                    this.deleteEdge.emit(edgeId);
                    this.edge = null;
                } }, core.h("ion-icon", { src: tick.MinusIcon }), "\u00A0", this._contentStrings.delete), core.h("ion-button", { size: "small", type: "submit", onClick: () => {
                    if (edge.title) {
                        this.saveEdge.emit([edgeId, edge]);
                    }
                } }, core.h("ion-icon", { src: tick.TickIcon }), "\u00A0", this._contentStrings.update))));
        }
        return null;
    }
    static get style() { return "#title {\n  --background: var(--al-input-background-color);\n  --color: var(--al-input-color);\n  --padding-bottom: var(--al-input-padding-bottom);\n  --padding-end: var(--al-input-padding-end);\n  --padding-start: var(--al-input-padding-start);\n  --padding-top: var(--al-input-padding-top);\n  font-size: var(--al-input-font-size);\n}\n\n#description {\n  --background: var(--al-textarea-background-color);\n  --color: var(--al-textarea-color);\n  --padding-bottom: var(--al-textarea-padding-bottom);\n  --padding-end: var(--al-textarea-padding-end);\n  --padding-start: var(--al-textarea-padding-start);\n  --padding-top: var(--al-textarea-padding-top);\n  font-size: var(--al-textarea-font-size);\n}"; }
};

exports.al_edge_editor = AlEdgeEditor;
