vira 32.0.0-beta.0 → 32.1.0

package/{src/elements/pop-up/vira-menu-item.element.ts → dist/elements/pop-up/vira-menu-item.element.js}

@@ -1,47 +1,23 @@
-import {assertWrap} from '@augment-vir/assert';
-import {type PartialWithUndefined} from '@augment-vir/common';
-import {css, defineElementEvent, html} from 'element-vir';
-import {listenTo} from 'typed-event-target';
-import {type ViraIconSvg} from '../../icons/icon-svg.js';
-import {Check24Icon} from '../../icons/icon-svgs/24/check-24.icon.js';
-import {viraFormCssVars} from '../../styles/form-styles.js';
-import {noUserSelect} from '../../styles/index.js';
-import {defineViraElement} from '../../util/define-vira-element.js';
-import {ViraIcon} from '../vira-icon.element.js';
-
+import { assertWrap } from '@augment-vir/assert';
+import { css, defineElementEvent, html } from 'element-vir';
+import { listenTo } from 'typed-event-target';
+import { Check24Icon } from '../../icons/icon-svgs/24/check-24.icon.js';
+import { viraFormCssVars } from '../../styles/form-styles.js';
+import { noUserSelect } from '../../styles/index.js';
+import { defineViraElement } from '../../util/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<
-    PartialWithUndefined<{
-        selected: boolean;
-        disabled: boolean;
-        /**
-         * Set this to `true` to disable the default `ViraMenuItem` hover and active styles so you
-         * can apply your own.
-         */
-        disablePointerStyles: boolean;
-        /**
-         * If provided, this will override the checkmark icon. If this is provided, the icon will
-         * _always_ be shown, even if `selected` is set to `false`.
-         */
-        iconOverride: ViraIconSvg;
-        /**
-         * When `true`, activating this item will _not_ close the containing pop-up.
-         *
-         * @default false
-         */
-        keepOpenAfterInteraction: boolean;
-    }>
->()({
+export const ViraMenuItem = defineViraElement()({
     tagName: 'vira-menu-item',
     state() {
         return {
             /** Removes event listeners registered during init. */
-            cleanupListeners: undefined as undefined | (() => void),
+            cleanupListeners: undefined,
         };
     },
     events: {
@@ -50,14 +26,24 @@ export const ViraMenuItem = defineViraElement<
          * containers (e.g. `ViraPopUpTrigger`) listen to this to close the pop-up on selection,
          * gated by `keepOpenAfterInteraction`.
          */
-        activate: defineElementEvent<undefined>(),
+        activate: defineElementEvent(),
     },
     hostClasses: {
-        'vira-menu-item-selected': ({inputs}) => !!inputs.selected || !!inputs.iconOverride,
-        'vira-menu-item-disabled': ({inputs}) => !!inputs.disabled,
-        'vira-menu-item-enabled': ({inputs}) => !inputs.disabled,
-        'vira-menu-item-default-icon': ({inputs}) => !inputs.iconOverride,
-        'vira-menu-item-default-styles': ({inputs}) => !inputs.disablePointerStyles,
+        'vira-menu-item-selected'({ inputs }) {
+            return !!inputs.selected || !!inputs.iconOverride;
+        },
+        'vira-menu-item-disabled'({ inputs }) {
+            return !!inputs.disabled;
+        },
+        'vira-menu-item-enabled'({ inputs }) {
+            return !inputs.disabled;
+        },
+        'vira-menu-item-default-icon'({ inputs }) {
+            return !inputs.iconOverride;
+        },
+        'vira-menu-item-default-styles'({ inputs }) {
+            return !inputs.disablePointerStyles;
+        },
     },
     cssVars: {
         /** Horizontal gap between a menu item's icon and its label. */
@@ -65,8 +51,8 @@ export const ViraMenuItem = defineViraElement<
         'vira-menu-item-padding': '6px 8px',
         'vira-menu-item-border-radius': '4px',
     },
-    styles: ({hostClasses, cssVars}) => {
-        return css`
+    styles({ hostClasses, cssVars }) {
+        return css `
             :host {
                 display: flex;
                 flex-shrink: 0;
@@ -81,9 +67,7 @@ export const ViraMenuItem = defineViraElement<
                 text-align: left;
             }
 
-            ${hostClasses['vira-menu-item-disabled'].selector}${hostClasses[
-                'vira-menu-item-default-styles'
-            ].selector} {
+            ${hostClasses['vira-menu-item-disabled'].selector}${hostClasses['vira-menu-item-default-styles'].selector} {
                 cursor: not-allowed;
 
                 & .slot-wrapper,
@@ -98,9 +82,7 @@ export const ViraMenuItem = defineViraElement<
                 outline: none;
             }
 
-            ${hostClasses['vira-menu-item-enabled'].selector}${hostClasses[
-                'vira-menu-item-default-styles'
-            ].selector} {
+            ${hostClasses['vira-menu-item-enabled'].selector}${hostClasses['vira-menu-item-default-styles'].selector} {
                 cursor: pointer;
 
                 &:host(:focus) {
@@ -139,23 +121,22 @@ export const ViraMenuItem = defineViraElement<
             }
         `;
     },
-    init({state, updateState, host, inputs, dispatch, events}) {
+    init({ state, updateState, host, inputs, dispatch, events }) {
         host.setAttribute('role', 'menuitem');
         host.setAttribute('tabindex', inputs.disabled ? '-1' : '0');
         host.setAttribute('aria-selected', String(!!inputs.selected));
         host.setAttribute('aria-disabled', String(!!inputs.disabled));
         state.cleanupListeners?.();
-        const propagating: Record<string, boolean> = {};
-
-        function propagateMouseEvent(event: Event) {
+        const propagating = {};
+        function propagateMouseEvent(event) {
             if (propagating[event.type]) {
                 return;
-            } else if (inputs.disabled) {
+            }
+            else if (inputs.disabled) {
                 event.preventDefault();
                 event.stopPropagation();
                 return;
             }
-
             /**
              * Only forward `click`. Slotted content is activated by a single forwarded click, so
              * forwarding `mousedown` as well would double-trigger interactions: a `<select>`, for
@@ -167,73 +148,56 @@ export const ViraMenuItem = defineViraElement<
             if (event.type !== 'click') {
                 return;
             }
-
             if (inputs.keepOpenAfterInteraction) {
                 event.stopPropagation();
             }
-
-            const slotElement = assertWrap.instanceOf(
-                host.shadowRoot.querySelector('slot'),
-                HTMLSlotElement,
-            );
-
+            const slotElement = assertWrap.instanceOf(host.shadowRoot.querySelector('slot'), HTMLSlotElement);
             slotElement
                 .assignedElements({
-                    flatten: true,
-                })
+                flatten: true,
+            })
                 .forEach((element) => {
-                    if (element instanceof HTMLElement && !event.composedPath().includes(element)) {
-                        event.preventDefault();
-                        event.stopPropagation();
-                        propagating[event.type] = true;
-                        const hasModifiers =
-                            event instanceof MouseEvent &&
-                            (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey);
-
-                        if (hasModifiers) {
-                            /**
-                             * If modifier keys are present, dispatch a synthetic MouseEvent so that
-                             * the modifier keys are preserved. This is needed so that cmd+click
-                             * opens links in a new tab.
-                             */
-                            element.dispatchEvent(new MouseEvent('click', event));
-                        } else {
-                            /**
-                             * Use `.click()` instead of dispatching a synthetic MouseEvent so that
-                             * the resulting event carries user activation. This is required for
-                             * APIs like `showPicker()` on `<select>` elements.
-                             */
-                            element.click();
-                        }
-                        delete propagating[event.type];
+                if (element instanceof HTMLElement && !event.composedPath().includes(element)) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    propagating[event.type] = true;
+                    const hasModifiers = event instanceof MouseEvent &&
+                        (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey);
+                    if (hasModifiers) {
+                        /**
+                         * If modifier keys are present, dispatch a synthetic MouseEvent so that
+                         * the modifier keys are preserved. This is needed so that cmd+click
+                         * opens links in a new tab.
+                         */
+                        element.dispatchEvent(new MouseEvent('click', event));
+                    }
+                    else {
+                        /**
+                         * Use `.click()` instead of dispatching a synthetic MouseEvent so that
+                         * the resulting event carries user activation. This is required for
+                         * APIs like `showPicker()` on `<select>` elements.
+                         */
+                        element.click();
                     }
-                });
+                    delete propagating[event.type];
+                }
+            });
         }
-
         const listenerRemovers = [
             listenTo(host, 'click', propagateMouseEvent),
             listenTo(host, 'mousedown', propagateMouseEvent),
-            listenTo(
-                host,
-                'click',
-                (event) => {
-                    if (
-                        propagating[event.type] ||
-                        inputs.disabled ||
-                        inputs.keepOpenAfterInteraction
-                    ) {
-                        return;
-                    }
-                    dispatch(
-                        new events.activate({
-                            detail: undefined,
-                        }),
-                    );
-                },
-                {
-                    capture: true,
-                },
-            ),
+            listenTo(host, 'click', (event) => {
+                if (propagating[event.type] ||
+                    inputs.disabled ||
+                    inputs.keepOpenAfterInteraction) {
+                    return;
+                }
+                dispatch(new events.activate({
+                    detail: undefined,
+                }));
+            }, {
+                capture: true,
+            }),
             listenTo(host, 'mouseenter', () => {
                 if (!inputs.disabled) {
                     host.focus();
@@ -245,24 +209,23 @@ export const ViraMenuItem = defineViraElement<
                 }
             }),
         ];
-
         updateState({
-            cleanupListeners: () => {
+            cleanupListeners() {
                 listenerRemovers.forEach((remover) => remover());
             },
         });
     },
-    cleanup({state, updateState}) {
+    cleanup({ state, updateState }) {
         state.cleanupListeners?.();
         updateState({
             cleanupListeners: undefined,
         });
     },
-    render({inputs}) {
-        return html`
+    render({ inputs }) {
+        return html `
             <${ViraIcon.assign({
-                icon: inputs.iconOverride || Check24Icon,
-            })}></${ViraIcon}>
+            icon: inputs.iconOverride || Check24Icon,
+        })}></${ViraIcon}>
             <div class="slot-wrapper">
                 <slot>&nbsp;</slot>
             </div>

package/dist/elements/pop-up/vira-menu-trigger.element.d.ts

@@ -0,0 +1,45 @@
+import { type PartialWithUndefined } from '@augment-vir/common';
+import { type NavController } from 'device-navigation';
+import { type PopUpManager, type ShowPopUpResult } from '../../util/pop-up-manager.js';
+import { type ViraMenuCornerStyle } from './vira-menu.element.js';
+import { type PopUpOffset, type PopUpTriggerPosition } from './vira-pop-up-trigger.element.js';
+/**
+ * Test ids for {@link ViraMenuTrigger}.
+ *
+ * @category Internal
+ */
+export declare const viraMenuTriggerTestIds: {
+    menu: string;
+};
+/**
+ * A more specific wrapper of `ViraPopUpTrigger` that always opens a menu.
+ *
+ * @category PopUp
+ * @category Elements
+ */
+export declare const ViraMenuTrigger: import("element-vir").DeclarativeElementDefinition<`vira-${string}`, PartialWithUndefined<{
+    isDisabled: boolean;
+    z_debug_forceOpenState: boolean;
+    popUpOffset: PopUpOffset;
+    keepOpenAfterInteraction: boolean;
+    menuCornerStyle: ViraMenuCornerStyle;
+    /**
+     * If true, the focus outline is moved inside the element.
+     *
+     * @default false
+     */
+    useInsideFocus: boolean;
+    /**
+     * When `true`, the trigger will focus itself when the pop-up closes.
+     *
+     * @default false
+     */
+    focusOnClose: boolean;
+} & PopUpTriggerPosition>, {
+    navController: undefined | NavController;
+    popUpManager: undefined | PopUpManager;
+    /** `undefined` means the pop up is not currently showing. */
+    showPopUpResult: ShowPopUpResult | undefined;
+}, {
+    openChange: import("element-vir").DefineElementEvent<ShowPopUpResult | undefined>;
+}, `vira-${string}-`, `vira-${string}-`, readonly ["vira-menu-trigger-trigger"], readonly []>;

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

@@ -0,0 +1,100 @@
+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({
+                    detail: 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}>
+        `;
+    },
+});

package/dist/elements/pop-up/vira-menu.element.d.ts

@@ -0,0 +1,36 @@
+import { type PartialWithUndefined } from '@augment-vir/common';
+/**
+ * Possible corner styles for {@link ViraMenu}.
+ *
+ * @category Internal
+ */
+export declare enum ViraMenuCornerStyle {
+    /** Rounding of corners depends on the open direction of the menu. */
+    Directional = "directional",
+    /** All of the menus corners should be rounded. */
+    AllRounded = "all-rounded",
+    /** None of the menus corners should be rounded. */
+    AllSquare = "all-square"
+}
+/**
+ * Menu pop-up directions available for {@link ViraMenu}.
+ *
+ * @category Internal
+ */
+export declare enum ViraMenuPopUpDirection {
+    Downwards = "downwards",
+    Upwards = "upwards"
+}
+/**
+ * A simple default style wrapper for pop-up menus. Consider using `renderMenuItemEntries` to help
+ * rendering many menu items.
+ *
+ * @category PopUp
+ * @category Elements
+ */
+export declare const ViraMenu: import("element-vir").DeclarativeElementDefinition<"vira-menu", PartialWithUndefined<{
+    /** @default PopUpMenuDirection.Downwards */
+    direction: ViraMenuPopUpDirection;
+    /** @default PopUpMenuCornerStyle.Directional */
+    cornerStyle: ViraMenuCornerStyle;
+}>, {}, {}, "vira-menu-open-upwards" | "vira-menu-rounded" | "vira-menu-square", "vira-menu-padding", readonly [], readonly []>;

package/{src/elements/pop-up/vira-menu.element.ts → dist/elements/pop-up/vira-menu.element.js}

@@ -1,33 +1,31 @@
-import {type PartialWithUndefined} from '@augment-vir/common';
-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';
-
+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 enum ViraMenuCornerStyle {
+export var ViraMenuCornerStyle;
+(function (ViraMenuCornerStyle) {
     /** Rounding of corners depends on the open direction of the menu. */
-    Directional = 'directional',
+    ViraMenuCornerStyle["Directional"] = "directional";
     /** All of the menus corners should be rounded. */
-    AllRounded = 'all-rounded',
+    ViraMenuCornerStyle["AllRounded"] = "all-rounded";
     /** None of the menus corners should be rounded. */
-    AllSquare = 'all-square',
-}
-
+    ViraMenuCornerStyle["AllSquare"] = "all-square";
+})(ViraMenuCornerStyle || (ViraMenuCornerStyle = {}));
 /**
  * Menu pop-up directions available for {@link ViraMenu}.
  *
  * @category Internal
  */
-export enum ViraMenuPopUpDirection {
-    Downwards = 'downwards',
-    Upwards = 'upwards',
-}
-
+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.
@@ -35,25 +33,24 @@ export enum ViraMenuPopUpDirection {
  * @category PopUp
  * @category Elements
  */
-export const ViraMenu = defineViraElement<
-    PartialWithUndefined<{
-        /** @default PopUpMenuDirection.Downwards */
-        direction: ViraMenuPopUpDirection;
-        /** @default PopUpMenuCornerStyle.Directional */
-        cornerStyle: ViraMenuCornerStyle;
-    }>
->()({
+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,
+        'vira-menu-open-upwards'({ inputs }) {
+            return inputs.direction === ViraMenuPopUpDirection.Upwards;
+        },
+        'vira-menu-rounded'({ inputs }) {
+            return inputs.cornerStyle === ViraMenuCornerStyle.AllRounded;
+        },
+        'vira-menu-square'({ inputs }) {
+            return inputs.cornerStyle === ViraMenuCornerStyle.AllSquare;
+        },
     },
     cssVars: {
         'vira-menu-padding': '4px',
     },
-    styles: ({hostClasses, cssVars}) => {
-        return css`
+    styles({ hostClasses, cssVars }) {
+        return css `
             :host {
                 display: flex;
                 flex-direction: column;
@@ -88,7 +85,7 @@ export const ViraMenu = defineViraElement<
         `;
     },
     render() {
-        return html`
+        return html `
             <slot>&nbsp;</slot>
         `;
     },