@deviceinsight/ng-ui-components 6.30.0 → 7.1.0

package/lib/esm/components/input/ValidatedTextInput.js

@@ -1,30 +0,0 @@
-import React from 'react';
-const isValid = (value, pattern, required) => {
-    if (!value.length) {
-        return !required;
-    }
-    return pattern.test(value);
-};
-/**
- * ValidatedTextInput provides an easy way to validate a text inputs value for a certain pattern.
- * This is best used for any form of forms.
- */
-export default class ValidatedTextInput extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.handleChange = (e) => {
-            const { value } = e.target;
-            const { pattern, required, onChange } = this.props;
-            const valid = isValid(value, pattern, required);
-            onChange(value, valid);
-        };
-    }
-    render() {
-        const { style, invalidStyle, value, ...props } = this.props;
-        const { pattern, required, ...otherProps } = props;
-        return (React.createElement("input", { ...otherProps, value: value, onChange: this.handleChange, style: isValid(value, pattern, required) ? style : { ...style, ...invalidStyle }, type: "text" }));
-    }
-}
-ValidatedTextInput.defaultProps = {
-    required: false
-};

package/lib/esm/components/input/__tests__/DateInput.spec.d.ts

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

package/lib/esm/components/input/__tests__/DateInput.spec.d.ts.map

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

package/lib/esm/components/input/__tests__/DateInput.spec.js

@@ -1,71 +0,0 @@
-import React, { useState } from 'react';
-import { describe, expect, it, vi } from 'vitest';
-import dayjs from 'dayjs';
-import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
-import DateInput from '../DateInput';
-const DateStateProvider = ({ children, initialValue }) => {
-    const [state, setState] = useState(initialValue);
-    return children(state, setState);
-};
-describe('DateInput.js', () => {
-    describe('Locale support', () => {
-        it('should render date in correct format for de-DE locale', async () => {
-            render(React.createElement(DateInput, { value: new Date('2019-02-01').getTime(), onChange: () => { } }));
-            await waitFor(() => expect(screen.getByTestId('date-input')).toHaveValue('01.02.2019'));
-        });
-    });
-    describe('Changing values via text input', () => {
-        it('should render correct date typed into text input without "invalid" class', async () => {
-            render(React.createElement(DateStateProvider, { initialValue: new Date('2019-02-01').getTime() }, (date, setDate) => React.createElement(DateInput, { value: date, onChange: (date) => setDate(date) })));
-            await act(async () => {
-                fireEvent.change(screen.getByTestId('date-input'), { target: { value: '02.02.2019' } });
-            });
-            expect(screen.getByTestId('date-input')).toHaveValue('02.02.2019');
-            expect(screen.getByTestId('date-input')).not.toHaveClass('invalid');
-        });
-        it('should render incorrect date typed into text input with "invalid" class', async () => {
-            render(React.createElement(DateStateProvider, { initialValue: new Date('2019-02-01').getTime() }, (date, setDate) => React.createElement(DateInput, { value: date, onChange: (date) => setDate(date) })));
-            await act(async () => {
-                fireEvent.change(screen.getByTestId('date-input'), { target: { value: '02.02.201' } });
-            });
-            expect(screen.getByTestId('date-input')).toHaveClass('invalid');
-        });
-        it('should call onChange callback with parsed value of the input during the input is being changed when the value is valid', async () => {
-            const onChange = vi.fn();
-            render(React.createElement(DateInput, { value: new Date('2019-02-01').getTime(), onChange: onChange }));
-            await act(async () => {
-                fireEvent.change(screen.getByTestId('date-input'), { target: { value: '02.02.2019' } });
-            });
-            const currentValue = onChange.mock.calls[onChange.mock.calls.length - 1][0];
-            expect(dayjs(currentValue).toISOString()).toEqual(dayjs('2019-02-02').toISOString());
-        });
-        it('should not call onChange callback while editing the input when the input value is invalid', async () => {
-            const onChange = vi.fn();
-            render(React.createElement(DateInput, { value: new Date('2019-02-01').getTime(), onChange: onChange }));
-            await act(async () => {
-                fireEvent.change(screen.getByTestId('date-input'), { target: { value: '02.02.201' } });
-            });
-            expect(onChange).not.toHaveBeenCalled();
-        });
-        it('should display the current value in the input field if the input value is invalid and the input became blurred', async () => {
-            render(React.createElement(DateStateProvider, { initialValue: new Date('2019-02-01').getTime() }, (date, setDate) => React.createElement(DateInput, { value: date, onChange: (date) => setDate(date) })));
-            await act(async () => {
-                fireEvent.change(screen.getByTestId('date-input'), { target: { value: '02.02.201' } });
-                fireEvent.blur(screen.getByTestId('date-input'));
-            });
-            expect(screen.getByTestId('date-input')).toHaveValue('01.02.2019');
-        });
-        it('should display invalid date text in the input when the value is NaN', async () => {
-            render(React.createElement(DateInput, { value: NaN, onChange: () => { } }));
-            expect(screen.getByTestId('date-input')).toHaveValue('dateInput.invalidDate');
-        });
-        it('should call onChange callback with [null, true] when empty string is set to input field', async () => {
-            const onChange = vi.fn();
-            render(React.createElement(DateInput, { value: Date.now(), onChange: onChange }));
-            await act(async () => {
-                fireEvent.change(screen.getByTestId('date-input'), { target: { value: '' } });
-            });
-            expect(onChange.mock.calls).toEqual([[null, true]]);
-        });
-    });
-});

