@ui5/webcomponents 2.16.0-rc.0 → 2.16.0-rc.2

package/dist/dynamic-date-range-options/DateTimeRange.d.ts

@@ -0,0 +1,25 @@
+import type { DynamicDateRangeValue, IDynamicDateRangeOption } from "../DynamicDateRange.js";
+import DateFormat from "@ui5/webcomponents-localization/dist/DateFormat.js";
+import type { JsxTemplate } from "@ui5/webcomponents-base/dist/index.js";
+/**
+ * @class
+ * @constructor
+ * @public
+ * @since 2.16.0
+ */
+declare class DateTimeRange implements IDynamicDateRangeOption {
+    template: JsxTemplate;
+    constructor();
+    parse(value: string): DynamicDateRangeValue;
+    _parseDate(value: string): Date | undefined;
+    format(value: DynamicDateRangeValue): string;
+    _formatDate(date: Date): string;
+    toDates(value: DynamicDateRangeValue): Array<Date>;
+    get text(): string;
+    get operator(): string;
+    get icon(): string;
+    isValidString(value: string): boolean;
+    getFormatPattern(): string;
+    getFormat(): DateFormat;
+}
+export default DateTimeRange;

package/dist/dynamic-date-range-options/DateTimeRange.js

@@ -0,0 +1,82 @@
+import DateTimeRangeTemplate from "./DateTimeRangeTemplate.js";
+import DateFormat from "@ui5/webcomponents-localization/dist/DateFormat.js";
+import { DYNAMIC_DATE_TIME_RANGE_TEXT, } from "../generated/i18n/i18n-defaults.js";
+import { dateTimeRangeOptionToDates } from "./toDates.js";
+import DynamicDateRange from "../DynamicDateRange.js";
+import getCachedLocaleDataInstance from "@ui5/webcomponents-localization/dist/getCachedLocaleDataInstance.js";
+import getLocale from "@ui5/webcomponents-base/dist/locale/getLocale.js";
+const DEFAULT_DELIMITER = "-";
+/**
+ * @class
+ * @constructor
+ * @public
+ * @since 2.16.0
+ */
+class DateTimeRange {
+    constructor() {
+        this.template = DateTimeRangeTemplate;
+    }
+    parse(value) {
+        const returnValue = { operator: this.operator, values: [] };
+        if (!value) {
+            return returnValue;
+        }
+        const splitValue = value.split(DEFAULT_DELIMITER);
+        const startDate = this._parseDate(splitValue[0].trim());
+        const endDate = this._parseDate(splitValue[1].trim());
+        returnValue.values = [startDate, endDate];
+        if (returnValue.values[0].getTime() > returnValue.values[1].getTime()) {
+            returnValue.values.reverse();
+        }
+        return returnValue;
+    }
+    _parseDate(value) {
+        return this.getFormat().parse(value);
+    }
+    format(value) {
+        const valuesArray = value?.values;
+        if (!valuesArray || valuesArray.length !== 2 || !valuesArray[0] || !valuesArray[1]) {
+            return "";
+        }
+        const startDate = this._formatDate(valuesArray[0]);
+        const endDate = this._formatDate(valuesArray[1]);
+        return `${startDate} ${DEFAULT_DELIMITER} ${endDate}`;
+    }
+    _formatDate(date) {
+        return this.getFormat().format(date);
+    }
+    toDates(value) {
+        return dateTimeRangeOptionToDates(value);
+    }
+    get text() {
+        return DynamicDateRange.i18nBundle.getText(DYNAMIC_DATE_TIME_RANGE_TEXT);
+    }
+    get operator() {
+        return "DATETIMERANGE";
+    }
+    get icon() {
+        return "appointment-2";
+    }
+    isValidString(value) {
+        const splitValue = value.split(DEFAULT_DELIMITER);
+        const startDate = this._parseDate(splitValue[0].trim());
+        const endDate = this._parseDate(splitValue[1].trim());
+        if (!startDate || !endDate || Number.isNaN(startDate.getTime()) || Number.isNaN(endDate.getTime())) {
+            return false;
+        }
+        return true;
+    }
+    getFormatPattern() {
+        const localeData = getCachedLocaleDataInstance(getLocale());
+        return localeData.getCombinedDateTimePattern("medium", "medium");
+    }
+    getFormat() {
+        return DateFormat.getDateInstance({
+            strictParsing: true,
+            pattern: this.getFormatPattern(),
+        });
+    }
+}
+DynamicDateRange.register("DATETIMERANGE", DateTimeRange);
+export default DateTimeRange;
+//# sourceMappingURL=DateTimeRange.js.map

package/dist/dynamic-date-range-options/DateTimeRange.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimeRange.js","sourceRoot":"","sources":["../../src/dynamic-date-range-options/DateTimeRange.ts"],"names":[],"mappings":"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","sourcesContent":["import DateTimeRangeTemplate from \"./DateTimeRangeTemplate.js\";\nimport type { DynamicDateRangeValue, IDynamicDateRangeOption } from \"../DynamicDateRange.js\";\nimport DateFormat from \"@ui5/webcomponents-localization/dist/DateFormat.js\";\nimport type { JsxTemplate } from \"@ui5/webcomponents-base/dist/index.js\";\nimport {\n\tDYNAMIC_DATE_TIME_RANGE_TEXT,\n} from \"../generated/i18n/i18n-defaults.js\";\nimport { dateTimeRangeOptionToDates } from \"./toDates.js\";\nimport DynamicDateRange from \"../DynamicDateRange.js\";\nimport getCachedLocaleDataInstance from \"@ui5/webcomponents-localization/dist/getCachedLocaleDataInstance.js\";\nimport getLocale from \"@ui5/webcomponents-base/dist/locale/getLocale.js\";\n\nconst DEFAULT_DELIMITER = \"-\";\n\n/**\n * @class\n * @constructor\n * @public\n * @since 2.16.0\n */\n\nclass DateTimeRange implements IDynamicDateRangeOption {\n\ttemplate: JsxTemplate;\n\n\tconstructor() {\n\t\tthis.template = DateTimeRangeTemplate;\n\t}\n\n\tparse(value: string): DynamicDateRangeValue {\n\t\tconst returnValue = { operator: this.operator, values: [] } as DynamicDateRangeValue;\n\n\t\tif (!value) {\n\t\t\treturn returnValue;\n\t\t}\n\t\tconst splitValue = value.split(DEFAULT_DELIMITER);\n\t\tconst startDate = this._parseDate(splitValue[0].trim()) as Date;\n\t\tconst endDate = this._parseDate(splitValue[1].trim()) as Date;\n\n\t\treturnValue.values = [startDate, endDate];\n\n\t\tif (returnValue.values[0].getTime() > returnValue.values[1].getTime()) {\n\t\t\treturnValue.values.reverse();\n\t\t}\n\n\t\treturn returnValue;\n\t}\n\n\t_parseDate(value: string): Date | undefined {\n\t\treturn this.getFormat().parse(value) as Date;\n\t}\n\n\tformat(value: DynamicDateRangeValue) {\n\t\tconst valuesArray = value?.values as Array<Date>;\n\n\t\tif (!valuesArray || valuesArray.length !== 2 || !valuesArray[0] || !valuesArray[1]) {\n\t\t\treturn \"\";\n\t\t}\n\n\t\tconst startDate = this._formatDate(valuesArray[0]);\n\t\tconst endDate = this._formatDate(valuesArray[1]);\n\n\t\treturn `${startDate} ${DEFAULT_DELIMITER} ${endDate}`;\n\t}\n\n\t_formatDate(date: Date) {\n\t\treturn this.getFormat().format(date);\n\t}\n\n\ttoDates(value: DynamicDateRangeValue): Array<Date> {\n\t\treturn dateTimeRangeOptionToDates(value);\n\t}\n\n\tget text(): string {\n\t\treturn DynamicDateRange.i18nBundle.getText(DYNAMIC_DATE_TIME_RANGE_TEXT);\n\t}\n\n\tget operator() {\n\t\treturn \"DATETIMERANGE\";\n\t}\n\n\tget icon() {\n\t\treturn \"appointment-2\";\n\t}\n\n\tisValidString(value: string): boolean {\n\t\tconst splitValue = value.split(DEFAULT_DELIMITER);\n\t\tconst startDate = this._parseDate(splitValue[0].trim()) as Date;\n\t\tconst endDate = this._parseDate(splitValue[1].trim()) as Date;\n\n\t\tif (!startDate || !endDate || Number.isNaN(startDate.getTime()) || Number.isNaN(endDate.getTime())) {\n\t\t\treturn false;\n\t\t}\n\n\t\treturn true;\n\t}\n\n\tgetFormatPattern() {\n\t\tconst localeData = getCachedLocaleDataInstance(getLocale());\n\t\treturn localeData.getCombinedDateTimePattern(\"medium\", \"medium\");\n\t}\n\n\tgetFormat(): DateFormat {\n\t\treturn DateFormat.getDateInstance({\n\t\t\tstrictParsing: true,\n\t\t\tpattern: this.getFormatPattern(),\n\t\t});\n\t}\n}\n\nDynamicDateRange.register(\"DATETIMERANGE\", DateTimeRange);\n\nexport default DateTimeRange;\n"]}

