@ui5/webcomponents 0.0.0-037d08c67

package/dist/DateTimePicker.js

@@ -0,0 +1,456 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var DateTimePicker_1;
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import getLocale from "@ui5/webcomponents-base/dist/locale/getLocale.js";
+import getCachedLocaleDataInstance from "@ui5/webcomponents-localization/dist/getCachedLocaleDataInstance.js";
+import modifyDateBy from "@ui5/webcomponents-localization/dist/dates/modifyDateBy.js";
+import CalendarDate from "@ui5/webcomponents-localization/dist/dates/CalendarDate.js";
+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, DATETIME_VALUE_MISSING, DATETIME_PATTERN_MISMATCH, DATETIME_RANGEUNDERFLOW, DATETIME_RANGEOVERFLOW, } from "./generated/i18n/i18n-defaults.js";
+// Template
+import DateTimePickerTemplate from "./DateTimePickerTemplate.js";
+// Styles
+import DateTimePickerCss from "./generated/themes/DateTimePicker.css.js";
+import DateTimePickerPopoverCss from "./generated/themes/DateTimePickerPopover.css.js";
+import CalendarPickersMode from "./types/CalendarPickersMode.js";
+import query from "@ui5/webcomponents-base/dist/decorators/query.js";
+import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
+const PHONE_MODE_BREAKPOINT = 640; // px
+/**
+ * @class
+ *
+ * ### Overview
+ * The `DateTimePicker` component alows users to select both date (day, month and year) and time (hours, minutes and seconds)
+ * and for the purpose it consists of input field and Date/Time picker.
+ *
+ * ### Usage
+ *
+ * Use the `DateTimePicker` if you need a combined date and time input component.
+ * Don't use it if you want to use either date, or time value.
+ * In this case, use the `DatePicker` or the `TimePicker` components instead.
+ *
+ * The user can set date/time by:
+ *
+ * - using the calendar and the time selectors
+ * - typing in the input field
+ *
+ * Programmatically, to set date/time for the `DateTimePicker`, use the `value` property
+ *
+ * ### Formatting
+ *
+ * The value entered by typing into the input field must fit to the used date/time format.
+ *
+ * Supported format options are pattern-based on Unicode LDML Date Format notation.
+ * For more information, see [UTS #35: Unicode Locale Data Markup Language](https://unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table).
+ *
+ * **Example:** the following format `dd/MM/yyyy, hh:mm:ss aa`
+ * corresponds the `13/04/2020, 03:16:16 AM` value.
+ *
+ * The small 'h' defines "12" hours format and the "aa" symbols - "AM/PM" time periods.
+ *
+ * **Example:** the following format `dd/MM/yyyy, HH:mm:ss`
+ * corresponds the `13/04/2020, 15:16:16` value.
+ *
+ * The capital 'H' indicates "24" hours format.
+ *
+ * **Note:** If the `formatPattern` does NOT include time,
+ * the `DateTimePicker` will fallback to the default time format according to the locale.
+ *
+ * **Note:** If no placeholder is set to the `DateTimePicker`,
+ * the current `formatPattern` is displayed as a placeholder.
+ * If another placeholder is needed, it must be set or in case no placeholder is needed - it can be set to an empty string.
+ *
+ * **Note:** If the user input does NOT match the `formatPattern`,
+ * the `DateTimePicker` makes an attempt to parse it based on the
+ * locale settings.
+ *
+ * ### Responsive behavior
+ *
+ * The `DateTimePicker` is responsive and fully adapts to all devices.
+ * For larger screens, such as tablet or desktop, it is displayed as a popover, while
+ * on phone devices, it is displayed full screen.
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/dist/DateTimePicker.js";`
+ * @constructor
+ * @extends DatePicker
+ * @since 1.0.0-rc.7
+ * @public
+ */
+let DateTimePicker = DateTimePicker_1 = class DateTimePicker extends DatePicker {
+    constructor() {
+        super();
+        /**
+         * Defines the visibility of the time view in `phoneMode`.
+         * For more information, see the `phoneMode` property.
+         *
+         * **Note:** The date view would be displayed by default.
+         * @default false
+         * @private
+         */
+        this._showTimeView = false;
+        /**
+         * Defines if the `DateTimePicker` 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.
+         * @default false
+         * @private
+         */
+        this._phoneMode = false;
+        /**
+         * Selected, but not yet confirmed date/time
+         * @private
+         */
+        this._previewValues = {};
+        /**
+         * Stores the last valid value to preserve time when entering invalid values
+         * @private
+         */
+        this._lastValidValue = "";
+        this._handleResizeBound = this._handleResize.bind(this);
+    }
+    /**
+     * @override
+     */
+    onResponsivePopoverAfterClose() {
+        super.onResponsivePopoverAfterClose();
+        this._showTimeView = false;
+        this._previewValues = {};
+    }
+    /**
+     * LIFECYCLE METHODS
+     */
+    onEnterDOM() {
+        ResizeHandler.register(document.body, this._handleResizeBound);
+    }
+    onExitDOM() {
+        ResizeHandler.deregister(document.body, this._handleResizeBound);
+    }
+    /**
+     * @override
+     * @private
+     */
+    _togglePicker() {
+        super._togglePicker();
+        if (this.open) {
+            let timeSelectionValue = this.value;
+            // If current value is invalid, use the last valid value for time selection
+            if (!timeSelectionValue || !this.isValidValue(timeSelectionValue)) {
+                timeSelectionValue = this._lastValidValue || this.getValueFormat().format(UI5Date.getInstance());
+            }
+            this._previewValues = {
+                ...this._previewValues,
+                timeSelectionValue,
+            };
+        }
+    }
+    get formValidityMessage() {
+        const validity = this.formValidity;
+        if (validity.valueMissing) {
+            // @ts-ignore oFormatOptions is a private API of DateFormat
+            return DateTimePicker_1.i18nBundle.getText(DATETIME_VALUE_MISSING, this.getFormat().oFormatOptions.pattern);
+        }
+        if (validity.patternMismatch) {
+            // @ts-ignore oFormatOptions is a private API of DateFormat
+            return DateTimePicker_1.i18nBundle.getText(DATETIME_PATTERN_MISMATCH, this.getFormat().oFormatOptions.pattern);
+        }
+        if (validity.rangeUnderflow) {
+            return DateTimePicker_1.i18nBundle.getText(DATETIME_RANGEUNDERFLOW, this.minDate);
+        }
+        if (validity.rangeOverflow) {
+            return DateTimePicker_1.i18nBundle.getText(DATETIME_RANGEOVERFLOW, this.maxDate);
+        }
+        return "";
+    }
+    get formValidity() {
+        return {
+            valueMissing: this.required && !this.value,
+            patternMismatch: !this.isValidValue(this.value),
+            rangeUnderflow: !this.isValidMin(this.value),
+            rangeOverflow: !this.isValidMax(this.value),
+        };
+    }
+    get _formatPattern() {
+        const formatPattern = this.formatPattern || this.valueFormat || "medium";
+        const hasHours = !!(formatPattern || "").match(/H/i);
+        const fallback = !formatPattern || !hasHours;
+        const localeData = getCachedLocaleDataInstance(getLocale());
+        return fallback ? localeData.getCombinedDateTimePattern("medium", "medium", this._primaryCalendarType) : (formatPattern || "");
+    }
+    get _calendarTimestamp() {
+        return this._previewValues.calendarTimestamp ? this._previewValues.calendarTimestamp : super._calendarTimestamp;
+    }
+    get _calendarSelectedDates() {
+        return this._previewValues.calendarValue ? [this._previewValues.calendarValue] : super._calendarSelectedDates;
+    }
+    get _timeSelectionValue() {
+        return this._previewValues.timeSelectionValue ? this._previewValues.timeSelectionValue : this.value;
+    }
+    get openIconName() {
+        return "date-time";
+    }
+    get btnOKLabel() {
+        return DateTimePicker_1.i18nBundle.getText(TIMEPICKER_SUBMIT_BUTTON);
+    }
+    get btnCancelLabel() {
+        return DateTimePicker_1.i18nBundle.getText(TIMEPICKER_CANCEL_BUTTON);
+    }
+    get btnDateLabel() {
+        return DateTimePicker_1.i18nBundle.getText(DATETIME_PICKER_DATE_BUTTON);
+    }
+    get btnTimeLabel() {
+        return DateTimePicker_1.i18nBundle.getText(DATETIME_PICKER_TIME_BUTTON);
+    }
+    get showFooter() {
+        return true;
+    }
+    get showDateView() {
+        return this._phoneView ? !this._showTimeView : true;
+    }
+    get showTimeView() {
+        return this._phoneView ? this._showTimeView : true;
+    }
+    get _phoneView() {
+        return isPhone() || this._phoneMode;
+    }
+    /**
+     * @override
+     */
+    get roleDescription() {
+        return DateTimePicker_1.i18nBundle.getText(DATETIME_DESCRIPTION);
+    }
+    /**
+     * @override
+     */
+    get pickerAccessibleName() {
+        return DateTimePicker_1.i18nBundle.getText(DATETIMEPICKER_POPOVER_ACCESSIBLE_NAME, this.ariaLabelText);
+    }
+    /**
+     * Defines whether the dialog on mobile should have header
+     * @private
+     */
+    get _shouldHideHeader() {
+        return false;
+    }
+    /**
+     * EVENT HANDLERS
+     */
+    /**
+     * @override
+     */
+    async onSelectedDatesChange(e) {
+        e.preventDefault();
+        // Try to get the current time value from the time picker,
+        // but fallback to last valid value if current picker time is empty or invalid
+        let timeValue = this._clocks?.value || "";
+        if (!timeValue || !this.isValidValue(timeValue)) {
+            timeValue = this._lastValidValue || this.getValueFormat().format(UI5Date.getInstance());
+        }
+        this._previewValues = {
+            ...this._previewValues,
+            calendarTimestamp: e.detail.timestamp,
+            calendarValue: e.detail.selectedValues[0],
+            timeSelectionValue: timeValue,
+        };
+        this._showTimeView = true;
+        if (this.showDateView) {
+            return;
+        }
+        await renderFinished();
+        this._clocks.focus();
+    }
+    onTimeSelectionChange(e) {
+        this._previewValues = {
+            ...this._previewValues,
+            timeSelectionValue: e.detail.value,
+        };
+    }
+    /**
+     * Handles document resize to switch between `phoneMode` and normal appearance.
+     */
+    _handleResize() {
+        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;
+        }
+    }
+    get _submitDisabled() {
+        return !this._calendarSelectedDates || !this._calendarSelectedDates.length;
+    }
+    /**
+     * Handles clicking on the `submit` button, within the picker`s footer.
+     */
+    _submitClick() {
+        const selectedDate = this.getSelectedDateTime();
+        const value = this.getValueFormat().format(selectedDate);
+        if (this.value !== value) {
+            this._updateValueAndFireEvents(value, true, ["change", "value-changed"]);
+        }
+        this._togglePicker();
+    }
+    /**
+     * Handles clicking on the `cancel` button, within the picker`s footer,
+     * that would disregard the user selection.
+     */
+    _cancelClick() {
+        this._togglePicker();
+    }
+    /**
+     * Handles the date/time switch available in `phoneMode` to switch
+     * between the date and time views.
+     * @param e
+     */
+    _dateTimeSwitchChange(e) {
+        const selectedItem = e.detail.selectedItems[0];
+        this._showTimeView = selectedItem.getAttribute("data-ui5-key") === "Time";
+    }
+    /**
+     * @override
+     */
+    _modifyDateValue(amount, unit, preserveDate) {
+        if (!this.dateValue) {
+            return;
+        }
+        const modifiedDate = modifyDateBy(CalendarDate.fromLocalJSDate(this.dateValue), amount, unit, preserveDate, this._minDate, this._maxDate);
+        const modifiedLocalDate = modifiedDate.toLocalJSDate();
+        modifiedLocalDate.setHours(this.dateValue.getHours());
+        modifiedLocalDate.setMinutes(this.dateValue.getMinutes());
+        modifiedLocalDate.setSeconds(this.dateValue.getSeconds());
+        const newValue = this.formatValue(modifiedLocalDate);
+        this._updateValueAndFireEvents(newValue, true, ["change", "value-changed"]);
+    }
+    /**
+     * @override
+     */
+    _updateValueAndFireEvents(value, normalizeValue, events, updateValue = true) {
+        super._updateValueAndFireEvents(value, normalizeValue, events, updateValue);
+        // Always store the current value if it's valid (handles both updates and initial values)
+        if (this.value && this.isValidValue(this.value)) {
+            this._lastValidValue = this.value;
+        }
+    }
+    /**
+     * Checks if the provided value is valid and within valid range.
+     * @override
+     * @param value
+     */
+    _checkValueValidity(value) {
+        if (value === "") {
+            return true;
+        }
+        return this.isValidValue(value);
+    }
+    getSelectedDateTime() {
+        const selectedDate = this.getValueFormat().parse(this._calendarSelectedDates[0]);
+        const selectedTime = this.getValueFormat().parse(this._timeSelectionValue);
+        if (selectedTime) {
+            selectedDate.setHours(selectedTime.getHours());
+            selectedDate.setMinutes(selectedTime.getMinutes());
+            selectedDate.setSeconds(selectedTime.getSeconds());
+        }
+        return selectedDate;
+    }
+    getFormat() {
+        return this._isPattern
+            ? DateFormat.getDateTimeInstance({
+                strictParsing: true,
+                pattern: this._formatPattern,
+                calendarType: this._primaryCalendarType,
+            })
+            : DateFormat.getDateTimeInstance({
+                strictParsing: true,
+                style: this._formatPattern,
+                calendarType: this._primaryCalendarType,
+            });
+    }
+    getDisplayFormat() {
+        return this._isDisplayFormatPattern
+            ? DateFormat.getDateTimeInstance({
+                strictParsing: true,
+                pattern: this._displayFormat,
+                calendarType: this._primaryCalendarType,
+            })
+            : DateFormat.getDateTimeInstance({
+                strictParsing: true,
+                style: this._displayFormat,
+                calendarType: this._primaryCalendarType,
+            });
+    }
+    getValueFormat() {
+        if (!this._valueFormat) {
+            return this.getISOFormat();
+        }
+        return this._isValueFormatPattern
+            ? DateFormat.getDateTimeInstance({
+                strictParsing: true,
+                pattern: this._valueFormat,
+                calendarType: this._primaryCalendarType,
+            })
+            : DateFormat.getDateTimeInstance({
+                strictParsing: true,
+                style: this._valueFormat,
+                calendarType: this._primaryCalendarType,
+            });
+    }
+    getISOFormat() {
+        if (!this._isoFormatInstance) {
+            this._isoFormatInstance = DateFormat.getDateTimeInstance({
+                strictParsing: true,
+                pattern: "YYYY-MM-dd hh:mm:ss",
+                calendarType: this._primaryCalendarType,
+            });
+        }
+        return this._isoFormatInstance;
+    }
+    /**
+     * @override
+     */
+    get _calendarPickersMode() {
+        return CalendarPickersMode.DAY_MONTH_YEAR;
+    }
+};
+__decorate([
+    property({ type: Boolean, noAttribute: true })
+], DateTimePicker.prototype, "_showTimeView", void 0);
+__decorate([
+    property({ type: Boolean })
+], DateTimePicker.prototype, "_phoneMode", void 0);
+__decorate([
+    property({ type: Object })
+], DateTimePicker.prototype, "_previewValues", void 0);
+__decorate([
+    property()
+], DateTimePicker.prototype, "_lastValidValue", void 0);
+__decorate([
+    query("[ui5-time-selection-clocks]")
+], DateTimePicker.prototype, "_clocks", void 0);
+DateTimePicker = DateTimePicker_1 = __decorate([
+    customElement({
+        tag: "ui5-datetime-picker",
+        template: DateTimePickerTemplate,
+        styles: [
+            DatePicker.styles,
+            DateTimePickerCss,
+            DateTimePickerPopoverCss,
+        ],
+    })
+], DateTimePicker);
+DateTimePicker.define();
+export default DateTimePicker;
+//# sourceMappingURL=DateTimePicker.js.map

