vira 22.1.2 → 22.2.0

package/dist/util/pop-up-manager.js

@@ -0,0 +1,169 @@
+import { findOverflowParent } from '@augment-vir/browser';
+import { mapObjectValues } from '@augment-vir/common';
+import { NavController, NavDirection } from 'device-navigation';
+import { listenToPageActivation } from 'page-active';
+import { assertInstanceOf } from 'run-time-assertions';
+import { ListenTarget, defineTypedCustomEvent, defineTypedEvent, listenToGlobal, } from 'typed-event-target';
+export const emptyPositionRect = {
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+};
+export class HidePopUpEvent extends defineTypedEvent('hide-pop-up') {
+}
+export class NavSelectEvent extends defineTypedCustomEvent()('nav-select') {
+}
+export class PopUpManager {
+    constructor(options) {
+        Object.defineProperty(this, "listenTarget", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new ListenTarget()
+        });
+        Object.defineProperty(this, "options", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: {
+                minDownSpace: 200,
+                verticalDiffThreshold: 20,
+                supportNavigation: true,
+            }
+        });
+        Object.defineProperty(this, "cleanupCallbacks", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        Object.defineProperty(this, "lastRootElement", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.options = { ...this.options, ...options };
+    }
+    attachGlobalListeners(rootElement) {
+        const navController = new NavController(rootElement);
+        this.cleanupCallbacks = [
+            listenToPageActivation(false, (isPageActive) => {
+                if (!isPageActive) {
+                    this.removePopUp();
+                }
+            }),
+            listenToGlobal('mousedown', (event) => {
+                if (this.lastRootElement &&
+                    event.composedPath().includes(this.lastRootElement)) {
+                    /** Ignore clicks that came from the pop up host itself. */
+                    return;
+                }
+                this.removePopUp();
+            }, { passive: true }),
+            listenToGlobal('keydown', (event) => {
+                const keyCode = event.code;
+                if (keyCode === 'Escape') {
+                    this.removePopUp();
+                }
+                else if (this.options.supportNavigation) {
+                    if (keyCode === 'ArrowDown') {
+                        event.stopImmediatePropagation();
+                        event.preventDefault();
+                        navController.navigate({
+                            direction: NavDirection.Down,
+                            allowWrapping: false,
+                        });
+                    }
+                    else if (keyCode === 'ArrowUp') {
+                        event.stopImmediatePropagation();
+                        event.preventDefault();
+                        navController.navigate({
+                            direction: NavDirection.Up,
+                            allowWrapping: false,
+                        });
+                    }
+                    else if (keyCode === 'ArrowLeft') {
+                        event.stopImmediatePropagation();
+                        event.preventDefault();
+                        navController.navigate({
+                            direction: NavDirection.Left,
+                            allowWrapping: false,
+                        });
+                    }
+                    else if (keyCode === 'ArrowRight') {
+                        event.stopImmediatePropagation();
+                        event.preventDefault();
+                        navController.navigate({
+                            direction: NavDirection.Right,
+                            allowWrapping: false,
+                        });
+                    }
+                    else if (keyCode === 'Enter' || keyCode === 'Return') {
+                        const currentlyFocused = navController.getCurrentlyFocused();
+                        if (currentlyFocused) {
+                            navController.enterInto();
+                            this.listenTarget.dispatch(new NavSelectEvent({ detail: currentlyFocused.coords }));
+                            event.stopImmediatePropagation();
+                            event.preventDefault();
+                        }
+                    }
+                }
+            }),
+        ];
+    }
+    listen(event, listener, options) {
+        return this.listenTarget.listen(event, listener, options);
+    }
+    removePopUp() {
+        this.cleanupCallbacks.forEach((callback) => callback());
+        this.listenTarget.dispatch(new HidePopUpEvent());
+    }
+    showPopUp(rootElement, options) {
+        this.lastRootElement = rootElement;
+        const currentOptions = { ...this.options, ...options };
+        const container = findOverflowParent(rootElement);
+        assertInstanceOf(container, HTMLElement);
+        const rootRect = rootElement.getBoundingClientRect();
+        const containerRect = container.getBoundingClientRect();
+        const containerScrollbarWidth = container.offsetWidth - container.clientWidth;
+        const containerScrollbarHeight = container.offsetHeight - container.clientHeight;
+        const containerPosition = container === document.body
+            ? {
+                top: 0,
+                left: 0,
+                right: globalThis.innerWidth,
+                bottom: globalThis.innerHeight,
+            }
+            : {
+                top: containerRect.top,
+                left: containerRect.left,
+                right: containerRect.right - containerScrollbarWidth,
+                bottom: containerRect.bottom - containerScrollbarHeight,
+            };
+        const rootPosition = mapObjectValues(emptyPositionRect, (key) => {
+            return rootRect[key];
+        });
+        const diff = mapObjectValues(emptyPositionRect, (key) => {
+            const containerDimension = containerPosition[key];
+            const hostDimension = rootPosition[key];
+            return Math.abs(containerDimension - hostDimension);
+        });
+        const useUp = diff.top > diff.bottom + currentOptions.verticalDiffThreshold &&
+            diff.bottom < currentOptions.minDownSpace;
+        this.attachGlobalListeners(rootElement);
+        return {
+            popDown: !useUp,
+            positions: {
+                container: containerPosition,
+                root: rootPosition,
+                diff,
+            },
+        };
+    }
+    destroy() {
+        this.removePopUp();
+        this.listenTarget.destroy();
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vira",
-    "version": "22.1.2",
+    "version": "22.2.0",
     "description": "A simple and highly versatile design system using element-vir.",
     "keywords": [
         "design",
@@ -32,17 +32,21 @@
         "test": "virmator test-web"
     },
     "dependencies": {
-        "@augment-vir/browser": "^26.3.3",
-        "@augment-vir/common": "^26.3.3",
+        "@augment-vir/browser": "^27.0.0",
+        "@augment-vir/common": "^27.0.0",
         "colorjs.io": "^0.5.0",
         "date-vir": "^5.1.4",
+        "device-navigation": "^1.0.0",
         "lit-css-vars": "^3.0.9",
-        "spa-router-vir": "^4.0.2",
-        "type-fest": "^4.15.0"
+        "observavir": "^2.0.0",
+        "page-active": "^1.0.0",
+        "spa-router-vir": "^4.0.3",
+        "type-fest": "^4.17.0",
+        "typed-event-target": "^3.4.0"
     },
     "devDependencies": {
-        "@augment-vir/browser-testing": "^26.3.3",
-        "@augment-vir/node-js": "^26.3.3",
+        "@augment-vir/browser-testing": "^27.0.0",
+        "@augment-vir/node-js": "^27.0.0",
         "@open-wc/testing": "^4.0.0",
         "@types/chai": "^4.3.14",
         "@types/mocha": "^10.0.6",
@@ -56,7 +60,7 @@
         "markdown-code-example-inserter": "^1.0.0",
         "run-time-assertions": "^1.2.0",
         "typedoc": "^0.25.13",
-        "typescript": "5.4.5",
+        "typescript": "5.3.3",
         "vite": "^4.5.0",
         "vite-tsconfig-paths": "^4.3.2"
     },

package/dist/styles/vira-css-vars.d.ts

@@ -1,3 +0,0 @@
-export declare const viraCssVars: import("lit-css-vars").CssVarDefinitions<{
-    'vira-form-input-border-radius': string;
-}>;

package/dist/styles/vira-css-vars.js

@@ -1,4 +0,0 @@
-import { defineCssVars } from 'lit-css-vars';
-export const viraCssVars = defineCssVars({
-    'vira-form-input-border-radius': '8px',
-});