@configura/debug-react 1.6.1 → 2.0.0-alpha.2

package/dist/exerciser/ExerciserRun.js

@@ -1,144 +1,144 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import { SingleProductViewPhase, } from "@configura/babylon-view";
-import { BabylonView } from "@configura/babylon-view-react";
-import { degToRad, loadImage, LogObservable, toError, } from "@configura/web-utilities";
-import React, { useEffect, useState } from "react";
-/**
- * This configures the Babylon view, for example the camera configuration and detail levels used.
- *
- * To change the detail levels, just add allowedDetailLevels.
- * For example, the line below will load the lowest available detail level for each product:
- * allowedDetailLevels: [DetailLevel.low, DetailLevel.medium, DetailLevel.high, DetailLevel.base],
- */
-const viewConfiguration = {
-    camera: {
-        yaw: degToRad(110),
-        pitch: degToRad(70),
-    },
-};
-function snapImage(scheduleRerender) {
-    return __awaiter(this, void 0, void 0, function* () {
-        const url = yield new Promise((resolve) => scheduleRerender(resolve));
-        const image = yield loadImage(url);
-        return { image, url };
-    });
-}
-export function ExerciserRunner(props) {
-    const { addErrorReportItem, addReportItem, generateExerciserUrl, loadingObservable, productIterator, } = props;
-    const [viewPhase, setViewPhase] = useState();
-    const [renderEnv, setRenderEnv] = useState();
-    const [startLoading, setStartLoading] = useState(performance.now());
-    const [productResult, setProductResult] = useState();
-    const [product, setProduct] = useState();
-    const [snapshotResult, setSnapshotResult] = useState();
-    const loadNext = () => {
-        setSnapshotResult(undefined);
-        setViewStateReachedIdleOrError(undefined);
-        setStartLoading(performance.now());
-    };
-    useEffect(() => {
-        let canceled = false;
-        LogObservable.clear();
-        const token = loadingObservable.startChildLoading();
-        productIterator
-            .next()
-            .then((result) => !canceled && setProductResult(result))
-            .catch((err) => !canceled && setProductResult(toError(err)))
-            .then(() => loadingObservable.stopChildLoading(token));
-        return () => {
-            canceled = true;
-            loadingObservable.stopChildLoading(token);
-        };
-    }, [startLoading, loadingObservable, productIterator]);
-    useEffect(() => {
-        let token;
-        if (productResult === undefined) {
-            // done or not started
-            return;
-        }
-        else if (productResult instanceof Error) {
-            addErrorReportItem(productResult);
-            loadNext();
-        }
-        else if (productResult.done) {
-            setProduct(undefined);
-        }
-        else {
-            const v = productResult.value;
-            if (v instanceof Error) {
-                addErrorReportItem(v);
-                loadNext();
-            }
-            else {
-                token = loadingObservable.startChildLoading();
-                setProduct(v);
-            }
-        }
-        return () => loadingObservable.stopChildLoading(token);
-    }, [addErrorReportItem, loadingObservable, productResult]);
-    const [viewStateReachedIdleOrError, setViewStateReachedIdleOrError] = useState();
-    useEffect(() => {
-        if (viewPhase === undefined ||
-            (viewPhase.current !== SingleProductViewPhase.Idle &&
-                viewPhase.current !== SingleProductViewPhase.Error)) {
-            return;
-        }
-        setViewStateReachedIdleOrError({});
-    }, [viewPhase]);
-    useEffect(() => {
-        if (product === undefined ||
-            renderEnv === undefined ||
-            viewStateReachedIdleOrError === undefined) {
-            return;
-        }
-        let canceled = false;
-        const token = loadingObservable.startChildLoading();
-        snapImage(renderEnv.scheduleRerender)
-            .then((url) => !canceled && setSnapshotResult(url))
-            .catch((err) => !canceled && setSnapshotResult(toError(err)))
-            .then(() => loadingObservable.stopChildLoading(token));
-        return () => {
-            canceled = true;
-            loadingObservable.stopChildLoading(token);
-        };
-    }, [product, viewStateReachedIdleOrError, renderEnv, loadingObservable]);
-    useEffect(() => {
-        if (product === undefined || snapshotResult === undefined) {
-            // done or loading
-            return;
-        }
-        else if (snapshotResult instanceof Error) {
-            addErrorReportItem(snapshotResult);
-        }
-        else {
-            addReportItem({
-                duration: performance.now() - startLoading,
-                imageDataUrl: snapshotResult.image && snapshotResult.url,
-                logMessages: LogObservable.allMessages,
-                productWithConfiguration: product,
-                productUrl: generateExerciserUrl("run", product.product.lang, Object.assign(Object.assign({}, product.product.catId), { partNumber: product.product.partNumber })),
-                randId: Math.random(),
-            });
-        }
-        loadNext();
-    }, [
-        addErrorReportItem,
-        addReportItem,
-        generateExerciserUrl,
-        product,
-        snapshotResult,
-        startLoading,
-    ]);
-    if (!product) {
-        return null;
-    }
-    return (React.createElement(BabylonView, { errorCallback: setProductResult, applicationAreas: product.applicationAreasResponse.applicationAreas, product: product.product, width: 500, height: 500, viewPhaseCallback: setViewPhase, renderEnvironmentCallback: setRenderEnv, configuration: viewConfiguration }));
-}
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { SingleProductViewPhase, } from "@configura/babylon-view";
+import { BabylonView } from "@configura/babylon-view-react";
+import { degToRad, loadImage, LogObservable, toError, } from "@configura/web-utilities";
+import React, { useEffect, useState } from "react";
+/**
+ * This configures the Babylon view, for example the camera configuration and detail levels used.
+ *
+ * To change the detail levels, just add allowedDetailLevels.
+ * For example, the line below will load the lowest available detail level for each product:
+ * allowedDetailLevels: [DetailLevel.low, DetailLevel.medium, DetailLevel.high, DetailLevel.base],
+ */
+const viewConfiguration = {
+    camera: {
+        yaw: degToRad(110),
+        pitch: degToRad(70),
+    },
+};
+function snapImage(scheduleRerender) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const url = yield new Promise((resolve) => scheduleRerender(resolve));
+        const image = yield loadImage(url);
+        return { image, url };
+    });
+}
+export function ExerciserRunner(props) {
+    const { addErrorReportItem, addReportItem, generateExerciserUrl, loadingObservable, productIterator, } = props;
+    const [viewPhase, setViewPhase] = useState();
+    const [renderEnv, setRenderEnv] = useState();
+    const [startLoading, setStartLoading] = useState(performance.now());
+    const [productResult, setProductResult] = useState();
+    const [product, setProduct] = useState();
+    const [snapshotResult, setSnapshotResult] = useState();
+    const loadNext = () => {
+        setSnapshotResult(undefined);
+        setViewStateReachedIdleOrError(undefined);
+        setStartLoading(performance.now());
+    };
+    useEffect(() => {
+        let canceled = false;
+        LogObservable.clear();
+        const token = loadingObservable.startChildLoading();
+        productIterator
+            .next()
+            .then((result) => !canceled && setProductResult(result))
+            .catch((err) => !canceled && setProductResult(toError(err)))
+            .then(() => loadingObservable.stopChildLoading(token));
+        return () => {
+            canceled = true;
+            loadingObservable.stopChildLoading(token);
+        };
+    }, [startLoading, loadingObservable, productIterator]);
+    useEffect(() => {
+        let token;
+        if (productResult === undefined) {
+            // done or not started
+            return;
+        }
+        else if (productResult instanceof Error) {
+            addErrorReportItem(productResult);
+            loadNext();
+        }
+        else if (productResult.done) {
+            setProduct(undefined);
+        }
+        else {
+            const v = productResult.value;
+            if (v instanceof Error) {
+                addErrorReportItem(v);
+                loadNext();
+            }
+            else {
+                token = loadingObservable.startChildLoading();
+                setProduct(v);
+            }
+        }
+        return () => loadingObservable.stopChildLoading(token);
+    }, [addErrorReportItem, loadingObservable, productResult]);
+    const [viewStateReachedIdleOrError, setViewStateReachedIdleOrError] = useState();
+    useEffect(() => {
+        if (viewPhase === undefined ||
+            (viewPhase.current !== SingleProductViewPhase.Idle &&
+                viewPhase.current !== SingleProductViewPhase.Error)) {
+            return;
+        }
+        setViewStateReachedIdleOrError({});
+    }, [viewPhase]);
+    useEffect(() => {
+        if (product === undefined ||
+            renderEnv === undefined ||
+            viewStateReachedIdleOrError === undefined) {
+            return;
+        }
+        let canceled = false;
+        const token = loadingObservable.startChildLoading();
+        snapImage(renderEnv.scheduleRerender)
+            .then((url) => !canceled && setSnapshotResult(url))
+            .catch((err) => !canceled && setSnapshotResult(toError(err)))
+            .then(() => loadingObservable.stopChildLoading(token));
+        return () => {
+            canceled = true;
+            loadingObservable.stopChildLoading(token);
+        };
+    }, [product, viewStateReachedIdleOrError, renderEnv, loadingObservable]);
+    useEffect(() => {
+        if (product === undefined || snapshotResult === undefined) {
+            // done or loading
+            return;
+        }
+        else if (snapshotResult instanceof Error) {
+            addErrorReportItem(snapshotResult);
+        }
+        else {
+            addReportItem({
+                duration: performance.now() - startLoading,
+                imageDataUrl: snapshotResult.image && snapshotResult.url,
+                logMessages: LogObservable.allMessages,
+                productWithConfiguration: product,
+                productUrl: generateExerciserUrl("run", product.product.lang, Object.assign(Object.assign({}, product.product.catId), { partNumber: product.product.partNumber })),
+                randId: Math.random(),
+            });
+        }
+        loadNext();
+    }, [
+        addErrorReportItem,
+        addReportItem,
+        generateExerciserUrl,
+        product,
+        snapshotResult,
+        startLoading,
+    ]);
+    if (!product) {
+        return null;
+    }
+    return (React.createElement(BabylonView, { errorCallback: setProductResult, applicationAreas: product.applicationAreasResponse.applicationAreas, product: product.product, width: 500, height: 500, viewPhaseCallback: setViewPhase, renderEnvironmentCallback: setRenderEnv, configuration: viewConfiguration }));
+}

