@eccenca/gui-elements 22.0.1 → 22.1.0-rc.0

package/dist/es5/components/MultiSelect/MultiSelect.js

@@ -0,0 +1,301 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import React from "react";
+import { Intent as BlueprintIntent } from "@blueprintjs/core";
+import { MultiSelect as BlueprintMultiSelect } from "@blueprintjs/select";
+import MenuItem from "../Menu/MenuItem";
+import Highlighter from "../Typography/Highlighter";
+import Button from "../Button/Button";
+import OverflowText from "../Typography/OverflowText";
+function MultiSelect(_a) {
+    var _this = this;
+    var items = _a.items, prePopulateWithItems = _a.prePopulateWithItems, equalityProp = _a.equalityProp, labelProp = _a.labelProp, onSelection = _a.onSelection, canCreateNewItem = _a.canCreateNewItem, popoverProps = _a.popoverProps, tagInputProps = _a.tagInputProps, runOnQueryChange = _a.runOnQueryChange, _b = _a.fullWidth, fullWidth = _b === void 0 ? true : _b, _c = _a.noResultText, noResultText = _c === void 0 ? "No results." : _c, _d = _a.newItemCreationText, newItemCreationText = _d === void 0 ? "Add new tag" : _d, hasStatePrimary = _a.hasStatePrimary, hasStateDanger = _a.hasStateDanger, hasStateSuccess = _a.hasStateSuccess, hasStateWarning = _a.hasStateWarning, disabled = _a.disabled, otherProps = __rest(_a, ["items", "prePopulateWithItems", "equalityProp", "labelProp", "onSelection", "canCreateNewItem", "popoverProps", "tagInputProps", "runOnQueryChange", "fullWidth", "noResultText", "newItemCreationText", "hasStatePrimary", "hasStateDanger", "hasStateSuccess", "hasStateWarning", "disabled"]);
+    var _e = __read(React.useState([]), 2), createdItems = _e[0], setCreatedItems = _e[1];
+    var _f = __read(React.useState(__spreadArray([], __read(items), false)), 2), itemsCopy = _f[0], setItemsCopy = _f[1];
+    var _g = __read(React.useState([]), 2), filteredItemList = _g[0], setFilteredItemList = _g[1];
+    var _h = __read(React.useState(function () { return (prePopulateWithItems ? __spreadArray([], __read(items), false) : []); }), 2), selectedItems = _h[0], setSelectedItems = _h[1];
+    var _j = __read(React.useState(undefined), 2), query = _j[0], setQuery = _j[1];
+    //currently focused element in popover list
+    var _k = __read(React.useState(null), 2), focusedItem = _k[0], setFocusedItem = _k[1];
+    var tagInputRef = React.useRef();
+    var intent;
+    switch (true) {
+        case hasStatePrimary:
+            intent = BlueprintIntent.PRIMARY;
+            break;
+        case hasStateSuccess:
+            intent = BlueprintIntent.SUCCESS;
+            break;
+        case hasStateWarning:
+            intent = BlueprintIntent.WARNING;
+            break;
+        case hasStateDanger:
+            intent = BlueprintIntent.DANGER;
+            break;
+        default:
+            break;
+    }
+    /** update items copy when the items change
+     *  e.g for auto-complete when query change
+     */
+    React.useEffect(function () {
+        setItemsCopy(__spreadArray(__spreadArray([], __read(items), false), __read(createdItems), false));
+        setFilteredItemList(__spreadArray(__spreadArray([], __read(items), false), __read(createdItems), false));
+        /* eslint-disable react-hooks/exhaustive-deps */
+    }, [items.map(function (item) { return item[equalityProp]; }).join("|")]);
+    React.useEffect(function () {
+        onSelection &&
+            onSelection({
+                newlySelected: selectedItems.slice(-1)[0],
+                createdItems: createdItems,
+                selectedItems: selectedItems,
+            });
+        /* eslint-disable react-hooks/exhaustive-deps */
+    }, [
+        onSelection,
+        selectedItems.map(function (item) { return item[equalityProp]; }).join("|"),
+        createdItems.map(function (item) { return item[equalityProp]; }).join("|"),
+    ]);
+    /**
+     * using the equality prop specified checks if an item has already been selected
+     * @param matcher
+     * @returns
+     */
+    var itemHasBeenSelectedAlready = function (matcher) {
+        return !!selectedItems.find(function (item) { return String(item[equalityProp]).toString() === matcher; });
+    };
+    /**
+     * removes already selected item from the selectedItems
+     * @param matcher
+     */
+    var removeItemSelection = function (matcher) {
+        setSelectedItems(function (items) { return items.filter(function (t) { return String(t[equalityProp]).toString() !== matcher; }); });
+    };
+    /**
+     * selects and deselects an item from selection list
+     * if the item exists it removes it instead
+     * @param item
+     */
+    var onItemSelect = function (item) {
+        if (itemHasBeenSelectedAlready(String(item[equalityProp]).toString())) {
+            removeItemSelection(String(item[equalityProp]).toString());
+        }
+        else {
+            setSelectedItems(function (items) { return __spreadArray(__spreadArray([], __read(items), false), [item], false); });
+        }
+        setQuery("");
+    };
+    /**
+     * search through item list using "label prop" and update the items popover
+     * @param query
+     */
+    var onQueryChange = function (query) { return __awaiter(_this, void 0, void 0, function () {
+        var resultFromQuery_1, _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    if (!query.length) return [3 /*break*/, 3];
+                    setQuery(query);
+                    _a = runOnQueryChange;
+                    if (!_a) return [3 /*break*/, 2];
+                    return [4 /*yield*/, runOnQueryChange(removeExtraSpaces(query))];
+                case 1:
+                    _a = (_b.sent());
+                    _b.label = 2;
+                case 2:
+                    resultFromQuery_1 = _a;
+                    setFilteredItemList(function () {
+                        return __spreadArray(__spreadArray([], __read((resultFromQuery_1 !== null && resultFromQuery_1 !== void 0 ? resultFromQuery_1 : itemsCopy)), false), __read(createdItems), false).filter(function (t) {
+                            return String(t[labelProp]).toLowerCase().includes(query.toLowerCase());
+                        });
+                    });
+                    _b.label = 3;
+                case 3: return [2 /*return*/];
+            }
+        });
+    }); };
+    // Renders the entries of the (search) options list
+    var optionRenderer = function (label) {
+        return React.createElement(Highlighter, { label: label, searchValue: query });
+    };
+    /**
+     * defines how an item in the item list is displayed
+     * @param tag
+     * @param param
+     * @returns
+     */
+    var onItemRenderer = function (item, _a) {
+        var handleClick = _a.handleClick, modifiers = _a.modifiers;
+        if (!modifiers.matchesPredicate) {
+            return null;
+        }
+        var label = createdItems.find(function (createdItem) { return createdItem[labelProp] === item[labelProp]; })
+            ? item[labelProp] + " (new tag)"
+            : item[labelProp];
+        return (React.createElement(MenuItem, { active: modifiers.active, key: String(item[equalityProp]).toString(), icon: itemHasBeenSelectedAlready(String(item[equalityProp]).toString()) ? "state-checked" : "state-unchecked", onClick: handleClick, text: optionRenderer(String(label).toString()), shouldDismissPopover: false }));
+    };
+    /**
+     * clear all selected items in the multi-select input
+     */
+    var handleClear = function () {
+        setSelectedItems([]);
+        setFilteredItemList(itemsCopy);
+    };
+    /**
+     * remove a specific item from the multi-select input
+     * @param label
+     * @param index
+     */
+    var removeTagFromSelectionViaIndex = function (label, index) {
+        setSelectedItems(__spreadArray(__spreadArray([], __read(selectedItems.slice(0, index)), false), __read(selectedItems.slice(index + 1)), false));
+        setCreatedItems(function (items) { return items.filter(function (t) { return String(t[labelProp]).toString() !== label; }); });
+    };
+    var removeExtraSpaces = function (text) { return text.replace(/\s+/g, " ").trim(); };
+    /**
+     * utility function to create a new Item
+     * @param event
+     * @param label
+     */
+    var createNewItem = function (event, label) {
+        var _a;
+        var newItem = (_a = {}, _a[labelProp] = removeExtraSpaces(label), _a[equalityProp] = removeExtraSpaces(label), _a);
+        //set new items
+        setCreatedItems(function (items) { return __spreadArray(__spreadArray([], __read(items), false), [newItem], false); });
+        setQuery("");
+        itemsCopy.push(newItem);
+        return newItem;
+    };
+    /**
+     * added functionality to create new item when there are no matching items on enter keypress
+     * @param event
+     */
+    var handleOnKeyUp = function (event) {
+        var _a;
+        if (event.key === "Enter" && !filteredItemList.length && !!query) {
+            createNewItem(event, query);
+        }
+        (_a = tagInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    /**
+     * added functionality to either create new item
+     * when there are no matching items or select an item on tab keypress
+     * @param event
+     */
+    var handleOnKeyDown = function (event) {
+        if (event.key === "Tab" && !!query) {
+            event.preventDefault();
+            focusedItem ? onItemSelect(focusedItem) : onItemSelect(createNewItem(event, query));
+            setTimeout(function () { var _a; return (_a = tagInputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); });
+        }
+    };
+    /**
+     * create new item handler, displays the new item selector and creates a new item when selected
+     * @param label '
+     * @param active
+     * @param handleClick
+     * @returns
+     */
+    var newItemRenderer = function (label, active, handleClick) {
+        if (!canCreateNewItem)
+            return undefined;
+        var clickHandler = function (e) {
+            createNewItem(e, label);
+            handleClick(e);
+        };
+        return (React.createElement(MenuItem, { id: "new-tag", icon: "item-add-artefact", active: active, key: label, onClick: clickHandler, text: React.createElement(OverflowText, null, newItemCreationText + " '" + label + "'") }));
+    };
+    var clearButton = selectedItems.length > 0 ? (React.createElement(Button, { icon: "operation-clear", "data-test-id": "clear-all-items", minimal: true, onClick: handleClear })) : undefined;
+    return (React.createElement(BlueprintMultiSelect, __assign({}, otherProps, { query: query, onQueryChange: onQueryChange, items: filteredItemList, onItemSelect: onItemSelect, itemRenderer: onItemRenderer, itemsEqual: function (a, b) { return a[labelProp] === b[labelProp]; }, selectedItems: selectedItems, noResults: React.createElement(MenuItem, { disabled: true, text: noResultText }), tagRenderer: function (tag) { return tag[labelProp]; }, createNewItemRenderer: newItemRenderer, onActiveItemChange: function (activeItem) { return setFocusedItem(activeItem); }, fill: fullWidth, createNewItemFromQuery: function (query) {
+            var _a;
+            return (_a = {},
+                _a[labelProp] = removeExtraSpaces(query),
+                _a[equalityProp] = removeExtraSpaces(query),
+                _a);
+        }, tagInputProps: __assign({ inputProps: {
+                id: "item",
+                autoComplete: "off",
+            }, inputRef: tagInputRef, intent: intent, addOnBlur: true, onKeyDown: handleOnKeyDown, onKeyUp: handleOnKeyUp, onRemove: removeTagFromSelectionViaIndex, rightElement: disabled ? undefined : clearButton, tagProps: { minimal: true }, disabled: disabled }, tagInputProps), popoverProps: __assign(__assign({ minimal: true, position: "bottom-left", hasBackdrop: true }, popoverProps), { defaultIsOpen: true }) })));
+}
+export default MultiSelect;
+//# sourceMappingURL=MultiSelect.js.map

package/dist/es5/components/MultiSelect/MultiSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelect.js","sourceRoot":"","sources":["../../../../src/components/MultiSelect/MultiSelect.tsx"],"names":[],"mappings":"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"}

package/dist/es5/components/Tabs/Tab.js

@@ -0,0 +1,98 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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;
+};
+import React from 'react';
+import { Tab as BlueprintTab } from "@blueprintjs/core";
+import Color from "color";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import TabTitle from "./TabTitle";
+// Dummy as we cannot use it like that directly for now
+export var TabDummyForStorybook = function (props) { return React.createElement(React.Fragment, null, props.title); };
+export var transformTabProperties = function (_a) {
+    var title = _a.title, _b = _a.dontShrink, dontShrink = _b === void 0 ? false : _b, _c = _a.className, className = _c === void 0 ? "" : _c, backgroundColor = _a.backgroundColor, otherBlueprintTabProperties = __rest(_a, ["title", "dontShrink", "className", "backgroundColor"]);
+    var flexStyles = dontShrink ? { flexShrink: 0 } : {};
+    var colorStyles = {};
+    if (!!backgroundColor) {
+        var color = Color("#ffffff");
+        try {
+            color = Color(backgroundColor);
+        }
+        catch (ex) {
+            console.warn("Received invalid background color for tag: " + backgroundColor);
+        }
+        colorStyles = {
+            backgroundColor: "" + color.rgb().toString(),
+            color: color.isLight() ? "#000" : "#fff",
+        };
+    }
+    var extraStyles = (dontShrink || !!backgroundColor) ? { style: __assign(__assign({}, flexStyles), colorStyles) } : {};
+    return __assign(__assign({ key: otherBlueprintTabProperties.id, className: className + (" " + eccgui + "-tabs"), title: typeof title === "string" ? React.createElement(TabTitle, { text: title }) : title }, otherBlueprintTabProperties), extraStyles);
+};
+/*
+
+TODO: Try to overload the original Tab element. Currently it does not work
+(at least inside Storybook) because the set displayName is overwritten and
+Blueprints Tabs integration cannot match the new Tab element correctly by
+checking the displayName.
+
+const Tab = (tabProps: TabProps) => {
+    return <BlueprintTab
+        {...transformTabProperties(tabProps)}
+    />;
+}
+
+Tab.displayName = BlueprintTab.displayName;
+//*/
+/*
+import { AbstractPureComponent2, Classes } from "@blueprintjs/core";
+class Tab extends AbstractPureComponent2<TabProps> {
+    public static defaultProps: Partial<TabProps> = {
+        disabled: false,
+        //dontShrink: false,
+    };
+
+    constructor(props: TabProps) {
+        //const { title, ...otherProps} = transformTabProperties(props);
+        //const newProps = {...otherProps, title: props.title}
+        //console.log(newProps);
+        super(props);
+    }
+
+    public static displayName = BlueprintTab.displayName;
+
+    // this component is never rendered directly; see BlueprintTabs#renderTabPanel()
+    public render() {
+        const { className, panel } = this.props;
+        return (
+            <div className={`${Classes.TAB_PANEL} ${className}`} role="tablist">
+                {panel}
+            </div>
+        );
+    }
+}
+
+//*
+console.log(Tab.displayName);
+export default Tab;
+//*/
+export default BlueprintTab;
+//# sourceMappingURL=Tab.js.map

