@configura/web-ui 2.2.0-alpha.1 → 2.2.0-alpha.2

package/dist/components/TaskStartView.js

@@ -1,29 +1,29 @@
-import React, { useContext } from "react";
-import { ErrorContext } from "./ErrorContext.js";
-export const TaskStartView = (props) => {
-    var _a, _b;
-    const { taskHandler, product, renderTaskParams, getPreviewUrl } = props;
-    const setError = useContext(ErrorContext);
-    const formats = (_a = props.formats) !== null && _a !== void 0 ? _a : taskHandler.availableFormats;
-    if (formats.length === 0) {
-        return null;
-    }
-    return (React.createElement("div", { className: `cfgTaskStart ${(_b = props.className) !== null && _b !== void 0 ? _b : ""}`, style: props.style },
-        React.createElement("div", { className: "cfgFormSelect" },
-            React.createElement("select", { value: "", onChange: (event) => {
-                    const index = event.target.selectedIndex;
-                    if (index === 0) {
-                        return;
-                    }
-                    taskHandler
-                        .start(formats[index - 1], product, typeof renderTaskParams === "function"
-                        ? renderTaskParams()
-                        : renderTaskParams, getPreviewUrl)
-                        .catch((e) => {
-                        setError(e);
-                        throw e;
-                    });
-                } },
-                React.createElement("option", { value: "" }, "Export"),
-                formats.map((format) => (React.createElement("option", { value: format, key: format }, format)))))));
-};
+import React, { useContext } from "react";
+import { ErrorContext } from "./ErrorContext.js";
+export const TaskStartView = (props) => {
+    var _a, _b;
+    const { taskHandler, product, renderTaskParams, getPreviewUrl } = props;
+    const setError = useContext(ErrorContext);
+    const formats = (_a = props.formats) !== null && _a !== void 0 ? _a : taskHandler.availableFormats;
+    if (formats.length === 0) {
+        return null;
+    }
+    return (React.createElement("div", { className: `cfgTaskStart ${(_b = props.className) !== null && _b !== void 0 ? _b : ""}`, style: props.style },
+        React.createElement("div", { className: "cfgFormSelect" },
+            React.createElement("select", { value: "", onChange: (event) => {
+                    const index = event.target.selectedIndex;
+                    if (index === 0) {
+                        return;
+                    }
+                    taskHandler
+                        .start(formats[index - 1], product, typeof renderTaskParams === "function"
+                        ? renderTaskParams()
+                        : renderTaskParams, getPreviewUrl)
+                        .catch((e) => {
+                        setError(e);
+                        throw e;
+                    });
+                } },
+                React.createElement("option", { value: "" }, "Export"),
+                formats.map((format) => (React.createElement("option", { value: format, key: format }, format)))))));
+};

package/dist/components/icons/Checkmark.d.ts

@@ -1,7 +1,7 @@
-import React from "react";
-import { CssProps } from "../../utilities";
-export declare const CheckmarkWithBorder: React.FC<{
-    active: boolean;
-} & CssProps>;
-export declare const Checkmark: React.FC<CssProps>;
+import React from "react";
+import { CssProps } from "../../utilities";
+export declare const CheckmarkWithBorder: React.FC<{
+    active: boolean;
+} & CssProps>;
+export declare const Checkmark: React.FC<CssProps>;
 //# sourceMappingURL=Checkmark.d.ts.map

package/dist/components/icons/Checkmark.js

