@ui5/webcomponents 0.0.0-b132dd7b9 → 0.0.0-b3a4f8020

package/dist/DynamicDateRange.js

@@ -0,0 +1,392 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var DynamicDateRange_1;
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import query from "@ui5/webcomponents-base/dist/decorators/query.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
+import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
+import { isF4, isShow } from "@ui5/webcomponents-base/dist/Keys.js";
+import DynamicDateRangeTemplate from "./DynamicDateRangeTemplate.js";
+import IconMode from "./types/IconMode.js";
+import { DYNAMIC_DATE_RANGE_SELECTED_TEXT, DYNAMIC_DATE_RANGE_EMPTY_SELECTED_TEXT, DYNAMIC_DATE_RANGE_NAVIGATION_ICON_TOOLTIP, DYNAMIC_DATE_RANGE_POPOVER_ACCESSIBLE_NAME, } from "./generated/i18n/i18n-defaults.js";
+// default calendar for bundling
+import "@ui5/webcomponents-localization/dist/features/calendar/Gregorian.js";
+// Styles
+import dynamicDateRangeCss from "./generated/themes/DynamicDateRange.css.js";
+import dynamicDateRangePopoverCss from "./generated/themes/DynamicDateRangePopover.css.js";
+import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverCommon.css.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * The `ui5-dynamic-date-range` component provides a flexible interface to define date ranges using a combination of absolute dates, relative intervals, and preset ranges (e.g., "Today", "Yesterday", etc.).
+ * It allows users to select a date range from a predefined set of options or enter custom dates.
+ *
+ * ### Usage
+ *
+ * The component is typically used in scenarios where users need to filter data based on date ranges, such as in reports, dashboards, or data analysis tools.
+ * It can be used with the predefined options or extended with custom options to suit specific requirements. You can create your own options by extending the `IDynamicDateRangeOption` interface.
+ * Every option should be registered using the `DynamicDateRange.register` method.
+ *
+ * If needed, you can also create a range of dates based on specific option using the `toDates` method.
+ *
+ * ### Standard Options
+ *
+ * The component comes with a set of standard options, including:
+ * - "TODAY" - Represents the current date. An example value is `{ operator: "TODAY"}`. Import: `import "@ui5/webcomponents/dist/dynamic-date-range-options/Today.js";`
+ * - "YESTERDAY" - Represents the previous date. An example value is `{ operator: "YESTERDAY"}`. Import: `import "@ui5/webcomponents/dist/dynamic-date-range-options/Yesterday.js";`
+ * - "TOMORROW" - Represents the next date. An example value is `{ operator: "TOMORROW"}`. Import: `import "@ui5/webcomponents/dist/dynamic-date-range-options/Tomorrow.js";`
+ * - "DATE" - Represents a single date. An example value is `{ operator: "DATE", values: [new Date()]}`. Import: `import "@ui5/webcomponents/dist/dynamic-date-range-options/SingleDate.js";`
+ * - "DATERANGE" - Represents a range of dates. An example value is `{ operator: "DATERANGE", values: [new Date(), new Date()]}`. Import: `import "@ui5/webcomponents/dist/dynamic-date-range-options/DateRange.js";`
+ * - "DATETIMERANGE" - Represents a range of dates with times. An example value is `{ operator: "DATETIMERANGE", values: [new Date(), new Date()]}`. Import: `import "@ui5/webcomponents/dist/dynamic-date-range-options/DateTimeRange.js";`
+ * - "FROMDATETIME" - Represents a range from date and time. An example value is `{ operator: "FROMDATETIME", values: [new Date()]}`. Import: `import "@ui5/webcomponents/dist/dynamic-date-range-options/FromDateTime.js";`
+ * - "TODATETIME" - Represents a range to date and time. An example value is `{ operator: "TODATETIME", values: [new Date()]}`. Import: `import "@ui5/webcomponents/dist/dynamic-date-range-options/ToDateTime.js";`
+ * - "LASTDAYS" - Represents Last X Days from today. An example value is `{ operator: "LASTDAYS", values: [2]}`. Import: `import "@ui5/webcomponents/dist/dynamic-date-range-options/LastOptions.js";`
+ * - "LASTWEEKS" - Represents Last X Weeks from today. An example value is `{ operator: "LASTWEEKS", values: [3]}`. Import: `import "@ui5/webcomponents/dist/dynamic-date-range-options/LastOptions.js";`
+ * - "LASTMONTHS" - Represents Last X Months from today. An example value is `{ operator: "LASTMONTHS", values: [6]}`. Import: `import "@ui5/webcomponents/dist/dynamic-date-range-options/LastOptions.js";`
+ * - "LASTQUARTERS" - Represents Last X Quarters from today. An example value is `{ operator: "LASTQUARTERS", values: [2]}`. Import: `import "@ui5/webcomponents/dist/dynamic-date-range-options/LastOptions.js";`
+ * - "LASTYEARS" - Represents Last X Years from today. An example value is `{ operator: "LASTYEARS", values: [1]}`. Import: `import "@ui5/webcomponents/dist/dynamic-date-range-options/LastOptions.js";`
+ * - "NEXTDAYS" - Represents Next X Days from today. An example value is `{ operator: "NEXTDAYS", values: [2]}`. Import: `import "@ui5/webcomponents/dist/dynamic-date-range-options/NextOptions.js";`
+ * - "NEXTWEEKS" - Represents Next X Weeks from today. An example value is `{ operator: "NEXTWEEKS", values: [3]}`. Import: `import "@ui5/webcomponents/dist/dynamic-date-range-options/NextOptions.js";`
+ * - "NEXTMONTHS" - Represents Next X Months from today. An example value is `{ operator: "NEXTMONTHS", values: [6]}`. Import: `import "@ui5/webcomponents/dist/dynamic-date-range-options/NextOptions.js";`
+ * - "NEXTQUARTERS" - Represents Next X Quarters from today. An example value is `{ operator: "NEXTQUARTERS", values: [2]}`. Import: `import "@ui5/webcomponents/dist/dynamic-date-range-options/NextOptions.js";`
+ * - "NEXTYEARS" - Represents Next X Years from today. An example value is `{ operator: "NEXTYEARS", values: [1]}`. Import: `import "@ui5/webcomponents/dist/dynamic-date-range-options/NextOptions.js";`
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/dist/DynamicDateRange.js";`
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ * @since 2.11.0
+ */
+let DynamicDateRange = DynamicDateRange_1 = class DynamicDateRange extends UI5Element {
+    constructor() {
+        super(...arguments);
+        /**
+         * Defines the options listed as a string, separated by commas and using capital case.
+         * Example: "TODAY, YESTERDAY, DATERANGE"
+         * @public
+         * @default ""
+         */
+        this.options = "";
+        /**
+         * Defines the open or closed state of the popover.
+         * @private
+         * @default false
+         */
+        this.open = false;
+        this.optionsObjects = [];
+    }
+    onBeforeRendering() {
+        this.optionsObjects = this._createNormalizedOptions();
+        this._focusSelectedItem();
+    }
+    async onAfterRendering() {
+        await renderFinished().then(() => {
+            setTimeout(() => {
+                this._focusLastSelectedItem();
+            }, 0);
+        });
+    }
+    /**
+     * Creates and normalizes options from the options string
+     */
+    _createNormalizedOptions() {
+        if (!this.optionsObjects.length) { // initialize options on first use
+            const optionKeys = this.splitOptions(this.options).filter(Boolean);
+            const createdOptions = [];
+            const classToOperators = new Map();
+            // Group operators by their class
+            optionKeys.forEach(option => {
+                const OptionClass = DynamicDateRange_1.getOptionClass(option);
+                if (OptionClass) {
+                    const operators = classToOperators.get(OptionClass) || [];
+                    operators.push(option);
+                    classToOperators.set(OptionClass, operators);
+                }
+            });
+            classToOperators.forEach((operators, OptionClass) => {
+                createdOptions.push(new OptionClass(operators));
+            });
+            return createdOptions;
+        }
+        return this.optionsObjects;
+    }
+    splitOptions(options) {
+        return options.split(",").map(s => s.trim());
+    }
+    _focusSelectedItem() {
+        if (!this.value) {
+            return;
+        }
+        const listItem = this._list?.items.find(item => item.selected === true);
+        if (listItem) {
+            this._list?.focusItem(listItem);
+        }
+    }
+    _focusLastSelectedItem() {
+        if (!this._lastSelectedOption) {
+            return;
+        }
+        // Ensure the list exists and has items
+        if (!this._list || !this._list.items.length) {
+            return;
+        }
+        // Find the index of the last selected option in the options array
+        const optionIndex = this.optionsObjects.findIndex(option => option.operator === this._lastSelectedOption?.operator);
+        if (optionIndex >= 0 && optionIndex < this._list.items.length) {
+            const listItem = this._list.items[optionIndex];
+            this._list.focusItem(listItem);
+        }
+    }
+    /**
+     * Defines whether the value help icon is hidden
+     * @private
+     */
+    get _iconMode() {
+        return isDesktop() ? IconMode.Decorative : IconMode.Interactive;
+    }
+    get tooltipNavigationIcon() {
+        return DynamicDateRange_1.i18nBundle.getText(DYNAMIC_DATE_RANGE_NAVIGATION_ICON_TOOLTIP);
+    }
+    get popoverAccessibleName() {
+        return DynamicDateRange_1.i18nBundle.getText(DYNAMIC_DATE_RANGE_POPOVER_ACCESSIBLE_NAME);
+    }
+    _togglePicker() {
+        if (this.open) {
+            this._close();
+        }
+        else {
+            this.open = true;
+        }
+    }
+    _selectOption(e) {
+        this._currentOption = this.optionsObjects.find(option => option.text === e.detail.item.textContent);
+        this._lastSelectedOption = this._currentOption;
+        if (!this._currentOption?.template) {
+            this.currentValue = this._currentOption?.parse(this._currentOption.text);
+            this._submitValue();
+        }
+        else if (!this.currentValue || this.currentValue.operator !== this._currentOption.operator) {
+            this.currentValue = undefined;
+        }
+        if (this._currentOption?.operator === this.value?.operator) {
+            this.currentValue = this.value;
+        }
+    }
+    getOption(operator) {
+        if (!operator) {
+            return this._currentOption;
+        }
+        const resultOption = this.optionsObjects.find(option => option.operator === operator);
+        if (!resultOption) {
+            const OptionClass = DynamicDateRange_1.getOptionClass(operator);
+            if (OptionClass) {
+                const existingOption = this.optionsObjects.find(option => option.constructor === OptionClass);
+                if (existingOption) {
+                    existingOption.operator = operator;
+                    return existingOption;
+                }
+                const optionObject = new OptionClass();
+                this.optionsObjects.push(optionObject);
+                return optionObject;
+            }
+        }
+        return resultOption;
+    }
+    onInputChange(e) {
+        const value = e.target?.value;
+        if (!value) {
+            this.value = undefined;
+            this.fireDecoratorEvent("change");
+            return;
+        }
+        const currentOption = this.optionsObjects.find(option => option.isValidString(value));
+        this.value = currentOption ? this.getOption(currentOption.operator)?.parse(value) : undefined;
+        if (this.value) {
+            this.fireDecoratorEvent("change");
+        }
+    }
+    onButtonBackClick() {
+        this._currentOption = undefined;
+    }
+    /**
+     * Converts a `value` into concrete `startDate` and `endDate` JavaScript `Date` objects.
+     *
+     * @public
+     * @param value The option to convert into an array of date ranges
+     * @returns An array of two `Date` objects representing the start and end dates.
+     */
+    toDates(value) {
+        return this.getOption(value.operator)?.toDates(value);
+    }
+    get _hasCurrentOptionTemplate() {
+        return !!this._currentOption?.template;
+    }
+    _submitValue() {
+        const valueToSubmit = this.currentValue || { operator: this._currentOption?.operator || "", values: [] };
+        const displayString = this._currentOption?.format(valueToSubmit) || "";
+        if (this._input) {
+            this._input.value = displayString;
+        }
+        if (!this._currentOption || !valueToSubmit.operator) {
+            this.value = undefined;
+        }
+        else if (this._currentOption.isValidString(displayString)) {
+            this.value = valueToSubmit;
+            this.fireDecoratorEvent("change");
+        }
+        else {
+            this.value = undefined;
+        }
+        this._currentOption?.resetState?.();
+        this._currentOption = undefined;
+        this.open = false;
+    }
+    _close() {
+        this._currentOption?.resetState?.();
+        this._currentOption = undefined;
+        this.open = false;
+    }
+    onPopoverBeforeOpen() {
+        if (this.currentValue !== this.value) {
+            this.currentValue = this.value;
+        }
+    }
+    onPopoverClose() {
+        this._close();
+    }
+    get currentValueText() {
+        if (this.currentValue) {
+            const correctOption = this.getOption(this.currentValue.operator);
+            if (correctOption) {
+                const dates = correctOption.toDates(this.currentValue);
+                const displayValue = { ...this.currentValue, values: dates };
+                const displayText = correctOption.format(displayValue);
+                return `${DynamicDateRange_1.i18nBundle.getText(DYNAMIC_DATE_RANGE_SELECTED_TEXT)}: ${displayText}`;
+            }
+        }
+        if (this._currentOption) {
+            const emptyValue = { operator: this._currentOption.operator, values: [] };
+            const displayText = this._currentOption.format(emptyValue);
+            if (displayText && displayText.trim()) {
+                return `${DynamicDateRange_1.i18nBundle.getText(DYNAMIC_DATE_RANGE_SELECTED_TEXT)}: ${displayText}`;
+            }
+        }
+        return DynamicDateRange_1.i18nBundle.getText(DYNAMIC_DATE_RANGE_EMPTY_SELECTED_TEXT);
+    }
+    handleSelectionChange(e) {
+        const value = this._currentOption?.handleSelectionChange?.(e, this.currentValue);
+        this.currentValue = JSON.parse(JSON.stringify(value)); // deep clone
+        if (this.currentValue) {
+            this.currentValue.values = value?.values;
+        }
+        // Update _currentOption if the operator changed
+        if (this.currentValue && this.currentValue.operator !== this._currentOption?.operator) {
+            this._currentOption = this.getOption(this.currentValue.operator);
+        }
+    }
+    onInputKeyDown(e) {
+        if (isShow(e)) {
+            e.preventDefault();
+            if (this.open) {
+                if (!isF4(e)) {
+                    this._toggleAndFocusInput();
+                }
+            }
+            else {
+                this._toggleAndFocusInput();
+            }
+        }
+    }
+    _toggleAndFocusInput() {
+        this._togglePicker();
+        if (this.open) {
+            this._input?.focus();
+        }
+    }
+    onKeyDownPopover(e) {
+        if (isShow(e)) {
+            e.preventDefault(); // Prevent scroll on Alt/Option + Arrow Up/Down
+            this._toggleAndFocusInput();
+        }
+    }
+    /**
+     * Registers a new dynamic date range option with a unique key.
+     *
+     * Example:
+     * DynamicDateRange.register("LASTWEEK", LastWeek);
+     */
+    static register(operator, option) {
+        operator = operator.toUpperCase();
+        if (!this.optionsClasses.has(operator)) {
+            this.optionsClasses.set(operator, option);
+        }
+    }
+    static getOptionClass(operator) {
+        return this.optionsClasses.get(operator);
+    }
+};
+DynamicDateRange.optionsClasses = new Map();
+__decorate([
+    property({ noAttribute: true })
+], DynamicDateRange.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], DynamicDateRange.prototype, "options", void 0);
+__decorate([
+    property({ type: Boolean })
+], DynamicDateRange.prototype, "open", void 0);
+__decorate([
+    property({ type: Object })
+], DynamicDateRange.prototype, "_currentOption", void 0);
+__decorate([
+    property({ type: Object })
+], DynamicDateRange.prototype, "currentValue", void 0);
+__decorate([
+    query("[ui5-input]")
+], DynamicDateRange.prototype, "_input", void 0);
+__decorate([
+    query("[ui5-list]")
+], DynamicDateRange.prototype, "_list", void 0);
+__decorate([
+    i18n("@ui5/webcomponents")
+], DynamicDateRange, "i18nBundle", void 0);
+DynamicDateRange = DynamicDateRange_1 = __decorate([
+    customElement({
+        tag: "ui5-dynamic-date-range",
+        languageAware: true,
+        cldr: true,
+        template: DynamicDateRangeTemplate,
+        renderer: jsxRenderer,
+        styles: [
+            dynamicDateRangeCss,
+            ResponsivePopoverCommonCss,
+            dynamicDateRangePopoverCss,
+        ],
+    })
+    /**
+     * Fired when the input operation has finished by pressing Enter or on focusout or a value is selected in the popover.
+     * @public
+     */
+    ,
+    event("change", {
+        bubbles: true,
+        cancelable: true,
+    })
+], DynamicDateRange);
+DynamicDateRange.define();
+export default DynamicDateRange;
+//# sourceMappingURL=DynamicDateRange.js.map