package/lib/esm/components/input/__tests__/DateTimeInput.spec.d.ts

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

package/lib/esm/components/input/__tests__/DateTimeInput.spec.d.ts.map

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

package/lib/esm/components/input/__tests__/DateTimeInput.spec.js

@@ -1,34 +0,0 @@
-import React from 'react';
-import { describe, expect, it } from 'vitest';
-import DateTimeInput from '../DateTimeInput';
-import { act, render, screen } from '@testing-library/react';
-import { userEvent } from '@storybook/testing-library';
-describe('DateTimeInput.js', () => {
-    it('should update time when timestamp has changed', () => {
-        const { rerender } = render(React.createElement(DateTimeInput, { timestamp: new Date('2019-02-01T11:11:00').getTime(), onChange: () => { } }));
-        const timeElement = screen.queryByDisplayValue('11:11');
-        expect(timeElement).toBeInTheDocument();
-        rerender(React.createElement(DateTimeInput, { timestamp: new Date('2019-02-02T03:24:00').getTime(), onChange: () => { } }));
-        expect(timeElement).toHaveDisplayValue('03:24');
-    });
-    it('should display the time and date as timezone date', async () => {
-        const { rerender } = render(React.createElement(DateTimeInput, { timestamp: new Date('2019-02-01T11:11:00Z').getTime(), onChange: () => { }, timezone: "America/Vancouver" }));
-        const timeElementUtm = screen.queryByDisplayValue('11:11');
-        expect(timeElementUtm).not.toBeInTheDocument();
-        const timeElement = screen.queryByDisplayValue('03:11');
-        expect(timeElement).toBeInTheDocument();
-        const dateElement = screen.queryByDisplayValue('01.02.2019');
-        expect(dateElement).toBeInTheDocument();
-        rerender(React.createElement(DateTimeInput, { timestamp: new Date('2019-02-02T03:24:00Z').getTime(), onChange: () => { }, timezone: "America/Vancouver" }));
-        expect(timeElement).toHaveDisplayValue('19:24');
-        expect(dateElement).toHaveDisplayValue('01.02.2019');
-        await act(async () => {
-            dateElement?.click();
-            timeElement?.click();
-            userEvent.clear(timeElement);
-            userEvent.type(timeElement, '10:24');
-        });
-        expect(timeElement).toHaveDisplayValue('10:24');
-        expect(dateElement).toHaveDisplayValue('01.02.2019');
-    });
-});

package/lib/esm/components/input/__tests__/SelectWithSearchAsync.spec.d.ts

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

package/lib/esm/components/input/__tests__/SelectWithSearchAsync.spec.d.ts.map

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

package/lib/esm/components/input/__tests__/SelectWithSearchAsync.spec.js

