vira 32.3.0 → 33.0.0

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

@@ -1,88 +0,0 @@
-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 }) {
-            return inputs.direction === ViraMenuPopUpDirection.Upwards;
-        },
-        'vira-menu-rounded'({ inputs }) {
-            return inputs.cornerStyle === ViraMenuCornerStyle.AllRounded;
-        },
-        'vira-menu-square'({ inputs }) {
-            return inputs.cornerStyle === ViraMenuCornerStyle.AllSquare;
-        },
-    },
-    styles({ hostClasses }) {
-        return css `
-            :host {
-                display: flex;
-                flex-direction: column;
-                max-width: 100%;
-                max-height: 100%;
-                overflow-y: auto;
-                z-index: 99;
-                box-sizing: border-box;
-                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>
-        `;
-    },
-});

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

@@ -1,109 +0,0 @@
-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;
-}>;
-/**
- * Anchor options for pop-ups.
- *
- * @category Internal
- */
-export declare enum HorizontalAnchor {
-    /**
-     * The left side of the pop-up will be anchored to the left side of the trigger, allowing the
-     * pop-up to grow on the right side of the trigger.
-     */
-    Left = "left",
-    /**
-     * The Right side of the pop-up will be anchored to the right side of the trigger, allowing the
-     * pop-up to grow on the left side of the trigger.
-     */
-    Right = "right",
-    /** Restrict the pop-up on both sides. */
-    Both = "both",
-    /**
-     * Automatically choose left or right based on available space, defaulting to anchoring on the
-     * left side.
-     *
-     * This is the default anchor for {@link ViraPopUpTrigger}.
-     */
-    Auto = "auto"
-}
-/**
- * Configs for {@link ViraPopUpTrigger} pop-up positioning and sizing.
- *
- * @category Internal
- */
-export type PopUpTriggerPosition = {
-    /**
-     * - `HorizontalAnchor.Left`: pop-up is anchored to the left side of the trigger and the pop-up
-     *   can grow to the right.
-     * - `HorizontalAnchor.Right`: pop-up is anchored to the right side of the trigger and the pop-up
-     *   can grow to the left.
-     * - `HorizontalAnchor.Both`: pop-up is anchored on both sides of the trigger and cannot grow
-     *   beyond it.
-     * - `HorizontalAnchor.Auto`: automatically choose left or right anchor based on available space,
-     *   defaulting to left anchor. (This is the default experience.)
-     *
-     * Note that when `HorizontalAnchor.Both` is _not_ used, this anchor will cancel out any
-     * `popUpOffset` for the direction _opposite_ of the chosen anchor.
-     */
-    horizontalAnchor: HorizontalAnchor;
-    /**
-     * When `true`, the pop-up will not have its maximum width constrained to fit within the
-     * overflow container. The positioning logic (left/right) will still be applied.
-     *
-     * @default false
-     */
-    ignoreMaxWidth: boolean;
-    /**
-     * When `true`, the pop-up will not have its maximum height constrained to fit within the
-     * overflow container. The positioning logic (up/down) will still be applied.
-     *
-     * @default false
-     */
-    ignoreMaxHeight: boolean;
-};
-/**
- * An element with slots for a pop-up trigger and pop-up contents.
- *
- * @category PopUp
- * @category Elements
- * @see https://electrovir.github.io/vira/book/elements/vira-pop-up-trigger
- */
-export declare const ViraPopUpTrigger: import("element-vir").DeclarativeElementDefinition<`vira-${string}`, PartialWithUndefined<PopUpTriggerPosition & {
-    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;
-    /** If true, the focus outline is moved inside the element. */
-    useInsideFocus: boolean;
-    /** When `true`, the trigger will focus itself when the pop-up closes. */
-    focusOnClose: boolean;
-}>, {
-    /** `undefined` means the pop up is not currently showing. */
-    showPopUpResult: ShowPopUpResult | undefined;
-    popUpManager: PopUpManager;
-}, {
-    navSelect: import("element-vir").DefineElementEvent<Coords>;
-    /**
-     * - `undefined` indicates that the pop-up just closed.
-     * - {@link ShowPopUpResult} indicates that the pop-up just opened.
-     */
-    openChange: import("element-vir").DefineElementEvent<ShowPopUpResult | undefined>;
-    init: import("element-vir").DefineElementEvent<{
-        navController: NavController;
-        popUpManager: PopUpManager;
-    }>;
-}, "vira-pop-up-trigger-disabled" | "vira-pop-up-trigger-inside-focus" | "vira-pop-up-trigger-outside-focus", `vira-${string}-`, readonly ["vira-pop-up-trigger-trigger", "vira-pop-up-trigger-pop-up"], readonly []>;

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

