@uploadcare/file-uploader 1.15.0-alpha.4 → 1.15.0-alpha.5

package/blocks/Config/initialConfig.js

@@ -75,7 +75,7 @@ export const initialConfig = {
   maxVideoRecordingDuration: null,
   mediaRecorderOptions: null,
 
-  filesViewMode: 'grid',
+  filesViewMode: 'list',
   gridShowFileNames: false,
   cloudImageEditorAutoOpen: false,
 };

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

@@ -1 +1 @@
-{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MA+BC;IAGH,eASC;IAED;;;OAGG;IACH,0BAcC;IAXC,wCAA0C;IAa5C,eAAe;IACf,wBAgBC;IAED,eAAe;IACf,2BA2CC;IAED;;;;OAIG;IACH,kBAUC;IAED;;MAaQ;IAER;;;OAGG;IACH,uBAmDC;IA+CD,wEAAwE;IACxE,oBADY,CAAC,oBAAoB,CAAC,CAAC,MAAM,oBAAoB,CAAC,QA0B7D;IAaC,eAAe;IACf,kBAEE;IAWJ;;;MAEC;IAED;;;OAGG;IACH,uBAEC;IAED,wBAsFC;CACF;;;;;8BAxc6B,iCAAiC;AAS/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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MA+BC;IAGH,eASC;IAED;;;OAGG;IACH,0BAcC;IAXC,wCAA0C;IAa5C,eAAe;IACf,wBAgBC;IAED,eAAe;IACf,2BAuCC;IAED;;;;OAIG;IACH,kBAUC;IAED;;MAaQ;IAER;;;OAGG;IACH,uBAmDC;IA+CD,wEAAwE;IACxE,oBADY,CAAC,oBAAoB,CAAC,CAAC,MAAM,oBAAoB,CAAC,QA0B7D;IAaC,eAAe;IACf,kBAEE;IAWJ;;;MAEC;IAED;;;OAGG;IACH,uBAEC;IAED,wBAsFC;CACF;;;;;8BApc6B,iCAAiC;AAS/D;;;;;GAKG"}

package/blocks/FileItem/FileItem.js

@@ -134,11 +134,7 @@ export class FileItem extends UploaderBlock {
     let entry = this._entry;
 
     if (entry.getValue('fileInfo') && entry.getValue('isImage')) {
-      let size = Math.max(
-        parseInt(String(this?._thumbRect?.height || 0)),
-        parseInt(String(this?._thumbRect?.width || 0)),
-        this.cfg.thumbSize,
-      );
+      let size = this.cfg.thumbSize;
 
       let thumbUrl = await this.proxyUrl(
         createCdnUrl(
@@ -462,11 +458,8 @@ 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="thumbUrl:thumbUrl;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" set="@hidden: isFileName">{{itemName}}</span>
       <span class="uc-file-error" set="@hidden: !errorText;">{{errorText}}</span>

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;

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["Modal.js"],"names":[],"mappings":"AAIA;IAEE,kCAAoC;IAIlC;;;;MAKC;IAGH,iCAEE;IAEF,yBAME;IAEF,+BAEE;IAEF,uBAAuB;IACvB,4BADY,KAAK,UAIf;IAFA,eAAe;IACf,yBAAgC;IAGlC,uBAAuB;IACvB,0BADY,KAAK,UAKf;IAEF,aAWC;IAED,aAOC;CA8CF;;;;sBAhHqB,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,4BADY,KAAK,UAIf;IAFA,eAAe;IACf,yBAAgC;IAGlC,uBAAuB;IACvB,0BADY,KAAK,UAKf;IAEF,aAWC;IAED,aAOC;CA8CF;;;;sBA9GqB,yBAAyB"}

package/blocks/Modal/Modal.js

@@ -10,8 +10,6 @@ export class Modal extends Block {
     super();
     this.init$ = {
       ...this.init$,
-      '*modalActive': false,
-      isOpen: false,
       closeClicked: this._handleDialogClose,
     };
   }

package/blocks/Thumb/Thumb.d.ts

@@ -0,0 +1,24 @@
+export class Thumb extends UploaderBlock {
+    init$: {
+        thumbUrl: string;
+        badgeIcon: string;
+        '*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;
+        '*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;
+    };
+}
+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":"AAIA;IAII;;;;;;;;;;;;;;;;MAIC;CAeJ;;;;8BAzB6B,iCAAiC"}

package/blocks/Thumb/Thumb.js

@@ -0,0 +1,45 @@
+//@ts-check
+
+import { UploaderBlock } from '../../abstract/UploaderBlock.js';
+
+export class Thumb extends UploaderBlock {
+  constructor() {
+    super();
+
+    this.init$ = {
+      ...this.init$,
+      thumbUrl: '',
+      badgeIcon: '',
+    };
+  }
+
+  initCallback() {
+    super.initCallback();
+
+    this.defineAccessor('thumbUrl', (/** @type {string} */ val) => (this.$.thumbUrl = val));
+    this.defineAccessor('badgeIcon', (/** @type {string} */ val) => (this.$.badgeIcon = val));
+
+    this.setAttribute('role', 'img');
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+  }
+}
+
+Thumb.template = /* html */ `
+  <slot>
+    <div class="uc-thumb" set="style.backgroundImage: thumbUrl">
+      <div class="uc-badge">
+        <uc-icon set="@name: badgeIcon"></uc-icon>
+      </div>
+    </div>
+  </slot>
+`;
+
+Thumb.bindAttributes({
+  // @ts-expect-error TODO: fix types inside symbiote
+  thumbUrl: null,
+  // @ts-expect-error TODO: fix types inside symbiote
+  badgeIcon: null,
+});

package/blocks/Thumb/thumb.css

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

package/blocks/themes/uc-basic/common.css

@@ -13,7 +13,7 @@
   display: none !important;
 }
 
-:where([uc-wgt-common]) [activity]:not([active]) {
+:where([uc-wgt-common]) [activity]:not([active], .active) {
   display: none;
 }
 

package/blocks/themes/uc-basic/index.css

@@ -31,6 +31,7 @@
 @import url('../../CloudImageEditorActivity/index.css');
 @import url('../../Select/select.css');
 @import url('../../Spinner/spinner.css');
+@import url('../../Thumb/thumb.css');
 
 /* POST RESET */
 @import url('post-reset.css');

package/index.d.ts

@@ -28,6 +28,7 @@ export { ActivityHeader } from "./blocks/ActivityHeader/ActivityHeader.js";
 export { Select } from "./blocks/Select/Select.js";
 export { Copyright } from "./blocks/Copyright/Copyright.js";
 export { Spinner } from "./blocks/Spinner/Spinner.js";
+export { Thumb } from "./blocks/Thumb/Thumb.js";
 export { FileUploaderRegular } from "./solutions/file-uploader/regular/FileUploaderRegular.js";
 export { FileUploaderMinimal } from "./solutions/file-uploader/minimal/FileUploaderMinimal.js";
 export { FileUploaderInline } from "./solutions/file-uploader/inline/FileUploaderInline.js";

package/index.js

@@ -33,6 +33,7 @@ export { ActivityHeader } from './blocks/ActivityHeader/ActivityHeader.js';
 export { Select } from './blocks/Select/Select.js';
 export { Copyright } from './blocks/Copyright/Copyright.js';
 export { Spinner } from './blocks/Spinner/Spinner.js';
+export { Thumb } from './blocks/Thumb/Thumb.js';
 
 // Solutions:
 export { FileUploaderRegular } from './solutions/file-uploader/regular/FileUploaderRegular.js';

package/index.ssr.d.ts

@@ -765,6 +765,57 @@ export const StartFrom: {
     is: string;
     bindAttributes: () => void;
 };
+export const Thumb: {
+    new (): {};
+    template: string;
+    observedAttributes: string[];
+    extSrcList: {
+        FACEBOOK: string;
+        DROPBOX: string;
+        GDRIVE: string;
+        GPHOTOS: string;
+        FLICKR: string;
+        VK: string;
+        EVERNOTE: string;
+        BOX: string;
+        ONEDRIVE: string;
+        HUDDLE: string;
+    };
+    sourceTypes: {
+        LOCAL: string;
+        DROP_AREA: string;
+        CAMERA: string;
+        EXTERNAL: string;
+        API: string;
+        URL: string;
+        DRAW: string;
+        MOBILE_VIDEO_CAMERA: string;
+        MOBILE_PHOTO_CAMERA: string;
+        FACEBOOK: string;
+        DROPBOX: string;
+        GDRIVE: string;
+        GPHOTOS: string;
+        FLICKR: string;
+        VK: string;
+        EVERNOTE: string;
+        BOX: string;
+        ONEDRIVE: string;
+        HUDDLE: string;
+    };
+    activities: {
+        START_FROM: string;
+        CAMERA: string;
+        DRAW: string;
+        UPLOAD_LIST: string;
+        URL: string;
+        CLOUD_IMG_EDIT: string;
+        EXTERNAL: string;
+    };
+    reg: () => void;
+    styleAttrs: any[];
+    is: string;
+    bindAttributes: () => void;
+};
 export const UID: {
     new (): {};
     generate: () => void;

package/index.ssr.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.ssr.d.ts","sourceRoot":"","sources":["index.ssr.js"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;EAcE;AACF;;;;;;;;;;;;;;;EAcE;AACF;;;;;EAIE;AACF;;;;;;EAKE;AACF;;;;;;;;EAgBE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4IE;AACF;;;;;;;;EAuCE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+CE;AACF;;;;;;;;EAuCE;AACF;;;;;;;EA4GE;AACF;;;;;;;EAaE;AACF;;;;;;;EAME;AACF;;;;;;;;;;;;;;;;EAeE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmEE;AACF;;;;;;;EAWE;AACF;;;;;;;EAWE;AACF;;;;;;;EASE;AACF;;;;;;EAKE;AACF;;;;;;;EAWE;AACF;;;;;;;EAME;AACF;;;;;;;EAWE;AACF;;;;;;;EA2IE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0EE;;;;;;;;;;;;;AAaF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwFE;AACF;;;;;;EAKE;AACF;;;;;;EAKE;AACF;;;;;;;EAME;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+CE;AACF;;;;;;;;EAWE;AACF;;;;;;EAwBE;AACF;;;;;;;EAUE;AACF;;;;;;;;EAWE;AACF,oCAAqC;AACrC,uCAAwC;AACxC;;;;;;;EAME;AACF;;;;;;;EASE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgDE;AACF;;;;;;;EAME;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0DE;AACF;;;;;;;EAeE;AACF;;;;;;EAKE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsDE;AACF;;;;;;EAKE;AACF;;;;;;EAKE;AACF;;;;;;;;;;;;;;;;EAeE;AACF;;;;;;;;;;;;EAWE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmEE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuGE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+CE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2EE;AACK,yCAAiC;AACjC,qCAA6B;AAC7B,6CAAqC;AACrC,oCAA4B"}
+{"version":3,"file":"index.ssr.d.ts","sourceRoot":"","sources":["index.ssr.js"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;EAcE;AACF;;;;;;;;;;;;;;;EAcE;AACF;;;;;EAIE;AACF;;;;;;EAKE;AACF;;;;;;;;EAgBE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4IE;AACF;;;;;;;;EAuCE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+CE;AACF;;;;;;;;EAuCE;AACF;;;;;;;EA4GE;AACF;;;;;;;EAaE;AACF;;;;;;;EAME;AACF;;;;;;;;;;;;;;;;EAeE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmEE;AACF;;;;;;;EAWE;AACF;;;;;;;EAWE;AACF;;;;;;;EASE;AACF;;;;;;EAKE;AACF;;;;;;;EAWE;AACF;;;;;;;EAME;AACF;;;;;;;EAWE;AACF;;;;;;;EA2IE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0EE;;;;;;;;;;;;;AAaF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqFE;AACF;;;;;;EAKE;AACF;;;;;;EAKE;AACF;;;;;;;EAME;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+CE;AACF;;;;;;;;EAWE;AACF;;;;;;EAwBE;AACF;;;;;;;EAUE;AACF;;;;;;;;EAWE;AACF,oCAAqC;AACrC,uCAAwC;AACxC;;;;;;;EAME;AACF;;;;;;;EASE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgDE;AACF;;;;;;;EAME;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0DE;AACF;;;;;;;EAeE;AACF;;;;;;EAKE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsDE;AACF;;;;;;EAKE;AACF;;;;;;EAKE;AACF;;;;;;;;;;;;;;;;EAeE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyDE;AACF;;;;;;;;;;;;EAWE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmEE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuGE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+CE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2EE;AACK,yCAAiC;AACjC,qCAA6B;AAC7B,6CAAqC;AACrC,oCAA4B"}

package/index.ssr.js

@@ -840,11 +840,8 @@ export const ExternalUploadSource = {
 export const FileItem = class {
   static template = `
   <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="thumbUrl:thumbUrl;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" set="@hidden: isFileName">{{itemName}}</span>
       <span class="uc-file-error" set="@hidden: !errorText;">{{errorText}}</span>
@@ -1292,6 +1289,64 @@ export const StartFrom = class {
   static is = `sym-1`;
   static bindAttributes = () => {};
 };
+export const Thumb = class {
+  static template = `
+  <slot>
+    <div class="uc-thumb" set="style.backgroundImage: thumbUrl">
+      <div class="uc-badge">
+        <uc-icon set="@name: badgeIcon"></uc-icon>
+      </div>
+    </div>
+  </slot>
+`;
+  static observedAttributes = ["thumbUrl", "badgeIcon"];
+  static extSrcList = {
+    FACEBOOK: "facebook",
+    DROPBOX: "dropbox",
+    GDRIVE: "gdrive",
+    GPHOTOS: "gphotos",
+    FLICKR: "flickr",
+    VK: "vk",
+    EVERNOTE: "evernote",
+    BOX: "box",
+    ONEDRIVE: "onedrive",
+    HUDDLE: "huddle",
+  };
+  static sourceTypes = {
+    LOCAL: "local",
+    DROP_AREA: "drop-area",
+    CAMERA: "camera",
+    EXTERNAL: "external",
+    API: "js-api",
+    URL: "url",
+    DRAW: "draw",
+    MOBILE_VIDEO_CAMERA: "mobile-video-camera",
+    MOBILE_PHOTO_CAMERA: "mobile-photo-camera",
+    FACEBOOK: "facebook",
+    DROPBOX: "dropbox",
+    GDRIVE: "gdrive",
+    GPHOTOS: "gphotos",
+    FLICKR: "flickr",
+    VK: "vk",
+    EVERNOTE: "evernote",
+    BOX: "box",
+    ONEDRIVE: "onedrive",
+    HUDDLE: "huddle",
+  };
+  static activities = {
+    START_FROM: "start-from",
+    CAMERA: "camera",
+    DRAW: "draw",
+    UPLOAD_LIST: "upload-list",
+    URL: "url",
+    CLOUD_IMG_EDIT: "cloud-image-edit",
+    EXTERNAL: "external",
+  };
+  static reg = () => {};
+  static styleAttrs = [];
+  static is = `sym-1`;
+  static bindAttributes = () => {};
+};
 export const UID = class {
   static generate = () => {};
   static apply = () => {};

package/package.json

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

package/solutions/file-uploader/minimal/FileUploaderMinimal.d.ts

@@ -1,6 +1,8 @@
 export class FileUploaderMinimal extends SolutionBlock {
     init$: {
         singleUpload: boolean;
+        isHiddenStartFrom: boolean;
+        classUploadList: string;
         '*commonProgress': number;
         '*uploadList': never[];
         '*uploadQueue': import("@uploadcare/upload-client").Queue;

package/solutions/file-uploader/minimal/FileUploaderMinimal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileUploaderMinimal.d.ts","sourceRoot":"","sources":["FileUploaderMinimal.js"],"names":[],"mappings":"AAIA;IAMI;;;;;;;;;;;;;;;MAGC;CAwDJ;;;;8BApE6B,oCAAoC"}
+{"version":3,"file":"FileUploaderMinimal.d.ts","sourceRoot":"","sources":["FileUploaderMinimal.js"],"names":[],"mappings":"AAKA;IAMI;;;;;;;;;;;;;;;;;MAKC;CAiFJ;;;;8BA/F6B,oCAAoC"}

package/solutions/file-uploader/minimal/FileUploaderMinimal.js

@@ -1,3 +1,4 @@
+//@ts-check
 import { ActivityBlock } from '../../../abstract/ActivityBlock.js';
 import { SolutionBlock } from '../../../abstract/SolutionBlock.js';
 import { ModalEvents } from '../../../abstract/ModalManager.js';
@@ -11,6 +12,8 @@ export class FileUploaderMinimal extends SolutionBlock {
     this.init$ = {
       ...this.init$,
       singleUpload: false,
+      isHiddenStartFrom: false,
+      classUploadList: '',
     };
   }
 
@@ -33,6 +36,9 @@ export class FileUploaderMinimal extends SolutionBlock {
       if (list?.length > 0) {
         this.$['*currentActivity'] = ActivityBlock.activities.UPLOAD_LIST;
       } else {
+        this.set$({
+          classUploadList: '',
+        });
         this.$['*currentActivity'] = uBlock.initActivity || ActivityBlock.activities.START_FROM;
       }
     });
@@ -57,24 +63,46 @@ export class FileUploaderMinimal extends SolutionBlock {
       this.$.singleUpload = !multiple;
     });
 
-    this.modalManager.subscribe(ModalEvents.CLOSE, (e) => {
-      if (e.id === this.$['*currentActivity']) {
-        this.$['*currentActivity'] = ActivityBlock.activities.UPLOAD_LIST;
-      }
-
-      if (e.id === ActivityBlock.activities.CLOUD_IMG_EDIT) {
-        this.$['*currentActivity'] = ActivityBlock.activities.UPLOAD_LIST;
+    this.modalManager.subscribe(ModalEvents.OPEN, () => {
+      if (this.$['*currentActivity'] === ActivityBlock.activities.UPLOAD_LIST) {
+        this.set$({
+          classUploadList: 'active',
+          isHiddenStartFrom: true,
+        });
       }
     });
+
+    this.modalManager.subscribe(
+      ModalEvents.CLOSE,
+      (
+        /**
+         * @type {{
+         *   id: import('../../../abstract/ModalManager.js').ModalId;
+         *   modal: import('../../../abstract/ModalManager.js').ModalNode;
+         * }}
+         */ e,
+      ) => {
+        if (e.id === this.$['*currentActivity']) {
+          this.$['*currentActivity'] = ActivityBlock.activities.UPLOAD_LIST;
+          this.set$({
+            isHiddenStartFrom: false,
+          });
+        }
+
+        if (e.id === ActivityBlock.activities.CLOUD_IMG_EDIT) {
+          this.$['*currentActivity'] = ActivityBlock.activities.UPLOAD_LIST;
+        }
+      },
+    );
   }
 }
 
 FileUploaderMinimal.template = /* HTML */ `
-  <uc-start-from>
+  <uc-start-from set="@hidden: isHiddenStartFrom">
     <uc-drop-area set="@single:singleUpload;" initflow clickable tabindex="0" l10n="choose-file"></uc-drop-area>
     <uc-copyright></uc-copyright>
   </uc-start-from>
-  <uc-upload-list ref="uBlock"></uc-upload-list>
+  <uc-upload-list set="@class:classUploadList" ref="uBlock"></uc-upload-list>
 
   <uc-modal id="start-from" strokes block-body-scrolling>
     <uc-start-from>