@deviceinsight/ng-ui-components 6.18.0 → 6.19.0

package/lib/esm/src/components/slider/useLimitStyling.js

@@ -0,0 +1,49 @@
+import { useCallback, useEffect, useState } from 'react';
+export default function useLimitStyling(limit, min, max) {
+    const [slider, setSlider] = useState(null);
+    useEffect(() => {
+        if (slider) {
+            const containerEl = slider.querySelector('.rc-slider-rail');
+            if (!containerEl)
+                throw new Error('.rc-slider-rail element missing');
+            const disabledAreaEl = containerEl?.querySelector(`.disabled-area-element`);
+            const sliderWidth = containerEl.getBoundingClientRect().width;
+            if (disabledAreaEl) {
+                if (limit == null) {
+                    disabledAreaEl.remove();
+                }
+                else {
+                    const width = Math.round(((max - limit) / (max - min)) * sliderWidth);
+                    disabledAreaEl.style.width = `${width}px`;
+                }
+            }
+            else if (limit != null) {
+                const width = Math.round(((max - limit) / (max - min)) * sliderWidth);
+                const disabledAreaEl = document.createElement('div');
+                disabledAreaEl.classList.add('disabled-area-element');
+                disabledAreaEl.style.width = `${width}px`;
+                containerEl.appendChild(disabledAreaEl);
+            }
+        }
+    }, [limit, slider, min, max]);
+    const updateLimitAreaSize = useCallback(() => {
+        if (slider && limit != null) {
+            const containerEl = slider.querySelector('.rc-slider-rail');
+            if (!containerEl)
+                throw new Error('.rc-slider-rail element missing');
+            const disabledAreaEl = containerEl?.querySelector(`.disabled-area-element`);
+            const sliderWidth = containerEl.getBoundingClientRect().width;
+            if (disabledAreaEl) {
+                const width = Math.round(((max - limit) / (max - min)) * sliderWidth);
+                disabledAreaEl.style.width = `${width}px`;
+            }
+        }
+    }, [limit, max, min, slider]);
+    useEffect(() => {
+        if (slider) {
+            const resizeObserver = new ResizeObserver(() => updateLimitAreaSize());
+            resizeObserver.observe(slider);
+        }
+    }, [slider, updateLimitAreaSize]);
+    return setSlider;
+}

package/lib/esm/src/components/svg/SvgImage.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Modification } from './types';
+export declare type Props = {
+    /** base64 encoded content of the SVG file */
+    imageData: string | null | undefined;
+    /** list of modifications that should be applied to the svg elements */
+    modifications?: Modification[];
+    /** called with list of conflicting IDs which means IDs existing in the DOM and duplicated by the elements from the SVG */
+    onConflict?: (conflictingIds: string[]) => void;
+};
+export default function SvgImage({ imageData, modifications, onConflict }: Props): React.JSX.Element;
+//# sourceMappingURL=SvgImage.d.ts.map

package/lib/esm/src/components/svg/SvgImage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SvgImage.d.ts","sourceRoot":"","sources":["../../../../../src/components/svg/SvgImage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAG/C,OAAO,EAAC,YAAY,EAAC,MAAM,SAAS,CAAC;AAIrC,oBAAY,KAAK,GAAG;IACnB,6CAA6C;IAC7C,SAAS,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAErC,uEAAuE;IACvE,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;IAE/B,0HAA0H;IAC1H,UAAU,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CAChD,CAAC;AAyBF,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAAC,SAAS,EAAE,aAAa,EAAE,UAAU,EAAC,EAAE,KAAK,qBAiB7E"}

package/lib/esm/src/components/svg/SvgImage.js

