@openui5/sap.ui.webc.main 1.115.0 → 1.116.0

package/src/sap/ui/webc/main/thirdparty/DateRangePicker.js

@@ -1,45 +1,27 @@
-sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/Render", "sap/ui/webc/common/thirdparty/localization/dates/CalendarDate", "sap/ui/webc/common/thirdparty/localization/dates/modifyDateBy", "sap/ui/webc/common/thirdparty/localization/dates/getTodayUTCTimestamp", "./generated/i18n/i18n-defaults", "./generated/themes/DateRangePicker.css", "./DatePicker"], function (_exports, _Render, _CalendarDate, _modifyDateBy, _getTodayUTCTimestamp, _i18nDefaults, _DateRangePicker, _DatePicker) {
+sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/decorators/customElement", "sap/ui/webc/common/thirdparty/base/decorators/property", "sap/ui/webc/common/thirdparty/base/Render", "sap/ui/webc/common/thirdparty/localization/dates/CalendarDate", "sap/ui/webc/common/thirdparty/localization/dates/modifyDateBy", "sap/ui/webc/common/thirdparty/localization/dates/getTodayUTCTimestamp", "./generated/i18n/i18n-defaults", "./generated/themes/DateRangePicker.css", "./DatePicker", "./types/CalendarPickersMode"], function (_exports, _customElement, _property, _Render, _CalendarDate, _modifyDateBy, _getTodayUTCTimestamp, _i18nDefaults, _DateRangePicker, _DatePicker, _CalendarPickersMode) {
   "use strict";
 
   Object.defineProperty(_exports, "__esModule", {
     value: true
   });
   _exports.default = void 0;
+  _customElement = _interopRequireDefault(_customElement);
+  _property = _interopRequireDefault(_property);
   _CalendarDate = _interopRequireDefault(_CalendarDate);
   _modifyDateBy = _interopRequireDefault(_modifyDateBy);
   _getTodayUTCTimestamp = _interopRequireDefault(_getTodayUTCTimestamp);
   _DateRangePicker = _interopRequireDefault(_DateRangePicker);
   _DatePicker = _interopRequireDefault(_DatePicker);
+  _CalendarPickersMode = _interopRequireDefault(_CalendarPickersMode);
   function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-  // Styles
