element-book 6.0.3 → 7.0.1

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

@@ -1,280 +0,0 @@
-import { wait } from '@augment-vir/common';
-import { VirIcon } from '@electrovir/icon-element';
-import { assign, css, html, listen, renderIf, repeat } from 'element-vir';
-import { isElementBookEntry, listBreadcrumbs, } from '../../../data/element-book-entry/element-book-entry';
-import { ElementBookEntryTypeEnum } from '../../../data/element-book-entry/element-book-entry-type';
-import { isEntryNode } from '../../../data/element-book-entry/entry-tree/entry-tree';
-import { ElementBookMainRoute, defaultElementBookFullRoute, extractSearchQuery, } from '../../../routing/element-book-routing';
-import { colorThemeCssVars } from '../../color-theme/color-theme';
-import { ChangeRouteEvent } from '../../events/change-route.event';
-import { Element24Icon } from '../../icons/element-24.icon';
-import { ElementBookRouteLink } from '../common/element-book-route-link.element';
-import { defineElementBookElement } from '../define-book-element';
-import { ElementBookSlotName } from '../element-book-app/element-book-app-slots';
-import { ElementBookBreadcrumbs } from '../element-book-breadcrumbs.element';
-import { ElementBookPageExamples } from './element-book-page-examples.element';
-export const ElementBookEntryDisplay = defineElementBookElement()({
-    tagName: 'element-book-entry-display',
-    styles: css `
-        :host {
-            display: flex;
-            flex-direction: column;
-        }
-
-        .title-bar {
-            position: sticky;
-            top: 0;
-            border-bottom: 1px solid
-                ${colorThemeCssVars['element-book-page-foreground-faint-level-2-color'].value};
-            padding: 4px 8px;
-            background-color: ${colorThemeCssVars['element-book-page-background-color'].value};
-            z-index: 9999999999;
-            display: flex;
-            gap: 16px;
-            justify-content: space-between;
-        }
-
-        .all-examples-wrapper {
-            flex-grow: 1;
-            box-sizing: border-box;
-            padding: 32px;
-            display: flex;
-            flex-direction: column;
-            gap: 32px;
-        }
-
-        h1,
-        h2,
-        h3 {
-            margin: 0;
-            padding: 0;
-        }
-
-        h2,
-        h3 {
-            font-size: 1.5em;
-        }
-
-        ${ElementBookRouteLink} {
-            display: inline-block;
-        }
-
-        .header-with-icon {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-
-        ${VirIcon} {
-            color: ${colorThemeCssVars['element-book-accent-icon-color'].value};
-        }
-
-        .page-examples .title-group {
-            align-items: flex-start;
-            display: flex;
-            flex-direction: column;
-            margin-bottom: 24px;
-        }
-
-        .description {
-            color: ${colorThemeCssVars['element-book-page-foreground-faint-level-1-color'].value};
-            display: inline-flex;
-            flex-direction: column;
-            gap: 8px;
-        }
-
-        .description:hover {
-            color: ${colorThemeCssVars['element-book-page-foreground-color'].value};
-        }
-
-        .description p {
-            margin: 0;
-            padding: 0;
-        }
-
-        .description p:first-child {
-            margin-top: 8px;
-        }
-    `,
-    renderCallback: ({ inputs, dispatch }) => {
-        const nestedPages = extractNestedPages(inputs.currentNode);
-        const currentSearch = extractSearchQuery(inputs.currentRoute.paths);
-        const entryBreadcrumbs = listBreadcrumbs(inputs.currentNode.entry, false).reverse();
-        const exampleTemplates = createNestedPagesTemplates({
-            nestedPages,
-            parentBreadcrumbs: entryBreadcrumbs,
-            isTopLevel: true,
-            router: inputs.router,
-            isSearching: !!currentSearch,
-        });
-        return html `
-            <div class="title-bar">
-                ${renderIf(!!currentSearch, html `
-                        &nbsp;
-                    `, html `
-                        <${ElementBookBreadcrumbs}
-                            ${assign(ElementBookBreadcrumbs, {
-            currentRoute: inputs.currentRoute,
-            router: inputs.router,
-        })}
-                        ></${ElementBookBreadcrumbs}>
-                    `)}
-                <input
-                    placeholder="search"
-                    .value=${currentSearch}
-                    ${listen('input', async (event) => {
-            const inputElement = event.currentTarget;
-            if (!(inputElement instanceof HTMLInputElement)) {
-                throw new Error('Failed to find input element for search.');
-            }
-            const preThrottleValue = inputElement.value;
-            // throttle it a bit
-            await wait(500);
-            if (inputElement.value !== preThrottleValue) {
-                return;
-            }
-            if (inputElement.value) {
-                dispatch(new ChangeRouteEvent({
-                    paths: [
-                        ElementBookMainRoute.Search,
-                        encodeURIComponent(inputElement.value),
-                    ],
-                }));
-            }
-            else {
-                dispatch(new ChangeRouteEvent(defaultElementBookFullRoute));
-            }
-        })}
-                />
-            </div>
-            <div class="all-examples-wrapper">${exampleTemplates}</div>
-            <slot name=${ElementBookSlotName.Footer}></slot>
-        `;
-    },
-});
-function createNestedPagesTemplates({ nestedPages, parentBreadcrumbs, isTopLevel, router, isSearching, }) {
-    if (!nestedPages.length && isSearching) {
-        return [
-            html `
-                No results
-            `,
-        ];
-    }
-    return repeat(nestedPages, (page) => page.breadcrumb, (nestingNode) => {
-        if (isEntryNode(nestingNode, ElementBookEntryTypeEnum.Page)) {
-            const bookEntry = nestingNode.entry;
-            if (!isElementBookEntry(bookEntry, ElementBookEntryTypeEnum.Page)) {
-                throw new Error('nested entry should be a page');
-            }
-            const headerContentsTemplate = html `
-                    <${VirIcon} ${assign(VirIcon, { icon: Element24Icon })}></${VirIcon}>
-                    ${bookEntry.title}
-                `;
-            const titleTemplate = isTopLevel
-                ? html `
-                          <h2 class="header-with-icon">${headerContentsTemplate}</h2>
-                      `
-                : html `
-                          <h3 class="header-with-icon">${headerContentsTemplate}</h3>
-                      `;
-            const linkPaths = [
-                ElementBookMainRoute.Book,
-                ...parentBreadcrumbs.concat(nestingNode.breadcrumb),
-            ];
-            return html `
-                    <div class="page-examples">
-                        <div class="title-group">
-                            <${ElementBookRouteLink}
-                                ${assign(ElementBookRouteLink, {
-                route: {
-                    paths: linkPaths,
-                    hash: undefined,
-                    search: undefined,
-                },
-                router,
-            })}
-                            >
-                                ${titleTemplate}
-                            </${ElementBookRouteLink}>
-                            ${createDescriptionTemplate(bookEntry)}
-                        </div>
-                        <${ElementBookPageExamples}
-                            ${assign(ElementBookPageExamples, {
-                page: bookEntry,
-                parentBreadcrumbs: parentBreadcrumbs,
-            })}
-                        ></${ElementBookPageExamples}>
-                    </div>
-                `;
-        }
-        else {
-            const templates = Object.entries(nestingNode).map(([title, currentNested,]) => {
-                const titleTemplate = isTopLevel
-                    ? html `
-                                  <h1>${title}</h1>
-                              `
-                    : html `
-                                  <h2>${title}</h2>
-                              `;
-                const linkPaths = [
-                    ElementBookMainRoute.Book,
-                    ...parentBreadcrumbs.concat(currentNested.node.breadcrumb),
-                ];
-                return html `
-                            <div class="title-group">
-                                <${ElementBookRouteLink}
-                                    ${assign(ElementBookRouteLink, {
-                    route: {
-                        paths: linkPaths,
-                        hash: undefined,
-                        search: undefined,
-                    },
-                    router,
-                })}
-                                >
-                                    ${titleTemplate}
-                                </${ElementBookRouteLink}>
-                                ${createDescriptionTemplate(currentNested.node.entry)}
-                            </div>
-                            ${createNestedPagesTemplates({
-                    nestedPages: currentNested.nested,
-                    /** An empty breadcrumb represents the top level node. */
-                    parentBreadcrumbs: currentNested.node.breadcrumb
-                        ? parentBreadcrumbs.concat(currentNested.node.breadcrumb)
-                        : parentBreadcrumbs,
-                    isTopLevel: false,
-                    router,
-                    isSearching,
-                })}
-                        `;
-            });
-            return html `
-                    ${templates}
-                `;
-        }
-    });
-}
-function createDescriptionTemplate(entry) {
-    const paragraphs = (entry.descriptionParagraphs ?? []).map((paragraph) => {
-        return html `
-            <p>${paragraph}</p>
-        `;
-    });
-    return html `
-        <div class="description">${paragraphs}</div>
-    `;
-}
-function extractNestedPages(node) {
-    if (node.entry.entryType === ElementBookEntryTypeEnum.Page) {
-        return [node];
-    }
-    const nestedPages = [
-        {
-            [node.entry.title]: {
-                node: node,
-                nested: Object.values(node.children).map(extractNestedPages).flat(),
-            },
-        },
-    ];
-    return nestedPages;
-}

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