@@ -0,0 +1,37 @@
+import React, { useEffect, useRef } from 'react';
+import { useHistory } from 'react-router-dom';
+import findConflicts from './utils/findConflicts';
+import renderSvg from './utils/renderSvg';
+function useGlobalStyleElement() {
+    const styleElementRef = useRef(null);
+    useEffect(() => {
+        const styleElement = document.createElement('style');
+        // WebKit hack
+        styleElement.appendChild(document.createTextNode(''));
+        if (document && document.head) {
+            document.head.appendChild(styleElement);
+        }
+        styleElementRef.current = styleElement;
+        return () => {
+            if (document && document.head && styleElement) {
+                document.head.removeChild(styleElement);
+            }
+        };
+    }, []);
+    return styleElementRef.current;
+}
+export default function SvgImage({ imageData, modifications, onConflict }) {
+    const svgWrapperRef = useRef(null);
+    const styleElement = useGlobalStyleElement();
+    const { push } = useHistory();
+    useEffect(() => {
+        const { current: wrapper } = svgWrapperRef;
+        if (wrapper && imageData) {
+            const svgElement = renderSvg(wrapper, imageData, modifications, styleElement, push);
+            if (svgElement && onConflict) {
+                return findConflicts(svgElement, onConflict);
+            }
+        }
+    }, [imageData, modifications, onConflict, push, styleElement]);
+    return React.createElement("div", { ref: svgWrapperRef });
+}

package/lib/esm/src/components/svg/storybookHelper.d.ts

@@ -0,0 +1,7 @@
+export declare const simpleImageData: string;
+export declare const simpleImageWithTextData: string;
+export declare const animatedXYDotData: string;
+export declare const animatedXDotData: string;
+export declare const imageWithIdData: string;
+export declare const rotatingImageData: string;
+//# sourceMappingURL=storybookHelper.d.ts.map

package/lib/esm/src/components/svg/storybookHelper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"storybookHelper.d.ts","sourceRoot":"","sources":["../../../../../src/components/svg/storybookHelper.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,QASpB,CAAC;AAET,eAAO,MAAM,uBAAuB,QAYnC,CAAC;AACF,eAAO,MAAM,iBAAiB,QAO7B,CAAC;AACF,eAAO,MAAM,gBAAgB,QAQ5B,CAAC;AAEF,eAAO,MAAM,eAAe,QAI1B,CAAC;AAEH,eAAO,MAAM,iBAAiB,QAY5B,CAAC"}

package/lib/esm/src/components/svg/storybookHelper.js

@@ -0,0 +1,53 @@
+const encode = (data) => 'data:image/svg+xml;base64,' + btoa(data);
+export const simpleImageData = encode(`<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600" viewBox="-300 -300 600 600">
+<circle r="292.3"/>
+<g style="fill:#f1cd43" transform="scale(0.9783764)" id="content">
+	<circle r="50"/>
+	<path d="M75,0A75,75 0 0,0 37.5-64.951905L125-216.50635A250,250 0 0,1 250,0Z" id="bld"/>
+	<use xlink:href="#bld" transform="rotate(120)"/>
+	<use xlink:href="#bld" transform="rotate(240)"/>
+</g>
+</svg>`);
+export const simpleImageWithTextData = encode(`<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600" viewBox="-300 -300 600 600">
+<circle r="292.3"/>
+<g style="fill:#f1cd43" transform="scale(0.9783764)" id="content">
+	<circle r="50"/>
+	<path d="M75,0A75,75 0 0,0 37.5-64.951905L125-216.50635A250,250 0 0,1 250,0Z" id="bld"/>
+	<use xlink:href="#bld" transform="rotate(120)"/>
+	<use xlink:href="#bld" transform="rotate(240)"/>
+</g>
+<text id="myText" font-size="35px" xml:space="preserve"><tspan  x="-230" y="-10">Google</tspan></text>
+</svg>`);
+export const animatedXYDotData = encode(`<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600" viewBox="-300 -300 600 600">
+<rect style="fill:#f1cd43" x="-300" y="-300" width="600" height="600" />
+<circle id="myCircle" r="20" fill="#0000aa" cx="-170" cy="-20"/>
+</svg>
+`);
+export const animatedXDotData = encode(`<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600" viewBox="-300 -300 600 600">
+<rect style="fill:#bababa" x="-300" y="-300" width="600" height="600" />
+<rect id="myCircle-boundaries" style="fill:#f1cd43" x="-100" y="-200" width="300" height="400" />
+<circle id="myCircle" r="15" fill="#0000aa" cx="-170" cy="-20"/>
+</svg>
+`);
+export const imageWithIdData = encode(`<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="100" viewBox="-300 -300 600 600">
+<rect id="myId" style="fill:#bababa" x="-300" y="-300" width="600" height="100" />
+</svg>
+`);
+export const rotatingImageData = encode(`<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600" viewBox="-300 -300 600 600">
+<circle r="292.3"/>
+<g style="fill:#f1cd43" transform="translate(0, 0)" id="content">
+	<circle r="500" fill="transparent"/>
+	<circle r="50"/>
+    <path d="M75,0A75,75 0 0,0 37.5-64.951905L125-216.50635A250,250 0 0,1 250,0Z" id="bld"/>
+    <use xlink:href="#bld" transform="rotate(120)"/>
+    <use xlink:href="#bld" transform="rotate(240)"/>
+	</g>
+</g>
+</svg>
+`);

