vira 32.0.0-beta.0 → 32.0.0

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

@@ -0,0 +1,64 @@
+import { type PartialWithUndefined } from '@augment-vir/common';
+import { type ViraIconSvg } from '../icons/index.js';
+export * from '../util/shared-text-input-logic.js';
+/**
+ * Input types for {@link ViraInput}.
+ *
+ * @category Internal
+ */
+export declare enum ViraInputType {
+    Default = "text",
+    Password = "password",
+    Email = "email",
+    Number = "number"
+}
+/**
+ * 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", 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;
+    isReadonly: 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").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: import("element-vir").DefineElementEvent<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 []>;

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

@@ -1,47 +1,31 @@
-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/24/close-x-24.icon.js';
-import {EyeClosed24Icon, EyeOpen24Icon, type ViraIconSvg} from '../icons/index.js';
-import {createFocusStyles} from '../styles/focus.js';
-import {viraFontCssVars} from '../styles/font.js';
-import {viraFormCssVars} from '../styles/form-styles.js';
-import {ViraSize, viraSizeHeights} from '../styles/form-variants.js';
-import {noUserSelect, viraAnimationDurations, viraDisabledStyles} from '../styles/index.js';
-import {noNativeFormStyles} from '../styles/native-styles.js';
-import {defineViraElement} from '../util/define-vira-element.js';
-import {
-    type SharedTextInputElementInputs,
-    filterTextInputValue,
-    textInputListener,
-} from '../util/shared-text-input-logic.js';
-import {ViraIcon} from './vira-icon.element.js';
-
+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/24/close-x-24.icon.js';
+import { EyeClosed24Icon, EyeOpen24Icon } from '../icons/index.js';
+import { createFocusStyles } from '../styles/focus.js';
+import { viraFontCssVars } from '../styles/font.js';
+import { viraFormCssVars } from '../styles/form-styles.js';
+import { ViraSize, viraSizeHeights } from '../styles/form-variants.js';
+import { noUserSelect, viraAnimationDurations, viraDisabledStyles } from '../styles/index.js';
+import { noNativeFormStyles } from '../styles/native-styles.js';
+import { defineViraElement } from '../util/define-vira-element.js';
+import { filterTextInputValue, textInputListener, } from '../util/shared-text-input-logic.js';
+import { ViraIcon } from './vira-icon.element.js';
 export * from '../util/shared-text-input-logic.js';
-
 /**
  * Input types for {@link ViraInput}.
  *
  * @category Internal
  */
-export enum ViraInputType {
-    Default = 'text',
-    Password = 'password',
-    Email = 'email',
-    Number = 'number',
-}
-
+export var ViraInputType;
+(function (ViraInputType) {
+    ViraInputType["Default"] = "text";
+    ViraInputType["Password"] = "password";
+    ViraInputType["Email"] = "email";
+    ViraInputType["Number"] = "number";
+})(ViraInputType || (ViraInputType = {}));
 /**
  * A single line input element with all listeners properly attached. Multiple types are allowed with
  * {@link ViraInputType}.
@@ -50,27 +34,14 @@ export enum ViraInputType {
  * @category Elements
  * @see https://electrovir.github.io/vira/book/elements/vira-input
  */
