@eccenca/gui-elements 6.3.0 → 22.0.0-rc.6

package/dist/cmem/ActivityControl/SilkActivityControl.jsx

@@ -0,0 +1,217 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+import { ActivityControlWidget } from "./ActivityControlWidget";
+import React, { useEffect, useState } from "react";
+import { ActivityExecutionErrorReportModal } from "./ActivityExecutionErrorReportModal";
+import { Spacing } from "../../index";
+import { ElapsedDateTimeDisplay } from "../DateTimeDisplay/ElapsedDateTimeDisplay";
+var progressBreakpointIndetermination = 10;
+var progressBreakpointAnimation = 99;
+var defaultLayout = { small: false, border: false, canShrink: false, visualization: "spinner" };
+/** Silk activity control. */
+export function SilkActivityControl(_a) {
+    var _this = this;
+    var label = _a.label, initialStatus = _a.initialStatus, registerForUpdates = _a.registerForUpdates, executeActivityAction = _a.executeActivityAction, showReloadAction = _a.showReloadAction, showStartAction = _a.showStartAction, viewValueAction = _a.viewValueAction, showStopAction = _a.showStopAction, failureReportAction = _a.failureReportAction, unregisterFromUpdates = _a.unregisterFromUpdates, translate = _a.translate, elapsedTimeOfLastStart = _a.elapsedTimeOfLastStart, _b = _a.layoutConfig, layoutConfig = _b === void 0 ? defaultLayout : _b, props = __rest(_a, ["label", "initialStatus", "registerForUpdates", "executeActivityAction", "showReloadAction", "showStartAction", "viewValueAction", "showStopAction", "failureReportAction", "unregisterFromUpdates", "translate", "elapsedTimeOfLastStart", "layoutConfig"]);
+    var _c = __read(useState(initialStatus), 2), activityStatus = _c[0], setActivityStatus = _c[1];
+    var _d = __read(useState(undefined), 2), errorReport = _d[0], setErrorReport = _d[1];
+    // Register update function
+    useEffect(function () {
+        var updateActivityStatus = function (status) {
+            setActivityStatus(status);
+        };
+        registerForUpdates(updateActivityStatus);
+        return unregisterFromUpdates;
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
+    // Create activity actions
+    var actions = [];
+    if (failureReportAction && (activityStatus === null || activityStatus === void 0 ? void 0 : activityStatus.failed) && activityStatus.concreteStatus !== "Cancelled") {
+        actions.push({
+            "data-test-id": "activity-show-error-report",
+            icon: "artefact-report",
+            action: function () { return showErrorReport(failureReportAction); },
+            tooltip: translate("showErrorReport"),
+            hasStateWarning: true
+        });
+    }
+    if (showStartAction) {
+        actions.push({
+            "data-test-id": "activity-start-activity",
+            icon: "item-start",
+            action: function () { return executeActivityAction("start"); },
+            tooltip: translate("startActivity"),
+            disabled: (activityStatus === null || activityStatus === void 0 ? void 0 : activityStatus.isRunning) === true
+        });
+    }
+    if (showReloadAction) {
+        actions.push({
+            "data-test-id": "activity-reload-activity",
+            icon: "item-reload",
+            action: function () { return executeActivityAction("restart"); },
+            tooltip: translate("reloadActivity"),
+            disabled: (activityStatus === null || activityStatus === void 0 ? void 0 : activityStatus.isRunning) === true
+        });
+    }
+    if (showStopAction) {
+        actions.push({
+            "data-test-id": "activity-stop-activity",
+            icon: "item-stop",
+            action: function () { return executeActivityAction("cancel"); },
+            tooltip: translate("stopActivity"),
+            disabled: (activityStatus === null || activityStatus === void 0 ? void 0 : activityStatus.isRunning) === false
+        });
+    }
+    if (viewValueAction && (activityStatus === null || activityStatus === void 0 ? void 0 : activityStatus.concreteStatus) !== "Not executed") {
+        var action = typeof viewValueAction.action === "string" ? function () {
+            window.open(viewValueAction.action, "_blank");
+        } : viewValueAction.action;
+        actions.push({
+            "data-test-id": "activity-view-data",
+            icon: "artefact-rawdata",
+            action: action,
+            tooltip: viewValueAction.tooltip
+        });
+    }
+    var showErrorReport = function (action) { return __awaiter(_this, void 0, void 0, function () {
+        var errorReport;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, action.fetchErrorReport(action.renderMarkdown)];
+                case 1:
+                    errorReport = _a.sent();
+                    setErrorReport(errorReport);
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var closeErrorReport = function () {
+        setErrorReport(undefined);
+    };
+    var activityControlLabel = (activityStatus === null || activityStatus === void 0 ? void 0 : activityStatus.startTime) && elapsedTimeOfLastStart ? <>
+        {label}
+        <Spacing vertical={true} size={"tiny"}/>
+        <ElapsedDateTimeDisplay dateTime={activityStatus.startTime} prefix={elapsedTimeOfLastStart.prefix} suffix={elapsedTimeOfLastStart.suffix} translateUnits={elapsedTimeOfLastStart.translate}/>
+    </> : label;
+    var visualization = layoutConfig.visualization, otherLayoutConfig = __rest(layoutConfig, ["visualization"]);
+    var visualizationProps = {}; // visualization==="none" or undefined
+    var runningProgress = activityStatus && activityStatus.isRunning;
+    var waitingProgress = activityStatus && activityStatus.concreteStatus === "Waiting";
+    var animateProgress = activityStatus && activityStatus.progress > 0 && activityStatus.progress < progressBreakpointAnimation;
+    var indeterminateProgress = activityStatus && activityStatus.progress < progressBreakpointIndetermination;
+    if (visualization === "progressbar") {
+        visualizationProps = {
+            progressBar: {
+                animate: waitingProgress || (runningProgress && animateProgress),
+                stripes: waitingProgress || (runningProgress && animateProgress),
+                value: (waitingProgress || (runningProgress && indeterminateProgress)) ? undefined : ((activityStatus && activityStatus.progress > 0) ? (activityStatus.progress / 100) : 0),
+                intent: activityStatus ? calcIntent(activityStatus) : "none",
+            }
+        };
+    }
+    ;
+    if (visualization === "spinner") {
+        visualizationProps = {
+            progressSpinner: {
+                value: (waitingProgress || (runningProgress && indeterminateProgress)) ? undefined : ((activityStatus && activityStatus.progress > 0) ? (activityStatus.progress / 100) : 0),
+                intent: activityStatus ? calcIntent(activityStatus) : "none",
+            }
+        };
+    }
+    ;
+    return <>
+        <ActivityControlWidget key={"activity-control"} data-test-id={props["data-test-id"]} label={activityControlLabel} activityActions={actions} statusMessage={activityStatus === null || activityStatus === void 0 ? void 0 : activityStatus.message} {...visualizationProps} {...otherLayoutConfig}/>
+        {errorReport && failureReportAction && <ActivityExecutionErrorReportModal title={failureReportAction.title} key={"error-report-modal"} closeButtonValue={failureReportAction.closeButtonValue} downloadButtonValue={failureReportAction.downloadButtonValue} fetchErrorReport={function () { return __awaiter(_this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, failureReportAction.fetchErrorReport(true)];
+                        case 1: return [2 /*return*/, _a.sent()];
+                    }
+                });
+            }); }} report={failureReportAction.renderReport(errorReport)} onDiscard={closeErrorReport}/>}
+    </>;
+}
+var calcIntent = function (activityStatus) {
+    var concreteStatus = activityStatus.concreteStatus;
+    var intent;
+    switch (concreteStatus) {
+        case "Running":
+        case "Successful":
+            intent = "success";
+            break;
+        case "Cancelled":
+        case "Canceling":
+            intent = "warning";
+            break;
+        case "Failed":
+            intent = "danger";
+            break;
+        case "Waiting":
+            intent = "none"; // TODO: This is 100% yellow in the old activity control
+            break;
+        default:
+            intent = "none";
+    }
+    return intent;
+};

