@deviceinsight/ng-ui-components 6.25.0 → 6.27.0

package/lib/cjs/components/input/DateInput.d.ts

@@ -5,6 +5,8 @@ import '../../assets/react-datepicker-custom.css';
 declare type DateInputProps = {
     /** the current value (millis since 1970-01-01 or formatted string) */
     value: number | string | null | undefined;
+    /** (optional) timezone */
+    timezone?: string;
     /** callback function that is executed when the user picks a date */
     onChange: (date: number | null | undefined, fromTextField?: boolean) => void;
     /** makes the input field clearable */
@@ -23,6 +25,6 @@ export declare type Props = Omit<ReactDatePickerProps, keyof DateInputProps> & D
  * DateInput is used to let users set a date conveniently.
  * Usually the user's locale is used for displaying the correct date format.
  */
-export default function DateInput({ value, clearable, inline, readOnly, wrapperClassName, onChange, locale, ...otherProps }: Props): React.JSX.Element;
+export default function DateInput({ value, clearable, inline, readOnly, wrapperClassName, onChange, locale, timezone, ...otherProps }: Props): React.JSX.Element;
 export {};
 //# sourceMappingURL=DateInput.d.ts.map

package/lib/cjs/components/input/DateInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../../../src/components/input/DateInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AACvE,OAAmB,EAAC,oBAAoB,EAAiB,MAAM,kBAAkB,CAAC;AAalF,OAAO,4CAA4C,CAAC;AACpD,OAAO,0CAA0C,CAAC;AAwClD,aAAK,cAAc,GAAG;IACrB,sEAAsE;IACtE,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAE1C,oEAAoE;IACpE,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAAE,aAAa,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAE7E,sCAAsC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,sCAAsC;IACtC,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,sDAAsD;IACtD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,mEAAmE;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,oBAAY,KAAK,GAAG,IAAI,CAAC,oBAAoB,EAAE,MAAM,cAAc,CAAC,GAAG,cAAc,CAAC;AAqBtF;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EACjC,KAAK,EACL,SAAS,EACT,MAAM,EACN,QAAQ,EACR,gBAAgB,EAChB,QAAQ,EACR,MAAM,EACN,GAAG,UAAU,EACb,EAAE,KAAK,qBAmKP"}
+{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../../../src/components/input/DateInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAGvE,OAAmB,EAAC,oBAAoB,EAAiB,MAAM,kBAAkB,CAAC;AAalF,OAAO,4CAA4C,CAAC;AACpD,OAAO,0CAA0C,CAAC;AA0ClD,aAAK,cAAc,GAAG;IACrB,sEAAsE;IACtE,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAE1C,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,oEAAoE;IACpE,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAAE,aAAa,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAE7E,sCAAsC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,sCAAsC;IACtC,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,sDAAsD;IACtD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,mEAAmE;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,oBAAY,KAAK,GAAG,IAAI,CAAC,oBAAoB,EAAE,MAAM,cAAc,CAAC,GAAG,cAAc,CAAC;AA2CtF;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EACjC,KAAK,EACL,SAAS,EACT,MAAM,EACN,QAAQ,EACR,gBAAgB,EAChB,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,GAAG,UAAU,EACb,EAAE,KAAK,qBAyKP"}

package/lib/cjs/components/input/DateInput.js

@@ -27,6 +27,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
+const timezone_1 = __importDefault(require("dayjs/plugin/timezone"));
+const utc_1 = __importDefault(require("dayjs/plugin/utc"));
 const react_datepicker_1 = __importStar(require("react-datepicker"));
 const lodash_1 = require("lodash");
 const dayjs_1 = __importDefault(require("dayjs"));
@@ -41,6 +43,8 @@ const ng_ui_basic_components_1 = require("@deviceinsight/ng-ui-basic-components"
 require("react-datepicker/dist/react-datepicker.css");
 require("../../assets/react-datepicker-custom.css");
 const dayjsLocales_1 = require("../../utils/dayjsLocales");
+dayjs_1.default.extend(utc_1.default);
+dayjs_1.default.extend(timezone_1.default);
 dayjs_1.default.extend(localeData_1.default);
 dayjs_1.default.extend(localizedFormat_1.default);
 dayjs_1.default.extend(customParseFormat_1.default);
@@ -76,29 +80,40 @@ async function changeDayjsLocale(locale) {
     }
 }
 function isInputValid(value, pattern) {
-    if (value == null || (typeof value === 'number' && !isNaN(value)) || value == '') {
+    if (value == null || value === '') {
         return true;
     }
+    if (typeof value === 'number') {
+        return !isNaN(value);
+    }
     if (typeof value === 'string') {
         return (0, dayjs_1.default)(value, pattern, true).isValid();
     }
     return false;
 }
-function inputToDate(value, pattern) {
-    if (value == null || value === '' || !isInputValid(value, pattern))
-        return null;
+function inputToDate(value, pattern, timezone) {
     if (typeof value === 'number') {
         return new Date(value);
     }
-    else {
-        return (0, dayjs_1.default)(value, pattern, true).toDate();
+    if (typeof value === 'string' && (0, dayjs_1.default)(value, pattern, true).isValid()) {
+        return dayjs_1.default.tz(value, pattern, timezone).toDate();
+    }
+    return null;
+}
+function inputToTzDate(value, pattern, timezone) {
+    if (typeof value === 'number') {
+        return dayjs_1.default.tz(value, timezone);
+    }
+    if (typeof value === 'string' && (0, dayjs_1.default)(value, pattern, true).isValid()) {
+        return dayjs_1.default.tz(value, pattern, timezone);
     }
+    return null;
 }
 /**
  * DateInput is used to let users set a date conveniently.
  * Usually the user's locale is used for displaying the correct date format.
  */
-function DateInput({ value, clearable, inline, readOnly, wrapperClassName, onChange, locale, ...otherProps }) {
+function DateInput({ value, clearable, inline, readOnly, wrapperClassName, onChange, locale, timezone, ...otherProps }) {
     const [pattern, setPattern] = (0, react_1.useState)(dayjs_1.default.localeData().longDateFormat('L'));
     const { t } = (0, i18n_1.useTranslation)();
     const [valid, setValid] = (0, react_1.useState)(false);
@@ -122,10 +137,9 @@ function DateInput({ value, clearable, inline, readOnly, wrapperClassName, onCha
             });
         }
         else {
-            const date = typeof value === 'number' ? (0, dayjs_1.default)(value) : (0, dayjs_1.default)(value, pattern, true);
-            return date.format(pattern);
+            return typeof value === 'number' ? dayjs_1.default.tz(value, timezone).format(pattern) : value;
         }
-    }, [pattern, t]);
+    }, [pattern, t, timezone]);
     (0, react_1.useEffect)(() => {
         if (value == null) {
             setInputText('');
@@ -144,10 +158,17 @@ function DateInput({ value, clearable, inline, readOnly, wrapperClassName, onCha
     const handleInputTextChange = (text) => {
         setInputText(text);
         if (text) {
-            const date = (0, dayjs_1.default)(text, pattern, true);
-            const valid = date.isValid();
+            const valid = (0, dayjs_1.default)(text, pattern, true).isValid();
             if (valid) {
-                onChange(date.valueOf(), true);
+                const prevDate = inputToTzDate(value, pattern, timezone);
+                const newDate = dayjs_1.default.tz(text, pattern, timezone ?? dayjs_1.default.tz.guess());
+                if (prevDate) {
+                    newDate.set('hour', prevDate.hour());
+                    newDate.set('minute', prevDate.minute());
+                    newDate.set('second', prevDate.second());
+                    newDate.set('millisecond', prevDate.millisecond());
+                }
+                onChange(newDate.valueOf(), true);
             }
             setValid(valid);
         }
@@ -165,10 +186,10 @@ function DateInput({ value, clearable, inline, readOnly, wrapperClassName, onCha
     const handlePopupHide = () => setPopupActive(false);
     const handleClear = () => handleInputTextChange('');
     if (inline) {
-        return (react_1.default.createElement(react_datepicker_1.default, { ...otherProps, onChange: handlePickerChange, selected: inputToDate(value, pattern), locale: locale ?? i18next_1.default.language, isClearable: clearable, placeholderText: pattern, className: (0, classnames_1.default)('date', { invalid: !valid }), inline: true }));
+        return (react_1.default.createElement(react_datepicker_1.default, { ...otherProps, onChange: handlePickerChange, selected: inputToDate(value, pattern, timezone), locale: locale ?? i18next_1.default.language, isClearable: clearable, placeholderText: pattern, className: (0, classnames_1.default)('date', { invalid: !valid }), inline: true }));
     }
     if (readOnly) {
-        return (react_1.default.createElement(react_datepicker_1.default, { ...otherProps, onChange: () => { }, selected: inputToDate(value, pattern), locale: locale ?? i18next_1.default.language, customInput: react_1.default.createElement("span", null,
+        return (react_1.default.createElement(react_datepicker_1.default, { ...otherProps, onChange: () => { }, selected: inputToDate(value, pattern, timezone), locale: locale ?? i18next_1.default.language, customInput: react_1.default.createElement("span", null,
                 react_1.default.createElement("input", { type: "text", value: formattedDate(value), readOnly: true })), placeholderText: pattern, readOnly: true }));
     }
     return (react_1.default.createElement(ng_ui_basic_components_1.Popup, { handler: react_1.default.createElement("span", { className: "di date-input-wrapper" },
@@ -181,6 +202,6 @@ function DateInput({ value, clearable, inline, readOnly, wrapperClassName, onCha
         react_1.default.createElement("div", { className: "di date-picker-popup-wrapper", tabIndex: 0, onFocus: () => {
                 debouncedSetPopupActive(true);
             } },
-            react_1.default.createElement(react_datepicker_1.default, { ...otherProps, selected: inputToDate(value, pattern), onChange: handlePickerChange, locale: locale ?? i18next_1.default.language, isClearable: clearable, placeholderText: pattern, className: (0, classnames_1.default)('date', { invalid: !valid }), inline: true }))));
+            react_1.default.createElement(react_datepicker_1.default, { ...otherProps, selected: inputToDate(value, pattern, timezone), onChange: handlePickerChange, locale: locale ?? i18next_1.default.language, isClearable: clearable, placeholderText: pattern, className: (0, classnames_1.default)('date', { invalid: !valid }), inline: true }))));
 }
 exports.default = DateInput;

package/lib/cjs/components/input/DateTimeInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimeInput.d.ts","sourceRoot":"","sources":["../../../../src/components/input/DateTimeInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAwBjD,oBAAY,KAAK,GAAG;IACnB,kDAAkD;IAClD,SAAS,EAAE,MAAM,CAAC;IAElB,oEAAoE;IACpE,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAAE,aAAa,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAE7E,yDAAyD;IACzD,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,OAAO,CAAC,EAAE,IAAI,CAAC;IAEf,mEAAmE;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACrC,SAAS,EACT,QAAQ,EACR,OAAO,EACP,QAAgB,EAChB,QAAQ,EACR,GAAG,UAAU,EACb,EAAE,KAAK,qBAgFP"}
+{"version":3,"file":"DateTimeInput.d.ts","sourceRoot":"","sources":["../../../../src/components/input/DateTimeInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAcjD,oBAAY,KAAK,GAAG;IACnB,kDAAkD;IAClD,SAAS,EAAE,MAAM,CAAC;IAElB,oEAAoE;IACpE,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAAE,aAAa,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAE7E,yDAAyD;IACzD,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,OAAO,CAAC,EAAE,IAAI,CAAC;IAEf,mEAAmE;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACrC,SAAS,EACT,QAAQ,EACR,OAAO,EACP,QAAgB,EAChB,QAAQ,EACR,GAAG,UAAU,EACb,EAAE,KAAK,qBA4DP"}

package/lib/cjs/components/input/DateTimeInput.js

@@ -28,70 +28,42 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const dayjs_1 = __importDefault(require("dayjs"));
 const react_1 = __importStar(require("react"));
-const periods_1 = require("../periodpicker/periods");
 const DateInput_1 = __importDefault(require("./DateInput"));
 const ValidatedTextInput_1 = __importDefault(require("./ValidatedTextInput"));
-const lodash_1 = require("lodash");
-const extractTime = (timezone, date) => {
+const formatTime = (timezone, date) => {
     try {
-        return (0, periods_1.dayjsTz)(timezone, date).format('HH:mm');
+        return dayjs_1.default.tz(date, timezone).format('HH:mm');
     }
     catch (error) {
         console.error('DateTimeInput: Error while extracting time from date', error);
         return '00:00';
     }
 };
-const extractDate = (timezone, date) => {
-    try {
-        return (0, dayjs_1.default)((0, periods_1.dayjsTz)(timezone, date).format('YYYY-MM-DD'));
-    }
-    catch (error) {
-        console.error('DateTimeInput: Error while extracting time from date', error);
-        return (0, dayjs_1.default)(new Date());
-    }
-};
 /**
  * Extends DateInput but also displaying the current time.
  * Usually the user's locale is used for displaying the correct date format.
  */
 function DateTimeInput({ timestamp, timezone, warning, readOnly = false, onChange, ...otherProps }) {
-    const [time, setTime] = (0, react_1.useState)(extractTime(timezone, timestamp));
-    const timeValue = time == null ? extractTime(timezone, timestamp) : time;
+    const [time, setTime] = (0, react_1.useState)(formatTime(timezone, timestamp));
+    const timeValue = time == null ? formatTime(timezone, timestamp) : time;
     (0, react_1.useEffect)(() => {
-        setTime(extractTime(timezone, timestamp));
+        setTime(formatTime(timezone, timestamp));
     }, [timezone, timestamp]);
     function handleChangeDate(date, fromTextField) {
-        const oldDate = (0, periods_1.dayjsTz)(timezone, timestamp);
-        const dateFix = (0, dayjs_1.default)(date);
-        let newDate = (0, periods_1.dayjsTz)(timezone, date)
-            .set('day', dateFix.day())
-            .set('month', dateFix.month())
-            .set('year', dateFix.year())
-            .set('hour', (0, lodash_1.toInteger)(oldDate.hour()))
-            .set('minute', (0, lodash_1.toInteger)(oldDate.minute()));
-        const dstOffset = getLocalDstOffset(newDate);
-        newDate = newDate.subtract(dstOffset, 'minutes');
+        const currentDate = dayjs_1.default.tz(timestamp, timezone);
+        const newDate = dayjs_1.default
+            .tz(date, timezone)
+            .set('hour', currentDate.hour())
+            .set('minute', currentDate.minute())
+            .set('second', currentDate.second())
+            .set('millisecond', currentDate.millisecond());
         onChange(newDate.valueOf(), fromTextField);
     }
-    function getMaxUtcOffset(year) {
-        const jan = new Date(`${year}-01-01`).getTimezoneOffset();
-        const jul = new Date(`${year}-07-01`).getTimezoneOffset();
-        return Math.min(jan, jul);
-    }
-    function getLocalDstOffset(newDate) {
-        return newDate.toDate().getTimezoneOffset() - getMaxUtcOffset(newDate.year());
-    }
     function handleChangeTime(time, valid) {
         if (valid) {
-            const [hours, minutes] = time.split(':');
-            const date = extractDate(timezone, timestamp);
-            const dateTime = (0, periods_1.dayjsTz)(timezone, timestamp)
-                .set('date', date.date())
-                .set('hour', parseInt(hours, 10))
-                .set('minute', parseInt(minutes, 10))
-                .set('second', 0)
-                .set('millisecond', 0);
-            onChange(dateTime.valueOf());
+            const [hours, minutes] = time.split(':').map(Number);
+            const newDate = dayjs_1.default.tz(timestamp, timezone).set('hours', hours).set('minutes', minutes);
+            onChange(newDate.valueOf(), true);
         }
         setTime(time);
     }
@@ -101,7 +73,7 @@ function DateTimeInput({ timestamp, timezone, warning, readOnly = false, onChang
         }
     }
     return (react_1.default.createElement("span", { className: `di date-time-input ${warning ? 'with-warning' : ''}` },
-        react_1.default.createElement(DateInput_1.default, { ...otherProps, value: extractDate(timezone, timestamp).valueOf(), onChange: handleChangeDate, readOnly: readOnly }),
+        react_1.default.createElement(DateInput_1.default, { ...otherProps, value: timestamp, timezone: timezone, onChange: handleChangeDate, readOnly: readOnly }),
         react_1.default.createElement(ValidatedTextInput_1.default, { "data-testid": "time-input", value: timeValue, onChange: handleChangeTime, pattern: /^(([01][0-9])|2[0-3]):[0-5][0-9]$/, required: true, invalidStyle: {
                 borderColor: 'red'
             }, placeholder: "00:00", className: "time", onBlur: tryFixTime, disabled: readOnly })));

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

@@ -44,9 +44,7 @@ const DateStateProvider = ({ children, initialValue }) => {
     });
     (0, vitest_1.describe)('Changing values via text input', () => {
         (0, vitest_1.it)('should render correct date typed into text input without "invalid" class', async () => {
-            await (0, react_2.act)(async () => {
-                (0, react_2.render)(react_1.default.createElement(DateStateProvider, { initialValue: new Date('2019-02-01').getTime() }, (date, setDate) => react_1.default.createElement(DateInput_1.default, { value: date, onChange: (date) => setDate(date) })));
-            });
+            (0, react_2.render)(react_1.default.createElement(DateStateProvider, { initialValue: new Date('2019-02-01').getTime() }, (date, setDate) => react_1.default.createElement(DateInput_1.default, { value: date, onChange: (date) => setDate(date) })));
             await (0, react_2.act)(async () => {
                 react_2.fireEvent.change(react_2.screen.getByTestId('date-input'), { target: { value: '02.02.2019' } });
             });
@@ -54,9 +52,7 @@ const DateStateProvider = ({ children, initialValue }) => {
             (0, vitest_1.expect)(react_2.screen.getByTestId('date-input')).not.toHaveClass('invalid');
         });
         (0, vitest_1.it)('should render incorrect date typed into text input with "invalid" class', async () => {
-            await (0, react_2.act)(async () => {
-                (0, react_2.render)(react_1.default.createElement(DateStateProvider, { initialValue: new Date('2019-02-01').getTime() }, (date, setDate) => react_1.default.createElement(DateInput_1.default, { value: date, onChange: (date) => setDate(date) })));
-            });
+            (0, react_2.render)(react_1.default.createElement(DateStateProvider, { initialValue: new Date('2019-02-01').getTime() }, (date, setDate) => react_1.default.createElement(DateInput_1.default, { value: date, onChange: (date) => setDate(date) })));
             await (0, react_2.act)(async () => {
                 react_2.fireEvent.change(react_2.screen.getByTestId('date-input'), { target: { value: '02.02.201' } });
             });
@@ -64,9 +60,7 @@ const DateStateProvider = ({ children, initialValue }) => {
         });
         (0, vitest_1.it)('should call onChange callback with parsed value of the input during the input is being changed when the value is valid', async () => {
             const onChange = vitest_1.vi.fn();
-            await (0, react_2.act)(async () => {
-                (0, react_2.render)(react_1.default.createElement(DateInput_1.default, { value: new Date('2019-02-01').getTime(), onChange: onChange }));
-            });
+            (0, react_2.render)(react_1.default.createElement(DateInput_1.default, { value: new Date('2019-02-01').getTime(), onChange: onChange }));
             await (0, react_2.act)(async () => {
                 react_2.fireEvent.change(react_2.screen.getByTestId('date-input'), { target: { value: '02.02.2019' } });
             });
@@ -75,18 +69,14 @@ const DateStateProvider = ({ children, initialValue }) => {
         });
         (0, vitest_1.it)('should not call onChange callback while editing the input when the input value is invalid', async () => {
             const onChange = vitest_1.vi.fn();
-            await (0, react_2.act)(async () => {
-                (0, react_2.render)(react_1.default.createElement(DateInput_1.default, { value: new Date('2019-02-01').getTime(), onChange: onChange }));
-            });
+            (0, react_2.render)(react_1.default.createElement(DateInput_1.default, { value: new Date('2019-02-01').getTime(), onChange: onChange }));
             await (0, react_2.act)(async () => {
                 react_2.fireEvent.change(react_2.screen.getByTestId('date-input'), { target: { value: '02.02.201' } });
             });
             (0, vitest_1.expect)(onChange).not.toHaveBeenCalled();
         });
         (0, vitest_1.it)('should display the current value in the input field if the input value is invalid and the input became blurred', async () => {
-            await (0, react_2.act)(async () => {
-                (0, react_2.render)(react_1.default.createElement(DateStateProvider, { initialValue: new Date('2019-02-01').getTime() }, (date, setDate) => react_1.default.createElement(DateInput_1.default, { value: date, onChange: (date) => setDate(date) })));
-            });
+            (0, react_2.render)(react_1.default.createElement(DateStateProvider, { initialValue: new Date('2019-02-01').getTime() }, (date, setDate) => react_1.default.createElement(DateInput_1.default, { value: date, onChange: (date) => setDate(date) })));
             await (0, react_2.act)(async () => {
                 react_2.fireEvent.change(react_2.screen.getByTestId('date-input'), { target: { value: '02.02.201' } });
                 react_2.fireEvent.blur(react_2.screen.getByTestId('date-input'));
@@ -94,16 +84,12 @@ const DateStateProvider = ({ children, initialValue }) => {
             (0, vitest_1.expect)(react_2.screen.getByTestId('date-input')).toHaveValue('01.02.2019');
         });
         (0, vitest_1.it)('should display invalid date text in the input when the value is NaN', async () => {
-            await (0, react_2.act)(async () => {
-                (0, react_2.render)(react_1.default.createElement(DateInput_1.default, { value: NaN, onChange: () => { } }));
-            });
+            (0, react_2.render)(react_1.default.createElement(DateInput_1.default, { value: NaN, onChange: () => { } }));
             (0, vitest_1.expect)(react_2.screen.getByTestId('date-input')).toHaveValue('dateInput.invalidDate');
         });
         (0, vitest_1.it)('should call onChange callback with [null, true] when empty string is set to input field', async () => {
             const onChange = vitest_1.vi.fn();
-            await (0, react_2.act)(async () => {
-                (0, react_2.render)(react_1.default.createElement(DateInput_1.default, { value: Date.now(), onChange: onChange }));
-            });
+            (0, react_2.render)(react_1.default.createElement(DateInput_1.default, { value: Date.now(), onChange: onChange }));
             await (0, react_2.act)(async () => {
                 react_2.fireEvent.change(react_2.screen.getByTestId('date-input'), { target: { value: '' } });
             });

package/lib/cjs/components/periodpicker/components/Inputs.d.ts.map

@@ -1 +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"}
+{"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/cjs/components/periodpicker/components/Inputs.js

@@ -27,6 +27,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
+const lodash_1 = require("lodash");
 const DateTimeInput_1 = __importDefault(require("../../input/DateTimeInput"));
 const ONE_HOUR = 60 * 60 * 1000;
 const TOGGLE_TIMEOUT = 300;
@@ -53,10 +54,13 @@ function Inputs({ period, onChange, readOnly, locale, timezone }) {
         if (timestamp) {
             const incorrect = period.tsEnd && timestamp > period.tsEnd;
             const tsEnd = incorrect ? timestamp + ONE_HOUR : period.tsEnd;
-            onChange({
+            const newPeriod = {
                 tsStart: timestamp,
                 tsEnd
-            });
+            };
+            if (!(0, lodash_1.isEqual)(newPeriod, period)) {
+                onChange(newPeriod);
+            }
             if (!fromTextField) {
                 openEndDate();
             }
@@ -69,10 +73,13 @@ function Inputs({ period, onChange, readOnly, locale, timezone }) {
         if (timestamp) {
             const incorrect = period.tsStart && timestamp < period.tsStart;
             const tsStart = incorrect ? timestamp - ONE_HOUR : period.tsStart;
-            onChange({
+            const newPeriod = {
                 tsStart,
                 tsEnd: timestamp
-            });
+            };
+            if (!(0, lodash_1.isEqual)(newPeriod, period)) {
+                onChange(newPeriod);
+            }
             if (incorrect) {
                 showWarning('date-from');
             }

package/lib/cjs/components/reactable/helpers/ReactableTableFilterRow.d.ts.map

@@ -1 +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;AAIrE,aAAK,KAAK,GAAG;IACZ,UAAU,EAAE,KAAK,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC,CAAC;IAC3C,QAAQ,EAAE,CAAC,aAAa,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,QAAA,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAuF5C,CAAC;AAEF,eAAe,uBAAuB,CAAC"}
+{"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;AAIrE,aAAK,KAAK,GAAG;IACZ,UAAU,EAAE,KAAK,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC,CAAC;IAC3C,QAAQ,EAAE,CAAC,aAAa,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AACF,QAAA,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA+F5C,CAAC;AAEF,eAAe,uBAAuB,CAAC"}

package/lib/cjs/components/reactable/helpers/ReactableTableFilterRow.js

@@ -34,14 +34,23 @@ const ReactableTableFilterRow = ({ columnDefs, onFilter, tableName }) => {
     const { t } = (0, i18n_1.useTranslation)();
     const [state, setState] = (0, react_1.useState)({});
     (0, react_1.useEffect)(() => {
-        const initialFilters = columnDefs.reduce((acc, columnDef) => ({
-            ...acc,
-            [columnDef.name]: columnDef.filterable?.initialValue ?? ''
-        }), {});
-        setState(initialFilters);
-        if (Object.values(initialFilters).some((value) => value)) {
-            onFilter(initialFilters);
-        }
+        setState((prev) => {
+            const merged = {};
+            for (const cd of columnDefs) {
+                merged[cd.name] = prev[cd.name] !== undefined ? prev[cd.name] : cd.filterable?.initialValue ?? '';
+            }
+            const prevKeys = Object.keys(prev);
+            const mergedKeys = Object.keys(merged);
+            const sameKeys = mergedKeys.length === prevKeys.length && mergedKeys.every((k) => prevKeys.includes(k));
+            const sameValues = sameKeys && mergedKeys.every((k) => merged[k] === prev[k]);
+            if (sameKeys && sameValues) {
+                return prev; // no change
+            }
+            if (Object.values(merged).some((v) => v)) {
+                onFilter(merged);
+            }
+            return merged;
+        });
     }, [columnDefs, onFilter]);
     const changeFilter = (columnName, value) => {
         const newState = { ...state, [columnName]: value };

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

@@ -5,6 +5,8 @@ import '../../assets/react-datepicker-custom.css';
 declare type DateInputProps = {
     /** the current value (millis since 1970-01-01 or formatted string) */
     value: number | string | null | undefined;
+    /** (optional) timezone */
+    timezone?: string;
     /** callback function that is executed when the user picks a date */
     onChange: (date: number | null | undefined, fromTextField?: boolean) => void;
     /** makes the input field clearable */
@@ -23,6 +25,6 @@ export declare type Props = Omit<ReactDatePickerProps, keyof DateInputProps> & D
  * DateInput is used to let users set a date conveniently.
  * Usually the user's locale is used for displaying the correct date format.
  */
-export default function DateInput({ value, clearable, inline, readOnly, wrapperClassName, onChange, locale, ...otherProps }: Props): React.JSX.Element;
+export default function DateInput({ value, clearable, inline, readOnly, wrapperClassName, onChange, locale, timezone, ...otherProps }: Props): React.JSX.Element;
 export {};
 //# sourceMappingURL=DateInput.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../../../src/components/input/DateInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AACvE,OAAmB,EAAC,oBAAoB,EAAiB,MAAM,kBAAkB,CAAC;AAalF,OAAO,4CAA4C,CAAC;AACpD,OAAO,0CAA0C,CAAC;AAwClD,aAAK,cAAc,GAAG;IACrB,sEAAsE;IACtE,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAE1C,oEAAoE;IACpE,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAAE,aAAa,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAE7E,sCAAsC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,sCAAsC;IACtC,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,sDAAsD;IACtD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,mEAAmE;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,oBAAY,KAAK,GAAG,IAAI,CAAC,oBAAoB,EAAE,MAAM,cAAc,CAAC,GAAG,cAAc,CAAC;AAqBtF;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EACjC,KAAK,EACL,SAAS,EACT,MAAM,EACN,QAAQ,EACR,gBAAgB,EAChB,QAAQ,EACR,MAAM,EACN,GAAG,UAAU,EACb,EAAE,KAAK,qBAmKP"}
+{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../../../src/components/input/DateInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAGvE,OAAmB,EAAC,oBAAoB,EAAiB,MAAM,kBAAkB,CAAC;AAalF,OAAO,4CAA4C,CAAC;AACpD,OAAO,0CAA0C,CAAC;AA0ClD,aAAK,cAAc,GAAG;IACrB,sEAAsE;IACtE,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAE1C,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,oEAAoE;IACpE,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAAE,aAAa,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAE7E,sCAAsC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,sCAAsC;IACtC,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,sDAAsD;IACtD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,mEAAmE;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,oBAAY,KAAK,GAAG,IAAI,CAAC,oBAAoB,EAAE,MAAM,cAAc,CAAC,GAAG,cAAc,CAAC;AA2CtF;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EACjC,KAAK,EACL,SAAS,EACT,MAAM,EACN,QAAQ,EACR,gBAAgB,EAChB,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,GAAG,UAAU,EACb,EAAE,KAAK,qBAyKP"}

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

@@ -1,4 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import timezone from 'dayjs/plugin/timezone';
+import utc from 'dayjs/plugin/utc';
 import DatePicker, { registerLocale } from 'react-datepicker';
 import { debounce } from 'lodash';
 import dayjs from 'dayjs';
@@ -13,6 +15,8 @@ import { Button, Icon, Popup } from '@deviceinsight/ng-ui-basic-components';
 import 'react-datepicker/dist/react-datepicker.css';
 import '../../assets/react-datepicker-custom.css';
 import { isLocaleSupported } from '../../utils/dayjsLocales';
+dayjs.extend(utc);
+dayjs.extend(timezone);
 dayjs.extend(localeData);
 dayjs.extend(localizedFormat);
 dayjs.extend(customParseFormat);
@@ -48,29 +52,40 @@ async function changeDayjsLocale(locale) {
     }
 }
 function isInputValid(value, pattern) {
-    if (value == null || (typeof value === 'number' && !isNaN(value)) || value == '') {
+    if (value == null || value === '') {
         return true;
     }
+    if (typeof value === 'number') {
+        return !isNaN(value);
+    }
     if (typeof value === 'string') {
         return dayjs(value, pattern, true).isValid();
     }
     return false;
 }
-function inputToDate(value, pattern) {
-    if (value == null || value === '' || !isInputValid(value, pattern))
-        return null;
+function inputToDate(value, pattern, timezone) {
     if (typeof value === 'number') {
         return new Date(value);
     }
-    else {
-        return dayjs(value, pattern, true).toDate();
+    if (typeof value === 'string' && dayjs(value, pattern, true).isValid()) {
+        return dayjs.tz(value, pattern, timezone).toDate();
+    }
+    return null;
+}
+function inputToTzDate(value, pattern, timezone) {
+    if (typeof value === 'number') {
+        return dayjs.tz(value, timezone);
+    }
+    if (typeof value === 'string' && dayjs(value, pattern, true).isValid()) {
+        return dayjs.tz(value, pattern, timezone);
     }
+    return null;
 }
 /**
  * DateInput is used to let users set a date conveniently.
  * Usually the user's locale is used for displaying the correct date format.
  */
-export default function DateInput({ value, clearable, inline, readOnly, wrapperClassName, onChange, locale, ...otherProps }) {
+export default function DateInput({ value, clearable, inline, readOnly, wrapperClassName, onChange, locale, timezone, ...otherProps }) {
     const [pattern, setPattern] = useState(dayjs.localeData().longDateFormat('L'));
     const { t } = useTranslation();
     const [valid, setValid] = useState(false);
@@ -94,10 +109,9 @@ export default function DateInput({ value, clearable, inline, readOnly, wrapperC
             });
         }
         else {
-            const date = typeof value === 'number' ? dayjs(value) : dayjs(value, pattern, true);
-            return date.format(pattern);
+            return typeof value === 'number' ? dayjs.tz(value, timezone).format(pattern) : value;
         }
-    }, [pattern, t]);
+    }, [pattern, t, timezone]);
     useEffect(() => {
         if (value == null) {
             setInputText('');
@@ -116,10 +130,17 @@ export default function DateInput({ value, clearable, inline, readOnly, wrapperC
     const handleInputTextChange = (text) => {
         setInputText(text);
         if (text) {
-            const date = dayjs(text, pattern, true);
-            const valid = date.isValid();
+            const valid = dayjs(text, pattern, true).isValid();
             if (valid) {
-                onChange(date.valueOf(), true);
+                const prevDate = inputToTzDate(value, pattern, timezone);
+                const newDate = dayjs.tz(text, pattern, timezone ?? dayjs.tz.guess());
+                if (prevDate) {
+                    newDate.set('hour', prevDate.hour());
+                    newDate.set('minute', prevDate.minute());
+                    newDate.set('second', prevDate.second());
+                    newDate.set('millisecond', prevDate.millisecond());
+                }
+                onChange(newDate.valueOf(), true);
             }
             setValid(valid);
         }
@@ -137,10 +158,10 @@ export default function DateInput({ value, clearable, inline, readOnly, wrapperC
     const handlePopupHide = () => setPopupActive(false);
     const handleClear = () => handleInputTextChange('');
     if (inline) {
-        return (React.createElement(DatePicker, { ...otherProps, onChange: handlePickerChange, selected: inputToDate(value, pattern), locale: locale ?? i18n.language, isClearable: clearable, placeholderText: pattern, className: cx('date', { invalid: !valid }), inline: true }));
+        return (React.createElement(DatePicker, { ...otherProps, onChange: handlePickerChange, selected: inputToDate(value, pattern, timezone), locale: locale ?? i18n.language, isClearable: clearable, placeholderText: pattern, className: cx('date', { invalid: !valid }), inline: true }));
     }
     if (readOnly) {
-        return (React.createElement(DatePicker, { ...otherProps, onChange: () => { }, selected: inputToDate(value, pattern), locale: locale ?? i18n.language, customInput: React.createElement("span", null,
+        return (React.createElement(DatePicker, { ...otherProps, onChange: () => { }, selected: inputToDate(value, pattern, timezone), locale: locale ?? i18n.language, customInput: React.createElement("span", null,
                 React.createElement("input", { type: "text", value: formattedDate(value), readOnly: true })), placeholderText: pattern, readOnly: true }));
     }
     return (React.createElement(Popup, { handler: React.createElement("span", { className: "di date-input-wrapper" },
@@ -153,5 +174,5 @@ export default function DateInput({ value, clearable, inline, readOnly, wrapperC
         React.createElement("div", { className: "di date-picker-popup-wrapper", tabIndex: 0, onFocus: () => {
                 debouncedSetPopupActive(true);
             } },
-            React.createElement(DatePicker, { ...otherProps, selected: inputToDate(value, pattern), onChange: handlePickerChange, locale: locale ?? i18n.language, isClearable: clearable, placeholderText: pattern, className: cx('date', { invalid: !valid }), inline: true }))));
+            React.createElement(DatePicker, { ...otherProps, selected: inputToDate(value, pattern, timezone), onChange: handlePickerChange, locale: locale ?? i18n.language, isClearable: clearable, placeholderText: pattern, className: cx('date', { invalid: !valid }), inline: true }))));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"DateTimeInput.d.ts","sourceRoot":"","sources":["../../../../src/components/input/DateTimeInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAwBjD,oBAAY,KAAK,GAAG;IACnB,kDAAkD;IAClD,SAAS,EAAE,MAAM,CAAC;IAElB,oEAAoE;IACpE,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAAE,aAAa,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAE7E,yDAAyD;IACzD,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,OAAO,CAAC,EAAE,IAAI,CAAC;IAEf,mEAAmE;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACrC,SAAS,EACT,QAAQ,EACR,OAAO,EACP,QAAgB,EAChB,QAAQ,EACR,GAAG,UAAU,EACb,EAAE,KAAK,qBAgFP"}
+{"version":3,"file":"DateTimeInput.d.ts","sourceRoot":"","sources":["../../../../src/components/input/DateTimeInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAcjD,oBAAY,KAAK,GAAG;IACnB,kDAAkD;IAClD,SAAS,EAAE,MAAM,CAAC;IAElB,oEAAoE;IACpE,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAAE,aAAa,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAE7E,yDAAyD;IACzD,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,OAAO,CAAC,EAAE,IAAI,CAAC;IAEf,mEAAmE;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACrC,SAAS,EACT,QAAQ,EACR,OAAO,EACP,QAAgB,EAChB,QAAQ,EACR,GAAG,UAAU,EACb,EAAE,KAAK,qBA4DP"}