@uploadcare/file-uploader 1.13.0-alpha.3 → 1.13.1-alpha.0

package/blocks/CloudImageEditor/src/CropFrame.js

@@ -446,54 +446,10 @@ export class CropFrame extends Block {
     this.ref['svg-el'].style.cursor = hoverThumb ? thumbCursor(hoverThumb.direction) : 'initial';
   }
 
-  /**
-   * @private
-   * @param {String} href
-   */
-  _createMask(href) {
-    if (this._frameImage) {
-      this._frameImage.setAttribute('href', href);
-      return;
-    }
-
-    let svg = this.ref['svg-el'];
-    let fr = document.createDocumentFragment();
-
-    let imageNode = createSvgNode('image', {
-      href,
-    });
-
-    imageNode.setAttribute('class', 'uc-cloud-mask');
-
-    fr.appendChild(imageNode);
-
-    svg.appendChild(fr);
-
-    this._frameImage = imageNode;
-  }
-
-  _updateMask() {
-    let cropBox = this.$['*cropBox'];
-
-    if (!cropBox || !this._frameImage) {
-      return;
-    }
-
-    let { x, y, width, height } = cropBox;
-
-    setSvgNodeAttrs(this._frameImage, {
-      x,
-      y,
-      height,
-      width,
-    });
-  }
-
   /** @private */
   _render() {
     this._updateBackdrop();
     this._updateFrame();
-    this._updateMask();
   }
 
   /** @param {boolean} visible */
@@ -535,12 +491,6 @@ export class CropFrame extends Block {
       });
     });
 
