@ui5/webcomponents-fiori 0.0.0-e818f286e → 0.0.0-ebd9a4db3

package/dist/MediaGalleryItem.js

@@ -1,336 +1,238 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
 import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
-import Icon from "@ui5/webcomponents/dist/Icon.js";
-import "@ui5/webcomponents-icons/dist/background.js";
-import MediaGalleryItemLayout from "./types/MediaGalleryItemLayout.js";
-// Template
-import MediaGalleryItemTemplate from "./generated/templates/MediaGalleryItemTemplate.lit.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 // Styles
 import MediaGalleryItemCss from "./generated/themes/MediaGalleryItem.css.js";
-
-/**
- * @public
- */
-const metadata = {
-	tag: "ui5-media-gallery-item",
-	managedSlots: true,
-	properties: /** @lends sap.ui.webcomponents.fiori.MediaGalleryItem.prototype */ {
-
-		/**
-		 * Defines the selected state of the component.
-		 *
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @public
-		 */
-		selected: {
-			type: Boolean,
-		},
-
-		/**
-		 * Defines whether the component is in disabled state.
-		 *
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @public
-		 */
-		disabled: {
-			type: Boolean,
-		},
-
-		/**
-		 * Determines the layout of the item container.
-		 * <br><br>
-		 * Available options are:
-		 * <ul>
-		 * <li><code>Square</code></li>
-		 * <li><code>Wide</code></li>
-		 * </ul>
-		 *
-		 * @type {MediaGalleryItemLayout}
-		 * @defaultvalue "Square"
-		 * @public
-		 */
-		layout: {
-			type: MediaGalleryItemLayout,
-			defaultValue: MediaGalleryItemLayout.Square,
-		},
-
-		/**
-		 * @private
-		 */
-		_interactive: {
-			type: Boolean,
-		},
-
-		/**
-		 * @private
-		 */
-		_square: {
-			type: Boolean,
-		},
-
-		/**
-		 * @private
-		 */
-		_contentImageNotFound: {
-			type: Boolean,
-		},
-
-		/**
-		 * @private
-		 */
-		_thumbnailNotFound: {
-			type: Boolean,
-		},
-
-		/**
-		 * @private
-		 */
-		_thumbnailDesign: {
-			type: Boolean,
-		},
-
-		/**
-		 * Indicates whether the element is focused.
-		 *
-		 * @private
-		 */
-		focused: {
-			type: Boolean,
-		},
-
-		/**
-		 * @private
-		 */
-		_tabIndex: {
-			type: String,
-			defaultValue: undefined,
-		},
-
-		/**
-		 * @private
-		 */
-		contentHeight: {
-			type: String,
-			noAttribute: true,
-			defaultValue: "",
-		},
-	},
-	slots: /** @lends sap.ui.webcomponents.fiori.MediaGalleryItem.prototype */ {
-		/**
-		 * Defines the content of the component.
-		 *
-		 * @type {HTMLElement}
-		 * @slot content
-		 * @public
-		 */
-		 "default": {
-			propertyName: "content",
-			type: HTMLElement,
-		},
-
-		/**
-		 * Defines the content of the thumbnail.
-		 *
-		 * @type {HTMLElement}
-		 * @slot
-		 * @public
-		 */
-		 "thumbnail": {
-			type: HTMLElement,
-		},
-	},
-};
-
+// Template
+import MediaGalleryItemTemplate from "./MediaGalleryItemTemplate.js";
 /**
  * @class
- * <h3 class="comment-api-title">Overview</h3>
- * The <code>ui5-media-gallery-item</code> web component represents the items displayed in the
- * <code>ui5-media-gallery</code> web component.
- * <br><br>
- * <b>Note:</b> <code>ui5-media-gallery-item</code> is not supported when used outside of <code>ui5-media-gallery</code>.
- * <br><br>
+ * ### Overview
+ * The `ui5-media-gallery-item` web component represents the items displayed in the
+ * `ui5-media-gallery` web component.
  *
- * <h3>Keyboard Handling</h3>
- * The <code>ui5-media-gallery</code> provides advanced keyboard handling.
+ * **Note:** `ui5-media-gallery-item` is not supported when used outside of `ui5-media-gallery`.
+ *
+ * ### Keyboard Handling
+ * The `ui5-media-gallery` provides advanced keyboard handling.
  * When focused, the user can use the following keyboard
  * shortcuts in order to perform a navigation:
- * <br>
- * <ul>
- * <li>[SPACE/ENTER/RETURN] - Trigger <code>ui5-click</code> event</li>
- * </ul>
  *
- * <h3>ES6 Module Import</h3>
- * <code>import "@ui5/webcomponents-fiori/dist/MediaGalleryItem.js";</code> (comes with <code>ui5-media-gallery</code>)
+ * - [Space] / [Enter] or [Return] - Trigger `ui5-click` event
  *
+ * ### ES6 Module Import
+ * `import "@ui5/webcomponents-fiori/dist/MediaGalleryItem.js";` (comes with `ui5-media-gallery`)
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webcomponents.fiori.MediaGalleryItem
- * @extends sap.ui.webcomponents.base.UI5Element
- * @tagname ui5-media-gallery-item
+ * @extends UI5Element
  * @public
- * @implements sap.ui.webcomponents.fiori.IMediaGalleryItem
+ * @implements {IMediaGalleryItem}
  * @since 1.1.0
  */
