@3mo/split-button/dist/SplitButton.js

A split-button web-component based on Material Web Components.

import { __decorate } from "tslib";
import { component, css, Component, html, event, property } from '@a11d/lit';
import { disabledProperty } from '@3mo/disabled-property';
/**
 * @element mo-split-button
 *
 * @attr open - Whether the menu is open.
 * @attr disabled - Whether the "more" button is disabled.
 *
 * @slot - The content of the button.
 * @slot more - The content of the more menu.
 *
 * @fires openChange - Dispatched when the menu is opened or closed.
 */
let SplitButton = class SplitButton extends Component {
    constructor() {
        super(...arguments);
        this.open = false;
        this.disabled = false;
        this.handleMoreClick = (e) => {
            e.stopPropagation();
            this.open = !this.open;
        };
        this.handleOpenChange = (event) => {
            this.open = event.detail;
            this.openChange.dispatch(this.open);
        };
    }
    static get styles() {
        return css `
			:host {
				display: inline-flex;
				anchor-name: --mo-split-button;
			}

			:host([disabled]) {
				pointer-events: none;
			}

			mo-button {
				--mo-button-horizontal-padding: 6px;
			}

			mo-menu {
				position-anchor: --mo-split-button;
			}
		`;
    }
    get template() {
        return html `
			${this.buttonGroupTemplate}
			${this.menuTemplate}
		`;
    }
    get buttonGroupTemplate() {
        return html `
			<mo-button-group type='filled'>
				<slot></slot>
				${this.moreButtonTemplate}
			</mo-button-group>
		`;
    }
    get moreButtonTemplate() {
        return html `
			<mo-button ?disabled=${this.disabled} @click=${this.handleMoreClick}>
				<mo-icon icon='keyboard_arrow_down'></mo-icon>
			</mo-button>
		`;
    }
    get menuTemplate() {
        return html `
			<mo-menu .anchor=${this} target='more' placement='block-end' alignment='end'
				preventOpenOnAnchorEnter
				?open=${this.open}
				@openChange=${this.handleOpenChange}
			>
				<slot id='more' name='more' @click=${(e) => e.stopPropagation()}></slot>
			</mo-menu>
		`;
    }
};
__decorate([
    event()
], SplitButton.prototype, "openChange", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], SplitButton.prototype, "open", void 0);
__decorate([
    disabledProperty()
], SplitButton.prototype, "disabled", void 0);
SplitButton = __decorate([
    component('mo-split-button')
], SplitButton);
export { SplitButton };