vira 25.7.2 → 25.8.0

package/dist/elements/index.d.ts

@@ -1,10 +1,15 @@
 export * from './define-vira-element.js';
-export * from './dropdown/vira-dropdown-item.element.js';
-export * from './dropdown/vira-dropdown-options.element.js';
-export * from './dropdown/vira-dropdown.element.js';
+export * from './pop-up/pop-up-helpers.js';
+export * from './pop-up/pop-up-menu-item.js';
+export * from './pop-up/vira-menu-item.element.js';
+export * from './pop-up/vira-menu-trigger.element.js';
+export * from './pop-up/vira-menu.element.js';
+export * from './pop-up/vira-pop-up-menu.element.js';
+export * from './pop-up/vira-pop-up-trigger.element.js';
 export * from './vira-bold-text.element.js';
 export * from './vira-button.element.js';
 export * from './vira-collapsible-wrapper.element.js';
+export * from './vira-dropdown.element.js';
 export * from './vira-icon.element.js';
 export * from './vira-image.element.js';
 export * from './vira-input.element.js';

package/dist/elements/index.js

@@ -1,10 +1,15 @@
 export * from './define-vira-element.js';
-export * from './dropdown/vira-dropdown-item.element.js';
-export * from './dropdown/vira-dropdown-options.element.js';
-export * from './dropdown/vira-dropdown.element.js';
+export * from './pop-up/pop-up-helpers.js';
+export * from './pop-up/pop-up-menu-item.js';
+export * from './pop-up/vira-menu-item.element.js';
+export * from './pop-up/vira-menu-trigger.element.js';
+export * from './pop-up/vira-menu.element.js';
+export * from './pop-up/vira-pop-up-menu.element.js';
+export * from './pop-up/vira-pop-up-trigger.element.js';
 export * from './vira-bold-text.element.js';
 export * from './vira-button.element.js';
 export * from './vira-collapsible-wrapper.element.js';
+export * from './vira-dropdown.element.js';
 export * from './vira-icon.element.js';
 export * from './vira-image.element.js';
 export * from './vira-input.element.js';

package/dist/elements/pop-up/pop-up-helpers.d.ts

@@ -0,0 +1,30 @@
+import { type PopUpManager, type ShowPopUpResult } from '../../util/pop-up-manager.js';
+import { type MenuItem } from './pop-up-menu-item.js';
+/**
+ * Verifies that all items have unique ids.
+ *
+ * @category Internal
+ */
+export declare function assertUniqueIdProps(items: ReadonlyArray<Readonly<{
+    id: PropertyKey;
+}>>): void;
+/**
+ * Creates a new array of selections based on the current selection and new selection id. This
+ * behaves differently when multi select is enabled, hence this function.
+ *
+ * @category Internal
+ */
+export declare function updateSelectedItems(
+/** The item that should be newly toggled. */
+newItem: Readonly<MenuItem>, currentSelection?: ReadonlyArray<PropertyKey>, isMultiSelect?: boolean): PropertyKey[];
+/**
+ * Handles toggling pop up state for `ViraDropdown`.
+ *
+ * @category Internal
+ */
+export declare function triggerPopUpState({ open, callback, popUpManager, host, }: {
+    open: boolean;
+    popUpManager: PopUpManager;
+    host: HTMLElement;
+    callback?: ((showPopUpResult: ShowPopUpResult | undefined) => void) | undefined;
+}): void;

package/dist/elements/pop-up/pop-up-helpers.js

@@ -0,0 +1,58 @@
+import { joinWithFinalConjunction } from '@augment-vir/common';
+/**
+ * Verifies that all items have unique ids.
+ *
+ * @category Internal
+ */
+export function assertUniqueIdProps(items) {
+    const usedIds = new Set();
+    const duplicateIds = [];
+    items.forEach((option) => {
+        if (usedIds.has(option.id)) {
+            duplicateIds.push(option.id);
+        }
+        else {
+            usedIds.add(option.id);
+        }
+    });
+    if (duplicateIds.length) {
+        throw new Error(`Duplicate option ids were given: ${joinWithFinalConjunction(duplicateIds)}`);
+    }
+}
+/**
+ * Creates a new array of selections based on the current selection and new selection id. This
+ * behaves differently when multi select is enabled, hence this function.
+ *
+ * @category Internal
+ */
+export function updateSelectedItems(
+/** The item that should be newly toggled. */
+newItem, currentSelection = [], isMultiSelect = false) {
+    if (isMultiSelect) {
+        return currentSelection.includes(newItem.id)
+            ? currentSelection.filter((entry) => entry !== newItem.id)
+            : [
+                ...currentSelection,
+                newItem.id,
+            ];
+    }
+    else {
+        /** In single select, only the toggled item is allowed. */
+        return [newItem.id];
+    }
+}
+/**
+ * Handles toggling pop up state for `ViraDropdown`.
+ *
+ * @category Internal
+ */
+export function triggerPopUpState({ open, callback, popUpManager, host, }) {
+    if (open) {
+        const showPopUpResult = popUpManager.showPopUp(host);
+        callback?.(showPopUpResult);
+    }
+    else {
+        popUpManager.removePopUp();
+        callback?.(undefined);
+    }
+}