package/dist/dynamic-date-range-options/DateTimeRangeTemplate.d.ts

@@ -0,0 +1,2 @@
+import DynamicDateRange from "../DynamicDateRange.js";
+export default function DateTimeRangeTemplate(this: DynamicDateRange): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;

package/dist/dynamic-date-range-options/DateTimeRangeTemplate.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
+import DynamicDateRange from "../DynamicDateRange.js";
+import DateTimePicker from "../DateTimePicker.js";
+import Label from "../Label.js";
+import { DYNAMIC_DATE_TIME_RANGE_TEXT_TO_LABEL, DYNAMIC_DATE_TIME_RANGE_TEXT_FROM_LABEL, } from "../generated/i18n/i18n-defaults.js";
+export default function DateTimeRangeTemplate() {
+    const currentOperator = this.currentValue?.operator || "DATETIMERANGE";
+    const getDateFromValue = (index = 0) => {
+        if (this.value?.operator === currentOperator && this.value.values && this.value.values.length === 2) {
+            return this.getOption(this.value.operator)?.format(this.value)?.split("-")[index].trim();
+        }
+        return undefined;
+    };
+    const handleSelectionChange = () => {
+        const fromPicker = this.shadowRoot?.querySelector("[ui5-datetime-picker]#from-picker");
+        const toPicker = this.shadowRoot?.querySelector("[ui5-datetime-picker]#to-picker");
+        const fromDateValue = fromPicker.dateValue;
+        const toDateValue = toPicker.dateValue;
+        // If there are no dates selected, clear the value
+        if (!(fromDateValue && toDateValue)) {
+            this.currentValue = {
+                operator: currentOperator,
+                values: []
+            };
+            return;
+        }
+        const newValue = [fromDateValue, toDateValue];
+        if (newValue[0] && newValue[1] && newValue[0].getTime() > newValue[1].getTime()) {
+            newValue.reverse();
+        }
+        this.currentValue = {
+            operator: currentOperator,
+            values: newValue,
+        };
+    };
+    return (_jsxs("div", { class: "ui5-last-next-container ui5-last-next-container-padded", children: [_jsx(Label, { class: "ui5-ddr-label", children: DynamicDateRange.i18nBundle.getText(DYNAMIC_DATE_TIME_RANGE_TEXT_FROM_LABEL) }), _jsx(DateTimePicker, { id: "from-picker", onChange: handleSelectionChange, value: getDateFromValue() }), _jsx(Label, { class: "ui5-ddr-label", children: DynamicDateRange.i18nBundle.getText(DYNAMIC_DATE_TIME_RANGE_TEXT_TO_LABEL) }), _jsx(DateTimePicker, { id: "to-picker", onChange: handleSelectionChange, value: getDateFromValue(1) })] }));
+}
+//# sourceMappingURL=DateTimeRangeTemplate.js.map

