vira 28.19.4 → 28.19.6

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

@@ -1,6 +1,7 @@
-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).
  *
@@ -12,14 +13,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};
             font-weight: ${cssVars['vira-error-font-weight'].value};
         }
     `,
     render() {
-        return html `
+        return html`
             <slot></slot>
         `;
     },

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

@@ -1,5 +1,7 @@
-import { css } from 'element-vir';
-import { defineViraElement } from './define-vira-element.js';
+import {css} from 'element-vir';
+import {type ViraIconSvg} from '../icons/icon-svg.js';
+import {defineViraElement} from './define-vira-element.js';
+
 /**
  * An element that renders a single {@link ViraIconSvg}.
  *
@@ -7,13 +9,17 @@ import { defineViraElement } from './define-vira-element.js';
  * @category Elements
  * @see https://electrovir.github.io/vira/book/elements/vira-icon
  */
-export const ViraIcon = defineViraElement()({
+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;
+}>()({
     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;
         }
@@ -31,10 +37,11 @@ export const ViraIcon = defineViraElement()({
             width: 100%;
         }
     `,
-    render({ inputs }) {
+    render({inputs}) {
         if (!inputs.icon) {
             return '';
         }
+
         return inputs.icon.svgTemplate;
     },
 });

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

@@ -1,8 +1,10 @@
-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';
+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';
+
 /**
  * An `<img>` element wrapper that handles size constraints and includes slots for loading and error
  * indicators.
@@ -14,7 +16,20 @@ import { ViraIcon } from './vira-icon.element.js';
  * @category Elements
  * @see https://electrovir.github.io/vira/book/elements/vira-image
  */
-export const ViraImage = defineViraElement()({
+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;
+}>()({
     tagName: 'vira-image',
     state() {
         return {
@@ -22,26 +37,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: {},
+            loadedUrls: {} as 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: {},
+            erroredUrls: {} as Readonly<{[url: string]: true}>,
         };
     },
     hostClasses: {
-        'vira-image-height-constrained': ({ inputs }) => inputs.dominantDimension === 'height',
+        'vira-image-height-constrained': ({inputs}) => inputs.dominantDimension === 'height',
     },
     slotNames: [
         'loading',
         'error',
     ],
     events: {
-        imageLoad: defineElementEvent(),
-        imageError: defineElementEvent(),
+        imageLoad: defineElementEvent<void>(),
+        imageError: defineElementEvent<unknown>(),
     },
-    styles: ({ hostClasses }) => css `
+    styles: ({hostClasses}) => css`
         :host {
             display: inline-flex;
             overflow: hidden;
@@ -88,55 +103,60 @@ 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.js → src/elements/vira-input.element.ts}

@@ -1,28 +1,49 @@
-import { assertWrap } from '@augment-vir/assert';
-import { randomString } from '@augment-vir/common';
-import { extractEventTarget } from '@augment-vir/web';
-import { attributes, css, defineElementEvent, html, ifDefined, listen, nothing, onResize, renderIf, } from 'element-vir';
-import { CloseX24Icon } from '../icons/icon-svgs/close-x-24.icon.js';
-import { EyeClosed24Icon, EyeOpen24Icon } from '../icons/index.js';
-import { createFocusStyles } from '../styles/focus.js';
-import { viraFormCssVars } from '../styles/form-styles.js';
-import { noUserSelect, viraAnimationDurations, viraBorders, viraDisabledStyles, } from '../styles/index.js';
-import { noNativeFormStyles } from '../styles/native-styles.js';
-import { defineViraElement } from './define-vira-element.js';
-import { filterTextInputValue, textInputListener, } from './shared-text-input-logic.js';
-import { ViraIcon } from './vira-icon.element.js';
+import {assertWrap} from '@augment-vir/assert';
+import {type PartialWithUndefined, randomString} from '@augment-vir/common';
+import {extractEventTarget} from '@augment-vir/web';
+import {
+    attributes,
+    css,
+    defineElementEvent,
+    html,
+    ifDefined,
+    listen,
+    nothing,
+    onResize,
+    renderIf,
+} from 'element-vir';
+import {CloseX24Icon} from '../icons/icon-svgs/close-x-24.icon.js';
+import {EyeClosed24Icon, EyeOpen24Icon, type ViraIconSvg} from '../icons/index.js';
+import {createFocusStyles} from '../styles/focus.js';
+import {viraFormCssVars} from '../styles/form-styles.js';
+import {
+    noUserSelect,
+    viraAnimationDurations,
+    viraBorders,
+    viraDisabledStyles,
+} from '../styles/index.js';
+import {noNativeFormStyles} from '../styles/native-styles.js';
+import {defineViraElement} from './define-vira-element.js';
+import {
+    type SharedTextInputElementInputs,
+    filterTextInputValue,
+    textInputListener,
+} from './shared-text-input-logic.js';
+import {ViraIcon} from './vira-icon.element.js';
+
 export * from './shared-text-input-logic.js';
+
 /**
  * Input types for {@link ViraInput}.
  *
  * @category Internal
  */
-export var ViraInputType;
-(function (ViraInputType) {
-    ViraInputType["Default"] = "text";
-    ViraInputType["Password"] = "password";
-    ViraInputType["Email"] = "email";
-})(ViraInputType || (ViraInputType = {}));
+export 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}.
@@ -31,21 +52,39 @@ export var ViraInputType;
  * @category Elements
  * @see https://electrovir.github.io/vira/book/elements/vira-input
  */
-export const ViraInput = defineViraElement()({
+export const ViraInput = defineViraElement<
+    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;
+        }> &
+            SharedTextInputElementInputs
+    >
+>()({
     tagName: 'vira-input',
     cssVars: {
         'vira-input-action-button-color': '#aaaaaa',
+
         'vira-input-clear-button-hover-color': '#ff0000',
         'vira-input-clear-button-active-color': '#b30000',
+
         // eslint-disable-next-line sonarjs/no-hardcoded-passwords
         'vira-input-show-password-button-hover-color': '#0a89ff',
         // eslint-disable-next-line sonarjs/no-hardcoded-passwords
         'vira-input-show-password-button-active-color': '#0261ba',
+
         'vira-input-padding-horizontal': '10px',
         'vira-input-padding-vertical': '6px',
     },
-    styles: ({ hostClasses, cssVars }) => {
-        return css `
+    styles: ({hostClasses, cssVars}) => {
+        return css`
             :host {
                 position: relative;
                 display: inline-flex;
@@ -178,19 +217,19 @@ export const ViraInput = defineViraElement()({
 
                 &:focus:focus-visible:not([disabled]) ~ .focus-border {
                     ${createFocusStyles({
-            elementBorderSize: 0,
-            noNesting: true,
-        })}
+                        elementBorderSize: 0,
+                        noNesting: true,
+                    })}
                 }
             }
 
             ::selection {
                 background: ${viraFormCssVars['vira-form-text-selection-color']
-            .value}; /* WebKit/Blink Browsers */
+                    .value}; /* WebKit/Blink Browsers */
             }
             ::-moz-selection {
                 background: ${viraFormCssVars['vira-form-text-selection-color']
-            .value}; /* Gecko Browsers */
+                    .value}; /* Gecko Browsers */
             }
 
             input:placeholder-shown {
@@ -268,13 +307,13 @@ export const ViraInput = defineViraElement()({
          * Fires whenever a user input created a new value. Does not fire if all input letters are
          * filtered out due to input restrictions.
          */
-        valueChange: defineElementEvent(),
+        valueChange: defineElementEvent<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: defineElementEvent(),
+        inputBlocked: defineElementEvent<string>(),
     },
     state() {
         return {
@@ -288,56 +327,69 @@ export const ViraInput = defineViraElement()({
         };
     },
     hostClasses: {
-        'vira-input-disabled': ({ inputs }) => !!inputs.disabled,
-        'vira-input-fit-text': ({ inputs }) => !!inputs.fitText,
-        'vira-input-clear-button-shown': ({ inputs }) => !!inputs.showClearButton,
-        'vira-input-error': ({ inputs }) => !!inputs.hasError,
+        'vira-input-disabled': ({inputs}) => !!inputs.disabled,
+        'vira-input-fit-text': ({inputs}) => !!inputs.fitText,
+        'vira-input-clear-button-shown': ({inputs}) => !!inputs.showClearButton,
+        'vira-input-error': ({inputs}) => !!inputs.hasError,
     },
-    render: ({ inputs, dispatch, state, updateState, events, host }) => {
-        const { filtered: filteredValue } = filterTextInputValue({
+    render: ({inputs, dispatch, state, updateState, events, host}) => {
+        const {filtered: filteredValue} = filterTextInputValue({
             value: inputs.value,
             allowed: inputs.allowedInputs,
             blocked: inputs.blockedInputs,
         });
+
         const iconTemplate = inputs.icon
-            ? html `
-                  <${ViraIcon.assign({ icon: inputs.icon })} class="left-side-icon"></${ViraIcon}>
+            ? html`
+                  <${ViraIcon.assign({icon: inputs.icon})} class="left-side-icon"></${ViraIcon}>
               `
             : nothing;
+
         const forcedInputWidthStyles = inputs.fitText
-            ? css `
+            ? css`
                   width: ${state.forcedInputWidth}px;
               `
             : nothing;
+
         const mousedownListener = listen('mousedown', (event) => {
             const eventTarget = extractEventTarget(event, HTMLElement, {
                 useOriginalTarget: true,
             });
-            const inputElement = assertWrap.instanceOf(host.shadowRoot.querySelector('input'), HTMLInputElement);
+            const inputElement = assertWrap.instanceOf(
+                host.shadowRoot.querySelector('input'),
+                HTMLInputElement,
+            );
+
             if (eventTarget !== inputElement) {
                 event.preventDefault();
                 inputElement.focus();
             }
         });
-        const shouldBlockBrowserHelps = inputs.disableBrowserHelps ||
+
+        const shouldBlockBrowserHelps =
+            inputs.disableBrowserHelps ||
             /**
              * Some browsers leaks passwords with their browser helps (like Chrome with
              * spellchecking).
              */
             inputs.type === ViraInputType.Password;
-        const inputTemplate = html `
+
+        const inputTemplate = html`
             <span class="input-wrapper" ${inputs.label ? nothing : mousedownListener}>
                 ${iconTemplate}
-                ${renderIf(!!inputs.fitText, html `
+                ${renderIf(
+                    !!inputs.fitText,
+                    html`
                         <span
                             class="size-span"
-                            ${onResize(({ contentRect }) => {
-            updateState({ forcedInputWidth: contentRect.width });
-        })}
+                            ${onResize(({contentRect}) => {
+                                updateState({forcedInputWidth: contentRect.width});
+                            })}
                         >
                             <pre>${filteredValue || inputs.placeholder || nothing}</pre>
                         </span>
-                    `)}
+                    `,
+                )}
 
                 <input
                     id=${ifDefined(inputs.label ? state.randomId : undefined)}
@@ -352,61 +404,70 @@ export const ViraInput = defineViraElement()({
                     ?disabled=${inputs.disabled}
                     .value=${filteredValue}
                     ${listen('input', (event) => {
-            textInputListener({
-                inputs,
-                previousValue: filteredValue,
-                event,
-                inputBlockedCallback(blockedInput) {
-                    dispatch(new events.inputBlocked(blockedInput));
-                },
-                newValueCallback(newValue) {
-                    dispatch(new events.valueChange(newValue));
-                },
-            });
-        })}
+                        textInputListener({
+                            inputs,
+                            previousValue: filteredValue,
+                            event,
+                            inputBlockedCallback(blockedInput) {
+                                dispatch(new events.inputBlocked(blockedInput));
+                            },
+                            newValueCallback(newValue) {
+                                dispatch(new events.valueChange(newValue));
+                            },
+                        });
+                    })}
                     placeholder=${ifDefined(inputs.placeholder || undefined)}
                     ${attributes(inputs.attributePassthrough)}
                 />
 
-                ${renderIf(!!(inputs.showClearButton && inputs.value), html `
+                ${renderIf(
+                    !!(inputs.showClearButton && inputs.value),
+                    html`
                         <button
                             class="clear-x-button"
                             title="clear"
                             ${listen('mousedown', (event) => {
-            event.stopImmediatePropagation();
-            event.preventDefault();
-        })}
+                                event.stopImmediatePropagation();
+                                event.preventDefault();
+                            })}
                             ${listen('click', () => {
-            if (inputs.disabled) {
-                return;
-            }
-            dispatch(new events.valueChange(''));
-        })}
+                                if (inputs.disabled) {
+                                    return;
+                                }
+                                dispatch(new events.valueChange(''));
+                            })}
                         >
-                            <${ViraIcon.assign({ icon: CloseX24Icon })}></${ViraIcon}>
+                            <${ViraIcon.assign({icon: CloseX24Icon})}></${ViraIcon}>
                         </button>
-                    `)}
-                ${renderIf(inputs.type === ViraInputType.Password, html `
+                    `,
+                )}
+                ${renderIf(
+                    inputs.type === ViraInputType.Password,
+                    html`
                         <button
                             class="show-password-button"
                             title="show password"
                             ${listen('mousedown', (event) => {
-            /** Prevent focus of the input. */
-            event.stopImmediatePropagation();
-            event.preventDefault();
-        })}
+                                /** Prevent focus of the input. */
+                                event.stopImmediatePropagation();
+                                event.preventDefault();
+                            })}
                             ${listen('click', () => {
-            updateState({ showPassword: !state.showPassword });
-        })}
+                                updateState({showPassword: !state.showPassword});
+                            })}
                         >
                             <${ViraIcon.assign({
-            icon: state.showPassword ? EyeOpen24Icon : EyeClosed24Icon,
-        })}></${ViraIcon}>
+                                icon: state.showPassword ? EyeOpen24Icon : EyeClosed24Icon,
+                            })}></${ViraIcon}>
                         </button>
-                    `)}
-                ${renderIf(!!inputs.suffix, html `
+                    `,
+                )}
+                ${renderIf(
+                    !!inputs.suffix,
+                    html`
                         <div class="suffix">${inputs.suffix}</div>
-                    `)}
+                    `,
+                )}
 
                 <!--
                     These separate style elements are necessary so that we can select them as
@@ -418,22 +479,27 @@ export const ViraInput = defineViraElement()({
                 <div class="border-style wrapper-border"></div>
             </span>
         `;
+
         if (inputs.label) {
-            return html `
+            return html`
                 <label for=${state.randomId} ${mousedownListener}>
                     <span class="input-label">${inputs.label}</span>
                     ${inputTemplate}
                 </label>
             `;
-        }
-        else {
+        } else {
             return inputTemplate;
         }
     },
 });
-function calculateEffectiveInputType(type, showPassword) {
+
+function calculateEffectiveInputType(
+    type: ViraInputType | undefined,
+    showPassword: boolean,
+): ViraInputType {
     if (type === ViraInputType.Password && showPassword) {
         return ViraInputType.Default;
     }
+
     return type || ViraInputType.Default;
 }