@deviceinsight/ng-ui-components 6.18.0-SNAPSHOT

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

@@ -0,0 +1,48 @@
+"use strict";
+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 SelectWithSearchAsync_1 = __importDefault(require("../SelectWithSearchAsync"));
+const react_2 = require("@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 = jest.fn(() => Promise.resolve({
+    content,
+    totalElements: 2,
+    totalPages: 1,
+    number: 0,
+    size: 5,
+    sort: []
+}));
+const searchById = jest.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 () => {
+        (0, react_2.render)(react_1.default.createElement(SelectWithSearchAsync_1.default, { value: 5, onChange: noop, valueKey: "id", labelKey: "label", searchByQuery: searchByQuery, searchById: searchById }));
+        await (0, react_2.waitFor)(() => {
+            expect(searchById).toHaveBeenCalledTimes(1);
+            expect(searchById).toHaveBeenCalledWith(5);
+        });
+        await (0, react_2.waitFor)(() => {
+            expect(react_2.screen.queryByText(obj5.label)).toBeInTheDocument();
+        });
+    });
+    it(`should fetch and display current value's label if the values is changed from outside`, async () => {
+        const { rerender } = (0, react_2.render)(react_1.default.createElement(SelectWithSearchAsync_1.default, { value: 5, onChange: noop, valueKey: "id", labelKey: "label", searchByQuery: searchByQuery, searchById: searchById }));
+        await (0, react_2.waitFor)(() => {
+            expect(react_2.screen.queryByText(obj5.label)).toBeInTheDocument();
+        });
+        rerender(react_1.default.createElement(SelectWithSearchAsync_1.default, { value: 1, onChange: noop, valueKey: "id", labelKey: "label", searchByQuery: searchByQuery, searchById: searchById }));
+        await (0, react_2.waitFor)(() => {
+            expect(react_2.screen.queryByText(obj1.label)).toBeInTheDocument();
+        });
+    });
+});

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

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

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

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

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

@@ -0,0 +1,81 @@
+"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 });
+/* eslint no-unused-vars: 0 */
+const react_1 = __importStar(require("react"));
+const i18n_1 = require("../../i18n");
+const react_router_dom_1 = require("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`
+ */
+function RouteLink({ to, confirm, className, title, children, keyboardShortcut, ...otherProps }) {
+    const history = (0, react_router_dom_1.useHistory)();
+    const { t } = (0, i18n_1.useTranslation)();
+    const pushRoute = (0, react_1.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 = (0, react_1.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]);
+    (0, react_1.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_1.default.createElement("a", { href: href, onClick: handleClickEvent, className: `di route-link ${className || ''}`, title: title
+            ? t(title.id, {
+                defaultValue: title.defaultValue
+            })
+            : undefined, ...otherProps }, children));
+}
+exports.default = RouteLink;

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

@@ -0,0 +1,27 @@
+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(): JSX.Element;
+}
+export {};
+//# sourceMappingURL=MultiMenu.d.ts.map

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

@@ -0,0 +1 @@
+{"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/cjs/components/multiMenu/MultiMenu.js

@@ -0,0 +1,59 @@
+"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 ng_ui_basic_components_1 = require("@deviceinsight/ng-ui-basic-components");
+const MultiMenuContext_1 = __importDefault(require("./components/MultiMenuContext"));
+/**
+ * MultiMenu enables a toggleable menu to either show more content and further functionality.
+ */
+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(ng_ui_basic_components_1.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(MultiMenuContext_1.default.Provider, { value: {
+                                toggleMenu: this.toggleMenu
+                            } }, children))))));
+    }
+}
+exports.default = MultiMenu;

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

@@ -0,0 +1,7 @@
+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/cjs/components/multiMenu/components/MultiMenuContext.d.ts.map

@@ -0,0 +1 @@
+{"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/cjs/components/multiMenu/components/MultiMenuContext.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 react_1 = __importDefault(require("react"));
+const MultiMenuContext = react_1.default.createContext({
+    toggleMenu: () => { }
+});
+exports.default = MultiMenuContext;

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

@@ -0,0 +1,14 @@
+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(): JSX.Element;
+}
+//# sourceMappingURL=MultiMenuItem.d.ts.map

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

@@ -0,0 +1 @@
+{"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/cjs/components/multiMenu/components/MultiMenuItem.js

@@ -0,0 +1,53 @@
+"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 react_router_dom_1 = require("react-router-dom");
+const MultiMenuContext_1 = __importDefault(require("./MultiMenuContext"));
+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(MultiMenuContext_1.default.Consumer, null, ({ toggleMenu }) => linkTo ? (React.createElement(react_router_dom_1.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)))));
+    }
+}
+exports.default = MultiMenuItem;

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

@@ -0,0 +1,37 @@
+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(): JSX.Element;
+}
+export {};
+//# sourceMappingURL=Pagination.d.ts.map

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

@@ -0,0 +1 @@
+{"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/cjs/components/pagination/Pagination.js

@@ -0,0 +1,143 @@
+"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 i18n_1 = require("../../i18n");
+const lodash_1 = require("lodash");
+const ng_ui_basic_components_1 = require("@deviceinsight/ng-ui-basic-components");
+const icon_menu_vertical_svg_1 = __importDefault(require("../../assets/svg/icon_menu_vertical.svg"));
+const MultiMenu_1 = __importDefault(require("../multiMenu/MultiMenu"));
+const sizeOptions = [5, 10, 15, 20, 50];
+/**
+ * Pagination enables a convenient way to display and navigate through a paginated search result
+ */
+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 = (0, lodash_1.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(i18n_1.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(i18n_1.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_1.default, { ref: this.multiMenuRef, direction: "left", menuButton: React.createElement(ng_ui_basic_components_1.Button, { naked: true, title: {
+                                id: 'trend.settings.buttonTitle',
+                                defaultValue: 'Settings'
+                            } },
+                            React.createElement("img", { src: icon_menu_vertical_svg_1.default, 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(i18n_1.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(i18n_1.Trans, { i18nKey: "reactable.pagination.changePageWillBeStored" }, "Your changes will be stored for this view.")))))))));
+    }
+}
+exports.default = Pagination;

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

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

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

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