@configura/web-ui 2.1.0-alpha.2 → 2.1.0-alpha.3

package/dist/components/Configurator.js

@@ -1,15 +1,15 @@
-import React from "react";
-import { ConfigurationActionsButtonRow } from "./ConfigurationActionsButtonRow.js";
-import { CfgProductConfigurationView } from "./productConfiguration/CfgProductConfigurationView.js";
-import { ProductInformation } from "./ProductInformation.js";
-export const Configurator = (props) => {
-    const { exportStatus, handleExport, handleRender, product, renderStatus } = props;
-    return (React.createElement("div", { className: `cfgConfigurator ${props.className || ""}`, style: props.style }, product !== undefined && (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: "cfgConfiguratorHeader" },
-            React.createElement(ProductInformation, { lang: product.lang, description: product.description, styleNr: product.styleNr, price: product.aggregatedPrice }),
-            (handleExport !== undefined || handleRender !== undefined) && (React.createElement("div", { className: "cfgConfiguratorHeader__actions" },
-                React.createElement(ConfigurationActionsButtonRow, { handleExport: handleExport, exportStatus: exportStatus, handleRender: handleRender, renderStatus: renderStatus })))),
-        React.createElement("div", { className: "cfgConfiguratorTree" },
-            React.createElement(CfgProductConfigurationView, { productOrConfiguration: product, permanentlyExpandedAdditionalProductLevels: 1 }),
-            props.children)))));
-};
+import React from "react";
+import { ConfigurationActionsButtonRow } from "./ConfigurationActionsButtonRow.js";
+import { CfgProductConfigurationView } from "./productConfiguration/CfgProductConfigurationView.js";
+import { ProductInformation } from "./ProductInformation.js";
+export const Configurator = (props) => {
+    const { exportStatus, handleExport, handleRender, product, renderStatus } = props;
+    return (React.createElement("div", { className: `cfgConfigurator ${props.className || ""}`, style: props.style }, product !== undefined && (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "cfgConfiguratorHeader" },
+            React.createElement(ProductInformation, { lang: product.lang, description: product.description, styleNr: product.styleNr, price: product.aggregatedPrice }),
+            (handleExport !== undefined || handleRender !== undefined) && (React.createElement("div", { className: "cfgConfiguratorHeader__actions" },
+                React.createElement(ConfigurationActionsButtonRow, { handleExport: handleExport, exportStatus: exportStatus, handleRender: handleRender, renderStatus: renderStatus })))),
+        React.createElement("div", { className: "cfgConfiguratorTree" },
+            React.createElement(CfgProductConfigurationView, { productOrConfiguration: product, permanentlyExpandedAdditionalProductLevels: 1 }),
+            props.children)))));
+};

package/dist/components/ConfiguratorWrapper.d.ts

@@ -1,9 +1,9 @@
-import React from "react";
-import { CssProps } from "../utilities";
-interface Props {
-    children: React.ReactNode;
-}
-export declare type ConfiguratorWrapperRef = HTMLDivElement;
-export declare const ConfiguratorWrapper: React.ForwardRefExoticComponent<Props & CssProps & React.RefAttributes<HTMLDivElement>>;
-export {};
+import React from "react";
+import { CssProps } from "../utilities";
+interface Props {
+    children: React.ReactNode;
+}
+export declare type ConfiguratorWrapperRef = HTMLDivElement;
+export declare const ConfiguratorWrapper: React.ForwardRefExoticComponent<Props & CssProps & React.RefAttributes<HTMLDivElement>>;
+export {};
 //# sourceMappingURL=ConfiguratorWrapper.d.ts.map

package/dist/components/ConfiguratorWrapper.js

@@ -1,5 +1,5 @@
-import React from "react";
-export const ConfiguratorWrapper = React.forwardRef((props, ref) => {
-    const { children } = props;
-    return (React.createElement("div", { ref: ref, className: `cfgConfiguratorWrapper ${props.className || ""}`, style: props.style }, children));
-});
+import React from "react";
+export const ConfiguratorWrapper = React.forwardRef((props, ref) => {
+    const { children } = props;
+    return (React.createElement("div", { ref: ref, className: `cfgConfiguratorWrapper ${props.className || ""}`, style: props.style }, children));
+});

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/ErrorContext.d.ts

@@ -1,3 +1,3 @@
-import React from "react";
-export declare const ErrorContext: React.Context<(err: unknown) => void>;
+import React from "react";
+export declare const ErrorContext: React.Context<(err: unknown) => void>;
 //# sourceMappingURL=ErrorContext.d.ts.map

package/dist/components/ErrorContext.js