@@ -1,4 +0,0 @@
-import { ElementBookPageExampleInit } from '../../../data/element-book-entry/element-book-page/element-book-page-example';
-export declare const ElementBookExampleControls: import("element-vir").DeclarativeElementDefinition<"element-book-example-controls", {
-    example: ElementBookPageExampleInit<any, any, any>;
-}, {}, {}, `element-book-example-controls-${string}`, `element-book-example-controls-${string}`, import("lit-html").HTMLTemplateResult>;

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

@@ -1,26 +0,0 @@
-import { css, html } from 'element-vir';
-import { colorThemeCssVars } from '../../color-theme/color-theme';
-import { defineElementBookElement } from '../define-book-element';
-/** At least take up vertical space, if not any horizontal space. */
-const defaultTitle = html `
-     
-`;
-export const ElementBookExampleControls = defineElementBookElement()({
-    tagName: 'element-book-example-controls',
-    styles: css `
-        :host {
-            display: flex;
-            color: ${colorThemeCssVars['element-book-page-foreground-faint-level-1-color'].value};
-            border-bottom: 1px solid currentColor;
-            padding: 0 8px 4px;
-        }
-    `,
-    renderCallback({ inputs }) {
-        return html `
-            <span>
-                ${inputs.example.title}
-                <span></span>
-            </span>
-        `;
-    },
-});

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

