@configura/web-ui 2.0.0-alpha.9 → 2.0.0

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

@@ -1,32 +1,73 @@
-import { CfgFeature, CfgOption, CfgProduct } from "@configura/web-api";
-import React from "react";
-import { CssProps } from "../../utilities.js";
-import { PassthroughProps } from "./CfgProductConfigurationView.js";
-export declare type CfgFeatureViewProps = CfgProductConfigurationComponentAndPassthroughProps & {
-    feature: CfgFeature;
-};
-export declare type CfgOptionViewProps = CfgProductConfigurationComponentAndPassthroughProps & {
-    option: CfgOption;
-};
-export declare type CfgAdditionalProductViewProps = CfgProductConfigurationComponentAndPassthroughProps & {
-    product: CfgProduct;
-    permanentlyExpandedLevels: number;
-};
-export declare type CfgProductConfigurationComponent = {
-    additionalProductComponent: React.ComponentType<CfgAdditionalProductViewProps>;
-    featureFlattenComponent: React.ComponentType<CfgFeatureViewProps>;
-    featureGroupComponent: React.ComponentType<CfgFeatureViewProps>;
-    featureSelectManyComponent: React.ComponentType<CfgFeatureViewProps>;
-    optionSelectManyComponent: React.ComponentType<CfgOptionViewProps>;
-    featureSelectOneComponent: React.ComponentType<CfgFeatureViewProps>;
-    optionSelectOneComponent: React.ComponentType<CfgOptionViewProps>;
-};
-export declare const completeWithDefaultProductConfigurationComponents: <T>(incomplete: T & Partial<CfgProductConfigurationComponent>) => T & CfgProductConfigurationComponent;
-export declare const useCompleteWithDefaultProductConfigurationComponents: (incomplete: Partial<CfgProductConfigurationComponent>) => CfgProductConfigurationComponent;
-export declare type CfgProductConfigurationComponentAndPassthroughProps = PassthroughProps & CfgProductConfigurationComponent;
-export declare const forwardProps: (props: CfgProductConfigurationComponentAndPassthroughProps) => CfgProductConfigurationComponentAndPassthroughProps;
-export declare const CfgFeatureView: React.FC<CfgFeatureViewProps & CssProps>;
-export declare const CfgFeatureViewMemo: React.NamedExoticComponent<PassthroughProps & CfgProductConfigurationComponent & {
-    feature: CfgFeature;
-} & CssProps>;
+import { CfgFeature, CfgOption, CfgProduct, DtoMiscFile, DtoNote } from "@configura/web-api";
+import React from "react";
+import { CssProps } from "../../utilities.js";
+import { PassthroughProps } from "./CfgProductConfigurationView.js";
+export declare type CfgFeatureViewProps = CfgProductConfigurationComponentAndPassthroughProps & {
+    feature: CfgFeature;
+};
+export declare type CfgOptionViewProps = CfgProductConfigurationComponentAndPassthroughProps & {
+    option: CfgOption;
+};
+export declare type CfgAdditionalProductViewProps = CfgProductConfigurationComponentAndPassthroughProps & {
+    product: CfgProduct;
+    permanentlyExpandedLevels: number;
+};
+export declare type CfgNoteViewProps = CssProps & {
+    note: DtoNote;
+};
+declare type CfgNoteComponent = {
+    noteComponent: React.ComponentType<CfgNoteViewProps>;
+};
+export declare type CfgNotesViewProps = CssProps & CfgNoteComponent & {
+    notes: DtoNote[];
+};
+export declare type CfgMiscFileViewProps = CssProps & {
+    miscFile: DtoMiscFile;
+};
+declare type CfgMiscFileComponent = {
+    miscFileComponent: React.ComponentType<CfgMiscFileViewProps>;
+};
+export declare type CfgMiscFilesViewProps = CssProps & CfgMiscFileComponent & {
+    miscFiles: DtoMiscFile[];
+};
+export declare type CfgProductConfigurationComponent = {
+    additionalProductComponent: React.ComponentType<CfgAdditionalProductViewProps>;
+    featureFlattenComponent: React.ComponentType<CfgFeatureViewProps>;
+    featureGroupComponent: React.ComponentType<CfgFeatureViewProps>;
+    featureSelectManyComponent: React.ComponentType<CfgFeatureViewProps>;
+    optionSelectManyComponent: React.ComponentType<CfgOptionViewProps>;
+    featureSelectOneComponent: React.ComponentType<CfgFeatureViewProps>;
+    optionSelectOneComponent: React.ComponentType<CfgOptionViewProps>;
+    notesComponent: React.ComponentType<CfgNotesViewProps>;
+    miscFilesComponent: React.ComponentType<CfgMiscFilesViewProps>;
+} & CfgMiscFileComponent & CfgNoteComponent;
+export declare const completeWithDefaultProductConfigurationComponents: <T>(incomplete: T & Partial<CfgProductConfigurationComponent>) => T & {
+    additionalProductComponent: React.ComponentType<CfgAdditionalProductViewProps>;
+    featureFlattenComponent: React.ComponentType<CfgFeatureViewProps>;
+    featureGroupComponent: React.ComponentType<CfgFeatureViewProps>;
+    featureSelectManyComponent: React.ComponentType<CfgFeatureViewProps>;
+    optionSelectManyComponent: React.ComponentType<CfgOptionViewProps>;
+    featureSelectOneComponent: React.ComponentType<CfgFeatureViewProps>;
+    optionSelectOneComponent: React.ComponentType<CfgOptionViewProps>;
+    notesComponent: React.ComponentType<CfgNotesViewProps>;
+    miscFilesComponent: React.ComponentType<CfgMiscFilesViewProps>;
+} & CfgMiscFileComponent & CfgNoteComponent;
+export declare const useCompleteWithDefaultProductConfigurationComponents: (incomplete: Partial<CfgProductConfigurationComponent>) => CfgProductConfigurationComponent;
+export declare type CfgProductConfigurationComponentAndPassthroughProps = PassthroughProps & CssProps & CfgProductConfigurationComponent;
+export declare const forwardProps: (props: CfgProductConfigurationComponentAndPassthroughProps) => CfgProductConfigurationComponentAndPassthroughProps;
+export declare const CfgFeatureView: React.FC<CfgFeatureViewProps & CssProps>;
+export declare const CfgFeatureViewMemo: React.NamedExoticComponent<PassthroughProps & CssProps & {
+    additionalProductComponent: React.ComponentType<CfgAdditionalProductViewProps>;
+    featureFlattenComponent: React.ComponentType<CfgFeatureViewProps>;
+    featureGroupComponent: React.ComponentType<CfgFeatureViewProps>;
+    featureSelectManyComponent: React.ComponentType<CfgFeatureViewProps>;
+    optionSelectManyComponent: React.ComponentType<CfgOptionViewProps>;
+    featureSelectOneComponent: React.ComponentType<CfgFeatureViewProps>;
+    optionSelectOneComponent: React.ComponentType<CfgOptionViewProps>;
+    notesComponent: React.ComponentType<CfgNotesViewProps>;
+    miscFilesComponent: React.ComponentType<CfgMiscFilesViewProps>;
+} & CfgMiscFileComponent & CfgNoteComponent & {
+    feature: CfgFeature;
+}>;
+export {};
 //# sourceMappingURL=CfgFeatureView.d.ts.map

