mendix · Keraito · Sep 1, 2021 · Aug 31, 2021 · Aug 31, 2021 · Aug 31, 2021
@@ -0,0 +1 @@
+Please see [Image](https://docs.mendix.com/appstore/widgets/image) in the Mendix documentation for details.
@@ -1,6 +1,6 @@
 {
-  "name": "image-viewer-web",
-  "widgetName": "ImageViewer",
+  "name": "image-web",
+  "widgetName": "Image",
   "version": "1.0.0",
   "description": "Display an image and enlarge it on click",
   "copyright": "© Mendix Technology BV 2021. All rights reserved.",

@@ -2,7 +2,7 @@ import { parseStyle } from "@mendix/piw-utils-internal";
 import { WebIcon } from "mendix";
 import { createElement, ReactElement } from "react";
 import { ImageViewerPreviewProps } from "../typings/ImageViewerProps";
-import { ImageViewer as ImageViewerComponent } from "./components/ImageViewer/index";
+import { ImageViewer as ImageViewerComponent } from "./components/Image/index";
 
 import ImageViewerPlaceholder from "./assets/placeholder.svg";
 
@@ -58,5 +58,5 @@ export function preview(props: ImageViewerPreviewProps): ReactElement | null {
 }
 
 export function getPreviewCss(): string {
-    return require("./ui/ImageViewer.scss");
+    return require("./ui/Image.scss");
 }
@@ -1,7 +1,7 @@
 import { ValueStatus } from "mendix";
 import { createElement, FunctionComponent, useCallback } from "react";
 import { ImageViewerContainerProps } from "../typings/ImageViewerProps";
-import { ImageViewer as ImageViewerComponent, ImageViewerImageProps } from "./components/ImageViewer/index";
+import { ImageViewer as ImageViewerComponent, ImageViewerImageProps } from "./components/Image/index";
 
 function getImageProps({
     datasource,

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8" ?>
-<widget id="com.mendix.widget.web.imageviewer.ImageViewer" needsEntityContext="false" offlineCapable="true" xmlns="http://www.mendix.com/widget/1.0/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.mendix.com/widget/1.0/ ../../../node_modules/mendix/custom_widget.xsd" pluginWidget="true">
+<widget id="com.mendix.widget.web.image.Image" needsEntityContext="false" offlineCapable="true" xmlns="http://www.mendix.com/widget/1.0/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.mendix.com/widget/1.0/ ../../../node_modules/mendix/custom_widget.xsd" pluginWidget="true">
     <name>Image viewer</name>
     <description>Display an image and enlarge it on click.</description>
     <icon>iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAABnlBMVEUAAAD///+A//9V//+Av/9mzP9gv/9Vxv9Ns/9duf9Vv/9Osf9Jtv9Vu/9Qv/9LtP9RvP9Jtv9Osf9Ktf9Ms/9Puf9Ns/9Ktf9Ms/hKtfhOsfhNs/lLtPlLtPlKtflIsflMs/pJsfpNs/pIsvpKsPpLtPtKsftJsvtJsvdJs/hLtPhKsfhJsvhXV1dLsflKsvlKsvlKsvlKsvpKsvdKs/dJsfdIsvhKsPhJsfhKsPhJsvhKsfhIsPlKsflJsPlKsflIsflJsvdKsvdJsfhJsPhJsfhKsvhIsvhJsfhIsPhKsfhJsvlJsfdJsfdIsPdKsfdJsfdJsfdIsfdIsfhIsfhIsfhJsfhJsfhIsPhJsPhIsfhJsfdJsfdJsfdJsfdIsPdJsfdJsPhIsfhJsfhIsfhJsfhIsfhJsfhJsPhJsfhJsfhIsfhIsPhJsfdIsPdJsPdVVVVJsfdJsfdJsfdIsPdJsfdIsPdIsPdJsfhJsPhIsPhJsfhIsPhIsfhJsfhJsPhIsfhJsfhJsPhIsPhIsfhJsPhJsPhIsfhIsPdVVVU8lPiOAAAAiHRSTlMAAQIDBAUICQoLDA0ODxARExUXGBsdHh8lJicoKSwtLi8xMjU3PT4/QkZHSElJUlNWWV1gZGVqa2xucHV4eXt8f4SHiYuMjpGTm5yeoKGio6SnqaqtsbO2uLm+wMHEyMnLzM3O0NHU1dba3d7f4eLj4+Tn6Onr7O3u7/Dy8/T19vf4+fr7/P3+LOCsiQAAAeRJREFUeAHt1/lTEmEYwPHHhYyiLEjtPtLu0siOsLL7MLtNOjRLs8MyU7Q7K4hyv/7Xve/sLrAzArPvMFPT7Oen9wf4MsDz7OyKI9QxvWBgukM8Ru9XBfEsGKpvQAL6/wORY48+5ieu7zIN7HiG4+5yo0B7Hs/oMoNA4i0lN4IHkreA+Ssbmva/BOztAQP7nqL1iBJ7BfQGCxy30WYt0Q4C44ECbb9Qih+7BpgLFLgN2BOF0WbTQBboFEsUs6/wDXBnx+xHfAKcXuKcV5j8jZdwmQ7SqhlcpqO8e5Yi/zJt6ZvMTfXvrBWQRO+YOws/feucLqDZFwwvKJ02rrRRIPkBz/dmk8AAkDsU3/sJuGkQSKGcVIejgN1eM9DYfX/yx+uH3S3iSLwHHkfUyXoODNcKdGVx/L62VrR+IL9JtD0oqaoB6yIlubS7UpwSRwZ401gl0HAHn0xs9TtgJCKOdQWgp0rgPEr+3PrYxhMv0IYH9FBtFs9l4GuyYqALJeu83Dr8GdcZKWrSI9FXKdAyB0y1iqt1BI2xqJSkgfltFQL39Ki1SVF8CKWwVcpEx4HBxQMplCNSZukgcFZ8DqAsGojPAEMNUm5l5svVqPg9cAP/2D1SeJcWBsLA398F84euOj32hf4AR3v7uNFLZj0AAAAASUVORK5CYII=</icon>

@@ -4,7 +4,7 @@ import { useLightboxState } from "../../utils/lightboxState";
 import { ImageViewerUi, ImageViewerContentProps } from "./ui";
 import { Lightbox, LightboxProps } from "../Lightbox";
 
-import "../../ui/ImageViewer.scss";
+import "../../ui/Image.scss";
 
 export type ImageViewerImageProps = {
     type: "image" | "icon";

@@ -3,7 +3,7 @@ import classNames from "classnames";
 import { HeightUnitEnum, WidthUnitEnum } from "../../../typings/ImageViewerProps";
 import { LightboxProps } from "../Lightbox";
 
-import "../../ui/ImageViewer.scss";
+import "../../ui/Image.scss";
 
 function getStyle(value: string | number, type: WidthUnitEnum | HeightUnitEnum): number | string {
     // when type is auto default browser styles applies

@@ -1,6 +1,6 @@
 import { createElement } from "react";
 import { mount, render } from "enzyme";
-import { ImageViewer, ImageViewerProps } from "../ImageViewer/index";
+import { ImageViewer, ImageViewerProps } from "../Image/index";
 import { Lightbox } from "../Lightbox";
 import { ModalProps } from "react-overlays/esm/Modal";
 

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<package xmlns="http://www.mendix.com/package/1.0/">
+    <clientModule name="Image" version="1.0.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+        <widgetFiles>
+            <widgetFile path="Image.xml"/>
+        </widgetFiles>
+        <files>
+            <file path="com/mendix/widget/web/image"/>
+        </files>
+    </clientModule>
+</package>
@@ -0,0 +1,59 @@
+/**
+ * This file was generated from Image.xml
+ * WARNING: All changes made to this file will be overwritten
+ * @author Mendix UI Content Team
+ */
+import { CSSProperties } from "react";
+import { ActionValue, DynamicValue, WebIcon, WebImage } from "mendix";
+
+export type DatasourceEnum = "image" | "imageUrl" | "icon";
+
+export type OnClickTypeEnum = "action" | "enlarge";
+
+export type WidthUnitEnum = "auto" | "pixels" | "percentage";
+
+export type HeightUnitEnum = "auto" | "pixels";
+
+export type DisplayAsEnum = "fullImage" | "thumbnail";
+
+export interface ImageContainerProps {
+    name: string;
+    class: string;
+    style?: CSSProperties;
+    tabIndex?: number;
+    datasource: DatasourceEnum;
+    imageObject?: DynamicValue<WebImage>;
+    defaultImageDynamic?: DynamicValue<WebImage>;
+    imageUrl?: DynamicValue<string>;
+    imageIcon?: DynamicValue<WebIcon>;
+    onClickType: OnClickTypeEnum;
+    onClick?: ActionValue;
+    alternativeText?: DynamicValue<string>;
+    widthUnit: WidthUnitEnum;
+    width: number;
+    heightUnit: HeightUnitEnum;
+    height: number;
+    iconSize: number;
+    displayAs: DisplayAsEnum;
+    responsive: boolean;
+}
+
+export interface ImagePreviewProps {
+    class: string;
+    style: string;
+    datasource: DatasourceEnum;
+    imageObject: string;
+    defaultImageDynamic: string;
+    imageUrl: string;
+    imageIcon: { type: "glyph"; iconClass: string; } | { type: "image"; imageUrl: string; } | null;
+    onClickType: OnClickTypeEnum;
+    onClick: {} | null;
+    alternativeText: string;
+    widthUnit: WidthUnitEnum;
+    width: number | null;
+    heightUnit: HeightUnitEnum;
+    height: number | null;
+    iconSize: number | null;
+    displayAs: DisplayAsEnum;
+    responsive: boolean;
+}
diff --git a/...-viewer-web/typings/ImageViewerProps.d.ts → ...s/image-web/typings/ImageViewerProps.d.ts b/...-viewer-web/typings/ImageViewerProps.d.ts → ...s/image-web/typings/ImageViewerProps.d.ts
@@ -5,6 +5,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+## [9.5.0] - 2021-08-31
+
 ### Added
 - We added support for icon and tile images. Now you can use an image file instead of `<icon>` in your `MyWidget.xml`. In order to use, please make sure you follow the pattern `src/MyWidget.icon.png` (24x24px) and `src/MyWidget.tile.png` (256x192px)
 

@@ -1,6 +1,6 @@
 {
   "name": "@mendix/pluggable-widgets-tools",
-  "version": "9.4.3",
+  "version": "9.5.0",
   "description": "Mendix Pluggable Widgets Tools",
   "license": "Apache-2.0",
   "copyright": "© Mendix Technology BV 2021. All rights reserved.",