@deviceinsight/ng-ui-components 6.18.0-SNAPSHOT

package/lib/cjs/components/reactableWithClientSidePagination/ReactableWithClientSidePagination.js

@@ -0,0 +1,184 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const lodash_1 = require("lodash");
+const Reactable_1 = __importDefault(require("../reactable/Reactable"));
+const helper_1 = require("../reactable/helpers/helper");
+const DEFAULT_PAGINATION_SETTINGS = {
+    page: 0,
+    size: 15,
+    sort: {
+        property: 'name',
+        direction: 'DESC'
+    }
+};
+/**
+ * Reactable displays paginated results nicely, while adding the possibility to add further functionality to each row.
+ * Each column can also be extended to be sortable and/or filterable.
+ * Also adds client-side pagination.
+ */
+class ReactableWithClientSidePagination extends React.Component {
+    constructor(props) {
+        super(props);
+        this.content = [];
+        this.calculatePageNumber = (items, paginationSettings) => {
+            const { forceResetPaginationOnItemsChange } = this.props;
+            if (!forceResetPaginationOnItemsChange) {
+                const maxPageNumber = Math.floor((items.length - 1) / paginationSettings.size);
+                if (maxPageNumber <= 0) {
+                    this.handleChangePage(0);
+                }
+                else if (maxPageNumber < paginationSettings.page) {
+                    this.handleChangePage(maxPageNumber);
+                }
+            }
+            else {
+                this.handleChangePage(0);
+            }
+        };
+        this.handleChangePage = (page) => {
+            this.setState({
+                paginationSettings: { ...this.state.paginationSettings, page }
+            });
+        };
+        this.handleSort = (property, direction) => {
+            this.setState({
+                paginationSettings: {
+                    ...this.state.paginationSettings,
+                    sort: {
+                        property,
+                        direction
+                    }
+                }
+            });
+        };
+        this.handleFilter = (filterSettings) => {
+            const { items, onFilter, columnDefs, onFilteredItemsChanged } = this.props;
+            this.setState({
+                paginationSettings: { ...this.state.paginationSettings, page: 0 },
+                filterSettings
+            }, () => {
+                onFilter && onFilter(filterSettings);
+                const filteredItems = (0, helper_1.filterItems)(items, columnDefs, filterSettings);
+                this.setState({
+                    filteredItems
+                });
+                onFilteredItemsChanged && filteredItems && onFilteredItemsChanged(filteredItems);
+            });
+        };
+        this.getPageable = () => {
+            const { customSortFunction, items, columnDefs, onContentChange } = this.props;
+            const { filterSettings, paginationSettings } = this.state;
+            const filteredItems = (0, helper_1.filterItems)(items, columnDefs, filterSettings);
+            const pageable = (0, helper_1.makePageable)(filteredItems, columnDefs, filterSettings, paginationSettings, customSortFunction);
+            if (pageable && pageable.content && !(0, lodash_1.isEqual)(pageable.content, this.content)) {
+                this.content = pageable.content;
+                if (onContentChange) {
+                    onContentChange(this.content);
+                }
+            }
+            return pageable;
+        };
+        this.handleSelectChange = (selected, item) => {
+            const { onSelectedItemsChange, selectedItems = [], uniqueItemKey } = this.props;
+            if (onSelectedItemsChange) {
+                if (selected) {
+                    const newSelectedItems = selectedItems.concat(uniqueItemKey(item));
+                    onSelectedItemsChange(newSelectedItems);
+                }
+                else {
+                    onSelectedItemsChange(selectedItems.filter((key) => key !== uniqueItemKey(item)));
+                }
+            }
+            else {
+                console.warn('ReactableWithClientSidePagination: onSelectedItemsChange property is missing');
+            }
+        };
+        this.handleSelectAllChange = (selectedAll) => {
+            const { onSelectedItemsChange, items, selectedItems = [], uniqueItemKey } = this.props;
+            const { filteredItems } = this.state;
+            const visibleItems = (filteredItems || items || []).map(uniqueItemKey);
+            if (onSelectedItemsChange) {
+                if (selectedAll) {
+                    onSelectedItemsChange((0, lodash_1.uniqWith)([...selectedItems, ...visibleItems], lodash_1.isEqual).sort());
+                }
+                else {
+                    onSelectedItemsChange((0, lodash_1.difference)(selectedItems, visibleItems));
+                }
+            }
+            else {
+                console.warn('ReactableWithClientSidePagination: onSelectedItemsChange property is missing');
+            }
+        };
+        this.areSelectedAll = () => {
+            const { items, selectedItems, uniqueItemKey } = this.props;
+            const { filteredItems } = this.state;
+            const visibleItems = filteredItems || items || [];
+            return (!!selectedItems && visibleItems.every((item) => selectedItems.some((key) => key === uniqueItemKey(item))));
+        };
+        let paginationSettings = DEFAULT_PAGINATION_SETTINGS;
+        if (props.paginationSettings) {
+            paginationSettings = props.paginationSettings;
+        }
+        else if (props.initialPaginationSettings) {
+            console.warn('initialPaginationSettings is deprecated! Please use "paginationSettings" instead');
+            paginationSettings = props.initialPaginationSettings;
+        }
+        else {
+            console.error('Missing pagination settings!');
+        }
+        this.state = {
+            paginationSettings: paginationSettings || DEFAULT_PAGINATION_SETTINGS,
+            filterSettings: {},
+            filteredItems: null
+        };
+    }
+    componentDidUpdate(prevProps) {
+        const { items } = this.props;
+        const { items: prevItems } = prevProps;
+        const settings = this.props.paginationSettings || this.props.initialPaginationSettings;
+        const prevSettings = prevProps.paginationSettings || prevProps.initialPaginationSettings;
+        if (items && prevItems && items.length !== prevItems.length) {
+            this.calculatePageNumber(items, this.state.paginationSettings);
+        }
+        if (settings && !(0, lodash_1.isEqual)(settings, prevSettings)) {
+            this.setState({
+                paginationSettings: settings
+            }, () => this.handleChangePage(0));
+        }
+    }
+    render() {
+        const { uniqueItemKey, isLoading, columnDefs, rowDef, clickable, selectable, selectedItems, onChangeSize } = this.props;
+        const finalColumnDefs = selectable
+            ? (0, helper_1.extendColumnDefsWithCheckboxes)(columnDefs, this.handleSelectChange, this.handleSelectAllChange, this.areSelectedAll(), selectedItems || [], uniqueItemKey)
+            : columnDefs;
+        return (React.createElement(Reactable_1.default, { columnDefs: finalColumnDefs, rowDef: rowDef, uniqueItemKey: uniqueItemKey, paginationSettings: this.state.paginationSettings, onChangePage: this.handleChangePage, onChangeSize: onChangeSize, onSort: this.handleSort, onFilter: this.handleFilter, pageable: this.getPageable(), isLoading: isLoading, clickable: clickable, "data-testid": this.props['data-testid'] }));
+    }
+}
+exports.default = ReactableWithClientSidePagination;

