@ui5/webcomponents 0.0.0-d0bcf47c7 → 0.0.0-d473b9686

package/dist/DayPicker.js

@@ -1,453 +1,650 @@
-import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import { getLocale } from "@ui5/webcomponents-base/dist/LocaleProvider.js";
+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 DayPicker_1;
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import getLocale from "@ui5/webcomponents-base/dist/locale/getLocale.js";
 import { getFirstDayOfWeek } from "@ui5/webcomponents-base/dist/config/FormatSettings.js";
-import { getCalendarType } from "@ui5/webcomponents-base/dist/config/CalendarType.js";
-import { getFormatLocale } from "@ui5/webcomponents-base/dist/FormatSettings.js";
-import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
-import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/events/PseudoEvents.js";
+import getCachedLocaleDataInstance from "@ui5/webcomponents-localization/dist/getCachedLocaleDataInstance.js";
+import { isSpace, isSpaceShift, isEnter, isEnterShift, isUp, isDown, isLeft, isRight, isHome, isEnd, isHomeCtrl, isEndCtrl, isPageUp, isPageDown, isPageUpShift, isPageUpAlt, isPageUpShiftCtrl, isPageDownShift, isPageDownAlt, isPageDownShiftCtrl, } from "@ui5/webcomponents-base/dist/Keys.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
-import LocaleData from "@ui5/webcomponents-utils/dist/sap/ui/core/LocaleData.js";
-import CalendarDate from "@ui5/webcomponents-base/dist/dates/CalendarDate.js";
-import { calculateWeekNumber } from "@ui5/webcomponents-base/dist/dates/CalendarUtils.js";
-import CalendarType from "@ui5/webcomponents-base/dist/dates/CalendarType.js";
-import ItemNavigationBehavior from "@ui5/webcomponents-base/dist/types/ItemNavigationBehavior.js";
+import CalendarDate from "@ui5/webcomponents-localization/dist/dates/CalendarDate.js";
+import calculateWeekNumber from "@ui5/webcomponents-localization/dist/dates/calculateWeekNumber.js";
+import CalendarType from "@ui5/webcomponents-base/dist/types/CalendarType.js";
+import UI5Date from "@ui5/webcomponents-localization/dist/dates/UI5Date.js";
+import CalendarSelectionMode from "./types/CalendarSelectionMode.js";
+import CalendarPart from "./CalendarPart.js";
+import { DAY_PICKER_WEEK_NUMBER_TEXT, DAY_PICKER_NON_WORKING_DAY, DAY_PICKER_TODAY, } from "./generated/i18n/i18n-defaults.js";
+// Template
 import DayPickerTemplate from "./generated/templates/DayPickerTemplate.lit.js";
-
 // Styles
 import dayPickerCSS from "./generated/themes/DayPicker.css.js";
-
-/**
- * @public
- */
-const metadata = {
-	tag: "ui5-daypicker",
-	properties: /** @lends  sap.ui.webcomponents.main.DayPicker.prototype */ {
-		/**
-		 * A UNIX timestamp - seconds since 00:00:00 UTC on Jan 1, 1970.
-		 * @type {number}
-		 * @public
-		 */
-		timestamp: {
-			type: Integer,
-		},
-
-		/**
-		 * Sets a calendar type used for display.
-		 * If not set, the calendar type of the global configuration is used.
-		 * @type {string}
-		 * @public
-		 */
-		primaryCalendarType: {
-			type: CalendarType,
-		},
-
-		/**
-		 * Sets the selected dates as UTC timestamps.
-		 * @type {Array}
-		 * @public
-		 */
-		selectedDates: {
-			type: Integer,
-			multiple: true,
-		},
-
-		_weeks: {
-			type: Object,
-			multiple: true,
-		},
-
-		_weekNumbers: {
-			type: Object,
-			multiple: true,
-		},
-		_hidden: {
-			type: Boolean,
-			noAttribute: true,
-		},
-	},
-	events: /** @lends  sap.ui.webcomponents.main.DayPicker.prototype */ {
-		/**
-		 * Fired when the user selects a new Date on the Web Component.
-		 * @public
-		 * @event
-		 */
-		selectionChange: {},
-		/**
-		 * Fired when month, year has changed due to item navigation.
-		 * @public
-		 * @event
-		 */
-		navigate: {},
-	},
-};
-
-const MAX_YEAR = 9999;
-const MIN_YEAR = 1;
-
+const isBetween = (x, num1, num2) => x > Math.min(num1, num2) && x < Math.max(num1, num2);
+const DAYS_IN_WEEK = 7;
 /**
  * @class
  *
- * Represents one month view inside a calendar.
- *
+ * Represents the days inside a single month view of the `ui5-calendar` component.
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webcomponents.main.DayPicker
- * @extends sap.ui.webcomponents.base.UI5Element
- * @tagname ui5-daypicker
- * @public
+ * @extends CalendarPart
+ * @private
  */