package/dist/es5/components/Tabs/Tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../../../src/components/Tabs/Tab.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACH,GAAG,IAAI,YAAY,EAEtB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,QAA2B,MAAM,YAAY,CAAC;AAqBrD,uDAAuD;AACvD,MAAM,CAAC,IAAM,oBAAoB,GAAG,UAAC,KAAe,IAAO,OAAO,0CAAG,KAAK,CAAC,KAAK,CAAI,CAAA,CAAA,CAAC,CAAA;AAErF,MAAM,CAAC,IAAM,sBAAsB,GAAG,UAAC,EAM5B;IALP,IAAA,KAAK,WAAA,EACL,kBAAgB,EAAhB,UAAU,mBAAC,KAAK,KAAA,EAChB,iBAAY,EAAZ,SAAS,mBAAC,EAAE,KAAA,EACZ,eAAe,qBAAA,EACZ,2BAA2B,cALK,uDAMtC,CADiC;IAE9B,IAAM,UAAU,GAAG,UAAU,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,CAAC,EAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IACtD,IAAI,WAAW,GAAG,EAAE,CAAC;IACrB,IAAI,CAAC,CAAC,eAAe,EAAE;QACnB,IAAI,KAAK,GAAG,KAAK,CAAC,SAAS,CAAC,CAAA;QAC5B,IAAI;YACA,KAAK,GAAG,KAAK,CAAC,eAAe,CAAC,CAAC;SAClC;QAAC,OAAM,EAAE,EAAE;YACR,OAAO,CAAC,IAAI,CAAC,6CAA6C,GAAG,eAAe,CAAC,CAAA;SAChF;QACD,WAAW,GAAG;YACV,eAAe,EAAE,KAAG,KAAK,CAAC,GAAG,EAAE,CAAC,QAAQ,EAAI;YAC5C,KAAK,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;SAC3C,CAAA;KACJ;IACD,IAAM,WAAW,GAAG,CAAC,UAAU,IAAI,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,EAAC,KAAK,wBAAM,UAAU,GAAK,WAAW,CAAC,EAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IACtG,2BACI,GAAG,EAAE,2BAA2B,CAAC,EAAE,EACnC,SAAS,EAAE,SAAS,IAAG,MAAI,MAAM,UAAO,CAAA,EACxC,KAAK,EAAE,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,oBAAC,QAAQ,IAAC,IAAI,EAAE,KAAK,GAAI,CAAC,CAAC,CAAC,KAAK,IACjE,2BAA2B,GAC3B,WAAW,EACjB;AACL,CAAC,CAAA;AAED;;;;;;;;;;;;;;IAcI;AAEJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA+BI;AAEJ,eAAe,YAAY,CAAC"}