-class MediaGalleryItem extends UI5Element {
-	constructor() {
-		super();
-		this._monitoredContent = null;
-		this._monitoredThumbnail = null;
-	}
-
-	onEnterDOM() {
-		this._thumbnailDesign = !isPhone();
-		this._interactive = !isPhone();
-		this._square = true;
-	}
-
-	static get metadata() {
-		return metadata;
-	}
-
-	static get render() {
-		return litRender;
-	}
-
-	static get styles() {
-		return MediaGalleryItemCss;
-	}
-
-	static get template() {
-		return MediaGalleryItemTemplate;
-	}
-
-	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; // reset flag
-			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; // reset flag
-			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)) { // img still belongs to us
-					callback.call(this, img);
-				}
-			});
-			img.addEventListener("load", () => {
-				if (this.contains(img)) { // img still belongs to us
-					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 (isSpace(event)) {
-			event.preventDefault();
-		}
-
-		if (isEnter(event)) {
-			this._fireItemClick();
-		}
-	}
-
-	_onkeyup(event) {
-		if (isSpace(event)) {
-			this._fireItemClick();
-		}
-	}
-
-	_onfocusout() {
-		this.focused = false;
-	}
-
-	_onfocusin() {
-		this.focused = true;
-	}
-
-	_fireItemClick() {
-		this.fireEvent("click", { item: this });
-	}
-
-	static get dependencies() {
-		return [
-			Icon,
-		];
-	}
-}
-
+let MediaGalleryItem = class MediaGalleryItem extends UI5Element {
+    constructor() {
+        super();
+        /**
+         * Defines the selected state of the component.
+         * @default false
+         * @public
+         */
+        this.selected = false;
+        /**
+         * Defines whether the component is in disabled state.
+         * @default false
+         * @public
+         */
+        this.disabled = false;
+        /**
+         * Determines the layout of the item container.
+         * @default "Square"
+         * @public
+         */
+        this.layout = "Square";
+        /**
+         * @private
+         */
+        this._interactive = !isPhone();
+        /**
+         * @private
+         */
+        this._square = false;
+        /**
+         * @private
+         */
+        this._contentImageNotFound = false;
+        /**
+         * @private
+         */
+        this._thumbnailNotFound = false;
+        /**
+         * @private
+         */
+        this._thumbnailDesign = false;
+        this._monitoredContent = null;
+        this._monitoredThumbnail = null;
+    }
+    onEnterDOM() {
+        this._thumbnailDesign = !isPhone();
+        this._square = true;
+    }
+    get _thumbnail() {
+        return this.thumbnail.length ? this.thumbnail[0] : null;
+    }
+    get displayedContent() {
+        return this.content.length ? this.content[0] : null;
+    }
+    get _isThubmnailAvailable() {
+        return this._thumbnail && !this._thumbnailNotFound;
+    }
+    get _isContentAvailable() {
+        return this.displayedContent && !this._contentImageNotFound;
+    }
+    get _useThumbnail() {
+        return this._thumbnailDesign && this._isThubmnailAvailable;
+    }
+    get _useContent() {
+        return !this._useThumbnail && this._isContentAvailable;
+    }
+    get effectiveTabIndex() {
+        if (this.disabled) {
+            return undefined;
+        }
+        return this.forcedTabIndex ? parseInt(this.forcedTabIndex) : undefined;
+    }
+    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 = false; // reset flag
+            callback = this._updateThumbnailLoaded.bind(this);
+            success = this._attachListeners(this._thumbnail, callback);
+            success && (this._monitoredThumbnail = this._thumbnail);
+        }
+        if (!this._useThumbnail && this.content.length && (this._monitoredContent !== this.displayedContent)) {
+            this._contentImageNotFound = false; // reset flag
+            callback = this._updateContentImageLoaded.bind(this);
+            success = this._attachListeners(this.displayedContent, callback);
+            success && (this._monitoredContent = this.displayedContent);
+        }
+    }
+    _attachListeners(element, callback) {
+        const isImg = element.tagName === "IMG", img = isImg ? element : element.querySelector("img");
+        if (img) {
+            callback(img);
+            img.addEventListener("error", () => {
+                if (this.contains(img)) { // img still belongs to us
+                    callback(img);
+                }
+            });
+            img.addEventListener("load", () => {
+                if (this.contains(img)) { // img still belongs to us
+                    callback(img);
+                }
+            });
+            return true;
+        }
+    }
+    _updateContentImageLoaded(image) {
+        this._contentImageNotFound = image.naturalHeight === 0 && image.naturalWidth === 0;
+    }
+    _updateThumbnailLoaded(image) {
+        this._thumbnailNotFound = image.naturalHeight === 0 && image.naturalWidth === 0;
+    }
+    _onkeydown(e) {
+        if (isSpace(e)) {
+            e.preventDefault();
+        }
+        if (isEnter(e)) {
+            this._fireItemClick();
+        }
+    }
+    _onkeyup(e) {
+        if (isSpace(e)) {
+            this._fireItemClick();
+        }
+    }
+    _fireItemClick() {
+        this.fireDecoratorEvent("click", { item: this });
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], MediaGalleryItem.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean })
+], MediaGalleryItem.prototype, "disabled", void 0);
+__decorate([
+    property()
+], MediaGalleryItem.prototype, "layout", void 0);
+__decorate([
+    property({ type: Boolean })
+], MediaGalleryItem.prototype, "_interactive", void 0);
+__decorate([
+    property({ type: Boolean })
+], MediaGalleryItem.prototype, "_square", void 0);
+__decorate([
+    property({ type: Boolean })
+], MediaGalleryItem.prototype, "_contentImageNotFound", void 0);
+__decorate([
+    property({ type: Boolean })
+], MediaGalleryItem.prototype, "_thumbnailNotFound", void 0);
+__decorate([
+    property({ type: Boolean })
+], MediaGalleryItem.prototype, "_thumbnailDesign", void 0);
+__decorate([
+    property()
+], MediaGalleryItem.prototype, "forcedTabIndex", void 0);
+__decorate([
+    property({ noAttribute: true })
+], MediaGalleryItem.prototype, "contentHeight", void 0);
+__decorate([
+    slot({ type: HTMLElement, "default": true })
+], MediaGalleryItem.prototype, "content", void 0);
+__decorate([
+    slot()
+], MediaGalleryItem.prototype, "thumbnail", void 0);
+MediaGalleryItem = __decorate([
+    customElement({
+        tag: "ui5-media-gallery-item",
+        renderer: jsxRenderer,
+        styles: MediaGalleryItemCss,
+        template: MediaGalleryItemTemplate,
+    })
+    /**
+     * @private
+     */
+    ,
+    event("click", {
+        bubbles: true,
+    })
+], MediaGalleryItem);
 MediaGalleryItem.define();
