vira 27.0.0 → 28.1.0

package/dist/elements/pop-up/vira-pop-up-trigger.element.js

@@ -0,0 +1,282 @@
+import { assert } from '@augment-vir/assert';
+import { NavController } from 'device-navigation';
+import { classMap, css, defineElementEvent, html, listen, renderIf } from 'element-vir';
+import { createFocusStyles } from '../../styles/focus.js';
+import { noNativeFormStyles, noUserSelect, viraDisabledStyles } from '../../styles/index.js';
+import { HidePopUpEvent, NavSelectEvent, PopUpManager, } from '../../util/pop-up-manager.js';
+import { defineViraElement } from '../define-vira-element.js';
+import { triggerPopUpState } from './pop-up-helpers.js';
+/**
+ * Anchor options for pop-ups.
+ *
+ * @category Internal
+ */
+export var HorizontalAnchor;
+(function (HorizontalAnchor) {
+    /**
+     * The left side of the pop-up will be anchored to the left side of the trigger, allowing the
+     * pop-up to grow on the right side of the trigger.
+     */
+    HorizontalAnchor["Left"] = "left";
+    /**
+     * The Right side of the pop-up will be anchored to the right side of the trigger, allowing the
+     * pop-up to grow on the left side of the trigger.
+     */
+    HorizontalAnchor["Right"] = "right";
+    /**
+     * Restrict the pop-up on both sides.
+     *
+     * This is the default anchor for {@link ViraPopUpTrigger}.
+     */
+    HorizontalAnchor["Both"] = "both";
+})(HorizontalAnchor || (HorizontalAnchor = {}));
+/**
+ * An element with slots for a pop-up trigger and pop-up contents.
+ *
+ * @category PopUp
+ * @category Elements
+ * @see https://electrovir.github.io/vira/book/elements/vira-pop-up-trigger
+ */
+export const ViraPopUpTrigger = defineViraElement()({
+    tagName: 'vira-pop-up-trigger',
+    state({ host }) {
+        return {
+            /** `undefined` means the pop up is not currently showing. */
+            showPopUpResult: undefined,
+            popUpManager: new PopUpManager(new NavController(host, { activateOnMouseUp: true })),
+        };
+    },
+    slotNames: [
+        'trigger',
+        'popUp',
+    ],
+    hostClasses: {
+        'vira-pop-up-trigger-disabled': ({ inputs }) => !!inputs.isDisabled,
+    },
+    styles: ({ hostClasses }) => css `
+        :host {
+            display: inline-flex;
+            box-sizing: border-box;
+            vertical-align: middle;
+            position: relative;
+            max-width: 100%;
+        }
+
+        .dropdown-wrapper {
+            ${noNativeFormStyles};
+            cursor: pointer;
+            max-width: 100%;
+            position: relative;
+            flex-grow: 1;
+            box-sizing: border-box;
+
+            ${createFocusStyles({
+        elementBorderSize: 1,
+    })}
+        }
+
+        .dropdown-trigger {
+            box-sizing: border-box;
+            ${noUserSelect};
+        }
+
+        ${hostClasses['vira-pop-up-trigger-disabled'].selector} {
+            ${viraDisabledStyles}
+            pointer-events: auto;
+        }
+
+        ${hostClasses['vira-pop-up-trigger-disabled'].selector} .dropdown-wrapper {
+            pointer-events: none;
+        }
+
+        .pop-up-positioner {
+            position: absolute;
+            pointer-events: none;
+            display: flex;
+            box-sizing: border-box;
+            flex-direction: column;
+            align-items: flex-start;
+
+            /* highest possible z-index */
+            z-index: 2147483647;
+
+            & > * {
+                pointer-events: auto;
+                max-width: 100%;
+            }
+
+            &.right-aligned {
+                align-items: flex-end;
+            }
+        }
+
+        .open-upwards .pop-up-positioner {
+            flex-direction: column-reverse;
+        }
+    `,
+    events: {
+        navSelect: defineElementEvent(),
+        /**
+         * - `undefined` indicates that the pop-up just closed.
+         * - {@link ShowPopUpResult} indicates that the pop-up just opened.
+         */
+        openChange: defineElementEvent(),
+        init: defineElementEvent(),
+    },
+    cleanup({ state, updateState }) {
+        updateState({ showPopUpResult: undefined });
+        state.popUpManager.destroy();
+    },
+    init({ state, updateState, host, inputs, dispatch, events }) {
+        /** Refocus the trigger and set the result to `undefined` when the pop up closes. */
+        state.popUpManager.listen(HidePopUpEvent, () => {
+            updateState({ showPopUpResult: undefined });
+            dispatch(new events.openChange(undefined));
+            if (!inputs.isDisabled) {
+                const dropdownWrapper = host.shadowRoot.querySelector('.dropdown-wrapper');
+                assert.instanceOf(dropdownWrapper, HTMLButtonElement, 'failed to find dropdown wrapper child');
+                dropdownWrapper.focus();
+            }
+        });
+        state.popUpManager.listen(NavSelectEvent, (event) => {
+            if (!inputs.keepOpenAfterInteraction) {
+                triggerPopUpState({
+                    open: false,
+                    callback(showPopUpResult) {
+                        updateState({
+                            showPopUpResult,
+                        });
+                    },
+                    host,
+                    popUpManager: state.popUpManager,
+                });
+            }
+            dispatch(new events.navSelect(event.detail));
+        });
+        dispatch(new events.init({
+            navController: state.popUpManager.navController,
+            popUpManager: state.popUpManager,
+        }));
+    },
+    render({ dispatch, events, state, inputs, updateState, host, slotNames }) {
+        function triggerPopUp({ emitEvent, open }, event) {
+            if (state.showPopUpResult && inputs.keepOpenAfterInteraction && event) {
+                const dropdownTrigger = host.shadowRoot.querySelector('.dropdown-trigger');
+                if (dropdownTrigger && !event.composedPath().includes(dropdownTrigger)) {
+                    /**
+                     * Prevent closing the pop-up when `keepOpenAfterInteraction` is turned on and
+                     * the pop-up was interacted with.
+                     */
+                    return;
+                }
+            }
+            triggerPopUpState({
+                open,
+                callback(showPopUpResult) {
+                    updateState({ showPopUpResult });
+                    if (emitEvent) {
+                        dispatch(new events.openChange(showPopUpResult));
+                    }
+                },
+                host,
+                popUpManager: state.popUpManager,
+            });
+        }
+        if (inputs.isDisabled) {
+            triggerPopUp({ open: false, emitEvent: false }, undefined);
+        }
+        else if (inputs.z_debug_forceOpenState != undefined) {
+            if (!inputs.z_debug_forceOpenState && state.showPopUpResult) {
+                triggerPopUp({ emitEvent: false, open: false }, undefined);
+            }
+            else if (inputs.z_debug_forceOpenState && !state.showPopUpResult) {
+                triggerPopUp({ emitEvent: false, open: true }, undefined);
+            }
+        }
+        const leftCss = inputs.horizontalAnchor === HorizontalAnchor.Right && state.showPopUpResult
+            ? css `
+                      left: -${state.showPopUpResult.positions.diff.left}px;
+                  `
+            : css `
+                      left: ${inputs.popUpOffset?.left || 0}px;
+                  `;
+        const rightCss = state.showPopUpResult && inputs.horizontalAnchor === HorizontalAnchor.Left
+            ? css `
+                      right: -${state.showPopUpResult.positions.diff.right}px;
+                  `
+            : css `
+                      right: ${inputs.popUpOffset?.right || 0}px;
+                  `;
+        const horizontalPositionStyle = css `
+            ${leftCss}
+            ${rightCss}
+        `;
+        /**
+         * These styles do _not_ account for window resizing while the menu is open. I decided this
+         * was not a major enough problem to tackle. If it becomes major enough in the future,
+         * you'll need to hook into a window _or_ container resize listener inside `PopUpManager`
+         * and emit a new `ShowPopUpResult` instance when it changes.
+         */
+        const positionerStyles = state.showPopUpResult
+            ? state.showPopUpResult.popDown
+                ? /** Dropdown going down position. */
+                    css `
+                      bottom: -${state.showPopUpResult.positions.diff.bottom}px;
+                      top: calc(100% + ${inputs.popUpOffset?.vertical || 0}px);
+                      ${horizontalPositionStyle}
+                  `
+                : /** Dropdown going up position. */
+                    css `
+                      top: -${state.showPopUpResult.positions.diff.top}px;
+                      bottom: calc(100% + ${inputs.popUpOffset?.vertical || 0}px);
+                      ${horizontalPositionStyle}
+                  `
+            : undefined;
+        function respondToClick(event) {
+            triggerPopUp({ emitEvent: true, open: !state.showPopUpResult }, event);
+        }
+        return html `
+            <button
+                ?disabled=${!!inputs.isDisabled}
+                class="dropdown-wrapper ${classMap({
+            open: !!state.showPopUpResult,
+            'open-upwards': !state.showPopUpResult?.popDown,
+        })}"
+                role="listbox"
+                aria-expanded=${!!state.showPopUpResult}
+                ${listen('keydown', (event) => {
+            if (!state.showPopUpResult && event.code.startsWith('Arrow')) {
+                triggerPopUp({ emitEvent: true, open: true }, event);
+            }
+        })}
+                ${listen('click', (event) => {
+            /** Detail is 0 if it was a keyboard key (like Enter) that triggered this click. */
+            if (event.detail === 0) {
+                respondToClick(event);
+            }
+        })}
+                ${listen('mousedown', (event) => {
+            /** Ignore any clicks that aren't the main button. */
+            if (event.button === 0) {
+                respondToClick(event);
+            }
+        })}
+            >
+                <div class="dropdown-trigger">
+                    <slot name=${slotNames.trigger}></slot>
+                </div>
+
+                <div
+                    class="pop-up-positioner ${classMap({
+            'right-aligned': inputs.horizontalAnchor === HorizontalAnchor.Right,
+        })}"
+                    style=${positionerStyles}
+                >
+                    ${renderIf(!!state.showPopUpResult, html `
+                            <slot name=${slotNames.popUp}></slot>
+                        `)}
+                </div>
+            </button>
+        `;
+    },
+});

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

