@watermarkinsights/ripple 5.10.0-14 → 5.10.0-16

package/dist/collection/components/wm-uploader/wm-uploader.css

@@ -504,7 +504,7 @@
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M15,14C12.33,14 7,15.33 7,18V20H23V18C23,15.33 17.67,14 15,14M6,10V7H4V10H1V12H4V15H6V12H9V10M15,12A4,4 0 0,0 19,8A4,4 0 0,0 15,4A4,4 0 0,0 11,8A4,4 0 0,0 15,12Z'/%3E%3C/svg%3E%0A");
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M15,14C12.33,14 7,15.33 7,18V20H23V18C23,15.33 17.67,14 15,14M6,10V7H4V10H1V12H4V15H6V12H9V10M15,12A4,4 0 0,0 19,8A4,4 0 0,0 15,4A4,4 0 0,0 11,8A4,4 0 0,0 15,12Z'/%3E%3C/svg%3E%0A");
 }
-.svg-icon.svg-add-tag:before {
+.svg-icon.svg-add-outline:before {
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M13,7H11V11H7V13H11V17H13V13H17V11H13V7Z'/%3E%3C/svg%3E%0A");
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M13,7H11V11H7V13H11V17H13V13H17V11H13V7Z'/%3E%3C/svg%3E%0A");
 }
@@ -520,10 +520,6 @@
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M19.8 22.6L17.15 20H6.5Q4.2 20 2.6 18.4T1 14.5Q1 12.58 2.19 11.08 3.38 9.57 5.25 9.15 5.33 8.95 5.4 8.76 5.5 8.57 5.55 8.35L1.4 4.2L2.8 2.8L21.2 21.2M6.5 18H15.15L7.1 9.95Q7.05 10.23 7.03 10.5 7 10.73 7 11H6.5Q5.05 11 4.03 12.03 3 13.05 3 14.5 3 15.95 4.03 17 5.05 18 6.5 18M11.13 14M21.6 18.75L20.15 17.35Q20.58 17 20.79 16.54 21 16.08 21 15.5 21 14.45 20.27 13.73 19.55 13 18.5 13H17V11Q17 8.93 15.54 7.46 14.08 6 12 6 11.33 6 10.7 6.16 10.07 6.33 9.5 6.68L8.05 5.23Q8.93 4.63 9.91 4.31 10.9 4 12 4 14.93 4 16.96 6.04 19 8.07 19 11 20.73 11.2 21.86 12.5 23 13.78 23 15.5 23 16.5 22.63 17.31 22.25 18.15 21.6 18.75M14.83 12.03Z'/%3E%3C/svg%3E%0A");
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M19.8 22.6L17.15 20H6.5Q4.2 20 2.6 18.4T1 14.5Q1 12.58 2.19 11.08 3.38 9.57 5.25 9.15 5.33 8.95 5.4 8.76 5.5 8.57 5.55 8.35L1.4 4.2L2.8 2.8L21.2 21.2M6.5 18H15.15L7.1 9.95Q7.05 10.23 7.03 10.5 7 10.73 7 11H6.5Q5.05 11 4.03 12.03 3 13.05 3 14.5 3 15.95 4.03 17 5.05 18 6.5 18M11.13 14M21.6 18.75L20.15 17.35Q20.58 17 20.79 16.54 21 16.08 21 15.5 21 14.45 20.27 13.73 19.55 13 18.5 13H17V11Q17 8.93 15.54 7.46 14.08 6 12 6 11.33 6 10.7 6.16 10.07 6.33 9.5 6.68L8.05 5.23Q8.93 4.63 9.91 4.31 10.9 4 12 4 14.93 4 16.96 6.04 19 8.07 19 11 20.73 11.2 21.86 12.5 23 13.78 23 15.5 23 16.5 22.63 17.31 22.25 18.15 21.6 18.75M14.83 12.03Z'/%3E%3C/svg%3E%0A");
 }
