@ui5/webcomponents 0.0.0-037d08c67

package/dist/delegate/DragAndDropHandler.d.ts

@@ -0,0 +1,33 @@
+import Orientation from "@ui5/webcomponents-base/dist/types/Orientation.js";
+import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type DropIndicator from "../DropIndicator.js";
+import type MovePlacement from "@ui5/webcomponents-base/dist/types/MovePlacement.js";
+type DragAndDropConfig = {
+    getItems: () => Array<HTMLElement>;
+    getDropIndicator: () => DropIndicator | null;
+    orientation?: Orientation;
+    useOriginalEvent?: boolean;
+    clientCoordinate?: "clientX" | "clientY";
+    transformElement?: (element: HTMLElement) => HTMLElement;
+    validateDraggedElement?: (draggedElement: HTMLElement, targetElement: HTMLElement) => boolean;
+    filterPlacements?: (placements: MovePlacement[], draggedElement: HTMLElement, targetElement: HTMLElement) => MovePlacement[];
+};
+declare class DragAndDropHandler {
+    component: UI5Element;
+    config: DragAndDropConfig;
+    constructor(component: UI5Element, config: DragAndDropConfig);
+    ondragenter(e: DragEvent): void;
+    ondragleave(e: DragEvent): void;
+    ondragover(e: DragEvent): void;
+    ondrop(e: DragEvent): void;
+    _validateDragOver(e: DragEvent): boolean;
+    _findClosestPosition(e: DragEvent): {
+        element: HTMLElement;
+        placements: MovePlacement[];
+    } | null;
+    _transformTargetElement(element: HTMLElement): HTMLElement;
+    _isValidDragTarget(draggedElement: HTMLElement, targetElement: HTMLElement): boolean;
+    _filterPlacements(placements: MovePlacement[], draggedElement: HTMLElement, targetElement: HTMLElement): MovePlacement[];
+}
+export default DragAndDropHandler;
+export type { DragAndDropConfig, };

package/dist/delegate/DragAndDropHandler.js

@@ -0,0 +1,96 @@
+import DragRegistry from "@ui5/webcomponents-base/dist/util/dragAndDrop/DragRegistry.js";
+import handleDragOver from "@ui5/webcomponents-base/dist/util/dragAndDrop/handleDragOver.js";
+import handleDrop from "@ui5/webcomponents-base/dist/util/dragAndDrop/handleDrop.js";
+import { findClosestPosition } from "@ui5/webcomponents-base/dist/util/dragAndDrop/findClosestPosition.js";
+import Orientation from "@ui5/webcomponents-base/dist/types/Orientation.js";
+class DragAndDropHandler {
+    constructor(component, config) {
+        this.component = component;
+        this.config = {
+            orientation: Orientation.Vertical,
+            clientCoordinate: "clientY",
+            ...config,
+        };
+    }
+    ondragenter(e) {
+        e.preventDefault();
+    }
+    ondragleave(e) {
+        if (e.relatedTarget instanceof Node && this.component.shadowRoot?.contains(e.relatedTarget)) {
+            return;
+        }
+        const dropIndicator = this.config.getDropIndicator();
+        if (dropIndicator) {
+            dropIndicator.targetReference = null;
+        }
+    }
+    ondragover(e) {
+        if (!this._validateDragOver(e)) {
+            return;
+        }
+        const draggedElement = DragRegistry.getDraggedElement();
+        const dropIndicator = this.config.getDropIndicator();
+        const closestPosition = this._findClosestPosition(e);
+        if (!closestPosition) {
+            dropIndicator.targetReference = null;
+            return;
+        }
+        const targetElement = this._transformTargetElement(closestPosition.element);
+        if (!this._isValidDragTarget(draggedElement, targetElement)) {
+            dropIndicator.targetReference = null;
+            return;
+        }
+        // Filter placements if needed (e.g., ListItemGroup filtering out MovePlacement.On)
+        const placements = this._filterPlacements(closestPosition.placements, draggedElement, targetElement);
+        const settings = this.config.useOriginalEvent ? { originalEvent: true } : {};
+        const { targetReference, placement } = handleDragOver(e, this.component, {
+            element: targetElement,
+            placements,
+        }, targetElement, settings);
+        dropIndicator.targetReference = targetReference;
+        dropIndicator.placement = placement;
+    }
+    ondrop(e) {
+        const dropIndicator = this.config.getDropIndicator();
+        if (!dropIndicator?.targetReference || !dropIndicator?.placement) {
+            e.preventDefault();
+            return;
+        }
+        const settings = this.config.useOriginalEvent ? { originalEvent: true } : {};
+        handleDrop(e, this.component, dropIndicator.targetReference, dropIndicator.placement, settings);
+        dropIndicator.targetReference = null;
+    }
+    _validateDragOver(e) {
+        if (!(e.target instanceof HTMLElement)) {
+            return false;
+        }
+        const draggedElement = DragRegistry.getDraggedElement();
+        const dropIndicator = this.config.getDropIndicator();
+        return !!(draggedElement && dropIndicator);
+    }
+    _findClosestPosition(e) {
+        const items = this.config.getItems();
+        const coordinate = this.config.clientCoordinate === "clientX" ? e.clientX : e.clientY;
+        return findClosestPosition(items, coordinate, this.config.orientation);
+    }
+    _transformTargetElement(element) {
+        if (this.config.transformElement) {
+            return this.config.transformElement(element);
+        }
+        return element;
+    }
+    _isValidDragTarget(draggedElement, targetElement) {
+        if (this.config.validateDraggedElement) {
+            return this.config.validateDraggedElement(draggedElement, targetElement);
+        }
+        return true;
+    }
+    _filterPlacements(placements, draggedElement, targetElement) {
+        if (this.config.filterPlacements) {
+            return this.config.filterPlacements(placements, draggedElement, targetElement);
+        }
+        return placements;
+    }
+}
+export default DragAndDropHandler;
+//# sourceMappingURL=DragAndDropHandler.js.map