package/dist/components/productConfiguration/CfgFeatureView.js

@@ -1,60 +1,76 @@
-import { SelectionType } from "@configura/web-api";
-import React, { useMemo } from "react";
-import { CfgAdditionalProductView } from "./CfgAdditionalProductView.js";
-import { CfgCheckboxesViewMemo } from "./CfgCheckboxesView.js";
-import { CfgCheckboxViewMemo } from "./CfgCheckboxView.js";
-import { CfgDropdownOptionViewMemo } from "./CfgDropdownOptionView.js";
-import { CfgDropdownViewMemo } from "./CfgDropdownView.js";
-import { CfgGroupViewMemo } from "./CfgGroupView.js";
-export const completeWithDefaultProductConfigurationComponents = (incomplete) => {
-    var _a, _b, _c, _d, _e, _f, _g;
-    return (Object.assign(Object.assign({}, incomplete), { additionalProductComponent: (_a = incomplete.additionalProductComponent) !== null && _a !== void 0 ? _a : CfgAdditionalProductView, featureFlattenComponent: (_b = incomplete.featureFlattenComponent) !== null && _b !== void 0 ? _b : CfgGroupViewMemo, featureGroupComponent: (_c = incomplete.featureGroupComponent) !== null && _c !== void 0 ? _c : CfgGroupViewMemo, featureSelectManyComponent: (_d = incomplete.featureSelectManyComponent) !== null && _d !== void 0 ? _d : CfgCheckboxesViewMemo, optionSelectManyComponent: (_e = incomplete.optionSelectManyComponent) !== null && _e !== void 0 ? _e : CfgCheckboxViewMemo, featureSelectOneComponent: (_f = incomplete.featureSelectOneComponent) !== null && _f !== void 0 ? _f : CfgDropdownViewMemo, optionSelectOneComponent: (_g = incomplete.optionSelectOneComponent) !== null && _g !== void 0 ? _g : CfgDropdownOptionViewMemo }));
-};
-export const useCompleteWithDefaultProductConfigurationComponents = (incomplete) => {
-    const { additionalProductComponent, featureFlattenComponent, featureGroupComponent, featureSelectManyComponent, featureSelectOneComponent, optionSelectManyComponent, optionSelectOneComponent, } = incomplete;
-    return useMemo(() => completeWithDefaultProductConfigurationComponents({
-        additionalProductComponent,
-        featureFlattenComponent,
-        featureGroupComponent,
-        featureSelectManyComponent,
-        featureSelectOneComponent,
-        optionSelectManyComponent,
-        optionSelectOneComponent,
-    }), [
-        additionalProductComponent,
-        featureFlattenComponent,
-        featureGroupComponent,
-        featureSelectManyComponent,
-        featureSelectOneComponent,
-        optionSelectManyComponent,
-        optionSelectOneComponent,
-    ]);
-};
-export const forwardProps = (props) => ({
-    upchargeDisplayMode: props.upchargeDisplayMode,
-    startOpen: props.startOpen,
-    additionalProductComponent: props.additionalProductComponent,
-    featureFlattenComponent: props.featureFlattenComponent,
-    featureGroupComponent: props.featureGroupComponent,
-    featureSelectManyComponent: props.featureSelectManyComponent,
-    optionSelectManyComponent: props.optionSelectManyComponent,
-    featureSelectOneComponent: props.featureSelectOneComponent,
-    optionSelectOneComponent: props.optionSelectOneComponent,
-});
-export const CfgFeatureView = (props) => {
-    const { feature, featureFlattenComponent: FlattenComponent, featureGroupComponent: GroupComponent, featureSelectManyComponent: SelectManyComponent, featureSelectOneComponent: SelectOneComponent, } = props;
-    if (!feature.visible) {
-        return React.createElement(FlattenComponent, Object.assign({}, props));
-    }
-    switch (feature.selectionType) {
-        case SelectionType.Group:
-            return React.createElement(GroupComponent, Object.assign({}, props));
-        case SelectionType.SelectMany:
-            return React.createElement(SelectManyComponent, Object.assign({}, props));
-        case SelectionType.SelectOne:
-            return React.createElement(SelectOneComponent, Object.assign({}, props));
-        default:
-            throw Error("Unsupported viewType");
-    }
-};
-export const CfgFeatureViewMemo = React.memo(CfgFeatureView);
+import { SelectionType, } from "@configura/web-api";
+import React, { useMemo } from "react";
+import { CfgAdditionalProductView } from "./CfgAdditionalProductView.js";
+import { CfgCheckboxesViewMemo } from "./CfgCheckboxesView.js";
+import { CfgCheckboxViewMemo } from "./CfgCheckboxView.js";
+import { CfgDropdownOptionViewMemo } from "./CfgDropdownOptionView.js";
+import { CfgDropdownViewMemo } from "./CfgDropdownView.js";
+import { CfgGroupViewMemo } from "./CfgGroupView.js";
+import { CfgMiscFile } from "./CfgMiscFile.js";
+import { CfgMiscFiles } from "./CfgMiscFiles.js";
+import { CfgNote } from "./CfgNote.js";
+import { CfgNotes } from "./CfgNotes.js";
+export const completeWithDefaultProductConfigurationComponents = (incomplete) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    return (Object.assign(Object.assign({}, incomplete), { additionalProductComponent: (_a = incomplete.additionalProductComponent) !== null && _a !== void 0 ? _a : CfgAdditionalProductView, featureFlattenComponent: (_b = incomplete.featureFlattenComponent) !== null && _b !== void 0 ? _b : CfgGroupViewMemo, featureGroupComponent: (_c = incomplete.featureGroupComponent) !== null && _c !== void 0 ? _c : CfgGroupViewMemo, featureSelectManyComponent: (_d = incomplete.featureSelectManyComponent) !== null && _d !== void 0 ? _d : CfgCheckboxesViewMemo, optionSelectManyComponent: (_e = incomplete.optionSelectManyComponent) !== null && _e !== void 0 ? _e : CfgCheckboxViewMemo, featureSelectOneComponent: (_f = incomplete.featureSelectOneComponent) !== null && _f !== void 0 ? _f : CfgDropdownViewMemo, optionSelectOneComponent: (_g = incomplete.optionSelectOneComponent) !== null && _g !== void 0 ? _g : CfgDropdownOptionViewMemo, noteComponent: (_h = incomplete.noteComponent) !== null && _h !== void 0 ? _h : CfgNote, notesComponent: (_j = incomplete.notesComponent) !== null && _j !== void 0 ? _j : CfgNotes, miscFileComponent: (_k = incomplete.miscFileComponent) !== null && _k !== void 0 ? _k : CfgMiscFile, miscFilesComponent: (_l = incomplete.miscFilesComponent) !== null && _l !== void 0 ? _l : CfgMiscFiles }));
+};
+export const useCompleteWithDefaultProductConfigurationComponents = (incomplete) => {
+    const { additionalProductComponent, featureFlattenComponent, featureGroupComponent, featureSelectManyComponent, featureSelectOneComponent, optionSelectManyComponent, optionSelectOneComponent, noteComponent, notesComponent, miscFileComponent, miscFilesComponent, } = incomplete;
+    return useMemo(() => completeWithDefaultProductConfigurationComponents({
+        additionalProductComponent,
+        featureFlattenComponent,
+        featureGroupComponent,
+        featureSelectManyComponent,
+        featureSelectOneComponent,
+        optionSelectManyComponent,
+        optionSelectOneComponent,
+        noteComponent,
+        notesComponent,
+        miscFileComponent,
+        miscFilesComponent,
+    }), [
+        additionalProductComponent,
+        featureFlattenComponent,
+        featureGroupComponent,
+        featureSelectManyComponent,
+        featureSelectOneComponent,
+        optionSelectManyComponent,
+        optionSelectOneComponent,
+        noteComponent,
+        notesComponent,
+        miscFileComponent,
+        miscFilesComponent,
+    ]);
+};
+export const forwardProps = (props) => ({
+    upchargeDisplayMode: props.upchargeDisplayMode,
+    startOpen: props.startOpen,
+    additionalProductComponent: props.additionalProductComponent,
+    featureFlattenComponent: props.featureFlattenComponent,
+    featureGroupComponent: props.featureGroupComponent,
+    featureSelectManyComponent: props.featureSelectManyComponent,
+    optionSelectManyComponent: props.optionSelectManyComponent,
+    featureSelectOneComponent: props.featureSelectOneComponent,
+    optionSelectOneComponent: props.optionSelectOneComponent,
+    noteComponent: props.noteComponent,
+    notesComponent: props.notesComponent,
+    miscFileComponent: props.miscFileComponent,
+    miscFilesComponent: props.miscFilesComponent,
+});
+export const CfgFeatureView = (props) => {
+    const { feature, featureFlattenComponent: FlattenComponent, featureGroupComponent: GroupComponent, featureSelectManyComponent: SelectManyComponent, featureSelectOneComponent: SelectOneComponent, } = props;
+    if (!feature.visible) {
+        return React.createElement(FlattenComponent, Object.assign({}, props));
+    }
+    switch (feature.selectionType) {
+        case SelectionType.Group:
+            return React.createElement(GroupComponent, Object.assign({}, props));
+        case SelectionType.SelectMany:
+            return React.createElement(SelectManyComponent, Object.assign({}, props));
+        case SelectionType.SelectOne:
+            return React.createElement(SelectOneComponent, Object.assign({}, props));
+        default:
+            throw Error("Unsupported viewType");
+    }
+};
+export const CfgFeatureViewMemo = React.memo(CfgFeatureView);

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

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

