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

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

import { css, html } from 'element-vir';
import { viraFormCssVars } from '../../styles/form-styles.js';
import { viraShadows } from '../../styles/shadows.js';
import { defineViraElement } from '../../util/define-vira-element.js';
/**
 * Possible corner styles for {@link ViraMenu}.
 *
 * @category Internal
 */
export var ViraMenuCornerStyle;
(function (ViraMenuCornerStyle) {
    /** Rounding of corners depends on the open direction of the menu. */
    ViraMenuCornerStyle["Directional"] = "directional";
    /** All of the menus corners should be rounded. */
    ViraMenuCornerStyle["AllRounded"] = "all-rounded";
    /** None of the menus corners should be rounded. */
    ViraMenuCornerStyle["AllSquare"] = "all-square";
})(ViraMenuCornerStyle || (ViraMenuCornerStyle = {}));
/**
 * Menu pop-up directions available for {@link ViraMenu}.
 *
 * @category Internal
 */
export var ViraMenuPopUpDirection;
(function (ViraMenuPopUpDirection) {
    ViraMenuPopUpDirection["Downwards"] = "downwards";
    ViraMenuPopUpDirection["Upwards"] = "upwards";
})(ViraMenuPopUpDirection || (ViraMenuPopUpDirection = {}));
/**
 * A simple default style wrapper for pop-up menus. Consider using `renderMenuItemEntries` to help
 * rendering many menu items.
 *
 * @category PopUp
 * @category Elements
 */
export const ViraMenu = defineViraElement()({
    tagName: 'vira-menu',
    hostClasses: {
        'vira-menu-open-upwards': ({ inputs }) => inputs.direction === ViraMenuPopUpDirection.Upwards,
        'vira-menu-rounded': ({ inputs }) => inputs.cornerStyle === ViraMenuCornerStyle.AllRounded,
        'vira-menu-square': ({ inputs }) => inputs.cornerStyle === ViraMenuCornerStyle.AllSquare,
    },
    styles: ({ hostClasses }) => css `
        :host {
            display: flex;
            flex-direction: column;
            max-width: 100%;
            max-height: 100%;
            overflow-y: auto;
            z-index: 99;
            box-sizing: border-box;
            overscroll-behavior: contain;
            border-radius: ${viraFormCssVars['vira-form-radius'].value};
            border-top-left-radius: 0;
            border-top-right-radius: 0;
            background-color: ${viraFormCssVars['vira-form-background-color'].value};
            border: 1px solid ${viraFormCssVars['vira-form-border-color'].value};
            color: ${viraFormCssVars['vira-form-foreground-color'].value};
            ${viraShadows.menuShadow}
        }

        ${hostClasses['vira-menu-open-upwards'].selector} {
            border-radius: ${viraFormCssVars['vira-form-radius'].value};
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
        }

        ${hostClasses['vira-menu-square'].selector} {
            border-radius: 0;
        }

        ${hostClasses['vira-menu-rounded'].selector} {
            border-radius: ${viraFormCssVars['vira-form-radius'].value};
        }
    `,
    render() {
        return html `
            <slot>&nbsp;</slot>
        `;
    },
});