-.svg-icon.svg-apps:before {
-  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M16,20H20V16H16M16,14H20V10H16M10,8H14V4H10M16,8H20V4H16M10,14H14V10H10M4,14H8V10H4M4,20H8V16H4M10,20H14V16H10M4,8H8V4H4V8Z'/%3E%3C/svg%3E%0A");
-  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M16,20H20V16H16M16,14H20V10H16M10,8H14V4H10M16,8H20V4H16M10,14H14V10H10M4,14H8V10H4M4,20H8V16H4M10,20H14V16H10M4,8H8V4H4V8Z'/%3E%3C/svg%3E%0A");
-}
 .svg-icon.svg-attach:before {
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M16.5,6V17.5A4,4 0 0,1 12.5,21.5A4,4 0 0,1 8.5,17.5V5A2.5,2.5 0 0,1 11,2.5A2.5,2.5 0 0,1 13.5,5V15.5A1,1 0 0,1 12.5,16.5A1,1 0 0,1 11.5,15.5V6H10V15.5A2.5,2.5 0 0,0 12.5,18A2.5,2.5 0 0,0 15,15.5V5A4,4 0 0,0 11,1A4,4 0 0,0 7,5V17.5A5.5,5.5 0 0,0 12.5,23A5.5,5.5 0 0,0 18,17.5V6H16.5Z'/%3E%3C/svg%3E%0A");
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M16.5,6V17.5A4,4 0 0,1 12.5,21.5A4,4 0 0,1 8.5,17.5V5A2.5,2.5 0 0,1 11,2.5A2.5,2.5 0 0,1 13.5,5V15.5A1,1 0 0,1 12.5,16.5A1,1 0 0,1 11.5,15.5V6H10V15.5A2.5,2.5 0 0,0 12.5,18A2.5,2.5 0 0,0 15,15.5V5A4,4 0 0,0 11,1A4,4 0 0,0 7,5V17.5A5.5,5.5 0 0,0 12.5,23A5.5,5.5 0 0,0 18,17.5V6H16.5Z'/%3E%3C/svg%3E%0A");
@@ -648,6 +644,10 @@
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2C6.47,2 2,6.47 2,12C2,17.53 6.47,22 12,22C17.53,22 22,17.53 22,12C22,6.47 17.53,2 12,2M14.59,8L12,10.59L9.41,8L8,9.41L10.59,12L8,14.59L9.41,16L12,13.41L14.59,16L16,14.59L13.41,12L16,9.41L14.59,8Z'/%3E%3C/svg%3E%0A");
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2C6.47,2 2,6.47 2,12C2,17.53 6.47,22 12,22C17.53,22 22,17.53 22,12C22,6.47 17.53,2 12,2M14.59,8L12,10.59L9.41,8L8,9.41L10.59,12L8,14.59L9.41,16L12,13.41L14.59,16L16,14.59L13.41,12L16,9.41L14.59,8Z'/%3E%3C/svg%3E%0A");
 }
+.svg-icon.svg-reset:before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,5V1L7,6L12,11V7A6,6 0 0,1 18,13A6,6 0 0,1 12,19A6,6 0 0,1 6,13H4A8,8 0 0,0 12,21A8,8 0 0,0 20,13A8,8 0 0,0 12,5Z'/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,5V1L7,6L12,11V7A6,6 0 0,1 18,13A6,6 0 0,1 12,19A6,6 0 0,1 6,13H4A8,8 0 0,0 12,21A8,8 0 0,0 20,13A8,8 0 0,0 12,5Z'/%3E%3C/svg%3E%0A");
+}
 .svg-icon.svg-restore:before {
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M13.5,8H12V13L16.28,15.54L17,14.33L13.5,12.25V8M13,3A9,9 0 0,0 4,12H1L4.96,16.03L9,12H6A7,7 0 0,1 13,5A7,7 0 0,1 20,12A7,7 0 0,1 13,19C11.07,19 9.32,18.21 8.06,16.94L6.64,18.36C8.27,20 10.5,21 13,21A9,9 0 0,0 22,12A9,9 0 0,0 13,3'/%3E%3C/svg%3E%0A");
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M13.5,8H12V13L16.28,15.54L17,14.33L13.5,12.25V8M13,3A9,9 0 0,0 4,12H1L4.96,16.03L9,12H6A7,7 0 0,1 13,5A7,7 0 0,1 20,12A7,7 0 0,1 13,19C11.07,19 9.32,18.21 8.06,16.94L6.64,18.36C8.27,20 10.5,21 13,21A9,9 0 0,0 22,12A9,9 0 0,0 13,3'/%3E%3C/svg%3E%0A");
@@ -706,7 +706,7 @@
   margin-left: 0.3125rem;
   margin-right: 0;
 }