package/lib/esm/src/components/svg/types.d.ts

@@ -0,0 +1,58 @@
+export declare type SetVisibility = {
+    type: 'visibility';
+    visible: boolean;
+    target: string;
+};
+declare type SetText = {
+    type: 'text';
+    text: string;
+    target: string;
+};
+declare type SetColor = {
+    type: 'color';
+    color: string;
+    target: string;
+};
+export declare type SetHyperlink = {
+    type: 'hyperlink';
+    target: string;
+    link: string;
+    internalLink: boolean;
+    hoverColor?: string;
+};
+export declare type AddEventListener = {
+    type: 'eventListener';
+    target: string;
+    eventType: string;
+    listener: EventListenerOrEventListenerObject;
+    options?: boolean | AddEventListenerOptions | undefined;
+};
+declare type AddClassNames = {
+    type: 'classNames';
+    target: string;
+    classNames: string[];
+};
+export declare type PositionX = {
+    type: 'positionX';
+    target: string;
+    position: number;
+};
+export declare type PositionY = {
+    type: 'positionY';
+    target: string;
+    position: number;
+};
+export declare type PositionXY = {
+    type: 'positionXY';
+    target: string;
+    positionX: number;
+    positionY: number;
+};
+declare type Rotation = {
+    type: 'rotation';
+    target: string;
+    degrees: number;
+};
+export declare type Modification = SetVisibility | SetText | SetColor | SetHyperlink | AddEventListener | AddClassNames | PositionX | PositionY | PositionXY | Rotation;
+export {};
+//# sourceMappingURL=types.d.ts.map

package/lib/esm/src/components/svg/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/svg/types.ts"],"names":[],"mappings":"AAAA,oBAAY,aAAa,GAAG;IAC3B,IAAI,EAAE,YAAY,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;CACf,CAAC;AACF,aAAK,OAAO,GAAG;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;CACf,CAAC;AACF,aAAK,QAAQ,GAAG;IACf,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CACf,CAAC;AACF,oBAAY,YAAY,GAAG;IAC1B,IAAI,EAAE,WAAW,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AACF,oBAAY,gBAAgB,GAAG;IAC9B,IAAI,EAAE,eAAe,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,kCAAkC,CAAC;IAC7C,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAAG,SAAS,CAAC;CACxD,CAAC;AACF,aAAK,aAAa,GAAG;IACpB,IAAI,EAAE,YAAY,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,EAAE,CAAC;CACrB,CAAC;AACF,oBAAY,SAAS,GAAG;IACvB,IAAI,EAAE,WAAW,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;CACjB,CAAC;AACF,oBAAY,SAAS,GAAG;IACvB,IAAI,EAAE,WAAW,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;CACjB,CAAC;AACF,oBAAY,UAAU,GAAG;IACxB,IAAI,EAAE,YAAY,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;CAClB,CAAC;AACF,aAAK,QAAQ,GAAG;IACf,IAAI,EAAE,UAAU,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;CAChB,CAAC;AACF,oBAAY,YAAY,GACrB,aAAa,GACb,OAAO,GACP,QAAQ,GACR,YAAY,GACZ,gBAAgB,GAChB,aAAa,GACb,SAAS,GACT,SAAS,GACT,UAAU,GACV,QAAQ,CAAC"}

package/lib/esm/src/components/svg/types.js

@@ -0,0 +1 @@
+export {};

package/lib/esm/src/components/svg/utils/__tests__/getMutableNodeList.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=getMutableNodeList.spec.d.ts.map

package/lib/esm/src/components/svg/utils/__tests__/getMutableNodeList.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getMutableNodeList.spec.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/svg/utils/__tests__/getMutableNodeList.spec.ts"],"names":[],"mappings":""}

