npm - @ui5/webcomponents - Versions diffs - 2.9.0-rc.1 → 2.9.0-rc.3 - Mend

@ui5/webcomponents 2.9.0-rc.1 → 2.9.0-rc.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (684) hide show

package/dist/DateRangePicker.js CHANGED Viewed

@@ -168,10 +168,9 @@ let DateRangePicker = DateRangePicker_1 = class DateRangePicker extends DatePick
      * @override
      */
     async _onInputSubmit() {
-        const input = this._getInput();
-        const caretPos = input.getCaretPosition();
+        const caretPos = this._dateTimeInput.getCaretPosition();
         await renderFinished();
-        input.setCaretPosition(caretPos); // Return the caret on the previous position after rendering
+        this._dateTimeInput.setCaretPosition(caretPos); // Return the caret on the previous position after rendering
     }
     /**
      * @override
@@ -181,14 +180,18 @@ let DateRangePicker = DateRangePicker_1 = class DateRangePicker extends DatePick
         super.onResponsivePopoverAfterClose();
     }
     /**
-     * @override
+     * Checks if a value is valid against the current date format of the DatePicker.
+     * @public
+     * @param value A value to be tested against the current date format
      */
     isValid(value) {
         const parts = this._splitValueByDelimiter(value);
         return parts.length <= 2 && parts.every(dateString => super.isValid(dateString)); // must be at most 2 dates and each must be valid
     }
     /**
-     * @override
+     * Checks if a date is between the minimum and maximum date.
+     * @public
+     * @param value A value to be checked
      */
     isInValidRange(value) {
         return this._splitValueByDelimiter(value).every(dateString => super.isInValidRange(dateString));
@@ -229,8 +232,7 @@ let DateRangePicker = DateRangePicker_1 = class DateRangePicker extends DatePick
         if (!this._endDateTimestamp) { // If empty or only one date -> treat as datepicker entirely
             return super._modifyDateValue(amount, unit, preserveDate);
         }
-        const input = this._getInput();
-        let caretPos = input.getCaretPosition(); // caret position is always number for input of type text;
+        let caretPos = this._dateTimeInput.getCaretPosition(); // caret position is always number for input of type text;
         let newValue;
         if (caretPos <= this.value.indexOf(this._effectiveDelimiter)) { // The user is focusing the first date -> change it and keep the second date
             const startDateModified = modifyDateBy(CalendarDate.fromTimestamp(this._startDateTimestamp * 1000), amount, unit, preserveDate, this._minDate, this._maxDate);
@@ -250,7 +252,7 @@ let DateRangePicker = DateRangePicker_1 = class DateRangePicker extends DatePick
         }
         this._updateValueAndFireEvents(newValue, true, ["change", "value-changed"]);
         await renderFinished();
-        input.setCaretPosition(caretPos); // Return the caret to the previous (or the adjusted, if dates flipped) position after rendering
+        this._dateTimeInput.setCaretPosition(caretPos); // Return the caret to the previous (or the adjusted, if dates flipped) position after rendering
     }
     get _effectiveDelimiter() {
         return this.delimiter || DEFAULT_DELIMITER;

package/dist/DateRangePicker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DateRangePicker.js","sourceRoot":"","sources":["../src/DateRangePicker.ts"],"names":[],"mappings":"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","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport { renderFinished } from \"@ui5/webcomponents-base/dist/Render.js\";\nimport type { IFormInputElement } from \"@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js\";\nimport CalendarDate from \"@ui5/webcomponents-localization/dist/dates/CalendarDate.js\";\nimport modifyDateBy from \"@ui5/webcomponents-localization/dist/dates/modifyDateBy.js\";\nimport getTodayUTCTimestamp from \"@ui5/webcomponents-localization/dist/dates/getTodayUTCTimestamp.js\";\nimport {\n\tDATERANGE_DESCRIPTION,\n\tDATERANGEPICKER_POPOVER_ACCESSIBLE_NAME,\n} from \"./generated/i18n/i18n-defaults.js\";\nimport DateRangePickerTemplate from \"./DateRangePickerTemplate.js\";\n\n// Styles\nimport DateRangePickerCss from \"./generated/themes/DateRangePicker.css.js\";\nimport DatePicker from \"./DatePicker.js\";\n\nimport type {\n\tDatePickerChangeEventDetail as DateRangePickerChangeEventDetail,\n\tDatePickerInputEventDetail as DateRangePickerInputEventDetail,\n} from \"./DatePicker.js\";\nimport type { CalendarSelectionChangeEventDetail } from \"./Calendar.js\";\nimport type CalendarSelectionMode from \"./types/CalendarSelectionMode.js\";\n\nconst DEFAULT_DELIMITER = \"-\";\n\n/*\n @class\n \n ### Overview\n * The DateRangePicker enables the users to enter a localized date range using touch, mouse, keyboard input, or by selecting a date range in the calendar.\n \n ### Usage\n * The user can enter a date by:\n * Using the calendar that opens in a popup or typing it in directly in the input field (not available for mobile devices).\n * For the `ui5-daterange-picker`\n * ### ES6 Module Import\n \n `import \"@ui5/webcomponents/dist/DateRangePicker.js\";`\n \n ### Keyboard Handling\n * The `ui5-daterange-picker` provides advanced keyboard handling.\n \n When the `ui5-daterange-picker` input field is focused the user can\n * increment or decrement respectively the range start or end date, depending on where the cursor is.\n * The following shortcuts are available:\n \n - [Page Down] - Decrements the corresponding day of the month by one\n * - [Shift] + [Page Down] - Decrements the corresponding month by one\n * - [Shift] + [Ctrl] + [Page Down] - Decrements the corresponding year by one\n * - [Page Up] - Increments the corresponding day of the month by one\n * - [Shift] + [Page Up] - Increments the corresponding month by one\n * - [Shift] + [Ctrl] + [Page Up] - Increments the corresponding year by one\n * @constructor\n * @extends DatePicker\n * @since 1.0.0-rc.8\n * @public\n /\n@customElement({\n\ttag: \"ui5-daterange-picker\",\n\tstyles: [DatePicker.styles, DateRangePickerCss],\n\ttemplate: DateRangePickerTemplate,\n})\nclass DateRangePicker extends DatePicker implements IFormInputElement {\n\t /\n\t Determines the symbol which separates the dates.\n\t * If not supplied, the default time interval delimiter for the current locale will be used.\n\t * @default \"-\"\n\t * @public\n\t /\n\t@property()\n\tdelimiter = \"-\";\n\n\t /\n\t The first date in the range during selection (this is a temporary value, not the first date in the value range)\n\t * @private\n\t /\n\t@property()\n\t_tempValue?: string;\n\n\tprivate _prevDelimiter: string \| null;\n\n\tget formFormattedValue() {\n\t\tconst values = this._splitValueByDelimiter(this.value \|\| \"\").filter(Boolean);\n\n\t\tif (values.length && this.name) {\n\t\t\tconst formData = new FormData();\n\n\t\t\tfor (let i = 0; i < values.length; i++) {\n\t\t\t\tformData.append(this.name, values[i]);\n\t\t\t}\n\n\t\t\treturn formData;\n\t\t}\n\n\t\treturn this.value;\n\t}\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis._prevDelimiter = null;\n\t}\n\n\t/\n\t Note: The getter method is inherited and not supported. If called it will return an empty value.\n\t * @public\n\t * @default null\n\t /\n\tget dateValue(): Date \| null {\n\t\treturn null;\n\t}\n\n\t/\n\t Note: The getter method is inherited and not supported. If called it will return an empty value.\n\t * @public\n\t * @default null\n\t /\n\tget dateValueUTC(): Date \| null {\n\t\treturn null;\n\t}\n\n\tget _startDateTimestamp() {\n\t\treturn this._extractFirstTimestamp(this.value);\n\t}\n\n\tget _endDateTimestamp() {\n\t\treturn this._extractLastTimestamp(this.value);\n\t}\n\n\tget _tempTimestamp() {\n\t\treturn this._tempValue && (this.getFormat().parse(this._tempValue, true) as Date).getTime() / 1000;\n\t}\n\n\t/\n\t Required by DatePicker.js\n\t * @override\n\t /\n\tget _calendarSelectionMode(): `${CalendarSelectionMode}` {\n\t\treturn \"Range\";\n\t}\n\n\t/\n\t Required by DatePicker.js - set the calendar focus on the first selected date (or today if not set)\n\t * @override\n\t /\n\tget _calendarTimestamp() {\n\t\treturn this._tempTimestamp \|\| this._startDateTimestamp \|\| getTodayUTCTimestamp(this._primaryCalendarType);\n\t}\n\n\t/\n\t Required by DatePicker.js\n\t * @override\n\t /\n\tget _calendarSelectedDates() {\n\t\tif (this._tempValue) {\n\t\t\treturn [this._tempValue];\n\t\t}\n\t\tif (this.value && this._checkValueValidity(this.value)) {\n\t\t\treturn this._splitValueByDelimiter(this.value);\n\t\t}\n\t\treturn [];\n\t}\n\n\t/\n\t Returns the start date of the currently selected range as JavaScript Date instance.\n\t * @public\n\t * @default null\n\t /\n\tget startDateValue(): Date \| null {\n\t\treturn CalendarDate.fromTimestamp(this._startDateTimestamp! 1000).toLocalJSDate();\n\t}\n\n\t/*\n\t Returns the end date of the currently selected range as JavaScript Date instance.\n\t * @public\n\t * @default null\n\t /\n\tget endDateValue(): Date \| null {\n\t\treturn CalendarDate.fromTimestamp(this._endDateTimestamp! 1000).toLocalJSDate();\n\t}\n\n\tget startValue(): string {\n\t\treturn this._calendarSelectedDates[0] \|\| \"\";\n\t}\n\n\tget endValue(): string {\n\t\treturn this._calendarSelectedDates[1] \|\| \"\";\n\t}\n\n\t/*\n\t @override\n\t /\n\tget _placeholder() {\n\t\treturn this.placeholder !== undefined ? this.placeholder : `${this._displayFormat} ${this._effectiveDelimiter} ${this._displayFormat}`;\n\t}\n\n\t/\n\t @override\n\t /\n\tget dateAriaDescription() {\n\t\treturn DateRangePicker.i18nBundle.getText(DATERANGE_DESCRIPTION);\n\t}\n\n\t/\n\t @override\n\t /\n\tget pickerAccessibleName() {\n\t\treturn DateRangePicker.i18nBundle.getText(DATERANGEPICKER_POPOVER_ACCESSIBLE_NAME);\n\t}\n\n\t/\n\t @override\n\t /\n\tasync _onInputSubmit() {\n\t\tconst input = this._getInput();\n\t\tconst caretPos = input.getCaretPosition();\n\t\tawait renderFinished();\n\t\tinput.setCaretPosition(caretPos); // Return the caret on the previous position after rendering\n\t}\n\n\t/\n\t @override\n\t /\n\t onResponsivePopoverAfterClose() {\n\t\tthis._tempValue = \"\"; // reset _tempValue on popover close\n\t\tsuper.onResponsivePopoverAfterClose();\n\t}\n\n\t/\n\t @override\n\t /\n\tisValid(value: string): boolean {\n\t\tconst parts = this._splitValueByDelimiter(value);\n\t\treturn parts.length <= 2 && parts.every(dateString => super.isValid(dateString)); // must be at most 2 dates and each must be valid\n\t}\n\n\t/\n\t @override\n\t /\n\tisInValidRange(value: string): boolean {\n\t\treturn this._splitValueByDelimiter(value).every(dateString => super.isInValidRange(dateString));\n\t}\n\n\t/\n\t Extract both dates as timestamps, flip if necessary, and build (which will use the desired format so we enforce the format too)\n\t * @override\n\t /\n\tnormalizeValue(value: string) {\n\t\tconst firstDateTimestamp = this._extractFirstTimestamp(value);\n\t\tconst lastDateTimestamp = this._extractLastTimestamp(value);\n\t\tif (firstDateTimestamp && lastDateTimestamp && firstDateTimestamp > lastDateTimestamp) { // if both are timestamps (not undefined), flip if necessary\n\t\t\treturn this._buildValue(lastDateTimestamp, firstDateTimestamp);\n\t\t}\n\t\treturn this._buildValue(firstDateTimestamp, lastDateTimestamp);\n\t}\n\n\t/\n\t @override\n\t /\n\tonSelectedDatesChange(event: CustomEvent<CalendarSelectionChangeEventDetail>) {\n\t\tevent.preventDefault(); // never let the calendar update its own dates, the parent component controls them\n\t\tconst values = event.detail.selectedValues;\n\n\t\tif (values.length === 0) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (values.length === 1) { // Do nothing until the user selects 2 dates, we don't change any state at all for one date\n\t\t\tthis._tempValue = values[0];\n\t\t\treturn;\n\t\t}\n\t\tconst newValue = this._buildValue(event.detail.selectedDates[0], event.detail.selectedDates[1]); // the value will be normalized so we don't need to order them here\n\t\tthis._updateValueAndFireEvents(newValue, true, [\"change\", \"value-changed\"]);\n\t\tthis._togglePicker();\n\t}\n\n\t/\n\t @override\n\t /\n\tasync _modifyDateValue(amount: number, unit: string, preserveDate?: boolean) {\n\t\tif (!this._endDateTimestamp) { // If empty or only one date -> treat as datepicker entirely\n\t\t\treturn super._modifyDateValue(amount, unit, preserveDate);\n\t\t}\n\n\t\tconst input = this._getInput();\n\t\tlet caretPos: number = input.getCaretPosition()!; // caret position is always number for input of type text;\n\t\tlet newValue: string;\n\n\t\tif (caretPos <= this.value.indexOf(this._effectiveDelimiter)) { // The user is focusing the first date -> change it and keep the second date\n\t\t\tconst startDateModified = modifyDateBy(CalendarDate.fromTimestamp(this._startDateTimestamp! 1000), amount, unit, preserveDate, this._minDate, this._maxDate);\n\t\t\tconst newStartDateTimestamp = startDateModified.valueOf() / 1000;\n\t\t\tif (newStartDateTimestamp > this._endDateTimestamp) { // dates flipped -> move the caret to the same position but on the last date\n\t\t\t\tcaretPos += Math.ceil(this.value.length / 2);\n\t\t\t}\n\t\t\tnewValue = this._buildValue(newStartDateTimestamp, this._endDateTimestamp); // the value will be normalized so we don't try to order them here\n\t\t} else {\n\t\t\tconst endDateModified = modifyDateBy(CalendarDate.fromTimestamp(this._endDateTimestamp * 1000), amount, unit, preserveDate, this._minDate, this._maxDate);\n\t\t\tconst newEndDateTimestamp = endDateModified.valueOf() / 1000;\n\t\t\tnewValue = this._buildValue(this._startDateTimestamp, newEndDateTimestamp); // the value will be normalized so we don't try to order them here\n\t\t\tif (newEndDateTimestamp < this._startDateTimestamp!) { // dates flipped -> move the caret to the same position but on the first date\n\t\t\t\tcaretPos -= Math.ceil(this.value.length / 2);\n\t\t\t}\n\t\t}\n\t\tthis._updateValueAndFireEvents(newValue, true, [\"change\", \"value-changed\"]);\n\n\t\tawait renderFinished();\n\t\tinput.setCaretPosition(caretPos); // Return the caret to the previous (or the adjusted, if dates flipped) position after rendering\n\t}\n\n\tget _effectiveDelimiter(): string {\n\t\treturn this.delimiter \|\| DEFAULT_DELIMITER;\n\t}\n\n\t_splitValueByDelimiter(value: string) {\n\t\tconst valuesArray: Array<string> = [];\n\t\tconst partsArray = value.split(this._prevDelimiter \|\| this._effectiveDelimiter);\n\n\t\t// if format successfully parse the value, the value contains only single date\n\t\tif (this.getFormat().parse(value)) {\n\t\t\tvaluesArray[0] = partsArray.join(this._effectiveDelimiter);\n\t\t\tvaluesArray[1] = \"\";\n\t\t} else {\n\t\t\tvaluesArray[0] = partsArray.slice(0, partsArray.length / 2).join(this._effectiveDelimiter);\n\t\t\tvaluesArray[1] = partsArray.slice(partsArray.length / 2).join(this._effectiveDelimiter);\n\t\t}\n\n\t\treturn valuesArray;\n\t}\n\n\t/*\n\t Returns a UTC timestamp, representing the first date in the value string or undefined if the value is empty\n\t * @private\n\t /\n\t_extractFirstTimestamp(value: string) {\n\t\tif (!value \|\| !this._checkValueValidity(value)) {\n\t\t\treturn undefined;\n\t\t}\n\n\t\tconst dateStrings = this._splitValueByDelimiter(value); // at least one item guaranteed due to the checks above (non-empty and valid)\n\n\t\tconst parsedDate = this.getFormat().parse(dateStrings[0], true) as Date;\n\t\treturn parsedDate.getTime() / 1000;\n\t}\n\n\t/\n\t Returns a UTC timestamp, representing the last date in the value string or undefined if the value is empty or there is just one date\n\t * @private\n\t /\n\t_extractLastTimestamp(value: string) {\n\t\tif (!value \|\| !this._checkValueValidity(value)) {\n\t\t\treturn undefined;\n\t\t}\n\n\t\tconst dateStrings = this._splitValueByDelimiter(value);\n\t\tif (dateStrings[1]) {\n\t\t\tconst parsedDate = this.getFormat().parse(dateStrings[1], true) as Date;\n\t\t\treturn parsedDate.getTime() / 1000;\n\t\t}\n\n\t\treturn undefined;\n\t}\n\n\t/\n\t Builds a string value out of two UTC timestamps - this method is the counterpart to _extractFirstTimestamp/_extractLastTimestamp\n\t * @private\n\t /\n\t_buildValue(firstDateTimestamp: number \| undefined, lastDateTimestamp: number \| undefined) {\n\t\tthis._prevDelimiter = this._effectiveDelimiter;\n\t\tif (firstDateTimestamp) {\n\t\t\tconst firstDateString = this._getStringFromTimestamp(firstDateTimestamp 1000);\n\n\t\t\tif (!lastDateTimestamp) {\n\t\t\t\treturn firstDateString;\n\t\t\t}\n\n\t\t\tconst lastDateString = this._getStringFromTimestamp(lastDateTimestamp * 1000);\n\t\t\treturn `${firstDateString} ${this._effectiveDelimiter} ${lastDateString}`;\n\t\t}\n\n\t\treturn \"\";\n\t}\n}\n\nDateRangePicker.define();\n\nexport default DateRangePicker;\nexport type {\n\tDateRangePickerChangeEventDetail,\n\tDateRangePickerInputEventDetail,\n};\n"]}
1	+ {"version":3,"file":"DateRangePicker.js","sourceRoot":"","sources":["../src/DateRangePicker.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AAExE,OAAO,YAAY,MAAM,4DAA4D,CAAC;AACtF,OAAO,YAAY,MAAM,4DAA4D,CAAC;AACtF,OAAO,oBAAoB,MAAM,oEAAoE,CAAC;AACtG,OAAO,EACN,qBAAqB,EACrB,uCAAuC,GACvC,MAAM,mCAAmC,CAAC;AAC3C,OAAO,uBAAuB,MAAM,8BAA8B,CAAC;AAEnE,SAAS;AACT,OAAO,kBAAkB,MAAM,2CAA2C,CAAC;AAC3E,OAAO,UAAU,MAAM,iBAAiB,CAAC;AASzC,MAAM,iBAAiB,GAAG,GAAG,CAAC;AAE9B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAMH,IAAM,eAAe,uBAArB,MAAM,eAAgB,SAAQ,UAAU;IAmBvC,IAAI,kBAAkB;QACrB,MAAM,MAAM,GAAG,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;QAE7E,IAAI,MAAM,CAAC,MAAM,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YAChC,MAAM,QAAQ,GAAG,IAAI,QAAQ,EAAE,CAAC;YAEhC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;gBACxC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;YACvC,CAAC;YAED,OAAO,QAAQ,CAAC;QACjB,CAAC;QAED,OAAO,IAAI,CAAC,KAAK,CAAC;IACnB,CAAC;IAED;QACC,KAAK,EAAE,CAAC;QAnCR;;;;;UAKE;QAEH,cAAS,GAAG,GAAG,CAAC;QA6Bf,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;IAC5B,CAAC;IAED;;;;OAIG;IACH,IAAI,SAAS;QACZ,OAAO,IAAI,CAAC;IACb,CAAC;IAED;;;;OAIG;IACH,IAAI,YAAY;QACf,OAAO,IAAI,CAAC;IACb,CAAC;IAED,IAAI,mBAAmB;QACtB,OAAO,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAChD,CAAC;IAED,IAAI,iBAAiB;QACpB,OAAO,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC/C,CAAC;IAED,IAAI,cAAc;QACjB,OAAO,IAAI,CAAC,UAAU,IAAK,IAAI,CAAC,SAAS,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAU,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC;IACpG,CAAC;IAED;;;OAGG;IACH,IAAI,sBAAsB;QACzB,OAAO,OAAO,CAAC;IAChB,CAAC;IAED;;;OAGG;IACH,IAAI,kBAAkB;QACrB,OAAO,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,mBAAmB,IAAI,oBAAoB,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;IAC3G,CAAC;IAED;;;OAGG;IACH,IAAI,sBAAsB;QACzB,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACrB,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAC1B,CAAC;QACD,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;YACxD,OAAO,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAChD,CAAC;QACD,OAAO,EAAE,CAAC;IACX,CAAC;IAED;;;;OAIG;IACH,IAAI,cAAc;QACjB,OAAO,YAAY,CAAC,aAAa,CAAC,IAAI,CAAC,mBAAoB,GAAG,IAAI,CAAC,CAAC,aAAa,EAAE,CAAC;IACrF,CAAC;IAED;;;;OAIG;IACH,IAAI,YAAY;QACf,OAAO,YAAY,CAAC,aAAa,CAAC,IAAI,CAAC,iBAAkB,GAAG,IAAI,CAAC,CAAC,aAAa,EAAE,CAAC;IACnF,CAAC;IAED,IAAI,UAAU;QACb,OAAO,IAAI,CAAC,sBAAsB,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;IAC7C,CAAC;IAED,IAAI,QAAQ;QACX,OAAO,IAAI,CAAC,sBAAsB,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;IAC7C,CAAC;IAED;;OAEG;IACH,IAAI,YAAY;QACf,OAAO,IAAI,CAAC,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,mBAAmB,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;IACxI,CAAC;IAED;;OAEG;IACH,IAAI,mBAAmB;QACtB,OAAO,iBAAe,CAAC,UAAU,CAAC,OAAO,CAAC,qBAAqB,CAAC,CAAC;IAClE,CAAC;IAED;;OAEG;IACH,IAAI,oBAAoB;QACvB,OAAO,iBAAe,CAAC,UAAU,CAAC,OAAO,CAAC,uCAAuC,CAAC,CAAC;IACpF,CAAC;IAED;;OAEG;IACH,KAAK,CAAC,cAAc;QACnB,MAAM,QAAQ,GAAG,IAAI,CAAC,cAAc,CAAC,gBAAgB,EAAE,CAAC;QACxD,MAAM,cAAc,EAAE,CAAC;QACvB,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC,4DAA4D;IAC7G,CAAC;IAED;;OAEG;IACF,6BAA6B;QAC7B,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC,CAAC,oCAAoC;QAC1D,KAAK,CAAC,6BAA6B,EAAE,CAAC;IACvC,CAAC;IAED;;;;OAIG;IACH,OAAO,CAAC,KAAa;QACpB,MAAM,KAAK,GAAG,IAAI,CAAC,sBAAsB,CAAC,KAAK,CAAC,CAAC;QACjD,OAAO,KAAK,CAAC,MAAM,IAAI,CAAC,IAAI,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,iDAAiD;IACpI,CAAC;IAED;;;;OAIG;IACH,cAAc,CAAC,KAAa;QAC3B,OAAO,IAAI,CAAC,sBAAsB,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC,CAAC;IACjG,CAAC;IAED;;;OAGG;IACH,cAAc,CAAC,KAAa;QAC3B,MAAM,kBAAkB,GAAG,IAAI,CAAC,sBAAsB,CAAC,KAAK,CAAC,CAAC;QAC9D,MAAM,iBAAiB,GAAG,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAC;QAC5D,IAAI,kBAAkB,IAAI,iBAAiB,IAAI,kBAAkB,GAAG,iBAAiB,EAAE,CAAC,CAAC,4DAA4D;YACpJ,OAAO,IAAI,CAAC,WAAW,CAAC,iBAAiB,EAAE,kBAAkB,CAAC,CAAC;QAChE,CAAC;QACD,OAAO,IAAI,CAAC,WAAW,CAAC,kBAAkB,EAAE,iBAAiB,CAAC,CAAC;IAChE,CAAC;IAED;;OAEG;IACH,qBAAqB,CAAC,KAAsD;QAC3E,KAAK,CAAC,cAAc,EAAE,CAAC,CAAC,kFAAkF;QAC1G,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,cAAc,CAAC;QAE3C,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACzB,OAAO;QACR,CAAC;QAED,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC,CAAC,2FAA2F;YACrH,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;YAC5B,OAAO;QACR,CAAC;QACD,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,mEAAmE;QACpK,IAAI,CAAC,yBAAyB,CAAC,QAAQ,EAAE,IAAI,EAAE,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAC,CAAC;QAC5E,IAAI,CAAC,aAAa,EAAE,CAAC;IACtB,CAAC;IAED;;OAEG;IACH,KAAK,CAAC,gBAAgB,CAAC,MAAc,EAAE,IAAY,EAAE,YAAsB;QAC1E,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAAC,4DAA4D;YAC1F,OAAO,KAAK,CAAC,gBAAgB,CAAC,MAAM,EAAE,IAAI,EAAE,YAAY,CAAC,CAAC;QAC3D,CAAC;QAED,IAAI,QAAQ,GAAW,IAAI,CAAC,cAAc,CAAC,gBAAgB,EAAG,CAAC,CAAC,0DAA0D;QAC1H,IAAI,QAAgB,CAAC;QAErB,IAAI,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,mBAAmB,CAAC,EAAE,CAAC,CAAC,4EAA4E;YAC3I,MAAM,iBAAiB,GAAG,YAAY,CAAC,YAAY,CAAC,aAAa,CAAC,IAAI,CAAC,mBAAoB,GAAG,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;YAC/J,MAAM,qBAAqB,GAAG,iBAAiB,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC;YACjE,IAAI,qBAAqB,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAAC,4EAA4E;gBACjI,QAAQ,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;YAC9C,CAAC;YACD,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,qBAAqB,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,kEAAkE;QAC/I,CAAC;aAAM,CAAC;YACP,MAAM,eAAe,GAAG,YAAY,CAAC,YAAY,CAAC,aAAa,CAAC,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;YAC1J,MAAM,mBAAmB,GAAG,eAAe,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC;YAC7D,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,mBAAmB,EAAE,mBAAmB,CAAC,CAAC,CAAC,kEAAkE;YAC9I,IAAI,mBAAmB,GAAG,IAAI,CAAC,mBAAoB,EAAE,CAAC,CAAC,6EAA6E;gBACnI,QAAQ,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;YAC9C,CAAC;QACF,CAAC;QACD,IAAI,CAAC,yBAAyB,CAAC,QAAQ,EAAE,IAAI,EAAE,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAC,CAAC;QAE5E,MAAM,cAAc,EAAE,CAAC;QACvB,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC,gGAAgG;IACjJ,CAAC;IAED,IAAI,mBAAmB;QACtB,OAAO,IAAI,CAAC,SAAS,IAAI,iBAAiB,CAAC;IAC5C,CAAC;IAED,sBAAsB,CAAC,KAAa;QACnC,MAAM,WAAW,GAAkB,EAAE,CAAC;QACtC,MAAM,UAAU,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,mBAAmB,CAAC,CAAC;QAEhF,8EAA8E;QAC9E,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC;YACnC,WAAW,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;YAC3D,WAAW,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC;QACrB,CAAC;aAAM,CAAC;YACP,WAAW,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC,EAAE,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;YAC3F,WAAW,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;QACzF,CAAC;QAED,OAAO,WAAW,CAAC;IACpB,CAAC;IAED;;;OAGG;IACH,sBAAsB,CAAC,KAAa;QACnC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,EAAE,CAAC;YAChD,OAAO,SAAS,CAAC;QAClB,CAAC;QAED,MAAM,WAAW,GAAG,IAAI,CAAC,sBAAsB,CAAC,KAAK,CAAC,CAAC,CAAC,6EAA6E;QAErI,MAAM,UAAU,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,IAAI,CAAS,CAAC;QACxE,OAAO,UAAU,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC;IACpC,CAAC;IAED;;;OAGG;IACH,qBAAqB,CAAC,KAAa;QAClC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,EAAE,CAAC;YAChD,OAAO,SAAS,CAAC;QAClB,CAAC;QAED,MAAM,WAAW,GAAG,IAAI,CAAC,sBAAsB,CAAC,KAAK,CAAC,CAAC;QACvD,IAAI,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;YACpB,MAAM,UAAU,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,IAAI,CAAS,CAAC;YACxE,OAAO,UAAU,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC;QACpC,CAAC;QAED,OAAO,SAAS,CAAC;IAClB,CAAC;IAED;;;OAGG;IACH,WAAW,CAAC,kBAAsC,EAAE,iBAAqC;QACxF,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,mBAAmB,CAAC;QAC/C,IAAI,kBAAkB,EAAE,CAAC;YACxB,MAAM,eAAe,GAAG,IAAI,CAAC,uBAAuB,CAAC,kBAAkB,GAAG,IAAI,CAAC,CAAC;YAEhF,IAAI,CAAC,iBAAiB,EAAE,CAAC;gBACxB,OAAO,eAAe,CAAC;YACxB,CAAC;YAED,MAAM,cAAc,GAAG,IAAI,CAAC,uBAAuB,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;YAC9E,OAAO,GAAG,eAAe,IAAI,IAAI,CAAC,mBAAmB,IAAI,cAAc,EAAE,CAAC;QAC3E,CAAC;QAED,OAAO,EAAE,CAAC;IACX,CAAC;CACD,CAAA;AAxTA;IADC,QAAQ,EAAE;kDACK;AAOhB;IADC,QAAQ,EAAE;mDACS;AAff,eAAe;IALpB,aAAa,CAAC;QACd,GAAG,EAAE,sBAAsB;QAC3B,MAAM,EAAE,CAAC,UAAU,CAAC,MAAM,EAAE,kBAAkB,CAAC;QAC/C,QAAQ,EAAE,uBAAuB;KACjC,CAAC;GACI,eAAe,CAgUpB;AAED,eAAe,CAAC,MAAM,EAAE,CAAC;AAEzB,eAAe,eAAe,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport { renderFinished } from \"@ui5/webcomponents-base/dist/Render.js\";\nimport type { IFormInputElement } from \"@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js\";\nimport CalendarDate from \"@ui5/webcomponents-localization/dist/dates/CalendarDate.js\";\nimport modifyDateBy from \"@ui5/webcomponents-localization/dist/dates/modifyDateBy.js\";\nimport getTodayUTCTimestamp from \"@ui5/webcomponents-localization/dist/dates/getTodayUTCTimestamp.js\";\nimport {\n\tDATERANGE_DESCRIPTION,\n\tDATERANGEPICKER_POPOVER_ACCESSIBLE_NAME,\n} from \"./generated/i18n/i18n-defaults.js\";\nimport DateRangePickerTemplate from \"./DateRangePickerTemplate.js\";\n\n// Styles\nimport DateRangePickerCss from \"./generated/themes/DateRangePicker.css.js\";\nimport DatePicker from \"./DatePicker.js\";\n\nimport type {\n\tDatePickerChangeEventDetail as DateRangePickerChangeEventDetail,\n\tDatePickerInputEventDetail as DateRangePickerInputEventDetail,\n} from \"./DatePicker.js\";\nimport type { CalendarSelectionChangeEventDetail } from \"./Calendar.js\";\nimport type CalendarSelectionMode from \"./types/CalendarSelectionMode.js\";\n\nconst DEFAULT_DELIMITER = \"-\";\n\n/*\n @class\n \n ### Overview\n * The DateRangePicker enables the users to enter a localized date range using touch, mouse, keyboard input, or by selecting a date range in the calendar.\n \n ### Usage\n * The user can enter a date by:\n * Using the calendar that opens in a popup or typing it in directly in the input field (not available for mobile devices).\n * For the `ui5-daterange-picker`\n * ### ES6 Module Import\n \n `import \"@ui5/webcomponents/dist/DateRangePicker.js\";`\n \n ### Keyboard Handling\n * The `ui5-daterange-picker` provides advanced keyboard handling.\n \n When the `ui5-daterange-picker` input field is focused the user can\n * increment or decrement respectively the range start or end date, depending on where the cursor is.\n * The following shortcuts are available:\n \n - [Page Down] - Decrements the corresponding day of the month by one\n * - [Shift] + [Page Down] - Decrements the corresponding month by one\n * - [Shift] + [Ctrl] + [Page Down] - Decrements the corresponding year by one\n * - [Page Up] - Increments the corresponding day of the month by one\n * - [Shift] + [Page Up] - Increments the corresponding month by one\n * - [Shift] + [Ctrl] + [Page Up] - Increments the corresponding year by one\n * @constructor\n * @extends DatePicker\n * @since 1.0.0-rc.8\n * @public\n /\n@customElement({\n\ttag: \"ui5-daterange-picker\",\n\tstyles: [DatePicker.styles, DateRangePickerCss],\n\ttemplate: DateRangePickerTemplate,\n})\nclass DateRangePicker extends DatePicker implements IFormInputElement {\n\t /\n\t Determines the symbol which separates the dates.\n\t * If not supplied, the default time interval delimiter for the current locale will be used.\n\t * @default \"-\"\n\t * @public\n\t /\n\t@property()\n\tdelimiter = \"-\";\n\n\t /\n\t The first date in the range during selection (this is a temporary value, not the first date in the value range)\n\t * @private\n\t /\n\t@property()\n\t_tempValue?: string;\n\n\tprivate _prevDelimiter: string \| null;\n\n\tget formFormattedValue() {\n\t\tconst values = this._splitValueByDelimiter(this.value \|\| \"\").filter(Boolean);\n\n\t\tif (values.length && this.name) {\n\t\t\tconst formData = new FormData();\n\n\t\t\tfor (let i = 0; i < values.length; i++) {\n\t\t\t\tformData.append(this.name, values[i]);\n\t\t\t}\n\n\t\t\treturn formData;\n\t\t}\n\n\t\treturn this.value;\n\t}\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis._prevDelimiter = null;\n\t}\n\n\t/\n\t Note: The getter method is inherited and not supported. If called it will return an empty value.\n\t * @public\n\t * @default null\n\t /\n\tget dateValue(): Date \| null {\n\t\treturn null;\n\t}\n\n\t/\n\t Note: The getter method is inherited and not supported. If called it will return an empty value.\n\t * @public\n\t * @default null\n\t /\n\tget dateValueUTC(): Date \| null {\n\t\treturn null;\n\t}\n\n\tget _startDateTimestamp() {\n\t\treturn this._extractFirstTimestamp(this.value);\n\t}\n\n\tget _endDateTimestamp() {\n\t\treturn this._extractLastTimestamp(this.value);\n\t}\n\n\tget _tempTimestamp() {\n\t\treturn this._tempValue && (this.getFormat().parse(this._tempValue, true) as Date).getTime() / 1000;\n\t}\n\n\t/\n\t Required by DatePicker.js\n\t * @override\n\t /\n\tget _calendarSelectionMode(): `${CalendarSelectionMode}` {\n\t\treturn \"Range\";\n\t}\n\n\t/\n\t Required by DatePicker.js - set the calendar focus on the first selected date (or today if not set)\n\t * @override\n\t /\n\tget _calendarTimestamp() {\n\t\treturn this._tempTimestamp \|\| this._startDateTimestamp \|\| getTodayUTCTimestamp(this._primaryCalendarType);\n\t}\n\n\t/\n\t Required by DatePicker.js\n\t * @override\n\t /\n\tget _calendarSelectedDates() {\n\t\tif (this._tempValue) {\n\t\t\treturn [this._tempValue];\n\t\t}\n\t\tif (this.value && this._checkValueValidity(this.value)) {\n\t\t\treturn this._splitValueByDelimiter(this.value);\n\t\t}\n\t\treturn [];\n\t}\n\n\t/\n\t Returns the start date of the currently selected range as JavaScript Date instance.\n\t * @public\n\t * @default null\n\t /\n\tget startDateValue(): Date \| null {\n\t\treturn CalendarDate.fromTimestamp(this._startDateTimestamp! 1000).toLocalJSDate();\n\t}\n\n\t/*\n\t Returns the end date of the currently selected range as JavaScript Date instance.\n\t * @public\n\t * @default null\n\t /\n\tget endDateValue(): Date \| null {\n\t\treturn CalendarDate.fromTimestamp(this._endDateTimestamp! 1000).toLocalJSDate();\n\t}\n\n\tget startValue(): string {\n\t\treturn this._calendarSelectedDates[0] \|\| \"\";\n\t}\n\n\tget endValue(): string {\n\t\treturn this._calendarSelectedDates[1] \|\| \"\";\n\t}\n\n\t/*\n\t @override\n\t /\n\tget _placeholder() {\n\t\treturn this.placeholder !== undefined ? this.placeholder : `${this._displayFormat} ${this._effectiveDelimiter} ${this._displayFormat}`;\n\t}\n\n\t/\n\t @override\n\t /\n\tget dateAriaDescription() {\n\t\treturn DateRangePicker.i18nBundle.getText(DATERANGE_DESCRIPTION);\n\t}\n\n\t/\n\t @override\n\t /\n\tget pickerAccessibleName() {\n\t\treturn DateRangePicker.i18nBundle.getText(DATERANGEPICKER_POPOVER_ACCESSIBLE_NAME);\n\t}\n\n\t/\n\t @override\n\t /\n\tasync _onInputSubmit() {\n\t\tconst caretPos = this._dateTimeInput.getCaretPosition();\n\t\tawait renderFinished();\n\t\tthis._dateTimeInput.setCaretPosition(caretPos); // Return the caret on the previous position after rendering\n\t}\n\n\t/\n\t @override\n\t /\n\t onResponsivePopoverAfterClose() {\n\t\tthis._tempValue = \"\"; // reset _tempValue on popover close\n\t\tsuper.onResponsivePopoverAfterClose();\n\t}\n\n\t/\n\t Checks if a value is valid against the current date format of the DatePicker.\n\t * @public\n\t * @param value A value to be tested against the current date format\n\t /\n\tisValid(value: string): boolean {\n\t\tconst parts = this._splitValueByDelimiter(value);\n\t\treturn parts.length <= 2 && parts.every(dateString => super.isValid(dateString)); // must be at most 2 dates and each must be valid\n\t}\n\n\t/\n\t Checks if a date is between the minimum and maximum date.\n\t * @public\n\t * @param value A value to be checked\n\t /\n\tisInValidRange(value: string): boolean {\n\t\treturn this._splitValueByDelimiter(value).every(dateString => super.isInValidRange(dateString));\n\t}\n\n\t/\n\t Extract both dates as timestamps, flip if necessary, and build (which will use the desired format so we enforce the format too)\n\t * @override\n\t /\n\tnormalizeValue(value: string) {\n\t\tconst firstDateTimestamp = this._extractFirstTimestamp(value);\n\t\tconst lastDateTimestamp = this._extractLastTimestamp(value);\n\t\tif (firstDateTimestamp && lastDateTimestamp && firstDateTimestamp > lastDateTimestamp) { // if both are timestamps (not undefined), flip if necessary\n\t\t\treturn this._buildValue(lastDateTimestamp, firstDateTimestamp);\n\t\t}\n\t\treturn this._buildValue(firstDateTimestamp, lastDateTimestamp);\n\t}\n\n\t/\n\t @override\n\t /\n\tonSelectedDatesChange(event: CustomEvent<CalendarSelectionChangeEventDetail>) {\n\t\tevent.preventDefault(); // never let the calendar update its own dates, the parent component controls them\n\t\tconst values = event.detail.selectedValues;\n\n\t\tif (values.length === 0) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (values.length === 1) { // Do nothing until the user selects 2 dates, we don't change any state at all for one date\n\t\t\tthis._tempValue = values[0];\n\t\t\treturn;\n\t\t}\n\t\tconst newValue = this._buildValue(event.detail.selectedDates[0], event.detail.selectedDates[1]); // the value will be normalized so we don't need to order them here\n\t\tthis._updateValueAndFireEvents(newValue, true, [\"change\", \"value-changed\"]);\n\t\tthis._togglePicker();\n\t}\n\n\t/\n\t @override\n\t /\n\tasync _modifyDateValue(amount: number, unit: string, preserveDate?: boolean) {\n\t\tif (!this._endDateTimestamp) { // If empty or only one date -> treat as datepicker entirely\n\t\t\treturn super._modifyDateValue(amount, unit, preserveDate);\n\t\t}\n\n\t\tlet caretPos: number = this._dateTimeInput.getCaretPosition()!; // caret position is always number for input of type text;\n\t\tlet newValue: string;\n\n\t\tif (caretPos <= this.value.indexOf(this._effectiveDelimiter)) { // The user is focusing the first date -> change it and keep the second date\n\t\t\tconst startDateModified = modifyDateBy(CalendarDate.fromTimestamp(this._startDateTimestamp! 1000), amount, unit, preserveDate, this._minDate, this._maxDate);\n\t\t\tconst newStartDateTimestamp = startDateModified.valueOf() / 1000;\n\t\t\tif (newStartDateTimestamp > this._endDateTimestamp) { // dates flipped -> move the caret to the same position but on the last date\n\t\t\t\tcaretPos += Math.ceil(this.value.length / 2);\n\t\t\t}\n\t\t\tnewValue = this._buildValue(newStartDateTimestamp, this._endDateTimestamp); // the value will be normalized so we don't try to order them here\n\t\t} else {\n\t\t\tconst endDateModified = modifyDateBy(CalendarDate.fromTimestamp(this._endDateTimestamp * 1000), amount, unit, preserveDate, this._minDate, this._maxDate);\n\t\t\tconst newEndDateTimestamp = endDateModified.valueOf() / 1000;\n\t\t\tnewValue = this._buildValue(this._startDateTimestamp, newEndDateTimestamp); // the value will be normalized so we don't try to order them here\n\t\t\tif (newEndDateTimestamp < this._startDateTimestamp!) { // dates flipped -> move the caret to the same position but on the first date\n\t\t\t\tcaretPos -= Math.ceil(this.value.length / 2);\n\t\t\t}\n\t\t}\n\t\tthis._updateValueAndFireEvents(newValue, true, [\"change\", \"value-changed\"]);\n\n\t\tawait renderFinished();\n\t\tthis._dateTimeInput.setCaretPosition(caretPos); // Return the caret to the previous (or the adjusted, if dates flipped) position after rendering\n\t}\n\n\tget _effectiveDelimiter(): string {\n\t\treturn this.delimiter \|\| DEFAULT_DELIMITER;\n\t}\n\n\t_splitValueByDelimiter(value: string) {\n\t\tconst valuesArray: Array<string> = [];\n\t\tconst partsArray = value.split(this._prevDelimiter \|\| this._effectiveDelimiter);\n\n\t\t// if format successfully parse the value, the value contains only single date\n\t\tif (this.getFormat().parse(value)) {\n\t\t\tvaluesArray[0] = partsArray.join(this._effectiveDelimiter);\n\t\t\tvaluesArray[1] = \"\";\n\t\t} else {\n\t\t\tvaluesArray[0] = partsArray.slice(0, partsArray.length / 2).join(this._effectiveDelimiter);\n\t\t\tvaluesArray[1] = partsArray.slice(partsArray.length / 2).join(this._effectiveDelimiter);\n\t\t}\n\n\t\treturn valuesArray;\n\t}\n\n\t/*\n\t Returns a UTC timestamp, representing the first date in the value string or undefined if the value is empty\n\t * @private\n\t /\n\t_extractFirstTimestamp(value: string) {\n\t\tif (!value \|\| !this._checkValueValidity(value)) {\n\t\t\treturn undefined;\n\t\t}\n\n\t\tconst dateStrings = this._splitValueByDelimiter(value); // at least one item guaranteed due to the checks above (non-empty and valid)\n\n\t\tconst parsedDate = this.getFormat().parse(dateStrings[0], true) as Date;\n\t\treturn parsedDate.getTime() / 1000;\n\t}\n\n\t/\n\t Returns a UTC timestamp, representing the last date in the value string or undefined if the value is empty or there is just one date\n\t * @private\n\t /\n\t_extractLastTimestamp(value: string) {\n\t\tif (!value \|\| !this._checkValueValidity(value)) {\n\t\t\treturn undefined;\n\t\t}\n\n\t\tconst dateStrings = this._splitValueByDelimiter(value);\n\t\tif (dateStrings[1]) {\n\t\t\tconst parsedDate = this.getFormat().parse(dateStrings[1], true) as Date;\n\t\t\treturn parsedDate.getTime() / 1000;\n\t\t}\n\n\t\treturn undefined;\n\t}\n\n\t/\n\t Builds a string value out of two UTC timestamps - this method is the counterpart to _extractFirstTimestamp/_extractLastTimestamp\n\t * @private\n\t /\n\t_buildValue(firstDateTimestamp: number \| undefined, lastDateTimestamp: number \| undefined) {\n\t\tthis._prevDelimiter = this._effectiveDelimiter;\n\t\tif (firstDateTimestamp) {\n\t\t\tconst firstDateString = this._getStringFromTimestamp(firstDateTimestamp 1000);\n\n\t\t\tif (!lastDateTimestamp) {\n\t\t\t\treturn firstDateString;\n\t\t\t}\n\n\t\t\tconst lastDateString = this._getStringFromTimestamp(lastDateTimestamp * 1000);\n\t\t\treturn `${firstDateString} ${this._effectiveDelimiter} ${lastDateString}`;\n\t\t}\n\n\t\treturn \"\";\n\t}\n}\n\nDateRangePicker.define();\n\nexport default DateRangePicker;\nexport type {\n\tDateRangePickerChangeEventDetail,\n\tDateRangePickerInputEventDetail,\n};\n"]}

