vira 28.19.6 → 28.20.0

package/src/elements/pop-up/pop-up-helpers.ts

@@ -1,85 +0,0 @@
-import {joinWithFinalConjunction, 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 function assertUniqueIdProps(items: ReadonlyArray<Readonly<{id: PropertyKey}>>) {
-    const usedIds = new Set<PropertyKey>();
-    const duplicateIds: PropertyKey[] = [];
-    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: Readonly<MenuItem>,
-    currentSelection: ReadonlyArray<PropertyKey> = [],
-    isMultiSelect: boolean = false,
-): PropertyKey[] {
-    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,
-}: Readonly<
-    {
-        open: boolean;
-        popUpManager: PopUpManager;
-        host: HTMLElement;
-    } & PartialWithUndefined<{
-        callback?: ((showPopUpResult: ShowPopUpResult | undefined) => void) | undefined;
-        options?: Partial<PopUpManagerOptions> | undefined;
-    }>
->) {
-    if (open) {
-        const showPopUpResult = popUpManager.showPopUp(host, options);
-        callback?.(showPopUpResult);
-    } else {
-        popUpManager.removePopUp();
-        callback?.(undefined);
-    }
-}

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

@@ -1,158 +0,0 @@
-import {type PartialWithUndefined} from '@augment-vir/common';
-import {type NavController} from 'device-navigation';
-import {classMap, css, defineElementEvent, html, listen, nothing, testId} from 'element-vir';
-import {type PopUpManager, type ShowPopUpResult} from '../../util/pop-up-manager.js';
-import {defineViraElement} from '../define-vira-element.js';
-import {updateSelectedItems} from './pop-up-helpers.js';
-import {type MenuItem} from './pop-up-menu-item.js';
-import {ViraMenu} from './vira-menu.element.js';
-import {
-    PopUpMenuDirection,
-    ViraPopUpMenu,
-    type PopUpMenuCornerStyle,
-} from './vira-pop-up-menu.element.js';
-import {
-    HorizontalAnchor,
-    ViraPopUpTrigger,
-    type PopUpOffset,
-    type PopUpTriggerPosition,
-} 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<
-    {
-        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
-    >
->()({
-    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<PropertyKey[]>(),
-        openChange: defineElementEvent<ShowPopUpResult | undefined>(),
-    },
-    state() {
-        return {
-            navController: undefined as undefined | NavController,
-            popUpManager: undefined as undefined | PopUpManager,
-            /** `undefined` means the pop up is not currently showing. */
-            showPopUpResult: undefined as 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/src/elements/shared-text-input-logic.ts

@@ -1,173 +0,0 @@
-import {check, checkWrap} from '@augment-vir/assert';
-import {type PartialWithUndefined} from '@augment-vir/common';
-import {extractEventTarget} from '@augment-vir/web';
-import {type AttributeValues} from 'element-vir';
-
-/**
- * Inputs shared between the multiple input elements.
- *
- * @category Internal
- */
-export type SharedTextInputElementInputs = {
-    value: string;
-} & PartialWithUndefined<{
-    /** Shown when no other text is present. Input restrictions do not apply to this property. */
-    placeholder: string;
-    /** Set to true to trigger disabled styles and to block all user input. */
-    disabled: boolean;
-    /**
-     * Only letters in the given string or matches to the given RegExp will be allowed.
-     * blockedInputs takes precedence over this input.
-     *
-     * For example: if allowedInputs is set to "abcd" and blockedInputs is set to "d", only "a",
-     * "b", or "c" letters will be allowed.
-     */
-    allowedInputs: string | RegExp;
-    /** Any letters in the given string or matches to the given RegExp will be blocked. */
-    blockedInputs: string | RegExp;
-    /** Disable all browser helps like spellchecking, autocomplete, etc. */
-    disableBrowserHelps: boolean;
-    /** Set this to true to make the whole element size to only fit the input text. */
-    fitText: boolean;
-    /** A set of attributes that will be applied to the inner native text element. */
-    attributePassthrough: AttributeValues;
-}>;
-
-function doesMatch({input, matcher}: {input: string; matcher: string | RegExp}): boolean {
-    if (!input || !matcher) {
-        return true;
-    }
-    if (input.length > 1) {
-        return input.split('').every((singleInput) => doesMatch({input: singleInput, matcher}));
-    }
-
-    if (matcher instanceof RegExp) {
-        return !!input.match(matcher);
-    } else {
-        return matcher.includes(input);
-    }
-}
-
-/**
- * Inputs used to check if the current input element value is allowed.
- *
- * @category Internal
- */
-export type IsAllowedInputs = {
-    value: string;
-    allowed: string | RegExp | undefined;
-    blocked: string | RegExp | undefined;
-};
-
-function isAllowed({value, allowed, blocked}: IsAllowedInputs) {
-    const isAllowedCharacter = allowed
-        ? doesMatch({
-              input: value,
-              matcher: allowed,
-          })
-        : true;
-    const isBlockedCharacter = blocked
-        ? doesMatch({
-              input: value,
-              matcher: blocked,
-          })
-        : false;
-
-    return isAllowedCharacter && !isBlockedCharacter;
-}
-
-/**
- * Filters out blocked text from an input element's value.
- *
- * @category Internal
- */
-export function filterTextInputValue(inputs: IsAllowedInputs): {
-    filtered: string;
-    blocked: string;
-} {
-    if (!inputs.value) {
-        return {filtered: inputs.value, blocked: ''};
-    }
-    const {filtered, blocked} = inputs.value.split('').reduce(
-        (accum, letter) => {
-            const allowed = isAllowed({...inputs, value: letter});
-
-            if (allowed) {
-                accum.filtered.push(letter);
-            } else {
-                accum.blocked.push(letter);
-            }
-            return accum;
-        },
-        {
-            filtered: [] as string[],
-            blocked: [] as string[],
-        },
-    );
-
-    return {
-        filtered: filtered.join(''),
-        blocked: blocked.join(''),
-    };
-}
-
-/**
- * A function to be called when an input element's value changes.
- *
- * @category Internal
- */
-export function textInputListener({
-    inputs,
-    previousValue,
-    event,
-    inputBlockedCallback,
-    newValueCallback,
-}: {
-    inputs: SharedTextInputElementInputs;
-    /** The value of the input element before this listener fired. */
-    previousValue: string;
-    event: Event;
-    inputBlockedCallback: (blockedInput: string) => void;
-    newValueCallback: (newValue: string) => void;
-}) {
-    const inputElement = extractEventTarget(event, HTMLInputElement);
-    /**
-     * This is usually a single character, but can be a bunch of characters in some circumstances.
-     * For example, when a bunch of characters are pasted, this will be the entire pasted contents.
-     *
-     * When a password manager auto fills the password, at least for Safari + iCloud Keychain, it'll
-     * fire a `CustomEvent` (rather than the typical `InputEvent`) and `event.data` won't be
-     * populated.
-     */
-    const changedText: string =
-        (check.hasKey(event, 'data') && checkWrap.isString(event.data)) || '';
-
-    /**
-     * When changedText is falsy, that means an operation other than inserting characters happened.
-     * Such as: deleting, cutting the text, etc.
-     */
-    if (changedText) {
-        const {blocked} = filterTextInputValue({
-            value: changedText,
-            allowed: inputs.allowedInputs,
-            blocked: inputs.blockedInputs,
-        });
-        if (blocked.length) {
-            inputBlockedCallback(blocked);
-        }
-    }
-
-    const finalValue = filterTextInputValue({
-        value: inputElement.value,
-        allowed: inputs.allowedInputs,
-        blocked: inputs.blockedInputs,
-    }).filtered;
-
-    if (inputElement.value !== finalValue) {
-        // this prevents blocked inputs by simply overwriting them
-        inputElement.value = finalValue;
-    }
-    if (previousValue !== finalValue) {
-        newValueCallback(finalValue);
-    }
-}

package/src/elements/vira-overflow-switch.element.ts

@@ -1,137 +0,0 @@
-import {css, html, onDomCreated} from 'element-vir';
-import {type RequireExactlyOne} from 'type-fest';
-import {listenTo} from 'typed-event-target';
-import {defineViraElement} from './define-vira-element.js';
-
-/**
- * An element switches between two slots based on their overflow.
- *
- * @category Elements
- * @see https://electrovir.github.io/vira/book/elements/vira-overflow-switch
- */
-export const ViraOverflowSwitch = defineViraElement<
-    Readonly<
-        RequireExactlyOne<{
-            automaticallySwitch: boolean;
-            useSmall: boolean;
-        }>
-    >
->()({
-    tagName: 'vira-overflow-switch',
-    slotNames: [
-        /** The child to render, if it fits. */
-        'large',
-        /** The child to render if the large one does not fit. */
-        'small',
-    ],
-    state() {
-        return {
-            isOverflowing: false,
-            resizeObserver: undefined as undefined | ResizeObserver,
-            /** Called on cleanup to clear all listeners. */
-            cleanup: undefined as undefined | (() => void),
-        };
-    },
-    hostClasses: {
-        'vira-overflow-switch-show-small': ({state, inputs}) =>
-            state.isOverflowing || !!inputs.useSmall,
-    },
-    styles: ({hostClasses}) => css`
-        :host {
-            display: inline-block;
-            max-width: 100%;
-        }
-
-        .large,
-        .small {
-            display: inline-block;
-        }
-
-        .small {
-            display: none;
-        }
-
-        /**
-         * When the large content overflows, hide it but keep it in layout so we can measure it.
-         * The small content is then shown instead.
-         */
-        ${hostClasses['vira-overflow-switch-show-small'].selector} .large {
-            visibility: hidden;
-            position: absolute;
-            top: 0;
-            left: 0;
-        }
-
-        ${hostClasses['vira-overflow-switch-show-small'].selector} .small {
-            display: inline-block;
-        }
-    `,
-    cleanup({state, updateState}) {
-        state.cleanup?.();
-        updateState({
-            cleanup: undefined,
-        });
-    },
-    render({slotNames, updateState, inputs, host, state}) {
-        return html`
-            <div
-                class="large"
-                ${onDomCreated((largeElement) => {
-                    if (!inputs.automaticallySwitch) {
-                        return;
-                    }
-
-                    const overflowParams: Parameters<typeof updateOverflowing>[0] = {
-                        elementToTest: largeElement,
-                        host,
-                        updateState,
-                    };
-
-                    const resizeObserver = new ResizeObserver(() => {
-                        updateOverflowing(overflowParams);
-                    });
-
-                    resizeObserver.observe(host);
-
-                    /**
-                     * Also observe the large slot wrapper itself in case its own layout changes
-                     * without host resizing.
-                     */
-                    resizeObserver.observe(largeElement);
-
-                    const removeSlotChangeListener = listenTo(largeElement, 'slotchange', () => {
-                        updateOverflowing(overflowParams);
-                    });
-
-                    /** Initial measurement: defer until after first layout. */
-                    updateOverflowing(overflowParams);
-
-                    state.cleanup?.();
-                    updateState({
-                        cleanup() {
-                            resizeObserver.disconnect();
-                            removeSlotChangeListener();
-                        },
-                    });
-                })}
-            >
-                <slot name=${slotNames.large}></slot>
-            </div>
-            <div class="small"><slot name=${slotNames.small}></slot></div>
-        `;
-    },
-});
-
-function updateOverflowing({
-    elementToTest,
-    host,
-    updateState,
-}: {
-    host: Element;
-    updateState: (newState: Partial<{isOverflowing: boolean}>) => void;
-    elementToTest: Element;
-}) {
-    const isOverflowing = elementToTest.scrollWidth > host.clientWidth;
-
-    updateState({isOverflowing});
-}

package/src/icons/icon-color.test-helper.ts

@@ -1,9 +0,0 @@
-export enum ColorType {
-    Color = 'color',
-    Fill = 'fill',
-    Stroke = 'stroke',
-}
-
-export function extractIconColor(element: Element, colorType: ColorType) {
-    return window.getComputedStyle(element).getPropertyValue(colorType);
-}

package/src/icons/icon-svg.ts

@@ -1,71 +0,0 @@
-import {getObjectTypedKeys, stringify} from '@augment-vir/common';
-import Color, {type ColorTypes} from 'colorjs.io';
-import {type TemplateResult, html} from 'element-vir';
-import {viraIconCssVars} from './icon-css-vars.js';
-
-/**
- * An individual Vira icon SVG definition.
- *
- * @category Icon
- */
-export type ViraIconSvg = {
-    name: string;
-    svgTemplate: TemplateResult;
-};
-
-/**
- * A function used to define an individual Vira icon SVG.
- *
- * @category Icon
- */
-export function defineIcon({
-    name,
-    svgTemplate,
-}: {
-    name: string;
-    svgTemplate: TemplateResult;
-}): ViraIconSvg {
-    const iconSvg: ViraIconSvg = {
-        name,
-        svgTemplate,
-    };
-
-    return iconSvg;
-}
-
-function getAssertedValidColor(input: ColorTypes | undefined) {
-    try {
-        if (!input) {
-            throw new Error('invalid empty color');
-        }
-        return new Color(input);
-    } catch {
-        throw new Error(`Invalid color: ${stringify(input)}`);
-    }
-}
-
-/**
- * Wraps an existing icon with a specific color and outputs another icon that can be used anywhere
- * the original icon can be used.
- *
- * @category Icon
- */
-export function createColoredIcon(
-    icon: ViraIconSvg,
-    colors: Partial<Record<keyof typeof viraIconCssVars, string>>,
-): ViraIconSvg {
-    const colorStyles = getObjectTypedKeys(colors)
-        .map((cssVarName) => {
-            const colorValue = colors[cssVarName];
-            const color = getAssertedValidColor(colorValue);
-            return `${viraIconCssVars[cssVarName].name}: ${color.toString()};`;
-        })
-        .join(' ');
-
-    return defineIcon({
-        name: icon.name,
-        svgTemplate: html`
-            <div style=${colorStyles}>${icon.svgTemplate}</div>
-        `,
-    });
-}