vira 32.0.0-beta.0 → 32.1.0

package/src/elements/vira-absolute-time.element.ts

@@ -1,81 +0,0 @@
-import {check} from '@augment-vir/assert';
-import {type PartialWithUndefined} from '@augment-vir/common';
-import {
-    type FullDate,
-    type Timezone,
-    createFullDate,
-    createFullDateInUserTimezone,
-    toFormattedString,
-} from 'date-vir';
-import {css} from 'element-vir';
-import {defineViraElement} from '../util/define-vira-element.js';
-
-/**
- * Displays a `FullDate` as an absolute, human readable timestamp in the user's timezone (for
- * example `Jun 3, 2026 14:30 PDT`).
- *
- * @category Time
- * @category Elements
- * @see https://electrovir.github.io/vira/book/elements/vira-absolute-time
- */
-export const ViraAbsoluteTime = defineViraElement<
-    {
-        time: Readonly<FullDate>;
-    } & PartialWithUndefined<{
-        /** Show only the date part (`Jun 3, 2026`), omitting the time of day and timezone. */
-        showDateOnly: boolean;
-        /** Show only the time part (`14:30 PDT`), omitting the date. */
-        showTimeOnly: boolean;
-        /**
-         * Timezone the value is displayed in. Defaults to the user's timezone. Set this for values
-         * that are conceptually anchored to a specific timezone (e.g. a date-only value stored at
-         * midnight UTC), where converting to the user's timezone would shift the displayed
-         * date/time.
-         */
-        timezone: Timezone;
-    }>
->()({
-    tagName: 'vira-absolute-time',
-    styles: css`
-        :host {
-            white-space: nowrap;
-        }
-    `,
-    render({inputs}) {
-        return formatAbsoluteTime(inputs.time, {
-            showDateOnly: inputs.showDateOnly,
-            showTimeOnly: inputs.showTimeOnly,
-            timezone: inputs.timezone,
-        });
-    },
-});
-
-/**
- * Formats a `FullDate` into the same absolute string rendered by {@link ViraAbsoluteTime}.
- *
- * @category Time
- */
-export function formatAbsoluteTime(
-    time: Readonly<FullDate>,
-    options?: Readonly<
-        PartialWithUndefined<{
-            showDateOnly: boolean;
-            showTimeOnly: boolean;
-            timezone: Timezone;
-        }>
-    >,
-) {
-    const dateFormat = [
-        !options?.showTimeOnly && 'MMM d, yyyy',
-        !options?.showDateOnly && 'HH:mm ZZZZ',
-    ]
-        .filter(check.isTruthy)
-        .join(' ');
-
-    return toFormattedString(
-        options?.timezone
-            ? createFullDate(time, options.timezone)
-            : createFullDateInUserTimezone(time),
-        dateFormat,
-    );
-}

package/src/elements/vira-date-input.element.ts

