vira 25.7.2 → 25.8.0

package/dist/elements/dropdown/dropdown-helpers.js

@@ -1,78 +0,0 @@
-import { joinWithFinalConjunction } from '@augment-vir/common';
-/**
- * Filters an array of {@link ViraDropdownOption} based on the given selection.
- *
- * @category Internal
- */
-export function filterToSelectedOptions({ selected, options, isMultiSelect, }) {
-    if (selected.length && options.length) {
-        const selectedOptions = options.filter((option) => selected.includes(option.id));
-        if (selectedOptions.length > 1 && !isMultiSelect) {
-            console.error(`vira-dropdown has multiple selections but \`isMultiSelect\` is not \`true\`. Truncating to the first selection.`);
-            return selectedOptions.slice(0, 1);
-        }
-        else {
-            return selectedOptions;
-        }
-    }
-    else {
-        return [];
-    }
-}
-/**
- * Verifies that all options have unique ids.
- *
- * @category Internal
- */
-export function assertUniqueIdProps(options) {
-    const usedIds = new Set();
-    const duplicateIds = [];
-    options.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 to ViraDropdown: ${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 createNewSelection(
-/** The id of the option that should be newly selected. */
-id, currentSelection, isMultiSelect) {
-    if (isMultiSelect) {
-        return currentSelection.includes(id)
-            ? currentSelection.filter((entry) => entry !== id)
-            : [
-                ...currentSelection,
-                id,
-            ];
-    }
-    else {
-        return [id];
-    }
-}
-/**
- * Handles toggles pop up state for `ViraDropdown`.
- *
- * @category Internal
- */
-export function triggerPopUpState({ open, emitEvent }, { updateState, popUpManager, dispatch, host, }) {
-    if (open) {
-        updateState({ showPopUpResult: popUpManager.showPopUp(host) });
-    }
-    else {
-        popUpManager.removePopUp();
-    }
-    if (emitEvent) {
-        dispatch(open);
-    }
-}

package/dist/elements/dropdown/vira-dropdown-item.element.d.ts

@@ -1,27 +0,0 @@
-import { type PartialWithUndefined } from '@augment-vir/common';
-import { type HTMLTemplateResult } from 'element-vir';
-/**
- * An individual option for ViraDropdown.
- *
- * @category Dropdown
- */
-export type ViraDropdownOption = {
-    /** Each `id` must be unique across all options. */
-    id: PropertyKey;
-    label: string;
-} & PartialWithUndefined<{
-    disabled: boolean;
-    hoverText: string;
-    /** An optional custom template for this option. */
-    template: HTMLTemplateResult;
-}>;
-/**
- * An element for an individual item in the ViraDropdown menu.
- *
- * @category Dropdown
- * @category Elements
- */
-export declare const ViraDropdownItem: import("element-vir").DeclarativeElementDefinition<"vira-dropdown-item", {
-    label: string;
-    selected: boolean;
-}, {}, {}, "vira-dropdown-item-selected", "vira-dropdown-item-", readonly []>;

package/dist/elements/dropdown/vira-dropdown-options.element.d.ts

@@ -1,29 +0,0 @@
-import { type NavController } from 'device-navigation';
-import { type ViraDropdownOption } from './vira-dropdown-item.element.js';
-/**
- * Test ids for {@link ViraDropdownOptions}.
- *
- * @category Internal
- */
-export declare const viraDropdownOptionsTestIds: {
-    option: string;
-};
-/**
- * The dropdown menu portion of `ViraDropdown`.
- *
- * @category Dropdown
- * @category Elements
- */
-export declare const ViraDropdownOptions: import("element-vir").DeclarativeElementDefinition<"vira-dropdown-options", Readonly<{
-    navController: NavController;
-    /** All dropdown options to show to the user. */
-    options: ReadonlyArray<Readonly<ViraDropdownOption>>;
-    /**
-     * The currently selected dropdown options. Note that this must be a reference subset of the
-     * options input. Meaning, entries in this array must be the exact same objects (by
-     * reference) as entries in the `options` input array for them to be marked as selected.
-     */
-    selectedOptions: ReadonlyArray<Readonly<ViraDropdownOption>>;
-}>, {}, {
-    selectionChange: import("element-vir").DefineEvent<Readonly<ViraDropdownOption>>;
-}, "vira-dropdown-options-", "vira-dropdown-options-", readonly []>;

package/dist/elements/dropdown/vira-dropdown-options.element.js

@@ -1,116 +0,0 @@
-import { nav, navAttribute, NavValue } from 'device-navigation';
-import { classMap, css, defineElementEvent, html, ifDefined, listen, testId } from 'element-vir';
-import { viraBorders } from '../../styles/border.js';
-import { viraFormCssVars } from '../../styles/form-themes.js';
-import { viraDisabledStyles } from '../../styles/index.js';
-import { viraShadows } from '../../styles/shadows.js';
-import { defineViraElement } from '../define-vira-element.js';
-import { ViraDropdownItem } from './vira-dropdown-item.element.js';
-/**
- * Test ids for {@link ViraDropdownOptions}.
- *
- * @category Internal
- */
-export const viraDropdownOptionsTestIds = {
-    option: 'dropdown-option',
-};
-/**
- * The dropdown menu portion of `ViraDropdown`.
- *
- * @category Dropdown
- * @category Elements
- */
-export const ViraDropdownOptions = defineViraElement()({
-    tagName: 'vira-dropdown-options',
-    events: {
-        selectionChange: defineElementEvent(),
-    },
-    styles: css `
-        :host {
-            display: flex;
-            flex-direction: column;
-
-            pointer-events: auto;
-            width: 100%;
-            max-height: 100%;
-            overflow-y: auto;
-            z-index: 99;
-            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}
-        }
-
-        .dropdown-item {
-            background-color: white;
-            outline: none;
-        }
-
-        ${navAttribute.css({
-        baseSelector: '.dropdown-item:not(.disabled):not(.selected)',
-        navValue: NavValue.Focused,
-    })} {
-            background-color: ${viraFormCssVars['vira-form-selection-hover-background-color']
-        .value};
-            outline: none;
-        }
-
-        ${ViraDropdownItem} {
-            pointer-events: none;
-        }
-
-        .dropdown-item.disabled {
-            ${viraDisabledStyles};
-            pointer-events: auto;
-        }
-    `,
-    render({ inputs, dispatch, events }) {
-        const optionTemplates = inputs.options.map((option) => {
-            const selected = inputs.selectedOptions.includes(option);
-            const innerTemplate = option.template ||
-                html `
-                    <${ViraDropdownItem.assign({
-                    label: option.label,
-                    selected,
-                })}></${ViraDropdownItem}>
-                `;
-            return html `
-                <div
-                    class="dropdown-item ${classMap({
-                disabled: !!option.disabled,
-                selected,
-            })}"
-                    ${testId(viraDropdownOptionsTestIds.option)}
-                    title=${ifDefined(option.hoverText || undefined)}
-                    role="option"
-                    ${nav(inputs.navController, { disabled: option.disabled || selected })}
-                    ${listen('mousedown', (event) => {
-                /**
-                 * Prevent this mousedown event from propagating to the window, which would
-                 * then trigger the dropdown to close.
-                 */
-                event.stopPropagation();
-            })}
-                    ${listen('mouseup', (event) => {
-                /**
-                 * Prevent this event from propagating to the window, which would then
-                 * trigger the dropdown to close.
-                 */
-                event.stopPropagation();
-                if (!option.disabled) {
-                    dispatch(new events.selectionChange(option));
-                }
-            })}
-                >
-                    ${innerTemplate}
-                </div>
-            `;
-        });
-        return html `
-            <slot>${optionTemplates}</slot>
-        `;
-    },
-});

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

@@ -1,324 +0,0 @@
-import { assert } from '@augment-vir/assert';
-import { NavController } from 'device-navigation';
-import { classMap, css, defineElementEvent, html, ifDefined, listen, nothing, renderIf, testId, } from 'element-vir';
-import { ChevronUp24Icon } from '../../icons/index.js';
-import { viraBorders } from '../../styles/border.js';
-import { createFocusStyles, viraFocusCssVars } from '../../styles/focus.js';
-import { viraFormCssVars } from '../../styles/form-themes.js';
-import { noNativeFormStyles, noUserSelect, viraAnimationDurations, viraDisabledStyles, } from '../../styles/index.js';
-import { viraShadows } from '../../styles/shadows.js';
-import { HidePopUpEvent, NavSelectEvent, PopUpManager, } from '../../util/pop-up-manager.js';
-import { defineViraElement } from '../define-vira-element.js';
-import { ViraIcon } from '../vira-icon.element.js';
-import { assertUniqueIdProps, createNewSelection, filterToSelectedOptions, triggerPopUpState, } from './dropdown-helpers.js';
-import { ViraDropdownOptions } from './vira-dropdown-options.element.js';
-/**
- * Test ids for {@link ViraDropdown}.
- *
- * @category Internal
- */
-export const viraDropdownTestIds = {
-    trigger: 'dropdown-trigger',
-    icon: 'dropdown-icon',
-    prefix: 'dropdown-prefix',
-    options: 'dropdown-options',
-};
-/**
- * The main dropdown element that should be use directly.
- *
- * @category Dropdown
- * @category Elements
- * @see https://electrovir.github.io/element-vir/vira/book/elements/dropdown/vira-dropdown
- */
-export const ViraDropdown = defineViraElement()({
-    tagName: 'vira-dropdown',
-    state({ host }) {
-        return {
-            /** `undefined` means the pop up is not currently showing. */
-            showPopUpResult: undefined,
-            popUpManager: new PopUpManager(new NavController(host)),
-        };
-    },
-    hostClasses: {
-        'vira-dropdown-disabled': ({ inputs }) => !!inputs.isDisabled,
-    },
-    styles: ({ hostClasses }) => css `
-        :host {
-            display: inline-flex;
-            vertical-align: middle;
-            width: 256px;
-            ${viraFocusCssVars['vira-focus-outline-color'].name}: ${viraFormCssVars['vira-form-focus-color'].value};
-            position: relative;
-            max-width: 100%;
-        }
-
-        .dropdown-wrapper {
-            ${noNativeFormStyles};
-            max-width: 100%;
-            align-self: stretch;
-            flex-grow: 1;
-            position: relative;
-            border-radius: ${viraBorders['vira-form-input-radius'].value};
-            transition: border-radius
-                ${viraAnimationDurations['vira-interaction-animation-duration'].value};
-            outline: none;
-        }
-
-        ${createFocusStyles({
-        selector: '.dropdown-wrapper:focus',
-        elementBorderSize: 1,
-    })}
-
-        .selection-display {
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-        }
-
-        .trigger-icon {
-            transform: rotate(180deg);
-            transition: ${viraAnimationDurations['vira-interaction-animation-duration'].value}
-                linear transform;
-            align-self: flex-start;
-        }
-
-        .trigger-icon-wrapper {
-            flex-grow: 1;
-            display: flex;
-            justify-content: flex-end;
-        }
-
-        .dropdown-wrapper.open .trigger-icon {
-            transform: rotate(0);
-        }
-
-        .dropdown-wrapper.open:not(.open-upwards) {
-            border-bottom-left-radius: 0;
-        }
-
-        .open-upwards.dropdown-wrapper.open {
-            border-top-left-radius: 0;
-        }
-
-        .dropdown-trigger {
-            border: 1px solid ${viraFormCssVars['vira-form-border-color'].value};
-            height: 100%;
-            width: 100%;
-            transition: inherit;
-            box-sizing: border-box;
-            display: flex;
-            gap: 8px;
-            text-align: left;
-            align-items: center;
-            padding: 3px;
-            padding-left: 10px;
-            ${noUserSelect};
-            border-radius: inherit;
-            background-color: ${viraFormCssVars['vira-form-background-color'].value};
-            color: ${viraFormCssVars['vira-form-foreground-color'].value};
-        }
-
-        .open-upwards ${ViraDropdownOptions} {
-            border-bottom-left-radius: 0;
-            border-bottom-right-radius: 0;
-            ${viraShadows.menuShadowReversed}
-        }
-
-        ${hostClasses['vira-dropdown-disabled'].selector} {
-            ${viraDisabledStyles}
-            pointer-events: auto;
-        }
-
-        ${hostClasses['vira-dropdown-disabled'].selector} .dropdown-wrapper {
-            pointer-events: none;
-        }
-
-        .pop-up-positioner {
-            position: absolute;
-            pointer-events: none;
-            display: flex;
-            flex-direction: column;
-
-            /* highest possible z-index */
-            z-index: 2147483647;
-            /* space for the caret icon */
-            right: 28px;
-            /* minus the border width */
-            top: calc(100% - 1px);
-            left: 0;
-        }
-
-        .using-placeholder {
-            opacity: 0.4;
-        }
-
-        .open-upwards .pop-up-positioner {
-            flex-direction: column-reverse;
-            /* minus the border width */
-            bottom: calc(100% - 1px);
-        }
-    `,
-    events: {
-        selectedChange: defineElementEvent(),
-        openChange: defineElementEvent(),
-    },
-    cleanup({ state, updateState }) {
-        updateState({ showPopUpResult: undefined });
-        state.popUpManager.destroy();
-    },
-    init({ state, updateState, host, inputs, dispatch, events }) {
-        state.popUpManager.listen(HidePopUpEvent, () => {
-            updateState({ showPopUpResult: undefined });
-            if (!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) => {
-            const optionIndex = event.detail.x;
-            const option = inputs.options[optionIndex];
-            if (!option) {
-                throw new Error(`Found no dropdown option at index '${optionIndex}'`);
-            }
-            /** Only close upon option selection if the dropdown is not multi select. */
-            if (!inputs.isMultiSelect) {
-                triggerPopUpState({ emitEvent: true, open: false }, {
-                    dispatch: (openState) => {
-                        dispatch(new events.openChange(openState));
-                    },
-                    host,
-                    popUpManager: state.popUpManager,
-                    updateState,
-                });
-            }
-            dispatch(new events.selectedChange(createNewSelection(option.id, inputs.selected, !!inputs.isMultiSelect)));
-        });
-    },
-    render({ dispatch, events, state, inputs, updateState, host }) {
-        assertUniqueIdProps(inputs.options);
-        function triggerPopUp(param) {
-            triggerPopUpState(param, {
-                dispatch: (openState) => {
-                    dispatch(new events.openChange(openState));
-                },
-                host,
-                popUpManager: state.popUpManager,
-                updateState,
-            });
-        }
-        if (inputs.isDisabled) {
-            triggerPopUp({ open: false, emitEvent: false });
-        }
-        else if (inputs.z_debug_forceOpenState != undefined) {
-            if (!inputs.z_debug_forceOpenState && state.showPopUpResult) {
-                triggerPopUp({ emitEvent: false, open: false });
-            }
-            else if (inputs.z_debug_forceOpenState && !state.showPopUpResult) {
-                triggerPopUp({ emitEvent: false, open: true });
-            }
-        }
-        const selectedOptions = filterToSelectedOptions(inputs);
-        const leadingIconTemplate = inputs.icon
-            ? html `
-                  <${ViraIcon.assign({
-                icon: inputs.icon,
-            })}
-                      ${testId(viraDropdownTestIds.icon)}
-                  ></${ViraIcon}>
-              `
-            : nothing;
-        const positionerStyles = state.showPopUpResult
-            ? state.showPopUpResult.popDown
-                ? /** Dropdown going down position. */
-                    css `
-                      bottom: -${state.showPopUpResult.positions.diff.bottom}px;
-                  `
-                : /** Dropdown going up position. */
-                    css `
-                      top: -${state.showPopUpResult.positions.diff.top}px;
-                  `
-            : undefined;
-        function respondToClick() {
-            triggerPopUp({ emitEvent: true, open: !state.showPopUpResult });
-        }
-        const shouldUsePlaceholder = !selectedOptions.length;
-        const prefixTemplate = inputs.selectionPrefix && !shouldUsePlaceholder
-            ? html `
-                      <span class="selected-label-prefix" ${testId(viraDropdownTestIds.prefix)}>
-                          ${inputs.selectionPrefix}
-                      </span>
-                  `
-            : nothing;
-        const selectionDisplay = shouldUsePlaceholder
-            ? inputs.placeholder || ''
-            : selectedOptions.map((item) => item.label).join(', ');
-        return html `
-            <button
-                ?disabled=${!!inputs.isDisabled}
-                class="dropdown-wrapper ${classMap({
-            open: !!state.showPopUpResult,
-            'open-upwards': !state.showPopUpResult?.popDown,
-        })}"
-                ${testId(viraDropdownTestIds.trigger)}
-                role="listbox"
-                aria-expanded=${!!state.showPopUpResult}
-                ${listen('keydown', (event) => {
-            if (!state.showPopUpResult && event.code.startsWith('Arrow')) {
-                triggerPopUp({ emitEvent: true, open: true });
-            }
-        })}
-                ${listen('click', (event) => {
-            /** Detail is 0 if it was a keyboard key (like Enter) that triggered this click. */
-            if (event.detail === 0) {
-                respondToClick();
-            }
-        })}
-                ${listen('mousedown', (event) => {
-            /** Ignore any clicks that aren't the main button. */
-            if (event.button === 0) {
-                respondToClick();
-            }
-        })}
-            >
-                <div class="dropdown-trigger">
-                    ${leadingIconTemplate}
-                    <span
-                        class="selection-display ${classMap({
-            'using-placeholder': shouldUsePlaceholder,
-        })}"
-                        title=${ifDefined(shouldUsePlaceholder ? selectionDisplay : undefined)}
-                    >
-                        ${prefixTemplate} ${selectionDisplay}
-                    </span>
-                    <span class="trigger-icon-wrapper">
-                        <${ViraIcon.assign({ icon: ChevronUp24Icon })}
-                            class="trigger-icon"
-                        ></${ViraIcon}>
-                    </span>
-                </div>
-                <div class="pop-up-positioner" style=${positionerStyles}>
-                    ${renderIf(!!state.showPopUpResult, html `
-                            <${ViraDropdownOptions.assign({
-            options: inputs.options,
-            selectedOptions,
-            navController: state.popUpManager.navController,
-        })}
-                                ${listen(ViraDropdownOptions.events.selectionChange, (event) => {
-            /**
-             * Only close upon option selection if the dropdown is not multi
-             * select.
-             */
-            if (!inputs.isMultiSelect) {
-                triggerPopUp({ emitEvent: true, open: false });
-            }
-            dispatch(new events.selectedChange(createNewSelection(event.detail.id, inputs.selected, !!inputs.isMultiSelect)));
-        })}
-                                ${testId(viraDropdownTestIds.options)}
-                            ></${ViraDropdownOptions}>
-                        `)}
-                </div>
-            </button>
-        `;
-    },
-});