package/dist/DynamicDateRange.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicDateRange.js","sourceRoot":"","sources":["../src/DynamicDateRange.ts"],"names":[],"mappings":"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","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport query from \"@ui5/webcomponents-base/dist/decorators/query.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport { renderFinished } from \"@ui5/webcomponents-base/dist/Render.js\";\nimport type { JsxTemplate } from \"@ui5/webcomponents-base/dist/index.js\";\nimport { isF4, isShow } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport DynamicDateRangeTemplate from \"./DynamicDateRangeTemplate.js\";\nimport IconMode from \"./types/IconMode.js\";\nimport type Input from \"./Input.js\";\nimport type List from \"./List.js\";\nimport type ListItem from \"./ListItem.js\";\nimport {\n\tDYNAMIC_DATE_RANGE_SELECTED_TEXT,\n\tDYNAMIC_DATE_RANGE_EMPTY_SELECTED_TEXT,\n\tDYNAMIC_DATE_RANGE_NAVIGATION_ICON_TOOLTIP,\n\tDYNAMIC_DATE_RANGE_POPOVER_ACCESSIBLE_NAME,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n// default calendar for bundling\nimport \"@ui5/webcomponents-localization/dist/features/calendar/Gregorian.js\";\n\n// Styles\nimport dynamicDateRangeCss from \"./generated/themes/DynamicDateRange.css.js\";\nimport dynamicDateRangePopoverCss from \"./generated/themes/DynamicDateRangePopover.css.js\";\nimport ResponsivePopoverCommonCss from \"./generated/themes/ResponsivePopoverCommon.css.js\";\n\ntype DynamicDateRangeValue = {\n\t/**\n\t * The key of the option.\n\t * @default \"\"\n\t * @public\n\t */\n\toperator: string;\n\n\t/**\n\t * Values of the dynamic date range.\n\t * @default []\n\t * @public\n\t */\n\tvalues?: Array<Date> | Array<number>;\n}\n\n/**\n * Represents a dynamic date range option used by the `ui5-dynamic-date-range` component.\n *\n * Represents a dynamic date range option used for handling dynamic date ranges.\n * This interface defines the structure and behavior required for implementing\n * dynamic date range options, including formatting, parsing, validation, and\n * conversion of date range values.\n *\n *  * Properties:\n * - `icon`: The icon associated with the dynamic date range option, typically used for UI representation.\n * - `operator`: A unique operator identifying the dynamic date range option.\n * - `text`: The display text for the dynamic date range option.\n * - `template` (optional): A JSX template for rendering the dynamic date range option.\n *\n * Methods:\n * - `format(value: DynamicDateRangeValue): string`: Formats the given dynamic date range value into a string representation.\n * - `parse(value: string): DynamicDateRangeValue | undefined`: Parses a string into a dynamic date range value.\n * - `toDates(value: DynamicDateRangeValue): Array<Date>`: Converts a dynamic date range value into an array of `Date` objects.\n * - `handleSelectionChange?(event: CustomEvent): DynamicDateRangeValue | undefined`: (Optional) Handles selection changes in the UI of the dynamic date range option.\n * - `isValidString(value: string): boolean`: Validates whether a given string is a valid representation of the dynamic date range value.\n *\n * @public\n * @since 2.11.0\n */\ninterface IDynamicDateRangeOption {\n\ticon: string;\n\toperator: string;\n\ttext: string;\n\tformat: (value: DynamicDateRangeValue) => string;\n\tparse: (value: string) => DynamicDateRangeValue | undefined;\n\ttoDates: (value: DynamicDateRangeValue) => Array<Date>;\n\thandleSelectionChange?: (event: CustomEvent, value: DynamicDateRangeValue | undefined) => DynamicDateRangeValue | undefined;\n\ttemplate?: JsxTemplate;\n\tisValidString: (value: string) => boolean;\n\tresetState?: () => void;\n}\n\n/**\n * @class\n *\n * ### Overview\n *\n * The `ui5-dynamic-date-range` component provides a flexible interface to define date ranges using a combination of absolute dates, relative intervals, and preset ranges (e.g., \"Today\", \"Yesterday\", etc.).\n * It allows users to select a date range from a predefined set of options or enter custom dates.\n *\n * ### Usage\n *\n * The component is typically used in scenarios where users need to filter data based on date ranges, such as in reports, dashboards, or data analysis tools.\n * It can be used with the predefined options or extended with custom options to suit specific requirements. You can create your own options by extending the `IDynamicDateRangeOption` interface.\n * Every option should be registered using the `DynamicDateRange.register` method.\n *\n * If needed, you can also create a range of dates based on specific option using the `toDates` method.\n *\n * ### Standard Options\n *\n * The component comes with a set of standard options, including:\n * - \"TODAY\" - Represents the current date. An example value is `{ operator: \"TODAY\"}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/Today.js\";`\n * - \"YESTERDAY\" - Represents the previous date. An example value is `{ operator: \"YESTERDAY\"}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/Yesterday.js\";`\n * - \"TOMORROW\" - Represents the next date. An example value is `{ operator: \"TOMORROW\"}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/Tomorrow.js\";`\n * - \"DATE\" - Represents a single date. An example value is `{ operator: \"DATE\", values: [new Date()]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/SingleDate.js\";`\n * - \"DATERANGE\" - Represents a range of dates. An example value is `{ operator: \"DATERANGE\", values: [new Date(), new Date()]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/DateRange.js\";`\n * - \"DATETIMERANGE\" - Represents a range of dates with times. An example value is `{ operator: \"DATETIMERANGE\", values: [new Date(), new Date()]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/DateTimeRange.js\";`\n * - \"FROMDATETIME\" - Represents a range from date and time. An example value is `{ operator: \"FROMDATETIME\", values: [new Date()]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/FromDateTime.js\";`\n * - \"TODATETIME\" - Represents a range to date and time. An example value is `{ operator: \"TODATETIME\", values: [new Date()]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/ToDateTime.js\";`\n * - \"LASTDAYS\" - Represents Last X Days from today. An example value is `{ operator: \"LASTDAYS\", values: [2]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/LastOptions.js\";`\n * - \"LASTWEEKS\" - Represents Last X Weeks from today. An example value is `{ operator: \"LASTWEEKS\", values: [3]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/LastOptions.js\";`\n * - \"LASTMONTHS\" - Represents Last X Months from today. An example value is `{ operator: \"LASTMONTHS\", values: [6]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/LastOptions.js\";`\n * - \"LASTQUARTERS\" - Represents Last X Quarters from today. An example value is `{ operator: \"LASTQUARTERS\", values: [2]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/LastOptions.js\";`\n * - \"LASTYEARS\" - Represents Last X Years from today. An example value is `{ operator: \"LASTYEARS\", values: [1]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/LastOptions.js\";`\n * - \"NEXTDAYS\" - Represents Next X Days from today. An example value is `{ operator: \"NEXTDAYS\", values: [2]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/NextOptions.js\";`\n * - \"NEXTWEEKS\" - Represents Next X Weeks from today. An example value is `{ operator: \"NEXTWEEKS\", values: [3]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/NextOptions.js\";`\n * - \"NEXTMONTHS\" - Represents Next X Months from today. An example value is `{ operator: \"NEXTMONTHS\", values: [6]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/NextOptions.js\";`\n * - \"NEXTQUARTERS\" - Represents Next X Quarters from today. An example value is `{ operator: \"NEXTQUARTERS\", values: [2]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/NextOptions.js\";`\n * - \"NEXTYEARS\" - Represents Next X Years from today. An example value is `{ operator: \"NEXTYEARS\", values: [1]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/NextOptions.js\";`\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/DynamicDateRange.js\";`\n *\n * @constructor\n * @extends UI5Element\n * @public\n * @since 2.11.0\n */\n@customElement({\n\ttag: \"ui5-dynamic-date-range\",\n\tlanguageAware: true,\n\tcldr: true,\n\ttemplate: DynamicDateRangeTemplate,\n\trenderer: jsxRenderer,\n\tstyles: [\n\t\tdynamicDateRangeCss,\n\t\tResponsivePopoverCommonCss,\n\t\tdynamicDateRangePopoverCss,\n\t],\n})\n\n/**\n * Fired when the input operation has finished by pressing Enter or on focusout or a value is selected in the popover.\n * @public\n */\n@event(\"change\", {\n\tbubbles: true,\n\tcancelable: true,\n})\nclass DynamicDateRange extends UI5Element {\n\teventDetails!: {\n\t\tchange: void,\n\t}\n\n\t@i18n(\"@ui5/webcomponents\")\n\tstatic i18nBundle: I18nBundle;\n\n\t/**\n\t * Defines the value object.\n\t * @default undefined\n\t * @public\n\t */\n\t@property({ noAttribute: true })\n\tvalue?: DynamicDateRangeValue;\n\n\t/**\n\t * Defines the options listed as a string, separated by commas and using capital case.\n\t * Example: \"TODAY, YESTERDAY, DATERANGE\"\n\t * @public\n\t * @default \"\"\n\t */\n\t@property({ type: String })\n\toptions = \"\";\n\n\t/**\n\t * Defines the open or closed state of the popover.\n\t * @private\n\t * @default false\n\t */\n\t@property({ type: Boolean })\n\topen = false;\n\n\t@property({ type: Object })\n\t_currentOption?: IDynamicDateRangeOption;\n\n\t_lastSelectedOption?: IDynamicDateRangeOption;\n\n\t@property({ type: Object })\n\tcurrentValue?: DynamicDateRangeValue;\n\n\toptionsObjects: Array<IDynamicDateRangeOption> = [];\n\n\tstatic optionsClasses: Map<string, new (operators?: Array<string>) => IDynamicDateRangeOption> = new Map();\n\n\t@query(\"[ui5-input]\")\n\t_input?: Input;\n\n\t@query(\"[ui5-list]\")\n\t_list?: List;\n\n\tonBeforeRendering() {\n\t\tthis.optionsObjects = this._createNormalizedOptions();\n\t\tthis._focusSelectedItem();\n\t}\n\n\tasync onAfterRendering() {\n\t\tawait renderFinished().then(() => {\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis._focusLastSelectedItem();\n\t\t\t}, 0);\n\t\t});\n\t}\n\n\t/**\n\t * Creates and normalizes options from the options string\n\t */\n\t_createNormalizedOptions(): Array<IDynamicDateRangeOption> {\n\t\tif (!this.optionsObjects.length) { // initialize options on first use\n\t\t\tconst optionKeys = this.splitOptions(this.options).filter(Boolean);\n\t\t\tconst createdOptions: Array<IDynamicDateRangeOption> = [];\n\t\t\tconst classToOperators = new Map<new(operators?: Array<string>) => IDynamicDateRangeOption, Array<string>>();\n\n\t\t\t// Group operators by their class\n\t\t\toptionKeys.forEach(option => {\n\t\t\t\tconst OptionClass = DynamicDateRange.getOptionClass(option);\n\t\t\t\tif (OptionClass) {\n\t\t\t\t\tconst operators = classToOperators.get(OptionClass) || [];\n\t\t\t\t\toperators.push(option);\n\t\t\t\t\tclassToOperators.set(OptionClass, operators);\n\t\t\t\t}\n\t\t\t});\n\n\t\t\tclassToOperators.forEach((operators, OptionClass) => {\n\t\t\t\tcreatedOptions.push(new OptionClass(operators));\n\t\t\t});\n\n\t\t\treturn createdOptions;\n\t\t}\n\t\treturn this.optionsObjects;\n\t}\n\n\tsplitOptions(options: string): Array<string> {\n\t\treturn options.split(\",\").map(s => s.trim());\n\t}\n\n\t_focusSelectedItem() {\n\t\tif (!this.value) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst listItem = this._list?.items.find(item => (item as ListItem).selected === true);\n\t\tif (listItem) {\n\t\t\tthis._list?.focusItem(listItem as ListItem);\n\t\t}\n\t}\n\n\t_focusLastSelectedItem() {\n\t\tif (!this._lastSelectedOption) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Ensure the list exists and has items\n\t\tif (!this._list || !this._list.items.length) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Find the index of the last selected option in the options array\n\t\tconst optionIndex = this.optionsObjects.findIndex(option => option.operator === this._lastSelectedOption?.operator);\n\n\t\tif (optionIndex >= 0 && optionIndex < this._list.items.length) {\n\t\t\tconst listItem = this._list.items[optionIndex];\n\t\t\tthis._list.focusItem(listItem as ListItem);\n\t\t}\n\t}\n\n\t/**\n\t * Defines whether the value help icon is hidden\n\t * @private\n\t */\n\tget _iconMode() {\n\t\treturn isDesktop() ? IconMode.Decorative : IconMode.Interactive;\n\t}\n\n\tget tooltipNavigationIcon() {\n\t\treturn DynamicDateRange.i18nBundle.getText(DYNAMIC_DATE_RANGE_NAVIGATION_ICON_TOOLTIP);\n\t}\n\n\tget popoverAccessibleName() {\n\t\treturn DynamicDateRange.i18nBundle.getText(DYNAMIC_DATE_RANGE_POPOVER_ACCESSIBLE_NAME);\n\t}\n\n\t_togglePicker(): void {\n\t\tif (this.open) {\n\t\t\tthis._close();\n\t\t} else {\n\t\t\tthis.open = true;\n\t\t}\n\t}\n\n\t_selectOption(e: CustomEvent): void {\n\t\tthis._currentOption = this.optionsObjects.find(option => option.text === e.detail.item.textContent);\n\t\tthis._lastSelectedOption = this._currentOption;\n\n\t\tif (!this._currentOption?.template) {\n\t\t\tthis.currentValue = this._currentOption?.parse(this._currentOption.text);\n\t\t\tthis._submitValue();\n\t\t} else if (!this.currentValue || this.currentValue.operator !== this._currentOption.operator) {\n\t\t\tthis.currentValue = undefined;\n\t\t}\n\n\t\tif (this._currentOption?.operator === this.value?.operator) {\n\t\t\tthis.currentValue = this.value;\n\t\t}\n\t}\n\n\tgetOption(operator?: string) {\n\t\tif (!operator) {\n\t\t\treturn this._currentOption;\n\t\t}\n\n\t\tconst resultOption = this.optionsObjects.find(option => option.operator === operator);\n\n\t\tif (!resultOption) {\n\t\t\tconst OptionClass = DynamicDateRange.getOptionClass(operator);\n\n\t\t\tif (OptionClass) {\n\t\t\t\tconst existingOption = this.optionsObjects.find(option => option.constructor === OptionClass);\n\n\t\t\t\tif (existingOption) {\n\t\t\t\t\texistingOption.operator = operator;\n\t\t\t\t\treturn existingOption;\n\t\t\t\t}\n\n\t\t\t\tconst optionObject = new OptionClass();\n\t\t\t\tthis.optionsObjects.push(optionObject);\n\n\t\t\t\treturn optionObject;\n\t\t\t}\n\t\t}\n\n\t\treturn resultOption;\n\t}\n\n\tonInputChange(e: Event): void {\n\t\tconst value = (e.target as Input)?.value;\n\n\t\tif (!value) {\n\t\t\tthis.value = undefined;\n\t\t\tthis.fireDecoratorEvent(\"change\");\n\n\t\t\treturn;\n\t\t}\n\n\t\tconst currentOption = this.optionsObjects.find(option => option.isValidString(value));\n\n\t\tthis.value = currentOption ? this.getOption(currentOption.operator)?.parse(value) : undefined;\n\n\t\tif (this.value) {\n\t\t\tthis.fireDecoratorEvent(\"change\");\n\t\t}\n\t}\n\n\tonButtonBackClick() {\n\t\tthis._currentOption = undefined;\n\t}\n\n\t/**\n\t * Converts a `value` into concrete `startDate` and `endDate` JavaScript `Date` objects.\n\t *\n\t * @public\n\t * @param value The option to convert into an array of date ranges\n\t * @returns An array of two `Date` objects representing the start and end dates.\n\t */\n\ttoDates(value: DynamicDateRangeValue): Array<Date> {\n\t\treturn this.getOption(value.operator)?.toDates(value) as Array<Date>;\n\t}\n\n\tget _hasCurrentOptionTemplate(): boolean {\n\t\treturn !!this._currentOption?.template;\n\t}\n\n\t_submitValue() {\n\t\tconst valueToSubmit = this.currentValue || { operator: this._currentOption?.operator || \"\", values: [] };\n\t\tconst displayString = this._currentOption?.format(valueToSubmit) || \"\";\n\n\t\tif (this._input) {\n\t\t\tthis._input.value = displayString;\n\t\t}\n\n\t\tif (!this._currentOption || !valueToSubmit.operator) {\n\t\t\tthis.value = undefined;\n\t\t} else if (this._currentOption.isValidString(displayString)) {\n\t\t\tthis.value = valueToSubmit;\n\t\t\tthis.fireDecoratorEvent(\"change\");\n\t\t} else {\n\t\t\tthis.value = undefined;\n\t\t}\n\n\t\tthis._currentOption?.resetState?.();\n\n\t\tthis._currentOption = undefined;\n\t\tthis.open = false;\n\t}\n\n\t_close() {\n\t\tthis._currentOption?.resetState?.();\n\n\t\tthis._currentOption = undefined;\n\t\tthis.open = false;\n\t}\n\n\tonPopoverBeforeOpen() {\n\t\tif (this.currentValue !== this.value) {\n\t\t\tthis.currentValue = this.value;\n\t\t}\n\t}\n\n\tonPopoverClose() {\n\t\tthis._close();\n\t}\n\n\tget currentValueText() {\n\t\tif (this.currentValue) {\n\t\t\tconst correctOption = this.getOption(this.currentValue.operator);\n\t\t\tif (correctOption) {\n\t\t\t\tconst dates = correctOption.toDates(this.currentValue);\n\t\t\t\tconst displayValue = { ...this.currentValue, values: dates };\n\t\t\t\tconst displayText = correctOption.format(displayValue);\n\t\t\t\treturn `${DynamicDateRange.i18nBundle.getText(DYNAMIC_DATE_RANGE_SELECTED_TEXT)}: ${displayText}`;\n\t\t\t}\n\t\t}\n\n\t\tif (this._currentOption) {\n\t\t\tconst emptyValue = { operator: this._currentOption.operator, values: [] };\n\t\t\tconst displayText = this._currentOption.format(emptyValue);\n\t\t\tif (displayText && displayText.trim()) {\n\t\t\t\treturn `${DynamicDateRange.i18nBundle.getText(DYNAMIC_DATE_RANGE_SELECTED_TEXT)}: ${displayText}`;\n\t\t\t}\n\t\t}\n\n\t\treturn DynamicDateRange.i18nBundle.getText(DYNAMIC_DATE_RANGE_EMPTY_SELECTED_TEXT);\n\t}\n\n\thandleSelectionChange(e: CustomEvent) {\n\t\tconst value = this._currentOption?.handleSelectionChange?.(e, this.currentValue) as DynamicDateRangeValue;\n\n\t\tthis.currentValue = JSON.parse(JSON.stringify(value)); // deep clone\n\t\tif (this.currentValue) {\n\t\t\tthis.currentValue.values = value?.values;\n\t\t}\n\n\t\t// Update _currentOption if the operator changed\n\t\tif (this.currentValue && this.currentValue.operator !== this._currentOption?.operator) {\n\t\t\tthis._currentOption = this.getOption(this.currentValue.operator);\n\t\t}\n\t}\n\n\tonInputKeyDown(e: KeyboardEvent) {\n\t\tif (isShow(e)) {\n\t\t\te.preventDefault();\n\t\t\tif (this.open) {\n\t\t\t\tif (!isF4(e)) {\n\t\t\t\t\tthis._toggleAndFocusInput();\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tthis._toggleAndFocusInput();\n\t\t\t}\n\t\t}\n\t}\n\n\t_toggleAndFocusInput() {\n\t\tthis._togglePicker();\n\t\tif (this.open) {\n\t\t\tthis._input?.focus();\n\t\t}\n\t}\n\n\tonKeyDownPopover(e: KeyboardEvent) {\n\t\tif (isShow(e)) {\n\t\t\te.preventDefault(); // Prevent scroll on Alt/Option + Arrow Up/Down\n\t\t\tthis._toggleAndFocusInput();\n\t\t}\n\t}\n\n\t/**\n\t * Registers a new dynamic date range option with a unique key.\n\t *\n\t * Example:\n\t * DynamicDateRange.register(\"LASTWEEK\", LastWeek);\n\t */\n\tstatic register(operator: string, option: new () => IDynamicDateRangeOption): void {\n\t\toperator = operator.toUpperCase();\n\n\t\tif (!this.optionsClasses.has(operator)) {\n\t\t\tthis.optionsClasses.set(operator, option);\n\t\t}\n\t}\n\n\tstatic getOptionClass(operator: string): (new () => IDynamicDateRangeOption) | undefined {\n\t\treturn this.optionsClasses.get(operator);\n\t}\n}\n\nDynamicDateRange.define();\n\nexport default DynamicDateRange;\n\nexport type {\n\tDynamicDateRangeValue,\n\tIDynamicDateRangeOption,\n};\n"]}

