ui-lit/menu/item.js

UI Elements on LIT

import { __decorate } from "tslib";
import { LitElement, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import '../select/option';
import { focusable } from '../mixins/focusable/index';
import { menuItemStyles } from './styles';
let LitMenuItem = class LitMenuItem extends focusable(LitElement) {
    constructor() {
        super(...arguments);
        this.value = '';
        this._handleFocus = (e) => {
            let event = '';
            if (e.key === 'ArrowDown') {
                event = 'focusNext';
            }
            else if (e.key === 'ArrowUp') {
                event = 'focusPrev';
            }
            else if (e.key === 'Enter' || e.key === ' ') {
                this.dispatchEvent(new CustomEvent("menuSelect", {
                    detail: this.value,
                    composed: true,
                    bubbles: true
                }));
                e.preventDefault();
            }
            if (event) {
                this.dispatchEvent(new CustomEvent(event, {
                    detail: true,
                    bubbles: true,
                    composed: true
                }));
                e.preventDefault();
            }
        };
    }
    render() {
        return html `<lit-button 
                        @keydown = "${this._handleFocus}"><slot slot = "icon-before" name = "icon-before"></slot><slot></slot></lit-button>`;
    }
};
LitMenuItem.styles = menuItemStyles;
__decorate([
    property({ type: String })
], LitMenuItem.prototype, "value", void 0);
LitMenuItem = __decorate([
    customElement("lit-menu-item")
], LitMenuItem);
export { LitMenuItem };