package/dist/elements/pop-up/pop-up-menu-item.d.ts

@@ -0,0 +1,24 @@
+import { type PartialWithUndefined } from '@augment-vir/common';
+import { type HTMLTemplateResult } from 'element-vir';
+/**
+ * An individual menu item consumed partially by `ViraMenuItem` and used by `ViraMenu`.
+ *
+ * @category Internal
+ */
+export type MenuItem = {
+    /** Each `id` must be unique across all items in a single menu. */
+    id: PropertyKey;
+    /** The user-facing label for this menu item. */
+    label: string;
+} & PartialWithUndefined<{
+    disabled: boolean;
+    /** Text assigned to the `title` HTML attribute that'll show on long hover. */
+    titleText: string;
+    /**
+     * An optional custom template for this menu item. This will replace the menu item text and icon
+     * content, but will still be styled correctly if used within `ViraMenu`. Feel free to use
+     * `ViraMenuItem` as the template with a custom `<slot>` to keep the selected checkmark
+     * functionality.
+     */
+    template: HTMLTemplateResult;
+}>;

package/dist/elements/pop-up/pop-up-menu-item.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,15 @@
+import { type MenuItem } from './pop-up-menu-item.js';
+/**
+ * An element for an individual menu item.
+ *
+ * @category PopUp
+ * @category Elements
+ */
+export declare const ViraMenuItem: import("element-vir").DeclarativeElementDefinition<"vira-menu-item", Readonly<{
+    /**
+     * The text to show in the menu item. If this is not provided, it is expected that you will
+     * instead utilize this element's `<slot>`.
+     */
+    label?: MenuItem["label"] | undefined;
+    selected: boolean;
+}>, {}, {}, "vira-menu-item-selected", "vira-menu-item-", readonly []>;

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

@@ -1,19 +1,18 @@
 import { css, html } from 'element-vir';
 import { Check24Icon } from '../../icons/icon-svgs/check-24.icon.js';
-import { viraBorders } from '../../styles/border.js';
-import { noUserSelect, viraAnimationDurations } from '../../styles/index.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 item in the ViraDropdown menu.
+ * An element for an individual menu item.
  *
- * @category Dropdown
+ * @category PopUp
  * @category Elements
  */