-class DayPicker extends UI5Element {
-	static get metadata() {
-		return metadata;
-	}
-
-	static get render() {
-		return litRender;
-	}
-
-	static get template() {
-		return DayPickerTemplate;
-	}
-
-	static get styles() {
-		return dayPickerCSS;
-	}
-
-	constructor() {
-		super();
-		this._oLocale = getFormatLocale();
-		this._oLocaleData = new LocaleData(this._oLocale);
-
-		this._itemNav = new ItemNavigation(this, { rowSize: 7, behavior: ItemNavigationBehavior.Paging });
-		this._itemNav.getItemsCallback = function getItemsCallback() {
-			return [].concat(...this._weeks);
-		}.bind(this);
-
-		this._itemNav.attachEvent(
-			ItemNavigation.BORDER_REACH,
-			this._handleItemNavigationBorderReach.bind(this)
-		);
-	}
-
-	onBeforeRendering() {
-		let oCalDate,
-			day,
-			timestamp,
-			lastWeekNumber = -1,
-			isDaySelected = false,
-			todayIndex = 0;
-
-		const _aVisibleDays = this._getVisibleDays(this._calendarDate);
-
-		this._weeks = [];
-		let week = [];
-		this._weekNumbers = [];
-		let weekday;
-
-		/* eslint-disable no-loop-func */
-		for (let i = 0; i < _aVisibleDays.length; i++) {
-			oCalDate = _aVisibleDays[i];
-			timestamp = oCalDate.valueOf() / 1000; // no need to round because CalendarDate does it
-
-			// day of the week
-			weekday = oCalDate.getDay() - this._getFirstDayOfWeek();
-			if (weekday < 0) {
-				weekday += 7;
-			}
-			day = {
-				timestamp: timestamp.toString(),
-				selected: this._selectedDates.some(d => {
-					return d === timestamp;
-				}),
-				iDay: oCalDate.getDate(),
-				_index: i.toString(),
-				classes: `ui5-dp-item ui5-dp-wday${weekday}`,
-			};
-
-			const weekNumber = calculateWeekNumber(oCalDate.toUTCJSDate(), oCalDate.getYear(), this._oLocale, this._oLocaleData);
-
-			if (lastWeekNumber !== weekNumber) {
-				this._weekNumbers.push(weekNumber);
-
-				lastWeekNumber = weekNumber;
-			}
-
-			const isToday = (oCalDate.getDate() === this._currentCalendarDate.getDate())
-				&& (oCalDate.getMonth() === this._currentCalendarDate.getMonth())
-				&& (oCalDate.getYear() === this._currentCalendarDate.getYear());
-
-			week.push(day);
-
-			if (oCalDate.getDay() === this._getFirstDayOfWeek()) {
-				day.classes += " ui5-dp-firstday";
-			}
-
-			if (day.selected) {
-				day.classes += " ui5-dp-item--selected";
-				isDaySelected = true;
-			}
-
-			if (isToday) {
-				day.classes += " ui5-dp-item--now";
-				todayIndex = i;
-			}
-
-			if (oCalDate.getMonth() !== this._month) {
-				day.classes += " ui5-dp-item--othermonth";
-			}
-
-			day.id = `${this._id}-${timestamp}`;
-
-			if (this._isWeekend(oCalDate)) {
-				day.classes += " ui5-dp-item--weeekend";
-			}
-
-			if (day.classes.indexOf("ui5-dp-wday6") !== -1
-				|| _aVisibleDays.length - 1 === i) {
-				this._weeks.push(week);
-				week = [];
-			}
-		}
-
-		while (this._weeks.length < 6) {
-			this._weeks.push([]);
-		}
-		/* eslint-enable no-loop-func */
-
-		if (!isDaySelected && todayIndex && this._itemNav.current === 0) {
-			this._itemNav.current = todayIndex;
-		}
-
-		const aDayNamesWide = this._oLocaleData.getDays("wide", this._primaryCalendarType);
-		const aDayNamesAbbreviated = this._oLocaleData.getDays("abbreviated", this._primaryCalendarType);
-		const aUltraShortNames = aDayNamesAbbreviated.map(n => n);
-		let dayName;
-
-		this._dayNames = [];
-		for (let i = 0; i < 7; i++) {
-			weekday = i + this._getFirstDayOfWeek();
-			if (weekday > 6) {
-				weekday -= 7;
-			}
-			dayName = {
-				id: `${this._id}-WH${i.toString()}`,
-				name: aDayNamesWide[weekday],
-				ultraShortName: aUltraShortNames[weekday],
-				classes: "ui5-dp-dayname",
-			};
-
-			this._dayNames.push(dayName);
-		}
-
-		this._dayNames[0].classes += " ui5-dp-firstday";
-	}
-
-	_onmousedown(event) {
-		const target = event.target;
-
-		const dayPressed = this._isDayPressed(target);
-
-		if (dayPressed) {
-			const targetDate = parseInt(target.getAttribute("data-sap-timestamp"));
-
-			// findIndex, give it to item navigation
-			for (let i = 0; i < this._weeks.length; i++) {
-				for (let j = 0; j < this._weeks[i].length; j++) {
-					if (parseInt(this._weeks[i][j].timestamp) === targetDate) {
-						this._itemNav.current = parseInt(target.getAttribute("data-sap-index"));
-
-						this._itemNav.update();
-						break;
-					}
-				}
-			}
-
-			this.targetDate = targetDate;
-		}
-	}
-
-	_onmouseup(event) {
-		if (this.targetDate) {
-			this._modifySelectionAndNotifySubscribers(this.targetDate, event.ctrlKey);
-			this.targetDate = null;
-		}
-	}
-
-	_onkeydown(event) {
-		if (isEnter(event)) {
-			return this._handleEnter(event);
-		}
-
-		if (isSpace(event)) {
-			return this._handleSpace(event);
-		}
-	}
-
-	_handleEnter(event) {
-		event.preventDefault();
-		if (event.target.className.indexOf("ui5-dp-item") > -1) {
-			const targetDate = parseInt(event.target.getAttribute("data-sap-timestamp"));
-			this._modifySelectionAndNotifySubscribers(targetDate, event.ctrlKey);
-		}
-	}
-
-	_handleSpace(event) {
-		event.preventDefault();
-		if (event.target.className.indexOf("ui5-dp-item") > -1) {
-			const targetDate = parseInt(event.target.getAttribute("data-sap-timestamp"));
-			this._modifySelectionAndNotifySubscribers(targetDate, event.ctrlKey);
-		}
-	}
-
-	get showWeekNumbers() {
-		return this.primaryCalendarType === CalendarType.Gregorian;
-	}
-
-	get _timestamp() {
-		return this.timestamp !== undefined ? this.timestamp : Math.floor(new Date().getTime() / 1000);
-	}
-
-	get _localDate() {
-		return new Date(this._timestamp * 1000);
-	}
-
-	get _calendarDate() {
-		return CalendarDate.fromTimestamp(this._localDate.getTime(), this._primaryCalendarType);
-	}
-
-	get _month() {
-		return this._calendarDate.getMonth();
-	}
-
-	get _year() {
-		return this._calendarDate.getYear();
-	}
-
-	get _currentCalendarDate() {
-		return CalendarDate.fromTimestamp(new Date().getTime(), this._primaryCalendarType);
-	}
-
-	get _selectedDates() {
-		return this.selectedDates || [];
-	}
-
-	get _primaryCalendarType() {
-		return this.primaryCalendarType || getCalendarType() || LocaleData.getInstance(getLocale()).getPreferredCalendarType();
-	}
-
-	_modifySelectionAndNotifySubscribers(sNewDate, bAdd) {
-		if (bAdd) {
-			this.selectedDates = [...this._selectedDates, sNewDate];
-		} else {
-			this.selectedDates = [sNewDate];
-		}
-
-		this.fireEvent("selectionChange", { dates: [...this._selectedDates] });
-	}
-
-	_handleItemNavigationBorderReach(event) {
-		const currentMonth = this._month,
-			currentYear = this._year;
-		let iNewMonth,
-			iNewYear;
-
-		if (event.end) {
-			iNewMonth = currentMonth < 11 ? currentMonth + 1 : 0;
-			iNewYear = currentMonth < 11 ? currentYear : currentYear + 1;
-		} else if (event.start) {
-			iNewMonth = currentMonth > 0 ? currentMonth - 1 : 11;
-			iNewYear = currentMonth > 0 ? currentYear : currentYear - 1;
-		}
-
-		const oNewDate = this._calendarDate;
-		oNewDate.setYear(iNewYear);
-		oNewDate.setMonth(iNewMonth);
-
-		if (oNewDate.getYear() < MIN_YEAR || oNewDate.getYear() > MAX_YEAR) {
-			return;
-		}
-
-		this.fireEvent("navigate", { timestamp: (oNewDate.valueOf() / 1000) });
-	}
-
-	_isWeekend(oDate) {
-		const iWeekDay = oDate.getDay(),
-			iWeekendStart = this._oLocaleData.getWeekendStart(),
-			iWeekendEnd = this._oLocaleData.getWeekendEnd();
-
-		return (iWeekDay >= iWeekendStart && iWeekDay <= iWeekendEnd)
-			|| (iWeekendEnd < iWeekendStart && (iWeekDay >= iWeekendStart || iWeekDay <= iWeekendEnd));
-	}
-
-	_isDayPressed(target) {
-		const targetParent = target.parentNode;
-		return (target.className.indexOf("ui5-dp-item") > -1) || (targetParent && target.parentNode.classList.contains("ui5-dp-item"));
-	}
-
-	_getVisibleDays(oStartDate, bIncludeBCDates) {
-		let oCalDate,
-			iDaysOldMonth,
-			iYear;
-
-		const _aVisibleDays = [];
-
-		// If date passed generate days for new start date else return the current one
-		if (!oStartDate) {
-			return _aVisibleDays;
-		}
-
-		const iFirstDayOfWeek = this._getFirstDayOfWeek();
-
-		// determine weekday of first day in month
-		const oFirstDay = new CalendarDate(oStartDate, this._primaryCalendarType);
-		oFirstDay.setDate(1);
-		iDaysOldMonth = oFirstDay.getDay() - iFirstDayOfWeek;
-		if (iDaysOldMonth < 0) {
-			iDaysOldMonth = 7 + iDaysOldMonth;
-		}
-
-		if (iDaysOldMonth > 0) {
-			// determine first day for display
-			oFirstDay.setDate(1 - iDaysOldMonth);
-		}
-
-		const oDay = new CalendarDate(oFirstDay);
-		for (let i = 0; i < 42; i++) {
-			iYear = oDay.getYear();
-			oCalDate = new CalendarDate(oDay, this._primaryCalendarType);
-			if (bIncludeBCDates && iYear < MIN_YEAR) {
-				// For dates before 0001-01-01 we should render only empty squares to keep
-				// the month square matrix correct.
-				oCalDate._bBeforeFirstYear = true;
-				_aVisibleDays.push(oCalDate);
-			} else if (iYear >= MIN_YEAR && iYear <= MAX_YEAR) {
-				// Days before 0001-01-01 or after 9999-12-31 should not be rendered.
-				_aVisibleDays.push(oCalDate);
-			}
-			oDay.setDate(oDay.getDate() + 1);
-		}
-
-		return _aVisibleDays;
-	}
-
-	_getFirstDayOfWeek() {
-		const confFirstDayOfWeek = getFirstDayOfWeek();
-		return Number.isInteger(confFirstDayOfWeek) ? confFirstDayOfWeek : this._oLocaleData.getFirstDayOfWeek();
-	}
-
-	get styles() {
-		return {
-			wrapper: {
-				display: this._hidden ? "none" : "flex",
-			},
-			main: {
-				width: "100%",
-			},
-		};
-	}
-}
-
+let DayPicker = DayPicker_1 = class DayPicker extends CalendarPart {
+    onBeforeRendering() {
+        const localeData = getCachedLocaleDataInstance(getLocale());
+        this._buildWeeks(localeData);
+        this._buildDayNames(localeData);
+    }
+    /**
+     * Builds the "_weeks" object that represents the month.
+     * @param localeData
+     * @private
+     */
+    _buildWeeks(localeData) {
+        if (this._hidden) {
+            return; // Optimization to not do any work unless the current picker
+        }
+        this._weeks = [];
+        const firstDayOfWeek = this._getFirstDayOfWeek();
+        const specialCalendarDates = this._specialCalendarDates;
+        const monthsNames = localeData.getMonths("wide", this._primaryCalendarType);
+        const secondaryMonthsNames = this.hasSecondaryCalendarType ? localeData.getMonths("wide", this.secondaryCalendarType) : [];
+        const nonWorkingDayLabel = DayPicker_1.i18nBundle.getText(DAY_PICKER_NON_WORKING_DAY);
+        const todayLabel = DayPicker_1.i18nBundle.getText(DAY_PICKER_TODAY);
+        const tempDate = this._getFirstDay(); // date that will be changed by 1 day 42 times
+        const todayDate = CalendarDate.fromLocalJSDate(UI5Date.getInstance(), this._primaryCalendarType); // current day date - calculate once
+        const calendarDate = this._calendarDate; // store the _calendarDate value as this getter is expensive and degrades IE11 perf
+        const minDate = this._minDate; // store the _minDate (expensive getter)
+        const maxDate = this._maxDate; // store the _maxDate (expensive getter)
+        const tempSecondDate = this.hasSecondaryCalendarType ? this._getSecondaryDay(tempDate) : undefined;
+        let week = [];
+        for (let i = 0; i < DAYS_IN_WEEK * 6; i++) { // always show 6 weeks total, 42 days to avoid jumping
+            const timestamp = tempDate.valueOf() / 1000; // no need to round because CalendarDate does it
+            let dayOfTheWeek = tempDate.getDay() - firstDayOfWeek;
+            if (dayOfTheWeek < 0) {
+                dayOfTheWeek += DAYS_IN_WEEK;
+            }
+            const specialCalendarDate = specialCalendarDates.find(specialDate => specialDate.specialDateTimestamp === timestamp);
+            const specialDayType = specialCalendarDate ? specialCalendarDate.type : "";
+            const isFocused = tempDate.getMonth() === calendarDate.getMonth() && tempDate.getDate() === calendarDate.getDate();
+            const isSelected = this._isDaySelected(timestamp);
+            const isSelectedBetween = this._isDayInsideSelectionRange(timestamp);
+            const isOtherMonth = tempDate.getMonth() !== calendarDate.getMonth();
+            const isWeekend = this._isWeekend(tempDate);
+            const isDisabled = tempDate.valueOf() < minDate.valueOf() || tempDate.valueOf() > maxDate.valueOf();
+            const isToday = tempDate.isSame(todayDate);
+            const isFirstDayOfWeek = tempDate.getDay() === firstDayOfWeek;
+            const nonWorkingAriaLabel = isWeekend ? `${nonWorkingDayLabel} ` : "";
+            const todayAriaLabel = isToday ? `${todayLabel} ` : "";
+            const tempSecondDateNumber = tempSecondDate ? tempSecondDate.getDate() : "";
+            const tempSecondYearNumber = tempSecondDate ? tempSecondDate.getYear() : "";
+            const secondaryMonthsNamesString = secondaryMonthsNames.length > 0 ? secondaryMonthsNames[tempSecondDate.getMonth()] : "";
+            const ariaLabel = this.hasSecondaryCalendarType
+                ? `${todayAriaLabel}${nonWorkingAriaLabel}${monthsNames[tempDate.getMonth()]} ${tempDate.getDate()}, ${tempDate.getYear()}; ${secondaryMonthsNamesString} ${tempSecondDateNumber}, ${tempSecondYearNumber}`
+                : `${todayAriaLabel}${nonWorkingAriaLabel}${monthsNames[tempDate.getMonth()]} ${tempDate.getDate()}, ${tempDate.getYear()}`;
+            const day = {
+                timestamp: timestamp.toString(),
+                focusRef: isFocused,
+                _tabIndex: isFocused ? "0" : "-1",
+                selected: isSelected,
+                day: tempDate.getDate(),
+                secondDay: this.hasSecondaryCalendarType ? tempSecondDate.getDate() : undefined,
+                _isSecondaryCalendarType: this.hasSecondaryCalendarType,
+                classes: `ui5-dp-item ui5-dp-wday${dayOfTheWeek}`,
+                ariaLabel,
+                ariaSelected: isSelected ? "true" : "false",
+                ariaDisabled: isOtherMonth ? "true" : undefined,
+                disabled: isDisabled,
+                type: specialDayType,
+            };
+            if (isFirstDayOfWeek) {
+                day.classes += " ui5-dp-firstday";
+            }
+            if (isSelected) {
+                day.classes += " ui5-dp-item--selected";
+            }
+            if (isSelectedBetween) {
+                day.classes += " ui5-dp-item--selected-between";
+            }
+            if (isToday) {
+                day.classes += " ui5-dp-item--now";
+            }
+            if (isOtherMonth) {
+                day.classes += " ui5-dp-item--othermonth";
+            }
+            if (isWeekend) {
+                day.classes += " ui5-dp-item--weeekend";
+            }
+            if (isDisabled) {
+                day.classes += " ui5-dp-item--disabled";
+            }
+            if (this.hasSecondaryCalendarType) {
+                day.classes += " ui5-dp-item--withsecondtype";
+            }
+            week.push(day);
+            if (dayOfTheWeek === DAYS_IN_WEEK - 1) { // 0-indexed so 6 is the last day of the week
+                week.unshift({
+                    weekNum: calculateWeekNumber(getFirstDayOfWeek(), tempDate.toUTCJSDate(), tempDate.getYear(), getLocale(), localeData, this._primaryCalendarType),
+                    isHidden: this.shouldHideWeekNumbers,
+                });
+            }
+            if (week.length === DAYS_IN_WEEK + 1) { // 7 entries for each day + 1 for the week numbers
+                this._weeks.push(week);
+                week = [];
+            }
+            tempDate.setDate(tempDate.getDate() + 1);
+            if (this.hasSecondaryCalendarType && tempSecondDate) {
+                tempSecondDate.setDate(tempSecondDate.getDate() + 1);
+            }
+        }
+    }
+    /**
+     * Builds the dayNames object (header of the month).
+     * @param localeData
+     * @private
+     */
+    _buildDayNames(localeData) {
+        if (this._hidden) {
+            return; // Optimization to not do any work unless the current picker
+        }
+        let dayOfTheWeek;
+        const aDayNamesWide = localeData.getDays("wide", this._primaryCalendarType);
+        let aDayNamesAbbreviated = localeData.getDays("abbreviated", this._primaryCalendarType);
+        let dayName;
+        if (this.namesTooLong(aDayNamesAbbreviated)) {
+            aDayNamesAbbreviated = localeData.getDays("narrow", this._primaryCalendarType);
+        }
+        this._dayNames = [];
+        this._dayNames.push({
+            classes: "ui5-dp-dayname",
+            name: DayPicker_1.i18nBundle.getText(DAY_PICKER_WEEK_NUMBER_TEXT),
+        });
+        for (let i = 0; i < DAYS_IN_WEEK; i++) {
+            dayOfTheWeek = i + this._getFirstDayOfWeek();
+            if (dayOfTheWeek > DAYS_IN_WEEK - 1) { // 0-indexed so index of 6 is the maximum allowed
+                dayOfTheWeek -= DAYS_IN_WEEK;
+            }
+            dayName = {
+                name: aDayNamesWide[dayOfTheWeek],
+                ultraShortName: aDayNamesAbbreviated[dayOfTheWeek],
+                classes: "ui5-dp-dayname",
+            };
+            this._dayNames.push(dayName);
+        }
+        this._dayNames[1].classes += " ui5-dp-firstday";
+        if (this.shouldHideWeekNumbers) {
+            this._dayNames.shift();
+        }
+    }
+    /**
+     * Tells if any of the days is more than 4 characters(too long to render).
+     * @param dayNames
+     * @private
+     */
+    namesTooLong(dayNames) {
+        return dayNames.some(dayName => dayName.length > 4);
+    }
+    onAfterRendering() {
+        if (this._autoFocus && !this._hidden) {
+            this.focus();
+        }
+        const focusedDay = this.shadowRoot.querySelector("[data-sap-focus-ref]");
+        if (focusedDay && document.activeElement !== focusedDay && this._specialCalendarDates.length === 0) {
+            focusedDay.focus();
+        }
+    }
+    _onfocusin() {
+        this._autoFocus = true;
+    }
+    _onfocusout() {
+        this._autoFocus = false;
+    }
+    /**
+     * Tells if the day is selected (dark blue).
+     * @param timestamp
+     * @private
+     */
+    _isDaySelected(timestamp) {
+        if (this.selectionMode === CalendarSelectionMode.Single) {
+            return timestamp === this.selectedDates[0];
+        }
+        if (this.selectionMode === CalendarSelectionMode.Multiple) {
+            return this.selectedDates.includes(timestamp);
+        }
+        return timestamp === this.selectedDates[0] || timestamp === this.selectedDates[this.selectedDates.length - 1];
+    }
+    /**
+     * Tells if the day is inside a selection range (light blue).
+     * @param timestamp
+     * @private
+     */
+    _isDayInsideSelectionRange(timestamp) {
+        // No selection at all (or not in range selection mode)
+        if (this.selectionMode !== CalendarSelectionMode.Range || !this.selectedDates.length) {
+            return false;
+        }
+        // Only one date selected - the user is hovering with the mouse or navigating with the keyboard to select the second one
+        if (this.selectedDates.length === 1 && this._secondTimestamp) {
+            return isBetween(timestamp, this.selectedDates[0], this._secondTimestamp);
+        }
+        // Two dates selected - stable range
+        return isBetween(timestamp, this.selectedDates[0], this.selectedDates[this.selectedDates.length - 1]);
+    }
+    /**
+     * 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, isShift) {
+        let target = e.target;
+        if (!target.hasAttribute("data-sap-timestamp")) {
+            target = target.parentNode;
+        }
+        if (!this._isDayPressed(target)) {
+            return;
+        }
+        const timestamp = this._getTimestampFromDom(target);
+        this._safelySetTimestamp(timestamp);
+        this._updateSecondTimestamp();
+        if (this.selectionMode === CalendarSelectionMode.Single) {
+            this.selectedDates = [timestamp];
+        }
+        else if (this.selectionMode === CalendarSelectionMode.Multiple) {
+            if (this.selectedDates.length > 0 && isShift) {
+                this._multipleSelection(timestamp);
+            }
+            else {
+                this._toggleTimestampInSelection(timestamp);
+            }
+        }
+        else {
+            this.selectedDates = (this.selectedDates.length === 1) ? [...this.selectedDates, timestamp] : [timestamp];
+        }
+        this.fireEvent("change", {
+            timestamp: this.timestamp,
+            dates: this.selectedDates,
+        });
+    }
+    /**
+     * Selects/deselects the whole row (week).
+     * @private
+     */
+    _selectWeek() {
+        this._weeks.forEach((week) => {
+            const _week = week;
+            const dayInThisWeek = _week.findIndex((item) => {
+                const date = CalendarDate.fromTimestamp(parseInt(item.timestamp) * 1000);
+                return date.getMonth() === this._calendarDate.getMonth() && date.getDate() === this._calendarDate.getDate();
+            }) !== -1;
+            if (dayInThisWeek) { // The current day is in this week
+                const notAllDaysOfThisWeekSelected = _week.some(item => item.timestamp && !this.selectedDates.includes(parseInt(item.timestamp)));
+                if (notAllDaysOfThisWeekSelected) { // even if one day is not selected, select the whole week
+                    _week.filter(item => item.timestamp).forEach(item => {
+                        this._addTimestampToSelection(parseInt(item.timestamp));
+                    });
+                }
+                else { // only if all days of this week are selected, deselect them
+                    _week.filter(item => item.timestamp).forEach(item => {
+                        this._removeTimestampFromSelection(parseInt(item.timestamp));
+                    });
+                }
+            }
+        });
+        this.fireEvent("change", {
+            timestamp: this.timestamp,
+            dates: this.selectedDates,
+        });
+    }
+    _toggleTimestampInSelection(timestamp) {
+        if (this.selectedDates.includes(timestamp)) {
+            this._removeTimestampFromSelection(timestamp);
+        }
+        else {
+            this._addTimestampToSelection(timestamp);
+        }
+    }
+    _addTimestampToSelection(timestamp) {
+        if (!this.selectedDates.includes(timestamp)) {
+            this.selectedDates = [...this.selectedDates, timestamp];
+        }
+    }
+    _removeTimestampFromSelection(timestamp) {
+        this.selectedDates = this.selectedDates.filter(value => value !== timestamp);
+    }
+    /**
+     * Called when at least one day is selected and the user presses "Shift".
+     * @param timestamp
+     * @private
+     */
+    _multipleSelection(timestamp) {
+        const min = Math.min(...this.selectedDates);
+        const max = Math.max(...this.selectedDates);
+        let start;
+        let end;
+        let toggle = false;
+        if (timestamp < min) {
+            start = timestamp;
+            end = min;
+        }
+        else if (timestamp >= min && timestamp <= max) { // inside the current range - toggle all between the selected and focused
+            const distanceToMin = Math.abs(timestamp - min);
+            const distanceToMax = Math.abs(timestamp - max);
+            if (distanceToMin < distanceToMax) {
+                start = timestamp;
+                end = max;
+            }
+            else {
+                start = min;
+                end = timestamp;
+            }
+            toggle = true;
+        }
+        else {
+            start = max;
+            end = timestamp;
+        }
+        const startDate = CalendarDate.fromTimestamp(start * 1000);
+        const endDate = CalendarDate.fromTimestamp(end * 1000);
+        while (startDate.valueOf() <= endDate.valueOf()) {
+            this[toggle ? "_toggleTimestampInSelection" : "_addTimestampToSelection"](startDate.valueOf() / 1000);
+            startDate.setDate(startDate.getDate() + 1);
+        }
+    }
+    /**
+     * Set the hovered day as the "_secondTimestamp".
+     * @param e
+     * @private
+     */
+    _onmouseover(e) {
+        const target = e.target;
+        const hoveredItem = target.closest(".ui5-dp-item");
+        if (hoveredItem && this.selectionMode === CalendarSelectionMode.Range && this.selectedDates.length === 1) {
+            this._secondTimestamp = this._getTimestampFromDom(hoveredItem);
+        }
+    }
+    _onkeydown(e) {
+        let preventDefault = true;
+        if (isEnter(e) || isEnterShift(e)) {
+            this._selectDate(e, isEnterShift(e));
+        }
+        else if (isSpace(e) || isSpaceShift(e)) {
+            e.preventDefault();
+        }
+        else if (isLeft(e)) {
+            this._modifyTimestampBy(-1, "day", false);
+        }
+        else if (isRight(e)) {
+            this._modifyTimestampBy(1, "day", false);
+        }
+        else if (isUp(e)) {
+            this._modifyTimestampBy(-7, "day", false);
+        }
+        else if (isDown(e)) {
+            this._modifyTimestampBy(7, "day", false);
+        }
+        else if (isPageUp(e)) {
+            this._modifyTimestampBy(-1, "month");
+        }
+        else if (isPageDown(e)) {
+            this._modifyTimestampBy(1, "month");
+        }
+        else if (isPageUpShift(e) || isPageUpAlt(e)) {
+            this._modifyTimestampBy(-1, "year");
+        }
+        else if (isPageDownShift(e) || isPageDownAlt(e)) {
+            this._modifyTimestampBy(1, "year");
+        }
+        else if (isPageUpShiftCtrl(e)) {
+            this._modifyTimestampBy(-10, "year");
+        }
+        else if (isPageDownShiftCtrl(e)) {
+            this._modifyTimestampBy(10, "year");
+        }
+        else if (isHome(e) || isEnd(e)) {
+            this._onHomeOrEnd(isHome(e));
+        }
+        else if (isHomeCtrl(e)) {
+            const tempDate = new CalendarDate(this._calendarDate, this._primaryCalendarType);
+            tempDate.setDate(1); // Set the first day of the month
+            this._setTimestamp(tempDate.valueOf() / 1000);
+        }
+        else if (isEndCtrl(e)) {
+            const tempDate = new CalendarDate(this._calendarDate, this._primaryCalendarType);
+            tempDate.setMonth(tempDate.getMonth() + 1);
+            tempDate.setDate(0); // Set the last day of the month (0th day of next month)
+            this._setTimestamp(tempDate.valueOf() / 1000);
+        }
+        else {
+            preventDefault = false;
+        }
+        if (preventDefault) {
+            e.preventDefault();
+        }
+    }
+    _onkeyup(e) {
+        // Even if Space+Shift was pressed, ignore the shift unless in Multiple selection
+        if (isSpace(e) || (isSpaceShift(e) && this.selectionMode !== CalendarSelectionMode.Multiple)) {
+            this._selectDate(e, false);
+        }
+        else if (isSpaceShift(e)) {
+            this._selectWeek();
+        }
+    }
+    /**
+     * Click is the same as "Enter".
+     * **Note:** "Click+Shift" has the same effect as "Enter+Shift".
+     * @param e
+     * @private
+     */
+    _onclick(e) {
+        this._selectDate(e, e.shiftKey);
+    }
+    /**
+     * Called upon "Home" or "End" - moves the focus to the first or last item in the row.
+     * @param homePressed
+     * @private
+     */
+    _onHomeOrEnd(homePressed) {
+        this._weeks.forEach(week => {
+            const _week = week;
+            const dayInThisWeek = _week.findIndex(item => {
+                const date = CalendarDate.fromTimestamp(parseInt(item.timestamp) * 1000);
+                return date.getMonth() === this._calendarDate.getMonth() && date.getDate() === this._calendarDate.getDate();
+            }) !== -1;
+            if (dayInThisWeek) { // The current day is in this week
+                const index = homePressed ? 1 : 7; // select the first (if Home) or last (if End) day of the week
+                this._setTimestamp(parseInt(_week[index].timestamp));
+            }
+        });
+    }
+    /**
+     * Called by the Calendar component.
+     * @protected
+     */
+    _hasPreviousPage() {
+        return !(this._calendarDate.getMonth() === this._minDate.getMonth() && this._calendarDate.getYear() === this._minDate.getYear());
+    }
+    /**
+     * Called by the Calendar component.
+     * @protected
+     */
+    _hasNextPage() {
+        return !(this._calendarDate.getMonth() === this._maxDate.getMonth() && this._calendarDate.getYear() === this._maxDate.getYear());
+    }
+    /**
+     * Called by the Calendar component.
+     * @protected
+     */
+    _showPreviousPage() {
+        this._modifyTimestampBy(-1, "month", false);
+    }
+    /**
+     * Called by the Calendar component.
+     * @protected
+     */
+    _showNextPage() {
+        this._modifyTimestampBy(1, "month", false);
+    }
+    /**
+     * 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, unit, preserveDate) {
+        // Modify the current timestamp
+        this._safelyModifyTimestampBy(amount, unit, preserveDate);
+        this._updateSecondTimestamp();
+        // Notify the calendar to update its timestamp
+        this.fireEvent("navigate", { timestamp: this.timestamp });
+    }
+    /**
+     * Sets the timestamp to an absolute value.
+     * @param value
+     * @private
+     */
+    _setTimestamp(value) {
+        this._safelySetTimestamp(value);
+        this._updateSecondTimestamp();
+        this.fireEvent("navigate", { timestamp: this.timestamp });
+    }
+    /**
+     * During range selection, when the user is navigating with the keyboard,
+     * the currently focused day is considered the "second day".
+     * @private
+     */
+    _updateSecondTimestamp() {
+        if (this.selectionMode === CalendarSelectionMode.Range && (this.selectedDates.length === 1 || this.selectedDates.length === 2)) {
+            this._secondTimestamp = this.timestamp;
+        }
+    }
+    get _specialCalendarDates() {
+        return this.specialCalendarDates;
+    }
+    get shouldHideWeekNumbers() {
+        if (this._primaryCalendarType !== CalendarType.Gregorian) {
+            return true;
+        }
+        return this.hideWeekNumbers;
+    }
+    get classes() {
+        return {
+            root: {
+                "ui5-dp-root": true,
+                "ui5-dp-twocalendartypes": this.hasSecondaryCalendarType,
+            },
+        };
+    }
+    _isWeekend(oDate) {
+        const localeData = getCachedLocaleDataInstance(getLocale());
+        const iWeekDay = oDate.getDay(), iWeekendStart = localeData.getWeekendStart(), iWeekendEnd = localeData.getWeekendEnd();
+        return (iWeekDay >= iWeekendStart && iWeekDay <= iWeekendEnd)
+            || (iWeekendEnd < iWeekendStart && (iWeekDay >= iWeekendStart || iWeekDay <= iWeekendEnd));
+    }
+    _isDayPressed(target) {
+        const targetParent = target.parentNode;
+        return (target.className.indexOf("ui5-dp-item") > -1) || (targetParent && targetParent.classList && targetParent.classList.contains("ui5-dp-item"));
+    }
+    _getSecondaryDay(tempDate) {
+        return new CalendarDate(tempDate, this.secondaryCalendarType);
+    }
+    _getFirstDay() {
+        let daysFromPreviousMonth;
+        const firstDayOfWeek = this._getFirstDayOfWeek();
+        // determine weekday of first day in month
+        const firstDay = new CalendarDate(this._calendarDate, this._primaryCalendarType);
+        firstDay.setDate(1);
+        daysFromPreviousMonth = firstDay.getDay() - firstDayOfWeek;
+        if (daysFromPreviousMonth < 0) {
+            daysFromPreviousMonth = 7 + daysFromPreviousMonth;
+        }
+        if (daysFromPreviousMonth > 0) {
+            firstDay.setDate(1 - daysFromPreviousMonth);
+        }
+        return firstDay;
+    }
+    _getFirstDayOfWeek() {
+        const localeData = getCachedLocaleDataInstance(getLocale());
+        const confFirstDayOfWeek = getFirstDayOfWeek();
+        return Number.isInteger(confFirstDayOfWeek) ? confFirstDayOfWeek : localeData.getFirstDayOfWeek();
+    }
+    get styles() {
+        return {
+            wrapper: {
+                display: this._hidden ? "none" : "flex",
+                "justify-content": "center",
+            },
+            main: {
+                width: "100%",
+            },
+        };
+    }
+    get ariaRoledescription() {
+        return this.hasSecondaryCalendarType
+            ? `${this._primaryCalendarType} calendar with secondary ${this.secondaryCalendarType} calendar`
+            : `${this._primaryCalendarType} calendar`;
+    }
+};
+__decorate([
+    property({
+        validator: Integer,
+        multiple: true,
+        compareValues: true,
+    })
+], DayPicker.prototype, "selectedDates", void 0);
+__decorate([
+    property({ type: CalendarSelectionMode, defaultValue: CalendarSelectionMode.Single })
+], DayPicker.prototype, "selectionMode", void 0);
+__decorate([
+    property({ type: Boolean })
+], DayPicker.prototype, "hideWeekNumbers", void 0);
+__decorate([
+    property({
+        type: Object,
+        multiple: true,
+    })
+], DayPicker.prototype, "_weeks", void 0);
+__decorate([
+    property({
+        type: Object,
+        multiple: true,
+    })
+], DayPicker.prototype, "_dayNames", void 0);
+__decorate([
+    property({ type: Boolean, noAttribute: true })
+], DayPicker.prototype, "_hidden", void 0);
+__decorate([
+    property()
+], DayPicker.prototype, "_secondTimestamp", void 0);
+__decorate([
+    property({ type: Object, multiple: true })
+], DayPicker.prototype, "specialCalendarDates", void 0);
+DayPicker = DayPicker_1 = __decorate([
+    customElement({
+        tag: "ui5-daypicker",
+        styles: dayPickerCSS,
+        template: DayPickerTemplate,
+    })
+    /**
+     * Fired when the selected date(s) change
+     * @public
+     */
+    ,
+    event("change")
+    /**
+     * Fired when the timestamp changes (user navigates with the keyboard) or clicks with the mouse
+     * @public
+     */
+    ,
+    event("navigate")
+], DayPicker);
 DayPicker.define();
-
 export default DayPicker;
+//# sourceMappingURL=DayPicker.js.map