@universal-material/web/menu/menu-item.js

Material web components

import { __decorate } from "tslib";
import { html, nothing } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import { UmButtonWrapper } from '../shared/button-wrapper.js';
import { styles } from './menu-item.styles.js';
let UmMenuItem = class UmMenuItem extends UmButtonWrapper {
    constructor() {
        super(...arguments);
        this.active = false;
        this._hasLeadingIcon = false;
        this._hasTrailingIcon = false;
        this.hasBadge = false;
        this.innerRole = 'menuitem';
        this.#handleMouseEnter = () => this.dispatchEvent(new CustomEvent('menu-item-mouseenter', { bubbles: true }));
    }
    static { this.styles = [UmButtonWrapper.styles, styles]; }
    connectedCallback() {
        super.connectedCallback();
        this.role = 'presentation';
        this.addEventListener('mouseenter', this.#handleMouseEnter);
    }
    disconnectedCallback() {
        super.disconnectedCallback();
        this.removeEventListener('mouseenter', this.#handleMouseEnter);
    }
    #handleMouseEnter;
    _getContainerClasses() {
        return {
            ...super._getContainerClasses(),
            'force-focus-ring': this.active,
            'leading-icon': this._hasLeadingIcon,
            'trailing-icon': this._hasTrailingIcon,
        };
    }
    _renderContent() {
        return html `
      <div class="icon leading">
        <slot name="leading-icon" aria-hidden="true" @slotchange="${this.#handleLeadingIconSlotChange}"></slot>
      </div>
      <span class="label" id="text">
        <slot></slot>
      </span>
      <div class="icon trailing">
        <slot name="trailing-icon" aria-hidden="true" @slotchange="${this.#handleTrailingIconSlotChange}">
          <span>${this._renderDefaultTrailingIcon()}</span>
        </slot>
      </div>
    `;
    }
    _renderDefaultTrailingIcon() {
        return nothing;
    }
    #handleLeadingIconSlotChange(e) {
        this._hasLeadingIcon = e.target.assignedElements({ flatten: true }).length > 0;
    }
    #handleTrailingIconSlotChange(e) {
        this._hasTrailingIcon = e.target.assignedElements({ flatten: true }).length > 0;
    }
};
__decorate([
    property({ type: Boolean, reflect: true })
], UmMenuItem.prototype, "active", void 0);
__decorate([
    state()
], UmMenuItem.prototype, "_hasLeadingIcon", void 0);
__decorate([
    state()
], UmMenuItem.prototype, "_hasTrailingIcon", void 0);
__decorate([
    property({ type: Boolean, attribute: 'has-badge', reflect: true })
], UmMenuItem.prototype, "hasBadge", void 0);
UmMenuItem = __decorate([
    customElement('u-menu-item')
], UmMenuItem);
export { UmMenuItem };
//# sourceMappingURL=menu-item.js.map