@@ -1,2 +1,2 @@
-import React from "react";
-export const ErrorContext = React.createContext(() => undefined);
+import React from "react";
+export const ErrorContext = React.createContext(() => undefined);

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,23 +1,23 @@
-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;
-    const inner = (React.createElement(React.Fragment, null,
-        children,
-        React.createElement("div", { className: "cfgExpandableHeadingRow__title" },
-            React.createElement("div", { className: "cfgTextOverflow" }, heading))));
-    if (props.expandable === false) {
-        return React.createElement("div", { className: "cfgExpandableHeadingRow" }, inner);
-    }
-    return (React.createElement(React.Fragment, null,
-        React.createElement("button", { className: `cfgExpandableHeadingRow cfgExpandableHeadingRow--expandable ${props.className || ""}`, style: props.style, onClick: onClick },
-            inner,
-            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;
+    const inner = (React.createElement(React.Fragment, null,
+        children,
+        React.createElement("div", { className: "cfgExpandableHeadingRow__title" },
+            React.createElement("div", { className: "cfgTextOverflow" }, heading))));
+    if (props.expandable === false) {
+        return React.createElement("div", { className: "cfgExpandableHeadingRow" }, inner);
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement("button", { className: `cfgExpandableHeadingRow cfgExpandableHeadingRow--expandable ${props.className || ""}`, style: props.style, onClick: onClick },
+            inner,
+            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,14 +1,14 @@
-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 {};
+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,14 +1,14 @@
-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)));
-};
+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/ResetButton.d.ts

@@ -1,9 +1,9 @@
-import React from "react";
-import { CssProps } from "../utilities";
-declare type Props = {
-    callback: () => void;
-    tooltip: string;
-};
-export declare const ResetButton: React.FC<Props & CssProps>;
-export {};
+import React from "react";
+import { CssProps } from "../utilities";
+declare type Props = {
+    callback: () => void;
+    tooltip: string;
+};
+export declare const ResetButton: React.FC<Props & CssProps>;
+export {};
 //# sourceMappingURL=ResetButton.d.ts.map

package/dist/components/ResetButton.js

@@ -1,7 +1,7 @@
-import React from "react";
-export const ResetButton = (props) => {
-    var _a;
-    const { callback, tooltip } = props;
-    return (React.createElement("div", { className: `cfgReset ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, style: props.style },
-        React.createElement("button", { title: tooltip, className: "cfgInput", onClick: callback }, "Reset")));
-};
+import React from "react";
+export const ResetButton = (props) => {
+    var _a;
+    const { callback, tooltip } = props;
+    return (React.createElement("div", { className: `cfgReset ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, style: props.style },
+        React.createElement("button", { title: tooltip, className: "cfgInput", onClick: callback }, "Reset")));
+};

package/dist/components/ShareView.d.ts

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

package/dist/components/ShareView.js

@@ -1,21 +1,21 @@
-import { CfgHistoryManager } from "@configura/web-api";
-import React, { useState } from "react";
-const shareLabel = "Share";
-export const ShareView = (props) => {
-    var _a;
-    const [value, setValue] = useState(shareLabel);
-    // No need for a useMemo, this will always be the same instance
-    const historyManager = CfgHistoryManager.instance;
-    return (React.createElement("div", { className: `cfgShare ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, style: props.style },
-        React.createElement("input", { title: "Click to copy a share-link to the clipboard", className: "cfgInput", readOnly: true, value: value, onBlur: () => setValue(shareLabel), onFocus: (event) => {
-                const url = historyManager.getUrl();
-                setValue(url);
-                event.target.value = url;
-                event.target.select();
-                navigator.clipboard.writeText(url).catch((err) => {
-                    // In Firefox we get "Error DOMException: Clipboard write was blocked due to lack of user activation." when we
-                    // tab between windows, because the focus event triggers but is not user initiated. We just swallow any error.
-                    console.error("Error", err);
-                });
-            } })));
-};
+import { CfgHistoryManager } from "@configura/web-api";
+import React, { useState } from "react";
+const shareLabel = "Share";
+export const ShareView = (props) => {
+    var _a;
+    const [value, setValue] = useState(shareLabel);
+    // No need for a useMemo, this will always be the same instance
+    const historyManager = CfgHistoryManager.instance;
+    return (React.createElement("div", { className: `cfgShare ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, style: props.style },
+        React.createElement("input", { title: "Click to copy a share-link to the clipboard", className: "cfgInput", readOnly: true, value: value, onBlur: () => setValue(shareLabel), onFocus: (event) => {
+                const url = historyManager.getUrl();
+                setValue(url);
+                event.target.value = url;
+                event.target.select();
+                navigator.clipboard.writeText(url).catch((err) => {
+                    // In Firefox we get "Error DOMException: Clipboard write was blocked due to lack of user activation." when we
+                    // tab between windows, because the focus event triggers but is not user initiated. We just swallow any error.
+                    console.error("Error", err);
+                });
+            } })));
+};

package/dist/components/TaskListView.d.ts

@@ -1,9 +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 {};
+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

@@ -1,69 +1,69 @@
-import { isRenderFormat } from "@configura/web-api";
-import React, { useContext } from "react";
-import { ErrorContext } from "./ErrorContext.js";
-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;
-    const setError = useContext(ErrorContext);
-    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().catch((e) => {
-                            setError(e);
-                            throw e;
-                        });
-                    } }, "Restart")))),
-        React.createElement("button", { className: "cfgTaskList__abort", onClick: () => {
-                try {
-                    task.abort();
-                }
-                catch (e) {
-                    setError(e);
-                    throw e;
-                }
-            } },
-            React.createElement(CircleXmarkIcon, null))));
-};
+import { isRenderFormat } from "@configura/web-api";
+import React, { useContext } from "react";
+import { ErrorContext } from "./ErrorContext.js";
+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;
+    const setError = useContext(ErrorContext);
+    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().catch((e) => {
+                            setError(e);
+                            throw e;
+                        });
+                    } }, "Restart")))),
+        React.createElement("button", { className: "cfgTaskList__abort", onClick: () => {
+                try {
+                    task.abort();
+                }
+                catch (e) {
+                    setError(e);
+                    throw e;
+                }
+            } },
+            React.createElement(CircleXmarkIcon, null))));
+};

package/dist/components/TaskStartView.d.ts

@@ -1,13 +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 {};
+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