vira 28.19.5 → 28.19.6

package/dist/elements/form/vira-form.element.js

@@ -1,151 +0,0 @@
-import { getObjectTypedEntries } from '@augment-vir/common';
-import { css, defineElementEvent, html, listen, nothing, testId } from 'element-vir';
-import { defineViraElement } from '../define-vira-element.js';
-import { ViraCheckbox } from '../vira-checkbox.element.js';
-import { ViraInput, ViraInputType } from '../vira-input.element.js';
-import { ViraSelect } from '../vira-select.element.js';
-import { applyRequiredLabel, areFormFieldsValid, ViraFormFieldType, } from './vira-form-fields.js';
-/**
- * A form element.
- *
- * @category Elements
- * @see https://electrovir.github.io/vira/book/elements/vira-form
- */
-export const ViraForm = defineViraElement()({
-    tagName: 'vira-form',
-    events: {
-        valueChange: defineElementEvent(),
-        validChange: defineElementEvent(),
-    },
-    styles: css `
-        :host {
-            display: flex;
-        }
-
-        form {
-            display: flex;
-            flex-grow: 1;
-            flex-direction: column;
-            align-items: stretch;
-            gap: 10px;
-
-            > * {
-                width: unset;
-            }
-        }
-    `,
-    state() {
-        return {
-            lastIsValid: false,
-        };
-    },
-    render({ inputs, dispatch, events, state, updateState }) {
-        const currentIsValid = areFormFieldsValid(inputs.fields);
-        if (currentIsValid !== state.lastIsValid) {
-            updateState({
-                lastIsValid: currentIsValid,
-            });
-            dispatch(new events.validChange({ allFieldsAreValid: currentIsValid }));
-        }
-        const formFieldTemplates = getObjectTypedEntries(inputs.fields).map(([key, field,]) => {
-            if (field.isHidden) {
-                return nothing;
-            }
-            else if (field.type === ViraFormFieldType.Checkbox) {
-                return html `
-                        <${ViraCheckbox.assign({
-                    value: field.value || false,
-                    disabled: inputs.isDisabled || field.isDisabled,
-                    hasError: field.hasError,
-                    label: applyRequiredLabel(field.label, !!field.isRequired && !inputs.hideRequiredMarkers),
-                })}
-                            ${field.testId ? testId(field.testId) : nothing}
-                            ${listen(ViraCheckbox.events.valueChange, (event) => {
-                    dispatch(new events.valueChange({
-                        key,
-                        ...field,
-                        value: event.detail,
-                    }));
-                })}
-                        ></${ViraCheckbox}>
-                    `;
-            }
-            else if (field.type === ViraFormFieldType.Select) {
-                return html `
-                        <${ViraSelect.assign({
-                    options: field.options,
-                    value: field.value,
-                    placeholder: field.placeholder,
-                    disabled: inputs.isDisabled || field.isDisabled,
-                    label: applyRequiredLabel(field.label, !!field.isRequired && !inputs.hideRequiredMarkers),
-                    hasError: field.hasError,
-                    icon: field.icon,
-                })}
-                            ${field.testId ? testId(field.testId) : nothing}
-                            ${listen(ViraSelect.events.valueChange, (event) => {
-                    dispatch(new events.valueChange({
-                        key,
-                        ...field,
-                        value: event.detail,
-                    }));
-                })}
-                        ></${ViraSelect}>
-                    `;
-            }
-            else {
-                return html `
-                        <${ViraInput.assign({
-                    value: field.value || '',
-                    disabled: inputs.isDisabled || field.isDisabled,
-                    hasError: field.hasError,
-                    icon: field.icon,
-                    label: applyRequiredLabel(field.label, !!field.isRequired && !inputs.hideRequiredMarkers),
-                    placeholder: field.placeholder,
-                    showClearButton: inputs.showClearButtons,
-                    attributePassthrough: field.isUsername
-                        ? {
-                            autocomplete: 'username',
-                        }
-                        : field.type === ViraFormFieldType.NewPassword
-                            ? {
-                                autocomplete: 'new-password',
-                            }
-                            : field.type === ViraFormFieldType.ExistingPassword
-                                ? {
-                                    autocomplete: 'password',
-                                }
-                                : field.type === ViraFormFieldType.Email
-                                    ? {
-                                        autocomplete: 'email',
-                                    }
-                                    : {},
-                    type: [
-                        ViraFormFieldType.NewPassword,
-                        ViraFormFieldType.ExistingPassword,
-                        ViraFormFieldType.PlainPassword,
-                    ].includes(field.type)
-                        ? ViraInputType.Password
-                        : field.type === ViraFormFieldType.Email
-                            ? ViraInputType.Email
-                            : ViraInputType.Default,
-                })}
-                            ${field.testId ? testId(field.testId) : nothing}
-                            ${listen(ViraInput.events.valueChange, (event) => {
-                    dispatch(new events.valueChange({
-                        key,
-                        ...field,
-                        value: event.detail,
-                    }));
-                })}
-                        ></${ViraInput}>
-                    `;
-            }
-        });
-        return html `
-            <form ${listen('submit', (event) => event.preventDefault())}>
-                ${formFieldTemplates}
-                <slot></slot>
-            </form>
-        `;
-    },
-});

package/dist/elements/index.js