package/dist/DateTimePicker.d.ts CHANGED Viewed

@@ -1,7 +1,6 @@
 import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import type { IFormInputElement } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
 import "@ui5/webcomponents-icons/dist/date-time.js";
-import type ResponsivePopover from "./ResponsivePopover.js";
 import type { SegmentedButtonSelectionChangeEventDetail } from "./SegmentedButton.js";
 import type { CalendarSelectionChangeEventDetail } from "./Calendar.js";
 import DatePicker from "./DatePicker.js";
@@ -115,21 +114,6 @@ declare class DateTimePicker extends DatePicker implements IFormInputElement {
      * @private
      */
     _togglePicker(): void;
-    /**
-     * Read-only getters
-     */
-    get classes(): {
-        picker: {
-            "ui5-dt-picker-content--phone": boolean;
-        };
-        dateTimeView: {
-            "ui5-dt-cal--hidden": boolean;
-            "ui5-dt-time--hidden": boolean;
-        };
-        footer: {
-            "ui5-dt-picker-footer-time-hidden": boolean;
-        };
-    };
     get _formatPattern(): string;
     get _calendarTimestamp(): number;
     get _calendarSelectedDates(): string[];
@@ -142,7 +126,7 @@ declare class DateTimePicker extends DatePicker implements IFormInputElement {
     get showFooter(): boolean;
     get showDateView(): boolean;
     get showTimeView(): boolean;
-    get phone(): boolean;
+    get _phoneView(): boolean;
     /**
      * @override
      */
@@ -188,7 +172,6 @@ declare class DateTimePicker extends DatePicker implements IFormInputElement {
      * @override
      */
     _modifyDateValue(amount: number, unit: string, preserveDate: boolean): void;
-    getPicker(): ResponsivePopover;
     getSelectedDateTime(): Date;
     getFormat(): import("sap/ui/core/format/DateFormat").default;
     /**

package/dist/DateTimePicker.js CHANGED Viewed

@@ -16,6 +16,7 @@ import "@ui5/webcomponents-icons/dist/date-time.js";
 import UI5Date from "@ui5/webcomponents-localization/dist/dates/UI5Date.js";
 import DateFormat from "@ui5/webcomponents-localization/dist/DateFormat.js";
 import DatePicker from "./DatePicker.js";
+import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
 // i18n texts
 import { TIMEPICKER_SUBMIT_BUTTON, TIMEPICKER_CANCEL_BUTTON, DATETIME_DESCRIPTION, DATETIME_PICKER_DATE_BUTTON, DATETIME_PICKER_TIME_BUTTON, DATETIMEPICKER_POPOVER_ACCESSIBLE_NAME, } from "./generated/i18n/i18n-defaults.js";
 // Template
@@ -145,24 +146,6 @@ let DateTimePicker = DateTimePicker_1 = class DateTimePicker extends DatePicker
             };
         }
     }
-    /**
-     * Read-only getters
-     */
-    get classes() {
-        return {
-            // Remove after deliting the hbs template, the classes are added in the jsx template
-            picker: {
-                "ui5-dt-picker-content--phone": this.phone,
-            },
-            dateTimeView: {
-                "ui5-dt-cal--hidden": this.phone && this.showTimeView,
-                "ui5-dt-time--hidden": this.phone && this.showDateView,
-            },
-            footer: {
-                "ui5-dt-picker-footer-time-hidden": (this.phone && this.showTimeView) || (this.phone && this.showDateView),
-            },
-        };
-    }
     get _formatPattern() {
         const hasHours = !!(this.formatPattern || "").match(/H/i);
         const fallback = !this.formatPattern || !hasHours;
@@ -197,13 +180,13 @@ let DateTimePicker = DateTimePicker_1 = class DateTimePicker extends DatePicker
         return true;
     }
     get showDateView() {
-        return this.phone ? !this._showTimeView : true;
+        return this._phoneView ? !this._showTimeView : true;
     }
     get showTimeView() {
-        return this.phone ? this._showTimeView : true;
+        return this._phoneView ? this._showTimeView : true;
     }
-    get phone() {
-        return super.phone || this._phoneMode;
+    get _phoneView() {
+        return isPhone() || this._phoneMode;
     }
     /**
      * @override
@@ -303,9 +286,6 @@ let DateTimePicker = DateTimePicker_1 = class DateTimePicker extends DatePicker
         const newValue = this.formatValue(modifiedLocalDate);
         this._updateValueAndFireEvents(newValue, true, ["change", "value-changed"]);
     }
-    getPicker() {
-        return this.shadowRoot.querySelector("[ui5-responsive-popover]");
-    }
     getSelectedDateTime() {
         const selectedDate = this.getFormat().parse(this._calendarSelectedDates[0]);
         const selectedTime = this.getFormat().parse(this._timeSelectionValue);

package/dist/DateTimePicker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DateTimePicker.js","sourceRoot":"","sources":["../src/DateTimePicker.ts"],"names":[],"mappings":"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","sourcesContent":["import property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport type { ResizeObserverCallback } from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport getLocale from \"@ui5/webcomponents-base/dist/locale/getLocale.js\";\nimport getCachedLocaleDataInstance from \"@ui5/webcomponents-localization/dist/getCachedLocaleDataInstance.js\";\nimport modifyDateBy from \"@ui5/webcomponents-localization/dist/dates/modifyDateBy.js\";\nimport CalendarDate from \"@ui5/webcomponents-localization/dist/dates/CalendarDate.js\";\nimport type { IFormInputElement } from \"@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js\";\nimport \"@ui5/webcomponents-icons/dist/date-time.js\";\nimport UI5Date from \"@ui5/webcomponents-localization/dist/dates/UI5Date.js\";\nimport DateFormat from \"@ui5/webcomponents-localization/dist/DateFormat.js\";\nimport type ResponsivePopover from \"./ResponsivePopover.js\";\nimport type { SegmentedButtonSelectionChangeEventDetail } from \"./SegmentedButton.js\";\nimport type { CalendarSelectionChangeEventDetail } from \"./Calendar.js\";\nimport DatePicker from \"./DatePicker.js\";\nimport type {\n\tDatePickerChangeEventDetail as DateTimePickerChangeEventDetail,\n\tDatePickerInputEventDetail as DateTimePickerInputEventDetail,\n} from \"./DatePicker.js\";\nimport type { TimeSelectionChangeEventDetail } from \"./TimePickerInternals.js\";\n\n// i18n texts\nimport {\n\tTIMEPICKER_SUBMIT_BUTTON,\n\tTIMEPICKER_CANCEL_BUTTON,\n\tDATETIME_DESCRIPTION,\n\tDATETIME_PICKER_DATE_BUTTON,\n\tDATETIME_PICKER_TIME_BUTTON,\n\tDATETIMEPICKER_POPOVER_ACCESSIBLE_NAME,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n// Template\nimport DateTimePickerTemplate from \"./DateTimePickerTemplate.js\";\n\n// Styles\nimport DateTimePickerCss from \"./generated/themes/DateTimePicker.css.js\";\nimport DateTimePickerPopoverCss from \"./generated/themes/DateTimePickerPopover.css.js\";\nimport CalendarPickersMode from \"./types/CalendarPickersMode.js\";\n\nconst PHONE_MODE_BREAKPOINT = 640; // px\n\ntype PreviewValues = {\n\ttimeSelectionValue?: string,\n\tcalendarTimestamp?: number,\n\tcalendarValue?: string,\n}\n\n/*\n @class\n \n ### Overview\n * The `DateTimePicker` component alows users to select both date (day, month and year) and time (hours, minutes and seconds)\n * and for the purpose it consists of input field and Date/Time picker.\n \n ### Usage\n \n Use the `DateTimePicker` if you need a combined date and time input component.\n * Don't use it if you want to use either date, or time value.\n * In this case, use the `DatePicker` or the `TimePicker` components instead.\n \n The user can set date/time by:\n \n - using the calendar and the time selectors\n * - typing in the input field\n \n Programmatically, to set date/time for the `DateTimePicker`, use the `value` property\n \n ### Formatting\n \n The value entered by typing into the input field must fit to the used date/time format.\n \n Supported format options are pattern-based on Unicode LDML Date Format notation.\n * For more information, see [UTS #35: Unicode Locale Data Markup Language](https://unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table).\n \n Example: the following format `dd/MM/yyyy, hh:mm:ss aa`\n * corresponds the `13/04/2020, 03:16:16 AM` value.\n \n The small 'h' defines \"12\" hours format and the \"aa\" symbols - \"AM/PM\" time periods.\n \n Example: the following format `dd/MM/yyyy, HH:mm:ss`\n * corresponds the `13/04/2020, 15:16:16` value.\n \n The capital 'H' indicates \"24\" hours format.\n \n Note: If the `formatPattern` does NOT include time,\n * the `DateTimePicker` will fallback to the default time format according to the locale.\n \n Note: If no placeholder is set to the `DateTimePicker`,\n * the current `formatPattern` is displayed as a placeholder.\n * If another placeholder is needed, it must be set or in case no placeholder is needed - it can be set to an empty string.\n \n Note: If the user input does NOT match the `formatPattern`,\n * the `DateTimePicker` makes an attempt to parse it based on the\n * locale settings.\n \n ### Responsive behavior\n \n The `DateTimePicker` is responsive and fully adapts to all devices.\n * For larger screens, such as tablet or desktop, it is displayed as a popover, while\n * on phone devices, it is displayed full screen.\n \n ### ES6 Module Import\n \n `import \"@ui5/webcomponents/dist/DateTimePicker.js\";`\n * @constructor\n * @extends DatePicker\n * @since 1.0.0-rc.7\n * @public\n /\n@customElement({\n\ttag: \"ui5-datetime-picker\",\n\ttemplate: DateTimePickerTemplate,\n\tstyles: [\n\t\tDatePicker.styles,\n\t\tDateTimePickerCss,\n\t\tDateTimePickerPopoverCss,\n\t],\n})\nclass DateTimePicker extends DatePicker implements IFormInputElement {\n\t/\n\t Defines the visibility of the time view in `phoneMode`.\n\t * For more information, see the `phoneMode` property.\n\t \n\t Note: The date view would be displayed by default.\n\t * @default false\n\t * @private\n\t /\n\t@property({ type: Boolean, noAttribute: true })\n\t_showTimeView = false\n\n\t/\n\t Defines if the `DateTimePicker` should be displayed in phone mode.\n\t * The phone mode turns on when the component is used on small screens or phone devices.\n\t * In phone mode the user can see either the calendar view, or the time view\n\t * and can switch between the views via toggle buttons.\n\t * @default false\n\t * @private\n\t /\n\t@property({ type: Boolean })\n\t_phoneMode = false;\n\n\t/\n\t Selected, but not yet confirmed date/time\n\t * @private\n\t /\n\t@property({ type: Object })\n\t_previewValues: PreviewValues = {};\n\n\t_handleResizeBound: ResizeObserverCallback;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis._handleResizeBound = this._handleResize.bind(this);\n\t}\n\n\t/\n\t @override\n\t /\n\tonResponsivePopoverAfterClose() {\n\t\tsuper.onResponsivePopoverAfterClose();\n\t\tthis._showTimeView = false;\n\t\tthis._previewValues = {};\n\t}\n\n\t/\n\t LIFECYCLE METHODS\n\t /\n\n\tonEnterDOM() {\n\t\tResizeHandler.register(document.body, this._handleResizeBound);\n\t}\n\n\tonExitDOM() {\n\t\tResizeHandler.deregister(document.body, this._handleResizeBound);\n\t}\n\n\t/\n\t @override\n\t * @private\n\t /\n\t_togglePicker() {\n\t\tsuper._togglePicker();\n\n\t\tif (this.open) {\n\t\t\tthis._previewValues = {\n\t\t\t\t...this._previewValues,\n\t\t\t\ttimeSelectionValue: this.value \|\| this.getFormat().format(UI5Date.getInstance()),\n\t\t\t};\n\t\t}\n\t}\n\n\t/\n\t Read-only getters\n\t /\n\n\tget classes() {\n\t\treturn {\n\t\t\t// Remove after deliting the hbs template, the classes are added in the jsx template\n\t\t\tpicker: {\n\t\t\t\t\"ui5-dt-picker-content--phone\": this.phone,\n\t\t\t},\n\t\t\tdateTimeView: {\n\t\t\t\t\"ui5-dt-cal--hidden\": this.phone && this.showTimeView,\n\t\t\t\t\"ui5-dt-time--hidden\": this.phone && this.showDateView,\n\t\t\t},\n\t\t\tfooter: {\n\t\t\t\t\"ui5-dt-picker-footer-time-hidden\": (this.phone && this.showTimeView) \|\| (this.phone && this.showDateView),\n\t\t\t},\n\t\t};\n\t}\n\n\tget _formatPattern() {\n\t\tconst hasHours = !!(this.formatPattern \|\| \"\").match(/H/i);\n\t\tconst fallback = !this.formatPattern \|\| !hasHours;\n\n\t\tconst localeData = getCachedLocaleDataInstance(getLocale());\n\t\treturn fallback ? localeData.getCombinedDateTimePattern(\"medium\", \"medium\", this._primaryCalendarType) : (this.formatPattern \|\| \"\");\n\t}\n\n\tget _calendarTimestamp() {\n\t\treturn this._previewValues.calendarTimestamp ? this._previewValues.calendarTimestamp : super._calendarTimestamp;\n\t}\n\n\tget _calendarSelectedDates() {\n\t\treturn this._previewValues.calendarValue ? [this._previewValues.calendarValue] : super._calendarSelectedDates;\n\t}\n\n\tget _timeSelectionValue() {\n\t\treturn this._previewValues.timeSelectionValue ? this._previewValues.timeSelectionValue : this.value;\n\t}\n\n\tget openIconName() {\n\t\treturn \"date-time\";\n\t}\n\n\tget btnOKLabel() {\n\t\treturn DateTimePicker.i18nBundle.getText(TIMEPICKER_SUBMIT_BUTTON);\n\t}\n\n\tget btnCancelLabel() {\n\t\treturn DateTimePicker.i18nBundle.getText(TIMEPICKER_CANCEL_BUTTON);\n\t}\n\n\tget btnDateLabel() {\n\t\treturn DateTimePicker.i18nBundle.getText(DATETIME_PICKER_DATE_BUTTON);\n\t}\n\n\tget btnTimeLabel() {\n\t\treturn DateTimePicker.i18nBundle.getText(DATETIME_PICKER_TIME_BUTTON);\n\t}\n\n\tget showFooter() {\n\t\treturn true;\n\t}\n\n\tget showDateView() {\n\t\treturn this.phone ? !this._showTimeView : true;\n\t}\n\n\tget showTimeView() {\n\t\treturn this.phone ? this._showTimeView : true;\n\t}\n\n\tget phone() {\n\t\treturn super.phone \|\| this._phoneMode;\n\t}\n\n\t/\n\t @override\n\t /\n\tget dateAriaDescription() {\n\t\treturn DateTimePicker.i18nBundle.getText(DATETIME_DESCRIPTION);\n\t}\n\n\t/\n\t @override\n\t /\n\tget pickerAccessibleName() {\n\t\treturn DateTimePicker.i18nBundle.getText(DATETIMEPICKER_POPOVER_ACCESSIBLE_NAME);\n\t}\n\n\t/\n\t Defines whether the dialog on mobile should have header\n\t * @private\n\t /\n\tget _shouldHideHeader() {\n\t\treturn true;\n\t}\n\n\t/\n\t EVENT HANDLERS\n\t /\n\n\t/\n\t @override\n\t /\n\tonSelectedDatesChange(e: CustomEvent<CalendarSelectionChangeEventDetail>) {\n\t\te.preventDefault();\n\t\t// @ts-ignore Needed for FF\n\t\tconst dateTimePickerContent = e.path ? e.path[1] : e.composedPath()[1];\n\t\tthis._previewValues = {\n\t\t\t...this._previewValues,\n\t\t\tcalendarTimestamp: e.detail.timestamp,\n\t\t\tcalendarValue: e.detail.selectedValues[0],\n\t\t\ttimeSelectionValue: dateTimePickerContent.lastChild.value,\n\t\t};\n\t}\n\n\tonTimeSelectionChange(e: CustomEvent<TimeSelectionChangeEventDetail>) {\n\t\tthis._previewValues = {\n\t\t\t...this._previewValues,\n\t\t\ttimeSelectionValue: e.detail.value,\n\t\t};\n\t}\n\n\t/\n\t Handles document resize to switch between `phoneMode` and normal appearance.\n\t /\n\t_handleResize() {\n\t\tconst documentWidth = document.body.offsetWidth;\n\t\tconst toPhoneMode = documentWidth <= PHONE_MODE_BREAKPOINT;\n\t\tconst modeChange = (toPhoneMode && !this._phoneMode) \|\| (!toPhoneMode && this._phoneMode); // XOR not allowed by lint\n\n\t\tif (modeChange) {\n\t\t\tthis._phoneMode = toPhoneMode;\n\t\t}\n\t}\n\n\tget _submitDisabled() {\n\t\treturn !this._calendarSelectedDates \|\| !this._calendarSelectedDates.length;\n\t}\n\n\t/\n\t Handles clicking on the `submit` button, within the picker`s footer.\n\t /\n\t_submitClick() {\n\t\tconst selectedDate = this.getSelectedDateTime();\n\n\t\tconst value = this.getFormat().format(selectedDate);\n\t\tif (this.value !== value) {\n\t\t\tthis._updateValueAndFireEvents(value, true, [\"change\", \"value-changed\"]);\n\t\t}\n\n\t\tthis._togglePicker();\n\t}\n\n\t/\n\t Handles clicking on the `cancel` button, within the picker`s footer,\n\t * that would disregard the user selection.\n\t /\n\t_cancelClick() {\n\t\tthis._togglePicker();\n\t}\n\n\t/\n\t Handles the date/time switch available in `phoneMode` to switch\n\t * between the date and time views.\n\t * @param e\n\t /\n\t_dateTimeSwitchChange(e: CustomEvent<SegmentedButtonSelectionChangeEventDetail>) { // Note: fix when SegmentedButton is implemented in TS\n\t\tconst selectedItem = e.detail.selectedItems[0];\n\t\tthis._showTimeView = selectedItem.getAttribute(\"data-ui5-key\") === \"Time\";\n\t}\n\n\t/\n\t @override\n\t /\n\t_modifyDateValue(amount: number, unit: string, preserveDate: boolean) {\n\t\tif (!this.dateValue) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst modifiedDate = modifyDateBy(CalendarDate.fromLocalJSDate(this.dateValue), amount, unit, preserveDate, this._minDate, this._maxDate);\n\t\tconst modifiedLocalDate = modifiedDate.toLocalJSDate();\n\t\tmodifiedLocalDate.setHours(this.dateValue.getHours());\n\t\tmodifiedLocalDate.setMinutes(this.dateValue.getMinutes());\n\t\tmodifiedLocalDate.setSeconds(this.dateValue.getSeconds());\n\n\t\tconst newValue = this.formatValue(modifiedLocalDate);\n\t\tthis._updateValueAndFireEvents(newValue, true, [\"change\", \"value-changed\"]);\n\t}\n\n\tgetPicker() {\n\t\treturn this.shadowRoot!.querySelector<ResponsivePopover>(\"[ui5-responsive-popover]\")!;\n\t}\n\n\tgetSelectedDateTime() {\n\t\tconst selectedDate = this.getFormat().parse(this._calendarSelectedDates[0]) as Date;\n\t\tconst selectedTime = this.getFormat().parse(this._timeSelectionValue) as Date;\n\t\tif (selectedTime) {\n\t\t\tselectedDate.setHours(selectedTime.getHours());\n\t\t\tselectedDate.setMinutes(selectedTime.getMinutes());\n\t\t\tselectedDate.setSeconds(selectedTime.getSeconds());\n\t\t}\n\n\t\treturn selectedDate;\n\t}\n\n\tgetFormat() {\n\t\treturn this._isPattern\n\t\t\t? DateFormat.getDateTimeInstance({\n\t\t\t\tstrictParsing: true,\n\t\t\t\tpattern: this._formatPattern,\n\t\t\t\tcalendarType: this._primaryCalendarType,\n\t\t\t})\n\t\t\t: DateFormat.getDateTimeInstance({\n\t\t\t\tstrictParsing: true,\n\t\t\t\tstyle: this._formatPattern,\n\t\t\t\tcalendarType: this._primaryCalendarType,\n\t\t\t});\n\t}\n\n\t/\n\t @override\n\t */\n\tget _calendarPickersMode() {\n\t\treturn CalendarPickersMode.DAY_MONTH_YEAR;\n\t}\n}\n\nDateTimePicker.define();\n\nexport default DateTimePicker;\nexport type {\n\tDateTimePickerChangeEventDetail,\n\tDateTimePickerInputEventDetail,\n};\n"]}
1	+ {"version":3,"file":"DateTimePicker.js","sourceRoot":"","sources":["../src/DateTimePicker.ts"],"names":[],"mappings":"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","sourcesContent":["import property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport type { ResizeObserverCallback } from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport getLocale from \"@ui5/webcomponents-base/dist/locale/getLocale.js\";\nimport getCachedLocaleDataInstance from \"@ui5/webcomponents-localization/dist/getCachedLocaleDataInstance.js\";\nimport modifyDateBy from \"@ui5/webcomponents-localization/dist/dates/modifyDateBy.js\";\nimport CalendarDate from \"@ui5/webcomponents-localization/dist/dates/CalendarDate.js\";\nimport type { IFormInputElement } from \"@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js\";\nimport \"@ui5/webcomponents-icons/dist/date-time.js\";\nimport UI5Date from \"@ui5/webcomponents-localization/dist/dates/UI5Date.js\";\nimport DateFormat from \"@ui5/webcomponents-localization/dist/DateFormat.js\";\nimport type { SegmentedButtonSelectionChangeEventDetail } from \"./SegmentedButton.js\";\nimport type { CalendarSelectionChangeEventDetail } from \"./Calendar.js\";\nimport DatePicker from \"./DatePicker.js\";\nimport { isPhone } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport type {\n\tDatePickerChangeEventDetail as DateTimePickerChangeEventDetail,\n\tDatePickerInputEventDetail as DateTimePickerInputEventDetail,\n} from \"./DatePicker.js\";\nimport type { TimeSelectionChangeEventDetail } from \"./TimePickerInternals.js\";\n\n// i18n texts\nimport {\n\tTIMEPICKER_SUBMIT_BUTTON,\n\tTIMEPICKER_CANCEL_BUTTON,\n\tDATETIME_DESCRIPTION,\n\tDATETIME_PICKER_DATE_BUTTON,\n\tDATETIME_PICKER_TIME_BUTTON,\n\tDATETIMEPICKER_POPOVER_ACCESSIBLE_NAME,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n// Template\nimport DateTimePickerTemplate from \"./DateTimePickerTemplate.js\";\n\n// Styles\nimport DateTimePickerCss from \"./generated/themes/DateTimePicker.css.js\";\nimport DateTimePickerPopoverCss from \"./generated/themes/DateTimePickerPopover.css.js\";\nimport CalendarPickersMode from \"./types/CalendarPickersMode.js\";\n\nconst PHONE_MODE_BREAKPOINT = 640; // px\n\ntype PreviewValues = {\n\ttimeSelectionValue?: string,\n\tcalendarTimestamp?: number,\n\tcalendarValue?: string,\n}\n\n/*\n @class\n \n ### Overview\n * The `DateTimePicker` component alows users to select both date (day, month and year) and time (hours, minutes and seconds)\n * and for the purpose it consists of input field and Date/Time picker.\n \n ### Usage\n \n Use the `DateTimePicker` if you need a combined date and time input component.\n * Don't use it if you want to use either date, or time value.\n * In this case, use the `DatePicker` or the `TimePicker` components instead.\n \n The user can set date/time by:\n \n - using the calendar and the time selectors\n * - typing in the input field\n \n Programmatically, to set date/time for the `DateTimePicker`, use the `value` property\n \n ### Formatting\n \n The value entered by typing into the input field must fit to the used date/time format.\n \n Supported format options are pattern-based on Unicode LDML Date Format notation.\n * For more information, see [UTS #35: Unicode Locale Data Markup Language](https://unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table).\n \n Example: the following format `dd/MM/yyyy, hh:mm:ss aa`\n * corresponds the `13/04/2020, 03:16:16 AM` value.\n \n The small 'h' defines \"12\" hours format and the \"aa\" symbols - \"AM/PM\" time periods.\n \n Example: the following format `dd/MM/yyyy, HH:mm:ss`\n * corresponds the `13/04/2020, 15:16:16` value.\n \n The capital 'H' indicates \"24\" hours format.\n \n Note: If the `formatPattern` does NOT include time,\n * the `DateTimePicker` will fallback to the default time format according to the locale.\n \n Note: If no placeholder is set to the `DateTimePicker`,\n * the current `formatPattern` is displayed as a placeholder.\n * If another placeholder is needed, it must be set or in case no placeholder is needed - it can be set to an empty string.\n \n Note: If the user input does NOT match the `formatPattern`,\n * the `DateTimePicker` makes an attempt to parse it based on the\n * locale settings.\n \n ### Responsive behavior\n \n The `DateTimePicker` is responsive and fully adapts to all devices.\n * For larger screens, such as tablet or desktop, it is displayed as a popover, while\n * on phone devices, it is displayed full screen.\n \n ### ES6 Module Import\n \n `import \"@ui5/webcomponents/dist/DateTimePicker.js\";`\n * @constructor\n * @extends DatePicker\n * @since 1.0.0-rc.7\n * @public\n /\n@customElement({\n\ttag: \"ui5-datetime-picker\",\n\ttemplate: DateTimePickerTemplate,\n\tstyles: [\n\t\tDatePicker.styles,\n\t\tDateTimePickerCss,\n\t\tDateTimePickerPopoverCss,\n\t],\n})\nclass DateTimePicker extends DatePicker implements IFormInputElement {\n\t/\n\t Defines the visibility of the time view in `phoneMode`.\n\t * For more information, see the `phoneMode` property.\n\t \n\t Note: The date view would be displayed by default.\n\t * @default false\n\t * @private\n\t /\n\t@property({ type: Boolean, noAttribute: true })\n\t_showTimeView = false\n\n\t/\n\t Defines if the `DateTimePicker` should be displayed in phone mode.\n\t * The phone mode turns on when the component is used on small screens or phone devices.\n\t * In phone mode the user can see either the calendar view, or the time view\n\t * and can switch between the views via toggle buttons.\n\t * @default false\n\t * @private\n\t /\n\t@property({ type: Boolean })\n\t_phoneMode = false;\n\n\t/\n\t Selected, but not yet confirmed date/time\n\t * @private\n\t /\n\t@property({ type: Object })\n\t_previewValues: PreviewValues = {};\n\n\t_handleResizeBound: ResizeObserverCallback;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis._handleResizeBound = this._handleResize.bind(this);\n\t}\n\n\t/\n\t @override\n\t /\n\tonResponsivePopoverAfterClose() {\n\t\tsuper.onResponsivePopoverAfterClose();\n\t\tthis._showTimeView = false;\n\t\tthis._previewValues = {};\n\t}\n\n\t/\n\t LIFECYCLE METHODS\n\t /\n\n\tonEnterDOM() {\n\t\tResizeHandler.register(document.body, this._handleResizeBound);\n\t}\n\n\tonExitDOM() {\n\t\tResizeHandler.deregister(document.body, this._handleResizeBound);\n\t}\n\n\t/\n\t @override\n\t * @private\n\t /\n\t_togglePicker() {\n\t\tsuper._togglePicker();\n\n\t\tif (this.open) {\n\t\t\tthis._previewValues = {\n\t\t\t\t...this._previewValues,\n\t\t\t\ttimeSelectionValue: this.value \|\| this.getFormat().format(UI5Date.getInstance()),\n\t\t\t};\n\t\t}\n\t}\n\n\tget _formatPattern() {\n\t\tconst hasHours = !!(this.formatPattern \|\| \"\").match(/H/i);\n\t\tconst fallback = !this.formatPattern \|\| !hasHours;\n\n\t\tconst localeData = getCachedLocaleDataInstance(getLocale());\n\t\treturn fallback ? localeData.getCombinedDateTimePattern(\"medium\", \"medium\", this._primaryCalendarType) : (this.formatPattern \|\| \"\");\n\t}\n\n\tget _calendarTimestamp() {\n\t\treturn this._previewValues.calendarTimestamp ? this._previewValues.calendarTimestamp : super._calendarTimestamp;\n\t}\n\n\tget _calendarSelectedDates() {\n\t\treturn this._previewValues.calendarValue ? [this._previewValues.calendarValue] : super._calendarSelectedDates;\n\t}\n\n\tget _timeSelectionValue() {\n\t\treturn this._previewValues.timeSelectionValue ? this._previewValues.timeSelectionValue : this.value;\n\t}\n\n\tget openIconName() {\n\t\treturn \"date-time\";\n\t}\n\n\tget btnOKLabel() {\n\t\treturn DateTimePicker.i18nBundle.getText(TIMEPICKER_SUBMIT_BUTTON);\n\t}\n\n\tget btnCancelLabel() {\n\t\treturn DateTimePicker.i18nBundle.getText(TIMEPICKER_CANCEL_BUTTON);\n\t}\n\n\tget btnDateLabel() {\n\t\treturn DateTimePicker.i18nBundle.getText(DATETIME_PICKER_DATE_BUTTON);\n\t}\n\n\tget btnTimeLabel() {\n\t\treturn DateTimePicker.i18nBundle.getText(DATETIME_PICKER_TIME_BUTTON);\n\t}\n\n\tget showFooter() {\n\t\treturn true;\n\t}\n\n\tget showDateView() {\n\t\treturn this._phoneView ? !this._showTimeView : true;\n\t}\n\n\tget showTimeView() {\n\t\treturn this._phoneView ? this._showTimeView : true;\n\t}\n\n\tget _phoneView() {\n\t\treturn isPhone() \|\| this._phoneMode;\n\t}\n\n\t/\n\t @override\n\t /\n\tget dateAriaDescription() {\n\t\treturn DateTimePicker.i18nBundle.getText(DATETIME_DESCRIPTION);\n\t}\n\n\t/\n\t @override\n\t /\n\tget pickerAccessibleName() {\n\t\treturn DateTimePicker.i18nBundle.getText(DATETIMEPICKER_POPOVER_ACCESSIBLE_NAME);\n\t}\n\n\t/\n\t Defines whether the dialog on mobile should have header\n\t * @private\n\t /\n\tget _shouldHideHeader() {\n\t\treturn true;\n\t}\n\n\t/\n\t EVENT HANDLERS\n\t /\n\n\t/\n\t @override\n\t /\n\tonSelectedDatesChange(e: CustomEvent<CalendarSelectionChangeEventDetail>) {\n\t\te.preventDefault();\n\t\t// @ts-ignore Needed for FF\n\t\tconst dateTimePickerContent = e.path ? e.path[1] : e.composedPath()[1];\n\t\tthis._previewValues = {\n\t\t\t...this._previewValues,\n\t\t\tcalendarTimestamp: e.detail.timestamp,\n\t\t\tcalendarValue: e.detail.selectedValues[0],\n\t\t\ttimeSelectionValue: dateTimePickerContent.lastChild.value,\n\t\t};\n\t}\n\n\tonTimeSelectionChange(e: CustomEvent<TimeSelectionChangeEventDetail>) {\n\t\tthis._previewValues = {\n\t\t\t...this._previewValues,\n\t\t\ttimeSelectionValue: e.detail.value,\n\t\t};\n\t}\n\n\t/\n\t Handles document resize to switch between `phoneMode` and normal appearance.\n\t /\n\t_handleResize() {\n\t\tconst documentWidth = document.body.offsetWidth;\n\t\tconst toPhoneMode = documentWidth <= PHONE_MODE_BREAKPOINT;\n\t\tconst modeChange = (toPhoneMode && !this._phoneMode) \|\| (!toPhoneMode && this._phoneMode); // XOR not allowed by lint\n\n\t\tif (modeChange) {\n\t\t\tthis._phoneMode = toPhoneMode;\n\t\t}\n\t}\n\n\tget _submitDisabled() {\n\t\treturn !this._calendarSelectedDates \|\| !this._calendarSelectedDates.length;\n\t}\n\n\t/\n\t Handles clicking on the `submit` button, within the picker`s footer.\n\t /\n\t_submitClick() {\n\t\tconst selectedDate = this.getSelectedDateTime();\n\n\t\tconst value = this.getFormat().format(selectedDate);\n\t\tif (this.value !== value) {\n\t\t\tthis._updateValueAndFireEvents(value, true, [\"change\", \"value-changed\"]);\n\t\t}\n\n\t\tthis._togglePicker();\n\t}\n\n\t/\n\t Handles clicking on the `cancel` button, within the picker`s footer,\n\t * that would disregard the user selection.\n\t /\n\t_cancelClick() {\n\t\tthis._togglePicker();\n\t}\n\n\t/\n\t Handles the date/time switch available in `phoneMode` to switch\n\t * between the date and time views.\n\t * @param e\n\t /\n\t_dateTimeSwitchChange(e: CustomEvent<SegmentedButtonSelectionChangeEventDetail>) { // Note: fix when SegmentedButton is implemented in TS\n\t\tconst selectedItem = e.detail.selectedItems[0];\n\t\tthis._showTimeView = selectedItem.getAttribute(\"data-ui5-key\") === \"Time\";\n\t}\n\n\t/\n\t @override\n\t /\n\t_modifyDateValue(amount: number, unit: string, preserveDate: boolean) {\n\t\tif (!this.dateValue) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst modifiedDate = modifyDateBy(CalendarDate.fromLocalJSDate(this.dateValue), amount, unit, preserveDate, this._minDate, this._maxDate);\n\t\tconst modifiedLocalDate = modifiedDate.toLocalJSDate();\n\t\tmodifiedLocalDate.setHours(this.dateValue.getHours());\n\t\tmodifiedLocalDate.setMinutes(this.dateValue.getMinutes());\n\t\tmodifiedLocalDate.setSeconds(this.dateValue.getSeconds());\n\n\t\tconst newValue = this.formatValue(modifiedLocalDate);\n\t\tthis._updateValueAndFireEvents(newValue, true, [\"change\", \"value-changed\"]);\n\t}\n\n\tgetSelectedDateTime() {\n\t\tconst selectedDate = this.getFormat().parse(this._calendarSelectedDates[0]) as Date;\n\t\tconst selectedTime = this.getFormat().parse(this._timeSelectionValue) as Date;\n\t\tif (selectedTime) {\n\t\t\tselectedDate.setHours(selectedTime.getHours());\n\t\t\tselectedDate.setMinutes(selectedTime.getMinutes());\n\t\t\tselectedDate.setSeconds(selectedTime.getSeconds());\n\t\t}\n\n\t\treturn selectedDate;\n\t}\n\n\tgetFormat() {\n\t\treturn this._isPattern\n\t\t\t? DateFormat.getDateTimeInstance({\n\t\t\t\tstrictParsing: true,\n\t\t\t\tpattern: this._formatPattern,\n\t\t\t\tcalendarType: this._primaryCalendarType,\n\t\t\t})\n\t\t\t: DateFormat.getDateTimeInstance({\n\t\t\t\tstrictParsing: true,\n\t\t\t\tstyle: this._formatPattern,\n\t\t\t\tcalendarType: this._primaryCalendarType,\n\t\t\t});\n\t}\n\n\t/\n\t @override\n\t */\n\tget _calendarPickersMode() {\n\t\treturn CalendarPickersMode.DAY_MONTH_YEAR;\n\t}\n}\n\nDateTimePicker.define();\n\nexport default DateTimePicker;\nexport type {\n\tDateTimePickerChangeEventDetail,\n\tDateTimePickerInputEventDetail,\n};\n"]}

package/dist/DateTimePickerTemplate.js CHANGED Viewed

@@ -10,31 +10,29 @@ import TimeSelectionClocks from "./TimeSelectionClocks.js";
 export default function DateTimePickerTemplate() {
     return [
         DatePickerInputTemplate.call(this),
-        DatePickerPopoverTemplate.call(this, { header, content, footer }),
+        DatePickerPopoverTemplate.call(this, { content, footer }),
     ];
 }
-function header() {
-    return (_jsx(_Fragment, { children: this.phone &&
-            _jsx("div", { class: "ui5-dt-picker-header", children: _jsxs(SegmentedButton, { class: "ui5-dt-picker-toggle-button", onSelectionChange: this._dateTimeSwitchChange, children: [_jsx(SegmentedButtonItem, { "data-ui5-key": "Date", selected: this.showDateView, children: this.btnDateLabel }), _jsx(SegmentedButtonItem, { "data-ui5-key": "Time", selected: this.showTimeView, children: this.btnTimeLabel })] }) }) }));
-}
 function content() {
-    return (_jsxs("div", { class: {
-            "ui5-dt-picker-content": true,
-            "ui5-dt-picker-content--phone": this.phone,
-        }, children: [_jsx(Calendar, { class: {
-                    "ui5-dt-cal": true,
-                    "ui5-dt-cal--hidden": this.phone && this.showTimeView,
-                    "ui5-dt-time--hidden": this.phone && this.showDateView,
-                }, id: `${this._id}-calendar`, primaryCalendarType: this._primaryCalendarType, secondaryCalendarType: this.secondaryCalendarType, formatPattern: this._formatPattern, selectionMode: this._calendarSelectionMode, minDate: this.minDate, maxDate: this.maxDate, calendarWeekNumbering: this.calendarWeekNumbering, onSelectionChange: this.onSelectedDatesChange, onShowMonthView: this.onHeaderShowMonthPress, onShowYearView: this.onHeaderShowYearPress, hideWeekNumbers: this.hideWeekNumbers, _currentPicker: this._calendarCurrentPicker, children: this._calendarSelectedDates.map(date => _jsx(CalendarDate, { value: date })) }), !this.phone && _jsx("span", { class: "ui5-dt-picker-separator" }), this.showTimeView &&
-                _jsx(TimeSelectionClocks, { id: `${this._id}-time-sel`, class: {
-                        "ui5-dt-time": true,
-                        ...this.classes.dateTimeView,
-                    }, formatPattern: this._formatPattern, value: this._timeSelectionValue, onChange: this.onTimeSelectionChange, _calendarType: this._primaryCalendarType })] }));
+    return (_jsxs(_Fragment, { children: [this._phoneView &&
+                _jsx("div", { class: "ui5-dt-picker-header", children: _jsxs(SegmentedButton, { class: "ui5-dt-picker-toggle-button", onSelectionChange: this._dateTimeSwitchChange, children: [_jsx(SegmentedButtonItem, { "data-ui5-key": "Date", selected: this.showDateView, children: this.btnDateLabel }), _jsx(SegmentedButtonItem, { "data-ui5-key": "Time", selected: this.showTimeView, children: this.btnTimeLabel })] }) }), _jsxs("div", { class: {
+                    "ui5-dt-picker-content": true,
+                    "ui5-dt-picker-content--phone": this._phoneView,
+                }, children: [_jsx(Calendar, { class: {
+                            "ui5-dt-cal": true,
+                            "ui5-dt-cal--hidden": this._phoneView && this.showTimeView,
+                            "ui5-dt-time--hidden": this._phoneView && this.showDateView,
+                        }, id: `${this._id}-calendar`, primaryCalendarType: this._primaryCalendarType, secondaryCalendarType: this.secondaryCalendarType, formatPattern: this._formatPattern, selectionMode: this._calendarSelectionMode, minDate: this.minDate, maxDate: this.maxDate, calendarWeekNumbering: this.calendarWeekNumbering, onSelectionChange: this.onSelectedDatesChange, onShowMonthView: this.onHeaderShowMonthPress, onShowYearView: this.onHeaderShowYearPress, hideWeekNumbers: this.hideWeekNumbers, _currentPicker: this._calendarCurrentPicker, children: this._calendarSelectedDates.map(date => _jsx(CalendarDate, { value: date })) }), !this._phoneView && _jsx("span", { class: "ui5-dt-picker-separator" }), this.showTimeView &&
+                        _jsx(TimeSelectionClocks, { id: `${this._id}-time-sel`, class: {
+                                "ui5-dt-time": true,
+                                "ui5-dt-cal--hidden": this._phoneView && this.showTimeView,
+                                "ui5-dt-time--hidden": this._phoneView && this.showDateView,
+                            }, formatPattern: this._formatPattern, value: this._timeSelectionValue, onChange: this.onTimeSelectionChange, _calendarType: this._primaryCalendarType })] })] }));
 }
 function footer() {
     return (_jsxs("div", { slot: "footer", class: {
             "ui5-dt-picker-footer": true,
-            "ui5-dt-picker-footer-time-hidden": (this.phone && this.showTimeView) || (this.phone && this.showDateView)
+            "ui5-dt-picker-footer-time-hidden": (this._phoneView && this.showTimeView) || (this._phoneView && this.showDateView)
         }, children: [_jsx(Button, { id: "ok", class: "ui5-dt-picker-action", design: "Emphasized", disabled: this._submitDisabled, onClick: this._submitClick, children: this.btnOKLabel }), _jsx(Button, { id: "cancel", class: "ui5-dt-picker-action", design: "Transparent", onClick: this._cancelClick, children: this.btnCancelLabel })] }));
 }
 //# sourceMappingURL=DateTimePickerTemplate.js.map

package/dist/DateTimePickerTemplate.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DateTimePickerTemplate.js","sourceRoot":"","sources":["../src/DateTimePickerTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,uBAAuB,MAAM,8BAA8B,CAAC;AACnE,OAAO,yBAAyB,MAAM,gCAAgC,CAAC;AAGvE,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,QAAQ,MAAM,eAAe,CAAC;AACrC,OAAO,YAAY,MAAM,mBAAmB,CAAC;AAC7C,OAAO,eAAe,MAAM,sBAAsB,CAAC;AACnD,OAAO,mBAAmB,MAAM,0BAA0B,CAAC;AAC3D,OAAO,mBAAmB,MAAM,0BAA0B,CAAC;AAE3D,MAAM,CAAC,OAAO,UAAU,sBAAsB;IAC7C,OAAO;QACN,uBAAuB,CAAC,IAAI,CAAC,IAAI,CAAC;QAClC,yBAAyB,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,~~MAAM,EAAE,~~OAAO,EAAE,MAAM,EAAE,CAAC;~~KACjE~~,CAAC;AACH,CAAC;AAED,SAAS,~~MAAM~~;~~IACd~~,OAAO,CACN,~~4BACG~~,IAAI,CAAC,~~KAAK~~;~~YACX~~,cAAK,KAAK,EAAC,sBAAsB,YAChC,MAAC,eAAe,IAAC,KAAK,EAAC,6BAA6B,EAAC,iBAAiB,EAAE,IAAI,CAAC,qBAAqB,aACjG,KAAC,mBAAmB,oBAAc,MAAM,EAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,YAAG,IAAI,CAAC,YAAY,GAAuB,EAC/G,KAAC,mBAAmB,oBAAc,MAAM,EAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,YAAG,IAAI,CAAC,YAAY,GAAuB,IAC9F,GACb,~~GAEL~~,~~CACH,CAAC;AACH,CAAC;AAED,SAAS,OAAO;IACf,OAAO,CACN,~~eAAK,KAAK,EAAE;~~YACX~~,uBAAuB,EAAE,IAAI;~~YAC7B~~,8BAA8B,EAAE,IAAI,CAAC,~~KAAK~~;~~SAC1C~~,aACA,KAAC,QAAQ,IACR,KAAK,EAAE;~~oBACN~~,YAAY,EAAE,IAAI;~~oBAClB~~,oBAAoB,EAAE,IAAI,CAAC,~~KAAK~~,IAAI,IAAI,CAAC,YAAY;~~oBACrD~~,qBAAqB,EAAE,IAAI,CAAC,~~KAAK~~,IAAI,IAAI,CAAC,YAAY;~~iBACtD~~,EACD,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,WAAW,EAC1B,mBAAmB,EAAE,IAAI,CAAC,oBAAoB,EAC9C,qBAAqB,EAAE,IAAI,CAAC,qBAAqB,EACjD,aAAa,EAAE,IAAI,CAAC,cAAc,EAClC,aAAa,EAAE,IAAI,CAAC,sBAAsB,EAC1C,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,qBAAqB,EAAE,IAAI,CAAC,qBAAqB,EACjD,iBAAiB,EAAE,IAAI,CAAC,qBAAqB,EAC7C,eAAe,EAAE,IAAI,CAAC,sBAAsB,EAC5C,cAAc,EAAE,IAAI,CAAC,qBAAqB,EAC1C,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,cAAc,EAAE,IAAI,CAAC,sBAAsB,YAE1C,IAAI,CAAC,sBAAsB,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CACvC,KAAC,YAAY,IAAC,KAAK,EAAE,IAAI,GAAI,CAC7B,GACS,EAET,CAAC,IAAI,CAAC,~~KAAK~~,IAAI,eAAM,KAAK,EAAC,yBAAyB,GAAQ,~~EAE5D~~,IAAI,CAAC,YAAY;~~gBAClB~~,KAAC,mBAAmB,IACnB,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,WAAW,EAC1B,KAAK,EAAE;~~wBACN~~,aAAa,EAAE,IAAI;~~wBACnB~~,~~GAAG~~,IAAI,CAAC,~~OAAO~~,CAAC,YAAY;~~qBAC5B~~,EACD,aAAa,EAAE,IAAI,CAAC,cAAc,EAClC,KAAK,EAAE,IAAI,CAAC,mBAAmB,EAC/B,QAAQ,EAAE,IAAI,CAAC,qBAAqB,EACpC,aAAa,EAAE,IAAI,CAAC,oBAAoB,GACvC,IAEE,~~CACN~~,CAAC;AACH,CAAC;AAED,SAAS,MAAM;IACd,OAAO,CACN,eACC,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE;YACN,sBAAsB,EAAE,IAAI;YAC5B,kCAAkC,EAAE,CAAC,IAAI,CAAC,~~KAAK~~,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,~~KAAK~~,IAAI,IAAI,CAAC,YAAY,CAAC;~~SAC1G~~,aACD,KAAC,MAAM,IACN,EAAE,EAAC,IAAI,EACP,KAAK,EAAC,sBAAsB,EAC5B,MAAM,EAAC,YAAY,EACnB,QAAQ,EAAE,IAAI,CAAC,eAAe,EAC9B,OAAO,EAAE,IAAI,CAAC,YAAY,YAEzB,IAAI,CAAC,UAAU,GACR,EAET,KAAC,MAAM,IACN,EAAE,EAAC,QAAQ,EACX,KAAK,EAAC,sBAAsB,EAC5B,MAAM,EAAC,aAAa,EACpB,OAAO,EAAE,IAAI,CAAC,YAAY,YAEzB,IAAI,CAAC,cAAc,GACZ,IACJ,CACN,CAAC;AACH,CAAC","sourcesContent":["import DatePickerInputTemplate from \"./DatePickerInputTemplate.js\";\nimport DatePickerPopoverTemplate from \"./DatePickerPopoverTemplate.js\";\n\nimport type DateTimePicker from \"./DateTimePicker.js\";\nimport Button from \"./Button.js\";\nimport Calendar from \"./Calendar.js\";\nimport CalendarDate from \"./CalendarDate.js\";\nimport SegmentedButton from \"./SegmentedButton.js\";\nimport SegmentedButtonItem from \"./SegmentedButtonItem.js\";\nimport TimeSelectionClocks from \"./TimeSelectionClocks.js\";\n\nexport default function DateTimePickerTemplate(this: DateTimePicker) {\n\treturn [\n\t\tDatePickerInputTemplate.call(this),\n\t\tDatePickerPopoverTemplate.call(this, { ~~header,~~ content, footer }),\n\t];\n}\n\nfunction ~~header~~(this: DateTimePicker) {\n\treturn (\n\t\t<>\n\t\t\t{ this.~~phone~~ &&\n\t\t\t\t<div class=\"ui5-dt-picker-header\">\n\t\t\t\t\t<SegmentedButton class=\"ui5-dt-picker-toggle-button\" onSelectionChange={this._dateTimeSwitchChange}>\n\t\t\t\t\t\t<SegmentedButtonItem data-ui5-key=\"Date\" selected={this.showDateView}>{this.btnDateLabel}</SegmentedButtonItem>\n\t\t\t\t\t\t<SegmentedButtonItem data-ui5-key=\"Time\" selected={this.showTimeView}>{this.btnTimeLabel}</SegmentedButtonItem>\n\t\t\t\t\t</SegmentedButton>\n\t\t\t\t</div>\n\t\t\t}\n\~~t\t</>\~~n\t~~);\n}~~\~~n\nfunction content(this: DateTimePicker) {\n\treturn (\n\~~t\t<div class={{\n\t\t\t\"ui5-dt-picker-content\": true,\n\t\t\t\"ui5-dt-picker-content--phone\": this.~~phone~~,\n\t\t}}>\n\t\t\t<Calendar\n\t\t\t\tclass={{\n\t\t\t\t\t\"ui5-dt-cal\": true,\n\t\t\t\t\t\"ui5-dt-cal--hidden\": this.~~phone~~ && this.showTimeView,\n\t\t\t\t\t\"ui5-dt-time--hidden\": this.~~phone~~ && this.showDateView,\n\t\t\t\t}}\n\t\t\t\tid={`${this._id}-calendar`}\n\t\t\t\tprimaryCalendarType={this._primaryCalendarType}\n\t\t\t\tsecondaryCalendarType={this.secondaryCalendarType}\n\t\t\t\tformatPattern={this._formatPattern}\n\t\t\t\tselectionMode={this._calendarSelectionMode}\n\t\t\t\tminDate={this.minDate}\n\t\t\t\tmaxDate={this.maxDate}\n\t\t\t\tcalendarWeekNumbering={this.calendarWeekNumbering}\n\t\t\t\tonSelectionChange={this.onSelectedDatesChange}\n\t\t\t\tonShowMonthView={this.onHeaderShowMonthPress}\n\t\t\t\tonShowYearView={this.onHeaderShowYearPress}\n\t\t\t\thideWeekNumbers={this.hideWeekNumbers}\n\t\t\t\t_currentPicker={this._calendarCurrentPicker}\n\t\t\t>\n\t\t\t\t{this._calendarSelectedDates.map(date =>\n\t\t\t\t\t<CalendarDate value={date} />\n\t\t\t\t)}\n\t\t\t</Calendar>\n\n\t\t\t{ !this.~~phone~~ && <span class=\"ui5-dt-picker-separator\"></span> }\n\n\t\t\t{ this.showTimeView &&\n\t\t\t\t<TimeSelectionClocks\n\t\t\t\t\tid={`${this._id}-time-sel`}\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t\"ui5-dt-time\": true,\n\t\t\t\t\t\t~~...~~this.~~classes~~.~~dateTimeView~~,\n\t\t\t\t\t}}\n\t\t\t\t\tformatPattern={this._formatPattern}\n\t\t\t\t\tvalue={this._timeSelectionValue}\n\t\t\t\t\tonChange={this.onTimeSelectionChange}\n\t\t\t\t\t_calendarType={this._primaryCalendarType}\n\t\t\t\t/>\n\t\t\t}\n\t\t</div>\n\t);\n}\n\nfunction footer(this: DateTimePicker) {\n\treturn (\n\t\t<div\n\t\t\tslot=\"footer\"\n\t\t\tclass={{\n\t\t\t\t\"ui5-dt-picker-footer\": true,\n\t\t\t\t\"ui5-dt-picker-footer-time-hidden\": (this.~~phone~~ && this.showTimeView) \|\| (this.~~phone~~ && this.showDateView)\n\t\t\t}}>\n\t\t\t<Button\n\t\t\t\tid=\"ok\"\n\t\t\t\tclass=\"ui5-dt-picker-action\"\n\t\t\t\tdesign=\"Emphasized\"\n\t\t\t\tdisabled={this._submitDisabled}\n\t\t\t\tonClick={this._submitClick}\n\t\t\t>\n\t\t\t\t{this.btnOKLabel}\n\t\t\t</Button>\n\n\t\t\t<Button\n\t\t\t\tid=\"cancel\"\n\t\t\t\tclass=\"ui5-dt-picker-action\"\n\t\t\t\tdesign=\"Transparent\"\n\t\t\t\tonClick={this._cancelClick}\n\t\t\t>\n\t\t\t\t{this.btnCancelLabel}\n\t\t\t</Button>\n\t\t</div>\n\t);\n}\n"]}
1	+ {"version":3,"file":"DateTimePickerTemplate.js","sourceRoot":"","sources":["../src/DateTimePickerTemplate.tsx"],"names":[],"mappings":"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","sourcesContent":["import DatePickerInputTemplate from \"./DatePickerInputTemplate.js\";\nimport DatePickerPopoverTemplate from \"./DatePickerPopoverTemplate.js\";\n\nimport type DateTimePicker from \"./DateTimePicker.js\";\nimport Button from \"./Button.js\";\nimport Calendar from \"./Calendar.js\";\nimport CalendarDate from \"./CalendarDate.js\";\nimport SegmentedButton from \"./SegmentedButton.js\";\nimport SegmentedButtonItem from \"./SegmentedButtonItem.js\";\nimport TimeSelectionClocks from \"./TimeSelectionClocks.js\";\n\nexport default function DateTimePickerTemplate(this: DateTimePicker) {\n\treturn [\n\t\tDatePickerInputTemplate.call(this),\n\t\tDatePickerPopoverTemplate.call(this, { content, footer }),\n\t];\n}\n\nfunction content(this: DateTimePicker) {\n\treturn (\n\t\t<>\n\t\t\t{ this._phoneView &&\n\t\t\t\t<div class=\"ui5-dt-picker-header\">\n\t\t\t\t\t<SegmentedButton class=\"ui5-dt-picker-toggle-button\" onSelectionChange={this._dateTimeSwitchChange}>\n\t\t\t\t\t\t<SegmentedButtonItem data-ui5-key=\"Date\" selected={this.showDateView}>{this.btnDateLabel}</SegmentedButtonItem>\n\t\t\t\t\t\t<SegmentedButtonItem data-ui5-key=\"Time\" selected={this.showTimeView}>{this.btnTimeLabel}</SegmentedButtonItem>\n\t\t\t\t\t</SegmentedButton>\n\t\t\t\t</div>\n\t\t\t}\n\n\t\t\t<div class={{\n\t\t\t\t\"ui5-dt-picker-content\": true,\n\t\t\t\t\"ui5-dt-picker-content--phone\": this._phoneView,\n\t\t\t}}>\n\t\t\t\t<Calendar\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t\"ui5-dt-cal\": true,\n\t\t\t\t\t\t\"ui5-dt-cal--hidden\": this._phoneView && this.showTimeView,\n\t\t\t\t\t\t\"ui5-dt-time--hidden\": this._phoneView && this.showDateView,\n\t\t\t\t\t}}\n\t\t\t\t\tid={`${this._id}-calendar`}\n\t\t\t\t\tprimaryCalendarType={this._primaryCalendarType}\n\t\t\t\t\tsecondaryCalendarType={this.secondaryCalendarType}\n\t\t\t\t\tformatPattern={this._formatPattern}\n\t\t\t\t\tselectionMode={this._calendarSelectionMode}\n\t\t\t\t\tminDate={this.minDate}\n\t\t\t\t\tmaxDate={this.maxDate}\n\t\t\t\t\tcalendarWeekNumbering={this.calendarWeekNumbering}\n\t\t\t\t\tonSelectionChange={this.onSelectedDatesChange}\n\t\t\t\t\tonShowMonthView={this.onHeaderShowMonthPress}\n\t\t\t\t\tonShowYearView={this.onHeaderShowYearPress}\n\t\t\t\t\thideWeekNumbers={this.hideWeekNumbers}\n\t\t\t\t\t_currentPicker={this._calendarCurrentPicker}\n\t\t\t\t>\n\t\t\t\t\t{this._calendarSelectedDates.map(date =>\n\t\t\t\t\t\t<CalendarDate value={date} />\n\t\t\t\t\t)}\n\t\t\t\t</Calendar>\n\n\t\t\t\t{ !this._phoneView && <span class=\"ui5-dt-picker-separator\"></span> }\n\n\t\t\t\t{ this.showTimeView &&\n\t\t\t\t\t<TimeSelectionClocks\n\t\t\t\t\t\tid={`${this._id}-time-sel`}\n\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t\"ui5-dt-time\": true,\n\t\t\t\t\t\t\t\"ui5-dt-cal--hidden\": this._phoneView && this.showTimeView,\n\t\t\t\t\t\t\t\"ui5-dt-time--hidden\": this._phoneView && this.showDateView,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tformatPattern={this._formatPattern}\n\t\t\t\t\t\tvalue={this._timeSelectionValue}\n\t\t\t\t\t\tonChange={this.onTimeSelectionChange}\n\t\t\t\t\t\t_calendarType={this._primaryCalendarType}\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nfunction footer(this: DateTimePicker) {\n\treturn (\n\t\t<div\n\t\t\tslot=\"footer\"\n\t\t\tclass={{\n\t\t\t\t\"ui5-dt-picker-footer\": true,\n\t\t\t\t\"ui5-dt-picker-footer-time-hidden\": (this._phoneView && this.showTimeView) \|\| (this._phoneView && this.showDateView)\n\t\t\t}}>\n\t\t\t<Button\n\t\t\t\tid=\"ok\"\n\t\t\t\tclass=\"ui5-dt-picker-action\"\n\t\t\t\tdesign=\"Emphasized\"\n\t\t\t\tdisabled={this._submitDisabled}\n\t\t\t\tonClick={this._submitClick}\n\t\t\t>\n\t\t\t\t{this.btnOKLabel}\n\t\t\t</Button>\n\n\t\t\t<Button\n\t\t\t\tid=\"cancel\"\n\t\t\t\tclass=\"ui5-dt-picker-action\"\n\t\t\t\tdesign=\"Transparent\"\n\t\t\t\tonClick={this._cancelClick}\n\t\t\t>\n\t\t\t\t{this.btnCancelLabel}\n\t\t\t</Button>\n\t\t</div>\n\t);\n}\n"]}

package/dist/DayPicker.d.ts CHANGED Viewed

@@ -97,6 +97,7 @@ declare class DayPicker extends CalendarPart implements ICalendarPicker {
      * @private
      */
     specialCalendarDates: Array<SpecialCalendarDateT>;
+    _focusableDay: HTMLElement;
     _autoFocus?: boolean;
     static i18nBundle: I18nBundle;
     onBeforeRendering(): void;
@@ -120,6 +121,8 @@ declare class DayPicker extends CalendarPart implements ICalendarPicker {
      */
     namesTooLong(dayNames: Array<string>): boolean;
     onAfterRendering(): void;
+    _focusCorrectDay(): void;
+    get _shouldFocusDay(): boolean;
     _onfocusin(): void;
     _onfocusout(): void;
     /**

package/dist/DayPicker.js CHANGED Viewed

@@ -7,6 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 var DayPicker_1;
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.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 getLocale from "@ui5/webcomponents-base/dist/locale/getLocale.js";
@@ -252,13 +253,18 @@ let DayPicker = DayPicker_1 = class DayPicker extends CalendarPart {
         if (this._autoFocus && !this._hidden) {
             this.focus();
         }
-        const focusedDay = this.shadowRoot.querySelector("[data-sap-focus-ref]");
-        if (focusedDay && document.activeElement !== focusedDay && this._specialCalendarDates.length === 0) {
-            focusedDay.focus();
+    }
+    _focusCorrectDay() {
+        if (this._shouldFocusDay) {
+            this._focusableDay.focus();
         }
     }
+    get _shouldFocusDay() {
+        return document.activeElement !== this._focusableDay && this._specialCalendarDates.length === 0;
+    }
     _onfocusin() {
         this._autoFocus = true;
+        this._focusCorrectDay();
     }
     _onfocusout() {
         this._autoFocus = false;
@@ -675,6 +681,9 @@ __decorate([
 __decorate([
     property({ type: Array })
 ], DayPicker.prototype, "specialCalendarDates", void 0);
+__decorate([
+    query("[data-sap-focus-ref]")
+], DayPicker.prototype, "_focusableDay", void 0);
 __decorate([
     i18n("@ui5/webcomponents")
 ], DayPicker, "i18nBundle", void 0);