package/dist/dynamic-date-range-options/DateTimeRangeTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimeRangeTemplate.js","sourceRoot":"","sources":["../../src/dynamic-date-range-options/DateTimeRangeTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,gBAAgB,MAAM,wBAAwB,CAAC;AACtD,OAAO,cAAc,MAAM,sBAAsB,CAAC;AAClD,OAAO,KAAK,MAAM,aAAa,CAAC;AAChC,OAAO,EACN,qCAAqC,EACrC,uCAAuC,GACvC,MAAM,oCAAoC,CAAC;AAE5C,MAAM,CAAC,OAAO,UAAU,qBAAqB;IAC5C,MAAM,eAAe,GAAG,IAAI,CAAC,YAAY,EAAE,QAAQ,IAAI,eAAe,CAAC;IAEvE,MAAM,gBAAgB,GAAG,CAAC,KAAK,GAAG,CAAC,EAAE,EAAE;QACtC,IAAI,IAAI,CAAC,KAAK,EAAE,QAAQ,KAAK,eAAe,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACrG,OAAO,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,CAAC;QAC1F,CAAC;QACD,OAAO,SAAS,CAAC;IAClB,CAAC,CAAC;IAEF,MAAM,qBAAqB,GAAG,GAAG,EAAE;QAClC,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,mCAAmC,CAAmB,CAAC;QACzG,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,iCAAiC,CAAmB,CAAC;QAErG,MAAM,aAAa,GAAG,UAAU,CAAC,SAAS,CAAC;QAC3C,MAAM,WAAW,GAAG,QAAQ,CAAC,SAAS,CAAC;QAEvC,kDAAkD;QAClD,IAAI,CAAC,CAAC,aAAa,IAAI,WAAW,CAAC,EAAE,CAAC;YACrC,IAAI,CAAC,YAAY,GAAG;gBACnB,QAAQ,EAAE,eAAe;gBACzB,MAAM,EAAE,EAAE;aACV,CAAC;YACF,OAAO;QACR,CAAC;QAED,MAAM,QAAQ,GAAG,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC;QAE9C,IAAI,QAAQ,CAAC,CAAC,CAAC,IAAI,QAAQ,CAAC,CAAC,CAAC,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC,OAAO,EAAE,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC;YACjF,QAAQ,CAAC,OAAO,EAAE,CAAC;QACpB,CAAC;QAED,IAAI,CAAC,YAAY,GAAG;YACnB,QAAQ,EAAE,eAAe;YACzB,MAAM,EAAE,QAAQ;SAChB,CAAC;IACH,CAAC,CAAC;IACF,OAAO,CACN,eAAK,KAAK,EAAC,wDAAwD,aAClE,KAAC,KAAK,IAAC,KAAK,EAAC,eAAe,YAAE,gBAAgB,CAAC,UAAU,CAAC,OAAO,CAAC,uCAAuC,CAAC,GAAS,EACnH,KAAC,cAAc,IACd,EAAE,EAAC,aAAa,EAChB,QAAQ,EAAE,qBAAqB,EAC/B,KAAK,EAAE,gBAAgB,EAAE,GACT,EACjB,KAAC,KAAK,IAAC,KAAK,EAAC,eAAe,YAAE,gBAAgB,CAAC,UAAU,CAAC,OAAO,CAAC,qCAAqC,CAAC,GAAS,EACjH,KAAC,cAAc,IACd,EAAE,EAAC,WAAW,EACd,QAAQ,EAAE,qBAAqB,EAC/B,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,GACV,IACZ,CACN,CAAC;AACH,CAAC","sourcesContent":["import DynamicDateRange from \"../DynamicDateRange.js\";\nimport DateTimePicker from \"../DateTimePicker.js\";\nimport Label from \"../Label.js\";\nimport {\n\tDYNAMIC_DATE_TIME_RANGE_TEXT_TO_LABEL,\n\tDYNAMIC_DATE_TIME_RANGE_TEXT_FROM_LABEL,\n} from \"../generated/i18n/i18n-defaults.js\";\n\nexport default function DateTimeRangeTemplate(this: DynamicDateRange) {\n\tconst currentOperator = this.currentValue?.operator || \"DATETIMERANGE\";\n\n\tconst getDateFromValue = (index = 0) => {\n\t\tif (this.value?.operator === currentOperator && this.value.values && this.value.values.length === 2) {\n\t\t\treturn this.getOption(this.value.operator)?.format(this.value)?.split(\"-\")[index].trim();\n\t\t}\n\t\treturn undefined;\n\t};\n\n\tconst handleSelectionChange = () => {\n\t\tconst fromPicker = this.shadowRoot?.querySelector(\"[ui5-datetime-picker]#from-picker\") as DateTimePicker;\n\t\tconst toPicker = this.shadowRoot?.querySelector(\"[ui5-datetime-picker]#to-picker\") as DateTimePicker;\n\n\t\tconst fromDateValue = fromPicker.dateValue;\n\t\tconst toDateValue = toPicker.dateValue;\n\n\t\t// If there are no dates selected, clear the value\n\t\tif (!(fromDateValue && toDateValue)) {\n\t\t\tthis.currentValue = {\n\t\t\t\toperator: currentOperator,\n\t\t\t\tvalues: []\n\t\t\t};\n\t\t\treturn;\n\t\t}\n\n\t\tconst newValue = [fromDateValue, toDateValue];\n\n\t\tif (newValue[0] && newValue[1] && newValue[0].getTime() > newValue[1].getTime()) {\n\t\t\tnewValue.reverse();\n\t\t}\n\n\t\tthis.currentValue = {\n\t\t\toperator: currentOperator,\n\t\t\tvalues: newValue,\n\t\t};\n\t};\n\treturn (\n\t\t<div class=\"ui5-last-next-container ui5-last-next-container-padded\">\n\t\t\t<Label class=\"ui5-ddr-label\">{DynamicDateRange.i18nBundle.getText(DYNAMIC_DATE_TIME_RANGE_TEXT_FROM_LABEL)}</Label>\n\t\t\t<DateTimePicker\n\t\t\t\tid=\"from-picker\"\n\t\t\t\tonChange={handleSelectionChange}\n\t\t\t\tvalue={getDateFromValue()}>\n\t\t\t</DateTimePicker>\n\t\t\t<Label class=\"ui5-ddr-label\">{DynamicDateRange.i18nBundle.getText(DYNAMIC_DATE_TIME_RANGE_TEXT_TO_LABEL)}</Label>\n\t\t\t<DateTimePicker\n\t\t\t\tid=\"to-picker\"\n\t\t\t\tonChange={handleSelectionChange}\n\t\t\t\tvalue={getDateFromValue(1)}>\n\t\t\t</DateTimePicker>\n\t\t</div>\n\t);\n}\n"]}

package/dist/dynamic-date-range-options/FromDateTime.d.ts

@@ -0,0 +1,36 @@
+import type { DynamicDateRangeValue, IDynamicDateRangeOption } from "../DynamicDateRange.js";
+import DateFormat from "@ui5/webcomponents-localization/dist/DateFormat.js";
+import type { JsxTemplate } from "@ui5/webcomponents-base/dist/index.js";
+/**
+ * @class
+ * @constructor
+ * @public
+ * @since 2.11.0
+ */
+declare class FromDateTime implements IDynamicDateRangeOption {
+    template: JsxTemplate;
+    private _showTimeView;
+    private _currentDateValue;
+    constructor();
+    parse(value: string): DynamicDateRangeValue;
+    format(value: DynamicDateRangeValue): string;
+    toDates(value: DynamicDateRangeValue): Array<Date>;
+    resetState?: (() => void) | undefined;
+    get text(): string;
+    get operator(): string;
+    get icon(): string;
+    get showDateView(): boolean;
+    get showTimeView(): boolean;
+    get btnDateLabel(): string;
+    get btnTimeLabel(): string;
+    get fromText(): string;
+    getDateValue(date: Date | undefined): string;
+    getTimeValue(date: Date | undefined): string;
+    _dateTimeSwitchChange(): void;
+    isValidString(value: string): boolean;
+    getFormat(): DateFormat;
+    getDateFormat(): DateFormat;
+    getTimeFormat(): DateFormat;
+    handleSelectionChange(e: CustomEvent, value: DynamicDateRangeValue | undefined): DynamicDateRangeValue | undefined;
+}
+export default FromDateTime;

package/dist/dynamic-date-range-options/FromDateTime.js

