@deviceinsight/ng-ui-components 6.18.0 → 6.19.0

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

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

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

@@ -0,0 +1,56 @@
+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/src/components/periodpicker/types.d.ts

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

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

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

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

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

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

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

@@ -0,0 +1,38 @@
+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/src/components/prompt/Prompt.d.ts

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

@@ -0,0 +1 @@
+{"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/src/components/prompt/Prompt.js

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

package/lib/esm/src/components/prompt/withPrompt.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { TranslationDescriptor } from '../../types/i18n';
+export declare type PromptProps = {
+    prompt: (title: TranslationDescriptor, message: TranslationDescriptor, inputPlaceholder?: TranslationDescriptor, acceptButtonLabel?: TranslationDescriptor, cancelButtonLabel?: TranslationDescriptor) => Promise<string>;
+};
+export default function withPrompt<P>(WrappedComponent: React.ComponentType<P & PromptProps>): React.ComponentType<P>;
+//# sourceMappingURL=withPrompt.d.ts.map

package/lib/esm/src/components/prompt/withPrompt.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"withPrompt.d.ts","sourceRoot":"","sources":["../../../../../src/components/prompt/withPrompt.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,qBAAqB,EAAC,MAAM,kBAAkB,CAAC;AAGvD,oBAAY,WAAW,GAAG;IACzB,MAAM,EAAE,CACP,KAAK,EAAE,qBAAqB,EAC5B,OAAO,EAAE,qBAAqB,EAC9B,gBAAgB,CAAC,EAAE,qBAAqB,EACxC,iBAAiB,CAAC,EAAE,qBAAqB,EACzC,iBAAiB,CAAC,EAAE,qBAAqB,KACrC,OAAO,CAAC,MAAM,CAAC,CAAC;CACrB,CAAC;AAOF,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,CAAC,EAAE,gBAAgB,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC,GAAG,WAAW,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CA8CpH"}

package/lib/esm/src/components/prompt/withPrompt.js

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import Prompt from './Prompt';
+export default function withPrompt(WrappedComponent) {
+    return class WithPromptWrapper extends React.Component {
+        constructor() {
+            super(...arguments);
+            this.state = {
+                show: false
+            };
+            this.prompt = (title, message, inputPlaceholder, acceptButtonLabel, cancelButtonLabel) => new Promise((resolve) => {
+                this.setState({
+                    show: true,
+                    promptElement: (React.createElement(Prompt, { title: title, message: message, onAccept: (value) => {
+                            this.setState({
+                                show: false
+                            });
+                            resolve(value);
+                        }, onCancel: () => {
+                            this.setState({
+                                show: false
+                            });
+                        }, inputPlaceholder: inputPlaceholder, acceptButtonLabel: acceptButtonLabel, cancelButtonLabel: cancelButtonLabel, key: "1" }))
+                });
+            });
+        }
+        render() {
+            return [
+                React.createElement(WrappedComponent, { ...this.props, prompt: this.prompt, key: "0" }),
+                this.state.show ? this.state.promptElement : null
+            ];
+        }
+    };
+}

package/lib/esm/src/components/reactable/Reactable.d.ts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { ReactableColumnDef, ReactableRowDef, ReactableFilterSettings } from './types';
+import { Pageable, PaginationSettings, SortDirection } from '../../types/pagination';
+export declare type Props<T, ID extends string | number | undefined | null = any> = {
+    /** Array of column definitions, each column can be configured independently */
+    columnDefs: Array<ReactableColumnDef<T>>;
+    /** Function, sets identifier for each element in Reactable */
+    uniqueItemKey: (item: T) => ID;
+    /** Settings for paginated content */
+    paginationSettings: PaginationSettings;
+    /** Function, executed if the current page changes */
+    onChangePage: (page: number) => void;
+    /** Function, executed if sorting changes */
+    onSort: (property: string, direction: SortDirection) => void;
+    /** (Optional) function, executed if the page size changes */
+    onChangeSize?: (size: number) => void;
+    /** (Optional) function, executed if the Reactable gets filtered */
+    onFilter?: (filterSettings: ReactableFilterSettings) => void;
+    /** Content, totalElements, totalPages, number, size, sort */
+    pageable: Pageable<T> | null | undefined;
+    /** (Optional) can set custom event handler and/or functions in general */
+    rowDef?: ReactableRowDef<T>;
+    /** It true, shows loading indicator */
+    isLoading: boolean;
+    /** (Optional) if true, makes rows clickable */
+    clickable?: boolean;
+    /** (Optional) shown message when the table is empty  */
+    messageWhenEmpty?: string;
+    'data-testid'?: string;
+};
+/**
+ * Reactable displays paginated results nicely, while adding the possibility to add further functionality to each row.
+ * Each column can also be extended to be sortable and/or filterable
+ */
+export default class Reactable<T = any, ID extends string | number | undefined | null = any> extends React.Component<Props<T, ID>> {
+    render(): React.JSX.Element;
+}
+//# sourceMappingURL=Reactable.d.ts.map

package/lib/esm/src/components/reactable/Reactable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Reactable.d.ts","sourceRoot":"","sources":["../../../../../src/components/reactable/Reactable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAC,kBAAkB,EAAE,eAAe,EAAE,uBAAuB,EAAC,MAAM,SAAS,CAAC;AACrF,OAAO,EAAC,QAAQ,EAAE,kBAAkB,EAAE,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAEnF,oBAAY,KAAK,CAAC,CAAC,EAAE,EAAE,SAAS,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,GAAG,GAAG,IAAI;IAC3E,+EAA+E;IAC/E,UAAU,EAAE,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC;IAEzC,8DAA8D;IAC9D,aAAa,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,EAAE,CAAC;IAE/B,qCAAqC;IACrC,kBAAkB,EAAE,kBAAkB,CAAC;IAEvC,qDAAqD;IACrD,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAErC,4CAA4C;IAC5C,MAAM,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,KAAK,IAAI,CAAC;IAE7D,6DAA6D;IAC7D,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAEtC,mEAAmE;IACnE,QAAQ,CAAC,EAAE,CAAC,cAAc,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAE7D,6DAA6D;IAC7D,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;IAEzC,0EAA0E;IAC1E,MAAM,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IAE5B,uCAAuC;IACvC,SAAS,EAAE,OAAO,CAAC;IAEnB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,wDAAwD;IACxD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,OAAO,OAAO,SAAS,CAAC,CAAC,GAAG,GAAG,EAAE,EAAE,SAAS,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,GAAG,GAAG,CAAE,SAAQ,KAAK,CAAC,SAAS,CACnH,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CACZ;IACA,MAAM;CAoBN"}

package/lib/esm/src/components/reactable/Reactable.js

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import Pagination from '../pagination/Pagination';
+import ReactableTable from './helpers/ReactableTable';
+/**
+ * Reactable displays paginated results nicely, while adding the possibility to add further functionality to each row.
+ * Each column can also be extended to be sortable and/or filterable
+ */
+export default class Reactable extends React.Component {
+    render() {
+        const { paginationSettings, pageable, onChangePage, onChangeSize } = this.props;
+        const showPagination = onChangeSize
+            ? pageable && pageable.totalElements > 0
+            : pageable && pageable.totalPages > 1;
+        return (React.createElement("div", null,
+            React.createElement(ReactableTable, { ...this.props }),
+            pageable && showPagination && (React.createElement(Pagination, { page: paginationSettings.page, totalPages: pageable.totalPages, onChangePage: onChangePage, onChangeSize: onChangeSize, size: paginationSettings.size }))));
+    }
+}

package/lib/esm/src/components/reactable/helpers/ReactableTable.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { ReactableColumnDef, ReactableRowDef, ReactableFilterSettings } from '../types';
+import { Pageable, PaginationSettings, SortDirection } from '../../../types/pagination';
+declare type Props<T, ID extends string | number | undefined | null> = {
+    columnDefs: Array<ReactableColumnDef<T>>;
+    uniqueItemKey: (arg0: T) => ID;
+    paginationSettings: PaginationSettings;
+    onSort: (property: string, direction: SortDirection) => void;
+    onFilter?: (filterSettings: ReactableFilterSettings) => void;
+    pageable: Pageable<T> | null | undefined;
+    isLoading: boolean;
+    rowDef?: ReactableRowDef<T>;
+    clickable?: boolean;
+    messageWhenEmpty?: string;
+    'data-testid'?: string;
+};
+export default class ReactableTable<T = any, ID extends string | number | undefined | null = any> extends React.Component<Props<T, ID>> {
+    render(): React.JSX.Element;
+}
+export {};
+//# sourceMappingURL=ReactableTable.d.ts.map

package/lib/esm/src/components/reactable/helpers/ReactableTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactableTable.d.ts","sourceRoot":"","sources":["../../../../../../src/components/reactable/helpers/ReactableTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,EAAC,kBAAkB,EAAE,eAAe,EAAE,uBAAuB,EAAC,MAAM,UAAU,CAAC;AACtF,OAAO,EAAC,QAAQ,EAAE,kBAAkB,EAAE,aAAa,EAAC,MAAM,2BAA2B,CAAC;AAEtF,aAAK,KAAK,CAAC,CAAC,EAAE,EAAE,SAAS,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,IAAI;IAC9D,UAAU,EAAE,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC;IACzC,aAAa,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,EAAE,CAAC;IAC/B,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,MAAM,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7D,QAAQ,CAAC,EAAE,CAAC,cAAc,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAC7D,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;IACzC,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,CAAC,OAAO,OAAO,cAAc,CAClC,CAAC,GAAG,GAAG,EACP,EAAE,SAAS,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,GAAG,GAAG,CAClD,SAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IACtC,MAAM;CA+DN"}

package/lib/esm/src/components/reactable/helpers/ReactableTable.js

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { Trans } from '../../../i18n';
+import cx from 'classnames';
+import { SpinnerContainer } from '@deviceinsight/ng-ui-basic-components';
+import ReactableTableRow from './ReactableTableRow';
+import ReactableTableHeader from './ReactableTableHeader';
+import ReactableTableFilterRow from './ReactableTableFilterRow';
+export default class ReactableTable extends React.Component {
+    render() {
+        const { columnDefs, rowDef, uniqueItemKey, paginationSettings, pageable, onSort, onFilter, isLoading, clickable, messageWhenEmpty } = this.props;
+        const showFilterRow = columnDefs.some((columnDef) => !!columnDef.filterable);
+        return (React.createElement(SpinnerContainer, { show: isLoading },
+            React.createElement("div", { className: "di reactable scroll-x" },
+                React.createElement("table", { className: cx('di reactable sortable hoverable', { selectable: clickable }), "data-testid": this.props['data-testid'] },
+                    React.createElement("thead", null,
+                        React.createElement(ReactableTableHeader, { columnDefs: columnDefs, paginationSettings: paginationSettings, onSort: onSort })),
+                    React.createElement("tbody", null,
+                        onFilter && showFilterRow && (React.createElement(ReactableTableFilterRow, { columnDefs: columnDefs, onFilter: onFilter })),
+                        pageable &&
+                            pageable.content.length > 0 &&
+                            pageable.content.map((item, index) => {
+                                if (paginationSettings.size > index) {
+                                    return (React.createElement(ReactableTableRow, { key: uniqueItemKey(item), columnDefs: columnDefs, item: item, rowDef: rowDef }));
+                                }
+                                else {
+                                    return null;
+                                }
+                            }),
+                        (!pageable || !pageable.content.length) && !isLoading && (React.createElement("tr", null,
+                            React.createElement("td", { colSpan: columnDefs.length },
+                                React.createElement(Trans, { i18nKey: messageWhenEmpty ?? 'reactable.noEntriesFound' }, "No entries found")))))))));
+    }
+}

package/lib/esm/src/components/reactable/helpers/ReactableTableFilterRow.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ReactableColumnDef, ReactableFilterSettings } from '../types';
+declare type Props = {
+    columnDefs: Array<ReactableColumnDef<any>>;
+    onFilter: (filterColumns: ReactableFilterSettings) => void;
+};
+declare const ReactableTableFilterRow: React.FC<Props>;
+export default ReactableTableFilterRow;
+//# sourceMappingURL=ReactableTableFilterRow.d.ts.map