-export const ViraDropdownItem = defineViraElement()({
-    tagName: 'vira-dropdown-item',
+export const ViraMenuItem = defineViraElement()({
+    tagName: 'vira-menu-item',
     hostClasses: {
-        'vira-dropdown-item-selected': ({ inputs }) => inputs.selected,
+        'vira-menu-item-selected': ({ inputs }) => inputs.selected,
     },
     styles: ({ hostClasses }) => css `
         :host {
@@ -21,7 +20,7 @@ export const ViraDropdownItem = defineViraElement()({
             ${noUserSelect};
         }
 
-        .option {
+        .item {
             pointer-events: none;
             min-height: 24px;
             display: flex;
@@ -31,7 +30,7 @@ export const ViraDropdownItem = defineViraElement()({
             text-align: left;
         }
 
-        ${hostClasses['vira-dropdown-item-selected'].selector} ${ViraIcon} {
+        ${hostClasses['vira-menu-item-selected'].selector} ${ViraIcon} {
             opacity: 1;
         }
 
@@ -40,27 +39,15 @@ export const ViraDropdownItem = defineViraElement()({
             However, it does not have a border here.
         */
         ${ViraIcon} {
-            transition: opacity
-                ${viraAnimationDurations['vira-interaction-animation-duration'].value};
             opacity: 0;
             margin-top: -4px;
             margin-right: -2px;
             margin-left: 2px;
         }
-
-        .dropdown-wrapper:not(.reverse-direction) .option:last-of-type {
-            border-radius: 0 0 ${viraBorders['vira-form-input-radius'].value}
-                ${viraBorders['vira-form-input-radius'].value};
-        }
-
-        .dropdown-wrapper.reverse-direction .option:first-of-type {
-            border-radius: ${viraBorders['vira-form-input-radius'].value}
-                ${viraBorders['vira-form-input-radius'].value} 0 0;
-        }
     `,
     render({ inputs }) {
         return html `
-            <div class="option">
+            <div class="item">
                 <${ViraIcon.assign({ icon: Check24Icon })}></${ViraIcon}>
                 <slot>${inputs.label}</slot>
             </div>

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

@@ -0,0 +1,37 @@
+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 MenuItem } from './pop-up-menu-item.js';
+import { type PopUpOffset } 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-menu-trigger", {
+    items: ReadonlyArray<Readonly<MenuItem>>;
+} & PartialWithUndefined<{
+    /** The selected item ids from the given `items` object. */
+    selected: ReadonlyArray<PropertyKey>;
+    isDisabled: boolean;
+    isMultiSelect: boolean;
+    z_debug_forceOpenState: boolean;
+    popUpOffset: PopUpOffset;
+}>, {
+    navController: undefined | NavController;
+    popUpManager: undefined | PopUpManager;
+    /** `undefined` means the pop up is not currently showing. */
+    showPopUpResult: ShowPopUpResult | undefined;
+}, {
+    itemActivate: import("element-vir").DefineEvent<PropertyKey[]>;
+    openChange: import("element-vir").DefineEvent<ShowPopUpResult | undefined>;
+}, "vira-menu-trigger-", "vira-menu-trigger-", readonly ["trigger"]>;

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

@@ -0,0 +1,107 @@
+import { classMap, css, defineElementEvent, html, listen, nothing, testId } from 'element-vir';
+import { defineViraElement } from '../define-vira-element.js';
+import { updateSelectedItems } from './pop-up-helpers.js';
+import { ViraMenu } from './vira-menu.element.js';
+import { ViraPopUpMenu } from './vira-pop-up-menu.element.js';
+import { 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',
+    styles: css `
+        :host {
+            display: inline-flex;
+            box-sizing: border-box;
+            vertical-align: middle;
+            max-width: 100%;
+        }
+
+        ${ViraPopUpTrigger} {
+            width: 100%;
+        }
+    `,
+    events: {
+        itemActivate: defineElementEvent(),
+        openChange: defineElementEvent(),
+    },
+    slotNames: ['trigger'],
+    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({
+            isDisabled: inputs.isDisabled,
+            keepOpenAfterInteraction: true,
+            z_debug_forceOpenState: inputs.z_debug_forceOpenState,
+            popUpOffset: inputs.popUpOffset,
+        })}
+                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,
+            });
+        })}
+                ${listen(ViraPopUpTrigger.events.navSelect, (event) => {
+            const itemIndex = event.detail.x;
+            const item = inputs.items[itemIndex];
+            if (!item) {
+                throw new Error(`Found no dropdown option at index '${itemIndex}'`);
+            }
+            dispatch(new events.itemActivate(updateSelectedItems(item, inputs.selected, inputs.isMultiSelect)));
+            if (!inputs.isMultiSelect) {
+                state.popUpManager?.removePopUp();
+            }
+        })}
+            >
+                <slot slot=${slotNames.trigger} name=${ViraPopUpTrigger.slotNames.trigger}></slot>
+                ${state.navController && state.showPopUpResult
+            ? html `
+                          <${ViraPopUpMenu.assign({
+                openUpwards: !state.showPopUpResult.popDown,
+            })}
+                              slot=${ViraPopUpTrigger.slotNames.popUp}
+                          >
+                              <${ViraMenu.assign({
+                items: inputs.items,
+                selected: inputs.selected,
+                navController: state.navController,
+                isMultiSelect: !!inputs.isMultiSelect,
+            })}
+                                  ${testId(viraMenuTriggerTestIds.menu)}
+                              ></${ViraMenu}>
+                          </${ViraPopUpMenu}>
+                      `
+            : nothing}
+            </${ViraPopUpTrigger}>
+        `;
+    },
+});

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

@@ -0,0 +1,36 @@
+import { type PartialWithUndefined } from '@augment-vir/common';
+import { NavController } from 'device-navigation';
+import { type MenuItem } from './pop-up-menu-item.js';
+/**
+ * Test ids for {@link ViraMenu}.
+ *
+ * @category Internal
+ */
+export declare const viraMenuTestIds: {
+    item: string;
+};
+/**
+ * A wrapper for menu items. This can be used for dropdown items or menu bar dropdowns. To detect
+ * when items are selected or unselected, pass in a `NavController` instance and hook into its
+ * events.
+ *
+ * @category PopUp
+ * @category Elements
+ */
+export declare const ViraMenu: import("element-vir").DeclarativeElementDefinition<"vira-menu", Readonly<{
+    /**
+     * The parent nav controller for this menu. If none is provided, an internal nav
+     * controller is created (which means it can't be hooked into by external elements).
+     *
+     * It is recommended to not leave this `undefined`.
+     */
+    navController: NavController | undefined;
+    /** All menu items to show to the user. */
+    items: ReadonlyArray<Readonly<MenuItem>>;
+} & PartialWithUndefined<{
+    /** The ids of the currently selected menu items. */
+    selected: ReadonlyArray<PropertyKey>;
+    isMultiSelect: boolean;
+}>>, {
+    internalNavController: NavController;
+}, {}, "vira-menu-multiselect", "vira-menu-", readonly []>;

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

@@ -0,0 +1,129 @@
+import { nav, navAttribute, NavController, NavValue } from 'device-navigation';
+import { classMap, css, html, ifDefined, testId } from 'element-vir';
+import { viraFormCssVars } from '../../styles/form-themes.js';
+import { noNativeFormStyles, viraDisabledStyles } from '../../styles/index.js';
+import { defineViraElement } from '../define-vira-element.js';
+import { assertUniqueIdProps } from './pop-up-helpers.js';
+import { ViraMenuItem } from './vira-menu-item.element.js';
+/**
+ * Test ids for {@link ViraMenu}.
+ *
+ * @category Internal
+ */
+export const viraMenuTestIds = {
+    item: 'menu-item',
+};
+/**
+ * A wrapper for menu items. This can be used for dropdown items or menu bar dropdowns. To detect
+ * when items are selected or unselected, pass in a `NavController` instance and hook into its
+ * events.
+ *
+ * @category PopUp
+ * @category Elements
+ */
+export const ViraMenu = defineViraElement()({
+    tagName: 'vira-menu',
+    state({ inputs, host }) {
+        return {
+            internalNavController: inputs.navController || new NavController(host),
+        };
+    },
+    hostClasses: {
+        'vira-menu-multiselect': ({ inputs }) => !!inputs.isMultiSelect,
+    },
+    styles: ({ hostClasses }) => css `
+        :host {
+            display: flex;
+            flex-direction: column;
+
+            width: 100%;
+            max-height: 100%;
+            overflow-y: auto;
+            z-index: 100;
+            box-sizing: border-box;
+            background-color: ${viraFormCssVars['vira-form-background-color'].value};
+            color: ${viraFormCssVars['vira-form-foreground-color'].value};
+        }
+
+        .menu-item {
+            ${noNativeFormStyles};
+            background-color: white;
+            outline: none;
+            cursor: pointer;
+        }
+
+        ${navAttribute.css({
+        baseSelector: '.menu-item:not(.disabled):not(.selected)',
+        navValue: NavValue.Focused,
+    })}, ${navAttribute.css({
+        baseSelector: '.menu-item:not(.disabled):not(.selected)',
+        navValue: NavValue.Active,
+    })}, .menu-item:not(.disabled):not(.selected):hover {
+            background-color: ${viraFormCssVars['vira-form-selection-hover-background-color']
+        .value};
+            outline: none;
+        }
+
+        ${hostClasses['vira-menu-multiselect'].selector} {
+            &
+                ${navAttribute.css({
+        baseSelector: '.menu-item:not(.disabled)',
+        navValue: NavValue.Focused,
+    })},
+                ${navAttribute.css({
+        baseSelector: '.menu-item:not(.disabled)',
+        navValue: NavValue.Active,
+    })},
+                .menu-item:not(.disabled):hover {
+                background-color: ${viraFormCssVars['vira-form-selection-hover-background-color']
+        .value};
+                outline: none;
+            }
+        }
+
+        ${ViraMenuItem} {
+            pointer-events: none;
+        }
+
+        .menu-item.disabled {
+            ${viraDisabledStyles};
+            pointer-events: auto;
+        }
+    `,
+    cleanup({ inputs, state }) {
+        if (!inputs.navController) {
+            state.internalNavController.destroy();
+        }
+    },
+    render({ inputs, state }) {
+        assertUniqueIdProps(inputs.items);
+        const itemTemplates = inputs.items.map((item) => {
+            const selected = !!inputs.selected?.includes(item.id);
+            const innerTemplate = item.template ||
+                html `
+                    <${ViraMenuItem.assign({
+                    label: item.label,
+                    selected,
+                })}></${ViraMenuItem}>
+                `;
+            const disabled = item.disabled || (!inputs.isMultiSelect && selected);
+            return html `
+                <button
+                    class="menu-item ${classMap({
+                disabled: !!item.disabled,
+                selected,
+            })}"
+                    ${testId(viraMenuTestIds.item)}
+                    title=${ifDefined(item.titleText || undefined)}
+                    role="option"
+                    ${nav(state.internalNavController, { disabled })}
+                >
+                    ${innerTemplate}
+                </button>
+            `;
+        });
+        return html `
+            ${itemTemplates}
+        `;
+    },
+});

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

@@ -0,0 +1,10 @@
+/**
+ * A simple default style wrapper for pop-up menus.
+ *
+ * @category PopUp
+ * @category Elements
+ */
+export declare const ViraPopUpMenu: import("element-vir").DeclarativeElementDefinition<"vira-pop-up-menu", {
+    /** If true, indicates that the menu is opening upwards and should be styled accordingly. */
+    openUpwards?: boolean;
+}, {}, {}, "vira-pop-up-menu-open-upwards", "vira-pop-up-menu-", readonly []>;

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

@@ -0,0 +1,48 @@
+import { css, html } from 'element-vir';
+import { viraBorders } from '../../styles/border.js';
+import { viraFormCssVars } from '../../styles/form-themes.js';
+import { viraShadows } from '../../styles/shadows.js';
+import { defineViraElement } from '../define-vira-element.js';
+/**
+ * A simple default style wrapper for pop-up menus.
+ *
+ * @category PopUp
+ * @category Elements
+ */
+export const ViraPopUpMenu = defineViraElement()({
+    tagName: 'vira-pop-up-menu',
+    hostClasses: {
+        'vira-pop-up-menu-open-upwards': ({ inputs }) => !!inputs.openUpwards,
+    },
+    styles: ({ hostClasses }) => css `
+        :host {
+            display: flex;
+
+            width: 100%;
+            max-height: 100%;
+            overflow-y: auto;
+            z-index: 99;
+            box-sizing: border-box;
+            border-radius: ${viraBorders['vira-form-input-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-pop-up-menu-open-upwards'].selector} {
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 0;
+            border-top-left-radius: ${viraBorders['vira-form-input-radius'].value};
+            border-top-right-radius: ${viraBorders['vira-form-input-radius'].value};
+            ${viraShadows.menuShadowReversed}
+        }
+    `,
+    render() {
+        return html `
+            <slot></slot>
+        `;
+    },
+});

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

@@ -0,0 +1,44 @@
+import { type PartialWithUndefined } from '@augment-vir/common';
+import { NavController, type Coords } from 'device-navigation';
+import { PopUpManager, type ShowPopUpResult } from '../../util/pop-up-manager.js';
+/**
+ * Offsets applied to any menu opened by {@link ViraPopUpTrigger}.
+ *
+ * @category Internal
+ */
+export type PopUpOffset = PartialWithUndefined<{
+    vertical: number;
+    right: number;
+    left: number;
+}>;
+/**
+ * An element with slots for a pop-up trigger and pop-up contents.
+ *
+ * @category PopUp
+ * @category Elements
+ * @see https://electrovir.github.io/element-vir/vira/book/elements/vira-pop-up-trigger
+ */
+export declare const ViraPopUpTrigger: import("element-vir").DeclarativeElementDefinition<"vira-pop-up-trigger", PartialWithUndefined<{
+    isDisabled: boolean;
+    /** For debugging purposes only. Very bad for actual production code use. */
+    z_debug_forceOpenState: boolean;
+    /** Set to `true` to keep the pop-up open if it is interacted with. */
+    keepOpenAfterInteraction: boolean;
+    /** All values in px. */
+    popUpOffset?: PopUpOffset;
+}>, {
+    /** `undefined` means the pop up is not currently showing. */
+    showPopUpResult: ShowPopUpResult | undefined;
+    popUpManager: PopUpManager;
+}, {
+    navSelect: import("element-vir").DefineEvent<Coords>;
+    /**
+     * - `undefined` indicates that the pop-up just closed.
+     * - {@link ShowPopUpResult} indicates that the pop-up just opened.
+     */
+    openChange: import("element-vir").DefineEvent<ShowPopUpResult | undefined>;
+    init: import("element-vir").DefineEvent<{
+        navController: NavController;
+        popUpManager: PopUpManager;
+    }>;
+}, "vira-pop-up-trigger-disabled", "vira-pop-up-trigger-", readonly ["trigger", "popUp"]>;