feat(input): interface for disabling clear and upload

demo/src/app/demo/components/demo.component.html

@@ -5,4 +5,5 @@
   <events></events>
   <styles></styles>
   <uploaded></uploaded>
+  <disabled></disabled>
 </div>

demo/src/app/demo/components/disabled/disabled.component.html

@@ -0,0 +1,5 @@
+<h4 class="mb-3 mt-5">Disable component</h4>
+
+<image-upload url="https://httpbin.org/status/200" [disabled]="true"></image-upload>
+
+<pre><code class="language-markup"><![CDATA[<image-upload url="https://httpbin.org/status/200" [disabled]="true"></image-upload>]]></code></pre>

demo/src/app/demo/components/disabled/disabled.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+import { UploadMetadata } from '../../../../lib/image-upload/before-upload.interface';
+
+@Component({
+  selector: 'disabled',
+  templateUrl: './disabled.component.html'
+})
+export class DisabledExampleComponent { }

demo/src/app/demo/demo.module.ts

@@ -7,7 +7,8 @@ import { DemoComponent } from './components/demo.component';
 import { EventsComponent } from './components/events/events.component';
 import { FilterExampleComponent } from './components/filter/filter.component';
 import { StyleComponent } from './components/style/style.component';
-import {UploadedExampleComponent} from "./components/uploaded/uploaded.component";
+import { UploadedExampleComponent } from "./components/uploaded/uploaded.component";
+import { DisabledExampleComponent } from 'app/demo/components/disabled/disabled.component';
 
 @NgModule({
   declarations: [
@@ -17,7 +18,8 @@ import {UploadedExampleComponent} from "./components/uploaded/uploaded.component
     CustomiseComponent,
     EventsComponent,
     StyleComponent,
-    UploadedExampleComponent
+    UploadedExampleComponent,
+    DisabledExampleComponent,
   ],
   imports: [
     ImageUploadModule

src/image-upload/image-upload.component.css

@@ -40,13 +40,19 @@ label.img-ul-button input[type=file] {
     background-color: #FF0000;
 }
 
+.img-ul-clear:disabled {
+    background-color: #FF6464;
+    cursor: default;
+}
+
 .img-ul-upload {
     background-color: var(--active-color);
 }
 
 .img-ul-button {
     -moz-box-shadow: 2px 2px 4px 0 rgba(148, 148, 148, 0.6);
     -webkit-box-shadow: 2px 2px 4px 0 rgba(148, 148, 148, 0.6);
+    border: none;
     box-shadow: 2px 2px 4px 0 rgba(148, 148, 148, 0.6);
     color: #FFF;
     cursor: pointer;
@@ -123,6 +129,10 @@ label.img-ul-button input[type=file] {
     transform: rotate(-45deg);
 }
 
+.img-ul-x-mark.img-ul-disabled {
+    display: none;
+}
+
 .img-ul-loading-overlay {
     background-color: #000;
     bottom: 0;
@@ -155,6 +165,15 @@ label.img-ul-button input[type=file] {
     padding: 0 15px;
 }
 
+.img-ul-upload.img-ul-disabled {
+    background-color: #86E9C9;
+    cursor: default;
+}
+
+.img-ul-upload.img-ul-disabled:active span {
+    top: 0px;
+}
+
 @-webkit-keyframes spinner {
   0% {
     -webkit-transform: rotate(0deg);

src/image-upload/image-upload.component.html

@@ -10,17 +10,23 @@
   <div class="img-ul-file-upload img-ul-hr-inline-group">    
     <label *ngIf="fileCounter != max"
       class="img-ul-upload img-ul-button" 
-      [ngStyle]="style?.selectButton">
+      [ngStyle]="style?.selectButton"
+      [ngClass]="{'img-ul-disabled': disabled}">
       <span [innerText]="buttonCaption"></span>
       <input
         type="file"
+        [disabled]="disabled"
         [accept]="supportedExtensions"
         multiple (change)="onFileChange(input.files)"
         #input>
     </label>
-    <label *ngIf="fileCounter > 0" class="img-ul-clear img-ul-button" (click)="deleteAll()" [ngStyle]="style?.clearButton">
-      <span [innerText]="clearButtonCaption"></span>
-    </label>
+    <button *ngIf="fileCounter > 0"
+      [disabled]="disabled"
+      class="img-ul-clear img-ul-button" 
+      (click)="deleteAll()" 
+      [ngStyle]="style?.clearButton"
+      [innerText]="clearButtonCaption">
+    </button>
     <div class="img-ul-drag-box-msg" [innerText]="dropBoxMessage"></div>
   </div>
 
@@ -35,7 +41,10 @@
       <div *ngIf="file.pending" class="img-ul-loading-overlay">
         <div class="img-ul-spinning-circle"></div>
       </div>
-      <div *ngIf="!file.pending" class="img-ul-x-mark" (click)="deleteFile(file)">
+      <div *ngIf="!file.pending" 
+        [ngClass]="{'img-ul-disabled': disabled}" 
+        class="img-ul-x-mark" 
+        (click)="deleteFile(file)">
         <span class="img-ul-close"></span>
       </div>
     </div>

src/image-upload/image-upload.component.ts

@@ -27,6 +27,7 @@ export class ImageUploadComponent implements OnInit, OnChanges {
 
   @Input() beforeUpload: (UploadMetadata) => UploadMetadata | Promise<UploadMetadata> = data => data;
   @Input() buttonCaption = 'Select Images';
+  @Input() disabled = false;
   @Input('class') cssClass = 'img-ul';
   @Input() clearButtonCaption = 'Clear';
   @Input() dropBoxMessage = 'Drop your images here!';
@@ -81,6 +82,8 @@ export class ImageUploadComponent implements OnInit, OnChanges {
   }
 
   onFileChange(files: FileList) {
+    if (this.disabled) return;
+
     let remainingSlots = this.countRemainingSlots();
     let filesToUploadNum = files.length > remainingSlots ? remainingSlots : files.length;