ui-lit/mixins/notificatable/index.js

UI Elements on LIT

import { __decorate } from "tslib";
import { property } from 'lit/decorators.js';
import { nothing, html, css } from 'lit';
export const notificatable = (superClass) => {
    class Notificatable extends superClass {
        constructor() {
            super(...arguments);
            this.showNote = false;
            this._top = 0;
            this._onValid = () => {
                this.removeAttribute('invalid');
                this.showNote = false;
            };
            this._onInvalid = () => {
                this.setAttribute('invalid', '');
            };
            this._onReport = () => {
                this.showNote = true;
            };
        }
        connectedCallback() {
            super.connectedCallback();
            this.addEventListener('valid', this._onValid);
            this.addEventListener('invalid', this._onInvalid);
            this.addEventListener('reportInvalid', this._onReport);
        }
        disconnectedCallback() {
            super.disconnectedCallback();
            this.removeEventListener('valid', this._onValid);
            this.removeEventListener('invalid', this._onInvalid);
            this.removeEventListener('reportInvalid', this._onReport);
        }
        willUpdate(_changedProperties) {
            super.willUpdate(_changedProperties);
            this._top = this.clientHeight;
        }
        render() {
            if (this.showNote) {
                return html `<lit-note 
                    @close = "${this._handleCloseNote}" 
                    error
                    style = "top: ${(this._top)}px;"
                    class = "error">${this.validationMessage}</lit-note>`;
            }
            return nothing;
        }
        _handleCloseNote() {
            this.showNote = false;
        }
    }
    Notificatable.styles = [
        ...superClass.elementStyles,
        css `
            :host{
                position: relative;
            }
            `
    ];
    __decorate([
        property({ type: Boolean, reflect: true })
    ], Notificatable.prototype, "showNote", void 0);
    return Notificatable;
    ;
};