@jsdesign/jsd-pin-input/pin-input.js

JS Design PIN Input

import { __decorate } from "tslib";
import { LitElement, customElement, property, html, query } from 'lit-element';
import { baseStyles, handleFormSubmit } from '@jsdesign/jsd-base';
import { style } from './pin-input-css';
let PinInput = class PinInput extends LitElement {
    constructor() {
        super(...arguments);
        this.id = '';
        this.name = '';
        this.label = '';
        this.type = 'text';
        this.length = 4;
        this.value = '';
        this.required = false;
        this.disabled = false;
        this.autofocus = false;
        this.theme = 'light';
        this.placeholder = 'Enter value';
        this.errorMsg = '';
        this.helpMsg = '';
        this.fullWidth = false;
    }
    static get styles() {
        return [
            baseStyles,
            style
        ];
    }
    handleInputChange(i) {
        var _a, _b, _c, _d;
        const pinElem = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById(this.id + '-' + i);
        const value = pinElem.value;
        this.value = this.value.substr(0, i) + value + this.value.substr(i + 1);
        const nextIndex = i + 1;
        if (nextIndex < this.length && this.value) {
            const nextElem = (_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.getElementById(this.id + '-' + nextIndex);
            (_c = nextElem) === null || _c === void 0 ? void 0 : _c.focus();
            (_d = nextElem) === null || _d === void 0 ? void 0 : _d.select();
        }
    }
    handleKeyDown(event, i) {
        let key = event.which || event.keyCode;
        setTimeout(() => {
            var _a, _b, _c;
            if (key === 13) {
                handleFormSubmit(event, this);
            }
            else if (key === 8 || key === 46) {
                const prevIndex = i - 1;
                if (prevIndex >= 0) {
                    const prevElem = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById(this.id + '-' + prevIndex);
                    (_b = prevElem) === null || _b === void 0 ? void 0 : _b.focus();
                    (_c = prevElem) === null || _c === void 0 ? void 0 : _c.select();
                }
            }
        }, 0);
    }
    handleValueChange() {
        let newEvent = new Event('change', {
            bubbles: true,
            composed: true
        });
        this.dispatchEvent(newEvent);
    }
    firstUpdated() {
        var _a;
        if (this.autofocus) {
            const firstElem = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById(this.id + '-' + 0);
            firstElem.select();
        }
    }
    render() {
        return html `
            <div class='text-input ${this.theme}' >
                ${this.label ? html `<label class='label' for='${this.id}'>${this.label}</label>` : ''}
                <div class='input-wrapper ${this.fullWidth ? 'full-width' : ''}'>
                ${(() => {
            let inputList = [];
            for (let i = 0; i < this.length; i++) {
                inputList.push(i);
            }
            return inputList.map((i) => html `<input id='${this.id}-${i}'      
                                name='${this.name}-${i}' 
                                type='${this.type}' 
                                .value='${this.value[i] ? this.value[i] : ''}'
                                ?required='${this.required}'
                                ?disabled='${this.disabled}'
                                maxlength='1'
                                ?autofocus='${this.autofocus && i === 0}'
                                class='wrapper-box ${this.errorMsg ? 'error' : ''}' 
                                placeholder='-' 
                                @input='${() => this.handleInputChange(i)}'
                                @keydown='${(e) => this.handleKeyDown(e, i)}'
                                autocomplete='off' />`);
        })()}   
                </div>
                ${this.errorMsg ? html `<div class='error-message'>${this.errorMsg}</div>` : ''}
                ${this.helpMsg && !this.errorMsg ? html `<div class='help-message'>${this.helpMsg}</div>` : ''}
            </div>
        `;
    }
};
__decorate([
    query('input')
], PinInput.prototype, "inputElement", void 0);
__decorate([
    property({ type: String })
], PinInput.prototype, "id", void 0);
__decorate([
    property({ type: String })
], PinInput.prototype, "name", void 0);
__decorate([
    property({ type: String })
], PinInput.prototype, "label", void 0);
__decorate([
    property({ type: String })
], PinInput.prototype, "type", void 0);
__decorate([
    property({ type: String })
], PinInput.prototype, "length", void 0);
__decorate([
    property({ type: String, reflect: true })
], PinInput.prototype, "value", void 0);
__decorate([
    property({ type: Boolean })
], PinInput.prototype, "required", void 0);
__decorate([
    property({ type: Boolean })
], PinInput.prototype, "disabled", void 0);
__decorate([
    property({ type: Boolean })
], PinInput.prototype, "autofocus", void 0);
__decorate([
    property({ type: String })
], PinInput.prototype, "theme", void 0);
__decorate([
    property({ type: String })
], PinInput.prototype, "placeholder", void 0);
__decorate([
    property({ type: String, attribute: 'error-msg' })
], PinInput.prototype, "errorMsg", void 0);
__decorate([
    property({ type: String, attribute: 'help-msg' })
], PinInput.prototype, "helpMsg", void 0);
__decorate([
    property({ type: Boolean, attribute: 'full-width' })
], PinInput.prototype, "fullWidth", void 0);
PinInput = __decorate([
    customElement('jsd-pin-input')
], PinInput);
export { PinInput };
//# sourceMappingURL=pin-input.js.map