package/dist/cmem/ContentBlobToggler/ContentBlobToggler.d.ts

@@ -0,0 +1,34 @@
+import React from "react";
+interface IContentBlobTogglerProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+          space-delimited list of class names
+      */
+    className?: string;
+    /**
+          text label used for toggler when preview is displayed
+      */
+    toggleExtendText: string;
+    /**
+          text label used for toggler when full view is displayed
+      */
+    toggleReduceText: string;
+    /**
+          content that is displayed as preview
+      */
+    previewContent: React.ReactNode;
+    /**
+          content that is displayed as extended full view
+      */
+    fullviewContent: React.ReactNode;
+    /**
+          Show extended full view initially. Default: false
+      */
+    startExtended?: boolean;
+    /**
+          Callback if toggler is necessary. Default: true
+      */
+    enableToggler?: boolean;
+}
+/** Shows a preview with the option to expand to a full view (and back). */
+export declare function ContentBlobToggler({ className, toggleExtendText, toggleReduceText, previewContent, fullviewContent, startExtended, enableToggler, ...otherProps }: IContentBlobTogglerProps): JSX.Element;
+export {};

package/dist/cmem/ContentBlobToggler/ContentBlobToggler.js

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ContentBlobToggler = ContentBlobToggler;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _index = require("../../index");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/** Shows a preview with the option to expand to a full view (and back). */
+function ContentBlobToggler({
+  className = "",
+  toggleExtendText,
+  toggleReduceText,
+  previewContent,
+  fullviewContent,
+  startExtended = false,
+  enableToggler = true,
+  ...otherProps
+}) {
+  const [isExtended, setViewState] = (0, _react.useState)(startExtended);
+
+  const handlerToggleView = event => {
+    event.preventDefault();
+    event.stopPropagation();
+    setViewState(!isExtended);
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+    className: className
+  }, otherProps), !isExtended ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, previewContent, enableToggler && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "\u2026", " ", /*#__PURE__*/_react.default.createElement(_index.Link, {
+    href: "#more",
+    "data-test-id": "content-blob-toggler-more-link",
+    onClick: e => {
+      handlerToggleView(e);
+    }
+  }, toggleExtendText))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, fullviewContent, enableToggler && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_index.Spacing, {
+    size: "small"
+  }), /*#__PURE__*/_react.default.createElement(_index.Link, {
+    "data-test-id": "content-blob-toggler-less-link",
+    href: "#less",
+    onClick: e => {
+      handlerToggleView(e);
+    }
+  }, toggleReduceText))));
+}

