@ui5/webcomponents 2.7.0-rc.0 → 2.7.0-rc.2

package/src/ColorPickerTemplate.tsx

@@ -2,6 +2,7 @@ import type ColorPicker from "./ColorPicker.js";
 import Label from "./Label.js";
 import Slider from "./Slider.js";
 import Input from "./Input.js";
+import Button from "./Button.js";
 
 export default function ColorPickerTemplate(this: ColorPicker) {
 	return (
@@ -46,7 +47,7 @@ export default function ColorPickerTemplate(this: ColorPicker) {
 						value={this._alpha}
 						accessibleName={this.alphaSliderLabel}
 						showTooltip={true}
-						onInput={this._handleAlphaInputFromSlider}
+						onInput={this._handleAlphaInput}
 					/>
 				}
 			</div>
@@ -57,7 +58,7 @@ export default function ColorPickerTemplate(this: ColorPicker) {
 					<span class="ui5-color-picker-color">
 						<div
 							class="ui5-color-picker-color-inner"
-							style={{ "background-color": `rgba(${this._value.r}, ${this._value.g}, ${this._value.b}, ${this._alpha})` }}
+							style={{ "background-color": this._colorValue.toRGBString() }}
 						></div>
 					</span>
 				</div>
@@ -66,7 +67,7 @@ export default function ColorPickerTemplate(this: ColorPicker) {
 					<Label>Hex</Label>
 					<Input
 						class="ui5-color-picker-hex-input"
-						value={this.hex}
+						value={this.HEX}
 						onKeyDown={this._onkeydown}
 						accessibleName={this.hexInputLabel}
 						onChange={this._handleHEXChange}
@@ -77,50 +78,49 @@ export default function ColorPickerTemplate(this: ColorPicker) {
 
 			{this._isDefaultPickerMode &&
 				<div
-					class="ui5-color-picker-rgb-wrapper"
-					onui5-change={this._handleRGBInputsChange}
+					class="ui5-color-channel-inputs-wrapper"
+					onui5-change={this._handleColorInputChange}
 				>
-					<div class="ui5-color-picker-rgb">
-						<Input
-							id="red"
-							class="ui5-color-picker-rgb-input"
-							disabled={this.inputsDisabled}
-							accessibleName={this.redInputLabel}
-							value={String(this._value.r)}
-						/>
-						<Label>R</Label>
-					</div>
-					<div class="ui5-color-picker-rgb">
-						<Input
-							id="green"
-							class="ui5-color-picker-rgb-input"
-							disabled={this.inputsDisabled}
-							accessibleName={this.greenInputLabel}
-							value={String(this._value.g)}
-						/>
-						<Label>G</Label>
-					</div>
-					<div class="ui5-color-picker-rgb">
-						<Input
-							id="blue"
-							class="ui5-color-picker-rgb-input"
-							disabled={this.inputsDisabled}
-							accessibleName={this.blueInputLabel}
-							value={String(this._value.b)}
-						/>
-						<Label>B</Label>
-					</div>
-					<div class="ui5-color-picker-rgb">
+					{this.colorChannelInputs.map(input =>
+						<><div class="ui5-color-channel">
+							<Input
+								id={input.id}
+								class="ui5-color-channel-input"
+								disabled={this.inputsDisabled}
+								accessibleName={input.accessibleName}
+								value={String(input.value)} />
+							<Label>{input.label}</Label>
+						</div>
+						<div class="ui5-color-channel-percentage-label">
+							{input.showPercentSymbol &&
+								<Label>%</Label>
+							}
+						</div></>
+					)}
+
+					<div class="ui5-color-channel">
 						<Input
 							id="alpha"
 							disabled={this.inputsDisabled}
-							class="ui5-color-picker-rgb-input"
+							class="ui5-color-channel-input"
 							value={String(this._alpha)}
 							accessibleName={this.alphaInputLabel}
 							onChange={this._handleAlphaChange}
+							onInput={this._handleAlphaInput}
 						/>
 						<Label>A</Label>
 					</div>
+
+					<div>
+						<Button
+							class="ui5-color-channel-toggle"
+							id="toggle-picker-mode"
+							icon="expand"
+							design="Transparent"
+							tooltip={this.toggleModeTooltip}
+							onClick={this._togglePickerMode}
+						/>
+					</div>
 				</div>
 			}
 		</section>

package/src/SelectPopoverTemplate.tsx

@@ -43,7 +43,7 @@ export default function SelectPopoverTemplate(this: Select) {
 									"ui5-select-value-state-dialog-header": true,
 									...this.classes.popoverValueState
 								}}>
-									{valueStateMessage.call(this)}
+									{this._isPickerOpen && valueStateMessage.call(this)}
 								</div>
 							}
 						</div>
@@ -56,7 +56,7 @@ export default function SelectPopoverTemplate(this: Select) {
 							<Icon
 								class="ui5-input-value-state-message-icon"
 								name={this._valueStateMessageInputIcon} />
-							{valueStateMessage.call(this)}
+							{this._isPickerOpen && valueStateMessage.call(this)}
 						</div>
 					}
 

package/src/TagTemplate.tsx

@@ -12,11 +12,12 @@ export default function TagTemplate(this: Tag) {
 						aria-roledescription={this._roleDescription}
 						aria-description={this._valueState}
 						onClick={this._onclick}
+						part="root"
 					>
 						{ content.call(this) }
 					</button>
 					:
-					<div class="ui5-tag-root" title={this._title}>
+					<div class="ui5-tag-root" title={this._title} part="root">
 						{ content.call(this) }
 					</div>
 			}

package/src/TimePickerClockTemplate.tsx

@@ -9,66 +9,65 @@ export default function TimePickerClockTemplate(this: TimePickerClock) {
 			aria-hidden="true"
 			class={{
 				"ui5-tp-clock": true,
-				"ui5-tp-clock-inner": this.showInnerCircle,
 				"ui5-tp-clock-active": this.active,
 			}}
 		>
 
 			<div data-label={this.label} class="ui5-tp-clock-dial"></div>
 
-			<div>
+			<div class="ui5-tp-clock-items">
 				{this._items.map((item, i) => (
-					<div class="ui5-tp-clock-item" style={{ transform: `translate(-50%) rotate(${(i + 1) * 6}deg` }}>
-						{
-							item.item &&
-						<>
-							<span class="ui5-tp-clock-dot"></span>
-							<span id={`${this._id}-${item.item}`}
-								class="ui5-tp-clock-number"
-								style={{ transform: `rotate(-${(i + 1) * 6}deg)` }}
-							>
-								{item.item}
-							</span>
-							{
-								item.innerItem &&
-									<span
-										id={`${this._id}-${item.innerItem}`}
-										class="ui5-tp-clock-number"
-										style={{ transform: `rotate(-${(i + 1) * 6}deg)` }}
-									>
-										{item.innerItem}
-									</span>
-							}
-						</>
-						}
-
-						{ !item.item && !this.hideFractions
-						&& <span class="ui5-tp-clock-mid-dot"></span>
+					<div class="ui5-tp-clock-item" style={{ transform: `translate(-50%) rotate(${(i + 1) * this._angleStep}deg` }}>
+						{ item.item ?
+							<>
+								<span class="ui5-tp-clock-dot"></span>
+								<span id={`${this._id}-${item.item}`}
+									class="ui5-tp-clock-number"
+									style={{ transform: `rotate(-${(i + 1) * this._angleStep}deg)` }}
+								>
+									{item.item}
+								</span>
+							</>
+							:
+							<span class="ui5-tp-clock-mid-dot"></span>
 						}
 					</div>
 				))}
+			</div>
 
+			<div class="ui5-tp-clock-markers">
 				{this._selectedItem.showMarker &&
 				<div
-					class="ui5-tp-clock-item ui5-tp-clock-item-with-marker"
+					class="ui5-tp-clock-item"
 					style={{ transform: `translate(-50%) rotate(${this._selectedItem.angle || 0}deg)` }}
 				>
-					<div class="ui5-tp-clock-marker"></div>
+					<div class="ui5-tp-clock-select-marker"></div>
 					<div
 						class={this._selectedItem.itemClasses}
 						style={{ transform: `rotate(-${this._selectedItem.angle || 0}deg)` }}
 					>{this._selectedItem.item}</div>
+				</div>
+				}
 
-					<div id={`${this._id}-selected`}
-						class={this._selectedItem.innerItemClasses}
-						style={{ transform: `rotate(-${this._selectedItem.angle || 0}deg)` }}
-					>{this._selectedItem.innerItem}</div>
+				{this._hoveredItem.showMarker &&
+				<div
+					class="ui5-tp-clock-item"
+					style={{ transform: `translate(-50%) rotate(${this._hoveredItem.angle || 0}deg)` }}
+				>
+					<div class="ui5-tp-clock-hover-marker"></div>
+					<div
+						class={this._hoveredItem.itemClasses}
+						style={{ transform: `rotate(-${this._hoveredItem.angle || 0}deg)` }}
+					>{this._hoveredItem.item}</div>
 				</div>
 				}
 			</div>
 
 			<div
-				class="ui5-tp-clock-cover"
+				class={{
+					"ui5-tp-clock-cover": true,
+					"ui5-tp-clock-pointer": this._hoveredItem.showMarker,
+				}}
 				onTouchStart={this._onTouchStart}
 				onTouchMove={this._onTouchMove}
 				onTouchEnd={this._onTouchEnd}
@@ -76,7 +75,7 @@ export default function TimePickerClockTemplate(this: TimePickerClock) {
 				onMouseMove={this._onTouchMove}
 				onMouseUp={this._onTouchEnd}
 				onMouseOut={this._onMouseOut}
-				ref={this._captureClockRef.bind(this)}
+				onWheel={this._onMouseWheel}
 			></div>
 		</div>);
 }

package/src/TimePickerPopoverTemplate.tsx

@@ -1,9 +1,15 @@
 import type TimePicker from "./TimePicker.js";
 import Button from "./Button.js";
 import Popover from "./Popover.js";
+import Icon from "./Icon.js";
 import ResponsivePopover from "./ResponsivePopover.js";
 import TimeSelectionClocks from "./TimeSelectionClocks.js";
 import TimeSelectionInputs from "./TimeSelectionInputs.js";
+import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
+import error from "@ui5/webcomponents-icons/dist/error.js";
+import alert from "@ui5/webcomponents-icons/dist/alert.js";
+import sysEnter2 from "@ui5/webcomponents-icons/dist/sys-enter-2.js";
+import information from "@ui5/webcomponents-icons/dist/information.js";
 
 export default function TimePickerPopoverTemplate(this: TimePicker) {
 	return (
@@ -16,14 +22,17 @@ export default function TimePickerPopoverTemplate(this: TimePicker) {
 				opener={this}
 				open={this.open}
 				allowTargetOverlap={true}
-				_hideHeader={true}
+				_hideHeader={!this.hasValueStateText}
 				hideArrow={true}
 				accessibleName={this.pickerAccessibleName}
 				onClose={this.onResponsivePopoverAfterClose}
+				onBeforeOpen={this.onResponsivePopoverBeforeOpen}
 				onOpen={this.onResponsivePopoverAfterOpen}
 				onWheel={this._handleWheel}
 				onKeyDown={this._onkeydown}
 			>
+				{this.hasValueStateText && valueStateTextHeader.call(this)}
+
 				<TimeSelectionClocks
 					id={`${this._id}-time-sel`}
 					value={this._timeSelectionValue}
@@ -52,6 +61,8 @@ export default function TimePickerPopoverTemplate(this: TimePicker) {
 					onWheel={this._handleWheel}
 					onKeyDown={this._onkeydown}
 				>
+					{this.hasValueStateText && valueStateTextHeader.call(this, { "width": "100%" }) }
+
 					<div class="popover-content">
 						<TimeSelectionInputs
 							id={`${this._id}-time-sel-inputs`}
@@ -71,3 +82,40 @@ export default function TimePickerPopoverTemplate(this: TimePicker) {
 		</>
 	);
 }
+
+function valueStateMessage(this: TimePicker) {
+	return (
+		this.shouldDisplayDefaultValueStateMessage ? this.valueStateDefaultText : <slot name="valueStateMessage"></slot>
+	);
+}
+
+function valueStateTextHeader(this: TimePicker, style?: Record<string, string>) {
+	if (!this.hasValueStateText) {
+		return;
+	}
+
+	return (
+		<div
+			slot="header"
+			class={{
+				"ui5-popover-header": true,
+				...this.classes.popoverValueState,
+			}}
+			style={style}
+		>
+			<Icon class="ui5-input-value-state-message-icon" name={valueStateMessageInputIcon.call(this)}/>
+			{ valueStateMessage.call(this) }
+		</div>
+	);
+}
+
+function valueStateMessageInputIcon(this: TimePicker) {
+	const iconPerValueState = {
+		Negative: error,
+		Critical: alert,
+		Positive: sysEnter2,
+		Information: information,
+	};
+
+	return this.valueState !== ValueState.None ? iconPerValueState[this.valueState] : "";
+}

package/src/TimePickerTemplate.tsx

@@ -1,13 +1,14 @@
 import type TimePicker from "./TimePicker.js";
 import Icon from "./Icon.js";
-import Input from "./Input.js";
+import DateTimeInput from "./DateTimeInput.js";
 import TimePickerPopoverTemplate from "./TimePickerPopoverTemplate.js";
+import timeEntryRequest from "@ui5/webcomponents-icons/dist/time-entry-request.js";
 
 export default function TimePickerTemplate(this: TimePicker) {
 	return (
 		<>
 			<div id={this._id} class="ui5-time-picker-root">
-				<Input
+				<DateTimeInput
 					data-sap-focus-ref
 					id={`${this._id}-inner`}
 					class="ui5-time-picker-input"
@@ -17,6 +18,7 @@ export default function TimePickerTemplate(this: TimePicker) {
 					readonly={this.readonly}
 					required={this.required}
 					valueState={this.valueState}
+					_shouldOpenValueStatePopover={!this.open}
 					_inputAccInfo={this.accInfo}
 					onClick={this._handleInputClick}
 					onChange={this._handleInputChange}
@@ -24,7 +26,7 @@ export default function TimePickerTemplate(this: TimePicker) {
 					onFocusIn={this._onfocusin}
 					onKeyDown={this._onkeydown}
 				>
-					{this.valueStateMessage.length > 0 &&
+					{this.valueStateMessage.length > 0 && !this.open &&
 						<slot
 							name="valueStateMessage"
 							slot="valueStateMessage"
@@ -34,7 +36,7 @@ export default function TimePickerTemplate(this: TimePicker) {
 					{!this.readonly &&
 						<Icon
 							slot="icon"
-							name={this.openIconName}
+							name={timeEntryRequest}
 							tabindex={-1}
 							showTooltip={true}
 							onClick={this._togglePicker}
@@ -45,7 +47,7 @@ export default function TimePickerTemplate(this: TimePicker) {
 							}}
 						/>
 					}
-				</Input>
+				</DateTimeInput>
 			</div>
 
 			{ TimePickerPopoverTemplate.call(this) }

package/src/TimeSelectionClocksTemplate.tsx

@@ -66,8 +66,9 @@ export default function TimeSelectionClocksTemplate(this: TimeSelectionClocks) {
 						displayStep={entity.displayStep}
 						valueStep={entity.attributes && entity.attributes.step}
 						lastItemReplacement={entity.lastItemReplacement}
-						showInnerCircle={entity.showInnerCircle}
+						hideFractions={entity.hideFractions}
 						prependZero={entity.prependZero}
+						_skipAnimation={entity.skipAnimation}
 						onChange={this._clockChange}
 					>
 					</TimePickerClock>

package/src/ToolbarButtonTemplate.tsx

@@ -21,6 +21,7 @@ export default function ToolbarButtonTemplate(this: ToolbarButton) {
 			hidden={this.hidden}
 			data-ui5-external-action-item-id={this._id}
 			data-ui5-stable={this.stableDomRef}
+			onClick={(...args) => this.onClick(...args)}
 		>
 			{this.text}
 		</Button>

package/src/ToolbarPopoverButtonTemplate.tsx

@@ -16,6 +16,7 @@ export default function ToolbarPopoverButtonTemplate(this: ToolbarButton) {
 			class="ui5-tb-popover-button ui5-tb-popover-item"
 			data-ui5-external-action-item-id={this._id}
 			data-ui5-stable={this.stableDomRef}
+			onClick={(...args) => this.onClick(...args)}
 		>
 			{this.text}
 		</Button>

package/src/ToolbarPopoverSelectTemplate.tsx

@@ -11,6 +11,10 @@ export default function ToolbarPopoverSelectTemplate(this: ToolbarSelect) {
 			disabled={this.disabled}
 			accessibleName={this.accessibleName}
 			accessibleNameRef={this.accessibleNameRef}
+			onClick={(...args) => this.onClick(...args)}
+			onClose={(...args) => this.onClose(...args)}
+			onOpen={(...args) => this.onOpen(...args)}
+			onChange={(...args) => this.onChange(...args)}
 		>
 			{this.options.map((option, index) => (
 				<Option

package/src/ToolbarSelectTemplate.tsx

@@ -12,6 +12,10 @@ export default function ToolbarSelectTemplate(this: ToolbarSelect) {
 			disabled={this.disabled}
 			accessibleName={this.accessibleName}
 			accessibleNameRef={this.accessibleNameRef}
+			onClick={(...args) => this.onClick(...args)}
+			onClose={(...args) => this.onClose(...args)}
+			onOpen={(...args) => this.onOpen(...args)}
+			onChange={(...args) => this.onChange(...args)}
 		>
 			{this.options.map((option, index) => (
 				<Option

package/src/ToolbarTemplate.tsx

@@ -21,6 +21,7 @@ export default function ToolbarTemplate(this: Toolbar) {
 				aria-hidden={this.hideOverflowButton}
 				icon={overflowIcon}
 				design="Transparent"
+				onClick={this.toggleOverflow}
 				class={{
 					"ui5-tb-item": true,
 					"ui5-tb-overflow-btn": true,

package/src/features/ColorPaletteMoreColorsTemplate.tsx

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

package/src/i18n/messagebundle.properties

@@ -127,24 +127,36 @@ COLOR_PALETTE_MORE_COLORS_TEXT=More Colors...
 #XTIT: Color Palette dialog button text to set the default color
 COLOR_PALETTE_DEFAULT_COLOR_TEXT=Default Color
 
-#XACT: Aria information for the ColorPicker Alpha slider
+#XACT: ARIA information for the ColorPicker Alpha slider
 COLORPICKER_ALPHA_SLIDER=Alpha control
 
-#XACT: Aria information for the ColorPicker Hue slider
+#XACT: ARIA information for the ColorPicker Hue slider
 COLORPICKER_HUE_SLIDER=Hue control
 
 #XTOL: Six symbol hexadecimal group representing CSS color hex string
 COLORPICKER_HEX=Hexadecimal
 
-#XTOL: Red color for the ColorPicker control
+#XFLD: Label text for the ColorPicker Red input field
 COLORPICKER_RED=Red
 
-#XTOL: Green color for the ColorPicker control
+#XFLD: Label text for the ColorPicker Green input field
 COLORPICKER_GREEN=Green
 
-#XTOL: Blue color for the ColorPicker control
+#XFLD: Label text for the ColorPicker Blue input field
 COLORPICKER_BLUE=Blue
 
+#XFLD: Label text for the ColorPicker Hue input field
+COLORPICKER_HUE=Hue
+
+#XFLD: Label text for the ColorPicker Saturation input field
+COLORPICKER_SATURATION=Saturation
+
+#XFLD: Label text for the ColorPicker Light input field
+COLORPICKER_LIGHT=Light
+
+#XTOL: Tooltip for color picker mode toggle button
+COLORPICKER_TOGGLE_MODE_TOOLTIP=Change Color Mode
+
 #XTOL: Alpha chanel transparency value for RGBA color mode
 COLORPICKER_ALPHA=Alpha
 
@@ -564,9 +576,6 @@ MENU_CLOSE_BUTTON_ARIA_LABEL=Decline
 #XACT: ARIA information for the Menu popover
 MENU_POPOVER_ACCESSIBLE_NAME=Select an option from the menu
 
-#XTXT: Text for the Navigation Menu Popover hidden text
-NAVIGATION_MENU_POPOVER_HIDDEN_TEXT=Navigation
-
 #XACT: ARIA announcement for roldesecription attribute of Dialog header
 DIALOG_HEADER_ARIA_ROLE_DESCRIPTION=Interactive Header
 

package/src/i18n/messagebundle_ar.properties

@@ -95,6 +95,14 @@ COLORPICKER_GREEN=أخضر
 
 COLORPICKER_BLUE=أزرق
 
+COLORPICKER_HUE=تدرج اللون
+
+COLORPICKER_SATURATION=تشبع
+
+COLORPICKER_LIGHT=فاتح
+
+COLORPICKER_TOGGLE_MODE_TOOLTIP=تغيير نمط اللون
+
 COLORPICKER_ALPHA=ألفا
 
 DATEPICKER_OPEN_ICON_TITLE=فتح أداة الانتقاء
@@ -404,4 +412,6 @@ TABLE_ROW_SELECTOR=مُحدِّد أولي
 TABLE_NO_DATA=لا توجد بيانات
 TABLE_ROW_POPIN=منطقة إدخال الصف
 TABLE_MORE=المزيد
-TABLE_MORE_DESCRIPTION=حمِّل المزيد من الصفوف بالضغط على Enter أو Space
+TABLE_MORE_DESCRIPTION=لتحميل المزيد من الصفوف، اضغط على Enter أو Space
+TABLE_ROW_ACTIONS=إجراءات الصف
+TABLE_NAVIGATION=تنقل

package/src/i18n/messagebundle_bg.properties

@@ -95,6 +95,14 @@ COLORPICKER_GREEN=Зелен
 
 COLORPICKER_BLUE=Син
 
+COLORPICKER_HUE=Нюанс
+
+COLORPICKER_SATURATION=Наситеност
+
+COLORPICKER_LIGHT=Светло
+
+COLORPICKER_TOGGLE_MODE_TOOLTIP=Превключване на режим за цвят
+
 COLORPICKER_ALPHA=Алфа
 
 DATEPICKER_OPEN_ICON_TITLE=Отваряне на средство за избор
@@ -404,4 +412,6 @@ TABLE_ROW_SELECTOR=Селектор на редове
 TABLE_NO_DATA=Няма данни
 TABLE_ROW_POPIN=Ред за вмъкнат диалогов прозорец
 TABLE_MORE=Още
-TABLE_MORE_DESCRIPTION=За зареждане на още редове, натиснете „Enter” или „Интервал”
+TABLE_MORE_DESCRIPTION=За да се заредят още редове, натиснете Enter или интервал
+TABLE_ROW_ACTIONS=Действия за реда
+TABLE_NAVIGATION=Навигация

package/src/i18n/messagebundle_ca.properties

@@ -95,6 +95,14 @@ COLORPICKER_GREEN=Verd
 
 COLORPICKER_BLUE=Blau
 
+COLORPICKER_HUE=Tonalitat
+
+COLORPICKER_SATURATION=Saturació
+
+COLORPICKER_LIGHT=Clar
+
+COLORPICKER_TOGGLE_MODE_TOOLTIP=Modificar mode de color
+
 COLORPICKER_ALPHA=Alfa
 
 DATEPICKER_OPEN_ICON_TITLE=Obrir selector
@@ -404,4 +412,6 @@ TABLE_ROW_SELECTOR=Selector de fila
 TABLE_NO_DATA=No hi ha dades
 TABLE_ROW_POPIN=Finestra de diàleg de línia
 TABLE_MORE=Més
-TABLE_MORE_DESCRIPTION=Carregueu més files prement Retorn o Espai
+TABLE_MORE_DESCRIPTION=Per carregar més files, premeu Retorn o Espai
+TABLE_ROW_ACTIONS=Accions de fila
+TABLE_NAVIGATION=Navegació

package/src/i18n/messagebundle_cnr.properties

@@ -95,6 +95,14 @@ COLORPICKER_GREEN=Zelena
 
 COLORPICKER_BLUE=Plava
 
+COLORPICKER_HUE=Nijansa
+
+COLORPICKER_SATURATION=Zasićenje
+
+COLORPICKER_LIGHT=Svijetlo
+
+COLORPICKER_TOGGLE_MODE_TOOLTIP=Promijeni način boje
+
 COLORPICKER_ALPHA=Alfa
 
 DATEPICKER_OPEN_ICON_TITLE=Otvori alat za odabir
@@ -404,4 +412,6 @@ TABLE_ROW_SELECTOR=Selektor reda
 TABLE_NO_DATA=Nema podataka
 TABLE_ROW_POPIN=Popin reda
 TABLE_MORE=Više
-TABLE_MORE_DESCRIPTION=Učitajte više redova pritiskom na Enter ili razmak
+TABLE_MORE_DESCRIPTION=Da biste učitali više redova, pritisnite Enter ili razmak
+TABLE_ROW_ACTIONS=Radnje reda
+TABLE_NAVIGATION=Usmjeravanje

package/src/i18n/messagebundle_cs.properties

@@ -95,6 +95,14 @@ COLORPICKER_GREEN=Zelená
 
 COLORPICKER_BLUE=Modrá
 
+COLORPICKER_HUE=Barevný odstín
+
+COLORPICKER_SATURATION=Sytost
+
+COLORPICKER_LIGHT=Světlá
+
+COLORPICKER_TOGGLE_MODE_TOOLTIP=Změnit režim barev
+
 COLORPICKER_ALPHA=Alfa
 
 DATEPICKER_OPEN_ICON_TITLE=Otevřít výběr
@@ -405,3 +413,5 @@ TABLE_NO_DATA=Žádná data
 TABLE_ROW_POPIN=Řádka popin
 TABLE_MORE=Více
 TABLE_MORE_DESCRIPTION=Další řádky načtete stisknutím Enter nebo mezerníku
+TABLE_ROW_ACTIONS=Akce řádky
+TABLE_NAVIGATION=Navigace

package/src/i18n/messagebundle_cy.properties

@@ -95,6 +95,14 @@ COLORPICKER_GREEN=Gwyrdd
 
 COLORPICKER_BLUE=Glas
 
+COLORPICKER_HUE=Arlliw
+
+COLORPICKER_SATURATION=Dirlawnder
+
+COLORPICKER_LIGHT=Golau
+
+COLORPICKER_TOGGLE_MODE_TOOLTIP=Newid Modd Lliwiau
+
 COLORPICKER_ALPHA=Alpha
 
 DATEPICKER_OPEN_ICON_TITLE=Agor Dewiswr
@@ -404,4 +412,6 @@ TABLE_ROW_SELECTOR=Dewisydd Rhes
 TABLE_NO_DATA=Dim Data
 TABLE_ROW_POPIN=Popin Rhes
 TABLE_MORE=Mwy
-TABLE_MORE_DESCRIPTION=Llwytho mwy o resi drwy bwyso''r Bylchwr neu Enter 
+TABLE_MORE_DESCRIPTION=Llwytho mwy o resi drwy bwyso''r botwm ''Enter'' neu ''Space''
+TABLE_ROW_ACTIONS=Camau Gweithredu Rhes
+TABLE_NAVIGATION=Llywio