element-book 26.12.0 → 26.12.1

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

@@ -0,0 +1,301 @@
+import { check } from '@augment-vir/assert';
+import { extractErrorMessage, makeWritable } from '@augment-vir/common';
+import { waitForAnimationFrame } from '@augment-vir/web';
+import { css, defineElement, defineElementEvent, html, listen } from 'element-vir';
+import { createNewControls, updateTreeControls, } from '../../../data/book-entry/book-page/controls-wrapper.js';
+import { createBookTreeFromEntries } from '../../../data/book-tree/book-tree.js';
+import { searchFlattenedNodes } from '../../../data/book-tree/search-nodes.js';
+import { createBookRouter } from '../../../routing/book-router.js';
+import { defaultBookFullRoute, extractSearchQuery, } from '../../../routing/book-routing.js';
+import { colorThemeCssVars, setThemeCssVars, } from '../../color-theme/color-theme.js';
+import { createTheme } from '../../color-theme/create-color-theme.js';
+import { ChangeRouteEvent } from '../../events/change-route.event.js';
+import { BookNav, scrollSelectedNavElementIntoView } from '../book-nav/book-nav.element.js';
+import { BookError } from '../common/book-error.element.js';
+import { BookPageControls } from '../entry-display/book-page/book-page-controls.element.js';
+import { BookEntryDisplay } from '../entry-display/entry-display/book-entry-display.element.js';
+import { ElementBookSlotName } from './element-book-app-slots.js';
+import { getCurrentNodes } from './get-current-nodes.js';
+/**
+ * The element-book app itself. Instantiate one of these where you want your element-book pages to
+ * render. Make sure to also provide an array of pages to actually render!
+ *
+ * @category Main
+ */
+export const ElementBookApp = defineElement()({
+    tagName: 'element-book-app',
+    state() {
+        return {
+            currentRoute: defaultBookFullRoute,
+            router: undefined,
+            loading: true,
+            colors: {
+                config: undefined,
+                theme: createTheme(undefined),
+            },
+            treeBasedControls: undefined,
+            originalWindowTitle: undefined,
+        };
+    },
+    events: {
+        pathUpdate: defineElementEvent(),
+    },
+    styles: css `
+        :host {
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+            width: 100%;
+            font-family: sans-serif;
+            background-color: ${colorThemeCssVars['element-book-page-background-color'].value};
+            color: ${colorThemeCssVars['element-book-page-foreground-color'].value};
+        }
+
+        .error {
+            color: red;
+        }
+
+        .root {
+            flex-grow: 1;
+            width: 100%;
+            display: flex;
+            position: relative;
+        }
+
+        ${BookEntryDisplay} {
+            flex-grow: 1;
+            max-height: 100%;
+        }
+
+        ${BookNav} {
+            flex-shrink: 0;
+            overflow-x: hidden;
+            overflow-y: auto;
+            max-height: 100%;
+            top: 0;
+            max-width: min(400px, 40%);
+        }
+    `,
+    init({ host, state }) {
+        setTimeout(async () => {
+            await scrollNav(host, extractSearchQuery(state.currentRoute.paths), state.currentRoute);
+        }, 500);
+    },
+    cleanup({ state, updateState }) {
+        if (state.router) {
+            state.router.destroy();
+            updateState({ router: undefined });
+        }
+    },
+    render: ({ state, inputs, host, updateState, dispatch, events }) => {
+        if (inputs._debug) {
+            console.info('rendering element-book app');
+        }
+        function mergeRoutes(newRouteInput) {
+            return {
+                ...state.currentRoute,
+                ...newRouteInput,
+            };
+        }
+        function areRoutesNew(newRouteInput) {
+            const newRoute = mergeRoutes(newRouteInput);
+            return !check.jsonEquals(state.currentRoute, newRoute);
+        }
+        function updateWindowTitle(topNodeTitle) {
+            if (!inputs.preventWindowTitleChange) {
+                if (!state.originalWindowTitle) {
+                    updateState({ originalWindowTitle: document.title });
+                }
+                document.title = [
+                    state.originalWindowTitle,
+                    topNodeTitle,
+                ]
+                    .filter(check.isTruthy)
+                    .join(' - ');
+            }
+        }
+        function updateRoutes(newRouteInput) {
+            if (!areRoutesNew(newRouteInput)) {
+                return;
+            }
+            const newRoute = mergeRoutes(newRouteInput);
+            if (state.router) {
+                state.router.setRoute(newRoute);
+            }
+            else {
+                updateState({
+                    currentRoute: {
+                        ...state.currentRoute,
+                        ...newRoute,
+                    },
+                });
+            }
+            if (inputs.elementBookRoutePaths &&
+                !check.jsonEquals(inputs.elementBookRoutePaths, state.currentRoute.paths)) {
+                dispatch(new events.pathUpdate(newRoute.paths));
+            }
+        }
+        try {
+            if (inputs.elementBookRoutePaths &&
+                !check.jsonEquals(inputs.elementBookRoutePaths, state.currentRoute.paths)) {
+                updateRoutes({ paths: makeWritable(inputs.elementBookRoutePaths) });
+            }
+            if (inputs.internalRouterConfig?.useInternalRouter && !state.router) {
+                const router = createBookRouter(inputs.internalRouterConfig.basePath);
+                updateState({ router });
+                router.listen(true, (fullRoute) => {
+                    updateState({
+                        currentRoute: fullRoute,
+                    });
+                });
+            }
+            else if (!inputs.internalRouterConfig?.useInternalRouter && state.router) {
+                state.router.destroy();
+            }
+            const inputThemeConfig = {
+                themeColor: inputs.themeColor,
+            };
+            if (!check.jsonEquals(inputThemeConfig, state.colors.config)) {
+                const newTheme = createTheme(inputThemeConfig);
+                updateState({
+                    colors: {
+                        config: inputThemeConfig,
+                        theme: newTheme,
+                    },
+                });
+                setThemeCssVars(host, newTheme);
+            }
+            const debug = inputs._debug ?? false;
+            const originalTree = createBookTreeFromEntries({
+                entries: inputs.pages,
+                debug,
+            });
+            if (!state.treeBasedControls ||
+                state.treeBasedControls.pages !== inputs.pages ||
+                state.treeBasedControls.lastGlobalInputs !== inputs.globalValues) {
+                if (inputs._debug) {
+                    console.info('regenerating global controls');
+                }
+                updateState({
+                    treeBasedControls: {
+                        pages: inputs.pages,
+                        lastGlobalInputs: inputs.globalValues ?? {},
+                        controls: updateTreeControls(originalTree.tree, {
+                            children: state.treeBasedControls?.controls.children,
+                            controls: inputs.globalValues,
+                        }),
+                    },
+                });
+            }
+            const searchQuery = extractSearchQuery(state.currentRoute.paths);
+            const searchedNodes = searchQuery
+                ? searchFlattenedNodes({
+                    flattenedNodes: originalTree.flattenedNodes,
+                    searchQuery,
+                })
+                : 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 `
+                    <${BookError.assign({
+                    message: 'Failed to generate page controls.',
+                })}></${BookError}>
+                `;
+            }
+            if (inputs._debug) {
+                console.info({ currentControls });
+            }
+            return html `
+                <div
+                    class="root"
+                    ${listen(ChangeRouteEvent, async (event) => {
+                const newRoute = event.detail;
+                if (!areRoutesNew(newRoute)) {
+                    return;
+                }
+                updateState({ loading: true });
+                updateRoutes(newRoute);
+                const navElement = host.shadowRoot.querySelector(BookNav.tagName);
+                if (!(navElement instanceof BookNav)) {
+                    throw new TypeError(`Failed to find child '${BookNav.tagName}'`);
+                }
+                await scrollNav(host, searchQuery, state.currentRoute);
+            })}
+                    ${listen(BookPageControls.events.controlValueChange, (event) => {
+                if (!state.treeBasedControls) {
+                    return;
+                }
+                const newControls = createNewControls(currentControls, event.detail.fullUrlBreadcrumbs, event.detail.newValues);
+                updateState({
+                    treeBasedControls: {
+                        ...state.treeBasedControls,
+                        controls: newControls,
+                    },
+                });
+            })}
+                >
+                    <${BookNav.assign({
+                flattenedNodes: originalTree.flattenedNodes,
+                router: state.router,
+                selectedPath: searchQuery ? undefined : state.currentRoute.paths.slice(1),
+            })}>
+                        <slot
+                            name=${ElementBookSlotName.NavHeader}
+                            slot=${ElementBookSlotName.NavHeader}
+                        ></slot>
+                    </${BookNav}>
+                    <${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>
+            `;
+        }
+        catch (error) {
+            console.error(error);
+            return html `
+                <p class="error">${extractErrorMessage(error)}</p>
+            `;
+        }
+    },
+});
+async function scrollNav(host, searchQuery, currentRoutes) {
+    /** If there is a search query, then there will be no selected nav to scroll to. */
+    if (searchQuery) {
+        return;
+    }
+    if (currentRoutes.paths.length <= 1) {
+        return;
+    }
+    const navElement = host.shadowRoot.querySelector(BookNav.tagName);
+    if (!(navElement instanceof BookNav)) {
+        throw new TypeError(`Failed to find child '${BookNav.tagName}'`);
+    }
+    await scrollSelectedNavElementIntoView(navElement);
+}

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

