vira 28.19.6 → 29.0.0

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

@@ -0,0 +1,46 @@
+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 MenuItem } from './pop-up/pop-up-menu-item.js';
+import { type PopUpTriggerPosition } from './pop-up/vira-pop-up-trigger.element.js';
+/**
+ * Test ids for {@link ViraDropdown}.
+ *
+ * @category Internal
+ */
+export declare const viraDropdownTestIds: {
+    trigger: string;
+    icon: string;
+    prefix: string;
+};
+/**
+ * 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<MenuItem>>;
+    /** 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;
+    /** 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;
+}, {
+    selectedChange: import("element-vir").DefineEvent<PropertyKey[]>;
+    openChange: import("element-vir").DefineEvent<ShowPopUpResult | undefined>;
+}, "vira-dropdown-", "vira-dropdown-", readonly [], readonly []>;

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

@@ -1,28 +1,13 @@
-import {check} from '@augment-vir/assert';
-import {filterMap, type PartialWithUndefined} 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 {ChevronUp24Icon} from '../icons/index.js';
-import {viraBorders} from '../styles/border.js';
-import {viraFormCssVars} from '../styles/form-styles.js';
-import {noUserSelect, viraAnimationDurations} from '../styles/index.js';
-import {type ShowPopUpResult} from '../util/pop-up-manager.js';
-import {defineViraElement} from './define-vira-element.js';
-import {type MenuItem} from './pop-up/pop-up-menu-item.js';
-import {ViraMenuTrigger} from './pop-up/vira-menu-trigger.element.js';
-import {HorizontalAnchor, type PopUpTriggerPosition} from './pop-up/vira-pop-up-trigger.element.js';
-import {ViraIcon} from './vira-icon.element.js';
-
+import { check } from '@augment-vir/assert';
+import { filterMap } from '@augment-vir/common';
+import { classMap, css, defineElementEvent, html, ifDefined, listen, nothing, testId, } from 'element-vir';
+import { ChevronUp24Icon } from '../icons/index.js';
+import { viraFormCssVars } from '../styles/form-styles.js';
+import { noUserSelect, viraAnimationDurations } from '../styles/index.js';
+import { defineViraElement } from './define-vira-element.js';
+import { ViraMenuTrigger } from './pop-up/vira-menu-trigger.element.js';
+import { HorizontalAnchor } from './pop-up/vira-pop-up-trigger.element.js';
+import { ViraIcon } from './vira-icon.element.js';
 /**
  * Test ids for {@link ViraDropdown}.
  *
@@ -33,7 +18,6 @@ export const viraDropdownTestIds = {
     icon: 'dropdown-icon',
     prefix: 'dropdown-prefix',
 };
-
 /**
  * A dropdown element that uses pop-up menus.
  *
@@ -41,30 +25,9 @@ export const viraDropdownTestIds = {
  * @category Elements
  * @see https://electrovir.github.io/vira/book/elements/dropdown/vira-dropdown
  */
