@dile/ui 3.13.1 → 3.14.0

package/components/drop-file/drop-file.spec.js

@@ -30,4 +30,52 @@ describe('dile-drop-file', () => {
 
     expect(el.fileName).toBe('');
   });
+
+  it('renders accept attribute when accept property is defined', async () => {
+    const el = await renderDropFile('<dile-drop-file accept="application/pdf,image/*"></dile-drop-file>');
+    const fileInput = el.shadowRoot.querySelector('input[type="file"]');
+    expect(fileInput.getAttribute('accept')).toBe('application/pdf,image/*');
+  });
+
+  it('does not render accept attribute when accept property is empty', async () => {
+    const el = await renderDropFile('<dile-drop-file accept=""></dile-drop-file>');
+    const fileInput = el.shadowRoot.querySelector('input[type="file"]');
+    expect(fileInput.getAttribute('accept')).toBeNull();
+  });
+
+  it('renders capture attribute when capture property is defined', async () => {
+    const el = await renderDropFile('<dile-drop-file capture="environment"></dile-drop-file>');
+    const fileInput = el.shadowRoot.querySelector('input[type="file"]');
+    expect(fileInput.getAttribute('capture')).toBe('environment');
+  });
+
+  it('does not render capture attribute when capture property is empty', async () => {
+    const el = await renderDropFile('<dile-drop-file capture=""></dile-drop-file>');
+    const fileInput = el.shadowRoot.querySelector('input[type="file"]');
+    expect(fileInput.getAttribute('capture')).toBeNull();
+  });
+
+  it('updates accept attribute when property changes after render', async () => {
+    const el = await renderDropFile('<dile-drop-file></dile-drop-file>');
+    let fileInput = el.shadowRoot.querySelector('input[type="file"]');
+    expect(fileInput.getAttribute('accept')).toBeNull();
+    
+    el.accept = 'image/*';
+    await el.updateComplete;
+    
+    fileInput = el.shadowRoot.querySelector('input[type="file"]');
+    expect(fileInput.getAttribute('accept')).toBe('image/*');
+  });
+
+  it('updates capture attribute when property changes after render', async () => {
+    const el = await renderDropFile('<dile-drop-file></dile-drop-file>');
+    let fileInput = el.shadowRoot.querySelector('input[type="file"]');
+    expect(fileInput.getAttribute('capture')).toBeNull();
+    
+    el.capture = 'user';
+    await el.updateComplete;
+    
+    fileInput = el.shadowRoot.querySelector('input[type="file"]');
+    expect(fileInput.getAttribute('capture')).toBe('user');
+  });
 });

package/components/drop-file/src/DileDropFile.js

@@ -1,4 +1,5 @@
 import { LitElement, html, css } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import '../file-preview.js';
 import '../../button/button.js';
 import { labelStyles } from '../../input/src/label-styles.js';
@@ -61,6 +62,8 @@ export class DileDropFile extends DileEmmitChange(LitElement) {
       allowedExtensions: { type: Array },
       extensionErrorMessage: { type: String },
       name: { type: String, reflect: true },
+      accept: { type: String },
+      capture: { type: String },
     };
   }
 
@@ -78,6 +81,8 @@ export class DileDropFile extends DileEmmitChange(LitElement) {
     this.selectedFileLabel = "Selected file";
     this.extensionErrorMessage = "Only this file extensions are allowed: "
     this.allowedExtensions = [];
+    this.accept = '';
+    this.capture = '';
     this.internals = this.attachInternals();
   } 
 
@@ -104,7 +109,7 @@ export class DileDropFile extends DileEmmitChange(LitElement) {
         ${this.dropLabelTemplate}
       </div>
       ${this.messageTemplate}
-      <input type="file" id="fileInput" @change=${this._handleFileInput}>
+      <input type="file" id="fileInput" @change=${this._handleFileInput} accept=${ifDefined(this.accept || undefined)} capture=${ifDefined(this.capture || undefined)}>
       <dile-file-preview 
         fileName="${this.fileName}"
         selectedFileLabel="${this.selectedFileLabel}"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/ui",
-  "version": "3.13.1",
+  "version": "3.14.0",
   "description": "UI Core components from dile-components.",
   "main": "index.js",
   "type": "module",
@@ -28,5 +28,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ca740f524209d56344b4b0090d9a82c8f1c0782f"
+  "gitHead": "2dbcfcfc126715e1f21c28806714f5f59b89d93b"
 }