@uploadcare/file-uploader 1.13.3-alpha.0 → 1.14.0-alpha.11

package/blocks/FileItem/FileItem.js

@@ -29,10 +29,7 @@ export class FileItem extends UploaderBlock {
    * @type {any} TODO: Add types for upload entry
    */
   _entry = null;
-  /** @private */
-  _isIntersecting = false;
-  /** @private */
-  _debouncedGenerateThumb = debounce(this._generateThumbnail.bind(this), 100);
+
   /** @private */
   _debouncedCalculateState = debounce(this._calculateState.bind(this), 100);
 
@@ -57,12 +54,14 @@ export class FileItem extends UploaderBlock {
       isUploading: false,
       isFocused: false,
       isEditable: false,
+      showFileNames: false,
       state: FileItemState.IDLE,
       ariaLabelStatusFile: '',
       onEdit: () => {
         this.$['*currentActivityParams'] = {
           internalId: this._entry.uid,
         };
+        this.modalManager.open(ActivityBlock.activities.CLOUD_IMG_EDIT);
         this.$['*currentActivity'] = ActivityBlock.activities.CLOUD_IMG_EDIT;
       },
       onRemove: () => {
@@ -79,7 +78,6 @@ export class FileItem extends UploaderBlock {
       sub.remove();
     }
 
-    this._debouncedGenerateThumb.cancel();
     this._debouncedCalculateState.cancel();
     this._entrySubs = new Set();
     this._entry = null;
@@ -91,17 +89,14 @@ export class FileItem extends UploaderBlock {
    */
   _observerCallback(entries) {
     let [entry] = entries;
+
     this._isIntersecting = entry.isIntersecting;
+    this._thumbRect = entry.boundingClientRect;
 
     if (entry.isIntersecting && !this._renderedOnce) {
       this.render();
       this._renderedOnce = true;
     }
-    if (entry.intersectionRatio === 0) {
-      this._debouncedGenerateThumb.cancel();
-    } else {
-      this._debouncedGenerateThumb();
-    }
   }
 
   /** @private */
@@ -131,7 +126,12 @@ export class FileItem extends UploaderBlock {
     let entry = this._entry;
 
     if (entry.getValue('fileInfo') && entry.getValue('isImage')) {
-      let size = this.cfg.thumbSize;
+      let size = Math.max(
+        parseInt(String(this?._thumbRect?.height || 0)),
+        parseInt(String(this?._thumbRect?.width || 0)),
+        this.cfg.thumbSize,
+      );
+
       let thumbUrl = await this.proxyUrl(
         createCdnUrl(
           createOriginalUrl(this.cfg.cdnCname, this._entry.getValue('uuid')),
@@ -146,10 +146,6 @@ export class FileItem extends UploaderBlock {
       return;
     }
 
-    if (entry.getValue('thumbUrl')) {
-      return;
-    }
-
     if (entry.getValue('file')?.type.includes('image')) {
       try {
         let thumbUrl = await generateThumb(entry.getValue('file'), this.cfg.thumbSize);
@@ -225,21 +221,8 @@ export class FileItem extends UploaderBlock {
       this.$.itemName = entry.getValue('fileName') || externalUrl || this.l10n('file-no-name');
     });
 
-    this._subEntry('fileInfo', (fileInfo) => {
+    this._subEntry('fileInfo', () => {
       this._debouncedCalculateState();
-      if (fileInfo && this._isIntersecting) {
-        this._debouncedGenerateThumb();
-      }
-    });
-
-    this._subEntry('cdnUrlModifiers', () => {
-      if (this._isIntersecting) {
-        this._debouncedGenerateThumb();
-      }
-    });
-
-    this._subEntry('thumbUrl', (thumbUrl) => {
-      this.$.thumbUrl = thumbUrl ? `url(${thumbUrl})` : '';
     });
 
     this._subEntry('errors', () => this._debouncedCalculateState());
@@ -247,10 +230,6 @@ export class FileItem extends UploaderBlock {
     this._subEntry('fileSize', () => this._debouncedCalculateState());
     this._subEntry('mimeType', () => this._debouncedCalculateState());
     this._subEntry('isImage', () => this._debouncedCalculateState());
-
-    if (this._isIntersecting) {
-      this._debouncedGenerateThumb();
-    }
   }
 
   initCallback() {
@@ -265,6 +244,25 @@ export class FileItem extends UploaderBlock {
     });
 
     this.subConfigValue('useCloudImageEditor', () => this._debouncedCalculateState());
+    this.subConfigValue('filesViewMode', (mode) => {
+      if (this.cfg.filesViewMode === 'list') {
+        this.$.showFileNames = true;
+      }
+      if (this.cfg.filesViewMode === 'grid') {
+        this.$.showFileNames = this.cfg.gridShowFileNames;
+      }
+
+      this.setAttribute('mode', mode);
+    });
+
+    this.subConfigValue('gridShowFileNames', (value) => {
+      if (this.cfg.filesViewMode === 'grid') {
+        this.$.showFileNames = value;
+      }
+      if (this.cfg.filesViewMode === 'list') {
+        this.$.showFileNames = true;
+      }
+    });
 
     this.onclick = () => {
       FileItem.activeInstances.forEach((inst) => {
@@ -338,7 +336,6 @@ export class FileItem extends UploaderBlock {
   disconnectedCallback() {
     super.disconnectedCallback();
 
-    this._debouncedGenerateThumb.cancel();
     this._observer?.disconnect();
   }
 
@@ -445,14 +442,11 @@ export class FileItem extends UploaderBlock {
 
 FileItem.template = /* HTML */ `
   <div class="uc-inner" set="@finished: isFinished; @uploading: isUploading; @failed: isFailed; @focused: isFocused">
-    <div class="uc-thumb" set="style.backgroundImage: thumbUrl">
-      <div class="uc-badge">
-        <uc-icon set="@name: badgeIcon"></uc-icon>
-      </div>
-    </div>
+    <uc-thumb set="uid:uid;badgeIcon:badgeIcon"></uc-thumb>
+
     <div aria-atomic="true" aria-live="polite" class="uc-file-name-wrapper" set="@aria-label:ariaLabelStatusFile;">
-      <span class="uc-file-name">{{itemName}}</span>
-      <span class="uc-file-error" set="@hidden: !errorText">{{errorText}}</span>
+      <span class="uc-file-name" set="@hidden: !showFileNames">{{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">
@@ -476,7 +470,11 @@ FileItem.template = /* HTML */ `
         <uc-icon name="upload"></uc-icon>
       </button>
     </div>
-    <uc-progress-bar class="uc-progress-bar" set="value: progressValue; visible: progressVisible;"> </uc-progress-bar>
+    <uc-progress-bar
+      class="uc-progress-bar"
+      set="value: progressValue; visible: progressVisible; @hasFileName: showFileNames"
+    >
+    </uc-progress-bar>
   </div>
 `;
 FileItem.activeInstances = new Set();

package/blocks/FileItem/file-item.css

@@ -45,6 +45,7 @@ uc-file-item .uc-thumb {
   height: var(--uc-preview-size);
   background-color: var(--uc-secondary);
   background-position: center center;
+  background-repeat: no-repeat;
   background-size: cover;
   border-radius: var(--uc-radius);
 }
@@ -142,3 +143,92 @@ uc-file-item .uc-file-actions {
   align-items: center;
   justify-content: center;
 }
+
+/* File item in the grid */
+uc-file-item[mode='grid'] {
+  overflow: visible;
+  min-height: initial;
+}
+
+uc-file-item[mode='grid'] .uc-inner {
+  height: 100%;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr max-content;
+  padding: 0;
+  background-color: transparent;
+  margin-bottom: 0;
+  border-radius: 0;
+}
+
+uc-file-item[mode='grid'] .uc-inner[failed] .uc-badge {
+  display: none;
+}
+
+uc-file-item[mode='grid'] .uc-thumb {
+  width: 100%;
+  height: 100%;
+}
+
+uc-file-item[mode='grid'] .uc-badge {
+  right: var(--uc-padding);
+  bottom: var(--uc-padding);
+}
+
+uc-file-item[mode='grid'] .uc-file-name-wrapper {
+  padding: 0;
+}
+
+uc-file-item[mode='grid'] .uc-file-name:not([hidden]) + .uc-file-error {
+  bottom: calc(var(--uc-padding) + var(--uc-font-size));
+}
+
+uc-file-item[mode='grid'] .uc-file-error {
+  position: absolute;
+  background-color: var(--uc-destructive-foreground);
+  border-radius: var(--uc-radius);
+  color: var(--uc-background);
+  bottom: var(--uc-padding);
+  left: var(--uc-padding);
+  right: var(--uc-padding);
+  padding: calc(var(--uc-padding) / 2) var(--uc-padding);
+}
+
+uc-file-item[mode='grid'] .uc-file-actions {
+  position: absolute;
+  top: var(--uc-padding);
+  right: var(--uc-padding);
+}
+
+uc-file-item[mode='grid'] button {
+  background-color: var(--uc-background);
+}
+
+uc-file-item[mode='grid'] button:hover {
+  background-color: var(--uc-muted);
+}
+
+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);
+  background-color: var(--uc-background);
+  z-index: 1;
+}
+
+uc-file-item[mode='grid'] .uc-progress-bar.uc-progress-bar--hidden {
+  opacity: 0;
+}
+
+uc-file-item[mode='grid'] .uc-progress-bar[hasfilename] {
+  bottom: calc(var(--uc-padding) + var(--uc-font-size));
+}
+
+uc-file-item[mode='grid'] .uc-progress-bar .uc-progress {
+  background-color: var(--uc-primary);
+  opacity: 0.7;
+}

package/blocks/Img/ImgBase.d.ts

@@ -12,14 +12,14 @@ export class ImgBase extends ImgConfig {
      * @param {String} [size]
      * @returns {String | Number}
      */
-    _validateSize(size?: string | undefined): string | number;
+    _validateSize(size?: string): string | number;
     /**
      * Image operations
      *
      * @param {String} [size]
      * @param {String} [blur]
      */
-    _getCdnModifiers(size?: string | undefined, blur?: string | undefined): string;
+    _getCdnModifiers(size?: string, blur?: string): string;
     /**
      * @private
      * @param {String} [size]
@@ -38,7 +38,7 @@ export class ImgBase extends ImgConfig {
      * @param {Number} [k]
      * @param {Boolean} [wOnly]
      */
-    _getElSize(el: HTMLElement, k?: number | undefined, wOnly?: boolean | undefined): string | null;
+    _getElSize(el: HTMLElement, k?: number, wOnly?: boolean): string | null;
     /** @param {HTMLImageElement} img */
     _setupEventProxy(img: HTMLImageElement): void;
     /** @type {HTMLImageElement} */

package/blocks/Img/ImgBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImgBase.d.ts","sourceRoot":"","sources":["ImgBase.js"],"names":[],"mappings":"AAgBA;IACE,uBAAmB;IACnB,8BAA0B;IAE1B;;;OAGG;IACH,gBAMC;IAED;;;;;OAKG;IACH,0CAFa,eAAe,CAoB3B;IAED;;;;;OAKG;IACH,+EAWC;IAED;;;;;OAKG;IACH,oBA6DC;IAED;;;;OAIG;IACH,kBAUC;IAED;;;;OAIG;IACH,eAJW,WAAW,sEAcrB;IAED,oCAAoC;IACpC,sBADY,gBAAgB,QAY3B;IAED,+BAA+B;IAC/B,4BAMC;IAED;;;;;;MAUC;IAED,2BAEC;IAED,sBAEC;IAED,mCAOC;IAED,4BAEC;IAED,8BAA8B;IAC9B,aADY,WAAW,QAgBtB;IAED,oBAsBC;IAED,cAEC;IAED,yBAEC;IAED,yBAUC;IAED;;;;aAQC;IAED;;aAGC;IAED;;;;qBAqBC;IAED,6BA8DC;IAED,aAMC;CACF;0BAlZyB,gBAAgB"}
+{"version":3,"file":"ImgBase.d.ts","sourceRoot":"","sources":["ImgBase.js"],"names":[],"mappings":"AAgBA;IACE,uBAAmB;IACnB,8BAA0B;IAE1B;;;OAGG;IACH,gBAMC;IAED;;;;;OAKG;IACH,8BAFa,eAAe,CAoB3B;IAED;;;;;OAKG;IACH,uDAWC;IAED;;;;;OAKG;IACH,oBA6DC;IAED;;;;OAIG;IACH,kBAUC;IAED;;;;OAIG;IACH,eAJW,WAAW,8CAcrB;IAED,oCAAoC;IACpC,sBADY,gBAAgB,QAY3B;IAED,+BAA+B;IAC/B,WADW,gBAAgB,CAO1B;IAED;;;;;;MAUC;IAED,2BAEC;IAED,sBAEC;IAED,mCAOC;IAED,4BAEC;IAED,8BAA8B;IAC9B,aADY,WAAW,QAgBtB;IAED,oBAsBC;IAED,cAEC;IAED,yBAEC;IAED,yBAUC;IAED;;;;aAQC;IAED;;aAGC;IAED;;;;qBAqBC;IAED,6BA8DC;IAED,aAMC;CACF;0BAlZyB,gBAAgB"}

package/blocks/Img/ImgConfig.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImgConfig.d.ts","sourceRoot":"","sources":["ImgConfig.js"],"names":[],"mappings":"AAUA;IAkFE,0CAEC;IAlDgD,cACjD;IAlCA,cAAqB;IAErB;;;OAGG;IACH,iBAFa,GAAG,CAIf;IAED,qDAAqD;IACrD,wBAIC;IAED;;;OAGG;IACH,+BAFiB,GAAG,KAAK,IAAI,QAW5B;IAED,0BAEC;IAED,8BAMC;IAED;;;OAGG;IACH,qBAHW,WAAW,SACX,MAAM,IAAI,QAsBpB;IAfC,eAAe;IACf,qBAOQ;IAGN,eAAe;IACf,kBAA0B;IAoB9B,oEAIC;CACF;8BArGmC,sBAAsB"}
+{"version":3,"file":"ImgConfig.d.ts","sourceRoot":"","sources":["ImgConfig.js"],"names":[],"mappings":"AAUA;IAkFE,0CAEC;;IAnFD,cAAqB;IAErB;;;OAGG;IACH,iBAFa,GAAG,CAIf;IAED,qDAAqD;IACrD,wBAIC;IAED;;;OAGG;IACH,yBAFW,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,QAW5B;IAED,0BAEC;IAED,8BAMC;IAED;;;OAGG;IACH,qBAHW,WAAW,SACX,MAAM,IAAI,QAsBpB;IAfC,eAAe;IACf,qBAOQ;IAGN,eAAe;IACf,kBAA0B;IAoB9B,oEAIC;CACF;8BArGmC,sBAAsB"}

package/blocks/Img/configurations.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"configurations.d.ts","sourceRoot":"","sources":["configurations.js"],"names":[],"mappings":"AAAA,mCAAoC;AACpC,2CAA4C;AAC5C,yBAA0B;AAC1B,4BAA6B;AAC7B,+BACuH;AAEvH,6BAA8B;AAC9B,iCAAkC;AAElC;;;GAGG"}
+{"version":3,"file":"configurations.d.ts","sourceRoot":"","sources":["configurations.js"],"names":[],"mappings":"AAAA,uBAAwB,WAAW,CAAC;AACpC,8BAA+B,YAAY,CAAC;AAC5C,uBAAwB,CAAC,CAAC;AAC1B,0BAA2B,CAAC,CAAC;AAC7B,+BACuH;AAEvH,wBAAyB,IAAI,CAAC;AAC9B,4BAA6B,IAAI,CAAC;AAElC;;;GAGG"}

package/blocks/Modal/Modal.d.ts

@@ -1,8 +1,6 @@
 export class Modal extends Block {
     static StateConsumerScope: string;
     init$: {
-        '*modalActive': boolean;
-        isOpen: boolean;
         closeClicked: () => void;
     };
     _handleBackdropClick: () => void;
@@ -16,6 +14,27 @@ export class Modal extends Block {
     _handleDialogMouseUp: (e: Event) => void;
     show(): void;
     hide(): void;
+    /**
+     * @private
+     * @type {import('../../abstract/ModalManager.js').ModalCb}
+     */
+    private _handleModalOpen;
+    /**
+     * @private
+     * @type {import('../../abstract/ModalManager.js').ModalCb}
+     */
+    private _handleModalClose;
+    /** @private */
+    private _handleModalCloseAll;
+    handleModalOpen: ((data: {
+        id: import("../../abstract/ModalManager.js").ModalId;
+        modal?: import("../../abstract/ModalManager.js").ModalNode;
+    }) => void) | undefined;
+    handleModalClose: ((data: {
+        id: import("../../abstract/ModalManager.js").ModalId;
+        modal?: import("../../abstract/ModalManager.js").ModalNode;
+    }) => void) | undefined;
+    handleModalCloseAll: (() => void) | undefined;
 }
 export namespace Modal {
     let template: string;

package/blocks/Modal/Modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["Modal.js"],"names":[],"mappings":"AAGA;IAEE,kCAAoC;IAIlC;;;;MAKC;IAGH,iCAEE;IAEF,yBAEE;IAEF,+BAEE;IAEF,uBAAuB;IACvB,4BADY,KAAK,UAIf;IAFA,eAAe;IACf,yBAAgC;IAGlC,uBAAuB;IACvB,0BADY,KAAK,UAKf;IAEF,aAMC;IAED,aAMC;CAgDF;;;;sBAvGqB,yBAAyB"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["Modal.js"],"names":[],"mappings":"AAIA;IAEE,kCAAoC;IAIlC;;MAGC;IAGH,iCAEE;IAEF,yBAME;IAEF,+BAEE;IAEF,uBAAuB;IACvB,yBAA0B,GADd,KACe,UAGzB;IAFA,eAAe;IACf,yBAAgC;IAGlC,uBAAuB;IACvB,uBAAwB,GADZ,KACa,UAIvB;IAEF,aAWC;IAED,aAOC;IAED;;;OAGG;IACH,yBAMC;IAED;;;OAGG;IACH,0BAIC;IAED,eAAe;IACf,6BAEC;IAmBC;;aAnGY,CAAC;4BAmG0C;IACvD;;aApGY,CAAC;4BAoG4C;IACzD,8CAA+D;CAmBlE;;;;sBAnIqB,yBAAyB"}

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

@@ -20,10 +20,10 @@ export class SourceBtn extends UploaderBlock {
         iconName: string;
         'src-type': string;
         '*commonProgress': number;
-        '*uploadList': never[]; /** @type {string | undefined} */
+        '*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":"AAQA;;;;;;;;;GASG;AAEH;IAEE,iCAAiC;IACjC,MADW,MAAM,GAAG,SAAS,CACZ;IACjB;;;OAGG;IACH,yBAAsB;IAKpB;;;;gCAXF,iCAAiC;;;;;;;;;;;;MAe9B;IAGH,kBAkDC;IAkBD,kCAAkC;IAClC,yBADY,OAAO,QAGlB;IAED,2BAA2B;IAC3B,cADY,MAAM,WAGjB;IAED,iBAYC;IAED,2BAA2B;IAC3B,gBADY,MAAM,QAcjB;CACF;;;;sBAzIY;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;8BAf0B,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,8 +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-';
 
@@ -54,30 +55,39 @@ export class SourceBtn extends UploaderBlock {
       type: UploadSource.CAMERA,
       activity: ActivityBlock.activities.CAMERA,
       activate: () => {
-        const supportsCapture = 'capture' in document.createElement('input');
-        if (supportsCapture) {
-          this.api.openSystemDialog({ captureCamera: true, modeCamera: CameraSourceTypes.PHOTO });
-        }
-        return !supportsCapture;
-      },
-    });
-    this.registerType({
-      type: UploadSource.VIDEO_CAMERA,
-      activity: ActivityBlock.activities.CAMERA,
-      activate: () => {
-        const supportsCapture = 'capture' in document.createElement('input');
+        const supportsCapture = isSupportCapture();
+
         if (supportsCapture) {
-          this.api.openSystemDialog({ captureCamera: true, modeCamera: CameraSourceTypes.VIDEO });
+          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,
@@ -122,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":"AAOA;CAqCC;sBA1CqB,yBAAyB"}
+{"version":3,"file":"SourceList.d.ts","sourceRoot":"","sources":["SourceList.js"],"names":[],"mappings":"AAMA;CA4CC;sBAjDqB,yBAAyB"}