@@ -1,7 +1,8 @@
 import { type PartialWithUndefined } from '@augment-vir/common';
 import { type ViraIconSvg } from '../icons/icon-svg.js';
-import { type ShowPopoverResult } from '../util/popover-manager.js';
-import { type MenuItem } from './popover/popover-menu-item.js';
+import { type ShowPopUpResult } from '../util/pop-up-manager.js';
+import { type MenuItem } from './pop-up/pop-up-menu-item.js';
+import { HorizontalAnchor } from './pop-up/vira-pop-up-trigger.element.js';
 /**
  * Test ids for {@link ViraDropdown}.
  *
@@ -13,7 +14,7 @@ export declare const viraDropdownTestIds: {
     prefix: string;
 };
 /**
- * A dropdown element that uses popover menus.
+ * A dropdown element that uses pop-up menus.
  *
  * @category Dropdown
  * @category Elements
@@ -36,10 +37,21 @@ export declare const ViraDropdown: import("element-vir").DeclarativeElementDefin
     isDisabled: boolean;
     /** For debugging purposes only. Very bad for actual production code use. */
     z_debug_forceOpenState: boolean;
+    /**
+     * - `HorizontalAnchor.Left`: dropdown is anchored to the left side of the trigger and the
+     *   dropdown can grow to the right.
+     * - `HorizontalAnchor.Right`: dropdown is anchored to the right side of the trigger and the
+     *   dropdown can grow to the left.
+     * - `HorizontalAnchor.Both`: dropdown is anchored on both sides of the trigger and cannot
+     *   grow beyond it. (This is the default experience.)
+     *
+     * @default HorizontalAnchor.Both
+     */
+    horizontalAnchor: HorizontalAnchor;
 }>, {
-    /** `undefined` means the popover is not currently showing. */
-    showPopoverResult: ShowPopoverResult | undefined;
+    /** `undefined` means the pop up is not currently showing. */
+    showPopUpResult: ShowPopUpResult | undefined;
 }, {
     selectedChange: import("element-vir").DefineEvent<PropertyKey[]>;
-    openChange: import("element-vir").DefineEvent<ShowPopoverResult | undefined>;
+    openChange: import("element-vir").DefineEvent<ShowPopUpResult | undefined>;
 }, "vira-dropdown-", "vira-dropdown-", readonly [], readonly []>;

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