@@ -1,25 +0,0 @@
-export * from './define-vira-element.js';
-export * from './form/vira-form-fields.js';
-export * from './form/vira-form.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-card.element.js';
-export * from './vira-checkbox.element.js';
-export * from './vira-collapsible-wrapper.element.js';
-export * from './vira-dropdown.element.js';
-export * from './vira-error.element.js';
-export * from './vira-icon.element.js';
-export * from './vira-image.element.js';
-export * from './vira-input.element.js';
-export * from './vira-link.element.js';
-export * from './vira-modal.element.js';
-export * from './vira-overflow-switch.element.js';
-export * from './vira-progress.element.js';
-export * from './vira-select.element.js';

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

@@ -1,33 +0,0 @@
-import { type PartialWithUndefined } from '@augment-vir/common';
-import { type PopUpManager, type PopUpManagerOptions, 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, options, }: Readonly<{
-    open: boolean;
-    popUpManager: PopUpManager;
-    host: HTMLElement;
-} & PartialWithUndefined<{
-    callback?: ((showPopUpResult: ShowPopUpResult | undefined) => void) | undefined;
-    options?: Partial<PopUpManagerOptions> | undefined;
-}>>): void;

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

@@ -1,58 +0,0 @@
-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, options, }) {
-    if (open) {
-        const showPopUpResult = popUpManager.showPopUp(host, options);
-        callback?.(showPopUpResult);
-    }
-    else {
-        popUpManager.removePopUp();
-        callback?.(undefined);
-    }
-}

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

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

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

@@ -1,19 +0,0 @@
-import { type PartialWithUndefined } from '@augment-vir/common';
-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<{
-    selected: boolean;
-} & PartialWithUndefined<{
-    /**
-     * 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"];
-    /** If `true`, does not render the selected check icon. */
-    hideCheckIcon: boolean;
-}>>, {}, {}, "vira-menu-item-selected", "vira-menu-item-", readonly [], readonly []>;

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

@@ -1,41 +0,0 @@
-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 PopUpMenuCornerStyle } from './vira-pop-up-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-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;
-    /** Hide menu item check mark icons. */
-    hideCheckIcons: boolean;
-    menuCornerStyle: PopUpMenuCornerStyle;
-} & PopUpTriggerPosition>, {
-    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 [], readonly []>;

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

@@ -1,121 +0,0 @@
-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 { PopUpMenuDirection, ViraPopUpMenu, } from './vira-pop-up-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',
-    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: {
-        itemActivate: defineElementEvent(),
-        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 }) {
-        return html `
-            <${ViraPopUpTrigger.assign({
-            ...inputs,
-            keepOpenAfterInteraction: true,
-            popUpOffset: inputs.popUpOffset,
-            horizontalAnchor: inputs.horizontalAnchor || HorizontalAnchor.Left,
-        })}
-                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) {
-                /**
-                 * Defer pop up removal to prevent race conditions with element-internal
-                 * click handlers.
-                 */
-                globalThis.setTimeout(() => state.popUpManager?.removePopUp());
-            }
-        })}
-            >
-                <slot slot=${ViraPopUpTrigger.slotNames.trigger}></slot>
-                ${state.navController && state.showPopUpResult
-            ? html `
-                          <${ViraPopUpMenu.assign({
-                direction: state.showPopUpResult.popDown
-                    ? PopUpMenuDirection.Downwards
-                    : PopUpMenuDirection.Upwards,
-                cornerStyle: inputs.menuCornerStyle,
-            })}
-                              slot=${ViraPopUpTrigger.slotNames.popUp}
-                              class=${classMap({
-                'full-width-menu': inputs.horizontalAnchor === HorizontalAnchor.Both,
-            })}
-                          >
-                              <${ViraMenu.assign({
-                items: inputs.items,
-                selected: inputs.selected,
-                navController: state.navController,
-                isMultiSelect: !!inputs.isMultiSelect,
-                hideCheckIcons: inputs.hideCheckIcons,
-            })}
-                                  ${testId(viraMenuTriggerTestIds.menu)}
-                              ></${ViraMenu}>
-                          </${ViraPopUpMenu}>
-                      `
-            : nothing}
-            </${ViraPopUpTrigger}>
-        `;
-    },
-});

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

@@ -1,38 +0,0 @@
-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;
-    /** Hide menu item check mark icons. */
-    hideCheckIcons: boolean;
-}>>, {
-    internalNavController: NavController;
-}, {}, "vira-menu-multiselect", "vira-menu-", readonly [], readonly []>;

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

@@ -1,35 +0,0 @@
-import { type PartialWithUndefined } from '@augment-vir/common';
-/**
- * Possible corner styles for {@link ViraPopUpMenu}.
- *
- * @category Internal
- */
-export declare enum PopUpMenuCornerStyle {
-    /** 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 ViraPopUpMenu}.
- *
- * @category Internal
- */
-export declare enum PopUpMenuDirection {
-    Downwards = "downwards",
-    Upwards = "upwards"
-}
-/**
- * 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", PartialWithUndefined<{
-    /** @default PopUpMenuDirection.Downwards */
-    direction: PopUpMenuDirection;
-    /** @default PopUpMenuCornerStyle.Directional */
-    cornerStyle: PopUpMenuCornerStyle;
-}>, {}, {}, "vira-pop-up-menu-open-upwards" | "vira-pop-up-menu-rounded" | "vira-pop-up-menu-square", "vira-pop-up-menu-", readonly [], readonly []>;

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

@@ -1,105 +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-pop-up-trigger", 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;
-}>, {
-    /** `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"], readonly []>;