-:host input:focus-visible + .wm-button {
+:host input:focus-visible + label {
   outline: 3px solid var(--wmcolor-interactive-focus);
   outline-offset: 2px;
 }
@@ -715,6 +715,61 @@
   box-sizing: border-box;
 }
 
+.upload-arrow {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+}
+.upload-arrow:before {
+  content: "";
+  display: inline-block;
+  background-color: var(--icon-fill, currentColor);
+  width: 100%;
+  height: 100%;
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M14 11V14H2V11H0V14C0 15.1 0.9 16 2 16H14C15.1 16 16 15.1 16 14V11H14ZM3 5L4.41 6.41L7 3.83V12H9V3.83L11.59 6.41L13 5L8 0L3 5Z'/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M14 11V14H2V11H0V14C0 15.1 0.9 16 2 16H14C15.1 16 16 15.1 16 14V11H14ZM3 5L4.41 6.41L7 3.83V12H9V3.83L11.59 6.41L13 5L8 0L3 5Z'/%3E%3C/svg%3E%0A");
+}
+
+.drop-area {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  z-index: 100;
+  pointer-events: none;
+}
+.drop-area.listening {
+  pointer-events: unset;
+}
+.drop-area.listening .drop-overlay {
+  display: flex;
+}
+.drop-area.-page {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+}
+.drop-area .drop-overlay {
+  display: none;
+  flex-direction: column;
+  font-size: 1rem;
+  font-weight: 600;
+  gap: 0.75rem;
+  height: 100%;
+  width: 100%;
+  background-color: rgba(221, 241, 250, 0.6);
+  border: 3px solid var(--wmcolor-border-focus);
+  align-items: center;
+  justify-content: center;
+}
+.drop-area .drop-overlay .upload-arrow {
+  height: 2rem;
+  width: 2rem;
+  color: var(--wmcolor-interactive-positive);
+}
+
 .wm-button.disabled {
   pointer-events: initial !important;
 }
@@ -790,14 +845,74 @@
   margin-bottom: 0.5rem;
 }
 
-.info-wrapper {
-  position: relative;
+.button-wrapper {
+  display: flex;
+  width: fit-content;
+  gap: 1rem;
+}
+
+.-drop label {
+  height: 6.25rem;
+  border-radius: 8px;
+  border: 2px dashed var(--wmcolor-border-dark);
+  background: var(--wmcolor-background);
+  min-width: 21.375rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 0.25rem;
+  transition: border ease-out 200ms, background-color ease-out 200ms;
+}
+.-drop label:hover:not(:has(.disabled)) {
+  cursor: pointer;
+}
+.-drop label:hover:not(:has(.disabled)) .wm-button {
+  text-decoration: underline;
+}
+.-drop .prompt {
   display: flex;
   align-items: center;
+  gap: 0.5rem;
+}
+.-drop .prompt .upload-arrow {
+  width: 1rem;
+  height: 1rem;
+  color: var(--wmcolor-interactive);
 }
-.info-wrapper .info {
+.-drop .prompt .wm-button {
+  font-weight: 700;
   font-size: 0.875rem;
-  margin-left: 1rem;
+  transition: none;
+  width: fit-content;
+}
+
+.-drop:has(.disabled) label {
+  background: var(--wmcolor-interactive-background-disabled);
+  border-color: var(--wmcolor-border);
+}
+.-drop:has(.disabled) .upload-arrow {
+  color: var(--wmcolor-button-text-textonly-disabled);
+}
+
+:host(.dragging) *:not(.drop-area, .drop-overlay) {
+  pointer-events: none;
+}
+:host(.dragging) .-drop label {
+  background-color: var(--wmcolor-interactive-background-highlight);
+  border: 2px solid var(--wmcolor-border-focus);
+  pointer-events: none;
+}
+:host(.dragging) .-drop label .wm-button {
+  color: var(--wmcolor-text);
+  font-size: 1rem;
+  font-weight: 600;
+}
+:host(.dragging) .-drop label .upload-arrow {
+  color: var(--wmcolor-interactive-positive);
+}
+:host(.dragging) .-drop label #file-count {
+  display: none;
 }
 
 .accepted-types {
@@ -805,17 +920,43 @@
 }
 
 .notif-wrapper {
-  position: relative;
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
+  position: relative;
   margin-bottom: 0.75rem;
+  gap: 0.5rem;
 }
 
 .requirements {
+  font-size: 0.875rem;
+}
+.requirements summary {
+  width: fit-content;
+  list-style-position: outside;
+  margin-inline-start: 1rem;
+  font-weight: 700;
+  color: var(--wmcolor-button-text-textonly);
+}
+.requirements summary:focus-visible {
+  outline: 3px solid var(--wmcolor-interactive-focus);
+  outline-offset: 2px;
+}
+.requirements summary::marker {
+  font-size: 0.75rem;
+}
+.requirements .requirements-wrapper {
   display: flex;
   flex-direction: column;
+  gap: 0.25rem;
+  margin-top: 0.25rem;
+  margin-inline-start: 1rem;
+}
+
+#file-count {
+  display: block;
+  flex-shrink: 0;
   font-size: 0.875rem;
-  margin-left: 1rem;
+  font-style: italic;
 }
 
 .notif,

