@ui5/webcomponents 2.11.0-rc.2 → 2.11.0-rc.4

package/dist/DynamicDateRange.js

@@ -0,0 +1,291 @@
+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 { 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, } 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";
+/**
+ * Fired when the input operation has finished by pressing Enter or on focusout or a value is selected in the popover.
+ * @public
+ */
+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() {
+        const optionKeys = this.options.split(",").map(option => option.trim());
+        this.optionsObjects = optionKeys.map(option => {
+            const OptionClass = DynamicDateRange_1.getOptionClass(option);
+            let optionObject;
+            if (OptionClass) {
+                optionObject = new OptionClass();
+            }
+            return optionObject;
+        }).filter(optionObject => optionObject !== undefined);
+        if (this.value) {
+            const selectedItem = this._list?.items.find(item => {
+                const option = this.optionsObjects.find(x => x.operator === this.value?.operator);
+                return option && item.textContent === option.text;
+            });
+            this._list?.focusItem(selectedItem);
+        }
+    }
+    get _optionsTitles() {
+        return this.optionsObjects.map(option => option.text);
+    }
+    /**
+     * 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);
+    }
+    _togglePicker() {
+        if (this.open) {
+            this.open = false;
+        }
+        else {
+            this.open = true;
+        }
+    }
+    _selectOption(e) {
+        this._currentOption = this.optionsObjects.find(option => option.text === e.detail.item.textContent);
+        if (!this._currentOption?.template) {
+            this.currentValue = this._currentOption?.parse(this._currentOption.text);
+            this._submitValue();
+        }
+        if (this._currentOption?.operator === this.value?.operator) {
+            this.currentValue = this.value;
+        }
+    }
+    getOption(operator) {
+        const resultOption = this.optionsObjects.find(option => option.operator === operator);
+        if (!resultOption) {
+            const OptionClass = DynamicDateRange_1.getOptionClass(operator);
+            if (OptionClass) {
+                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", { value: undefined });
+            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", { value: this.value });
+        }
+    }
+    onButtonBackClick() {
+        this._currentOption = undefined;
+    }
+    /**
+     * Converts a `value` into concrete `startDate` and `endDate` JavaScript `Date` objects.
+     *
+     * @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 stringValue = this._currentOption?.format(this.currentValue);
+        if (this._input) {
+            this._input.value = stringValue;
+        }
+        if (this._currentOption?.isValidString(stringValue)) {
+            this.value = this.currentValue;
+            this.fireDecoratorEvent("change", { value: this.value });
+        }
+        else {
+            this.value = undefined;
+        }
+        this._currentOption = undefined;
+        this.open = false;
+    }
+    _close() {
+        this._currentOption = undefined;
+        this.open = false;
+    }
+    onPopoverOpen() {
+        if (this.currentValue !== this.value) {
+            this.currentValue = this.value;
+        }
+    }
+    onPopoverClose() {
+        this._close();
+    }
+    get currentValueText() {
+        if (this.currentValue && this.currentValue.operator === this._currentOption?.operator) {
+            return `${DynamicDateRange_1.i18nBundle.getText(DYNAMIC_DATE_RANGE_SELECTED_TEXT)}: ${this._currentOption?.format(this.currentValue)}`;
+        }
+        return DynamicDateRange_1.i18nBundle.getText(DYNAMIC_DATE_RANGE_EMPTY_SELECTED_TEXT);
+    }
+    handleSelectionChange(e) {
+        this.currentValue = this._currentOption?.handleSelectionChange && this._currentOption?.handleSelectionChange(e);
+    }
+    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([
+    event("change", {
+        bubbles: true,
+        cancelable: true,
+    })
+    /**
+     * @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";`
+     *
+     * ### ES6 Module Import
+     *
+     * `import "@ui5/webcomponents/dist/DynamicDateRange.js";`
+     *
+     * @constructor
+     * @extends UI5Element
+     * @public
+     */
+    ,
+    customElement({
+        tag: "ui5-dynamic-date-range",
+        languageAware: true,
+        template: DynamicDateRangeTemplate,
+        renderer: jsxRenderer,
+        styles: [
+            dynamicDateRangeCss,
+            ResponsivePopoverCommonCss,
+            dynamicDateRangePopoverCss,
+        ],
+    })
+], 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 type { JsxTemplate } from \"@ui5/webcomponents-base\";\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 {\n\tDYNAMIC_DATE_RANGE_SELECTED_TEXT,\n\tDYNAMIC_DATE_RANGE_EMPTY_SELECTED_TEXT,\n\tDYNAMIC_DATE_RANGE_NAVIGATION_ICON_TOOLTIP,\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\";\nimport type List from \"./List.js\";\nimport type ListItem from \"./ListItem.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    /**\n     * Values of the dynamic date range.\n     * @default []\n     * @public\n     */\n    values?: Date[] | number[];\n}\n\ntype DynamicDateRangeChangeEventDetail = {\n\tvalue: DynamicDateRangeValue | undefined,\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): 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.10.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) => Date[];\n\thandleSelectionChange?: (event: CustomEvent) => DynamicDateRangeValue | undefined;\n\ttemplate?: JsxTemplate;\n\tisValidString: (value: string) => boolean;\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})\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 *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/DynamicDateRange.js\";`\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n\n@customElement({\n\ttag: \"ui5-dynamic-date-range\",\n\tlanguageAware: true,\n\ttemplate: DynamicDateRangeTemplate,\n\trenderer: jsxRenderer,\n\tstyles: [\n\t\tdynamicDateRangeCss,\n\t\tResponsivePopoverCommonCss,\n\t\tdynamicDateRangePopoverCss,\n\t],\n})\n\nclass DynamicDateRange extends UI5Element {\n\teventDetails!: {\n\t\tchange: DynamicDateRangeChangeEventDetail,\n\t}\n\n    @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    @property({ type: Object })\n    _currentOption?: IDynamicDateRangeOption;\n\n\t@property({ type: Object })\n    currentValue?: DynamicDateRangeValue;\n\n\toptionsObjects: IDynamicDateRangeOption[] = [];\n\n\tstatic optionsClasses: Map<string, new () => 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\tconst optionKeys = this.options.split(\",\").map(option => option.trim());\n\n\t\tthis.optionsObjects = optionKeys.map(option => {\n\t\t\tconst OptionClass = DynamicDateRange.getOptionClass(option);\n\t\t\tlet optionObject;\n\n\t\t\tif (OptionClass) {\n\t\t\t\toptionObject = new OptionClass();\n\t\t\t}\n\n\t\t\treturn optionObject;\n\t\t}).filter(optionObject => optionObject !== undefined);\n\n\t\tif (this.value) {\n\t\t\tconst selectedItem = this._list?.items.find(item => {\n\t\t\t\tconst option = this.optionsObjects.find(x => x.operator === this.value?.operator);\n\t\t\t\treturn option && item.textContent === option.text;\n\t\t\t}) as ListItem;\n\n\t\t\tthis._list?.focusItem(selectedItem);\n\t\t}\n\t}\n\n\tget _optionsTitles(): Array<string> {\n\t\treturn this.optionsObjects.map(option => option.text);\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\t_togglePicker(): void {\n\t\tif (this.open) {\n\t\t\tthis.open = false;\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\tif (!this._currentOption?.template) {\n\t\t\tthis.currentValue = this._currentOption?.parse(this._currentOption.text);\n\t\t\tthis._submitValue();\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\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 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\", { value: undefined });\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\", {\tvalue: this.value });\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 * @returns An array of two `Date` objects representing the start and end dates.\n\t */\n\ttoDates(value: DynamicDateRangeValue): Date[] {\n\t\treturn this.getOption(value.operator)?.toDates(value) as Date[];\n\t}\n\n\tget _hasCurrentOptionTemplate(): boolean {\n\t\treturn !!this._currentOption?.template;\n\t}\n\n\t_submitValue() {\n\t\tconst stringValue = this._currentOption?.format(this.currentValue!) as string;\n\n\t\tif (this._input) {\n\t\t\tthis._input.value = stringValue;\n\t\t}\n\n\t\tif (this._currentOption?.isValidString(stringValue)) {\n\t\t\tthis.value = this.currentValue as DynamicDateRangeValue;\n\t\t\tthis.fireDecoratorEvent(\"change\", { value: this.value });\n\t\t} else {\n\t\t\tthis.value = undefined;\n\t\t}\n\n\t\tthis._currentOption = undefined;\n\t\tthis.open = false;\n\t}\n\n\t_close() {\n\t\tthis._currentOption = undefined;\n\t\tthis.open = false;\n\t}\n\n\tonPopoverOpen() {\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 && this.currentValue.operator === this._currentOption?.operator) {\n\t\t\treturn `${DynamicDateRange.i18nBundle.getText(DYNAMIC_DATE_RANGE_SELECTED_TEXT)}: ${this._currentOption?.format(this.currentValue)}`;\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\tthis.currentValue = this._currentOption?.handleSelectionChange && this._currentOption?.handleSelectionChange(e) as DynamicDateRangeValue;\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\tDynamicDateRangeChangeEventDetail,\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,13 @@
+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", style: {
+            width: "100%",
+        }, 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,cACC,KAAK,EAAC,6BAA6B,EACnC,KAAK,EAAE;YACN,KAAK,EAAE,MAAM;SACb,YAED,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\n\t\t\tclass=\"ui5-dynamic-date-range-root\"\n\t\t\tstyle={{\n\t\t\t\twidth: \"100%\",\n\t\t\t}}\n\t\t>\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,18 @@
+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, onOpen: this.onPopoverOpen, onKeyDown: this.onKeyDownPopover, 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 => {
+                        return _jsx(ListItemStandard, { selected: option.operator === this.value?.operator, iconEnd: true, icon: option.icon, type: !option.template ? ListItemType.Active : ListItemType.Navigation, 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,MAAM,EAAE,IAAI,CAAC,aAAa,EAC1B,SAAS,EAAE,IAAI,CAAC,gBAAgB,aAE/B,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;wBACjC,OAAO,KAAC,gBAAgB,IACvB,QAAQ,EAAE,MAAM,CAAC,QAAQ,KAAK,IAAI,CAAC,KAAK,EAAE,QAAQ,EAClD,OAAO,EAAE,IAAI,EACb,IAAI,EAAE,MAAM,CAAC,IAAI,EACjB,IAAI,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,UAAU,YACrE,MAAM,CAAC,IAAI,GACM,CAAC;oBACrB,CAAC,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\tonOpen={this.onPopoverOpen}\n\t\t\tonKeyDown={this.onKeyDownPopover}\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\treturn <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\ttype={!option.template ? ListItemType.Active : ListItemType.Navigation}>\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"]}

package/dist/Icon.js

@@ -251,8 +251,8 @@ Icon = __decorate([
      * Fired on mouseup, `SPACE` and `ENTER`.
      * - on mouse click, the icon fires native `click` event
      * - on `SPACE` and `ENTER`, the icon fires custom `click` event
-     * @private
-     * @since 1.0.0-rc.8
+     * @public
+     * @since 2.11.0
      */
     ,
     event("click", {

package/dist/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../src/Icon.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport jsxRender from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport type { IconData } from \"@ui5/webcomponents-base/dist/asset-registries/Icons.js\";\nimport { getIconData, getIconDataSync } from \"@ui5/webcomponents-base/dist/asset-registries/Icons.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type { I18nText } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport { isSpace, isEnter } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport executeTemplate from \"@ui5/webcomponents-base/dist/renderer/executeTemplate.js\";\nimport IconTemplate from \"./IconTemplate.js\";\nimport type IconDesign from \"./types/IconDesign.js\";\nimport IconMode from \"./types/IconMode.js\";\n\n// Styles\nimport iconCss from \"./generated/themes/Icon.css.js\";\n\n/**\n * Interface for components that represent an icon, usable in numerous higher-order components\n * @public\n */\ninterface IIcon extends HTMLElement { }\n\nconst ICON_NOT_FOUND = \"ICON_NOT_FOUND\";\n\n/**\n * @class\n * ### Overview\n *\n * The `ui5-icon` component represents an SVG icon.\n * There are two main scenarios how the `ui5-icon` component is used:\n * as a purely decorative element,\n * or as an interactive element that can be focused and clicked.\n *\n * ### Usage\n *\n * 1. **Get familiar with the icons collections.**\n *\n * Before displaying an icon, you need to explore the icons collections to find and import the desired icon.\n *\n * Currently there are 3 icons collection, available as 3 npm packages:\n *\n * - [@ui5/webcomponents-icons](https://www.npmjs.com/package/@ui5/webcomponents-icons) represents the \"SAP-icons\" collection and includes the following\n * [icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons).\n * - [@ui5/webcomponents-icons-tnt](https://www.npmjs.com/package/@ui5/webcomponents-icons-tnt) represents the \"tnt\" collection and includes the following\n * [icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons-TNT).\n * - [@ui5/webcomponents-icons-business-suite](https://www.npmjs.com/package/@ui5/webcomponents-icons-business-suite) represents the \"business-suite\" collection and includes the following\n * [icons](https://ui5.sap.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/BusinessSuiteInAppSymbols).\n *\n * 2. **After exploring the icons collections, add one or more of the packages as dependencies to your project.**\n *\n * `npm i @ui5/webcomponents-icons`\n * `npm i @ui5/webcomponents-icons-tnt`\n * `npm i @ui5/webcomponents-icons-business-suite`\n *\n * 3. **Then, import the desired icon**.\n *\n * `import \"@ui5/\\{package_name\\}/dist/\\{icon_name\\}.js\";`\n *\n * **For Example**:\n *\n * For the standard \"SAP-icons\" icon collection, import an icon from the `@ui5/webcomponents-icons` package:\n *\n * `import \"@ui5/webcomponents-icons/dist/employee.js\";`\n *\n * For the \"tnt\" (SAP Fiori Tools) icon collection, import an icon from the `@ui5/webcomponents-icons-tnt` package:\n *\n * `import \"@ui5/webcomponents-icons-tnt/dist/antenna.js\";`\n *\n * For the \"business-suite\" (SAP Business Suite) icon collection, import an icon from the `@ui5/webcomponents-icons-business-suite` package:\n *\n * `import \"@ui5/webcomponents-icons-business-suite/dist/ab-testing.js\";`\n *\n * 4. **Display the icon using the `ui5-icon` web component.**\n * Set the icon collection (\"SAP-icons\", \"tnt\" or \"business-suite\" - \"SAP-icons\" is the default icon collection and can be skipped)\n * and the icon name to the `name` property.\n *\n * `<ui5-icon name=\"employee\"></ui5-icon>`\n * `<ui5-icon name=\"tnt/antenna\"></ui5-icon>`\n * `<ui5-icon name=\"business-suite/ab-testing\"></ui5-icon>`\n *\n * ### Keyboard Handling\n *\n * - [Space] / [Enter] or [Return] - Fires the `click` event if the `mode` property is set to `Interactive`.\n * - [Shift] - If [Space] / [Enter] or [Return] is pressed, pressing [Shift] releases the ui5-icon without triggering the click event.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/Icon.js\";`\n * @csspart root - Used to style the outermost wrapper of the `ui5-icon`.\n * @constructor\n * @extends UI5Element\n * @implements {IIcon}\n * @public\n */\n@customElement({\n\ttag: \"ui5-icon\",\n\tlanguageAware: true,\n\tthemeAware: true,\n\trenderer: jsxRender,\n\ttemplate: IconTemplate,\n\tstyles: iconCss,\n})\n/**\n * Fired on mouseup, `SPACE` and `ENTER`.\n * - on mouse click, the icon fires native `click` event\n * - on `SPACE` and `ENTER`, the icon fires custom `click` event\n * @private\n * @since 1.0.0-rc.8\n */\n@event(\"click\", {\n\tbubbles: true,\n})\nclass Icon extends UI5Element implements IIcon {\n\teventDetails!: {\n\t\tclick: void\n\t}\n\t/**\n\t * Defines the component semantic design.\n\t * @default \"Default\"\n\t * @public\n\t * @since 1.9.2\n\t */\n\t@property()\n\tdesign: `${IconDesign}` = \"Default\";\n\n\t/**\n\t * Defines the unique identifier (icon name) of the component.\n\t *\n\t * To browse all available icons, see the\n\t * [SAP Icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html),\n\t * [SAP Fiori Tools](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons-TNT) and\n\t * [SAP Business Suite](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html)\n\t *\n\t * Example:\n\t * `name='add'`, `name='delete'`, `name='employee'`.\n\t *\n\t * **Note:** To use the SAP Fiori Tools icons,\n\t * you need to set the `tnt` prefix in front of the icon's name.\n\t *\n\t * Example:\n\t * `name='tnt/antenna'`, `name='tnt/actor'`, `name='tnt/api'`.\n\t *\n\t * **Note:** To use the SAP Business Suite icons,\n\t * you need to set the `business-suite` prefix in front of the icon's name.\n\t *\n\t * Example:\n\t * `name='business-suite/3d'`, `name='business-suite/1x2-grid-layout'`, `name='business-suite/4x4-grid-layout'`.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\tname?: string;\n\n\t/**\n\t * Defines the text alternative of the component.\n\t * If not provided a default text alternative will be set, if present.\n\t *\n\t * **Note:** Every icon should have a text alternative in order to\n\t * calculate its accessible name.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\taccessibleName?: string;\n\n\t/**\n\t * Defines whether the component should have a tooltip.\n\t *\n\t * **Note:** The tooltip text should be provided via the `accessible-name` property.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tshowTooltip = false;\n\n\t/**\n\t * Defines the mode of the component.\n\t * @default \"Decorative\"\n\t * @public\n\t * @since 2.0.0\n\t */\n\t@property()\n\tmode: `${IconMode}` = \"Decorative\";\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Array })\n\tpathData: Array<string> = [];\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Object, noAttribute: true })\n\taccData?: I18nText;\n\n\t/**\n\t* @private\n\t*/\n\t@property({ type: Boolean })\n\tinvalid = false;\n\n\t/**\n\t * @private\n\t */\n\t@property({ noAttribute: true })\n\teffectiveAccessibleName?: string;\n\n\tltr?: boolean;\n\tpackageName?: string;\n\tviewBox?: string;\n\tcustomSvg?: object;\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\tif (this.mode !== IconMode.Interactive) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (isEnter(e)) {\n\t\t\tthis.fireDecoratorEvent(\"click\");\n\t\t}\n\n\t\tif (isSpace(e)) {\n\t\t\te.preventDefault(); // prevent scrolling\n\t\t}\n\t}\n\n\t_onkeyup(e: KeyboardEvent) {\n\t\tif (this.mode === IconMode.Interactive && isSpace(e)) {\n\t\t\tthis.fireDecoratorEvent(\"click\");\n\t\t}\n\t}\n\n\t/**\n\t* Enforce \"ltr\" direction, based on the icons collection metadata.\n\t*/\n\tget _dir() {\n\t\treturn this.ltr ? \"ltr\" : undefined;\n\t}\n\n\tget effectiveAriaHidden() {\n\t\treturn this.mode === IconMode.Decorative ? \"true\" : undefined;\n\t}\n\n\tget _tabIndex() {\n\t\treturn this.mode === IconMode.Interactive ? 0 : undefined;\n\t}\n\n\tget effectiveAccessibleRole() {\n\t\tswitch (this.mode) {\n\t\tcase IconMode.Interactive:\n\t\t\treturn \"button\";\n\t\tcase IconMode.Decorative:\n\t\t\treturn \"presentation\";\n\t\tdefault:\n\t\t\treturn \"img\";\n\t\t}\n\t}\n\n\tonEnterDOM() {\n\t\tif (isDesktop()) {\n\t\t\tthis.setAttribute(\"desktop\", \"\");\n\t\t}\n\t}\n\n\tasync onBeforeRendering() {\n\t\tconst name = this.name;\n\t\tif (!name) {\n\t\t\treturn;\n\t\t}\n\n\t\tlet iconData: typeof ICON_NOT_FOUND | IconData | undefined = getIconDataSync(name);\n\t\tif (!iconData) {\n\t\t\ticonData = await getIconData(name);\n\t\t}\n\n\t\tif (!iconData) {\n\t\t\tthis.invalid = true;\n\t\t\t/* eslint-disable-next-line */\n\t\t\treturn console.warn(`Required icon is not registered. Invalid icon name: ${this.name}`);\n\t\t}\n\n\t\tif (iconData === ICON_NOT_FOUND) {\n\t\t\tthis.invalid = true;\n\t\t\t/* eslint-disable-next-line */\n\t\t\treturn console.warn(`Required icon is not registered. You can either import the icon as a module in order to use it e.g. \"@ui5/webcomponents-icons/dist/${name.replace(\"sap-icon://\", \"\")}.js\", or setup a JSON build step and import \"@ui5/webcomponents-icons/dist/AllIcons.js\".`);\n\t\t}\n\n\t\tthis.viewBox = iconData.viewBox || \"0 0 512 512\";\n\n\t\tif (iconData.customTemplate) {\n\t\t\ticonData.pathData = [];\n\t\t\tthis.customSvg = executeTemplate(iconData.customTemplate, this);\n\t\t}\n\n\t\t// in case a new valid name is set, show the icon\n\t\tthis.invalid = false;\n\t\tthis.pathData = Array.isArray(iconData.pathData) ? iconData.pathData : [iconData.pathData];\n\t\tthis.accData = iconData.accData;\n\t\tthis.ltr = iconData.ltr;\n\t\tthis.packageName = iconData.packageName;\n\n\t\tif (this.accessibleName) {\n\t\t\tthis.effectiveAccessibleName = this.accessibleName;\n\t\t} else if (this.accData) {\n\t\t\tconst i18nBundle = await getI18nBundle(this.packageName);\n\t\t\tthis.effectiveAccessibleName = i18nBundle.getText(this.accData) || undefined;\n\t\t} else {\n\t\t\tthis.effectiveAccessibleName = undefined;\n\t\t}\n\t}\n\n\tget hasIconTooltip() {\n\t\treturn this.showTooltip && this.effectiveAccessibleName;\n\t}\n}\n\nIcon.define();\n\nexport default Icon;\nexport type {\n\tIIcon,\n};\n"]}
+{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../src/Icon.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport jsxRender from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport type { IconData } from \"@ui5/webcomponents-base/dist/asset-registries/Icons.js\";\nimport { getIconData, getIconDataSync } from \"@ui5/webcomponents-base/dist/asset-registries/Icons.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type { I18nText } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport { isSpace, isEnter } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport executeTemplate from \"@ui5/webcomponents-base/dist/renderer/executeTemplate.js\";\nimport IconTemplate from \"./IconTemplate.js\";\nimport type IconDesign from \"./types/IconDesign.js\";\nimport IconMode from \"./types/IconMode.js\";\n\n// Styles\nimport iconCss from \"./generated/themes/Icon.css.js\";\n\n/**\n * Interface for components that represent an icon, usable in numerous higher-order components\n * @public\n */\ninterface IIcon extends HTMLElement { }\n\nconst ICON_NOT_FOUND = \"ICON_NOT_FOUND\";\n\n/**\n * @class\n * ### Overview\n *\n * The `ui5-icon` component represents an SVG icon.\n * There are two main scenarios how the `ui5-icon` component is used:\n * as a purely decorative element,\n * or as an interactive element that can be focused and clicked.\n *\n * ### Usage\n *\n * 1. **Get familiar with the icons collections.**\n *\n * Before displaying an icon, you need to explore the icons collections to find and import the desired icon.\n *\n * Currently there are 3 icons collection, available as 3 npm packages:\n *\n * - [@ui5/webcomponents-icons](https://www.npmjs.com/package/@ui5/webcomponents-icons) represents the \"SAP-icons\" collection and includes the following\n * [icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons).\n * - [@ui5/webcomponents-icons-tnt](https://www.npmjs.com/package/@ui5/webcomponents-icons-tnt) represents the \"tnt\" collection and includes the following\n * [icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons-TNT).\n * - [@ui5/webcomponents-icons-business-suite](https://www.npmjs.com/package/@ui5/webcomponents-icons-business-suite) represents the \"business-suite\" collection and includes the following\n * [icons](https://ui5.sap.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/BusinessSuiteInAppSymbols).\n *\n * 2. **After exploring the icons collections, add one or more of the packages as dependencies to your project.**\n *\n * `npm i @ui5/webcomponents-icons`\n * `npm i @ui5/webcomponents-icons-tnt`\n * `npm i @ui5/webcomponents-icons-business-suite`\n *\n * 3. **Then, import the desired icon**.\n *\n * `import \"@ui5/\\{package_name\\}/dist/\\{icon_name\\}.js\";`\n *\n * **For Example**:\n *\n * For the standard \"SAP-icons\" icon collection, import an icon from the `@ui5/webcomponents-icons` package:\n *\n * `import \"@ui5/webcomponents-icons/dist/employee.js\";`\n *\n * For the \"tnt\" (SAP Fiori Tools) icon collection, import an icon from the `@ui5/webcomponents-icons-tnt` package:\n *\n * `import \"@ui5/webcomponents-icons-tnt/dist/antenna.js\";`\n *\n * For the \"business-suite\" (SAP Business Suite) icon collection, import an icon from the `@ui5/webcomponents-icons-business-suite` package:\n *\n * `import \"@ui5/webcomponents-icons-business-suite/dist/ab-testing.js\";`\n *\n * 4. **Display the icon using the `ui5-icon` web component.**\n * Set the icon collection (\"SAP-icons\", \"tnt\" or \"business-suite\" - \"SAP-icons\" is the default icon collection and can be skipped)\n * and the icon name to the `name` property.\n *\n * `<ui5-icon name=\"employee\"></ui5-icon>`\n * `<ui5-icon name=\"tnt/antenna\"></ui5-icon>`\n * `<ui5-icon name=\"business-suite/ab-testing\"></ui5-icon>`\n *\n * ### Keyboard Handling\n *\n * - [Space] / [Enter] or [Return] - Fires the `click` event if the `mode` property is set to `Interactive`.\n * - [Shift] - If [Space] / [Enter] or [Return] is pressed, pressing [Shift] releases the ui5-icon without triggering the click event.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/Icon.js\";`\n * @csspart root - Used to style the outermost wrapper of the `ui5-icon`.\n * @constructor\n * @extends UI5Element\n * @implements {IIcon}\n * @public\n */\n@customElement({\n\ttag: \"ui5-icon\",\n\tlanguageAware: true,\n\tthemeAware: true,\n\trenderer: jsxRender,\n\ttemplate: IconTemplate,\n\tstyles: iconCss,\n})\n/**\n * Fired on mouseup, `SPACE` and `ENTER`.\n * - on mouse click, the icon fires native `click` event\n * - on `SPACE` and `ENTER`, the icon fires custom `click` event\n * @public\n * @since 2.11.0\n */\n@event(\"click\", {\n\tbubbles: true,\n})\nclass Icon extends UI5Element implements IIcon {\n\teventDetails!: {\n\t\tclick: void\n\t}\n\t/**\n\t * Defines the component semantic design.\n\t * @default \"Default\"\n\t * @public\n\t * @since 1.9.2\n\t */\n\t@property()\n\tdesign: `${IconDesign}` = \"Default\";\n\n\t/**\n\t * Defines the unique identifier (icon name) of the component.\n\t *\n\t * To browse all available icons, see the\n\t * [SAP Icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html),\n\t * [SAP Fiori Tools](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons-TNT) and\n\t * [SAP Business Suite](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html)\n\t *\n\t * Example:\n\t * `name='add'`, `name='delete'`, `name='employee'`.\n\t *\n\t * **Note:** To use the SAP Fiori Tools icons,\n\t * you need to set the `tnt` prefix in front of the icon's name.\n\t *\n\t * Example:\n\t * `name='tnt/antenna'`, `name='tnt/actor'`, `name='tnt/api'`.\n\t *\n\t * **Note:** To use the SAP Business Suite icons,\n\t * you need to set the `business-suite` prefix in front of the icon's name.\n\t *\n\t * Example:\n\t * `name='business-suite/3d'`, `name='business-suite/1x2-grid-layout'`, `name='business-suite/4x4-grid-layout'`.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\tname?: string;\n\n\t/**\n\t * Defines the text alternative of the component.\n\t * If not provided a default text alternative will be set, if present.\n\t *\n\t * **Note:** Every icon should have a text alternative in order to\n\t * calculate its accessible name.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\taccessibleName?: string;\n\n\t/**\n\t * Defines whether the component should have a tooltip.\n\t *\n\t * **Note:** The tooltip text should be provided via the `accessible-name` property.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tshowTooltip = false;\n\n\t/**\n\t * Defines the mode of the component.\n\t * @default \"Decorative\"\n\t * @public\n\t * @since 2.0.0\n\t */\n\t@property()\n\tmode: `${IconMode}` = \"Decorative\";\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Array })\n\tpathData: Array<string> = [];\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Object, noAttribute: true })\n\taccData?: I18nText;\n\n\t/**\n\t* @private\n\t*/\n\t@property({ type: Boolean })\n\tinvalid = false;\n\n\t/**\n\t * @private\n\t */\n\t@property({ noAttribute: true })\n\teffectiveAccessibleName?: string;\n\n\tltr?: boolean;\n\tpackageName?: string;\n\tviewBox?: string;\n\tcustomSvg?: object;\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\tif (this.mode !== IconMode.Interactive) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (isEnter(e)) {\n\t\t\tthis.fireDecoratorEvent(\"click\");\n\t\t}\n\n\t\tif (isSpace(e)) {\n\t\t\te.preventDefault(); // prevent scrolling\n\t\t}\n\t}\n\n\t_onkeyup(e: KeyboardEvent) {\n\t\tif (this.mode === IconMode.Interactive && isSpace(e)) {\n\t\t\tthis.fireDecoratorEvent(\"click\");\n\t\t}\n\t}\n\n\t/**\n\t* Enforce \"ltr\" direction, based on the icons collection metadata.\n\t*/\n\tget _dir() {\n\t\treturn this.ltr ? \"ltr\" : undefined;\n\t}\n\n\tget effectiveAriaHidden() {\n\t\treturn this.mode === IconMode.Decorative ? \"true\" : undefined;\n\t}\n\n\tget _tabIndex() {\n\t\treturn this.mode === IconMode.Interactive ? 0 : undefined;\n\t}\n\n\tget effectiveAccessibleRole() {\n\t\tswitch (this.mode) {\n\t\tcase IconMode.Interactive:\n\t\t\treturn \"button\";\n\t\tcase IconMode.Decorative:\n\t\t\treturn \"presentation\";\n\t\tdefault:\n\t\t\treturn \"img\";\n\t\t}\n\t}\n\n\tonEnterDOM() {\n\t\tif (isDesktop()) {\n\t\t\tthis.setAttribute(\"desktop\", \"\");\n\t\t}\n\t}\n\n\tasync onBeforeRendering() {\n\t\tconst name = this.name;\n\t\tif (!name) {\n\t\t\treturn;\n\t\t}\n\n\t\tlet iconData: typeof ICON_NOT_FOUND | IconData | undefined = getIconDataSync(name);\n\t\tif (!iconData) {\n\t\t\ticonData = await getIconData(name);\n\t\t}\n\n\t\tif (!iconData) {\n\t\t\tthis.invalid = true;\n\t\t\t/* eslint-disable-next-line */\n\t\t\treturn console.warn(`Required icon is not registered. Invalid icon name: ${this.name}`);\n\t\t}\n\n\t\tif (iconData === ICON_NOT_FOUND) {\n\t\t\tthis.invalid = true;\n\t\t\t/* eslint-disable-next-line */\n\t\t\treturn console.warn(`Required icon is not registered. You can either import the icon as a module in order to use it e.g. \"@ui5/webcomponents-icons/dist/${name.replace(\"sap-icon://\", \"\")}.js\", or setup a JSON build step and import \"@ui5/webcomponents-icons/dist/AllIcons.js\".`);\n\t\t}\n\n\t\tthis.viewBox = iconData.viewBox || \"0 0 512 512\";\n\n\t\tif (iconData.customTemplate) {\n\t\t\ticonData.pathData = [];\n\t\t\tthis.customSvg = executeTemplate(iconData.customTemplate, this);\n\t\t}\n\n\t\t// in case a new valid name is set, show the icon\n\t\tthis.invalid = false;\n\t\tthis.pathData = Array.isArray(iconData.pathData) ? iconData.pathData : [iconData.pathData];\n\t\tthis.accData = iconData.accData;\n\t\tthis.ltr = iconData.ltr;\n\t\tthis.packageName = iconData.packageName;\n\n\t\tif (this.accessibleName) {\n\t\t\tthis.effectiveAccessibleName = this.accessibleName;\n\t\t} else if (this.accData) {\n\t\t\tconst i18nBundle = await getI18nBundle(this.packageName);\n\t\t\tthis.effectiveAccessibleName = i18nBundle.getText(this.accData) || undefined;\n\t\t} else {\n\t\t\tthis.effectiveAccessibleName = undefined;\n\t\t}\n\t}\n\n\tget hasIconTooltip() {\n\t\treturn this.showTooltip && this.effectiveAccessibleName;\n\t}\n}\n\nIcon.define();\n\nexport default Icon;\nexport type {\n\tIIcon,\n};\n"]}

package/dist/Input.d.ts

@@ -467,6 +467,7 @@ declare class Input extends UI5Element implements SuggestionComponent, IFormInpu
     fireResetSelectionChange(): void;
     get _readonly(): boolean;
     get _headerTitleText(): string;
+    get _suggestionsOkButtonText(): string;
     get clearIconAccessibleName(): string;
     get _popupLabel(): string;
     get inputType(): `${InputType}`;

package/dist/Input.js

@@ -27,7 +27,7 @@ import InputType from "./types/InputType.js";
 // Templates
 import InputTemplate from "./InputTemplate.js";
 import { StartsWith } from "./Filters.js";
-import { VALUE_STATE_SUCCESS, VALUE_STATE_INFORMATION, VALUE_STATE_ERROR, VALUE_STATE_WARNING, VALUE_STATE_TYPE_SUCCESS, VALUE_STATE_TYPE_INFORMATION, VALUE_STATE_TYPE_ERROR, VALUE_STATE_TYPE_WARNING, INPUT_SUGGESTIONS, INPUT_SUGGESTIONS_TITLE, INPUT_SUGGESTIONS_ONE_HIT, INPUT_SUGGESTIONS_MORE_HITS, INPUT_SUGGESTIONS_NO_HIT, INPUT_CLEAR_ICON_ACC_NAME, INPUT_AVALIABLE_VALUES, FORM_TEXTFIELD_REQUIRED, } from "./generated/i18n/i18n-defaults.js";
+import { VALUE_STATE_SUCCESS, VALUE_STATE_INFORMATION, VALUE_STATE_ERROR, VALUE_STATE_WARNING, VALUE_STATE_TYPE_SUCCESS, VALUE_STATE_TYPE_INFORMATION, VALUE_STATE_TYPE_ERROR, VALUE_STATE_TYPE_WARNING, INPUT_SUGGESTIONS, INPUT_SUGGESTIONS_TITLE, INPUT_SUGGESTIONS_ONE_HIT, INPUT_SUGGESTIONS_MORE_HITS, INPUT_SUGGESTIONS_NO_HIT, INPUT_CLEAR_ICON_ACC_NAME, INPUT_AVALIABLE_VALUES, INPUT_SUGGESTIONS_OK_BUTTON, FORM_TEXTFIELD_REQUIRED, } from "./generated/i18n/i18n-defaults.js";
 // Styles
 import inputStyles from "./generated/themes/Input.css.js";
 import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverCommon.css.js";
@@ -937,6 +937,9 @@ let Input = Input_1 = class Input extends UI5Element {
     get _headerTitleText() {
         return Input_1.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE);
     }
+    get _suggestionsOkButtonText() {
+        return Input_1.i18nBundle.getText(INPUT_SUGGESTIONS_OK_BUTTON);
+    }
     get clearIconAccessibleName() {
         return Input_1.i18nBundle.getText(INPUT_CLEAR_ICON_ACC_NAME);
     }