@ui5/webcomponents 1.3.1 → 1.4.0

package/dist/i18n/messagebundle_sl.properties

@@ -59,6 +59,20 @@ COLOR_PALETTE_DIALOG_TITLE=Sprememba barve
 
 COLOR_PALETTE_MORE_COLORS_TEXT=Več barv ...
 
+COLORPICKER_ALPHA_SLIDER=Alpha control
+
+COLORPICKER_HUE_SLIDER=Hue control
+
+COLORPICKER_HEX=Hexadecimal
+
+COLORPICKER_RED=Red
+
+COLORPICKER_GREEN=Green
+
+COLORPICKER_BLUE=Blue
+
+COLORPICKER_ALPHA=Alpha
+
 DATEPICKER_OPEN_ICON_TITLE=Odpiranje izbirnika
 
 DATEPICKER_DATE_DESCRIPTION=Vnos datuma
@@ -151,10 +165,6 @@ SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION=Segmentiran gumb
 
 SLIDER_ARIA_DESCRIPTION=Ročica drsnika
 
-SWITCH_ON=Vključitev
-
-SWITCH_OFF=Izključitev
-
 LOAD_MORE_TEXT=Več
 
 TABLE_HEADER_ROW_TEXT=Vrstica glave
@@ -245,3 +255,6 @@ SPLIT_BUTTON_DESCRIPTION=Razdelilni gumb
 
 SPLIT_BUTTON_KEYBOARD_HINT=Pritisnite preslednico ali Enter, da sprožite privzeto akcijo, in Alt + puščica dol ali F4, da sprožite akcijo
 
+MENU_BACK_BUTTON_ARIA_LABEL=Nazaj
+
+MENU_CLOSE_BUTTON_ARIA_LABEL=Zavrni

package/dist/i18n/messagebundle_sv.properties

@@ -59,6 +59,20 @@ COLOR_PALETTE_DIALOG_TITLE=Byt färg
 
 COLOR_PALETTE_MORE_COLORS_TEXT=Flera färger...
 
+COLORPICKER_ALPHA_SLIDER=Alpha control
+
+COLORPICKER_HUE_SLIDER=Hue control
+
+COLORPICKER_HEX=Hexadecimal
+
+COLORPICKER_RED=Red
+
+COLORPICKER_GREEN=Green
+
+COLORPICKER_BLUE=Blue
+
+COLORPICKER_ALPHA=Alpha
+
 DATEPICKER_OPEN_ICON_TITLE=Öppna urval
 
 DATEPICKER_DATE_DESCRIPTION=Datuminmatning
@@ -151,10 +165,6 @@ SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION=Segmenterad knapp
 
 SLIDER_ARIA_DESCRIPTION=Skjutreglagehandtag
 
-SWITCH_ON=På
-
-SWITCH_OFF=Av
-
 LOAD_MORE_TEXT=Mer
 
 TABLE_HEADER_ROW_TEXT=Huvud
@@ -245,3 +255,6 @@ SPLIT_BUTTON_DESCRIPTION=Delningsknapp
 
 SPLIT_BUTTON_KEYBOARD_HINT=Tryck på blanktecken eller Retur för att initiera standardåtgärd och på Alt + nedåtpil eller F4 för att initiera pilåtgärd
 
+MENU_BACK_BUTTON_ARIA_LABEL=Tillbaka
+
+MENU_CLOSE_BUTTON_ARIA_LABEL=Avvisa

package/dist/i18n/messagebundle_th.properties

@@ -59,6 +59,20 @@ COLOR_PALETTE_DIALOG_TITLE=เปลี่ยนสี
 
 COLOR_PALETTE_MORE_COLORS_TEXT=สีเพิ่มเติม...
 
+COLORPICKER_ALPHA_SLIDER=Alpha control
+
+COLORPICKER_HUE_SLIDER=Hue control
+
+COLORPICKER_HEX=Hexadecimal
+
+COLORPICKER_RED=Red
+
+COLORPICKER_GREEN=Green
+
+COLORPICKER_BLUE=Blue
+
+COLORPICKER_ALPHA=Alpha
+
 DATEPICKER_OPEN_ICON_TITLE=เปิดตัวเลือก
 
 DATEPICKER_DATE_DESCRIPTION=การป้อนข้อมูลวันที่