package/dist/collection/components/wm-uploader/wm-uploader.e2e.js

@@ -0,0 +1,70 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { AxePuppeteer } from "@axe-core/puppeteer";
+describe("wm-uploader", () => {
+    let page, input, label;
+    beforeEach(async () => {
+        page = await newE2EPage();
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+      <wm-uploader button-text="Upload new document">
+        <wm-file id="file1" name="File retrieved from server" type="pdf" last-updated="2020-01-28T22:29:10.397Z"></wm-file>
+        <wm-file id="file2" name="Second file" type="jpeg" last-updated="2019-02-14T12:21:05.397Z"></wm-file>
+      </wm-uploader>
+      </main></body></html>`);
+        input = await page.find("wm-uploader >>> input[type='file']");
+        label = await page.find("wm-uploader >>> label");
+        await page.waitForChanges();
+    });
+    it("passes Axe checks", async () => {
+        const results = await new AxePuppeteer(page).analyze();
+        expect(results.violations.length).toBe(0);
+    });
+    it("renders the component", async () => {
+        expect(input).not.toBeNull();
+        expect(label).not.toBeNull();
+    });
+    it("focuses previous file when deleting with the keyboard", async () => {
+        page = await newE2EPage();
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+      <wm-uploader button-text="Upload new document">
+        <wm-file id="file1" name="First file" type="pdf" file-actions="preview delete"></wm-file>
+        <wm-file id="file2" name="Second file" type="pdf" file-actions="delete"></wm-file>
+      </wm-uploader>
+      </main></body></html>`);
+        await page.waitForChanges();
+        let fileEls = await page.findAll("wm-file");
+        let secondFileEl = fileEls[1];
+        // inital check of file count
+        expect(fileEls.length).toBe(2);
+        // user must be tabbing for these changes to occur
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        // check focused element is last file, delete button
+        let activeElId = await page.evaluate(() => document.activeElement.id);
+        expect(activeElId).toBe("file2");
+        let activeElButtonType = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.classList[0]);
+        expect(activeElButtonType).toBe("delete-button");
+        let mockFileDeleteEvent = new CustomEvent("wmFileDelete");
+        //@ts-ignore
+        mockFileDeleteEvent.target = secondFileEl;
+        secondFileEl.dispatchEvent(mockFileDeleteEvent);
+        await page.evaluate(() => { var _a; return (_a = document.getElementById("file2")) === null || _a === void 0 ? void 0 : _a.remove(); });
+        await page.waitForChanges();
+        // confirm file has been removed
+        fileEls = await page.findAll("wm-file");
+        expect(fileEls.length).toBe(1);
+        // check focused element is last file, delete button
+        activeElId = await page.evaluate(() => document.activeElement.id);
+        expect(activeElId).toBe("file1");
+        activeElButtonType = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.classList[0]);
+        expect(activeElButtonType).toBe("delete-button");
+    });
+    //  it("disables the button dynamically", async () => {
+    // disabled when maxed out
+    // disabled while a file is uploading
+    // not disabled after upload
+    // });
+});