@@ -1,44 +0,0 @@
-import React from 'react';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
-import SelectWithSearchAsync from '../SelectWithSearchAsync';
-import { render, screen, waitFor } from '@testing-library/react';
-// helper data
-const obj1 = { id: 1, label: 'obj 1' };
-const obj5 = { id: 5, label: 'obj 5' };
-const content = [obj1, obj5];
-const searchByQuery = vi.fn(() => Promise.resolve({
-    content,
-    totalElements: 2,
-    totalPages: 1,
-    number: 0,
-    size: 5,
-    sort: []
-}));
-const searchById = vi.fn((id) => Promise.resolve(content.find((item) => item.id === id)));
-const noop = () => { };
-describe('SelectWithSearchAsync.js', () => {
-    beforeEach(() => {
-        searchByQuery.mockClear();
-        searchById.mockClear();
-    });
-    it(`should fetch initial value`, async () => {
-        render(React.createElement(SelectWithSearchAsync, { value: 5, onChange: noop, valueKey: "id", labelKey: "label", searchByQuery: searchByQuery, searchById: searchById }));
-        await waitFor(() => {
-            expect(searchById).toHaveBeenCalledTimes(1);
-            expect(searchById).toHaveBeenCalledWith(5);
-        });
-        await waitFor(() => {
-            expect(screen.queryByText(obj5.label)).toBeInTheDocument();
-        });
-    });
-    it(`should fetch and display current value's label if the values is changed from outside`, async () => {
-        const { rerender } = render(React.createElement(SelectWithSearchAsync, { value: 5, onChange: noop, valueKey: "id", labelKey: "label", searchByQuery: searchByQuery, searchById: searchById }));
-        await waitFor(() => {
-            expect(screen.queryByText(obj5.label)).toBeInTheDocument();
-        });
-        rerender(React.createElement(SelectWithSearchAsync, { value: 1, onChange: noop, valueKey: "id", labelKey: "label", searchByQuery: searchByQuery, searchById: searchById }));
-        await waitFor(() => {
-            expect(screen.queryByText(obj1.label)).toBeInTheDocument();
-        });
-    });
-});

package/lib/esm/components/link/RouteLink.d.ts

@@ -1,31 +0,0 @@
-import React from 'react';
-import { RouteComponentProps } from 'react-router-dom';
-import { TranslationDescriptor } from '../../types/i18n';
-declare type LocationShape = RouteComponentProps['location'];
-export declare type Props = {
-    to: string | LocationShape;
-    /** a title tooltip */
-    title?: TranslationDescriptor;
-    /** a keyboard shortcut that activates the link */
-    keyboardShortcut?: string;
-    /**
-     * a function called before the link is activated, should return a promise that either
-     *  - rejects: to abort the navigation
-     *  - resolves: to continue the navigation with
-     *  - resolves with a new location: to continue the navigation with a new path
-     * */
-    confirm?: () => Promise<(string | null | undefined) | (LocationShape | null | undefined)>;
-    /** @ignore */
-    children?: any;
-    /** @ignore */
-    className?: string;
-    /** @ignore */
-    'data-testid'?: string;
-};
-/**
- * RouteLink enables the possibility to add new links to existing routes.
- * Those routes can also be accessed via `keyboardShortcut`
- */
-export default function RouteLink({ to, confirm, className, title, children, keyboardShortcut, ...otherProps }: Props): React.JSX.Element;
-export {};
-//# sourceMappingURL=RouteLink.d.ts.map

package/lib/esm/components/link/RouteLink.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"RouteLink.d.ts","sourceRoot":"","sources":["../../../../src/components/link/RouteLink.tsx"],"names":[],"mappings":"AACA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAEpD,OAAO,EAAC,mBAAmB,EAAa,MAAM,kBAAkB,CAAC;AAEjE,OAAO,EAAC,qBAAqB,EAAC,MAAM,kBAAkB,CAAC;AAEvD,aAAK,aAAa,GAAG,mBAAmB,CAAC,UAAU,CAAC,CAAC;AAKrD,oBAAY,KAAK,GAAG;IACnB,EAAE,EAAE,MAAM,GAAG,aAAa,CAAC;IAE3B,sBAAsB;IACtB,KAAK,CAAC,EAAE,qBAAqB,CAAC;IAE9B,kDAAkD;IAClD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;;;SAKK;IACL,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,CAAC,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,GAAG,CAAC,aAAa,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC,CAAC;IAE1F,cAAc;IACd,QAAQ,CAAC,EAAE,GAAG,CAAC;IAEf,cAAc;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,cAAc;IACd,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAAC,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,gBAAgB,EAAE,GAAG,UAAU,EAAC,EAAE,KAAK,qBAkElH"}