package/dist/cmem/ContentBlobToggler/ContentBlobToggler.jsx

@@ -0,0 +1,62 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+import React, { useState } from "react";
+import { Link, Spacing } from "../../index";
+/** Shows a preview with the option to expand to a full view (and back). */
+export function ContentBlobToggler(_a) {
+    var _b = _a.className, className = _b === void 0 ? "" : _b, toggleExtendText = _a.toggleExtendText, toggleReduceText = _a.toggleReduceText, previewContent = _a.previewContent, fullviewContent = _a.fullviewContent, _c = _a.startExtended, startExtended = _c === void 0 ? false : _c, _d = _a.enableToggler, enableToggler = _d === void 0 ? true : _d, otherProps = __rest(_a, ["className", "toggleExtendText", "toggleReduceText", "previewContent", "fullviewContent", "startExtended", "enableToggler"]);
+    var _e = __read(useState(startExtended), 2), isExtended = _e[0], setViewState = _e[1];
+    var handlerToggleView = function (event) {
+        event.preventDefault();
+        event.stopPropagation();
+        setViewState(!isExtended);
+    };
+    return (<div className={className} {...otherProps}>
+        {!isExtended ? (<>
+            {previewContent}
+            {enableToggler && (<>
+                &hellip;{" "}
+                <Link href="#more" data-test-id={"content-blob-toggler-more-link"} onClick={function (e) {
+                    handlerToggleView(e);
+                }}>
+                  {toggleExtendText}
+                </Link>
+              </>)}
+          </>) : (<>
+            {fullviewContent}
+            {enableToggler && (<div>
+                    <Spacing size="small"/>
+                    <Link data-test-id={"content-blob-toggler-less-link"} href="#less" onClick={function (e) {
+                    handlerToggleView(e);
+                }}>
+                        {toggleReduceText}
+                    </Link>
+                </div>)}
+          </>)}
+    </div>);
+}

package/dist/cmem/ContentBlobToggler/StringPreviewContentBlobToggler.d.ts

