@configura/web-ui 1.4.0-alpha.4 → 1.5.0

package/dist/components/CurrencyPrice.d.ts

@@ -1,10 +1,10 @@
-import React from "react";
-interface Props {
-    currency: string;
-    language?: string;
-    price: number;
-    fractionDigits: number;
-}
-export declare const CurrencyPrice: React.FC<Props>;
-export {};
+import React from "react";
+interface Props {
+    currency: string;
+    language?: string;
+    price: number;
+    fractionDigits: number;
+}
+export declare const CurrencyPrice: React.FC<Props>;
+export {};
 //# sourceMappingURL=CurrencyPrice.d.ts.map

package/dist/components/CurrencyPrice.js

@@ -1,7 +1,7 @@
-import { formatPrice } from "@configura/web-utilities";
-import React from "react";
-export const CurrencyPrice = (props) => {
-    const { price, fractionDigits, currency, language } = props;
-    const lang = language || navigator.language;
-    return React.createElement(React.Fragment, null, formatPrice(price, fractionDigits, lang, currency));
-};
+import { formatPrice } from "@configura/web-utilities";
+import React from "react";
+export const CurrencyPrice = (props) => {
+    const { price, fractionDigits, currency, language } = props;
+    const lang = language || navigator.language;
+    return React.createElement(React.Fragment, null, formatPrice(price, fractionDigits, lang, currency));
+};

package/dist/components/ExpandableHeadingRow.d.ts

@@ -1,16 +1,16 @@
-import React from "react";
-import { CssProps } from "../utilities.js";
-export declare enum ExpandableHeadingRowSymbol {
-    Chevron = 0,
-    Checkbox = 1
-}
-declare type Props = {
-    heading: string;
-    open: boolean;
-    onClick: () => void;
-    expandable?: boolean;
-    symbol?: ExpandableHeadingRowSymbol;
-};
-export declare const ExpandableHeadingRow: React.FC<Props & CssProps>;
-export {};
+import React from "react";
+import { CssProps } from "../utilities.js";
+export declare enum ExpandableHeadingRowSymbol {
+    Chevron = 0,
+    Checkbox = 1
+}
+declare type Props = {
+    heading: string;
+    open: boolean;
+    onClick: () => void;
+    expandable?: boolean;
+    symbol?: ExpandableHeadingRowSymbol;
+};
+export declare const ExpandableHeadingRow: React.FC<Props & CssProps>;
+export {};
 //# sourceMappingURL=ExpandableHeadingRow.d.ts.map

package/dist/components/ExpandableHeadingRow.js

@@ -1,21 +1,21 @@
-import React from "react";
-import { CheckmarkWithBorder } from "./icons/Checkmark.js";
-import { Chevron } from "./icons/Chevron.js";
-export var ExpandableHeadingRowSymbol;
-(function (ExpandableHeadingRowSymbol) {
-    ExpandableHeadingRowSymbol[ExpandableHeadingRowSymbol["Chevron"] = 0] = "Chevron";
-    ExpandableHeadingRowSymbol[ExpandableHeadingRowSymbol["Checkbox"] = 1] = "Checkbox";
-})(ExpandableHeadingRowSymbol || (ExpandableHeadingRowSymbol = {}));
-export const ExpandableHeadingRow = (props) => {
-    const { heading, open: active, onClick, children } = props;
-    const symbol = props.symbol === undefined ? ExpandableHeadingRowSymbol.Chevron : props.symbol;
-    if (props.expandable === false) {
-        return (React.createElement("div", { className: "cfgExpandableHeadingRow" },
-            children,
-            React.createElement("div", { className: "cfgExpandableHeadingRow__title cfgTextOverflow" }, heading)));
-    }
-    return (React.createElement("button", { className: `cfgExpandableHeadingRow cfgExpandableHeadingRow--expandable ${props.className || ""}`, style: props.style, onClick: onClick },
-        children,
-        React.createElement("div", { className: "cfgExpandableHeadingRow__title cfgTextOverflow" }, heading),
-        React.createElement("div", { className: "cfgExpandableHeadingRow__icon" }, symbol === ExpandableHeadingRowSymbol.Chevron ? (React.createElement(Chevron, { active: active })) : (React.createElement(CheckmarkWithBorder, { active: active })))));
-};
+import React from "react";
+import { CheckmarkWithBorder } from "./icons/Checkmark.js";
+import { Chevron } from "./icons/Chevron.js";
+export var ExpandableHeadingRowSymbol;
+(function (ExpandableHeadingRowSymbol) {
+    ExpandableHeadingRowSymbol[ExpandableHeadingRowSymbol["Chevron"] = 0] = "Chevron";
+    ExpandableHeadingRowSymbol[ExpandableHeadingRowSymbol["Checkbox"] = 1] = "Checkbox";
+})(ExpandableHeadingRowSymbol || (ExpandableHeadingRowSymbol = {}));
+export const ExpandableHeadingRow = (props) => {
+    const { heading, open: active, onClick, children } = props;
+    const symbol = props.symbol === undefined ? ExpandableHeadingRowSymbol.Chevron : props.symbol;
+    if (props.expandable === false) {
+        return (React.createElement("div", { className: "cfgExpandableHeadingRow" },
+            children,
+            React.createElement("div", { className: "cfgExpandableHeadingRow__title cfgTextOverflow" }, heading)));
+    }
+    return (React.createElement("button", { className: `cfgExpandableHeadingRow cfgExpandableHeadingRow--expandable ${props.className || ""}`, style: props.style, onClick: onClick },
+        children,
+        React.createElement("div", { className: "cfgExpandableHeadingRow__title cfgTextOverflow" }, heading),
+        React.createElement("div", { className: "cfgExpandableHeadingRow__icon" }, symbol === ExpandableHeadingRowSymbol.Chevron ? (React.createElement(Chevron, { active: active })) : (React.createElement(CheckmarkWithBorder, { active: active })))));
+};

