vira 28.19.6 → 29.0.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-button.element.ts

@@ -1,171 +0,0 @@
-import {type PartialWithUndefined} from '@augment-vir/common';
-import {css, html, nothing} from 'element-vir';
-import {type ViraIconSvg} from '../icons/index.js';
-import {viraBorders} from '../styles/border.js';
-import {viraDisabledStyles} from '../styles/disabled.js';
-import {viraAnimationDurations} from '../styles/durations.js';
-import {createFocusStyles, viraFocusCssVars} from '../styles/focus.js';
-import {noUserSelect} from '../styles/index.js';
-import {noNativeFormStyles} from '../styles/native-styles.js';
-import {defineViraElement} from './define-vira-element.js';
-import {ViraIcon} from './vira-icon.element.js';
-
-/**
- * Button styles available for {@link ViraButton}.
- *
- * @category Button
- */
-export enum ViraButtonStyle {
-    Default = 'vira-button-default',
-    Outline = 'vira-button-outline',
-}
-
-/**
- * A custom button with default styling.
- *
- * @category Button
- * @category Elements
- * @see https://electrovir.github.io/vira/book/elements/vira-button
- */
-export const ViraButton = defineViraElement<
-    PartialWithUndefined<{
-        text: string;
-        icon: Pick<ViraIconSvg, 'svgTemplate'>;
-        disabled: boolean;
-        buttonStyle: ViraButtonStyle;
-        /**
-         * When set to `true`, the given icon (if any) will take up its full dimensions, potentially
-         * increasing the button's size.
-         *
-         * @default false
-         */
-        expandToFitIcon: boolean;
-    }>
->()({
-    tagName: 'vira-button',
-    hostClasses: {
-        'vira-button-outline-style': ({inputs}) => inputs.buttonStyle === ViraButtonStyle.Outline,
-        'vira-button-disabled': ({inputs}) => !!inputs.disabled,
-        'vira-button-expand-to-fit-icon': ({inputs}) => !!inputs.expandToFitIcon,
-    },
-    cssVars: {
-        /** On the default button style this is the background color. */
-        'vira-button-primary-color': '#0a89ff',
-        'vira-button-primary-hover-color': '#59b1ff',
-        'vira-button-primary-active-color': '#007ff6',
-
-        /** On the default button style this is the text color. */
-        'vira-button-secondary-color': '#ffffff',
-
-        'vira-button-padding': '5px 10px',
-
-        'vira-button-internal-foreground-color': '',
-        'vira-button-internal-background-color': '',
-    },
-    styles: ({hostClasses, cssVars}) => css`
-        :host {
-            font-weight: bold;
-            display: inline-flex;
-            position: relative;
-            vertical-align: middle;
-            align-items: center;
-            box-sizing: border-box;
-            ${noUserSelect};
-            ${cssVars['vira-button-internal-background-color'].name}: ${cssVars[
-                'vira-button-primary-color'
-            ].value};
-            ${cssVars['vira-button-internal-foreground-color'].name}: ${cssVars[
-                'vira-button-secondary-color'
-            ].value};
-            ${viraFocusCssVars['vira-focus-outline-color'].name}: ${cssVars[
-                'vira-button-primary-hover-color'
-            ].value}
-        }
-
-        :host(:hover) button,
-        button:hover {
-            ${cssVars['vira-button-internal-background-color'].name}: ${cssVars[
-                'vira-button-primary-hover-color'
-            ].value};
-        }
-
-        :host(:active) button,
-        button:active {
-            ${cssVars['vira-button-internal-background-color'].name}: ${cssVars[
-                'vira-button-primary-active-color'
-            ].value};
-        }
-
-        ${hostClasses['vira-button-disabled'].selector} {
-            ${viraDisabledStyles};
-        }
-
-        ${hostClasses['vira-button-outline-style'].selector} button {
-            color: ${cssVars['vira-button-internal-background-color'].value};
-            background-color: transparent;
-            border-color: currentColor;
-        }
-
-        button {
-            ${noNativeFormStyles};
-            cursor: pointer;
-            position: relative;
-            width: 100%;
-            height: 100%;
-            border: 2px solid transparent;
-            box-sizing: border-box;
-            display: inline-flex;
-            justify-content: center;
-            align-items: center;
-            border-radius: ${viraBorders['vira-form-input-radius'].value};
-            background-color: ${cssVars['vira-button-internal-background-color'].value};
-            color: ${cssVars['vira-button-internal-foreground-color'].value};
-            padding: ${cssVars['vira-button-padding'].value};
-            transition:
-                color ${viraAnimationDurations['vira-interaction-animation-duration'].value},
-                background-color
-                    ${viraAnimationDurations['vira-interaction-animation-duration'].value},
-                border-color ${viraAnimationDurations['vira-interaction-animation-duration'].value};
-
-            ${createFocusStyles({
-                elementBorderSize: 2,
-            })}
-        }
-
-        .empty-text {
-            width: 0;
-        }
-
-        button ${ViraIcon} + .text-template {
-            margin-left: 8px;
-        }
-
-        :host(:not(.${hostClasses['vira-button-expand-to-fit-icon'].name})) {
-            & ${ViraIcon} {
-                height: 0;
-                display: flex;
-                align-items: center;
-            }
-        }
-    `,
-    render: ({inputs}) => {
-        const iconTemplate = inputs.icon
-            ? html`
-                  <${ViraIcon.assign({
-                      icon: inputs.icon,
-                  })}></${ViraIcon}>
-              `
-            : nothing;
-        const textTemplate = inputs.text
-            ? html`
-                  <span class="text-template">${inputs.text}</span>
-              `
-            : html`
-                  <span class="empty-text">&nbsp;</span>
-              `;
-
-        return html`
-            <button ?disabled=${inputs.disabled}>${iconTemplate} ${textTemplate}</button>
-        `;
-    },
-});