package/lib/esm/components/link/RouteLink.js

@@ -1,55 +0,0 @@
-/* eslint no-unused-vars: 0 */
-import React, { useCallback, useEffect } from 'react';
-import { useTranslation } from '../../i18n';
-import { useHistory } from 'react-router-dom';
-const isModifiedEvent = (event) => !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
-/**
- * RouteLink enables the possibility to add new links to existing routes.
- * Those routes can also be accessed via `keyboardShortcut`
- */
-export default function RouteLink({ to, confirm, className, title, children, keyboardShortcut, ...otherProps }) {
-    const history = useHistory();
-    const { t } = useTranslation();
-    const pushRoute = useCallback(() => {
-        if (confirm) {
-            confirm()
-                .then((location) => history.push(location || to))
-                .catch(() => {
-                // Exception means that the user didn't confirm, we don't need to react for that.
-            });
-        }
-        else {
-            history.push(to);
-        }
-    }, [confirm, history, to]);
-    const handleKeyEvent = useCallback((event) => {
-        if (keyboardShortcut &&
-            event.key === keyboardShortcut &&
-            !isModifiedEvent(event) && // @ts-ignore EventTarget is a Node and has a tagName
-            event.target.tagName && // @ts-ignore EventTarget is a Node and has a tagName
-            !['INPUT', 'SELECT', 'TEXTAREA'].includes(event.target.tagName)) {
-            event.preventDefault();
-            pushRoute();
-        }
-    }, [keyboardShortcut, pushRoute]);
-    useEffect(() => {
-        if (keyboardShortcut) {
-            window.addEventListener('keydown', handleKeyEvent);
-            return () => {
-                window.removeEventListener('keydown', handleKeyEvent);
-            };
-        }
-    }, [keyboardShortcut, handleKeyEvent]);
-    const handleClickEvent = (event) => {
-        if (event.button === 0 && !isModifiedEvent(event)) {
-            event.preventDefault();
-            pushRoute();
-        }
-    };
-    const href = history.createHref(typeof to === 'string' ? { pathname: to } : to);
-    return (React.createElement("a", { href: href, onClick: handleClickEvent, className: `di route-link ${className || ''}`, title: title
-            ? t(title.id, {
-                defaultValue: title.defaultValue
-            })
-            : undefined, ...otherProps }, children));
-}

package/lib/esm/components/multiMenu/MultiMenu.d.ts

@@ -1,27 +0,0 @@
-import * as React from 'react';
-import { Placement, Modifier } from '@popperjs/core';
-export declare type Props = {
-    /** Enabler for the Multimenu */
-    menuButton: React.ReactNode;
-    /** (Optional) if set, sets the direction in which the MultiMenu should open */
-    direction?: Placement;
-    /** Should contain several <MultiMenuItem/> elements */
-    children?: React.ReactNode;
-    /** (Optional) sets additional (css) classes */
-    className?: string;
-    /** (Optional) https://popper.js.org/popper-documentation.html#modifiers..preventOverflow */
-    popperModifiers?: Modifier<any, any>[];
-};
-declare type State = {
-    contentVisible: boolean;
-};
-/**
- * MultiMenu enables a toggleable menu to either show more content and further functionality.
- */
-export default class MultiMenu extends React.Component<Props, State> {
-    state: State;
-    toggleMenu: () => void;
-    render(): React.JSX.Element;
-}
-export {};
-//# sourceMappingURL=MultiMenu.d.ts.map

package/lib/esm/components/multiMenu/MultiMenu.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"MultiMenu.d.ts","sourceRoot":"","sources":["../../../../src/components/multiMenu/MultiMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,SAAS,EAAE,QAAQ,EAAC,MAAM,gBAAgB,CAAC;AAMnD,oBAAY,KAAK,GAAG;IACnB,gCAAgC;IAChC,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC;IAE5B,+EAA+E;IAC/E,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,4FAA4F;IAC5F,eAAe,CAAC,EAAE,QAAQ,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,CAAC;CACvC,CAAC;AAEF,aAAK,KAAK,GAAG;IACZ,cAAc,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;IACnE,KAAK,EAAE,KAAK,CAEV;IAEF,UAAU,EAAE,MAAM,IAAI,CAIpB;IAEF,MAAM;CA6BN"}

