element-book 10.0.2 → 10.1.1

package/dist/ui/elements/element-book-app/element-book-app.element.d.ts

@@ -16,6 +16,7 @@ export declare const ElementBookApp: import("element-vir").DeclarativeElementDef
         lastGlobalInputs: GlobalValues;
         controls: ControlsWrapper;
     } | undefined;
+    originalWindowTitle: string | undefined;
 }, {
     pathUpdate: import("element-vir").DefinedTypedEventNameDefinition<readonly string[]>;
 }, "element-book-app-", "element-book-app-", import("lit-html").HTMLTemplateResult>;

package/dist/ui/elements/element-book-app/element-book-app.element.js

@@ -1,5 +1,5 @@
 import { waitForAnimationFrame } from '@augment-vir/browser';
-import { areJsonEqual, extractErrorMessage } from '@augment-vir/common';
+import { areJsonEqual, extractErrorMessage, isTruthy } from '@augment-vir/common';
 import { css, defineElement, defineElementEvent, html, listen } from 'element-vir';
 import { createNewControls, updateTreeControls, } from '../../../data/book-entry/book-page/controls-wrapper';
 import { createBookTreeFromEntries } from '../../../data/book-tree/book-tree';
@@ -11,8 +11,8 @@ import { createTheme } from '../../color-theme/create-color-theme';
 import { ChangeRouteEvent } from '../../events/change-route.event';
 import { BookNav, scrollSelectedNavElementIntoView } from '../book-nav/book-nav.element';
 import { BookError } from '../common/book-error.element';
-import { BookEntryDisplay } from '../entry-display/book-entry-display.element';
 import { BookPageControls } from '../entry-display/book-page/book-page-controls.element';