package/dist/DateTimePicker.js.map

@@ -0,0 +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\tDATETIME_VALUE_MISSING,\n\tDATETIME_PATTERN_MISMATCH,\n\tDATETIME_RANGEUNDERFLOW,\n\tDATETIME_RANGEOVERFLOW,\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\";\nimport type TimeSelectionClocks from \"./TimeSelectionClocks.js\";\nimport query from \"@ui5/webcomponents-base/dist/decorators/query.js\";\nimport { renderFinished } from \"@ui5/webcomponents-base/dist/Render.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/**\n\t * Stores the last valid value to preserve time when entering invalid values\n\t * @private\n\t */\n\t@property()\n\t_lastValidValue: string = \"\";\n\n\t@query(\"[ui5-time-selection-clocks]\")\n\t_clocks!: TimeSelectionClocks;\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\tlet timeSelectionValue = this.value;\n\n\t\t\t// If current value is invalid, use the last valid value for time selection\n\t\t\tif (!timeSelectionValue || !this.isValidValue(timeSelectionValue)) {\n\t\t\t\ttimeSelectionValue = this._lastValidValue || this.getValueFormat().format(UI5Date.getInstance());\n\t\t\t}\n\n\t\t\tthis._previewValues = {\n\t\t\t\t...this._previewValues,\n\t\t\t\ttimeSelectionValue,\n\t\t\t};\n\t\t}\n\t}\n\n\tget formValidityMessage() {\n\t\tconst validity = this.formValidity;\n\n\t\tif (validity.valueMissing) {\n\t\t\t// @ts-ignore oFormatOptions is a private API of DateFormat\n\t\t\treturn DateTimePicker.i18nBundle.getText(DATETIME_VALUE_MISSING, this.getFormat().oFormatOptions.pattern as string);\n\t\t}\n\t\tif (validity.patternMismatch) {\n\t\t\t// @ts-ignore oFormatOptions is a private API of DateFormat\n\t\t\treturn DateTimePicker.i18nBundle.getText(DATETIME_PATTERN_MISMATCH, this.getFormat().oFormatOptions.pattern as string);\n\t\t}\n\t\tif (validity.rangeUnderflow) {\n\t\t\treturn DateTimePicker.i18nBundle.getText(DATETIME_RANGEUNDERFLOW, this.minDate);\n\t\t}\n\t\tif (validity.rangeOverflow) {\n\t\t\treturn DateTimePicker.i18nBundle.getText(DATETIME_RANGEOVERFLOW, this.maxDate);\n\t\t}\n\n\t\treturn \"\";\n\t}\n\n\tget formValidity(): ValidityStateFlags {\n\t\treturn {\n\t\t\tvalueMissing: this.required && !this.value,\n\t\t\tpatternMismatch: !this.isValidValue(this.value),\n\t\t\trangeUnderflow: !this.isValidMin(this.value),\n\t\t\trangeOverflow: !this.isValidMax(this.value),\n\t\t};\n\t}\n\n\tget _formatPattern() {\n\t\tconst formatPattern = this.formatPattern || this.valueFormat || \"medium\";\n\t\tconst hasHours = !!(formatPattern || \"\").match(/H/i);\n\t\tconst fallback = !formatPattern || !hasHours;\n\n\t\tconst localeData = getCachedLocaleDataInstance(getLocale());\n\t\treturn fallback ? localeData.getCombinedDateTimePattern(\"medium\", \"medium\", this._primaryCalendarType) : (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 roleDescription() {\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, this.ariaLabelText);\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 false;\n\t}\n\n\t/**\n\t * EVENT HANDLERS\n\t */\n\n\t/**\n\t * @override\n\t */\n\tasync onSelectedDatesChange(e: CustomEvent<CalendarSelectionChangeEventDetail>) {\n\t\te.preventDefault();\n\n\t\t// Try to get the current time value from the time picker,\n\t\t// but fallback to last valid value if current picker time is empty or invalid\n\t\tlet timeValue = this._clocks?.value || \"\";\n\t\tif (!timeValue || !this.isValidValue(timeValue)) {\n\t\t\ttimeValue = this._lastValidValue || this.getValueFormat().format(UI5Date.getInstance());\n\t\t}\n\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: timeValue,\n\t\t};\n\t\tthis._showTimeView = true;\n\n\t\tif (this.showDateView) {\n\t\t\treturn;\n\t\t}\n\n\t\tawait renderFinished();\n\t\tthis._clocks.focus();\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.getValueFormat().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\t/**\n\t * @override\n\t */\n\t_updateValueAndFireEvents(value: string, normalizeValue: boolean, events: Array<\"change\" | \"value-changed\" | \"input\">, updateValue = true) {\n\t\tsuper._updateValueAndFireEvents(value, normalizeValue, events, updateValue);\n\n\t\t// Always store the current value if it's valid (handles both updates and initial values)\n\t\tif (this.value && this.isValidValue(this.value)) {\n\t\t\tthis._lastValidValue = this.value;\n\t\t}\n\t}\n\n\t/**\n\t * Checks if the provided value is valid and within valid range.\n\t * @override\n\t * @param value\n\t */\n\t_checkValueValidity(value: string): boolean {\n\t\tif (value === \"\") {\n\t\t\treturn true;\n\t\t}\n\t\treturn this.isValidValue(value);\n\t}\n\n\tgetSelectedDateTime() {\n\t\tconst selectedDate = this.getValueFormat().parse(this._calendarSelectedDates[0]) as Date;\n\t\tconst selectedTime = this.getValueFormat().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\tgetDisplayFormat() {\n\t\treturn this._isDisplayFormatPattern\n\t\t\t? DateFormat.getDateTimeInstance({\n\t\t\t\tstrictParsing: true,\n\t\t\t\tpattern: this._displayFormat,\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._displayFormat,\n\t\t\t\tcalendarType: this._primaryCalendarType,\n\t\t\t});\n\t}\n\n\tgetValueFormat() {\n\t\tif (!this._valueFormat) {\n\t\t\treturn this.getISOFormat();\n\t\t}\n\n\t\treturn this._isValueFormatPattern\n\t\t\t? DateFormat.getDateTimeInstance({\n\t\t\t\tstrictParsing: true,\n\t\t\t\tpattern: this._valueFormat,\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._valueFormat,\n\t\t\t\tcalendarType: this._primaryCalendarType,\n\t\t\t});\n\t}\n\n\tgetISOFormat() {\n\t\tif (!this._isoFormatInstance) {\n\t\t\tthis._isoFormatInstance = DateFormat.getDateTimeInstance({\n\t\t\t\tstrictParsing: true,\n\t\t\t\tpattern: \"YYYY-MM-dd hh:mm:ss\",\n\t\t\t\tcalendarType: this._primaryCalendarType,\n\t\t\t});\n\t\t}\n\t\treturn this._isoFormatInstance;\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.d.ts

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

package/dist/DateTimePickerTemplate.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@ui5/webcomponents-base/jsx-runtime";
+import DatePickerInputTemplate from "./DatePickerInputTemplate.js";
+import DatePickerPopoverTemplate from "./DatePickerPopoverTemplate.js";
+import Button from "./Button.js";
+import Calendar from "./Calendar.js";
+import CalendarDate from "./CalendarDate.js";
+import SegmentedButton from "./SegmentedButton.js";
+import SegmentedButtonItem from "./SegmentedButtonItem.js";
+import TimeSelectionClocks from "./TimeSelectionClocks.js";
+export default function DateTimePickerTemplate() {
+    return [
+        DatePickerInputTemplate.call(this),
+        DatePickerPopoverTemplate.call(this, { content, footer, initialFocus: this.initialFocusId }),
+    ];
+}
+function content() {
+    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._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

@@ -0,0 +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, initialFocus: this.initialFocusId }),\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"]}