@@ -1,185 +0,0 @@
-import {type PartialWithUndefined, randomString} from '@augment-vir/common';
-import {extractEventTarget} from '@augment-vir/web';
-import {
-    calculateRelativeDate,
-    createUtcFullDate,
-    type FullDate,
-    FullDatePart,
-    getNowInUtcTimezone,
-    parseInputElementValue,
-    type Timezone,
-    toHtmlInputString,
-    userTimezone,
-} from 'date-vir';
-import {css, defineElementEvent, html, ifDefined, listen} from 'element-vir';
-import {viraDisabledStyles} from '../styles/disabled.js';
-import {viraFormCssVars} from '../styles/form-styles.js';
-import {defineViraElement} from '../util/define-vira-element.js';
-import {ViraAbsoluteTime} from './vira-absolute-time.element.js';
-
-/**
- * A native date picker input that emits `FullDate` values. Fires `valueChange` whenever the user
- * selects (or clears) a date.
- *
- * @category Input
- * @category Elements
- * @see https://electrovir.github.io/vira/book/elements/vira-date-input
- */
-export const ViraDateInput = defineViraElement<
-    {
-        value: FullDate | undefined;
-    } & PartialWithUndefined<{
-        /** Lower bound for selectable dates. Defaults to `1800-01-01` when omitted. */
-        min: FullDate;
-        /** Upper bound for selectable dates. Defaults to 10 years from now when omitted. */
-        max: FullDate;
-        /** If true, applies error styling. */
-        hasError: boolean;
-        /** A label that is shown above the input, if provided. */
-        label: string;
-        /** If true, the input is disabled and cannot be edited. */
-        isDisabled: boolean;
-        /** If true, the current value is rendered as plain text instead of an editable input. */
-        isReadonly: boolean;
-        /** Timezone used to interpret the selected date. Defaults to the user's timezone. */
-        timezone: Timezone;
-        /** Only show the date part of the selected date when in readonly mode. */
-        showDateOnly: boolean;
-        /** Only show the time part of the selected date when in readonly mode. */
-        showTimeOnly: boolean;
-    }>
->()({
-    tagName: 'vira-date-input',
-    events: {
-        /** Fires whenever the user selects or clears a date. */
-        valueChange: defineElementEvent<FullDate | undefined>(),
-    },
-    state() {
-        return {
-            /** Used to couple the label and input together. Not applied when no label is provided. */
-            randomId: randomString(32),
-        };
-    },
-    hostClasses: {
-        'vira-date-input-error': ({inputs}) => !!inputs.hasError,
-        'vira-date-input-disabled': ({inputs}) => !!inputs.isDisabled,
-    },
-    styles: ({hostClasses}) => {
-        return css`
-            :host {
-                display: inline-block;
-                width: 224px;
-                color: ${viraFormCssVars['vira-form-foreground-color'].value};
-            }
-
-            label {
-                display: flex;
-                flex-direction: column;
-                gap: 2px;
-                width: 100%;
-            }
-
-            .input-label {
-                font-weight: ${viraFormCssVars['vira-form-label-font-weight'].value};
-                text-align: left;
-            }
-
-            input {
-                box-sizing: border-box;
-                width: 100%;
-                padding: 4px 8px;
-                font-size: inherit;
-                border: 1px solid ${viraFormCssVars['vira-form-border-color'].value};
-                border-radius: ${viraFormCssVars['vira-form-radius'].value};
-                background-color: ${viraFormCssVars['vira-form-background-color'].value};
-                color: ${viraFormCssVars['vira-form-foreground-color'].value};
-            }
-
-            ${hostClasses['vira-date-input-error'].selector} input {
-                border-color: ${viraFormCssVars['vira-form-error-color'].value};
-            }
-
-            ${hostClasses['vira-date-input-disabled'].selector} {
-                cursor: not-allowed;
-
-                & input {
-                    ${viraDisabledStyles};
-                }
-            }
-        `;
-    },
-    render({inputs, state, dispatch, events}) {
-        if (inputs.isReadonly) {
-            const readonlyTemplate = inputs.value
-                ? html`
-                      <${ViraAbsoluteTime.assign({
-                          time: inputs.value,
-                          showDateOnly: inputs.showDateOnly,
-                          showTimeOnly: inputs.showTimeOnly,
-                          timezone: inputs.timezone,
-                      })}></${ViraAbsoluteTime}>
-                  `
-                : html`
-                      <span class="readonly-value">&nbsp;</span>
-                  `;
-
-            if (inputs.label) {
-                return html`
-                    <label>
-                        <span class="input-label">${inputs.label}</span>
-                        ${readonlyTemplate}
-                    </label>
-                `;
-            } else {
-                return readonlyTemplate;
-            }
-        }
-
-        const inputValue = inputs.value ? toHtmlInputString(inputs.value, FullDatePart.Date) : '';
-        const minDate = toHtmlInputString(
-            inputs.min || createUtcFullDate('1800-01-01'),
-            FullDatePart.Date,
-        );
-        const maxDate = toHtmlInputString(
-            inputs.max ||
-                calculateRelativeDate(getNowInUtcTimezone(), {
-                    years: 10,
-                }),
-            FullDatePart.Date,
-        );
-
-        const inputTemplate = html`
-            <input
-                id=${ifDefined(inputs.label ? state.randomId : undefined)}
-                aria-label=${ifDefined(inputs.label || undefined)}
-                type="date"
-                min=${minDate}
-                max=${maxDate}
-                ?disabled=${inputs.isDisabled}
-                .value=${inputValue}
-                ${listen('input', (event) => {
-                    const element = extractEventTarget(event, HTMLInputElement);
-                    dispatch(
-                        new events.valueChange({
-                            detail: parseInputElementValue(
-                                element,
-                                inputs.timezone || userTimezone,
-                            ),
-                        }),
-                    );
-                })}
-            />
-        `;
-
-        if (inputs.label) {
-            return html`
-                <label for=${state.randomId}>
-                    <span class="input-label">${inputs.label}</span>
-                    ${inputTemplate}
-                </label>
-            `;
-        } else {
-            return inputTemplate;
-        }
-    },
-});

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