@@ -0,0 +1,136 @@
+import FromDateTimeTemplate from "./FromDateTimeTemplate.js";
+import DateFormat from "@ui5/webcomponents-localization/dist/DateFormat.js";
+import UI5Date from "@ui5/webcomponents-localization/dist/dates/UI5Date.js";
+import { DATETIME_PICKER_DATE_BUTTON, DATETIME_PICKER_TIME_BUTTON, DYNAMIC_DATE_RANGE_FROM_INPUT_TEXT, DYNAMIC_DATE_RANGE_FROM_TEXT, } from "../generated/i18n/i18n-defaults.js";
+import { dateTimeOptionToDates } from "./toDates.js";
+import DynamicDateRange from "../DynamicDateRange.js";
+/**
+ * @class
+ * @constructor
+ * @public
+ * @since 2.11.0
+ */
+class FromDateTime {
+    constructor() {
+        this.resetState = () => {
+            this._showTimeView = false;
+        };
+        this.template = FromDateTimeTemplate;
+        this._showTimeView = false;
+        this._currentDateValue = UI5Date.getInstance();
+    }
+    parse(value) {
+        const dateText = value.replace(this.fromText, "").trim();
+        const date = this.getFormat().parse(dateText);
+        const returnValue = { operator: "", values: [] };
+        returnValue.operator = this.operator;
+        returnValue.values = [date];
+        return returnValue;
+    }
+    format(value) {
+        const valuesArray = value?.values;
+        if (!valuesArray || valuesArray.length === 0) {
+            return "";
+        }
+        const formattedValue = this.getFormat().format(valuesArray[0]);
+        return `${this.fromText} ${formattedValue}`;
+    }
+    toDates(value) {
+        return dateTimeOptionToDates(value);
+    }
+    get text() {
+        return DynamicDateRange.i18nBundle.getText(DYNAMIC_DATE_RANGE_FROM_TEXT);
+    }
+    get operator() {
+        return "FROMDATETIME";
+    }
+    get icon() {
+        return "appointment-2";
+    }
+    get showDateView() {
+        return !this._showTimeView;
+    }
+    get showTimeView() {
+        return this._showTimeView;
+    }
+    get btnDateLabel() {
+        return DynamicDateRange.i18nBundle.getText(DATETIME_PICKER_DATE_BUTTON);
+    }
+    get btnTimeLabel() {
+        return DynamicDateRange.i18nBundle.getText(DATETIME_PICKER_TIME_BUTTON);
+    }
+    get fromText() {
+        return DynamicDateRange.i18nBundle.getText(DYNAMIC_DATE_RANGE_FROM_INPUT_TEXT);
+    }
+    getDateValue(date) {
+        if (date) {
+            return this.getDateFormat().format(date);
+        }
+        return this._currentDateValue ? this.getDateFormat().format(this._currentDateValue) : "";
+    }
+    getTimeValue(date) {
+        if (date) {
+            return this.getFormat().format(date);
+        }
+        return this._currentDateValue ? this.getFormat().format(this._currentDateValue) : "";
+    }
+    _dateTimeSwitchChange() {
+        this._showTimeView = !this._showTimeView;
+    }
+    isValidString(value) {
+        const dateText = value.replace(this.fromText, "").trim();
+        const date = this.getFormat().parse(dateText);
+        if (!date || Number.isNaN(date.getTime())) {
+            return false;
+        }
+        return true;
+    }
+    getFormat() {
+        return DateFormat.getDateTimeInstance({
+            strictParsing: true,
+        });
+    }
+    getDateFormat() {
+        return DateFormat.getDateInstance({
+            strictParsing: true,
+        });
+    }
+    getTimeFormat() {
+        return DateFormat.getTimeInstance({
+            strictParsing: true,
+        });
+    }
+    handleSelectionChange(e, value) {
+        const currentValue = value || { operator: "", values: [] };
+        const target = e.target;
+        currentValue.values = this._currentDateValue ? [this._currentDateValue] : [];
+        currentValue.operator = this.operator;
+        if (target.hasAttribute("ui5-segmented-button")) {
+            this._dateTimeSwitchChange();
+            return currentValue;
+        }
+        if (target.hasAttribute("ui5-calendar")) {
+            if (e.detail.selectedDates[0]) {
+                const tempDate = UI5Date.getInstance(e.detail.selectedDates[0] * 1000);
+                this._currentDateValue.setFullYear(tempDate.getFullYear(), tempDate.getMonth(), tempDate.getDate());
+                currentValue.values = [this._currentDateValue];
+            }
+        }
+        if (target.hasAttribute("ui5-time-selection-clocks")) {
+            const tempValue = e.detail.value;
+            const tempDate = this.getFormat().parse(tempValue);
+            if (!this._currentDateValue && value?.values?.length) {
+                this._currentDateValue = value?.values[0];
+            }
+            if (tempDate) {
+                this._currentDateValue.setHours(tempDate.getHours(), tempDate.getMinutes(), tempDate.getSeconds());
+                currentValue.values = [this._currentDateValue];
+            }
+        }
+        this._showTimeView = true;
+        return currentValue;
+    }
+}
+DynamicDateRange.register("FROMDATETIME", FromDateTime);
+export default FromDateTime;
+//# sourceMappingURL=FromDateTime.js.map

