@skhemata/skhemata-form/dist/src/SkhemataFormTextarea.js

Skhemata Form Web Component. This web component can be used as base web component when working with forms and inputs.

import { __decorate } from "tslib";
import { html, css, property } from '@skhemata/skhemata-base';
import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@riovir/wc-fontawesome';
import { SkhemataFormInput } from './SkhemataFormInput';
export class SkhemataFormTextarea extends SkhemataFormInput {
    static get styles() {
        return [
            ...super.styles,
            css `
        .field {
          margin-bottom: 1rem;
        }
      `,
        ];
    }
    static get scopedElements() {
        return {
            'fa-icon': FontAwesomeIcon,
        };
    }
    label = '';
    description = '';
    horizontal = false;
    rows = 4;
    minlength = -1;
    maxlength = -1;
    required = false;
    name = 'name';
    placeholder = '';
    errorMessage = 'Text is invalid';
    submitOnEnter = false;
    valid = true;
    helpClass = '';
    reset() {
        this.clearError();
        this.setAttribute('value', '');
    }
    validate() {
        this.helpClass = '';
        if ((this.minlength !== -1 && this.value.length < this.minlength) ||
            (this.maxlength !== -1 && this.value.length > this.maxlength) ||
            (this.required && this.value.length < 1)) {
            this.valid = false;
            this.helpClass = 'is-danger';
            this.errorMessage = 'text is invalid';
            this.requestUpdate();
        }
        this.dispatchEvent(new CustomEvent('is-valid', {
            detail: { valid: this.valid },
            bubbles: true,
            composed: true,
        }));
    }
    clearError() {
        this.helpClass = '';
        this.errorMessage = '';
        this.valid = true;
        this.requestUpdate();
    }
    handleInput(event) {
        this.clearError();
        this.setAttribute('value', event.target.value);
    }
    handleKeydown(event) {
        this.clearError();
        if (event.keyCode === '13' && this.submitOnEnter) {
            this.validate();
            if (!this.valid) {
                return;
            }
            this.dispatchEvent(new CustomEvent('submit'));
            event.preventDefault();
        }
    }
    render() {
        const field = html `
      <div class="field">
        ${this.label && !this.horizontal
            ? html `<label class="label">${this.label} ${this.required ? html `<span style="color: red">*</span>` : null}</label>`
            : null}
        <div class="control ${this.valid ? '' : 'has-icons-right'}">
          ${this.description && !this.horizontal
            ? html `<p>${this.description}</p>`
            : null}
          <textarea
            class="textarea ${this.valid ? `` : `is-danger`}"
            name="${this.name}"
            rows="${this.rows}"
            placeholder="${this.placeholder}"
            @keydown=${this.handleKeydown}
            @input=${this.handleInput}
            .value=${this.value}
          ></textarea>
          ${!this.valid
            ? html ` <span class="icon is-small is-right">
                <fa-icon .icon=${faExclamationTriangle}></fa-icon>
              </span>`
            : null}
        </div>
        ${!this.valid
            ? html `<p class="help ${this.helpClass}">${this.errorMessage}</p>`
            : ``}
      </div>
    `;
        const horizontalFieldLabel = html `
      <div class="field-label column is-one-quarter" style="text-align: left">
        ${this.label ? html `<label class="label">${this.label} ${this.required ? html `<span style="color: red">*</span>` : null}</label>` : null}
        ${this.description ? html `<p>${this.description}</p>` : null}
      </div>
    `;
        const horizontalField = html `
      <div class="field is-horizontal">
        ${this.label || this.description ? horizontalFieldLabel : null}
        <div class="field-body column">${field}</div>
      </div>
    `;
        return this.horizontal ? horizontalField : field;
    }
}
__decorate([
    property({ type: String })
], SkhemataFormTextarea.prototype, "label", void 0);
__decorate([
    property({ type: String })
], SkhemataFormTextarea.prototype, "description", void 0);
__decorate([
    property({ type: Boolean })
], SkhemataFormTextarea.prototype, "horizontal", void 0);
__decorate([
    property({ type: Number })
], SkhemataFormTextarea.prototype, "rows", void 0);
__decorate([
    property({ type: Number })
], SkhemataFormTextarea.prototype, "minlength", void 0);
__decorate([
    property({ type: Number })
], SkhemataFormTextarea.prototype, "maxlength", void 0);
__decorate([
    property({ type: Boolean })
], SkhemataFormTextarea.prototype, "required", void 0);
__decorate([
    property({ type: String })
], SkhemataFormTextarea.prototype, "name", void 0);
__decorate([
    property({ type: String })
], SkhemataFormTextarea.prototype, "placeholder", void 0);
__decorate([
    property({ type: String })
], SkhemataFormTextarea.prototype, "errorMessage", void 0);
__decorate([
    property({ type: Boolean })
], SkhemataFormTextarea.prototype, "submitOnEnter", void 0);
__decorate([
    property({ type: Boolean })
], SkhemataFormTextarea.prototype, "valid", void 0);
__decorate([
    property({ type: String })
], SkhemataFormTextarea.prototype, "helpClass", void 0);
//# sourceMappingURL=SkhemataFormTextarea.js.map