-
 export default MediaGalleryItem;
+//# sourceMappingURL=MediaGalleryItem.js.map

package/dist/MediaGalleryItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaGalleryItem.js","sourceRoot":"","sources":["../src/MediaGalleryItem.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport { isSpace, isEnter } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport { isPhone } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport type MediaGalleryItemLayout from \"./types/MediaGalleryItemLayout.js\";\nimport type { IMediaGalleryItem } from \"./MediaGallery.js\";\n\n// Styles\nimport MediaGalleryItemCss from \"./generated/themes/MediaGalleryItem.css.js\";\n\n// Template\nimport MediaGalleryItemTemplate from \"./MediaGalleryItemTemplate.js\";\n\n/**\n * @class\n * ### Overview\n * The `ui5-media-gallery-item` web component represents the items displayed in the\n * `ui5-media-gallery` web component.\n *\n * **Note:** `ui5-media-gallery-item` is not supported when used outside of `ui5-media-gallery`.\n *\n * ### Keyboard Handling\n * The `ui5-media-gallery` provides advanced keyboard handling.\n * When focused, the user can use the following keyboard\n * shortcuts in order to perform a navigation:\n *\n * - [Space] / [Enter] or [Return] - Trigger `ui5-click` event\n *\n * ### ES6 Module Import\n * `import \"@ui5/webcomponents-fiori/dist/MediaGalleryItem.js\";` (comes with `ui5-media-gallery`)\n * @constructor\n * @extends UI5Element\n * @public\n * @implements {IMediaGalleryItem}\n * @since 1.1.0\n */\n@customElement({\n\ttag: \"ui5-media-gallery-item\",\n\trenderer: jsxRenderer,\n\tstyles: MediaGalleryItemCss,\n\ttemplate: MediaGalleryItemTemplate,\n})\n/**\n * @private\n */\n@event(\"click\", {\n\tbubbles: true,\n})\nclass MediaGalleryItem extends UI5Element implements IMediaGalleryItem {\n\teventDetails!: {\n\t\tclick: { item: MediaGalleryItem },\n\t}\n\t/**\n\t * Defines the selected state of the component.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tselected = false;\n\n\t/**\n\t * Defines whether the component is in disabled state.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tdisabled = false;\n\n\t/**\n\t * Determines the layout of the item container.\n\t * @default \"Square\"\n\t * @public\n\t */\n\t@property()\n\tlayout: `${MediaGalleryItemLayout}` = \"Square\";\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_interactive = !isPhone();\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_square = false\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_contentImageNotFound = false;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_thumbnailNotFound = false;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_thumbnailDesign = false;\n\n\t/**\n\t * @private\n\t */\n\t@property()\n\tforcedTabIndex?: string;\n\n\t/**\n\t * @private\n\t */\n\t@property({ noAttribute: true })\n\tcontentHeight?: string;\n\n\t/**\n\t * Defines the content of the component.\n\t * @public\n\t */\n\t@slot({ type: HTMLElement, \"default\": true })\n\tcontent!: Array<HTMLElement>;\n\n\t/**\n\t * Defines the content of the thumbnail.\n\t * @public\n\t */\n\t@slot()\n\tthumbnail!: Array<HTMLElement>;\n\n\t_monitoredThumbnail: HTMLElement | null;\n\t_monitoredContent: HTMLElement | null;\n\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis._monitoredContent = null;\n\t\tthis._monitoredThumbnail = null;\n\t}\n\n\tonEnterDOM() {\n\t\tthis._thumbnailDesign = !isPhone();\n\t\tthis._square = true;\n\t}\n\n\tget _thumbnail() {\n\t\treturn this.thumbnail.length ? this.thumbnail[0] : null;\n\t}\n\n\tget displayedContent() {\n\t\treturn this.content.length ? this.content[0] : null;\n\t}\n\n\tget _isThubmnailAvailable() {\n\t\treturn this._thumbnail && !this._thumbnailNotFound;\n\t}\n\n\tget _isContentAvailable() {\n\t\treturn this.displayedContent && !this._contentImageNotFound;\n\t}\n\n\tget _useThumbnail() {\n\t\treturn this._thumbnailDesign && this._isThubmnailAvailable;\n\t}\n\n\tget _useContent() {\n\t\treturn !this._useThumbnail && this._isContentAvailable;\n\t}\n\n\tget effectiveTabIndex() {\n\t\tif (this.disabled) {\n\t\t\treturn undefined;\n\t\t}\n\t\treturn this.forcedTabIndex ? parseInt(this.forcedTabIndex) : undefined;\n\t}\n\n\tget _showBackgroundIcon() {\n\t\treturn this._thumbnailNotFound || this._contentImageNotFound;\n\t}\n\n\tget styles() {\n\t\treturn {\n\t\t\twrapper: {\n\t\t\t\theight: this.contentHeight,\n\t\t\t},\n\t\t};\n\t}\n\n\tget _role() {\n\t\treturn this._interactive ? \"button\" : undefined;\n\t}\n\n\tonBeforeRendering() {\n\t\tthis._monitorLoadingError();\n\t}\n\n\t_monitorLoadingError() {\n\t\tlet callback,\n\t\t\tsuccess;\n\t\tif (this._thumbnailDesign && this.thumbnail.length && (this._monitoredThumbnail !== this._thumbnail)) {\n\t\t\tthis._thumbnailNotFound = false; // reset flag\n\t\t\tcallback = this._updateThumbnailLoaded.bind(this);\n\t\t\tsuccess = this._attachListeners(this._thumbnail as HTMLImageElement, callback);\n\t\t\tsuccess && (this._monitoredThumbnail = this._thumbnail);\n\t\t}\n\t\tif (!this._useThumbnail && this.content.length && (this._monitoredContent !== this.displayedContent)) {\n\t\t\tthis._contentImageNotFound = false; // reset flag\n\t\t\tcallback = this._updateContentImageLoaded.bind(this);\n\t\t\tsuccess = this._attachListeners(this.displayedContent as HTMLImageElement, callback);\n\t\t\tsuccess && (this._monitoredContent = this.displayedContent);\n\t\t}\n\t}\n\n\t_attachListeners(element: HTMLImageElement, callback: (image: HTMLImageElement) => void) {\n\t\tconst isImg = element.tagName === \"IMG\",\n\t\t\timg = isImg ? element : element.querySelector(\"img\");\n\t\tif (img) {\n\t\t\tcallback(img);\n\t\t\timg.addEventListener(\"error\", () => {\n\t\t\t\tif (this.contains(img)) { // img still belongs to us\n\t\t\t\t\tcallback(img);\n\t\t\t\t}\n\t\t\t});\n\t\t\timg.addEventListener(\"load\", () => {\n\t\t\t\tif (this.contains(img)) { // img still belongs to us\n\t\t\t\t\tcallback(img);\n\t\t\t\t}\n\t\t\t});\n\t\t\treturn true;\n\t\t}\n\t}\n\n\t_updateContentImageLoaded(image: HTMLImageElement) {\n\t\tthis._contentImageNotFound = image.naturalHeight === 0 && image.naturalWidth === 0;\n\t}\n\n\t_updateThumbnailLoaded(image: HTMLImageElement) {\n\t\tthis._thumbnailNotFound = image.naturalHeight === 0 && image.naturalWidth === 0;\n\t}\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\tif (isSpace(e)) {\n\t\t\te.preventDefault();\n\t\t}\n\n\t\tif (isEnter(e)) {\n\t\t\tthis._fireItemClick();\n\t\t}\n\t}\n\n\t_onkeyup(e: KeyboardEvent) {\n\t\tif (isSpace(e)) {\n\t\t\tthis._fireItemClick();\n\t\t}\n\t}\n\n\t_fireItemClick() {\n\t\tthis.fireDecoratorEvent(\"click\", { item: this });\n\t}\n}\n\nMediaGalleryItem.define();\n\nexport default MediaGalleryItem;\n"]}

