@ui5/webcomponents 2.27.1 → 2.28.0-rc.0

package/src/TableSelectionMulti.tsx

@@ -0,0 +1,396 @@
+import { customElement, property } from "@ui5/webcomponents-base/dist/decorators.js";
+import TableSelectionBase from "./TableSelectionBase.js";
+import CheckBox from "./CheckBox.js";
+import Icon from "./Icon.js";
+import ClearAll from "@ui5/webcomponents-icons/dist/clear-all.js";
+import getActiveElement from "@ui5/webcomponents-base/dist/util/getActiveElement.js";
+import { isSelectionCell, isHeaderSelectionCell, findRowInPath } from "./TableUtils.js";
+import { isUpShift } from "@ui5/webcomponents-base/dist/Keys.js";
+import type { VNode } from "@ui5/webcomponents-base/dist/jsx-runtime.js";
+import type Table from "./Table.js";
+import type TableRow from "./TableRow.js";
+import type TableRowBase from "./TableRowBase.js";
+import type TableSelectionMultiHeaderSelector from "./types/TableSelectionMultiHeaderSelector.js";
+import {
+	TABLE_COLUMNHEADER_SELECTALL_DESCRIPTION,
+	TABLE_COLUMNHEADER_CLEARALL_DESCRIPTION,
+	CHECKBOX_CHECKED,
+	CHECKBOX_NOT_CHECKED,
+	ACC_STATE_DISABLED,
+	TABLE_ROW_SELECTOR,
+	TABLE_SELECT_ALL_ROWS,
+	TABLE_DESELECT_ALL_ROWS,
+} from "./generated/i18n/i18n-defaults.js";
+
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * The `ui5-table-selection-multi` component is used inside the `ui5-table` to add multi-selection capabilities to the `ui5-table`.
+ * Since selection is key-based, each `ui5-table-row` must define a unique `row-key` property.
+ *
+ * ### Usage
+ *
+ * The `ui5-table-selection-multi` component is a feature designed exclusively for use within the `ui5-table` component.
+ * It must be placed inside the `features` slot of `ui5-table`.
+ * This component is not intended for standalone use.
+ *
+ * ```html
+ * <ui5-table>
+ * 	<ui5-table-selection-multi slot="features" selected="Row1 Row3"></ui5-table-selection-multi>
+ * </ui5-table>
+ * ```
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/dist/TableSelectionMulti.js";`
+ *
+ * @constructor
+ * @extends TableSelectionBase
+ * @since 2.8.0
+ * @public
+ */
+@customElement({ tag: "ui5-table-selection-multi" })
+
+class TableSelectionMulti extends TableSelectionBase {
+	/**
+	 * Defines the `row-key` values of selected rows, with each value separated by a space.
+	 *
+	 * @default undefined
+	 * @public
+	 */
+	@property()
+	selected?: string;
+
+	/**
+	 * Defines the selector of the header row.
+	 *
+	 * @default "SelectAll"
+	 * @public
+	 * @since 2.12.0
+	 */
+	@property()
+	headerSelector: `${TableSelectionMultiHeaderSelector}` = "SelectAll";
+
+	private _rangeSelection?: {
+		selected: boolean,
+		isUp: boolean | null,
+		rows: TableRow[],
+		isMouse: boolean,
+		shiftPressed: boolean
+	} | null;
+
+	_onClickCaptureBound: (e: MouseEvent) => void;
+
+	constructor() {
+		super();
+		this._onClickCaptureBound = this._onclickCapture.bind(this);
+	}
+
+	onTableBeforeRendering() {
+		super.onTableBeforeRendering();
+		this._table?.removeEventListener("click", this._onClickCaptureBound);
+	}
+
+	onTableAfterRendering() {
+		this._table?.addEventListener("click", this._onClickCaptureBound, { capture: true });
+	}
+
+	isMultiSelectable(): boolean {
+		return true;
+	}
+
+	renderRowSelectionCell(row: TableRow): VNode {
+		const i18nBundle = (row.constructor as typeof TableRowBase).i18nBundle;
+		return <CheckBox id="selection-component"
+			tabindex={-1}
+			checked={this.isSelected(row)}
+			onChange={() => this._onRowSelectionChange(row)}
+			accessibleName={i18nBundle.getText(TABLE_ROW_SELECTOR)}
+		></CheckBox>;
+	}
+
+	renderHeaderSelectionCell(row: TableRowBase): VNode {
+		const i18nBundle = (row.constructor as typeof TableRowBase).i18nBundle;
+		if (this.headerSelector === "ClearAll") {
+			return <Icon
+				name={ClearAll}
+				mode="Decorative"
+				showTooltip={true}
+				accessibleName={i18nBundle.getText(TABLE_DESELECT_ALL_ROWS)}
+				design={this.getSelectedRows().length > 0 ? "Default" : "NonInteractive"}
+				onClick={() => this._onRowSelectionChange(row)}
+			></Icon>;
+		}
+
+		return <CheckBox id="selection-component"
+			tabindex={-1}
+			checked={this.isSelected(row)}
+			onChange={() => this._onRowSelectionChange(row)}
+			accessibleName={i18nBundle.getText(TABLE_ROW_SELECTOR)}
+			title={this.isSelected(row) ? i18nBundle.getText(TABLE_DESELECT_ALL_ROWS) : i18nBundle.getText(TABLE_SELECT_ALL_ROWS)}
+		></CheckBox>;
+	}
+
+	isSelected(row: TableRowBase): boolean {
+		if (row.isHeaderRow()) {
+			return this.headerSelector === "ClearAll" ? true : this.areAllRowsSelected();
+		}
+
+		const rowKey = this.getRowKey(row as TableRow);
+		return this.getSelectedAsSet().has(rowKey);
+	}
+
+	setSelected(row: TableRowBase, selected: boolean, fireEvent: boolean = false) {
+		if (this._rangeSelection?.isMouse && this._rangeSelection.shiftPressed) {
+			return;
+		}
+
+		const tableRows = row.isHeaderRow() ? this._table!.rows : [row as TableRow];
+		const selectedSet = this.getSelectedAsSet();
+		const selectionChanged = tableRows.reduce((selectedSetChanged, tableRow) => {
+			const rowKey = this.getRowKey(tableRow);
+			if (!rowKey) {
+				return selectedSetChanged;
+			}
+
+			const setSize = selectedSet.size;
+			selectedSet[selected ? "add" : "delete"](rowKey);
+			return selectedSetChanged || setSize !== selectedSet.size;
+		}, false);
+
+		if (selectionChanged) {
+			this.setSelectedAsSet(selectedSet);
+			fireEvent && this.fireDecoratorEvent("change");
+		}
+	}
+
+	/**
+	 * Returns an array of the selected rows.
+	 *
+	 * @public
+	 */
+	getSelectedRows(): TableRow[] {
+		return this._table ? this._table.rows.filter(row => this.isSelected(row)) : [];
+	}
+
+	/**
+	 * Determines whether all rows are selected.
+	 */
+	areAllRowsSelected(): boolean {
+		if (!this._table || !this._table.rows.length) {
+			return false;
+		}
+
+		const selectedSet = this.getSelectedAsSet();
+		return this._table.rows.filter(row => row._isSelectable).every(row => {
+			const rowKey = this.getRowKey(row);
+			return selectedSet.has(rowKey);
+		});
+	}
+
+	/**
+	 * Returns the `selected` property as a set of unique `row-key` values.
+	 *
+	 * @public
+	 */
+	getSelectedAsSet(): Set<string> {
+		const selected = this.selected || "";
+		const selectedArray = selected.split(" ").filter(String);
+		return new Set(selectedArray);
+	}
+
+	/**
+	 * Sets the `selected` property using the provided set of unique `row-key` values.
+	 *
+	 * @param selectedSet A set of `row-key` values
+	 * @public
+	 */
+	setSelectedAsSet(selectedSet: Set<string>): void {
+		this.selected = [...selectedSet].join(" ");
+	}
+
+	/**
+	 * Returns the ARIA description of the selection component displayed in the column header.
+	 */
+	getAriaDescriptionForColumnHeader(): string | undefined {
+		if (!this._table || !this._table.rows.length || this.behavior === "RowOnly") {
+			return undefined;
+		}
+
+		let description = "";
+		const seperator = " ";
+		const i18nBundle = (this._table.constructor as typeof Table).i18nBundle;
+		if (this.headerSelector === "SelectAll") {
+			description = i18nBundle.getText(TABLE_COLUMNHEADER_SELECTALL_DESCRIPTION);
+			description += seperator + i18nBundle.getText(this.areAllRowsSelected() ? CHECKBOX_CHECKED : CHECKBOX_NOT_CHECKED);
+		} else {
+			description = i18nBundle.getText(TABLE_COLUMNHEADER_CLEARALL_DESCRIPTION);
+			description += this.getSelectedRows().length === 0 ? seperator + i18nBundle.getText(ACC_STATE_DISABLED) : "";
+		}
+		return description;
+	}
+
+	_onkeydown(e: KeyboardEvent, eventOrigin: HTMLElement) {
+		super._onkeydown(e, eventOrigin);
+
+		if (!this._table || !e.shiftKey) {
+			return;
+		}
+
+		const focusedElement = getActiveElement(); // Assumption: The focused element is always the "next" row after navigation.
+
+		if (!(focusedElement?.hasAttribute("ui5-table-row") || this._rangeSelection?.isMouse)) {
+			this._stopRangeSelection();
+			return;
+		}
+
+		if (!this._rangeSelection) {
+			// If no range selection is active, start one
+			const row = focusedElement as TableRow;
+			this._startRangeSelection(row, this.isSelected(row));
+		} else if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+			const change = isUpShift(e) ? -1 : 1;
+			this._handleRangeSelection(focusedElement as TableRow, change);
+		}
+
+		if (this._rangeSelection) {
+			this._rangeSelection.shiftPressed = e.shiftKey;
+		}
+	}
+
+	_onkeyup(e: KeyboardEvent, eventOrigin: HTMLElement) {
+		if (!this._table) {
+			return;
+		}
+
+		if (!eventOrigin.hasAttribute("ui5-table-row") || !this._rangeSelection || !e.shiftKey) {
+			// Stop range selection if a) Shift is relased or b) the event target is not a row
+			this._stopRangeSelection();
+		}
+
+		if (this._rangeSelection) {
+			this._rangeSelection.shiftPressed = e.shiftKey;
+		}
+	}
+
+	_onclickCapture(e: MouseEvent) {
+		if (!this._table) {
+			return;
+		}
+
+		if (isHeaderSelectionCell(e)) {
+			this._stopRangeSelection();
+			return;
+		}
+
+		if (!isSelectionCell(e)) {
+			this._stopRangeSelection();
+			return;
+		}
+
+		const row = findRowInPath(e.composedPath());
+
+		if (e.shiftKey && this._rangeSelection?.isMouse) {
+			const startRow = this._rangeSelection.rows[0];
+			const startIndex = this._table.rows.indexOf(startRow);
+			const endIndex = this._table.rows.indexOf(row);
+
+			// Set checkbox to the selection state of the start row (if it is selected)
+			const selectionState = this.isSelected(startRow);
+
+			// When doing a range selection and clicking on an already selected row, the checked status should not change
+			// Therefore, we need to manually set the checked attribute again, as clicking it would deselect it and leads to
+			// a visual inconsistency.
+			row.shadowRoot?.querySelector("#selection-component")?.toggleAttribute("checked", selectionState);
+			e.stopPropagation();
+
+			if (startIndex === -1 || endIndex === -1 || row.rowKey === startRow.rowKey || row.rowKey === this._rangeSelection.rows[this._rangeSelection.rows.length - 1].rowKey) {
+				return;
+			}
+
+			const change = endIndex - startIndex;
+			this._handleRangeSelection(row, change);
+		} else if (row) {
+			this._startRangeSelection(row, !this.isSelected(row), true);
+		}
+	}
+
+	/**
+	 * Start the range selection and initialises the range selection state
+	 * @param row starting row
+	 * @private
+	 */
+	_startRangeSelection(row: TableRow, selected: boolean, isMouse = false) {
+		this._rangeSelection = {
+			selected,
+			isUp: null,
+			rows: [row],
+			isMouse,
+			shiftPressed: false,
+		};
+	}
+
+	/**
+	 * Handles the range selection
+	 * @param targetRow Row that is currently focused
+	 * @param change indicates direction
+	 * @private
+	 */
+	_handleRangeSelection(targetRow: TableRow, change: number) {
+		if (!this._rangeSelection) {
+			return;
+		}
+
+		const isUp = change > 0;
+		this._rangeSelection.isUp ??= isUp;
+
+		const shouldReverseSelection = isUp !== this._rangeSelection.isUp && !this._rangeSelection.isMouse;
+		let selectionChanged = shouldReverseSelection && this.isSelected(targetRow);
+
+		if (shouldReverseSelection) {
+			this._reverseRangeSelection();
+		} else {
+			const rowIndex = this._table!.rows.indexOf(targetRow);
+			const [startIndex, endIndex] = [rowIndex, rowIndex - change].sort((a, b) => a - b);
+			const selectedSet = this.getSelectedAsSet();
+
+			selectionChanged = this._table?.rows.slice(startIndex, endIndex + 1).reduce((changed, row) => {
+				const isRowNotInSelection = !this._rangeSelection?.rows.includes(row);
+				const isRowSelectionDifferent = this.isSelected(row) !== this._rangeSelection!.selected;
+
+				if (isRowNotInSelection) {
+					this._rangeSelection?.rows.push(row);
+				}
+
+				selectedSet[this._rangeSelection!.selected ? "add" : "delete"](this.getRowKey(row));
+
+				return changed || isRowSelectionDifferent;
+			}, selectionChanged) || false;
+
+			this.setSelectedAsSet(selectedSet);
+		}
+
+		selectionChanged && this.fireDecoratorEvent("change");
+	}
+
+	_stopRangeSelection() {
+		this._rangeSelection = null;
+	}
+
+	_reverseRangeSelection() {
+		const row = this._rangeSelection?.rows.pop();
+		if (row) {
+			this.setSelected(row, false);
+		}
+
+		if (this._rangeSelection?.rows.length === 1) {
+			this._rangeSelection.isUp = null;
+		}
+	}
+}
+
+TableSelectionMulti.define();
+
+export default TableSelectionMulti;

