vira/dist/elements/vira-absolute-time.element.js

A simple and highly versatile design system using element-vir.

import { check } from '@augment-vir/assert';
import { 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()({
    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, options) {
    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);
}