package/dist/MediaGalleryItemTemplate.d.ts

@@ -0,0 +1,2 @@
+import type MediaGalleryItem from "./MediaGalleryItem.js";
+export default function MediaGalleryItemTemplate(this: MediaGalleryItem): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;

package/dist/MediaGalleryItemTemplate.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import background from "@ui5/webcomponents-icons/dist/background.js";
+export default function MediaGalleryItemTemplate() {
+    return (_jsxs("div", { class: "ui5-media-gallery-item-root", tabindex: this.effectiveTabIndex, "data-sap-focus-ref": true, onKeyDown: this._onkeydown, onKeyUp: this._onkeyup, role: this._role, children: [_jsx("div", { class: "ui5-media-gallery-item-mask-layer" }), _jsxs("div", { class: "ui5-media-gallery-item-wrapper", style: this.styles.wrapper, children: [this._showBackgroundIcon && _jsx(Icon, { name: background }), this._useContent && _jsx("slot", {}), this._useThumbnail && _jsx("slot", { name: "thumbnail" })] })] }));
+}
+//# sourceMappingURL=MediaGalleryItemTemplate.js.map

package/dist/MediaGalleryItemTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaGalleryItemTemplate.js","sourceRoot":"","sources":["../src/MediaGalleryItemTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,IAAI,MAAM,iCAAiC,CAAC;AACnD,OAAO,UAAU,MAAM,6CAA6C,CAAC;AAErE,MAAM,CAAC,OAAO,UAAU,wBAAwB;IAC/C,OAAO,CACN,eAAK,KAAK,EAAC,6BAA6B,EACvC,QAAQ,EAAE,IAAI,CAAC,iBAAiB,8BAEhC,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,IAAI,EAAE,IAAI,CAAC,KAAK,aAEhB,cAAK,KAAK,EAAC,mCAAmC,GAAO,EACrD,eAAK,KAAK,EAAC,gCAAgC,EAAC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,aACpE,IAAI,CAAC,mBAAmB,IAAI,KAAC,IAAI,IAAC,IAAI,EAAE,UAAU,GAAG,EACrD,IAAI,CAAC,WAAW,IAAI,gBAAQ,EAC5B,IAAI,CAAC,aAAa,IAAI,eAAM,IAAI,EAAC,WAAW,GAAG,IAC3C,IACD,CACN,CAAC;AACH,CAAC","sourcesContent":["import type MediaGalleryItem from \"./MediaGalleryItem.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport background from \"@ui5/webcomponents-icons/dist/background.js\";\n\nexport default function MediaGalleryItemTemplate(this: MediaGalleryItem) {\n\treturn (\n\t\t<div class=\"ui5-media-gallery-item-root\"\n\t\t\ttabindex={this.effectiveTabIndex}\n\t\t\tdata-sap-focus-ref\n\t\t\tonKeyDown={this._onkeydown}\n\t\t\tonKeyUp={this._onkeyup}\n\t\t\trole={this._role}\n\t\t>\n\t\t\t<div class=\"ui5-media-gallery-item-mask-layer\"></div>\n\t\t\t<div class=\"ui5-media-gallery-item-wrapper\" style={this.styles.wrapper}>\n\t\t\t\t{this._showBackgroundIcon && <Icon name={background}/>}\n\t\t\t\t{this._useContent && <slot />}\n\t\t\t\t{this._useThumbnail && <slot name=\"thumbnail\" />}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"]}