@@ -0,0 +1,42 @@
+import React from "react";
+interface IStringPreviewContentBlobTogglerProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     space-delimited list of class names
+     */
+    className?: string;
+    /**
+     The preview content will be cut to this length if it is too long.
+     */
+    previewMaxLength?: number;
+    /**
+     text label used for toggler when preview is displayed
+     */
+    toggleExtendText: string;
+    /**
+     text label used for toggler when full view is displayed
+     */
+    toggleReduceText: string;
+    /**
+     The content string. If it is smaller than previewMaxLength this will be displayed in full, else fullviewContent will be displayed.
+     */
+    content: string;
+    /**
+     Content that is displayed as extended full view
+     */
+    fullviewContent: React.ReactNode;
+    /**
+     show extended full view initially
+     */
+    startExtended?: boolean;
+    /** If only the first non-empty line should be shown in the preview. This will in addition also be shortened according to previewMaxLength. */
+    firstNonEmptyLineOnly?: boolean;
+    /** If enabled the preview is rendered as markdown. */
+    renderPreviewAsMarkdown?: boolean;
+    /** White-listing of HTML elements that will be rendered when renderPreviewAsMarkdown is enabled. */
+    allowedHtmlElementsInPreview?: string[];
+}
+/** Version of the content toggler for text only content. */
+export declare function StringPreviewContentBlobToggler({ className, previewMaxLength, toggleExtendText, toggleReduceText, content, fullviewContent, startExtended, firstNonEmptyLineOnly, renderPreviewAsMarkdown, allowedHtmlElementsInPreview }: IStringPreviewContentBlobTogglerProps): JSX.Element;
+/** Takes the first non-empty line from a preview string. */
+export declare function firstNonEmptyLine(preview: string): string;
+export {};

package/dist/cmem/ContentBlobToggler/StringPreviewContentBlobToggler.js

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StringPreviewContentBlobToggler = StringPreviewContentBlobToggler;
+exports.firstNonEmptyLine = firstNonEmptyLine;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = require("../");
+
+/** Version of the content toggler for text only content. */
+function StringPreviewContentBlobToggler({
+  className = "",
+  previewMaxLength,
+  toggleExtendText,
+  toggleReduceText,
+  content,
+  fullviewContent,
+  startExtended,
+  firstNonEmptyLineOnly,
+  renderPreviewAsMarkdown = false,
+  allowedHtmlElementsInPreview
+}) {
+  const previewMaybeFirstLine = firstNonEmptyLineOnly ? firstNonEmptyLine(content) : content;
+  const previewString = previewMaxLength ? previewMaybeFirstLine.substr(0, previewMaxLength) : previewMaybeFirstLine;
+  const enableToggler = previewString !== content;
+  return /*#__PURE__*/_react.default.createElement(_.ContentBlobToggler, {
+    className: className,
+    previewContent: renderPreviewAsMarkdown ? /*#__PURE__*/_react.default.createElement(_.Markdown, {
+      allowedElements: allowedHtmlElementsInPreview
+    }, previewString) : previewString,
+    toggleExtendText: toggleExtendText,
+    toggleReduceText: toggleReduceText,
+    fullviewContent: fullviewContent,
+    startExtended: startExtended,
+    enableToggler: enableToggler
+  });
+}
+
+const newLineRegex = new RegExp("\r|\n"); // eslint-disable-line
+
+/** Takes the first non-empty line from a preview string. */
+
+function firstNonEmptyLine(preview) {
+  const previewString = preview.trim();
+  const result = newLineRegex.exec(previewString);
+  return result !== null ? previewString.substr(0, result.index) : previewString;
+}