package/dist/es5/components/Tabs/TabTitle.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import Button from "../Button/Button";
+/**
+ * Gives control about functionality and layout of the tab titles.
+ */
+var TabTitle = function (_a) {
+    var text = _a.text, tooltip = _a.tooltip, titlePrefix = _a.titlePrefix, titleSuffix = _a.titleSuffix, _b = _a.large, large = _b === void 0 ? false : _b, _c = _a.small, small = _c === void 0 ? false : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
+    return (React.createElement(Button, { className: eccgui + "-tabtitle", minimal: true, tabIndex: -1, text: text, tooltip: disabled ? undefined : tooltip, tooltipProperties: {
+            tooltipProps: {
+                boundary: "window"
+            }
+        }, icon: React.createElement(React.Fragment, null, titlePrefix), rightIcon: React.createElement(React.Fragment, null, titleSuffix), small: small, large: large, disabled: disabled }));
+};
+export default TabTitle;
+//# sourceMappingURL=TabTitle.js.map

package/dist/es5/components/Tabs/TabTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabTitle.js","sourceRoot":"","sources":["../../../../src/components/Tabs/TabTitle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,MAAM,MAAM,kBAAkB,CAAC;AAmCtC;;GAEG;AACH,IAAM,QAAQ,GAAG,UAAC,EAQF;QAPZ,IAAI,UAAA,EACJ,OAAO,aAAA,EACP,WAAW,iBAAA,EACX,WAAW,iBAAA,EACX,aAAW,EAAX,KAAK,mBAAC,KAAK,KAAA,EACX,aAAW,EAAX,KAAK,mBAAC,KAAK,KAAA,EACX,gBAAc,EAAd,QAAQ,mBAAC,KAAK,KAAA;IAEd,OAAO,CACH,oBAAC,MAAM,IACH,SAAS,EAAK,MAAM,cAAW,EAC/B,OAAO,QACP,QAAQ,EAAE,CAAC,CAAC,EACZ,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,EACvC,iBAAiB,EAAE;YACf,YAAY,EAAE;gBACV,QAAQ,EAAE,QAAQ;aACrB;SACJ,EACD,IAAI,EAAE,0CAAG,WAAW,CAAI,EACxB,SAAS,EAAE,0CAAG,WAAW,CAAI,EAC7B,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,GACpB,CACL,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/es5/components/Tabs/Tabs.js

