@deviceinsight/ng-ui-components 6.18.0-SNAPSHOT

package/lib/cjs/components/svg/storybookHelper.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.rotatingImageData = exports.imageWithIdData = exports.animatedXDotData = exports.animatedXYDotData = exports.simpleImageWithTextData = exports.simpleImageData = void 0;
+const encode = (data) => 'data:image/svg+xml;base64,' + btoa(data);
+exports.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>`);
+exports.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>`);
+exports.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>
+`);
+exports.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>
+`);
+exports.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>
+`);
+exports.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/cjs/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/cjs/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/cjs/components/svg/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

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

package/lib/cjs/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/cjs/components/svg/utils/__tests__/getMutableNodeList.spec.js

@@ -0,0 +1,48 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const getMutableNodeList_1 = __importStar(require("../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 = (0, getMutableNodeList_1.default)(base64StringWithoutFieldIds, testDiFieldId);
+        expect(nodeList).toHaveLength(0);
+    });
+    it('should return a non-empty list if mutable nodes are found', () => {
+        const nodeList = (0, getMutableNodeList_1.default)(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(() => (0, getMutableNodeList_1.default)('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 = (0, getMutableNodeList_1.parseFromString)(`data:image/svg+xml;base64,${btoa(html)}`);
+        expect(document.children[0].nodeName).toEqual('svg');
+    });
+});

package/lib/cjs/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/cjs/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/cjs/components/svg/utils/createHyperlinkModification.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SVG_NS = void 0;
+const uuidGen_1 = require("../../../modules/utils/uuidGen");
+exports.SVG_NS = 'http://www.w3.org/2000/svg';
+function createHyperlinkModification(element, { hoverColor, internalLink, link }, globalStyleElement, onInternalLinkChange) {
+    const anchor = wrapIntoAnchor(element);
+    if (!anchor)
+        return;
+    const uniqueClassName = `a${(0, uuidGen_1.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(exports.SVG_NS, 'xlink:href', '#');
+    anchor.addEventListener('click', () => internalLink && onInternalLinkChange ? onInternalLinkChange(link) : window.open(link, '_newtab'));
+}
+exports.default = createHyperlinkModification;
+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(exports.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/cjs/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/cjs/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/cjs/components/svg/utils/createPositionModification.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const svg_js_1 = require("@svgdotjs/svg.js");
+const limitPercentagePosition = (position) => Math.max(0, Math.min(100, position));
+function createPositionModification(element, modification, svgElement) {
+    const svg = (0, svg_js_1.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);
+    }
+}
+exports.default = createPositionModification;

package/lib/cjs/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/cjs/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/cjs/components/svg/utils/findConflicts.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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]);
+};
+function findConflicts(svgElement, onConflict) {
+    const timeoutId = setTimeout(() => {
+        if (onConflict) {
+            onConflict(findAllDuplicatedIdsInSvgElement(svgElement));
+        }
+    }, CONFLICTING_IDS_DETECTION_DELAY);
+    return () => clearTimeout(timeoutId);
+}
+exports.default = findConflicts;

package/lib/cjs/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/cjs/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/cjs/components/svg/utils/getMutableNodeList.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseFromString = void 0;
+// 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');
+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');
+};
+exports.parseFromString = parseFromString;
+function default_1(imageData, diFieldId) {
+    const doc = (0, exports.parseFromString)(imageData);
+    return doc.querySelectorAll(`[id^="${diFieldId}"]`);
+}
+exports.default = default_1;

package/lib/cjs/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/cjs/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/cjs/components/svg/utils/getSvgElement.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const getMutableNodeList_1 = require("./getMutableNodeList");
+exports.default = (imageData) => {
+    try {
+        const imageDoc = (0, getMutableNodeList_1.parseFromString)(imageData);
+        return imageDoc.querySelector('svg');
+    }
+    catch (e) {
+        return null;
+    }
+};

package/lib/cjs/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/cjs/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/cjs/components/svg/utils/renderSvg.js

@@ -0,0 +1,94 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const svg_js_1 = require("@svgdotjs/svg.js");
+const createHyperlinkModification_1 = __importDefault(require("./createHyperlinkModification"));
+const getMutableNodeList_1 = require("./getMutableNodeList");
+const transformPositionModifications_1 = __importDefault(require("./transformPositionModifications"));
+const createPositionModification_1 = __importDefault(require("./createPositionModification"));
+function renderSvg(svgWrapper, imageData, modifications, globalStyleElement, onInternalLinkChange) {
+    const imageDocument = (0, getMutableNodeList_1.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;
+}
+exports.default = renderSvg;
+function applyModifications(svgElement, modifications, globalStyleElement, onInternalLinkChange) {
+    if (!modifications || !modifications.length)
+        return;
+    for (const modification of sortModifications((0, transformPositionModifications_1.default)(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':
+            (0, createHyperlinkModification_1.default)(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':
+            (0, createPositionModification_1.default)(element, modification, svgElement);
+            break;
+        case 'rotation': {
+            // @ts-expect-error
+            (0, svg_js_1.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/cjs/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/cjs/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/cjs/components/svg/utils/transformPositionModifications.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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;
+    }
+};
+exports.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/cjs/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/cjs/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/cjs/components/svg/utils/validateSvg.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const getSvgElement_1 = __importDefault(require("./getSvgElement"));
+exports.default = (imageData) => {
+    const svgElement = (0, getSvgElement_1.default)(imageData);
+    return !!svgElement && !!svgElement.style;
+};

package/lib/cjs/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): JSX.Element;
+export {};
+//# sourceMappingURL=RouteTabs.d.ts.map

package/lib/cjs/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,eA8EvF"}