package/lib/esm/src/components/reactable/helpers/ReactableTableFilterRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactableTableFilterRow.d.ts","sourceRoot":"","sources":["../../../../../../src/components/reactable/helpers/ReactableTableFilterRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,OAAO,EAAC,kBAAkB,EAAE,uBAAuB,EAAC,MAAM,UAAU,CAAC;AAGrE,aAAK,KAAK,GAAG;IACZ,UAAU,EAAE,KAAK,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC,CAAC;IAC3C,QAAQ,EAAE,CAAC,aAAa,EAAE,uBAAuB,KAAK,IAAI,CAAC;CAC3D,CAAC;AAEF,QAAA,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAuF5C,CAAC;AAEF,eAAe,uBAAuB,CAAC"}

package/lib/esm/src/components/reactable/helpers/ReactableTableFilterRow.js

@@ -0,0 +1,57 @@
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from '../../../i18n';
+import ReactableTextFilter from './ReactableTextFilter';
+const ReactableTableFilterRow = ({ columnDefs, onFilter }) => {
+    const { t } = useTranslation();
+    const [state, setState] = useState({});
+    useEffect(() => {
+        const initialFilters = columnDefs.reduce((acc, columnDef) => ({
+            ...acc,
+            [columnDef.name]: columnDef.filterable?.initialValue ?? ''
+        }), {});
+        setState(initialFilters);
+        if (Object.values(initialFilters).some((value) => value)) {
+            onFilter(initialFilters);
+        }
+    }, [columnDefs, onFilter]);
+    const changeFilter = (columnName, value) => {
+        const newState = { ...state, [columnName]: value };
+        setState(newState);
+        onFilter(newState);
+    };
+    const getFilterByColumnDef = (columnDef) => {
+        if (columnDef.filterable) {
+            switch (columnDef.filterable.filterType) {
+                case 'text':
+                    return textFilter(columnDef);
+                case 'options':
+                    return optionsFilter(columnDef);
+                default:
+                    throw new Error(`Filter type ${columnDef.filterable.filterType} not supported`);
+            }
+        }
+        return null;
+    };
+    const textFilter = (columnDef) => {
+        return React.createElement(ReactableTextFilter, { columnDef: columnDef, changeFilter: changeFilter });
+    };
+    const optionsFilter = (columnDef) => {
+        if (!columnDef.filterable?.filterOptions) {
+            throw new Error(`No filterOptions found for column type: options on columnDef: ${columnDef.name}`);
+        }
+        const filterOptions = columnDef.filterable.filterOptions;
+        return (React.createElement("select", { onChange: (event) => {
+                changeFilter(columnDef.name, event.target.value);
+            }, value: state[columnDef.name] },
+            React.createElement("option", { key: "", value: "" }, t('reactable.filter.all', {
+                defaultValue: '- All -'
+            })),
+            filterOptions.map((option) => (React.createElement("option", { key: option.value, value: option.value }, typeof option.label === 'string'
+                ? option.label
+                : t(option.label.id, {
+                    defaultValue: option.label.defaultValue
+                }))))));
+    };
+    return (React.createElement("tr", { className: "di filterrow form" }, columnDefs.map((columnDef) => (React.createElement("td", { key: columnDef.name, style: { textAlign: columnDef.align || 'left' } }, getFilterByColumnDef(columnDef))))));
+};
+export default ReactableTableFilterRow;