package/dist/exerciser/ExerciserSetup.d.ts

@@ -1,15 +1,15 @@
-import { CatalogueAPI, GeneratedProductConfiguration, GetProductParams } from "@configura/web-api";
-import { AggregatedLoadingObservable } from "@configura/web-utilities";
-import { ExerciserAction, ExerciserState } from "./Exerciser.js";
-interface Props {
-    api: CatalogueAPI;
-    exerciserState: ExerciserState;
-    generateExerciserUrl: (action: ExerciserAction, lang: string, params: Partial<GetProductParams>) => string;
-    loadingObservable: AggregatedLoadingObservable;
-    setError: (err: unknown) => void;
-    setExerciserState: (next: ExerciserState) => void;
-    setProductIterator: (next: AsyncIterableIterator<GeneratedProductConfiguration | Error>) => void;
-}
-export declare function ExerciserSetup(props: Props): JSX.Element;
-export {};
+import { CatalogueAPI, DtoProductParams, GeneratedProductConfiguration } from "@configura/web-api";
+import { AggregatedLoadingObservable } from "@configura/web-utilities";
+import { ExerciserAction, ExerciserState } from "./Exerciser.js";
+interface Props {
+    api: CatalogueAPI;
+    exerciserState: ExerciserState;
+    generateExerciserUrl: (action: ExerciserAction, lang: string, params: Partial<DtoProductParams>) => string;
+    loadingObservable: AggregatedLoadingObservable;
+    setError: (err: unknown) => void;
+    setExerciserState: (next: ExerciserState) => void;
+    setProductIterator: (next: AsyncIterableIterator<GeneratedProductConfiguration | Error>) => void;
+}
+export declare function ExerciserSetup(props: Props): JSX.Element;
+export {};
 //# sourceMappingURL=ExerciserSetup.d.ts.map

