@openui5/sap.ui.webc.fiori 1.97.1 → 1.100.0

package/src/sap/ui/webc/fiori/thirdparty/MediaGallery.js

@@ -0,0 +1,339 @@
+sap.ui.define(['sap/ui/webc/common/thirdparty/base/delegate/ItemNavigation', 'sap/ui/webc/common/thirdparty/base/delegate/ResizeHandler', 'sap/ui/webc/common/thirdparty/base/Device', 'sap/ui/webc/common/thirdparty/base/MediaRange', 'sap/ui/webc/common/thirdparty/base/renderer/LitRenderer', 'sap/ui/webc/common/thirdparty/base/types/Integer', 'sap/ui/webc/common/thirdparty/base/types/NavigationMode', 'sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/main/thirdparty/Button', 'sap/ui/webc/main/thirdparty/Carousel', './MediaGalleryItem', './types/MediaGalleryItemLayout', './types/MediaGalleryLayout', './types/MediaGalleryMenuHorizontalAlign', './types/MediaGalleryMenuVerticalAlign', './generated/templates/MediaGalleryTemplate.lit', './generated/themes/MediaGallery.css'], function (ItemNavigation, ResizeHandler, Device, MediaRange, litRender, Integer, NavigationMode, UI5Element, Button, Carousel, MediaGalleryItem, MediaGalleryItemLayout, MediaGalleryLayout, MediaGalleryMenuHorizontalAlign, MediaGalleryMenuVerticalAlign, MediaGalleryTemplate_lit, MediaGallery_css) { 'use strict';
+
+	function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
+
+	var ItemNavigation__default = /*#__PURE__*/_interopDefaultLegacy(ItemNavigation);
+	var ResizeHandler__default = /*#__PURE__*/_interopDefaultLegacy(ResizeHandler);
+	var MediaRange__default = /*#__PURE__*/_interopDefaultLegacy(MediaRange);
+	var litRender__default = /*#__PURE__*/_interopDefaultLegacy(litRender);
+	var Integer__default = /*#__PURE__*/_interopDefaultLegacy(Integer);
+	var NavigationMode__default = /*#__PURE__*/_interopDefaultLegacy(NavigationMode);
+	var UI5Element__default = /*#__PURE__*/_interopDefaultLegacy(UI5Element);
+	var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
+	var Carousel__default = /*#__PURE__*/_interopDefaultLegacy(Carousel);
+
+	const COLUMNS_COUNT = {
+		"S": 1,
+		"M": 2,
+		"L": 3,
+		"XL": 4,
+	};
+	const metadata = {
+		tag: "ui5-media-gallery",
+		managedSlots: true,
+		slots:  {
+			"default": {
+				propertyName: "items",
+				type: HTMLElement,
+				individualSlots: true,
+				invalidateOnChildChange: true,
+			},
+		},
+		properties:  {
+			showAllThumbnails: {
+				type: Boolean,
+			},
+			interactiveDisplayArea: {
+				type: Boolean,
+			},
+			layout: {
+				type: MediaGalleryLayout,
+				defaultValue: "Auto",
+			},
+			menuHorizontalAlign: {
+				type: MediaGalleryMenuHorizontalAlign,
+				defaultValue: MediaGalleryMenuHorizontalAlign.Left,
+			},
+			menuVerticalAlign: {
+				type: MediaGalleryMenuVerticalAlign,
+				defaultValue: MediaGalleryMenuVerticalAlign.Bottom,
+			},
+			effectiveLayout: {
+				type: MediaGalleryLayout,
+				defaultValue: "Vertical",
+			},
+			mediaRange: {
+				type: String,
+			},
+			_overflowSize: {
+				type: Integer__default,
+				noAttribute: true,
+				defaultValue: 0,
+			},
+		},
+		events:  {
+			 "selection-change": {
+				detail: {
+					item: { type: HTMLElement },
+				},
+			},
+			"overflow-click": {},
+			"display-area-click": {},
+		},
+	};
+	class MediaGallery extends UI5Element__default {
+		constructor() {
+			super();
+			this._onResize = this._updateLayout.bind(this);
+			this._selectedItem = null;
+			this._initItemNavigation();
+		}
+		onEnterDOM() {
+			!Device.isPhone() && ResizeHandler__default.register(this, this._onResize);
+		}
+		onExitDOM() {
+			!Device.isPhone() && ResizeHandler__default.deregister(this, this._onResize);
+		}
+		onAfterRendering() {
+			this._updateLayout();
+			this._updateSelection();
+		}
+		_initItemNavigation() {
+			if (!this._itemNavigation) {
+				this._itemNavigation = new ItemNavigation__default(this, {
+					navigationMode: NavigationMode__default.Auto,
+					getItemsCallback: () => this._getFocusableItems(),
+				});
+			}
+		}
+		_updateSelection() {
+			let itemToSelect = this.items.find(item => item.selected);
+			if (!itemToSelect || !this._isSelectableItem(itemToSelect)) {
+				itemToSelect = this._findSelectableItem();
+			}
+			if (itemToSelect && itemToSelect !== this._selectedItem) {
+				this._selectItem(itemToSelect);
+			}
+		}
+		_isSelectableItem(item) {
+			return !item.disabled && !item.hidden;
+		}
+		_findSelectableItem() {
+			return this.items.find(this._isSelectableItem);
+		}
+		_updateMediaRange(width) {
+			this.mediaRange = MediaRange__default.getCurrentRange(MediaRange__default.RANGESETS.RANGE_4STEPS, width);
+		}
+		_updateLayout() {
+			const rootNode = this.getDomRef(),
+				height = rootNode.offsetHeight,
+				width = rootNode.offsetWidth;
+			if (!width || !height || Device.isPhone()) {
+				return;
+			}
+			this._updateMediaRange(width);
+			this.effectiveLayout = this._infereffectiveLayout();
+			this._overflowSize = this._calculateOverflowSize(width, height);
+			this._toggleDisplaySquareSize(this._shouldHaveSquareDisplay);
+			this._toggleMainItem9x16size(this._shouldHaveWideDisplay);
+		}
+		_calculateOverflowSize(width, height) {
+			const marginSize = MediaGallery.THUMBNAIL_MARGIN;
+			let columnHeight,
+				columnsCount;
+			if (this.showAllThumbnails) {
+				return 0;
+			}
+			if (this.effectiveLayout === MediaGalleryLayout.Horizontal) {
+				columnHeight = height - marginSize;
+				columnsCount = this.showAllThumbnails ? COLUMNS_COUNT[this.mediaRange] : 1;
+			} else {
+				columnHeight = width - (marginSize * 2);
+				columnsCount = 1;
+			}
+			return this._getOverflowSize(columnHeight, columnsCount);
+		}
+		_toggleDisplaySquareSize(enable) {
+			this._display.style.width = "";
+			if (enable) {
+				const marginSize = MediaGallery.THUMBNAIL_MARGIN,
+					width = this._display.offsetWidth;
+				let availableHeight = this.getDomRef().offsetHeight - (2 * marginSize);
+				if (this.effectiveLayout === MediaGalleryLayout.Vertical) {
+					availableHeight -= (MediaGallery.THUMBNAIL_HEIGHT + marginSize);
+				}
+				if (width > availableHeight) {
+					this._display.style.width = `${availableHeight}px`;
+				}
+			}
+		}
+		_toggleMainItem9x16size(enable) {
+			if (!this._mainItem) {
+				return;
+			}
+			const width = this._mainItem.offsetWidth,
+				contentHeight = enable ? `${(width / 16) * 9}px` : "";
+			this._mainItem.contentHeight = contentHeight;
+		}
+		_infereffectiveLayout() {
+			if (this.layout === MediaGalleryLayout.Auto) {
+				return (this._isPhoneSize) ? MediaGalleryLayout.Vertical
+					: MediaGalleryLayout.Horizontal;
+			}
+			return this.layout;
+		}
+		_getMaxAllowedThumbnailsInColumn(columnHeight) {
+			let maxAllowedItems = Math.floor(columnHeight / MediaGallery.THUMBNAIL_HEIGHT);
+			if (!this.showAllThumbnails) {
+				maxAllowedItems = Math.min(maxAllowedItems, 5);
+			}
+			return maxAllowedItems;
+		}
+		_getOverflowSize(columnHeight, columnsCount) {
+			const maxAlowedThumbnailsInColumn = this._getMaxAllowedThumbnailsInColumn(columnHeight),
+				overflowSize = Math.max(0, this.items.length - maxAlowedThumbnailsInColumn * columnsCount);
+			return (overflowSize > 0) ? overflowSize + 1 : 0;
+		}
+		_getFocusableItems() {
+			if (!this._showThumbnails) {
+				return [];
+			}
+			const items = this._visibleItems.filter(item => !item.disabled);
+			if (this._overflowBtn) {
+				items.push(this._overflowBtn);
+			}
+			return items;
+		}
+		_selectItem(item, userInteraction) {
+			if (item === this._selectedItem) {
+				return;
+			}
+			this._selectedItem = item;
+			this._updateSelectedFlag(item);
+			this._itemNavigation.setCurrentItem(item);
+			if (userInteraction) {
+				this.fireEvent("selection-change", { item });
+			}
+			if (Device.isPhone()) {
+				this._selectItemOnPhone(item);
+			} else {
+				this._displayContent(item);
+			}
+		}
+		_updateSelectedFlag(itemToSelect) {
+			this.items.forEach(next => { next.selected = false; });
+			itemToSelect.selected = true;
+		}
+		_selectItemOnPhone(item) {
+			const selectableItemIndex = this._selectableItems.indexOf(item),
+				carousel = this._carousel;
+			carousel && carousel.navigateTo(selectableItemIndex);
+		}
+		_displayContent(item) {
+			let clone;
+			const mainItem = this._mainItem,
+				oldContent = mainItem._content,
+				newContent = item._content;
+			mainItem._thumbnailDesign = false;
+			oldContent && oldContent.remove();
+			if (newContent) {
+				clone = newContent.cloneNode(true);
+				mainItem.layout = item.layout;
+				mainItem.appendChild(clone);
+			}
+		}
+		_onThumbnailClick(event) {
+			const item = event.target.closest("[ui5-media-gallery-item]");
+			if (item.disabled) {
+				return;
+			}
+			if (item !== this._selectedItem) {
+				this._selectItem(item, true );
+			}
+		}
+		_onOverflowBtnClick() {
+			this.fireEvent("overflow-click");
+		}
+		_onDisplayAreaClick(event) {
+			if (!this.interactiveDisplayArea) {
+				return;
+			}
+			this.fireEvent("display-area-click");
+		}
+		_onCarouselNavigate(event) {
+			const selectedIndex = event.detail.selectedIndex,
+				item = this._selectableItems[selectedIndex];
+			this.fireEvent("selection-change", { item });
+		}
+		get _mainItemTabIndex() {
+			return this.interactiveDisplayArea ? 0 : undefined;
+		}
+		get _selectableItems() {
+			return this.items.filter(this._isSelectableItem);
+		}
+		get _carousel() {
+			return this.shadowRoot.querySelector("[ui5-carousel]");
+		}
+		get _display() {
+			return this.shadowRoot.querySelector(".ui5-media-gallery-display");
+		}
+		get _mainItem() {
+			return this.shadowRoot.querySelector(".ui5-media-gallery-display [ui5-media-gallery-item]");
+		}
+		get _overflowBtn() {
+			return this.shadowRoot.querySelector(".ui5-media-gallery-overflow [ui5-button]");
+		}
+		get _visibleItems() {
+			const visibleItemsCount = this.items.length - this._overflowSize;
+			return this.items.slice(0, visibleItemsCount);
+		}
+		get _isPhonePlatform() {
+			return Device.isPhone();
+		}
+		get _showThumbnails() {
+			return !Device.isPhone();
+		}
+		get _showOverflowBtn() {
+			return this._overflowSize > 0;
+		}
+		get _isPhoneSize() {
+			return this.mediaRange === "S";
+		}
+		get _mainItemHasWideLayout() {
+			return this._mainItem && (this._mainItem.layout === MediaGalleryItemLayout.Wide);
+		}
+		get _shouldHaveWideDisplay() {
+			return this._mainItemHasWideLayout
+				&& this.showAllThumbnails
+				&& (this.effectiveLayout === MediaGalleryLayout.Horizontal);
+		}
+		get _shouldHaveSquareDisplay() {
+			return !this._shouldHaveWideDisplay;
+		}
+		static get metadata() {
+			return metadata;
+		}
+		static get render() {
+			return litRender__default;
+		}
+		static get template() {
+			return MediaGalleryTemplate_lit;
+		}
+		static get staticAreaTemplate() {
+			return MediaGalleryTemplate_lit;
+		}
+		static get styles() {
+			return [MediaGallery_css];
+		}
+		static get staticAreaStyles() {
+			return null;
+		}
+		static get dependencies() {
+			return [
+				MediaGalleryItem,
+				Button__default,
+				Carousel__default,
+			];
+		}
+		static get THUMBNAIL_HEIGHT() {
+			return 80;
+		}
+		static get THUMBNAIL_MARGIN() {
+			return 16;
+		}
+	}
+	MediaGallery.define();
+
+	return MediaGallery;
+
+});