@@ -0,0 +1,48 @@
+import { type PartialWithUndefined } from '@augment-vir/common';
+import { type RequireExactlyOne } from 'type-fest';
+import { type BookPage } from '../../../data/book-entry/book-page/book-page.js';
+import { type ValidBookPaths } from '../../../routing/book-routing.js';
+import { type GlobalValues } from './global-values.js';
+/**
+ * Full configuration for an element-book app.
+ *
+ * @category Type
+ */
+export type ElementBookConfig = {
+    /** All element-book pages in order. */
+    pages: ReadonlyArray<BookPage>;
+} & PartialWithUndefined<OptionalConfig>;
+/**
+ * Options for {@link ElementBookConfig} that are optional.
+ *
+ * @category Internal
+ */
+export type OptionalConfig = {
+    /** The base theme color from which all other element-book colors will be generated from. */
+    themeColor: string;
+    _debug: boolean;
+    globalValues: GlobalValues;
+    preventWindowTitleChange: boolean;
+} & RequireExactlyOne<Readonly<{
+    /**
+     * Set this internal router config if element-book is intended to be the current website's
+     * entire web app. Meaning, you're not embedded element-book within another website.
+     *
+     * In this case, element-book will create its own internal router for managing the URL. In
+     * other cases, when element-book is embedded in another website, use the
+     * elementBookRoutePaths input property instead.
+     */
+    internalRouterConfig: Readonly<{
+        useInternalRouter: true;
+        /**
+         * Path to this page, used for routing. For example, if this page is hosted at
+         * www.example.org/my-page then this value should be `my-page`.
+         */
+        basePath?: string | undefined;
+    }>;
+    /**
+     * Current route paths for element-book to handle. These are intended to come from a router
+     * that's external to the element-book app itself.
+     */
+    elementBookRoutePaths: Readonly<ValidBookPaths>;
+}>>;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,3 @@
+import { type BookTreeNode } from '../../../data/book-tree/book-tree-node.js';
+import { type BookFullRoute, type ValidBookPaths } from '../../../routing/book-routing.js';
+export declare function getCurrentNodes(flattenedNodes: ReadonlyArray<Readonly<BookTreeNode>>, currentPaths: Readonly<ValidBookPaths>, updateRoutes: (newRoute: Partial<BookFullRoute>) => void): BookTreeNode[];

