@uploadcare/file-uploader 1.15.0 → 1.16.0

package/blocks/CloudImageEditor/src/CropFrame.d.ts

@@ -138,6 +138,13 @@ export class CropFrame extends Block {
     } | undefined;
     /** @private */
     private _updateCursor;
+    /**
+     * @private
+     * @param {String} href
+     */
+    private _createMask;
+    _frameImage: SVGElement | undefined;
+    _updateMask(): void;
     /** @private */
     private _render;
     /** @param {boolean} visible */

package/blocks/CloudImageEditor/src/CropFrame.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CropFrame.d.ts","sourceRoot":"","sources":["CropFrame.js"],"names":[],"mappings":"AA2BA;IAII;;MAGC;IAED,eAAe;IACf,yBAAyD;IAEzD,eAAe;IACf,2BAA6D;IAE7D,eAAe;IACf,8BAAmE;IAGrE;;;OAGG;IACH,+BAaC;IAED,eAAe;IACf,wBAyCC;IAFC,sCAAyB;IACzB,2CAAuC;IAGzC;;;OAGG;IACH,wBAUC;IAED,eAAe;IACf,wBASC;IAED,eAAe;IACf,qBAgEC;IAED;;;OAGG;IACH,0BAHW,OAAO,YAAY,EAAE,WAAW,aAChC,OAAO,YAAY,EAAE,SAAS,QA4BxC;IAED,eAAe;IACf,sBAiBC;IAED,eAAe;IACf,sBA4CC;IAED,eAAe;IACf,qBAeC;IAFC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBAA+B;IAC/B,qCAA+B;IAGjC;;;;OAIG;IACH,2BAiBC;IAJC;;;;;kBAA2B;IAC3B,sCAA6B;IAC7B,6CAA6C;IAC7C,2DAAoC;IAGtC;;;OAGG;IACH,0BAUC;IAED;;;OAGG;IACH,4BAmBC;IAED;;;;OAIG;IACH,qBAsBC;IAED;;;OAGG;IACH,+BAqBC;IAFC;;;;;kBAA6B;IAI/B,eAAe;IACf,sBAGC;IAED,eAAe;IACf,gBAGC;IAED,+BAA+B;IAC/B,sBADY,OAAO,QAclB;IAmBG,mCAAsF;CA6B3F;;;;sBAngBqB,4BAA4B"}
+{"version":3,"file":"CropFrame.d.ts","sourceRoot":"","sources":["CropFrame.js"],"names":[],"mappings":"AA2BA;IAII;;MAGC;IAED,eAAe;IACf,yBAAyD;IAEzD,eAAe;IACf,2BAA6D;IAE7D,eAAe;IACf,8BAAmE;IAGrE;;;OAGG;IACH,+BAaC;IAED,eAAe;IACf,wBAyCC;IAFC,sCAAyB;IACzB,2CAAuC;IAGzC;;;OAGG;IACH,wBAUC;IAED,eAAe;IACf,wBASC;IAED,eAAe;IACf,qBAgEC;IAED;;;OAGG;IACH,0BAHW,OAAO,YAAY,EAAE,WAAW,aAChC,OAAO,YAAY,EAAE,SAAS,QA4BxC;IAED,eAAe;IACf,sBAiBC;IAED,eAAe;IACf,sBA4CC;IAED,eAAe;IACf,qBAeC;IAFC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBAA+B;IAC/B,qCAA+B;IAGjC;;;;OAIG;IACH,2BAiBC;IAJC;;;;;kBAA2B;IAC3B,sCAA6B;IAC7B,6CAA6C;IAC7C,2DAAoC;IAGtC;;;OAGG;IACH,0BAUC;IAED;;;OAGG;IACH,4BAmBC;IAED;;;;OAIG;IACH,qBAsBC;IAED;;;OAGG;IACH,+BAqBC;IAFC;;;;;kBAA6B;IAI/B,eAAe;IACf,sBAGC;IAED;;;OAGG;IACH,oBAoBC;IADC,oCAA4B;IAG9B,oBAeC;IAED,eAAe;IACf,gBAIC;IAED,+BAA+B;IAC/B,sBADY,OAAO,QAclB;IAmBG,mCAAsF;CAmC3F;;;;sBArjBqB,4BAA4B"}

package/blocks/CloudImageEditor/src/CropFrame.js

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"initialConfig.d.ts","sourceRoot":"","sources":["initialConfig.js"],"names":[],"mappings":"AAKA,gCAAiC,sBAAsB,CAAC;AACxD,+BAAgC,+BAA+B,CAAC;AAChE,sCAAuC,+BAA+B,CAAC;AAEvE,wDAAwD;AACxD,4BADW,OAAO,sBAAsB,EAAE,UAAU,CAuElD"}
+{"version":3,"file":"initialConfig.d.ts","sourceRoot":"","sources":["initialConfig.js"],"names":[],"mappings":"AAKA,gCAAiC,sBAAsB,CAAC;AACxD,+BAAgC,+BAA+B,CAAC;AAChE,sCAAuC,+BAA+B,CAAC;AAEvE,wDAAwD;AACxD,4BADW,OAAO,sBAAsB,EAAE,UAAU,CAyElD"}