package/src/sap/ui/webc/fiori/thirdparty/MediaGalleryItem.js

@@ -0,0 +1,193 @@
+sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/common/thirdparty/base/renderer/LitRenderer', 'sap/ui/webc/common/thirdparty/base/Keys', 'sap/ui/webc/common/thirdparty/base/Device', 'sap/ui/webc/main/thirdparty/Icon', 'sap/ui/webc/common/thirdparty/icons/background', './types/MediaGalleryItemLayout', './generated/templates/MediaGalleryItemTemplate.lit', './generated/themes/MediaGalleryItem.css'], function (UI5Element, litRender, Keys, Device, Icon, background, MediaGalleryItemLayout, MediaGalleryItemTemplate_lit, MediaGalleryItem_css) { 'use strict';
+
+	function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
+
+	var UI5Element__default = /*#__PURE__*/_interopDefaultLegacy(UI5Element);
+	var litRender__default = /*#__PURE__*/_interopDefaultLegacy(litRender);
+	var Icon__default = /*#__PURE__*/_interopDefaultLegacy(Icon);
+
+	const metadata = {
+		tag: "ui5-media-gallery-item",
+		managedSlots: true,
+		properties:  {
+			selected: {
+				type: Boolean,
+			},
+			disabled: {
+				type: Boolean,
+			},
+			layout: {
+				type: MediaGalleryItemLayout,
+				defaultValue: MediaGalleryItemLayout.Square,
+			},
+			_interactive: {
+				type: Boolean,
+			},
+			_square: {
+				type: Boolean,
+			},
+			_contentImageNotFound: {
+				type: Boolean,
+			},
+			_thumbnailNotFound: {
+				type: Boolean,
+			},
+			_thumbnailDesign: {
+				type: Boolean,
+			},
+			focused: {
+				type: Boolean,
+			},
+			_tabIndex: {
+				type: String,
+				defaultValue: undefined,
+			},
+			contentHeight: {
+				type: String,
+				noAttribute: true,
+				defaultValue: "",
+			},
+		},
+		slots:  {
+			 "default": {
+				propertyName: "content",
+				type: HTMLElement,
+			},
+			 "thumbnail": {
+				type: HTMLElement,
+			},
+		},
+	};
+	class MediaGalleryItem extends UI5Element__default {
+		constructor() {
+			super();
+			this._monitoredContent = null;
+			this._monitoredThumbnail = null;
+		}
+		onEnterDOM() {
+			this._thumbnailDesign = !Device.isPhone();
+			this._interactive = !Device.isPhone();
+			this._square = true;
+		}
+		static get metadata() {
+			return metadata;
+		}
+		static get render() {
+			return litRender__default;
+		}
+		static get styles() {
+			return MediaGalleryItem_css;
+		}
+		static get template() {
+			return MediaGalleryItemTemplate_lit;
+		}
+		get _thumbnail() {
+			return this.thumbnail.length && this.thumbnail[0];
+		}
+		get _content() {
+			return this.content.length && this.content[0];
+		}
+		get _isThubmnailAvailable() {
+			return this._thumbnail && !this._thumbnailNotFound;
+		}
+		get _isContentAvailable() {
+			return this._content && !this._contentImageNotFound;
+		}
+		get _useThumbnail() {
+			return this._thumbnailDesign && this._isThubmnailAvailable;
+		}
+		get _useContent() {
+			return !this._useThumbnail && this._isContentAvailable;
+		}
+		get tabIndex() {
+			return this.disabled ? undefined : this._tabIndex;
+		}
+		get _showBackgroundIcon() {
+			return this._thumbnailNotFound || this._contentImageNotFound;
+		}
+		get styles() {
+			return {
+				wrapper: {
+					height: this.contentHeight,
+				},
+			};
+		}
+		get _role() {
+			return this._interactive ? "button" : undefined;
+		}
+		onBeforeRendering() {
+			this._monitorLoadingError();
+		}
+		_monitorLoadingError() {
+			let callback,
+				success;
+			if (this._thumbnailDesign && this.thumbnail.length && (this._monitoredThumbnail !== this._thumbnail)) {
+				this._thumbnailNotFound = undefined;
+				callback = this._updateThumbnailLoaded;
+				success = this._attachListeners(this._thumbnail, callback);
+				success && (this._monitoredThumbnail = this._thumbnail);
+			}
+			if (!this._useThumbnail && this.content.length && (this._monitoredContent !== this._content)) {
+				this._contentImageNotFound = undefined;
+				callback = this._updateContentImageLoaded;
+				success = this._attachListeners(this._content, callback);
+				success && (this._monitoredContent = this._content);
+			}
+		}
+		_attachListeners(element, callback) {
+			const isImg = element.tagName === "IMG",
+				img = isImg ? element : element.querySelector("img");
+			if (img) {
+				callback.call(this, img);
+				img.addEventListener("error", () => {
+					if (this.contains(img)) {
+						callback.call(this, img);
+					}
+				});
+				img.addEventListener("load", () => {
+					if (this.contains(img)) {
+						callback.call(this, img);
+					}
+				});
+				return true;
+			}
+		}
+		_updateContentImageLoaded(image) {
+			this._contentImageNotFound = image.naturalHeight === 0 && image.naturalWidth === 0;
+		}
+		_updateThumbnailLoaded(image) {
+			this._thumbnailNotFound = image.naturalHeight === 0 && image.naturalWidth === 0;
+		}
+		_onkeydown(event) {
+			if (Keys.isSpace(event)) {
+				event.preventDefault();
+			}
+			if (Keys.isEnter(event)) {
+				this._fireItemClick();
+			}
+		}
+		_onkeyup(event) {
+			if (Keys.isSpace(event)) {
+				this._fireItemClick();
+			}
+		}
+		_onfocusout() {
+			this.focused = false;
+		}
+		_onfocusin() {
+			this.focused = true;
+		}
+		_fireItemClick() {
+			this.fireEvent("click", { item: this });
+		}
+		static get dependencies() {
+			return [
+				Icon__default,
+			];
+		}
+	}
+	MediaGalleryItem.define();
+
+	return MediaGalleryItem;
+
+});

package/src/sap/ui/webc/fiori/thirdparty/NotificationListItem.js

@@ -34,7 +34,6 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/Keys', 'sap/ui/webc/common/th
 			},
 			footnotes: {
 				type: HTMLElement,
-				propertyName: "footnotes",
 				individualSlots: true,
 			},
 			"default": {