package/dist/ui/elements/element-book-app/get-current-nodes.js

@@ -0,0 +1,18 @@
+import { doBreadcrumbsStartWith } from '../../../data/book-entry/url-breadcrumbs.js';
+import { defaultBookFullRoute, } from '../../../routing/book-routing.js';
+export function getCurrentNodes(flattenedNodes, currentPaths, updateRoutes) {
+    const filteredNodes = filterNodes(flattenedNodes, currentPaths);
+    if (filteredNodes.length) {
+        return filteredNodes;
+    }
+    else {
+        updateRoutes(defaultBookFullRoute);
+    }
+    return filterNodes(flattenedNodes, defaultBookFullRoute.paths);
+}
+function filterNodes(flattenedNodes, paths) {
+    return flattenedNodes.filter((node) => doBreadcrumbsStartWith({
+        searchFor: paths.slice(1),
+        searchIn: node.fullUrlBreadcrumbs,
+    }));
+}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,7 @@
+import { type BookRouter } from '../../../routing/book-router.js';
+import { type BookFullRoute } from '../../../routing/book-routing.js';
+export declare const BookBreadcrumbsBar: import("element-vir").DeclarativeElementDefinition<"book-breadcrumbs-bar", {
+    currentSearch: string;
+    currentRoute: Readonly<BookFullRoute>;
+    router: Readonly<BookRouter> | undefined;
+}, {}, {}, "book-breadcrumbs-bar-", "book-breadcrumbs-bar-", readonly [], readonly []>;

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