package/src/elements/vira-card.element.ts

@@ -1,54 +0,0 @@
-import {css, html} from 'element-vir';
-import {viraFormCssVars} from '../styles/form-styles.js';
-import {defineViraElement} from './define-vira-element.js';
-
-/**
- * State options for {@link ViraCard}.
- *
- * @category Internal
- */
-export enum ViraCardState {
-    Error = 'error',
-    Success = 'success',
-}
-
-/**
- * A simple wrapper "card" element that is just a `<slot>` with some styles.
- *
- * @category Elements
- * @see https://electrovir.github.io/vira/book/elements/vira-card
- */
-export const ViraCard = defineViraElement<{
-    cardState?: ViraCardState | undefined;
-}>()({
-    tagName: 'vira-card',
-    hostClasses: {
-        'vira-card-error': ({inputs}) => inputs.cardState === ViraCardState.Error,
-        'vira-card-success': ({inputs}) => inputs.cardState === ViraCardState.Success,
-    },
-    cssVars: {
-        'vira-card-border': '1px solid #d3d3d3',
-        'vira-card-border-radius': '16px',
-        'vira-card-padding': '16px',
-    },
-    styles: ({hostClasses, cssVars}) => css`
-        :host {
-            display: block;
-            border: ${cssVars['vira-card-border'].value};
-            border-radius: ${cssVars['vira-card-border-radius'].value};
-            padding: ${cssVars['vira-card-padding'].value};
-        }
-
-        ${hostClasses['vira-card-error'].selector} {
-            border-color: ${viraFormCssVars['vira-form-error-foreground-color'].value};
-        }
-        ${hostClasses['vira-card-success'].selector} {
-            border-color: ${viraFormCssVars['vira-form-success-foreground-color'].value};
-        }
-    `,
-    render() {
-        return html`
-            <slot></slot>
-        `;
-    },
-});