@skhemata/skhemata-form/dist/src/SkhemataFormInput.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 { css, SkhemataBase, property, unsafeHTML, } from '@skhemata/skhemata-base';
import { icon } from '@fortawesome/fontawesome-svg-core';
import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
export class SkhemataFormInput extends SkhemataBase {
    static get styles() {
        return [
            ...super.styles,
            css `
        .field {
          margin-bottom: 1rem;
        },
      `,
        ];
    }
    _value = null;
    faTriangle = unsafeHTML(icon(faExclamationTriangle, {
        transform: {
            size: 7,
        },
    }).html[0]);
    get value() {
        return this._value;
    }
    set value(value) {
        const oldValue = this._value;
        this._value = value;
        this.dispatchEvent(new CustomEvent('change', {
            detail: {
                name: this.name,
                value,
            },
        }));
        this.requestUpdate('value', oldValue);
    }
    label = '';
    horizontal = false;
    description = '';
    required = false;
    name = '';
    placeholder = '';
    errorMessage = '';
    valid = true;
    helpClass = '';
    translationData = {
        eng: {
            formErrorMinlength: 'Text must be longer',
            formErrorMaxlength: 'Text must be shorter',
            formErrorEmail: 'Not a valid email',
            formErrorRequired: 'This is required',
        },
    };
    constructor() {
        super();
        this.addEventListener('validate', this.validate);
        this.addEventListener('reset', this.reset);
    }
    async firstUpdated() {
        super.firstUpdated();
    }
    reset() {
        this.clearError();
        this.setAttribute('value', '');
    }
    validate() {
        if (this.required && !this.value) {
            this.valid = false;
            this.requestUpdate();
        }
    }
    clearError() {
        this.helpClass = '';
        this.valid = true;
        this.requestUpdate();
    }
}
__decorate([
    property({ type: Object })
], SkhemataFormInput.prototype, "faTriangle", void 0);
__decorate([
    property({ type: String, reflect: true }),
    property({ type: File, reflect: true }),
    property({ type: Boolean, reflect: true })
], SkhemataFormInput.prototype, "value", null);
__decorate([
    property({ type: String })
], SkhemataFormInput.prototype, "label", void 0);
__decorate([
    property({ type: Boolean, attribute: 'horizontal', reflect: true })
], SkhemataFormInput.prototype, "horizontal", void 0);
__decorate([
    property({ type: String })
], SkhemataFormInput.prototype, "description", void 0);
__decorate([
    property({ type: Boolean })
], SkhemataFormInput.prototype, "required", void 0);
__decorate([
    property({ type: String })
], SkhemataFormInput.prototype, "name", void 0);
__decorate([
    property({ type: String })
], SkhemataFormInput.prototype, "placeholder", void 0);
__decorate([
    property({ type: String })
], SkhemataFormInput.prototype, "errorMessage", void 0);
__decorate([
    property({ type: Boolean })
], SkhemataFormInput.prototype, "valid", void 0);
__decorate([
    property({ type: String })
], SkhemataFormInput.prototype, "helpClass", void 0);
__decorate([
    property({ type: Object })
], SkhemataFormInput.prototype, "translationData", void 0);
//# sourceMappingURL=SkhemataFormInput.js.map