@@ -151,10 +165,6 @@ SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION=ปุ่มที่มีการแบ
 
 SLIDER_ARIA_DESCRIPTION=ตัวจัดการแถบเลื่อน
 
-SWITCH_ON=เปิด
-
-SWITCH_OFF=ปิด
-
 LOAD_MORE_TEXT=เพิ่มเติม
 
 TABLE_HEADER_ROW_TEXT=แถวส่วนหัว
@@ -245,3 +255,6 @@ SPLIT_BUTTON_DESCRIPTION=ปุ่ม 'แยก'
 
 SPLIT_BUTTON_KEYBOARD_HINT=กด Space หรือ Enter เพื่อทริกเกอร์การดำเนินการตั้งต้นแล้วกด Alt + ลูกศรลง หรือ F4 เพื่อทริกเกอร์การดำเนินการของลูกศร
 
+MENU_BACK_BUTTON_ARIA_LABEL=ย้อนกลับ
+
+MENU_CLOSE_BUTTON_ARIA_LABEL=ปฏิเสธ

package/dist/i18n/messagebundle_tr.properties

@@ -59,6 +59,20 @@ COLOR_PALETTE_DIALOG_TITLE=Rengi değiştir
 
 COLOR_PALETTE_MORE_COLORS_TEXT=Daha fazla renk...
 
+COLORPICKER_ALPHA_SLIDER=Alpha control
+
+COLORPICKER_HUE_SLIDER=Hue control
+
+COLORPICKER_HEX=Hexadecimal
+
+COLORPICKER_RED=Red
+
+COLORPICKER_GREEN=Green
+
+COLORPICKER_BLUE=Blue
+
+COLORPICKER_ALPHA=Alpha
+
 DATEPICKER_OPEN_ICON_TITLE=Seçiciyi aç
 
 DATEPICKER_DATE_DESCRIPTION=Tarih girişi
@@ -151,10 +165,6 @@ SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION=Segmentlere ayrılmış düğme
 
 SLIDER_ARIA_DESCRIPTION=Kaydırıcı tutamacı
 
-SWITCH_ON=Açık
-
-SWITCH_OFF=Kapalı
-
 LOAD_MORE_TEXT=Daha fazla
 
 TABLE_HEADER_ROW_TEXT=Başlık
@@ -245,3 +255,6 @@ SPLIT_BUTTON_DESCRIPTION=İki bölümlü düğme
 
 SPLIT_BUTTON_KEYBOARD_HINT=Varsayılan işlemi tetiklemek için boşluk tuşuna veya ok işlemini tetiklemek için Alt + Aşağı ok ya da F4 tuşlarına basın
 
+MENU_BACK_BUTTON_ARIA_LABEL=Geri
+
+MENU_CLOSE_BUTTON_ARIA_LABEL=Reddet

package/dist/i18n/messagebundle_uk.properties

@@ -59,6 +59,20 @@ COLOR_PALETTE_DIALOG_TITLE=Змінити колір
 
 COLOR_PALETTE_MORE_COLORS_TEXT=Більше кольорів...
 
+COLORPICKER_ALPHA_SLIDER=Alpha control
+
+COLORPICKER_HUE_SLIDER=Hue control
+
+COLORPICKER_HEX=Hexadecimal
+
+COLORPICKER_RED=Red
+
+COLORPICKER_GREEN=Green
+
+COLORPICKER_BLUE=Blue
+
+COLORPICKER_ALPHA=Alpha
+
 DATEPICKER_OPEN_ICON_TITLE=Відкрити комплектувальник
 
 DATEPICKER_DATE_DESCRIPTION=Введення дати
@@ -151,10 +165,6 @@ SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION=Сегментована кнопка
 
 SLIDER_ARIA_DESCRIPTION=Маркер повзунка
 
-SWITCH_ON=Увімк
-
-SWITCH_OFF=Вимк
-
 LOAD_MORE_TEXT=Більше
 
 TABLE_HEADER_ROW_TEXT=Рядок заголовка
@@ -245,3 +255,6 @@ SPLIT_BUTTON_DESCRIPTION=Кнопка розділення
 
 SPLIT_BUTTON_KEYBOARD_HINT=Натисніть клавішу пробілу або Enter для ініціювання усталеної операції, та Alt + стрілка вниз або F4 для ініціювання операції стрілки
 
