@ui5/webcomponents 0.0.0-4e00e5559 → 0.0.0-4e88b8243

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

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,40 @@
+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, { header, content, footer }),
+    ];
+}
+function header() {
+    return (_jsx(_Fragment, { children: this.phone &&
+            _jsx("div", { class: "ui5-dt-picker-header", children: _jsxs(SegmentedButton, { class: "ui5-dt-picker-toggle-button", onSelectionChange: this._dateTimeSwitchChange, children: [_jsx(SegmentedButtonItem, { "data-ui5-key": "Date", selected: this.showDateView, children: this.btnDateLabel }), _jsx(SegmentedButtonItem, { "data-ui5-key": "Time", selected: this.showTimeView, children: this.btnTimeLabel })] }) }) }));
+}
+function content() {
+    return (_jsxs("div", { class: {
+            "ui5-dt-picker-content": true,
+            "ui5-dt-picker-content--phone": this.phone,
+        }, children: [_jsx(Calendar, { class: {
+                    "ui5-dt-cal": true,
+                    "ui5-dt-cal--hidden": this.phone && this.showTimeView,
+                    "ui5-dt-time--hidden": this.phone && this.showDateView,
+                }, id: `${this._id}-calendar`, primaryCalendarType: this._primaryCalendarType, secondaryCalendarType: this.secondaryCalendarType, formatPattern: this._formatPattern, selectionMode: this._calendarSelectionMode, minDate: this.minDate, maxDate: this.maxDate, calendarWeekNumbering: this.calendarWeekNumbering, onSelectionChange: this.onSelectedDatesChange, onShowMonthView: this.onHeaderShowMonthPress, onShowYearView: this.onHeaderShowYearPress, hideWeekNumbers: this.hideWeekNumbers, _currentPicker: this._calendarCurrentPicker, children: this._calendarSelectedDates.map(date => _jsx(CalendarDate, { value: date })) }), !this.phone && _jsx("span", { class: "ui5-dt-picker-separator" }), this.showTimeView &&
+                _jsx(TimeSelectionClocks, { id: `${this._id}-time-sel`, class: {
+                        "ui5-dt-time": true,
+                        ...this.classes.dateTimeView,
+                    }, formatPattern: this._formatPattern, value: this._timeSelectionValue, onChange: this.onTimeSelectionChange, _calendarType: this._primaryCalendarType })] }));
+}
+function footer() {
+    return (_jsxs("div", { slot: "footer", class: {
+            "ui5-dt-picker-footer": true,
+            "ui5-dt-picker-footer-time-hidden": (this.phone && this.showTimeView) || (this.phone && this.showDateView)
+        }, 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, { header, content, footer }),\n\t];\n}\n\nfunction header(this: DateTimePicker) {\n\treturn (\n\t\t<>\n\t\t\t{ this.phone &&\n\t\t\t\t<div class=\"ui5-dt-picker-header\">\n\t\t\t\t\t<SegmentedButton class=\"ui5-dt-picker-toggle-button\" onSelectionChange={this._dateTimeSwitchChange}>\n\t\t\t\t\t\t<SegmentedButtonItem data-ui5-key=\"Date\" selected={this.showDateView}>{this.btnDateLabel}</SegmentedButtonItem>\n\t\t\t\t\t\t<SegmentedButtonItem data-ui5-key=\"Time\" selected={this.showTimeView}>{this.btnTimeLabel}</SegmentedButtonItem>\n\t\t\t\t\t</SegmentedButton>\n\t\t\t\t</div>\n\t\t\t}\n\t\t</>\n\t);\n}\n\nfunction content(this: DateTimePicker) {\n\treturn (\n\t\t<div class={{\n\t\t\t\"ui5-dt-picker-content\": true,\n\t\t\t\"ui5-dt-picker-content--phone\": this.phone,\n\t\t}}>\n\t\t\t<Calendar\n\t\t\t\tclass={{\n\t\t\t\t\t\"ui5-dt-cal\": true,\n\t\t\t\t\t\"ui5-dt-cal--hidden\": this.phone && this.showTimeView,\n\t\t\t\t\t\"ui5-dt-time--hidden\": this.phone && this.showDateView,\n\t\t\t\t}}\n\t\t\t\tid={`${this._id}-calendar`}\n\t\t\t\tprimaryCalendarType={this._primaryCalendarType}\n\t\t\t\tsecondaryCalendarType={this.secondaryCalendarType}\n\t\t\t\tformatPattern={this._formatPattern}\n\t\t\t\tselectionMode={this._calendarSelectionMode}\n\t\t\t\tminDate={this.minDate}\n\t\t\t\tmaxDate={this.maxDate}\n\t\t\t\tcalendarWeekNumbering={this.calendarWeekNumbering}\n\t\t\t\tonSelectionChange={this.onSelectedDatesChange}\n\t\t\t\tonShowMonthView={this.onHeaderShowMonthPress}\n\t\t\t\tonShowYearView={this.onHeaderShowYearPress}\n\t\t\t\thideWeekNumbers={this.hideWeekNumbers}\n\t\t\t\t_currentPicker={this._calendarCurrentPicker}\n\t\t\t>\n\t\t\t\t{this._calendarSelectedDates.map(date =>\n\t\t\t\t\t<CalendarDate value={date} />\n\t\t\t\t)}\n\t\t\t</Calendar>\n\n\t\t\t{ !this.phone && <span class=\"ui5-dt-picker-separator\"></span> }\n\n\t\t\t{ this.showTimeView &&\n\t\t\t\t<TimeSelectionClocks\n\t\t\t\t\tid={`${this._id}-time-sel`}\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t\"ui5-dt-time\": true,\n\t\t\t\t\t\t...this.classes.dateTimeView,\n\t\t\t\t\t}}\n\t\t\t\t\tformatPattern={this._formatPattern}\n\t\t\t\t\tvalue={this._timeSelectionValue}\n\t\t\t\t\tonChange={this.onTimeSelectionChange}\n\t\t\t\t\t_calendarType={this._primaryCalendarType}\n\t\t\t\t/>\n\t\t\t}\n\t\t</div>\n\t);\n}\n\nfunction footer(this: DateTimePicker) {\n\treturn (\n\t\t<div\n\t\t\tslot=\"footer\"\n\t\t\tclass={{\n\t\t\t\t\"ui5-dt-picker-footer\": true,\n\t\t\t\t\"ui5-dt-picker-footer-time-hidden\": (this.phone && this.showTimeView) || (this.phone && this.showDateView)\n\t\t\t}}>\n\t\t\t<Button\n\t\t\t\tid=\"ok\"\n\t\t\t\tclass=\"ui5-dt-picker-action\"\n\t\t\t\tdesign=\"Emphasized\"\n\t\t\t\tdisabled={this._submitDisabled}\n\t\t\t\tonClick={this._submitClick}\n\t\t\t>\n\t\t\t\t{this.btnOKLabel}\n\t\t\t</Button>\n\n\t\t\t<Button\n\t\t\t\tid=\"cancel\"\n\t\t\t\tclass=\"ui5-dt-picker-action\"\n\t\t\t\tdesign=\"Transparent\"\n\t\t\t\tonClick={this._cancelClick}\n\t\t\t>\n\t\t\t\t{this.btnCancelLabel}\n\t\t\t</Button>\n\t\t</div>\n\t);\n}\n"]}

package/dist/DayPicker.d.ts

@@ -0,0 +1,238 @@
+import type LocaleData from "@ui5/webcomponents-localization/dist/LocaleData.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import CalendarDate from "@ui5/webcomponents-localization/dist/dates/CalendarDate.js";
+import CalendarSelectionMode from "./types/CalendarSelectionMode.js";
+import CalendarPart from "./CalendarPart.js";
+import type { ICalendarPicker, SpecialCalendarDateT } from "./Calendar.js";
+type DayName = {
+    name: string;
+    classes: string;
+    ultraShortName?: string;
+};
+type Day = {
+    timestamp: string;
+    day: number;
+    focusRef: boolean;
+    _tabIndex: number;
+    selected: boolean;
+    _isSecondaryCalendarType: boolean;
+    classes: string;
+    ariaLabel: string;
+    ariaSelected: boolean;
+    ariaDisabled: boolean | undefined;
+    disabled: boolean;
+    secondDay?: number;
+    weekNum?: number;
+    isHidden?: boolean;
+    type?: string;
+    parts: string;
+};
+type WeekNumber = {
+    weekNum: number;
+    isHidden: boolean;
+};
+type Week = Array<Day | WeekNumber>;
+type DayPickerChangeEventDetail = {
+    dates: Array<number>;
+    timestamp?: number;
+};
+type DayPickerNavigateEventDetail = {
+    timestamp: number;
+};
+/**
+ * @class
+ *
+ * Represents the days inside a single month view of the `ui5-calendar` component.
+ * @constructor
+ * @extends CalendarPart
+ * @private
+ */
+declare class DayPicker extends CalendarPart implements ICalendarPicker {
+    eventDetails: CalendarPart["eventDetails"] & {
+        "change": DayPickerChangeEventDetail;
+        "navigate": DayPickerNavigateEventDetail;
+    };
+    /**
+     * An array of UTC timestamps representing the selected date or dates depending on the capabilities of the picker component.
+     * @default []
+     */
+    selectedDates: Array<number>;
+    /**
+     * Defines the type of selection used in the day picker component.
+     * Accepted property values are:
+     *
+     * - `CalendarSelectionMode.Single` - enables a single date selection.(default value)
+     * - `CalendarSelectionMode.Range` - enables selection of a date range.
+     * - `CalendarSelectionMode.Multiple` - enables selection of multiple dates.
+     * @default "Single"
+     */
+    selectionMode: `${CalendarSelectionMode}`;
+    /**
+     * Defines the visibility of the week numbers column.
+     *
+     * **Note:** For calendars other than Gregorian,
+     * the week numbers are not displayed regardless of what is set.
+     * @default false
+     * @since 1.0.0-rc.8
+     */
+    hideWeekNumbers: boolean;
+    /**
+     * @private
+     */
+    _weeks: Array<Week>;
+    _dayNames: Array<DayName>;
+    /**
+     * When set, the component will skip all work in onBeforeRendering and will not automatically set the focus on itself
+     * @private
+     */
+    _hidden: boolean;
+    /**
+     * When selectionMode="Range" and the first day in the range is selected, this is the currently hovered (when using mouse) or focused (when using keyboard) day by the user
+     * @private
+     */
+    _secondTimestamp?: number;
+    /**
+     * Array of special calendar dates (if such are passed) from the calendar.
+     * @private
+     */
+    specialCalendarDates: Array<SpecialCalendarDateT>;
+    _autoFocus?: boolean;
+    static i18nBundle: I18nBundle;
+    onBeforeRendering(): void;
+    /**
+     * Builds the "_weeks" object that represents the month.
+     * @param localeData
+     * @private
+     */
+    _buildWeeks(localeData: LocaleData): void;
+    _calculateWeekNumber(date: Date): number;
+    /**
+     * Builds the dayNames object (header of the month).
+     * @param localeData
+     * @private
+     */
+    _buildDayNames(localeData: LocaleData): void;
+    /**
+     * Tells if any of the days is more than 4 characters(too long to render).
+     * @param dayNames
+     * @private
+     */
+    namesTooLong(dayNames: Array<string>): boolean;
+    onAfterRendering(): void;
+    _onfocusin(): void;
+    _onfocusout(): void;
+    /**
+     * Tells if the day is selected (dark blue).
+     * @param timestamp
+     * @private
+     */
+    _isDaySelected(timestamp: number): boolean;
+    /**
+     * Tells if the day is inside a selection range (light blue).
+     * @param timestamp
+     * @private
+     */
+    _isDayInsideSelectionRange(timestamp: number): boolean;
+    /**
+     * Selects/deselects a day.
+     * @param e
+     * @param isShift true if the user did Click+Shift or Enter+Shift (but not Space+Shift)
+     * @private
+     */
+    _selectDate(e: Event, isShift: boolean): void;
+    _updateSelectedDates(timestamp: number, isShift: boolean): void;
+    /**
+     * Selects/deselects the whole row (week).
+     * @private
+     */
+    _selectWeek(): void;
+    _toggleTimestampInSelection(timestamp: number): void;
+    _addTimestampToSelection(timestamp: number): void;
+    _removeTimestampFromSelection(timestamp: number): void;
+    /**
+     * Called when at least one day is selected and the user presses "Shift".
+     * @param timestamp
+     * @private
+     */
+    _multipleSelection(timestamp: number): void;
+    /**
+     * Set the hovered day as the "_secondTimestamp".
+     * @param e
+     * @private
+     */
+    _onmouseover(e: MouseEvent): void;
+    _onkeydown(e: KeyboardEvent): void;
+    _onkeyup(e: KeyboardEvent): void;
+    /**
+     * Click is the same as "Enter".
+     * **Note:** "Click+Shift" has the same effect as "Enter+Shift".
+     * @param e
+     * @private
+     */
+    _onclick(e: MouseEvent): void;
+    /**
+     * Called upon "Home" or "End" - moves the focus to the first or last item in the row.
+     * @param homePressed
+     * @private
+     */
+    _onHomeOrEnd(homePressed: boolean): void;
+    /**
+     * Called by the Calendar component.
+     * @protected
+     */
+    _hasPreviousPage(): boolean;
+    /**
+     * Called by the Calendar component.
+     * @protected
+     */
+    _hasNextPage(): boolean;
+    /**
+     * Called by the Calendar component.
+     * @protected
+     */
+    _showPreviousPage(): void;
+    /**
+     * Called by the Calendar component.
+     * @protected
+     */
+    _showNextPage(): void;
+    /**
+     * Modifies the timestamp by a certain amount of days/months/years.
+     * @param amount
+     * @param unit
+     * @param preserveDate whether to preserve the day of the month (f.e. 15th of March + 1 month = 15th of April)
+     * @private
+     */
+    _modifyTimestampBy(amount: number, unit: string, preserveDate?: boolean): void;
+    /**
+     * Sets the timestamp to an absolute value.
+     * @param value
+     * @private
+     */
+    _setTimestamp(value: number): void;
+    /**
+     * During range selection, when the user is navigating with the keyboard,
+     * the currently focused day is considered the "second day".
+     * @private
+     */
+    _updateSecondTimestamp(): void;
+    get _specialCalendarDates(): SpecialCalendarDateT[];
+    get shouldHideWeekNumbers(): boolean;
+    _isWeekend(oDate: CalendarDate): boolean;
+    _isDayPressed(target: HTMLElement): boolean;
+    _getSecondaryDay(tempDate: CalendarDate): CalendarDate;
+    _getFirstDay(): CalendarDate;
+    _getFirstDayOfWeek(): number;
+    get styles(): {
+        wrapper: {
+            display: string;
+            "justify-content": string;
+        };
+        main: {
+            width: string;
+        };
+    };
+    get ariaRoledescription(): string;
+}
+export default DayPicker;
+export type { DayPickerNavigateEventDetail, DayPickerChangeEventDetail, };