Added placeholder functionality to editable image and more control over the width/height of the image.

editable-image.js

@@ -24,7 +24,7 @@ class EditableImage extends IgniteElement {
                 flex: 1;
             }
 
-            mt-editable-image:hover:after {
+            mt-editable-image.source:hover:after {
                 position: absolute;
                 font-family: 'Font Awesome 5 Pro';
                 font-weight: 900;
@@ -36,7 +36,7 @@ class EditableImage extends IgniteElement {
                 justify-content: center;
             }
 
-            mt-editable-image:hover {
+            mt-editable-image.source:hover {
                 cursor: pointer;
                 filter: brightness(0.9);
             }
@@ -49,18 +49,31 @@ class EditableImage extends IgniteElement {
             fileInput: null,
             onChange: null,
             objectFit: "contain",
-            objectPosition: "center"
+            objectPosition: "center",
+            width: null,
+            maxWidth: null,
+            height: null,
+            maxHeight: null,
+            placeholder: null
         };
     }
 
     render() {
         return this.template
             .onClick(() => this.onClick())
+            .class(this.source, value => { return value != null ? "source" : null; })
             .child(
+                new div()
+                    .hide(this.source, value => { return value != null; })
+                    .child(this.placeholder),
                 new img()
                     .src(this.source)
                     .style("object-fit", this.objectFit)
                     .style("object-position", this.objectPosition)
+                    .style("width", this.width)
+                    .style("max-width", this.maxWidth)
+                    .style("height", this.height)
+                    .style("max-height", this.maxHeight)
                     .hide(this.source, value => { return value == null; }),
                 new input()
                     .type("file")