vira 32.0.0-beta.0 → 32.0.0

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

@@ -1,466 +0,0 @@
-import {getObjectTypedEntries, type PartialWithUndefined} from '@augment-vir/common';
-import {
-    css,
-    defineElementEvent,
-    html,
-    listen,
-    nothing,
-    testId,
-    type HtmlInterpolation,
-    type HTMLTemplateResult,
-} from 'element-vir';
-import {viraFormCssVars} from '../styles/form-styles.js';
-import {defineViraElement} from '../util/define-vira-element.js';
-import {
-    applyRequiredLabel,
-    areFormFieldsValid,
-    ViraFormFieldType,
-    type ViraFormField,
-    type ViraFormFields,
-} from '../util/vira-form-fields.js';
-import {ViraCheckbox} from './vira-checkbox.element.js';
-import {ViraDateInput} from './vira-date-input.element.js';
-import {ViraInput, ViraInputType} from './vira-input.element.js';
-import {ViraSelect} from './vira-select.element.js';
-import {ViraTextArea} from './vira-text-area.element.js';
-
-/**
- * A form element.
- *
- * @category Elements
- * @see https://electrovir.github.io/vira/book/elements/vira-form
- */
-export const ViraForm = defineViraElement<
-    {
-        fields: Readonly<ViraFormFields>;
-    } & PartialWithUndefined<{
-        showClearButtons: boolean;
-        /**
-         * When `true`, all fields in this form are disabled. Note that this will not (and can not)
-         * disable any child elements you've inserted via <slot>.
-         *
-         * @default false
-         */
-        isDisabled: boolean;
-        /**
-         * If true, no `'*'` is appended to required form field labels.
-         *
-         * @default false
-         */
-        hideRequiredMarkers: boolean;
-        /**
-         * When `true`, all checkboxes in this form render horizontally.
-         *
-         * @default false
-         */
-        horizontalCheckboxes: boolean;
-        /**
-         * When `true`, all form field labels render to the left of their inputs instead of above
-         * them.
-         *
-         * @default false
-         */
-        useHorizontalLabels: boolean;
-        /**
-         * When `true`, all fields in this form are prevented from user edits. Inputs, selects, and
-         * text areas render their current value as plain text; checkboxes render disabled since
-         * they have no native readonly mode.
-         *
-         * @default false
-         */
-        isReadonly: boolean;
-    }>
->()({
-    tagName: 'vira-form',
-    state() {
-        return {
-            lastIsValid: false,
-        };
-    },
-    events: {
-        valueChange: defineElementEvent<
-            {
-                key: string;
-            } & ViraFormField
-        >(),
-        validChange: defineElementEvent<{
-            allFieldsAreValid: boolean;
-        }>(),
-    },
-    styles: css`
-        :host {
-            display: flex;
-        }
-
-        form {
-            display: flex;
-            flex-grow: 1;
-            flex-direction: column;
-            align-items: stretch;
-            gap: 10px;
-
-            > * {
-                width: unset;
-            }
-        }
-
-        .horizontal-fields {
-            width: 100%;
-            border-collapse: separate;
-            border-spacing: 0 10px;
-
-            & th,
-            & td {
-                padding: 0;
-            }
-
-            & th {
-                padding: 0 8px;
-                vertical-align: middle;
-                white-space: nowrap;
-                font-weight: ${viraFormCssVars['vira-form-label-font-weight'].value};
-                text-align: right;
-            }
-
-            & td {
-                width: 100%;
-                vertical-align: top;
-
-                &
-                    > ${ViraCheckbox},
-                    &
-                    > ${ViraDateInput},
-                    &
-                    > ${ViraInput},
-                    &
-                    > ${ViraSelect},
-                    &
-                    > ${ViraTextArea} {
-                    width: 100%;
-                }
-            }
-        }
-    `,
-    render({inputs, dispatch, events, state, updateState}) {
-        const currentIsValid = areFormFieldsValid(inputs.fields);
-        if (currentIsValid !== state.lastIsValid) {
-            updateState({
-                lastIsValid: currentIsValid,
-            });
-            dispatch(
-                new events.validChange({
-                    detail: {
-                        allFieldsAreValid: currentIsValid,
-                    },
-                }),
-            );
-        }
-
-        function wrapFormField({
-            fieldTemplate,
-            label,
-        }: Readonly<{
-            fieldTemplate: HTMLTemplateResult;
-            label: HtmlInterpolation;
-        }>) {
-            if (inputs.useHorizontalLabels) {
-                return html`
-                    <tr>
-                        <th scope="row">${label}</th>
-                        <td>${fieldTemplate}</td>
-                    </tr>
-                `;
-            } else {
-                return fieldTemplate;
-            }
-        }
-
-        const formFieldTemplates = getObjectTypedEntries(inputs.fields).map(
-            ([
-                key,
-                field,
-            ]) => {
-                const isDisabled = !!(inputs.isDisabled || field.isDisabled);
-                const showRequiredMarker = !!field.isRequired && !inputs.hideRequiredMarkers;
-
-                if (field.isHidden) {
-                    return nothing;
-                } else if (field.type === ViraFormFieldType.Checkbox) {
-                    const checkboxLabel: HtmlInterpolation = showRequiredMarker
-                        ? html`
-                              ${field.label}*
-                          `
-                        : field.label;
-                    return wrapFormField({
-                        label: checkboxLabel,
-                        fieldTemplate: html`
-                            <${ViraCheckbox.assign({
-                                value: field.value || false,
-                                isDisabled: !!(isDisabled || inputs.isReadonly),
-                                hasError: field.hasError,
-                                useHorizontalLabel: inputs.horizontalCheckboxes,
-                                fillWhenChecked: field.fillWhenChecked,
-                                fillWhenUnchecked: field.fillWhenUnchecked,
-                            })}
-                                ${field.testId ? testId(field.testId) : nothing}
-                                ${listen(ViraCheckbox.events.valueChange, (event) => {
-                                    dispatch(
-                                        new events.valueChange({
-                                            detail: {
-                                                key,
-                                                ...field,
-                                                value: event.detail,
-                                            },
-                                        }),
-                                    );
-                                })}
-                            >
-                                ${inputs.useHorizontalLabels
-                                    ? nothing
-                                    : html`
-                                          <span
-                                              slot=${ViraCheckbox.slotNames['vira-checkbox-label']}
-                                          >
-                                              ${checkboxLabel}
-                                          </span>
-                                      `}
-                            </${ViraCheckbox}>
-                        `,
-                    });
-                }
-
-                const label = applyRequiredLabel(field.label, showRequiredMarker);
-                const childLabel = inputs.useHorizontalLabels ? undefined : label;
-                const horizontalLabelAttributes =
-                    inputs.useHorizontalLabels && label
-                        ? {
-                              'aria-label': label,
-                          }
-                        : {};
-
-                if (field.type === ViraFormFieldType.Select) {
-                    return wrapFormField({
-                        label,
-                        fieldTemplate: html`
-                            <${ViraSelect.assign({
-                                options: field.options,
-                                value: field.value,
-                                placeholder: field.placeholder,
-                                disabled: isDisabled,
-                                isReadonly: inputs.isReadonly,
-                                label: childLabel,
-                                hasError: field.hasError,
-                                icon: field.icon,
-                                ...(inputs.useHorizontalLabels && label
-                                    ? {
-                                          attributePassthrough: {
-                                              select: horizontalLabelAttributes,
-                                          },
-                                      }
-                                    : {}),
-                            })}
-                                ${field.testId ? testId(field.testId) : nothing}
-                                ${listen(ViraSelect.events.valueChange, (event) => {
-                                    dispatch(
-                                        new events.valueChange({
-                                            detail: {
-                                                key,
-                                                ...field,
-                                                value: event.detail,
-                                            },
-                                        }),
-                                    );
-                                })}
-                            ></${ViraSelect}>
-                        `,
-                    });
-                } else if (field.type === ViraFormFieldType.TextArea) {
-                    return wrapFormField({
-                        label,
-                        fieldTemplate: html`
-                            <${ViraTextArea.assign({
-                                value: field.value || '',
-                                disabled: isDisabled,
-                                hasError: field.hasError,
-                                isReadonly: inputs.isReadonly,
-                                label: childLabel,
-                                placeholder: field.placeholder,
-                                rows: field.rows,
-                                preventResize: field.preventResize,
-                                attributePassthrough: horizontalLabelAttributes,
-                            })}
-                                ${field.testId ? testId(field.testId) : nothing}
-                                ${listen(ViraTextArea.events.valueChange, (event) => {
-                                    dispatch(
-                                        new events.valueChange({
-                                            detail: {
-                                                key,
-                                                ...field,
-                                                value: event.detail,
-                                            },
-                                        }),
-                                    );
-                                })}
-                            ></${ViraTextArea}>
-                        `,
-                    });
-                } else if (field.type === ViraFormFieldType.Number) {
-                    return wrapFormField({
-                        label,
-                        fieldTemplate: html`
-                            <${ViraInput.assign({
-                                value: field.value?.toString() || '',
-                                disabled: isDisabled,
-                                allowedInputs: /\d/,
-                                hasError: field.hasError,
-                                icon: field.icon,
-                                isReadonly: inputs.isReadonly,
-                                label: childLabel,
-                                placeholder: field.placeholder,
-                                showClearButton: inputs.showClearButtons,
-                                type: ViraInputType.Number,
-                                attributePassthrough: {
-                                    ...horizontalLabelAttributes,
-                                    ...(field.min === undefined
-                                        ? {}
-                                        : {
-                                              min: String(field.min),
-                                          }),
-                                    ...(field.max === undefined
-                                        ? {}
-                                        : {
-                                              max: String(field.max),
-                                          }),
-                                    ...(field.step === undefined
-                                        ? {}
-                                        : {
-                                              step: String(field.step),
-                                          }),
-                                },
-                            })}
-                                ${field.testId ? testId(field.testId) : nothing}
-                                ${listen(ViraInput.events.valueChange, (event) => {
-                                    const numericValue =
-                                        event.detail === '' ? undefined : Number(event.detail);
-                                    dispatch(
-                                        new events.valueChange({
-                                            detail: {
-                                                key,
-                                                ...field,
-                                                value: numericValue,
-                                            },
-                                        }),
-                                    );
-                                })}
-                            ></${ViraInput}>
-                        `,
-                    });
-                } else if (field.type === ViraFormFieldType.Date) {
-                    return wrapFormField({
-                        label,
-                        fieldTemplate: html`
-                            <${ViraDateInput.assign({
-                                value: field.value,
-                                min: field.min,
-                                max: field.max,
-                                timezone: field.timezone,
-                                showDateOnly: field.showDateOnly,
-                                showTimeOnly: field.showTimeOnly,
-                                isDisabled,
-                                hasError: field.hasError,
-                                isReadonly: inputs.isReadonly,
-                                label: childLabel,
-                            })}
-                                ${field.testId ? testId(field.testId) : nothing}
-                                ${listen(ViraDateInput.events.valueChange, (event) => {
-                                    dispatch(
-                                        new events.valueChange({
-                                            detail: {
-                                                key,
-                                                ...field,
-                                                value: event.detail,
-                                            },
-                                        }),
-                                    );
-                                })}
-                            ></${ViraDateInput}>
-                        `,
-                    });
-                } else {
-                    return wrapFormField({
-                        label,
-                        fieldTemplate: html`
-                            <${ViraInput.assign({
-                                value: field.value || '',
-                                disabled: isDisabled,
-                                hasError: field.hasError,
-                                icon: field.icon,
-                                isReadonly: inputs.isReadonly,
-                                label: childLabel,
-                                placeholder: field.placeholder,
-                                showClearButton: inputs.showClearButtons,
-                                attributePassthrough: {
-                                    ...horizontalLabelAttributes,
-                                    ...(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({
-                                            detail: {
-                                                key,
-                                                ...field,
-                                                value: event.detail,
-                                            },
-                                        }),
-                                    );
-                                })}
-                            ></${ViraInput}>
-                        `,
-                    });
-                }
-            },
-        );
-
-        const formFieldsWrapper = inputs.useHorizontalLabels
-            ? html`
-                  <table class="horizontal-fields">
-                      <tbody>${formFieldTemplates}</tbody>
-                  </table>
-              `
-            : formFieldTemplates;
-
-        return html`
-            <form ${listen('submit', (event) => event.preventDefault())}>
-                ${formFieldsWrapper}
-                <slot></slot>
-            </form>
-        `;
-    },
-});

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