@@ -0,0 +1,60 @@
+import { wait } from '@augment-vir/common';
+import { css, html, listen, renderIf } from 'element-vir';
+import { BookMainRoute, defaultBookFullRoute, } from '../../../routing/book-routing.js';
+import { colorThemeCssVars } from '../../color-theme/color-theme.js';
+import { ChangeRouteEvent } from '../../events/change-route.event.js';
+import { BookBreadcrumbs } from '../book-breadcrumbs.element.js';
+import { defineBookElement } from '../define-book-element.js';
+export const BookBreadcrumbsBar = defineBookElement()({
+    tagName: 'book-breadcrumbs-bar',
+    styles: css `
+        :host {
+            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};
+            display: flex;
+            gap: 16px;
+            justify-content: space-between;
+        }
+    `,
+    render({ inputs, dispatch }) {
+        return html `
+            ${renderIf(!!inputs.currentSearch, html `
+                     
+                `, html `
+                    <${BookBreadcrumbs.assign({
+            currentRoute: inputs.currentRoute,
+            router: inputs.router,
+        })}></${BookBreadcrumbs}>
+                `)}
+            <input
+                placeholder="search"
+                .value=${inputs.currentSearch}
+                ${listen('input', async (event) => {
+            const inputElement = event.currentTarget;
+            if (!(inputElement instanceof HTMLInputElement)) {
+                throw new TypeError('Failed to find input element for search.');
+            }
+            const preThrottleValue = inputElement.value;
+            // throttle it a bit
+            await wait({ milliseconds: 200 });
+            if (inputElement.value !== preThrottleValue) {
+                return;
+            }
+            if (inputElement.value) {
+                dispatch(new ChangeRouteEvent({
+                    paths: [
+                        BookMainRoute.Search,
+                        encodeURIComponent(inputElement.value),
+                    ],
+                }));
+            }
+            else {
+                dispatch(new ChangeRouteEvent(defaultBookFullRoute));
+            }
+        })}
+            />
+        `;
+    },
+});

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

@@ -0,0 +1,4 @@
+import { type HTMLTemplateResult } from 'element-vir';
+export declare const BookEntryDescription: import("element-vir").DeclarativeElementDefinition<"book-entry-description", {
+    descriptionParagraphs: ReadonlyArray<string | HTMLTemplateResult>;
+}, {}, {}, "book-entry-description-", "book-entry-description-", readonly [], readonly []>;