@@ -1,6 +0,0 @@
-import { ElementBookPageExampleInit } from '../../../data/element-book-entry/element-book-page/element-book-page-example';
-export declare const ElementBookExampleViewer: import("element-vir").DeclarativeElementDefinition<"element-book-example-viewer", {
-    example: ElementBookPageExampleInit<any, any, any>;
-    breadcrumbs: ReadonlyArray<string>;
-    currentPageControls: Record<string, any>;
-}, any, {}, `element-book-example-viewer-${string}`, `element-book-example-viewer-${string}`, string | import("lit-html").HTMLTemplateResult>;

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

@@ -1,43 +0,0 @@
-import { extractErrorMessage } from '@augment-vir/common';
-import { html, renderIf } from 'element-vir';
-import { unsetInternalState } from '../../../data/unset';
-import { defineElementBookElement } from '../define-book-element';
-export const ElementBookExampleViewer = defineElementBookElement()({
-    tagName: 'element-book-example-viewer',
-    stateInitStatic: {
-        isUnset: unsetInternalState,
-    },
-    renderCallback({ state, inputs, updateState }) {
-        if (!inputs.example.renderCallback || typeof inputs.example.renderCallback === 'string') {
-            throw new Error(`Failed to render example '${inputs.example.title}': renderCallback is not a function`);
-        }
-        if (state.isUnset === unsetInternalState) {
-            updateState({
-                isUnset: undefined,
-                ...inputs.example.stateInitStatic,
-            });
-        }
-        try {
-            const output = inputs.example.renderCallback({
-                state,
-                updateState,
-                controls: inputs.currentPageControls,
-            });
-            return html `
-                ${renderIf(!!inputs.example.styles, html `
-                        <style>
-                            ${inputs.example.styles}
-                        </style>
-                    `)}
-                ${output}
-            `;
-        }
-        catch (error) {
-            console.error(error);
-            return `${inputs.breadcrumbs.join(' > ')} failed: ${extractErrorMessage(error)}`;
-        }
-    },
-    options: {
-        allowPolymorphicState: true,
-    },
-});

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