+import { BookEntryDisplay } from '../entry-display/entry-display/book-entry-display.element';
 import { ElementBookSlotName } from './element-book-app-slots';
 import { getCurrentNodes } from './get-current-nodes';
 export const ElementBookApp = defineElement()({
@@ -23,12 +23,13 @@ export const ElementBookApp = defineElement()({
     stateInitStatic: {
         currentRoute: defaultBookFullRoute,
         router: undefined,
-        loading: false,
+        loading: true,
         colors: {
             config: undefined,
             theme: createTheme(undefined),
         },
         treeBasedControls: undefined,
+        originalWindowTitle: undefined,
     },
     styles: css `
         :host {
@@ -67,15 +68,11 @@ export const ElementBookApp = defineElement()({
             top: 0;
             max-width: min(400px, 40%);
         }
-
-        .loading {
-            padding: 64px;
-        }
     `,
     initCallback({ host, state }) {
         setTimeout(() => {
             scrollNav(host, extractSearchQuery(state.currentRoute.paths), state.currentRoute);
-        }, 1000);
+        }, 500);
     },
     cleanupCallback({ state, updateState }) {
         if (state.router) {
@@ -87,24 +84,51 @@ export const ElementBookApp = defineElement()({
         if (inputs._debug) {
             console.info('rendering element-book app');
         }
-        try {
-            function updateRoutes(newRoute) {
-                if (state.router) {
-                    state.router.setRoutes(newRoute);
-                }
-                else {
-                    updateState({
-                        currentRoute: {
-                            ...state.currentRoute,
-                            ...newRoute,
-                        },
-                    });
-                }
-                if (inputs.elementBookRoutePaths &&
-                    !areJsonEqual(inputs.elementBookRoutePaths, state.currentRoute.paths)) {
-                    dispatch(new events.pathUpdate(newRoute.paths ?? []));
+        function mergeRoutes(newRouteInput) {
+            return {
+                ...state.currentRoute,
+                ...newRouteInput,
+            };
+        }
+        function areRoutesNew(newRouteInput) {
+            const newRoute = mergeRoutes(newRouteInput);
+            return !areJsonEqual(state.currentRoute, newRoute);
+        }
+        function updateWindowTitle(topNodeTitle) {
+            if (!inputs.preventWindowTitleChange) {
+                if (!state.originalWindowTitle) {
+                    updateState({ originalWindowTitle: document.title });
                 }
+                document.title = [
+                    state.originalWindowTitle,
+                    topNodeTitle,
+                ]
+                    .filter(isTruthy)
+                    .join(' - ');
+            }
+        }
+        function updateRoutes(newRouteInput) {
+            if (!areRoutesNew(newRouteInput)) {
+                return;
+            }
+            const newRoute = mergeRoutes(newRouteInput);
+            if (state.router) {
+                state.router.setRoutes(newRoute);
+            }
+            else {
+                updateState({
+                    currentRoute: {
+                        ...state.currentRoute,
+                        ...newRoute,
+                    },
+                });
             }
+            if (inputs.elementBookRoutePaths &&
+                !areJsonEqual(inputs.elementBookRoutePaths, state.currentRoute.paths)) {
+                dispatch(new events.pathUpdate(newRoute.paths ?? []));
+            }
+        }
+        try {
             if (inputs.elementBookRoutePaths &&
                 !areJsonEqual(inputs.elementBookRoutePaths, state.currentRoute.paths)) {
                 updateRoutes({ paths: inputs.elementBookRoutePaths });
@@ -165,6 +189,7 @@ export const ElementBookApp = defineElement()({
                 : undefined;
             const currentNodes = searchedNodes ??
                 getCurrentNodes(originalTree.flattenedNodes, state.currentRoute.paths, updateRoutes);
+            updateWindowTitle(currentNodes[0]?.entry.title);
             const currentControls = state.treeBasedControls?.controls;
             if (!currentControls) {
                 return html `
@@ -180,25 +205,16 @@ export const ElementBookApp = defineElement()({
                 <div
                     class="root"
                     ${listen(ChangeRouteEvent, async (event) => {
-                const entryDisplay = host.shadowRoot.querySelector(BookEntryDisplay.tagName);
-                updateState({ loading: true });
-                /** Wait for the loading div to show up. */
-                while (!host.shadowRoot.querySelector('.loading')) {
-                    await waitForAnimationFrame();
-                }
-                await waitForAnimationFrame();
-                if (entryDisplay) {
-                    entryDisplay.scroll({ top: 0, behavior: 'smooth' });
-                }
-                else {
-                    console.error(`Failed to find '${BookEntryDisplay.tagName}' for scrolling.`);
+                const newRoute = event.detail;
+                if (!areRoutesNew(newRoute)) {
+                    return;
                 }
-                updateRoutes(event.detail);
+                updateState({ loading: true });
+                updateRoutes(newRoute);
                 const navElement = host.shadowRoot.querySelector(BookNav.tagName);
                 if (!(navElement instanceof BookNav)) {
                     throw new Error(`Failed to find child '${BookNav.tagName}'`);
                 }
-                updateState({ loading: false });
                 scrollNav(host, searchQuery, state.currentRoute);
             })}
                     ${listen(BookPageControls.events.controlValueChange, (event) => {
@@ -224,25 +240,33 @@ export const ElementBookApp = defineElement()({
                             slot=${ElementBookSlotName.NavHeader}
                         ></slot>
                     </${BookNav}>
-                    ${state.loading
-                ? html `
-                              <div class="loading">Loading...</div>
-                          `
-                : html `
-                              <${BookEntryDisplay.assign({
-                    currentRoute: state.currentRoute,
-                    currentNodes,
-                    router: state.router,
-                    debug,
-                    controls: currentControls,
-                    originalTree: originalTree.tree,
-                })}>
-                                  <slot
-                                      name=${ElementBookSlotName.Footer}
-                                      slot=${ElementBookSlotName.Footer}
-                                  ></slot>
-                              </${BookEntryDisplay}>
-                          `}
+                    <${BookEntryDisplay.assign({
+                controls: currentControls,
+                currentNodes,
+                currentRoute: state.currentRoute,
+                debug,
+                originalTree: originalTree.tree,
+                router: state.router,
+                showLoading: state.loading,
+            })}
+                        ${listen(BookEntryDisplay.events.loadingRender, async (event) => {
+                await waitForAnimationFrame();
+                const entryDisplay = host.shadowRoot.querySelector(BookEntryDisplay.tagName);
+                if (entryDisplay) {
+                    entryDisplay.scroll({ top: 0, behavior: 'instant' });
+                }
+                else {
+                    console.error(`Failed to find '${BookEntryDisplay.tagName}' for scrolling.`);
+                }
+                await waitForAnimationFrame();
+                updateState({ loading: !event.detail });
+            })}
+                    >
+                        <slot
+                            name=${ElementBookSlotName.Footer}
+                            slot=${ElementBookSlotName.Footer}
+                        ></slot>
+                    </${BookEntryDisplay}>
                 </div>
             `;
         }

package/dist/ui/elements/element-book-app/element-book-config.d.ts

@@ -11,6 +11,7 @@ type OptionalConfig = {
     themeColor: string;
     _debug: boolean;
     globalValues: GlobalValues;
+    preventWindowTitleChange: boolean;
 } & RequireExactlyOne<{
     /**
      * Set this internal router config if element-book is intended to be the current website's

package/dist/ui/elements/entry-display/book-breadcrumbs-bar.element.js

@@ -9,8 +9,6 @@ export const BookBreadcrumbsBar = defineBookElement()({
     tagName: 'book-breadcrumbs-bar',
     styles: css `
         :host {
-            position: sticky;
-            top: 0;
             border-bottom: 1px solid
                 ${colorThemeCssVars['element-book-page-foreground-faint-level-2-color'].value};
             padding: 4px 8px;

package/dist/ui/elements/entry-display/book-page/book-page-controls.element.js

@@ -1,7 +1,7 @@
 import { extractEventTarget } from '@augment-vir/browser';
 import { isRuntimeTypeOf } from '@augment-vir/common';
 import { css, defineElementEvent, html, listen, renderIf } from 'element-vir';
-import { Options24Icon, ViraIcon } from 'vira';
+import { Options24Icon, ViraIcon, ViraInput } from 'vira';
 import { BookPageControlTypeEnum, isControlInitType, } from '../../../../data/book-entry/book-page/book-page-controls';
 import { colorThemeCssVars } from '../../../color-theme/color-theme';
 import { defineBookElement } from '../../define-book-element';
@@ -41,6 +41,11 @@ export const BookPageControls = defineBookElement()({
             color: red;
         }
 
+        ${ViraInput} {
+            height: 24px;
+            max-width: 128px;
+        }
+
         ${ViraIcon}.options-icon {
             position: absolute;
             left: 0;
@@ -117,14 +122,15 @@ function createControlInput(value, controlInit, valueChange) {
     }
     else if (isControlInitType(controlInit, BookPageControlTypeEnum.Text)) {
         return html `
-            <input
-                type="text"
-                .value=${value}
-                ${listen('input', (event) => {
-            const inputElement = extractEventTarget(event, HTMLInputElement);
-            valueChange(inputElement.value);
+            <${ViraInput.assign({
+            value: String(value),
+            showClearButton: true,
+            disableBrowserHelps: true,
         })}
-            />
+                ${listen(ViraInput.events.valueChange, (event) => {
+            valueChange(event.detail);
+        })}
+            ></${ViraInput}>
         `;
     }
     else if (isControlInitType(controlInit, BookPageControlTypeEnum.Number)) {

package/dist/ui/elements/entry-display/entry-display/book-entry-display.element.d.ts

@@ -0,0 +1,17 @@
+import { BookEntryTypeEnum } from '../../../../data/book-entry/book-entry-type';
+import { ControlsWrapper } from '../../../../data/book-entry/book-page/controls-wrapper';
+import { BookTreeNode } from '../../../../data/book-tree/book-tree-node';
+import { BookFullRoute, BookRouter } from '../../../../routing/book-routing';
+export declare const BookEntryDisplay: import("element-vir").DeclarativeElementDefinition<"book-entry-display", {
+    controls: ControlsWrapper;
+    currentNodes: ReadonlyArray<BookTreeNode>;
+    currentRoute: Readonly<BookFullRoute>;
+    debug: boolean;
+    originalTree: Readonly<BookTreeNode<BookEntryTypeEnum.Root>>;
+    router: BookRouter | undefined;
+    showLoading: boolean;
+}, {
+    lastElement: Element | undefined;
+}, {
+    loadingRender: import("element-vir").DefinedTypedEventNameDefinition<boolean>;
+}, `book-entry-display-${string}`, `book-entry-display-${string}`, import("lit-html").HTMLTemplateResult>;

package/dist/ui/elements/entry-display/entry-display/book-entry-display.element.js

@@ -0,0 +1,116 @@
+import { css, defineElementEvent, html, onDomCreated, renderIf } from 'element-vir';
+import { LoaderAnimated24Icon, ViraIcon, viraAnimationDurations } from 'vira';
+import { extractSearchQuery } from '../../../../routing/book-routing';
+import { defineBookElement } from '../../define-book-element';
+import { ElementBookSlotName } from '../../element-book-app/element-book-app-slots';
+import { BookBreadcrumbsBar } from '../book-breadcrumbs-bar.element';
+import { createNodeTemplates } from './create-node-templates';
+export const BookEntryDisplay = defineBookElement()({
+    tagName: 'book-entry-display',
+    styles: css `
+        :host {
+            display: flex;
+            flex-direction: column;
+            position: relative;
+        }
+
+        .all-book-entries-wrapper {
+            flex-grow: 1;
+            padding: 32px;
+        }
+
+        .inline-entry {
+            margin: 8px;
+        }
+
+        * + .block-entry {
+            margin-top: 32px;
+        }
+
+        .block-entry + * {
+            margin-top: 32px;
+        }
+
+        h1 {
+            margin: 0;
+            padding: 0;
+        }
+
+        ${BookBreadcrumbsBar} {
+            position: sticky;
+            top: 0;
+        }
+
+        .loading {
+            flex-grow: 1;
+            padding: 64px;
+            position: absolute;
+            background-color: white;
+            animation: fade-in linear
+                ${viraAnimationDurations['vira-interaction-animation-duration'].value} forwards;
+            z-index: 100;
+            width: 100%;
+            height: 100%;
+            top: 0;
+            left: 0;
+        }
+
+        @keyframes fade-in {
+            from {
+                opacity: 0;
+            }
+            to {
+                opacity: 1;
+            }
+        }
+    `,
+    events: {
+        loadingRender: defineElementEvent(),
+    },
+    stateInitStatic: {
+        lastElement: undefined,
+    },
+    renderCallback: ({ inputs, dispatch, events, state, updateState }) => {
+        const currentSearch = extractSearchQuery(inputs.currentRoute.paths);
+        const entryTemplates = createNodeTemplates({
+            currentNodes: inputs.currentNodes,
+            isTopLevel: true,
+            router: inputs.router,
+            isSearching: !!currentSearch,
+            controls: inputs.controls,
+            originalTree: inputs.originalTree,
+        });
+        return html `
+            <${BookBreadcrumbsBar.assign({
+            currentSearch,
+            currentRoute: inputs.currentRoute,
+            router: inputs.router,
+        })}></${BookBreadcrumbsBar}>
+
+            ${renderIf(inputs.showLoading, html `
+                    <div
+                        ${onDomCreated(() => {
+            dispatch(new events.loadingRender(true));
+        })}
+                        class="loading"
+                    >
+                        <${ViraIcon.assign({ icon: LoaderAnimated24Icon })}></${ViraIcon}>
+                    </div>
+                    ${renderIf(!!state.lastElement, html `
+                            ${state.lastElement}
+                            <slot name=${ElementBookSlotName.Footer}></slot>
+                        `)}
+                `, html `
+                    <div
+                        ${onDomCreated((element) => {
+            updateState({ lastElement: element });
+        })}
+                        class="all-book-entries-wrapper"
+                    >
+                        ${entryTemplates}
+                    </div>
+                    <slot name=${ElementBookSlotName.Footer}></slot>
+                `)}
+        `;
+    },
+});

package/dist/ui/elements/entry-display/entry-display/create-node-templates.d.ts

@@ -0,0 +1,12 @@
+import { BookEntryTypeEnum } from '../../../../data/book-entry/book-entry-type';
+import { ControlsWrapper } from '../../../../data/book-entry/book-page/controls-wrapper';
+import { BookTreeNode } from '../../../../data/book-tree/book-tree-node';
+import { BookRouter } from '../../../../routing/book-routing';
+export declare function createNodeTemplates({ currentNodes, isTopLevel, router, isSearching, controls, originalTree, }: {
+    currentNodes: ReadonlyArray<BookTreeNode>;
+    isTopLevel: boolean;
+    router: BookRouter | undefined;
+    isSearching: boolean;
+    controls: ControlsWrapper;
+    originalTree: Readonly<BookTreeNode<BookEntryTypeEnum.Root>>;
+}): unknown[];

package/dist/ui/elements/entry-display/{book-entry-display.element.js → entry-display/create-node-templates.js}

@@ -1,67 +1,12 @@
-import { assign, css, html, repeat } from 'element-vir';
-import { BookEntryTypeEnum } from '../../../data/book-entry/book-entry-type';
 import { isLengthAtLeast, mapObjectValues } from '@augment-vir/common';
-import { traverseControls, } from '../../../data/book-entry/book-page/controls-wrapper';
-import { isBookTreeNode, traverseToImmediateParent } from '../../../data/book-tree/book-tree';
-import { extractSearchQuery } from '../../../routing/book-routing';
-import { BookError } from '../common/book-error.element';
-import { defineBookElement } from '../define-book-element';
-import { ElementBookSlotName } from '../element-book-app/element-book-app-slots';
-import { BookBreadcrumbsBar } from './book-breadcrumbs-bar.element';
-import { BookPageControls } from './book-page/book-page-controls.element';
-import { BookPageWrapper } from './book-page/book-page-wrapper.element';
-import { BookElementExampleWrapper } from './element-example/book-element-example-wrapper.element';
-export const BookEntryDisplay = defineBookElement()({
-    tagName: 'book-entry-display',
-    styles: css `
-        :host {
-            display: flex;
-            flex-direction: column;
-        }
-
-        .all-book-entries-wrapper {
-            flex-grow: 1;
-            padding: 32px;
-        }
-
-        .inline-entry {
-            margin: 8px;
-        }
-
-        * + .block-entry {
-            margin-top: 32px;
-        }
-
-        .block-entry + * {
-            margin-top: 32px;
-        }
-
-        h1 {
-            margin: 0;
-            padding: 0;
-        }
-    `,
-    renderCallback: ({ inputs }) => {
-        const currentSearch = extractSearchQuery(inputs.currentRoute.paths);
-        const entryTemplates = createNodeTemplates({
-            currentNodes: inputs.currentNodes,
-            isTopLevel: true,
-            router: inputs.router,
-            isSearching: !!currentSearch,
-            controls: inputs.controls,
-            originalTree: inputs.originalTree,
-        });
-        return html `
-            <${BookBreadcrumbsBar.assign({
-            currentSearch,
-            currentRoute: inputs.currentRoute,
-            router: inputs.router,
-        })}></${BookBreadcrumbsBar}>
-            <div class="all-book-entries-wrapper">${entryTemplates}</div>
-            <slot name=${ElementBookSlotName.Footer}></slot>
-        `;
-    },
-});
+import { html, repeat } from 'element-vir';
+import { BookEntryTypeEnum } from '../../../../data/book-entry/book-entry-type';
+import { traverseControls, } from '../../../../data/book-entry/book-page/controls-wrapper';
+import { isBookTreeNode, traverseToImmediateParent } from '../../../../data/book-tree/book-tree';
+import { BookError } from '../../common/book-error.element';
+import { BookPageControls } from '../book-page/book-page-controls.element';
+import { BookPageWrapper } from '../book-page/book-page-wrapper.element';
+import { BookElementExampleWrapper } from '../element-example/book-element-example-wrapper.element';
 function getFlattenedControlsFromHiddenParents(currentNodes, currentControls, currentNode, originalTree) {
     const parent = traverseToImmediateParent(currentNode, originalTree);
     const allControls = [];
@@ -99,7 +44,7 @@ function getFlattenedControlsFromHiddenParents(currentNodes, currentControls, cu
         };
     }, { config: {}, current: {}, breadcrumbs: {} });
 }
-function createNodeTemplates({ currentNodes, isTopLevel, router, isSearching, controls, originalTree, }) {
+export function createNodeTemplates({ currentNodes, isTopLevel, router, isSearching, controls, originalTree, }) {
     if (!currentNodes.length && isSearching) {
         return [
             html `
@@ -147,15 +92,14 @@ function createNodeTemplates({ currentNodes, isTopLevel, router, isSearching, co
                 `;
         }
         else if (isBookTreeNode(currentNode, BookEntryTypeEnum.Root)) {
-            return html ``;
+            return '';
         }
         else {
             return html `
-                    <${BookError}
-                        class="block-entry"
-                        ${assign(BookError, {
+                    <${BookError.assign({
                 message: `Unknown entry type for rendering: '${currentNode.entry.entryType}'`,
             })}
+                        class="block-entry"
                     ></${BookError}>
                 `;
         }
@@ -163,5 +107,5 @@ function createNodeTemplates({ currentNodes, isTopLevel, router, isSearching, co
     return [
         hiddenAncestorControlsTemplate,
         templates,
-    ];
+    ].flat();
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "element-book",
-    "version": "10.0.2",
+    "version": "10.1.1",
     "keywords": [
         "book",
         "design system",
@@ -39,28 +39,28 @@
         "test:watch": "web-test-runner --color --watch --config configs/web-test-runner.config.mjs"
     },
     "dependencies": {
-        "@augment-vir/browser": "^16.0.1",
-        "@augment-vir/common": "^16.0.1",
+        "@augment-vir/browser": "^18.0.0",
+        "@augment-vir/common": "^18.0.0",
         "colorjs.io": "0.4.5",
-        "element-vir": "^16.0.3",
-        "lit-css-vars": "^3.0.0",
-        "object-shape-tester": "^0.4.0",
-        "spa-router-vir": "^2.1.1",
-        "typed-event-target": "^1.3.1",
-        "vira": "^0.7.1"
+        "element-vir": "^16.3.2",
+        "lit-css-vars": "^3.0.1",
+        "object-shape-tester": "^0.4.3",
+        "spa-router-vir": "^3.0.1",
+        "typed-event-target": "^1.4.1",
+        "vira": "^2.2.2"
     },
     "devDependencies": {
-        "@augment-vir/browser-testing": "^16.0.1",
+        "@augment-vir/browser-testing": "^18.0.0",
         "@open-wc/testing": "^3.2.0",
-        "@types/chai": "^4.3.5",
+        "@types/chai": "^4.3.6",
         "@types/mocha": "^10.0.1",
         "@web/dev-server-esbuild": "^0.4.1",
-        "@web/test-runner": "^0.17.0",
+        "@web/test-runner": "^0.17.1",
         "@web/test-runner-commands": "^0.8.0",
         "@web/test-runner-playwright": "^0.10.1",
         "@web/test-runner-visual-regression": "^0.8.2",
         "istanbul-smart-text-reporter": "^1.1.2",
-        "type-fest": "^4.0.0",
-        "typescript": "^5.1.6"
+        "type-fest": "^4.3.1",
+        "typescript": "^5.2.2"
     }
 }

package/dist/ui/elements/entry-display/book-entry-display.element.d.ts

@@ -1,12 +0,0 @@
-import { BookEntryTypeEnum } from '../../../data/book-entry/book-entry-type';
-import { ControlsWrapper } from '../../../data/book-entry/book-page/controls-wrapper';
-import { BookTreeNode } from '../../../data/book-tree/book-tree-node';
-import { BookFullRoute, BookRouter } from '../../../routing/book-routing';
-export declare const BookEntryDisplay: import("element-vir").DeclarativeElementDefinition<"book-entry-display", {
-    currentRoute: Readonly<BookFullRoute>;
-    currentNodes: ReadonlyArray<BookTreeNode>;
-    originalTree: Readonly<BookTreeNode<BookEntryTypeEnum.Root>>;
-    router: BookRouter | undefined;
-    debug: boolean;
-    controls: ControlsWrapper;
-}, {}, {}, `book-entry-display-${string}`, `book-entry-display-${string}`, import("lit-html").HTMLTemplateResult>;