@deviceinsight/ng-ui-components 6.18.0 → 6.19.0

package/lib/esm/src/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(): React.JSX.Element;
+}
+//# sourceMappingURL=MultiMenuItem.d.ts.map

package/lib/esm/src/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/esm/src/components/multiMenu/components/MultiMenuItem.js

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

package/lib/esm/src/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/esm/src/components/pagination/Pagination.js

@@ -0,0 +1,114 @@
+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/src/components/pagination/__tests__/Pagination.spec.d.ts

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

package/lib/esm/src/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":""}

package/lib/esm/src/components/pagination/__tests__/Pagination.spec.js

@@ -0,0 +1,87 @@
+import * as React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import Pagination from '../Pagination';
+import { fireEvent, render, waitFor } from '@testing-library/react';
+describe('Pagination.js', () => {
+    it('should disable all buttons when there is only one page', () => {
+        const { container } = render(React.createElement(Pagination, { page: 0, totalPages: 1, onChangePage: () => { } }));
+        expect(container.querySelectorAll('span.disabled')).toHaveLength(4);
+    });
+    it('should disable "prev" and "first" when the first page is selected', () => {
+        const { container } = render(React.createElement(Pagination, { page: 0, totalPages: 10, onChangePage: () => { } }));
+        expect(container.querySelectorAll('span.prev.disabled')).toHaveLength(2);
+    });
+    it('should disable "next" and "last" when the last page is selected', () => {
+        const { container } = render(React.createElement(Pagination, { page: 9, totalPages: 10, onChangePage: () => { } }));
+        expect(container.querySelectorAll('span.next.disabled')).toHaveLength(2);
+    });
+    it('should not disable buttons when on a page > 0 and < max pages', () => {
+        const { container } = render(React.createElement(Pagination, { page: 5, totalPages: 10, onChangePage: () => { } }));
+        expect(container.querySelectorAll('span.disabled')).toHaveLength(0);
+    });
+    it('should go to the first page when the user clicks "first"', () => {
+        const handleChangePage = vi.fn();
+        const { container } = render(React.createElement(Pagination, { page: 5, totalPages: 10, onChangePage: handleChangePage }));
+        fireEvent.click(container.querySelectorAll('span.prev')[0]);
+        expect(handleChangePage).toHaveBeenCalledWith(0);
+    });
+    it('should go to the previous page when the user clicks "prev"', async () => {
+        const page = 2;
+        const handleChangePage = vi.fn();
+        const { container } = render(React.createElement(Pagination, { page: page, totalPages: 10, onChangePage: handleChangePage }));
+        fireEvent.click(container.querySelectorAll('span.prev')[1]);
+        expect(handleChangePage).toHaveBeenCalledWith(page - 1);
+    });
+    it('should go to the next page when the user clicks "next"', () => {
+        const handleChangePage = vi.fn();
+        const { container } = render(React.createElement(Pagination, { page: 2, totalPages: 10, onChangePage: handleChangePage }));
+        fireEvent.click(container.querySelectorAll('span.next')[0]);
+        expect(handleChangePage).toHaveBeenCalledWith(3);
+    });
+    it('should go to the last page when the user clicks "last"', () => {
+        const handleChangePage = vi.fn();
+        const { container } = render(React.createElement(Pagination, { page: 5, totalPages: 10, onChangePage: handleChangePage }));
+        fireEvent.click(container.querySelectorAll('span.next')[1]);
+        expect(handleChangePage).toHaveBeenCalledWith(9);
+    });
+    it('should match snapshot', () => {
+        const PaginationWrapper1 = render(React.createElement(Pagination, { page: 0, totalPages: 10, onChangePage: () => { } }));
+        const PaginationWrapper2 = render(React.createElement(Pagination, { page: 5, totalPages: 10, onChangePage: () => { } }));
+        const PaginationWrapper3 = render(React.createElement(Pagination, { page: 9, totalPages: 10, onChangePage: () => { } }));
+        expect(PaginationWrapper1).toMatchSnapshot();
+        expect(PaginationWrapper2).toMatchSnapshot();
+        expect(PaginationWrapper3).toMatchSnapshot();
+    });
+    describe('handlePageInputChange', () => {
+        it('should set page number if input is a correct number', async () => {
+            const handleChangePage = vi.fn();
+            const { getByRole } = render(React.createElement(Pagination, { page: 0, totalPages: 10, onChangePage: handleChangePage }));
+            const input = getByRole('textbox');
+            fireEvent.change(input, { target: { value: '4' } });
+            fireEvent.blur(input);
+            await waitFor(() => {
+                expect(handleChangePage).toHaveBeenCalledWith(3);
+            });
+        });
+        it('should not set page number if input is bigger than totalPages', async () => {
+            const handleChangePage = vi.fn();
+            const { getByRole } = render(React.createElement(Pagination, { page: 0, totalPages: 10, onChangePage: handleChangePage }));
+            const input = getByRole('textbox');
+            fireEvent.change(input, { target: { value: '12' } });
+            fireEvent.blur(input);
+            await waitFor(() => {
+                expect(handleChangePage).not.toHaveBeenCalled();
+            });
+        });
+        it('should not set an empty string as page state', async () => {
+            const handleChangePage = vi.fn();
+            const { getByRole } = render(React.createElement(Pagination, { page: 0, totalPages: 10, onChangePage: handleChangePage }));
+            const input = getByRole('textbox');
+            fireEvent.change(input, { target: { value: '' } });
+            fireEvent.blur(input);
+            await waitFor(() => {
+                expect(handleChangePage).not.toHaveBeenCalled();
+            });
+        });
+    });
+});