package/dist/delegate/DragAndDropHandler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragAndDropHandler.js","sourceRoot":"","sources":["../../src/delegate/DragAndDropHandler.ts"],"names":[],"mappings":"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","sourcesContent":["import DragRegistry from \"@ui5/webcomponents-base/dist/util/dragAndDrop/DragRegistry.js\";\nimport handleDragOver from \"@ui5/webcomponents-base/dist/util/dragAndDrop/handleDragOver.js\";\nimport handleDrop from \"@ui5/webcomponents-base/dist/util/dragAndDrop/handleDrop.js\";\nimport { findClosestPosition } from \"@ui5/webcomponents-base/dist/util/dragAndDrop/findClosestPosition.js\";\nimport Orientation from \"@ui5/webcomponents-base/dist/types/Orientation.js\";\nimport type UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type DropIndicator from \"../DropIndicator.js\";\nimport type MovePlacement from \"@ui5/webcomponents-base/dist/types/MovePlacement.js\";\n\ntype DragAndDropConfig = {\n\tgetItems: () => Array<HTMLElement>;\n\tgetDropIndicator: () => DropIndicator | null;\n\torientation?: Orientation;\n\tuseOriginalEvent?: boolean;\n\tclientCoordinate?: \"clientX\" | \"clientY\";\n\ttransformElement?: (element: HTMLElement) => HTMLElement;\n\tvalidateDraggedElement?: (draggedElement: HTMLElement, targetElement: HTMLElement) => boolean;\n\tfilterPlacements?: (placements: MovePlacement[], draggedElement: HTMLElement, targetElement: HTMLElement) => MovePlacement[];\n};\n\nclass DragAndDropHandler {\n\tcomponent: UI5Element;\n\tconfig: DragAndDropConfig;\n\n\tconstructor(component: UI5Element, config: DragAndDropConfig) {\n\t\tthis.component = component;\n\t\tthis.config = {\n\t\t\torientation: Orientation.Vertical,\n\t\t\tclientCoordinate: \"clientY\",\n\t\t\t...config,\n\t\t};\n\t}\n\n\tondragenter(e: DragEvent) {\n\t\te.preventDefault();\n\t}\n\n\tondragleave(e: DragEvent) {\n\t\tif (e.relatedTarget instanceof Node && this.component.shadowRoot?.contains(e.relatedTarget)) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst dropIndicator = this.config.getDropIndicator();\n\t\tif (dropIndicator) {\n\t\t\tdropIndicator.targetReference = null;\n\t\t}\n\t}\n\n\tondragover(e: DragEvent) {\n\t\tif (!this._validateDragOver(e)) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst draggedElement = DragRegistry.getDraggedElement()!;\n\t\tconst dropIndicator = this.config.getDropIndicator()!;\n\t\tconst closestPosition = this._findClosestPosition(e);\n\n\t\tif (!closestPosition) {\n\t\t\tdropIndicator.targetReference = null;\n\t\t\treturn;\n\t\t}\n\n\t\tconst targetElement = this._transformTargetElement(closestPosition.element);\n\n\t\tif (!this._isValidDragTarget(draggedElement, targetElement)) {\n\t\t\tdropIndicator.targetReference = null;\n\t\t\treturn;\n\t\t}\n\n\t\t// Filter placements if needed (e.g., ListItemGroup filtering out MovePlacement.On)\n\t\tconst placements = this._filterPlacements(closestPosition.placements, draggedElement, targetElement);\n\n\t\tconst settings = this.config.useOriginalEvent ? { originalEvent: true } : {};\n\t\tconst { targetReference, placement } = handleDragOver(e, this.component, {\n\t\t\telement: targetElement,\n\t\t\tplacements,\n\t\t}, targetElement, settings);\n\n\t\tdropIndicator.targetReference = targetReference;\n\t\tdropIndicator.placement = placement;\n\t}\n\n\tondrop(e: DragEvent) {\n\t\tconst dropIndicator = this.config.getDropIndicator();\n\n\t\tif (!dropIndicator?.targetReference || !dropIndicator?.placement) {\n\t\t\te.preventDefault();\n\t\t\treturn;\n\t\t}\n\n\t\tconst settings = this.config.useOriginalEvent ? { originalEvent: true } : {};\n\t\thandleDrop(e, this.component, dropIndicator.targetReference, dropIndicator.placement, settings);\n\t\tdropIndicator.targetReference = null;\n\t}\n\n\t_validateDragOver(e: DragEvent): boolean {\n\t\tif (!(e.target instanceof HTMLElement)) {\n\t\t\treturn false;\n\t\t}\n\n\t\tconst draggedElement = DragRegistry.getDraggedElement();\n\t\tconst dropIndicator = this.config.getDropIndicator();\n\n\t\treturn !!(draggedElement && dropIndicator);\n\t}\n\n\t_findClosestPosition(e: DragEvent) {\n\t\tconst items = this.config.getItems();\n\t\tconst coordinate = this.config.clientCoordinate === \"clientX\" ? e.clientX : e.clientY;\n\n\t\treturn findClosestPosition(\n\t\t\titems,\n\t\t\tcoordinate,\n\t\t\tthis.config.orientation!,\n\t\t);\n\t}\n\n\t_transformTargetElement(element: HTMLElement): HTMLElement {\n\t\tif (this.config.transformElement) {\n\t\t\treturn this.config.transformElement(element);\n\t\t}\n\t\treturn element;\n\t}\n\n\t_isValidDragTarget(draggedElement: HTMLElement, targetElement: HTMLElement): boolean {\n\t\tif (this.config.validateDraggedElement) {\n\t\t\treturn this.config.validateDraggedElement(draggedElement, targetElement);\n\t\t}\n\t\treturn true;\n\t}\n\n\t_filterPlacements(placements: MovePlacement[], draggedElement: HTMLElement, targetElement: HTMLElement): MovePlacement[] {\n\t\tif (this.config.filterPlacements) {\n\t\t\treturn this.config.filterPlacements(placements, draggedElement, targetElement);\n\t\t}\n\t\treturn placements;\n\t}\n}\n\nexport default DragAndDropHandler;\nexport type {\n\tDragAndDropConfig,\n};\n"]}

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