package/lib/esm/src/components/svg/utils/__tests__/getMutableNodeList.spec.js

@@ -0,0 +1,24 @@
+import { describe, expect, it } from 'vitest';
+import getMutableNodeList, { parseFromString } from '../getMutableNodeList';
+const testDiFieldId = 'di-field-id-';
+const base64StringWithoutFieldIds = 'data:image/svg+xml;base64,PHN2Zz48aDE+SGk8L2gxPjwvc3ZnPg==';
+const base64StringWithFieldIds = 'data:image/svg+xml;base64,PHN2Zz48aDE+Tm9uLU11dGFibGU8L2gxPjxoMiBpZD0iZGktZmllbGQtaWQtIj5NdXRhYmxlPC9oMj48L3N2Zz4=';
+describe('get node list from svg base64 string', () => {
+    it('should return an empty list if no mutable nodes are found', () => {
+        const nodeList = getMutableNodeList(base64StringWithoutFieldIds, testDiFieldId);
+        expect(nodeList).toHaveLength(0);
+    });
+    it('should return a non-empty list if mutable nodes are found', () => {
+        const nodeList = getMutableNodeList(base64StringWithFieldIds, testDiFieldId);
+        expect(nodeList).toHaveLength(1);
+        expect(nodeList.item(0).innerHTML).toBe('Mutable');
+    });
+    it('should throw an error if there was a parsing error', () => {
+        expect(() => getMutableNodeList('wrong', testDiFieldId)).toThrow();
+    });
+    it('should remove the "svg:" namespace while parsing the input text', () => {
+        const html = '<svg:svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"><h1>Non-Mutable</h1><h2 id="di-field-id-">Mutable</h2></svg:svg>';
+        const document = parseFromString(`data:image/svg+xml;base64,${btoa(html)}`);
+        expect(document.children[0].nodeName).toEqual('svg');
+    });
+});

package/lib/esm/src/components/svg/utils/createHyperlinkModification.d.ts

@@ -0,0 +1,4 @@
+import { SetHyperlink } from '../types';
+export declare const SVG_NS = "http://www.w3.org/2000/svg";
+export default function createHyperlinkModification(element: HTMLElement, { hoverColor, internalLink, link }: SetHyperlink, globalStyleElement: HTMLStyleElement | null, onInternalLinkChange: ((link: string) => void) | undefined): void;
+//# sourceMappingURL=createHyperlinkModification.d.ts.map

package/lib/esm/src/components/svg/utils/createHyperlinkModification.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createHyperlinkModification.d.ts","sourceRoot":"","sources":["../../../../../../src/components/svg/utils/createHyperlinkModification.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAC,MAAM,UAAU,CAAC;AAGtC,eAAO,MAAM,MAAM,+BAA+B,CAAC;AAEnD,MAAM,CAAC,OAAO,UAAU,2BAA2B,CAClD,OAAO,EAAE,WAAW,EACpB,EAAC,UAAU,EAAE,YAAY,EAAE,IAAI,EAAC,EAAE,YAAY,EAC9C,kBAAkB,EAAE,gBAAgB,GAAG,IAAI,EAC3C,oBAAoB,EAAE,CAAC,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,QAiB1D"}

package/lib/esm/src/components/svg/utils/createHyperlinkModification.js

@@ -0,0 +1,35 @@
+import { uuidV4 } from '../../../modules/utils/uuidGen';
+export const SVG_NS = 'http://www.w3.org/2000/svg';
+export default function createHyperlinkModification(element, { hoverColor, internalLink, link }, globalStyleElement, onInternalLinkChange) {
+    const anchor = wrapIntoAnchor(element);
+    if (!anchor)
+        return;
+    const uniqueClassName = `a${uuidV4(8)}`;
+    element.classList.add('anchor', uniqueClassName);
+    if (hoverColor && globalStyleElement?.sheet) {
+        globalStyleElement.sheet.insertRule(`.di.svg-image .anchor.${uniqueClassName}:hover, .di.svg-image .anchor.${uniqueClassName}:hover * { stroke: ${hoverColor} !important; }`);
+    }
+    anchor.setAttributeNS(SVG_NS, 'xlink:href', '#');
+    anchor.addEventListener('click', () => internalLink && onInternalLinkChange ? onInternalLinkChange(link) : window.open(link, '_newtab'));
+}
+function wrapIntoAnchor(wrappedElement) {
+    const parentNode = wrappedElement.parentNode;
+    if (!parentNode) {
+        return null;
+    }
+    const siblings = parentNode.childNodes;
+    if (!siblings) {
+        return null;
+    }
+    const index = Array.from(siblings).findIndex((el) => el === wrappedElement);
+    const wrapperElement = document.createElementNS(SVG_NS, 'a');
+    wrapperElement.appendChild(wrappedElement);
+    const siblingNode = siblings[index] || null;
+    if (siblingNode) {
+        parentNode.insertBefore(wrapperElement, siblingNode);
+    }
+    else {
+        parentNode.appendChild(wrapperElement);
+    }
+    return wrapperElement;
+}