@@ -21,29 +21,19 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React from 'react';
-import { Tabs as BlueprintTabs, Tab, } from "@blueprintjs/core";
+import { Tabs as BlueprintTabs, } from "@blueprintjs/core";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-import Button from "../Button/Button";
-var createBlueprintTab = function (_a) {
-    var titlePrefix = _a.titlePrefix, title = _a.title, titleSuffix = _a.titleSuffix, _b = _a.dontShrink, dontShrink = _b === void 0 ? false : _b, _c = _a.large, large = _c === void 0 ? false : _c, _d = _a.small, small = _d === void 0 ? false : _d, otherBlueprintTabProperties = __rest(_a, ["titlePrefix", "title", "titleSuffix", "dontShrink", "large", "small"]);
-    var extraStyles = dontShrink ? { style: { flexShrink: 0 } } : {};
-    return React.createElement(Tab, __assign({ key: otherBlueprintTabProperties.id, title: (React.createElement(Button
-        //title={title}
-        , { 
-            //title={title}
-            minimal: true, tabIndex: -1, text: title, icon: React.createElement(React.Fragment, null, titlePrefix), rightIcon: React.createElement(React.Fragment, null, titleSuffix), small: small, large: large })) }, otherBlueprintTabProperties, extraStyles));
-};
-var createDeprecatedTab = function (_a) {
-    var tabId = _a.tabId, tabTitle = _a.tabTitle, tabContent = _a.tabContent, _b = _a.dontShrink, dontShrink = _b === void 0 ? false : _b;
-    var extraStyles = dontShrink ? { style: { flexShrink: 0 } } : {};
-    return React.createElement(Tab, __assign({ key: tabId, id: tabId, title: tabTitle, panel: tabContent }, extraStyles));
-};
+import Tab, { transformTabProperties } from "./Tab";
 function Tabs(_a) {
-    var activeTab = _a.activeTab, _b = _a.tabs, tabs = _b === void 0 ? [] : _b, onTabClick = _a.onTabClick, _c = _a.prefixTabNames, prefixTabNames = _c === void 0 ? 'tabBar' : _c, _d = _a.className, className = _d === void 0 ? "" : _d, allowScrollbars = _a.allowScrollbars, restProps = __rest(_a, ["activeTab", "tabs", "onTabClick", "prefixTabNames", "className", "allowScrollbars"]);
-    return (React.createElement(BlueprintTabs, __assign({ onChange: onTabClick, selectedTabId: activeTab, className: className +
-            (allowScrollbars ? " " + eccgui + "-tabs--scrollablelist" : "") }, restProps), tabs.map(function (tab) {
-        return !!tab.id ? createBlueprintTab(__assign({ className: prefixTabNames + "-header-" + tab.id }, tab)) : createDeprecatedTab(__assign({ className: prefixTabNames + "-header-" + tab.tabId }, tab));
-    })));
+    // TODO React.Children.toArray(children).forEach((e) => {console.log(e)});
+    var _b = _a.tabs, tabs = _b === void 0 ? [] : _b, children = _a.children, _c = _a.className, className = _c === void 0 ? "" : _c, allowScrollbars = _a.allowScrollbars, restProps = __rest(_a, ["tabs", "children", "className", "allowScrollbars"]);
+    return (React.createElement(BlueprintTabs, __assign({ className: className +
+            (" " + eccgui + "-tabs") +
+            (allowScrollbars ? " " + eccgui + "-tabs--scrollablelist" : "") }, restProps, { animate: false }), !!tabs ? (tabs.map(function (tab) {
+        var e = React.createElement(Tab, __assign({}, transformTabProperties(tab)));
+        // TODO console.log(e);
+        return e;
+    })) : (children)));
 }
 ;
 export default Tabs;

