@uploadcare/file-uploader 1.13.2 → 1.14.0-alpha.11

package/blocks/Modal/Modal.js

@@ -1,5 +1,6 @@
 // @ts-check
 import { Block } from '../../abstract/Block.js';
+import { ModalEvents } from '../../abstract/ModalManager.js';
 
 export class Modal extends Block {
   static styleAttrs = [...super.styleAttrs, 'uc-modal'];
@@ -9,8 +10,6 @@ export class Modal extends Block {
     super();
     this.init$ = {
       ...this.init$,
-      '*modalActive': false,
-      isOpen: false,
       closeClicked: this._handleDialogClose,
     };
   }
@@ -20,7 +19,11 @@ export class Modal extends Block {
   };
 
   _closeDialog = () => {
-    this.setOrAddState('*modalActive', false);
+    this.modalManager?.close(this.id);
+
+    if (!this.modalManager.hasActiveModals) {
+      document.body.style.overflow = '';
+    }
   };
 
   _handleDialogClose = () => {
@@ -42,39 +45,62 @@ export class Modal extends Block {
 
   show() {
     if (this.ref.dialog.showModal) {
+      this.setAttribute('aria-modal', 'true');
       this.ref.dialog.showModal();
     } else {
       this.ref.dialog.setAttribute('open', '');
     }
+
+    if (this.cfg.modalScrollLock) {
+      document.body.style.overflow = 'hidden';
+    }
   }
 
   hide() {
     if (this.ref.dialog.close) {
+      this.setAttribute('aria-modal', 'false');
       this.ref.dialog.close();
     } else {
       this.ref.dialog.removeAttribute('open');
     }
   }
 
+  /**
+   * @private
+   * @type {import('../../abstract/ModalManager.js').ModalCb}
+   */
+  _handleModalOpen({ id }) {
+    if (id === this.id) {
+      this.show();
+    } else {
+      this.hide();
+    }
+  }
+
+  /**
+   * @private
+   * @type {import('../../abstract/ModalManager.js').ModalCb}
+   */
+  _handleModalClose({ id }) {
+    if (id === this.id) {
+      this.hide();
+    }
+  }
+
+  /** @private */
+  _handleModalCloseAll() {
+    this.hide();
+  }
+
   initCallback() {
     super.initCallback();
 
+    this.modalManager?.registerModal(this.id, this);
+
     this.ref.dialog.addEventListener('close', this._handleDialogClose);
     this.ref.dialog.addEventListener('mousedown', this._handleDialogMouseDown);
     this.ref.dialog.addEventListener('mouseup', this._handleDialogMouseUp);
 
-    this.sub('*modalActive', (modalActive) => {
-      if (this.$.isOpen !== modalActive) {
-        this.$.isOpen = modalActive;
-      }
-
-      if (modalActive && this.cfg.modalScrollLock) {
-        document.body.style.overflow = 'hidden';
-      } else {
-        document.body.style.overflow = '';
-      }
-    });
-
     this.subConfigValue('modalBackdropStrokes', (val) => {
       if (val) {
         this.setAttribute('strokes', '');
@@ -83,15 +109,13 @@ export class Modal extends Block {
       }
     });
 
-    this.sub('isOpen', (isOpen) => {
-      if (isOpen) {
-        this.show();
-        this.setAttribute('aria-modal', 'true');
-      } else {
-        this.hide();
-        this.setAttribute('aria-modal', 'false');
-      }
-    });
+    this.handleModalOpen = this._handleModalOpen.bind(this);
+    this.handleModalClose = this._handleModalClose.bind(this);
+    this.handleModalCloseAll = this._handleModalCloseAll.bind(this);
+
+    this.modalManager.subscribe(ModalEvents.OPEN, this.handleModalOpen);
+    this.modalManager.subscribe(ModalEvents.CLOSE, this.handleModalClose);
+    this.modalManager.subscribe(ModalEvents.CLOSE_ALL, this.handleModalCloseAll);
   }
 
   destroyCallback() {
@@ -101,6 +125,10 @@ export class Modal extends Block {
     this.ref.dialog.removeEventListener('close', this._handleDialogClose);
     this.ref.dialog.removeEventListener('mousedown', this._handleDialogMouseDown);
     this.ref.dialog.removeEventListener('mouseup', this._handleDialogMouseUp);
+
+    this.modalManager.unsubscribe(ModalEvents.OPEN, this.handleModalOpen);
+    this.modalManager.unsubscribe(ModalEvents.CLOSE, this.handleModalClose);
+    this.modalManager.unsubscribe(ModalEvents.CLOSE_ALL, this.handleModalCloseAll);
   }
 }
 

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,sBAAsB;IACtB,kBAAgB;IAEhB,WAIE;CA8CH;;;;sBA3DqB,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

@@ -24,6 +24,7 @@ export class ProgressBar extends Block {
         this.ref.realProgressLine.addEventListener(
           'transitionend',
           () => {
+            this.classList.add('uc-progress-bar--hidden');
             this.ref.realProgressLine.classList.toggle('uc-progress--hidden', true);
           },
           {

package/blocks/ProgressBar/progress-bar.css

@@ -41,6 +41,7 @@ uc-progress-bar .uc-fake-progress {
     display 1s;
   /* stylelint-disable-next-line property-no-unknown */
   transition-behavior: allow-discrete;
+  z-index: 1;
 }
 
 uc-progress-bar .uc-fake-progress--hidden {

package/blocks/Range/Range.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Range.d.ts","sourceRoot":"","sources":["Range.js"],"names":[],"mappings":"AAEA;IAqC0C,cAAgB;IApCxD;;;;;MAUE;IAIA,+BAA+B;IAC/B,qCAA4B;CAe/B;;;;8BAjC6B,sBAAsB"}
+{"version":3,"file":"Range.d.ts","sourceRoot":"","sources":["Range.js"],"names":[],"mappings":"AAEA;;IACE;;;;;MAUE;IAIA,+BAA+B;IAC/B,qCAA4B;CAe/B;;;;8BAjC6B,sBAAsB"}

package/blocks/SimpleBtn/SimpleBtn.d.ts

@@ -6,8 +6,8 @@ export class SimpleBtn extends UploaderBlock {
         '*commonProgress': number;
         '*uploadList': never[];
         '*uploadQueue': import("@uploadcare/upload-client").Queue;
-        '*collectionErrors': any[];
-        '*collectionState': import("../../index.js").OutputCollectionState<import("../../index.js").OutputCollectionStatus, "maybe-has-group"> | null;
+        '*collectionErrors': ReturnType<import("../../index.js").OutputErrorCollection>[];
+        '*collectionState': import("../../index.js").OutputCollectionState | null;
         '*groupInfo': import("@uploadcare/upload-client").UploadcareGroup | null;
         '*uploadTrigger': Set<string>;
         '*secureUploadsManager': import("../../abstract/SecureUploadsManager.js").SecureUploadsManager | null;

package/blocks/SimpleBtn/SimpleBtn.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SimpleBtn.d.ts","sourceRoot":"","sources":["SimpleBtn.js"],"names":[],"mappings":"AAIA;IAMI;;;;;;;;;;;;;;;;;MAOC;CAoBJ;;;;8BApC6B,iCAAiC"}
+{"version":3,"file":"SimpleBtn.d.ts","sourceRoot":"","sources":["SimpleBtn.js"],"names":[],"mappings":"AAIA;IAMI;;;;;;;+CAmBI,gBACH;mCAGgB,gBAAU;6BAE3B,2BAIO;;wCAGD,wCAA2B;;;;;;MAzBhC;CAoBJ;;;;8BApC6B,iCAAiC"}

package/blocks/SimpleBtn/SimpleBtn.js

@@ -1,6 +1,6 @@
 // @ts-check
 import { UploaderBlock } from '../../abstract/UploaderBlock.js';
-import { asBoolean } from '../Config/normalizeConfigValue.js';
+import { asBoolean } from '../Config/validatorsType.js';
 
 export class SimpleBtn extends UploaderBlock {
   static styleAttrs = [...super.styleAttrs, 'uc-simple-btn'];

package/blocks/SourceBtn/SourceBtn.d.ts

@@ -22,8 +22,8 @@ export class SourceBtn extends UploaderBlock {
         '*commonProgress': number;
         '*uploadList': never[];
         '*uploadQueue': import("@uploadcare/upload-client").Queue;
-        '*collectionErrors': any[];
-        '*collectionState': import("../../index.js").OutputCollectionState<import("../../index.js").OutputCollectionStatus, "maybe-has-group"> | null;
+        '*collectionErrors': ReturnType<import("../../index.js" /** @type {string | undefined} */).OutputErrorCollection>[];
+        '*collectionState': import("../../index.js").OutputCollectionState | null;
         '*groupInfo': import("@uploadcare/upload-client").UploadcareGroup | null;
         '*uploadTrigger': Set<string>;
         '*secureUploadsManager': import("../../abstract/SecureUploadsManager.js").SecureUploadsManager | null;

package/blocks/SourceBtn/SourceBtn.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SourceBtn.d.ts","sourceRoot":"","sources":["SourceBtn.js"],"names":[],"mappings":"AAOA;;;;;;;;;GASG;AAEH;IAEE,iCAAiC;IACjC,MADW,MAAM,GAAG,SAAS,CACZ;IACjB;;;OAGG;IACH,yBAAsB;IAKpB;;;;;;;;;;;;;;;;MAIC;IAGH,kBAuCC;IAkBD,kCAAkC;IAClC,yBADY,OAAO,QAGlB;IAED,2BAA2B;IAC3B,cADY,MAAM,WAGjB;IAED,iBAYC;IAED,2BAA2B;IAC3B,gBADY,MAAM,QAcjB;CACF;;;;sBA9HY;IACZ,IAAQ,EAAE,MAAM,CAAC;IACjB,QAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAY,CAAC,EAAE,MAAM,OAAO,CAAC;IAC7B,cAAkB,CAAC,EAAE,OAAO,MAAM,EAAE,OAAO,CAAC,CAAC;CAC1C;8BAd0B,iCAAiC"}
+{"version":3,"file":"SourceBtn.d.ts","sourceRoot":"","sources":["SourceBtn.js"],"names":[],"mappings":"AASA;;;;;;;;;GASG;AAEH;IAEE,iCAAiC;IACjC,MADW,MAAM,GAAG,SAAS,CACZ;IACjB;;;OAGG;IACH,yBAAsB;IAKpB;;;;;;+CAZc,gBACjB,CAAC,iCAAiC;mCAIhC,gBAAU;6BAKJ,2BAGN;;wCAQS,wCACL;;;;;;MANF;IAGH,kBA2DC;IAkBD,kCAAkC;IAClC,yBADY,OAAO,QAGlB;IAED,2BAA2B;IAC3B,cADY,MAAM,WAGjB;IAED,iBAgBC;IAED,2BAA2B;IAC3B,gBADY,MAAM,QAcjB;CACF;;;;sBAtJY;IACR,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC1C;8BAhB0B,iCAAiC"}

package/blocks/SourceBtn/SourceBtn.js

@@ -1,7 +1,9 @@
 // @ts-check
 import { UploaderBlock } from '../../abstract/UploaderBlock.js';
 import { ActivityBlock } from '../../abstract/ActivityBlock.js';
-import { ExternalUploadSource, UploadSource } from '../utils/UploadSource.js';
+import { ExternalUploadSource, UploadSource, UploadSourceMobile } from '../utils/UploadSource.js';
+import { CameraSourceTypes } from '../CameraSource/constants.js';
+import { isSupportCapture } from '../utils/supportCapture.js';
 
 const L10N_PREFIX = 'src-type-';
 
@@ -53,19 +55,39 @@ export class SourceBtn extends UploaderBlock {
       type: UploadSource.CAMERA,
       activity: ActivityBlock.activities.CAMERA,
       activate: () => {
-        const supportsCapture = 'capture' in document.createElement('input');
+        const supportsCapture = isSupportCapture();
+
         if (supportsCapture) {
           this.api.openSystemDialog({ captureCamera: true });
         }
         return !supportsCapture;
       },
     });
+
     this.registerType({
       type: 'draw',
       activity: ActivityBlock.activities.DRAW,
       icon: 'edit-draw',
     });
 
+    for (let mobileSourceType of Object.values(UploadSourceMobile)) {
+      this.registerType({
+        type: mobileSourceType,
+        activity: ActivityBlock.activities.CAMERA,
+        activate: () => {
+          const supportsCapture = isSupportCapture();
+          if (supportsCapture) {
+            this.api.openSystemDialog({
+              captureCamera: true,
+              modeCamera:
+                mobileSourceType === 'mobile-photo-camera' ? CameraSourceTypes.PHOTO : CameraSourceTypes.VIDEO,
+            });
+          }
+          return !supportsCapture;
+        },
+      });
+    }
+
     for (let externalSourceType of Object.values(ExternalUploadSource)) {
       this.registerType({
         type: externalSourceType,
@@ -110,11 +132,15 @@ export class SourceBtn extends UploaderBlock {
     const configType = this._registeredTypes[this.type];
     const { activity, activate, activityParams = {} } = configType;
     const showActivity = activate ? activate() : !!activity;
-    showActivity &&
+
+    if (showActivity) {
+      this.modalManager.open(/** @type {string} */ (activity));
+
       this.set$({
         '*currentActivityParams': activityParams,
         '*currentActivity': activity,
       });
+    }
   }
 
   /** @param {string} type */

package/blocks/SourceList/SourceList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SourceList.d.ts","sourceRoot":"","sources":["SourceList.js"],"names":[],"mappings":"AAGA;CA2BC;sBA9BqB,yBAAyB"}
+{"version":3,"file":"SourceList.d.ts","sourceRoot":"","sources":["SourceList.js"],"names":[],"mappings":"AAMA;CA4CC;sBAjDqB,yBAAyB"}

package/blocks/SourceList/SourceList.js

@@ -1,9 +1,13 @@
+// @ts-check
 import { Block } from '../../abstract/Block.js';
 import { stringToArray } from '../../utils/stringToArray.js';
+import { deserializeCsv } from '../utils/comma-separated.js';
+import { isSupportCapture } from '../utils/supportCapture.js';
 
 export class SourceList extends Block {
   initCallback() {
     super.initCallback();
+
     this.subConfigValue('sourceList', (/** @type {String} */ val) => {
       let list = stringToArray(val);
       let html = '';
@@ -18,6 +22,22 @@ export class SourceList extends Block {
           return;
         }
 
+        if (srcName === 'camera' && isSupportCapture()) {
+          this.subConfigValue('cameraModes', (/** @type {String} */ val) => {
+            const cameraModes = deserializeCsv(val);
+
+            cameraModes.forEach((mode) => {
+              html += /* HTML */ `<uc-source-btn role="listitem" type="mobile-${mode}-camera"></uc-source-btn>`;
+            });
+
+            if (cameraModes.length === 0) {
+              html += /* HTML */ `<uc-source-btn role="listitem" type="mobile-photo-camera"></uc-source-btn>`;
+            }
+          });
+
+          return;
+        }
+
         html += /* HTML */ `<uc-source-btn role="listitem" type="${srcName}"></uc-source-btn>`;
       });
 

package/blocks/Spinner/Spinner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["Spinner.js"],"names":[],"mappings":"AAEA;IAGq5B,cAAgB;CAHx3B;;;;8BAFf,sBAAsB"}
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["Spinner.js"],"names":[],"mappings":"AAEA;;CAA6C;;;;8BAFf,sBAAsB"}

package/blocks/StartFrom/StartFrom.js

@@ -3,7 +3,7 @@ import { ActivityBlock } from '../../abstract/ActivityBlock.js';
 export class StartFrom extends ActivityBlock {
   historyTracked = true;
   /** @type {import('../../abstract/ActivityBlock.js').ActivityType} */
-  activityType = 'start-from';
+  activityType = ActivityBlock.activities.START_FROM;
 
   initCallback() {
     super.initCallback();

package/blocks/Thumb/Thumb.d.ts

@@ -0,0 +1,48 @@
+export class Thumb extends UploaderBlock {
+    /**
+     * @private
+     * @type {any} TODO: Add types for upload entry
+     */
+    private _entry;
+    /**
+     * @private
+     * @type {IntersectionObserverEntry['boundingClientRect'] | null}
+     */
+    private _thumbRect;
+    _debouncedGenerateThumb: (() => Promise<void>) & {
+        cancel: () => void;
+    };
+    _isIntersecting: boolean;
+    init$: {
+        thumbUrl: string;
+        badgeIcon: string;
+        uid: string;
+        '*commonProgress': number;
+        '*uploadList': never[];
+        '*uploadQueue': import("@uploadcare/upload-client").Queue;
+        '*collectionErrors': ReturnType<import("../../index.js").OutputErrorCollection>[];
+        '*collectionState': import("../../index.js").OutputCollectionState | null;
+        '*groupInfo': import("@uploadcare/upload-client").UploadcareGroup | null;
+        '*uploadTrigger': Set<string>;
+        '*secureUploadsManager': import("../../abstract/SecureUploadsManager.js").SecureUploadsManager | null;
+        '*currentActivity': null;
+        '*currentActivityParams': {};
+        '*history': never[];
+        '*historyBack': null;
+        '*closeModal': () => void;
+    };
+    _calculateThumbSize(): number;
+    /** @private */
+    private _generateThumbnail;
+    /**
+     * @private
+     * @param {IntersectionObserverEntry[]} entries
+     */
+    private _observerCallback;
+    _observer: IntersectionObserver | undefined;
+}
+export namespace Thumb {
+    let template: string;
+}
+import { UploaderBlock } from '../../abstract/UploaderBlock.js';
+//# sourceMappingURL=Thumb.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Thumb.d.ts","sourceRoot":"","sources":["Thumb.js"],"names":[],"mappings":"AAMA;IACE;;;OAGG;IACH,eAAc;IAEd;;;OAGG;IACH,mBAAkB;IAElB;;MAA4E;IAE5E,yBAAwB;IAKtB;;;;;;;+CALF,gBAAS;mCAMD,gBAAU;6BAON,2BACC;;wCAGH,wCAGP;;;;;;MAVA;IAGH,8BAYC;IAED,eAAe;IACf,2BAqCC;IAED;;;OAGG;IACH,0BAaC;IAqCC,4CAAuG;CAW1G;;;;8BAzJ6B,iCAAiC"}

package/blocks/Thumb/Thumb.js

@@ -0,0 +1,169 @@
+import { UploaderBlock } from '../../abstract/UploaderBlock.js';
+import { createCdnUrl, createCdnUrlModifiers, createOriginalUrl } from '../../utils/cdn-utils.js';
+import { fileCssBg } from '../svg-backgrounds/svg-backgrounds.js';
+import { debounce } from '../utils/debounce.js';
+import { generateThumb } from '../utils/resizeImage.js';
+
+export class Thumb extends UploaderBlock {
+  /**
+   * @private
+   * @type {any} TODO: Add types for upload entry
+   */
+  _entry = null;
+
+  /**
+   * @private
+   * @type {IntersectionObserverEntry['boundingClientRect'] | null}
+   */
+  _thumbRect = null;
+
+  _debouncedGenerateThumb = debounce(this._generateThumbnail.bind(this), 100);
+
+  _isIntersecting = false;
+
+  constructor() {
+    super();
+
+    this.init$ = {
+      ...this.init$,
+      thumbUrl: '',
+      badgeIcon: '',
+      uid: '',
+    };
+  }
+
+  _calculateThumbSize() {
+    let size = Math.max(
+      parseInt(String(this?._thumbRect?.height || 0)),
+      parseInt(String(this?._thumbRect?.width || 0)),
+      this.cfg.thumbSize,
+    );
+
+    if (window.devicePixelRatio > 1) {
+      size *= window.devicePixelRatio;
+    }
+
+    return size;
+  }
+
+  /** @private */
+  async _generateThumbnail() {
+    if (!this._entry) {
+      return;
+    }
+    let entry = this._entry;
+
+    if (entry.getValue('fileInfo') && entry.getValue('isImage')) {
+      let size = this._calculateThumbSize();
+
+      let thumbUrl = await this.proxyUrl(
+        createCdnUrl(
+          createOriginalUrl(this.cfg.cdnCname, this._entry.getValue('uuid')),
+          createCdnUrlModifiers(entry.getValue('cdnUrlModifiers'), `scale_crop/${size}x${size}/center/-/preview/`),
+        ),
+      );
+      let currentThumbUrl = entry.getValue('thumbUrl');
+      if (currentThumbUrl !== thumbUrl) {
+        entry.setValue('thumbUrl', thumbUrl);
+        currentThumbUrl?.startsWith('blob:') && URL.revokeObjectURL(currentThumbUrl);
+      }
+      return;
+    }
+
+    if (entry.getValue('file')?.type.includes('image')) {
+      try {
+        let size = this._calculateThumbSize();
+
+        let thumbUrl = await generateThumb(entry.getValue('file'), size);
+        entry.setValue('thumbUrl', thumbUrl);
+      } catch (err) {
+        let color = window.getComputedStyle(this).getPropertyValue('--uc-muted-foreground');
+        entry.setValue('thumbUrl', fileCssBg(color));
+      }
+    } else {
+      let color = window.getComputedStyle(this).getPropertyValue('--uc-muted-foreground');
+      entry.setValue('thumbUrl', fileCssBg(color));
+    }
+  }
+
+  /**
+   * @private
+   * @param {IntersectionObserverEntry[]} entries
+   */
+  _observerCallback(entries) {
+    const [entry] = entries;
+    this._isIntersecting = entry.isIntersecting;
+
+    if (entry.isIntersecting) {
+      this._thumbRect = entry.boundingClientRect;
+      this._debouncedGenerateThumb();
+      this._observer?.disconnect();
+    }
+
+    if (entry.intersectionRatio === 0) {
+      this._debouncedGenerateThumb.cancel();
+    }
+  }
+
+  initCallback() {
+    super.initCallback();
+
+    this.defineAccessor('badgeIcon', (/** @type {string} */ val) => (this.$.badgeIcon = val));
+
+    this.defineAccessor('uid', (/** @type {string} */ value) => {
+      this.set$({ uid: value });
+    });
+
+    this.sub('uid', (value) => {
+      this._entry = this.uploadCollection.read(value);
+    });
+
+    this._entry?.subscribe('fileInfo', (fileInfo) => {
+      if (fileInfo?.isImage && this._isIntersecting) {
+        this._debouncedGenerateThumb();
+      }
+    });
+
+    this._entry?.subscribe('thumbUrl', (thumbUrl) => {
+      this.$.thumbUrl = thumbUrl ? `url(${thumbUrl})` : '';
+    });
+
+    this._entry?.subscribe('cdnUrlModifiers', () => {
+      if (this._isIntersecting) {
+        this._debouncedGenerateThumb();
+      }
+    });
+
+    this.setAttribute('role', 'img');
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    this._observer = new window.IntersectionObserver(this._observerCallback.bind(this), { threshold: 0.1 });
+
+    this._observer.observe(this);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+
+    this._debouncedGenerateThumb.cancel();
+    this._observer?.disconnect();
+  }
+}
+
+Thumb.template = /* html */ `
+  <div class="uc-thumb" set="style.backgroundImage: thumbUrl">
+    <div class="uc-badge">
+      <uc-icon set="@name: badgeIcon"></uc-icon>
+    </div>
+  </div>
+`;
+
+Thumb.bindAttributes({
+  // @ts-expect-error TODO: fix types inside symbiote
+  badgeIcon: null,
+  // @ts-expect-error TODO: fix types inside symbiote
+  uid: null,
+});

package/blocks/Thumb/thumb.css

@@ -0,0 +1,4 @@
+uc-thumb {
+  width: 100%;
+  height: 100%;
+}

package/blocks/UploadCtxProvider/EventEmitter.d.ts

@@ -61,9 +61,9 @@ export class EventEmitter {
      */
     private _debugPrint;
     /** @param {import('../../abstract/Block.js').Block} target */
-    bindTarget(target: import('../../abstract/Block.js').Block): void;
+    bindTarget(target: import("../../abstract/Block.js").Block): void;
     /** @param {import('../../abstract/Block.js').Block} target */
-    unbindTarget(target: import('../../abstract/Block.js').Block): void;
+    unbindTarget(target: import("../../abstract/Block.js").Block): void;
     /**
      * @private
      * @template {(typeof EventType)[keyof typeof EventType]} T
@@ -78,30 +78,30 @@ export class EventEmitter {
      * @param {TDebounce extends false | undefined ? unknown : () => unknown} [payload]
      * @param {{ debounce?: TDebounce }} [options]
      */
-    emit<T extends "change" | "file-added" | "file-removed" | "file-upload-start" | "file-upload-progress" | "file-upload-success" | "file-upload-failed" | "file-url-changed" | "modal-open" | "modal-close" | "done-click" | "upload-click" | "activity-change" | "common-upload-start" | "common-upload-progress" | "common-upload-success" | "common-upload-failed" | "group-created", TDebounce extends number | boolean | undefined>(type: T, payload?: (TDebounce extends false | undefined ? unknown : () => unknown) | undefined, { debounce }?: {
-        debounce?: TDebounce | undefined;
-    } | undefined): void;
+    emit<T extends (typeof EventType)[keyof typeof EventType], TDebounce extends boolean | number | undefined>(type: T, payload?: TDebounce extends false | undefined ? unknown : () => unknown, { debounce }?: {
+        debounce?: TDebounce;
+    }): void;
 }
 export type EventPayload = {
-    [EventType.FILE_ADDED]: import('../../index.js').OutputFileEntry<'idle'>;
-    [EventType.FILE_REMOVED]: import('../../index.js').OutputFileEntry<'removed'>;
-    [EventType.FILE_UPLOAD_START]: import('../../index.js').OutputFileEntry<'uploading'>;
-    [EventType.FILE_UPLOAD_PROGRESS]: import('../../index.js').OutputFileEntry<'uploading'>;
-    [EventType.FILE_UPLOAD_SUCCESS]: import('../../index.js').OutputFileEntry<'success'>;
-    [EventType.FILE_UPLOAD_FAILED]: import('../../index.js').OutputFileEntry<'failed'>;
-    [EventType.FILE_URL_CHANGED]: import('../../index.js').OutputFileEntry<'success'>;
+    [EventType.FILE_ADDED]: import("../../index.js").OutputFileEntry<"idle">;
+    [EventType.FILE_REMOVED]: import("../../index.js").OutputFileEntry<"removed">;
+    [EventType.FILE_UPLOAD_START]: import("../../index.js").OutputFileEntry<"uploading">;
+    [EventType.FILE_UPLOAD_PROGRESS]: import("../../index.js").OutputFileEntry<"uploading">;
+    [EventType.FILE_UPLOAD_SUCCESS]: import("../../index.js").OutputFileEntry<"success">;
+    [EventType.FILE_UPLOAD_FAILED]: import("../../index.js").OutputFileEntry<"failed">;
+    [EventType.FILE_URL_CHANGED]: import("../../index.js").OutputFileEntry<"success">;
     [EventType.MODAL_OPEN]: void;
     [EventType.MODAL_CLOSE]: void;
     [EventType.ACTIVITY_CHANGE]: {
-        activity: import('../../abstract/ActivityBlock.js').ActivityType;
+        activity: import("../../abstract/ActivityBlock.js").ActivityType;
     };
     [EventType.UPLOAD_CLICK]: void;
-    [EventType.DONE_CLICK]: import('../../index.js').OutputCollectionState;
-    [EventType.COMMON_UPLOAD_START]: import('../../index.js').OutputCollectionState<'uploading'>;
-    [EventType.COMMON_UPLOAD_PROGRESS]: import('../../index.js').OutputCollectionState<'uploading'>;
-    [EventType.COMMON_UPLOAD_SUCCESS]: import('../../index.js').OutputCollectionState<'success'>;
-    [EventType.COMMON_UPLOAD_FAILED]: import('../../index.js').OutputCollectionState<'failed'>;
-    [EventType.CHANGE]: import('../../index.js').OutputCollectionState;
-    [EventType.GROUP_CREATED]: import('../../index.js').OutputCollectionState<'success', 'has-group'>;
+    [EventType.DONE_CLICK]: import("../../index.js").OutputCollectionState;
+    [EventType.COMMON_UPLOAD_START]: import("../../index.js").OutputCollectionState<"uploading">;
+    [EventType.COMMON_UPLOAD_PROGRESS]: import("../../index.js").OutputCollectionState<"uploading">;
+    [EventType.COMMON_UPLOAD_SUCCESS]: import("../../index.js").OutputCollectionState<"success">;
+    [EventType.COMMON_UPLOAD_FAILED]: import("../../index.js").OutputCollectionState<"failed">;
+    [EventType.CHANGE]: import("../../index.js").OutputCollectionState;
+    [EventType.GROUP_CREATED]: import("../../index.js").OutputCollectionState<"success", "has-group">;
 };
 //# sourceMappingURL=EventEmitter.d.ts.map

package/blocks/UploadCtxProvider/EventEmitter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EventEmitter.d.ts","sourceRoot":"","sources":["EventEmitter.js"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;GAsBG;AAEH;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH;IAmBE,uDAAuD;IACvD,kCADsB,OAAO,EAAE,KAAK,IAAI,EAGvC;IArBD;;;OAGG;IACH,sBAA0B;IAE1B;;;OAGG;IACH,iBAAqB;IAErB;;;OAGG;IACH,oBAAmB;IAOnB,8DAA8D;IAC9D,mBADY,OAAO,yBAAyB,EAAE,KAAK,QAGlD;IAED,8DAA8D;IAC9D,qBADY,OAAO,yBAAyB,EAAE,KAAK,QAGlD;IAED;;;;;OAKG;IACH,kBAaC;IAED;;;;;;OAMG;IACH,ifAHiE,OAAO;;yBAkBvE;CACF;2BAtGY;IACZ,CAAK,UAAU,UAAU,CAAC,EAAE,OAAO,gBAAgB,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC7E,CAAK,UAAU,YAAY,CAAC,EAAE,OAAO,gBAAgB,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IAClF,CAAK,UAAU,iBAAiB,CAAC,EAAE,OAAO,gBAAgB,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;IACzF,CAAK,UAAU,oBAAoB,CAAC,EAAE,OAAO,gBAAgB,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;IAC5F,CAAK,UAAU,mBAAmB,CAAC,EAAE,OAAO,gBAAgB,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IACzF,CAAK,UAAU,kBAAkB,CAAC,EAAE,OAAO,gBAAgB,EAAE,eAAe,CAAC,QAAQ,CAAC,CAAC;IACvF,CAAK,UAAU,gBAAgB,CAAC,EAAE,OAAO,gBAAgB,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IACtF,CAAK,UAAU,UAAU,CAAC,EAAE,IAAI,CAAC;IACjC,CAAK,UAAU,WAAW,CAAC,EAAE,IAAI,CAAC;IAClC,CAAK,UAAU,eAAe,CAAC,EAAE;QACjC,QAAc,EAAE,OAAO,iCAAiC,EAAE,YAAY,CAAC;KAClE,CAAC;IACN,CAAK,UAAU,YAAY,CAAC,EAAE,IAAI,CAAC;IACnC,CAAK,UAAU,UAAU,CAAC,EAAE,OAAO,gBAAgB,EAAE,qBAAqB,CAAC;IAC3E,CAAK,UAAU,mBAAmB,CAAC,EAAE,OAAO,gBAAgB,EAAE,qBAAqB,CAAC,WAAW,CAAC,CAAC;IACjG,CAAK,UAAU,sBAAsB,CAAC,EAAE,OAAO,gBAAgB,EAAE,qBAAqB,CAAC,WAAW,CAAC,CAAC;IACpG,CAAK,UAAU,qBAAqB,CAAC,EAAE,OAAO,gBAAgB,EAAE,qBAAqB,CAAC,SAAS,CAAC,CAAC;IACjG,CAAK,UAAU,oBAAoB,CAAC,EAAE,OAAO,gBAAgB,EAAE,qBAAqB,CAAC,QAAQ,CAAC,CAAC;IAC/F,CAAK,UAAU,MAAM,CAAC,EAAE,OAAO,gBAAgB,EAAE,qBAAqB,CAAC;IACvE,CAAK,UAAU,aAAa,CAAC,EAAE,OAAO,gBAAgB,EAAE,qBAAqB,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC;CACnG"}
+{"version":3,"file":"EventEmitter.d.ts","sourceRoot":"","sources":["EventEmitter.js"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;GAsBG;AAEH;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH;IAmBE,uDAAuD;IACvD,wBADY,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,IAAI,EAGvC;IArBD;;;OAGG;IACH,sBAA0B;IAE1B;;;OAGG;IACH,iBAAqB;IAErB;;;OAGG;IACH,oBAAmB;IAOnB,8DAA8D;IAC9D,mBADY,OAAO,yBAAyB,EAAE,KAAK,QAGlD;IAED,8DAA8D;IAC9D,qBADY,OAAO,yBAAyB,EAAE,KAAK,QAGlD;IAED;;;;;OAKG;IACH,kBAaC;IAED;;;;;;OAMG;IACH,KAN0D,CAAC,SAA9C,CAAE,OAAO,SAAS,EAAE,MAAM,OAAO,SAAS,CAAE,EACb,SAAS,SAAvC,OAAO,GAAG,MAAM,GAAG,SAAU,QAChC,CAAC,YACD,SAAS,SAAS,KAAK,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,OAAO,iBAC7D;QAAE,QAAQ,CAAC,EAAE,SAAS,CAAA;KAAE,QAiBlC;CACF;2BAtGY;IACZ,CAAK,SAAS,CAAC,UAAU,CAAC,EAAE,OAAO,gBAAgB,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC7E,CAAK,SAAS,CAAC,YAAY,CAAC,EAAE,OAAO,gBAAgB,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IAClF,CAAK,SAAS,CAAC,iBAAiB,CAAC,EAAE,OAAO,gBAAgB,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;IACzF,CAAK,SAAS,CAAC,oBAAoB,CAAC,EAAE,OAAO,gBAAgB,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;IAC5F,CAAK,SAAS,CAAC,mBAAmB,CAAC,EAAE,OAAO,gBAAgB,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IACzF,CAAK,SAAS,CAAC,kBAAkB,CAAC,EAAE,OAAO,gBAAgB,EAAE,eAAe,CAAC,QAAQ,CAAC,CAAC;IACvF,CAAK,SAAS,CAAC,gBAAgB,CAAC,EAAE,OAAO,gBAAgB,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IACtF,CAAK,SAAS,CAAC,UAAU,CAAC,EAAE,IAAI,CAAC;IACjC,CAAK,SAAS,CAAC,WAAW,CAAC,EAAE,IAAI,CAAC;IAClC,CAAK,SAAS,CAAC,eAAe,CAAC,EAAE;QAC3B,QAAQ,EAAE,OAAO,iCAAiC,EAAE,YAAY,CAAC;KAClE,CAAC;IACN,CAAK,SAAS,CAAC,YAAY,CAAC,EAAE,IAAI,CAAC;IACnC,CAAK,SAAS,CAAC,UAAU,CAAC,EAAE,OAAO,gBAAgB,EAAE,qBAAqB,CAAC;IAC3E,CAAK,SAAS,CAAC,mBAAmB,CAAC,EAAE,OAAO,gBAAgB,EAAE,qBAAqB,CAAC,WAAW,CAAC,CAAC;IACjG,CAAK,SAAS,CAAC,sBAAsB,CAAC,EAAE,OAAO,gBAAgB,EAAE,qBAAqB,CAAC,WAAW,CAAC,CAAC;IACpG,CAAK,SAAS,CAAC,qBAAqB,CAAC,EAAE,OAAO,gBAAgB,EAAE,qBAAqB,CAAC,SAAS,CAAC,CAAC;IACjG,CAAK,SAAS,CAAC,oBAAoB,CAAC,EAAE,OAAO,gBAAgB,EAAE,qBAAqB,CAAC,QAAQ,CAAC,CAAC;IAC/F,CAAK,SAAS,CAAC,MAAM,CAAC,EAAE,OAAO,gBAAgB,EAAE,qBAAqB,CAAC;IACvE,CAAK,SAAS,CAAC,aAAa,CAAC,EAAE,OAAO,gBAAgB,EAAE,qBAAqB,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC;CACnG"}