@@ -1,310 +0,0 @@
-import {check} from '@augment-vir/assert';
-import {filterMap, type PartialWithUndefined, randomString} from '@augment-vir/common';
-import {
-    classMap,
-    css,
-    defineElementEvent,
-    html,
-    type HTMLTemplateResult,
-    ifDefined,
-    listen,
-    nothing,
-    testId,
-} from 'element-vir';
-import {type ViraIconSvg} from '../icons/icon-svg.js';
-import {ChevronUp16Icon} from '../icons/index.js';
-import {viraFormCssVars} from '../styles/form-styles.js';
-import {noUserSelect, viraAnimationDurations} from '../styles/index.js';
-import {defineViraElement} from '../util/define-vira-element.js';
-import {renderMenuItemEntries} from '../util/pop-up-helpers.js';
-import {type ShowPopUpResult} from '../util/pop-up-manager.js';
-import {type ViraSelectOption} from '../util/vira-select-option.js';
-import {ViraMenu, ViraMenuPopUpDirection} from './pop-up/vira-menu.element.js';
-import {
-    HorizontalAnchor,
-    type PopUpTriggerPosition,
-    ViraPopUpTrigger,
-} from './pop-up/vira-pop-up-trigger.element.js';
-import {ViraIcon} from './vira-icon.element.js';
-
-/**
- * A dropdown element that uses pop-up menus.
- *
- * @category Dropdown
- * @category Elements
- * @see https://electrovir.github.io/vira/book/elements/dropdown/vira-dropdown
- */
-export const ViraDropdown = defineViraElement<
-    {
-        options: ReadonlyArray<Readonly<ViraSelectOption>>;
-        /** The selected id from the given options. */
-        selected: ReadonlyArray<PropertyKey>;
-    } & PartialWithUndefined<
-        {
-            /** Text to show if nothing is selected. */
-            placeholder: string;
-            /**
-             * If false, this will behave like a single select dropdown, otherwise you can select
-             * multiple.
-             */
-            isMultiSelect: boolean;
-            icon: ViraIconSvg;
-            selectionPrefix: string;
-            isDisabled: boolean;
-            label: string;
-            /** For debugging purposes only. Very bad for actual production code use. */
-            z_debug_forceOpenState: boolean;
-        } & PopUpTriggerPosition
-    >
->()({
-    tagName: 'vira-dropdown',
-    testIds: [
-        'leadingIcon',
-        'prefixText',
-        'trigger',
-    ],
-    styles: css`
-        :host {
-            display: inline-flex;
-            vertical-align: middle;
-            width: 256px;
-            position: relative;
-            max-width: 100%;
-        }
-
-        ${ViraPopUpTrigger} {
-            width: 100%;
-        }
-
-        .selection-display {
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-        }
-
-        .trigger-icon {
-            width: 24px;
-            aspect-ratio: 1;
-            align-self: flex-start;
-            will-change: transform;
-            transform: rotate(180deg);
-            transition: transform
-                ${viraAnimationDurations['vira-interaction-animation-duration'].value} linear;
-        }
-
-        .trigger-icon-wrapper {
-            flex-grow: 1;
-            display: flex;
-            justify-content: flex-end;
-        }
-
-        .open {
-            & .trigger-icon {
-                transform: rotate(0);
-            }
-
-            &:not(.open-upwards).dropdown-trigger {
-                border-bottom-left-radius: 0;
-            }
-
-            &.open-upwards.dropdown-trigger {
-                border-top-left-radius: 0;
-            }
-        }
-
-        .dropdown-trigger {
-            ${noUserSelect};
-            border: 1px solid ${viraFormCssVars['vira-form-border-color'].value};
-            height: 100%;
-            width: 100%;
-            box-sizing: border-box;
-            display: flex;
-            gap: 8px;
-            text-align: left;
-            align-items: center;
-            padding: 3px;
-            padding-left: 10px;
-            border-radius: ${viraFormCssVars['vira-form-radius'].value};
-            background-color: ${viraFormCssVars['vira-form-background-color'].value};
-            color: ${viraFormCssVars['vira-form-foreground-color'].value};
-        }
-
-        .using-placeholder {
-            opacity: 0.4;
-        }
-
-        label {
-            display: flex;
-            flex-direction: column;
-            justify-content: flex-start;
-            gap: 2px;
-            width: 100%;
-            max-width: 100%;
-
-            & .dropdown-label {
-                font-weight: ${viraFormCssVars['vira-form-label-font-weight'].value};
-                text-align: left;
-                flex-shrink: 0;
-                flex-wrap: wrap;
-            }
-        }
-    `,
-    events: {
-        /** Emits all currently selected values. */
-        selectedValuesChange: defineElementEvent<string[]>(),
-        openChange: defineElementEvent<ShowPopUpResult | undefined>(),
-    },
-    state() {
-        return {
-            /** `undefined` means the pop up is not currently showing. */
-            showPopUpResult: undefined as ShowPopUpResult | undefined,
-            /**
-             * Used to couple the label and trigger together. This is not applied if no label is
-             * provided.
-             */
-            randomId: randomString(32),
-        };
-    },
-    render({state, inputs, dispatch, events, updateState, testIds}) {
-        const selectedOptions = filterMap(
-            inputs.selected,
-            (selectedValue) => inputs.options.find((option) => option.value === selectedValue),
-            check.isTruthy,
-        );
-
-        const leadingIconTemplate = inputs.icon
-            ? html`
-                  <${ViraIcon.assign({
-                      icon: inputs.icon,
-                  })}
-                      ${testId(testIds.leadingIcon)}
-                  ></${ViraIcon}>
-              `
-            : nothing;
-
-        const shouldUsePlaceholder: boolean = !selectedOptions.length;
-
-        const prefixTemplate =
-            inputs.selectionPrefix && !shouldUsePlaceholder
-                ? html`
-                      <span class="selected-label-prefix" ${testId(testIds.prefixText)}>
-                          ${inputs.selectionPrefix}
-                      </span>
-                  `
-                : nothing;
-
-        const selectionDisplay: string | HTMLTemplateResult = shouldUsePlaceholder
-            ? inputs.placeholder || ''
-            : inputs.isMultiSelect && selectedOptions.length > 1
-              ? `${selectedOptions.length} Selected`
-              : selectedOptions[0]?.label || '';
-
-        const menuTemplate = html`
-            <${ViraMenu.assign({
-                direction: state.showPopUpResult?.popDown
-                    ? ViraMenuPopUpDirection.Downwards
-                    : ViraMenuPopUpDirection.Upwards,
-            })}
-                slot=${ViraPopUpTrigger.slotNames['vira-pop-up-trigger-pop-up']}
-            >
-                ${renderMenuItemEntries(
-                    inputs.options.map((option) => {
-                        return {
-                            content: option.label,
-                            onClick() {
-                                const newSelectedValues = inputs.isMultiSelect
-                                    ? selectedOptions.includes(option)
-                                        ? filterMap(
-                                              selectedOptions,
-                                              (selectedOption) => selectedOption.value,
-                                              (value, selectedOption) => selectedOption !== option,
-                                          )
-                                        : [
-                                              ...selectedOptions.map(
-                                                  (selectedOption) => selectedOption.value,
-                                              ),
-                                              option.value,
-                                          ]
-                                    : [option.value];
-                                dispatch(
-                                    new events.selectedValuesChange({
-                                        detail: newSelectedValues,
-                                    }),
-                                );
-                            },
-                            disabled: option.disabled,
-                            selected: selectedOptions.includes(option),
-                        };
-                    }),
-                )}
-            </${ViraMenu}>
-        `;
-
-        const triggerTemplate = html`
-            <${ViraPopUpTrigger.assign({
-                ...inputs,
-                keepOpenAfterInteraction: inputs.isMultiSelect,
-                focusOnClose: true,
-                popUpOffset: {
-                    vertical: -1,
-                    right: 24,
-                },
-                horizontalAnchor: inputs.horizontalAnchor || HorizontalAnchor.Both,
-            })}
-                ${listen(ViraPopUpTrigger.events.openChange, (event) => {
-                    if (!!state.showPopUpResult !== !!event.detail) {
-                        dispatch(
-                            new events.openChange({
-                                detail: event.detail,
-                            }),
-                        );
-                    }
-                    updateState({
-                        showPopUpResult: event.detail,
-                    });
-                })}
-            >
-                <div
-                    class="dropdown-trigger ${classMap({
-                        open: !!state.showPopUpResult,
-                        'open-upwards': !state.showPopUpResult?.popDown,
-                    })}"
-                    slot=${ViraPopUpTrigger.slotNames['vira-pop-up-trigger-trigger']}
-                    id=${ifDefined(inputs.label ? state.randomId : undefined)}
-                    aria-label=${ifDefined(inputs.label || undefined)}
-                    ${testId(testIds.trigger)}
-                >
-                    ${leadingIconTemplate}
-                    <span
-                        class="selection-display ${classMap({
-                            'using-placeholder': shouldUsePlaceholder,
-                        })}"
-                        title=${ifDefined(shouldUsePlaceholder ? undefined : selectionDisplay)}
-                    >
-                        ${prefixTemplate} ${selectionDisplay}
-                    </span>
-
-                    <span class="trigger-icon-wrapper">
-                        <${ViraIcon.assign({
-                            icon: ChevronUp16Icon,
-                        })}
-                            class="trigger-icon"
-                        ></${ViraIcon}>
-                    </span>
-                </div>
-                ${state.showPopUpResult ? menuTemplate : nothing}
-            </${ViraPopUpTrigger}>
-        `;
-
-        if (inputs.label) {
-            return html`
-                <label for=${state.randomId}>
-                    <span class="dropdown-label">${inputs.label}</span>
-                    ${triggerTemplate}
-                </label>
-            `;
-        } else {
-            return triggerTemplate;
-        }
-    },
-});