package/dist/exerciser/ExerciserSetup.js

@@ -1,54 +1,54 @@
-import { applyCatalogueFilters, applyProductRefFilters, makeCatalogueKey, } from "@configura/web-api";
-import { Loading } from "@configura/web-ui";
-import React, { useEffect } from "react";
-import { Link } from "react-router-dom";
-import { useMemoized, useMemoized2 } from "../hooks.js";
-import { flattenCataloguePermissions, useCatalogueFilters, useProductConfigurationIterator, useProductFilters, useToc, } from "./Exerciser.js";
-import { FilterSelect } from "./FilterSelect.js";
-export function ExerciserSetup(props) {
-    var _a;
-    const { loadingObservable, exerciserState, setProductIterator, api, setError } = props;
-    const { action, lang } = exerciserState;
-    const next = action === "run" ? "setup" : "run";
-    const catalogues = useMemoized(flattenCataloguePermissions, ((_a = api.auth) === null || _a === void 0 ? void 0 : _a.apiSession.permissions) || []);
-    const catalogueFilters = useCatalogueFilters(exerciserState);
-    const [catalogueMatches, filteredCatalogues] = useMemoized2(applyCatalogueFilters, catalogueFilters, catalogues);
-    const tocParams = filteredCatalogues.length === 1 ? filteredCatalogues[0] : undefined;
-    const toc = useToc(api, tocParams, lang, setError, loadingObservable);
-    const productRefs = (toc === null || toc === void 0 ? void 0 : toc.prdRefs) || [];
-    const productFilters = useProductFilters(exerciserState);
-    const [productMatches, filteredProducts] = useMemoized2(applyProductRefFilters, productFilters, productRefs);
-    const productIterator = useProductConfigurationIterator(api, lang, filteredCatalogues, productFilters);
-    useEffect(() => setProductIterator(productIterator), [setProductIterator, productIterator]);
-    function updateUrl(key, val) {
-        props.setExerciserState(Object.assign(Object.assign({}, exerciserState), { [key]: val }));
-    }
-    return (React.createElement("div", { className: "cfgExerciserSetup" },
-        React.createElement("div", { className: "cfgExerciserView cfgExerciserSetup__select" },
-            React.createElement("h2", { className: "cfgExerciserHeader" }, "Product Setup"),
-            React.createElement("h3", { className: "cfgExerciserHeader" }, "Filter Catalogues"),
-            React.createElement(FilterSelect, { name: "enterprise", filter: catalogueFilters.enterprise, values: catalogueMatches.enterprise.values, updateUrl: updateUrl }),
-            React.createElement(FilterSelect, { name: "prdCat", filter: catalogueFilters.prdCat, values: catalogueMatches.prdCat.values, updateUrl: updateUrl }),
-            React.createElement(FilterSelect, { name: "prdCatVersion", filter: catalogueFilters.prdCatVersion, values: catalogueMatches.prdCatVersion.values, updateUrl: updateUrl }),
-            React.createElement(FilterSelect, { name: "vendor", filter: catalogueFilters.vendor, values: catalogueMatches.vendor.values, updateUrl: updateUrl }),
-            React.createElement(FilterSelect, { name: "priceList", filter: catalogueFilters.priceList, values: catalogueMatches.priceList.values, updateUrl: updateUrl }),
-            React.createElement("h3", { className: "cfgExerciserHeader" }, "Filter Products"),
-            React.createElement(FilterSelect, { name: "partNr", filter: productFilters.partNr, values: productMatches.partNr.values, updateUrl: updateUrl }),
-            React.createElement("button", { className: "cfgButton cfgExerciserButton", onClick: (e) => updateUrl("action", next) }, next === "run" ? "Start" : "Stop")),
-        action === "setup" && (React.createElement("div", { className: "cfgExerciserView cfgExerciserSetup__preview" },
-            React.createElement("h2", { className: "cfgExerciserHeader" }, "Catalogues Preview"),
-            React.createElement("ol", null, filteredCatalogues.map((p) => (React.createElement("li", { key: makeCatalogueKey(p) },
-                React.createElement(Link, { className: "cfgExerciserLink", to: props.generateExerciserUrl(action, lang, p) },
-                    p.enterprise,
-                    " / ",
-                    p.prdCat,
-                    " / ",
-                    p.prdCatVersion,
-                    " / ",
-                    p.vendor,
-                    " /",
-                    " ",
-                    p.priceList))))),
-            React.createElement("h2", { className: "cfgExerciserHeader" }, "Products Preview"),
-            toc !== undefined ? (React.createElement("ol", null, filteredProducts.map((p) => (React.createElement("li", { key: p.partNr }, p.partNr))))) : filteredCatalogues.length === 1 ? (React.createElement(Loading, { small: true })) : (React.createElement("p", null, "Product preview is only available if a single catalogue is selected"))))));
-}
+import { applyCatalogueFilters, applyProductRefFilters, makeCatalogueKey, } from "@configura/web-api";
+import { Loading } from "@configura/web-ui";
+import React, { useEffect } from "react";
+import { Link } from "react-router-dom";
+import { useMemoized, useMemoized2 } from "../hooks.js";
+import { flattenCataloguePermissions, useCatalogueFilters, useProductConfigurationIterator, useProductFilters, useToc, } from "./Exerciser.js";
+import { FilterSelect } from "./FilterSelect.js";
+export function ExerciserSetup(props) {
+    var _a;
+    const { loadingObservable, exerciserState, setProductIterator, api, setError } = props;
+    const { action, lang } = exerciserState;
+    const next = action === "run" ? "setup" : "run";
+    const catalogues = useMemoized(flattenCataloguePermissions, ((_a = api.auth) === null || _a === void 0 ? void 0 : _a.apiSession.permissions) || []);
+    const catalogueFilters = useCatalogueFilters(exerciserState);
+    const [catalogueMatches, filteredCatalogues] = useMemoized2(applyCatalogueFilters, catalogueFilters, catalogues);
+    const tocParams = filteredCatalogues.length === 1 ? filteredCatalogues[0] : undefined;
+    const toc = useToc(api, tocParams, lang, setError, loadingObservable);
+    const productRefs = (toc === null || toc === void 0 ? void 0 : toc.prdRefs) || [];
+    const productFilters = useProductFilters(exerciserState);
+    const [productMatches, filteredProducts] = useMemoized2(applyProductRefFilters, productFilters, productRefs);
+    const productIterator = useProductConfigurationIterator(api, lang, filteredCatalogues, productFilters);
+    useEffect(() => setProductIterator(productIterator), [setProductIterator, productIterator]);
+    function updateUrl(key, val) {
+        props.setExerciserState(Object.assign(Object.assign({}, exerciserState), { [key]: val }));
+    }
+    return (React.createElement("div", { className: "cfgExerciserSetup" },
+        React.createElement("div", { className: "cfgExerciserView cfgExerciserSetup__select" },
+            React.createElement("h2", { className: "cfgExerciserHeader" }, "Product Setup"),
+            React.createElement("h3", { className: "cfgExerciserHeader" }, "Filter Catalogues"),
+            React.createElement(FilterSelect, { name: "enterprise", filter: catalogueFilters.enterprise, values: catalogueMatches.enterprise.values, updateUrl: updateUrl }),
+            React.createElement(FilterSelect, { name: "prdCat", filter: catalogueFilters.prdCat, values: catalogueMatches.prdCat.values, updateUrl: updateUrl }),
+            React.createElement(FilterSelect, { name: "prdCatVersion", filter: catalogueFilters.prdCatVersion, values: catalogueMatches.prdCatVersion.values, updateUrl: updateUrl }),
+            React.createElement(FilterSelect, { name: "vendor", filter: catalogueFilters.vendor, values: catalogueMatches.vendor.values, updateUrl: updateUrl }),
+            React.createElement(FilterSelect, { name: "priceList", filter: catalogueFilters.priceList, values: catalogueMatches.priceList.values, updateUrl: updateUrl }),
+            React.createElement("h3", { className: "cfgExerciserHeader" }, "Filter Products"),
+            React.createElement(FilterSelect, { name: "partNr", filter: productFilters.partNr, values: productMatches.partNr.values, updateUrl: updateUrl }),
+            React.createElement("button", { className: "cfgButton cfgExerciserButton", onClick: (e) => updateUrl("action", next) }, next === "run" ? "Start" : "Stop")),
+        action === "setup" && (React.createElement("div", { className: "cfgExerciserView cfgExerciserSetup__preview" },
+            React.createElement("h2", { className: "cfgExerciserHeader" }, "Catalogues Preview"),
+            React.createElement("ol", null, filteredCatalogues.map((p) => (React.createElement("li", { key: makeCatalogueKey(p) },
+                React.createElement(Link, { className: "cfgExerciserLink", to: props.generateExerciserUrl(action, lang, p) },
+                    p.enterprise,
+                    " / ",
+                    p.prdCat,
+                    " / ",
+                    p.prdCatVersion,
+                    " / ",
+                    p.vendor,
+                    " /",
+                    " ",
+                    p.priceList))))),
+            React.createElement("h2", { className: "cfgExerciserHeader" }, "Products Preview"),
+            toc !== undefined ? (React.createElement("ol", null, filteredProducts.map((p) => (React.createElement("li", { key: p.partNr }, p.partNr))))) : filteredCatalogues.length === 1 ? (React.createElement(Loading, { small: true })) : (React.createElement("p", null, "Product preview is only available if a single catalogue is selected"))))));
+}