package/lib/esm/src/components/reactable/helpers/ReactableTableHeader.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { ReactableColumnDef, ReactableColumnLabel } from '../types';
+import { PaginationSettings, SortDirection } from '../../../types/pagination';
+declare type Props = {
+    columnDefs: Array<ReactableColumnDef<any>>;
+    paginationSettings: PaginationSettings;
+    onSort: (property: string, direction: SortDirection) => void;
+};
+export default class ReactableTableHeader extends React.Component<Props> {
+    handleSort: (columnDef: ReactableColumnDef<unknown>) => void;
+    getClassName: (columnDef: ReactableColumnDef<any>) => "" | "sortable sortAsc" | "sortable sortDes" | "sortable";
+    printLabel: (label: ReactableColumnLabel) => string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | import("../../../types/i18n").TranslationDescriptor | null | undefined;
+    render(): React.JSX.Element;
+}
+export {};
+//# sourceMappingURL=ReactableTableHeader.d.ts.map

package/lib/esm/src/components/reactable/helpers/ReactableTableHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactableTableHeader.d.ts","sourceRoot":"","sources":["../../../../../../src/components/reactable/helpers/ReactableTableHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,kBAAkB,EAAE,oBAAoB,EAAC,MAAM,UAAU,CAAC;AAClE,OAAO,EAAC,kBAAkB,EAAE,aAAa,EAAC,MAAM,2BAA2B,CAAC;AAI5E,aAAK,KAAK,GAAG;IACZ,UAAU,EAAE,KAAK,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC,CAAC;IAC3C,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,MAAM,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,KAAK,IAAI,CAAC;CAC7D,CAAC;AAEF,MAAM,CAAC,OAAO,OAAO,oBAAqB,SAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC;IACvE,UAAU,EAAE,CAAC,SAAS,EAAE,kBAAkB,CAAC,OAAO,CAAC,KAAK,IAAI,CAO1D;IAEF,YAAY,cAAe,mBAAmB,GAAG,CAAC,+DAgBhD;IAEF,UAAU,UAAW,oBAAoB,wJAQvC;IAEF,MAAM;CAuBN"}

