@kodaris/krubble-components 1.0.45 → 1.0.47

package/dist/krubble-components.umd.js

@@ -544,6 +544,10 @@
                           dropdown.style.top = '';
                           dropdown.style.bottom = window.innerHeight - hostRect.top + 4 + 'px';
                           dropdown.style.transformOrigin = 'bottom left';
+                          dropdown.classList.add('dropdown--above');
+                      }
+                      else {
+                          dropdown.classList.remove('dropdown--above');
                       }
                       // Align right if dropdown overflows viewport right
                       if (dropdownRect.right > window.innerWidth) {
@@ -603,6 +607,12 @@
               this._stateTimeout = window.setTimeout(() => this.reset(), duration);
           }
       }
+      /**
+       * Returns whether the button is currently in the loading state.
+       */
+      isLoading() {
+          return this._state === 'loading';
+      }
       /**
        * Resets the button to its idle state.
        */
@@ -843,6 +853,10 @@
       animation: dropdown-fade-in 150ms ease-out;
     }
 
+    .dropdown--above {
+      animation-name: dropdown-fade-in-above;
+    }
+
     @keyframes dropdown-fade-in {
       from {
         opacity: 0;
@@ -854,6 +868,17 @@
       }
     }
 
+    @keyframes dropdown-fade-in-above {
+      from {
+        opacity: 0;
+        transform: translateY(4px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
     .dropdown-item {
       display: block;
       width: 100%;
@@ -4020,16 +4045,6 @@
               composed: true,
               detail: { src: this.src, name: this.name },
           }));
-          fetch(this.src)
-              .then(response => response.blob())
-              .then(blob => {
-              const blobUrl = URL.createObjectURL(blob);
-              const a = document.createElement('a');
-              a.href = blobUrl;
-              a.download = this.name || 'file';
-              a.click();
-              URL.revokeObjectURL(blobUrl);
-          });
       }
       _handleZoomIn() {
           this._zoomLevel = Math.min(this._zoomLevel + 25, 300);
@@ -4456,7 +4471,10 @@
               detail: { file },
           }));
           if (file.url) {
-              exports.KRFilePreview.open({ src: file.url, name: file.name });
+              const preview = exports.KRFilePreview.open({ src: file.url, name: file.name });
+              preview.addEventListener('download', () => {
+                  this._handleDownload(file);
+              });
           }
       }
       _handleDownload(file) {
@@ -4465,18 +4483,6 @@
               composed: true,
               detail: { file },
           }));
-          if (file.url) {
-              fetch(file.url)
-                  .then(response => response.blob())
-                  .then(blob => {
-                  const blobUrl = URL.createObjectURL(blob);
-                  const a = document.createElement('a');
-                  a.href = blobUrl;
-                  a.download = file.name || 'file';
-                  a.click();
-                  URL.revokeObjectURL(blobUrl);
-              });
-          }
       }
       _handleDelete(file) {
           this.dispatchEvent(new CustomEvent('delete', {
@@ -4658,9 +4664,6 @@
       fill: #000;
     }
 
-    .file-list__action--delete:hover {
-      fill: #dc3545;
-    }
 
     .file-list__empty {
       color: #000;