package/dist/es5/components/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACH,IAAI,IAAI,aAAa,EAErB,GAAG,GAEN,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,WAAW,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,MAAM,MAAM,kBAAkB,CAAC;AAgBtC,IAAM,kBAAkB,GAAG,UAAC,EAQjB;IAPP,IAAA,WAAW,iBAAA,EACX,KAAK,WAAA,EACL,WAAW,iBAAA,EACX,kBAAgB,EAAhB,UAAU,mBAAC,KAAK,KAAA,EAChB,aAAW,EAAX,KAAK,mBAAC,KAAK,KAAA,EACX,aAAW,EAAX,KAAK,mBAAC,KAAK,KAAA,EACR,2BAA2B,cAPN,uEAQ3B,CADiC;IAE9B,IAAM,WAAW,GAAG,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAC,UAAU,EAAE,CAAC,EAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IACjE,OAAO,oBAAC,GAAG,aACP,GAAG,EAAE,2BAA2B,CAAC,EAAE,EACnC,KAAK,EAAE,CACH,oBAAC,MAAM;QACH,eAAe;;YAAf,eAAe;YACf,OAAO,QACP,QAAQ,EAAE,CAAC,CAAC,EACZ,IAAI,EAAE,KAAK,EACX,IAAI,EAAE,0CAAG,WAAW,CAAI,EACxB,SAAS,EAAE,0CAAG,WAAW,CAAI,EAC7B,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,GACd,CACL,IACG,2BAA2B,EAC3B,WAAW,EACjB,CAAC;AACP,CAAC,CAAA;AAUD,IAAM,mBAAmB,GAAG,UAAC,EAKR;QAJjB,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,UAAU,gBAAA,EACV,kBAAgB,EAAhB,UAAU,mBAAC,KAAK,KAAA;IAEhB,IAAM,WAAW,GAAG,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAC,UAAU,EAAE,CAAC,EAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IACjE,OAAO,oBAAC,GAAG,aACP,GAAG,EAAE,KAAK,EACV,EAAE,EAAE,KAAK,EACT,KAAK,EAAE,QAAQ,EACf,KAAK,EAAE,UAAU,IACb,WAAW,EACjB,CAAC;AACP,CAAC,CAAA;AAUD,SAAS,IAAI,CACT,EAQY;IAPR,IAAA,SAAS,eAAA,EACT,YAAO,EAAP,IAAI,mBAAC,EAAE,KAAA,EACP,UAAU,gBAAA,EACV,sBAAuB,EAAvB,cAAc,mBAAC,QAAQ,KAAA,EACvB,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EACd,eAAe,qBAAA,EACZ,SAAS,cAPhB,qFAQC,CADe;IAEhB,OAAO,CACH,oBAAC,aAAa,aACV,QAAQ,EAAE,UAAU,EACpB,aAAa,EAAE,SAAS,EACxB,SAAS,EACL,SAAS;YACT,CAAC,eAAe,CAAC,CAAC,CAAC,MAAI,MAAM,0BAAuB,CAAC,CAAC,CAAC,EAAE,CAAC,IAE1D,SAAS,GAGT,IAAI,CAAC,GAAG,CAAC,UAAA,GAAG;QACR,OAAO,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,YAChC,SAAS,EAAK,cAAc,gBAAW,GAAG,CAAC,EAAI,IAC5C,GAAG,EACR,CAAC,CAAC,CAAC,mBAAmB,YACpB,SAAS,EAAK,cAAc,gBAAW,GAAG,CAAC,KAAO,IAC/C,GAAG,EACR,CAAC;IACP,CAAC,CAAC,CAEM,CACnB,CAAC;AACN,CAAC;AAAA,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACH,IAAI,IAAI,aAAa,GAExB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,WAAW,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,GAAG,EAAE,EAAY,sBAAsB,EAAE,MAAM,OAAO,CAAC;AAgB9D,SAAS,IAAI,CACT,EAMY;IAEZ,0EAA0E;IAPtE,IAAA,YAAO,EAAP,IAAI,mBAAC,EAAE,KAAA,EACP,QAAQ,cAAA,EACR,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EACd,eAAe,qBAAA,EACZ,SAAS,cALhB,oDAMC,CADe;IAKhB,OAAO,CACH,oBAAC,aAAa,aACV,SAAS,EACL,SAAS;aACT,MAAI,MAAM,UAAO,CAAA;YACjB,CAAC,eAAe,CAAC,CAAC,CAAC,MAAI,MAAM,0BAAuB,CAAC,CAAC,CAAC,EAAE,CAAC,IAE1D,SAAS,IACb,OAAO,EAAE,KAAK,KAEb,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CACN,IAAI,CAAC,GAAG,CAAC,UAAA,GAAG;QACR,IAAM,CAAC,GAAG,oBAAC,GAAG,eAAK,sBAAsB,CAAC,GAAG,CAAC,EAAI,CAAC;QACnD,uBAAuB;QACvB,OAAO,CAAC,CAAC;IACb,CAAC,CAAC,CACL,CAAC,CAAC,CAAC,CACA,QAAQ,CACX,CACW,CACnB,CAAC;AACN,CAAC;AAAA,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/es5/components/Tag/Tag.js