package/lib/cjs/components/reactableWithClientSidePagination/__tests__/ReactableWithClientSidePagination.spec.d.ts

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

package/lib/cjs/components/reactableWithClientSidePagination/__tests__/ReactableWithClientSidePagination.spec.d.ts.map

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

package/lib/cjs/components/reactableWithClientSidePagination/__tests__/ReactableWithClientSidePagination.spec.js

@@ -0,0 +1,166 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const enzyme_1 = require("enzyme");
+const enzyme_to_json_1 = __importDefault(require("enzyme-to-json"));
+const ReactableWithClientSidePagination_1 = __importDefault(require("../ReactableWithClientSidePagination"));
+const ITEMS = [
+    {
+        id: 1,
+        name: 'Hans Wurst',
+        description: 'Lorem ipsum dolor sit amet, consectetur adipisici elit'
+    },
+    {
+        id: 2,
+        name: 'August Tina',
+        description: "Hopfen und Malz, Gott erhalt's"
+    },
+    {
+        id: 3,
+        name: 'Paul Aner',
+        description: 'Salve pater patriae'
+    },
+    {
+        id: 4,
+        name: 'Franz Iskaner',
+        description: 'Da braut sich was zusammen'
+    }
+];
+const INITIAL_PAGINATION_SETTINGS = {
+    page: 0,
+    size: ITEMS.length,
+    sort: {
+        property: 'name',
+        direction: 'ASC'
+    }
+};
+const COLUMN_DEFS = [
+    {
+        name: 'name',
+        render: (item) => item.name,
+        filterable: {
+            filterType: 'text',
+            filterFn: (item, value) => new RegExp(value).test(item.name)
+        }
+    },
+    {
+        name: 'description',
+        render: (item) => item.description
+    }
+];
+const COMMON_PROPS = {
+    columnDefs: COLUMN_DEFS,
+    uniqueItemKey: (item) => item.id,
+    paginationSettings: INITIAL_PAGINATION_SETTINGS,
+    items: ITEMS,
+    selectable: true,
+    isLoading: false
+};
+describe('ReactableWithClientSidePagination.js', () => {
+    describe('selectable feature', () => {
+        it('should match snapshot', () => {
+            const wrapper = (0, enzyme_1.shallow)(
+            // @ts-ignore
+            React.createElement(ReactableWithClientSidePagination_1.default, { ...COMMON_PROPS, selectedItems: [], onSelectedItemsChange: () => { } }));
+            expect((0, enzyme_to_json_1.default)(wrapper)).toMatchSnapshot();
+        });
+        it('should call the callback with correct argument when checkbox is checked', () => {
+            const selectedItemsBefore = [1, 2];
+            const selectedItemsAfter = [1, 2, 4];
+            const selectedItemsChangeHandler = jest.fn();
+            const wrapper = (0, enzyme_1.shallow)(
+            // @ts-ignore
+            React.createElement(ReactableWithClientSidePagination_1.default, { ...COMMON_PROPS, selectedItems: selectedItemsBefore, onSelectedItemsChange: selectedItemsChangeHandler }));
+            // @ts-ignore
+            wrapper.instance().handleSelectChange(true, ITEMS[3]);
+            expect(selectedItemsChangeHandler.mock.calls[0][0]).toEqual(selectedItemsAfter);
+        });
+        it('should call the callback with correct argument when checkbox is unchecked', () => {
+            const selectedItemsBefore = [1, 2, 4];
+            const selectedItemsAfter = [1, 2];
+            const selectedItemsChangeHandler = jest.fn();
+            const wrapper = (0, enzyme_1.shallow)(
+            // @ts-ignore
+            React.createElement(ReactableWithClientSidePagination_1.default, { ...COMMON_PROPS, selectedItems: selectedItemsBefore, onSelectedItemsChange: selectedItemsChangeHandler }));
+            // @ts-ignore
+            wrapper.instance().handleSelectChange(false, ITEMS[3]);
+            expect(selectedItemsChangeHandler.mock.calls[0][0]).toEqual(selectedItemsAfter);
+        });
+        it('should call the callback with correct argument when the selectAll checkbox is checked', () => {
+            const selectedItemsBefore = [1];
+            const selectedItemsAfter = [1, 2, 3, 4];
+            const selectedItemsChangeHandler = jest.fn();
+            const wrapper = (0, enzyme_1.shallow)(
+            // @ts-ignore
+            React.createElement(ReactableWithClientSidePagination_1.default, { ...COMMON_PROPS, selectedItems: selectedItemsBefore, onSelectedItemsChange: selectedItemsChangeHandler }));
+            // @ts-ignore
+            wrapper.instance().handleSelectAllChange(true);
+            expect(selectedItemsChangeHandler.mock.calls[0][0]).toEqual(selectedItemsAfter);
+        });
+        it('should call the callback with correct argument when the selectAll checkbox is unchecked', () => {
+            const selectedItemsBefore = [1, 2, 3, 4];
+            // @ts-ignore
+            const selectedItemsAfter = [];
+            const selectedItemsChangeHandler = jest.fn();
+            const wrapper = (0, enzyme_1.shallow)(
+            // @ts-ignore
+            React.createElement(ReactableWithClientSidePagination_1.default, { ...COMMON_PROPS, selectedItems: selectedItemsBefore, onSelectedItemsChange: selectedItemsChangeHandler }));
+            // @ts-ignore
+            wrapper.instance().handleSelectAllChange(false);
+            // @ts-ignore
+            expect(selectedItemsChangeHandler.mock.calls[0][0]).toEqual(selectedItemsAfter);
+        });
+        it('should select all available items if selectAll checkbox is checked and data is filtered', () => {
+            const selectedItemsBefore = [1, 4];
+            const selectedItemsAfter = [1, 2, 4];
+            const selectedItemsChangeHandler = jest.fn();
+            const wrapper = (0, enzyme_1.shallow)(
+            // @ts-ignore
+            React.createElement(ReactableWithClientSidePagination_1.default, { ...COMMON_PROPS, selectedItems: selectedItemsBefore, onSelectedItemsChange: selectedItemsChangeHandler }));
+            // @ts-ignore
+            wrapper.instance().handleFilter({ name: ITEMS[1].name });
+            // @ts-ignore
+            wrapper.instance().handleSelectAllChange(true);
+            expect(selectedItemsChangeHandler.mock.calls[0][0]).toEqual(selectedItemsAfter);
+        });
+        it('should unselect all available items if selectAll checkbox is checked and data is filtered', () => {
+            const selectedItemsBefore = [1, 2, 3, 4];
+            const selectedItemsAfter = [1, 3, 4];
+            const selectedItemsChangeHandler = jest.fn();
+            const wrapper = (0, enzyme_1.shallow)(
+            // @ts-ignore
+            React.createElement(ReactableWithClientSidePagination_1.default, { ...COMMON_PROPS, selectedItems: selectedItemsBefore, onSelectedItemsChange: selectedItemsChangeHandler }));
+            // @ts-ignore
+            wrapper.instance().handleFilter({ name: ITEMS[1].name });
+            // @ts-ignore
+            wrapper.instance().handleSelectAllChange(false);
+            expect(selectedItemsChangeHandler.mock.calls[0][0]).toEqual(selectedItemsAfter);
+        });
+    });
+});

