@acorex/platform 20.9.26 → 20.9.28

package/fesm2022/{acorex-platform-layout-widgets-image-preview.popup-C_EPAvCU.mjs → acorex-platform-layout-widgets-image-preview.popup-n5Lcs-RM.mjs}

@@ -7,7 +7,7 @@ class AXPImagePreviewPopupComponent extends AXBasePageComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPImagePreviewPopupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: AXPImagePreviewPopupComponent, isStandalone: true, selector: "axp-image-preview-popup", usesInheritance: true, ngImport: i0, template: `
     <div class="ax-flex ax-justify-center ax-items-center ax-p-4">
-      <img [src]="src" alt="Preview" />
+      <img [src]="src" alt="Preview" class="ax-max-h-[70vh] ax-max-w-full ax-object-contain" />
     </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXButtonModule }] }); }
 }
@@ -19,11 +19,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     imports: [AXButtonModule],
                     template: `
     <div class="ax-flex ax-justify-center ax-items-center ax-p-4">
-      <img [src]="src" alt="Preview" />
+      <img [src]="src" alt="Preview" class="ax-max-h-[70vh] ax-max-w-full ax-object-contain" />
     </div>
   `,
                 }]
         }] });
 
 export { AXPImagePreviewPopupComponent };
-//# sourceMappingURL=acorex-platform-layout-widgets-image-preview.popup-C_EPAvCU.mjs.map
+//# sourceMappingURL=acorex-platform-layout-widgets-image-preview.popup-n5Lcs-RM.mjs.map

package/fesm2022/acorex-platform-layout-widgets-image-preview.popup-n5Lcs-RM.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"acorex-platform-layout-widgets-image-preview.popup-n5Lcs-RM.mjs","sources":["../../../../libs/platform/layout/widgets/src/lib/widgets/advance/image/image-preview.popup.ts"],"sourcesContent":["import { AXButtonModule } from '@acorex/components/button';\nimport { AXBasePageComponent } from '@acorex/components/page';\n\nimport { Component } from '@angular/core';\n\n@Component({\n  standalone: true,\n  selector: 'axp-image-preview-popup',\n  imports: [AXButtonModule],\n  template: `\n    <div class=\"ax-flex ax-justify-center ax-items-center ax-p-4\">\n      <img [src]=\"src\" alt=\"Preview\" class=\"ax-max-h-[70vh] ax-max-w-full ax-object-contain\" />\n    </div>\n  `,\n})\nexport class AXPImagePreviewPopupComponent extends AXBasePageComponent {\n  src: string;\n}\n"],"names":[],"mappings":";;;;;AAeM,MAAO,6BAA8B,SAAQ,mBAAmB,CAAA;8GAAzD,6BAA6B,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAA7B,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,6BAA6B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,yBAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAN9B;;;;AAIT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EALS,cAAc,EAAA,CAAA,EAAA,CAAA,CAAA;;2FAOb,6BAA6B,EAAA,UAAA,EAAA,CAAA;kBAVzC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,QAAQ,EAAE,yBAAyB;oBACnC,OAAO,EAAE,CAAC,cAAc,CAAC;AACzB,oBAAA,QAAQ,EAAE;;;;AAIT,EAAA,CAAA;AACF,iBAAA;;;;;"}

package/fesm2022/acorex-platform-layout-widgets.mjs