package/lib/esm/src/components/periodpicker/PeriodPicker.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Period } from './types';
+export declare type Props = {
+    /** Period from start- to endpoint */
+    period: Period;
+    /** Function, executed on change */
+    onChange: (period: Period) => void;
+    /** Predefined period name */
+    defaultPeriodName?: string;
+    /** Show only dropdown with calendar part without inputs? */
+    inputsHiddenByDefault?: boolean;
+    /** Should the menu be hidden? */
+    menuHidden?: boolean;
+    /** Should the PeriodPicker be readOnly? */
+    readOnly?: boolean;
+    /** (optional) locale, if not set, the i18next.language is taken */
+    locale?: string;
+    /** (optional) timezone */
+    timezone?: string;
+    'data-testid'?: string;
+};
+export default function PeriodPicker({ period, onChange, inputsHiddenByDefault, menuHidden, readOnly, locale, defaultPeriodName, timezone, ...props }: Props): React.JSX.Element;
+//# sourceMappingURL=PeriodPicker.d.ts.map

package/lib/esm/src/components/periodpicker/PeriodPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PeriodPicker.d.ts","sourceRoot":"","sources":["../../../../../src/components/periodpicker/PeriodPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAEtC,OAAO,EAAC,MAAM,EAAC,MAAM,SAAS,CAAC;AAK/B,oBAAY,KAAK,GAAG;IACnB,qCAAqC;IACrC,MAAM,EAAE,MAAM,CAAC;IAEf,mCAAmC;IACnC,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAEnC,6BAA6B;IAC7B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B,4DAA4D;IAC5D,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEhC,iCAAiC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,mEAAmE;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACpC,MAAM,EACN,QAAQ,EACR,qBAAqB,EACrB,UAAU,EACV,QAAQ,EACR,MAAM,EACN,iBAAiB,EACjB,QAAQ,EACR,GAAG,KAAK,EACR,EAAE,KAAK,qBAmBP"}

package/lib/esm/src/components/periodpicker/PeriodPicker.js

