@uploadcare/file-uploader 1.15.0-alpha.19 → 1.15.0-alpha.20

package/blocks/FileItem/file-item.css

@@ -222,34 +222,20 @@ uc-file-item[mode='grid'] button:hover {
 uc-file-item[mode='grid'] .uc-progress-bar {
   width: initial;
   height: 4px !important;
-  opacity: 1;
   top: initial !important;
   bottom: var(--uc-padding);
   left: var(--uc-padding);
   right: var(--uc-padding);
   border-radius: var(--uc-radius);
   z-index: 1;
-  transition: background-color 0.3s;
-  background-color: transparent;
-}
-
-uc-file-item[mode='grid'] .uc-progress-bar:not(:has(.uc-progress--hidden, .uc-fake-progress--hidden)) {
+  transition:
+    background-color 0.3s,
+    opacity 0.3s;
   background-color: var(--uc-background);
 }
 
-uc-file-item[mode='grid'] .uc-progress-bar .uc-progress {
-  z-index: 3;
-}
-
-uc-file-item[mode='grid'] .uc-progress-bar .uc-fake-progress {
-  z-index: 2;
-}
-
-uc-file-item[mode='grid']
-  .uc-progress-bar
-  :is(.uc-fake-progress:not(.uc-fake-progress--hidden), .uc-progress:not(.uc-progress--hidden)) {
+uc-file-item[mode='grid'] .uc-progress-bar :is(.uc-fake-progress, .uc-progress) {
   background-color: var(--uc-primary);
-  opacity: 0.7;
 }
 
 uc-file-item[mode='grid'] .uc-progress-bar[hasfilename] {

package/blocks/ProgressBar/ProgressBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["ProgressBar.js"],"names":[],"mappings":"AAGA;IACE,qBAAqB;IACrB,eAAW;IAEX,qBAAqB;IACrB,mBAAe;IAEf,sBAAsB;IACtB,kBAAgB;IAId;;;MAIC;CA4CJ;;;;sBA9DqB,yBAAyB"}
+{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["ProgressBar.js"],"names":[],"mappings":"AAGA;IACE,qBAAqB;IACrB,eAAW;IAEX,qBAAqB;IACrB,mBAAe;IAEf,sBAAsB;IACtB,kBAAgB;IAId;;;MAIC;CAqCJ;;;;sBAvDqB,yBAAyB"}

package/blocks/ProgressBar/ProgressBar.js

@@ -22,21 +22,18 @@ export class ProgressBar extends Block {
 
   initCallback() {
     super.initCallback();
-
-    this.ref.fakeProgressLine.addEventListener('animationiteration', () => {
-      if (this._value === 0) return;
-      this.ref.fakeProgressLine.classList.toggle('uc-fake-progress--hidden', true);
-    });
-
-    this.ref.realProgressLine.addEventListener('transitionend', () => {
-      if (this._value === 100) {
-        this.classList.add('uc-progress-bar--hidden');
-        this.ref.realProgressLine.classList.toggle('uc-progress--hidden', true);
+    const handleFakeProgressAnimation = () => {
+      const fakeProgressLine = this.ref.fakeProgressLine;
+      if (!this._visible) {
+        fakeProgressLine.classList.add('uc-fake-progress--hidden');
+        return;
       }
-      if (this._value === 0 && this._prevValue > 0) {
-        this.style.setProperty('--l-progress-value', this._value.toString());
+      if (this._value > 0) {
+        fakeProgressLine.classList.add('uc-fake-progress--hidden');
       }
-    });
+    };
+
+    this.ref.fakeProgressLine.addEventListener('animationiteration', handleFakeProgressAnimation);
 
     this.defineAccessor(
       'value',
@@ -44,7 +41,6 @@ export class ProgressBar extends Block {
         if (value === undefined || value === null) return;
         this._prevValue = this._value;
         this._value = value;
-
         if (!this._visible) return;
         this.style.setProperty('--l-progress-value', this._value.toString());
       },
@@ -54,10 +50,7 @@ export class ProgressBar extends Block {
       'visible',
       /** @param {boolean} visible */ (visible) => {
         this._visible = visible;
-
         this.classList.toggle('uc-progress-bar--hidden', !visible);
-        this.ref.realProgressLine.classList.toggle('uc-progress--hidden', !visible);
-        this.ref.fakeProgressLine.classList.toggle('uc-fake-progress--hidden', !visible);
       },
     );
   }

package/blocks/ProgressBar/progress-bar.css

@@ -9,6 +9,12 @@ uc-progress-bar {
   height: 100%;
   overflow: hidden;
   pointer-events: none;
+  transition: opacity 0.3s;
+  opacity: 1;
+}
+
+uc-progress-bar.uc-progress-bar--hidden {
+  opacity: 0;
 }
 
 uc-progress-bar .uc-progress {
@@ -36,17 +42,13 @@ uc-progress-bar .uc-fake-progress {
   background-color: var(--uc-primary);
   animation: fake-progress-animation 1s ease-in-out infinite;
   opacity: 1;
-  transition:
-    opacity 0.3s,
-    display 1s;
-  /* stylelint-disable-next-line property-no-unknown */
-  transition-behavior: allow-discrete;
+  transition: opacity 0.3s;
   z-index: 1;
 }
 
 uc-progress-bar .uc-fake-progress--hidden {
   opacity: 0;
-  display: none;
+  animation: none;
 }
 
 @keyframes fake-progress-animation {

package/blocks/Thumb/Thumb.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Thumb.d.ts","sourceRoot":"","sources":["Thumb.js"],"names":[],"mappings":"AASA;IACE,eAAe;IACf,0BAA0B;IAE1B;;;OAGG;IACH,mBAAkB;IAElB,yBAAwB;IAExB,oEAAwC;IAKtC;;;;;;;+CALyB,gBAAU;mCAOjC,gBAAK;6BAMe,2BACZ;;wCAK4B,wCAC5B;;;;;;MAVT;IAGH,6CAgBC;IAED,eAAe;IACf,2BA+CG;IAEH;;MAA4E;IAE5E;;;OAGG;IACH,0BAaC;IAOD;;;OAGG;IACH,uBA6BC;IA8BC,4CAAuG;CAY1G;;;;+BAvM8B,+BAA+B"}
+{"version":3,"file":"Thumb.d.ts","sourceRoot":"","sources":["Thumb.js"],"names":[],"mappings":"AAUA;IACE,eAAe;IACf,0BAA0B;IAE1B;;;OAGG;IACH,mBAAkB;IAElB,yBAAwB;IAExB,oEAAwC;IAKtC;;;;;;;+CAPc,gBAElB;mCAKI,gBAAQ;6BAKR,2BAGU;;wCAMR,wCAAwB;;;;;;MATzB;IAGH,6CAgBC;IAED,eAAe;IACf,2BA+CG;IAEH;;MAA4E;IAE5E;;;OAGG;IACH,0BAaC;IAOD;;;OAGG;IACH,uBA6BC;IA8BC,4CAAuG;CAY1G;;;;+BAxM8B,+BAA+B"}

package/blocks/Thumb/Thumb.js

@@ -7,6 +7,7 @@ import { fileCssBg } from '../svg-backgrounds/svg-backgrounds.js';
 import { debounce } from '../utils/debounce.js';
 import { generateThumb } from '../utils/resizeImage.js';
 
+const CDN_MAX_OUTPUT_DIMENSION = 3000;
 export class Thumb extends FileItemConfig {
   /** @private */
   _renderedGridOnce = false;
@@ -47,7 +48,7 @@ export class Thumb extends FileItemConfig {
       size *= window.devicePixelRatio;
     }
 
-    return size;
+    return Math.min(size, CDN_MAX_OUTPUT_DIMENSION);
   }
 
   /** @private */
@@ -63,7 +64,7 @@ export class Thumb extends FileItemConfig {
       let thumbUrl = await this.proxyUrl(
         createCdnUrl(
           createOriginalUrl(this.cfg.cdnCname, uuid),
-          createCdnUrlModifiers(entry.getValue('cdnUrlModifiers'), `scale_crop/${size}x${size}/center`),
+          createCdnUrlModifiers(entry.getValue('cdnUrlModifiers'), `stretch/off`, `scale_crop/${size}x${size}/center`),
         ),
       );
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uploadcare/file-uploader",
-  "version": "1.15.0-alpha.19",
+  "version": "1.15.0-alpha.20",
   "description": "Building blocks for Uploadcare products integration",
   "keywords": [
     "web components",