@@ -30,7 +30,13 @@ function Tag(_a) {
     otherProps['interactive'] = ((_b = otherProps.interactive) !== null && _b !== void 0 ? _b : !!otherProps.onClick) ? true : false;
     if (!!backgroundColor) {
         var additionalStyles = (_c = otherProps.style) !== null && _c !== void 0 ? _c : {};
-        var color = Color(backgroundColor);
+        var color = Color("#ffffff");
+        try {
+            color = Color(backgroundColor);
+        }
+        catch (ex) {
+            console.warn("Received invalid background color for tag: " + backgroundColor);
+        }
         otherProps['style'] = __assign(__assign({}, additionalStyles), {
             backgroundColor: color.rgb().toString(),
             color: color.isLight() ? "#000" : "#fff",

package/dist/es5/components/Tag/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../../../src/components/Tag/Tag.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACH,GAAG,IAAI,YAAY,EAEtB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAyCtE,SAAS,GAAG,CAAC,EAQF;;IAPP,IAAA,QAAQ,cAAA,EACR,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EACd,gBAAmB,EAAnB,QAAQ,mBAAG,QAAQ,KAAA,EACnB,eAAc,EAAd,OAAO,mBAAG,IAAI,KAAA,EACd,aAAa,EAAb,KAAK,mBAAG,KAAK,KAAA,EACb,eAAe,qBAAA,EACZ,UAAU,cAPJ,4EAQZ,CADgB;IAEb,UAAU,CAAC,aAAa,CAAC,GAAG,CAAA,MAAA,UAAU,CAAC,WAAW,mCAAI,CAAC,CAAC,UAAU,CAAC,OAAO,EAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;IAC1F,IAAI,CAAC,CAAC,eAAe,EAAE;QACnB,IAAM,gBAAgB,GAAG,MAAA,UAAU,CAAC,KAAK,mCAAI,EAAE,CAAC;QAChD,IAAM,KAAK,GAAG,KAAK,CAAC,eAAe,CAAC,CAAC;QACrC,UAAU,CAAC,OAAO,CAAC,yBACZ,gBAAgB,GAChB;YACC,eAAe,EAAE,KAAK,CAAC,GAAG,EAAE,CAAC,QAAQ,EAAE;YACvC,KAAK,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;SAC3C,CACJ,CAAA;KACJ;IACD,OAAO,CACH,oBAAC,YAAY,eACL,UAAU,IACd,SAAS,EACF,MAAM,mBAAc,MAAM,cAAS,QAAQ,aAAU;YACxD,CAAC,KAAK,CAAC,CAAC,CAAC,MAAI,MAAM,gBAAa,CAAC,CAAC,CAAC,EAAE,CAAC;YACtC,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,GAAG,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,EAEtC,OAAO,EAAE,OAAO,KAEf,QAAQ,CACE,CAClB,CAAC;AACN,CAAC;AAAA,CAAC;AAEF,eAAe,GAAG,CAAC"}
+{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../../../src/components/Tag/Tag.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACH,GAAG,IAAI,YAAY,EAEtB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AA0CtE,SAAS,GAAG,CAAC,EAQF;;IAPP,IAAA,QAAQ,cAAA,EACR,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EACd,gBAAmB,EAAnB,QAAQ,mBAAG,QAAQ,KAAA,EACnB,eAAc,EAAd,OAAO,mBAAG,IAAI,KAAA,EACd,aAAa,EAAb,KAAK,mBAAG,KAAK,KAAA,EACb,eAAe,qBAAA,EACZ,UAAU,cAPJ,4EAQZ,CADgB;IAEb,UAAU,CAAC,aAAa,CAAC,GAAG,CAAA,MAAA,UAAU,CAAC,WAAW,mCAAI,CAAC,CAAC,UAAU,CAAC,OAAO,EAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;IAC1F,IAAI,CAAC,CAAC,eAAe,EAAE;QACnB,IAAM,gBAAgB,GAAG,MAAA,UAAU,CAAC,KAAK,mCAAI,EAAE,CAAC;QAChD,IAAI,KAAK,GAAG,KAAK,CAAC,SAAS,CAAC,CAAA;QAC5B,IAAI;YACA,KAAK,GAAG,KAAK,CAAC,eAAe,CAAC,CAAC;SAClC;QAAC,OAAM,EAAE,EAAE;YACR,OAAO,CAAC,IAAI,CAAC,6CAA6C,GAAG,eAAe,CAAC,CAAA;SAChF;QAED,UAAU,CAAC,OAAO,CAAC,yBACZ,gBAAgB,GAChB;YACC,eAAe,EAAE,KAAK,CAAC,GAAG,EAAE,CAAC,QAAQ,EAAE;YACvC,KAAK,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;SAC3C,CACJ,CAAA;KACJ;IACD,OAAO,CACH,oBAAC,YAAY,eACL,UAAU,IACd,SAAS,EACF,MAAM,mBAAc,MAAM,cAAS,QAAQ,aAAU;YACxD,CAAC,KAAK,CAAC,CAAC,CAAC,MAAI,MAAM,gBAAa,CAAC,CAAC,CAAC,EAAE,CAAC;YACtC,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,GAAG,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,EAEtC,OAAO,EAAE,OAAO,KAEf,QAAQ,CACE,CAClB,CAAC;AACN,CAAC;AAAA,CAAC;AAEF,eAAe,GAAG,CAAC"}

package/dist/es5/extensions/react-flow/edges/utils.js

@@ -1,18 +1,112 @@
-import { getSmoothStepPath } from "react-flow-renderer";
+import { getSmoothStepPath, Position } from "react-flow-renderer";
+var posCorrectionEdge = function (_a) {
+    var sourceX = _a.sourceX, sourceY = _a.sourceY, sourcePosition = _a.sourcePosition, targetX = _a.targetX, targetY = _a.targetY, targetPosition = _a.targetPosition, _b = _a.correctionLength, correctionLength = _b === void 0 ? 7 : _b, _c = _a.correctionRadius, correctionRadius = _c === void 0 ? 7 : _c;
+    var newSourceX = sourceX;
+    var newSourceY = sourceY;
+    var newTargetX = targetX;
+    var newTargetY = targetY;
+    var startCommandCorrection = "M " + sourceX + "," + sourceY + " ";
+    var endCommandCorrection = "";
+    if (sourcePosition === Position.Left && sourceX < targetX) {
+        newSourceX = newSourceX - correctionLength;
+        if (sourceY < targetY) {
+            newSourceY = sourceY + 2 * correctionRadius;
+            startCommandCorrection = startCommandCorrection + (" L " + newSourceX + "," + sourceY + " A " + correctionRadius + " " + correctionRadius + " " + 180 + " " + 1 + " " + 0 + " ");
+        }
+        else {
+            newSourceY = sourceY - 2 * correctionRadius;
+            startCommandCorrection = startCommandCorrection + (" L " + newSourceX + "," + sourceY + " A " + correctionRadius + " " + correctionRadius + " " + 180 + " " + 1 + " " + 1 + " ");
+        }
+    }
+    if (sourcePosition === Position.Right && sourceX > targetX) {
+        newSourceX = targetPosition === Position.Right ? newSourceX + correctionLength + correctionRadius : newSourceX + correctionLength;
+        if (sourceY < targetY) {
+            newSourceY = targetPosition === Position.Right ? sourceY + 1 * correctionRadius : sourceY + 2 * correctionRadius;
+            startCommandCorrection = targetPosition === Position.Right ? (startCommandCorrection + (" L " + (newSourceX - correctionRadius) + "," + sourceY + " A " + correctionRadius + " " + correctionRadius + " " + 90 + " " + 0 + " " + 1 + " ")) : (startCommandCorrection + (" L " + newSourceX + "," + sourceY + " A " + correctionRadius + " " + correctionRadius + " " + 180 + " " + 1 + " " + 1 + " "));
+        }
+        else {
+            newSourceY = targetPosition === Position.Right ? sourceY - 1 * correctionRadius : sourceY - 2 * correctionRadius;
+            startCommandCorrection = targetPosition === Position.Right ? (startCommandCorrection + (" L " + (newSourceX - correctionRadius) + "," + sourceY + " A " + correctionRadius + " " + correctionRadius + " " + 90 + " " + 0 + " " + 0 + " ")) : (startCommandCorrection + (" L " + newSourceX + "," + sourceY + " A " + correctionRadius + " " + correctionRadius + " " + 180 + " " + 1 + " " + 0 + " "));
+        }
+    }
+    if (targetPosition === Position.Left && sourceX > targetX) {
+        newTargetX = newTargetX - correctionLength;
+        if (sourceY < targetY) {
+            newTargetY = targetY - 2 * correctionRadius;
+            endCommandCorrection = " A " + correctionRadius + " " + correctionRadius + " " + 180 + " " + 1 + " " + 0 + " " + newTargetX + "," + targetY + " L " + targetX + "," + targetY;
+        }
+        else {
+            newTargetY = targetY + 2 * correctionRadius;
+            endCommandCorrection = " A " + correctionRadius + " " + correctionRadius + " " + 180 + " " + 1 + " " + 1 + " " + newTargetX + "," + targetY + " L " + targetX + "," + targetY;
+        }
+    }
+    if (targetPosition === Position.Right && sourceX < targetX) {
+        newTargetX = newTargetX + correctionLength;
+        if (sourceY < targetY) {
+            newTargetY = targetY - 2 * correctionRadius;
+            endCommandCorrection = " A " + correctionRadius + " " + correctionRadius + " " + 180 + " " + 1 + " " + 1 + " " + newTargetX + "," + targetY + " L " + targetX + "," + targetY;
+        }
+        else {
+            newTargetY = targetY + 2 * correctionRadius;
+            endCommandCorrection = " A " + correctionRadius + " " + correctionRadius + " " + 180 + " " + 1 + " " + 0 + " " + newTargetX + "," + targetY + " L " + targetX + "," + targetY;
+        }
+    }
+    return {
+        newSourceX: newSourceX,
+        newSourceY: newSourceY,
+        newTargetX: newTargetX,
+        newTargetY: newTargetY,
+        startCommandCorrection: startCommandCorrection,
+        endCommandCorrection: endCommandCorrection,
+    };
+};
+var pathCommandCorrection = function (_a) {
+    var pathCommand = _a.pathCommand, startCorrection = _a.startCorrection, endCorrection = _a.endCorrection;
+    return startCorrection + pathCommand.substring(1) + endCorrection;
+};
 export var drawEdgeStraight = function (_a) {
-    var sourceX = _a.sourceX, sourceY = _a.sourceY, targetX = _a.targetX, targetY = _a.targetY;
-    return "M " + sourceX + "," + sourceY + "L " + targetX + "," + targetY;
+    var sourceX = _a.sourceX, sourceY = _a.sourceY, sourcePosition = _a.sourcePosition, targetX = _a.targetX, targetY = _a.targetY, targetPosition = _a.targetPosition;
+    var corrections = posCorrectionEdge({
+        sourceX: sourceX,
+        sourceY: sourceY,
+        sourcePosition: sourcePosition,
+        targetX: targetX,
+        targetY: targetY,
+        targetPosition: targetPosition,
+        correctionRadius: 0
+    });
+    var pathCommand = "M " + corrections.newSourceX + "," + corrections.newSourceY + "L " + corrections.newTargetX + "," + corrections.newTargetY;
+    return pathCommandCorrection({
+        pathCommand: pathCommand,
+        startCorrection: corrections.startCommandCorrection,
+        endCorrection: corrections.endCommandCorrection,
+    });
 };
 export var drawEdgeStep = function (_a) {
     var sourceX = _a.sourceX, sourceY = _a.sourceY, sourcePosition = _a.sourcePosition, targetX = _a.targetX, targetY = _a.targetY, targetPosition = _a.targetPosition, _b = _a.data, data = _b === void 0 ? {} : _b;
-    return getSmoothStepPath({
+    var corrections = posCorrectionEdge({
         sourceX: sourceX,
         sourceY: sourceY,
         sourcePosition: sourcePosition,
         targetX: targetX,
         targetY: targetY,
         targetPosition: targetPosition,
-        borderRadius: data.stepCornerRadius || 10
+        correctionLength: data.stepCornerRadius || 7,
+        correctionRadius: data.stepCornerRadius || 7,
+    });
+    var pathCommand = getSmoothStepPath({
+        sourceX: corrections.newSourceX,
+        sourceY: corrections.newSourceY,
+        sourcePosition: sourcePosition,
+        targetX: corrections.newTargetX,
+        targetY: corrections.newTargetY,
+        targetPosition: targetPosition,
+        borderRadius: data.stepCornerRadius || 7
+    });
+    return pathCommandCorrection({
+        pathCommand: pathCommand,
+        startCorrection: corrections.startCommandCorrection,
+        endCorrection: corrections.endCommandCorrection,
     });
 };
 //# sourceMappingURL=utils.js.map