package/src/TableSelectionSingle.tsx

@@ -0,0 +1,91 @@
+import { customElement, property } from "@ui5/webcomponents-base/dist/decorators.js";
+import TableSelectionBase from "./TableSelectionBase.js";
+import RadioButton from "./RadioButton.js";
+import type { VNode } from "@ui5/webcomponents-base/dist/jsx-runtime.js";
+import type TableRow from "./TableRow.js";
+import type TableRowBase from "./TableRowBase.js";
+import {
+	TABLE_ROW_SELECTOR,
+} from "./generated/i18n/i18n-defaults.js";
+
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * The `ui5-table-selection-single` component is used inside the `ui5-table` to add single selection capabilities to the `ui5-table`.
+ * Since selection is key-based, each `ui5-table-row` must define a unique `row-key` property.
+ *
+ * ### Usage
+ *
+ * The `ui5-table-selection-single` component is a feature designed exclusively for use within the `ui5-table` component.
+ * It must be placed inside the `features` slot of `ui5-table`.
+ * This component is not intended for standalone use.
+ *
+ * ```html
+ * <ui5-table>
+ * 	<ui5-table-selection-single slot="features" selected="Row1"></ui5-table-selection-single>
+ * </ui5-table>
+ * ```
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/dist/TableSelectionSingle.js";`
+ *
+ * @constructor
+ * @extends TableSelectionBase
+ * @since 2.8.0
+ * @public
+ */
+@customElement({ tag: "ui5-table-selection-single" })
+
+class TableSelectionSingle extends TableSelectionBase {
+	/**
+	 * Defines the `row-key` value of the selected row.
+	 *
+	 * @default undefined
+	 * @public
+	 */
+	@property()
+	selected?: string;
+
+	isSelected(row: TableRow): boolean {
+		const rowKey = this.getRowKey(row);
+		return rowKey ? this.selected === rowKey : false;
+	}
+
+	renderRowSelectionCell(row: TableRow): VNode {
+		const i18nBundle = (row.constructor as typeof TableRowBase).i18nBundle;
+		return <RadioButton id="selection-component"
+			tabindex={-1}
+			checked={this.isSelected(row)}
+			onChange={() => this._onRowSelectionChange(row)}
+			accessibleName={i18nBundle.getText(TABLE_ROW_SELECTOR)}
+		></RadioButton>;
+	}
+
+	renderHeaderSelectionCell(): undefined {
+		return undefined;
+	}
+
+	setSelected(row: TableRow, selected: boolean, fireEvent: boolean = false) {
+		const rowKey = this.getRowKey(row);
+		if (rowKey) {
+			this.selected = selected ? rowKey : undefined;
+			fireEvent && this.fireDecoratorEvent("change");
+		}
+	}
+
+	/**
+	 * Returns the selected row.
+	 *
+	 * @public
+	 */
+	getSelectedRow(): TableRow | undefined {
+		return this._table?.rows.find(row => this.isSelected(row));
+	}
+}
+
+TableSelectionSingle.define();
+
+export default TableSelectionSingle;