package/dist/collection/components/wm-uploader/wm-uploader.js

@@ -1,11 +1,14 @@
 import { h, Host, forceUpdate, } from "@stencil/core";
 import { uploaderMessages } from "../../global/intl";
+import { intl } from "../../global/functions";
 export class Uploader {
     constructor() {
         this.batchCount = 0; // used to calculate the aggregate upload progress
         this.prevUploadCount = 0; // comparison to determine whether or not to announce updated count
         this.fileIdToDelete = "";
         this.label = undefined;
+        this.uploaderType = "select";
+        this.dropArea = "component";
         this.buttonText = undefined;
         this.icon = undefined;
         this.fileTypes = "pdf txt log xml doc docx xls xlsx ppt pptx gif jpg jpeg png csv";
@@ -49,6 +52,27 @@ export class Uploader {
     storeDeletedId(ev) {
         this.fileIdToDelete = ev.target.id;
     }
+    handleDocumentDragEnter() {
+        if (this.uploaderType == "drop") {
+            this.dropAreaEl.classList.add("listening");
+        }
+    }
+    handleMouseOver() {
+        if (this.uploaderType == "drop") {
+            this.dropAreaEl.classList.remove("listening");
+        }
+    }
+    handleDocumentDragLeave(ev) {
+        if (this.uploaderType == "drop") {
+            if (ev.target == null || ev.target.nodeName == "HTML")
+                this.dropAreaEl.classList.remove("listening");
+        }
+    }
+    handleDocumentVisibilityChange() {
+        if (this.uploaderType == "drop") {
+            this.dropAreaEl.classList.remove("listening");
+        }
+    }
     announceError() {
         if (this.errorMessage) {
             setTimeout(() => this.announce(this.errorMessage, this.politeLiveRegionEl), 100);
@@ -155,15 +179,46 @@ export class Uploader {
             }
         }
     }
-    handleUploadButtonChange(ev) {
-        const inputEl = ev.target;
-        if (inputEl.files) {
-            const files = Array.from(inputEl.files);
+    handleUploadButtonChange() {
+        if (this.uploadButtonEl.files) {
+            const files = Array.from(this.uploadButtonEl.files);
             if (files.length > 0) {
                 this.batchCount = files.length;
                 this.wmUploaderFilesSelected.emit(files);
             }
-            ev.target.value = ""; // reset to ensure that onChange is triggered when the same file is selected a second time
+            this.uploadButtonEl.value = ""; // reset to ensure that onChange is triggered when the same file is selected a second time
+        }
+    }
+    handleDragEnter(ev) {
+        if (this.uploaderType == "drop") {
+            ev.preventDefault();
+            this.el.classList.add("dragging");
+        }
+    }
+    handleDragOver(ev) {
+        if (this.uploaderType == "drop") {
+            ev.preventDefault();
+        }
+    }
+    handleDragLeave(ev) {
+        if (this.uploaderType == "drop") {
+            ev.preventDefault();
+            this.dropAreaEl.classList.remove("listening");
+            this.el.classList.remove("dragging");
+        }
+    }
+    handleDrop(ev) {
+        if (this.uploaderType == "drop") {
+            ev.preventDefault();
+            this.el.classList.remove("dragging");
+            this.dropAreaEl.classList.remove("listening");
+            if (ev.dataTransfer.files) {
+                const files = Array.from(ev.dataTransfer.files);
+                if (files.length > 0) {
+                    this.batchCount = files.length;
+                    this.wmUploaderFilesSelected.emit(files);
+                }
+            }
         }
     }
     announce(message, liveRegionEl) {
@@ -188,15 +243,40 @@ export class Uploader {
             return (h("span", { class: "mdi", "aria-hidden": "true" }, String.fromCodePoint(parseInt(`0x${this.icon}`))));
         }
     }
-    renderUploadButton(classes) {
+    renderUploadButton() {
         let accessibleLabel = `${this.label && this.label !== this.buttonText ? `${this.label}, ` : ""}${this.buttonText}`;
-        return (h("div", { class: "info-wrapper" }, h("input", { name: "input", id: "input", ref: (el) => (this.uploadButtonEl = el), class: "sr-only", "aria-label": accessibleLabel, "aria-required": this.requiredField ? "true" : null, "aria-describedby": `${this.errorMessage ? "error " : ""}file-count max-size accepted-types`, type: "file", multiple: true, onClick: (ev) => this.handleUploadButtonClick(ev), onChange: (ev) => this.handleUploadButtonChange(ev) }), h("label", { htmlFor: "input", class: `wm-button ${classes}` }, this.icon && this.renderIcon(), this.buttonText)));
+        return (h("div", { class: "button-wrapper" }, h("input", { name: "input", id: "input", ref: (el) => (this.uploadButtonEl = el), class: "sr-only", "aria-label": accessibleLabel, "aria-required": this.requiredField ? "true" : null, "aria-describedby": `${this.errorMessage ? "error " : ""}file-count max-size accepted-types`, type: "file", multiple: true, onClick: (ev) => this.handleUploadButtonClick(ev), onChange: () => this.handleUploadButtonChange() }), h("label", { htmlFor: "input", class: `wm-button -secondary ${this.isDisabled ? "disabled" : ""}` }, this.icon && this.renderIcon(), this.buttonText), this.uploaderType == "select" && this.renderFileCount()));
+    }
+    renderDropButton() {
+        let accessibleLabel = `${this.label && this.label !== this.buttonText ? `${this.label}, ` : ""}${uploaderMessages.dropInstructions}`;
+        return (h("div", { class: "button-wrapper -drop" }, h("input", { name: "input", id: "input", ref: (el) => (this.uploadButtonEl = el), class: "sr-only", "aria-label": accessibleLabel, "aria-required": this.requiredField ? "true" : null, "aria-describedby": `${this.errorMessage ? "error " : ""}file-count max-size accepted-types`, type: "file", multiple: true, onClick: (ev) => this.handleUploadButtonClick(ev), onChange: () => this.handleUploadButtonChange() }), h("label", { htmlFor: "input", class: `${this.isDisabled ? "disabled" : ""}` }, h("div", { class: "prompt" }, h("span", { class: "upload-arrow" }), h("span", { id: "drop-text", class: `wm-button -textonly ${this.isDisabled ? "disabled" : ""}` }, uploaderMessages.dropInstructions)), this.renderFileCount())));
     }
     renderHeader() {
-        return (h("div", { class: "header" }, h("div", { class: "notif-wrapper" }, this.renderUploadButton(`-secondary ${this.isDisabled ? "disabled" : ""}`), this.renderRequirements()), h("div", { id: "accepted-types", class: "accepted-types" }, uploaderMessages.getAcceptedFileTypes(this.validTypes, this.fileTypes.split(" ").length)), this.notif && h("div", { class: "notif" }, this.notif), h("div", { id: "error" }, this.errorMessage)));
+        return (h("div", { class: "header" }, h("div", { class: "notif-wrapper" }, this.uploaderType == "select" ? this.renderUploadButton() : this.renderDropButton(), this.renderRequirements()), this.notif && h("div", { class: "notif" }, this.notif), h("div", { id: "error" }, this.errorMessage)));
+    }
+    renderFileCount() {
+        if (this.maxFiles) {
+            return h("div", { id: "file-count" }, uploaderMessages.getFileCount(this.uploadedFileEls.length, this.maxFiles));
+        }
     }
     renderRequirements() {
-        return (h("div", { class: "requirements" }, this.maxFiles && (h("span", { id: "file-count" }, uploaderMessages.getFileCount(this.uploadedFileEls.length, this.maxFiles))), this.maxSize && h("span", { id: "max-size" }, uploaderMessages.getMaxSize(this.maxSize))));
+        const maxSizeMessage = intl.formatMessage({
+            id: "uploader.maxSize",
+            defaultMessage: "<b>Maximum File Size:</b> {maxSize}",
+            description: "An indicator of the maximum file size the uploader allows",
+        }, {
+            maxSize: this.maxSize,
+            b: (chunks) => h("span", { style: { "font-weight": "600" } }, chunks),
+        });
+        const acceptedTypesMessage = intl.formatMessage({
+            id: "uploader.acceptedFileTypes",
+            defaultMessage: "<b>Accepted File {amount, plural, =1 {Type} other {Types}}:</b> {fileTypes}",
+        }, {
+            fileTypes: this.validTypes,
+            amount: this.fileTypes.split(" ").length,
+            b: (chunks) => h("span", { style: { "font-weight": "600" } }, chunks),
+        });
+        return (h("details", { class: "requirements" }, h("summary", null, uploaderMessages.fileRequirements), h("div", { class: "requirements-wrapper" }, h("div", { id: "accepted-types", class: "accepted-types" }, acceptedTypesMessage), this.maxSize && h("span", { id: "max-size" }, maxSizeMessage))));
     }
     renderListContainer() {
         const hasNewlyUploadedFiles = this.fileEls.filter((file) => file.progress && file.progress === 100).length;
@@ -205,10 +285,13 @@ export class Uploader {
     renderLabel() {
         return (h("div", { class: `wrapper ${this.errorMessage ? "invalid" : ""}` }, h("div", { id: "label", class: `label` }, this.label, this.requiredField && (h("span", { class: "required", "aria-hidden": "true" }, "*")))));
     }
+    renderDropArea() {
+        return (h("div", { class: `drop-area -${this.dropArea}`, ref: (el) => (this.dropAreaEl = el), onDragEnter: (ev) => this.handleDragEnter(ev), onDragOver: (ev) => this.handleDragOver(ev), onDragLeave: (ev) => this.handleDragLeave(ev), onDrop: (ev) => this.handleDrop(ev) }, this.dropArea == "page" && (h("div", { class: "drop-overlay" }, h("span", { class: "upload-arrow" }), h("span", null, "Drop to Upload")))));
+    }
     render() {
-        return (h(Host, { key: '46d82b5386359d17221f7b7376dbbafcdd245543' }, this.label && this.renderLabel(), this.renderHeader(), this.renderListContainer(), h("div", { key: 'b7f938f7da392db21554228ab4f104a2116ecb44', ref: (el) => (this.assertiveLiveRegionEl = el), class: "live-region sr-only", "aria-live": "assertive" // since it's directly linked to the action the user took, it should be read in priority. With polite, some messages get dismissed in favor of the page title
+        return (h(Host, null, this.uploaderType == "drop" && this.renderDropArea(), this.label && this.renderLabel(), this.renderHeader(), this.renderListContainer(), h("div", { ref: (el) => (this.assertiveLiveRegionEl = el), class: "live-region sr-only", "aria-live": "assertive" // since it's directly linked to the action the user took, it should be read in priority. With polite, some messages get dismissed in favor of the page title
             ,
-            "aria-atomic": "true" }), h("div", { key: '1b0a6f5340262caed883ac70a38f76e80f6c0d5c', ref: (el) => (this.politeLiveRegionEl = el), class: "live-region sr-only", "aria-live": "polite", "aria-atomic": "true" })));
+            "aria-atomic": "true" }), h("div", { ref: (el) => (this.politeLiveRegionEl = el), class: "live-region sr-only", "aria-live": "polite", "aria-atomic": "true" })));
     }
     static get is() { return "wm-uploader"; }
     static get encapsulation() { return "shadow"; }
@@ -242,6 +325,42 @@ export class Uploader {
                 "attribute": "label",
                 "reflect": false
             },
+            "uploaderType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"select\" | \"drop\"",
+                    "resolved": "\"drop\" | \"select\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "uploader-type",
+                "reflect": false,
+                "defaultValue": "\"select\""
+            },
+            "dropArea": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"component\" | \"page\"",
+                    "resolved": "\"component\" | \"page\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "drop-area",
+                "reflect": false,
+                "defaultValue": "\"component\""
+            },
             "buttonText": {
                 "type": "string",
                 "mutable": false,
@@ -444,6 +563,30 @@ export class Uploader {
                 "target": undefined,
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "dragenter",
+                "method": "handleDocumentDragEnter",
+                "target": "document",
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "mouseover",
+                "method": "handleMouseOver",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "dragleave",
+                "method": "handleDocumentDragLeave",
+                "target": "document",
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "visibilitychange",
+                "method": "handleDocumentVisibilityChange",
+                "target": "document",
+                "capture": false,
+                "passive": false
             }];
     }
 }