@@ -1,12 +1,12 @@
-import React from "react";
-export const CheckmarkWithBorder = (props) => {
-    const { active } = props;
-    return (React.createElement("div", { className: `cfgCheckmark__border ${props.className || ""} ${active ? "cfgCheckmark__border--active" : ""}`, style: props.style }, active && React.createElement(Checkmark, null)));
-};
-export const Checkmark = (props) => {
-    return (React.createElement("span", { className: `cfgCheckmark ${props.className || ""}`, style: props.style },
-        React.createElement("svg", { height: "100%", preserveAspectRatio: "xMidYMid", version: "1.1", viewBox: "0 0 100 100", width: "100%", xmlns: "http://www.w3.org/2000/svg" },
-            React.createElement("g", { className: "cfgCheckmark__container" },
-                React.createElement("line", { className: "cfgCheckmark__line cfgCheckmark__lineLeft", x1: "10", y1: "30", x2: "30", y2: "30" }),
-                React.createElement("line", { className: "cfgCheckmark__line cfgCheckmark__lineRight", x1: "90", y1: "50", x2: "50", y2: "50" })))));
-};
+import React from "react";
+export const CheckmarkWithBorder = (props) => {
+    const { active } = props;
+    return (React.createElement("div", { className: `cfgCheckmark__border ${props.className || ""} ${active ? "cfgCheckmark__border--active" : ""}`, style: props.style }, active && React.createElement(Checkmark, null)));
+};
+export const Checkmark = (props) => {
+    return (React.createElement("span", { className: `cfgCheckmark ${props.className || ""}`, style: props.style },
+        React.createElement("svg", { height: "100%", preserveAspectRatio: "xMidYMid", version: "1.1", viewBox: "0 0 100 100", width: "100%", xmlns: "http://www.w3.org/2000/svg" },
+            React.createElement("g", { className: "cfgCheckmark__container" },
+                React.createElement("line", { className: "cfgCheckmark__line cfgCheckmark__lineLeft", x1: "10", y1: "30", x2: "30", y2: "30" }),
+                React.createElement("line", { className: "cfgCheckmark__line cfgCheckmark__lineRight", x1: "90", y1: "50", x2: "50", y2: "50" })))));
+};

package/dist/components/icons/Chevron.d.ts

@@ -1,8 +1,8 @@
-import React from "react";
-import { CssProps } from "../../utilities";
-export interface Props {
-    active: boolean;
-    up?: boolean;
-}
-export declare const Chevron: React.FC<Props & CssProps>;
+import React from "react";
+import { CssProps } from "../../utilities";
+export interface Props {
+    active: boolean;
+    up?: boolean;
+}
+export declare const Chevron: React.FC<Props & CssProps>;
 //# sourceMappingURL=Chevron.d.ts.map

package/dist/components/icons/Chevron.js

@@ -1,18 +1,18 @@
-import React from "react";
-export const Chevron = (props) => {
-    const { active } = props;
-    let { up } = props;
-    if (up === undefined) {
-        up = active;
-    }
-    const upFragment = up ? "up" : "down";
-    const activeFragment = active ? "active" : "passive";
-    const containerClass = "cfgChevron__container--" + upFragment + " cfgChevron__container--" + activeFragment;
-    const leftLineClass = "cfgChevron__lineLeft--" + upFragment + " cfgChevron__lineLeft--" + activeFragment;
-    const rightLineClass = "cfgChevron__lineRight--" + upFragment + " cfgChevron__lineRight--" + activeFragment;
-    return (React.createElement("span", { className: `cfgChevron ${props.className || ""}`, style: props.style },
-        React.createElement("svg", { height: "100%", preserveAspectRatio: "xMidYMid", version: "1.1", viewBox: "0 0 100 100", width: "100%", xmlns: "http://www.w3.org/2000/svg" },
-            React.createElement("g", { className: `cfgChevron__container ${containerClass}` },
-                React.createElement("line", { className: `cfgChevron__line ${leftLineClass}`, x1: "10", y1: "50", x2: "50", y2: "50" }),
-                React.createElement("line", { className: `cfgChevron__line ${rightLineClass}`, x1: "90", y1: "50", x2: "50", y2: "50" })))));
-};
+import React from "react";
+export const Chevron = (props) => {
+    const { active } = props;
+    let { up } = props;
+    if (up === undefined) {
+        up = active;
+    }
+    const upFragment = up ? "up" : "down";
+    const activeFragment = active ? "active" : "passive";
+    const containerClass = "cfgChevron__container--" + upFragment + " cfgChevron__container--" + activeFragment;
+    const leftLineClass = "cfgChevron__lineLeft--" + upFragment + " cfgChevron__lineLeft--" + activeFragment;
+    const rightLineClass = "cfgChevron__lineRight--" + upFragment + " cfgChevron__lineRight--" + activeFragment;
+    return (React.createElement("span", { className: `cfgChevron ${props.className || ""}`, style: props.style },
+        React.createElement("svg", { height: "100%", preserveAspectRatio: "xMidYMid", version: "1.1", viewBox: "0 0 100 100", width: "100%", xmlns: "http://www.w3.org/2000/svg" },
+            React.createElement("g", { className: `cfgChevron__container ${containerClass}` },
+                React.createElement("line", { className: `cfgChevron__line ${leftLineClass}`, x1: "10", y1: "50", x2: "50", y2: "50" }),
+                React.createElement("line", { className: `cfgChevron__line ${rightLineClass}`, x1: "90", y1: "50", x2: "50", y2: "50" })))));
+};