package/src/TextAreaTemplate.tsx

@@ -47,8 +47,8 @@ export default function TextAreaTemplate(this: TextArea) {
 
 				{ afterTextarea.call(this) }
 
-				{this.showExceededText &&
-				<span class="ui5-textarea-exceeded-text">{this._exceededTextProps.exceededText}</span>
+				{this._effectiveCounterMode !== "None" &&
+				<span class={this.classes.exceededText}>{this._exceededTextProps.exceededText}</span>
 				}
 
 				{this.ariaDescriptionText &&

package/src/features/ColorPaletteMoreColorsTemplate.tsx

@@ -5,7 +5,7 @@ import ColorPicker from "../ColorPicker.js";
 
 export default function ColorPaletteMoreColorsTemplate(this: ColorPalette) {
 	return (
-		<Dialog open={this.dialogOpen} headerText={this.colorPaletteDialogTitle} onClose={this._closeDialog}>
+		<Dialog open={this.dialogOpen} headerText={this.colorPaletteDialogTitle} onClose={this._closeDialog} onOpen={this._onColorPickerDialogOpen}>
 			<div class="ui5-cp-dialog-content">
 				<ColorPicker value={this.colorPickerValue} onChange={this.onColorPickerChange} />
 			</div>

package/src/i18n/messagebundle.properties

@@ -453,6 +453,18 @@ MULTICOMBOBOX_DIALOG_CANCEL_BUTTON=Cancel
 #XACT: ARIA announcement for Combo Box and Multi Combo Box available options
 COMBOBOX_AVAILABLE_OPTIONS=Available Options
 
+#XACT: ARIA announcement when ComboBox starts loading items
+COMBOBOX_LOADING=Loading data
+
+#XACT: ARIA announcement when ComboBox ends loading items
+COMBOBOX_LOADED=Data loaded
+
+#XACT: ARIA announcement when ComboBox finishes loading, {0} is the number of loaded items
+COMBOBOX_LOADED_ITEMS={0} results are available
+
+#XACT: ARIA announcement when ComboBox finishes loading and there is 1 item
+COMBOBOX_LOADED_ITEM=1 result is available
+
 #XBUT: Combobox Dialog OK button on mobile devices
 COMBOBOX_DIALOG_OK_BUTTON=OK
 
@@ -574,7 +586,7 @@ TABCONTAINER_POPOVER_CANCEL_BUTTON=Cancel
 TABCONTAINER_SUBTABS_DESCRIPTION=Press down arrow key to open subitems menu
 
 #XTXT: Text for characters left
-TEXTAREA_CHARACTERS_LEFT={0} characters remaining
+TEXTAREA_CHARACTERS_LEFT={0} characters left
 
 #XTXT: Text for characters over
 TEXTAREA_CHARACTERS_EXCEEDED={0} characters over limit
@@ -897,6 +909,18 @@ DIALOG_FULLSCREEN_MAXIMIZE=Maximize (Shift+Ctrl+F)
 #XACT: Tooltip for dialog fullscreen button (restore)
 DIALOG_FULLSCREEN_RESTORE=Restore (Shift+Ctrl+F)
 
+#XACT: ARIA label for the popover resize handle
+POPOVER_RESIZE_HANDLE_ARIA_LABEL=Resize popover
+
+#XACT: ARIA role description for the popover resize handle
+POPOVER_HANDLE_ARIA_ROLEDESCRIPTION=Handle
+
+#XACT: ARIA describedby text with keyboard instructions for the popover resize handle
+POPOVER_ARIA_DESCRIBEDBY_RESIZABLE=Use Shift+Arrow keys to resize
+
+#XACT: Tooltip for the resize handle icon in the popover
+POPOVER_RESIZE_HANDLE_TOOLTIP=Drag handle to resize (Shift+Arrow)
+
 #XFLD: A colon to separate the "label" from an input. In some languages there might be a different symbol used for such a colon
 LABEL_COLON=:
 

package/src/i18n/messagebundle_ar.properties

@@ -390,7 +390,7 @@ TABCONTAINER_POPOVER_CANCEL_BUTTON=إلغاء
 
 TABCONTAINER_SUBTABS_DESCRIPTION=اضغط على مفتاح السهم لأسفل لفتح قائمة البنود الفرعية
 
-TEXTAREA_CHARACTERS_LEFT=متبق {0} من الحروف
+TEXTAREA_CHARACTERS_LEFT={0} characters left
 
 TEXTAREA_CHARACTERS_EXCEEDED=تم تجاوز الحد بمقدار {0} من الحروف
 

package/src/i18n/messagebundle_bg.properties

@@ -390,7 +390,7 @@ TABCONTAINER_POPOVER_CANCEL_BUTTON=Отказ
 
 TABCONTAINER_SUBTABS_DESCRIPTION=Натиснете клавиша със стрелка надолу, за да отворите менюто с подпозиции
 
-TEXTAREA_CHARACTERS_LEFT=Остават {0} символа
+TEXTAREA_CHARACTERS_LEFT={0} characters left
 
 TEXTAREA_CHARACTERS_EXCEEDED={0} символа над ограничението
 

package/src/i18n/messagebundle_ca.properties

@@ -390,7 +390,7 @@ TABCONTAINER_POPOVER_CANCEL_BUTTON=Cancel·lar
 
 TABCONTAINER_SUBTABS_DESCRIPTION=Premeu la tecla de fletxa avall per obrir el menú de subposicions
 
-TEXTAREA_CHARACTERS_LEFT={0} caràcters restants
+TEXTAREA_CHARACTERS_LEFT={0} characters left
 
 TEXTAREA_CHARACTERS_EXCEEDED=S''han excedit {0} caràcters
 

package/src/i18n/messagebundle_cnr.properties

@@ -390,7 +390,7 @@ TABCONTAINER_POPOVER_CANCEL_BUTTON=Odustani
 
 TABCONTAINER_SUBTABS_DESCRIPTION=Pritisnite strelicu za dolje da otvorite meni podstavki
 
-TEXTAREA_CHARACTERS_LEFT={0} znakova preostaje
+TEXTAREA_CHARACTERS_LEFT=Preostalo je {0} znakova
 
 TEXTAREA_CHARACTERS_EXCEEDED={0} znakova prekoračeno
 

package/src/i18n/messagebundle_cy.properties

@@ -390,7 +390,7 @@ TABCONTAINER_POPOVER_CANCEL_BUTTON=Canslo
 
 TABCONTAINER_SUBTABS_DESCRIPTION=Pwyswch y bysell saeth i agor y ddewislen is-eitemau
 
-TEXTAREA_CHARACTERS_LEFT={0} nod ar ôl
+TEXTAREA_CHARACTERS_LEFT={0} characters left
 
 TEXTAREA_CHARACTERS_EXCEEDED={0} nod dros yr uchafswm
 

package/src/i18n/messagebundle_da.properties

@@ -390,7 +390,7 @@ TABCONTAINER_POPOVER_CANCEL_BUTTON=Afbryd
 
 TABCONTAINER_SUBTABS_DESCRIPTION=Tryk på pil ned for at åbne underelementmenu
 
-TEXTAREA_CHARACTERS_LEFT={0} tegn tilbage
+TEXTAREA_CHARACTERS_LEFT={0} characters left
 
 TEXTAREA_CHARACTERS_EXCEEDED={0} tegn overskredet
 

package/src/i18n/messagebundle_de.properties

@@ -222,7 +222,7 @@ SELECT_ROLE_DESCRIPTION=Listenfeld
 
 SELECT_OPTIONS=Auswahloptionen
 
-SELECT_OPTIONS_IN_GROUPS={0} results are available in {1} groups
+SELECT_OPTIONS_IN_GROUPS={0} Ergebnisse in {1} Gruppen
 
 SELECT_POPOVER_ACCESSIBLE_NAME_PREFIX=Markieren:
 
@@ -390,7 +390,7 @@ TABCONTAINER_POPOVER_CANCEL_BUTTON=Abbrechen
 
 TABCONTAINER_SUBTABS_DESCRIPTION=Zum Öffnen des Unterelementemenüs Pfeiltaste nach unten drücken
 
-TEXTAREA_CHARACTERS_LEFT={0} Zeichen verbleibend
+TEXTAREA_CHARACTERS_LEFT={0} Zeichen übrig
 
 TEXTAREA_CHARACTERS_EXCEEDED={0} Zeichen über Limit
 

package/src/i18n/messagebundle_el.properties

@@ -390,7 +390,7 @@ TABCONTAINER_POPOVER_CANCEL_BUTTON=Ακύρωση
 
 TABCONTAINER_SUBTABS_DESCRIPTION=Πατήστε το πλήκτρο κάτω βέλους για να ανοίξετε το μενού των υποστοιχείων
 
-TEXTAREA_CHARACTERS_LEFT={0} εναπομείναντες χαρακτήρες
+TEXTAREA_CHARACTERS_LEFT={0} characters left
 
 TEXTAREA_CHARACTERS_EXCEEDED={0} Πλεονάζοντες χαρακτήρες
 

package/src/i18n/messagebundle_en.properties

@@ -390,7 +390,7 @@ TABCONTAINER_POPOVER_CANCEL_BUTTON=Cancel
 
 TABCONTAINER_SUBTABS_DESCRIPTION=Press down arrow key to open subitems menu
 
-TEXTAREA_CHARACTERS_LEFT={0} characters remaining
+TEXTAREA_CHARACTERS_LEFT={0} characters left
 
 TEXTAREA_CHARACTERS_EXCEEDED={0} characters over limit
 

package/src/i18n/messagebundle_en_GB.properties

@@ -390,7 +390,7 @@ TABCONTAINER_POPOVER_CANCEL_BUTTON=Cancel
 
 TABCONTAINER_SUBTABS_DESCRIPTION=Press down arrow key to open subitems menu
 
-TEXTAREA_CHARACTERS_LEFT={0} characters remaining
+TEXTAREA_CHARACTERS_LEFT={0} characters left
 
 TEXTAREA_CHARACTERS_EXCEEDED={0} characters over limit
 

package/src/i18n/messagebundle_en_US_sappsd.properties

@@ -390,7 +390,7 @@ TABCONTAINER_POPOVER_CANCEL_BUTTON=[[[Ĉąŋċēĺ∙∙∙∙∙∙∙∙]]]
 
 TABCONTAINER_SUBTABS_DESCRIPTION=[[[Ƥŗēşş ƌŏŵŋ ąŗŗŏŵ ķēŷ ţŏ ŏρēŋ şűƃįţēɱş ɱēŋű∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙]]]
 
-TEXTAREA_CHARACTERS_LEFT=[[[{0} ċĥąŗąċţēŗş ŗēɱąįŋįŋğ]]]
+TEXTAREA_CHARACTERS_LEFT=[[[{0} ċĥąŗąċţēŗş ĺēƒţ]]]
 
 TEXTAREA_CHARACTERS_EXCEEDED=[[[{0} ċĥąŗąċţēŗş ŏʋēŗ ĺįɱįţ]]]
 

package/src/i18n/messagebundle_en_US_saprigi.properties

@@ -390,7 +390,7 @@ TABCONTAINER_POPOVER_CANCEL_BUTTON=‌​‌‌‍‍‍‌‍‌‍‍
 
 TABCONTAINER_SUBTABS_DESCRIPTION=‍‌‍​‌​‍​​‍‌‌‍​‍​‍​‌‍‍‍‌​​‍‍‍‌‍‌​‍‌​‍‍​​‌Press down arrow key to open subitems menu
 
-TEXTAREA_CHARACTERS_LEFT=‌‌‌‌‍‌​​​‌​‌​‌‍‍‌‌‌​‌​‍‌‌​‌‍​​​‍‌‍‌​​‌‌​​​​​{0}‌‌‌ characters remaining
+TEXTAREA_CHARACTERS_LEFT=‌‌‌‌‍‌​​​‌​‌​‌‍‍‌‌‌​‌​‍‌‌​‌‍​​​‍‌‍‌​​‌‌​​​​​{0}‌‌‌ characters left
 
 TEXTAREA_CHARACTERS_EXCEEDED=‌​‍​​‌​​‌​​‌‍​‍‍‌‍‍​‌‍‍​​​​​‍‍‌​‌​​‍‌‍‌​​​{0}‌‌‌ characters over limit