+MENU_BACK_BUTTON_ARIA_LABEL=Назад
+
+MENU_CLOSE_BUTTON_ARIA_LABEL=Відхилити

package/dist/i18n/messagebundle_vi.properties

@@ -59,6 +59,20 @@ COLOR_PALETTE_DIALOG_TITLE=Thay đổi màu
 
 COLOR_PALETTE_MORE_COLORS_TEXT=Nhiều màu hơn...
 
+COLORPICKER_ALPHA_SLIDER=Alpha control
+
+COLORPICKER_HUE_SLIDER=Hue control
+
+COLORPICKER_HEX=Hexadecimal
+
+COLORPICKER_RED=Red
+
+COLORPICKER_GREEN=Green
+
+COLORPICKER_BLUE=Blue
+
+COLORPICKER_ALPHA=Alpha
+
 DATEPICKER_OPEN_ICON_TITLE=Mở trình chọn
 
 DATEPICKER_DATE_DESCRIPTION=Nhập ngày
@@ -151,10 +165,6 @@ SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION=Nút được phân đoạn
 
 SLIDER_ARIA_DESCRIPTION=Điều khiển thanh trượt
 
-SWITCH_ON=Bật
-
-SWITCH_OFF=Tắt
-
 LOAD_MORE_TEXT=Thêm
 
 TABLE_HEADER_ROW_TEXT=Hàng tiêu đề
@@ -245,3 +255,6 @@ SPLIT_BUTTON_DESCRIPTION=Nút phân chia
 
 SPLIT_BUTTON_KEYBOARD_HINT=Nhấn Phím cách hoặc Enter để kích hoạt thao tác mặc định và Alt + Mũi tên xuống hoặc F4 để kích hoạt thao tác mũi tên
 
+MENU_BACK_BUTTON_ARIA_LABEL=Quay lại
+
+MENU_CLOSE_BUTTON_ARIA_LABEL=Từ chối

package/dist/i18n/messagebundle_zh_CN.properties

@@ -59,6 +59,20 @@ COLOR_PALETTE_DIALOG_TITLE=更改颜色
 
 COLOR_PALETTE_MORE_COLORS_TEXT=更多颜色...
 
+COLORPICKER_ALPHA_SLIDER=Alpha control
+
+COLORPICKER_HUE_SLIDER=Hue control
+
+COLORPICKER_HEX=Hexadecimal
+
+COLORPICKER_RED=Red
+
+COLORPICKER_GREEN=Green
+
+COLORPICKER_BLUE=Blue
+
+COLORPICKER_ALPHA=Alpha
+
 DATEPICKER_OPEN_ICON_TITLE=打开选取器
 
 DATEPICKER_DATE_DESCRIPTION=日期输入
@@ -151,10 +165,6 @@ SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION=分段式按钮
 
 SLIDER_ARIA_DESCRIPTION=滑块手柄
 
-SWITCH_ON=开
-
-SWITCH_OFF=关
-
 LOAD_MORE_TEXT=更多
 
 TABLE_HEADER_ROW_TEXT=抬头行
@@ -245,3 +255,6 @@ SPLIT_BUTTON_DESCRIPTION=拆分按钮
 
 SPLIT_BUTTON_KEYBOARD_HINT=按空格键或 Enter 触发缺省操作，按 Alt + 向下箭头或 F4 触发箭头操作
 
+MENU_BACK_BUTTON_ARIA_LABEL=返回
+
+MENU_CLOSE_BUTTON_ARIA_LABEL=拒绝

package/dist/i18n/messagebundle_zh_TW.properties

@@ -59,6 +59,20 @@ COLOR_PALETTE_DIALOG_TITLE=更改色彩
 
 COLOR_PALETTE_MORE_COLORS_TEXT=更多色彩...
 
+COLORPICKER_ALPHA_SLIDER=Alpha control
+
+COLORPICKER_HUE_SLIDER=Hue control
+
+COLORPICKER_HEX=Hexadecimal
+
+COLORPICKER_RED=Red
+
+COLORPICKER_GREEN=Green
+
+COLORPICKER_BLUE=Blue
+
+COLORPICKER_ALPHA=Alpha
+
 DATEPICKER_OPEN_ICON_TITLE=開啟選擇器
 
 DATEPICKER_DATE_DESCRIPTION=日期輸入