@@ -0,0 +1,11 @@
+import React, { useState } from 'react';
+import Inputs from './components/Inputs';
+import Menu from './components/Menu';
+import usePeriodName from './usePeriodName';
+export default function PeriodPicker({ period, onChange, inputsHiddenByDefault, menuHidden, readOnly, locale, defaultPeriodName, timezone, ...props }) {
+    const [showInputs, setShowInputs] = useState(!inputsHiddenByDefault);
+    const periodName = usePeriodName(period, timezone) ?? defaultPeriodName;
+    return (React.createElement("div", { className: "di period-picker", "data-testid": props['data-testid'] },
+        (!inputsHiddenByDefault || showInputs) && (React.createElement(Inputs, { period: period, onChange: onChange, locale: locale, readOnly: readOnly, timezone: timezone })),
+        menuHidden || readOnly || (React.createElement(Menu, { periodName: periodName, onShowCustomPeriod: inputsHiddenByDefault ? setShowInputs : undefined, onChange: onChange, timezone: timezone }))));
+}

package/lib/esm/src/components/periodpicker/components/Inputs.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Period } from '../types';
+declare type Props = {
+    period: Period;
+    onChange: (period: Period) => void;
+    readOnly?: boolean;
+    locale?: string;
+    timezone?: string;
+};
+export default function Inputs({ period, onChange, readOnly, locale, timezone }: Props): React.JSX.Element;
+export {};
+//# sourceMappingURL=Inputs.d.ts.map

package/lib/esm/src/components/periodpicker/components/Inputs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Inputs.d.ts","sourceRoot":"","sources":["../../../../../../src/components/periodpicker/components/Inputs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyB,MAAM,OAAO,CAAC;AAE9C,OAAO,EAAC,MAAM,EAAC,MAAM,UAAU,CAAC;AAMhC,aAAK,KAAK,GAAG;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAAC,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAC,EAAE,KAAK,qBA2FnF"}

package/lib/esm/src/components/periodpicker/components/Inputs.js

@@ -0,0 +1,59 @@
+import React, { useRef, useState } from 'react';
+import DateTimeInput from '../../input/DateTimeInput';
+const ONE_HOUR = 60 * 60 * 1000;
+const TOGGLE_TIMEOUT = 300;
+export default function Inputs({ period, onChange, readOnly, locale, timezone }) {
+    const [showWarningTarget, setShowWarningTarget] = useState('');
+    const [forceOpenEndDate, setForceOpenEndDate] = useState(false);
+    const warningTimeoutRef = useRef();
+    const startDate = new Date(period.tsStart);
+    const endDate = new Date(period.tsEnd);
+    function openEndDate() {
+        setForceOpenEndDate(true);
+        setTimeout(() => {
+            setForceOpenEndDate(false);
+        }, TOGGLE_TIMEOUT);
+    }
+    function showWarning(target) {
+        if (warningTimeoutRef.current) {
+            clearTimeout(warningTimeoutRef.current);
+        }
+        setShowWarningTarget(target);
+        warningTimeoutRef.current = setTimeout(() => setShowWarningTarget(''), 1000);
+    }
+    function handleChangeStartDate(timestamp, fromTextField) {
+        if (timestamp) {
+            const incorrect = period.tsEnd && timestamp > period.tsEnd;
+            const tsEnd = incorrect ? timestamp + ONE_HOUR : period.tsEnd;
+            onChange({
+                tsStart: timestamp,
+                tsEnd
+            });
+            if (!fromTextField) {
+                openEndDate();
+            }
+            if (incorrect) {
+                showWarning('date-to');
+            }
+        }
+    }
+    function handleChangeEndDate(timestamp) {
+        if (timestamp) {
+            const incorrect = period.tsStart && timestamp < period.tsStart;
+            const tsStart = incorrect ? timestamp - ONE_HOUR : period.tsStart;
+            onChange({
+                tsStart,
+                tsEnd: timestamp
+            });
+            if (incorrect) {
+                showWarning('date-from');
+            }
+        }
+    }
+    return (React.createElement("span", { className: "inputs" },
+        React.createElement("span", { "data-testid": "from-wrapper" },
+            React.createElement(DateTimeInput, { timestamp: period.tsStart, onChange: handleChangeStartDate, warning: showWarningTarget === 'date-from', selectsStart: true, startDate: startDate, endDate: endDate, readOnly: readOnly, locale: locale, timezone: timezone })),
+        "\u00A0 - \u00A0",
+        React.createElement("span", { "data-testid": "to-wrapper" },
+            React.createElement(DateTimeInput, { forceOpen: forceOpenEndDate, timestamp: period.tsEnd, onChange: handleChangeEndDate, warning: showWarningTarget === 'date-to', selectsEnd: true, startDate: startDate, endDate: endDate, readOnly: readOnly, locale: locale, timezone: timezone }))));
+}