package/dist/DynamicDateRangeInputTemplate.d.ts

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

package/dist/DynamicDateRangeInputTemplate.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "@ui5/webcomponents-base/jsx-runtime";
+import Icon from "./Icon.js";
+import Input from "./Input.js";
+import appointment from "@ui5/webcomponents-icons/dist/appointment-2.js";
+export default function DynamicDateRangeInputTemplate() {
+    return (_jsx("div", { class: "ui5-dynamic-date-range-root", children: _jsx(Input, { "data-sap-focus-ref": true, id: `${this._id}-inner`, class: "ui5-dynamic-date-range-input", value: this.value && this.getOption(this.value?.operator)?.format(this.value), onChange: this.onInputChange, onKeyDown: this.onInputKeyDown, children: _jsx(Icon, { id: `${this._id}-value-help`, slot: "icon", name: appointment, tabindex: -1, mode: this._iconMode, onClick: this._togglePicker, class: {
+                    "inputIcon": true,
+                    "inputIcon--pressed": this.open,
+                } }) }) }));
+}
+//# sourceMappingURL=DynamicDateRangeInputTemplate.js.map

package/dist/DynamicDateRangeInputTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicDateRangeInputTemplate.js","sourceRoot":"","sources":["../src/DynamicDateRangeInputTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,KAAK,MAAM,YAAY,CAAC;AAC/B,OAAO,WAAW,MAAM,gDAAgD,CAAC;AAEzE,MAAM,CAAC,OAAO,UAAU,6BAA6B;IACpD,OAAO,CACN,cAAK,KAAK,EAAC,6BAA6B,YACvC,KAAC,KAAK,gCAEL,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,QAAQ,EACvB,KAAK,EAAC,8BAA8B,EACpC,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,EAAE,QAAQ,CAAC,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAC7E,QAAQ,EAAE,IAAI,CAAC,aAAa,EAC5B,SAAS,EAAE,IAAI,CAAC,cAAc,YAE9B,KAAC,IAAI,IACJ,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,aAAa,EAC5B,IAAI,EAAC,MAAM,EACX,IAAI,EAAE,WAAW,EACjB,QAAQ,EAAE,CAAC,CAAC,EACZ,IAAI,EAAE,IAAI,CAAC,SAAS,EACpB,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,KAAK,EAAE;oBACN,WAAW,EAAE,IAAI;oBACjB,oBAAoB,EAAE,IAAI,CAAC,IAAI;iBAC/B,GACA,GAEK,GACH,CACN,CAAC;AACH,CAAC","sourcesContent":["import type DynamicDateRange from \"./DynamicDateRange.js\";\nimport Icon from \"./Icon.js\";\nimport Input from \"./Input.js\";\nimport appointment from \"@ui5/webcomponents-icons/dist/appointment-2.js\";\n\nexport default function DynamicDateRangeInputTemplate(this: DynamicDateRange) {\n\treturn (\n\t\t<div class=\"ui5-dynamic-date-range-root\">\n\t\t\t<Input\n\t\t\t\tdata-sap-focus-ref\n\t\t\t\tid={`${this._id}-inner`}\n\t\t\t\tclass=\"ui5-dynamic-date-range-input\"\n\t\t\t\tvalue={this.value && this.getOption(this.value?.operator)?.format(this.value)}\n\t\t\t\tonChange={this.onInputChange}\n\t\t\t\tonKeyDown={this.onInputKeyDown}\n\t\t\t>\n\t\t\t\t<Icon\n\t\t\t\t\tid={`${this._id}-value-help`}\n\t\t\t\t\tslot=\"icon\"\n\t\t\t\t\tname={appointment}\n\t\t\t\t\ttabindex={-1}\n\t\t\t\t\tmode={this._iconMode}\n\t\t\t\t\tonClick={this._togglePicker}\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t\"inputIcon\": true,\n\t\t\t\t\t\t\"inputIcon--pressed\": this.open,\n\t\t\t\t\t}}\n\t\t\t\t/>\n\n\t\t\t</Input>\n\t\t</div>\n\t);\n}\n"]}