package/lib/cjs/components/slider/Slider.d.ts

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+export declare type Props = {
+    /** minimum value the slider renders */
+    min: number;
+    /** maximum value the slider renders */
+    max: number;
+    /** step in which increments/decrements have to be made */
+    step?: number;
+    /** current value of the slider */
+    value: number;
+    /** show or hide tooltip (default: true) */
+    tooltip?: boolean;
+    /** object containing key-value pairs to label the slider */
+    labels?: Record<string, number | string>;
+    /** formats the value in label or tooltip */
+    format?: (value: number) => string;
+    /** gets called whenever the slider handle is being dragged or clicked */
+    onChange?: (value: number) => void;
+    /** gets called whenever the user stops dragging the slider handle */
+    onChangeComplete?: (value: number) => void;
+    /**  maximum value the slider can hold */
+    limit?: number;
+};
+/**
+ * Enables picking the desired value from a specified range.
+ * Can have a tooltip and labels
+ */
+declare const Slider: ({ min, max, step, value, tooltip, labels, format, onChange, onChangeComplete, limit }: Props) => JSX.Element;
+export default Slider;
+//# sourceMappingURL=Slider.d.ts.map

package/lib/cjs/components/slider/Slider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../../src/components/slider/Slider.tsx"],"names":[],"mappings":";AAKA,oBAAY,KAAK,GAAG;IACnB,uCAAuC;IACvC,GAAG,EAAE,MAAM,CAAC;IAEZ,uCAAuC;IACvC,GAAG,EAAE,MAAM,CAAC;IAEZ,0DAA0D;IAC1D,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC;IAEd,2CAA2C;IAC3C,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,4DAA4D;IAC5D,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;IAEzC,4CAA4C;IAC5C,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAEnC,yEAAyE;IACzE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEnC,qEAAqE;IACrE,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAE3C,yCAAyC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAIF;;;GAGG;AACH,QAAA,MAAM,MAAM,0FAAgG,KAAK,gBAoChH,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/cjs/components/slider/Slider.js