package/dist/MediaGalleryTemplate.d.ts

@@ -0,0 +1,2 @@
+import type MediaGallery from "./MediaGallery.js";
+export default function MediaGalleryTemplate(this: MediaGallery): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;

package/dist/MediaGalleryTemplate.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
+import MediaGalleryItem from "./MediaGalleryItem.js";
+import Carousel from "@ui5/webcomponents/dist/Carousel.js";
+import Button from "@ui5/webcomponents/dist/Button.js";
+export default function MediaGalleryTemplate() {
+    return (_jsxs("div", { class: "ui5-media-gallery-root", children: [_jsx("div", { class: "ui5-media-gallery-display-wrapper", children: _jsx("div", { class: "ui5-media-gallery-display", onClick: this._onDisplayAreaClick, children: this._isPhonePlatform
+                        ? _jsx(Carousel, { onNavigate: this._onCarouselNavigate, hideNavigationArrows: true, children: this._selectableItems.map(item => _jsx("slot", { name: item._individualSlot })) })
+                        : _jsx(MediaGalleryItem, { _interactive: this.interactiveDisplayArea, _square: this._shouldHaveSquareDisplay, tabIndex: this._mainItemTabIndex }) }) }), this._showThumbnails && _jsx("div", { class: "ui5-media-gallery-thumbnails-wrapper", children: _jsxs("ul", { children: [this._visibleItems.map(item => _jsx("li", { id: item.id, class: "ui5-media-gallery-thumbnail", role: "option", onClick: this._onThumbnailClick, children: _jsx("slot", { name: item._individualSlot }) })), this._showOverflowBtn && _jsx("li", { class: "ui5-media-gallery-overflow", children: _jsxs(Button, { onClick: this._onOverflowBtnClick, children: ["+", this._overflowSize] }) })] }) })] }));
+}
+//# sourceMappingURL=MediaGalleryTemplate.js.map