package/dist/DynamicDateRangePopoverTemplate.d.ts

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

package/dist/DynamicDateRangePopoverTemplate.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
+import ResponsivePopover from "./ResponsivePopover.js";
+import List from "./List.js";
+import ListItemStandard from "./ListItemStandard.js";
+import Button from "./Button.js";
+import Title from "./Title.js";
+import slimArrowLeft from "@ui5/webcomponents-icons/dist/slim-arrow-left.js";
+import ListItemType from "./types/ListItemType.js";
+export default function DynamicDateRangePopoverTemplate() {
+    return (_jsxs(ResponsivePopover, { id: `${this._id}-responsive-popover`, opener: this, open: this.open, allowTargetOverlap: true, placement: "Bottom", horizontalAlign: "Start", hideArrow: true, _hideHeader: true, onClose: this.onPopoverClose, onBeforeOpen: this.onPopoverBeforeOpen, onKeyDown: this.onKeyDownPopover, accessibleName: this.popoverAccessibleName, children: [this._hasCurrentOptionTemplate &&
+                _jsxs("div", { slot: "header", class: "ui5-ddr-header", children: [_jsx(Button, { iconOnly: true, icon: slimArrowLeft, design: "Transparent", onClick: this.onButtonBackClick, tooltip: this.tooltipNavigationIcon }), _jsx(Title, { children: this._currentOption?.text })] }), !this._hasCurrentOptionTemplate ? _jsx("div", { class: "ui5-dynamic-date-range-options", children: _jsx(List, { class: "ui5-dynamic-date-range-options-list", separators: "None", selectionMode: "Single", onItemClick: this._selectOption, children: this.optionsObjects.map(option => (_jsx(ListItemStandard, { selected: option.operator === this.value?.operator, iconEnd: true, icon: option.icon, wrappingType: "Normal", type: option.template ? ListItemType.Navigation : ListItemType.Active, children: option.text }))) }) })
+                :
+                    _jsxs("div", { class: "ui5-dynamic-date-range-option-container", children: [this._currentOption?.template?.call(this), _jsx("div", { class: "ui5-ddr-current-value", children: this.currentValueText })] }), this._hasCurrentOptionTemplate &&
+                _jsxs("div", { slot: "footer", children: [_jsx(Button, { design: "Emphasized", onClick: this._submitValue, children: "Submit" }), _jsx(Button, { design: "Transparent", onClick: this._close, children: "Close" })] })] }));
+}
+//# sourceMappingURL=DynamicDateRangePopoverTemplate.js.map

package/dist/DynamicDateRangePopoverTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicDateRangePopoverTemplate.js","sourceRoot":"","sources":["../src/DynamicDateRangePopoverTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,iBAAiB,MAAM,wBAAwB,CAAC;AACvD,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,gBAAgB,MAAM,uBAAuB,CAAC;AACrD,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,KAAK,MAAM,YAAY,CAAC;AAC/B,OAAO,aAAa,MAAM,kDAAkD,CAAC;AAC7E,OAAO,YAAY,MAAM,yBAAyB,CAAC;AAEnD,MAAM,CAAC,OAAO,UAAU,+BAA+B;IACtD,OAAO,CACN,MAAC,iBAAiB,IACjB,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,qBAAqB,EACpC,MAAM,EAAE,IAAI,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,kBAAkB,QAClB,SAAS,EAAC,QAAQ,EAClB,eAAe,EAAC,OAAO,EACvB,SAAS,EAAE,IAAI,EACf,WAAW,EAAE,IAAI,EACjB,OAAO,EAAE,IAAI,CAAC,cAAc,EAC5B,YAAY,EAAE,IAAI,CAAC,mBAAmB,EACtC,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAChC,cAAc,EAAE,IAAI,CAAC,qBAAqB,aAEzC,IAAI,CAAC,yBAAyB;gBAC9B,eAAK,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,gBAAgB,aACxC,KAAC,MAAM,IACN,QAAQ,EAAE,IAAI,EACd,IAAI,EAAE,aAAa,EACnB,MAAM,EAAC,aAAa,EACpB,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAC/B,OAAO,EAAE,IAAI,CAAC,qBAAqB,GAC3B,EACT,KAAC,KAAK,cAAE,IAAI,CAAC,cAAc,EAAE,IAAI,GAAS,IACrC,EAEN,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAC,CAAC,cAAK,KAAK,EAAC,gCAAgC,YAC7E,KAAC,IAAI,IACJ,KAAK,EAAC,qCAAqC,EAC3C,UAAU,EAAC,MAAM,EACjB,aAAa,EAAC,QAAQ,EACtB,WAAW,EAAE,IAAI,CAAC,aAAa,YAE9B,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAClC,KAAC,gBAAgB,IAChB,QAAQ,EAAE,MAAM,CAAC,QAAQ,KAAK,IAAI,CAAC,KAAK,EAAE,QAAQ,EAClD,OAAO,EAAE,IAAI,EACb,IAAI,EAAE,MAAM,CAAC,IAAI,EACjB,YAAY,EAAC,QAAQ,EACrB,IAAI,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,MAAM,YAEpE,MAAM,CAAC,IAAI,GACM,CACnB,CAAC,GACI,GACF;gBACL,CAAC;oBACD,eAAK,KAAK,EAAC,yCAAyC,aAClD,IAAI,CAAC,cAAc,EAAE,QAAQ,EAAE,IAAI,CAAC,IAAI,CAAC,EAC1C,cAAK,KAAK,EAAC,uBAAuB,YAAE,IAAI,CAAC,gBAAgB,GAAO,IAC3D,EAEN,IAAI,CAAC,yBAAyB;gBAC9B,eAAK,IAAI,EAAC,QAAQ,aACjB,KAAC,MAAM,IACN,MAAM,EAAC,YAAY,EACnB,OAAO,EAAE,IAAI,CAAC,YAAY,uBACX,EAChB,KAAC,MAAM,IACN,MAAM,EAAC,aAAa,EACpB,OAAO,EAAE,IAAI,CAAC,MAAM,sBACN,IACV,IAEY,CACpB,CAAC;AACH,CAAC","sourcesContent":["import type DynamicDateRange from \"./DynamicDateRange.js\";\nimport ResponsivePopover from \"./ResponsivePopover.js\";\nimport List from \"./List.js\";\nimport ListItemStandard from \"./ListItemStandard.js\";\nimport Button from \"./Button.js\";\nimport Title from \"./Title.js\";\nimport slimArrowLeft from \"@ui5/webcomponents-icons/dist/slim-arrow-left.js\";\nimport ListItemType from \"./types/ListItemType.js\";\n\nexport default function DynamicDateRangePopoverTemplate(this: DynamicDateRange) {\n\treturn (\n\t\t<ResponsivePopover\n\t\t\tid={`${this._id}-responsive-popover`}\n\t\t\topener={this}\n\t\t\topen={this.open}\n\t\t\tallowTargetOverlap\n\t\t\tplacement=\"Bottom\"\n\t\t\thorizontalAlign=\"Start\"\n\t\t\thideArrow={true}\n\t\t\t_hideHeader={true}\n\t\t\tonClose={this.onPopoverClose}\n\t\t\tonBeforeOpen={this.onPopoverBeforeOpen}\n\t\t\tonKeyDown={this.onKeyDownPopover}\n\t\t\taccessibleName={this.popoverAccessibleName}\n\t\t>\n\t\t\t{this._hasCurrentOptionTemplate &&\n\t\t\t\t<div slot=\"header\" class=\"ui5-ddr-header\">\n\t\t\t\t\t<Button\n\t\t\t\t\t\ticonOnly={true}\n\t\t\t\t\t\ticon={slimArrowLeft}\n\t\t\t\t\t\tdesign=\"Transparent\"\n\t\t\t\t\t\tonClick={this.onButtonBackClick}\n\t\t\t\t\t\ttooltip={this.tooltipNavigationIcon}>\n\t\t\t\t\t</Button>\n\t\t\t\t\t<Title>{this._currentOption?.text}</Title>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t{!this._hasCurrentOptionTemplate ? <div class=\"ui5-dynamic-date-range-options\">\n\t\t\t\t<List\n\t\t\t\t\tclass=\"ui5-dynamic-date-range-options-list\"\n\t\t\t\t\tseparators=\"None\"\n\t\t\t\t\tselectionMode=\"Single\"\n\t\t\t\t\tonItemClick={this._selectOption}\n\t\t\t\t>\n\t\t\t\t\t{this.optionsObjects.map(option => (\n\t\t\t\t\t\t<ListItemStandard\n\t\t\t\t\t\t\tselected={option.operator === this.value?.operator}\n\t\t\t\t\t\t\ticonEnd={true}\n\t\t\t\t\t\t\ticon={option.icon}\n\t\t\t\t\t\t\twrappingType=\"Normal\"\n\t\t\t\t\t\t\ttype={option.template ? ListItemType.Navigation : ListItemType.Active}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{option.text}\n\t\t\t\t\t\t</ListItemStandard>\n\t\t\t\t\t))}\n\t\t\t\t</List>\n\t\t\t</div>\n\t\t\t\t:\n\t\t\t\t<div class=\"ui5-dynamic-date-range-option-container\">\n\t\t\t\t\t{this._currentOption?.template?.call(this)}\n\t\t\t\t\t<div class=\"ui5-ddr-current-value\">{this.currentValueText}</div>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t{this._hasCurrentOptionTemplate &&\n\t\t\t\t<div slot=\"footer\">\n\t\t\t\t\t<Button\n\t\t\t\t\t\tdesign=\"Emphasized\"\n\t\t\t\t\t\tonClick={this._submitValue}\n\t\t\t\t\t>Submit</Button>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tdesign=\"Transparent\"\n\t\t\t\t\t\tonClick={this._close}\n\t\t\t\t\t>Close</Button>\n\t\t\t\t</div>\n\t\t\t}\n\t\t</ResponsivePopover>\n\t);\n}\n"]}