@@ -6,7 +6,8 @@ import { viraBorders } from '../styles/border.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 './popover/vira-menu-trigger.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}.
@@ -19,7 +20,7 @@ export const viraDropdownTestIds = {
     prefix: 'dropdown-prefix',
 };
 /**
- * A dropdown element that uses popover menus.
+ * A dropdown element that uses pop-up menus.
  *
  * @category Dropdown
  * @category Elements
@@ -101,8 +102,8 @@ export const ViraDropdown = defineViraElement()({
     },
     state() {
         return {
-            /** `undefined` means the popover is not currently showing. */
-            showPopoverResult: undefined,
+            /** `undefined` means the pop up is not currently showing. */
+            showPopUpResult: undefined,
         };
     },
     render({ state, inputs, dispatch, events, updateState }) {
@@ -136,13 +137,14 @@ export const ViraDropdown = defineViraElement()({
             isDisabled: inputs.isDisabled,
             isMultiSelect: inputs.isMultiSelect,
             z_debug_forceOpenState: inputs.z_debug_forceOpenState,
-            popoverOffset: {
+            popUpOffset: {
                 vertical: -1,
                 right: 24,
             },
+            horizontalAnchor: inputs.horizontalAnchor || HorizontalAnchor.Both,
         })}
                 ${listen(ViraMenuTrigger.events.openChange, (event) => {
-            updateState({ showPopoverResult: event.detail });
+            updateState({ showPopUpResult: event.detail });
             dispatch(new events.openChange(event.detail));
         })}
                 ${listen(ViraMenuTrigger.events.itemActivate, (event) => {
@@ -151,8 +153,8 @@ export const ViraDropdown = defineViraElement()({
             >
                 <div
                     class="dropdown-trigger ${classMap({
-            open: !!state.showPopoverResult,
-            'open-upwards': !state.showPopoverResult?.popDown,
+            open: !!state.showPopUpResult,
+            'open-upwards': !state.showPopUpResult?.popDown,
         })}"
                     ${testId(viraDropdownTestIds.trigger)}
                 >

package/dist/icons/icon-svgs/status-failure-24.icon.js

@@ -11,7 +11,13 @@ import { defineIcon } from '../icon-svg.js';
 export const StatusFailure24Icon = defineIcon({
     name: 'StatusFailure24Icon',
     svgTemplate: html `
-        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5"
+        >
             <circle
                 cx="12"
                 cy="12"
@@ -26,6 +32,7 @@ export const StatusFailure24Icon = defineIcon({
                 fill="none"
                 stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
                 stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
+                style="stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2"
             />
         </svg>
     `,

package/dist/icons/icon-svgs/status-unknown-24.icon.d.ts

@@ -0,0 +1,8 @@
+/**
+ * A status icon with a ? that indicates the status is unknown.
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/vira/book/icons/statusunknown24icon
+ */
+export declare const StatusUnknown24Icon: import("../icon-svg.js").ViraIconSvg;

package/dist/icons/icon-svgs/status-unknown-24.icon.js

@@ -0,0 +1,47 @@
+import { html } from 'element-vir';
+import { viraIconCssVars } from '../icon-css-vars.js';
+import { defineIcon } from '../icon-svg.js';
+/**
+ * A status icon with a ? that indicates the status is unknown.
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/vira/book/icons/statusunknown24icon
+ */
+export const StatusUnknown24Icon = defineIcon({
+    name: 'StatusUnknown24Icon',
+    svgTemplate: html `
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            xml:space="preserve"
+            style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5"
+            viewBox="0 0 24 24"
+            width="24"
+            height="24"
+        >
+            <circle
+                cx="12"
+                cy="12"
+                r="9"
+                fill=${viraIconCssVars['vira-icon-fill-color'].value}
+                stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
+                stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
+            />
+            <circle
+                cx="12"
+                cy="16"
+                r="1"
+                fill=${viraIconCssVars['vira-icon-stroke-color'].value}
+                stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
+                stroke-width="calc(${viraIconCssVars['vira-icon-stroke-width'].value} - 1px)"
+            />
+            <path
+                d="M12 14c0-.5.09-.87.14-1q.13-.38.37-.7c.19-.24 1.3-1.46 1.46-1.65a3 3 0 0 0 .44-.73q.17-.42.17-.94 0-1.07-.7-1.65a2.7 2.7 0 0 0-1.8-.56q-1.12 0-1.83.7c-.3.29-.66.86-.66 1.53"
+                fill="none"
+                style="stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2"
+                stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
+                stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
+            />
+        </svg>
+    `,
+});

package/dist/icons/icon-svgs/status-warning-24.icon.js

@@ -11,7 +11,14 @@ import { defineIcon } from '../icon-svg.js';
 export const StatusWarning24Icon = defineIcon({
     name: 'StatusWarning24Icon',
     svgTemplate: html `
-        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            xml:space="preserve"
+            style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+        >
             <circle
                 cx="12"
                 cy="12"
@@ -20,14 +27,6 @@ export const StatusWarning24Icon = defineIcon({
                 stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
                 stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
             />
-
-            <path
-                d="m12 14 .2-7h-.4l.2 7Z"
-                fill="none"
-                stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
-                stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
-            />
-
             <circle
                 cx="12"
                 cy="16"
@@ -36,6 +35,13 @@ export const StatusWarning24Icon = defineIcon({
                 stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
                 stroke-width="calc(${viraIconCssVars['vira-icon-stroke-width'].value} - 1px)"
             />
+            <path
+                d="m12 14 .2-7h-.4l.2 7Z"
+                fill="none"
+                stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
+                stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
+                style="stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2"
+            />
         </svg>
     `,
 });

package/dist/icons/index.d.ts

@@ -28,6 +28,7 @@ export * from './icon-svgs/star-24.icon.js';
 export * from './icon-svgs/status-failure-24.icon.js';
 export * from './icon-svgs/status-in-progress-24.icon.js';
 export * from './icon-svgs/status-success-24.icon.js';
+export * from './icon-svgs/status-unknown-24.icon.js';
 export * from './icon-svgs/status-warning-24.icon.js';
 export * from './icon-svgs/upload-24.icon.js';
 /**
@@ -63,6 +64,7 @@ export declare const allIconsByName: {
     readonly StatusFailure24Icon: import("./icon-svg.js").ViraIconSvg;
     readonly StatusInProgress24Icon: import("./icon-svg.js").ViraIconSvg;
     readonly StatusSuccess24Icon: import("./icon-svg.js").ViraIconSvg;
+    readonly StatusUnknown24Icon: import("./icon-svg.js").ViraIconSvg;
     readonly StatusWarning24Icon: import("./icon-svg.js").ViraIconSvg;
     readonly Upload24Icon: import("./icon-svg.js").ViraIconSvg;
 };

package/dist/icons/index.js

@@ -26,6 +26,7 @@ import { Star24Icon } from './icon-svgs/star-24.icon.js';
 import { StatusFailure24Icon } from './icon-svgs/status-failure-24.icon.js';
 import { StatusInProgress24Icon } from './icon-svgs/status-in-progress-24.icon.js';
 import { StatusSuccess24Icon } from './icon-svgs/status-success-24.icon.js';
+import { StatusUnknown24Icon } from './icon-svgs/status-unknown-24.icon.js';
 import { StatusWarning24Icon } from './icon-svgs/status-warning-24.icon.js';
 import { Upload24Icon } from './icon-svgs/upload-24.icon.js';
 export * from './icon-css-vars.js';
@@ -57,6 +58,7 @@ export * from './icon-svgs/star-24.icon.js';
 export * from './icon-svgs/status-failure-24.icon.js';
 export * from './icon-svgs/status-in-progress-24.icon.js';
 export * from './icon-svgs/status-success-24.icon.js';
+export * from './icon-svgs/status-unknown-24.icon.js';
 export * from './icon-svgs/status-warning-24.icon.js';
 export * from './icon-svgs/upload-24.icon.js';
 /**
@@ -92,6 +94,7 @@ export const allIconsByName = {
     StatusFailure24Icon,
     StatusInProgress24Icon,
     StatusSuccess24Icon,
+    StatusUnknown24Icon,
     StatusWarning24Icon,
     Upload24Icon,
 };

package/dist/util/index.d.ts

@@ -1,2 +1,2 @@
 export * from './define-table.js';
-export * from './popover-manager.js';
+export * from './pop-up-manager.js';

package/dist/util/index.js

@@ -1,2 +1,2 @@
 export * from './define-table.js';
-export * from './popover-manager.js';
+export * from './pop-up-manager.js';