package/dist/exerciser/FilterSelect.d.ts

@@ -1,9 +1,9 @@
-import { Filter } from "@configura/web-utilities";
-export interface FilterSelectProps<K extends string> {
-    filter: Filter;
-    name: K;
-    updateUrl: (key: K, val: Filter) => void;
-    values: string[];
-}
-export declare function FilterSelect<K extends string>(props: FilterSelectProps<K>): JSX.Element;
+import { Filter } from "@configura/web-utilities";
+export interface FilterSelectProps<K extends string> {
+    filter: Filter;
+    name: K;
+    updateUrl: (key: K, val: Filter) => void;
+    values: string[];
+}
+export declare function FilterSelect<K extends string>(props: FilterSelectProps<K>): JSX.Element;
 //# sourceMappingURL=FilterSelect.d.ts.map

package/dist/exerciser/FilterSelect.js

@@ -1,40 +1,40 @@
-import React from "react";
-export function FilterSelect(props) {
-    const { filter, name, updateUrl, values } = props;
-    const invalidValue = filter.mode === "exact" && filter.value !== "-" && values.indexOf(filter.value) === -1;
-    const { mode, value } = filter;
-    return (React.createElement("div", { className: "cfgExerciserControl" },
-        React.createElement("label", { className: "cfgExerciserControl__label", htmlFor: name }, name),
-        React.createElement("div", { className: "cfgExerciserControl__selectWrapper" },
-            React.createElement("select", { className: "cfgExerciserControl__select--operator", onChange: (e) => {
-                    const newMode = e.target.value;
-                    if (newMode === mode) {
-                        return;
-                    }
-                    else if (newMode === "exact" || newMode === "all") {
-                        updateUrl(name, { mode: newMode, value: "-" });
-                    }
-                    else if (newMode === "random" || newMode === "first") {
-                        updateUrl(name, {
-                            mode: newMode,
-                            value: typeof value === "number" ? value : 1,
-                        });
-                    }
-                    else {
-                        console.error("invalid mode", newMode);
-                    }
-                }, value: value === "-" ? "all" : mode },
-                React.createElement("option", { value: "all" }, "all"),
-                React.createElement("option", { value: "exact" }, "exact"),
-                React.createElement("option", { value: "random" }, "random"),
-                React.createElement("option", { value: "first" }, "first")),
-            " ",
-            mode === "all" || mode === "exact" ? (React.createElement("select", { className: "cfgExerciserControl__select--full", id: name, onChange: (e) => {
-                    const newValue = e.target.value;
-                    const newMode = newValue === "-" ? "all" : "exact";
-                    updateUrl(name, { mode: newMode, value: newValue });
-                }, value: value, style: { borderColor: invalidValue ? "red" : undefined } },
-                React.createElement("option", { value: "-" }, "-"),
-                invalidValue && React.createElement("option", { value: value }, value),
-                values.map((e) => (React.createElement("option", { key: e, value: e }, e))))) : (React.createElement("input", { type: "number", value: value, onChange: (e) => updateUrl(name, { mode, value: parseInt(e.target.value) }) })))));
-}
+import React from "react";
+export function FilterSelect(props) {
+    const { filter, name, updateUrl, values } = props;
+    const invalidValue = filter.mode === "exact" && filter.value !== "-" && values.indexOf(filter.value) === -1;
+    const { mode, value } = filter;
+    return (React.createElement("div", { className: "cfgExerciserControl" },
+        React.createElement("label", { className: "cfgExerciserControl__label", htmlFor: name }, name),
+        React.createElement("div", { className: "cfgExerciserControl__selectWrapper" },
+            React.createElement("select", { className: "cfgExerciserControl__select--operator", onChange: (e) => {
+                    const newMode = e.target.value;
+                    if (newMode === mode) {
+                        return;
+                    }
+                    else if (newMode === "exact" || newMode === "all") {
+                        updateUrl(name, { mode: newMode, value: "-" });
+                    }
+                    else if (newMode === "random" || newMode === "first") {
+                        updateUrl(name, {
+                            mode: newMode,
+                            value: typeof value === "number" ? value : 1,
+                        });
+                    }
+                    else {
+                        console.error("invalid mode", newMode);
+                    }
+                }, value: value === "-" ? "all" : mode },
+                React.createElement("option", { value: "all" }, "all"),
+                React.createElement("option", { value: "exact" }, "exact"),
+                React.createElement("option", { value: "random" }, "random"),
+                React.createElement("option", { value: "first" }, "first")),
+            " ",
+            mode === "all" || mode === "exact" ? (React.createElement("select", { className: "cfgExerciserControl__select--full", id: name, onChange: (e) => {
+                    const newValue = e.target.value;
+                    const newMode = newValue === "-" ? "all" : "exact";
+                    updateUrl(name, { mode: newMode, value: newValue });
+                }, value: value, style: { borderColor: invalidValue ? "red" : undefined } },
+                React.createElement("option", { value: "-" }, "-"),
+                invalidValue && React.createElement("option", { value: value }, value),
+                values.map((e) => (React.createElement("option", { key: e, value: e }, e))))) : (React.createElement("input", { type: "number", value: value, onChange: (e) => updateUrl(name, { mode, value: parseInt(e.target.value) }) })))));
+}

