@ui5/webcomponents 0.0.0-d0bcf47c7 → 0.0.0-d1315d658

package/dist/DateTimePicker.d.ts

@@ -0,0 +1,210 @@
+import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import "@ui5/webcomponents-icons/dist/date-time.js";
+import type ResponsivePopover from "./ResponsivePopover.js";
+import type { CalendarSelectedDatesChangeEventDetail } from "./Calendar.js";
+import DatePicker from "./DatePicker.js";
+import type { DatePickerChangeEventDetail as DateTimePickerChangeEventDetail, DatePickerInputEventDetail as DateTimePickerInputEventDetail } from "./DatePicker.js";
+import type { TimeSelectionChangeEventDetail, TimeSelectionSliderChangeEventDetail } from "./TimeSelection.js";
+import CalendarPickersMode from "./types/CalendarPickersMode.js";
+type PreviewValues = {
+    timeSelectionValue?: string;
+    calendarTimestamp?: number;
+    calendarValue?: string;
+};
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ * The <code>DateTimePicker</code> 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.
+ *
+ * <h3>Usage</h3>
+ *
+ * Use the <code>DateTimePicker</code> 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 <code>DatePicker</code> or the <code>TimePicker</code> components instead.
+ * <br><br>
+ * The user can set date/time by:
+ * <ul>
+ * <li>using the calendar and the time selectors</li>
+ * <li>typing in the input field</li>
+ * </ul>
+ *
+ * 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">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.
+ * <br>
+ * The small 'h' defines "12" hours format and the "aa" symbols - "AM/PM" time periods.
+ *
+ * <br><br>
+ * <b>Example:</b> the following format <code>dd/MM/yyyy, HH:mm:ss</code>
+ * corresponds the <code>13/04/2020, 15:16:16</code> value.
+ * <br>
+ * The capital 'H' indicates "24" hours format.
+ *
+ * <br><br>
+ * <b>Note:</b> If the <code>formatPattern</code> does NOT include time,
+ * the <code>DateTimePicker</code> will fallback to the default time format according to the locale.
+ *
+ * <br><br>
+ * <b>Note:</b> If no placeholder is set to the <code>DateTimePicker</code>,
+ * the current <code>formatPattern</code> 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.
+ *
+ * <br><br>
+ * <b>Note:</b> If the user input does NOT match the <code>formatPattern</code>,
+ * the <code>DateTimePicker</code> makes an attempt to parse it based on the
+ * locale settings.
+ *
+ * <h3>Responsive behavior</h3>
+ *
+ * The <code>DateTimePicker</code> 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.
+ *
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@ui5/webcomponents/dist/DateTimePicker.js";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.main.DateTimePicker
+ * @extends sap.ui.webc.main.DatePicker
+ * @tagname ui5-datetime-picker
+ * @since 1.0.0-rc.7
+ * @public
+ */
+declare class DateTimePicker extends DatePicker {
+    /**
+     * 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: boolean;
+    /**
+     * 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: boolean;
+    /**
+     * Selected, but not yet confirmed date/time
+     * @private
+     */
+    _previewValues: PreviewValues;
+    /**
+     * @private
+     */
+    _currentTimeSlider: string;
+    _handleResizeBound: ResizeObserverCallback;
+    constructor();
+    /**
+     * @override
+     */
+    onResponsivePopoverAfterClose(): void;
+    /**
+     * LIFECYCLE METHODS
+     */
+    onEnterDOM(): void;
+    onExitDOM(): void;
+    /**
+     * PUBLIC METHODS
+     */
+    /**
+     * Opens the picker.
+     * @public
+     */
+    openPicker(): Promise<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[];
+    get _timeSelectionValue(): string;
+    get openIconName(): string;
+    get btnOKLabel(): string;
+    get btnCancelLabel(): string;
+    get btnDateLabel(): string;
+    get btnTimeLabel(): string;
+    get showFooter(): boolean;
+    get showDateView(): boolean;
+    get showTimeView(): boolean;
+    get phone(): boolean;
+    get dateAriaDescription(): string;
+    /**
+     * Defines whether the dialog on mobile should have header
+     * @private
+     */
+    get _shouldHideHeader(): boolean;
+    /**
+     * EVENT HANDLERS
+     */
+    /**
+     * @override
+     */
+    onSelectedDatesChange(e: CustomEvent<CalendarSelectedDatesChangeEventDetail>): void;
+    onTimeSelectionChange(e: CustomEvent<TimeSelectionChangeEventDetail>): void;
+    onTimeSliderChange(e: CustomEvent<TimeSelectionSliderChangeEventDetail>): void;
+    /**
+     * Handles document resize to switch between <code>phoneMode</code> and normal appearance.
+     */
+    _handleResize(): void;
+    get _submitDisabled(): boolean;
+    /**
+     * Handles clicking on the <code>submit</code> button, within the picker`s footer.
+     */
+    _submitClick(): void;
+    /**
+     * Handles clicking on the <code>cancel</code> button, within the picker`s footer,
+     * that would disregard the user selection.
+     */
+    _cancelClick(): void;
+    /**
+     * Handles the date/time switch available in <code>phoneMode</code> to switch
+     * between the date and time views.
+     * @param {Event} e
+     */
+    _dateTimeSwitchChange(e: CustomEvent): void;
+    /**
+     * @override
+     */
+    _modifyDateValue(amount: number, unit: string, preserveDate: boolean): void;
+    getPicker(): Promise<ResponsivePopover>;
+    getSelectedDateTime(): Date;
+    /**
+     * @override
+     */
+    get _calendarPickersMode(): CalendarPickersMode;
+}
+export default DateTimePicker;
+export type { DateTimePickerChangeEventDetail, DateTimePickerInputEventDetail, };