@@ -1,408 +0,0 @@
-import { assert, assertWrap } from '@augment-vir/assert';
-import { walkActiveElement } from '@augment-vir/web';
-import { NavController } from 'device-navigation';
-import { classMap, css, defineElementEvent, html, listen, renderIf } from 'element-vir';
-import { createFocusStyles } from '../../styles/focus.js';
-import { noNativeFormStyles, noUserSelect, viraDisabledStyles } from '../../styles/index.js';
-import { defineViraElement } from '../../util/define-vira-element.js';
-import { triggerPopUpState } from '../../util/pop-up-helpers.js';
-import { HidePopUpEvent, isInputLikeElement, isMouseEventOnScrollbar, NavSelectEvent, PopUpManager, } from '../../util/pop-up-manager.js';
-import { ViraMenuItem } from './vira-menu-item.element.js';
-/**
- * Anchor options for pop-ups.
- *
- * @category Internal
- */
-export var HorizontalAnchor;
-(function (HorizontalAnchor) {
-    /**
-     * The left side of the pop-up will be anchored to the left side of the trigger, allowing the
-     * pop-up to grow on the right side of the trigger.
-     */
-    HorizontalAnchor["Left"] = "left";
-    /**
-     * The Right side of the pop-up will be anchored to the right side of the trigger, allowing the
-     * pop-up to grow on the left side of the trigger.
-     */
-    HorizontalAnchor["Right"] = "right";
-    /** Restrict the pop-up on both sides. */
-    HorizontalAnchor["Both"] = "both";
-    /**
-     * Automatically choose left or right based on available space, defaulting to anchoring on the
-     * left side.
-     *
-     * This is the default anchor for {@link ViraPopUpTrigger}.
-     */
-    HorizontalAnchor["Auto"] = "auto";
-})(HorizontalAnchor || (HorizontalAnchor = {}));
-/**
- * An element with slots for a pop-up trigger and pop-up contents.
- *
- * @category PopUp
- * @category Elements
- * @see https://electrovir.github.io/vira/book/elements/vira-pop-up-trigger
- */
-export const ViraPopUpTrigger = defineViraElement()({
-    tagName: 'vira-pop-up-trigger',
-    state({ host }) {
-        return {
-            /** `undefined` means the pop up is not currently showing. */
-            showPopUpResult: undefined,
-            popUpManager: new PopUpManager(new NavController(host, {
-                activateOnMouseUp: true,
-            })),
-        };
-    },
-    slotNames: [
-        'vira-pop-up-trigger-trigger',
-        'vira-pop-up-trigger-pop-up',
-    ],
-    hostClasses: {
-        'vira-pop-up-trigger-disabled'({ inputs }) {
-            return !!inputs.isDisabled;
-        },
-        'vira-pop-up-trigger-inside-focus'({ inputs }) {
-            return !!inputs.useInsideFocus;
-        },
-        'vira-pop-up-trigger-outside-focus'({ inputs }) {
-            return !inputs.useInsideFocus;
-        },
-    },
-    styles({ hostClasses }) {
-        return css `
-            :host {
-                display: inline-flex;
-                box-sizing: border-box;
-                vertical-align: middle;
-                position: relative;
-                max-width: 100%;
-            }
-
-            .dropdown-wrapper {
-                ${noNativeFormStyles};
-                cursor: pointer;
-                max-width: 100%;
-                position: relative;
-                flex-grow: 1;
-                box-sizing: border-box;
-            }
-
-            ${hostClasses['vira-pop-up-trigger-inside-focus'].selector} .dropdown-wrapper {
-                ${createFocusStyles({
-            renderInside: true,
-        })}
-            }
-            ${hostClasses['vira-pop-up-trigger-outside-focus'].selector} .dropdown-wrapper {
-                ${createFocusStyles()}
-            }
-
-            .dropdown-trigger {
-                box-sizing: border-box;
-                ${noUserSelect};
-            }
-
-            ${hostClasses['vira-pop-up-trigger-disabled'].selector} {
-                ${viraDisabledStyles}
-                pointer-events: auto;
-            }
-
-            ${hostClasses['vira-pop-up-trigger-disabled'].selector} .dropdown-wrapper {
-                pointer-events: none;
-            }
-
-            .pop-up-positioner {
-                position: absolute;
-                pointer-events: none;
-                display: flex;
-                box-sizing: border-box;
-                flex-direction: column;
-                align-items: flex-start;
-
-                /* highest possible z-index */
-                z-index: 2147483647;
-
-                & > * {
-                    pointer-events: auto;
-                    max-width: 100%;
-                }
-
-                &.right-aligned {
-                    align-items: flex-end;
-                }
-            }
-
-            .open-upwards .pop-up-positioner {
-                flex-direction: column-reverse;
-            }
-        `;
-    },
-    events: {
-        navSelect: defineElementEvent(),
-        /**
-         * - `undefined` indicates that the pop-up just closed.
-         * - {@link ShowPopUpResult} indicates that the pop-up just opened.
-         */
-        openChange: defineElementEvent(),
-        init: defineElementEvent(),
-    },
-    cleanup({ state, updateState }) {
-        updateState({
-            showPopUpResult: undefined,
-        });
-        state.popUpManager.destroy();
-    },
-    init({ state, updateState, host, inputs, dispatch, events }) {
-        /** Refocus the trigger and set the result to `undefined` when the pop up closes. */
-        state.popUpManager.listen(HidePopUpEvent, () => {
-            updateState({
-                showPopUpResult: undefined,
-            });
-            dispatch(new events.openChange({
-                detail: undefined,
-            }));
-            if (inputs.focusOnClose && !inputs.isDisabled) {
-                const dropdownWrapper = host.shadowRoot.querySelector('.dropdown-wrapper');
-                assert.instanceOf(dropdownWrapper, HTMLButtonElement, 'failed to find dropdown wrapper child');
-                dropdownWrapper.focus();
-            }
-        });
-        state.popUpManager.listen(NavSelectEvent, (event) => {
-            if (!inputs.keepOpenAfterInteraction) {
-                triggerPopUpState({
-                    open: false,
-                    callback(showPopUpResult) {
-                        updateState({
-                            showPopUpResult,
-                        });
-                    },
-                    host,
-                    popUpManager: state.popUpManager,
-                });
-            }
-            dispatch(new events.navSelect({
-                detail: event.detail,
-            }));
-        });
-        dispatch(new events.init({
-            detail: {
-                navController: state.popUpManager.navController,
-                popUpManager: state.popUpManager,
-            },
-        }));
-    },
-    render({ dispatch, events, state, inputs, updateState, host, slotNames }) {
-        function triggerPopUp({ emitEvent, open }, event) {
-            if (state.showPopUpResult && inputs.keepOpenAfterInteraction && event) {
-                const dropdownTrigger = host.shadowRoot.querySelector('.dropdown-trigger');
-                if (dropdownTrigger && !event.composedPath().includes(dropdownTrigger)) {
-                    /**
-                     * Prevent closing the pop-up when `keepOpenAfterInteraction` is turned on and
-                     * the pop-up was interacted with.
-                     */
-                    return;
-                }
-            }
-            triggerPopUpState({
-                open,
-                callback(showPopUpResult) {
-                    updateState({
-                        showPopUpResult,
-                    });
-                    if (emitEvent) {
-                        dispatch(new events.openChange({
-                            detail: showPopUpResult,
-                        }));
-                    }
-                },
-                host,
-                popUpManager: state.popUpManager,
-            });
-        }
-        if (inputs.isDisabled) {
-            triggerPopUp({
-                open: false,
-                emitEvent: false,
-            }, undefined);
-        }
-        else if (inputs.z_debug_forceOpenState != undefined) {
-            if (!inputs.z_debug_forceOpenState && state.showPopUpResult) {
-                triggerPopUp({
-                    emitEvent: false,
-                    open: false,
-                }, undefined);
-            }
-            else if (inputs.z_debug_forceOpenState && !state.showPopUpResult) {
-                triggerPopUp({
-                    emitEvent: false,
-                    open: true,
-                }, undefined);
-            }
-        }
-        /**
-         * Resolve the effective horizontal anchor. For Auto, use the popRight calculation from
-         * showPopUpResult to determine whether to anchor left or right.
-         */
-        const effectiveHorizontalAnchor = inputs.horizontalAnchor === HorizontalAnchor.Auto ||
-            inputs.horizontalAnchor == undefined
-            ? state.showPopUpResult?.popRight
-                ? HorizontalAnchor.Left
-                : HorizontalAnchor.Right
-            : inputs.horizontalAnchor;
-        const leftCss = effectiveHorizontalAnchor === HorizontalAnchor.Right && state.showPopUpResult
-            ? inputs.ignoreMaxWidth
-                ? css `
-                          left: unset;
-                      `
-                : css `
-                          left: -${state.showPopUpResult.positions.diff.left}px;
-                      `
-            : css `
-                      left: ${inputs.popUpOffset?.left || 0}px;
-                  `;
-        const rightCss = state.showPopUpResult && effectiveHorizontalAnchor === HorizontalAnchor.Left
-            ? inputs.ignoreMaxWidth
-                ? css `
-                          right: unset;
-                      `
-                : css `
-                          right: -${state.showPopUpResult.positions.diff.right}px;
-                      `
-            : css `
-                      right: ${inputs.popUpOffset?.right || 0}px;
-                  `;
-        const horizontalPositionStyle = css `
-            ${leftCss}
-            ${rightCss}
-        `;
-        /**
-         * These styles do _not_ account for window resizing while the menu is open. I decided this
-         * was not a major enough problem to tackle. If it becomes major enough in the future,
-         * you'll need to hook into a window _or_ container resize listener inside `PopUpManager`
-         * and emit a new `ShowPopUpResult` instance when it changes.
-         */
-        const positionerStyles = state.showPopUpResult
-            ? state.showPopUpResult.popDown
-                ? /** Dropdown going down position. */
-                    inputs.ignoreMaxHeight
-                        ? css `
-                          bottom: unset;
-                          top: calc(100% + ${inputs.popUpOffset?.vertical || 0}px);
-                          ${horizontalPositionStyle}
-                      `
-                        : css `
-                          bottom: -${state.showPopUpResult.positions.diff.bottom}px;
-                          top: calc(100% + ${inputs.popUpOffset?.vertical || 0}px);
-                          ${horizontalPositionStyle}
-                      `
-                : /** Dropdown going up position. */
-                    inputs.ignoreMaxHeight
-                        ? css `
-                        top: unset;
-                        bottom: calc(100% + ${inputs.popUpOffset?.vertical || 0}px);
-                        ${horizontalPositionStyle}
-                    `
-                        : css `
-                        top: -${state.showPopUpResult.positions.diff.top}px;
-                        bottom: calc(100% + ${inputs.popUpOffset?.vertical || 0}px);
-                        ${horizontalPositionStyle}
-                    `
-            : undefined;
-        function respondToClick(event) {
-            triggerPopUp({
-                emitEvent: true,
-                open: !state.showPopUpResult,
-            }, event);
-        }
-        return html `
-            <button
-                ?disabled=${!!inputs.isDisabled}
-                class="dropdown-wrapper ${classMap({
-            open: !!state.showPopUpResult,
-            'open-upwards': !state.showPopUpResult?.popDown,
-        })}"
-                role="listbox"
-                aria-expanded=${!!state.showPopUpResult}
-                ${listen('keydown', (event) => {
-            if (!state.showPopUpResult && event.code.startsWith('Arrow')) {
-                triggerPopUp({
-                    emitEvent: true,
-                    open: true,
-                }, event);
-            }
-        })}
-                ${listen('click', (event) => {
-            /** Detail is 0 if it was a keyboard key (like Enter) that triggered this click. */
-            if (event.detail === 0) {
-                let isTextActiveElement = false;
-                walkActiveElement(({ element }) => {
-                    if (isInputLikeElement(element)) {
-                        isTextActiveElement = true;
-                        return true;
-                    }
-                    else {
-                        return false;
-                    }
-                });
-                if (isTextActiveElement) {
-                    return;
-                }
-                respondToClick(event);
-            }
-            else if (event.button === 0 &&
-                state.showPopUpResult &&
-                !isMouseEventOnScrollbar(event)) {
-                const dropdownTrigger = host.shadowRoot.querySelector('.dropdown-trigger');
-                /**
-                 * Close the menu when a mouse click originates from the pop-up area (e.g. a
-                 * menu item was clicked). The trigger's mousedown already handles
-                 * open/close toggling for the trigger itself.
-                 */
-                if (dropdownTrigger && !event.composedPath().includes(dropdownTrigger)) {
-                    triggerPopUp({
-                        emitEvent: true,
-                        open: false,
-                    }, event);
-                }
-            }
-        })}
-                ${listen('mousedown', (event) => {
-            /** Ignore any clicks that aren't the main button. */
-            if (event.button !== 0) {
-                return;
-            }
-            const dropdownTrigger = assertWrap.instanceOf(host.shadowRoot.querySelector('.dropdown-trigger'), HTMLElement);
-            /**
-             * Only respond if the mousedown originated from the trigger slot, not from
-             * within the pop-up menu items, to avoid prematurely closing the menu.
-             */
-            if (event.composedPath().includes(dropdownTrigger)) {
-                respondToClick(event);
-            }
-        })}
-                ${listen(ViraMenuItem.events.activate, (event) => {
-            if (state.showPopUpResult) {
-                triggerPopUp({
-                    emitEvent: true,
-                    open: false,
-                }, event);
-            }
-        })}
-            >
-                <div class="dropdown-trigger">
-                    <slot name=${slotNames['vira-pop-up-trigger-trigger']}></slot>
-                </div>
-
-                <div
-                    class="pop-up-positioner ${classMap({
-            'right-aligned': effectiveHorizontalAnchor === HorizontalAnchor.Right,
-        })}"
-                    style=${positionerStyles}
-                >
-                    ${renderIf(!!state.showPopUpResult, html `
-                            <slot name=${slotNames['vira-pop-up-trigger-pop-up']}></slot>
-                        `)}
-                </div>
-            </button>
-        `;
-    },
-});

