ui-lit/mixins/focusable/index.js

UI Elements on LIT

import { __decorate } from "tslib";
import { property } from 'lit/decorators.js';
export const focusable = (superClass) => {
    class FocusableElement extends superClass {
        constructor() {
            super(...arguments);
            this.autofocus = false;
        }
        get isFocused() {
            var _a, _b;
            const focusable = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('[focusable]');
            if (focusable) {
                return focusable.isFocused;
            }
            return !!((_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('*:focus'));
        }
        _getElement() {
            var _a;
            return (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input, button, textarea, lit-button, [focusable]');
        }
        connectedCallback() {
            super.connectedCallback();
            this.setAttribute('focusable', '');
        }
        blur() {
            const el = this._getElement();
            if (el) {
                el.blur();
            }
            else {
                super.blur();
            }
        }
        focus() {
            const el = this._getElement();
            if (el) {
                el.focus();
                if (el instanceof HTMLInputElement) {
                    el.setSelectionRange(el.value.length, el.value.length);
                }
            }
            else {
                super.focus();
            }
        }
        firstUpdated(props) {
            super.firstUpdated(props);
            if (this.autofocus) {
                this.focus();
            }
        }
    }
    __decorate([
        property({ type: Boolean, reflect: true })
    ], FocusableElement.prototype, "autofocus", void 0);
    return FocusableElement;
};