package/lib/esm/components/multiMenu/MultiMenu.js

@@ -1,30 +0,0 @@
-import * as React from 'react';
-import { Popup } from '@deviceinsight/ng-ui-basic-components';
-import Context from './components/MultiMenuContext';
-/**
- * MultiMenu enables a toggleable menu to either show more content and further functionality.
- */
-export default class MultiMenu extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.state = {
-            contentVisible: false
-        };
-        this.toggleMenu = () => {
-            this.setState((prevState) => ({
-                contentVisible: !prevState.contentVisible
-            }));
-        };
-    }
-    render() {
-        const { contentVisible } = this.state;
-        const { menuButton, children, direction, className, popperModifiers } = this.props;
-        return (React.createElement("span", null,
-            React.createElement(Popup, { active: contentVisible, onHide: this.toggleMenu, handler: menuButton, direction: direction, className: className ? className : '', modifiers: popperModifiers, onHandlerClick: this.toggleMenu },
-                React.createElement("div", { className: "di multimenu" },
-                    React.createElement("div", { className: `drop ${direction ? direction : 'bottom'} ${contentVisible ? 'show' : ''}` },
-                        React.createElement(Context.Provider, { value: {
-                                toggleMenu: this.toggleMenu
-                            } }, children))))));
-    }
-}

package/lib/esm/components/multiMenu/components/MultiMenuContext.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-declare type ContextType = {
-    toggleMenu: () => void;
-};
-declare const MultiMenuContext: React.Context<ContextType>;
-export default MultiMenuContext;
-//# sourceMappingURL=MultiMenuContext.d.ts.map

package/lib/esm/components/multiMenu/components/MultiMenuContext.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"MultiMenuContext.d.ts","sourceRoot":"","sources":["../../../../../src/components/multiMenu/components/MultiMenuContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,aAAK,WAAW,GAAG;IAClB,UAAU,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,OAAO,CAAC,WAAW,CAE/C,CAAC;AAEH,eAAe,gBAAgB,CAAC"}

package/lib/esm/components/multiMenu/components/MultiMenuContext.js

@@ -1,5 +0,0 @@
-import React from 'react';
-const MultiMenuContext = React.createContext({
-    toggleMenu: () => { }
-});
-export default MultiMenuContext;

package/lib/esm/components/multiMenu/components/MultiMenuItem.d.ts

@@ -1,14 +0,0 @@
-import * as React from 'react';
-export declare type Props = {
-    children: React.ReactNode;
-    disabled?: boolean;
-    icon?: React.ReactNode;
-    linkTo?: string;
-    onClick?: () => any;
-    'data-testid'?: string;
-};
-export default class MultiMenuItem extends React.PureComponent<Props> {
-    createClickHandler: (toggleMenu: () => void) => () => void;
-    render(): React.JSX.Element;
-}
-//# sourceMappingURL=MultiMenuItem.d.ts.map

package/lib/esm/components/multiMenu/components/MultiMenuItem.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"MultiMenuItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/multiMenu/components/MultiMenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,oBAAY,KAAK,GAAG;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,GAAG,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC;IACpE,kBAAkB,EAAE,CAAC,UAAU,EAAE,MAAM,IAAI,KAAK,MAAM,IAAI,CAQxD;IAEF,MAAM;CA8BN"}

package/lib/esm/components/multiMenu/components/MultiMenuItem.js

@@ -1,24 +0,0 @@
-import * as React from 'react';
-import { Link } from 'react-router-dom';
-import Context from './MultiMenuContext';
-export default class MultiMenuItem extends React.PureComponent {
-    constructor() {
-        super(...arguments);
-        this.createClickHandler = (toggleMenu) => () => {
-            const { onClick } = this.props;
-            if (onClick) {
-                onClick();
-            }
-            toggleMenu();
-        };
-    }
-    render() {
-        const { disabled, icon, children, linkTo } = this.props;
-        const dataTestId = this.props['data-testid'];
-        return (React.createElement(Context.Consumer, null, ({ toggleMenu }) => linkTo ? (React.createElement(Link, { "data-testid": dataTestId, to: linkTo, className: `item ${disabled ? 'disabled' : ''}`, onClick: this.createClickHandler(toggleMenu) },
-            icon && React.createElement("span", { className: "item-icon" }, icon),
-            React.createElement("span", { className: "item-text" }, children))) : (React.createElement("div", { "data-testid": dataTestId, className: `item ${disabled ? 'disabled' : ''}`, onClick: this.createClickHandler(toggleMenu) },
-            icon && React.createElement("span", { className: "item-icon" }, icon),
-            React.createElement("span", { className: "item-text" }, children)))));
-    }
-}