package/dist/components/icons/CircleXmarkIcon.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
-import { CssProps } from "../../utilities";
-export declare const CircleXmarkIcon: React.FC<CssProps>;
+import React from "react";
+import { CssProps } from "../../utilities";
+export declare const CircleXmarkIcon: React.FC<CssProps>;
 //# sourceMappingURL=CircleXmarkIcon.d.ts.map

package/dist/components/icons/CircleXmarkIcon.js

@@ -1,8 +1,8 @@
-import React from "react";
-export const CircleXmarkIcon = (props) => {
-    return (React.createElement("span", { className: `cfgCircleXmarkIcon ${props.className || ""}`, style: props.style },
-        React.createElement("svg", { preserveAspectRatio: "xMidYMid", width: "100%", height: "100%", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-            React.createElement("path", { d: "M6 6L10 10" }),
-            React.createElement("path", { d: "M6 10L10 6" }),
-            React.createElement("circle", { cx: "8", cy: "8", r: "7.25" }))));
-};
+import React from "react";
+export const CircleXmarkIcon = (props) => {
+    return (React.createElement("span", { className: `cfgCircleXmarkIcon ${props.className || ""}`, style: props.style },
+        React.createElement("svg", { preserveAspectRatio: "xMidYMid", width: "100%", height: "100%", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+            React.createElement("path", { d: "M6 6L10 10" }),
+            React.createElement("path", { d: "M6 10L10 6" }),
+            React.createElement("circle", { cx: "8", cy: "8", r: "7.25" }))));
+};

package/dist/components/icons/DownloadIcon.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
-import { CssProps } from "../../utilities";
-export declare const DownloadIcon: React.FC<CssProps>;
+import React from "react";
+import { CssProps } from "../../utilities";
+export declare const DownloadIcon: React.FC<CssProps>;
 //# sourceMappingURL=DownloadIcon.d.ts.map

package/dist/components/icons/DownloadIcon.js

@@ -1,8 +1,8 @@
-import React from "react";
-export const DownloadIcon = (props) => {
-    return (React.createElement("span", { className: `cfgDownloadIcon ${props.className || ""}`, style: props.style },
-        React.createElement("svg", { preserveAspectRatio: "xMidYMid", width: "100%", height: "100%", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-            React.createElement("path", { d: "M1.5 11.5V14.5H14.5V11.5" }),
-            React.createElement("path", { d: "M8 1V11" }),
-            React.createElement("path", { d: "M5 9L8 12L11 9" }))));
-};
+import React from "react";
+export const DownloadIcon = (props) => {
+    return (React.createElement("span", { className: `cfgDownloadIcon ${props.className || ""}`, style: props.style },
+        React.createElement("svg", { preserveAspectRatio: "xMidYMid", width: "100%", height: "100%", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+            React.createElement("path", { d: "M1.5 11.5V14.5H14.5V11.5" }),
+            React.createElement("path", { d: "M8 1V11" }),
+            React.createElement("path", { d: "M5 9L8 12L11 9" }))));
+};

package/dist/components/icons/ErrorIcon.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
-import { CssProps } from "../../utilities";
-export declare const ErrorIcon: React.FC<CssProps>;
+import React from "react";
+import { CssProps } from "../../utilities";
+export declare const ErrorIcon: React.FC<CssProps>;
 //# sourceMappingURL=ErrorIcon.d.ts.map

package/dist/components/icons/ErrorIcon.js

@@ -1,8 +1,8 @@
-import React from "react";
-export const ErrorIcon = (props) => {
-    return (React.createElement("span", { className: `cfgErrorIcon ${props.className || ""}`, style: props.style },
-        React.createElement("svg", { preserveAspectRatio: "xMidYMid", width: "100%", height: "100%", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-            React.createElement("path", { d: "M8 11L8 11.5" }),
-            React.createElement("path", { d: "M8 8.5L8 4.5" }),
-            React.createElement("circle", { cx: "8", cy: "8", r: "7.25" }))));
-};
+import React from "react";
+export const ErrorIcon = (props) => {
+    return (React.createElement("span", { className: `cfgErrorIcon ${props.className || ""}`, style: props.style },
+        React.createElement("svg", { preserveAspectRatio: "xMidYMid", width: "100%", height: "100%", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+            React.createElement("path", { d: "M8 11L8 11.5" }),
+            React.createElement("path", { d: "M8 8.5L8 4.5" }),
+            React.createElement("circle", { cx: "8", cy: "8", r: "7.25" }))));
+};

package/dist/components/productConfiguration/CfgAdditionalProductView.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
-import { CfgAdditionalProductViewProps } from "./CfgFeatureView.js";
-export declare const CfgAdditionalProductView: React.FC<CfgAdditionalProductViewProps>;
+import React from "react";
+import { CfgAdditionalProductViewProps } from "./CfgFeatureView.js";
+export declare const CfgAdditionalProductView: React.FC<CfgAdditionalProductViewProps>;
 //# sourceMappingURL=CfgAdditionalProductView.d.ts.map

package/dist/components/productConfiguration/CfgAdditionalProductView.js

@@ -1,46 +1,46 @@
-import React, { useContext, useState } from "react";
-import { ErrorContext } from "../ErrorContext.js";
-import { ExpandableHeadingRow, ExpandableHeadingRowSymbol } from "../ExpandableHeadingRow.js";
-import { forwardProps, } from "./CfgFeatureView.js";
-import { CfgProductConfigurationView } from "./CfgProductConfigurationView.js";
-export const CfgAdditionalProductView = React.memo((props) => {
-    var _a;
-    const { product, permanentlyExpandedLevels, startOpen } = props;
-    const { partNumber, optional, selected, configuration, additionalProducts, preview, description, visible: configurationVisible, } = product;
-    const setError = useContext(ErrorContext);
-    const [open, setOpen] = useState(startOpen === true);
-    if (!configurationVisible) {
-        // Visibility of a Product should not affect its Additional Products.
-        // (Those have their own visibility.)
-        return (React.createElement(AdditionalProductsView, Object.assign({}, forwardProps(props), { additionalProducts: additionalProducts, permanentlyExpandedLevels: permanentlyExpandedLevels })));
-    }
-    const openOrSelected = optional ? selected : open;
-    const hasChildren = configuration.features.length !== 0 ||
-        additionalProducts.length !== 0 ||
-        product.notes.length !== 0 ||
-        product.miscFiles.length !== 0;
-    return (React.createElement("li", { className: `cfgFeatureItem cfgAdditionalProduct ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, style: props.style },
-        React.createElement(ExpandableHeadingRow, { heading: description || partNumber, expandable: optional || (hasChildren && permanentlyExpandedLevels <= 0), open: openOrSelected, onClick: () => {
-                if (optional) {
-                    product.setSelected(!selected).catch((e) => {
-                        setError(e);
-                        throw e;
-                    });
-                }
-                else {
-                    setOpen((prev) => !prev);
-                }
-            }, symbol: optional ? ExpandableHeadingRowSymbol.Checkbox : undefined }, preview && (React.createElement("div", { className: "cfgThumbnailPlaceholder" },
-            React.createElement("img", { alt: `Preview for ${description}`, className: "cfgThumbnailImage", src: preview })))),
-        hasChildren &&
-            (!optional || selected) &&
-            (openOrSelected || 0 < permanentlyExpandedLevels) && (React.createElement("div", { className: "cfgFeatureItem__subTree" },
-            React.createElement(CfgProductConfigurationView, Object.assign({}, forwardProps(props), { productOrConfiguration: configuration })),
-            additionalProducts.length !== 0 && (React.createElement("ul", { className: `cfgOptionTree cfgOptionTree--topLevel` },
-                React.createElement(AdditionalProductsView, Object.assign({}, forwardProps(props), { additionalProducts: additionalProducts, permanentlyExpandedLevels: permanentlyExpandedLevels })))))),
-        React.createElement("hr", { className: "cfgFeatureItem__hr cfgHr" })));
-});
-const AdditionalProductsView = (props) => {
-    const { additionalProducts, permanentlyExpandedLevels, additionalProductComponent: AdditionalProductComponent, } = props;
-    return (React.createElement(React.Fragment, null, additionalProducts.map((additionalProduct) => (React.createElement(AdditionalProductComponent, Object.assign({}, forwardProps(props), { key: additionalProduct.key, product: additionalProduct, permanentlyExpandedLevels: permanentlyExpandedLevels - 1 }))))));
-};
+import React, { useContext, useState } from "react";
+import { ErrorContext } from "../ErrorContext.js";
+import { ExpandableHeadingRow, ExpandableHeadingRowSymbol } from "../ExpandableHeadingRow.js";
+import { forwardProps, } from "./CfgFeatureView.js";
+import { CfgProductConfigurationView } from "./CfgProductConfigurationView.js";
+export const CfgAdditionalProductView = React.memo((props) => {
+    var _a;
+    const { product, permanentlyExpandedLevels, startOpen } = props;
+    const { partNumber, optional, selected, configuration, additionalProducts, preview, description, visible: configurationVisible, } = product;
+    const setError = useContext(ErrorContext);
+    const [open, setOpen] = useState(startOpen === true);
+    if (!configurationVisible) {
+        // Visibility of a Product should not affect its Additional Products.
+        // (Those have their own visibility.)
+        return (React.createElement(AdditionalProductsView, Object.assign({}, forwardProps(props), { additionalProducts: additionalProducts, permanentlyExpandedLevels: permanentlyExpandedLevels })));
+    }
+    const openOrSelected = optional ? selected : open;
+    const hasChildren = configuration.features.length !== 0 ||
+        additionalProducts.length !== 0 ||
+        product.notes.length !== 0 ||
+        product.miscFiles.length !== 0;
+    return (React.createElement("li", { className: `cfgFeatureItem cfgAdditionalProduct ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, style: props.style },
+        React.createElement(ExpandableHeadingRow, { heading: description || partNumber, expandable: optional || (hasChildren && permanentlyExpandedLevels <= 0), open: openOrSelected, onClick: () => {
+                if (optional) {
+                    product.setSelected(!selected).catch((e) => {
+                        setError(e);
+                        throw e;
+                    });
+                }
+                else {
+                    setOpen((prev) => !prev);
+                }
+            }, symbol: optional ? ExpandableHeadingRowSymbol.Checkbox : undefined }, preview && (React.createElement("div", { className: "cfgThumbnailPlaceholder" },
+            React.createElement("img", { alt: `Preview for ${description}`, className: "cfgThumbnailImage", src: preview })))),
+        hasChildren &&
+            (!optional || selected) &&
+            (openOrSelected || 0 < permanentlyExpandedLevels) && (React.createElement("div", { className: "cfgFeatureItem__subTree" },
+            React.createElement(CfgProductConfigurationView, Object.assign({}, forwardProps(props), { productOrConfiguration: configuration })),
+            additionalProducts.length !== 0 && (React.createElement("ul", { className: `cfgOptionTree cfgOptionTree--topLevel` },
+                React.createElement(AdditionalProductsView, Object.assign({}, forwardProps(props), { additionalProducts: additionalProducts, permanentlyExpandedLevels: permanentlyExpandedLevels })))))),
+        React.createElement("hr", { className: "cfgFeatureItem__hr cfgHr" })));
+});
+const AdditionalProductsView = (props) => {
+    const { additionalProducts, permanentlyExpandedLevels, additionalProductComponent: AdditionalProductComponent, } = props;
+    return (React.createElement(React.Fragment, null, additionalProducts.map((additionalProduct) => (React.createElement(AdditionalProductComponent, Object.assign({}, forwardProps(props), { key: additionalProduct.key, product: additionalProduct, permanentlyExpandedLevels: permanentlyExpandedLevels - 1 }))))));
+};

package/dist/components/productConfiguration/CfgCheckboxView.d.ts

@@ -1,5 +1,5 @@
-import React from "react";
-import { CfgOptionViewProps } from "./CfgFeatureView.js";
-export declare const CfgCheckboxView: React.FC<CfgOptionViewProps>;
-export declare const CfgCheckboxViewMemo: React.NamedExoticComponent<CfgOptionViewProps>;
+import React from "react";
+import { CfgOptionViewProps } from "./CfgFeatureView.js";
+export declare const CfgCheckboxView: React.FC<CfgOptionViewProps>;
+export declare const CfgCheckboxViewMemo: React.NamedExoticComponent<CfgOptionViewProps>;
 //# sourceMappingURL=CfgCheckboxView.d.ts.map

package/dist/components/productConfiguration/CfgCheckboxView.js

@@ -1,7 +1,7 @@
-import React from "react";
-import { CfgOptionCommonView } from "./CfgOptionCommonView.js";
-export const CfgCheckboxView = (props) => {
-    var _a;
-    return (React.createElement(CfgOptionCommonView, Object.assign({}, props, { className: `cfgFeatureItem ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}` })));
-};
-export const CfgCheckboxViewMemo = React.memo(CfgCheckboxView);
+import React from "react";
+import { CfgOptionCommonView } from "./CfgOptionCommonView.js";
+export const CfgCheckboxView = (props) => {
+    var _a;
+    return (React.createElement(CfgOptionCommonView, Object.assign({}, props, { className: `cfgFeatureItem ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}` })));
+};
+export const CfgCheckboxViewMemo = React.memo(CfgCheckboxView);

package/dist/components/productConfiguration/CfgCheckboxesView.d.ts

@@ -1,5 +1,5 @@
-import React from "react";
-import { CfgFeatureViewProps } from "./CfgFeatureView.js";
-export declare const CfgCheckboxesView: React.FC<CfgFeatureViewProps>;
-export declare const CfgCheckboxesViewMemo: React.NamedExoticComponent<CfgFeatureViewProps>;
+import React from "react";
+import { CfgFeatureViewProps } from "./CfgFeatureView.js";
+export declare const CfgCheckboxesView: React.FC<CfgFeatureViewProps>;
+export declare const CfgCheckboxesViewMemo: React.NamedExoticComponent<CfgFeatureViewProps>;
 //# sourceMappingURL=CfgCheckboxesView.d.ts.map

package/dist/components/productConfiguration/CfgCheckboxesView.js

@@ -1,20 +1,20 @@
-import { SelectionType } from "@configura/web-api";
-import React from "react";
-import { CfgConfigurationCommonView } from "./CfgConfigurationCommonView.js";
-import { forwardProps } from "./CfgFeatureView.js";
-export const CfgCheckboxesView = (props) => {
-    var _a;
-    const { feature, optionSelectManyComponent: OptionComponent } = props;
-    if (feature.selectionType !== SelectionType.SelectMany) {
-        throw Error(`Unsupported selection type expected: ${SelectionType.SelectMany}, got: ${feature.selectionType}`);
-    }
-    const { options, description, code, notes } = feature;
-    if (options.length === 0) {
-        return null;
-    }
-    return (React.createElement("li", { className: `cfgFeatureItem cfgFeatureItem--optional ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, style: props.style },
-        React.createElement("h3", { className: "cfgFeatureItemOptional__header" }, description || code),
-        React.createElement(CfgConfigurationCommonView, Object.assign({}, forwardProps(props), { notes: notes })),
-        React.createElement("ul", { className: "cfgOptionTree" }, options.map((option) => (React.createElement(OptionComponent, Object.assign({ option: option, key: option.key }, forwardProps(props))))))));
-};
-export const CfgCheckboxesViewMemo = React.memo(CfgCheckboxesView);
+import { SelectionType } from "@configura/web-api";
+import React from "react";
+import { CfgConfigurationCommonView } from "./CfgConfigurationCommonView.js";
+import { forwardProps } from "./CfgFeatureView.js";
+export const CfgCheckboxesView = (props) => {
+    var _a;
+    const { feature, optionSelectManyComponent: OptionComponent } = props;
+    if (feature.selectionType !== SelectionType.SelectMany) {
+        throw Error(`Unsupported selection type expected: ${SelectionType.SelectMany}, got: ${feature.selectionType}`);
+    }
+    const { options, description, code, notes } = feature;
+    if (options.length === 0) {
+        return null;
+    }
+    return (React.createElement("li", { className: `cfgFeatureItem cfgFeatureItem--optional ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, style: props.style },
+        React.createElement("h3", { className: "cfgFeatureItemOptional__header" }, description || code),
+        React.createElement(CfgConfigurationCommonView, Object.assign({}, forwardProps(props), { notes: notes })),
+        React.createElement("ul", { className: "cfgOptionTree" }, options.map((option) => (React.createElement(OptionComponent, Object.assign({ option: option, key: option.key }, forwardProps(props))))))));
+};
+export const CfgCheckboxesViewMemo = React.memo(CfgCheckboxesView);

package/dist/components/productConfiguration/CfgConfigurationCommonView.d.ts

@@ -1,8 +1,8 @@
-import { DtoMiscFile, DtoNote } from "@configura/web-api";
-import React from "react";
-import { CfgProductConfigurationComponentAndPassthroughProps } from "./CfgFeatureView.js";
-export declare const CfgConfigurationCommonView: React.FC<CfgProductConfigurationComponentAndPassthroughProps & {
-    notes?: DtoNote[];
-    miscFiles?: DtoMiscFile[];
-}>;
+import { DtoMiscFile, DtoNote } from "@configura/web-api";
+import React from "react";
+import { CfgProductConfigurationComponentAndPassthroughProps } from "./CfgFeatureView.js";
+export declare const CfgConfigurationCommonView: React.FC<CfgProductConfigurationComponentAndPassthroughProps & {
+    notes?: DtoNote[];
+    miscFiles?: DtoMiscFile[];
+}>;
 //# sourceMappingURL=CfgConfigurationCommonView.d.ts.map

package/dist/components/productConfiguration/CfgConfigurationCommonView.js

@@ -1,8 +1,8 @@
-import React from "react";
-import { forwardProps, } from "./CfgFeatureView.js";
-export const CfgConfigurationCommonView = (props) => {
-    const { notesComponent: NotesComponent, miscFilesComponent: MiscFilesComponent, notes, miscFiles, } = props;
-    return (React.createElement(React.Fragment, null,
-        notes && notes.length !== 0 && (React.createElement(NotesComponent, Object.assign({}, forwardProps(props), { notes: notes }))),
-        miscFiles && miscFiles.length !== 0 && (React.createElement(MiscFilesComponent, Object.assign({}, forwardProps(props), { miscFiles: miscFiles })))));
-};
+import React from "react";
+import { forwardProps, } from "./CfgFeatureView.js";
+export const CfgConfigurationCommonView = (props) => {
+    const { notesComponent: NotesComponent, miscFilesComponent: MiscFilesComponent, notes, miscFiles, } = props;
+    return (React.createElement(React.Fragment, null,
+        notes && notes.length !== 0 && (React.createElement(NotesComponent, Object.assign({}, forwardProps(props), { notes: notes }))),
+        miscFiles && miscFiles.length !== 0 && (React.createElement(MiscFilesComponent, Object.assign({}, forwardProps(props), { miscFiles: miscFiles })))));
+};

package/dist/components/productConfiguration/CfgDropdownOptionView.d.ts

@@ -1,5 +1,5 @@
-import React from "react";
-import { CfgOptionViewProps } from "./CfgFeatureView.js";
-export declare const CfgDropdownOptionView: React.FC<CfgOptionViewProps>;
-export declare const CfgDropdownOptionViewMemo: React.NamedExoticComponent<CfgOptionViewProps>;
+import React from "react";
+import { CfgOptionViewProps } from "./CfgFeatureView.js";
+export declare const CfgDropdownOptionView: React.FC<CfgOptionViewProps>;
+export declare const CfgDropdownOptionViewMemo: React.NamedExoticComponent<CfgOptionViewProps>;
 //# sourceMappingURL=CfgDropdownOptionView.d.ts.map

package/dist/components/productConfiguration/CfgDropdownOptionView.js

@@ -1,23 +1,23 @@
-import React, { useContext } from "react";
-import { ErrorContext } from "../ErrorContext.js";
-import { CfgOptionCommonView } from "./CfgOptionCommonView.js";
-export const CfgDropdownOptionView = (props) => {
-    var _a;
-    const { option } = props;
-    const { selected } = option;
-    const setError = useContext(ErrorContext);
-    const onClick = () => {
-        // As a convenience for when wanting to re-select something already
-        // selected to use the propagation side effects we have added this
-        // which will trigger a setSelected even though this is strictly not
-        // a change.
-        if (selected) {
-            option.setSelected(true).catch((e) => {
-                setError(e);
-                throw e;
-            });
-        }
-    };
-    return (React.createElement(CfgOptionCommonView, Object.assign({}, props, { className: `cfgFeatureItem cfgMb1 ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, labelClassName: selected ? "cfgFeatureItemOption--checked" : "", onClick: onClick })));
-};
-export const CfgDropdownOptionViewMemo = React.memo(CfgDropdownOptionView);
+import React, { useContext } from "react";
+import { ErrorContext } from "../ErrorContext.js";
+import { CfgOptionCommonView } from "./CfgOptionCommonView.js";
+export const CfgDropdownOptionView = (props) => {
+    var _a;
+    const { option } = props;
+    const { selected } = option;
+    const setError = useContext(ErrorContext);
+    const onClick = () => {
+        // As a convenience for when wanting to re-select something already
+        // selected to use the propagation side effects we have added this
+        // which will trigger a setSelected even though this is strictly not
+        // a change.
+        if (selected) {
+            option.setSelected(true).catch((e) => {
+                setError(e);
+                throw e;
+            });
+        }
+    };
+    return (React.createElement(CfgOptionCommonView, Object.assign({}, props, { className: `cfgFeatureItem cfgMb1 ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, labelClassName: selected ? "cfgFeatureItemOption--checked" : "", onClick: onClick })));
+};
+export const CfgDropdownOptionViewMemo = React.memo(CfgDropdownOptionView);

package/dist/components/productConfiguration/CfgDropdownView.d.ts

@@ -1,5 +1,5 @@
-import React from "react";
-import { CfgFeatureViewProps } from "./CfgFeatureView.js";
-export declare const CfgDropdownView: React.FC<CfgFeatureViewProps>;
-export declare const CfgDropdownViewMemo: React.NamedExoticComponent<CfgFeatureViewProps>;
+import React from "react";
+import { CfgFeatureViewProps } from "./CfgFeatureView.js";
+export declare const CfgDropdownView: React.FC<CfgFeatureViewProps>;
+export declare const CfgDropdownViewMemo: React.NamedExoticComponent<CfgFeatureViewProps>;
 //# sourceMappingURL=CfgDropdownView.d.ts.map

package/dist/components/productConfiguration/CfgDropdownView.js

@@ -1,23 +1,23 @@
-import { SelectionType } from "@configura/web-api";
-import React, { useState } from "react";
-import { ExpandableHeadingRow } from "../ExpandableHeadingRow.js";
-import { CfgConfigurationCommonView } from "./CfgConfigurationCommonView.js";
-import { forwardProps } from "./CfgFeatureView.js";
-export const CfgDropdownView = (props) => {
-    var _a;
-    const { feature, optionSelectOneComponent: OptionComponent, startOpen } = props;
-    if (feature.selectionType !== SelectionType.SelectOne) {
-        throw Error(`Unsupported selection type expected: ${SelectionType.SelectOne}, got: ${feature.selectionType}`);
-    }
-    const { description, preview, options, code, notes } = feature;
-    const [open, setOpen] = useState(startOpen === true);
-    return (React.createElement("li", { className: `cfgFeatureItem ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, style: props.style },
-        React.createElement(ExpandableHeadingRow, { heading: description || code, open: open, onClick: () => setOpen((prev) => !prev) }, preview && (React.createElement("div", { className: "cfgThumbnailPlaceholder" },
-            React.createElement("img", { alt: `Preview for ${description}`, className: "cfgThumbnailImage", src: preview })))),
-        (options || notes.length !== 0) && (React.createElement("div", { className: "cfgFeatureItem__subTree" },
-            open && (React.createElement(React.Fragment, null,
-                React.createElement(CfgConfigurationCommonView, Object.assign({}, forwardProps(props), { notes: notes })),
-                React.createElement("ul", { className: `cfgOptionTree cfgOptionTree--subLevel  ${preview ? "cfgOptionTree--compThumb" : ""}` }, options.map((option) => (React.createElement(OptionComponent, Object.assign({}, forwardProps(props), { key: option.key, option: option }))))))),
-            React.createElement("hr", { className: "cfgFeatureItem__hr cfgHr" })))));
-};
-export const CfgDropdownViewMemo = React.memo(CfgDropdownView);
+import { SelectionType } from "@configura/web-api";
+import React, { useState } from "react";
+import { ExpandableHeadingRow } from "../ExpandableHeadingRow.js";
+import { CfgConfigurationCommonView } from "./CfgConfigurationCommonView.js";
+import { forwardProps } from "./CfgFeatureView.js";
+export const CfgDropdownView = (props) => {
+    var _a;
+    const { feature, optionSelectOneComponent: OptionComponent, startOpen } = props;
+    if (feature.selectionType !== SelectionType.SelectOne) {
+        throw Error(`Unsupported selection type expected: ${SelectionType.SelectOne}, got: ${feature.selectionType}`);
+    }
+    const { description, preview, options, code, notes } = feature;
+    const [open, setOpen] = useState(startOpen === true);
+    return (React.createElement("li", { className: `cfgFeatureItem ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, style: props.style },
+        React.createElement(ExpandableHeadingRow, { heading: description || code, open: open, onClick: () => setOpen((prev) => !prev) }, preview && (React.createElement("div", { className: "cfgThumbnailPlaceholder" },
+            React.createElement("img", { alt: `Preview for ${description}`, className: "cfgThumbnailImage", src: preview })))),
+        (options || notes.length !== 0) && (React.createElement("div", { className: "cfgFeatureItem__subTree" },
+            open && (React.createElement(React.Fragment, null,
+                React.createElement(CfgConfigurationCommonView, Object.assign({}, forwardProps(props), { notes: notes })),
+                React.createElement("ul", { className: `cfgOptionTree cfgOptionTree--subLevel  ${preview ? "cfgOptionTree--compThumb" : ""}` }, options.map((option) => (React.createElement(OptionComponent, Object.assign({}, forwardProps(props), { key: option.key, option: option }))))))),
+            React.createElement("hr", { className: "cfgFeatureItem__hr cfgHr" })))));
+};
+export const CfgDropdownViewMemo = React.memo(CfgDropdownView);