package/dist/elements/vira-select.element.d.ts

@@ -1,44 +0,0 @@
-import { type PartialWithUndefined } from '@augment-vir/common';
-import { type AttributeValues } from 'element-vir';
-import { type ViraIconSvg } from '../icons/index.js';
-import { type ViraSelectOption, type ViraSelectOptionGroup } from '../util/vira-select-option.js';
-/**
- * Similar to {@link ViraDropdown} but is, instead, simply a wrapper for `<select>` and nothing more.
- *
- * @category Dropdown
- * @category Elements
- * @see https://electrovir.github.io/vira/book/elements/vira-select
- */
-export declare const ViraSelect: import("element-vir").DeclarativeElementDefinition<"vira-select", {
-    options: ReadonlyArray<Readonly<ViraSelectOption> | Readonly<ViraSelectOptionGroup>>;
-    /** The currently selected option value. */
-    value: undefined | string;
-} & PartialWithUndefined<{
-    icon: Readonly<ViraIconSvg>;
-    placeholder: string;
-    label: string;
-    /** If set to `true`, only minimal styles are applied. */
-    rawSelect: boolean;
-    disabled: boolean;
-    /**
-     * When `true`, the currently selected option's label is rendered as plain text with no
-     * wrapper, border, or focus styles.
-     */
-    isReadonly: boolean;
-    attributePassthrough: Readonly<PartialWithUndefined<{
-        label: AttributeValues;
-        select: AttributeValues;
-        option: AttributeValues;
-    }>>;
-    hasError: boolean;
-}>, {
-    /**
-     * Used to couple the label and select together. This is not applied if no label is
-     * provided.
-     */
-    randomId: string;
-    /** Removes event listeners registered during init. */
-    cleanupListeners: undefined | (() => void);
-}, {
-    valueChange: import("element-vir").DefineElementEvent<string>;
-}, "vira-select-disabled" | "vira-select-error" | "vira-select-has-label" | "vira-select-not-raw" | "vira-select-readonly", "vira-select-padding-horizontal" | "vira-select-padding-vertical" | "vira-select-icon-padding", readonly [], readonly []>;