@@ -0,0 +1,63 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const rc_slider_1 = __importStar(require("rc-slider"));
+const useLimitStyling_1 = __importDefault(require("./useLimitStyling"));
+const RcSliderWithTooltip = (0, rc_slider_1.createSliderWithTooltip)(rc_slider_1.default);
+/**
+ * Enables picking the desired value from a specified range.
+ * Can have a tooltip and labels
+ */
+const Slider = ({ min, max, step, value, tooltip = true, labels, format, onChange, onChangeComplete, limit }) => {
+    const setSliderRef = (0, useLimitStyling_1.default)(limit, min, max);
+    const handleChange = (value) => {
+        if (!onChange)
+            return;
+        const numericValue = typeof value === 'number' ? value : value[0];
+        const allowedValue = limit != null ? Math.min(numericValue, limit) : numericValue;
+        onChange(allowedValue);
+    };
+    const handleChangeComplete = () => {
+        if (!onChangeComplete) {
+            return;
+        }
+        onChangeComplete(value);
+    };
+    const basicProps = {
+        min,
+        max,
+        step,
+        value,
+        onChange: handleChange,
+        onAfterChange: handleChangeComplete,
+        marks: labels
+    };
+    return (react_1.default.createElement("div", { className: "di slider", ref: setSliderRef }, tooltip ? (react_1.default.createElement(RcSliderWithTooltip, { ...basicProps, className: "di slider with-tooltip", tipFormatter: format })) : (react_1.default.createElement(rc_slider_1.default, { ...basicProps, className: "di slider" }))));
+};
+exports.default = Slider;

