vira 32.0.0-beta.0 → 32.1.0

package/dist/elements/vira-date-input.element.d.ts

@@ -0,0 +1,47 @@
+import { type PartialWithUndefined } from '@augment-vir/common';
+import { type FullDate, type Timezone } from 'date-vir';
+/**
+ * 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 declare const ViraDateInput: import("element-vir").DeclarativeElementDefinition<"vira-date-input", {
+    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;
+}>, {
+    /** Used to couple the label and input together. Not applied when no label is provided. */
+    randomId: string;
+}, {
+    /** Fires whenever the user selects or clears a date. */
+    valueChange: import("element-vir").DefineElementEvent<{
+        hour: import("date-vir").Hour;
+        minute: import("date-vir").Minute;
+        millisecond: number;
+        year: number;
+        month: import("date-vir").MonthNumber;
+        day: import("date-vir").DayOfMonth;
+        second: import("date-vir").Second;
+        timezone: Timezone;
+    } | undefined>;
+}, "vira-date-input-error" | "vira-date-input-disabled", "vira-date-input-", readonly [], readonly []>;

package/dist/elements/vira-date-input.element.js

@@ -0,0 +1,142 @@
+import { randomString } from '@augment-vir/common';
+import { extractEventTarget } from '@augment-vir/web';
+import { calculateRelativeDate, createUtcFullDate, FullDatePart, getNowInUtcTimezone, parseInputElementValue, 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()({
+    tagName: 'vira-date-input',
+    events: {
+        /** Fires whenever the user selects or clears a date. */
+        valueChange: defineElementEvent(),
+    },
+    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 }) {
+            return !!inputs.hasError;
+        },
+        'vira-date-input-disabled'({ inputs }) {
+            return !!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/dist/elements/vira-drawer.element.d.ts

@@ -0,0 +1,24 @@
+import { type PartialWithUndefined } from '@augment-vir/common';
+/**
+ * A drawer element that slides up from the bottom of the page using the built-in `dialog` element.
+ *
+ * @category Elements
+ */
+export declare const ViraDrawer: import("element-vir").DeclarativeElementDefinition<`vira-${string}`, {
+    open: boolean;
+} & PartialWithUndefined<{
+    /** If this isn't set, make sure to use the drawer title slot to fill it in. */
+    drawerTitle: string;
+    noContentPadding: boolean;
+}>, {
+    dialogElement: HTMLDialogElement | undefined;
+    contentElement: HTMLDivElement | undefined;
+    previousOpenValue: undefined | boolean;
+    /** Cleans up all listeners that have been attached. */
+    cleanupListeners: undefined | (() => void);
+    isDragging: boolean;
+    dragStartY: number;
+    dragCurrentY: number;
+}, {
+    drawerClose: import("element-vir").DefineElementEvent<void>;
+}, "vira-drawer-dragging" | "vira-drawer-no-content-padding", "vira-drawer-backdrop-filter" | "vira-drawer-max-height", readonly ["vira-drawer-drawer-title"], readonly []>;

package/{src/elements/vira-drawer.element.ts → dist/elements/vira-drawer.element.js}

@@ -1,73 +1,65 @@
-import {assertWrap} from '@augment-vir/assert';
-import {type PartialWithUndefined} from '@augment-vir/common';
-import {colorCss} from '@electrovir/color';
-import {css, defineElementEvent, html, listen, nothing, onDomCreated} from 'element-vir';
-import {themeDefaultKey} from 'theme-vir/dist/color-theme/color-theme.js';
-import {listenToGlobal} from 'typed-event-target';
-import {X24Icon} from '../icons/icon-svgs/24/x-24.icon.js';
-import {viraAnimationDurations} from '../styles/durations.js';
-import {viraFormCssVars} from '../styles/form-styles.js';
-import {noNativeFormStyles, noNativeSpacing} from '../styles/native-styles.js';
-import {viraShadows} from '../styles/shadows.js';
-import {noUserSelect} from '../styles/user-select.js';
-import {viraTheme} from '../styles/vira-color-theme.js';
-import {defineViraElement} from '../util/define-vira-element.js';
-import {isMouseEventOnScrollbar} from '../util/pop-up-manager.js';
-import {ViraIcon} from './vira-icon.element.js';
-
+import { assertWrap } from '@augment-vir/assert';
+import { colorCss } from '@electrovir/color';
+import { css, defineElementEvent, html, listen, nothing, onDomCreated } from 'element-vir';
+import { themeDefaultKey } from 'theme-vir/dist/color-theme/color-theme.js';
+import { listenToGlobal } from 'typed-event-target';
+import { X24Icon } from '../icons/icon-svgs/24/x-24.icon.js';
+import { viraAnimationDurations } from '../styles/durations.js';
+import { viraFormCssVars } from '../styles/form-styles.js';
+import { noNativeFormStyles, noNativeSpacing } from '../styles/native-styles.js';
+import { viraShadows } from '../styles/shadows.js';
+import { noUserSelect } from '../styles/user-select.js';
+import { viraTheme } from '../styles/vira-color-theme.js';
+import { defineViraElement } from '../util/define-vira-element.js';
+import { isMouseEventOnScrollbar } from '../util/pop-up-manager.js';
+import { ViraIcon } from './vira-icon.element.js';
 const globalEventsToCloseDrawerOn = [
     'pagehide',
     'pageshow',
     'popstate',
-] as const satisfies (keyof WindowEventMap)[];
-
+];
 /** Minimum downward drag distance (in pixels) required to close the drawer. */
 const dragCloseThreshold = 30;
-
 /**
  * A drawer element that slides up from the bottom of the page using the built-in `dialog` element.
  *
  * @category Elements
  */
-export const ViraDrawer = defineViraElement<
-    {
-        open: boolean;
-    } & PartialWithUndefined<{
-        /** If this isn't set, make sure to use the drawer title slot to fill it in. */
-        drawerTitle: string;
-        noContentPadding: boolean;
-    }>
->()({
+export const ViraDrawer = defineViraElement()({
     tagName: 'vira-drawer',
     events: {
-        drawerClose: defineElementEvent<void>(),
+        drawerClose: defineElementEvent(),
     },
     state() {
         return {
-            dialogElement: undefined as HTMLDialogElement | undefined,
-            contentElement: undefined as HTMLDivElement | undefined,
-            previousOpenValue: undefined as undefined | boolean,
+            dialogElement: undefined,
+            contentElement: undefined,
+            previousOpenValue: undefined,
             /** Cleans up all listeners that have been attached. */
-            cleanupListeners: undefined as undefined | (() => void),
+            cleanupListeners: undefined,
             isDragging: false,
             dragStartY: 0,
             dragCurrentY: 0,
         };
     },
-    cleanup({state}) {
+    cleanup({ state }) {
         state.cleanupListeners?.();
     },
     hostClasses: {
-        'vira-drawer-dragging': ({state}) => state.isDragging,
-        'vira-drawer-no-content-padding': ({inputs}) => !!inputs.noContentPadding,
+        'vira-drawer-dragging'({ state }) {
+            return state.isDragging;
+        },
+        'vira-drawer-no-content-padding'({ inputs }) {
+            return !!inputs.noContentPadding;
+        },
     },
     slotNames: ['vira-drawer-drawer-title'],
     cssVars: {
         'vira-drawer-backdrop-filter': 'blur(3px)',
         'vira-drawer-max-height': '80dvh',
     },
-    styles: ({cssVars, hostClasses}) => {
-        return css`
+    styles({ cssVars, hostClasses }) {
+        return css `
             :host {
                 display: contents;
             }
@@ -94,7 +86,7 @@ export const ViraDrawer = defineViraElement<
                 border-radius: 16px 16px 0 0;
                 ${viraShadows.modal}
                 transition: transform ${viraAnimationDurations['vira-pretty-animation-duration']
-                    .value} ease;
+            .value} ease;
 
                 &[open] {
                     display: flex;
@@ -126,9 +118,7 @@ export const ViraDrawer = defineViraElement<
                             width: 36px;
                             height: 4px;
                             border-radius: 2px;
-                            background-color: ${viraFormCssVars[
-                                'vira-form-secondary-body-foreground'
-                            ].value};
+                            background-color: ${viraFormCssVars['vira-form-secondary-body-foreground'].value};
                             opacity: 0.5;
                         }
                     }
@@ -160,9 +150,7 @@ export const ViraDrawer = defineViraElement<
                             border-radius: ${viraFormCssVars['vira-form-radius'].value};
 
                             &:hover {
-                                background-color: ${viraFormCssVars[
-                                    'vira-form-selection-hover-color'
-                                ].value};
+                                background-color: ${viraFormCssVars['vira-form-selection-hover-color'].value};
                             }
 
                             & ${ViraIcon} {
@@ -186,15 +174,15 @@ export const ViraDrawer = defineViraElement<
             }
         `;
     },
-    render({inputs, state, updateState, events, dispatch, slotNames}) {
+    render({ inputs, state, updateState, events, dispatch, slotNames }) {
         if (state.dialogElement && inputs.open !== state.dialogElement.open) {
             if (inputs.open) {
                 state.dialogElement.showModal();
-            } else {
+            }
+            else {
                 state.dialogElement.close();
             }
         }
-
         if (state.previousOpenValue !== inputs.open) {
             state.cleanupListeners?.();
             updateState({
@@ -203,111 +191,96 @@ export const ViraDrawer = defineViraElement<
             if (inputs.open) {
                 const removers = globalEventsToCloseDrawerOn.map((eventName) => {
                     return listenToGlobal(eventName, () => {
-                        dispatch(
-                            new events.drawerClose({
-                                detail: undefined,
-                            }),
-                        );
+                        dispatch(new events.drawerClose({
+                            detail: undefined,
+                        }));
                     });
                 });
-
                 updateState({
-                    cleanupListeners: () => {
+                    cleanupListeners() {
                         removers.forEach((remover) => remover());
                     },
                 });
             }
         }
-
         function close() {
             if (inputs.open) {
                 state.cleanupListeners?.();
-                dispatch(
-                    new events.drawerClose({
-                        detail: undefined,
-                    }),
-                );
+                dispatch(new events.drawerClose({
+                    detail: undefined,
+                }));
             }
         }
-
         if (state.dialogElement) {
             if (state.isDragging) {
                 const dragOffset = Math.max(0, state.dragCurrentY - state.dragStartY);
                 state.dialogElement.style.transform = `translateY(${String(dragOffset)}px)`;
                 state.dialogElement.style.transition = 'none';
-            } else {
+            }
+            else {
                 state.dialogElement.style.transform = '';
                 state.dialogElement.style.transition = '';
             }
         }
-
-        return html`
+        return html `
             <dialog
                 ${onDomCreated((element) => {
-                    updateState({
-                        dialogElement: assertWrap.instanceOf(element, HTMLDialogElement),
-                    });
-                })}
+            updateState({
+                dialogElement: assertWrap.instanceOf(element, HTMLDialogElement),
+            });
+        })}
                 ${listen('close', () => {
-                    close();
-                })}
+            close();
+        })}
                 ${listen('mousedown', (event) => {
-                    if (
-                        state.contentElement &&
-                        !event.composedPath().includes(state.contentElement) &&
-                        !isMouseEventOnScrollbar(event)
-                    ) {
-                        close();
-                    }
-                })}
+            if (state.contentElement &&
+                !event.composedPath().includes(state.contentElement) &&
+                !isMouseEventOnScrollbar(event)) {
+                close();
+            }
+        })}
             >
                 <div
                     class="drawer-content-wrapper"
                     ${onDomCreated((element) => {
-                        updateState({
-                            contentElement: assertWrap.instanceOf(element, HTMLDivElement),
-                        });
-                    })}
+            updateState({
+                contentElement: assertWrap.instanceOf(element, HTMLDivElement),
+            });
+        })}
                 >
                     <div
                         class="drag-handle-wrapper"
                         ${listen('dblclick', () => {
-                            close();
-                        })}
+            close();
+        })}
                         ${listen('pointerdown', (event) => {
-                            updateState({
-                                isDragging: true,
-                                dragStartY: event.clientY,
-                                dragCurrentY: event.clientY,
-                            });
-
-                            function handlePointerMove(moveEvent: PointerEvent) {
-                                updateState({
-                                    dragCurrentY: moveEvent.clientY,
-                                });
-                            }
-
-                            function handlePointerUp(upEvent: PointerEvent) {
-                                const dragDistance = upEvent.clientY - state.dragStartY;
-
-                                updateState({
-                                    isDragging: false,
-                                    dragStartY: 0,
-                                    dragCurrentY: 0,
-                                });
-
-                                if (dragDistance > dragCloseThreshold) {
-                                    close();
-                                }
-
-                                listenerRemovers.forEach((remover) => remover());
-                            }
-
-                            const listenerRemovers = [
-                                listenToGlobal('pointermove', handlePointerMove),
-                                listenToGlobal('pointerup', handlePointerUp),
-                            ];
-                        })}
+            updateState({
+                isDragging: true,
+                dragStartY: event.clientY,
+                dragCurrentY: event.clientY,
+            });
+            function handlePointerMove(moveEvent) {
+                updateState({
+                    dragCurrentY: moveEvent.clientY,
+                });
+            }
+            function handlePointerUp(upEvent) {
+                const dragDistance = upEvent.clientY - state.dragStartY;
+                updateState({
+                    isDragging: false,
+                    dragStartY: 0,
+                    dragCurrentY: 0,
+                });
+                if (dragDistance > dragCloseThreshold) {
+                    close();
+                }
+                listenerRemovers.forEach((remover) => remover());
+            }
+            const listenerRemovers = [
+                listenToGlobal('pointermove', handlePointerMove),
+                listenToGlobal('pointerup', handlePointerUp),
+            ];
+        })}
                     >
                         <div class="drag-handle"></div>
                     </div>
@@ -323,21 +296,21 @@ export const ViraDrawer = defineViraElement<
                             class="close"
                             aria-label="Close"
                             ${listen('click', () => {
-                                state.dialogElement?.close();
-                            })}
+            state.dialogElement?.close();
+        })}
                         >
                             <${ViraIcon.assign({
-                                icon: X24Icon,
-                            })}></${ViraIcon}>
+            icon: X24Icon,
+        })}></${ViraIcon}>
                         </button>
                     </div>
                     ${inputs.open
-                        ? html`
+            ? html `
                               <div class="body">
                                   <slot></slot>
                               </div>
                           `
-                        : nothing}
+            : nothing}
                 </div>
             </dialog>
         `;

package/dist/elements/vira-dropdown.element.d.ts

@@ -0,0 +1,43 @@
+import { type PartialWithUndefined } from '@augment-vir/common';
+import { type ViraIconSvg } from '../icons/icon-svg.js';
+import { type ShowPopUpResult } from '../util/pop-up-manager.js';
+import { type ViraSelectOption } from '../util/vira-select-option.js';
+import { type PopUpTriggerPosition } from './pop-up/vira-pop-up-trigger.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 declare const ViraDropdown: import("element-vir").DeclarativeElementDefinition<"vira-dropdown", {
+    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>, {
+    /** `undefined` means the pop up is not currently showing. */
+    showPopUpResult: ShowPopUpResult | undefined;
+    /**
+     * Used to couple the label and trigger together. This is not applied if no label is
+     * provided.
+     */
+    randomId: string;
+}, {
+    /** Emits all currently selected values. */
+    selectedValuesChange: import("element-vir").DefineElementEvent<string[]>;
+    openChange: import("element-vir").DefineElementEvent<ShowPopUpResult | undefined>;
+}, "vira-dropdown-", "vira-dropdown-", readonly [], readonly ["leadingIcon", "prefixText", "trigger"]>;