@@ -0,0 +1,23 @@
+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 DateRange implements IDynamicDateRangeOption {
+    template: JsxTemplate;
+    constructor();
+    parse(value: string): DynamicDateRangeValue;
+    format(value: DynamicDateRangeValue): string;
+    toDates(value: DynamicDateRangeValue): Array<Date>;
+    get text(): string;
+    get operator(): string;
+    get icon(): string;
+    isValidString(value: string): boolean;
+    getFormat(): DateFormat;
+    handleSelectionChange(e: CustomEvent): DynamicDateRangeValue | undefined;
+}
+export default DateRange;

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

@@ -0,0 +1,81 @@
+import DateRangeTemplate from "./DateRangeTemplate.js";
+import DateFormat from "@ui5/webcomponents-localization/dist/DateFormat.js";
+import UI5Date from "@ui5/webcomponents-localization/dist/dates/UI5Date.js";
+import { DYNAMIC_DATE_RANGE_DATERANGE_TEXT, } from "../generated/i18n/i18n-defaults.js";
+import { dateRangeOptionToDates } from "./toDates.js";
+import DynamicDateRange from "../DynamicDateRange.js";
+/**
+ * @class
+ * @constructor
+ * @public
+ * @since 2.11.0
+ */
+class DateRange {
+    constructor() {
+        this.template = DateRangeTemplate;
+    }
+    parse(value) {
+        const returnValue = { operator: "", values: [] };
+        returnValue.operator = this.operator;
+        returnValue.values = this.getFormat().parse(value);
+        return returnValue;
+    }
+    format(value) {
+        const valuesArray = value?.values;
+        if (!valuesArray || valuesArray.length !== 2 || !valuesArray[1]) {
+            return "";
+        }
+        const formattedValue = this.getFormat().format(valuesArray);
+        return formattedValue;
+    }
+    toDates(value) {
+        return dateRangeOptionToDates(value);
+    }
+    get text() {
+        return DynamicDateRange.i18nBundle.getText(DYNAMIC_DATE_RANGE_DATERANGE_TEXT);
+    }
+    get operator() {
+        return "DATERANGE";
+    }
+    get icon() {
+        return "appointment-2";
+    }
+    isValidString(value) {
+        const dates = this.getFormat().parse(value);
+        if (!dates[0] || !dates[1] || Number.isNaN(dates[0].getTime()) || Number.isNaN(dates[1].getTime())) {
+            return false;
+        }
+        return true;
+    }
+    getFormat() {
+        return DateFormat.getDateInstance({
+            strictParsing: true,
+            interval: true,
+            intervalDelimiter: " - ",
+        });
+    }
+    handleSelectionChange(e) {
+        const currentValue = { operator: "", values: [] };
+        currentValue.values = [];
+        currentValue.operator = this.operator;
+        if (e.detail.selectedDates[0]) {
+            currentValue.values[0] = UI5Date.getInstance(e.detail.selectedDates[0] * 1000);
+        }
+        if (e.detail.selectedDates[1]) {
+            currentValue.values[1] = UI5Date.getInstance(e.detail.selectedDates[1] * 1000);
+        }
+        // Handle backwards date ranges by automatically flipping them
+        if (currentValue.values.length === 2 && currentValue.values[0] && currentValue.values[1]) {
+            const startDate = currentValue.values[0];
+            const endDate = currentValue.values[1];
+            // If start date is after end date, flip them
+            if (startDate.getTime() > endDate.getTime()) {
+                currentValue.values = [endDate, startDate];
+            }
+        }
+        return currentValue;
+    }
+}
+DynamicDateRange.register("DATERANGE", DateRange);
+export default DateRange;
+//# sourceMappingURL=DateRange.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DateRange.js","sourceRoot":"","sources":["../../src/dynamic-date-range-options/DateRange.ts"],"names":[],"mappings":"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","sourcesContent":["import DateRangeTemplate from \"./DateRangeTemplate.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\tDYNAMIC_DATE_RANGE_DATERANGE_TEXT,\n} from \"../generated/i18n/i18n-defaults.js\";\nimport { dateRangeOptionToDates } from \"./toDates.js\";\nimport DynamicDateRange from \"../DynamicDateRange.js\";\n\n/**\n * @class\n * @constructor\n * @public\n * @since 2.11.0\n */\n\nclass DateRange implements IDynamicDateRangeOption {\n\ttemplate: JsxTemplate;\n\n\tconstructor() {\n\t\tthis.template = DateRangeTemplate;\n\t}\n\n\tparse(value: string): DynamicDateRangeValue {\n\t\tconst returnValue = { operator: \"\", values: [] } as DynamicDateRangeValue;\n\n\t\treturnValue.operator = this.operator;\n\t\treturnValue.values = this.getFormat().parse(value) as Date[];\n\n\t\treturn returnValue;\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[1]) {\n\t\t\treturn \"\";\n\t\t}\n\n\t\tconst formattedValue = this.getFormat().format(valuesArray);\n\n\t\treturn formattedValue;\n\t}\n\n\ttoDates(value: DynamicDateRangeValue): Array<Date> {\n\t\treturn dateRangeOptionToDates(value);\n\t}\n\n\tget text(): string {\n\t\treturn DynamicDateRange.i18nBundle.getText(DYNAMIC_DATE_RANGE_DATERANGE_TEXT);\n\t}\n\n\tget operator() {\n\t\treturn \"DATERANGE\";\n\t}\n\n\tget icon() {\n\t\treturn \"appointment-2\";\n\t}\n\n\tisValidString(value: string): boolean {\n\t\tconst dates = this.getFormat().parse(value) as Array<Date>;\n\n\t\tif (!dates[0] || !dates[1] || Number.isNaN(dates[0].getTime()) || Number.isNaN(dates[1].getTime())) {\n\t\t\treturn false;\n\t\t}\n\n\t\treturn true;\n\t}\n\n\tgetFormat(): DateFormat {\n\t\treturn DateFormat.getDateInstance({\n\t\t\tstrictParsing: true,\n\t\t\tinterval: true,\n\t\t\tintervalDelimiter: \" - \",\n\t\t});\n\t}\n\n\thandleSelectionChange(e: CustomEvent): DynamicDateRangeValue | undefined {\n\t\tconst currentValue = { operator: \"\", values: [] } as DynamicDateRangeValue;\n\t\tcurrentValue.values = [];\n\t\tcurrentValue.operator = this.operator;\n\n\t\tif (e.detail.selectedDates[0]) {\n\t\t\tcurrentValue.values[0] = UI5Date.getInstance(e.detail.selectedDates[0] * 1000);\n\t\t}\n\n\t\tif (e.detail.selectedDates[1]) {\n\t\t\tcurrentValue.values[1] = UI5Date.getInstance(e.detail.selectedDates[1] * 1000);\n\t\t}\n\n\t\t// Handle backwards date ranges by automatically flipping them\n\t\tif (currentValue.values.length === 2 && currentValue.values[0] && currentValue.values[1]) {\n\t\t\tconst startDate = currentValue.values[0] as UI5Date;\n\t\t\tconst endDate = currentValue.values[1] as UI5Date;\n\n\t\t\t// If start date is after end date, flip them\n\t\t\tif (startDate.getTime() > endDate.getTime()) {\n\t\t\t\tcurrentValue.values = [endDate, startDate];\n\t\t\t}\n\t\t}\n\n\t\treturn currentValue;\n\t}\n}\n\nDynamicDateRange.register(\"DATERANGE\", DateRange);\n\nexport default DateRange;\n"]}

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

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

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "@ui5/webcomponents-base/jsx-runtime";
+import Calendar from "../Calendar.js";
+import CalendarDateRange from "../CalendarDateRange.js";
+export default function DateRangeTemplate() {
+    return (_jsx(Calendar, { onSelectionChange: this.handleSelectionChange, selectionMode: "Range", children: _jsx(CalendarDateRange, { startValue: this.value?.operator === "DATERANGE"
+                ? this.getOption(this.value.operator)?.format(this.value)?.split("-")[0] || undefined
+                : undefined, endValue: this.value?.operator === "DATERANGE"
+                ? this.getOption(this.value.operator)?.format(this.value)?.split("-")[1] || undefined
+                : undefined }) }));
+}
+//# sourceMappingURL=DateRangeTemplate.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DateRangeTemplate.js","sourceRoot":"","sources":["../../src/dynamic-date-range-options/DateRangeTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,QAAQ,MAAM,gBAAgB,CAAC;AACtC,OAAO,iBAAiB,MAAM,yBAAyB,CAAC;AAExD,MAAM,CAAC,OAAO,UAAU,iBAAiB;IACxC,OAAO,CACN,KAAC,QAAQ,IAAC,iBAAiB,EAAE,IAAI,CAAC,qBAAqB,EAAE,aAAa,EAAC,OAAO,YAC7E,KAAC,iBAAiB,IACjB,UAAU,EACT,IAAI,CAAC,KAAK,EAAE,QAAQ,KAAK,WAAW;gBACnC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,SAAS;gBACrF,CAAC,CAAC,SAAS,EAEb,QAAQ,EACP,IAAI,CAAC,KAAK,EAAE,QAAQ,KAAK,WAAW;gBACnC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,SAAS;gBACrF,CAAC,CAAC,SAAS,GAEO,GACX,CACX,CAAC;AACH,CAAC","sourcesContent":["import type DynamicDateRange from \"../DynamicDateRange.js\";\nimport Calendar from \"../Calendar.js\";\nimport CalendarDateRange from \"../CalendarDateRange.js\";\n\nexport default function DateRangeTemplate(this: DynamicDateRange) {\n\treturn (\n\t\t<Calendar onSelectionChange={this.handleSelectionChange} selectionMode=\"Range\">\n\t\t\t<CalendarDateRange\n\t\t\t\tstartValue={\n\t\t\t\t\tthis.value?.operator === \"DATERANGE\"\n\t\t\t\t\t\t? this.getOption(this.value.operator)?.format(this.value)?.split(\"-\")[0] || undefined\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\tendValue={\n\t\t\t\t\tthis.value?.operator === \"DATERANGE\"\n\t\t\t\t\t\t? this.getOption(this.value.operator)?.format(this.value)?.split(\"-\")[1] || undefined\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t></CalendarDateRange>\n\t\t</Calendar>\n\t);\n}\n"]}

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