package/blocks/Config/initialConfig.js

@@ -78,4 +78,6 @@ export const initialConfig = {
   filesViewMode: 'list',
   gridShowFileNames: false,
   cloudImageEditorAutoOpen: false,
+
+  cloudImageEditorMaskHref: null,
 };

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

@@ -1 +1 @@
-{"version":3,"file":"normalizeConfigValue.d.ts","sourceRoot":"","sources":["normalizeConfigValue.js"],"names":[],"mappings":"AA2GO,qCAL+C,CAAC,SAA1C,MAAO,OAAO,aAAa,EAAE,UAAW,OAC1C,CAAC,SACD,OAAO,GACL,OAAO,aAAa,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,SAAS,CAa3D;;0BAtGM,qBAAqB"}
+{"version":3,"file":"normalizeConfigValue.d.ts","sourceRoot":"","sources":["normalizeConfigValue.js"],"names":[],"mappings":"AA4GO,qCAL+C,CAAC,SAA1C,MAAO,OAAO,aAAa,EAAE,UAAW,OAC1C,CAAC,SACD,OAAO,GACL,OAAO,aAAa,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,SAAS,CAa3D;;0BAvGM,qBAAqB"}

package/blocks/Config/normalizeConfigValue.js

@@ -97,6 +97,7 @@ const mapping = {
   filesViewMode: asFilesViewMode,
   gridShowFileNames: asBoolean,
   cloudImageEditorAutoOpen: asBoolean,
+  cloudImageEditorMaskHref: asString,
 };
 
 /**

package/env.d.ts

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

package/env.js

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

package/index.ssr.d.ts

@@ -550,7 +550,7 @@ export namespace ModalEvents {
     let DESTROY: string;
 }
 export const PACKAGE_NAME: "blocks";
-export const PACKAGE_VERSION: "1.15.0";
+export const PACKAGE_VERSION: "1.16.0";
 export const PresenceToggle: {
     new (): {};
     template: string;

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqFE;AACF;;;;;;EAKE;AACF;;;;;;EAKE;AACF;;;;;;;EAME;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+CE;AACF;;;;;;;;EAWE;AACF;;;;;;EAwBE;AACF;;;;;;;EAUE;AACF;;;;;;;;EAWE;;;;;;;;;AASF,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuDE;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;;;;;;;EA8GE;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;;;;;;;;;AASF,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuDE;AACF;;;;;;;;;;;;EAWE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmEE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuGE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+CE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2EE;AACK,yCAAiC;AACjC,qCAA6B;AAC7B,6CAAqC;AACrC,oCAA4B"}

package/index.ssr.js

@@ -380,6 +380,7 @@ export const Config = class {
     "files-view-mode",
     "grid-show-file-names",
     "cloud-image-editor-auto-open",
+    "cloud-image-editor-mask-href",
     "multiplemin",
     "multiplemax",
     "confirmupload",
@@ -428,6 +429,7 @@ export const Config = class {
     "filesviewmode",
     "gridshowfilenames",
     "cloudimageeditorautoopen",
+    "cloudimageeditormaskhref",
   ];
   static reg = () => {};
   static styleAttrs = [];
@@ -1059,7 +1061,7 @@ export const ModalEvents = {
   DESTROY: "modal:destroy",
 };
 export const PACKAGE_NAME = `blocks`;
-export const PACKAGE_VERSION = `1.15.0`;
+export const PACKAGE_VERSION = `1.16.0`;
 export const PresenceToggle = class {
   static template = `<slot></slot> `;
   static reg = () => {};

package/package.json

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

package/types/exported.d.ts

@@ -285,6 +285,8 @@ export type ConfigType = {
   gridShowFileNames: boolean;
 
   cloudImageEditorAutoOpen: boolean;
+
+  cloudImageEditorMaskHref: string | null;
 };
 export type ConfigComplexType = Pick<ConfigType, (typeof complexConfigKeys)[number]>;
 export type ConfigPlainType = Omit<ConfigType, keyof ConfigComplexType>;
@@ -292,8 +294,8 @@ export type ConfigAttributesType = KebabCaseKeys<ConfigPlainType> & LowerCaseKey
 
 export type KebabCase<S extends string> = S extends `${infer C}${infer T}`
   ? T extends Uncapitalize<T>
-    ? `${Uncapitalize<C>}${KebabCase<T>}`
-    : `${Uncapitalize<C>}-${KebabCase<T>}`
+  ? `${Uncapitalize<C>}${KebabCase<T>}`
+  : `${Uncapitalize<C>}-${KebabCase<T>}`
   : S;
 export type KebabCaseKeys<T extends Record<string, unknown>> = { [Key in keyof T as KebabCase<Key & string>]: T[Key] };
 export type LowerCase<S extends string> = Lowercase<S>;
@@ -352,17 +354,17 @@ export type OutputErrorTypePayload = {
 
 export type OutputError<T extends OutputFileErrorType | OutputCollectionErrorType> = T extends OutputCustomErrorType
   ? {
-      type?: T;
-      message: string;
-      payload?: OutputErrorTypePayload[T];
-    }
+    type?: T;
+    message: string;
+    payload?: OutputErrorTypePayload[T];
+  }
   : T extends keyof OutputErrorTypePayload
-    ? {
-        type: T;
-        message: string;
-        payload?: OutputErrorTypePayload[T];
-      }
-    : never;
+  ? {
+    type: T;
+    message: string;
+    payload?: OutputErrorTypePayload[T];
+  }
+  : never;
 
 export type OutputErrorFile = OutputError<OutputFileErrorType>;
 
@@ -384,7 +386,7 @@ export type OutputFileEntry<TStatus extends OutputFileStatus = OutputFileStatus>
   fullPath: string | null;
   source: SourceTypes | null;
 } & (
-  | {
+    | {
       status: 'success';
       fileInfo: UploadcareFile;
       uuid: string;
@@ -396,7 +398,7 @@ export type OutputFileEntry<TStatus extends OutputFileStatus = OutputFileStatus>
       isRemoved: false;
       errors: [];
     }
-  | {
+    | {
       status: 'failed';
       fileInfo: UploadcareFile | null;
       uuid: string | null;
@@ -408,7 +410,7 @@ export type OutputFileEntry<TStatus extends OutputFileStatus = OutputFileStatus>
       isRemoved: false;
       errors: OutputError<OutputFileErrorType>[];
     }
-  | {
+    | {
       status: 'uploading';
       fileInfo: null;
       uuid: null;
@@ -420,7 +422,7 @@ export type OutputFileEntry<TStatus extends OutputFileStatus = OutputFileStatus>
       isRemoved: false;
       errors: [];
     }
-  | {
+    | {
       status: 'removed';
       fileInfo: UploadcareFile | null;
       uuid: string | null;
@@ -432,7 +434,7 @@ export type OutputFileEntry<TStatus extends OutputFileStatus = OutputFileStatus>
       isRemoved: true;
       errors: OutputError<OutputFileErrorType>[];
     }
-  | {
+    | {
       status: 'idle';
       fileInfo: null;
       uuid: null;
@@ -444,7 +446,7 @@ export type OutputFileEntry<TStatus extends OutputFileStatus = OutputFileStatus>
       isRemoved: false;
       errors: [];
     }
-);
+  );
 
 export type OutputCollectionStatus = 'idle' | 'uploading' | 'success' | 'failed';
 
@@ -468,43 +470,43 @@ export type OutputCollectionState<
 } & (TGroupFlag extends 'has-group'
   ? { group: UploadcareGroup }
   : TGroupFlag extends 'maybe-has-group'
-    ? { group: UploadcareGroup | null }
-    : never) &
+  ? { group: UploadcareGroup | null }
+  : never) &
   (
     | {
-        status: 'idle';
-        isFailed: false;
-        isUploading: false;
-        isSuccess: false;
-        errors: [];
-        allEntries: OutputFileEntry<'idle' | 'success'>[];
-      }
+      status: 'idle';
+      isFailed: false;
+      isUploading: false;
+      isSuccess: false;
+      errors: [];
+      allEntries: OutputFileEntry<'idle' | 'success'>[];
+    }
     | {
-        status: 'uploading';
-        isFailed: false;
-        isUploading: true;
-        isSuccess: false;
-        errors: [];
-        allEntries: OutputFileEntry[];
-      }
+      status: 'uploading';
+      isFailed: false;
+      isUploading: true;
+      isSuccess: false;
+      errors: [];
+      allEntries: OutputFileEntry[];
+    }
     | {
-        status: 'success';
-        isFailed: false;
-        isUploading: false;
-        isSuccess: true;
-        errors: [];
-        allEntries: OutputFileEntry<'success'>[];
-      }
+      status: 'success';
+      isFailed: false;
+      isUploading: false;
+      isSuccess: true;
+      errors: [];
+      allEntries: OutputFileEntry<'success'>[];
+    }
     | {
-        status: 'failed';
-        isFailed: true;
-        isUploading: false;
-        isSuccess: false;
-        errors: OutputError<OutputCollectionErrorType>[];
-        allEntries: OutputFileEntry[];
-      }
+      status: 'failed';
+      isFailed: true;
+      isUploading: false;
+      isSuccess: false;
+      errors: OutputError<OutputCollectionErrorType>[];
+      allEntries: OutputFileEntry[];
+    }
   );
 
 export { EventType, EventPayload } from '../blocks/UploadCtxProvider/EventEmitter';
 
-export {};
+export { };