vira/dist/elements/pop-up/vira-menu-trigger.element.js

A simple and highly versatile design system using element-vir.

import { classMap, css, defineElementEvent, html, listen, nothing } from 'element-vir';
import { defineViraElement } from '../../util/define-vira-element.js';
import { ViraMenu, ViraMenuPopUpDirection } from './vira-menu.element.js';
import { HorizontalAnchor, ViraPopUpTrigger, } from './vira-pop-up-trigger.element.js';
/**
 * Test ids for {@link ViraMenuTrigger}.
 *
 * @category Internal
 */
export const viraMenuTriggerTestIds = {
    menu: 'menu-trigger-menu',
};
/**
 * A more specific wrapper of `ViraPopUpTrigger` that always opens a menu.
 *
 * @category PopUp
 * @category Elements
 */
export const ViraMenuTrigger = defineViraElement()({
    tagName: 'vira-menu-trigger',
    slotNames: [
        'vira-menu-trigger-trigger',
    ],
    styles: css `
        :host {
            display: inline-flex;
            box-sizing: border-box;
            vertical-align: middle;
            max-width: 100%;
        }

        ${ViraPopUpTrigger} {
            width: 100%;
        }

        .full-width-menu {
            width: 100%;
        }
    `,
    events: {
        openChange: defineElementEvent(),
    },
    state() {
        return {
            navController: undefined,
            popUpManager: undefined,
            /** `undefined` means the pop up is not currently showing. */
            showPopUpResult: undefined,
        };
    },
    render({ inputs, state, updateState, dispatch, events, slotNames }) {
        return html `
            <${ViraPopUpTrigger.assign({
            ...inputs,
        })}
                class=${classMap({
            open: !!state.showPopUpResult,
        })}
                ${listen(ViraPopUpTrigger.events.init, (event) => {
            updateState({
                navController: event.detail.navController,
                popUpManager: event.detail.popUpManager,
            });
        })}
                ${listen(ViraPopUpTrigger.events.openChange, (event) => {
            if (!!state.showPopUpResult !== !!event.detail) {
                dispatch(new events.openChange(event.detail));
            }
            updateState({
                showPopUpResult: event.detail,
            });
        })}
            >
                <slot
                    name=${slotNames['vira-menu-trigger-trigger']}
                    slot=${ViraPopUpTrigger.slotNames['vira-pop-up-trigger-trigger']}
                ></slot>
                ${state.navController && state.showPopUpResult
            ? html `
                          <${ViraMenu.assign({
                direction: state.showPopUpResult.popDown
                    ? ViraMenuPopUpDirection.Downwards
                    : ViraMenuPopUpDirection.Upwards,
                cornerStyle: inputs.menuCornerStyle,
            })}
                              slot=${ViraPopUpTrigger.slotNames['vira-pop-up-trigger-pop-up']}
                              class=${classMap({
                'full-width-menu': inputs.horizontalAnchor === HorizontalAnchor.Both,
            })}
                          >
                              <slot></slot>
                          </${ViraMenu}>
                      `
            : nothing}
            </${ViraPopUpTrigger}>
        `;
    },
});