package/dist/cmem/ContentBlobToggler/StringPreviewContentBlobToggler.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { ContentBlobToggler, Markdown } from "../";
+/** Version of the content toggler for text only content. */
+export function StringPreviewContentBlobToggler(_a) {
+    var _b = _a.className, className = _b === void 0 ? "" : _b, previewMaxLength = _a.previewMaxLength, toggleExtendText = _a.toggleExtendText, toggleReduceText = _a.toggleReduceText, content = _a.content, fullviewContent = _a.fullviewContent, startExtended = _a.startExtended, firstNonEmptyLineOnly = _a.firstNonEmptyLineOnly, _c = _a.renderPreviewAsMarkdown, renderPreviewAsMarkdown = _c === void 0 ? false : _c, allowedHtmlElementsInPreview = _a.allowedHtmlElementsInPreview;
+    var previewMaybeFirstLine = firstNonEmptyLineOnly ? firstNonEmptyLine(content) : content;
+    var previewString = previewMaxLength ? previewMaybeFirstLine.substr(0, previewMaxLength) : previewMaybeFirstLine;
+    var enableToggler = previewString !== content;
+    return <ContentBlobToggler className={className} previewContent={renderPreviewAsMarkdown ? <Markdown allowedElements={allowedHtmlElementsInPreview}>{previewString}</Markdown> : previewString} toggleExtendText={toggleExtendText} toggleReduceText={toggleReduceText} fullviewContent={fullviewContent} startExtended={startExtended} enableToggler={enableToggler}/>;
+}
+var newLineRegex = new RegExp("\r|\n"); // eslint-disable-line
+/** Takes the first non-empty line from a preview string. */
+export function firstNonEmptyLine(preview) {
+    var previewString = preview.trim();
+    var result = newLineRegex.exec(previewString);
+    return result !== null ? previewString.substr(0, result.index) : previewString;
+}

package/dist/cmem/DateTimeDisplay/ElapsedDateTimeDisplay.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { TestableComponent } from "../../components/interfaces";
+interface IProps extends TestableComponent {
+    dateTime: string | number;
+    prefix?: string;
+    suffix?: string;
+    showDateTimeTooltip?: boolean;
+    translateUnits: (unit: TimeUnits) => string;
+}
+export declare type TimeUnits = "minute" | "minutes" | "hour" | "hours" | "day" | "days";
+export declare const elapsedTimeSegmented: (elapsedTimeInMs: number) => number[];
+export declare const simplifiedElapsedTime: (timeSegments: number[], translateUnits: (unit: TimeUnits) => string) => string;
+/** Displays the elapsed time in a human readable way. */
+export declare const ElapsedDateTimeDisplay: ({ dateTime, prefix, suffix, showDateTimeTooltip, translateUnits, ...otherProps }: IProps) => JSX.Element;
+export {};

package/dist/cmem/DateTimeDisplay/ElapsedDateTimeDisplay.js

@@ -0,0 +1,80 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.simplifiedElapsedTime = exports.elapsedTimeSegmented = exports.ElapsedDateTimeDisplay = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const dateTimeToElapsedTimeInMs = dateTime => {
+  const absoluteMs = typeof dateTime === "number" ? dateTime : new Date(dateTime).getTime();
+  return new Date().getTime() - absoluteMs;
+}; // Returns a segmentation of the elapsed time, i.e. an array with the nr of days, hours, minutes, seconds
+
+
+const elapsedTimeSegmented = elapsedTimeInMs => {
+  // In how many segments the time should be split, i.e. hours, minutes, seconds
+  const segmentSteps = [24, 60, 60]; // First convert to time in seconds
+
+  let remaining = Math.floor(elapsedTimeInMs / 1000);
+  const segmentValues = [];
+  segmentSteps.reverse().forEach(segmentSize => {
+    const segmentValue = remaining % segmentSize;
+    remaining = Math.floor(remaining / segmentSize);
+    segmentValues.push(segmentValue);
+  });
+  segmentValues.push(remaining);
+  return segmentValues.reverse();
+}; // Returns the simplified elapsed time
+
+
+exports.elapsedTimeSegmented = elapsedTimeSegmented;
+
+const simplifiedElapsedTime = (timeSegments, translateUnits) => {
+  const units = ["day", "hour", "minute"]; // Find first non-null value
+
+  let idx = 0;
+
+  while (idx < 3 && timeSegments[idx] === 0) {
+    idx++;
+  }
+
+  if (idx === 3) {
+    // Do not show exact seconds
+    return `< 1 ${translateUnits("minute")}`;
+  } else {
+    return `${timeSegments[idx]} ${translateUnits(units[idx] + (timeSegments[idx] > 1 ? "s" : ""))}`;
+  }
+};
+/** Displays the elapsed time in a human readable way. */
+
+
+exports.simplifiedElapsedTime = simplifiedElapsedTime;
+
+const ElapsedDateTimeDisplay = ({
+  dateTime,
+  prefix = "",
+  suffix = "",
+  showDateTimeTooltip = true,
+  translateUnits,
+  ...otherProps
+}) => {
+  const [elapsedTime, setElapsedTime] = (0, _react.useState)(dateTimeToElapsedTimeInMs(dateTime));
+  (0, _react.useEffect)(() => {
+    const timeout = setInterval(() => {
+      setElapsedTime(dateTimeToElapsedTimeInMs(dateTime));
+    }, 1000);
+    return () => clearInterval(timeout);
+  }, [dateTime]);
+  return /*#__PURE__*/_react.default.createElement("span", {
+    "data-test-id": otherProps["data-test-id"],
+    title: showDateTimeTooltip ? new Date(dateTime).toString() : ""
+  }, prefix + simplifiedElapsedTime(elapsedTimeSegmented(elapsedTime), translateUnits) + suffix);
+};
+
+exports.ElapsedDateTimeDisplay = ElapsedDateTimeDisplay;

