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

Material web components

import { __decorate } from "tslib";
import { consume } from '@lit/context';
import { html } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import { UmButtonBase } from './button-base.js';
import { fabMenuColorContext } from './fab-menu-color-context.js';
import { styles } from './fab-menu-item.styles.js';
import { fabMenuOpenContext } from './fab-menu-open-context.js';
let UmFabMenuItem = class UmFabMenuItem extends UmButtonBase {
    constructor() {
        super(...arguments);
        this.#index = 0;
        /**
         * The text to display the FAB menu item.
         */
        this.label = null;
        this._hasIcon = false;
    }
    static { this.styles = [UmButtonBase.styles, styles]; }
    #index;
    get _index() {
        return this.#index;
    }
    set _index(value) {
        this.#index = value;
        this.style.setProperty('--_animation-delay-increment', value.toString());
    }
    _getContainerClasses() {
        return {
            ...super._getContainerClasses(),
            open: this._menuOpen,
            [this._color]: true,
            'has-icon': this._hasIcon,
        };
    }
    _renderContent() {
        return html `
      <span class="clipper"></span>
      <span class="icon" aria-hidden="true">
        <slot @slotchange=${this.#handleIconSlotChange}></slot>
      </span>
      <span class="label">${this.label}</span>
    `;
    }
    #handleIconSlotChange(e) {
        this._hasIcon = e.target.assignedElements({ flatten: true }).length > 0;
    }
};
__decorate([
    consume({ context: fabMenuColorContext, subscribe: true }),
    state()
], UmFabMenuItem.prototype, "_color", void 0);
__decorate([
    consume({ context: fabMenuOpenContext, subscribe: true }),
    state()
], UmFabMenuItem.prototype, "_menuOpen", void 0);
__decorate([
    property()
], UmFabMenuItem.prototype, "label", void 0);
__decorate([
    state()
], UmFabMenuItem.prototype, "_hasIcon", void 0);
__decorate([
    state()
], UmFabMenuItem.prototype, "_index", null);
UmFabMenuItem = __decorate([
    customElement('u-fab-menu-item')
], UmFabMenuItem);
export { UmFabMenuItem };
//# sourceMappingURL=fab-menu-item.js.map