-export const ViraInput = defineViraElement<
-    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
->()({
+export const ViraInput = defineViraElement()({
     tagName: 'vira-input',
     cssVars: {
         'vira-input-padding-horizontal': '12px',
         'vira-input-padding-vertical': '4px',
     },
-    styles: ({hostClasses, cssVars}) => {
-        return css`
+    styles({ hostClasses, cssVars }) {
+        return css `
             :host {
                 position: relative;
                 display: inline-flex;
@@ -208,19 +179,19 @@ export const ViraInput = defineViraElement<
 
                 &:focus:focus-visible:not([disabled]) ~ .focus-border {
                     ${createFocusStyles({
-                        elementBorderSize: '1px',
-                        noNesting: true,
-                    })}
+            elementBorderSize: '1px',
+            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 {
@@ -298,13 +269,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<string>(),
+        valueChange: defineElementEvent(),
         /**
          * 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<string>(),
+        inputBlocked: defineElementEvent(),
     },
     state() {
         return {
@@ -318,92 +289,86 @@ 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 }) {
+            return !!inputs.disabled;
+        },
+        'vira-input-fit-text'({ inputs }) {
+            return !!inputs.fitText;
+        },
+        'vira-input-clear-button-shown'({ inputs }) {
+            return !!inputs.showClearButton;
+        },
+        'vira-input-error'({ inputs }) {
+            return !!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,
         });
-
         if (inputs.isReadonly) {
-            const readonlyValueTemplate = html`
+            const readonlyValueTemplate = html `
                 <span class="readonly-value">${filteredValue}</span>
             `;
-
             if (inputs.label) {
-                return html`
+                return html `
                     <label>
                         <span class="input-label">${inputs.label}</span>
                         ${readonlyValueTemplate}
                     </label>
                 `;
-            } else {
+            }
+            else {
                 return readonlyValueTemplate;
             }
         }
-
         const iconTemplate = inputs.icon
-            ? html`
+            ? html `
                   <${ViraIcon.assign({
-                      icon: inputs.icon,
-                  })}
+                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)}
@@ -418,86 +383,71 @@ export const ViraInput = defineViraElement<
                     ?disabled=${inputs.disabled}
                     .value=${filteredValue}
                     ${listen('input', (event) => {
-                        textInputListener({
-                            inputs,
-                            previousValue: filteredValue,
-                            event,
-                            inputBlockedCallback(blockedInput) {
-                                dispatch(
-                                    new events.inputBlocked({
-                                        detail: blockedInput,
-                                    }),
-                                );
-                            },
-                            newValueCallback(newValue) {
-                                dispatch(
-                                    new events.valueChange({
-                                        detail: newValue,
-                                    }),
-                                );
-                            },
-                        });
-                    })}
+            textInputListener({
+                inputs,
+                previousValue: filteredValue,
+                event,
+                inputBlockedCallback(blockedInput) {
+                    dispatch(new events.inputBlocked({
+                        detail: blockedInput,
+                    }));
+                },
+                newValueCallback(newValue) {
+                    dispatch(new events.valueChange({
+                        detail: 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({
-                                        detail: '',
-                                    }),
-                                );
-                            })}
+            if (inputs.disabled) {
+                return;
+            }
+            dispatch(new events.valueChange({
+                detail: '',
+            }));
+        })}
                         >
                             <${ViraIcon.assign({
-                                icon: CloseX24Icon,
-                            })}></${ViraIcon}>
+            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
@@ -509,27 +459,22 @@ 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: ViraInputType | undefined,
-    showPassword: boolean,
-): ViraInputType {
+function calculateEffectiveInputType(type, showPassword) {
     if (type === ViraInputType.Password && showPassword) {
         return ViraInputType.Default;
     }
-
     return type || ViraInputType.Default;
 }

package/dist/elements/vira-json-form.element.d.ts

@@ -0,0 +1,35 @@
+import { type JsonValue, type PartialWithUndefined } from '@augment-vir/common';
+import { ViraJsonType, type ViraJsonSchema } from '../util/vira-json-schema.js';
+/**
+ * Editing mode for a string field that offers both a fixed set of enum options and free-form text.
+ *
+ * @category Internal
+ */
+export declare enum ViraJsonStringMode {
+    /** Pick from the schema's enum options via a dropdown. */
+    Options = "options",
+    /** Enter an arbitrary string via a text input. */
+    Custom = "custom"
+}
+/**
+ * An editor for arbitrary JSON values, optionally constrained by a standard JSON Schema
+ * ({@link ViraJsonSchema}).
+ *
+ * @category Elements
+ */
+export declare const ViraJsonForm: import("element-vir").DeclarativeElementDefinition<"vira-json-form", {
+    value: JsonValue;
+} & PartialWithUndefined<{
+    schema: Readonly<ViraJsonSchema>;
+    isDisabled: boolean;
+}>, {
+    pendingKeys: Readonly<Record<string, string>>;
+    pendingTypes: Readonly<Record<string, ViraJsonType>>;
+    pendingArrayValues: Readonly<Record<string, JsonValue>>;
+    stringModes: Readonly<Record<string, ViraJsonStringMode>>;
+    showRaw: boolean;
+    rawDraft: string | undefined;
+    rawError: string | undefined;
+}, {
+    valueChange: import("element-vir").DefineElementEvent<JsonValue>;
+}, "vira-json-form-", "vira-json-form-", readonly [], readonly []>;