package/dist/hooks.d.ts

@@ -1,3 +1,3 @@
-export declare function useMemoized<T, V>(func: (value: V) => T, value: V): T;
-export declare function useMemoized2<T, V, U>(func: (first: V, second: U) => T, first: V, second: U): T;
+export declare function useMemoized<T, V>(func: (value: V) => T, value: V): T;
+export declare function useMemoized2<T, V, U>(func: (first: V, second: U) => T, first: V, second: U): T;
 //# sourceMappingURL=hooks.d.ts.map

package/dist/hooks.js

@@ -1,7 +1,7 @@
-import { useMemo } from "react";
-export function useMemoized(func, value) {
-    return useMemo(() => func(value), [func, value]);
-}
-export function useMemoized2(func, first, second) {
-    return useMemo(() => func(first, second), [func, first, second]);
-}
+import { useMemo } from "react";
+export function useMemoized(func, value) {
+    return useMemo(() => func(value), [func, value]);
+}
+export function useMemoized2(func, first, second) {
+    return useMemo(() => func(first, second), [func, first, second]);
+}

package/dist/index.d.ts

@@ -1,12 +1,13 @@
-export * from "./exerciser/Exerciser.js";
-export * from "./exerciser/ExerciserReportFilterView.js";
-export * from "./exerciser/ExerciserReportItem.js";
-export * from "./exerciser/ExerciserReportItemView.js";
-export * from "./exerciser/ExerciserReportView.js";
-export * from "./exerciser/ExerciserRun.js";
-export * from "./exerciser/ExerciserSetup.js";
-export * from "./hooks.js";
-export * from "./LogMessagesView.js";
-export * from "./LogMessageView.js";
-export * from "./productConfiguration/index.js";
+export * from "./exerciser/Exerciser.js";
+export * from "./exerciser/ExerciserReportFilterView.js";
+export * from "./exerciser/ExerciserReportItem.js";
+export * from "./exerciser/ExerciserReportItemView.js";
+export * from "./exerciser/ExerciserReportView.js";
+export * from "./exerciser/ExerciserRun.js";
+export * from "./exerciser/ExerciserSetup.js";
+export * from "./hooks.js";
+export * from "./LogMessagesView.js";
+export * from "./LogMessageView.js";
+export * from "./productConfiguration/index.js";
+export * from "./TextualConfigurationView.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -1,11 +1,12 @@
-export * from "./exerciser/Exerciser.js";
-export * from "./exerciser/ExerciserReportFilterView.js";
-export * from "./exerciser/ExerciserReportItem.js";
-export * from "./exerciser/ExerciserReportItemView.js";
-export * from "./exerciser/ExerciserReportView.js";
-export * from "./exerciser/ExerciserRun.js";
-export * from "./exerciser/ExerciserSetup.js";
-export * from "./hooks.js";
-export * from "./LogMessagesView.js";
-export * from "./LogMessageView.js";
-export * from "./productConfiguration/index.js";
+export * from "./exerciser/Exerciser.js";
+export * from "./exerciser/ExerciserReportFilterView.js";
+export * from "./exerciser/ExerciserReportItem.js";
+export * from "./exerciser/ExerciserReportItemView.js";
+export * from "./exerciser/ExerciserReportView.js";
+export * from "./exerciser/ExerciserRun.js";
+export * from "./exerciser/ExerciserSetup.js";
+export * from "./hooks.js";
+export * from "./LogMessagesView.js";
+export * from "./LogMessageView.js";
+export * from "./productConfiguration/index.js";
+export * from "./TextualConfigurationView.js";