-
-  /**
-   * @public
-   */
-  const metadata = {
-    tag: "ui5-daterange-picker",
-    properties: /** @lends sap.ui.webcomponents.main.DateRangePicker.prototype */{
-      /**
-       * Determines the symbol which separates the dates.
-       * If not supplied, the default time interval delimiter for the current locale will be used.
-       *
-       * @type {string}
-       * @public
-       */
-      delimiter: {
-        type: String,
-        defaultValue: "-"
-      },
-      /**
-       * The first date in the range during selection (this is a temporary value, not the first date in the value range)
-       * @private
-       */
-      _tempValue: {
-        type: String
-      }
-    }
+  var __decorate = void 0 && (void 0).__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 DateRangePicker_1;
   /**
    * @class
    *
@@ -73,41 +55,35 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/Render", "sap/ui/w
    *
    * @constructor
    * @author SAP SE
-   * @alias sap.ui.webcomponents.main.DateRangePicker
-   * @extends DatePicker
+   * @alias sap.ui.webc.main.DateRangePicker
+   * @extends sap.ui.webc.main.DatePicker
    * @tagname ui5-daterange-picker
    * @since 1.0.0-rc.8
    * @public
    */
-  class DateRangePicker extends _DatePicker.default {
-    static get metadata() {
-      return metadata;
-    }
-    static get styles() {
-      return [_DatePicker.default.styles, _DateRangePicker.default];
-    }
+  let DateRangePicker = DateRangePicker_1 = class DateRangePicker extends _DatePicker.default {
     constructor() {
       super();
       this._prevDelimiter = null;
     }
-
     /**
      * <b>Note:</b> The getter method is inherited and not supported. If called it will return an empty value.
      *
      * @readonly
-     * @type { Date }
+     * @type {Date}
      * @public
+     * @name sap.ui.webc.main.DateRangePicker.prototype.dateValue
      */
     get dateValue() {
       return null;
     }
-
     /**
      * <b>Note:</b> The getter method is inherited and not supported. If called it will return an empty value.
      *
      * @readonly
-     * @type { Date }
+     * @type {Date}
      * @public
+     * @name sap.ui.webc.main.DateRangePicker.prototype.dateValueUTC
      */
     get dateValueUTC() {
       return null;
@@ -121,7 +97,6 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/Render", "sap/ui/w
     get _tempTimestamp() {
       return this._tempValue && this.getFormat().parse(this._tempValue, true).getTime() / 1000;
     }
-
     /**
      * Required by DatePicker.js
      * @override
@@ -129,7 +104,6 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/Render", "sap/ui/w
     get _calendarSelectionMode() {
       return "Range";
     }
-
     /**
      * Required by DatePicker.js - set the calendar focus on the first selected date (or today if not set)
      * @override
@@ -137,7 +111,6 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/Render", "sap/ui/w
     get _calendarTimestamp() {
       return this._tempTimestamp || this._startDateTimestamp || (0, _getTodayUTCTimestamp.default)(this._primaryCalendarType);
     }
-
     /**
      * Required by DatePicker.js
      * @override
@@ -151,29 +124,28 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/Render", "sap/ui/w
       }
       return [];
     }
-
     /**
      * Returns the start date of the currently selected range as JavaScript Date instance.
      *
      * @readonly
-     * @type { Date }
+     * @type {Date}
      * @public
+     * @name sap.ui.webc.main.DateRangePicker.prototype.startDateValue
      */
     get startDateValue() {
       return _CalendarDate.default.fromTimestamp(this._startDateTimestamp * 1000).toLocalJSDate();
     }
-
     /**
      * Returns the end date of the currently selected range as JavaScript Date instance.
      *
      * @readonly
-     * @type { Date }
+     * @type {Date}
      * @public
+     * @name sap.ui.webc.main.DateRangePicker.prototype.endDateValue
      */
     get endDateValue() {
       return _CalendarDate.default.fromTimestamp(this._endDateTimestamp * 1000).toLocalJSDate();
     }
-
     /**
      * @override
      */
@@ -181,19 +153,17 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/Render", "sap/ui/w
       return this.placeholder !== undefined ? this.placeholder : `${this._displayFormat} ${this._effectiveDelimiter} ${this._displayFormat}`;
     }
     get dateAriaDescription() {
-      return DateRangePicker.i18nBundle.getText(_i18nDefaults.DATERANGE_DESCRIPTION);
+      return DateRangePicker_1.i18nBundle.getText(_i18nDefaults.DATERANGE_DESCRIPTION);
     }
-
     /**
      * @override
      */
-    async _onInputSubmit(event) {
+    async _onInputSubmit() {
       const input = this._getInput();
       const caretPos = input.getCaretPosition();
       await (0, _Render.renderFinished)();
       input.setCaretPosition(caretPos); // Return the caret on the previous position after rendering
     }
-
     /**
      * @override
      */
@@ -201,7 +171,6 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/Render", "sap/ui/w
       this._tempValue = ""; // reset _tempValue on popover close
       super.onResponsivePopoverAfterClose();
     }
-
     /**
      * @override
      */
@@ -209,14 +178,12 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/Render", "sap/ui/w
       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
      */
     isInValidRange(value) {
       return this._splitValueByDelimiter(value).every(dateString => super.isInValidRange(dateString));
     }
-
     /**
      * Extract both dates as timestamps, flip if necessary, and build (which will use the desired format so we enforce the format too)
      * @override
@@ -230,7 +197,6 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/Render", "sap/ui/w
       }
       return this._buildValue(firstDateTimestamp, lastDateTimestamp);
     }
-
     /**
      * @override
      */
@@ -245,11 +211,10 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/Render", "sap/ui/w
         this._tempValue = values[0];
         return;
       }
-      const newValue = this._buildValue(...event.detail.dates); // the value will be normalized so we don't need to order them here
+      const newValue = this._buildValue(event.detail.dates[0], event.detail.dates[1]); // the value will be normalized so we don't need to order them here
       this._updateValueAndFireEvents(newValue, true, ["change", "value-changed"]);
       this.closePicker();
     }
-
     /**
      * @override
      */
@@ -259,10 +224,10 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/Render", "sap/ui/w
         return super._modifyDateValue(amount, unit);
       }
       const input = this._getInput();