@@ -1,11 +0,0 @@
-import { ElementBookPage } from '../../../data/element-book-entry/element-book-page/element-book-page';
-import { ElementBookPageControlMap } from '../../../data/element-book-entry/element-book-page/element-book-page-controls/element-book-page-control';
-export declare const ElementBookPageControls: import("element-vir").DeclarativeElementDefinition<"element-book-page-controls", {
-    config: ElementBookPage['controls'];
-    currentValues: Record<string, ElementBookPageControlMap['initValue']>;
-}, {}, {
-    controlValueChange: import("element-vir").DefinedTypedEventNameDefinition<{
-        name: string;
-        value: unknown;
-    }>;
-}, `element-book-page-controls-${string}`, `element-book-page-controls-${string}`, import("lit-html").HTMLTemplateResult[]>;

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

@@ -1,65 +0,0 @@
-import { css, defineElementEvent, html, listen } from 'element-vir';
-import { ElementBookPageControlTypeEnum } from '../../../data/element-book-entry/element-book-page/element-book-page-controls/element-book-page-control-type';
-import { defineElementBookElement } from '../define-book-element';
-export const ElementBookPageControls = defineElementBookElement()({
-    tagName: 'element-book-page-controls',
-    events: {
-        controlValueChange: defineElementEvent(),
-    },
-    styles: css `
-        :host {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 16px;
-        }
-
-        .control-wrapper {
-            display: flex;
-            gap: 4px;
-            flex-direction: column;
-        }
-
-        .error {
-            font-weight: bold;
-            color: red;
-        }
-    `,
-    renderCallback({ inputs, dispatch, events }) {
-        return Object.entries(inputs.config).map(([controlName, controlInit,]) => {
-            const controlInputTemplate = createControlInput(inputs.currentValues[controlName], controlInit.controlType, (newValue) => {
-                dispatch(new events.controlValueChange({
-                    name: controlName,
-                    value: newValue,
-                }));
-            });
-            return html `
-                    <label class="control-wrapper">
-                        <span>${controlName}</span>
-                        ${controlInputTemplate}
-                    </label>
-                `;
-        });
-    },
-});
-function createControlInput(value, controlType, valueChange) {
-    if (controlType === ElementBookPageControlTypeEnum.Text) {
-        return html `
-            <input
-                type="text"
-                .value=${value || ''}
-                ${listen('input', (event) => {
-            const inputElement = event.currentTarget;
-            if (!(inputElement instanceof HTMLInputElement)) {
-                throw new Error("Din't get an input element from the event target.");
-            }
-            valueChange(inputElement.value);
-        })}
-            />
-        `;
-    }
-    else {
-        return html `
-            <p class="error">${controlType} controls are not implemented yet.</p>
-        `;
-    }
-}

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

@@ -1,7 +0,0 @@
-import { ElementBookPage } from '../../../data/element-book-entry/element-book-page/element-book-page';
-export declare const ElementBookPageExamples: import("element-vir").DeclarativeElementDefinition<"element-book-page-examples", {
-    page: ElementBookPage;
-    parentBreadcrumbs: ReadonlyArray<string>;
-}, {
-    unset: symbol;
-}, {}, `element-book-page-examples-${string}`, `element-book-page-examples-${string}`, import("lit-html").HTMLTemplateResult>;

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