package/dist/dynamic-date-range-options/FromDateTime.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FromDateTime.js","sourceRoot":"","sources":["../../src/dynamic-date-range-options/FromDateTime.ts"],"names":[],"mappings":"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","sourcesContent":["import FromDateTimeTemplate from \"./FromDateTimeTemplate.js\";\nimport type { DynamicDateRangeValue, IDynamicDateRangeOption } from \"../DynamicDateRange.js\";\nimport DateFormat from \"@ui5/webcomponents-localization/dist/DateFormat.js\";\nimport UI5Date from \"@ui5/webcomponents-localization/dist/dates/UI5Date.js\";\nimport type { JsxTemplate } from \"@ui5/webcomponents-base/dist/index.js\";\nimport {\n\tDATETIME_PICKER_DATE_BUTTON,\n\tDATETIME_PICKER_TIME_BUTTON,\n\tDYNAMIC_DATE_RANGE_FROM_INPUT_TEXT,\n\tDYNAMIC_DATE_RANGE_FROM_TEXT,\n} from \"../generated/i18n/i18n-defaults.js\";\nimport { dateTimeOptionToDates } from \"./toDates.js\";\nimport DynamicDateRange from \"../DynamicDateRange.js\";\n\n/**\n * @class\n * @constructor\n * @public\n * @since 2.11.0\n */\n\nclass FromDateTime implements IDynamicDateRangeOption {\n\ttemplate: JsxTemplate;\n\tprivate _showTimeView: boolean;\n\tprivate _currentDateValue: Date;\n\n\tconstructor() {\n\t\tthis.template = FromDateTimeTemplate;\n\t\tthis._showTimeView = false;\n\t\tthis._currentDateValue = UI5Date.getInstance();\n\t}\n\n\tparse(value: string): DynamicDateRangeValue {\n\t\tconst dateText = value.replace(this.fromText, \"\").trim();\n\t\tconst date = this.getFormat().parse(dateText) as Date;\n\t\tconst returnValue = { operator: \"\", values: [] } as DynamicDateRangeValue;\n\t\treturnValue.operator = this.operator;\n\t\treturnValue.values = [date];\n\n\t\treturn returnValue;\n\t}\n\n\tformat(value: DynamicDateRangeValue): string {\n\t\tconst valuesArray = value?.values as Array<Date>;\n\n\t\tif (!valuesArray || valuesArray.length === 0) {\n\t\t\treturn \"\";\n\t\t}\n\n\t\tconst formattedValue = this.getFormat().format(valuesArray[0]);\n\n\t\treturn `${this.fromText} ${formattedValue}`;\n\t}\n\n\ttoDates(value: DynamicDateRangeValue): Array<Date> {\n\t\treturn dateTimeOptionToDates(value);\n\t}\n\n\tresetState?: (() => void) | undefined = () => {\n\t\tthis._showTimeView = false;\n\t}\n\n\tget text(): string {\n\t\treturn DynamicDateRange.i18nBundle.getText(DYNAMIC_DATE_RANGE_FROM_TEXT);\n\t}\n\n\tget operator() {\n\t\treturn \"FROMDATETIME\";\n\t}\n\n\tget icon() {\n\t\treturn \"appointment-2\";\n\t}\n\n\tget showDateView() {\n\t\treturn !this._showTimeView;\n\t}\n\n\tget showTimeView() {\n\t\treturn this._showTimeView;\n\t}\n\n\tget btnDateLabel() {\n\t\treturn DynamicDateRange.i18nBundle.getText(DATETIME_PICKER_DATE_BUTTON);\n\t}\n\n\tget btnTimeLabel() {\n\t\treturn DynamicDateRange.i18nBundle.getText(DATETIME_PICKER_TIME_BUTTON);\n\t}\n\n\tget fromText() {\n\t\treturn DynamicDateRange.i18nBundle.getText(DYNAMIC_DATE_RANGE_FROM_INPUT_TEXT);\n\t}\n\n\tgetDateValue(date: Date | undefined) : string {\n\t\tif (date) {\n\t\t\treturn this.getDateFormat().format(date);\n\t\t}\n\n\t\treturn this._currentDateValue ? this.getDateFormat().format(this._currentDateValue) : \"\";\n\t}\n\n\tgetTimeValue(date: Date | undefined) : string {\n\t\tif (date) {\n\t\t\treturn this.getFormat().format(date);\n\t\t}\n\n\t\treturn this._currentDateValue ? this.getFormat().format(this._currentDateValue) : \"\";\n\t}\n\n\t_dateTimeSwitchChange() {\n\t\tthis._showTimeView = !this._showTimeView;\n\t}\n\n\tisValidString(value: string): boolean {\n\t\tconst dateText = value.replace(this.fromText, \"\").trim();\n\t\tconst date = this.getFormat().parse(dateText) as Date;\n\n\t\tif (!date || Number.isNaN(date.getTime())) {\n\t\t\treturn false;\n\t\t}\n\n\t\treturn true;\n\t}\n\n\tgetFormat(): DateFormat {\n\t\treturn DateFormat.getDateTimeInstance({\n\t\t\tstrictParsing: true,\n\t\t});\n\t}\n\n\tgetDateFormat(): DateFormat {\n\t\treturn DateFormat.getDateInstance({\n\t\t\tstrictParsing: true,\n\t\t});\n\t}\n\n\tgetTimeFormat(): DateFormat {\n\t\treturn DateFormat.getTimeInstance({\n\t\t\tstrictParsing: true,\n\t\t});\n\t}\n\n\thandleSelectionChange(e: CustomEvent, value: DynamicDateRangeValue | undefined): DynamicDateRangeValue | undefined {\n\t\tconst currentValue = value || { operator: \"\", values: [] } as DynamicDateRangeValue;\n\t\tconst target = e.target as HTMLElement;\n\t\tcurrentValue.values = this._currentDateValue ? [this._currentDateValue] : [];\n\t\tcurrentValue.operator = this.operator;\n\n\t\tif (target.hasAttribute(\"ui5-segmented-button\")) {\n\t\t\tthis._dateTimeSwitchChange();\n\t\t\treturn currentValue;\n\t\t}\n\n\t\tif (target.hasAttribute(\"ui5-calendar\")) {\n\t\t\tif (e.detail.selectedDates[0]) {\n\t\t\t\tconst tempDate = UI5Date.getInstance(e.detail.selectedDates[0] * 1000);\n\t\t\t\tthis._currentDateValue.setFullYear(tempDate.getFullYear(), tempDate.getMonth(), tempDate.getDate());\n\t\t\t\tcurrentValue.values = [this._currentDateValue];\n\t\t\t}\n\t\t}\n\n\t\tif (target.hasAttribute(\"ui5-time-selection-clocks\")) {\n\t\t\tconst tempValue = e.detail.value as string;\n\t\t\tconst tempDate = this.getFormat().parse(tempValue) as Date;\n\t\t\tif (!this._currentDateValue && value?.values?.length) {\n\t\t\t\tthis._currentDateValue = value?.values[0] as Date;\n\t\t\t}\n\n\t\t\tif (tempDate) {\n\t\t\t\tthis._currentDateValue.setHours(tempDate.getHours(), tempDate.getMinutes(), tempDate.getSeconds());\n\t\t\t\tcurrentValue.values = [this._currentDateValue];\n\t\t\t}\n\t\t}\n\n\t\tthis._showTimeView = true;\n\n\t\treturn currentValue;\n\t}\n}\n\nDynamicDateRange.register(\"FROMDATETIME\", FromDateTime);\n\nexport default FromDateTime;\n"]}

package/dist/dynamic-date-range-options/FromDateTimeTemplate.d.ts

@@ -0,0 +1,2 @@
+import type DynamicDateRange from "../DynamicDateRange.js";
+export default function FromDateTime(this: DynamicDateRange): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;

package/dist/dynamic-date-range-options/FromDateTimeTemplate.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
+import Calendar from "../Calendar.js";
+import CalendarDate from "../CalendarDate.js";
+import SegmentedButton from "../SegmentedButton.js";
+import SegmentedButtonItem from "../SegmentedButtonItem.js";
+import TimeSelectionClocks from "../TimeSelectionClocks.js";
+export default function FromDateTime() {
+    const currentOption = this._currentOption;
+    const currentValue = this.value?.values ? this.value.values[0] : undefined;
+    return (_jsxs("div", { class: "ui5-dynamic-date-range-option-datetime-container", children: [_jsx("div", { class: "ui5-dt-picker-header", children: _jsxs(SegmentedButton, { class: "ui5-dt-picker-toggle-button", onSelectionChange: this.handleSelectionChange, children: [_jsx(SegmentedButtonItem, { "data-ui5-key": "Date", selected: currentOption.showDateView, children: currentOption.btnDateLabel }), _jsx(SegmentedButtonItem, { "data-ui5-key": "Time", selected: currentOption.showTimeView, children: currentOption.btnTimeLabel })] }) }), _jsxs("div", { class: {
+                    "ui5-dt-picker-content": true,
+                }, children: [!!currentOption.showDateView &&
+                        _jsx(Calendar, { class: {
+                                "ui5-dt-cal": true,
+                                "ui5-dt-cal--hidden": currentOption.showTimeView,
+                                "ui5-dt-time--hidden": currentOption.showDateView,
+                            }, onSelectionChange: this.handleSelectionChange, children: _jsx(CalendarDate, { value: currentOption.getDateValue(currentValue) }) }), !!currentOption.showTimeView &&
+                        _jsx(TimeSelectionClocks, { class: {
+                                "ui5-dt-time": true,
+                                "ui5-dt-cal--hidden": currentOption.showTimeView,
+                                "ui5-dt-time--hidden": currentOption.showDateView,
+                            }, value: currentOption.getTimeValue(currentValue), onChange: this.handleSelectionChange })] })] }));
+}
+//# sourceMappingURL=FromDateTimeTemplate.js.map