package/dist/MediaGalleryTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaGalleryTemplate.js","sourceRoot":"","sources":["../src/MediaGalleryTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,gBAAgB,MAAM,uBAAuB,CAAC;AACrD,OAAO,QAAQ,MAAM,qCAAqC,CAAC;AAC3D,OAAO,MAAM,MAAM,mCAAmC,CAAC;AAEvD,MAAM,CAAC,OAAO,UAAU,oBAAoB;IAC3C,OAAO,CACN,eAAK,KAAK,EAAC,wBAAwB,aAClC,cAAK,KAAK,EAAC,mCAAmC,YAC7C,cAAK,KAAK,EAAC,2BAA2B,EACrC,OAAO,EAAE,IAAI,CAAC,mBAAmB,YAChC,IAAI,CAAC,gBAAgB;wBACrB,CAAC,CAAC,KAAC,QAAQ,IACV,UAAU,EAAE,IAAI,CAAC,mBAAmB,EACpC,oBAAoB,EAAE,IAAI,YAEzB,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CACjC,eAAM,IAAI,EAAE,IAAI,CAAC,eAAe,GAAS,CACzC,GACS;wBACX,CAAC,CAAC,KAAC,gBAAgB,IAClB,YAAY,EAAE,IAAI,CAAC,sBAAsB,EACzC,OAAO,EAAE,IAAI,CAAC,wBAAwB,EACtC,QAAQ,EAAE,IAAI,CAAC,iBAAiB,GACb,GAEhB,GACD,EAEL,IAAI,CAAC,eAAe,IAAI,cAAK,KAAK,EAAC,sCAAsC,YACzE,yBACE,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAC9B,aAAI,EAAE,EAAE,IAAI,CAAC,EAAE,EACd,KAAK,EAAC,6BAA6B,EACnC,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,iBAAiB,YAE/B,eAAM,IAAI,EAAE,IAAI,CAAC,eAAe,GAAS,GACrC,CACL,EACA,IAAI,CAAC,gBAAgB,IAAI,aAAI,KAAK,EAAC,4BAA4B,YAC/D,MAAC,MAAM,IAAC,OAAO,EAAE,IAAI,CAAC,mBAAmB,kBACtC,IAAI,CAAC,aAAa,IACZ,GACL,IACD,GACA,IACD,CACN,CAAC;AACH,CAAC","sourcesContent":["import type MediaGallery from \"./MediaGallery.js\";\nimport MediaGalleryItem from \"./MediaGalleryItem.js\";\nimport Carousel from \"@ui5/webcomponents/dist/Carousel.js\";\nimport Button from \"@ui5/webcomponents/dist/Button.js\";\n\nexport default function MediaGalleryTemplate(this: MediaGallery) {\n\treturn (\n\t\t<div class=\"ui5-media-gallery-root\">\n\t\t\t<div class=\"ui5-media-gallery-display-wrapper\">\n\t\t\t\t<div class=\"ui5-media-gallery-display\"\n\t\t\t\t\tonClick={this._onDisplayAreaClick}>\n\t\t\t\t\t{this._isPhonePlatform\n\t\t\t\t\t\t? <Carousel\n\t\t\t\t\t\t\tonNavigate={this._onCarouselNavigate}\n\t\t\t\t\t\t\thideNavigationArrows={true}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{this._selectableItems.map(item =>\n\t\t\t\t\t\t\t\t<slot name={item._individualSlot}></slot>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</Carousel>\n\t\t\t\t\t\t: <MediaGalleryItem\n\t\t\t\t\t\t\t_interactive={this.interactiveDisplayArea}\n\t\t\t\t\t\t\t_square={this._shouldHaveSquareDisplay}\n\t\t\t\t\t\t\ttabIndex={this._mainItemTabIndex}\n\t\t\t\t\t\t></MediaGalleryItem>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t{this._showThumbnails && <div class=\"ui5-media-gallery-thumbnails-wrapper\">\n\t\t\t\t<ul>\n\t\t\t\t\t{this._visibleItems.map(item =>\n\t\t\t\t\t\t<li id={item.id}\n\t\t\t\t\t\t\tclass=\"ui5-media-gallery-thumbnail\"\n\t\t\t\t\t\t\trole=\"option\"\n\t\t\t\t\t\t\tonClick={this._onThumbnailClick}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<slot name={item._individualSlot}></slot>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t)}\n\t\t\t\t\t{this._showOverflowBtn && <li class=\"ui5-media-gallery-overflow\">\n\t\t\t\t\t\t<Button onClick={this._onOverflowBtnClick}>\n\t\t\t\t\t\t\t+{this._overflowSize}\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</li>}\n\t\t\t\t</ul>\n\t\t\t</div>}\n\t\t</div>\n\t);\n}\n"]}