package/lib/esm/src/components/reactable/helpers/ReactableTableHeader.js

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { Trans } from '../../../i18n';
+const toggleSortDirection = (direction) => (direction === 'ASC' ? 'DESC' : 'ASC');
+export default class ReactableTableHeader extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.handleSort = (columnDef) => {
+            const { paginationSettings, onSort } = this.props;
+            const direction = columnDef.name === paginationSettings.sort.property
+                ? toggleSortDirection(paginationSettings.sort.direction)
+                : columnDef.defaultSortDirection || 'ASC';
+            onSort(columnDef.name, direction);
+        };
+        this.getClassName = (columnDef) => {
+            const { paginationSettings } = this.props;
+            if (columnDef.sortable) {
+                if (columnDef.name === paginationSettings.sort.property) {
+                    if (paginationSettings.sort.direction === 'ASC') {
+                        return 'sortable sortAsc';
+                    }
+                    else {
+                        return 'sortable sortDes';
+                    }
+                }
+                else {
+                    return 'sortable';
+                }
+            }
+            else {
+                return '';
+            }
+        };
+        this.printLabel = (label) => {
+            // @ts-ignore
+            if (typeof label === 'object' && label.id && typeof label.id === 'string') {
+                // @ts-ignore
+                return React.createElement(Trans, { i18nKey: label.id }, label.defaultValue);
+            }
+            return label;
+        };
+    }
+    render() {
+        return (React.createElement("tr", null, this.props.columnDefs.map((columnDef) => (React.createElement("th", { key: columnDef.name, style: {
+                width: columnDef.width || 'auto',
+                textAlign: columnDef.align || 'left'
+            }, className: this.getClassName(columnDef), onClick: () => {
+                if (columnDef.sortable) {
+                    this.handleSort(columnDef);
+                }
+            } }, this.printLabel(columnDef.label))))));
+    }
+}