-export const ViraDropdown = defineViraElement<
-    {
-        options: ReadonlyArray<Readonly<MenuItem>>;
-        /** 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;
-            /** For debugging purposes only. Very bad for actual production code use. */
-            z_debug_forceOpenState: boolean;
-        } & PopUpTriggerPosition
-    >
->()({
+export const ViraDropdown = defineViraElement()({
     tagName: 'vira-dropdown',
-    styles: css`
+    styles: css `
         :host {
             display: inline-flex;
             vertical-align: middle;
@@ -123,7 +86,7 @@ export const ViraDropdown = defineViraElement<
             align-items: center;
             padding: 3px;
             padding-left: 10px;
-            border-radius: ${viraBorders['vira-form-input-radius'].value};
+            border-radius: ${viraFormCssVars['vira-form-radius'].value};
             background-color: ${viraFormCssVars['vira-form-background-color'].value};
             color: ${viraFormCssVars['vira-form-foreground-color'].value};
         }
@@ -133,86 +96,76 @@ export const ViraDropdown = defineViraElement<
         }
     `,
     events: {
-        selectedChange: defineElementEvent<PropertyKey[]>(),
-        openChange: defineElementEvent<ShowPopUpResult | undefined>(),
+        selectedChange: defineElementEvent(),
+        openChange: defineElementEvent(),
     },
     state() {
         return {
             /** `undefined` means the pop up is not currently showing. */
-            showPopUpResult: undefined as ShowPopUpResult | undefined,
+            showPopUpResult: undefined,
         };
     },
-    render({state, inputs, dispatch, events, updateState}) {
-        const selectedOptions = filterMap(
-            inputs.selected,
-            (selectedId) => inputs.options.find((option) => option.id === selectedId),
-            check.isTruthy,
-        );
-
+    render({ state, inputs, dispatch, events, updateState }) {
+        const selectedOptions = filterMap(inputs.selected, (selectedId) => inputs.options.find((option) => option.id === selectedId), check.isTruthy);
         const leadingIconTemplate = inputs.icon
-            ? html`
+            ? html `
                   <${ViraIcon.assign({
-                      icon: inputs.icon,
-                  })}
+                icon: inputs.icon,
+            })}
                       ${testId(viraDropdownTestIds.icon)}
                   ></${ViraIcon}>
               `
             : nothing;
-
-        const shouldUsePlaceholder: boolean = !selectedOptions.length;
-
-        const prefixTemplate =
-            inputs.selectionPrefix && !shouldUsePlaceholder
-                ? html`
+        const shouldUsePlaceholder = !selectedOptions.length;
+        const prefixTemplate = inputs.selectionPrefix && !shouldUsePlaceholder
+            ? html `
                       <span class="selected-label-prefix" ${testId(viraDropdownTestIds.prefix)}>
                           ${inputs.selectionPrefix}
                       </span>
                   `
-                : nothing;
-
-        const selectionDisplay: string | HTMLTemplateResult = shouldUsePlaceholder
+            : nothing;
+        const selectionDisplay = shouldUsePlaceholder
             ? inputs.placeholder || ''
             : inputs.isMultiSelect && selectedOptions.length > 1
-              ? `${selectedOptions.length} Selected`
-              : selectedOptions[0]?.label || '';
-
-        return html`
+                ? `${selectedOptions.length} Selected`
+                : selectedOptions[0]?.label || '';
+        return html `
             <${ViraMenuTrigger.assign({
-                ...inputs,
-                items: inputs.options,
-                popUpOffset: {
-                    vertical: -1,
-                    right: 24,
-                },
-                horizontalAnchor: inputs.horizontalAnchor || HorizontalAnchor.Both,
-            })}
+            ...inputs,
+            items: inputs.options,
+            popUpOffset: {
+                vertical: -1,
+                right: 24,
+            },
+            horizontalAnchor: inputs.horizontalAnchor || HorizontalAnchor.Both,
+        })}
                 ${listen(ViraMenuTrigger.events.openChange, (event) => {
-                    updateState({showPopUpResult: event.detail});
-                    dispatch(new events.openChange(event.detail));
-                })}
+            updateState({ showPopUpResult: event.detail });
+            dispatch(new events.openChange(event.detail));
+        })}
                 ${listen(ViraMenuTrigger.events.itemActivate, (event) => {
-                    dispatch(new events.selectedChange(event.detail));
-                })}
+            dispatch(new events.selectedChange(event.detail));
+        })}
             >
                 <div
                     class="dropdown-trigger ${classMap({
-                        open: !!state.showPopUpResult,
-                        'open-upwards': !state.showPopUpResult?.popDown,
-                    })}"
+            open: !!state.showPopUpResult,
+            'open-upwards': !state.showPopUpResult?.popDown,
+        })}"
                     ${testId(viraDropdownTestIds.trigger)}
                 >
                     ${leadingIconTemplate}
                     <span
                         class="selection-display ${classMap({
-                            'using-placeholder': shouldUsePlaceholder,
-                        })}"
+            'using-placeholder': shouldUsePlaceholder,
+        })}"
                         title=${ifDefined(shouldUsePlaceholder ? undefined : selectionDisplay)}
                     >
                         ${prefixTemplate} ${selectionDisplay}
                     </span>
 
                     <span class="trigger-icon-wrapper">
-                        <${ViraIcon.assign({icon: ChevronUp24Icon})}
+                        <${ViraIcon.assign({ icon: ChevronUp24Icon })}
                             class="trigger-icon"
                         ></${ViraIcon}>
                     </span>

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

@@ -0,0 +1,7 @@
+/**
+ * An error wrapper that applies error coloring (red, by default).
+ *
+ * @category Elements
+ * @see https://electrovir.github.io/vira/book/elements/vira-error
+ */
+export declare const ViraError: import("element-vir").DeclarativeElementDefinition<"vira-error", {}, {}, {}, "vira-error-", "vira-error-font-weight", readonly [], readonly []>;

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

@@ -1,7 +1,6 @@
-import {css, html} from 'element-vir';
-import {viraFormCssVars} from '../styles/form-styles.js';
-import {defineViraElement} from './define-vira-element.js';
-
+import { css, html } from 'element-vir';
+import { viraFormCssVars } from '../styles/form-styles.js';
+import { defineViraElement } from './define-vira-element.js';
 /**
  * An error wrapper that applies error coloring (red, by default).
  *
@@ -13,14 +12,14 @@ export const ViraError = defineViraElement()({
     cssVars: {
         'vira-error-font-weight': 'bold',
     },
-    styles: ({cssVars}) => css`
+    styles: ({ cssVars }) => css `
         :host {
-            color: ${viraFormCssVars['vira-form-error-foreground-color'].value};
+            color: ${viraFormCssVars['vira-form-error-color'].value};
             font-weight: ${cssVars['vira-error-font-weight'].value};
         }
     `,
     render() {
-        return html`
+        return html `
             <slot></slot>
         `;
     },

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

@@ -0,0 +1,13 @@
+import { type ViraIconSvg } from '../icons/icon-svg.js';
+/**
+ * An element that renders a single {@link ViraIconSvg}.
+ *
+ * @category Icon
+ * @category Elements
+ * @see https://electrovir.github.io/vira/book/elements/vira-icon
+ */
+export declare const ViraIcon: import("element-vir").DeclarativeElementDefinition<"vira-icon", {
+    icon: Pick<ViraIconSvg, "svgTemplate"> | undefined;
+    /** Ignores the given icon's embedded size and causes the <svg> element to fill its parent. */
+    fitContainer?: boolean | undefined;
+}, {}, {}, "vira-icon-fit-container", "vira-icon-", readonly [], readonly []>;

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

@@ -1,7 +1,5 @@
-import {css} from 'element-vir';
-import {type ViraIconSvg} from '../icons/icon-svg.js';
-import {defineViraElement} from './define-vira-element.js';
-
+import { css } from 'element-vir';
+import { defineViraElement } from './define-vira-element.js';
 /**
  * An element that renders a single {@link ViraIconSvg}.
  *
@@ -9,17 +7,13 @@ import {defineViraElement} from './define-vira-element.js';
  * @category Elements
  * @see https://electrovir.github.io/vira/book/elements/vira-icon
  */
-export const ViraIcon = defineViraElement<{
-    icon: Pick<ViraIconSvg, 'svgTemplate'> | undefined;
-    /** Ignores the given icon's embedded size and causes the <svg> element to fill its parent. */
-    fitContainer?: boolean | undefined;
-}>()({
+export const ViraIcon = defineViraElement()({
     tagName: 'vira-icon',
     hostClasses: {
         /** Ignores the given icon's embedded size and causes the <svg> element to fill its parent. */
-        'vira-icon-fit-container': ({inputs}) => !!inputs.fitContainer,
+        'vira-icon-fit-container': ({ inputs }) => !!inputs.fitContainer,
     },
-    styles: ({hostClasses}) => css`
+    styles: ({ hostClasses }) => css `
         :host {
             display: inline-block;
         }
@@ -37,11 +31,10 @@ export const ViraIcon = defineViraElement<{
             width: 100%;
         }
     `,
-    render({inputs}) {
+    render({ inputs }) {
         if (!inputs.icon) {
             return '';
         }
-
         return inputs.icon.svgTemplate;
     },
 });

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

@@ -0,0 +1,45 @@
+import { type Dimensions } from '@augment-vir/common';
+import { type Duration, type DurationUnit } from 'date-vir';
+/**
+ * An `<img>` element wrapper that handles size constraints and includes slots for loading and error
+ * indicators.
+ *
+ * Use CSS properties to constrain the image. In particular, set `min-height` and `min-width` on
+ * this to control the size of the loader and error slots.
+ *
+ * @category Image
+ * @category Elements
+ * @see https://electrovir.github.io/vira/book/elements/vira-image
+ */
+export declare const ViraImage: import("element-vir").DeclarativeElementDefinition<"vira-image", {
+    /** The URL of the image to load. This is passed directly to the `<img>` element. */
+    imageUrl: string;
+    /**
+     * The dimension which should dominantly constrain the image size. Whichever dimension this is
+     * set to is the dimension that the image will grow to match. This is only relevant if you apply
+     * size constraints on ViraImage via CSS in its parent.
+     *
+     * @default 'width'
+     */
+    dominantDimension?: keyof Dimensions | undefined;
+    /** For debugging only: artificially set a delay for the image loading so you can see the loader. */
+    _debugLoadDelay?: Duration<DurationUnit.Milliseconds> | undefined;
+}, {
+    /**
+     * To avoid race conditions between `<img>` element events and potential input changing,
+     * save the loaded state of an URL's image by the image's URL.
+     */
+    loadedUrls: Readonly<{
+        [url: string]: true;
+    }>;
+    /**
+     * To avoid race conditions between `<img>` element events and potential input changing,
+     * save the errored state of an URL's image by the image's URL.
+     */
+    erroredUrls: Readonly<{
+        [url: string]: true;
+    }>;
+}, {
+    imageLoad: import("element-vir").DefineEvent<void>;
+    imageError: import("element-vir").DefineEvent<unknown>;
+}, "vira-image-height-constrained", "vira-image-", readonly ["loading", "error"], readonly []>;

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

@@ -1,10 +1,8 @@
-import {type Dimensions, wait} from '@augment-vir/common';
-import {type Duration, type DurationUnit} from 'date-vir';
-import {classMap, css, defineElementEvent, html, listen, renderIf} from 'element-vir';
-import {LoaderAnimated24Icon, StatusFailure24Icon} from '../icons/index.js';
-import {defineViraElement} from './define-vira-element.js';
-import {ViraIcon} from './vira-icon.element.js';
-
+import { wait } from '@augment-vir/common';
+import { classMap, css, defineElementEvent, html, listen, renderIf } from 'element-vir';
+import { LoaderAnimated24Icon, StatusFailure24Icon } from '../icons/index.js';
+import { defineViraElement } from './define-vira-element.js';
+import { ViraIcon } from './vira-icon.element.js';
 /**
  * An `<img>` element wrapper that handles size constraints and includes slots for loading and error
  * indicators.
@@ -16,20 +14,7 @@ import {ViraIcon} from './vira-icon.element.js';
  * @category Elements
  * @see https://electrovir.github.io/vira/book/elements/vira-image
  */
-export const ViraImage = defineViraElement<{
-    /** The URL of the image to load. This is passed directly to the `<img>` element. */
-    imageUrl: string;
-    /**
-     * The dimension which should dominantly constrain the image size. Whichever dimension this is
-     * set to is the dimension that the image will grow to match. This is only relevant if you apply
-     * size constraints on ViraImage via CSS in its parent.
-     *
-     * @default 'width'
-     */
-    dominantDimension?: keyof Dimensions | undefined;
-    /** For debugging only: artificially set a delay for the image loading so you can see the loader. */
-    _debugLoadDelay?: Duration<DurationUnit.Milliseconds> | undefined;
-}>()({
+export const ViraImage = defineViraElement()({
     tagName: 'vira-image',
     state() {
         return {
@@ -37,26 +22,26 @@ export const ViraImage = defineViraElement<{
              * To avoid race conditions between `<img>` element events and potential input changing,
              * save the loaded state of an URL's image by the image's URL.
              */
-            loadedUrls: {} as Readonly<{[url: string]: true}>,
+            loadedUrls: {},
             /**
              * To avoid race conditions between `<img>` element events and potential input changing,
              * save the errored state of an URL's image by the image's URL.
              */
-            erroredUrls: {} as Readonly<{[url: string]: true}>,
+            erroredUrls: {},
         };
     },
     hostClasses: {
-        'vira-image-height-constrained': ({inputs}) => inputs.dominantDimension === 'height',
+        'vira-image-height-constrained': ({ inputs }) => inputs.dominantDimension === 'height',
     },
     slotNames: [
         'loading',
         'error',
     ],
     events: {
-        imageLoad: defineElementEvent<void>(),
-        imageError: defineElementEvent<unknown>(),
+        imageLoad: defineElementEvent(),
+        imageError: defineElementEvent(),
     },
-    styles: ({hostClasses}) => css`
+    styles: ({ hostClasses }) => css `
         :host {
             display: inline-flex;
             overflow: hidden;
@@ -103,60 +88,55 @@ export const ViraImage = defineViraElement<{
             display: none;
         }
     `,
-    render({inputs, state, updateState, dispatch, events, slotNames}) {
+    render({ inputs, state, updateState, dispatch, events, slotNames }) {
         /**
          * Saved off for use in the image listeners. This is used to eliminate race conditions
          * between image events and the input URL changing.
          */
         const imageUrl = inputs.imageUrl;
-
         const statusTemplate = state.erroredUrls[imageUrl]
-            ? html`
+            ? html `
                   <slot class="status-wrapper" name=${slotNames.error}>
-                      <${ViraIcon.assign({icon: StatusFailure24Icon})} class="error"></${ViraIcon}>
+                      <${ViraIcon.assign({ icon: StatusFailure24Icon })} class="error"></${ViraIcon}>
                   </slot>
               `
             : state.loadedUrls[imageUrl]
-              ? undefined
-              : html`
+                ? undefined
+                : html `
                     <slot class="status-wrapper" name=${slotNames.loading}>
-                        <${ViraIcon.assign({icon: LoaderAnimated24Icon})}></${ViraIcon}>
+                        <${ViraIcon.assign({ icon: LoaderAnimated24Icon })}></${ViraIcon}>
                     </slot>
                 `;
-
-        return html`
+        return html `
             ${renderIf(!!statusTemplate, statusTemplate)}
             <img
                 class=${classMap({
-                    hidden: !!statusTemplate,
-                })}
+            hidden: !!statusTemplate,
+        })}
                 ${listen('load', async () => {
-                    if (inputs._debugLoadDelay) {
-                        await wait(inputs._debugLoadDelay);
-                    }
-
-                    updateState({
-                        loadedUrls: {
-                            ...state.loadedUrls,
-                            [imageUrl]: true,
-                        },
-                    });
-
-                    dispatch(new events.imageLoad());
-                })}
+            if (inputs._debugLoadDelay) {
+                await wait(inputs._debugLoadDelay);
+            }
+            updateState({
+                loadedUrls: {
+                    ...state.loadedUrls,
+                    [imageUrl]: true,
+                },
+            });
+            dispatch(new events.imageLoad());
+        })}
                 ${listen('error', async (event) => {
-                    if (inputs._debugLoadDelay) {
-                        await wait(inputs._debugLoadDelay);
-                    }
-                    updateState({
-                        erroredUrls: {
-                            ...state.erroredUrls,
-                            [imageUrl]: true,
-                        },
-                    });
-
-                    dispatch(new events.imageError(event.error));
-                })}
+            if (inputs._debugLoadDelay) {
+                await wait(inputs._debugLoadDelay);
+            }
+            updateState({
+                erroredUrls: {
+                    ...state.erroredUrls,
+                    [imageUrl]: true,
+                },
+            });
+            dispatch(new events.imageError(event.error));
+        })}
                 src=${imageUrl}
             />
         `;

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

@@ -0,0 +1,62 @@
+import { type PartialWithUndefined } from '@augment-vir/common';
+import { type ViraIconSvg } from '../icons/index.js';
+export * from './shared-text-input-logic.js';
+/**
+ * Input types for {@link ViraInput}.
+ *
+ * @category Internal
+ */
+export declare enum ViraInputType {
+    Default = "text",
+    Password = "password",
+    Email = "email"
+}
+/**
+ * A single line input element with all listeners properly attached. Multiple types are allowed with
+ * {@link ViraInputType}.
+ *
+ * @category Input
+ * @category Elements
+ * @see https://electrovir.github.io/vira/book/elements/vira-input
+ */
+export declare const ViraInput: import("element-vir").DeclarativeElementDefinition<"vira-input", Readonly<PartialWithUndefined<{
+    icon: Pick<ViraIconSvg, "svgTemplate">;
+    /** A suffix that, if provided, is shown following the input field. */
+    suffix: string;
+    /** A label that is shown above the input, if provided. */
+    label: string;
+    /** If true, applies error styling. */
+    hasError: boolean;
+    showClearButton: boolean;
+    type: ViraInputType;
+}> & {
+    value: string;
+} & PartialWithUndefined<{
+    placeholder: string;
+    disabled: boolean;
+    allowedInputs: string | RegExp;
+    blockedInputs: string | RegExp;
+    disableBrowserHelps: boolean;
+    fitText: boolean;
+    attributePassthrough: import("element-vir").AttributeValues;
+}>>, {
+    forcedInputWidth: number;
+    showPassword: boolean;
+    /**
+     * Used to couple the label and input together. This is not applied if no label is
+     * provided.
+     */
+    randomId: string;
+}, {
+    /**
+     * Fires whenever a user input created a new value. Does not fire if all input letters are
+     * filtered out due to input restrictions.
+     */
+    valueChange: import("element-vir").DefineEvent<string>;
+    /**
+     * Fires when inputs are blocked. Useful for showing warnings or error messages to inform
+     * the user why their input did not propagate if it was blocked. This does not fire for text
+     * that was blocked out of programmatic "value" property assignments.
+     */
+    inputBlocked: import("element-vir").DefineEvent<string>;
+}, "vira-input-disabled" | "vira-input-fit-text" | "vira-input-clear-button-shown" | "vira-input-error", "vira-input-padding-horizontal" | "vira-input-padding-vertical", readonly [], readonly []>;