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

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

import { css, html } from 'element-vir';
import { Check24Icon } from '../../icons/icon-svgs/check-24.icon.js';
import { noUserSelect } from '../../styles/index.js';
import { defineViraElement } from '../define-vira-element.js';
import { ViraIcon } from '../vira-icon.element.js';
/**
 * An element for an individual menu item.
 *
 * @category PopUp
 * @category Elements
 */
export const ViraMenuItem = defineViraElement()({
    tagName: 'vira-menu-item',
    hostClasses: {
        'vira-menu-item-selected': ({ inputs }) => !inputs.hideCheckIcon && inputs.selected,
    },
    styles: ({ hostClasses }) => css `
        :host {
            display: flex;
            ${noUserSelect};
            box-sizing: border-box;
            max-width: 100%;
            overflow: hidden;
        }

        .item {
            pointer-events: none;
            min-height: 24px;
            display: flex;
            max-width: 100%;
            align-items: center;
            padding: 8px;
            padding-right: 24px;
            padding-left: 0;
            text-align: left;
            box-sizing: border-box;
        }

        ${hostClasses['vira-menu-item-selected'].selector} ${ViraIcon} {
            opacity: 1;
            visibility: visible;
        }

        /*
            The check icon looks centered when it has a border.
            However, it does not have a border here.
        */
        ${ViraIcon} {
            opacity: 0;
            margin-top: -4px;
            margin-right: -2px;
            margin-left: 2px;
            visibility: hidden;
        }
    `,
    render({ inputs }) {
        return html `
            <div class="item">
                <${ViraIcon.assign({ icon: Check24Icon })}></${ViraIcon}>
                <slot>${inputs.label}</slot>
            </div>
        `;
    },
});