package/dist/components/productConfiguration/CfgGroupView.js

@@ -1,7 +1,7 @@
-import React from "react";
-import { CfgFeatureViewMemo, forwardProps } from "./CfgFeatureView.js";
-export const CfgGroupView = (props) => {
-    const { feature } = props;
-    return (React.createElement(React.Fragment, null, feature.selectedOptions.map((o) => o.features.map((f) => (React.createElement(CfgFeatureViewMemo, Object.assign({ key: f.key, feature: f }, forwardProps(props))))))));
-};
-export const CfgGroupViewMemo = React.memo(CfgGroupView);
+import React from "react";
+import { CfgFeatureViewMemo, forwardProps } from "./CfgFeatureView.js";
+export const CfgGroupView = (props) => {
+    const { feature } = props;
+    return (React.createElement(React.Fragment, null, feature.selectedOptions.map((o) => o.features.map((f) => (React.createElement(CfgFeatureViewMemo, Object.assign({ key: f.key, feature: f }, forwardProps(props))))))));
+};
+export const CfgGroupViewMemo = React.memo(CfgGroupView);

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

@@ -0,0 +1,5 @@
+import React from "react";
+import { CssProps } from "../../utilities";
+import { CfgMiscFileViewProps } from "./CfgFeatureView.js";
+export declare const CfgMiscFile: React.FC<CfgMiscFileViewProps & CssProps>;
+//# sourceMappingURL=CfgMiscFile.d.ts.map