-      let caretPos = input.getCaretPosition();
+      let caretPos = input.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 seoond date
+        // The user is focusing the first date -> change it and keep the second date
         const startDateModified = (0, _modifyDateBy.default)(_CalendarDate.default.fromTimestamp(this._startDateTimestamp * 1000), amount, unit, this._minDate, this._maxDate);
         const newStartDateTimestamp = startDateModified.valueOf() / 1000;
         if (newStartDateTimestamp > this._endDateTimestamp) {
@@ -285,17 +250,22 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/Render", "sap/ui/w
     }
 
     get _effectiveDelimiter() {
-      return this.delimiter || this.constructor.getMetadata().getProperties().delimiter.defaultValue; // treat empty string as the default value
+      const ctor = this.constructor;
+      return this.delimiter || ctor.getMetadata().getProperties().delimiter.defaultValue;
     }
-
     _splitValueByDelimiter(value) {
       const valuesArray = [];
       const partsArray = value.split(this._prevDelimiter || this._effectiveDelimiter);
-      valuesArray[0] = partsArray.slice(0, partsArray.length / 2).join(this._effectiveDelimiter);
-      valuesArray[1] = partsArray.slice(partsArray.length / 2).join(this._effectiveDelimiter);
+      // if format successfully parse the value, the value contains only single date
+      if (this.getFormat().parse(value)) {
+        valuesArray[0] = partsArray.join(this._effectiveDelimiter);
+        valuesArray[1] = "";
+      } else {
+        valuesArray[0] = partsArray.slice(0, partsArray.length / 2).join(this._effectiveDelimiter);
+        valuesArray[1] = partsArray.slice(partsArray.length / 2).join(this._effectiveDelimiter);
+      }
       return valuesArray;
     }
-
     /**
      * Returns a UTC timestamp, representing the first date in the value string or undefined if the value is empty
      * @private
@@ -305,9 +275,9 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/Render", "sap/ui/w
         return undefined;
       }
       const dateStrings = this._splitValueByDelimiter(value); // at least one item guaranteed due to the checks above (non-empty and valid)
-      return this.getFormat().parse(dateStrings[0], true).getTime() / 1000;
+      const parsedDate = this.getFormat().parse(dateStrings[0], true);
+      return parsedDate.getTime() / 1000;
     }
-
     /**
      * 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
      * @private
@@ -318,11 +288,11 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/Render", "sap/ui/w
       }
       const dateStrings = this._splitValueByDelimiter(value);
       if (dateStrings[1]) {
-        return this.getFormat().parse(dateStrings[1], true).getTime() / 1000;
+        const parsedDate = this.getFormat().parse(dateStrings[1], true);
+        return parsedDate.getTime() / 1000;
       }
       return undefined;
     }
-
     /**
      * Builds a string value out of two UTC timestamps - this method is the counterpart to _extractFirstTimestamp/_extractLastTimestamp
      * @private
@@ -339,7 +309,21 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/Render", "sap/ui/w
       }
       return "";
     }
-  }
+    /**
+     * @override
+     */
+    get _calendarPickersMode() {
+      return _CalendarPickersMode.default.DAY_MONTH_YEAR;
+    }
+  };
+  __decorate([(0, _property.default)({
+    defaultValue: "-"
+  })], DateRangePicker.prototype, "delimiter", void 0);
+  __decorate([(0, _property.default)()], DateRangePicker.prototype, "_tempValue", void 0);
+  DateRangePicker = DateRangePicker_1 = __decorate([(0, _customElement.default)({
+    tag: "ui5-daterange-picker",
+    styles: [_DatePicker.default.styles, _DateRangePicker.default]
+  })], DateRangePicker);
   DateRangePicker.define();
   var _default = DateRangePicker;
   _exports.default = _default;