package/lib/esm/src/components/svg/utils/createPositionModification.d.ts

@@ -0,0 +1,3 @@
+import { PositionX, PositionXY, PositionY } from '../types';
+export default function createPositionModification(element: HTMLElement, modification: PositionX | PositionY | PositionXY, svgElement: SVGSVGElement): void;
+//# sourceMappingURL=createPositionModification.d.ts.map

package/lib/esm/src/components/svg/utils/createPositionModification.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createPositionModification.d.ts","sourceRoot":"","sources":["../../../../../../src/components/svg/utils/createPositionModification.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,SAAS,EAAE,UAAU,EAAE,SAAS,EAAC,MAAM,UAAU,CAAC;AAI1D,MAAM,CAAC,OAAO,UAAU,0BAA0B,CACjD,OAAO,EAAE,WAAW,EACpB,YAAY,EAAE,SAAS,GAAG,SAAS,GAAG,UAAU,EAChD,UAAU,EAAE,aAAa,QAgBzB"}

package/lib/esm/src/components/svg/utils/createPositionModification.js

@@ -0,0 +1,19 @@
+import { SVG } from '@svgdotjs/svg.js';
+const limitPercentagePosition = (position) => Math.max(0, Math.min(100, position));
+export default function createPositionModification(element, modification, svgElement) {
+    const svg = SVG(svgElement);
+    const targetId = element.getAttribute('id') || '';
+    const targetEl = svg.findOne(`#${targetId}`);
+    const boundariesEl = svg.findOne(`#${targetId}-boundaries`);
+    const bbox = boundariesEl ? boundariesEl.bbox() : svg.viewbox();
+    if (modification.type === 'positionX') {
+        targetEl.x(bbox.x + (limitPercentagePosition(modification.position) * bbox.width) / 100);
+    }
+    else if (modification.type === 'positionY') {
+        targetEl.y(bbox.y + (limitPercentagePosition(modification.position) * bbox.height) / 100);
+    }
+    else {
+        targetEl.x(bbox.x + (limitPercentagePosition(modification.positionX) * bbox.width) / 100);
+        targetEl.y(bbox.y + (limitPercentagePosition(modification.positionY) * bbox.height) / 100);
+    }
+}

package/lib/esm/src/components/svg/utils/findConflicts.d.ts

@@ -0,0 +1,2 @@
+export default function findConflicts(svgElement: SVGSVGElement, onConflict: (conflictingIds: string[]) => void): () => void;
+//# sourceMappingURL=findConflicts.d.ts.map

package/lib/esm/src/components/svg/utils/findConflicts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"findConflicts.d.ts","sourceRoot":"","sources":["../../../../../../src/components/svg/utils/findConflicts.ts"],"names":[],"mappings":"AAiBA,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,UAAU,EAAE,aAAa,EAAE,UAAU,EAAE,CAAC,cAAc,EAAE,MAAM,EAAE,KAAK,IAAI,cAQ9G"}

package/lib/esm/src/components/svg/utils/findConflicts.js