package/dist/components/productConfiguration/CfgMiscFile.js

@@ -0,0 +1,9 @@
+import React from "react";
+export const CfgMiscFile = (props) => {
+    const { url, preview } = props.miscFile;
+    const split = url.lastIndexOf("/");
+    const name = split ? decodeURI(url.substring(split + 1)) : url;
+    return (React.createElement("li", { className: `cfgMiscFiles__item ${props.className || ""}`, style: props.style },
+        preview !== undefined && (React.createElement("img", { className: "cfgMiscFiles__thumbnail cfgThumbnailImage", src: preview, alt: "Preview for file URL." })),
+        React.createElement("a", { href: url, className: "cfgMiscFiles__link cfgTextOverflow", target: "_blank", rel: "noopener noreferrer" }, name)));
+};

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

@@ -0,0 +1,5 @@
+import React from "react";
+import { CssProps } from "../../utilities";
+import { CfgMiscFilesViewProps } from "./CfgFeatureView.js";
+export declare const CfgMiscFiles: React.FC<CfgMiscFilesViewProps & CssProps>;
+//# sourceMappingURL=CfgMiscFiles.d.ts.map

package/dist/components/productConfiguration/CfgMiscFiles.js

@@ -0,0 +1,5 @@
+import React from "react";
+export const CfgMiscFiles = (props) => {
+    const { miscFileComponent: MiscFileComponent } = props;
+    return (React.createElement("ul", { className: `cfgMiscFiles ${props.className || ""}`, style: props.style }, props.miscFiles.map((f) => (React.createElement(MiscFileComponent, { key: f.key + f.url + f.preview, miscFile: f })))));
+};

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

