@deviceinsight/ng-ui-components 6.30.0 → 7.1.0

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

@@ -1,87 +0,0 @@
-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/components/periodpicker/PeriodPicker.d.ts

@@ -1,23 +0,0 @@
-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/components/periodpicker/PeriodPicker.d.ts.map

@@ -1 +0,0 @@
-{"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/components/periodpicker/PeriodPicker.js

@@ -1,11 +0,0 @@
-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/components/periodpicker/components/Inputs.d.ts

@@ -1,12 +0,0 @@
-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/components/periodpicker/components/Inputs.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Inputs.d.ts","sourceRoot":"","sources":["../../../../../src/components/periodpicker/components/Inputs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyB,MAAM,OAAO,CAAC;AAG9C,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,qBAiGnF"}

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

@@ -1,66 +0,0 @@
-import React, { useRef, useState } from 'react';
-import { isEqual } from 'lodash';
-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;
-            const newPeriod = {
-                tsStart: timestamp,
-                tsEnd
-            };
-            if (!isEqual(newPeriod, period)) {
-                onChange(newPeriod);
-            }
-            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;
-            const newPeriod = {
-                tsStart,
-                tsEnd: timestamp
-            };
-            if (!isEqual(newPeriod, period)) {
-                onChange(newPeriod);
-            }
-            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/components/periodpicker/components/Menu.d.ts

@@ -1,11 +0,0 @@
-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/components/periodpicker/components/Menu.d.ts.map

@@ -1 +0,0 @@
-{"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/components/periodpicker/components/Menu.js

@@ -1,96 +0,0 @@
-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/components/periodpicker/components/MonthPicker.d.ts

@@ -1,19 +0,0 @@
-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/components/periodpicker/components/MonthPicker.d.ts.map

@@ -1 +0,0 @@
-{"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/components/periodpicker/components/MonthPicker.js

@@ -1,62 +0,0 @@
-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)))))));
-    }
-}

package/lib/esm/components/periodpicker/periods.d.ts

@@ -1,33 +0,0 @@
-import dayjs from 'dayjs';
-import { Period } from './types';
-export declare function dayjsTz(timezone: string | undefined, ts?: number | null | undefined): dayjs.Dayjs;
-export declare function createToday(timezone: string | undefined): {
-    tsStart: number;
-    tsEnd: number;
-};
-export declare function createYesterday(timezone: string | undefined): {
-    tsStart: number;
-    tsEnd: number;
-};
-export declare function createCurrentWeek(timezone: string | undefined): {
-    tsStart: number;
-    tsEnd: number;
-};
-export declare function createCurrentMonth(timezone: string | undefined): {
-    tsStart: number;
-    tsEnd: number;
-};
-export declare function createWholeDay(tsMiddle: number, timezone: string | undefined): {
-    tsStart: number;
-    tsEnd: number;
-};
-export declare function createWholeMonth(tsMiddle: number, timezone: string | undefined): {
-    tsStart: number;
-    tsEnd: number;
-};
-export declare function createLastXDays(days: number, timezone: string | undefined): {
-    tsStart: number;
-    tsEnd: number;
-};
-export declare function periodToDays({ tsStart, tsEnd }: Period): number;
-//# sourceMappingURL=periods.d.ts.map

package/lib/esm/components/periodpicker/periods.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"periods.d.ts","sourceRoot":"","sources":["../../../../src/components/periodpicker/periods.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAC,MAAM,EAAC,MAAM,SAAS,CAAC;AAK/B,wBAAgB,OAAO,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,EAAE,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,eAEnF;AAED,wBAAgB,WAAW,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS;;;EAKvD;AAED,wBAAgB,eAAe,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS;;;EAK3D;AAED,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS;;;EAK7D;AAED,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS;;;EAK9D;AAED,wBAAgB,cAAc,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,SAAS;;;EAK5E;AAED,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,SAAS;;;EAK9E;AAED,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,SAAS;;;EAQzE;AAID,wBAAgB,YAAY,CAAC,EAAC,OAAO,EAAE,KAAK,EAAC,EAAE,MAAM,GAAG,MAAM,CAE7D"}

package/lib/esm/components/periodpicker/periods.js