package/dist/components/Loading.d.ts

@@ -1,14 +1,14 @@
-import React from "react";
-import { CssProps } from "../utilities";
-interface SpinnerProps {
-    small?: boolean;
-}
-interface OverlayProps {
-    clickThrough?: boolean;
-    fullWindow?: boolean;
-}
-export declare const Loading: React.FC<SpinnerProps & CssProps>;
-export declare const CenteredLoading: React.FC<CssProps>;
-export declare const OverlayLoading: React.FC<OverlayProps & CssProps>;
-export {};
+import React from "react";
+import { CssProps } from "../utilities";
+interface SpinnerProps {
+    small?: boolean;
+}
+interface OverlayProps {
+    clickThrough?: boolean;
+    fullWindow?: boolean;
+}
+export declare const Loading: React.FC<SpinnerProps & CssProps>;
+export declare const CenteredLoading: React.FC<CssProps>;
+export declare const OverlayLoading: React.FC<OverlayProps & CssProps>;
+export {};
 //# sourceMappingURL=Loading.d.ts.map

package/dist/components/Loading.js

@@ -1,20 +1,20 @@
-import React from "react";
-export const Loading = (props) => {
-    const { small } = props;
-    const smallClass = small ? "cfgLoading--small" : "";
-    return (React.createElement("div", { className: `cfgLoading ${smallClass} ${props.className || ""}`, style: props.style }));
-};
-const LoadingWithText = (props) => {
-    return (React.createElement("div", { className: `cfgLoadingWithText ${props.className || ""}`, style: props.style },
-        React.createElement(Loading, Object.assign({}, props)),
-        React.createElement("div", { className: "cfgLoadingWithText__text" }, "Loading")));
-};
-export const CenteredLoading = (props) => {
-    return (React.createElement("div", { className: `cfgCenteredLoading ${props.className || ""}`, style: props.style },
-        React.createElement(LoadingWithText, null)));
-};
-export const OverlayLoading = (props) => {
-    const { clickThrough, fullWindow } = props;
-    return (React.createElement("div", { className: `cfgOverlayLoading ${clickThrough ? "cfgOverlayLoading--clickThrough" : ""} ${fullWindow ? "cfgOverlayLoading--fullWindow" : ""} ${props.className || ""}`, style: props.style },
-        React.createElement(LoadingWithText, null)));
-};
+import React from "react";
+export const Loading = (props) => {
+    const { small } = props;
+    const smallClass = small ? "cfgLoading--small" : "";
+    return (React.createElement("div", { className: `cfgLoading ${smallClass} ${props.className || ""}`, style: props.style }));
+};
+const LoadingWithText = (props) => {
+    return (React.createElement("div", { className: `cfgLoadingWithText ${props.className || ""}`, style: props.style },
+        React.createElement(Loading, Object.assign({}, props)),
+        React.createElement("div", { className: "cfgLoadingWithText__text" }, "Loading")));
+};
+export const CenteredLoading = (props) => {
+    return (React.createElement("div", { className: `cfgCenteredLoading ${props.className || ""}`, style: props.style },
+        React.createElement(LoadingWithText, null)));
+};
+export const OverlayLoading = (props) => {
+    const { clickThrough, fullWindow } = props;
+    return (React.createElement("div", { className: `cfgOverlayLoading ${clickThrough ? "cfgOverlayLoading--clickThrough" : ""} ${fullWindow ? "cfgOverlayLoading--fullWindow" : ""} ${props.className || ""}`, style: props.style },
+        React.createElement(LoadingWithText, null)));
+};