package/lib/cjs/components/slider/useLimitStyling.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export default function useLimitStyling(limit: number | undefined, min: number, max: number): import("react").Dispatch<import("react").SetStateAction<HTMLDivElement | null>>;
+//# sourceMappingURL=useLimitStyling.d.ts.map

package/lib/cjs/components/slider/useLimitStyling.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLimitStyling.d.ts","sourceRoot":"","sources":["../../../../src/components/slider/useLimitStyling.ts"],"names":[],"mappings":";AAEA,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,mFAiD1F"}

package/lib/cjs/components/slider/useLimitStyling.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+function useLimitStyling(limit, min, max) {
+    const [slider, setSlider] = (0, react_1.useState)(null);
+    (0, react_1.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 = (0, react_1.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]);
+    (0, react_1.useEffect)(() => {
+        if (slider) {
+            const resizeObserver = new ResizeObserver(() => updateLimitAreaSize());
+            resizeObserver.observe(slider);
+        }
+    }, [slider, updateLimitAreaSize]);
+    return setSlider;
+}
+exports.default = useLimitStyling;

package/lib/cjs/components/svg/SvgImage.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="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): JSX.Element;
+//# sourceMappingURL=SvgImage.d.ts.map

package/lib/cjs/components/svg/SvgImage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SvgImage.d.ts","sourceRoot":"","sources":["../../../../src/components/svg/SvgImage.tsx"],"names":[],"mappings":";AAGA,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,eAiB7E"}

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

@@ -0,0 +1,66 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const react_router_dom_1 = require("react-router-dom");
+const findConflicts_1 = __importDefault(require("./utils/findConflicts"));
+const renderSvg_1 = __importDefault(require("./utils/renderSvg"));
+function useGlobalStyleElement() {
+    const styleElementRef = (0, react_1.useRef)(null);
+    (0, react_1.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;
+}
+function SvgImage({ imageData, modifications, onConflict }) {
+    const svgWrapperRef = (0, react_1.useRef)(null);
+    const styleElement = useGlobalStyleElement();
+    const { push } = (0, react_router_dom_1.useHistory)();
+    (0, react_1.useEffect)(() => {
+        const { current: wrapper } = svgWrapperRef;
+        if (wrapper && imageData) {
+            const svgElement = (0, renderSvg_1.default)(wrapper, imageData, modifications, styleElement, push);
+            if (svgElement && onConflict) {
+                return (0, findConflicts_1.default)(svgElement, onConflict);
+            }
+        }
+    }, [imageData, modifications, onConflict, push, styleElement]);
+    return react_1.default.createElement("div", { ref: svgWrapperRef });
+}
+exports.default = SvgImage;

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