package/dist/DateTimePicker.js

@@ -0,0 +1,347 @@
+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 Button from "./Button.js";
+import ToggleButton from "./ToggleButton.js";
+import SegmentedButton from "./SegmentedButton.js";
+import Calendar from "./Calendar.js";
+import DatePicker from "./DatePicker.js";
+import TimeSelection from "./TimeSelection.js";
+// i18n texts
+import { TIMEPICKER_SUBMIT_BUTTON, TIMEPICKER_CANCEL_BUTTON, DATETIME_DESCRIPTION, DATETIME_PICKER_DATE_BUTTON, DATETIME_PICKER_TIME_BUTTON, } from "./generated/i18n/i18n-defaults.js";
+// Template
+import DateTimePickerPopoverTemplate from "./generated/templates/DateTimePickerPopoverTemplate.lit.js";
+// Styles
+import DateTimePickerCss from "./generated/themes/DateTimePicker.css.js";
+import DateTimePickerPopoverCss from "./generated/themes/DateTimePickerPopover.css.js";
+import CalendarPickersMode from "./types/CalendarPickersMode.js";
+const PHONE_MODE_BREAKPOINT = 640; // px
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ * The <code>DateTimePicker</code> 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.
+ *
+ * <h3>Usage</h3>
+ *
+ * Use the <code>DateTimePicker</code> 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 <code>DatePicker</code> or the <code>TimePicker</code> components instead.
+ * <br><br>
+ * The user can set date/time by:
+ * <ul>
+ * <li>using the calendar and the time selectors</li>
+ * <li>typing in the input field</li>
+ * </ul>
+ *
+ * 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">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.
+ * <br>
+ * The small 'h' defines "12" hours format and the "aa" symbols - "AM/PM" time periods.
+ *
+ * <br><br>
+ * <b>Example:</b> the following format <code>dd/MM/yyyy, HH:mm:ss</code>
+ * corresponds the <code>13/04/2020, 15:16:16</code> value.
+ * <br>
+ * The capital 'H' indicates "24" hours format.
+ *
+ * <br><br>
+ * <b>Note:</b> If the <code>formatPattern</code> does NOT include time,
+ * the <code>DateTimePicker</code> will fallback to the default time format according to the locale.
+ *
+ * <br><br>
+ * <b>Note:</b> If no placeholder is set to the <code>DateTimePicker</code>,
+ * the current <code>formatPattern</code> 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.
+ *
+ * <br><br>
+ * <b>Note:</b> If the user input does NOT match the <code>formatPattern</code>,
+ * the <code>DateTimePicker</code> makes an attempt to parse it based on the
+ * locale settings.
+ *
+ * <h3>Responsive behavior</h3>
+ *
+ * The <code>DateTimePicker</code> 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.
+ *
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@ui5/webcomponents/dist/DateTimePicker.js";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.main.DateTimePicker
+ * @extends sap.ui.webc.main.DatePicker
+ * @tagname ui5-datetime-picker
+ * @since 1.0.0-rc.7
+ * @public
+ */
+let DateTimePicker = DateTimePicker_1 = class DateTimePicker extends DatePicker {
+    constructor() {
+        super();
+        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);
+    }
+    /**
+     * PUBLIC METHODS
+     */
+    /**
+     * Opens the picker.
+     * @public
+     */
+    async openPicker() {
+        await super.openPicker();
+        this._currentTimeSlider = "hours";
+        this._previewValues.timeSelectionValue = this.value || this.getFormat().format(new Date());
+    }
+    /**
+     * Read-only getters
+     */
+    get classes() {
+        return {
+            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;
+        const localeData = getCachedLocaleDataInstance(getLocale());
+        return fallback ? localeData.getCombinedDateTimePattern("medium", "medium", this._primaryCalendarType) : this.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.phone ? !this._showTimeView : true;
+    }
+    get showTimeView() {
+        return this.phone ? this._showTimeView : true;
+    }
+    get phone() {
+        return super.phone || this._phoneMode;
+    }
+    get dateAriaDescription() {
+        return DateTimePicker_1.i18nBundle.getText(DATETIME_DESCRIPTION);
+    }
+    /**
+     * Defines whether the dialog on mobile should have header
+     * @private
+     */
+    get _shouldHideHeader() {
+        return true;
+    }
+    /**
+     * EVENT HANDLERS
+     */
+    /**
+     * @override
+     */
+    onSelectedDatesChange(e) {
+        e.preventDefault();
+        // @ts-ignore Needed for FF
+        const dateTimePickerContent = e.path ? e.path[1] : e.composedPath()[1];
+        this._previewValues = {
+            ...this._previewValues,
+            calendarTimestamp: e.detail.timestamp,
+            calendarValue: e.detail.values[0],
+            timeSelectionValue: dateTimePickerContent.lastChild.value,
+        };
+    }
+    onTimeSelectionChange(e) {
+        this._previewValues = {
+            ...this._previewValues,
+            timeSelectionValue: e.detail.value,
+        };
+    }
+    onTimeSliderChange(e) {
+        this._currentTimeSlider = e.detail.slider;
+    }
+    /**
+     * Handles document resize to switch between <code>phoneMode</code> 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 <code>submit</code> button, within the picker`s footer.
+     */
+    _submitClick() {
+        const selectedDate = this.getSelectedDateTime();
+        const value = this.getFormat().format(selectedDate);
+        if (this.value !== value) {
+            this._updateValueAndFireEvents(value, true, ["change", "value-changed"]);
+        }
+        this.closePicker();
+    }
+    /**
+     * Handles clicking on the <code>cancel</code> button, within the picker`s footer,
+     * that would disregard the user selection.
+     */
+    _cancelClick() {
+        this.closePicker();
+    }
+    /**
+     * Handles the date/time switch available in <code>phoneMode</code> to switch
+     * between the date and time views.
+     * @param {Event} e
+     */
+    _dateTimeSwitchChange(e) {
+        const target = e.target;
+        this._showTimeView = target.getAttribute("key") === "Time";
+        if (this._showTimeView) {
+            this._currentTimeSlider = "hours";
+        }
+    }
+    /**
+     * @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"]);
+    }
+    async getPicker() {
+        const staticAreaItem = await this.getStaticAreaItemDomRef();
+        return staticAreaItem.querySelector("[ui5-responsive-popover]");
+    }
+    getSelectedDateTime() {
+        const selectedDate = this.getFormat().parse(this._calendarSelectedDates[0]);
+        const selectedTime = this.getFormat().parse(this._timeSelectionValue);
+        if (selectedTime) {
+            selectedDate.setHours(selectedTime.getHours());
+            selectedDate.setMinutes(selectedTime.getMinutes());
+            selectedDate.setSeconds(selectedTime.getSeconds());
+        }
+        return selectedDate;
+    }
+    /**
+     * @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({ defaultValue: "hours" })
+], DateTimePicker.prototype, "_currentTimeSlider", void 0);
+DateTimePicker = DateTimePicker_1 = __decorate([
+    customElement({
+        tag: "ui5-datetime-picker",
+        staticAreaTemplate: DateTimePickerPopoverTemplate,
+        styles: [
+            DateTimePicker_1.styles,
+            DateTimePickerCss,
+        ],
+        staticAreaStyles: [
+            DatePicker.staticAreaStyles,
+            DateTimePickerPopoverCss,
+        ],
+        dependencies: [
+            ...DatePicker.dependencies,
+            Calendar,
+            Button,
+            ToggleButton,
+            SegmentedButton,
+            TimeSelection,
+        ],
+    })
+], 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 \"@ui5/webcomponents-icons/dist/date-time.js\";\nimport Button from \"./Button.js\";\nimport type ResponsivePopover from \"./ResponsivePopover.js\";\nimport ToggleButton from \"./ToggleButton.js\";\nimport SegmentedButton from \"./SegmentedButton.js\";\nimport Calendar from \"./Calendar.js\";\nimport type { CalendarSelectedDatesChangeEventDetail } from \"./Calendar.js\";\nimport DatePicker from \"./DatePicker.js\";\nimport type {\n\tDatePickerChangeEventDetail as DateTimePickerChangeEventDetail,\n\tDatePickerInputEventDetail as DateTimePickerInputEventDetail,\n} from \"./DatePicker.js\";\nimport TimeSelection from \"./TimeSelection.js\";\nimport type { TimeSelectionChangeEventDetail, TimeSelectionSliderChangeEventDetail } from \"./TimeSelection.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} from \"./generated/i18n/i18n-defaults.js\";\n\n// Template\nimport DateTimePickerPopoverTemplate from \"./generated/templates/DateTimePickerPopoverTemplate.lit.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 * <h3 class=\"comment-api-title\">Overview</h3>\n * The <code>DateTimePicker</code> 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 * <h3>Usage</h3>\n *\n * Use the <code>DateTimePicker</code> 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 <code>DatePicker</code> or the <code>TimePicker</code> components instead.\n * <br><br>\n * The user can set date/time by:\n * <ul>\n * <li>using the calendar and the time selectors</li>\n * <li>typing in the input field</li>\n * </ul>\n *\n * Programmatically, to set date/time for the <code>DateTimePicker</code>, use the <code>value</code> property\n *\n * <h3>Formatting</h3>\n *\n * The value entered by typing into the input field must fit to the used date/time format.\n * <br><br>\n * Supported format options are pattern-based on Unicode LDML Date Format notation.\n * 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>.\n * <br><br>\n * <b>Example:</b> the following format <code>dd/MM/yyyy, hh:mm:ss aa</code>\n * corresponds the <code>13/04/2020, 03:16:16 AM</code> value.\n * <br>\n * The small 'h' defines \"12\" hours format and the \"aa\" symbols - \"AM/PM\" time periods.\n *\n * <br><br>\n * <b>Example:</b> the following format <code>dd/MM/yyyy, HH:mm:ss</code>\n * corresponds the <code>13/04/2020, 15:16:16</code> value.\n * <br>\n * The capital 'H' indicates \"24\" hours format.\n *\n * <br><br>\n * <b>Note:</b> If the <code>formatPattern</code> does NOT include time,\n * the <code>DateTimePicker</code> will fallback to the default time format according to the locale.\n *\n * <br><br>\n * <b>Note:</b> If no placeholder is set to the <code>DateTimePicker</code>,\n * the current <code>formatPattern</code> 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 * <br><br>\n * <b>Note:</b> If the user input does NOT match the <code>formatPattern</code>,\n * the <code>DateTimePicker</code> makes an attempt to parse it based on the\n * locale settings.\n *\n * <h3>Responsive behavior</h3>\n *\n * The <code>DateTimePicker</code> 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 * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@ui5/webcomponents/dist/DateTimePicker.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @alias sap.ui.webc.main.DateTimePicker\n * @extends sap.ui.webc.main.DatePicker\n * @tagname ui5-datetime-picker\n * @since 1.0.0-rc.7\n * @public\n */\n@customElement({\n\ttag: \"ui5-datetime-picker\",\n\tstaticAreaTemplate: DateTimePickerPopoverTemplate,\n\tstyles: [\n\t\tDateTimePicker.styles,\n\t\tDateTimePickerCss,\n\t],\n\tstaticAreaStyles: [\n\t\tDatePicker.staticAreaStyles,\n\t\tDateTimePickerPopoverCss,\n\t],\n\tdependencies: [\n\t\t...DatePicker.dependencies,\n\t\tCalendar,\n\t\tButton,\n\t\tToggleButton,\n\t\tSegmentedButton,\n\t\tTimeSelection,\n\t],\n})\nclass DateTimePicker extends DatePicker {\n\t/**\n\t * Defines the visibility of the time view in <code>phoneMode</code>.\n\t * For more information, see the <code>phoneMode</code> property.\n\t *\n\t * <br><br>\n\t * <b>Note:</b> The date view would be displayed by default.\n\t * @type {boolean}\n\t * @defaultvalue false\n\t * @private\n\t */\n\t@property({ type: Boolean, noAttribute: true })\n\t_showTimeView!: boolean;\n\n\t/**\n\t * Defines if the <code>DateTimePicker</code> 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 * @type {boolean}\n\t * @defaultvalue false\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_phoneMode!: boolean;\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 * @private\n\t */\n\t@property({ defaultValue: \"hours\" })\n\t_currentTimeSlider!: string;\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 * PUBLIC METHODS\n\t */\n\n\t/**\n\t * Opens the picker.\n\t * @public\n\t */\n\tasync openPicker() {\n\t\tawait super.openPicker();\n\t\tthis._currentTimeSlider = \"hours\";\n\t\tthis._previewValues.timeSelectionValue = this.value || this.getFormat().format(new Date());\n\t}\n\n\t/**\n\t * Read-only getters\n\t */\n\n\tget classes() {\n\t\treturn {\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\tget dateAriaDescription() {\n\t\treturn DateTimePicker.i18nBundle.getText(DATETIME_DESCRIPTION);\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<CalendarSelectedDatesChangeEventDetail>) {\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.values[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\tonTimeSliderChange(e: CustomEvent<TimeSelectionSliderChangeEventDetail>) {\n\t\tthis._currentTimeSlider = e.detail.slider;\n\t}\n\n\t/**\n\t * Handles document resize to switch between <code>phoneMode</code> 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 <code>submit</code> 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.closePicker();\n\t}\n\n\t/**\n\t * Handles clicking on the <code>cancel</code> button, within the picker`s footer,\n\t * that would disregard the user selection.\n\t */\n\t_cancelClick() {\n\t\tthis.closePicker();\n\t}\n\n\t/**\n\t * Handles the date/time switch available in <code>phoneMode</code> to switch\n\t * between the date and time views.\n\t * @param {Event} e\n\t */\n\t_dateTimeSwitchChange(e: CustomEvent) { // Note: fix when SegmentedButton is implemented in TS\n\t\tconst target = e.target as HTMLElement;\n\t\tthis._showTimeView = target.getAttribute(\"key\") === \"Time\";\n\t\tif (this._showTimeView) {\n\t\t\tthis._currentTimeSlider = \"hours\";\n\t\t}\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\tasync getPicker() {\n\t\tconst staticAreaItem = await this.getStaticAreaItemDomRef();\n\t\treturn staticAreaItem!.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\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"]}