vira 32.0.0-beta.0 → 32.1.0

package/dist/elements/vira-form.element.js

@@ -0,0 +1,376 @@
+import { getObjectTypedEntries } from '@augment-vir/common';
+import { css, defineElementEvent, html, listen, nothing, testId, } from 'element-vir';
+import { viraFormCssVars } from '../styles/form-styles.js';
+import { defineViraElement } from '../util/define-vira-element.js';
+import { applyRequiredLabel, areFormFieldsValid, ViraFormFieldType, } from '../util/vira-form-fields.js';
+import { ViraCheckbox } from './vira-checkbox.element.js';
+import { ViraDateInput } from './vira-date-input.element.js';
+import { ViraInput, ViraInputType } from './vira-input.element.js';
+import { ViraSelect } from './vira-select.element.js';
+import { ViraTextArea } from './vira-text-area.element.js';
+/**
+ * A form element.
+ *
+ * @category Elements
+ * @see https://electrovir.github.io/vira/book/elements/vira-form
+ */
+export const ViraForm = defineViraElement()({
+    tagName: 'vira-form',
+    state() {
+        return {
+            lastIsValid: false,
+        };
+    },
+    events: {
+        valueChange: defineElementEvent(),
+        validChange: defineElementEvent(),
+    },
+    styles: css `
+        :host {
+            display: flex;
+        }
+
+        form {
+            display: flex;
+            flex-grow: 1;
+            flex-direction: column;
+            align-items: stretch;
+            gap: 10px;
+
+            > * {
+                width: unset;
+            }
+        }
+
+        .horizontal-fields {
+            width: 100%;
+            border-collapse: separate;
+            border-spacing: 0 10px;
+
+            & th,
+            & td {
+                padding: 0;
+            }
+
+            & th {
+                padding: 0 8px;
+                vertical-align: middle;
+                white-space: nowrap;
+                font-weight: ${viraFormCssVars['vira-form-label-font-weight'].value};
+                text-align: right;
+            }
+
+            & td {
+                width: 100%;
+                vertical-align: top;
+
+                &
+                    > ${ViraCheckbox},
+                    &
+                    > ${ViraDateInput},
+                    &
+                    > ${ViraInput},
+                    &
+                    > ${ViraSelect},
+                    &
+                    > ${ViraTextArea} {
+                    width: 100%;
+                }
+            }
+        }
+    `,
+    render({ inputs, dispatch, events, state, updateState }) {
+        const currentIsValid = areFormFieldsValid(inputs.fields);
+        if (currentIsValid !== state.lastIsValid) {
+            updateState({
+                lastIsValid: currentIsValid,
+            });
+            dispatch(new events.validChange({
+                detail: {
+                    allFieldsAreValid: currentIsValid,
+                },
+            }));
+        }
+        function wrapFormField({ fieldTemplate, label, }) {
+            if (inputs.useHorizontalLabels) {
+                return html `
+                    <tr>
+                        <th scope="row">${label}</th>
+                        <td>${fieldTemplate}</td>
+                    </tr>
+                `;
+            }
+            else {
+                return fieldTemplate;
+            }
+        }
+        const formFieldTemplates = getObjectTypedEntries(inputs.fields).map(([key, field,]) => {
+            const isDisabled = !!(inputs.isDisabled || field.isDisabled);
+            const showRequiredMarker = !!field.isRequired && !inputs.hideRequiredMarkers;
+            if (field.isHidden) {
+                return nothing;
+            }
+            else if (field.type === ViraFormFieldType.Checkbox) {
+                const checkboxLabel = showRequiredMarker
+                    ? html `
+                              ${field.label}*
+                          `
+                    : field.label;
+                return wrapFormField({
+                    label: checkboxLabel,
+                    fieldTemplate: html `
+                            <${ViraCheckbox.assign({
+                        value: field.value || false,
+                        isDisabled: !!(isDisabled || inputs.isReadonly),
+                        hasError: field.hasError,
+                        useHorizontalLabel: inputs.horizontalCheckboxes,
+                        fillWhenChecked: field.fillWhenChecked,
+                        fillWhenUnchecked: field.fillWhenUnchecked,
+                    })}
+                                ${field.testId ? testId(field.testId) : nothing}
+                                ${listen(ViraCheckbox.events.valueChange, (event) => {
+                        dispatch(new events.valueChange({
+                            detail: {
+                                key,
+                                ...field,
+                                value: event.detail,
+                            },
+                        }));
+                    })}
+                            >
+                                ${inputs.useHorizontalLabels
+                        ? nothing
+                        : html `
+                                          <span
+                                              slot=${ViraCheckbox.slotNames['vira-checkbox-label']}
+                                          >
+                                              ${checkboxLabel}
+                                          </span>
+                                      `}
+                            </${ViraCheckbox}>
+                        `,
+                });
+            }
+            const label = applyRequiredLabel(field.label, showRequiredMarker);
+            const childLabel = inputs.useHorizontalLabels ? undefined : label;
+            const horizontalLabelAttributes = inputs.useHorizontalLabels && label
+                ? {
+                    'aria-label': label,
+                }
+                : {};
+            if (field.type === ViraFormFieldType.Select) {
+                return wrapFormField({
+                    label,
+                    fieldTemplate: html `
+                            <${ViraSelect.assign({
+                        options: field.options,
+                        value: field.value,
+                        placeholder: field.placeholder,
+                        disabled: isDisabled,
+                        isReadonly: inputs.isReadonly,
+                        label: childLabel,
+                        hasError: field.hasError,
+                        icon: field.icon,
+                        ...(inputs.useHorizontalLabels && label
+                            ? {
+                                attributePassthrough: {
+                                    select: horizontalLabelAttributes,
+                                },
+                            }
+                            : {}),
+                    })}
+                                ${field.testId ? testId(field.testId) : nothing}
+                                ${listen(ViraSelect.events.valueChange, (event) => {
+                        dispatch(new events.valueChange({
+                            detail: {
+                                key,
+                                ...field,
+                                value: event.detail,
+                            },
+                        }));
+                    })}
+                            ></${ViraSelect}>
+                        `,
+                });
+            }
+            else if (field.type === ViraFormFieldType.TextArea) {
+                return wrapFormField({
+                    label,
+                    fieldTemplate: html `
+                            <${ViraTextArea.assign({
+                        value: field.value || '',
+                        disabled: isDisabled,
+                        hasError: field.hasError,
+                        isReadonly: inputs.isReadonly,
+                        label: childLabel,
+                        placeholder: field.placeholder,
+                        rows: field.rows,
+                        preventResize: field.preventResize,
+                        attributePassthrough: horizontalLabelAttributes,
+                    })}
+                                ${field.testId ? testId(field.testId) : nothing}
+                                ${listen(ViraTextArea.events.valueChange, (event) => {
+                        dispatch(new events.valueChange({
+                            detail: {
+                                key,
+                                ...field,
+                                value: event.detail,
+                            },
+                        }));
+                    })}
+                            ></${ViraTextArea}>
+                        `,
+                });
+            }
+            else if (field.type === ViraFormFieldType.Number) {
+                return wrapFormField({
+                    label,
+                    fieldTemplate: html `
+                            <${ViraInput.assign({
+                        value: field.value?.toString() || '',
+                        disabled: isDisabled,
+                        allowedInputs: /\d/,
+                        hasError: field.hasError,
+                        icon: field.icon,
+                        isReadonly: inputs.isReadonly,
+                        label: childLabel,
+                        placeholder: field.placeholder,
+                        showClearButton: inputs.showClearButtons,
+                        type: ViraInputType.Number,
+                        attributePassthrough: {
+                            ...horizontalLabelAttributes,
+                            ...(field.min == undefined
+                                ? {}
+                                : {
+                                    min: String(field.min),
+                                }),
+                            ...(field.max == undefined
+                                ? {}
+                                : {
+                                    max: String(field.max),
+                                }),
+                            ...(field.step == undefined
+                                ? {}
+                                : {
+                                    step: String(field.step),
+                                }),
+                        },
+                    })}
+                                ${field.testId ? testId(field.testId) : nothing}
+                                ${listen(ViraInput.events.valueChange, (event) => {
+                        const numericValue = event.detail === '' ? undefined : Number(event.detail);
+                        dispatch(new events.valueChange({
+                            detail: {
+                                key,
+                                ...field,
+                                value: numericValue,
+                            },
+                        }));
+                    })}
+                            ></${ViraInput}>
+                        `,
+                });
+            }
+            else if (field.type === ViraFormFieldType.Date) {
+                return wrapFormField({
+                    label,
+                    fieldTemplate: html `
+                            <${ViraDateInput.assign({
+                        value: field.value,
+                        min: field.min,
+                        max: field.max,
+                        timezone: field.timezone,
+                        showDateOnly: field.showDateOnly,
+                        showTimeOnly: field.showTimeOnly,
+                        isDisabled,
+                        hasError: field.hasError,
+                        isReadonly: inputs.isReadonly,
+                        label: childLabel,
+                    })}
+                                ${field.testId ? testId(field.testId) : nothing}
+                                ${listen(ViraDateInput.events.valueChange, (event) => {
+                        dispatch(new events.valueChange({
+                            detail: {
+                                key,
+                                ...field,
+                                value: event.detail,
+                            },
+                        }));
+                    })}
+                            ></${ViraDateInput}>
+                        `,
+                });
+            }
+            else {
+                return wrapFormField({
+                    label,
+                    fieldTemplate: html `
+                            <${ViraInput.assign({
+                        value: field.value || '',
+                        disabled: isDisabled,
+                        hasError: field.hasError,
+                        icon: field.icon,
+                        isReadonly: inputs.isReadonly,
+                        label: childLabel,
+                        placeholder: field.placeholder,
+                        showClearButton: inputs.showClearButtons,
+                        attributePassthrough: {
+                            ...horizontalLabelAttributes,
+                            ...(field.isUsername
+                                ? {
+                                    autocomplete: 'username',
+                                }
+                                : field.type === ViraFormFieldType.NewPassword
+                                    ? {
+                                        autocomplete: 'new-password',
+                                    }
+                                    : field.type === ViraFormFieldType.ExistingPassword
+                                        ? {
+                                            autocomplete: 'password',
+                                        }
+                                        : field.type === ViraFormFieldType.Email
+                                            ? {
+                                                autocomplete: 'email',
+                                            }
+                                            : {}),
+                        },
+                        type: [
+                            ViraFormFieldType.NewPassword,
+                            ViraFormFieldType.ExistingPassword,
+                            ViraFormFieldType.PlainPassword,
+                        ].includes(field.type)
+                            ? ViraInputType.Password
+                            : field.type === ViraFormFieldType.Email
+                                ? ViraInputType.Email
+                                : ViraInputType.Default,
+                    })}
+                                ${field.testId ? testId(field.testId) : nothing}
+                                ${listen(ViraInput.events.valueChange, (event) => {
+                        dispatch(new events.valueChange({
+                            detail: {
+                                key,
+                                ...field,
+                                value: event.detail,
+                            },
+                        }));
+                    })}
+                            ></${ViraInput}>
+                        `,
+                });
+            }
+        });
+        const formFieldsWrapper = inputs.useHorizontalLabels
+            ? html `
+                  <table class="horizontal-fields">
+                      <tbody>${formFieldTemplates}</tbody>
+                  </table>
+              `
+            : formFieldTemplates;
+        return html `
+            <form ${listen('submit', (event) => event.preventDefault())}>
+                ${formFieldsWrapper}
+                <slot></slot>
+            </form>
+        `;
+    },
+});

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" | "size"> | 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,8 +1,6 @@
-import {addPx} from '@augment-vir/common';
-import {css} from 'element-vir';
-import {type ViraIconSvg} from '../icons/icon-svg.js';
-import {defineViraElement} from '../util/define-vira-element.js';
-
+import { addPx } from '@augment-vir/common';
+import { css } from 'element-vir';
+import { defineViraElement } from '../util/define-vira-element.js';
 /**
  * An element that renders a single {@link ViraIconSvg}.
  *
@@ -10,18 +8,16 @@ import {defineViraElement} from '../util/define-vira-element.js';
  * @category Elements
  * @see https://electrovir.github.io/vira/book/elements/vira-icon
  */