@@ -0,0 +1,5 @@
+import React from "react";
+import { CssProps } from "../../utilities";
+import { CfgNoteViewProps } from "./CfgFeatureView.js";
+export declare const CfgNote: React.FC<CfgNoteViewProps & CssProps>;
+//# sourceMappingURL=CfgNote.d.ts.map

package/dist/components/productConfiguration/CfgNote.js

@@ -0,0 +1,15 @@
+import React, { useState } from "react";
+import { ExpandableHeadingRow } from "../ExpandableHeadingRow.js";
+export const CfgNote = (props) => {
+    const { code, body, key, title } = props.note;
+    const [open, setOpen] = useState(false);
+    const hasNoTitle = !title;
+    const hasNoBody = !body;
+    if (hasNoBody && hasNoTitle) {
+        console.info(`Note has neither title nor body and will not be visible. (${code})`);
+        return null;
+    }
+    return (React.createElement("li", { className: "cfgNotes__item" },
+        React.createElement(ExpandableHeadingRow, { heading: title || key || code, open: open, onClick: () => setOpen((prev) => !prev), expandable: !hasNoBody, className: "cfgNotes__title" }),
+        open && React.createElement("div", { className: "cfgNotes__body" }, body)));
+};

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

@@ -0,0 +1,5 @@
+import React from "react";
+import { CssProps } from "../../utilities.js";
+import { CfgNotesViewProps } from "./CfgFeatureView.js";
+export declare const CfgNotes: React.FC<CfgNotesViewProps & CssProps>;
+//# sourceMappingURL=CfgNotes.d.ts.map