@@ -151,10 +165,6 @@ SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION=區段按鈕
 
 SLIDER_ARIA_DESCRIPTION=滑桿控點
 
-SWITCH_ON=開啟
-
-SWITCH_OFF=關閉
-
 LOAD_MORE_TEXT=較多
 
 TABLE_HEADER_ROW_TEXT=表頭列
@@ -245,3 +255,6 @@ SPLIT_BUTTON_DESCRIPTION=分割按鈕
 
 SPLIT_BUTTON_KEYBOARD_HINT=按下空格鍵或 Enter 以驅動預設動作，以及 Alt + 向下箭頭或 F4 以驅動箭頭動作
 
+MENU_BACK_BUTTON_ARIA_LABEL=返回
+
+MENU_CLOSE_BUTTON_ARIA_LABEL=拒絕

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -40,13 +40,13 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "1.3.1",
-    "@ui5/webcomponents-icons": "1.3.1",
-    "@ui5/webcomponents-localization": "1.3.1",
-    "@ui5/webcomponents-theming": "1.3.1"
+    "@ui5/webcomponents-base": "1.4.0",
+    "@ui5/webcomponents-icons": "1.4.0",
+    "@ui5/webcomponents-localization": "1.4.0",
+    "@ui5/webcomponents-theming": "1.4.0"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "1.3.1",
-    "chromedriver": "100.0.0"
+    "@ui5/webcomponents-tools": "1.4.0",
+    "chromedriver": "101.0.0"
   }
 }

package/src/Badge.hbs