package/lib/esm/src/components/reactable/helpers/ReactableTableRow.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { ReactableColumnDef, ReactableRowDef } from '../types';
+declare type Props<T> = {
+    columnDefs: Array<ReactableColumnDef<T>>;
+    item: T;
+    rowDef: ReactableRowDef<T> | null | undefined;
+};
+export default class ReactableTableRow extends React.Component<Props<any>> {
+    getRowClass: () => string;
+    handleClick: () => void;
+    getTooltip: () => string;
+    getRowStyle: () => React.CSSProperties | undefined;
+    render(): React.JSX.Element;
+}
+export {};
+//# sourceMappingURL=ReactableTableRow.d.ts.map

package/lib/esm/src/components/reactable/helpers/ReactableTableRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactableTableRow.d.ts","sourceRoot":"","sources":["../../../../../../src/components/reactable/helpers/ReactableTableRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,kBAAkB,EAAE,eAAe,EAAC,MAAM,UAAU,CAAC;AAE7D,aAAK,KAAK,CAAC,CAAC,IAAI;IACf,UAAU,EAAE,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC;IACzC,IAAI,EAAE,CAAC,CAAC;IACR,MAAM,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;CAC9C,CAAC;AAEF,MAAM,CAAC,OAAO,OAAO,iBAAkB,SAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACzE,WAAW,eAQT;IAEF,WAAW,aAMT;IAEF,UAAU,eAQR;IAEF,WAAW,wCAQT;IAEF,MAAM;CAkCN"}

