/*
 * Copyright (C) 2016-2020 Kano Computing Ltd.
 * License: http://www.gnu.org/licenses/gpl-2.0.txt GNU General Public License v2
 */
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { KCEditableLabel } from './kc-editable-label.js';
import { property, customElement, html, css } from 'lit-element/lit-element.js';
let KCValidatedEditableLabel = class KCValidatedEditableLabel extends KCEditableLabel {
    constructor() {
        super(...arguments);
        this.validator = () => true;
        this.errorMessage = '';
    }
    static get styles() {
        return [css `
            :host {
                position: relative;
            }
            .error-message {
                position: absolute;
                border: 1px solid grey;
                top: calc(100% + 2px);
                left: -3px;
                padding: 2px 4px;
                background: rgba(0, 0, 0, 0.25);
            }
        `, ...super.styles];
    }
    get inputEl() {
        return html `
            ${super.inputEl}
            ${this.errorMessage.length ? this.errorEl : ''}
        `;
    }
    get errorEl() {
        return html `<div class="error-message">${this.errorMessage}</div>`;
    }
    apply() {
        const input = this.input;
        const value = input.value;
        const validation = this.validator(this.label, value);
        if (validation === true) {
            return super.apply();
        }
        input.style.borderColor = 'red';
        if (typeof validation === 'string') {
            this.errorMessage = validation;
        }
    }
    _onInputKeyDown(e) {
        if (this.errorMessage.length) {
            this.errorMessage = '';
        }
        this.input.style.borderColor = '';
        super._onInputKeyDown(e);
    }
};
__decorate([
    property({ type: Function })
], KCValidatedEditableLabel.prototype, "validator", void 0);
__decorate([
    property({ type: String })
], KCValidatedEditableLabel.prototype, "errorMessage", void 0);
KCValidatedEditableLabel = __decorate([
    customElement('kc-validated-editable-label')
], KCValidatedEditableLabel);
export { KCValidatedEditableLabel };
//# sourceMappingURL=kc-validated-editable-label.js.map