@@ -0,0 +1,23 @@
+const CONFLICTING_IDS_DETECTION_DELAY = 500;
+const calculateIdCountsInElement = (element) => {
+    return Array.from(element.querySelectorAll('[id]'))
+        .map((element) => element.getAttribute('id'))
+        .reduce((acc, id) => {
+        if (id)
+            acc[id] = acc[id] + 1 || 1;
+        return acc;
+    }, {});
+};
+const findAllDuplicatedIdsInSvgElement = (svgElement) => {
+    const idCountsInDocument = calculateIdCountsInElement(document);
+    const idCountsInSvg = calculateIdCountsInElement(svgElement);
+    return Object.keys(idCountsInSvg).filter((key) => idCountsInSvg[key] < idCountsInDocument[key]);
+};
+export default function findConflicts(svgElement, onConflict) {
+    const timeoutId = setTimeout(() => {
+        if (onConflict) {
+            onConflict(findAllDuplicatedIdsInSvgElement(svgElement));
+        }
+    }, CONFLICTING_IDS_DETECTION_DELAY);
+    return () => clearTimeout(timeoutId);
+}

package/lib/esm/src/components/svg/utils/getMutableNodeList.d.ts

@@ -0,0 +1,3 @@
+export declare const parseFromString: (imageData: string) => Document;
+export default function (imageData: string, diFieldId: string): NodeListOf<Element>;
+//# sourceMappingURL=getMutableNodeList.d.ts.map

package/lib/esm/src/components/svg/utils/getMutableNodeList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getMutableNodeList.d.ts","sourceRoot":"","sources":["../../../../../../src/components/svg/utils/getMutableNodeList.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,eAAe,cAAe,MAAM,aAIhD,CAAC;AAEF,MAAM,CAAC,OAAO,WAAW,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,uBAG5D"}

package/lib/esm/src/components/svg/utils/getMutableNodeList.js

@@ -0,0 +1,12 @@
+// SvgImage uses the @svgdotjs/svg.js library that doesn't work with the <svg:svg>...</svg:svg> elements.
+// The naive solution - removing of the "svg:" namespace - solves the problem.
+const removeSvgNamespace = (xml) => xml.replace(/<svg:svg/g, '<svg').replace(/<\/svg:svg/g, '</svg');
+export const parseFromString = (imageData) => {
+    const parser = new DOMParser();
+    const xml = removeSvgNamespace(atob(imageData.replace('data:image/svg+xml;base64,', '')));
+    return parser.parseFromString(xml, 'image/svg+xml');
+};
+export default function (imageData, diFieldId) {
+    const doc = parseFromString(imageData);
+    return doc.querySelectorAll(`[id^="${diFieldId}"]`);
+}

package/lib/esm/src/components/svg/utils/getSvgElement.d.ts

@@ -0,0 +1,3 @@
+declare const _default: (imageData: string) => SVGSVGElement | null;
+export default _default;
+//# sourceMappingURL=getSvgElement.d.ts.map

package/lib/esm/src/components/svg/utils/getSvgElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getSvgElement.d.ts","sourceRoot":"","sources":["../../../../../../src/components/svg/utils/getSvgElement.ts"],"names":[],"mappings":"oCAE2B,MAAM;AAAjC,wBAOE"}

package/lib/esm/src/components/svg/utils/getSvgElement.js

@@ -0,0 +1,10 @@
+import { parseFromString } from './getMutableNodeList';
+export default (imageData) => {
+    try {
+        const imageDoc = parseFromString(imageData);
+        return imageDoc.querySelector('svg');
+    }
+    catch (e) {
+        return null;
+    }
+};

package/lib/esm/src/components/svg/utils/renderSvg.d.ts

@@ -0,0 +1,3 @@
+import { Modification } from '../types';
+export default function renderSvg(svgWrapper: HTMLDivElement, imageData: string, modifications: Modification[] | undefined, globalStyleElement: HTMLStyleElement | null, onInternalLinkChange: ((link: string) => void) | undefined): SVGSVGElement | null;
+//# sourceMappingURL=renderSvg.d.ts.map

package/lib/esm/src/components/svg/utils/renderSvg.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderSvg.d.ts","sourceRoot":"","sources":["../../../../../../src/components/svg/utils/renderSvg.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,YAAY,EAAC,MAAM,UAAU,CAAC;AAMtC,MAAM,CAAC,OAAO,UAAU,SAAS,CAChC,UAAU,EAAE,cAAc,EAC1B,SAAS,EAAE,MAAM,EACjB,aAAa,EAAE,YAAY,EAAE,GAAG,SAAS,EACzC,kBAAkB,EAAE,gBAAgB,GAAG,IAAI,EAC3C,oBAAoB,EAAE,CAAC,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,GACxD,aAAa,GAAG,IAAI,CAqBtB"}