package/dist/components/productConfiguration/CfgNotes.js

@@ -0,0 +1,5 @@
+import React from "react";
+export const CfgNotes = (props) => {
+    const { noteComponent: NoteComponent } = props;
+    return (React.createElement("ul", { className: "cfgNotes", style: props.style }, props.notes.map((n) => (React.createElement(NoteComponent, { note: n, key: n.code })))));
+};

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

@@ -0,0 +1,7 @@
+import React from "react";
+import { CfgOptionViewProps } from "./CfgFeatureView.js";
+export declare const CfgOptionCommonView: React.FC<CfgOptionViewProps & {
+    labelClassName?: string;
+    onClick?: () => void;
+}>;
+//# sourceMappingURL=CfgOptionCommonView.d.ts.map

package/dist/components/productConfiguration/CfgOptionCommonView.js

@@ -0,0 +1,48 @@
+import { SelectionType } from "@configura/web-api";
+import React, { useContext } from "react";
+import { useUuid } from "../../useUniqueId.js";
+import { ErrorContext } from "../ErrorContext.js";
+import { Checkmark } from "../icons/Checkmark.js";
+import { CfgConfigurationCommonView } from "./CfgConfigurationCommonView.js";
+import { CfgFeatureView, forwardProps } from "./CfgFeatureView.js";
+import { CfgOptionNumericView } from "./CfgOptionNumericView.js";
+import { CfgOptionPriceView } from "./CfgOptionPriceView.js";
+export const CfgOptionCommonView = (props) => {
+    const { option, upchargeDisplayMode, onClick, labelClassName } = props;
+    const { features, thumbnail, description, selected, code, selectedChangeInProgress, miscFiles, notes, } = option;
+    const setError = useContext(ErrorContext);
+    const uniqueId = useUuid();
+    const selectionType = option.parent.selectionType;
+    let inputType;
+    let typeClassNameFragment;
+    switch (selectionType) {
+        case SelectionType.SelectMany:
+            inputType = "checkbox";
+            typeClassNameFragment = "Optional";
+            break;
+        case SelectionType.SelectOne:
+            inputType = "radio";
+            typeClassNameFragment = "Option";
+            break;
+        default:
+            throw new Error(`Unsupported selectionType ${selectionType}`);
+    }
+    return (React.createElement("li", { className: props.className, style: props.style },
+        React.createElement("label", { className: `cfgFeatureItem${typeClassNameFragment} ${labelClassName !== null && labelClassName !== void 0 ? labelClassName : ""}`, htmlFor: uniqueId },
+            React.createElement("input", { checked: selected, className: "cfgFeatureItem__hiddenInput", id: uniqueId, name: uniqueId, onChange: () => {
+                    option.setSelected(!selected).catch((e) => {
+                        setError(e);
+                        throw e;
+                    });
+                }, onClick: onClick, type: inputType }),
+            React.createElement("div", { className: `cfgFeatureItem__${inputType}` }, selected === !selectedChangeInProgress && React.createElement(Checkmark, null)),
+            thumbnail && (React.createElement("img", { alt: `Thumbnail for ${description}`, className: "cfgThumbnailImage cfgMl1", src: thumbnail })),
+            React.createElement("div", { className: `cfgFeatureItem${typeClassNameFragment}__titleWrapper` },
+                React.createElement("div", { className: `cfgFeatureItem${typeClassNameFragment}__title` },
+                    description || code,
+                    React.createElement(CfgOptionPriceView, { option: option, upchargeDisplayMode: upchargeDisplayMode })))),
+        selected && (React.createElement(React.Fragment, null,
+            React.createElement(CfgOptionNumericView, { option: option }),
+            React.createElement(CfgConfigurationCommonView, Object.assign({}, forwardProps(props), { notes: notes, miscFiles: miscFiles })),
+            features.length !== 0 && (React.createElement("ul", { className: "cfgOptionTree cfgOptionTree--subLevel cfgOptionTree--indent" }, features.map((f) => (React.createElement(CfgFeatureView, Object.assign({}, forwardProps(props), { feature: f, key: f.key }))))))))));
+};

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