package/lib/esm/src/components/reactable/helpers/ReactableTableRow.js

@@ -0,0 +1,56 @@
+import * as React from 'react';
+export default class ReactableTableRow extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.getRowClass = () => {
+            const { rowDef, item } = this.props;
+            if (rowDef && typeof rowDef.getRowClass === 'function') {
+                return rowDef.getRowClass(item);
+            }
+            else {
+                return '';
+            }
+        };
+        this.handleClick = () => {
+            const { rowDef, item } = this.props;
+            if (rowDef && typeof rowDef.onClick === 'function') {
+                rowDef.onClick(item);
+            }
+        };
+        this.getTooltip = () => {
+            const { rowDef, item } = this.props;
+            if (rowDef && typeof rowDef.getTooltip === 'function') {
+                return rowDef.getTooltip(item);
+            }
+            else {
+                return '';
+            }
+        };
+        this.getRowStyle = () => {
+            const { rowDef, item } = this.props;
+            if (rowDef && rowDef.getRowStyle) {
+                return rowDef.getRowStyle(item);
+            }
+            else {
+                return undefined;
+            }
+        };
+    }
+    render() {
+        const { columnDefs, item } = this.props;
+        return (React.createElement("tr", { className: this.getRowClass(), onClick: this.handleClick, title: this.getTooltip(), style: this.getRowStyle() }, columnDefs.map((columnDef) => {
+            const textAlign = columnDef.align || 'left';
+            const cursor = columnDef.onClick ? 'pointer' : 'inherit';
+            const whiteSpace = columnDef.whiteSpace || undefined;
+            const onClick = columnDef.onClick
+                ? () => (columnDef.onClick ? columnDef.onClick(item) : undefined)
+                : undefined;
+            return (React.createElement("td", { key: `${item.id}_${columnDef.name}`, style: {
+                    textAlign,
+                    cursor,
+                    // @ts-ignore
+                    whiteSpace
+                }, onClick: onClick }, columnDef.render(item)));
+        })));
+    }
+}

package/lib/esm/src/components/reactable/helpers/ReactableTextFilter.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ReactableColumnDef } from '../types';
+declare type Props = {
+    columnDef: ReactableColumnDef<any>;
+    changeFilter: (columnName: string, value: any) => void;
+};
+declare const ReactableTextFilter: React.FC<Props>;
+export default ReactableTextFilter;
+//# sourceMappingURL=ReactableTextFilter.d.ts.map

package/lib/esm/src/components/reactable/helpers/ReactableTextFilter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactableTextFilter.d.ts","sourceRoot":"","sources":["../../../../../../src/components/reactable/helpers/ReactableTextFilter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAEtC,OAAO,EAAC,kBAAkB,EAAC,MAAM,UAAU,CAAC;AAE5C,aAAK,KAAK,GAAG;IACZ,SAAS,EAAE,kBAAkB,CAAC,GAAG,CAAC,CAAC;IACnC,YAAY,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;CACvD,CAAC;AAMF,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAqBxC,CAAC;AAEF,eAAe,mBAAmB,CAAC"}