package/lib/esm/src/components/svg/utils/renderSvg.js

@@ -0,0 +1,88 @@
+import { SVG } from '@svgdotjs/svg.js';
+import createHyperlinkModification from './createHyperlinkModification';
+import { parseFromString } from './getMutableNodeList';
+import transformPositionModifications from './transformPositionModifications';
+import createPositionModification from './createPositionModification';
+export default function renderSvg(svgWrapper, imageData, modifications, globalStyleElement, onInternalLinkChange) {
+    const imageDocument = parseFromString(imageData);
+    const svgElement = imageDocument.querySelector('svg');
+    if (svgElement) {
+        svgWrapper.style.height = '100%';
+        svgWrapper.innerHTML = '';
+        svgElement.style.height = '100%';
+        svgElement.style.width = '100%';
+        svgElement.classList.add('di', 'svg-image');
+        if (!svgElement.getAttribute('viewBox')) {
+            svgElement.setAttribute('viewBox', '');
+        }
+        if (!svgElement.getAttribute('preserveAspectRatio')) {
+            svgElement.setAttribute('preserveAspectRatio', 'xMidYMid');
+        }
+        svgWrapper.appendChild(svgElement);
+        applyModifications(svgElement, modifications, globalStyleElement, onInternalLinkChange);
+        return svgElement;
+    }
+    return null;
+}
+function applyModifications(svgElement, modifications, globalStyleElement, onInternalLinkChange) {
+    if (!modifications || !modifications.length)
+        return;
+    for (const modification of sortModifications(transformPositionModifications(modifications))) {
+        const element = svgElement.querySelector(`[id=${modification.target}]`);
+        if (element) {
+            applyModification(element, modification, svgElement, globalStyleElement, onInternalLinkChange);
+        }
+    }
+}
+function applyModification(element, modification, svgElement, globalStyleElement, onInternalLinkChange) {
+    switch (modification.type) {
+        case 'visibility':
+            element.setAttribute('visibility', modification.visible ? 'visible' : 'hidden');
+            break;
+        case 'text': {
+            const tspan = element.querySelector('tspan');
+            if (tspan) {
+                tspan.textContent = modification.text;
+            }
+            else {
+                element.textContent = modification.text;
+            }
+            break;
+        }
+        case 'color': {
+            const { color } = modification;
+            const changeColor = (el) => {
+                el.setAttribute('fill', color);
+                el.style.fill = color;
+            };
+            changeColor(element);
+            element.querySelectorAll('g, path').forEach(changeColor);
+            break;
+        }
+        case 'hyperlink':
+            createHyperlinkModification(element, modification, globalStyleElement, onInternalLinkChange);
+            break;
+        case 'eventListener':
+            element.addEventListener(modification.eventType, modification.listener, modification.options);
+            break;
+        case 'classNames':
+            element.classList.add(...modification.classNames);
+            break;
+        case 'positionX':
+        case 'positionY':
+        case 'positionXY':
+            createPositionModification(element, modification, svgElement);
+            break;
+        case 'rotation': {
+            // @ts-expect-error
+            SVG(element).rotate(modification.degrees);
+            break;
+        }
+        default:
+            throw new Error('Unknown modification');
+    }
+}
+// rotation moved to the end of the array
+function sortModifications(modifications) {
+    return modifications.sort(({ type: type1 }, { type: type2 }) => (type1 !== type2 && type2 === 'rotation' ? -1 : 1));
+}

package/lib/esm/src/components/svg/utils/transformPositionModifications.d.ts

@@ -0,0 +1,4 @@
+import { Modification } from '../types';
+declare const _default: (modifications: Array<Modification>) => Array<Modification>;
+export default _default;
+//# sourceMappingURL=transformPositionModifications.d.ts.map

package/lib/esm/src/components/svg/utils/transformPositionModifications.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"transformPositionModifications.d.ts","sourceRoot":"","sources":["../../../../../../src/components/svg/utils/transformPositionModifications.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAuB,MAAM,UAAU,CAAC;wCA6C7B,MAAM,YAAY,CAAC,KAAG,MAAM,YAAY,CAAC;AAAxE,wBAYE"}