package/dist/dynamic-date-range-options/FromDateTimeTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FromDateTimeTemplate.js","sourceRoot":"","sources":["../../src/dynamic-date-range-options/FromDateTimeTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,QAAQ,MAAM,gBAAgB,CAAC;AACtC,OAAO,YAAY,MAAM,oBAAoB,CAAC;AAC9C,OAAO,eAAe,MAAM,uBAAuB,CAAC;AACpD,OAAO,mBAAmB,MAAM,2BAA2B,CAAC;AAC5D,OAAO,mBAAmB,MAAM,2BAA2B,CAAC;AAG5D,MAAM,CAAC,OAAO,UAAU,YAAY;IACnC,MAAM,aAAa,GAAG,IAAI,CAAC,cAAoC,CAAC;IAChE,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAS,CAAC,CAAC,CAAC,SAAS,CAAC;IACnF,OAAO,CACN,eAAK,KAAK,EAAC,kDAAkD,aAC5D,cAAK,KAAK,EAAC,sBAAsB,YAChC,MAAC,eAAe,IAAC,KAAK,EAAC,6BAA6B,EAAC,iBAAiB,EAAE,IAAI,CAAC,qBAAqB,aACjG,KAAC,mBAAmB,oBAAc,MAAM,EAAC,QAAQ,EAAE,aAAa,CAAC,YAAY,YAAG,aAAa,CAAC,YAAY,GAAuB,EACjI,KAAC,mBAAmB,oBAAc,MAAM,EAAC,QAAQ,EAAE,aAAa,CAAC,YAAY,YAAG,aAAa,CAAC,YAAY,GAAuB,IAChH,GACb,EAEN,eAAK,KAAK,EAAE;oBACX,uBAAuB,EAAE,IAAI;iBAC7B,aACC,CAAC,CAAC,aAAa,CAAC,YAAY;wBAC5B,KAAC,QAAQ,IACR,KAAK,EAAE;gCACN,YAAY,EAAE,IAAI;gCAClB,oBAAoB,EAAE,aAAa,CAAC,YAAY;gCAChD,qBAAqB,EAAE,aAAa,CAAC,YAAY;6BACjD,EACD,iBAAiB,EAAE,IAAI,CAAC,qBAAqB,YAE7C,KAAC,YAAY,IACZ,KAAK,EAAE,aAAa,CAAC,YAAY,CAAC,YAAY,CAAC,GAChC,GACN,EAGX,CAAC,CAAC,aAAa,CAAC,YAAY;wBAC5B,KAAC,mBAAmB,IACnB,KAAK,EAAE;gCACN,aAAa,EAAE,IAAI;gCACnB,oBAAoB,EAAE,aAAa,CAAC,YAAY;gCAChD,qBAAqB,EAAE,aAAa,CAAC,YAAY;6BACjD,EACD,KAAK,EAAE,aAAa,CAAC,YAAY,CAAC,YAAY,CAAC,EAC/C,QAAQ,EAAE,IAAI,CAAC,qBAAqB,GACnC,IAEE,IACD,CACN,CAAC;AACH,CAAC","sourcesContent":["import type DynamicDateRange from \"../DynamicDateRange.js\";\nimport Calendar from \"../Calendar.js\";\nimport CalendarDate from \"../CalendarDate.js\";\nimport SegmentedButton from \"../SegmentedButton.js\";\nimport SegmentedButtonItem from \"../SegmentedButtonItem.js\";\nimport TimeSelectionClocks from \"../TimeSelectionClocks.js\";\nimport type FromDateTimeOption from \"./FromDateTime.js\";\n\nexport default function FromDateTime(this: DynamicDateRange) {\n\tconst currentOption = this._currentOption as FromDateTimeOption;\n\tconst currentValue = this.value?.values ? this.value.values[0] as Date : undefined;\n\treturn (\n\t\t<div class=\"ui5-dynamic-date-range-option-datetime-container\">\n\t\t\t<div class=\"ui5-dt-picker-header\">\n\t\t\t\t<SegmentedButton class=\"ui5-dt-picker-toggle-button\" onSelectionChange={this.handleSelectionChange}>\n\t\t\t\t\t<SegmentedButtonItem data-ui5-key=\"Date\" selected={currentOption.showDateView}>{currentOption.btnDateLabel}</SegmentedButtonItem>\n\t\t\t\t\t<SegmentedButtonItem data-ui5-key=\"Time\" selected={currentOption.showTimeView}>{currentOption.btnTimeLabel}</SegmentedButtonItem>\n\t\t\t\t</SegmentedButton>\n\t\t\t</div>\n\n\t\t\t<div class={{\n\t\t\t\t\"ui5-dt-picker-content\": true,\n\t\t\t}}>\n\t\t\t\t{!!currentOption.showDateView &&\n\t\t\t\t\t<Calendar\n\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t\"ui5-dt-cal\": true,\n\t\t\t\t\t\t\t\"ui5-dt-cal--hidden\": currentOption.showTimeView,\n\t\t\t\t\t\t\t\"ui5-dt-time--hidden\": currentOption.showDateView,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonSelectionChange={this.handleSelectionChange}\n\t\t\t\t\t>\n\t\t\t\t\t\t<CalendarDate\n\t\t\t\t\t\t\tvalue={currentOption.getDateValue(currentValue)}\n\t\t\t\t\t\t></CalendarDate>\n\t\t\t\t\t</Calendar>\n\t\t\t\t}\n\n\t\t\t\t{!!currentOption.showTimeView &&\n\t\t\t\t\t<TimeSelectionClocks\n\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t\"ui5-dt-time\": true,\n\t\t\t\t\t\t\t\"ui5-dt-cal--hidden\": currentOption.showTimeView,\n\t\t\t\t\t\t\t\"ui5-dt-time--hidden\": currentOption.showDateView,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tvalue={currentOption.getTimeValue(currentValue)}\n\t\t\t\t\t\tonChange={this.handleSelectionChange}\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"]}

package/dist/dynamic-date-range-options/ToDateTime.d.ts

@@ -0,0 +1,36 @@
+import type { DynamicDateRangeValue, IDynamicDateRangeOption } from "../DynamicDateRange.js";
+import DateFormat from "@ui5/webcomponents-localization/dist/DateFormat.js";
+import type { JsxTemplate } from "@ui5/webcomponents-base/dist/index.js";
+/**
+ * @class
+ * @constructor
+ * @public
+ * @since 2.11.0
+ */
+declare class ToDateTime implements IDynamicDateRangeOption {
+    template: JsxTemplate;
+    private _showTimeView;
+    private _currentDateValue;
+    constructor();
+    parse(value: string): DynamicDateRangeValue;
+    format(value: DynamicDateRangeValue): string;
+    toDates(value: DynamicDateRangeValue): Array<Date>;
+    resetState?: (() => void) | undefined;
+    get text(): string;
+    get operator(): string;
+    get icon(): string;
+    get showDateView(): boolean;
+    get showTimeView(): boolean;
+    get btnDateLabel(): string;
+    get btnTimeLabel(): string;
+    get toText(): string;
+    getDateValue(date: Date | undefined): string;
+    getTimeValue(date: Date | undefined): string;
+    _dateTimeSwitchChange(): void;
+    isValidString(value: string): boolean;
+    getFormat(): DateFormat;
+    getDateFormat(): DateFormat;
+    getTimeFormat(): DateFormat;
+    handleSelectionChange(e: CustomEvent, value: DynamicDateRangeValue | undefined): DynamicDateRangeValue | undefined;
+}
+export default ToDateTime;

