@ui5/webcomponents 1.9.3 → 1.10.0

package/src/features/{InputSuggestions.js → InputSuggestions.ts}

@@ -1,8 +1,14 @@
+import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import { registerFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type { I18nText } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+// @ts-ignore
 import encodeXML from "@ui5/webcomponents-base/dist/sap/base/security/encodeXML.js";
 import generateHighlightedMarkup from "@ui5/webcomponents-base/dist/util/generateHighlightedMarkup.js";
+import type ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import List from "../List.js";
+import type { ClickEventDetail, SelectionChangeEventDetail } from "../List.js";
 import ResponsivePopover from "../ResponsivePopover.js";
 import SuggestionItem from "../SuggestionItem.js";
 import SuggestionGroupItem from "../SuggestionGroupItem.js";
@@ -14,7 +20,44 @@ import SuggestionListItem from "../SuggestionListItem.js";
 
 import {
 	LIST_ITEM_POSITION,
+	// @ts-ignore
 } from "../generated/i18n/i18n-defaults.js";
+import type ListItemType from "../types/ListItemType.js";
+import type ListItemBase from "../ListItemBase.js";
+
+interface SuggestionComponent extends UI5Element {
+	_isValueStateFocused: boolean;
+	focused: boolean;
+	hasSuggestionItemSelected: boolean;
+	value: string;
+	typedInValue: string;
+	hasValueStateMessage: boolean;
+	suggestionItems: Array<SuggestionItem>;
+	open: boolean;
+	onItemMouseOver: (e: MouseEvent) => void;
+	onItemMouseOut: (e: MouseEvent) => void;
+	onItemSelected: (pressedItem: SuggestionItem, keyboardUsed: boolean) => void;
+	onItemPreviewed: (item: SuggestionListItem) => void;
+}
+
+type InputSuggestionText = {
+	text: string;
+	description: string;
+	image?: string;
+	icon?: string;
+	type: ListItemType;
+	additionalText?: string;
+	additionalTextState: ValueState;
+	groupItem: boolean;
+	key: number;
+}
+
+type SuggestionsAccInfo = {
+	currentPos: number;
+	listSize: number;
+	itemText: string;
+}
+
 /**
  * A class to manage the <code>Input</code suggestion items.
  *
@@ -23,7 +66,24 @@ import {
  * @author SAP SE
  */
 class Suggestions {
-	constructor(component, slotName, highlight, handleFocus) {
+	component: SuggestionComponent;
+	slotName: string;
+	handleFocus: boolean;
+	highlight: boolean;
+	selectedItemIndex: number;
+	accInfo?: SuggestionsAccInfo;
+	responsivePopover?: ResponsivePopover;
+	_scrollContainer?: HTMLElement;
+	_handledPress?: boolean;
+	attachedAfterOpened?: boolean;
+	attachedAfterClose?: boolean;
+	fnOnSuggestionItemPress: (e: CustomEvent<ClickEventDetail | SelectionChangeEventDetail>) => void;
+	fnOnSuggestionItemMouseOver: (e: MouseEvent) => void;
+	fnOnSuggestionItemMouseOut: (e: MouseEvent) => void;
+	static i18nBundle: I18nBundle;
+	static SCROLL_STEP = 60;
+
+	constructor(component: SuggestionComponent, slotName: string, highlight: boolean, handleFocus: boolean) {
 		// The component, that the suggestion would plug into.
 		this.component = component;
 
@@ -38,7 +98,6 @@ class Suggestions {
 
 		// Press and Focus handlers
 		this.fnOnSuggestionItemPress = this.onItemPress.bind(this);
-		this.fnOnSuggestionItemFocus = this.onItemFocused.bind(this);
 		this.fnOnSuggestionItemMouseOver = this.onItemMouseOver.bind(this);
 		this.fnOnSuggestionItemMouseOut = this.onItemMouseOut.bind(this);
 
@@ -46,18 +105,16 @@ class Suggestions {
 
 		// An integer value to store the currently selected item position,
 		// that changes due to user interaction.
-		this.selectedItemIndex = null;
-
-		this.accInfo = {};
+		this.selectedItemIndex = -1;
 	}
 
 	/* Public methods */
-	defaultSlotProperties(hightlightValue) {
+	defaultSlotProperties(hightlightValue: string) {
 		const inputSuggestionItems = this._getComponent().suggestionItems;
 		const highlight = this.highlight && !!hightlightValue;
-		const suggestions = [];
+		const suggestions: Array<InputSuggestionText> = [];
 
-		inputSuggestionItems.map((suggestion, idx) => {
+		inputSuggestionItems.map((suggestion: SuggestionItem, idx: number) => {
 			const text = highlight ? this.getHighlightedText(suggestion, hightlightValue) : this.getRowText(suggestion);
 			const description = highlight ? this.getHighlightedDesc(suggestion, hightlightValue) : this.getRowDesc(suggestion);
 
@@ -77,30 +134,30 @@ class Suggestions {
 		return suggestions;
 	}
 
-	onUp(event) {
-		event.preventDefault();
+	onUp(e: KeyboardEvent) {
+		e.preventDefault();
 		this._handleItemNavigation(false /* forward */);
 		return true;
 	}
 
-	onDown(event) {
-		event.preventDefault();
+	onDown(e: KeyboardEvent) {
+		e.preventDefault();
 		this._handleItemNavigation(true /* forward */);
 		return true;
 	}
 
-	onSpace(event) {
+	onSpace(e: KeyboardEvent) {
 		if (this._isItemOnTarget()) {
-			event.preventDefault();
+			e.preventDefault();
 			this.onItemSelected(null, true /* keyboardUsed */);
 			return true;
 		}
 		return false;
 	}
 
-	onEnter(event) {
+	onEnter(e: KeyboardEvent) {
 		if (this._isGroupOrInactiveItem) {
-			event.preventDefault();
+			e.preventDefault();
 			return false;
 		}
 
@@ -112,8 +169,8 @@ class Suggestions {
 		return false;
 	}
 
-	onPageUp(event) {
-		event.preventDefault();
+	onPageUp(e: KeyboardEvent) {
+		e.preventDefault();
 
 		const isItemIndexValid = this.selectedItemIndex - 10 > -1;
 
@@ -127,8 +184,8 @@ class Suggestions {
 		return true;
 	}
 
-	onPageDown(event) {
-		event.preventDefault();
+	onPageDown(e: KeyboardEvent) {
+		e.preventDefault();
 
 		const items = this._getItems();
 		const lastItemIndex = items.length - 1;
@@ -144,8 +201,8 @@ class Suggestions {
 		return true;
 	}
 
-	onHome(event) {
-		event.preventDefault();
+	onHome(e: KeyboardEvent) {
+		e.preventDefault();
 
 		if (this._hasValueState) {
 			this._focusValueState();
@@ -156,8 +213,8 @@ class Suggestions {
 		return true;
 	}
 
-	onEnd(event) {
-		event.preventDefault();
+	onEnd(e: KeyboardEvent) {
+		e.preventDefault();
 
 		const lastItemIndex = this._getItems().length - 1;
 
@@ -170,7 +227,7 @@ class Suggestions {
 		return true;
 	}
 
-	onTab(event) {
+	onTab() {
 		if (this._isItemOnTarget()) {
 			this.onItemSelected(null, true);
 			return true;
@@ -178,13 +235,13 @@ class Suggestions {
 		return false;
 	}
 
-	toggle(bToggle, { preventFocusRestore }) {
+	toggle(bToggle: boolean, options: { preventFocusRestore: boolean }) {
 		const toggle = bToggle !== undefined ? bToggle : !this.isOpened();
 
 		if (toggle) {
 			this.open();
 		} else {
-			this.close(preventFocusRestore);
+			this.close(options.preventFocusRestore);
 		}
 	}
 
@@ -193,11 +250,11 @@ class Suggestions {
 		return sc.offsetHeight < sc.scrollHeight;
 	}
 
-	async open() {
+	open() {
 		this._getComponent().open = true;
 		this._beforeOpen();
 
-		this.responsivePopover.showAt(this._getComponent());
+		this.responsivePopover!.showAt(this._getComponent());
 	}
 
 	async close(preventFocusRestore = false) {
@@ -212,24 +269,20 @@ class Suggestions {
 		}
 	}
 
-	updateSelectedItemPosition(pos) {
+	updateSelectedItemPosition(pos: number) {
 		this.selectedItemIndex = pos;
 	}
 
 	/* Interface methods */
-	onItemFocused() {
-		this._getComponent().onItemFocused();
+	onItemMouseOver(e: MouseEvent) {
+		this._getComponent().onItemMouseOver(e);
 	}
 
-	onItemMouseOver(event) {
-		this._getComponent().onItemMouseOver(event);
+	onItemMouseOut(e: MouseEvent) {
+		this._getComponent().onItemMouseOut(e);
 	}
 
-	onItemMouseOut(event) {
-		this._getComponent().onItemMouseOut(event);
-	}
-
-	onItemSelected(selectedItem, keyboardUsed) {
+	onItemSelected(selectedItem: SuggestionListItem | null, keyboardUsed: boolean) {
 		const allItems = this._getItems();
 		const item = selectedItem || allItems[this.selectedItemIndex];
 
@@ -243,7 +296,7 @@ class Suggestions {
 
 		// If the item is "Inactive", prevent selection with SPACE or ENTER
 		// to have consistency with the way "Inactive" items behave in the ui5-list
-		if (item.type === "Inactive" || item.group) {
+		if (item.type === "Inactive" || item.groupItem) {
 			return;
 		}
 
@@ -253,29 +306,30 @@ class Suggestions {
 		this._getComponent().open = false;
 	}
 
-	onItemPreviewed(item) {
+	onItemPreviewed(item: SuggestionListItem) {
 		this._getComponent().onItemPreviewed(item);
 	}
 
 	/* Private methods */
-	onItemPress(event) {
-		let pressedItem;
-		const isPressEvent = event.type === "ui5-item-click";
+	// Note: Split into two separate handlers
+	onItemPress(e: CustomEvent<ClickEventDetail | SelectionChangeEventDetail>) {
+		let pressedItem: ListItemBase; // SuggestionListItem
+		const isPressEvent = e.type === "ui5-item-click";
 
-		// Only use the press event if the item is already selected, in all other cases we are listening for 'ui5-selection-change' from the list
+		// Only use the press e if the item is already selected, in all other cases we are listening for 'ui5-selection-change' from the list
 		// Also we have to check if the selection-change is fired by the list's 'item-click' event handling, to avoid double handling on our side
-		if ((isPressEvent && !event.detail.item.selected) || (this._handledPress && !isPressEvent)) {
+		if ((isPressEvent && !(e.detail as ClickEventDetail).item.selected) || (this._handledPress && !isPressEvent)) {
 			return;
 		}
 
-		if (isPressEvent && event.detail.item.selected) {
-			pressedItem = event.detail.item;
+		if (isPressEvent && (e.detail as ClickEventDetail).item.selected) {
+			pressedItem = (e.detail as ClickEventDetail).item;
 			this._handledPress = true;
 		} else {
-			pressedItem = event.detail.selectedItems[0];
+			pressedItem = (e.detail as SelectionChangeEventDetail).selectedItems[0];
 		}
 
-		this.onItemSelected(pressedItem, false /* keyboardUsed */);
+		this.onItemSelected(pressedItem as SuggestionListItem, false /* keyboardUsed */);
 	}
 
 	_beforeOpen() {
@@ -285,12 +339,10 @@ class Suggestions {
 
 	async _attachItemsListeners() {
 		const list = await this._getList();
-		list.removeEventListener("ui5-item-click", this.fnOnSuggestionItemPress);
-		list.addEventListener("ui5-item-click", this.fnOnSuggestionItemPress);
-		list.removeEventListener("ui5-selection-change", this.fnOnSuggestionItemPress);
-		list.addEventListener("ui5-selection-change", this.fnOnSuggestionItemPress);
-		list.removeEventListener("ui5-item-focused", this.fnOnSuggestionItemFocus);
-		list.addEventListener("ui5-item-focused", this.fnOnSuggestionItemFocus);
+		list.removeEventListener("ui5-item-click", this.fnOnSuggestionItemPress as EventListener);
+		list.addEventListener("ui5-item-click", this.fnOnSuggestionItemPress as EventListener);
+		list.removeEventListener("ui5-selection-change", this.fnOnSuggestionItemPress as EventListener);
+		list.addEventListener("ui5-selection-change", this.fnOnSuggestionItemPress as EventListener);
 		list.removeEventListener("mouseover", this.fnOnSuggestionItemMouseOver);
 		list.addEventListener("mouseover", this.fnOnSuggestionItemMouseOver);
 		list.removeEventListener("mouseout", this.fnOnSuggestionItemMouseOut);
@@ -303,23 +355,21 @@ class Suggestions {
 		}
 
 		if (!this.attachedAfterOpened) {
-			this._getSuggestionPopover.addEventListener("ui5-after-open", this._onOpen.bind(this));
+			this.responsivePopover!.addEventListener("ui5-after-open", this._onOpen.bind(this));
 			this.attachedAfterOpened = true;
 		}
 
 		if (!this.attachedAfterClose) {
-			this._getSuggestionPopover.addEventListener("ui5-after-close", this._onClose.bind(this));
+			this.responsivePopover!.addEventListener("ui5-after-close", this._onClose.bind(this));
 			this.attachedAfterClose = true;
 		}
 	}
 
 	_onOpen() {
 		this._applyFocus();
-		this._getComponent().onOpen();
 	}
 
 	_onClose() {
-		this._getComponent().onClose();
 		this._handledPress = false;
 	}
 
@@ -340,14 +390,14 @@ class Suggestions {
 			return false;
 		}
 
-		return (items[this.selectedItemIndex].group || items[this.selectedItemIndex].type === "Inactive");
+		return (items[this.selectedItemIndex].groupItem || items[this.selectedItemIndex].type === "Inactive");
 	}
 
 	isOpened() {
 		return !!(this.responsivePopover && this.responsivePopover.opened);
 	}
 
-	_handleItemNavigation(forward) {
+	_handleItemNavigation(forward: boolean) {
 		if (!this._getItems().length) {
 			return;
 		}
@@ -363,17 +413,17 @@ class Suggestions {
 		const itemsCount = this._getItems().length;
 		const previousSelectedIdx = this.selectedItemIndex;
 
-		if (this._hasValueState && previousSelectedIdx === null && !this.component._isValueStateFocused) {
+		if (this._hasValueState && previousSelectedIdx === -1 && !this.component._isValueStateFocused) {
 			this._focusValueState();
 			return;
 		}
 
-		if ((previousSelectedIdx === null && !this._hasValueState) || this.component._isValueStateFocused) {
+		if ((previousSelectedIdx === -1 && !this._hasValueState) || this.component._isValueStateFocused) {
 			this._clearValueStateFocus();
-			--this.selectedItemIndex;
+			this.selectedItemIndex = -1;
 		}
 
-		if (previousSelectedIdx !== null && previousSelectedIdx + 1 > itemsCount - 1) {
+		if (previousSelectedIdx !== -1 && previousSelectedIdx + 1 > itemsCount - 1) {
 			return;
 		}
 
@@ -387,7 +437,7 @@ class Suggestions {
 		if (this._hasValueState && previousSelectedIdx === 0 && !this.component._isValueStateFocused) {
 			this.component.hasSuggestionItemSelected = false;
 			this.component._isValueStateFocused = true;
-			this.selectedItemIndex = null;
+			this.selectedItemIndex = 0;
 
 			items[0].focused = false;
 			items[0].selected = false;
@@ -398,7 +448,7 @@ class Suggestions {
 		if (this.component._isValueStateFocused) {
 			this.component.focused = true;
 			this.component._isValueStateFocused = false;
-			this.selectedItemIndex = null;
+			this.selectedItemIndex = 0;
 
 			return;
 		}
@@ -420,7 +470,7 @@ class Suggestions {
 		this._moveItemSelection(previousSelectedIdx, --this.selectedItemIndex);
 	}
 
-	_moveItemSelection(previousIdx, nextIdx) {
+	_moveItemSelection(previousIdx: number, nextIdx: number) {
 		const items = this._getItems();
 		const currentItem = items[nextIdx];
 		const previousItem = items[previousIdx];
@@ -479,16 +529,16 @@ class Suggestions {
 		}
 	}
 
-	_isItemIntoView(item) {
-		const rectItem = item.getDomRef().getBoundingClientRect();
-		const rectInput = this._getComponent().getDomRef().getBoundingClientRect();
+	_isItemIntoView(item: SuggestionListItem) {
+		const rectItem = item.getDomRef()!.getBoundingClientRect();
+		const rectInput = this._getComponent().getDomRef()!.getBoundingClientRect();
 		const windowHeight = (window.innerHeight || document.documentElement.clientHeight);
 
 		return (rectItem.top + Suggestions.SCROLL_STEP <= windowHeight) && (rectItem.top >= rectInput.top);
 	}
 
-	async _scrollItemIntoView(item) {
-		const pos = item.getDomRef().offsetTop;
+	async _scrollItemIntoView(item: SuggestionListItem) {
+		const pos = item.getDomRef()!.offsetTop;
 		const scrollContainer = await this._getScrollContainer();
 		scrollContainer.scrollTop = pos;
 	}
@@ -496,23 +546,23 @@ class Suggestions {
 	async _getScrollContainer() {
 		if (!this._scrollContainer) {
 			await this._getSuggestionPopover();
-			this._scrollContainer = this.responsivePopover.shadowRoot.querySelector(".ui5-popup-content");
+			this._scrollContainer = this.responsivePopover!.shadowRoot!.querySelector(".ui5-popup-content")!;
 		}
 
 		return this._scrollContainer;
 	}
 
-	_getItems() {
-		return !!this.responsivePopover && [...this.responsivePopover.querySelector("[ui5-list]").children];
+	_getItems(): Array<SuggestionListItem> {
+		return this.responsivePopover ? [...this.responsivePopover.querySelector<List>("[ui5-list]")!.children] as Array<SuggestionListItem> : [];
 	}
 
-	_getComponent() {
+	_getComponent(): SuggestionComponent {
 		return this.component;
 	}
 
 	async _getList() {
 		this.responsivePopover = await this._getSuggestionPopover();
-		return this.responsivePopover.querySelector("[ui5-list]");
+		return this.responsivePopover.querySelector<List>("[ui5-list]")!;
 	}
 
 	async _getListWidth() {
@@ -521,7 +571,7 @@ class Suggestions {
 	}
 
 	_getRealItems() {
-		return this._getComponent().getSlottedNodes(this.slotName);
+		return this._getComponent().getSlottedNodes(this.slotName) as Array<SuggestionItem>;
 	}
 
 	async _getSuggestionPopover() {
@@ -530,42 +580,44 @@ class Suggestions {
 		}
 
 		const staticAreaItem = await this._getComponent().getStaticAreaItemDomRef();
-		this.responsivePopover = staticAreaItem.querySelector("[ui5-responsive-popover]");
+		this.responsivePopover = staticAreaItem!.querySelector<ResponsivePopover>("[ui5-responsive-popover]")!;
 		return this.responsivePopover;
 	}
 
 	get itemSelectionAnnounce() {
-		const itemPositionText = Suggestions.i18nBundle.getText(LIST_ITEM_POSITION, this.accInfo.currentPos, this.accInfo.listSize);
+		if (!this.accInfo) {
+			return "";
+		}
+
+		const itemPositionText = Suggestions.i18nBundle.getText(LIST_ITEM_POSITION as I18nText, this.accInfo.currentPos, this.accInfo.listSize);
 
 		return `${this.accInfo.itemText} ${itemPositionText}`;
 	}
 
-	getRowText(suggestion) {
-		return this.sanitizeText(suggestion.text || suggestion.textContent);
+	getRowText(suggestion: SuggestionItem) {
+		return this.sanitizeText(suggestion.text || suggestion.textContent || "");
 	}
 
-	getRowDesc(suggestion) {
-		if (suggestion.description) {
-			return this.sanitizeText(suggestion.description);
-		}
+	getRowDesc(suggestion: SuggestionItem) {
+		return this.sanitizeText(suggestion.description || "");
 	}
 
-	getHighlightedText(suggestion, input) {
-		const text = suggestion.text || suggestion.textContent;
+	getHighlightedText(suggestion: SuggestionItem, input: string) {
+		const text = suggestion.text || suggestion.textContent || "";
 		return this.hightlightInput(text, input);
 	}
 
-	getHighlightedDesc(suggestion, input) {
-		const text = suggestion.description || "";
+	getHighlightedDesc(suggestion: SuggestionItem, input: string) {
+		const text = suggestion.description;
 		return this.hightlightInput(text, input);
 	}
 
-	hightlightInput(text, input) {
+	hightlightInput(text: string, input: string) {
 		return generateHighlightedMarkup(text, input);
 	}
 
-	sanitizeText(text) {
-		return encodeXML(text);
+	sanitizeText(text: string) {
+		return encodeXML(text) as string;
 	}
 
 	get _hasValueState() {
@@ -578,8 +630,8 @@ class Suggestions {
 		this.component._isValueStateFocused = true;
 		this.component.focused = false;
 		this.component.hasSuggestionItemSelected = false;
-		this.selectedItemIndex = null;
-		this.component.value = this.component.valueBeforeAutoComplete;
+		this.selectedItemIndex = 0;
+		this.component.value = this.component.typedInValue;
 
 		items && this._scrollItemIntoView(items[0]);
 		this._deselectItems();
@@ -608,9 +660,12 @@ class Suggestions {
 	}
 }
 
-Suggestions.SCROLL_STEP = 60;
-
 // Add suggestions support to the global features registry so that Input.js can use it
 registerFeature("InputSuggestions", Suggestions);
 
 export default Suggestions;
+
+export type {
+	SuggestionComponent,
+	InputSuggestionText,
+};

package/src/i18n/messagebundle.properties

@@ -394,6 +394,12 @@ DAY_PICKER_NON_WORKING_DAY = Non-Working Day
 #XBUT: Text for 'Today' in the DayPicker
 DAY_PICKER_TODAY = Today
 
+#XACT: ARIA description for month picker
+MONTH_PICKER_DESCRIPTION = Month Picker
+
+#XACT: ARIA description for year picker
+YEAR_PICKER_DESCRIPTION = Year Picker
+
 #XTOL: tooltip for decrease button of the StepInput
 STEPINPUT_DEC_ICON_TITLE=Decrease
 

package/src/i18n/messagebundle_ar.properties

@@ -263,6 +263,10 @@ DAY_PICKER_NON_WORKING_DAY=يوم عطلة
 
 DAY_PICKER_TODAY=اليوم
 
+MONTH_PICKER_DESCRIPTION=أداة انتقاء الشهر
+
+YEAR_PICKER_DESCRIPTION=أداة انتقاء السنة
+
 STEPINPUT_DEC_ICON_TITLE=تخفيض
 
 STEPINPUT_INC_ICON_TITLE=زيادة

package/src/i18n/messagebundle_bg.properties

@@ -263,6 +263,10 @@ DAY_PICKER_NON_WORKING_DAY=Неработен ден
 
 DAY_PICKER_TODAY=Днес
 
+MONTH_PICKER_DESCRIPTION=Избор на месец
+
+YEAR_PICKER_DESCRIPTION=Избор на година
+
 STEPINPUT_DEC_ICON_TITLE=Намаляване
 
 STEPINPUT_INC_ICON_TITLE=Увеличаване

package/src/i18n/messagebundle_ca.properties

@@ -263,6 +263,10 @@ DAY_PICKER_NON_WORKING_DAY=Dia no laborable
 
 DAY_PICKER_TODAY=Avui
 
+MONTH_PICKER_DESCRIPTION=Selector de mes
+
+YEAR_PICKER_DESCRIPTION=Selector d'any
+
 STEPINPUT_DEC_ICON_TITLE=Reduir
 
 STEPINPUT_INC_ICON_TITLE=Ampliar

package/src/i18n/messagebundle_cs.properties

@@ -263,6 +263,10 @@ DAY_PICKER_NON_WORKING_DAY=Nepracovní den
 
 DAY_PICKER_TODAY=Dnes
 
+MONTH_PICKER_DESCRIPTION=Volič měsíce
+
+YEAR_PICKER_DESCRIPTION=Volič roku
+
 STEPINPUT_DEC_ICON_TITLE=Zmenšení
 
 STEPINPUT_INC_ICON_TITLE=Zvětšení

package/src/i18n/messagebundle_cy.properties

@@ -263,6 +263,10 @@ DAY_PICKER_NON_WORKING_DAY=Diwrnod Dim Gwaith
 
 DAY_PICKER_TODAY=Heddiw
 
+MONTH_PICKER_DESCRIPTION=Dewiswr Mis
+
+YEAR_PICKER_DESCRIPTION=Dewiswr Blwyddyn
+
 STEPINPUT_DEC_ICON_TITLE=Lleihau
 
 STEPINPUT_INC_ICON_TITLE=Cynyddu

package/src/i18n/messagebundle_da.properties

@@ -263,6 +263,10 @@ DAY_PICKER_NON_WORKING_DAY=Arbejdsfri dag
 
 DAY_PICKER_TODAY=I dag
 
+MONTH_PICKER_DESCRIPTION=Månedsselektion
+
+YEAR_PICKER_DESCRIPTION=Årsselektion
+
 STEPINPUT_DEC_ICON_TITLE=Formindsk
 
 STEPINPUT_INC_ICON_TITLE=Forstør

package/src/i18n/messagebundle_de.properties

@@ -263,6 +263,10 @@ DAY_PICKER_NON_WORKING_DAY=Arbeitsfreier Tag
 
 DAY_PICKER_TODAY=Heute
 
+MONTH_PICKER_DESCRIPTION=Monatsauswahl
+
+YEAR_PICKER_DESCRIPTION=Jahresauswahl
+
 STEPINPUT_DEC_ICON_TITLE=Verkleinern
 
 STEPINPUT_INC_ICON_TITLE=Vergrößern

package/src/i18n/messagebundle_el.properties

@@ -263,6 +263,10 @@ DAY_PICKER_NON_WORKING_DAY=Μη Εργάσιμη Ημέρα
 
 DAY_PICKER_TODAY=Σήμερα
 
+MONTH_PICKER_DESCRIPTION=Επιλογέας Μήνα
+
+YEAR_PICKER_DESCRIPTION=Επιλογέας Ετους
+
 STEPINPUT_DEC_ICON_TITLE=Μείωση
 
 STEPINPUT_INC_ICON_TITLE=Αύξηση

package/src/i18n/messagebundle_en.properties

@@ -263,6 +263,10 @@ DAY_PICKER_NON_WORKING_DAY=Non-Working Day
 
 DAY_PICKER_TODAY=Today
 
+MONTH_PICKER_DESCRIPTION=Month Picker
+
+YEAR_PICKER_DESCRIPTION=Year Picker
+
 STEPINPUT_DEC_ICON_TITLE=Decrease
 
 STEPINPUT_INC_ICON_TITLE=Increase