package/src/sap/ui/webc/main/thirdparty/DateTimePicker.js

@@ -1,10 +1,12 @@
-sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/delegate/ResizeHandler", "sap/ui/webc/common/thirdparty/base/locale/getLocale", "sap/ui/webc/common/thirdparty/localization/getCachedLocaleDataInstance", "sap/ui/webc/common/thirdparty/localization/dates/modifyDateBy", "sap/ui/webc/common/thirdparty/localization/dates/CalendarDate", "sap/ui/webc/common/thirdparty/icons/date-time", "./Button", "./ToggleButton", "./SegmentedButton", "./Calendar", "./DatePicker", "./TimeSelection", "./generated/i18n/i18n-defaults", "./generated/templates/DateTimePickerPopoverTemplate.lit", "./generated/themes/DateTimePicker.css", "./generated/themes/DateTimePickerPopover.css"], function (_exports, _ResizeHandler, _getLocale, _getCachedLocaleDataInstance, _modifyDateBy, _CalendarDate, _dateTime, _Button, _ToggleButton, _SegmentedButton, _Calendar, _DatePicker, _TimeSelection, _i18nDefaults, _DateTimePickerPopoverTemplate, _DateTimePicker, _DateTimePickerPopover) {
+sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/decorators/property", "sap/ui/webc/common/thirdparty/base/decorators/customElement", "sap/ui/webc/common/thirdparty/base/delegate/ResizeHandler", "sap/ui/webc/common/thirdparty/base/locale/getLocale", "sap/ui/webc/common/thirdparty/localization/getCachedLocaleDataInstance", "sap/ui/webc/common/thirdparty/localization/dates/modifyDateBy", "sap/ui/webc/common/thirdparty/localization/dates/CalendarDate", "sap/ui/webc/common/thirdparty/icons/date-time", "./Button", "./ToggleButton", "./SegmentedButton", "./Calendar", "./DatePicker", "./TimeSelection", "./generated/i18n/i18n-defaults", "./generated/templates/DateTimePickerPopoverTemplate.lit", "./generated/themes/DateTimePicker.css", "./generated/themes/DateTimePickerPopover.css", "./types/CalendarPickersMode"], function (_exports, _property, _customElement, _ResizeHandler, _getLocale, _getCachedLocaleDataInstance, _modifyDateBy, _CalendarDate, _dateTime, _Button, _ToggleButton, _SegmentedButton, _Calendar, _DatePicker, _TimeSelection, _i18nDefaults, _DateTimePickerPopoverTemplate, _DateTimePicker, _DateTimePickerPopover, _CalendarPickersMode) {
   "use strict";
 
   Object.defineProperty(_exports, "__esModule", {
     value: true
   });
   _exports.default = void 0;
+  _property = _interopRequireDefault(_property);
+  _customElement = _interopRequireDefault(_customElement);
   _ResizeHandler = _interopRequireDefault(_ResizeHandler);
   _getLocale = _interopRequireDefault(_getLocale);
   _getCachedLocaleDataInstance = _interopRequireDefault(_getCachedLocaleDataInstance);