package/dist/dynamic-date-range-options/ToDateTime.js

@@ -0,0 +1,136 @@
+import FromDateTimeTemplate from "./FromDateTimeTemplate.js";
+import DateFormat from "@ui5/webcomponents-localization/dist/DateFormat.js";
+import UI5Date from "@ui5/webcomponents-localization/dist/dates/UI5Date.js";
+import { DATETIME_PICKER_DATE_BUTTON, DATETIME_PICKER_TIME_BUTTON, DYNAMIC_DATE_RANGE_TO_INPUT_TEXT, DYNAMIC_DATE_RANGE_TO_TEXT, } from "../generated/i18n/i18n-defaults.js";
+import { dateTimeOptionToDates } from "./toDates.js";
+import DynamicDateRange from "../DynamicDateRange.js";
+/**
+ * @class
+ * @constructor
+ * @public
+ * @since 2.11.0
+ */
+class ToDateTime {
+    constructor() {
+        this.resetState = () => {
+            this._showTimeView = false;
+        };
+        this.template = FromDateTimeTemplate;
+        this._showTimeView = false;
+        this._currentDateValue = UI5Date.getInstance();
+    }
+    parse(value) {
+        const dateText = value.replace(this.toText, "").trim();
+        const date = this.getFormat().parse(dateText);
+        const returnValue = { operator: "", values: [] };
+        returnValue.operator = this.operator;
+        returnValue.values = [date];
+        return returnValue;
+    }
+    format(value) {
+        const valuesArray = value?.values;
+        if (!valuesArray || valuesArray.length === 0) {
+            return "";
+        }
+        const formattedValue = this.getFormat().format(valuesArray[0]);
+        return `${this.toText} ${formattedValue}`;
+    }
+    toDates(value) {
+        return dateTimeOptionToDates(value);
+    }
+    get text() {
+        return DynamicDateRange.i18nBundle.getText(DYNAMIC_DATE_RANGE_TO_TEXT);
+    }
+    get operator() {
+        return "TODATETIME";
+    }
+    get icon() {
+        return "appointment-2";
+    }
+    get showDateView() {
+        return !this._showTimeView;
+    }
+    get showTimeView() {
+        return this._showTimeView;
+    }
+    get btnDateLabel() {
+        return DynamicDateRange.i18nBundle.getText(DATETIME_PICKER_DATE_BUTTON);
+    }
+    get btnTimeLabel() {
+        return DynamicDateRange.i18nBundle.getText(DATETIME_PICKER_TIME_BUTTON);
+    }
+    get toText() {
+        return DynamicDateRange.i18nBundle.getText(DYNAMIC_DATE_RANGE_TO_INPUT_TEXT);
+    }
+    getDateValue(date) {
+        if (date) {
+            return this.getDateFormat().format(date);
+        }
+        return this._currentDateValue ? this.getDateFormat().format(this._currentDateValue) : "";
+    }
+    getTimeValue(date) {
+        if (date) {
+            return this.getFormat().format(date);
+        }
+        return this._currentDateValue ? this.getFormat().format(this._currentDateValue) : "";
+    }
+    _dateTimeSwitchChange() {
+        this._showTimeView = !this._showTimeView;
+    }
+    isValidString(value) {
+        const dateText = value.replace(this.toText, "").trim();
+        const date = this.getFormat().parse(dateText);
+        if (!date || Number.isNaN(date.getTime())) {
+            return false;
+        }
+        return true;
+    }
+    getFormat() {
+        return DateFormat.getDateTimeInstance({
+            strictParsing: true,
+        });
+    }
+    getDateFormat() {
+        return DateFormat.getDateInstance({
+            strictParsing: true,
+        });
+    }
+    getTimeFormat() {
+        return DateFormat.getTimeInstance({
+            strictParsing: true,
+        });
+    }
+    handleSelectionChange(e, value) {
+        const currentValue = value || { operator: "", values: [] };
+        const target = e.target;
+        currentValue.values = this._currentDateValue ? [this._currentDateValue] : [];
+        currentValue.operator = this.operator;
+        if (target.hasAttribute("ui5-segmented-button")) {
+            this._dateTimeSwitchChange();
+            return currentValue;
+        }
+        if (target.hasAttribute("ui5-calendar")) {
+            if (e.detail.selectedDates[0]) {
+                const tempDate = UI5Date.getInstance(e.detail.selectedDates[0] * 1000);
+                this._currentDateValue.setFullYear(tempDate.getFullYear(), tempDate.getMonth(), tempDate.getDate());
+                currentValue.values = [this._currentDateValue];
+            }
+        }
+        if (target.hasAttribute("ui5-time-selection-clocks")) {
+            const tempValue = e.detail.value;
+            const tempDate = this.getFormat().parse(tempValue);
+            if (!this._currentDateValue && value?.values?.length) {
+                this._currentDateValue = value?.values[0];
+            }
+            if (tempDate) {
+                this._currentDateValue.setHours(tempDate.getHours(), tempDate.getMinutes(), tempDate.getSeconds());
+                currentValue.values = [this._currentDateValue];
+            }
+        }
+        this._showTimeView = true;
+        return currentValue;
+    }
+}
+DynamicDateRange.register("TODATETIME", ToDateTime);
+export default ToDateTime;
+//# sourceMappingURL=ToDateTime.js.map