package/lib/esm/src/components/periodpicker/components/Menu.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Period } from '../types';
+declare type Props = {
+    periodName: string | undefined;
+    timezone?: string;
+    onChange: (period: Period) => void;
+    onShowCustomPeriod: ((show: boolean) => void) | undefined;
+};
+export default function Menu({ onChange, onShowCustomPeriod, periodName, timezone }: Props): React.JSX.Element;
+export {};
+//# sourceMappingURL=Menu.d.ts.map

package/lib/esm/src/components/periodpicker/components/Menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../../../src/components/periodpicker/components/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAMtC,OAAO,EAAC,MAAM,EAAC,MAAM,UAAU,CAAC;AAgBhC,aAAK,KAAK,GAAG;IACZ,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,kBAAkB,EAAE,CAAC,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;CAC1D,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAAC,QAAQ,EAAE,kBAAkB,EAAE,UAAU,EAAE,QAAQ,EAAC,EAAE,KAAK,qBA2KvF"}

package/lib/esm/src/components/periodpicker/components/Menu.js

@@ -0,0 +1,96 @@
+import React, { useState } from 'react';
+import { Trans } from '../../../i18n';
+import dayjs from 'dayjs';
+import { Button, Popup } from '@deviceinsight/ng-ui-basic-components';
+import DateInput from '../../input/DateInput';
+import MonthPicker from './MonthPicker';
+import imgIconCalendar from '../../../assets/svg/icon_calendar.svg';
+import imgTriangleDown from '../../../assets/svg/triangle_down.svg';
+import { createCurrentMonth, createCurrentWeek, createLastXDays, createToday, createWholeDay, createWholeMonth, createYesterday } from '../periods';
+export default function Menu({ onChange, onShowCustomPeriod, periodName, timezone }) {
+    const [visible, setVisible] = useState(false);
+    const [showDatePicker, setShowDatePicker] = useState(false);
+    const [showMonthPicker, setShowMonthPicker] = useState(false);
+    const [datePickerDate, setDatePickerDate] = useState(Date.now());
+    function setPeriod(period) {
+        onChange(period);
+        setVisible(false);
+        if (onShowCustomPeriod) {
+            onShowCustomPeriod(false);
+        }
+    }
+    function setPeriodSpecificDate(date) {
+        setPeriod(createWholeDay(date ?? Date.now(), timezone));
+        setShowDatePicker(false);
+        setDatePickerDate(date ?? undefined);
+    }
+    function setPeriodSpecificMonth(month, year) {
+        setPeriod(createWholeMonth(dayjs()
+            .year(year)
+            .month(month - 1)
+            .valueOf(), timezone));
+        setShowMonthPicker(false);
+    }
+    function toggleDatePicker() {
+        setShowDatePicker(!showDatePicker);
+        setShowMonthPicker(false);
+    }
+    function toggleMonthPicker() {
+        setShowMonthPicker(!showMonthPicker);
+        setShowDatePicker(false);
+    }
+    function handleCustomPeriodSelect() {
+        setVisible(false);
+        if (onShowCustomPeriod) {
+            onShowCustomPeriod(true);
+        }
+    }
+    return (React.createElement("div", null,
+        React.createElement(Popup, { active: visible, onHide: () => setVisible(false), handler: React.createElement(Button, { "data-testid": "time-period-menu-button", title: {
+                    id: 'trend.calendarMenu.calendar.timePeriod',
+                    defaultValue: 'Time Period'
+                }, onClick: () => setVisible((visible) => !visible) },
+                React.createElement(React.Fragment, null,
+                    React.createElement("img", { src: imgIconCalendar, alt: "calendar icon", style: { width: 16, height: 16 } }),
+                    "\u00A0",
+                    !!periodName && (React.createElement("span", null,
+                        "\u00A0",
+                        periodName,
+                        "\u00A0")),
+                    React.createElement("img", { src: imgTriangleDown, alt: "triangle down", style: { width: 16, height: 16 } }))) },
+            React.createElement("div", { className: "di multimenu period-picker-multimenu" },
+                React.createElement("div", { className: `drop bottom ${visible ? 'show' : ''}` },
+                    React.createElement("div", { className: `left-box ${showDatePicker ? 'show' : ''}` },
+                        React.createElement(DateInput, { inline: true, value: datePickerDate, onChange: setPeriodSpecificDate })),
+                    React.createElement("div", { className: `left-box ${showMonthPicker ? 'show' : ''}` },
+                        React.createElement(MonthPicker, { onChange: setPeriodSpecificMonth })),
+                    React.createElement("div", { className: "right-box" },
+                        React.createElement("div", { className: "item", "data-testid": "today-button", onClick: () => setPeriod(createToday(timezone)) },
+                            React.createElement("div", { className: "item-text" },
+                                React.createElement(Trans, { i18nKey: "trend.calendarMenu.timePeriod.today" }, "Today"))),
+                        React.createElement("div", { className: "item", "data-testid": "yesterday-button", onClick: () => setPeriod(createYesterday(timezone)) },
+                            React.createElement("div", { className: "item-text" },
+                                React.createElement(Trans, { i18nKey: "trend.calendarMenu.timePeriod.yesterday" }, "Yesterday"))),
+                        React.createElement("div", { className: "item" },
+                            React.createElement("div", { "data-testid": "last-7-days-button", className: "item-text", onClick: () => setPeriod(createLastXDays(7, timezone)) },
+                                React.createElement(Trans, { i18nKey: "trend.calendarMenu.timePeriod.lastSevenDays" }, "Last 7 days")),
+                            React.createElement("div", { className: "item-more icon triangle" },
+                                React.createElement("div", { className: "item-more-submenu" }, [2, 3, 5, 10, 14, 30].map((days) => (React.createElement("div", { className: "subitem", key: days, onClick: () => setPeriod(createLastXDays(days, timezone)) }, days)))))),
+                        React.createElement("div", { className: "item", "data-testid": "current-week-button", onClick: () => setPeriod(createCurrentWeek(timezone)) },
+                            React.createElement("div", { className: "item-text" },
+                                React.createElement(Trans, { i18nKey: "trend.calendarMenu.timePeriod.currentWeek" }, "Curr. Week"))),
+                        React.createElement("div", { className: "item", "data-testid": "current-month-button", onClick: () => setPeriod(createCurrentMonth(timezone)) },
+                            React.createElement("div", { className: "item-text" },
+                                React.createElement(Trans, { i18nKey: "trend.calendarMenu.timePeriod.currentMonth" }, "Curr. Month"))),
+                        React.createElement("div", { className: "item", "data-testid": "day-button", onClick: toggleDatePicker },
+                            React.createElement("div", { className: "item-text" },
+                                React.createElement(Trans, { i18nKey: "trend.calendarMenu.timePeriod.day" }, "Day"),
+                                React.createElement("div", { className: "item-more icon dots" }))),
+                        React.createElement("div", { className: "item", "data-testid": "month-button", onClick: toggleMonthPicker },
+                            React.createElement("div", { className: "item-text" },
+                                React.createElement(Trans, { i18nKey: "trend.calendarMenu.timePeriod.month" }, "Month"),
+                                React.createElement("div", { className: "item-more icon dots" }))),
+                        onShowCustomPeriod !== undefined && (React.createElement("div", { className: "item", "data-testid": "from-to-button", onClick: handleCustomPeriodSelect },
+                            React.createElement("div", { className: "item-text" },
+                                React.createElement(Trans, { i18nKey: "trend.calendarMenu.timePeriod.fromto" }, "From/to"))))))))));
+}