package/dist/components/ProductInformation.d.ts

@@ -1,11 +1,14 @@
-import { CfgPrice } from "@configura/web-api";
-import { CssProps } from "../utilities.js";
-interface Props {
-    description: string | undefined;
-    lang: string | undefined;
-    styleNr: string | undefined;
-    price: CfgPrice | undefined;
-}
-export declare function ProductInformation(props: Props & CssProps): JSX.Element;
-export {};
+import { CfgPrice } from "@configura/web-api";
+import React, { ReactElement } from "react";
+import { CssProps } from "../utilities.js";
+interface Props {
+    description: string | undefined;
+    lang: string | undefined;
+    styleNr: string | undefined;
+    price: CfgPrice | undefined;
+    leftContent?: ReactElement;
+    rightContent?: ReactElement;
+}
+export declare const ProductInformation: React.FC<Props & CssProps>;
+export {};
 //# sourceMappingURL=ProductInformation.d.ts.map

package/dist/components/ProductInformation.js

@@ -1,23 +1,14 @@
-import React from "react";
-import { CurrencyPrice } from "./CurrencyPrice.js";
-export function ProductInformation(props) {
-    const { styleNr, price, description, lang } = props;
-    return (React.createElement("div", { className: `cfgProductInfo ${props.className || ""}`, style: props.style },
-        React.createElement("div", { className: "cfgProductInfo__left" },
-            React.createElement("h2", { className: "cfgProductInfo__name cfgTextOverflow" }, description),
-            React.createElement("div", { className: "cfgProductInfo__number cfgTextOverflow" }, styleNr)),
-        React.createElement(ProductInformationPrice, { price: price, lang: lang })));
-}
-function ProductInformationPrice(props) {
-    const { price, lang } = props;
-    if (price === undefined) {
-        return null;
-    }
-    const { listPrice, currency, fractionDigits } = price;
-    if (listPrice === 0 || currency === "") {
-        return null;
-    }
-    return (React.createElement("div", { className: "cfgProductInfo__right" },
-        React.createElement("div", { className: "cfgProductInfo__name cfgProductInfo__name--right" },
-            React.createElement(CurrencyPrice, { currency: currency, language: lang, price: listPrice, fractionDigits: fractionDigits }))));
-}
+import React from "react";
+import { CfgPriceView } from "./CfgPriceView.js";
+export const ProductInformation = (props) => {
+    const { styleNr, price, description, lang, leftContent, rightContent } = props;
+    return (React.createElement("div", { className: `cfgProductInfo ${props.className || ""}`, style: props.style },
+        React.createElement("div", { className: "cfgProductInfo__left" },
+            React.createElement("h2", { className: "cfgProductInfo__name cfgTextOverflow" }, description),
+            React.createElement("div", { className: "cfgProductInfo__number cfgTextOverflow" }, styleNr),
+            leftContent),
+        React.createElement("div", { className: "cfgProductInfo__right" },
+            React.createElement("div", { className: "cfgProductInfo__name cfgProductInfo__name--right" },
+                React.createElement(CfgPriceView, { price: price, lang: lang })),
+            rightContent)));
+};

package/dist/components/TaskListView.d.ts

@@ -0,0 +1,9 @@
+import { TaskHandler } from "@configura/web-api";
+import React from "react";
+import { CssProps } from "../utilities.js";
+declare type Props = {
+    taskHandler: TaskHandler;
+};
+export declare const TaskListView: React.FC<Props & CssProps>;
+export {};
+//# sourceMappingURL=TaskListView.d.ts.map

