@collaborne/paper-image-upload-button - npm Package Compare versions

Comparing version 4.0.2 to 4.0.3

dist/paper-image-upload-button.d.ts

@@ -36,7 +36,5 @@ import { LitElement } from 'lit-element';
     protected render(): import("lit-element").TemplateResult;
-    protected firstUpdated(): void;
     protected updated(): void;
     private _onFileChange;
-    private _onTapUpload;
     private readonly fileEl;
 }

dist/paper-image-upload-button.js

@@ -58,3 +58,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 			}
-			:host([canupload]) {
+			:host([canupload]) label, :host([canupload]) .custom-overlay {
 				cursor: pointer;
@@ -88,15 +88,19 @@ }
 
-			.overlay {
+			.custom-overlay, .icon {
 				position: absolute;
-				top: calc(50% - 12px);
-				width: 100%;
-				text-align: center;
 				opacity: 0;
 				transition: opacity 0.25s;
 			}
-
 			.icon {
+				top: calc(50% - 12px);
+				left: calc(50% - 12px);
 				color: white;
 			}
-			:host([canupload]:hover) .overlay, :host([canupload][noimage]) .overlay, :host([uploading]) .overlay {
+			.custom-overlay {
+				top: calc(50% + 12px);
+				width: 100%;
+				text-align: center;
+			}
+
+			:host([canupload]:hover) .icon, :host([canupload][noimage]) .icon, :host([uploading]) .icon, :host([canupload]:hover) .custom-overlay, :host([canupload][noimage]) .custom-overlay, :host([uploading]) .custom-overlay {
 				opacity: 1;
@@ -122,14 +126,15 @@ }
         return html `
-			<div id="image" style="background-image: ${imageUrl}"></div>
-			<div class="overlay">
-				<iron-icon class="icon" icon="${icon}" @click="${this._onTapUpload}"></iron-icon><br>
+			<label for="file" id="image" style="background-image: ${imageUrl}"></label>
+			<label for="file" class="icon"><iron-icon icon="${icon}"></iron-icon></label>
+			<div class="custom-overlay">
 				<slot></slot>
 			</div>
-			<input id="file" type="file" accept="image/*" hidden @change="${this._onFileChange}">`;
+			<input
+				id="file"
+				type="file"
+				accept="image/*"
+				hidden
+				@change="${this._onFileChange}"
+				.disabled="${!this.canUpload}">`;
     }
-    firstUpdated() {
-        // TODO: How to declare event listener declarative on <div>
-        const image = this.shadowRoot.getElementById('image');
-        image.addEventListener('click', this._onTapUpload.bind(this));
-    }
     updated() {
@@ -162,9 +167,2 @@ this.canUpload = !this.disabled && !this.uploading;
     }
-    _onTapUpload() {
-        if (!this.canUpload) {
-            return;
-        }
-        // Trigger file upload
-        this.fileEl.click();
-    }
     get fileEl() {
@@ -171,0 +169,0 @@ return this.shadowRoot.getElementById('file');

package.json

@@ -15,3 +15,3 @@ {
   "name": "@collaborne/paper-image-upload-button",
-  "version": "4.0.2",
+  "version": "4.0.3",
   "main": "dist/paper-image-upload-button.js",
@@ -18,0 +18,0 @@ "types": "dist/paper-image-upload-button.d.ts",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

21597

decreased by-0.55%

Lines of code

223

decreased by-1.76%

No dependency changes