@ui5/webcomponents 1.4.0 → 1.7.0

package/src/TextArea.hbs

@@ -1,5 +1,5 @@
 <div
-	class="ui5-textarea-root"
+	class="{{classes.root}}"
 	style="{{styles.main}}"
 	@focusin="{{_onfocusin}}"
 	@focusout="{{_onfocusout}}"

package/src/TextArea.js

@@ -3,9 +3,9 @@ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
+import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
-import { isIE } from "@ui5/webcomponents-base/dist/Device.js";
 import { isEscape } from "@ui5/webcomponents-base/dist/Keys.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import Popover from "./Popover.js";
@@ -218,7 +218,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the accessible aria name of the component.
+		 * Defines the accessible ARIA name of the component.
 		 *
 		 * @type {string}
 		 * @public
@@ -467,20 +467,11 @@ class TextArea extends UI5Element {
 	_oninput(event) {
 		const nativeTextArea = this.getInputDomRef();
 
-		/* skip calling change event when an textarea with a placeholder is focused on IE
-			- value of the host and the internal textarea should be different in case of actual input
-			- input is called when a key is pressed => keyup should not be called yet
-		*/
-		const skipFiring = (nativeTextArea.value === this.value) && isIE() && !this._keyDown && !!this.placeholder;
 		if (event.target === nativeTextArea) {
 			// stop the native event, as the semantic "input" would be fired.
 			event.stopImmediatePropagation();
 		}
 
-		if (skipFiring) {
-			return;
-		}
-
 		this.value = nativeTextArea.value;
 		this.fireEvent("input", {});
 
@@ -544,9 +535,9 @@ class TextArea extends UI5Element {
 			leftCharactersCount;
 
 		if (this.showExceededText) {
-			const maxLength = this.maxlength || 0;
+			const maxLength = this.maxlength;
 
-			if (maxLength) {
+			if (maxLength !== null) {
 				leftCharactersCount = maxLength - this.value.length;
 
 				if (leftCharactersCount >= 0) {
@@ -566,6 +557,10 @@ class TextArea extends UI5Element {
 
 	get classes() {
 		return {
+			root: {
+				"ui5-textarea-root": true,
+				"ui5-content-native-scrollbars": getEffectiveScrollbarStyle(),
+			},
 			valueStateMsg: {
 				"ui5-valuestatemessage--error": this.valueState === ValueState.Error,
 				"ui5-valuestatemessage--warning": this.valueState === ValueState.Warning,

package/src/TimePickerBase.js

@@ -14,6 +14,10 @@ import {
 	isPageDownShift,
 	isPageUpShiftCtrl,
 	isPageDownShiftCtrl,
+	isTabNext,
+	isTabPrevious,
+	isF6Next,
+	isF6Previous,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import "@ui5/webcomponents-icons/dist/time-entry-request.js";
 import Icon from "./Icon.js";
@@ -348,6 +352,10 @@ class TimePickerBase extends UI5Element {
 			this.togglePicker();
 		}
 
+		if ((this._getInput().isEqualNode(e.target) && this.isOpen()) && (isTabNext(e) || isTabPrevious(e) || isF6Next(e) || isF6Previous(e))) {
+			this.closePicker();
+		}
+
 		if (this.isOpen()) {
 			return;
 		}

package/src/TimeSelection.hbs

@@ -16,7 +16,7 @@
 				@click="{{selectSlider}}"
 				@focusin="{{selectSlider}}"
 				data-sap-slider="hours"
-				?cyclic="{{_isCyclic}}"
+				cyclic
 		></ui5-wheelslider>
 	{{/if}}
 	{{#if _hasMinutesSlider}}
@@ -29,7 +29,7 @@
 				@click="{{selectSlider}}"
 				@focusin="{{selectSlider}}"
 				data-sap-slider="minutes"
-				?cyclic="{{_isCyclic}}"
+				cyclic
 		></ui5-wheelslider>
 	{{/if}}
 	{{#if _hasSecondsSlider}}
@@ -42,7 +42,7 @@
 				@click="{{selectSlider}}"
 				@focusin="{{selectSlider}}"
 				data-sap-slider="seconds"
-				?cyclic="{{_isCyclic}}"
+				cyclic
 		></ui5-wheelslider>
 	{{/if}}
 	{{#if _hasPeriodsSlider}}

package/src/TimeSelection.js

@@ -1,7 +1,7 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import { isPhone, isIE } from "@ui5/webcomponents-base/dist/Device.js";
+import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import getLocale from "@ui5/webcomponents-base/dist/locale/getLocale.js";
 import DateFormat from "@ui5/webcomponents-localization/dist/DateFormat.js";
@@ -28,7 +28,6 @@ import {
 	TIMEPICKER_HOURS_LABEL,
 	TIMEPICKER_MINUTES_LABEL,
 	TIMEPICKER_SECONDS_LABEL,
-	TIMEPICKER_PERIODS_LABEL,
 } from "./generated/i18n/i18n-defaults.js";
 
 // Styles
@@ -478,11 +477,7 @@ class TimeSelection extends UI5Element {
 	}
 
 	get periodSliderTitle() {
-		return TimeSelection.i18nBundle.getText(TIMEPICKER_PERIODS_LABEL);
-	}
-
-	get _isCyclic() {
-		return !isIE();
+		return "AM/PM";
 	}
 
 	get classes() {

package/src/ToggleButton.js

@@ -1,4 +1,3 @@
-import isLegacyBrowser from "@ui5/webcomponents-base/dist/isLegacyBrowser.js";
 import { isSpaceShift } from "@ui5/webcomponents-base/dist/Keys.js";
 import { isSafari } from "@ui5/webcomponents-base/dist/Device.js";
 import Button from "./Button.js";
@@ -6,7 +5,6 @@ import ToggleButtonTemplate from "./generated/templates/ToggleButtonTemplate.lit
 
 // Styles
 import toggleBtnCss from "./generated/themes/ToggleButton.css.js";
-import toggleBtnIECss from "./generated/themes/ToggleButton.ie11.css.js";
 
 /**
  * @public
@@ -14,7 +12,7 @@ import toggleBtnIECss from "./generated/themes/ToggleButton.ie11.css.js";
 const metadata = {
 	tag: "ui5-toggle-button",
 	altTag: "ui5-togglebutton",
-	properties: /** @lends  sap.ui.webcomponents.main.ToggleButton.prototype */ {
+	properties: /** @lends sap.ui.webcomponents.main.ToggleButton.prototype */ {
 		/**
 		 * Determines whether the component is displayed as pressed.
 		 *
@@ -31,7 +29,7 @@ const metadata = {
 /**
  * @class
  *
- *<h3 class="comment-api-title">Overview</h3>
+ * <h3 class="comment-api-title">Overview</h3>
  *
  * The <code>ui5-toggle-button</code> component is an enhanced <code>ui5-button</code>
  * that can be toggled between pressed and normal states.
@@ -63,7 +61,7 @@ class ToggleButton extends Button {
 	}
 
 	static get styles() {
-		return [Button.styles, toggleBtnCss, isLegacyBrowser() && toggleBtnIECss];
+		return [Button.styles, toggleBtnCss];
 	}
 
 	_onclick() {

package/src/Token.js

@@ -78,7 +78,7 @@ const metadata = {
 		_tabIndex: { type: String, defaultValue: "-1", noAttribute: true },
 	},
 
-	slots: /** @lends  sap.ui.webcomponents.main.Token.prototype */ {
+	slots: /** @lends sap.ui.webcomponents.main.Token.prototype */ {
 
 		/**
 		 * Defines the close icon for the token. If nothing is provided to this slot, the default close icon will be used.

package/src/Tokenizer.js

@@ -25,6 +25,10 @@ import {
 	isEndShift,
 	isHomeCtrl,
 	isEndCtrl,
+	isRight,
+	isLeft,
+	isUp,
+	isDown,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
@@ -225,7 +229,16 @@ class Tokenizer extends UI5Element {
 	}
 
 	onAfterRendering() {
-		this._scrollEnablement.scrollContainer = this.expanded ? this.contentDom : this;
+		this._scrollEnablement.scrollContainer = (this.expanded || !this.narrowContentDom) ? this.expandedContentDom : this.narrowContentDom;
+
+		if (this.expanded) {
+			this._expandedScrollWidth = this.expandedContentDom.scrollWidth;
+			this.scrollToEnd();
+		}
+
+		if (!this.expanded) {
+			this.scrollToStart();
+		}
 	}
 
 	_delete(event) {
@@ -320,6 +333,11 @@ class Tokenizer extends UI5Element {
 
 			return this._toggleTokenSelection(tokens);
 		}
+
+		if (isLeft(event) || isRight(event) || isUp(event) || isDown(event)) {
+			const nextTokenIdx = this._calcNextTokenIndex(this._tokens.find(token => token.focused), tokens, (isRight(event) || isDown(event)));
+			this._scrollToToken(tokens[nextTokenIdx]);
+		}
 	}
 
 	_handleHome(tokens, endKeyPressed) {
@@ -384,6 +402,8 @@ class Tokenizer extends UI5Element {
 		}
 
 		setTimeout(() => tokens[nextIndex].focus(), 0);
+
+		this._scrollToToken(tokens[nextIndex]);
 		this._itemNav.setCurrentItem(tokens[nextIndex]);
 	}
 
@@ -398,6 +418,8 @@ class Tokenizer extends UI5Element {
 		focusedToken.selected = true;
 		tokens[nextIndex].selected = true;
 		setTimeout(() => tokens[nextIndex].focus(), 0);
+
+		this._scrollToToken(tokens[nextIndex]);
 		this._itemNav.setCurrentItem(tokens[nextIndex]);
 	}
 
@@ -407,6 +429,7 @@ class Tokenizer extends UI5Element {
 
 	_onmousedown(event) {
 		this._itemNav.setCurrentItem(event.target);
+		this._scrollToToken(event.target);
 	}
 
 	_toggleTokenSelection(tokens) {
@@ -455,7 +478,41 @@ class Tokenizer extends UI5Element {
 	 * @private
 	 */
 	scrollToStart() {
-		this.contentDom.scrollLeft = 0;
+		if (this._scrollEnablement.scrollContainer) {
+			this._scrollEnablement.scrollTo(0, 0);
+		}
+	}
+
+	/**
+	 * Scrolls the container of the tokens to its end when expanded.
+	 * This method is used by MultiInput and MultiComboBox.
+	 * @private
+	 */
+	scrollToEnd() {
+		const expandedTokenizerScrollWidth = this.expandedContentDom && (this.effectiveDir !== "rtl" ? this.expandedContentDom.scrollWidth : -this.expandedContentDom.scrollWidth);
+		if (this._scrollEnablement.scrollContainer) {
+			this._scrollEnablement.scrollTo(expandedTokenizerScrollWidth, 0, 5, 10);
+		}
+	}
+
+	/**
+	 * Scrolls token to the visible area of the container.
+	 * Adds 4 pixels to the scroll position to ensure padding and border visibility on both ends
+	 * @private
+	 */
+	_scrollToToken(token) {
+		if (!this.expandedContentDom) {
+			return;
+		}
+
+		const tokenRect = token.getBoundingClientRect();
+		const tokenContainerRect = this.expandedContentDom.getBoundingClientRect();
+
+		if (tokenRect.left < tokenContainerRect.left) {
+			this._scrollEnablement.scrollTo(this.expandedContentDom.scrollLeft - (tokenContainerRect.left - tokenRect.left + 5), 0);
+		} else if (tokenRect.right > tokenContainerRect.right) {
+			this._scrollEnablement.scrollTo(this.expandedContentDom.scrollLeft + (tokenRect.right - tokenContainerRect.right + 5), 0);
+		}
 	}
 
 	async closeMorePopover() {
@@ -476,6 +533,14 @@ class Tokenizer extends UI5Element {
 		return this.shadowRoot.querySelector(".ui5-tokenizer--content");
 	}
 
+	get expandedContentDom() {
+		return this.shadowRoot.querySelector(".ui5-tokenizer-expanded--content");
+	}
+
+	get narrowContentDom() {
+		return this.shadowRoot.querySelector(".ui5-tokenizer-nmore--content");
+	}
+
 	get tokenizerLabel() {
 		return Tokenizer.i18nBundle.getText(TOKENIZER_ARIA_LABEL);
 	}
@@ -497,14 +562,14 @@ class Tokenizer extends UI5Element {
 		});
 
 		return this._getTokens().filter(token => {
-			const isRTL = this.effectiveDir === "rtl";
-			const elementEnd = isRTL ? "left" : "right";
 			const parentRect = this.contentDom.getBoundingClientRect();
 			const tokenRect = token.getBoundingClientRect();
-			const tokenEnd = parseInt(tokenRect[elementEnd]);
-			const parentEnd = parseInt(parentRect[elementEnd]);
+			const tokenEnd = parseInt(tokenRect.right);
+			const parentEnd = parseInt(parentRect.right);
+			const tokenStart = parseInt(tokenRect.left);
+			const parentStart = parseInt(parentRect.left);
 
-			token.overflows = isRTL ? ((tokenEnd < parentEnd) && !this.expanded) : ((tokenEnd > parentEnd) && !this.expanded);
+			token.overflows = !this.expanded && ((tokenStart < parentStart) || (tokenEnd > parentEnd));
 
 			return token.overflows;
 		});
@@ -549,7 +614,8 @@ class Tokenizer extends UI5Element {
 			},
 			content: {
 				"ui5-tokenizer--content": true,
-				"ui5-tokenizer-nmore--content": this.showMore,
+				"ui5-tokenizer-expanded--content": !this.showNMore,
+				"ui5-tokenizer-nmore--content": this.showNMore,
 			},
 			popoverValueState: {
 				"ui5-valuestatemessage-root": true,

package/src/Tree.js

@@ -221,12 +221,14 @@ const metadata = {
 		 * @event sap.ui.webcomponents.main.Tree#selection-change
 		 * @param {Array} selectedItems An array of the selected items.
 		 * @param {Array} previouslySelectedItems An array of the previously selected items.
+		 * @param {HTMLElement} targetItem The item triggering the event.
 		 * @public
 		 */
 		"selection-change": {
 			detail: {
 				selectedItems: { type: Array },
 				previouslySelectedItems: { type: Array },
+				targetItem: { type: HTMLElement },
 			},
 		},
 	},
@@ -382,6 +384,7 @@ class Tree extends UI5Element {
 	_onListSelectionChange(event) {
 		const previouslySelectedItems = event.detail.previouslySelectedItems.map(item => item.treeItem);
 		const selectedItems = event.detail.selectedItems.map(item => item.treeItem);
+		const targetItem = event.detail.targetItem.treeItem;
 
 		previouslySelectedItems.forEach(item => {
 			item.selected = false;
@@ -393,6 +396,7 @@ class Tree extends UI5Element {
 		this.fireEvent("selection-change", {
 			previouslySelectedItems,
 			selectedItems,
+			targetItem,
 		});
 	}
 

package/src/TreeItem.js

@@ -32,7 +32,7 @@ const metadata = {
 		/**
 		* Defines whether the selection of a tree node is displayed as partially selected.
 		* <br><br>
-		* <b>Note:</b> The indeterminate state can be set only programatically and can’t be achieved by user
+		* <b>Note:</b> The indeterminate state can be set only programmatically and can’t be achieved by user
 		* interaction, meaning that the resulting visual state depends on the values of the <code>indeterminate</code>
 		* and <code>selected</code> properties:
 		* <ul>
@@ -102,7 +102,7 @@ const metadata = {
 		/**
 		 * Defines the state of the <code>additionalText</code>.
 		 * <br>
-		 * Available options are: <code>"None"</code> (by default), <code>"Success"</code>, <code>"Warning"</code>, <code>"Information"</code> and <code>"Erorr"</code>.
+		 * Available options are: <code>"None"</code> (by default), <code>"Success"</code>, <code>"Warning"</code>, <code>"Information"</code> and <code>"Error"</code>.
 		 * @type {ValueState}
 		 * @defaultvalue "None"
 		 * @public

package/src/TreeListItem.js

@@ -2,7 +2,6 @@ import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import { isLeft, isRight } from "@ui5/webcomponents-base/dist/Keys.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
-import { isIE } from "@ui5/webcomponents-base/dist/Device.js";
 import ListItem from "./ListItem.js";
 import Icon from "./Icon.js";
 import "@ui5/webcomponents-icons/dist/navigation-right-arrow.js";
@@ -93,7 +92,7 @@ const metadata = {
 		/**
 		 * Defines the state of the <code>additionalText</code>.
 		 * <br>
-		 * Available options are: <code>"None"</code> (by default), <code>"Success"</code>, <code>"Warning"</code>, <code>"Information"</code> and <code>"Erorr"</code>.
+		 * Available options are: <code>"None"</code> (by default), <code>"Success"</code>, <code>"Warning"</code>, <code>"Information"</code> and <code>"Error"</code>.
 		 * @type {ValueState}
 		 * @defaultvalue "None"
 		 * @public
@@ -260,7 +259,7 @@ class TreeListItem extends ListItem {
 	get styles() {
 		return {
 			preContent: {
-				"padding-left": isIE() ? `${this.effectiveLevel}rem` : `calc(var(--_ui5-tree-indent-step) * ${this.effectiveLevel})`,
+				"padding-left": `calc(var(--_ui5-tree-indent-step) * ${this.effectiveLevel})`,
 			},
 		};
 	}

package/src/YearPicker.hbs

@@ -19,7 +19,14 @@
 					role="gridcell"
 					aria-selected="{{this.ariaSelected}}"
 				>
+					<span>
 						{{this.year}}
+					</span>
+					{{#if this.yearInSecType}}
+						<span class="ui5-yp-item-sec-type">
+							{{this.yearInSecType}}
+						</span>
+					{{/if}}
 				</div>
 			{{/each}}
 		</div>

package/src/YearPicker.js

@@ -15,6 +15,7 @@ import {
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import getLocale from "@ui5/webcomponents-base/dist/locale/getLocale.js";
+import transformDateToSecondaryType from "@ui5/webcomponents-localization/dist/dates/transformDateToSecondaryType.js";
 import CalendarDate from "@ui5/webcomponents-localization/dist/dates/CalendarDate.js";
 import { getMaxCalendarDate } from "@ui5/webcomponents-localization/dist/dates/ExtremeDates.js";
 import CalendarPart from "./CalendarPart.js";
@@ -26,7 +27,7 @@ import styles from "./generated/themes/YearPicker.css.js";
  */
 const metadata = {
 	tag: "ui5-yearpicker",
-	properties: /** @lends  sap.ui.webcomponents.main.YearPicker.prototype */ {
+	properties: /** @lends sap.ui.webcomponents.main.YearPicker.prototype */ {
 		/**
 		 * An array of UTC timestamps representing the selected date or dates depending on the capabilities of the picker component.
 		 * @type {Array}
@@ -48,7 +49,7 @@ const metadata = {
 			noAttribute: true,
 		},
 	},
-	events: /** @lends  sap.ui.webcomponents.main.YearPicker.prototype */ {
+	events: /** @lends sap.ui.webcomponents.main.YearPicker.prototype */ {
 		/**
 		 * Fired when the user selects a year (space/enter/click).
 		 * @public
@@ -65,9 +66,6 @@ const metadata = {
 	},
 };
 
-const PAGE_SIZE = 20; // Total years on a single page
-const ROW_SIZE = 4; // Years per row (5 rows of 4 years each)
-
 /**
  * @class
  *
@@ -97,27 +95,39 @@ class YearPicker extends CalendarPart {
 		this._buildYears();
 	}
 
+	_getPageSize() {
+		// Total years on a single page depending on using on one or two calendar type
+		return this.secondaryCalendarType ? 8 : 20;
+	}
+
+	_getRowSize() {
+		// Years per row (5 rows of 4 years each) for one claendar type and (4 row of 2 years each) for two calendar type
+		return this.secondaryCalendarType ? 2 : 4;
+	}
+
 	_buildYears() {
 		if (this._hidden) {
 			return;
 		}
-
+		const pageSize = this._getPageSize();
 		const oYearFormat = DateFormat.getDateInstance({ format: "y", calendarType: this._primaryCalendarType }, getLocale());
-
+		const oYearFormatInSecType = DateFormat.getDateInstance({ format: "y", calendarType: this.secondaryCalendarType }, getLocale());
 		this._calculateFirstYear();
-		this._lastYear = this._firstYear + PAGE_SIZE - 1;
+		this._lastYear = this._firstYear + pageSize - 1;
 
 		const calendarDate = this._calendarDate; // store the value of the expensive getter
 		const minDate = this._minDate; // store the value of the expensive getter
 		const maxDate = this._maxDate; // store the value of the expensive getter
 		const tempDate = new CalendarDate(calendarDate, this._primaryCalendarType);
+		let tempDateInSecType;
+		let textInSecType;
 		tempDate.setYear(this._firstYear);
 
 		const intervals = [];
 		let timestamp;
 
 		/* eslint-disable no-loop-func */
-		for (let i = 0; i < PAGE_SIZE; i++) {
+		for (let i = 0; i < pageSize; i++) {
 			timestamp = tempDate.valueOf() / 1000;
 
 			const isSelected = this.selectedDates.some(itemTimestamp => {
@@ -127,6 +137,13 @@ class YearPicker extends CalendarPart {
 			const isFocused = tempDate.getYear() === calendarDate.getYear();
 			const isDisabled = tempDate.getYear() < minDate.getYear() || tempDate.getYear() > maxDate.getYear();
 
+			if (this.secondaryCalendarType) {
+				tempDateInSecType = transformDateToSecondaryType(this._primaryCalendarType, this.secondaryCalendarType, timestamp, true);
+				textInSecType = tempDateInSecType.firstDate.getYear() === tempDateInSecType.lastDate.getYear
+					? `${oYearFormatInSecType.format(tempDateInSecType.firstDate.toLocalJSDate(), true)}`
+					: `${oYearFormatInSecType.format(tempDateInSecType.firstDate.toLocalJSDate(), true)} - ${oYearFormatInSecType.format(tempDateInSecType.lastDate.toLocalJSDate(), true)}`;
+			}
+
 			const year = {
 				timestamp: timestamp.toString(),
 				_tabIndex: isFocused ? "0" : "-1",
@@ -134,6 +151,7 @@ class YearPicker extends CalendarPart {
 				selected: isSelected,
 				ariaSelected: isSelected ? "true" : "false",
 				year: oYearFormat.format(tempDate.toLocalJSDate()),
+				yearInSecType: this.secondaryCalendarType && textInSecType,
 				disabled: isDisabled,
 				classes: "ui5-yp-item",
 			};
@@ -146,7 +164,10 @@ class YearPicker extends CalendarPart {
 				year.classes += " ui5-yp-item--disabled";
 			}
 
-			const intervalIndex = parseInt(i / ROW_SIZE);
+			if (this.secondaryCalendarType) {
+				year.classes += " ui5-yp-item-secondary-type";
+			}
+			const intervalIndex = parseInt(i / this._getRowSize());
 
 			if (intervals[intervalIndex]) {
 				intervals[intervalIndex].push(year);
@@ -161,24 +182,25 @@ class YearPicker extends CalendarPart {
 	}
 
 	_calculateFirstYear() {
+		const pageSize = this._getPageSize();
 		const absoluteMaxYear = getMaxCalendarDate(this._primaryCalendarType).getYear(); // 9999
 		const currentYear = this._calendarDate.getYear();
 
 		// 1. If first load - center the current year (set first year to be current year minus half page size)
 		if (!this._firstYear) {
-			this._firstYear = currentYear - PAGE_SIZE / 2;
+			this._firstYear = currentYear - pageSize / 2;
 		}
 
 		// 2. If out of range - change by a page (20) - do not center in order to keep the same position as the last page
 		if (currentYear < this._firstYear) {
-			this._firstYear -= PAGE_SIZE;
-		} else if (currentYear >= this._firstYear + PAGE_SIZE) {
-			this._firstYear += PAGE_SIZE;
+			this._firstYear -= pageSize;
+		} else if (currentYear >= this._firstYear + pageSize) {
+			this._firstYear += pageSize;
 		}
 
 		// 3. If the date was changed by more than 20 years - reset _firstYear completely
-		if (Math.abs(this._firstYear - currentYear) >= PAGE_SIZE) {
-			this._firstYear = currentYear - PAGE_SIZE / 2;
+		if (Math.abs(this._firstYear - currentYear) >= pageSize) {
+			this._firstYear = currentYear - pageSize / 2;
 		}
 
 		// Keep it in the range between the min and max year
@@ -186,8 +208,8 @@ class YearPicker extends CalendarPart {
 		this._firstYear = Math.min(this._firstYear, this._maxDate.getYear());
 
 		// If first year is > 9980, make it 9980 to not show any years beyond 9999
-		if (this._firstYear > absoluteMaxYear - PAGE_SIZE + 1) {
-			this._firstYear = absoluteMaxYear - PAGE_SIZE + 1;
+		if (this._firstYear > absoluteMaxYear - pageSize + 1) {
+			this._firstYear = absoluteMaxYear - pageSize + 1;
 		}
 	}
 
@@ -199,6 +221,8 @@ class YearPicker extends CalendarPart {
 
 	_onkeydown(event) {
 		let preventDefault = true;
+		const pageSize = this._getPageSize();
+		const rowSize = this._getRowSize();
 
 		if (isEnter(event)) {
 			this._selectYear(event);
@@ -209,19 +233,19 @@ class YearPicker extends CalendarPart {
 		} else if (isRight(event)) {
 			this._modifyTimestampBy(1);
 		} else if (isUp(event)) {
-			this._modifyTimestampBy(-ROW_SIZE);
+			this._modifyTimestampBy(-rowSize);
 		} else if (isDown(event)) {
-			this._modifyTimestampBy(ROW_SIZE);
+			this._modifyTimestampBy(rowSize);
 		} else if (isPageUp(event)) {
-			this._modifyTimestampBy(-PAGE_SIZE);
+			this._modifyTimestampBy(-pageSize);
 		} else if (isPageDown(event)) {
-			this._modifyTimestampBy(PAGE_SIZE);
+			this._modifyTimestampBy(pageSize);
 		} else if (isHome(event) || isEnd(event)) {
 			this._onHomeOrEnd(isHome(event));
 		} else if (isHomeCtrl(event)) {
 			this._setTimestamp(parseInt(this._years[0][0].timestamp)); // first year of first row
 		} else if (isEndCtrl(event)) {
-			this._setTimestamp(parseInt(this._years[PAGE_SIZE / ROW_SIZE - 1][ROW_SIZE - 1].timestamp)); // last year of last row
+			this._setTimestamp(parseInt(this._years[pageSize / rowSize - 1][rowSize - 1].timestamp)); // last year of last row
 		} else {
 			preventDefault = false;
 		}
@@ -235,7 +259,7 @@ class YearPicker extends CalendarPart {
 		this._years.forEach(row => {
 			const indexInRow = row.findIndex(item => CalendarDate.fromTimestamp(parseInt(item.timestamp) * 1000).getYear() === this._calendarDate.getYear());
 			if (indexInRow !== -1) { // The current year is on this row
-				const index = homePressed ? 0 : ROW_SIZE - 1; // select the first (if Home) or last (if End) year on the row
+				const index = homePressed ? 0 : this._getRowSize() - 1; // select the first (if Home) or last (if End) year on the row
 				this._setTimestamp(parseInt(row[index].timestamp));
 			}
 		});
@@ -297,7 +321,7 @@ class YearPicker extends CalendarPart {
 	 * @protected
 	 */
 	_hasNextPage() {
-		return this._firstYear + PAGE_SIZE - 1 < this._maxDate.getYear();
+		return this._firstYear + this._getPageSize() - 1 < this._maxDate.getYear();
 	}
 
 	/**
@@ -306,7 +330,8 @@ class YearPicker extends CalendarPart {
 	 * @protected
 	 */
 	_showPreviousPage() {
-		this._modifyTimestampBy(-PAGE_SIZE);
+		const pageSize = this._getPageSize();
+		this._modifyTimestampBy(-pageSize);
 	}
 
 	/**
@@ -315,7 +340,7 @@ class YearPicker extends CalendarPart {
 	 * @protected
 	 */
 	_showNextPage() {
-		this._modifyTimestampBy(PAGE_SIZE);
+		this._modifyTimestampBy(this._getPageSize());
 	}
 }