@@ -1,56 +0,0 @@
-import dayjs from 'dayjs';
-import timezone from 'dayjs/plugin/timezone';
-import utc from 'dayjs/plugin/utc';
-dayjs.extend(timezone);
-dayjs.extend(utc);
-export function dayjsTz(timezone, ts) {
-    return timezone ? dayjs.tz(ts, timezone) : dayjs(ts);
-}
-export function createToday(timezone) {
-    return {
-        tsStart: dayjsTz(timezone).startOf('day').valueOf(),
-        tsEnd: dayjsTz(timezone).endOf('day').valueOf()
-    };
-}
-export function createYesterday(timezone) {
-    return {
-        tsStart: dayjsTz(timezone).subtract(1, 'day').startOf('day').valueOf(),
-        tsEnd: dayjsTz(timezone).subtract(1, 'day').endOf('day').valueOf()
-    };
-}
-export function createCurrentWeek(timezone) {
-    return {
-        tsStart: dayjsTz(timezone).startOf('week').valueOf(),
-        tsEnd: dayjsTz(timezone).endOf('week').valueOf()
-    };
-}
-export function createCurrentMonth(timezone) {
-    return {
-        tsStart: dayjsTz(timezone).startOf('month').valueOf(),
-        tsEnd: dayjsTz(timezone).endOf('month').valueOf()
-    };
-}
-export function createWholeDay(tsMiddle, timezone) {
-    return {
-        tsStart: dayjsTz(timezone, tsMiddle).startOf('day').valueOf(),
-        tsEnd: dayjsTz(timezone, tsMiddle).endOf('day').valueOf()
-    };
-}
-export function createWholeMonth(tsMiddle, timezone) {
-    return {
-        tsStart: dayjsTz(timezone, tsMiddle).startOf('month').valueOf(),
-        tsEnd: dayjsTz(timezone, tsMiddle).endOf('month').valueOf()
-    };
-}
-export function createLastXDays(days, timezone) {
-    const tsStart = dayjsTz(timezone)
-        .subtract(days - 1, 'days')
-        .startOf('day')
-        .valueOf();
-    const tsEnd = dayjs().endOf('day').valueOf();
-    return { tsStart, tsEnd };
-}
-const DAY_TO_MILLIS = 1000 * 60 * 60 * 24;
-export function periodToDays({ tsStart, tsEnd }) {
-    return Math.round((tsEnd - tsStart + 1) / DAY_TO_MILLIS);
-}

package/lib/esm/components/periodpicker/types.d.ts

@@ -1,5 +0,0 @@
-export declare type Period = {
-    tsStart: number;
-    tsEnd: number;
-};
-//# sourceMappingURL=types.d.ts.map

package/lib/esm/components/periodpicker/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/periodpicker/types.ts"],"names":[],"mappings":"AAAA,oBAAY,MAAM,GAAG;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;CACd,CAAC"}

package/lib/esm/components/periodpicker/types.js

@@ -1 +0,0 @@
-export {};

package/lib/esm/components/periodpicker/usePeriodName.d.ts

@@ -1,7 +0,0 @@
-import { Period } from './types';
-/**
- * This hook takes a period and tries to find its translation.
- * @param period
- */
-export default function usePeriodName(period: Period, timezone: string | undefined): string | undefined;
-//# sourceMappingURL=usePeriodName.d.ts.map

package/lib/esm/components/periodpicker/usePeriodName.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"usePeriodName.d.ts","sourceRoot":"","sources":["../../../../src/components/periodpicker/usePeriodName.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,MAAM,EAAC,MAAM,SAAS,CAAC;AAgB/B;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,SAAS,sBAoCjF"}

package/lib/esm/components/periodpicker/usePeriodName.js

@@ -1,38 +0,0 @@
-import { useTranslation } from '../../i18n';
-import { createCurrentMonth, createCurrentWeek, createLastXDays, createToday, createWholeDay, createWholeMonth, createYesterday, periodToDays } from './periods';
-function compare(period1, period2) {
-    return period1.tsStart === period2.tsStart && period1.tsEnd === period2.tsEnd;
-}
-/**
- * This hook takes a period and tries to find its translation.
- * @param period
- */
-export default function usePeriodName(period, timezone) {
-    const { t } = useTranslation();
-    if (compare(period, createToday(timezone))) {
-        return t('trend.calendarMenu.timePeriod.today', { defaultValue: 'Today' });
-    }
-    if (compare(period, createYesterday(timezone))) {
-        return t('trend.calendarMenu.timePeriod.yesterday', { defaultValue: 'Yesterday' });
-    }
-    if (compare(period, createCurrentWeek(timezone))) {
-        return t('trend.calendarMenu.timePeriod.currentWeek', { defaultValue: 'Curr. Week' });
-    }
-    if (compare(period, createCurrentMonth(timezone))) {
-        return t('trend.calendarMenu.timePeriod.currentMonth', { defaultValue: 'Curr. Month' });
-    }
-    if (compare(period, createWholeDay((period.tsStart + period.tsEnd) / 2, timezone))) {
-        return t('trend.calendarMenu.timePeriod.day', { defaultValue: 'Day' });
-    }
-    if (compare(period, createWholeMonth((period.tsStart + period.tsEnd) / 2, timezone))) {
-        return t('trend.calendarMenu.timePeriod.month', { defaultValue: 'Month' });
-    }
-    const days = periodToDays(period);
-    if (compare(period, createLastXDays(days, timezone))) {
-        return t('trend.calendarMenu.timePeriod.lastDays', {
-            defaultValue: `Last ${days} days`,
-            days: days
-        });
-    }
-    return undefined;
-}