@@ -19,64 +21,17 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/delegate/ResizeHan
   _DateTimePickerPopoverTemplate = _interopRequireDefault(_DateTimePickerPopoverTemplate);
   _DateTimePicker = _interopRequireDefault(_DateTimePicker);
   _DateTimePickerPopover = _interopRequireDefault(_DateTimePickerPopover);
+  _CalendarPickersMode = _interopRequireDefault(_CalendarPickersMode);
   function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-  // i18n texts
-
-  // Template
-
-  // Styles
-
-  const PHONE_MODE_BREAKPOINT = 640; // px
-
-  /**
-   * @public
-   */
-  const metadata = {
-    tag: "ui5-datetime-picker",
-    properties: /** @lends sap.ui.webcomponents.main.DateTimePicker.prototype */{
-      /**
-       * Defines the visibility of the time view in <code>phoneMode</code>.
-       * For more information, see the <code>phoneMode</code> property.
-       *
-       * <br><br>
-       * <b>Note:</b> The date view would be displayed by default.
-       * @type {boolean}
-       * @defaultvalue false
-       * @private
-       */
-      _showTimeView: {
-        type: Boolean,
-        noAttribute: true
-      },
-      /**
-       * Defines if the <code>DateTimePicker</code> should be displayed in phone mode.
-       * The phone mode turns on when the component is used on small screens or phone devices.
-       * In phone mode the user can see either the calendar view, or the time view
-       * and can switch between the views via toggle buttons.
-       * @type {boolean}
-       * @defaultvalue false
-       * @private
-       */
-      _phoneMode: {
-        type: Boolean
-      },
-      /**
-       * Selected, but not yet confirmed date/time
-       * @private
-       */
-      _previewValues: {
-        type: Object
-      },
-      /**
-       * @private
-       */
-      _currentTimeSlider: {
-        type: String,
-        defaultValue: "hours"
-      }
-    }
+  var __decorate = void 0 && (void 0).__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 DateTimePicker_1;
+  const PHONE_MODE_BREAKPOINT = 640; // px
   /**
    * @class
    *
@@ -96,14 +51,14 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/delegate/ResizeHan
    * <li>typing in the input field</li>
    * </ul>
    *
-   * Programatically, to set date/time for the <code>DateTimePicker</code>, use the <code>value</code> property
+   * Programmatically, to set date/time for the <code>DateTimePicker</code>, use the <code>value</code> property
    *
    * <h3>Formatting</h3>
    *
    * The value entered by typing into the input field must fit to the used date/time format.
    * <br><br>
    * Supported format options are pattern-based on Unicode LDML Date Format notation.
-   * For more information, see <ui5-link target="_blank" href="https://unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table" class="api-table-content-cell-link">UTS #35: Unicode Locale Data Markup Language</ui5-link>.
+   * For more information, see <ui5-link target="_blank" href="https://unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table">UTS #35: Unicode Locale Data Markup Language</ui5-link>.
    * <br><br>
    * <b>Example:</b> the following format <code>dd/MM/yyyy, hh:mm:ss aa</code>
    * corresponds the <code>13/04/2020, 03:16:16 AM</code> value.
@@ -142,33 +97,17 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/delegate/ResizeHan
    *
    * @constructor
    * @author SAP SE
-   * @alias sap.ui.webcomponents.main.DateTimePicker
-   * @extends DatePicker
+   * @alias sap.ui.webc.main.DateTimePicker
+   * @extends sap.ui.webc.main.DatePicker
    * @tagname ui5-datetime-picker
    * @since 1.0.0-rc.7
    * @public
    */
-  class DateTimePicker extends _DatePicker.default {
-    static get metadata() {
-      return metadata;
-    }
-    static get staticAreaTemplate() {
-      return _DateTimePickerPopoverTemplate.default;
-    }
-    static get styles() {
-      return [super.styles, _DateTimePicker.default];
-    }
-    static get staticAreaStyles() {
-      return [super.staticAreaStyles, _DateTimePickerPopover.default];
-    }
-    static get dependencies() {
-      return [..._DatePicker.default.dependencies, _Calendar.default, _Button.default, _ToggleButton.default, _SegmentedButton.default, _TimeSelection.default];
-    }
+  let DateTimePicker = DateTimePicker_1 = class DateTimePicker extends _DatePicker.default {
     constructor() {
       super();
       this._handleResizeBound = this._handleResize.bind(this);
     }
-
     /**
      * @override
      */
@@ -177,22 +116,18 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/delegate/ResizeHan
       this._showTimeView = false;
       this._previewValues = {};
     }
-
     /**
      * LIFECYCLE METHODS
      */
-
     onEnterDOM() {
       _ResizeHandler.default.register(document.body, this._handleResizeBound);
     }
     onExitDOM() {
       _ResizeHandler.default.deregister(document.body, this._handleResizeBound);
     }
-
     /**
      * PUBLIC METHODS
      */
-
     /**
      * Opens the picker.
      * @public
@@ -202,11 +137,9 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/delegate/ResizeHan
       this._currentTimeSlider = "hours";
       this._previewValues.timeSelectionValue = this.value || this.getFormat().format(new Date());
     }
-
     /**
      * Read-only getters
      */
-
     get classes() {
       return {
         picker: {
@@ -240,16 +173,16 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/delegate/ResizeHan
       return "date-time";
     }
     get btnOKLabel() {
-      return DateTimePicker.i18nBundle.getText(_i18nDefaults.TIMEPICKER_SUBMIT_BUTTON);
+      return DateTimePicker_1.i18nBundle.getText(_i18nDefaults.TIMEPICKER_SUBMIT_BUTTON);
     }
     get btnCancelLabel() {
-      return DateTimePicker.i18nBundle.getText(_i18nDefaults.TIMEPICKER_CANCEL_BUTTON);
+      return DateTimePicker_1.i18nBundle.getText(_i18nDefaults.TIMEPICKER_CANCEL_BUTTON);
     }
     get btnDateLabel() {
-      return DateTimePicker.i18nBundle.getText(_i18nDefaults.DATETIME_PICKER_DATE_BUTTON);
+      return DateTimePicker_1.i18nBundle.getText(_i18nDefaults.DATETIME_PICKER_DATE_BUTTON);
     }
     get btnTimeLabel() {
-      return DateTimePicker.i18nBundle.getText(_i18nDefaults.DATETIME_PICKER_TIME_BUTTON);
+      return DateTimePicker_1.i18nBundle.getText(_i18nDefaults.DATETIME_PICKER_TIME_BUTTON);
     }
     get showFooter() {
       return true;
@@ -264,9 +197,8 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/delegate/ResizeHan
       return super.phone || this._phoneMode;
     }
     get dateAriaDescription() {
-      return DateTimePicker.i18nBundle.getText(_i18nDefaults.DATETIME_DESCRIPTION);
+      return DateTimePicker_1.i18nBundle.getText(_i18nDefaults.DATETIME_DESCRIPTION);
     }
-
     /**
      * Defines whether the dialog on mobile should have header
      * @private
@@ -274,34 +206,32 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/delegate/ResizeHan
     get _shouldHideHeader() {
       return true;
     }
-
     /**
      * EVENT HANDLERS
      */
-
     /**
      * @override
      */
-    onSelectedDatesChange(event) {
-      event.preventDefault();
-      const dateTimePickerContent = event.path ? event.path[1] : event.composedPath()[1];
+    onSelectedDatesChange(e) {
+      e.preventDefault();
+      // @ts-ignore Needed for FF
+      const dateTimePickerContent = e.path ? e.path[1] : e.composedPath()[1];
       this._previewValues = {
         ...this._previewValues,
-        calendarTimestamp: event.detail.timestamp,
-        calendarValue: event.detail.values[0],
+        calendarTimestamp: e.detail.timestamp,
+        calendarValue: e.detail.values[0],
         timeSelectionValue: dateTimePickerContent.lastChild.value
       };
     }
-    onTimeSelectionChange(event) {
+    onTimeSelectionChange(e) {
       this._previewValues = {
         ...this._previewValues,
-        timeSelectionValue: event.detail.value
+        timeSelectionValue: e.detail.value
       };
     }
-    onTimeSliderChange(event) {
-      this._currentTimeSlider = event.detail.slider;
+    onTimeSliderChange(e) {
+      this._currentTimeSlider = e.detail.slider;
     }
-
     /**
      * Handles document resize to switch between <code>phoneMode</code> and normal appearance.
      */
@@ -309,7 +239,6 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/delegate/ResizeHan
       const documentWidth = document.body.offsetWidth;
       const toPhoneMode = documentWidth <= PHONE_MODE_BREAKPOINT;
       const modeChange = toPhoneMode && !this._phoneMode || !toPhoneMode && this._phoneMode; // XOR not allowed by lint
-
       if (modeChange) {
         this._phoneMode = toPhoneMode;
       }
@@ -317,7 +246,6 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/delegate/ResizeHan
     get _submitDisabled() {
       return !this._calendarSelectedDates || !this._calendarSelectedDates.length;
     }
-
     /**
      * Handles clicking on the <code>submit</code> button, within the picker`s footer.
      */
@@ -329,7 +257,6 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/delegate/ResizeHan
       }
       this.closePicker();
     }
-
     /**
      * Handles clicking on the <code>cancel</code> button, within the picker`s footer,
      * that would disregard the user selection.
@@ -337,19 +264,18 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/delegate/ResizeHan
     _cancelClick() {
       this.closePicker();
     }
-
     /**
      * Handles the date/time switch available in <code>phoneMode</code> to switch
      * between the date and time views.
-     * @param {Event} event
+     * @param {Event} e
      */
-    _dateTimeSwitchChange(event) {
-      this._showTimeView = event.target.getAttribute("key") === "Time";
+    _dateTimeSwitchChange(e) {
+      const target = e.target;
+      this._showTimeView = target.getAttribute("key") === "Time";
       if (this._showTimeView) {
         this._currentTimeSlider = "hours";
       }
     }
-
     /**
      * @override
      */
@@ -379,7 +305,33 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/delegate/ResizeHan
       }
       return selectedDate;
     }
-  }
+    /**
+     * @override
+     */
+    get _calendarPickersMode() {
+      return _CalendarPickersMode.default.DAY_MONTH_YEAR;
+    }
+  };
+  __decorate([(0, _property.default)({
+    type: Boolean,
+    noAttribute: true
+  })], DateTimePicker.prototype, "_showTimeView", void 0);
+  __decorate([(0, _property.default)({
+    type: Boolean
+  })], DateTimePicker.prototype, "_phoneMode", void 0);
+  __decorate([(0, _property.default)({
+    type: Object
+  })], DateTimePicker.prototype, "_previewValues", void 0);
+  __decorate([(0, _property.default)({
+    defaultValue: "hours"
+  })], DateTimePicker.prototype, "_currentTimeSlider", void 0);
+  DateTimePicker = DateTimePicker_1 = __decorate([(0, _customElement.default)({
+    tag: "ui5-datetime-picker",
+    staticAreaTemplate: _DateTimePickerPopoverTemplate.default,
+    styles: [DateTimePicker_1.styles, _DateTimePicker.default],
+    staticAreaStyles: [_DatePicker.default.staticAreaStyles, _DateTimePickerPopover.default],
+    dependencies: [..._DatePicker.default.dependencies, _Calendar.default, _Button.default, _ToggleButton.default, _SegmentedButton.default, _TimeSelection.default]
+  })], DateTimePicker);
   DateTimePicker.define();
   var _default = DateTimePicker;
   _exports.default = _default;