package/{src/ui/elements/entry-display/book-entry-description.element.ts → dist/ui/elements/entry-display/book-entry-description.element.js}

@@ -1,12 +1,9 @@
-import {css, html, type HTMLTemplateResult} from 'element-vir';
-import {colorThemeCssVars} from '../../color-theme/color-theme.js';
-import {defineBookElement} from '../define-book-element.js';
-
-export const BookEntryDescription = defineBookElement<{
-    descriptionParagraphs: ReadonlyArray<string | HTMLTemplateResult>;
-}>()({
+import { css, html } from 'element-vir';
+import { colorThemeCssVars } from '../../color-theme/color-theme.js';
+import { defineBookElement } from '../define-book-element.js';
+export const BookEntryDescription = defineBookElement()({
     tagName: 'book-entry-description',
-    styles: css`
+    styles: css `
         :host {
             color: ${colorThemeCssVars['element-book-page-foreground-faint-level-1-color'].value};
             display: inline-flex;
@@ -31,9 +28,9 @@ export const BookEntryDescription = defineBookElement<{
             font-size: 1.2em;
         }
     `,
-    render({inputs}) {
+    render({ inputs }) {
         return inputs.descriptionParagraphs.map((paragraph) => {
-            return html`
+            return html `
                 <p>${paragraph}</p>
             `;
         });

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

@@ -0,0 +1,17 @@
+import { type BookPageControl, type BookPageControlsValues } from '../../../../data/book-entry/book-page/book-page-controls.js';
+import { type BookPage } from '../../../../data/book-entry/book-page/book-page.js';
+export declare const BookPageControls: import("element-vir").DeclarativeElementDefinition<"book-page-controls", {
+    config: BookPage["controls"];
+    /**
+     * If an object (or Record) is given for this input, then each key of the object must correspond
+     * to one of the controls from the input config and the value for each key will be the
+     * breadcrumbs for that specific config.
+     */
+    fullUrlBreadcrumbs: ReadonlyArray<string> | Record<string, ReadonlyArray<string>>;
+    currentValues: Record<string, BookPageControl["initValue"]>;
+}, {}, {
+    controlValueChange: import("element-vir").DefineEvent<{
+        fullUrlBreadcrumbs: ReadonlyArray<string>;
+        newValues: BookPageControlsValues;
+    }>;
+}, "book-page-controls-has-controls", "book-page-controls-", readonly [], readonly []>;

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

@@ -0,0 +1,172 @@
+import { check } from '@augment-vir/assert';
+import { extractEventTarget } from '@augment-vir/web';
+import { css, defineElementEvent, html, listen, renderIf } from 'element-vir';
+import { Options24Icon, ViraIcon, ViraInput } from 'vira';
+import { BookPageControlType, isControlInitType, } from '../../../../data/book-entry/book-page/book-page-controls.js';
+import { colorThemeCssVars } from '../../../color-theme/color-theme.js';
+import { defineBookElement } from '../../define-book-element.js';
+export const BookPageControls = defineBookElement()({
+    tagName: 'book-page-controls',
+    events: {
+        controlValueChange: defineElementEvent(),
+    },
+    hostClasses: {
+        'book-page-controls-has-controls': ({ inputs }) => !!Object.keys(inputs.config).length,
+    },
+    styles: ({ hostClasses }) => css `
+        :host {
+            display: flex;
+            flex-wrap: wrap;
+            align-items: flex-end;
+            padding-left: 36px;
+            align-content: flex-start;
+            gap: 16px;
+            row-gap: 10px;
+            color: ${colorThemeCssVars['element-book-page-foreground-faint-level-1-color'].value};
+        }
+
+        ${hostClasses['book-page-controls-has-controls'].selector} {
+            margin-top: 8px;
+        }
+
+        .control-wrapper {
+            position: relative;
+            display: flex;
+            gap: 4px;
+            flex-direction: column;
+        }
+
+        .error {
+            font-weight: bold;
+            color: red;
+        }
+
+        ${ViraInput} {
+            height: 24px;
+            max-width: 128px;
+        }
+
+        ${ViraIcon}.options-icon {
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            margin-left: -32px;
+        }
+    `,
+    render({ inputs, dispatch, events }) {
+        if (!Object.entries(inputs.config).length) {
+            return '';
+        }
+        return Object.entries(inputs.config).map(([controlName, controlInit,], index) => {
+            if (controlInit.controlType === BookPageControlType.Hidden) {
+                return '';
+            }
+            const controlInputTemplate = createControlInput(inputs.currentValues[controlName], controlInit, (newValue) => {
+                const fullUrlBreadcrumbs = check.isArray(inputs.fullUrlBreadcrumbs)
+                    ? inputs.fullUrlBreadcrumbs
+                    : inputs.fullUrlBreadcrumbs[controlName];
+                if (!fullUrlBreadcrumbs) {
+                    throw new Error(`Failed to find breadcrumbs from given control name: '${controlName}'`);
+                }
+                dispatch(new events.controlValueChange({
+                    fullUrlBreadcrumbs,
+                    newValues: {
+                        ...inputs.currentValues,
+                        [controlName]: newValue,
+                    },
+                }));
+            });
+            return html `
+                    <div class="control-wrapper">
+                        ${renderIf(index === 0, html `
+                                <${ViraIcon.assign({ icon: Options24Icon })}
+                                    class="options-icon"
+                                ></${ViraIcon}>
+                            `)}
+                        <label class="control-wrapper">
+                            <span>${controlName}</span>
+                            ${controlInputTemplate}
+                        </label>
+                    </div>
+                `;
+        });
+    },
+});
+function createControlInput(value, controlInit, valueChange) {
+    if (isControlInitType(controlInit, BookPageControlType.Hidden)) {
+        return '';
+    }
+    else if (isControlInitType(controlInit, BookPageControlType.Checkbox)) {
+        return html `
+            <input
+                type="checkbox"
+                ?checked=${value}
+                ${listen('input', (event) => {
+            const inputElement = extractEventTarget(event, HTMLInputElement);
+            valueChange(inputElement.checked);
+        })}
+            />
+        `;
+    }
+    else if (isControlInitType(controlInit, BookPageControlType.Color)) {
+        return html `
+            <input
+                type="color"
+                .value=${value}
+                ${listen('input', (event) => {
+            const inputElement = extractEventTarget(event, HTMLInputElement);
+            valueChange(inputElement.value);
+        })}
+            />
+        `;
+    }
+    else if (isControlInitType(controlInit, BookPageControlType.Text)) {
+        return html `
+            <${ViraInput.assign({
+            value,
+            showClearButton: true,
+            disableBrowserHelps: true,
+        })}
+                ${listen(ViraInput.events.valueChange, (event) => {
+            valueChange(event.detail);
+        })}
+            ></${ViraInput}>
+        `;
+    }
+    else if (isControlInitType(controlInit, BookPageControlType.Number)) {
+        return html `
+            <input
+                type="number"
+                .value=${value}
+                ${listen('input', (event) => {
+            const inputElement = extractEventTarget(event, HTMLInputElement);
+            valueChange(inputElement.value);
+        })}
+            />
+        `;
+    }
+    else if (isControlInitType(controlInit, BookPageControlType.Dropdown)) {
+        return html `
+            <select
+                .value=${value}
+                ${listen('input', (event) => {
+            const selectElement = extractEventTarget(event, HTMLSelectElement);
+            valueChange(selectElement.value);
+        })}
+            >
+                ${controlInit.options.map((optionLabel) => {
+            return html `
+                        <option ?selected=${optionLabel === value} value=${optionLabel}>
+                            ${optionLabel}
+                        </option>
+                    `;
+        })}
+            </select>
+        `;
+    }
+    else {
+        return html `
+            <p class="error">${controlInit.controlType} controls are not implemented yet.</p>
+        `;
+    }
+}