@@ -1,102 +0,0 @@
-import { mapObjectValues } from '@augment-vir/common';
-import { assign, css, html, listen, renderIf, repeat } from 'element-vir';
-import { unsetInternalState } from '../../../data/unset';
-import { colorThemeCssVars } from '../../color-theme/color-theme';
-import { defineElementBookElement } from '../define-book-element';
-import { ElementBookExampleControls } from './element-book-example-controls.element';
-import { ElementBookExampleViewer } from './element-book-example-viewer.element';
-import { ElementBookPageControls } from './element-book-page-controls.element';
-export const ElementBookPageExamples = defineElementBookElement()({
-    tagName: 'element-book-page-examples',
-    styles: css `
-        :host {
-            display: flex;
-            flex-direction: column;
-            gap: 24px;
-        }
-
-        .examples-wrapper {
-            display: flex;
-            gap: 32px;
-            flex-wrap: wrap;
-        }
-
-        .error {
-            color: red;
-            font-weight: bold;
-        }
-
-        .individual-example-wrapper {
-            display: flex;
-            flex-direction: column;
-            gap: 24px;
-            max-width: 100%;
-        }
-
-        .individual-example-wrapper:hover ${ElementBookExampleControls} {
-            color: ${colorThemeCssVars['element-book-accent-icon-color'].value};
-        }
-    `,
-    stateInitStatic: {
-        unset: unsetInternalState,
-    },
-    renderCallback({ inputs, state, updateState }) {
-        if (state.unset === unsetInternalState) {
-            const newState = mapObjectValues(inputs.page.controls, (key, value) => {
-                return value.initValue;
-            });
-            updateState({
-                unset: undefined,
-                ...newState,
-            });
-        }
-        const examples = inputs.page.examples;
-        /**
-         * Use the repeat directive here, instead of just a map, so that lit doesn't accidentally
-         * keep state cached between element book pages.
-         */
-        const examplesTemplate = repeat(Object.values(examples), (example) => inputs.parentBreadcrumbs
-            .concat(example instanceof Error ? example.message : example.title)
-            .join('>'), (example) => {
-            if (example instanceof Error) {
-                return html `
-                        <p class="error">${example.message}</p>
-                    `;
-            }
-            const exampleBreadcrumbs = inputs.parentBreadcrumbs.concat(example.title);
-            return html `
-                    <div class="individual-example-wrapper">
-                        <${ElementBookExampleControls}
-                            ${assign(ElementBookExampleControls, {
-                example,
-            })}
-                        ></${ElementBookExampleControls}>
-                        <${ElementBookExampleViewer}
-                            ${assign(ElementBookExampleViewer, {
-                example,
-                breadcrumbs: exampleBreadcrumbs,
-                currentPageControls: state,
-            })}
-                        ></${ElementBookExampleViewer}>
-                    </div>
-                `;
-        });
-        return html `
-            ${renderIf(!!Object.keys(inputs.page.controls).length, html `
-                    <${ElementBookPageControls}
-                        ${assign(ElementBookPageControls, {
-            config: inputs.page.controls,
-            currentValues: state,
-        })}
-                        ${listen(ElementBookPageControls.events.controlValueChange, (event) => {
-            updateState({ [event.detail.name]: event.detail.value });
-        })}
-                    ></${ElementBookPageControls}>
-                `)}
-            <section class="examples-wrapper">${examplesTemplate}</section>
-        `;
-    },
-    options: {
-        allowPolymorphicState: true,
-    },
-});

package/dist/ui/icons/element-16.icon.d.ts

@@ -1 +0,0 @@
-export declare const Element16Icon: import("@electrovir/icon-element").IconSvg;

package/dist/ui/icons/element-16.icon.js

@@ -1,18 +0,0 @@
-import { defineIconSvg } from '@electrovir/icon-element';
-import { html } from 'element-vir';
-export const Element16Icon = defineIconSvg({
-    name: 'Element16Icon',
-    svgTemplate: html `
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            xml:space="preserve"
-            fill="none"
-            width="16"
-            height="16"
-            viewBox="0 0 16 16"
-            stroke-width="1px"
-        >
-            <path d="M4 5 1 8l3 3m8-6 3 3-3 3m-5 0 2-6" />
-        </svg>
-    `,
-});

package/dist/ui/icons/element-24.icon.d.ts

@@ -1 +0,0 @@
-export declare const Element24Icon: import("@electrovir/icon-element").IconSvg;

package/dist/ui/icons/element-24.icon.js

@@ -1,18 +0,0 @@
-import { defineIconSvg } from '@electrovir/icon-element';
-import { html } from 'element-vir';
-export const Element24Icon = defineIconSvg({
-    name: 'Element24Icon',
-    svgTemplate: html `
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            xml:space="preserve"
-            viewBox="0 0 24 24"
-            fill="none"
-            width="24"
-            height="24"
-            stroke-width="1px"
-        >
-            <path d="m7 7-5 5 5 5M17 7l5 5-5 5m-6 0 2-10" />
-        </svg>
-    `,
-});

package/dist/utilities/type.d.ts

@@ -1,3 +0,0 @@
-export type NestedType<SubType> = {
-    [prop: PropertyKey]: SubType | NestedType<SubType>;
-};