-export const ViraIcon = defineViraElement<{
-    icon: Pick<ViraIconSvg, 'svgTemplate' | 'size'> | 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 || !!inputs.icon?.size,
+        'vira-icon-fit-container'({ inputs }) {
+            return !!inputs.fitContainer || !!inputs.icon?.size;
+        },
     },
-    styles: ({hostClasses}) => {
-        return css`
+    styles({ hostClasses }) {
+        return css `
             :host {
                 display: inline-flex;
                 justify-content: center;
@@ -50,14 +46,14 @@ export const ViraIcon = defineViraElement<{
             }
         `;
     },
-    render({inputs, host}) {
+    render({ inputs, host }) {
         if (!inputs.icon) {
             return '';
-        } else if (inputs.icon.size) {
+        }
+        else if (inputs.icon.size) {
             host.style.width = addPx(inputs.icon.size);
             host.style.height = addPx(inputs.icon.size);
         }
-
         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-${string}`, {
+    /** 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").DefineElementEvent<void>;
+    imageError: import("element-vir").DefineElementEvent<unknown>;
+}, "vira-image-height-constrained", `vira-${string}-`, readonly ["vira-image-loading", "vira-image-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 '../util/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 '../util/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,27 +22,29 @@ 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 }) {
+            return inputs.dominantDimension === 'height';
+        },
     },
     slotNames: [
         'vira-image-loading',
         'vira-image-error',
     ],
     events: {
-        imageLoad: defineElementEvent<void>(),
-        imageError: defineElementEvent<unknown>(),
+        imageLoad: defineElementEvent(),
+        imageError: defineElementEvent(),
     },
-    styles: ({hostClasses}) => {
-        return css`
+    styles({ hostClasses }) {
+        return css `
             :host {
                 display: inline-flex;
                 overflow: hidden;
@@ -105,70 +92,63 @@ export const ViraImage = defineViraElement<{
             }
         `;
     },
-    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['vira-image-error']}>
                       <${ViraIcon.assign({
-                          icon: StatusFailure24Icon,
-                      })}
+                icon: StatusFailure24Icon,
+            })}
                           class="error"
                       ></${ViraIcon}>
                   </slot>
               `
             : state.loadedUrls[imageUrl]
-              ? undefined
-              : html`
+                ? undefined
+                : html `
                     <slot class="status-wrapper" name=${slotNames['vira-image-loading']}>
                         <${ViraIcon.assign({
-                            icon: LoaderAnimated24Icon,
-                        })}></${ViraIcon}>
+                    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({
-                            detail: undefined,
-                        }),
-                    );
-                })}
+            if (inputs._debugLoadDelay) {
+                await wait(inputs._debugLoadDelay);
+            }
+            updateState({
+                loadedUrls: {
+                    ...state.loadedUrls,
+                    [imageUrl]: true,
+                },
+            });
+            dispatch(new events.imageLoad({
+                detail: undefined,
+            }));
+        })}
                 ${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}
             />
         `;