package/lib/esm/src/components/svg/utils/transformPositionModifications.js

@@ -0,0 +1,42 @@
+const mergePositionChanges = (modifications) => {
+    const positionModifications = modifications.filter(({ type }) => type === 'positionX' || type === 'positionY');
+    const restModifications = modifications.filter(({ type }) => type !== 'positionX' && type !== 'positionY');
+    const positionByAxisModifications = positionModifications.reduce((acc, modification) => {
+        if (modification.type === 'positionX') {
+            return { ...acc, x: modification };
+        }
+        else if (modification.type === 'positionY') {
+            return { ...acc, y: modification };
+        }
+        return acc;
+    }, {
+        x: null,
+        y: null
+    });
+    if (positionByAxisModifications.x && positionByAxisModifications.y) {
+        return restModifications.concat([
+            {
+                type: 'positionXY',
+                target: positionByAxisModifications.x.target,
+                positionX: positionByAxisModifications.x.position,
+                positionY: positionByAxisModifications.y.position
+            }
+        ]);
+    }
+    else if (positionByAxisModifications.x) {
+        return restModifications.concat([positionByAxisModifications.x]);
+    }
+    else if (positionByAxisModifications.y) {
+        return restModifications.concat([positionByAxisModifications.y]);
+    }
+    else {
+        return restModifications;
+    }
+};
+export default (modifications) => {
+    const modificationsByTarget = modifications.reduce((acc, modification) => ({
+        ...acc,
+        [modification.target]: [...(acc[modification.target] || []), modification]
+    }), {});
+    return Object.keys(modificationsByTarget).reduce((acc, target) => acc.concat(mergePositionChanges(modificationsByTarget[target])), []);
+};

package/lib/esm/src/components/svg/utils/validateSvg.d.ts

@@ -0,0 +1,3 @@
+declare const _default: (imageData: string) => boolean;
+export default _default;
+//# sourceMappingURL=validateSvg.d.ts.map

package/lib/esm/src/components/svg/utils/validateSvg.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"validateSvg.d.ts","sourceRoot":"","sources":["../../../../../../src/components/svg/utils/validateSvg.ts"],"names":[],"mappings":"oCAE2B,MAAM,KAAG,OAAO;AAA3C,wBAGE"}

package/lib/esm/src/components/svg/utils/validateSvg.js

@@ -0,0 +1,5 @@
+import getSvgElement from './getSvgElement';
+export default (imageData) => {
+    const svgElement = getSvgElement(imageData);
+    return !!svgElement && !!svgElement.style;
+};

package/lib/esm/src/components/tabs/RouteTabs.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+declare type Page = {
+    path: string;
+    renderHeading: (props: unknown) => React.ReactNode;
+    headingTitle?: string;
+    renderBody: (props: any) => React.ReactNode;
+    draggingDisabled?: boolean;
+    disabled?: boolean;
+};
+export declare type Props = {
+    /** Path of the page where this component is rendered */
+    basePath?: string;
+    /** Array of pages to be displayed */
+    pages: Page[];
+    /** (Optional) function, executed if the order of the tabs get changed */
+    onOrderChange?: (oldIndex: number, newIndex: number) => void;
+};
+/**
+ * RouteTabs add the possibility to unite several homogeneous pages into one.
+ * Each tab can be accessed individually via the browser's history
+ */
+export default function RouteTabs({ pages, onOrderChange, basePath, ...otherProps }: Props): React.JSX.Element;
+export {};
+//# sourceMappingURL=RouteTabs.d.ts.map

package/lib/esm/src/components/tabs/RouteTabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RouteTabs.d.ts","sourceRoot":"","sources":["../../../../../src/components/tabs/RouteTabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAUtC,aAAK,IAAI,GAAG;IACX,IAAI,EAAE,MAAM,CAAC;IACb,aAAa,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAC;IACnD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,KAAK,CAAC,SAAS,CAAC;IAC5C,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,oBAAY,KAAK,GAAG;IACnB,wDAAwD;IACxD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,qCAAqC;IACrC,KAAK,EAAE,IAAI,EAAE,CAAC;IAEd,yEAAyE;IACzE,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7D,CAAC;AA8DF;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAAC,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAC,EAAE,KAAK,qBA8EvF"}