@@ -1,8 +1,4 @@
-<div
-	class="ui5-badge-root"
-	@mousedown="{{_onmousedown}}"
-	@mouseup="{{_onmouseup}}"
->
+<div class="ui5-badge-root">
 	<slot name="icon"></slot>
 
 	{{#if hasText}}

package/src/Badge.js

@@ -48,13 +48,6 @@ const metadata = {
 		_iconOnly: {
 			type: Boolean,
 		},
-
-		/**
-		 * Defines whether the component is pressed.
-		 */
-		active: {
-			type: Boolean,
-		},
 	},
 	managedSlots: true,
 	slots: /** @lends sap.ui.webcomponents.main.Badge.prototype */ {
@@ -135,14 +128,6 @@ class Badge extends UI5Element {
 		this._iconOnly = this.iconOnly;
 	}
 
-	_onmousedown() {
-		this.active = true;
-	}
-
-	_onmouseup() {
-		this.active = false;
-	}
-
 	get hasText() {
 		return !!this.textContent.trim().length;
 	}

package/src/Breadcrumbs.hbs

@@ -33,9 +33,8 @@
 
         {{#if _endsWithCurrentLocationLabel}}
         <li class="ui5-breadcrumbs-current-location" @click="{{../_onLabelPress}}">
-            <span aria-label="{{_currentLocationAccName}}" role="link" id="{{this._id}}-labelWrapper">
-                <ui5-label
-                    aria-current="page">
+            <span aria-current="page" aria-label="{{_currentLocationAccName}}" role="link" id="{{this._id}}-labelWrapper">
+                <ui5-label>
                     {{_currentLocationText}}
                 </ui5-label>
             </span>

package/src/Button.js

@@ -357,15 +357,17 @@ class Button extends UI5Element {
 			isGlobalHandlerAttached = true;
 		}
 
+		const handleTouchStartEvent = event => {
+			event.isMarked = "button";
+			if (this.nonInteractive) {
+				return;
+			}
+
+			this.active = true;
+		};
+
 		this._ontouchstart = {
-			handleEvent(event) {
-				event.isMarked = "button";
-				if (this.nonInteractive) {
-					return;
-				}
-
-				this.active = true;
-			},
+			handleEvent: handleTouchStartEvent,
 			passive: true,
 		};
 	}

package/src/Calendar.js

@@ -290,7 +290,7 @@ class Calendar extends CalendarPart {
 
 		const yearFormat = DateFormat.getDateInstance({ format: "y", calendarType: this.primaryCalendarType });
 		const localeData = getCachedLocaleDataInstance(getLocale());
-		this._headerMonthButtonText = localeData.getMonths("wide", this.primaryCalendarType)[this._calendarDate.getMonth()];
+		this._headerMonthButtonText = localeData.getMonthsStandAlone("wide", this.primaryCalendarType)[this._calendarDate.getMonth()];
 
 		if (this._currentPicker === "year") {
 			const rangeStart = new CalendarDate(this._calendarDate, this._primaryCalendarType);

package/src/ColorPaletteDialog.hbs

@@ -7,7 +7,7 @@
 
     <div slot="footer" class="ui5-cp-dialog-footer">
         <ui5-button
-            design="Transparent"
+            design="Emphasized"
             @click="{{_chooseCustomColor}}"
         >{{moreColorsFeature.colorPaletteDialogOKButton}}</ui5-button>
         <ui5-button

package/src/ColorPicker.hbs

@@ -20,6 +20,7 @@
             min="0"
             max="1530"
             value="{{_hue}}"
+            accessible-name="{{hueSliderLabel}}"
             @ui5-input="{{_handleHueInput}}"
         ></ui5-slider>
         <ui5-slider
@@ -29,6 +30,7 @@
             max="1"
             step="0.01"
             value="{{_alpha}}"
+            accessible-name="{{alphaSliderLabel}}"
             @ui5-input="{{_handleAlphaInput}}"
         ></ui5-slider>
     </div>
@@ -47,6 +49,7 @@
                 class="ui5-color-picker-hex-input"
                 value="{{hex}}"
                 @keydown="{{_onkeydown}}"
+                accessible-name="{{hexInputLabel}}"
                 @ui5-change="{{_handleHEXChange}}"
                 value-state="{{hexInputErrorState}}"
             ></ui5-input>
@@ -62,6 +65,7 @@
                 id="red"
                 class="ui5-color-picker-rgb-input"
                 disabled="{{inputsDisabled}}"
+                accessible-name="{{redInputLabel}}"
                 value="{{_color.r}}"
             ></ui5-input>
             <ui5-label>R</ui5-label>
@@ -71,6 +75,7 @@
                 id="green"
                 class="ui5-color-picker-rgb-input"
                 disabled="{{inputsDisabled}}"
+                accessible-name="{{greenInputLabel}}"
                 value="{{_color.g}}"
             ></ui5-input>
             <ui5-label>G</ui5-label>
@@ -80,6 +85,7 @@
                 id="blue"
                 class="ui5-color-picker-rgb-input"
                 disabled="{{inputsDisabled}}"
+                accessible-name="{{blueInputLabel}}"
                 value="{{_color.b}}"
             ></ui5-input>
             <ui5-label>B</ui5-label>
@@ -90,6 +96,7 @@
                 disabled="{{inputsDisabled}}"
                 class="ui5-color-picker-rgb-input"
                 value="{{_alpha}}"
+                accessible-name="{{alphaInputLabel}}"
                 @ui5-input="{{_handleAlphaInput}}"
                 @ui5-change="{{_handleAlphaChange}}"
             ></ui5-input>

package/src/ColorPicker.js

@@ -6,6 +6,7 @@ import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import Float from "@ui5/webcomponents-base/dist/types/Float.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import {
 	getRGBColor,
 	HSLToRGB,
@@ -17,6 +18,16 @@ import Input from "./Input.js";
 import Slider from "./Slider.js";
 import Label from "./Label.js";
 
+import {
+	COLORPICKER_ALPHA_SLIDER,
+	COLORPICKER_HUE_SLIDER,
+	COLORPICKER_HEX,
+	COLORPICKER_RED,
+	COLORPICKER_GREEN,
+	COLORPICKER_BLUE,
+	COLORPICKER_ALPHA,
+} from "./generated/i18n/i18n-defaults.js";
+
 // Styles
 import ColorPickerCss from "./generated/themes/ColorPicker.css.js";
 
@@ -179,6 +190,10 @@ class ColorPicker extends UI5Element {
 		];
 	}
 
+	static async onDefine() {
+		ColorPicker.i18nBundle = await getI18nBundle("@ui5/webcomponents");
+	}
+
 	constructor() {
 		super();
 
@@ -533,6 +548,34 @@ class ColorPicker extends UI5Element {
 		this._setMainColor(this._hue);
 	}
 
+	get hueSliderLabel() {
+		return ColorPicker.i18nBundle.getText(COLORPICKER_HUE_SLIDER);
+	}
+
+	get alphaSliderLabel() {
+		return ColorPicker.i18nBundle.getText(COLORPICKER_ALPHA_SLIDER);
+	}
+
+	get hexInputLabel() {
+		return ColorPicker.i18nBundle.getText(COLORPICKER_HEX);
+	}
+
+	get redInputLabel() {
+		return ColorPicker.i18nBundle.getText(COLORPICKER_RED);
+	}
+
+	get greenInputLabel() {
+		return ColorPicker.i18nBundle.getText(COLORPICKER_GREEN);
+	}
+
+	get blueInputLabel() {
+		return ColorPicker.i18nBundle.getText(COLORPICKER_BLUE);
+	}
+
+	get alphaInputLabel() {
+		return ColorPicker.i18nBundle.getText(COLORPICKER_ALPHA);
+	}
+
 	get inputsDisabled() {
 		return this._wrongHEX ? true : undefined;
 	}

package/src/ComboBox.hbs

@@ -39,7 +39,6 @@
 			input-icon
 			?pressed="{{_iconPressed}}"
 			@click="{{_arrowClick}}"
-			dir="{{effectiveDir}}"
 			accessible-name="{{_iconAccessibleNameText}}"
 		></ui5-icon>
 	{{/unless}}

package/src/ComboBox.js

@@ -29,7 +29,7 @@ import {
 	isHome,
 	isEnd,
 } from "@ui5/webcomponents-base/dist/Keys.js";
-import * as Filters from "./ComboBoxFilters.js";
+import * as Filters from "./Filters.js";
 
 import {
 	VALUE_STATE_SUCCESS,
@@ -598,7 +598,7 @@ class ComboBox extends UI5Element {
 	}
 
 	_startsWithMatchingItems(str) {
-		return Filters.StartsWith(str, this._filteredItems);
+		return Filters.StartsWith(str, this._filteredItems, "text");
 	}
 
 	_clearFocus() {
@@ -845,7 +845,7 @@ class ComboBox extends UI5Element {
 
 	_filterItems(str) {
 		const itemsToFilter = this.items.filter(item => !item.isGroupItem);
-		const filteredItems = (Filters[this.filter] || Filters.StartsWithPerTerm)(str, itemsToFilter);
+		const filteredItems = (Filters[this.filter] || Filters.StartsWithPerTerm)(str, itemsToFilter, "text");
 
 		// Return the filtered items and their group items
 		return this.items.filter((item, idx, allItems) => ComboBox._groupItemFilter(item, ++idx, allItems, filteredItems) || filteredItems.indexOf(item) !== -1);

package/src/DatePicker.hbs

@@ -35,7 +35,6 @@
 				@click="{{togglePicker}}"
 				input-icon
 				?pressed="{{_isPickerOpen}}"
-				dir="{{effectiveDir}}"
 			></ui5-icon>
 		{{/unless}}
 	</ui5-input>

package/src/Dialog.hbs

@@ -27,7 +27,6 @@
 	{{#if _showResizeHandle }}
 		<ui5-icon
 			name="resize-corner"
-			dir="{{effectiveDir}}"
 			class="ui5-popup-resize-handle"
 			@mousedown="{{_onResizeMouseDown}}">
 		</ui5-icon>

package/src/Filters.js

@@ -0,0 +1,28 @@
+const escapeReg = /[[\]{}()*+?.\\^$|]/g;
+
+const escapeRegExp = str => {
+	return str.replace(escapeReg, "\\$&");
+};
+
+const StartsWithPerTerm = (value, items, propName) => {
+	const reg = new RegExp(`(^|\\s)${escapeRegExp(value.toLowerCase())}.*`, "g");
+
+	return items.filter(item => {
+		const text = item[propName];
+
+		reg.lastIndex = 0;
+
+		return reg.test(text.toLowerCase());
+	});
+};
+
+const StartsWith = (value, items, propName) => items.filter(item => item[propName].toLowerCase().startsWith(value.toLowerCase()));
+const Contains = (value, items, propName) => items.filter(item => item[propName].toLowerCase().includes(value.toLowerCase()));
+const None = (_, items) => items;
+
+export {
+	StartsWithPerTerm,
+	StartsWith,
+	Contains,
+	None,
+};