@@ -1,30 +1,30 @@
-import { CfgOption, NumericValueDiscrete, NumericValueRangeDefinition } from "@configura/web-api";
-import { LengthUnit } from "@configura/web-utilities";
-import React from "react";
-import { CssProps } from "../../utilities.js";
-declare type Props = {
-    option: CfgOption;
-} & CssProps;
-export declare const CfgOptionNumericView: React.FC<Props>;
-/**
- * Displays GUI for selecting in one "range". Please note that the range
- * parameter can also be a discrete value.
- */
-export declare const NumericValueView: React.FC<{
-    currentValue: number;
-    unit: LengthUnit;
-    range: NumericValueRangeDefinition | NumericValueDiscrete;
-    updateValue: (val: number, commit: boolean) => void;
-    hasNoSiblings: boolean;
-}>;
-export declare const RangeView: React.FC<{
-    currentValue: number;
-    unit: LengthUnit;
-    range: NumericValueRangeDefinition;
-    inputValue: number;
-    onChange: (val: number, instantUpdate: boolean) => void;
-    onCommit: () => void;
-    showRangeError: boolean;
-} & CssProps>;
-export {};
+import { CfgOption, NumericValueDiscrete, NumericValueRangeDefinition } from "@configura/web-api";
+import { LengthUnit } from "@configura/web-utilities";
+import React from "react";
+import { CssProps } from "../../utilities.js";
+declare type Props = {
+    option: CfgOption;
+} & CssProps;
+export declare const CfgOptionNumericView: React.FC<Props>;
+/**
+ * Displays GUI for selecting in one "range". Please note that the range
+ * parameter can also be a discrete value.
+ */
+export declare const NumericValueView: React.FC<{
+    currentValue: number;
+    unit: LengthUnit;
+    range: NumericValueRangeDefinition | NumericValueDiscrete;
+    updateValue: (val: number, commit: boolean) => void;
+    hasNoSiblings: boolean;
+}>;
+export declare const RangeView: React.FC<{
+    currentValue: number;
+    unit: LengthUnit;
+    range: NumericValueRangeDefinition;
+    inputValue: number;
+    onChange: (val: number, instantUpdate: boolean) => void;
+    onCommit: () => void;
+    showRangeError: boolean;
+} & CssProps>;
+export {};
 //# sourceMappingURL=CfgOptionNumericView.d.ts.map