@ui5/webcomponents 1.7.2 → 1.7.4

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.7.4](https://github.com/SAP/ui5-webcomponents/compare/v1.7.3...v1.7.4) (2022-12-05)
+
+
+### Bug Fixes
+
+* **ui5-avatar:** fix icon rendering inside ui5-avatar ([#6060](https://github.com/SAP/ui5-webcomponents/issues/6060)) ([0fabac4](https://github.com/SAP/ui5-webcomponents/commit/0fabac43b9d7bc18f478f30177d99c3f63bafa88)), closes [#6043](https://github.com/SAP/ui5-webcomponents/issues/6043)
+
+
+
+
+
+## [1.7.2](https://github.com/SAP/ui5-webcomponents/compare/v1.7.1...v1.7.2) (2022-11-07)
+
+
+### Features
+
+* **ui5-avatar:** support of 3 letters is enabled ([#5870](https://github.com/SAP/ui5-webcomponents/issues/5870)) ([dc533c5](https://github.com/SAP/ui5-webcomponents/commit/dc533c56284198ab80ddb671a0598f3b507fda2f))
+
+
+
+
+
 ## [1.7.1](https://github.com/SAP/ui5-webcomponents/compare/v1.7.0...v1.7.1) (2022-09-08)
 
 

package/dist/Avatar.js

@@ -16,6 +16,8 @@ import AvatarSize from "./types/AvatarSize.js";
 import AvatarShape from "./types/AvatarShape.js";
 import AvatarColorScheme from "./types/AvatarColorScheme.js";
 
+// Icon
+import "@ui5/webcomponents-icons/dist/employee.js";
 /**
  * @public
  */
@@ -372,30 +374,31 @@ class Avatar extends UI5Element {
 		this._onclick = this.interactive ? this._onClickHandler.bind(this) : undefined;
 	}
 
-	onEnterDOM() {
-		this._checkInitialsWidth();
+	onAfterRendering() {
+		this._checkInitials();
+	}
 
-		if (!this.validInitials) {
-			// if initials are not valid,an icon should be shown inside the avatar
-			this._setFallbackIcon();
-		}
+	onEnterDOM() {
+		this._checkInitials();
 	}
 
 	_setFallbackIcon() {
-		// the default icon shown inside the avatar,
-		// when the initials are not valid
-		this.icon = "employee";
+		// if there isn`t icon set in the avatar the default one is shown, when the initials are not valid or are missing
+		this.icon = this.icon || "employee";
 		return this.icon;
 	}
 
-	_checkInitialsWidth() {
-		// if initials` width is bigger than the avatar,
-		// an icon should be shown inside the avatar
+	_checkInitials() {
 		const avatar = this.getDomRef(),
 			avatarInitials = avatar.querySelector(".ui5-avatar-initials");
+		// if there aren`t initalts set - the fallBack icon should be shown
+		if (!this.validInitials) {
+			this._setFallbackIcon();
+		}
+		// if initials` width is bigger than the avatar, an icon should be shown inside the avatar
 		if (this.initials && this.initials.length === 3) {
-			if (avatarInitials.scrollWidth >= avatar.scrollWidth) {
-				this.icon = "employee";
+			if (avatarInitials && avatarInitials.scrollWidth >= avatar.scrollWidth) {
+				this._setFallbackIcon();
 			}
 		}
 		return this.icon;

package/dist/css/themes/Icon.css

@@ -1 +1 @@
-:host{-webkit-tap-highlight-color:rgba(0,0,0,0)}:host([hidden]){display:none}:host([invalid]){display:none}:host(:not([hidden]).ui5_hovered){opacity:.7}:host{display:inline-block;width:1rem;height:1rem;color:var(--sapContent_NonInteractiveIconColor);fill:currentColor;outline:none}:host([interactive][focused]) .ui5-icon-root{outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);border-radius:var(--ui5-icon-focus-border-radius)}.ui5-icon-root{display:flex;outline:none;vertical-align:top}.ui5-icon-root:not([dir=ltr]){transform:var(--_ui5_icon_transform_scale);transform-origin:center}
+:host{-webkit-tap-highlight-color:rgba(0,0,0,0)}:host([hidden]){display:none}:host([invalid]){display:none}:host(:not([hidden]).ui5_hovered){opacity:.7}:host{display:inline-block;width:1rem;height:1rem;color:var(--sapContent_NonInteractiveIconColor);fill:currentColor;outline:none}:host([interactive][focused]) .ui5-icon-root{outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);border-radius:var(--ui5-icon-focus-border-radius)}.ui5-icon-root{display:flex;height:100%;width:100%;outline:none;vertical-align:top}.ui5-icon-root:not([dir=ltr]){transform:var(--_ui5_icon_transform_scale);transform-origin:center}

package/dist/generated/themes/Icon.css.js

@@ -5,4 +5,4 @@ import defaultTheme from "./sap_fiori_3/parameters-bundle.css.js";
 
 registerThemePropertiesLoader("@ui5/webcomponents-theming", "sap_fiori_3", () => defaultThemeBase);
 registerThemePropertiesLoader("@ui5/webcomponents", "sap_fiori_3", () => defaultTheme);
-export default {packageName:"@ui5/webcomponents",fileName:"themes/Icon.css",content:":host{-webkit-tap-highlight-color:rgba(0,0,0,0)}:host([hidden]){display:none}:host([invalid]){display:none}:host(:not([hidden]).ui5_hovered){opacity:.7}:host{display:inline-block;width:1rem;height:1rem;color:var(--sapContent_NonInteractiveIconColor);fill:currentColor;outline:none}:host([interactive][focused]) .ui5-icon-root{outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);border-radius:var(--ui5-icon-focus-border-radius)}.ui5-icon-root{display:flex;outline:none;vertical-align:top}.ui5-icon-root:not([dir=ltr]){transform:var(--_ui5_icon_transform_scale);transform-origin:center}"}
+export default {packageName:"@ui5/webcomponents",fileName:"themes/Icon.css",content:":host{-webkit-tap-highlight-color:rgba(0,0,0,0)}:host([hidden]){display:none}:host([invalid]){display:none}:host(:not([hidden]).ui5_hovered){opacity:.7}:host{display:inline-block;width:1rem;height:1rem;color:var(--sapContent_NonInteractiveIconColor);fill:currentColor;outline:none}:host([interactive][focused]) .ui5-icon-root{outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);border-radius:var(--ui5-icon-focus-border-radius)}.ui5-icon-root{display:flex;height:100%;width:100%;outline:none;vertical-align:top}.ui5-icon-root:not([dir=ltr]){transform:var(--_ui5_icon_transform_scale);transform-origin:center}"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "1.7.2",
+  "version": "1.7.4",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -41,13 +41,13 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "1.7.2",
-    "@ui5/webcomponents-icons": "1.7.2",
-    "@ui5/webcomponents-localization": "1.7.2",
-    "@ui5/webcomponents-theming": "1.7.2"
+    "@ui5/webcomponents-base": "1.7.4",
+    "@ui5/webcomponents-icons": "1.7.4",
+    "@ui5/webcomponents-localization": "1.7.4",
+    "@ui5/webcomponents-theming": "1.7.4"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "1.7.2",
+    "@ui5/webcomponents-tools": "1.7.4",
     "chromedriver": "104.0.0"
   }
 }

package/src/Avatar.js

@@ -16,6 +16,8 @@ import AvatarSize from "./types/AvatarSize.js";
 import AvatarShape from "./types/AvatarShape.js";
 import AvatarColorScheme from "./types/AvatarColorScheme.js";
 
+// Icon
+import "@ui5/webcomponents-icons/dist/employee.js";
 /**
  * @public
  */
@@ -372,30 +374,31 @@ class Avatar extends UI5Element {
 		this._onclick = this.interactive ? this._onClickHandler.bind(this) : undefined;
 	}
 
-	onEnterDOM() {
-		this._checkInitialsWidth();
+	onAfterRendering() {
+		this._checkInitials();
+	}
 
-		if (!this.validInitials) {
-			// if initials are not valid,an icon should be shown inside the avatar
-			this._setFallbackIcon();
-		}
+	onEnterDOM() {
+		this._checkInitials();
 	}
 
 	_setFallbackIcon() {
-		// the default icon shown inside the avatar,
-		// when the initials are not valid
-		this.icon = "employee";
+		// if there isn`t icon set in the avatar the default one is shown, when the initials are not valid or are missing
+		this.icon = this.icon || "employee";
 		return this.icon;
 	}
 
-	_checkInitialsWidth() {
-		// if initials` width is bigger than the avatar,
-		// an icon should be shown inside the avatar
+	_checkInitials() {
 		const avatar = this.getDomRef(),
 			avatarInitials = avatar.querySelector(".ui5-avatar-initials");
+		// if there aren`t initalts set - the fallBack icon should be shown
+		if (!this.validInitials) {
+			this._setFallbackIcon();
+		}
+		// if initials` width is bigger than the avatar, an icon should be shown inside the avatar
 		if (this.initials && this.initials.length === 3) {
-			if (avatarInitials.scrollWidth >= avatar.scrollWidth) {
-				this.icon = "employee";
+			if (avatarInitials && avatarInitials.scrollWidth >= avatar.scrollWidth) {
+				this._setFallbackIcon();
 			}
 		}
 		return this.icon;

package/src/DateComponentBase.ts

@@ -0,0 +1,176 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import { fetchCldr } from "@ui5/webcomponents-base/dist/asset-registries/LocaleData.js";
+import I18nBundle, { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getCalendarType } from "@ui5/webcomponents-base/dist/config/CalendarType.js";
+import DateFormat from "@ui5/webcomponents-localization/dist/DateFormat.js";
+import getCachedLocaleDataInstance from "@ui5/webcomponents-localization/dist/getCachedLocaleDataInstance.js";
+import CalendarType from "@ui5/webcomponents-base/dist/types/CalendarType.js";
+import getLocale from "@ui5/webcomponents-base/dist/locale/getLocale.js";
+import CalendarDate from "@ui5/webcomponents-localization/dist/dates/CalendarDate.js";
+// @ts-ignore
+import { getMaxCalendarDate, getMinCalendarDate } from "@ui5/webcomponents-localization/dist/dates/ExtremeDates.js";
+
+/**
+ * @public
+ */
+const metadata = {
+	languageAware: true,
+	properties: /** @lends sap.ui.webc.main.DateComponentBase.prototype */ {
+		/**
+		 * Sets a calendar type used for display.
+		 * If not set, the calendar type of the global configuration is used.
+		 * @type {sap.ui.webc.base.types.CalendarType}
+		 * @public
+		 */
+		primaryCalendarType: {
+			type: CalendarType,
+		},
+
+		/**
+		 * Defines the secondary calendar type.
+		 * If not set, the calendar will only show the primary calendar type.
+		 * @type {sap.ui.webc.base.types.CalendarType}
+		 * @since 1.0.0-rc.16
+		 * @defaultvalue undefined
+		 * @public
+		 */
+		secondaryCalendarType: {
+			type: CalendarType,
+		},
+
+		/**
+		 * Determines the minimum date available for selection.
+		 *
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @since 1.0.0-rc.6
+		 * @public
+		 */
+		minDate: {
+			type: String,
+		},
+
+		/**
+		 * Determines the maximum date available for selection.
+		 *
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @since 1.0.0-rc.6
+		 * @public
+		 */
+		maxDate: {
+			type: String,
+		},
+
+		/**
+		 * Determines the format, displayed in the input field.
+		 *
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @public
+		 */
+		formatPattern: {
+			type: String,
+		},
+	},
+};
+
+/**
+ * @class
+ *
+ * Abstract class that provides common functionality for date-related components (day picker, month picker, year picker, calendar, date picker, date range picker, date time picker)
+ * This includes:
+ *  - "languageAware: true" metadata setting, CLDR fetch and i18n initialization
+ *  - common properties (primaryCalendar, minDate, maxDate and formatPattern) declaration and methods that operate on them
+ *  - additional common methods
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.main.DateComponentBase
+ * @extends sap.ui.webc.base.UI5Element
+ * @public
+ */
+class DateComponentBase extends UI5Element {
+	primaryCalendarType!: string;
+	minDate!: string;
+	maxDate!: string;
+	formatPattern!: string;
+
+	static i18nBundle?: I18nBundle;
+
+	static get metadata() {
+		return metadata;
+	}
+
+	static get render() {
+		return litRender;
+	}
+
+	constructor() {
+		super();
+	}
+
+	get _primaryCalendarType() {
+		const localeData = getCachedLocaleDataInstance(getLocale());
+		return this.primaryCalendarType || getCalendarType() || localeData.getPreferredCalendarType();
+	}
+
+	get _minDate() {
+		return this.minDate && this.getFormat().parse(this.minDate) ? this._getCalendarDateFromString(this.minDate) : getMinCalendarDate(this._primaryCalendarType);
+	}
+
+	get _maxDate() {
+		return this.maxDate && this.getFormat().parse(this.maxDate) ? this._getCalendarDateFromString(this.maxDate) : getMaxCalendarDate(this._primaryCalendarType);
+	}
+
+	get _formatPattern() {
+		return this.formatPattern || "medium"; // get from config
+	}
+
+	get _isPattern() {
+		return this._formatPattern !== "medium" && this._formatPattern !== "short" && this._formatPattern !== "long";
+	}
+
+	_getCalendarDateFromString(value: string) {
+		const jsDate = this.getFormat().parse(value);
+		if (jsDate) {
+			return CalendarDate.fromLocalJSDate(jsDate, this._primaryCalendarType);
+		}
+	}
+
+	_getTimeStampFromString(value: string) {
+		const calDate = this._getCalendarDateFromString(value);
+		if (calDate) {
+			return calDate.toUTCJSDate().valueOf();
+		}
+	}
+
+	_getStringFromTimestamp(timestamp: number) {
+		const localDate = new Date(timestamp);
+		return this.getFormat().format(localDate, true);
+	}
+
+	getFormat() {
+		return this._isPattern
+			? DateFormat.getInstance({
+				strictParsing: true,
+				pattern: this._formatPattern,
+				calendarType: this._primaryCalendarType,
+			})
+			: DateFormat.getInstance({
+				strictParsing: true,
+				style: this._formatPattern,
+				calendarType: this._primaryCalendarType,
+			});
+	}
+
+	static async onDefine() {
+		[DateComponentBase.i18nBundle] = await Promise.all([
+			getI18nBundle("@ui5/webcomponents"),
+			fetchCldr(getLocale().getLanguage(), getLocale().getRegion(), getLocale().getScript()),
+		]);
+	}
+}
+
+export default DateComponentBase;

package/src/themes/Icon.css

@@ -29,6 +29,8 @@
 
 .ui5-icon-root {
 	display:flex;
+	height: 100%;
+	width: 100%;
 	outline: none;
 	vertical-align: top;
 }