ui-lit/select/option.js

UI Elements on LIT

import { __decorate } from "tslib";
import { LitElement, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { focusable } from '../mixins/focusable/index';
import { optionStyles } from './styles';
import { mobileAndTabletCheck } from 'kailib';
const options = [];
setInterval(() => {
    options.forEach(item => {
        if (item[1] !== item[0].textContent) {
            item[0].notify();
            item[1] = item[0].textContent || "";
        }
    });
}, 600);
let LitOption = class LitOption extends focusable(LitElement) {
    constructor() {
        super(...arguments);
        // @property({type: Boolean, reflect: true}) disabled: boolean = false;
        this.selected = false;
        this.disabled = false;
        this.label = '';
        this.value = '';
        this.visability = true;
        this.mobile = mobileAndTabletCheck();
        this._selectHost = null;
        this._handleFocus = (e) => {
            let event = '';
            if (e.key === 'ArrowDown') {
                event = 'focusNext';
            }
            else if (e.key === 'ArrowUp') {
                event = 'focusPrev';
            }
            if (event) {
                this.dispatchEvent(new CustomEvent(event, {
                    detail: true,
                    bubbles: true,
                    composed: true
                }));
            }
        };
    }
    setSelectHost(host) {
        this._selectHost = host;
    }
    connectedCallback() {
        super.connectedCallback();
        setTimeout(() => {
            options.push([this, this.textContent || ""]);
        });
        this.dispatchEvent(new CustomEvent('optionConnected', {
            bubbles: true,
            composed: true,
            detail: this
        }));
    }
    disconnectedCallback() {
        var _a;
        super.disconnectedCallback();
        options.filter(item => item[0] !== this);
        (_a = this._selectHost) === null || _a === void 0 ? void 0 : _a.optionDisconnect(this);
    }
    updated(_changedProperties) {
        this.ariaLabel = this.label || this.textContent || "";
    }
    render() {
        return html `<lit-button 
                        ?disabled = "${this.disabled}"
                        @click = "${this.toggleSelect}"
                        between
                        borderless
                        tabIndex = "1"
                        @focus = "${this._focus}" 
                        @blur = "${this._blur}" >
                    <slot @slotchange = "${this.notify}"></slot> <span slot = "icon-after"></span></lit-button>`;
    }
    toggleSelect() {
        this.dispatchEvent(new CustomEvent('optionChange', {
            composed: true,
            bubbles: true,
            detail: this
        }));
    }
    _focus() {
        document.addEventListener('keydown', this._handleFocus);
    }
    _blur() {
        document.removeEventListener('keydown', this._handleFocus);
    }
    notify() {
        this.dispatchEvent(new CustomEvent('optionSlotChanged', {
            composed: true,
            bubbles: true,
        }));
    }
};
LitOption.styles = optionStyles;
__decorate([
    property({ type: Boolean, reflect: true })
], LitOption.prototype, "selected", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], LitOption.prototype, "disabled", void 0);
__decorate([
    property({ type: String })
], LitOption.prototype, "label", void 0);
__decorate([
    property({ type: String })
], LitOption.prototype, "value", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], LitOption.prototype, "visability", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], LitOption.prototype, "mobile", void 0);
LitOption = __decorate([
    customElement("lit-option")
], LitOption);
export { LitOption };