package/dist/dynamic-date-range-options/ToDateTime.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToDateTime.js","sourceRoot":"","sources":["../../src/dynamic-date-range-options/ToDateTime.ts"],"names":[],"mappings":"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","sourcesContent":["import FromDateTimeTemplate from \"./FromDateTimeTemplate.js\";\nimport type { DynamicDateRangeValue, IDynamicDateRangeOption } from \"../DynamicDateRange.js\";\nimport DateFormat from \"@ui5/webcomponents-localization/dist/DateFormat.js\";\nimport UI5Date from \"@ui5/webcomponents-localization/dist/dates/UI5Date.js\";\nimport type { JsxTemplate } from \"@ui5/webcomponents-base/dist/index.js\";\nimport {\n\tDATETIME_PICKER_DATE_BUTTON,\n\tDATETIME_PICKER_TIME_BUTTON,\n\tDYNAMIC_DATE_RANGE_TO_INPUT_TEXT,\n\tDYNAMIC_DATE_RANGE_TO_TEXT,\n} from \"../generated/i18n/i18n-defaults.js\";\nimport { dateTimeOptionToDates } from \"./toDates.js\";\nimport DynamicDateRange from \"../DynamicDateRange.js\";\n\n/**\n * @class\n * @constructor\n * @public\n * @since 2.11.0\n */\n\nclass ToDateTime implements IDynamicDateRangeOption {\n\ttemplate: JsxTemplate;\n\tprivate _showTimeView: boolean;\n\tprivate _currentDateValue: Date;\n\n\tconstructor() {\n\t\tthis.template = FromDateTimeTemplate;\n\t\tthis._showTimeView = false;\n\t\tthis._currentDateValue = UI5Date.getInstance();\n\t}\n\n\tparse(value: string): DynamicDateRangeValue {\n\t\tconst dateText = value.replace(this.toText, \"\").trim();\n\t\tconst date = this.getFormat().parse(dateText) as Date;\n\t\tconst returnValue = { operator: \"\", values: [] } as DynamicDateRangeValue;\n\n\t\treturnValue.operator = this.operator;\n\t\treturnValue.values = [date];\n\n\t\treturn returnValue;\n\t}\n\n\tformat(value: DynamicDateRangeValue): string {\n\t\tconst valuesArray = value?.values as Array<Date>;\n\n\t\tif (!valuesArray || valuesArray.length === 0) {\n\t\t\treturn \"\";\n\t\t}\n\n\t\tconst formattedValue = this.getFormat().format(valuesArray[0]);\n\n\t\treturn `${this.toText} ${formattedValue}`;\n\t}\n\n\ttoDates(value: DynamicDateRangeValue): Array<Date> {\n\t\treturn dateTimeOptionToDates(value);\n\t}\n\n\tresetState?: (() => void) | undefined = () => {\n\t\tthis._showTimeView = false;\n\t}\n\n\tget text(): string {\n\t\treturn DynamicDateRange.i18nBundle.getText(DYNAMIC_DATE_RANGE_TO_TEXT);\n\t}\n\n\tget operator() {\n\t\treturn \"TODATETIME\";\n\t}\n\n\tget icon() {\n\t\treturn \"appointment-2\";\n\t}\n\n\tget showDateView() {\n\t\treturn !this._showTimeView;\n\t}\n\n\tget showTimeView() {\n\t\treturn this._showTimeView;\n\t}\n\n\tget btnDateLabel() {\n\t\treturn DynamicDateRange.i18nBundle.getText(DATETIME_PICKER_DATE_BUTTON);\n\t}\n\n\tget btnTimeLabel() {\n\t\treturn DynamicDateRange.i18nBundle.getText(DATETIME_PICKER_TIME_BUTTON);\n\t}\n\n\tget toText() {\n\t\treturn DynamicDateRange.i18nBundle.getText(DYNAMIC_DATE_RANGE_TO_INPUT_TEXT);\n\t}\n\n\tgetDateValue(date: Date | undefined) : string {\n\t\tif (date) {\n\t\t\treturn this.getDateFormat().format(date);\n\t\t}\n\n\t\treturn this._currentDateValue ? this.getDateFormat().format(this._currentDateValue) : \"\";\n\t}\n\n\tgetTimeValue(date: Date | undefined) : string\t {\n\t\tif (date) {\n\t\t\treturn this.getFormat().format(date);\n\t\t}\n\n\t\treturn this._currentDateValue ? this.getFormat().format(this._currentDateValue) : \"\";\n\t}\n\n\t_dateTimeSwitchChange() {\n\t\tthis._showTimeView = !this._showTimeView;\n\t}\n\n\tisValidString(value: string): boolean {\n\t\tconst dateText = value.replace(this.toText, \"\").trim();\n\t\tconst date = this.getFormat().parse(dateText) as Date;\n\n\t\tif (!date || Number.isNaN(date.getTime())) {\n\t\t\treturn false;\n\t\t}\n\n\t\treturn true;\n\t}\n\n\tgetFormat(): DateFormat {\n\t\treturn DateFormat.getDateTimeInstance({\n\t\t\tstrictParsing: true,\n\t\t});\n\t}\n\n\tgetDateFormat(): DateFormat {\n\t\treturn DateFormat.getDateInstance({\n\t\t\tstrictParsing: true,\n\t\t});\n\t}\n\n\tgetTimeFormat(): DateFormat {\n\t\treturn DateFormat.getTimeInstance({\n\t\t\tstrictParsing: true,\n\t\t});\n\t}\n\n\thandleSelectionChange(e: CustomEvent, value: DynamicDateRangeValue | undefined): DynamicDateRangeValue | undefined {\n\t\tconst currentValue = value || { operator: \"\", values: [] } as DynamicDateRangeValue;\n\t\tconst target = e.target as HTMLElement;\n\t\tcurrentValue.values = this._currentDateValue ? [this._currentDateValue] : [];\n\t\tcurrentValue.operator = this.operator;\n\n\t\tif (target.hasAttribute(\"ui5-segmented-button\")) {\n\t\t\tthis._dateTimeSwitchChange();\n\t\t\treturn currentValue;\n\t\t}\n\n\t\tif (target.hasAttribute(\"ui5-calendar\")) {\n\t\t\tif (e.detail.selectedDates[0]) {\n\t\t\t\tconst tempDate = UI5Date.getInstance(e.detail.selectedDates[0] * 1000);\n\t\t\t\tthis._currentDateValue.setFullYear(tempDate.getFullYear(), tempDate.getMonth(), tempDate.getDate());\n\t\t\t\tcurrentValue.values = [this._currentDateValue];\n\t\t\t}\n\t\t}\n\n\t\tif (target.hasAttribute(\"ui5-time-selection-clocks\")) {\n\t\t\tconst tempValue = e.detail.value as string;\n\t\t\tconst tempDate = this.getFormat().parse(tempValue) as Date;\n\t\t\tif (!this._currentDateValue && value?.values?.length) {\n\t\t\t\tthis._currentDateValue = value?.values[0] as Date;\n\t\t\t}\n\n\t\t\tif (tempDate) {\n\t\t\t\tthis._currentDateValue.setHours(tempDate.getHours(), tempDate.getMinutes(), tempDate.getSeconds());\n\t\t\t\tcurrentValue.values = [this._currentDateValue];\n\t\t\t}\n\t\t}\n\n\t\tthis._showTimeView = true;\n\n\t\treturn currentValue;\n\t}\n}\n\nDynamicDateRange.register(\"TODATETIME\", ToDateTime);\n\nexport default ToDateTime;\n"]}

package/dist/dynamic-date-range-options/toDates.d.ts

@@ -1,6 +1,7 @@
 import type { DynamicDateRangeValue, IDynamicDateRangeOption } from "../DynamicDateRange.js";
 declare const dateOptionToDates: (value: DynamicDateRangeValue) => Array<Date>;
 declare const dateRangeOptionToDates: (value: DynamicDateRangeValue) => Array<Date>;
+declare const dateTimeRangeOptionToDates: (value: DynamicDateRangeValue) => Array<Date>;
 declare const todayToDates: () => Array<Date>;
 declare const yesterdayToDates: () => Array<Date>;
 declare const tomorrowToDates: () => Array<Date>;
@@ -10,4 +11,5 @@ declare const lastNextToDates: (value: DynamicDateRangeValue, unit: string, dire
  * Uses operator name to determine time unit and direction.
  */
 declare const toDatesLastNext: (value: DynamicDateRangeValue, option: IDynamicDateRangeOption) => Array<Date>;
-export { dateOptionToDates, dateRangeOptionToDates, todayToDates, tomorrowToDates, yesterdayToDates, lastNextToDates, toDatesLastNext, };
+declare const dateTimeOptionToDates: (value: DynamicDateRangeValue) => Array<Date>;
+export { dateOptionToDates, dateRangeOptionToDates, dateTimeRangeOptionToDates, todayToDates, tomorrowToDates, yesterdayToDates, lastNextToDates, toDatesLastNext, dateTimeOptionToDates, };