package/lib/esm/components/pagination/Pagination.d.ts

@@ -1,37 +0,0 @@
-import * as React from 'react';
-export declare type Props = {
-    /** Current page */
-    page: number;
-    /** Total number of pages */
-    totalPages: number;
-    /** Function, executed when the current page changes */
-    onChangePage: (page: number) => void;
-    /** (Optional) Function, executed when the number of elements per page changes */
-    onChangeSize?: (size: number) => void;
-    /** (Optional) Number of elements per page*/
-    size?: number;
-};
-declare type State = {
-    page: number | string;
-};
-/**
- * Pagination enables a convenient way to display and navigate through a paginated search result
- */
-export default class Pagination extends React.Component<Props, State> {
-    state: State;
-    multiMenuRef: {
-        current: any | null;
-    };
-    componentDidMount(): void;
-    componentDidUpdate(prevProps: Props): void;
-    goToFirstPage: () => void;
-    goToPrevPage: () => void;
-    goToNextPage: () => void;
-    goToLastPage: () => void;
-    onChangeSize: (event: React.SyntheticEvent<HTMLSelectElement>) => void;
-    notifyPageChange: (page: number) => void;
-    handlePageInputChange: (event: React.SyntheticEvent<HTMLInputElement>) => void;
-    render(): React.JSX.Element;
-}
-export {};
-//# sourceMappingURL=Pagination.d.ts.map

package/lib/esm/components/pagination/Pagination.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../../src/components/pagination/Pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,oBAAY,KAAK,GAAG;IACnB,mBAAmB;IACnB,IAAI,EAAE,MAAM,CAAC;IAEb,4BAA4B;IAC5B,UAAU,EAAE,MAAM,CAAC;IAEnB,uDAAuD;IACvD,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAErC,iFAAiF;IACjF,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAEtC,4CAA4C;IAC5C,IAAI,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,aAAK,KAAK,GAAG;IACZ,IAAI,EAAE,MAAM,GAAG,MAAM,CAAC;CACtB,CAAC;AAIF;;GAEG;AACH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;IACpE,KAAK,EAAE,KAAK,CAEV;IACF,YAAY,EAAE;QACb,OAAO,EAAE,GAAG,GAAG,IAAI,CAAC;KACpB,CAA0B;IAE3B,iBAAiB;IAOjB,kBAAkB,CAAC,SAAS,EAAE,KAAK;IAUnC,aAAa,EAAE,MAAM,IAAI,CAEvB;IAEF,YAAY,EAAE,MAAM,IAAI,CAMtB;IAEF,YAAY,EAAE,MAAM,IAAI,CAMtB;IAEF,YAAY,EAAE,MAAM,IAAI,CAEtB;IAEF,YAAY,UAAW,MAAM,cAAc,CAAC,iBAAiB,CAAC,UAU5D;IAEF,gBAAgB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAEhC;IAER,qBAAqB,UAAW,MAAM,cAAc,CAAC,gBAAgB,CAAC,UAcpE;IAEF,MAAM;CAiFN"}

package/lib/esm/components/pagination/Pagination.js