@@ -12782,20 +12782,46 @@ const AXPOutcomeResultsViewerWidget = {
 
 class AXPMapWidgetEditComponent extends AXPValueWidgetComponent {
     onMarkerChanged($event) {
-        this.setValue({ polygons: this.getValue()?.polygons ?? [], markers: $event, pois: this.getValue()?.pois ?? [] });
+        this.setValue({ ...this.mapData(), markers: $event });
     }
     onPolygonChanged($event) {
-        this.setValue({ polygons: $event, markers: this.getValue()?.markers ?? [], pois: this.getValue()?.pois ?? [] });
+        this.setValue({ ...this.mapData(), polygons: $event });
+    }
+    onPolylineChanged($event) {
+        this.setValue({ ...this.mapData(), polylines: $event });
+    }
+    onRectangleChanged($event) {
+        this.setValue({ ...this.mapData(), rectangles: $event });
+    }
+    onCircleChanged($event) {
+        this.setValue({ ...this.mapData(), circles: $event });
+    }
+    mapData() {
+        const value = this.getValue();
+        return {
+            markers: value?.markers ?? [],
+            polygons: value?.polygons ?? [],
+            polylines: value?.polylines ?? [],
+            rectangles: value?.rectangles ?? [],
+            circles: value?.circles ?? [],
+            pois: value?.pois ?? [],
+        };
     }
     constructor() {
         super();
         this.cdr = inject(ChangeDetectorRef);
         this.markers = computed(() => this.getValue()?.markers ?? [], ...(ngDevMode ? [{ debugName: "markers" }] : /* istanbul ignore next */ []));
         this.polygons = computed(() => this.getValue()?.polygons ?? [], ...(ngDevMode ? [{ debugName: "polygons" }] : /* istanbul ignore next */ []));
+        this.polylines = computed(() => this.getValue()?.polylines ?? [], ...(ngDevMode ? [{ debugName: "polylines" }] : /* istanbul ignore next */ []));
+        this.rectangles = computed(() => this.getValue()?.rectangles ?? [], ...(ngDevMode ? [{ debugName: "rectangles" }] : /* istanbul ignore next */ []));
+        this.circles = computed(() => this.getValue()?.circles ?? [], ...(ngDevMode ? [{ debugName: "circles" }] : /* istanbul ignore next */ []));
         this.hasDraw = computed(() => this.options()['hasDraw'] ?? false, ...(ngDevMode ? [{ debugName: "hasDraw" }] : /* istanbul ignore next */ []));
         this.hasLocate = computed(() => this.options()['hasLocate'] ?? false, ...(ngDevMode ? [{ debugName: "hasLocate" }] : /* istanbul ignore next */ []));
         this.maxMarker = computed(() => this.options()['maxMarker'] ?? 1, ...(ngDevMode ? [{ debugName: "maxMarker" }] : /* istanbul ignore next */ []));
         this.maxPolygon = computed(() => this.options()['maxPolygon'] ?? 1, ...(ngDevMode ? [{ debugName: "maxPolygon" }] : /* istanbul ignore next */ []));
+        this.maxPolyline = computed(() => this.options()['maxPolyline'] ?? 1, ...(ngDevMode ? [{ debugName: "maxPolyline" }] : /* istanbul ignore next */ []));
+        this.maxRectangle = computed(() => this.options()['maxRectangle'] ?? 1, ...(ngDevMode ? [{ debugName: "maxRectangle" }] : /* istanbul ignore next */ []));
+        this.maxCircle = computed(() => this.options()['maxCircle'] ?? 1, ...(ngDevMode ? [{ debugName: "maxCircle" }] : /* istanbul ignore next */ []));
         this.zoomLevel = computed(() => this.options()['zoomLevel'] ?? 13, ...(ngDevMode ? [{ debugName: "zoomLevel" }] : /* istanbul ignore next */ []));
         this.latitude = computed(() => this.options()['latitude'] ?? 35, ...(ngDevMode ? [{ debugName: "latitude" }] : /* istanbul ignore next */ []));
         this.longitude = computed(() => this.options()['longitude'] ?? 51, ...(ngDevMode ? [{ debugName: "longitude" }] : /* istanbul ignore next */ []));
@@ -12823,6 +12849,9 @@ class AXPMapWidgetEditComponent extends AXPValueWidgetComponent {
       class="ax-h-full"
       (onMarkerChanged)="onMarkerChanged($event)"
       (onPolygonChanged)="onPolygonChanged($event)"
+      (onPolylineChanged)="onPolylineChanged($event)"
+      (onRectangleChanged)="onRectangleChanged($event)"
+      (onCircleChanged)="onCircleChanged($event)"
       [hasLocator]="hasLocate()"
       [hasDraw]="hasDraw()"
       [latitude]="latitude()"
@@ -12830,8 +12859,14 @@ class AXPMapWidgetEditComponent extends AXPValueWidgetComponent {
       [zoomLevel]="zoomLevel()"
       [maxMarker]="maxMarker()"
       [maxPolygon]="maxPolygon()"
+      [maxPolyline]="maxPolyline()"
+      [maxRectangle]="maxRectangle()"
+      [maxCircle]="maxCircle()"
       [markers]="markers()"
       [polygons]="polygons()"
+      [polylines]="polylines()"
+      [rectangles]="rectangles()"
+      [circles]="circles()"
       [fitToDraw]="fitToDraw()"
       [limitDraw]="limitDraw()!"
       [pois]="pois()"
@@ -12839,7 +12874,7 @@ class AXPMapWidgetEditComponent extends AXPValueWidgetComponent {
       [readonly]="readonly()"
     >
     </ax-map>
-  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXMapModule }, { kind: "component", type: i1$g.AXMapComponent, selector: "ax-map", inputs: ["zoomLevel", "latitude", "longitude", "maxMarker", "maxPolygon", "hasDraw", "hasLocator", "fitToDraw", "limitDraw", "addPoiToFitDraw", "addMarkerOnTap", "readonly", "disabled", "markerPlace", "locatePlace", "poiMinZoom", "markers", "polygons", "pois"], outputs: ["zoomLevelChange", "latitudeChange", "longitudeChange", "onMarkerAdded", "onMarkerClick", "onMarkerChanged", "onPolygonAdded", "onPolygonClick", "onPolygonChanged", "onLocationFound", "onPoiChanged", "onPoiAdded", "onMapReady", "onLoadError"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXMapModule }, { kind: "component", type: i1$g.AXMapComponent, selector: "ax-map", inputs: ["zoomLevel", "latitude", "longitude", "maxMarker", "maxPolygon", "maxPolyline", "maxRectangle", "maxCircle", "hasDraw", "hasLocator", "fitToDraw", "limitDraw", "addPoiToFitDraw", "addMarkerOnTap", "readonly", "disabled", "markerPlace", "locatePlace", "poiMinZoom", "markers", "polygons", "polylines", "rectangles", "circles", "pois"], outputs: ["zoomLevelChange", "latitudeChange", "longitudeChange", "onMarkerAdded", "onMarkerClick", "onMarkerChanged", "onPolygonAdded", "onPolygonClick", "onPolygonChanged", "onPolylineAdded", "onPolylineClick", "onPolylineChanged", "onRectangleAdded", "onRectangleClick", "onRectangleChanged", "onCircleAdded", "onCircleClick", "onCircleChanged", "onLocationFound", "onPoiChanged", "onPoiAdded", "onMapReady", "onLoadError"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPMapWidgetEditComponent, decorators: [{
             type: Component,
@@ -12850,6 +12885,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
       class="ax-h-full"
       (onMarkerChanged)="onMarkerChanged($event)"
       (onPolygonChanged)="onPolygonChanged($event)"
+      (onPolylineChanged)="onPolylineChanged($event)"
+      (onRectangleChanged)="onRectangleChanged($event)"
+      (onCircleChanged)="onCircleChanged($event)"
       [hasLocator]="hasLocate()"
       [hasDraw]="hasDraw()"
       [latitude]="latitude()"
@@ -12857,8 +12895,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
       [zoomLevel]="zoomLevel()"
       [maxMarker]="maxMarker()"
       [maxPolygon]="maxPolygon()"
+      [maxPolyline]="maxPolyline()"
+      [maxRectangle]="maxRectangle()"
+      [maxCircle]="maxCircle()"
       [markers]="markers()"
       [polygons]="polygons()"
+      [polylines]="polylines()"
+      [rectangles]="rectangles()"
+      [circles]="circles()"
       [fitToDraw]="fitToDraw()"
       [limitDraw]="limitDraw()!"
       [pois]="pois()"
@@ -12886,6 +12930,9 @@ class AXPMapWidgetViewComponent extends AXPValueWidgetComponent {
         super();
         this.markers = computed(() => this.getValue()?.markers ?? [], ...(ngDevMode ? [{ debugName: "markers" }] : /* istanbul ignore next */ []));
         this.polygons = computed(() => this.getValue()?.polygons ?? [], ...(ngDevMode ? [{ debugName: "polygons" }] : /* istanbul ignore next */ []));
+        this.polylines = computed(() => this.getValue()?.polylines ?? [], ...(ngDevMode ? [{ debugName: "polylines" }] : /* istanbul ignore next */ []));
+        this.rectangles = computed(() => this.getValue()?.rectangles ?? [], ...(ngDevMode ? [{ debugName: "rectangles" }] : /* istanbul ignore next */ []));
+        this.circles = computed(() => this.getValue()?.circles ?? [], ...(ngDevMode ? [{ debugName: "circles" }] : /* istanbul ignore next */ []));
         this.height = computed(() => this.options()['height'] ?? 300, ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
         this.zoomLevel = computed(() => this.options()['zoomLevel'] ?? 13, ...(ngDevMode ? [{ debugName: "zoomLevel" }] : /* istanbul ignore next */ []));
         this.latitude = computed(() => this.options()['latitude'] ?? 35, ...(ngDevMode ? [{ debugName: "latitude" }] : /* istanbul ignore next */ []));
@@ -12902,6 +12949,9 @@ class AXPMapWidgetViewComponent extends AXPValueWidgetComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: AXPMapWidgetViewComponent, isStandalone: true, selector: "axp-map-box-widget-view", usesInheritance: true, ngImport: i0, template: `<div [style.height.px]="height()" class="ax-w-full">
     <ax-map
       [polygons]="polygons()"
+      [polylines]="polylines()"
+      [rectangles]="rectangles()"
+      [circles]="circles()"
       [zoomLevel]="zoomLevel()"
       [latitude]="latitude()"
       [longitude]="longitude()"
@@ -12909,7 +12959,7 @@ class AXPMapWidgetViewComponent extends AXPValueWidgetComponent {
       [disabled]="disabled()"
       [readonly]="readonly()"
     ></ax-map>
-  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXMapModule }, { kind: "component", type: i1$g.AXMapComponent, selector: "ax-map", inputs: ["zoomLevel", "latitude", "longitude", "maxMarker", "maxPolygon", "hasDraw", "hasLocator", "fitToDraw", "limitDraw", "addPoiToFitDraw", "addMarkerOnTap", "readonly", "disabled", "markerPlace", "locatePlace", "poiMinZoom", "markers", "polygons", "pois"], outputs: ["zoomLevelChange", "latitudeChange", "longitudeChange", "onMarkerAdded", "onMarkerClick", "onMarkerChanged", "onPolygonAdded", "onPolygonClick", "onPolygonChanged", "onLocationFound", "onPoiChanged", "onPoiAdded", "onMapReady", "onLoadError"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXMapModule }, { kind: "component", type: i1$g.AXMapComponent, selector: "ax-map", inputs: ["zoomLevel", "latitude", "longitude", "maxMarker", "maxPolygon", "maxPolyline", "maxRectangle", "maxCircle", "hasDraw", "hasLocator", "fitToDraw", "limitDraw", "addPoiToFitDraw", "addMarkerOnTap", "readonly", "disabled", "markerPlace", "locatePlace", "poiMinZoom", "markers", "polygons", "polylines", "rectangles", "circles", "pois"], outputs: ["zoomLevelChange", "latitudeChange", "longitudeChange", "onMarkerAdded", "onMarkerClick", "onMarkerChanged", "onPolygonAdded", "onPolygonClick", "onPolygonChanged", "onPolylineAdded", "onPolylineClick", "onPolylineChanged", "onRectangleAdded", "onRectangleClick", "onRectangleChanged", "onCircleAdded", "onCircleClick", "onCircleChanged", "onLocationFound", "onPoiChanged", "onPoiAdded", "onMapReady", "onLoadError"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPMapWidgetViewComponent, decorators: [{
             type: Component,
@@ -12918,6 +12968,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     template: `<div [style.height.px]="height()" class="ax-w-full">
     <ax-map
       [polygons]="polygons()"
+      [polylines]="polylines()"
+      [rectangles]="rectangles()"
+      [circles]="circles()"
       [zoomLevel]="zoomLevel()"
       [latitude]="latitude()"
       [longitude]="longitude()"
@@ -23086,144 +23139,231 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             args: [{ providedIn: 'root' }]
         }] });
 
+//#region ---- Stored image URL resolver ----
+const FILE_STORAGE_ID_PATTERN = /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
+const FILE_STORAGE_PREFIX = 'file:';
+/** Strips the file-cast prefix and whitespace from a stored image reference. */
+function normalizeStoredImageRef(value) {
+    if (!value) {
+        return null;
+    }
+    const trimmed = value.trim();
+    if (!trimmed || trimmed === 'null') {
+        return null;
+    }
+    return trimmed.startsWith(FILE_STORAGE_PREFIX) ? trimmed.slice(FILE_STORAGE_PREFIX.length) : trimmed;
+}
+function isStoredImageFileId(value) {
+    const normalized = normalizeStoredImageRef(value);
+    if (!normalized) {
+        return false;
+    }
+    return FILE_STORAGE_ID_PATTERN.test(normalized);
+}
+async function resolveStoredImageDisplayUrl(value, resolveFile) {
+    const normalized = normalizeStoredImageRef(value);
+    if (!normalized) {
+        return '';
+    }
+    if (normalized.startsWith('http://') ||
+        normalized.startsWith('https://') ||
+        normalized.startsWith('data:image/') ||
+        normalized.startsWith('blob:')) {
+        return normalized;
+    }
+    if (isStoredImageFileId(normalized)) {
+        const info = await resolveFile(normalized);
+        if (info.url) {
+            return info.url;
+        }
+        if (info.binary) {
+            return URL.createObjectURL(info.binary);
+        }
+        return '';
+    }
+    return normalized;
+}
+//#endregion
+
 //#region ----   Component: Image Widget Column   ----
 class AXPImageWidgetColumnComponent extends AXPColumnWidgetComponent {
+    //#endregion
+    //#region ----   Lifecycle   ----
     constructor() {
         super();
-        this.layoutBuilder = inject(AXPLayoutBuilderService);
+        //#region ----   Services & Dependencies   ----
+        this.popupService = inject(AXPopupService);
         this.imageDef = inject(AXPImageDefinitionService);
-        this.width = computed(() => {
-            const provided = this.providerSettings();
-            const optW = this.options?.columnWidth;
-            const optH = this.options?.columnHeight;
-            const baseW = optW ?? provided?.width;
-            const baseH = optH ?? provided?.height;
-            if (baseW != null && baseW !== '')
-                return baseW;
-            if ((baseW == null || baseW === '') && (baseH == null || baseH === ''))
-                return '100%';
-            return undefined;
-        }, ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
-        this.height = computed(() => {
-            const provided = this.providerSettings();
-            const optH = this.options?.columnHeight;
-            const baseH = optH ?? provided?.height;
-            if (baseH != null && baseH !== '')
-                return baseH;
-            return undefined;
-        }, ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+        this.fileStorage = inject(AXPFileStorageService, { optional: true });
+        //#endregion
+        //#region ----   Computed Properties   ----
         this.typeName = computed(() => this.options?.type, ...(ngDevMode ? [{ debugName: "typeName" }] : /* istanbul ignore next */ []));
         this.providerSettings = computed(() => this.imageDef.resolve(this.typeName() ?? null), ...(ngDevMode ? [{ debugName: "providerSettings" }] : /* istanbul ignore next */ []));
-        this.aspectRatio = computed(() => {
-            const opt = this.options?.aspectRatio;
-            const def = this.providerSettings()?.aspectRatio;
-            return (opt ?? def ?? undefined);
-        }, ...(ngDevMode ? [{ debugName: "aspectRatio" }] : /* istanbul ignore next */ []));
-        this.objectFit = computed(() => {
-            const optVal = this.options?.objectFit;
+        this.thumbnailSize = computed(() => {
+            const options = this.options;
+            const optW = options?.columnWidth;
+            const optH = options?.columnHeight;
+            if (optW) {
+                return optW;
+            }
+            if (optH) {
+                return optH;
+            }
+            return '40px';
+        }, ...(ngDevMode ? [{ debugName: "thumbnailSize" }] : /* istanbul ignore next */ []));
+        this.thumbnailObjectFit = computed(() => {
+            const options = this.options;
+            const optVal = options?.objectFit;
             const provided = this.providerSettings();
             const normalized = typeof optVal === 'string' ? optVal : optVal?.id;
-            return normalized ?? provided?.objectFit ?? 'contain';
-        }, ...(ngDevMode ? [{ debugName: "objectFit" }] : /* istanbul ignore next */ []));
+            return normalized ?? provided?.objectFit ?? 'cover';
+        }, ...(ngDevMode ? [{ debugName: "thumbnailObjectFit" }] : /* istanbul ignore next */ []));
+        this.thumbnailBorderRadius = computed(() => {
+            const options = this.options;
+            return options?.borderRadius ?? this.providerSettings()?.borderRadius ?? '4px';
+        }, ...(ngDevMode ? [{ debugName: "thumbnailBorderRadius" }] : /* istanbul ignore next */ []));
+        //#endregion
+        //#region ----   State   ----
         this.imageUrl = signal(null, ...(ngDevMode ? [{ debugName: "imageUrl" }] : /* istanbul ignore next */ []));
+        this.blobObjectUrl = null;
+        this.hydrateRequestId = 0;
         effect(() => {
-            const value = this.rawValue;
-            const currentUrl = this.imageUrl();
-            if (currentUrl && currentUrl.startsWith('blob:')) {
-                URL.revokeObjectURL(currentUrl);
-            }
-            if (typeof value === 'string') {
-                this.imageUrl.set(value);
-            }
-            else if (value instanceof URL) {
-                this.imageUrl.set(value.href);
-            }
-            else if (value instanceof Blob) {
-                this.imageUrl.set(URL.createObjectURL(value));
-            }
-            else if (value instanceof ArrayBuffer) {
-                const blob = new Blob([value]);
-                this.imageUrl.set(URL.createObjectURL(blob));
-            }
-            else {
-                this.imageUrl.set(null);
-            }
+            void this.hydrateImageUrl(this.rawValue);
         });
     }
+    //#endregion
+    //#region ----   UI Handlers   ----
     async showPopup() {
-        const url = this.imageUrl();
-        if (!url) {
+        const src = this.imageUrl();
+        if (!src) {
             return;
         }
-        const ref = await this.layoutBuilder
-            .create()
-            .dialog((dialog) => {
-            dialog
-                .setTitle('Image')
-                .setSize('lg')
-                .content((layoutBuilder) => {
-                layoutBuilder.flex((flex) => {
-                    flex.mode('view').formField('Preview', (field) => {
-                        field.readonly(true).customWidget('image', {
-                            src: url,
-                            type: this.typeName(),
-                            width: '100%',
-                            aspectRatio: this.aspectRatio(),
-                            objectFit: this.objectFit(),
-                        });
-                    });
-                });
-            })
-                .setActions((actions) => {
-                actions.cancel('@general:actions.cancel.title');
-            });
-        })
-            .show();
-        ref.close();
+        const { AXPImagePreviewPopupComponent } = await import('./acorex-platform-layout-widgets-image-preview.popup-n5Lcs-RM.mjs');
+        await this.popupService.open(AXPImagePreviewPopupComponent, {
+            title: '@platform-layout-widgets:widgets.image.dialog.title',
+            size: 'lg',
+            closeButton: true,
+            closeOnBackdropClick: true,
+            data: { src },
+        });
     }
     ngOnDestroy() {
-        const currentUrl = this.imageUrl();
-        if (currentUrl && currentUrl.startsWith('blob:')) {
-            URL.revokeObjectURL(currentUrl);
+        this.revokeBlobUrl();
+    }
+    //#endregion
+    //#region ----   Utility Methods   ----
+    async hydrateImageUrl(value) {
+        const requestId = ++this.hydrateRequestId;
+        this.revokeBlobUrl();
+        if (typeof value === 'string') {
+            if (this.fileStorage && isStoredImageFileId(value)) {
+                try {
+                    const displayUrl = await resolveStoredImageDisplayUrl(value, (fileId) => this.fileStorage.getInfo(fileId));
+                    if (requestId !== this.hydrateRequestId) {
+                        if (displayUrl.startsWith('blob:')) {
+                            URL.revokeObjectURL(displayUrl);
+                        }
+                        return;
+                    }
+                    if (displayUrl.startsWith('blob:')) {
+                        this.blobObjectUrl = displayUrl;
+                    }
+                    this.imageUrl.set(displayUrl || null);
+                    return;
+                }
+                catch {
+                    if (requestId === this.hydrateRequestId) {
+                        this.imageUrl.set(null);
+                    }
+                    return;
+                }
+            }
+            if (requestId === this.hydrateRequestId) {
+                this.imageUrl.set(value);
+            }
+            return;
+        }
+        if (requestId !== this.hydrateRequestId) {
+            return;
+        }
+        if (value instanceof URL) {
+            this.imageUrl.set(value.href);
+        }
+        else if (value instanceof Blob) {
+            this.blobObjectUrl = URL.createObjectURL(value);
+            this.imageUrl.set(this.blobObjectUrl);
+        }
+        else if (value instanceof ArrayBuffer) {
+            const blob = new Blob([value]);
+            this.blobObjectUrl = URL.createObjectURL(blob);
+            this.imageUrl.set(this.blobObjectUrl);
+        }
+        else {
+            this.imageUrl.set(null);
+        }
+    }
+    revokeBlobUrl() {
+        if (this.blobObjectUrl) {
+            URL.revokeObjectURL(this.blobObjectUrl);
+            this.blobObjectUrl = null;
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPImageWidgetColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPImageWidgetColumnComponent, isStandalone: true, selector: "axp-image-widget-column", inputs: { rawValue: "rawValue", rowData: "rowData" }, usesInheritance: true, ngImport: i0, template: `
     <div class="ax-flex ax-items-center ax-gap-2">
       @if (imageUrl()) {
-        <span> Image </span>
-        <ax-button color="default" (click)="showPopup()">
-          <ax-icon>
-            <i class="fa-regular fa-info-image"></i>
-          </ax-icon>
-        </ax-button>
+        <button
+          type="button"
+          class="ax-inline-flex ax-shrink-0 ax-overflow-hidden ax-cursor-pointer ax-border ax-border-border-light-surface ax-bg-transparent ax-p-0"
+          [style.width]="thumbnailSize()"
+          [style.height]="thumbnailSize()"
+          [style.border-radius]="thumbnailBorderRadius()"
+          (click)="showPopup()"
+        >
+          <img
+            [src]="imageUrl()!"
+            alt=""
+            class="ax-size-full"
+            [style.object-fit]="thumbnailObjectFit()"
+            [style.border-radius]="thumbnailBorderRadius()"
+          />
+        </button>
       } @else {
         <span>-</span>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPImageWidgetColumnComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-image-widget-column',
-                    imports: [AXButtonModule, AXDecoratorModule],
                     template: `
     <div class="ax-flex ax-items-center ax-gap-2">
       @if (imageUrl()) {
-        <span> Image </span>
-        <ax-button color="default" (click)="showPopup()">
-          <ax-icon>
-            <i class="fa-regular fa-info-image"></i>
-          </ax-icon>
-        </ax-button>
+        <button
+          type="button"
+          class="ax-inline-flex ax-shrink-0 ax-overflow-hidden ax-cursor-pointer ax-border ax-border-border-light-surface ax-bg-transparent ax-p-0"
+          [style.width]="thumbnailSize()"
+          [style.height]="thumbnailSize()"
+          [style.border-radius]="thumbnailBorderRadius()"
+          (click)="showPopup()"
+        >
+          <img
+            [src]="imageUrl()!"
+            alt=""
+            class="ax-size-full"
+            [style.object-fit]="thumbnailObjectFit()"
+            [style.border-radius]="thumbnailBorderRadius()"
+          />
+        </button>
       } @else {
         <span>-</span>
       }
     </div>
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    inputs: ['rawValue', 'rowData']
+                    inputs: ['rawValue', 'rowData'],
                 }]
         }], ctorParameters: () => [] });
 
@@ -23465,7 +23605,7 @@ class AXPImageWidgetEditComponent extends AXPValueWidgetComponent {
         if (!src) {
             return;
         }
-        const { AXPImagePreviewPopupComponent } = await import('./acorex-platform-layout-widgets-image-preview.popup-C_EPAvCU.mjs');
+        const { AXPImagePreviewPopupComponent } = await import('./acorex-platform-layout-widgets-image-preview.popup-n5Lcs-RM.mjs');
         await this.popupService.open(AXPImagePreviewPopupComponent, {
             title: 'Image Preview',
             size: 'lg',
@@ -24091,6 +24231,30 @@ const AXPMapWidget = {
             defaultValue: 1,
             options: { minValue: 0, maxValue: 100 },
         }),
+        createNumberProperty({
+            name: 'maxPolyline',
+            title: 'Max Polyline',
+            path: 'options.maxPolyline',
+            group: AXP_DATA_PROPERTY_GROUP,
+            defaultValue: 1,
+            options: { minValue: 0, maxValue: 100 },
+        }),
+        createNumberProperty({
+            name: 'maxRectangle',
+            title: 'Max Rectangle',
+            path: 'options.maxRectangle',
+            group: AXP_DATA_PROPERTY_GROUP,
+            defaultValue: 1,
+            options: { minValue: 0, maxValue: 100 },
+        }),
+        createNumberProperty({
+            name: 'maxCircle',
+            title: 'Max Circle',
+            path: 'options.maxCircle',
+            group: AXP_DATA_PROPERTY_GROUP,
+            defaultValue: 1,
+            options: { minValue: 0, maxValue: 100 },
+        }),
         createNumberProperty({
             name: 'latitude',
             title: 'Latitude',