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

package/blocks/ExternalSource/types.d.ts

@@ -3,12 +3,12 @@ export type DoneSuccessResponse = {
     alternatives?: Record<string, string>;
     is_image?: boolean | null;
     filename?: string;
-    obj_type: 'selected_file';
+    obj_type: "selected_file";
     url: string;
 };
 export type InputMessageMap = {
-    'selected-files-change': {
-        type: 'selected-files-change';
+    "selected-files-change": {
+        type: "selected-files-change";
         total: number;
         selectedCount: number;
     } & ({
@@ -27,76 +27,76 @@ export type InputMessageMap = {
 };
 export type InputMessageType = keyof InputMessageMap;
 export type InputMessage = InputMessageMap[InputMessageType];
-export type InputMessageHandler<T extends "selected-files-change"> = (message: import('./types').InputMessageMap[T]) => void;
+export type InputMessageHandler<T extends import("./types").InputMessageType> = (message: import("./types").InputMessageMap[T]) => void;
 export type ThemeDefinition = {
-    '--uc-font-family': string;
-    '--uc-font-size': string;
-    '--uc-line-height': string;
-    '--uc-button-size': string;
-    '--uc-preview-size': string;
-    '--uc-input-size': string;
-    '--uc-padding': string;
-    '--uc-radius': string;
-    '--uc-transition': string;
-    '--uc-background': string;
-    '--uc-foreground': string;
-    '--uc-primary': string;
-    '--uc-primary-hover': string;
-    '--uc-primary-transparent': string;
-    '--uc-primary-foreground': string;
-    '--uc-secondary': string;
-    '--uc-secondary-hover': string;
-    '--uc-secondary-foreground': string;
-    '--uc-muted': string;
-    '--uc-muted-foreground': string;
-    '--uc-destructive': string;
-    '--uc-destructive-foreground': string;
-    '--uc-border': string;
-    '--uc-primary-rgb-light': string;
-    '--uc-primary-light': string;
-    '--uc-primary-hover-light': string;
-    '--uc-primary-transparent-light': string;
-    '--uc-background-light': string;
-    '--uc-foreground-light': string;
-    '--uc-primary-foreground-light': string;
-    '--uc-secondary-light': string;
-    '--uc-secondary-hover-light': string;
-    '--uc-secondary-foreground-light': string;
-    '--uc-muted-light': string;
-    '--uc-muted-foreground-light': string;
-    '--uc-destructive-light': string;
-    '--uc-destructive-foreground-light': string;
-    '--uc-border-light': string;
-    '--uc-primary-rgb-dark': string;
-    '--uc-primary-dark': string;
-    '--uc-primary-hover-dark': string;
-    '--uc-primary-transparent-dark': string;
-    '--uc-background-dark': string;
-    '--uc-foreground-dark': string;
-    '--uc-primary-foreground-dark': string;
-    '--uc-secondary-dark': string;
-    '--uc-secondary-hover-dark': string;
-    '--uc-secondary-foreground-dark': string;
-    '--uc-muted-dark': string;
-    '--uc-muted-foreground-dark': string;
-    '--uc-destructive-dark': string;
-    '--uc-destructive-foreground-dark': string;
-    '--uc-border-dark': string;
-    '--uc-primary-oklch-light': string;
-    '--uc-primary-oklch-dark': string;
+    "--uc-font-family": string;
+    "--uc-font-size": string;
+    "--uc-line-height": string;
+    "--uc-button-size": string;
+    "--uc-preview-size": string;
+    "--uc-input-size": string;
+    "--uc-padding": string;
+    "--uc-radius": string;
+    "--uc-transition": string;
+    "--uc-background": string;
+    "--uc-foreground": string;
+    "--uc-primary": string;
+    "--uc-primary-hover": string;
+    "--uc-primary-transparent": string;
+    "--uc-primary-foreground": string;
+    "--uc-secondary": string;
+    "--uc-secondary-hover": string;
+    "--uc-secondary-foreground": string;
+    "--uc-muted": string;
+    "--uc-muted-foreground": string;
+    "--uc-destructive": string;
+    "--uc-destructive-foreground": string;
+    "--uc-border": string;
+    "--uc-primary-rgb-light": string;
+    "--uc-primary-light": string;
+    "--uc-primary-hover-light": string;
+    "--uc-primary-transparent-light": string;
+    "--uc-background-light": string;
+    "--uc-foreground-light": string;
+    "--uc-primary-foreground-light": string;
+    "--uc-secondary-light": string;
+    "--uc-secondary-hover-light": string;
+    "--uc-secondary-foreground-light": string;
+    "--uc-muted-light": string;
+    "--uc-muted-foreground-light": string;
+    "--uc-destructive-light": string;
+    "--uc-destructive-foreground-light": string;
+    "--uc-border-light": string;
+    "--uc-primary-rgb-dark": string;
+    "--uc-primary-dark": string;
+    "--uc-primary-hover-dark": string;
+    "--uc-primary-transparent-dark": string;
+    "--uc-background-dark": string;
+    "--uc-foreground-dark": string;
+    "--uc-primary-foreground-dark": string;
+    "--uc-secondary-dark": string;
+    "--uc-secondary-hover-dark": string;
+    "--uc-secondary-foreground-dark": string;
+    "--uc-muted-dark": string;
+    "--uc-muted-foreground-dark": string;
+    "--uc-destructive-dark": string;
+    "--uc-destructive-foreground-dark": string;
+    "--uc-border-dark": string;
+    "--uc-primary-oklch-light": string;
+    "--uc-primary-oklch-dark": string;
 };
 export type OutputMessage = {
-    type: 'select-all';
+    type: "select-all";
 } | {
-    type: 'deselect-all';
+    type: "deselect-all";
 } | {
-    type: 'set-theme-definition';
+    type: "set-theme-definition";
     theme: Record<string, string>;
 } | {
-    type: 'set-locale-definition';
+    type: "set-locale-definition";
     localeDefinition: string;
 } | {
-    type: 'set-embed-css';
+    type: "set-embed-css";
     css: string;
 };
 //# sourceMappingURL=types.d.ts.map

package/blocks/ExternalSource/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["types.js"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["types.js"],"names":[],"mappings":"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"}

package/blocks/FileItem/FileItem.d.ts

@@ -7,10 +7,6 @@ export class FileItem extends UploaderBlock {
      */
     private _entry;
     /** @private */
-    private _isIntersecting;
-    /** @private */
-    private _debouncedGenerateThumb;
-    /** @private */
     private _debouncedCalculateState;
     /** @private */
     private _renderedOnce;
@@ -28,6 +24,7 @@ export class FileItem extends UploaderBlock {
         isUploading: boolean;
         isFocused: boolean;
         isEditable: boolean;
+        showFileNames: boolean;
         state: symbol;
         ariaLabelStatusFile: string;
         onEdit: () => void;
@@ -36,8 +33,8 @@ export class FileItem 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;
@@ -53,6 +50,8 @@ export class FileItem extends UploaderBlock {
      * @param {IntersectionObserverEntry[]} entries
      */
     private _observerCallback;
+    _isIntersecting: boolean | undefined;
+    _thumbRect: DOMRectReadOnly | undefined;
     /** @private */
     private _calculateState;
     /** @private */

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MA6BC;IAGH,eASC;IAED;;;OAGG;IACH,0BAaC;IAED,eAAe;IACf,wBAgBC;IAED,eAAe;IACf,2BAsCC;IAED;;;;OAIG;IACH,kBAUC;IAED;;MAaQ;IAER;;;OAGG;IACH,uBAmDC;IAsCD,wEAAwE;IACxE,oBADY,CAAC,oBAAoB,CAAC,CAAC,MAAM,oBAAoB,CAAC,QA0B7D;IAaC,eAAe;IACf,kBAEE;IAWJ;;;MAEC;IAED;;;OAGG;IACH,uBAEC;IAED,wBAsFC;CACF;;;;;8BAvb6B,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;IAEd,eAAe;IACf,iCAA0E;IAE1E,eAAe;IACf,sBAAsB;IAKpB;;;;;;;;;;;;;;;;;;;;;;;+CA9Bc,gBAAU;mCAGV,gBAAU;6BAGX,2BAGF;;wCAOZ,wCACW;;;;;;MA4CT;IAGH,eAQC;IAED;;;OAGG;IACH,0BAUC;IAPC,qCAA2C;IAC3C,wCAA0C;IAQ5C,eAAe;IACf,wBAgBC;IAED,eAAe;IACf,2BAuCC;IAED;;;;OAIG;IACH,kBAUC;IAED;;MAaQ;IAER;;;OAGG;IACH,uBAkCC;IAyDD,wEAAwE;IACxE,oBADY,CAAC,OAAO,aAAa,EAAE,MAAM,OAAO,aAAa,CAAC,QA0B7D;IAaC,eAAe;IACf,kBAEE;IAUJ;;;MAEC;IAED;;;OAGG;IACH,uBAEC;IAED,wBAsFC;CACF;;;;;8BApb6B,iCAAiC;AAS/D;;;;;GAKG"}

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"}