package/dist/components/TaskListView.js

@@ -0,0 +1,54 @@
+import { isRenderFormat } from "@configura/web-api";
+import React from "react";
+import { CircleXmarkIcon } from "./icons/CircleXmarkIcon.js";
+import { DownloadIcon } from "./icons/DownloadIcon.js";
+import { ErrorIcon } from "./icons/ErrorIcon.js";
+import { Loading } from "./Loading.js";
+export const TaskListView = (props) => {
+    var _a;
+    const tasks = props.taskHandler.tasks;
+    if (tasks.length === 0) {
+        return null;
+    }
+    return (React.createElement("div", { className: `cfgTaskList ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, style: props.style },
+        React.createElement("ul", null, tasks.map((task) => (React.createElement(TaskView, { task: task, key: task.uuid }))))));
+};
+const spinner = (React.createElement("span", { className: "cfgLoadingSizer" },
+    React.createElement(Loading, null)));
+const TaskView = (props) => {
+    const { task } = props;
+    const { status, format, url, previewUrl } = task;
+    let icon;
+    let statusMessage;
+    switch (status) {
+        case "pending":
+            icon = spinner;
+            statusMessage = `Pending ${format.toUpperCase()} ${isRenderFormat(format) ? "render" : "export"}...`;
+            break;
+        case "running":
+            icon = spinner;
+            statusMessage = `${isRenderFormat(format) ? "Rendering" : "Exporting"} ${format.toUpperCase()}...`;
+            break;
+        case "finished":
+            icon = React.createElement(DownloadIcon, null);
+            statusMessage = `Download ${format.toUpperCase()}`;
+            break;
+        case "failed":
+            icon = React.createElement(ErrorIcon, null);
+            statusMessage = `Failed ${isRenderFormat(format) ? "rendering" : "export"} ${format.toUpperCase()}`;
+            break;
+        default:
+            icon = undefined;
+            statusMessage = "";
+    }
+    return (React.createElement("li", { className: "cfgTaskList__item" },
+        React.createElement("div", { className: "cfgTaskList__preview" }, previewUrl && React.createElement("img", { src: previewUrl, alt: `Preview of ${statusMessage}` })),
+        React.createElement("div", { className: "cfgTaskList__icon" }, url === undefined ? (icon) : (React.createElement("a", { href: url, title: statusMessage }, icon))),
+        React.createElement("div", { className: "cfgTaskList__status" },
+            url === undefined ? (statusMessage) : (React.createElement("a", { href: url, title: statusMessage }, statusMessage)),
+            status === "failed" && (React.createElement(React.Fragment, null,
+                " ",
+                React.createElement("button", { className: "cfgTaskList__restart", onClick: () => task.restart() }, "Restart")))),
+        React.createElement("button", { className: "cfgTaskList__abort", onClick: () => task.abort() },
+            React.createElement(CircleXmarkIcon, null))));
+};

package/dist/components/TaskStartView.d.ts

@@ -0,0 +1,13 @@
+import { CfgProduct, RenderOrExportFormat, RenderTaskParams, TaskHandler } from "@configura/web-api";
+import React from "react";
+import { CssProps } from "../utilities.js";
+declare type Props = {
+    taskHandler: TaskHandler;
+    product: CfgProduct;
+    renderTaskParams: (() => RenderTaskParams) | RenderTaskParams | undefined;
+    getPreviewUrl: (() => Promise<string>) | undefined;
+    formats?: RenderOrExportFormat[];
+};
+export declare const TaskStartView: React.FC<Props & CssProps>;
+export {};
+//# sourceMappingURL=TaskStartView.d.ts.map

package/dist/components/TaskStartView.js

@@ -0,0 +1,22 @@
+import React from "react";
+export const TaskStartView = (props) => {
+    var _a, _b;
+    const { taskHandler, product, renderTaskParams, getPreviewUrl } = props;
+    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);
+                } },
+                React.createElement("option", { value: "" }, "Export"),
+                formats.map((format) => (React.createElement("option", { value: format, key: format }, format)))))));
+};

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

@@ -1,6 +1,7 @@
-import { CssProps } from "../../utilities";
-export declare function CheckmarkWithBorder(props: {
-    active: boolean;
-} & CssProps): JSX.Element;
-export declare function Checkmark(props: CssProps): JSX.Element;
+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 function 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 function 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,7 +1,8 @@
-import { CssProps } from "../../utilities";
-export interface Props {
-    active: boolean;
-    up?: boolean;
-}
-export declare function Chevron(props: Props & CssProps): JSX.Element;
+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 function 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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +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" }))));
+};

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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +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" }))));
+};

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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +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" }))));
+};

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,28 +1,38 @@
-import React, { useState } from "react";
-import { ExpandableHeadingRow, ExpandableHeadingRowSymbol } from "../ExpandableHeadingRow.js";
-import { forwardProps } from "./CfgFeatureView.js";
-import { CfgProductConfigurationView } from "./CfgProductConfigurationView.js";
-export const CfgAdditionalProductView = React.memo((props) => {
-    const { product, permanentlyExpandedLevels, additionalProductComponent } = props;
-    const { partNumber, optional, selected, configuration, additionalProducts, preview, description, } = product;
-    const [open, setOpen] = useState(false);
-    const openOrSelected = optional ? selected : open;
-    const noChildren = configuration.features.length === 0 && additionalProducts.length === 0;
-    const AdditionalProductComponent = additionalProductComponent || CfgAdditionalProductView;
-    return (React.createElement("li", { className: "cfgFeatureItem" },
-        React.createElement(ExpandableHeadingRow, { heading: description || partNumber, expandable: optional || (!noChildren && permanentlyExpandedLevels <= 0), open: openOrSelected, onClick: () => {
-                if (optional) {
-                    product.setSelected(!selected);
-                }
-                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 })))),
-        !noChildren &&
-            (!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` }, additionalProducts.map((additionalProduct) => (React.createElement(AdditionalProductComponent, Object.assign({ key: additionalProduct.key }, forwardProps(props), { product: additionalProduct, permanentlyExpandedLevels: permanentlyExpandedLevels - 1 })))))))),
-        React.createElement("hr", { className: "cfgFeatureItem__hr cfgHr" })));
-});
+import React, { useState } from "react";
+import { ExpandableHeadingRow, ExpandableHeadingRowSymbol } from "../ExpandableHeadingRow.js";
+import { forwardProps } from "./CfgFeatureView.js";
+import { CfgProductConfigurationView } from "./CfgProductConfigurationView.js";
+export const CfgAdditionalProductView = React.memo((props) => {
+    const { product, permanentlyExpandedLevels, additionalProductComponent } = props;
+    const { partNumber, optional, selected, configuration, additionalProducts, preview, description, visible: configurationVisible, } = product;
+    const [open, setOpen] = useState(false);
+    if (!configurationVisible) {
+        // Visibility of a Product should not affect its Additional Products.
+        // (Those have their own visibility.)
+        return (React.createElement(AdditionalProductsView, { additionalProducts: additionalProducts, permanentlyExpandedLevels: permanentlyExpandedLevels, additionalProductComponent: additionalProductComponent }));
+    }
+    const openOrSelected = optional ? selected : open;
+    const hasChildren = configuration.features.length !== 0 || additionalProducts.length !== 0;
+    return (React.createElement("li", { className: "cfgFeatureItem cfgAdditionalProduct" },
+        React.createElement(ExpandableHeadingRow, { heading: description || partNumber, expandable: optional || (hasChildren && permanentlyExpandedLevels <= 0), open: openOrSelected, onClick: () => {
+                if (optional) {
+                    product.setSelected(!selected);
+                }
+                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, { additionalProducts: additionalProducts, permanentlyExpandedLevels: permanentlyExpandedLevels, additionalProductComponent: additionalProductComponent }))))),
+        React.createElement("hr", { className: "cfgFeatureItem__hr cfgHr" })));
+});
+const AdditionalProductsView = (props) => {
+    const { additionalProducts, permanentlyExpandedLevels, additionalProductComponent } = props;
+    const AdditionalProductComponent = additionalProductComponent !== null && additionalProductComponent !== void 0 ? additionalProductComponent : CfgAdditionalProductView;
+    return (React.createElement(React.Fragment, null, additionalProducts.map((additionalProduct) => (React.createElement(AdditionalProductComponent, Object.assign({ key: additionalProduct.key }, forwardProps(props), { product: additionalProduct, permanentlyExpandedLevels: permanentlyExpandedLevels - 1 }))))));
+};