package/dist/cmem/DateTimeDisplay/ElapsedDateTimeDisplay.jsx

@@ -0,0 +1,77 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+import React, { useEffect, useState } from "react";
+var dateTimeToElapsedTimeInMs = function (dateTime) {
+    var absoluteMs = typeof dateTime === "number" ? dateTime : new Date(dateTime).getTime();
+    return new Date().getTime() - absoluteMs;
+};
+// Returns a segmentation of the elapsed time, i.e. an array with the nr of days, hours, minutes, seconds
+export var elapsedTimeSegmented = function (elapsedTimeInMs) {
+    // In how many segments the time should be split, i.e. hours, minutes, seconds
+    var segmentSteps = [24, 60, 60];
+    // First convert to time in seconds
+    var remaining = Math.floor(elapsedTimeInMs / 1000);
+    var segmentValues = [];
+    segmentSteps.reverse().forEach(function (segmentSize) {
+        var segmentValue = remaining % segmentSize;
+        remaining = Math.floor(remaining / segmentSize);
+        segmentValues.push(segmentValue);
+    });
+    segmentValues.push(remaining);
+    return segmentValues.reverse();
+};
+// Returns the simplified elapsed time
+export var simplifiedElapsedTime = function (timeSegments, translateUnits) {
+    var units = ["day", "hour", "minute"];
+    // Find first non-null value
+    var idx = 0;
+    while (idx < 3 && timeSegments[idx] === 0) {
+        idx++;
+    }
+    if (idx === 3) {
+        // Do not show exact seconds
+        return "< 1 " + translateUnits("minute");
+    }
+    else {
+        return timeSegments[idx] + " " + translateUnits(units[idx] + (timeSegments[idx] > 1 ? "s" : ""));
+    }
+};
+/** Displays the elapsed time in a human readable way. */
+export var ElapsedDateTimeDisplay = function (_a) {
+    var dateTime = _a.dateTime, _b = _a.prefix, prefix = _b === void 0 ? "" : _b, _c = _a.suffix, suffix = _c === void 0 ? "" : _c, _d = _a.showDateTimeTooltip, showDateTimeTooltip = _d === void 0 ? true : _d, translateUnits = _a.translateUnits, otherProps = __rest(_a, ["dateTime", "prefix", "suffix", "showDateTimeTooltip", "translateUnits"]);
+    var _e = __read(useState(dateTimeToElapsedTimeInMs(dateTime)), 2), elapsedTime = _e[0], setElapsedTime = _e[1];
+    useEffect(function () {
+        var timeout = setInterval(function () {
+            setElapsedTime(dateTimeToElapsedTimeInMs(dateTime));
+        }, 1000);
+        return function () { return clearInterval(timeout); };
+    }, [dateTime]);
+    return <span data-test-id={otherProps["data-test-id"]} title={showDateTimeTooltip ? new Date(dateTime).toString() : ""}>
+        {prefix + simplifiedElapsedTime(elapsedTimeSegmented(elapsedTime), translateUnits) + suffix}
+    </span>;
+};