@@ -1,135 +0,0 @@
-import {type PartialWithUndefined} from '@augment-vir/common';
-import {
-    type AnyDuration,
-    type AtLeastOneDuration,
-    convertDuration,
-    type FullDate,
-    getNowInUtcTimezone,
-    type Timezone,
-    toRelativeString,
-} from 'date-vir';
-import {css, html, nothing} from 'element-vir';
-import {viraTheme} from '../styles/vira-color-theme.js';
-import {defineViraElement} from '../util/define-vira-element.js';
-import {formatAbsoluteTime, ViraAbsoluteTime} from './vira-absolute-time.element.js';
-
-/**
- * Displays a date/time as a live, relative timestamp (for example `5 minutes ago`). The relative
- * string automatically updates over time. Optionally renders the absolute timestamp beneath the
- * relative string.
- *
- * @category Time
- * @category Elements
- * @see https://electrovir.github.io/vira/book/elements/vira-relative-time
- */
-export const ViraRelativeTime = defineViraElement<
-    {
-        time: Readonly<FullDate>;
-    } & PartialWithUndefined<{
-        /** When true, the absolute timestamp is rendered beneath the relative string. */
-        showAbsoluteTime: boolean;
-        /**
-         * How long before the relative time updates.
-         *
-         * @default {seconds: 5}
-         */
-        updateInterval: Readonly<AtLeastOneDuration>;
-        /**
-         * Timezone the absolute time 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-relative-time',
-    styles: css`
-        :host {
-            display: inline-flex;
-            flex-direction: column;
-            white-space: nowrap;
-        }
-
-        ${ViraAbsoluteTime} {
-            font-size: 12px;
-            color: ${viraTheme.colors['vira-grey-foreground-non-body'].foreground.value};
-        }
-    `,
-    state() {
-        return {
-            now: getNowInUtcTimezone(),
-            timeoutId: undefined as undefined | ReturnType<typeof globalThis.setTimeout>,
-        };
-    },
-    init({inputs, updateState}) {
-        /**
-         * Reschedule with a fresh timeout after each update so the delay always reflects the
-         * current `updateInterval` input.
-         */
-        function scheduleNextUpdate() {
-            const updateInterval: AnyDuration = inputs.updateInterval || {
-                seconds: 5,
-            };
-            updateState({
-                timeoutId: globalThis.setTimeout(
-                    () => {
-                        updateState({
-                            now: getNowInUtcTimezone(),
-                        });
-                        scheduleNextUpdate();
-                    },
-                    convertDuration(updateInterval, {
-                        milliseconds: true,
-                    }).milliseconds,
-                ),
-            });
-        }
-
-        scheduleNextUpdate();
-    },
-    cleanup({state, updateState}) {
-        globalThis.clearTimeout(state.timeoutId);
-        updateState({
-            timeoutId: undefined,
-        });
-    },
-    render({state, inputs}) {
-        const relativeTime = toRelativeString(
-            {
-                start: state.now,
-                end: inputs.time,
-            },
-            {
-                years: true,
-                months: true,
-                days: true,
-                hours: true,
-                minutes: true,
-                seconds: true,
-            },
-            {
-                useOnlyLargestUnit: true,
-                decimalCount: 0,
-            },
-        );
-
-        return html`
-            <span
-                title=${formatAbsoluteTime(inputs.time, {
-                    timezone: inputs.timezone,
-                })}
-            >
-                ${relativeTime}
-            </span>
-            ${inputs.showAbsoluteTime
-                ? html`
-                      <${ViraAbsoluteTime.assign({
-                          time: inputs.time,
-                          timezone: inputs.timezone,
-                      })}></${ViraAbsoluteTime}>
-                  `
-                : nothing}
-        `;
-    },
-});

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);
-}