package/dist/productConfiguration/DebugAdditionalProductView.d.ts

@@ -1,4 +1,4 @@
-import { CfgAdditionalProductViewProps } from "@configura/web-ui";
-import React from "react";
-export declare const getDebugAdditionalProductView: (Original: React.ComponentType<CfgAdditionalProductViewProps>) => React.ComponentType<CfgAdditionalProductViewProps>;
+import { CfgAdditionalProductViewProps } from "@configura/web-ui";
+import React from "react";
+export declare const getDebugAdditionalProductView: (Original: React.ComponentType<CfgAdditionalProductViewProps>) => React.ComponentType<CfgAdditionalProductViewProps>;
 //# sourceMappingURL=DebugAdditionalProductView.d.ts.map

package/dist/productConfiguration/DebugAdditionalProductView.js

@@ -1,6 +1,6 @@
-import React from "react";
-import { DebugProductCommon } from "./DebugProductCommon.js";
-export const getDebugAdditionalProductView = (Original) => (props) => (React.createElement("li", null,
-    React.createElement(DebugProductCommon, Object.assign({ heading: "Additional Product" }, props)),
-    React.createElement("ul", { className: "debug-wrapper" },
-        React.createElement(Original, Object.assign({}, props)))));
+import React from "react";
+import { DebugProductCommon } from "./DebugProductCommon.js";
+export const getDebugAdditionalProductView = (Original) => (props) => (React.createElement("li", null,
+    React.createElement(DebugProductCommon, Object.assign({ heading: "Additional Product" }, props)),
+    React.createElement("ul", { className: "debug-wrapper" },
+        React.createElement(Original, Object.assign({}, props)))));