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

Material web components

import { __decorate } from "tslib";
import { provide } from '@lit/context';
import { html, LitElement } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { fabMenuColorContext } from './fab-menu-color-context.js';
import { UmFabMenuItem } from './fab-menu-item.js';
import { fabMenuOpenContext } from './fab-menu-open-context.js';
import { styles } from './fab-menu.styles.js';
let UmFabMenu = class UmFabMenu extends LitElement {
    constructor() {
        super(...arguments);
        /**
         * The FAB color variant to render.
         */
        this.color = 'primary';
        /**
         * The size of the FAB.
         */
        this.size = 'medium';
        /**
         * Lowers the FAB's elevation.
         */
        this.lowered = false;
        this.open = false;
    }
    static { this.styles = [styles]; }
    render() {
        const containerClasses = classMap({
            open: this.open,
            [this.color]: true,
        });
        return html `
      <div class="container ${containerClasses}">
        <div class="menu-items">
          <slot @slotchange=${this.#handleIconItemsSlotChange}></slot>
        </div>
        <u-fab class="toggle-container" .size=${this.size}>
          <u-fab 
            class="toggle"
            .color=${this.color}
            .lowered=${this.lowered}
            .size=${this.open ? 'medium' : this.size}
            @click=${this.#toggle}>
            <span class="icon-container" aria-hidden="true">
              <span class="icon icon-default">
                <slot name="icon"></slot>
              </span>
              <span class="icon icon-close">
                <slot name="close-icon">
                  <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960" width="1em" fill="currentColor">
                    <path
                      d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z" />
                  </svg>
                </slot>
              </span>
            </span>
          </u-fab>
        </u-fab>
      </div>
    `;
    }
    #toggle() {
        this.open = !this.open;
    }
    #handleIconItemsSlotChange(event) {
        const elements = event.target.assignedElements({ flatten: true });
        let index = 0;
        for (const element of elements.filter(e => e instanceof UmFabMenuItem).reverse()) {
            element._index = index;
            index++;
        }
    }
};
__decorate([
    provide({ context: fabMenuColorContext }),
    property()
], UmFabMenu.prototype, "color", void 0);
__decorate([
    property()
], UmFabMenu.prototype, "size", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], UmFabMenu.prototype, "lowered", void 0);
__decorate([
    provide({ context: fabMenuOpenContext }),
    state()
], UmFabMenu.prototype, "open", void 0);
UmFabMenu = __decorate([
    customElement('u-fab-menu')
], UmFabMenu);
export { UmFabMenu };
//# sourceMappingURL=fab-menu.js.map