package/dist/DynamicDateRangeTemplate.d.ts

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

package/dist/DynamicDateRangeTemplate.js

@@ -0,0 +1,9 @@
+import DynamicDateRangeInputTemplate from "./DynamicDateRangeInputTemplate.js";
+import DynamicDateRangePopoverTemplate from "./DynamicDateRangePopoverTemplate.js";
+export default function DynamicDateRangeTemplate() {
+    return [
+        DynamicDateRangeInputTemplate.call(this),
+        DynamicDateRangePopoverTemplate.call(this),
+    ];
+}
+//# sourceMappingURL=DynamicDateRangeTemplate.js.map

package/dist/DynamicDateRangeTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicDateRangeTemplate.js","sourceRoot":"","sources":["../src/DynamicDateRangeTemplate.tsx"],"names":[],"mappings":"AAAA,OAAO,6BAA6B,MAAM,oCAAoC,CAAC;AAC/E,OAAO,+BAA+B,MAAM,sCAAsC,CAAC;AAInF,MAAM,CAAC,OAAO,UAAU,wBAAwB;IAC/C,OAAO;QACN,6BAA6B,CAAC,IAAI,CAAC,IAAI,CAAC;QACxC,+BAA+B,CAAC,IAAI,CAAC,IAAI,CAAC;KAC1C,CAAC;AACH,CAAC","sourcesContent":["import DynamicDateRangeInputTemplate from \"./DynamicDateRangeInputTemplate.js\";\nimport DynamicDateRangePopoverTemplate from \"./DynamicDateRangePopoverTemplate.js\";\n\nimport type DynamicDateRange from \"./DynamicDateRange.js\";\n\nexport default function DynamicDateRangeTemplate(this: DynamicDateRange) {\n\treturn [\n\t\tDynamicDateRangeInputTemplate.call(this),\n\t\tDynamicDateRangePopoverTemplate.call(this),\n\t];\n}\n"]}