@uploadcare/file-uploader 1.24.1 → 1.24.3-alpha.0

package/dist/env.js

@@ -25,7 +25,7 @@
  */
 
 // package.json
-var version = "1.24.1";
+var version = "1.24.3-alpha.0";
 
 // src/env.ts
 var PACKAGE_NAME = "blocks";

package/dist/index.d.ts

@@ -104,12 +104,13 @@ declare class ModalManager {
     destroy(): void;
 }
 
+type CommonEventType = InternalEventKey | EventKey;
 type TelemetryState = TelemetryRequest & {
     eventTimestamp: number;
 };
 type TelemetryEventBody = Partial<Pick<TelemetryState, 'payload' | 'config'>> & {
     modalId?: string;
-    eventType?: EventKey;
+    eventType?: CommonEventType;
 };
 declare class TelemetryManager {
     private readonly _sessionId;
@@ -181,9 +182,13 @@ declare class Block extends BaseComponent<any> {
     static reg(name?: string): void;
 }
 
-declare const EventType: Readonly<{
+declare const InternalEventType: Readonly<{
     readonly INIT_SOLUTION: "init-solution";
     readonly CHANGE_CONFIG: "change-config";
+    readonly ACTION_EVENT: "action-event";
+    readonly ERROR_EVENT: "error-event";
+}>;
+declare const EventType: Readonly<{
     readonly FILE_ADDED: "file-added";
     readonly FILE_REMOVED: "file-removed";
     readonly FILE_UPLOAD_START: "file-upload-start";
@@ -204,6 +209,7 @@ declare const EventType: Readonly<{
     readonly GROUP_CREATED: "group-created";
 }>;
 type EventKey = (typeof EventType)[keyof typeof EventType];
+type InternalEventKey = (typeof InternalEventType)[keyof typeof InternalEventType];
 type EventPayload = {
     [EventType.FILE_ADDED]: OutputFileEntry<'idle'>;
     [EventType.FILE_REMOVED]: OutputFileEntry<'removed'>;
@@ -230,8 +236,6 @@ type EventPayload = {
     [EventType.COMMON_UPLOAD_FAILED]: OutputCollectionState<'failed'>;
     [EventType.CHANGE]: OutputCollectionState;
     [EventType.GROUP_CREATED]: OutputCollectionState<'success', 'has-group'>;
-    [EventType.INIT_SOLUTION]: void;
-    [EventType.CHANGE_CONFIG]: void;
 };
 declare class EventEmitter {
     private _timeoutStore;
@@ -527,6 +531,7 @@ declare class Config extends Block {
     _assertSameValueDifferentReference(key: string, previousValue: unknown, nextValue: unknown): void;
     initCallback(): void;
     attributeChangedCallback(name: keyof typeof attrStateMapping, oldVal: string, newVal: string): void;
+    get computationControllers(): any;
 }
 interface Config extends ConfigType {
 }
@@ -1366,6 +1371,7 @@ declare class CropFrame extends Block {
     private readonly _handlePointerUp;
     private readonly _handlePointerMove;
     private readonly _handleSvgPointerMove;
+    private readonly _backdropMaskId;
     private _backdropMask?;
     private _backdropMaskInner?;
     private _frameThumbs?;
@@ -1959,8 +1965,6 @@ type EventListenerMap = {
 declare class UploadCtxProvider extends UploaderBlock {
     static styleAttrs: string[];
     static EventType: Readonly<{
-        readonly INIT_SOLUTION: "init-solution";
-        readonly CHANGE_CONFIG: "change-config";
         readonly FILE_ADDED: "file-added";
         readonly FILE_REMOVED: "file-removed";
         readonly FILE_UPLOAD_START: "file-upload-start";

package/dist/index.js

@@ -25,13 +25,15 @@
  */
 
 // src/index.ts
-import { BaseComponent as BaseComponent4, Data as Data8, UID as UID4 } from "@symbiotejs/symbiote";
+import { BaseComponent as BaseComponent4, Data as Data8, UID as UID5 } from "@symbiotejs/symbiote";
 
 // src/blocks/UploadCtxProvider/EventEmitter.ts
 var DEFAULT_DEBOUNCE_TIMEOUT = 20;
 var InternalEventType = Object.freeze({
   INIT_SOLUTION: "init-solution",
-  CHANGE_CONFIG: "change-config"
+  CHANGE_CONFIG: "change-config",
+  ACTION_EVENT: "action-event",
+  ERROR_EVENT: "error-event"
 });
 var EventType = Object.freeze({
   FILE_ADDED: "file-added",
@@ -51,8 +53,7 @@ var EventType = Object.freeze({
   COMMON_UPLOAD_SUCCESS: "common-upload-success",
   COMMON_UPLOAD_FAILED: "common-upload-failed",
   CHANGE: "change",
-  GROUP_CREATED: "group-created",
-  ...InternalEventType
+  GROUP_CREATED: "group-created"
 });
 var EventEmitter = class {
   _timeoutStore = /* @__PURE__ */ new Map();
@@ -1216,7 +1217,7 @@ import { TelemetryAPIService } from "@uploadcare/quality-insights";
 import { Queue as Queue2 } from "@uploadcare/upload-client";
 
 // package.json
-var version = "1.24.1";
+var version = "1.24.3-alpha.0";
 
 // src/env.ts
 var PACKAGE_NAME = "blocks";
@@ -1238,14 +1239,16 @@ var TelemetryManager = class {
     for (const key of Object.keys(this._config)) {
       this._block.subConfigValue(key, (value) => {
         if (this._initialized && this._config[key] !== value) {
-          this._block.emit(EventType.CHANGE_CONFIG, void 0);
+          this.sendEvent({
+            eventType: InternalEventType.CHANGE_CONFIG
+          });
         }
         this._setConfig(key, value);
       });
     }
   }
   _init(type) {
-    if (type === EventType.INIT_SOLUTION && !this._initialized) {
+    if (type === InternalEventType.INIT_SOLUTION && !this._initialized) {
       this._initialized = true;
     }
   }
@@ -1261,7 +1264,7 @@ var TelemetryManager = class {
       payload.activity = void 0;
     }
     const result = { ...body };
-    if (body.eventType === EventType.INIT_SOLUTION || body.eventType === EventType.CHANGE_CONFIG) {
+    if (body.eventType === InternalEventType.INIT_SOLUTION || body.eventType === InternalEventType.CHANGE_CONFIG) {
       result.config = this._config;
     }
     return {
@@ -1289,9 +1292,7 @@ var TelemetryManager = class {
       EventType.FILE_UPLOAD_START,
       EventType.FILE_UPLOAD_PROGRESS,
       EventType.FILE_UPLOAD_SUCCESS,
-      EventType.FILE_UPLOAD_FAILED,
-      EventType.FILE_URL_CHANGED,
-      EventType.GROUP_CREATED
+      EventType.FILE_UPLOAD_FAILED
     ].includes(type)) {
       return true;
     }
@@ -1319,6 +1320,7 @@ var TelemetryManager = class {
   }
   sendEventError(error, context = "unknown") {
     this.sendEvent({
+      eventType: InternalEventType.ERROR_EVENT,
       payload: {
         metadata: {
           event: "error",
@@ -1333,6 +1335,7 @@ var TelemetryManager = class {
    */
   sendEventCloudImageEditor(e, tabId, options = {}) {
     this.sendEvent({
+      eventType: InternalEventType.ACTION_EVENT,
       payload: {
         metadata: {
           tabId,
@@ -4369,16 +4372,64 @@ var CameraSource = class extends UploaderBlock {
       onCancel: () => {
         this.historyBack();
       },
-      onShot: () => this._shot(),
+      onShot: () => {
+        this.telemetryManager.sendEvent({
+          eventType: InternalEventType.ACTION_EVENT,
+          payload: {
+            metadata: {
+              event: "shot-camera",
+              node: this.tagName,
+              tabId: this._activeTab
+            }
+          }
+        });
+        this._shot();
+      },
       onRequestPermissions: () => this._capture(),
       /** General method for photo and video capture */
-      onStartCamera: () => this._chooseActionWithCamera(),
+      onStartCamera: () => {
+        this.telemetryManager.sendEvent({
+          eventType: InternalEventType.ACTION_EVENT,
+          payload: {
+            metadata: {
+              event: "start-camera",
+              node: this.tagName,
+              tabId: this._activeTab
+            }
+          }
+        });
+        this._chooseActionWithCamera();
+      },
       onStartRecording: () => this._startRecording(),
       onStopRecording: () => this._stopRecording(),
       onToggleRecording: () => this._toggleRecording(),
       onToggleAudio: () => this._toggleEnableAudio(),
-      onRetake: () => this._retake(),
-      onAccept: () => this._accept(),
+      onRetake: () => {
+        this.telemetryManager.sendEvent({
+          eventType: InternalEventType.ACTION_EVENT,
+          payload: {
+            metadata: {
+              event: "retake-camera",
+              node: this.tagName,
+              tabId: this._activeTab
+            }
+          }
+        });
+        this._retake();
+      },
+      onAccept: () => {
+        this.telemetryManager.sendEvent({
+          eventType: InternalEventType.ACTION_EVENT,
+          payload: {
+            metadata: {
+              event: "accept-camera",
+              node: this.tagName,
+              tabId: this._activeTab
+            }
+          }
+        });
+        this._accept();
+      },
       onClickTab: (event) => {
         const target = event.currentTarget;
         const id = target?.getAttribute("data-id");
@@ -4490,6 +4541,16 @@ var CameraSource = class extends UploaderBlock {
     });
     this._mediaRecorder?.stop();
     this.classList.remove("uc-recording");
+    this.telemetryManager.sendEvent({
+      eventType: InternalEventType.ACTION_EVENT,
+      payload: {
+        metadata: {
+          event: "stop-camera",
+          node: this.tagName,
+          tabId: this._activeTab
+        }
+      }
+    });
   };
   /** This method is used to toggle recording pause/resume */
   _toggleRecording = () => {
@@ -4671,6 +4732,16 @@ var CameraSource = class extends UploaderBlock {
         audioToggleMicrophoneHidden: !this.cfg.enableAudioRecording
       });
     }
+    this.telemetryManager.sendEvent({
+      eventType: InternalEventType.ACTION_EVENT,
+      payload: {
+        metadata: {
+          event: "camera-tab-switch",
+          node: this.tagName,
+          tabId
+        }
+      }
+    });
     this._activeTab = tabId;
   };
   _createFile = (type, ext, format, blob) => {
@@ -5405,10 +5476,12 @@ CloudImageEditorBlock.bindAttributes({
 });
 
 // src/blocks/CloudImageEditor/src/CropFrame.ts
+import { UID as UID4 } from "@symbiotejs/symbiote";
 var CropFrame = class extends Block {
   _handlePointerUp;
   _handlePointerMove;
   _handleSvgPointerMove;
+  _backdropMaskId = `backdrop-mask-${UID4.generate()}`;
   _backdropMask;
   _backdropMaskInner;
   _frameThumbs;
@@ -5448,7 +5521,7 @@ var CropFrame = class extends Block {
     }
     const { x, y, width, height } = cropBox;
     const svg = this.ref["svg-el"];
-    const mask = createSvgNode("mask", { id: "backdrop-mask" });
+    const mask = createSvgNode("mask", { id: this._backdropMaskId });
     const maskRectOuter = createSvgNode("rect", {
       x: 0,
       y: 0,
@@ -5472,7 +5545,7 @@ var CropFrame = class extends Block {
       height: "100%",
       fill: "var(--color-image-background)",
       "fill-opacity": 0.85,
-      mask: "url(#backdrop-mask)"
+      mask: `url(#${this._backdropMaskId})`
     });
     svg.appendChild(backdropRect);
     svg.appendChild(mask);
@@ -8235,8 +8308,12 @@ var COMPUTED_PROPERTIES = [
     }
   })
 ];
-var abortControllers = /* @__PURE__ */ new Map();
-var computeProperty = ({ key, setValue, getValue }) => {
+var computeProperty = ({
+  key,
+  setValue,
+  getValue,
+  computationControllers
+}) => {
   for (const computed of COMPUTED_PROPERTIES) {
     if (computed.deps.includes(key)) {
       const args = {
@@ -8246,16 +8323,16 @@ var computeProperty = ({ key, setValue, getValue }) => {
         args[dep] = getValue(dep);
       }
       const abortController = new AbortController();
-      abortControllers.get(computed.key)?.abort();
-      abortControllers.set(computed.key, abortController);
+      computationControllers.get(computed.key)?.abort();
+      computationControllers.set(computed.key, abortController);
       let result;
       try {
         result = computed.fn(args, {
           signal: abortController.signal
         });
       } catch (error) {
-        if (abortControllers.get(computed.key) === abortController) {
-          abortControllers.delete(computed.key);
+        if (computationControllers.get(computed.key) === abortController) {
+          computationControllers.delete(computed.key);
         }
         console.error(`Failed to compute value for "${computed.key}"`, error);
         return;
@@ -8272,8 +8349,8 @@ var computeProperty = ({ key, setValue, getValue }) => {
           }
           console.error(`Failed to compute value for "${computed.key}"`, error);
         }).finally(() => {
-          if (abortControllers.get(computed.key) === abortController) {
-            abortControllers.delete(computed.key);
+          if (computationControllers.get(computed.key) === abortController) {
+            computationControllers.delete(computed.key);
           }
         });
       } else {
@@ -8476,7 +8553,8 @@ var Config = class extends Block {
       ...this.init$,
       ...Object.fromEntries(
         Object.entries(initialConfig).map(([key, value]) => [sharedConfigKey(key), value])
-      )
+      ),
+      computationControllers: /* @__PURE__ */ new Map()
     };
   }
   _flushValueToAttribute(key, value) {
@@ -8562,7 +8640,8 @@ var Config = class extends Block {
         computeProperty({
           key,
           setValue: this._setValue.bind(this),
-          getValue: this._getValue.bind(this)
+          getValue: this._getValue.bind(this),
+          computationControllers: this.computationControllers
         });
       });
     }
@@ -8575,6 +8654,9 @@ var Config = class extends Block {
       anyThis[key] = newVal;
     }
   }
+  get computationControllers() {
+    return this.$.computationControllers;
+  }
 };
 Config.bindAttributes(attrStateMapping);
 for (const key of allConfigKeys) {
@@ -9541,6 +9623,7 @@ var FileItem = class _FileItem extends FileItemConfig {
       ariaLabelStatusFile: "",
       onEdit: this._withEntry((entry) => {
         this.telemetryManager.sendEvent({
+          eventType: InternalEventType.ACTION_EVENT,
           payload: {
             metadata: {
               event: "edit-file",
@@ -9556,6 +9639,7 @@ var FileItem = class _FileItem extends FileItemConfig {
       }),
       onRemove: () => {
         this.telemetryManager.sendEvent({
+          eventType: InternalEventType.ACTION_EVENT,
           payload: {
             metadata: {
               event: "remove-file",
@@ -11265,6 +11349,15 @@ var UploadList = class extends UploaderBlock {
       commonErrorMessage: "",
       hasFiles: false,
       onAdd: () => {
+        this.telemetryManager.sendEvent({
+          eventType: InternalEventType.ACTION_EVENT,
+          payload: {
+            metadata: {
+              event: "add-more",
+              node: this.tagName
+            }
+          }
+        });
         this.api.initFlow(true);
       },
       onUpload: () => {
@@ -11277,6 +11370,15 @@ var UploadList = class extends UploaderBlock {
         this.api.doneFlow();
       },
       onCancel: () => {
+        this.telemetryManager.sendEvent({
+          eventType: InternalEventType.ACTION_EVENT,
+          payload: {
+            metadata: {
+              event: "clear-all",
+              node: this.tagName
+            }
+          }
+        });
         this.uploadCollection.clearAll();
       }
     };
@@ -11463,6 +11565,15 @@ var UrlSource = class extends UploaderBlock {
       importDisabled: true,
       onUpload: (event) => {
         event.preventDefault();
+        this.telemetryManager.sendEvent({
+          eventType: InternalEventType.ACTION_EVENT,
+          payload: {
+            metadata: {
+              event: "upload-from-url",
+              node: this.tagName
+            }
+          }
+        });
         const url = this.ref.input["value"];
         this.api.addFileFromUrl(url, { source: UploadSource.URL });
         this.modalManager?.open(ActivityBlock.activities.UPLOAD_LIST);
@@ -11532,7 +11643,9 @@ var CloudImageEditor = class extends CloudImageEditorBlock {
   }
   initCallback() {
     super.initCallback();
-    this.emit(InternalEventType.INIT_SOLUTION, void 0);
+    this.telemetryManager.sendEvent({
+      eventType: InternalEventType.INIT_SOLUTION
+    });
     this.a11y?.registerBlock(this);
   }
 };
@@ -11571,7 +11684,9 @@ var FileUploaderInline = class extends SolutionBlock {
   }
   initCallback() {
     super.initCallback();
-    this.emit(InternalEventType.INIT_SOLUTION, void 0);
+    this.telemetryManager.sendEvent({
+      eventType: InternalEventType.INIT_SOLUTION
+    });
     const uBlock = this.ref.uBlock;
     if (!uBlock) {
       return;
@@ -11661,7 +11776,9 @@ var FileUploaderMinimal = class extends SolutionBlock {
   }
   initCallback() {
     super.initCallback();
-    this.emit(InternalEventType.INIT_SOLUTION, void 0);
+    this.telemetryManager.sendEvent({
+      eventType: InternalEventType.INIT_SOLUTION
+    });
     const uBlock = this.ref.uBlock;
     if (!uBlock) {
       return;
@@ -11771,7 +11888,9 @@ var FileUploaderRegular = class extends SolutionBlock {
   }
   initCallback() {
     super.initCallback();
-    this.emit(InternalEventType.INIT_SOLUTION, void 0);
+    this.telemetryManager.sendEvent({
+      eventType: InternalEventType.INIT_SOLUTION
+    });
     this.defineAccessor("headless", (value) => {
       this.set$({ isHidden: asBoolean2(value) });
     });
@@ -11865,7 +11984,7 @@ export {
   Spinner,
   StartFrom,
   Thumb,
-  UID4 as UID,
+  UID5 as UID,
   UploadCtxProvider,
   UploadList,
   UploadSource,

package/dist/index.ssr.js

@@ -1132,7 +1132,7 @@ export const ModalEvents = {
 	DESTROY: "modal:destroy",
 };
 export const PACKAGE_NAME = `blocks`;
-export const PACKAGE_VERSION = `1.24.1`;
+export const PACKAGE_VERSION = `1.24.3-alpha.0`;
 export const PresenceToggle = class {
 	static template = `<slot></slot> `;
 	static reg = () => {};
@@ -1461,8 +1461,6 @@ export const UploadCtxProvider = class {
 		COMMON_UPLOAD_FAILED: "common-upload-failed",
 		CHANGE: "change",
 		GROUP_CREATED: "group-created",
-		INIT_SOLUTION: "init-solution",
-		CHANGE_CONFIG: "change-config",
 	};
 	static extSrcList = {
 		FACEBOOK: "facebook",

package/package.json

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

package/web/file-uploader.iife.min.d.ts

@@ -102,12 +102,13 @@ declare class ModalManager {
     destroy(): void;
 }
 
+type CommonEventType = InternalEventKey | EventKey;
 type TelemetryState = TelemetryRequest & {
     eventTimestamp: number;
 };
 type TelemetryEventBody = Partial<Pick<TelemetryState, 'payload' | 'config'>> & {
     modalId?: string;
-    eventType?: EventKey;
+    eventType?: CommonEventType;
 };
 declare class TelemetryManager {
     private readonly _sessionId;
@@ -179,9 +180,13 @@ declare class Block extends BaseComponent<any> {
     static reg(name?: string): void;
 }
 
-declare const EventType: Readonly<{
+declare const InternalEventType: Readonly<{
     readonly INIT_SOLUTION: "init-solution";
     readonly CHANGE_CONFIG: "change-config";
+    readonly ACTION_EVENT: "action-event";
+    readonly ERROR_EVENT: "error-event";
+}>;
+declare const EventType: Readonly<{
     readonly FILE_ADDED: "file-added";
     readonly FILE_REMOVED: "file-removed";
     readonly FILE_UPLOAD_START: "file-upload-start";
@@ -202,6 +207,7 @@ declare const EventType: Readonly<{
     readonly GROUP_CREATED: "group-created";
 }>;
 type EventKey = (typeof EventType)[keyof typeof EventType];
+type InternalEventKey = (typeof InternalEventType)[keyof typeof InternalEventType];
 type EventPayload = {
     [EventType.FILE_ADDED]: OutputFileEntry<'idle'>;
     [EventType.FILE_REMOVED]: OutputFileEntry<'removed'>;
@@ -228,8 +234,6 @@ type EventPayload = {
     [EventType.COMMON_UPLOAD_FAILED]: OutputCollectionState<'failed'>;
     [EventType.CHANGE]: OutputCollectionState;
     [EventType.GROUP_CREATED]: OutputCollectionState<'success', 'has-group'>;
-    [EventType.INIT_SOLUTION]: void;
-    [EventType.CHANGE_CONFIG]: void;
 };
 declare class EventEmitter {
     private _timeoutStore;
@@ -525,6 +529,7 @@ declare class Config extends Block {
     _assertSameValueDifferentReference(key: string, previousValue: unknown, nextValue: unknown): void;
     initCallback(): void;
     attributeChangedCallback(name: keyof typeof attrStateMapping, oldVal: string, newVal: string): void;
+    get computationControllers(): any;
 }
 interface Config extends ConfigType {
 }
@@ -1377,6 +1382,7 @@ declare class CropFrame extends Block {
     private readonly _handlePointerUp;
     private readonly _handlePointerMove;
     private readonly _handleSvgPointerMove;
+    private readonly _backdropMaskId;
     private _backdropMask?;
     private _backdropMaskInner?;
     private _frameThumbs?;
@@ -1970,8 +1976,6 @@ type EventListenerMap = {
 declare class UploadCtxProvider extends UploaderBlock {
     static styleAttrs: string[];
     static EventType: Readonly<{
-        readonly INIT_SOLUTION: "init-solution";
-        readonly CHANGE_CONFIG: "change-config";
         readonly FILE_ADDED: "file-added";
         readonly FILE_REMOVED: "file-removed";
         readonly FILE_UPLOAD_START: "file-upload-start";