ui-lit/textfield/index.js

UI Elements on LIT

import { __decorate } from "tslib";
import { live } from 'lit/directives/live.js';
import { LitElement, html, nothing } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import { formAssociated } from '../mixins/form-associated/index';
import '../icon';
import { input } from '../styles/input';
import { createRef, ref } from 'lit/directives/ref.js';
import { labled } from '../mixins/labled';
import { focusable } from '../mixins/focusable/index';
import { notificatable } from '../mixins/notificatable/index';
import { isiOS, IsSafari } from 'kailib';
const _isIOS = isiOS();
let LitTextField = class LitTextField extends focusable(labled(notificatable(formAssociated(LitElement)))) {
    constructor() {
        super(...arguments);
        this.size = 0;
        this.minlength = NaN;
        this.maxlength = NaN;
        this.spellcheck = false;
        this.pattern = '';
        this.placeholder = '';
        this.autocomplete = 'off';
        this.inputmode = 'text';
        this.type = 'text';
        this.useCancelButton = false;
        this.icon = '';
        this._selectionBeforeRender = 0;
        this._inputRef = createRef();
        this.hiddenPassword = true;
        this._value = '';
    }
    static get styles() {
        return [
            super.elementStyles,
            input
        ];
    }
    ;
    static get properties() {
        return {
            ...super.properties,
            value: { type: String },
        };
    }
    get selectionStart() {
        var _a;
        return ((_a = this._inputRef.value) === null || _a === void 0 ? void 0 : _a.selectionStart) || 0;
    }
    get valueAsDate() {
        return new Date(this.value);
    }
    set valueAsDate(value) {
        if (this.type === 'date') {
            this.value = (value).toISOString().substring(0, 10);
        }
    }
    get valueAsNumber() {
        if (this.type === 'date') {
            return this.value ? (new Date(this.value)).getTime() : 0;
        }
        return Number(this.value);
    }
    set valueAsNumber(value) {
        if (this.type === 'date') {
            this.value = (new Date(value)).toISOString().substring(0, 10);
        }
        else {
            this.value = value.toString();
        }
    }
    get value() {
        return this._value;
    }
    set value(value) {
        const oldValue = this._value;
        this._value = value;
        this.requestUpdate('value', oldValue);
    }
    _getType() {
        if (this.type === 'password') {
            return this.hiddenPassword ? 'password' : 'text';
        }
        return this.type;
    }
    validate() {
        if (this.type === 'date') {
            return;
        }
        super.validate();
        if (!isNaN(this.minlength)) {
            if (this.value && this.value.length < this.minlength) {
                this.setValidity({ tooShort: true });
            }
            else if (this.validity.tooShort) {
                this.setValidity({ tooShort: false });
            }
        }
        if (!isNaN(this.maxlength)) {
            if (this.value && this.value.length > this.maxlength) {
                this.setValidity({ tooLong: true });
            }
            else if (this.validity.tooLong) {
                this.setValidity({ tooLong: false });
            }
        }
        if (this.pattern) {
            const patten = (new RegExp(this.pattern));
            if (this.value && !patten.test(this.value)) {
                this.setValidity({ patternMismatch: true });
            }
            else if (this.validity.patternMismatch) {
                this.setValidity({ patternMismatch: false });
            }
        }
    }
    _iconslotTemplate() {
        if (!this.useCancelButton) {
            if (this.type === 'password') {
                return html `<div class = "icon toggle-password" 
                            @click = "${this.toggleHiddenPassword}">
                    <lit-icon icon = "${this.hiddenPassword ? 'show' : 'hide'}"></lit-icon>
                </div>`;
            }
            return html `
            <div class = "icon">
                <slot name = icon></slot>
            </div>`;
        }
        ;
        if (!this.value)
            return nothing;
        return html `<lit-icon 
                        @click = "${this._clearValue}"
                        icon = "cancel" 
                        danger
                        class = "icon cancel"></lit-icon>`;
    }
    render() {
        return html `
        ${super.render()}
        <div class = "wrapper" >
            <input type = "${this._getType()}" 
                ${ref(this._inputRef)}
                autocomplete = "on"
                placeholder = "${this.placeholder}"
                spellcheck = "${this.spellcheck}"
                inputmode = "${this.inputmode}"
                ?readonly = "${this.readonly}"
                ?disabled = "${this.disabled}"
                size = "${this.size}"
                @input = "${this._onInput}" 
                @change = "${this._onChange}"
                @click = "${this._onClick}"
                .value = ${live(this.value)}>
            ${this._iconslotTemplate()}
        </div>`;
    }
    _onClick(e) {
        e.stopPropagation();
    }
    willUpdate(_changedProperties) {
        super.willUpdate(_changedProperties);
        this._selectionBeforeRender = this.selectionStart;
    }
    updated(_changedProperties) {
        var _a;
        super.updated(_changedProperties);
        if (this._selectionBeforeRender !== this.selectionStart && !_isIOS && !IsSafari) {
            (_a = this._inputRef.value) === null || _a === void 0 ? void 0 : _a.setSelectionRange(this._selectionBeforeRender, this._selectionBeforeRender);
        }
        this.validate();
    }
    _clearValue() {
        this.value = '';
        this.notify();
    }
    toggleHiddenPassword(e) {
        this.hiddenPassword = !this.hiddenPassword;
    }
    _onChange(e) {
        this.reportValidity();
        this.notify();
    }
    _onInput(e) {
        this.value = e.target.value;
        this.notify();
    }
};
__decorate([
    property({ type: Number })
], LitTextField.prototype, "size", void 0);
__decorate([
    property({ type: Number })
], LitTextField.prototype, "minlength", void 0);
__decorate([
    property({ type: Number })
], LitTextField.prototype, "maxlength", void 0);
__decorate([
    property({ type: Boolean })
], LitTextField.prototype, "spellcheck", void 0);
__decorate([
    property({ type: String })
], LitTextField.prototype, "pattern", void 0);
__decorate([
    property({ type: String })
], LitTextField.prototype, "placeholder", void 0);
__decorate([
    property({ type: String })
], LitTextField.prototype, "autocomplete", void 0);
__decorate([
    property({ type: String })
], LitTextField.prototype, "inputmode", void 0);
__decorate([
    property({ type: String })
], LitTextField.prototype, "type", void 0);
__decorate([
    property({ type: Boolean })
], LitTextField.prototype, "useCancelButton", void 0);
__decorate([
    property()
], LitTextField.prototype, "icon", void 0);
__decorate([
    state()
], LitTextField.prototype, "hiddenPassword", void 0);
LitTextField = __decorate([
    customElement("lit-textfield")
], LitTextField);
export { LitTextField };