-    this.subConfigValue('cloudImageEditorMaskHref', (maskHref) => {
-      if (maskHref) {
-        this._createMask(maskHref);
-      }
-    });
-
     this.sub('dragging', (dragging) => {
       if (!this._frameGuides) return;
       this._frameGuides.setAttribute(

package/blocks/CloudImageEditor/src/css/common.css

@@ -1190,7 +1190,3 @@ uc-presence-toggle.uc-initial {
 [uc-cloud-image-editor] button:focus-visible {
   outline: 1px auto -webkit-focus-ring-color;
 }
-
-[uc-cloud-image-editor] .uc-cloud-mask {
-  pointer-events: none;
-}

package/blocks/CloudImageEditor/src/lib/parseTabs.js

@@ -1,12 +1,12 @@
 // @ts-check
 
-import { deserealizeCsv } from '../../../utils/comma-separated.js';
+import { deserializeCsv } from '../../../utils/comma-separated.js';
 import { ALL_TABS } from '../toolbar-constants.js';
 
 /** @param {string} tabs */
 export const parseTabs = (tabs) => {
   if (!tabs) return ALL_TABS;
-  const tabList = deserealizeCsv(tabs).filter((tab) => ALL_TABS.includes(tab));
+  const tabList = deserializeCsv(tabs).filter((tab) => ALL_TABS.includes(tab));
   if (tabList.length === 0) {
     return ALL_TABS;
   }

package/blocks/Config/Config.d.ts

@@ -9,7 +9,7 @@
  *   'iconHrefResolver',
  *   'fileValidators',
  *   'collectionValidators',
- *   'mediaRecorerOptions',
+ *   'mediaRecorderOptions',
  * ]}
  */
 export const complexConfigKeys: [
@@ -20,7 +20,7 @@ export const complexConfigKeys: [
     'iconHrefResolver',
     'fileValidators',
     'collectionValidators',
-    'mediaRecorerOptions'
+    'mediaRecorderOptions'
 ];
 export type Config = import('../../utils/mixinClass.js').MixinClass<typeof ConfigClass, import('../../types').ConfigType>;
 /** @typedef {import('../../utils/mixinClass.js').MixinClass<typeof ConfigClass, import('../../types').ConfigType>} Config */
@@ -64,6 +64,6 @@ declare class ConfigClass extends Block {
 }
 import { Block } from '../../abstract/Block.js';
 /** Mapping of attribute names to state */
-declare const attrStateMapping: Record<"pubkey" | "multiple" | "accept" | "store" | "debug" | "crop-preset" | "secure-expire" | "max-local-file-size-bytes" | "multiple-min" | "multiple-max" | "confirm-upload" | "img-only" | "external-sources-preferred-types" | "external-sources-embed-css" | "camera-mirror" | "camera-capture" | "source-list" | "thumb-size" | "show-empty-list" | "use-local-image-editor" | "use-cloud-image-editor" | "cloud-image-editor-tabs" | "remove-copyright" | "image-shrink" | "modal-scroll-lock" | "modal-backdrop-strokes" | "source-list-wrap" | "remote-tab-session-key" | "cdn-cname" | "base-url" | "social-base-url" | "secure-signature" | "secure-delivery-proxy" | "retry-throttled-request-max-times" | "multipart-min-file-size" | "multipart-chunk-size" | "max-concurrent-requests" | "multipart-max-concurrent-requests" | "multipart-max-attempts" | "check-for-url-duplicates" | "save-url-for-recurrent-uploads" | "group-output" | "user-agent-integration" | "locale-name" | "secure-uploads-expire-threshold" | "default-camera-mode" | "enable-audio-recording" | "enable-video-recording" | "max-video-recording-duration" | "cloud-image-editor-mask-href" | "secureexpire" | "croppreset" | "maxlocalfilesizebytes" | "multiplemin" | "multiplemax" | "confirmupload" | "imgonly" | "externalsourcespreferredtypes" | "externalsourcesembedcss" | "cameramirror" | "cameracapture" | "sourcelist" | "thumbsize" | "showemptylist" | "uselocalimageeditor" | "usecloudimageeditor" | "cloudimageeditortabs" | "removecopyright" | "imageshrink" | "modalscrolllock" | "modalbackdropstrokes" | "sourcelistwrap" | "remotetabsessionkey" | "cdncname" | "baseurl" | "socialbaseurl" | "securesignature" | "securedeliveryproxy" | "retrythrottledrequestmaxtimes" | "multipartminfilesize" | "multipartchunksize" | "maxconcurrentrequests" | "multipartmaxconcurrentrequests" | "multipartmaxattempts" | "checkforurlduplicates" | "saveurlforrecurrentuploads" | "groupoutput" | "useragentintegration" | "localename" | "secureuploadsexpirethreshold" | "defaultcameramode" | "enableaudiorecording" | "enablevideorecording" | "maxvideorecordingduration" | "cloudimageeditormaskhref", string>;
+declare const attrStateMapping: Record<"accept" | "pubkey" | "multiple" | "store" | "debug" | "crop-preset" | "secure-expire" | "max-local-file-size-bytes" | "multiple-min" | "multiple-max" | "confirm-upload" | "img-only" | "external-sources-preferred-types" | "external-sources-embed-css" | "camera-mirror" | "camera-capture" | "source-list" | "thumb-size" | "show-empty-list" | "use-local-image-editor" | "use-cloud-image-editor" | "cloud-image-editor-tabs" | "remove-copyright" | "image-shrink" | "modal-scroll-lock" | "modal-backdrop-strokes" | "source-list-wrap" | "remote-tab-session-key" | "cdn-cname" | "base-url" | "social-base-url" | "secure-signature" | "secure-delivery-proxy" | "retry-throttled-request-max-times" | "multipart-min-file-size" | "multipart-chunk-size" | "max-concurrent-requests" | "multipart-max-concurrent-requests" | "multipart-max-attempts" | "check-for-url-duplicates" | "save-url-for-recurrent-uploads" | "group-output" | "user-agent-integration" | "locale-name" | "secure-uploads-expire-threshold" | "camera-modes" | "default-camera-mode" | "enable-audio-recording" | "enable-video-recording" | "max-video-recording-duration" | "secureexpire" | "croppreset" | "maxlocalfilesizebytes" | "multiplemin" | "multiplemax" | "confirmupload" | "imgonly" | "externalsourcespreferredtypes" | "externalsourcesembedcss" | "cameramirror" | "cameracapture" | "sourcelist" | "thumbsize" | "showemptylist" | "uselocalimageeditor" | "usecloudimageeditor" | "cloudimageeditortabs" | "removecopyright" | "imageshrink" | "modalscrolllock" | "modalbackdropstrokes" | "sourcelistwrap" | "remotetabsessionkey" | "cdncname" | "baseurl" | "socialbaseurl" | "securesignature" | "securedeliveryproxy" | "retrythrottledrequestmaxtimes" | "multipartminfilesize" | "multipartchunksize" | "maxconcurrentrequests" | "multipartmaxconcurrentrequests" | "multipartmaxattempts" | "checkforurlduplicates" | "saveurlforrecurrentuploads" | "groupoutput" | "useragentintegration" | "localename" | "secureuploadsexpirethreshold" | "cameramodes" | "defaultcameramode" | "enableaudiorecording" | "enablevideorecording" | "maxvideorecordingduration", string>;
 export {};
 //# sourceMappingURL=Config.d.ts.map

package/blocks/Config/Config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Config.d.ts","sourceRoot":"","sources":["Config.js"],"names":[],"mappings":"AAYA;;;;;;;;;;;;;GAaG;AACH,gCAXU;IACT,UAAc;IACd,0BAA8B;IAC9B,gCAAoC;IACpC,gCAAoC;IACpC,kBAAsB;IACtB,gBAAoB;IACpB,sBAA0B;IAC1B,qBAAyB;CACtB,CAWF;qBAiNY,OAAO,2BAA2B,EAAE,UAAU,CAAC,kBAAkB,EAAE,OAAO,aAAa,EAAE,UAAU,CAAC;AAAlH,6HAA6H;AAG7H,4BAAmF;AAvLnF;IAkBE;;;;OAIG;IACH,+BAYC;IAED;;;;OAIG;IACH,2BAQC;IAED;;;;OAIG;IACH,kBAiBC;IAED;;;OAGG;IACH,kBAIC;IAED;;;;OAIG;IACH,wCAJW,MAAM,iBACN,OAAO,aACP,OAAO,QAoBjB;IA0CD;;;;OAIG;IACH,+BAJW,MAAM,uBAAuB,UAC7B,MAAM,UACN,MAAM,QAahB;CACF;sBAvOqB,yBAAyB;AAsD/C,0CAA0C;AAC1C,moEAGG"}
+{"version":3,"file":"Config.d.ts","sourceRoot":"","sources":["Config.js"],"names":[],"mappings":"AAcA;;;;;;;;;;;;;GAaG;AACH,gCAXU;IACT,UAAc;IACd,0BAA8B;IAC9B,gCAAoC;IACpC,gCAAoC;IACpC,kBAAsB;IACtB,gBAAoB;IACpB,sBAA0B;IAC1B,sBAA0B;CACvB,CAWF;qBAyNY,OAAO,2BAA2B,EAAE,UAAU,CAAC,kBAAkB,EAAE,OAAO,aAAa,EAAE,UAAU,CAAC;AAAlH,6HAA6H;AAG7H,4BAAmF;AA/LnF;IAkBE;;;;OAIG;IACH,+BAYC;IAED;;;;OAIG;IACH,2BAQC;IAED;;;;OAIG;IACH,kBAyBC;IAED;;;OAGG;IACH,kBAIC;IAED;;;;OAIG;IACH,wCAJW,MAAM,iBACN,OAAO,aACP,OAAO,QAoBjB;IA0CD;;;;OAIG;IACH,+BAJW,MAAM,uBAAuB,UAC7B,MAAM,UACN,MAAM,QAahB;CACF;sBAjPqB,yBAAyB;AAwD/C,0CAA0C;AAC1C,smEAGG"}

package/blocks/Config/Config.js

@@ -4,6 +4,8 @@ import { initialConfig } from './initialConfig.js';
 import { sharedConfigKey } from '../../abstract/sharedConfigKey.js';
 import { toKebabCase } from '../../utils/toKebabCase.js';
 import { normalizeConfigValue } from './normalizeConfigValue.js';
+import { runAssertions } from './assertions.js';
+import { runSideEffects } from './side-effects.js';
 
 const allConfigKeys = /** @type {(keyof import('../../types').ConfigType)[]} */ ([
   // "debug" option should go first to be able to print debug messages from the very beginning
@@ -21,7 +23,7 @@ const allConfigKeys = /** @type {(keyof import('../../types').ConfigType)[]} */
  *   'iconHrefResolver',
  *   'fileValidators',
  *   'collectionValidators',
- *   'mediaRecorerOptions',
+ *   'mediaRecorderOptions',
  * ]}
  */
 export const complexConfigKeys = [
@@ -32,7 +34,7 @@ export const complexConfigKeys = [
   'iconHrefResolver',
   'fileValidators',
   'collectionValidators',
-  'mediaRecorerOptions',
+  'mediaRecorderOptions',
 ];
 
 /** @type {(key: keyof import('../../types').ConfigType) => key is keyof import('../../types').ConfigComplexType} */
@@ -136,6 +138,14 @@ class ConfigClass extends Block {
     this._flushValueToState(key, normalizedValue);
 
     this.debugPrint(`[uc-config] "${key}"`, normalizedValue);
+
+    runAssertions(this.cfg);
+    runSideEffects({
+      key,
+      value: normalizedValue ?? null,
+      setValue: this._setValue.bind(this),
+      getValue: this._getValue.bind(this),
+    });
   }
 
   /**
@@ -145,7 +155,7 @@ class ConfigClass extends Block {
   _getValue(key) {
     const anyThis = /** @type {typeof this & any} */ (this);
     const localPropName = getLocalPropName(key);
-    return anyThis[localPropName];
+    return anyThis[localPropName] ?? this.$[sharedConfigKey(key)];
   }
 
   /**

package/blocks/Config/assertions.d.ts

@@ -0,0 +1,5 @@
+/** Runs on every config change and warns about potential issues. */
+export const runAssertions: ((cfg: import('../../types').ConfigType) => void) & {
+    cancel: () => void;
+};
+//# sourceMappingURL=assertions.d.ts.map

package/blocks/Config/assertions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"assertions.d.ts","sourceRoot":"","sources":["assertions.js"],"names":[],"mappings":"AAyBA,oEAAoE;AACpE,mCACc,OAAO,aAAa,EAAE,UAAU;;EAS5C"}

package/blocks/Config/assertions.js

@@ -0,0 +1,37 @@
+import { warnOnce } from '../../utils/warnOnce.js';
+import { debounce } from '../utils/debounce.js';
+
+const ASSERTIONS = [
+  {
+    test: (cfg) => cfg.accept && !!cfg.imgOnly,
+    message:
+      'There could be a mistake.\n' +
+      'Both `accept` and `imgOnly` parameters are set.\n' +
+      'The value of `accept` will be concatenated with the internal image mime types list.',
+  },
+  {
+    test: (cfg) => cfg.enableVideoRecording !== null,
+    message:
+      'The `enableVideoRecording` parameter is deprecated and will be removed in the next major release.\n' +
+      'Please use the `cameraModes` parameter instead.',
+  },
+  {
+    test: (cfg) => cfg.defaultCameraMode !== null,
+    message:
+      'The `defaultCameraMode` parameter is deprecated and will be removed in the next major release.\n' +
+      'Please use the `cameraModes` parameter instead.',
+  },
+];
+
+/** Runs on every config change and warns about potential issues. */
+export const runAssertions = debounce(
+  /** @param {import('../../types').ConfigType} cfg */
+  (cfg) => {
+    for (const { test, message } of ASSERTIONS) {
+      if (test(cfg)) {
+        warnOnce(message);
+      }
+    }
+  },
+  0,
+);

package/blocks/Config/initialConfig.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"initialConfig.d.ts","sourceRoot":"","sources":["initialConfig.js"],"names":[],"mappings":"AAKA,uDAAwD;AACxD,+DAAgE;AAChE,sEAAuE;AAEvE,wDAAwD;AACxD,4BADW,OAAO,sBAAsB,EAAE,UAAU,CAoElD"}
+{"version":3,"file":"initialConfig.d.ts","sourceRoot":"","sources":["initialConfig.js"],"names":[],"mappings":"AAKA,uDAAwD;AACxD,+DAAgE;AAChE,sEAAuE;AAEvE,wDAAwD;AACxD,4BADW,OAAO,sBAAsB,EAAE,UAAU,CAmElD"}

package/blocks/Config/initialConfig.js

@@ -68,11 +68,10 @@ export const initialConfig = {
   fileValidators: [],
   collectionValidators: [],
 
-  defaultCameraMode: 'photo',
+  cameraModes: 'photo, video',
+  defaultCameraMode: null,
   enableAudioRecording: true,
-  enableVideoRecording: true,
+  enableVideoRecording: null,
   maxVideoRecordingDuration: null,
-  mediaRecorerOptions: null,
-
-  cloudImageEditorMaskHref: null,
+  mediaRecorderOptions: null,
 };

package/blocks/Config/normalizeConfigValue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"normalizeConfigValue.d.ts","sourceRoot":"","sources":["normalizeConfigValue.js"],"names":[],"mappings":"AAeO,iCADK,OAAO,WAWlB;AA8JM,sGAHI,OAAO,mDAcjB"}
+{"version":3,"file":"normalizeConfigValue.d.ts","sourceRoot":"","sources":["normalizeConfigValue.js"],"names":[],"mappings":"AAiBO,iCADK,OAAO,WAWlB;AAwKM,sGAHI,OAAO,mDAcjB"}

package/blocks/Config/normalizeConfigValue.js

@@ -1,5 +1,7 @@
 // @ts-check
 
+import { CameraSourceTypes } from '../CameraSource/constants.js';
+import { deserializeCsv } from '../utils/comma-separated.js';
 import { initialConfig } from './initialConfig.js';
 
 /** @param {unknown} value */
@@ -31,18 +33,28 @@ const asStore = (value) => (value === 'auto' ? value : asBoolean(value));
 const asCameraCapture = (value) => {
   const strValue = asString(value);
   if (strValue !== 'user' && strValue !== 'environment' && strValue !== '') {
-    throw new Error(`Invalid "cameraCapture" value: "${strValue}"`);
+    throw new Error(`Invalid value: "${strValue}"`);
   }
   return strValue;
 };
 
 /** @param {unknown} value */
-const asCameraTab = (value) => {
+const asCameraMode = (value) => {
   const strValue = asString(value);
-  if (strValue !== 'photo' && strValue !== 'video') {
-    throw new Error(`Invalid "CameraTab" value: "${strValue}"`);
+  if (!Object.values(CameraSourceTypes).includes(strValue)) {
+    throw new Error(`Invalid value: "${strValue}"`);
   }
-  return strValue;
+  return /** @type {import('../CameraSource/CameraSource.js').CameraMode} */ (strValue);
+};
+
+/** @param {unknown} value */
+const asCameraModes = (value) => {
+  const str = asString(value);
+  const array = deserializeCsv(str);
+  if (array.some((item) => !Object.values(CameraSourceTypes).includes(item))) {
+    throw new Error(`Invalid value: "${JSON.stringify(array)}"`);
+  }
+  return str;
 };
 
 /** @param {unknown} value */
@@ -166,13 +178,13 @@ const mapping = {
   fileValidators: /** @type {typeof asArray<import('../../types').FileValidators>} */ (asArray),
   collectionValidators: /** @type {typeof asArray<import('../../types').CollectionValidators>} */ (asArray),
 
-  defaultCameraMode: asCameraTab,
+  cameraModes: asCameraModes,
+  defaultCameraMode: asCameraMode,
   enableAudioRecording: asBoolean,
   enableVideoRecording: asBoolean,
-  mediaRecorerOptions: asObject,
+  mediaRecorderOptions: asObject,
 
   maxVideoRecordingDuration: asNumber,
-  cloudImageEditorMaskHref: asString,
 };
 
 /**

package/blocks/Config/side-effects.d.ts

@@ -0,0 +1,7 @@
+export function runSideEffects<T extends keyof import("../../types").ConfigType>({ key, value, setValue, getValue }: {
+    key: T;
+    value: import("../../types").ConfigType[T];
+    setValue: (key: T, value: import("../../types").ConfigType[T]) => void;
+    getValue: (key: T) => import("../../types").ConfigType[T];
+}): void;
+//# sourceMappingURL=side-effects.d.ts.map

package/blocks/Config/side-effects.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-effects.d.ts","sourceRoot":"","sources":["side-effects.js"],"names":[],"mappings":"AAWO;;;sEAJgE,IAAI;;SAwB1E"}

package/blocks/Config/side-effects.js

@@ -0,0 +1,32 @@
+import { deserializeCsv, serializeCsv } from '../utils/comma-separated.js';
+
+/**
+ * @template {keyof import('../../types').ConfigType} T
+ * @param {{
+ *   key: T;
+ *   value: import('../../types').ConfigType[T];
+ *   setValue: (key: T, value: import('../../types').ConfigType[T]) => void;
+ *   getValue: (key: T) => import('../../types').ConfigType[T];
+ * }} options
+ */
+export const runSideEffects = ({ key, value, setValue, getValue }) => {
+  if (key === 'enableVideoRecording' && value !== null) {
+    let cameraModes = deserializeCsv(getValue('cameraModes'));
+    if (value && !cameraModes.includes('video')) {
+      cameraModes = cameraModes.concat('video');
+    } else if (!value) {
+      cameraModes = cameraModes.filter((mode) => mode !== 'video');
+    }
+    setValue('cameraModes', serializeCsv(cameraModes));
+  }
+
+  if (key === 'defaultCameraMode' && value !== null) {
+    let cameraModes = deserializeCsv(getValue('cameraModes'));
+    cameraModes = cameraModes.sort((a, b) => {
+      if (a === value) return -1;
+      if (b === value) return 1;
+      return 0;
+    });
+    setValue('cameraModes', serializeCsv(cameraModes));
+  }
+};

package/blocks/FileItem/FileItem.d.ts

@@ -18,6 +18,7 @@ export class FileItem extends UploaderBlock {
         uid: string;
         itemName: string;
         errorText: string;
+        hint: string;
         thumbUrl: string;
         progressValue: number;
         progressVisible: boolean;
@@ -62,6 +63,9 @@ export class FileItem extends UploaderBlock {
      * @param {(value: any) => void} handler
      */
     private _subEntry;
+    _updateHint: (() => void) & {
+        readonly cancel: () => void;
+    };
     /**
      * @private
      * @param {String} id

package/blocks/FileItem/FileItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileItem.d.ts","sourceRoot":"","sources":["FileItem.js"],"names":[],"mappings":"AAkBA;IAIE,eAAe;IACf,mBAAuB;IACvB;;;OAGG;IACH,eAAc;IACd,eAAe;IACf,wBAAwB;IACxB,eAAe;IACf,gCAA4E;IAC5E,eAAe;IACf,iCAA0E;IAE1E,eAAe;IACf,sBAAsB;IAKpB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MA4BC;IAGH,eASC;IAED;;;OAGG;IACH,0BAaC;IAED,eAAe;IACf,wBAgBC;IAED,eAAe;IACf,2BAsCC;IAED;;;;OAIG;IACH,kBAUC;IAED;;;OAGG;IACH,uBAkDC;IAsCD,wEAAwE;IACxE,oBADY,CAAC,oBAAoB,CAAC,CAAC,MAAM,oBAAoB,CAAC,QA0B7D;IAaC,eAAe;IACf,kBAEE;IAWJ;;;MAEC;IAED;;;OAGG;IACH,uBAEC;IAED,wBAsFC;CACF;;;;;8BApa6B,iCAAiC;AAO/D;;;;;GAKG"}
+{"version":3,"file":"FileItem.d.ts","sourceRoot":"","sources":["FileItem.js"],"names":[],"mappings":"AAoBA;IAIE,eAAe;IACf,mBAAuB;IACvB;;;OAGG;IACH,eAAc;IACd,eAAe;IACf,wBAAwB;IACxB,eAAe;IACf,gCAA4E;IAC5E,eAAe;IACf,iCAA0E;IAE1E,eAAe;IACf,sBAAsB;IAKpB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MA6BC;IAGH,eASC;IAED;;;OAGG;IACH,0BAaC;IAED,eAAe;IACf,wBAgBC;IAED,eAAe;IACf,2BAsCC;IAED;;;;OAIG;IACH,kBAUC;IAED;;MAaQ;IAER;;;OAGG;IACH,uBAmDC;IAsCD,wEAAwE;IACxE,oBADY,CAAC,oBAAoB,CAAC,CAAC,MAAM,oBAAoB,CAAC,QA0B7D;IAaC,eAAe;IACf,kBAEE;IAWJ;;;MAEC;IAED;;;OAGG;IACH,uBAEC;IAED,wBAsFC;CACF;;;;;8BAvb6B,iCAAiC;AAS/D;;;;;GAKG"}

package/blocks/FileItem/FileItem.js

@@ -8,6 +8,8 @@ import { fileCssBg } from '../svg-backgrounds/svg-backgrounds.js';
 import { debounce } from '../utils/debounce.js';
 import { generateThumb } from '../utils/resizeImage.js';
 import { parseShrink } from '../../utils/parseShrink.js';
+import { UploadSource } from '../utils/UploadSource.js';
+import { throttle } from '../utils/throttle.js';
 
 const FileItemState = Object.freeze({
   FINISHED: Symbol('FINISHED'),
@@ -45,6 +47,7 @@ export class FileItem extends UploaderBlock {
       uid: '',
       itemName: '',
       errorText: '',
+      hint: '',
       thumbUrl: '',
       progressValue: 0,
       progressVisible: false,
@@ -178,6 +181,21 @@ export class FileItem extends UploaderBlock {
     this._entrySubs.add(sub);
   }
 
+  _updateHint = throttle(() => {
+    const showHint =
+      this.$.state === FileItemState.UPLOADING &&
+      this._entry.getValue('externalUrl') &&
+      this._entry.getValue('source') !== UploadSource.URL &&
+      this._entry.getValue('errors').length === 0 &&
+      this.$.progressValue === 0;
+
+    const hint = showHint
+      ? this.l10n('waiting-for', { source: this.l10n(`src-type-${this._entry.getValue('source')}`) })
+      : '';
+
+    this.$.hint = hint;
+  }, 100);
+
   /**
    * @private
    * @param {String} id
@@ -195,6 +213,7 @@ export class FileItem extends UploaderBlock {
 
     this._subEntry('uploadProgress', (uploadProgress) => {
       this.$.progressValue = uploadProgress;
+      this._updateHint();
     });
 
     this._subEntry('fileName', (name) => {
@@ -280,8 +299,6 @@ export class FileItem extends UploaderBlock {
 
     if (state === FileItemState.UPLOADING) {
       this.$.isFocused = false;
-    } else {
-      this.$.progressValue = 0;
     }
 
     this.set$({
@@ -296,6 +313,8 @@ export class FileItem extends UploaderBlock {
         status: this.l10n(state?.description?.toLocaleLowerCase() ?? '').toLocaleLowerCase(),
       }),
     });
+
+    this._updateHint();
   }
 
   destroyCallback() {
@@ -434,6 +453,7 @@ FileItem.template = /* HTML */ `
     <div aria-live="polite" class="uc-file-name-wrapper" set="@aria-label:ariaLabelStatusFile;">
       <span class="uc-file-name" set="@title: itemName">{{itemName}}</span>
       <span class="uc-file-error" set="@hidden: !errorText">{{errorText}}</span>
+      <span class="uc-file-hint" set="@hidden: !hint">{{hint}}</span>
     </div>
     <div class="uc-file-actions">
       <button

package/blocks/ProgressBar/ProgressBar.d.ts

@@ -1,6 +1,8 @@
 export class ProgressBar extends Block {
     /** @type {Number} */
     _value: number;
+    /** @type {Boolean} */
+    _visible: boolean;
     init$: any;
 }
 export namespace ProgressBar {

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

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["ProgressBar.js"],"names":[],"mappings":"AAEA;IACE,qBAAqB;IACrB,eAAW;IAEX,WAIE;CAyBH;;;;sBAnCqB,yBAAyB"}
+{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["ProgressBar.js"],"names":[],"mappings":"AAEA;IACE,qBAAqB;IACrB,eAAW;IAEX,sBAAsB;IACtB,kBAAgB;IAEhB,WAIE;CA+CH;;;;sBA5DqB,yBAAyB"}

package/blocks/ProgressBar/ProgressBar.js

@@ -4,6 +4,9 @@ export class ProgressBar extends Block {
   /** @type {Number} */
   _value = 0;
 
+  /** @type {Boolean} */
+  _visible = true;
+
   init$ = {
     ...this.init$,
     width: 0,
@@ -13,26 +16,51 @@ export class ProgressBar extends Block {
   initCallback() {
     super.initCallback();
     this.defineAccessor('value', (value) => {
-      if (value === undefined) {
-        return;
-      }
+      if (!value) return;
       const prevValue = this._value;
       this._value = value;
+      if (!this._visible) return;
+
+      if (value === 100) {
+        this.ref.realProgressLine.addEventListener(
+          'transitionend',
+          () => {
+            this.ref.realProgressLine.classList.toggle('uc-progress--hidden', true);
+          },
+          {
+            once: true,
+          },
+        );
+      }
+
+      this.ref.fakeProgressLine.classList.toggle('uc-fake-progress--hidden', value !== 0);
 
       if (value === 0 && prevValue > 0) {
-        this.ref.line.addEventListener('transitionend', () => {
-          this.style.setProperty('--l-width', this._value.toString());
-        });
+        this.ref.realProgressLine.addEventListener(
+          'transitionend',
+          () => {
+            this.style.setProperty('--l-progress-value', this._value.toString());
+          },
+          {
+            once: true,
+          },
+        );
         return;
       }
 
-      this.style.setProperty('--l-width', this._value.toString());
+      this.style.setProperty('--l-progress-value', this._value.toString());
     });
 
     this.defineAccessor('visible', (visible) => {
-      this.ref.line.classList.toggle('uc-progress--hidden', !visible);
+      this._visible = visible;
+
+      this.ref.realProgressLine.classList.toggle('uc-progress--hidden', !visible);
+      this.ref.fakeProgressLine.classList.toggle('uc-fake-progress--hidden', !visible);
     });
   }
 }
 
-ProgressBar.template = /* HTML */ ` <div ref="line" class="uc-progress"></div> `;
+ProgressBar.template = /* HTML */ `
+  <div ref="fakeProgressLine" class="uc-fake-progress"></div>
+  <div ref="realProgressLine" class="uc-progress"></div>
+`;

package/blocks/ProgressBar/progress-bar.css

@@ -1,4 +1,6 @@
 uc-progress-bar {
+  --l-progress-value: 0;
+
   position: absolute;
   top: 0;
   bottom: 0;
@@ -10,7 +12,8 @@ uc-progress-bar {
 }
 
 uc-progress-bar .uc-progress {
-  width: calc(var(--l-width) * 1%);
+  position: absolute;
+  width: calc(var(--l-progress-value) * 1%);
   height: 100%;
   background-color: var(--uc-primary);
   transform: translateX(0);
@@ -23,3 +26,34 @@ uc-progress-bar .uc-progress {
 uc-progress-bar .uc-progress--hidden {
   opacity: 0;
 }
+
+uc-progress-bar .uc-fake-progress {
+  --l-fake-progress-width: 30;
+
+  position: absolute;
+  width: calc(var(--l-fake-progress-width) * 1%);
+  height: 100%;
+  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;
+}
+
+uc-progress-bar .uc-fake-progress--hidden {
+  opacity: 0;
+  display: none;
+}
+
+@keyframes fake-progress-animation {
+  from {
+    transform: translateX(-100%);
+  }
+
+  to {
+    transform: translateX(calc(100 / var(--l-fake-progress-width) * 100 * 1%));
+  }
+}

package/blocks/UploadList/upload-list.css

@@ -1,4 +1,5 @@
 uc-upload-list {
+  position: relative;
   display: flex;
   flex-direction: column;
   width: 100%;

package/blocks/utils/comma-separated.d.ts

@@ -1,3 +1,3 @@
-export function deserealizeCsv(value: string): string[];
+export function deserializeCsv(value: string): string[];
 export function serializeCsv(value: unknown[]): string;
 //# sourceMappingURL=comma-separated.d.ts.map

package/blocks/utils/comma-separated.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"comma-separated.d.ts","sourceRoot":"","sources":["comma-separated.js"],"names":[],"mappings":"AAGO,sCADK,MAAM,YAOjB;AAGM,oCADK,OAAO,EAAE,UAOpB"}
+{"version":3,"file":"comma-separated.d.ts","sourceRoot":"","sources":["comma-separated.js"],"names":[],"mappings":"AAGO,sCADK,MAAM,YAUjB;AAGM,oCADK,OAAO,EAAE,UAOpB"}

package/blocks/utils/comma-separated.js

@@ -1,12 +1,15 @@
 // @ts-check
 
 /** @param {string} value */
-export const deserealizeCsv = (value) => {
+export const deserializeCsv = (value) => {
   if (!value) {
     return [];
   }
 
-  return value.split(',').map((item) => item.trim());
+  return value
+    .split(',')
+    .map((item) => item.trim())
+    .filter(Boolean);
 };
 
 /** @param {unknown[]} value */

package/env.d.ts

@@ -1,4 +1,4 @@
 /** Do not edit this file manually. It's generated during build process. */
 export const PACKAGE_NAME: "blocks";
-export const PACKAGE_VERSION: "1.12.0";
+export const PACKAGE_VERSION: "1.13.0";
 //# sourceMappingURL=env.d.ts.map

package/env.js

@@ -1,3 +1,3 @@
 /** Do not edit this file manually. It's generated during build process. */
 export const PACKAGE_NAME = 'blocks';
-export const PACKAGE_VERSION = '1.12.0';
+export const PACKAGE_VERSION = '1.13.0';