package/lib/esm/components/prompt/Prompt.d.ts

@@ -1,23 +0,0 @@
-import React from 'react';
-import { TranslationDescriptor } from '../../types/i18n';
-export declare type Props = {
-    /** Title of the Prompt's content */
-    title: TranslationDescriptor;
-    /** Label of the Prompt's input field */
-    message: TranslationDescriptor;
-    /** @ignore */
-    onAccept: (arg0: string) => void;
-    /** @ignore */
-    onCancel: (...args: Array<any>) => any;
-    /** (Optional) if sets, returns custom label for the accept button */
-    acceptButtonLabel?: TranslationDescriptor;
-    /** (Optional) if sets, returns custom label for the cancel button */
-    cancelButtonLabel?: TranslationDescriptor;
-    /** (Optional) if sets, returns custom placeholder for the input field */
-    inputPlaceholder?: TranslationDescriptor;
-};
-/**
- * This component should not be used directly, instead use `@withPrompt` to inject a promise-based prompt method
- */
-export default function Prompt({ title, message, onAccept, onCancel, inputPlaceholder, cancelButtonLabel, acceptButtonLabel }: Props): React.JSX.Element;
-//# sourceMappingURL=Prompt.d.ts.map

package/lib/esm/components/prompt/Prompt.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Prompt.d.ts","sourceRoot":"","sources":["../../../../src/components/prompt/Prompt.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAKzD,OAAO,EAAC,qBAAqB,EAAC,MAAM,kBAAkB,CAAC;AAEvD,oBAAY,KAAK,GAAG;IACnB,oCAAoC;IACpC,KAAK,EAAE,qBAAqB,CAAC;IAE7B,wCAAwC;IACxC,OAAO,EAAE,qBAAqB,CAAC;IAE/B,cAAc;IACd,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAEjC,cAAc;IACd,QAAQ,EAAE,CAAC,GAAG,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,KAAK,GAAG,CAAC;IAEvC,qEAAqE;IACrE,iBAAiB,CAAC,EAAE,qBAAqB,CAAC;IAE1C,qEAAqE;IACrE,iBAAiB,CAAC,EAAE,qBAAqB,CAAC;IAE1C,yEAAyE;IACzE,gBAAgB,CAAC,EAAE,qBAAqB,CAAC;CACzC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC9B,KAAK,EACL,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,gBAAgB,EAChB,iBAAiB,EACjB,iBAAiB,EACjB,EAAE,KAAK,qBAiEP"}

package/lib/esm/components/prompt/Prompt.js

@@ -1,31 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { Trans, useTranslation } from '../../i18n';
-import { Button, Modal } from '@deviceinsight/ng-ui-basic-components';
-/**
- * This component should not be used directly, instead use `@withPrompt` to inject a promise-based prompt method
- */
-export default function Prompt({ title, message, onAccept, onCancel, inputPlaceholder, cancelButtonLabel, acceptButtonLabel }) {
-    const { t } = useTranslation();
-    const inputRef = useRef(null);
-    const [value, setValue] = useState('');
-    useEffect(() => {
-        inputRef.current?.focus();
-    });
-    return (React.createElement(Modal, { header: t(title.id, {
-            defaultValue: title.defaultValue
-        }), content: React.createElement("div", { className: "di form" },
-            React.createElement("div", { className: "field" },
-                React.createElement("label", null,
-                    React.createElement(Trans, { i18nKey: message.id }, message.defaultValue)),
-                React.createElement("input", { type: "text", style: {
-                        width: 250
-                    }, ref: inputRef, placeholder: inputPlaceholder
-                        ? t(inputPlaceholder.id, {
-                            defaultValue: inputPlaceholder.defaultValue
-                        })
-                        : undefined, onChange: (event) => setValue(event.target.value) }))), footer: React.createElement("div", null,
-            React.createElement(Button, { primary: true, onClick: () => {
-                    onAccept(value);
-                }, disabled: !value.length }, acceptButtonLabel ? (React.createElement(Trans, { i18nKey: acceptButtonLabel.id }, acceptButtonLabel.defaultValue)) : (React.createElement(Trans, { i18nKey: "form.accept" }, "Accept"))),
-            React.createElement(Button, { onClick: onCancel }, cancelButtonLabel ? (React.createElement(Trans, { i18nKey: cancelButtonLabel.id }, cancelButtonLabel.defaultValue)) : (React.createElement(Trans, { i18nKey: "form.cancel" }, "Cancel")))), width: 600 }));
-}