ui-lit/textarea/index.js

UI Elements on LIT

import { __decorate } from "tslib";
import { labled } from '../mixins/labled';
import { styleMap } from 'lit/directives/style-map.js';
import { html, LitElement, css } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { input } from '../styles/input';
import { formAssociated } from '../mixins/form-associated/index';
import { focusable } from '../mixins/focusable/index';
import { notificatable } from '../mixins/notificatable/index';
let LitTextarea = class LitTextarea extends focusable(labled(notificatable(formAssociated(LitElement)))) {
    constructor() {
        super(...arguments);
        this.placeholder = '';
        this.resize = 'none';
        this._value = '';
    }
    static get styles() {
        return [
            ...super.elementStyles,
            input,
            css `
            :host{  
                display: inline-block;
            }
            textarea{
                width: 100%;
                display: inline-block;
                margin: 0;
                resize: var(--lit-textarea-resize, none);
            }
            `
        ];
    }
    ;
    static get properties() {
        return {
            value: { type: String },
        };
    }
    get value() {
        return this._value;
    }
    set value(data) {
        const oldValue = this._value;
        this._value = data;
        this.requestUpdate('value', oldValue);
    }
    render() {
        const style = { resize: this.resize };
        return html `<textarea 
                        .disabled = "${this.disabled}"
                        style = "${styleMap(style)}"
                        placeholder="${this.placeholder}" 
                        @input = "${this._onInput}">${this.value}</textarea>`;
    }
    _onInput(e) {
        this.value = e.target.value;
        this.dispatchEvent(new CustomEvent('changed', {
            detail: this.value,
            bubbles: true
        }));
    }
};
__decorate([
    property({ type: String })
], LitTextarea.prototype, "placeholder", void 0);
__decorate([
    property({ type: String })
], LitTextarea.prototype, "resize", void 0);
LitTextarea = __decorate([
    customElement('lit-textarea')
], LitTextarea);
export { LitTextarea };