package/lib/esm/src/components/periodpicker/components/MonthPicker.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+declare type OwnProps = {
+    month?: number;
+    year?: number;
+    onChange: (month: number, year: number) => void;
+};
+declare type Props = OwnProps;
+declare type State = {
+    selectedMonth: number;
+    selectedYear: number;
+    displayedYear: number;
+};
+export default class MonthPicker extends React.Component<Props, State> {
+    constructor(props: Props);
+    tdMonth: (month: number) => React.JSX.Element;
+    render(): React.JSX.Element;
+}
+export {};
+//# sourceMappingURL=MonthPicker.d.ts.map

package/lib/esm/src/components/periodpicker/components/MonthPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MonthPicker.d.ts","sourceRoot":"","sources":["../../../../../../src/components/periodpicker/components/MonthPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,aAAK,QAAQ,GAAG;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAChD,CAAC;AAEF,aAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,aAAK,KAAK,GAAG;IACZ,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;gBACzD,KAAK,EAAE,KAAK;IAWxB,OAAO,UAAW,MAAM,uBAiBtB;IAEF,MAAM;CAwDN"}

package/lib/esm/src/components/periodpicker/components/MonthPicker.js

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import dayjs from 'dayjs';
+import cx from 'classnames';
+export default class MonthPicker extends React.Component {
+    constructor(props) {
+        super(props);
+        this.tdMonth = (month) => {
+            const { selectedMonth, selectedYear, displayedYear } = this.state;
+            return (React.createElement("td", { "data-testid": `month-${month}-button`, onClick: () => {
+                    this.props.onChange(month, displayedYear);
+                    this.setState({
+                        selectedMonth: month,
+                        selectedYear: displayedYear
+                    });
+                }, className: cx({ selected: month === selectedMonth && displayedYear === selectedYear }) }, dayjs(`${selectedYear}/${month.toString().padStart(2, '0')}/01`, 'YYYY/MM/DD').format('MMM')));
+        };
+        const month = props.month !== null && props.month !== undefined ? props.month : dayjs().month() + 1;
+        const year = props.year !== null && props.year !== undefined ? props.year : dayjs().year();
+        this.state = {
+            selectedMonth: month,
+            selectedYear: year,
+            displayedYear: year
+        };
+    }
+    render() {
+        const { displayedYear } = this.state;
+        return (React.createElement("div", { className: "di monthpicker" },
+            React.createElement("div", { className: "pager" },
+                React.createElement("span", { className: "page-nav prev", onClick: () => {
+                        this.setState({
+                            displayedYear: displayedYear - 1
+                        });
+                    } }),
+                React.createElement("span", { className: "page-nav info" }, displayedYear),
+                React.createElement("span", { className: "page-nav next", onClick: () => {
+                        this.setState({
+                            displayedYear: displayedYear + 1
+                        });
+                    } })),
+            React.createElement("div", { className: "months" },
+                React.createElement("table", { style: {
+                        margin: 'auto'
+                    } },
+                    React.createElement("tbody", null,
+                        React.createElement("tr", null,
+                            this.tdMonth(1),
+                            this.tdMonth(2),
+                            this.tdMonth(3)),
+                        React.createElement("tr", null,
+                            this.tdMonth(4),
+                            this.tdMonth(5),
+                            this.tdMonth(6)),
+                        React.createElement("tr", null,
+                            this.tdMonth(7),
+                            this.tdMonth(8),
+                            this.tdMonth(9)),
+                        React.createElement("tr", null,
+                            this.tdMonth(10),
+                            this.tdMonth(11),
+                            this.tdMonth(12)))))));
+    }
+}