@@ -1,114 +0,0 @@
-import * as React from 'react';
-import { Trans } from '../../i18n';
-import { debounce } from 'lodash';
-import { Button } from '@deviceinsight/ng-ui-basic-components';
-import iconSettings from '../../assets/svg/icon_menu_vertical.svg';
-import MultiMenu from '../multiMenu/MultiMenu';
-const sizeOptions = [5, 10, 15, 20, 50];
-/**
- * Pagination enables a convenient way to display and navigate through a paginated search result
- */
-export default class Pagination extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.state = {
-            page: 0
-        };
-        this.multiMenuRef = React.createRef();
-        this.goToFirstPage = () => {
-            this.props.onChangePage(0);
-        };
-        this.goToPrevPage = () => {
-            const { page } = this.props;
-            if (page > 0) {
-                this.props.onChangePage(page - 1);
-            }
-        };
-        this.goToNextPage = () => {
-            const { page } = this.props;
-            if (page < this.props.totalPages - 1) {
-                this.props.onChangePage(page + 1);
-            }
-        };
-        this.goToLastPage = () => {
-            this.props.onChangePage(this.props.totalPages - 1);
-        };
-        this.onChangeSize = (event) => {
-            const { onChangeSize } = this.props;
-            if (onChangeSize) {
-                onChangeSize(Number(event.target.value));
-            }
-            if (this.multiMenuRef && this.multiMenuRef.current) {
-                this.multiMenuRef.current.toggleMenu();
-            }
-        };
-        this.notifyPageChange = debounce((page) => {
-            this.props.onChangePage(page);
-        }, 500);
-        this.handlePageInputChange = (event) => {
-            const { totalPages } = this.props;
-            const page = Number(event.target.value);
-            if (page === 0) {
-                this.setState({
-                    page: ''
-                });
-            }
-            else if (!isNaN(page) && page <= totalPages) {
-                this.setState({
-                    page: page - 1
-                });
-                this.notifyPageChange(page - 1);
-            }
-        };
-    }
-    componentDidMount() {
-        const { page } = this.props;
-        this.setState({
-            page
-        });
-    }
-    componentDidUpdate(prevProps) {
-        const { page } = this.props;
-        if (prevProps.page !== page && page !== this.state.page) {
-            this.setState({
-                page
-            });
-        }
-    }
-    render() {
-        const { totalPages, size, onChangeSize } = this.props;
-        const { page } = this.state;
-        const isLastPage = page === totalPages - 1;
-        const showPage = page !== '' ? Number(page) + 1 : '';
-        return (React.createElement("div", { className: "di pagination-holder" },
-            React.createElement("div", { className: "di pagination" },
-                React.createElement("span", { className: `prev ${page === 0 ? 'disabled' : ''}`, onClick: this.goToFirstPage }, "\u00AB"),
-                React.createElement("span", { className: `prev ${page === 0 ? 'disabled' : ''}`, onClick: this.goToPrevPage }, "\u2039"),
-                React.createElement("span", { className: "info" },
-                    React.createElement(Trans, { i18nKey: "reactable.pagination.page" }, "Page"),
-                    React.createElement("input", { value: showPage, onChange: this.handlePageInputChange }),
-                    typeof process !== 'undefined' && process?.env?.STORYBOOK_MODE ? (React.createElement(React.Fragment, null,
-                        "of \u00A0 ",
-                        totalPages)) : (React.createElement(Trans, { i18nKey: "reactable.pagination.ofTotal" },
-                        " of \u00A0 ",
-                        { totalPages }))),
-                React.createElement("span", { className: `next ${isLastPage ? 'disabled' : ''}`, onClick: this.goToNextPage }, "\u203A"),
-                React.createElement("span", { className: `next ${isLastPage ? 'disabled' : ''}`, onClick: this.goToLastPage }, "\u00BB"),
-                onChangeSize && (React.createElement("div", { className: "options" },
-                    React.createElement(MultiMenu, { ref: this.multiMenuRef, direction: "left", menuButton: React.createElement(Button, { naked: true, title: {
-                                id: 'trend.settings.buttonTitle',
-                                defaultValue: 'Settings'
-                            } },
-                            React.createElement("img", { src: iconSettings, alt: "settings icon", style: { width: 16, height: 16 } })) },
-                        React.createElement("div", { className: "di form", style: {
-                                width: 200,
-                                padding: 10
-                            } },
-                            React.createElement("div", { className: "field" },
-                                React.createElement("label", null,
-                                    React.createElement(Trans, { i18nKey: "reactable.pagination.entriesPerPage" }, "Entries per page")),
-                                React.createElement("select", { onChange: this.onChangeSize, value: size }, sizeOptions.map((sizeOption) => (React.createElement("option", { key: sizeOption, value: sizeOption }, sizeOption))))),
-                            React.createElement("p", null,
-                                React.createElement(Trans, { i18nKey: "reactable.pagination.changePageWillBeStored" }, "Your changes will be stored for this view.")))))))));
-    }
-}

package/lib/esm/components/pagination/__tests__/Pagination.spec.d.ts

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

package/lib/esm/components/pagination/__tests__/Pagination.spec.d.ts.map

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