@acorex/platform 20.7.11 → 20.7.13

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

@@ -84,10 +84,9 @@ import { AXDataTableModule } from '@acorex/components/data-table';
 import { AXPCommandExecutor, provideCommandSetups } from '@acorex/platform/runtime';
 import { AXUploaderZoneDirective } from '@acorex/cdk/uploader';
 import { AXUploaderModule } from '@acorex/components/uploader';
+import { AXLoadingDialogService } from '@acorex/components/loading-dialog';
 import * as i1$d from '@acorex/components/media-viewer';
 import { AXMediaViewerModule } from '@acorex/components/media-viewer';
-import * as i4$1 from '@acorex/components/menu';
-import { AXMenuModule } from '@acorex/components/menu';
 import * as i1$e from '@acorex/components/image';
 import { AXImageModule } from '@acorex/components/image';
 import * as i1$f from '@acorex/components/json-viewer';
@@ -10314,14 +10313,12 @@ class AXPEditFileUploaderCommand {
         const submitLabel = await this.translationService.translateAsync('@general:actions.submit.title');
         // Hooks: parameter insertion points
         const beforeRenamePayload = await this.hooks.runAsync(FileUploaderWebhookKeys.EditDialog.Params.BeforeRename, {
-            host: this,
             file: file,
             plugins,
             excludePlugins,
             items: [],
         });
         const afterRenamePayload = await this.hooks.runAsync(FileUploaderWebhookKeys.EditDialog.Params.AfterRename, {
-            host: this,
             file: file,
             plugins,
             excludePlugins,
@@ -10329,14 +10326,12 @@ class AXPEditFileUploaderCommand {
         });
         // Hooks: group insertion points around 'form'
         const groupsBeforePayload = await this.hooks.runAsync(FileUploaderWebhookKeys.EditDialog.Groups.BeforeForm, {
-            host: this,
             file: file,
             plugins,
             excludePlugins,
             groups: [],
         });
         const groupsAfterPayload = await this.hooks.runAsync(FileUploaderWebhookKeys.EditDialog.Groups.AfterForm, {
-            host: this,
             file: file,
             plugins,
             excludePlugins,
@@ -10565,8 +10560,8 @@ class AXPFileListComponent {
         // Plugin context (passed from parent widget)
         this.plugins = input(undefined, ...(ngDevMode ? [{ debugName: "plugins" }] : []));
         this.excludePlugins = input(undefined, ...(ngDevMode ? [{ debugName: "excludePlugins" }] : []));
-        // Host widget instance (optional) for plugins needing it
-        this.host = input(undefined, ...(ngDevMode ? [{ debugName: "host" }] : []));
+        // Capabilities API for file operations (passed from parent widget)
+        this.capabilities = input(undefined, ...(ngDevMode ? [{ debugName: "capabilities" }] : []));
         /**
          * All files should be displayed, even those with `deleted` status.
          * The template will handle the visual differences based on the status.
@@ -10641,12 +10636,11 @@ class AXPFileListComponent {
         // Get per-file actions from FileUploaderWebhookKeys.FileItem.Actions hook
         // Note: globalActions are only for toolbar, not for per-file actions
         const fileItemPayload = await this.hooks.runAsync(FileUploaderWebhookKeys.FileItem.Actions, {
-            host: this.host(),
             item: file,
             index,
             plugins: this.plugins() ?? [],
             excludePlugins: this.excludePlugins() ?? [],
-            capabilities: {},
+            capabilities: this.capabilities(),
             actions: [],
         });
         // Combine all actions: default + file-item specific (exclude globalActions from per-file items)
@@ -10680,15 +10674,11 @@ class AXPFileListComponent {
         this.isLoading.set(false);
     }
     async loadGlobalActions() {
-        if (!this.host()) {
-            return;
-        }
         try {
             const payload = await this.hooks.runAsync(FileUploaderWebhookKeys.Actions, {
-                host: this.host(),
                 plugins: this.plugins() ?? [],
                 excludePlugins: this.excludePlugins() ?? [],
-                capabilities: {},
+                capabilities: this.capabilities(),
                 actions: [],
             });
             this.globalActions.set(payload?.actions ?? []);
@@ -10712,10 +10702,10 @@ class AXPFileListComponent {
         event.nativeEvent.stopPropagation();
         try {
             await this.hooks.runAsync(FileUploaderWebhookKeys.FileItem.BeforeDownload, {
-                host: this.host(),
                 file,
                 plugins: this.plugins() ?? [],
                 excludePlugins: this.excludePlugins() ?? [],
+                capabilities: this.capabilities(),
             });
         }
         catch { }
@@ -10788,11 +10778,11 @@ class AXPFileListComponent {
                 if (file.source.value && typeof file.source.value === 'object' && 'id' in file.source.value && 'type' in file.source.value) {
                     try {
                         const result = await this.hooks.runAsync(FileUploaderWebhookKeys.FileItem.DownloadReference, {
-                            host: this.host(),
                             file,
                             reference: file.source.value,
                             plugins: this.plugins() ?? [],
                             excludePlugins: this.excludePlugins() ?? [],
+                            capabilities: this.capabilities(),
                             fileInfo: undefined,
                         });
                         if (result?.fileInfo) {
@@ -10832,10 +10822,10 @@ class AXPFileListComponent {
         }
         try {
             await this.hooks.runAsync(FileUploaderWebhookKeys.FileItem.AfterDownload, {
-                host: this.host(),
                 file,
                 plugins: this.plugins() ?? [],
                 excludePlugins: this.excludePlugins() ?? [],
+                capabilities: this.capabilities(),
             });
         }
         catch { }
@@ -10846,10 +10836,10 @@ class AXPFileListComponent {
         this.onRemove.emit(file);
         try {
             await this.hooks.runAsync(FileUploaderWebhookKeys.FileItem.AfterRemove, {
-                host: this.host(),
                 file,
                 plugins: this.plugins() ?? [],
                 excludePlugins: this.excludePlugins() ?? [],
+                capabilities: this.capabilities(),
             });
         }
         catch { }
@@ -10888,11 +10878,11 @@ class AXPFileListComponent {
         this.onRename.emit(newFile);
         try {
             await this.hooks.runAsync(FileUploaderWebhookKeys.FileItem.AfterEdit, {
-                host: this.host(),
                 file: newFile ?? file,
                 previous: file,
                 plugins: this.plugins() ?? [],
                 excludePlugins: this.excludePlugins() ?? [],
+                capabilities: this.capabilities(),
             });
         }
         catch { }
@@ -10900,7 +10890,7 @@ class AXPFileListComponent {
     ngOnDestroy() { }
     async runAction(action) {
         try {
-            await action.run({ host: this.host() });
+            await action.run(this.capabilities());
         }
         catch (e) {
             console.error(e);
@@ -10921,7 +10911,7 @@ class AXPFileListComponent {
         return action.color ?? 'primary';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPFileListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AXPFileListComponent, isStandalone: true, selector: "axp-file-list", inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, fileEditable: { classPropertyName: "fileEditable", publicName: "fileEditable", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: false, transformFunction: null }, plugins: { classPropertyName: "plugins", publicName: "plugins", isSignal: true, isRequired: false, transformFunction: null }, excludePlugins: { classPropertyName: "excludePlugins", publicName: "excludePlugins", isSignal: true, isRequired: false, transformFunction: null }, host: { classPropertyName: "host", publicName: "host", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onRemove: "onRemove", onRevert: "onRevert", onRename: "onRename" }, providers: [], ngImport: i0, template: "@for (file of displayFiles(); track $index) {\n  <div\n    class=\"__item\"\n    [ngClass]=\"{ '--removed': file.status === 'deleted', '--attached': file.status === 'attached' }\"\n  >\n    <div class=\"__icon\">\n      <i class=\"fa-fw {{ getFileInfo(file.name).icon }} fa-solid\"></i>\n    </div>\n    <div class=\"__name\">{{ file.name }}</div>\n    <div class=\"__actions\">\n      @if (file.status === 'deleted' && multiple()) {\n        <!-- Revert button - only show when multiple is true -->\n        <ax-button [look]=\"'blank'\" class=\"ax-sm\" color=\"warning\" (onClick)=\"handleFileRevert($event,file)\">\n          <ax-icon class=\"fa-light fa-rotate-left\"></ax-icon>\n        </ax-button>\n      } @else if (file.status !== 'deleted') {\n        <!-- All actions from hooks (including default actions) -->\n        @if (!readonly() || (readonly() && file.status === 'attached')) {\n          @for (action of actionsFor(file, $index); track action.id ?? action.textKey ?? action.text ?? $index) {\n            <ax-button\n              [look]=\"'blank'\"\n              class=\"ax-sm\"\n              [color]=\"getActionColor(action)\"\n              (onClick)=\"runAction(action)\"\n            >\n              @if (action.icon) {\n                <ax-icon class=\"{{ action.icon }}\"></ax-icon>\n              }\n            </ax-button>\n          }\n        }\n      }\n    </div>\n  </div>\n} @empty {\n  <div class=\"__empty-state\">\n    <axp-state-message\n      icon=\"fa-light fa-folder-open\"\n      [title]=\"'@general:widgets.file-uploader.empty-state.title'\"\n      [description]=\"'@general:widgets.file-uploader.empty-state.description'\"\n    >\n    </axp-state-message>\n  </div>\n}\n", styles: [":host{display:flex;width:100%;flex-direction:column;gap:.125rem;padding-top:.5rem;padding-bottom:.5rem}:host .__item{display:flex;cursor:pointer;align-items:center;gap:.75rem;border-left-width:4px;border-color:transparent;padding:.5rem}:host .__item:hover{background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}:host .__item.--removed{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-danger-500),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-danger-50),var(--tw-bg-opacity, 1))}:host .__item.--attached{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-success-500),var(--tw-border-opacity, 1));animation:attached-flash 1s ease-out forwards}:host .__item .__icon{width:1.5rem;flex-shrink:0}:host .__item .__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start;font-size:.875rem;line-height:1.25rem;font-weight:500}:host .__item .__actions{margin-left:auto;display:flex}@keyframes attached-flash{0%{background-color:rgb(var(--ax-sys-color-success-50))}to{background-color:transparent}}.__empty-state{cursor:pointer;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s}.__empty-state:hover{opacity:.8}\n"], dependencies: [{ kind: "ngmodule", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AXPFileListComponent, isStandalone: true, selector: "axp-file-list", inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, fileEditable: { classPropertyName: "fileEditable", publicName: "fileEditable", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: false, transformFunction: null }, plugins: { classPropertyName: "plugins", publicName: "plugins", isSignal: true, isRequired: false, transformFunction: null }, excludePlugins: { classPropertyName: "excludePlugins", publicName: "excludePlugins", isSignal: true, isRequired: false, transformFunction: null }, capabilities: { classPropertyName: "capabilities", publicName: "capabilities", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onRemove: "onRemove", onRevert: "onRevert", onRename: "onRename" }, providers: [], ngImport: i0, template: "@for (file of displayFiles(); track $index) {\n  <div\n    class=\"__item\"\n    [ngClass]=\"{ '--removed': file.status === 'deleted', '--attached': file.status === 'attached' }\"\n  >\n    <div class=\"__icon\">\n      <i class=\"fa-fw {{ getFileInfo(file.name).icon }} fa-solid\"></i>\n    </div>\n    <div class=\"__name\">{{ file.name }}</div>\n    <div class=\"__actions\">\n      @if (file.status === 'deleted' && multiple()) {\n        <!-- Revert button - only show when multiple is true -->\n        <ax-button [look]=\"'blank'\" class=\"ax-sm\" color=\"warning\" (onClick)=\"handleFileRevert($event,file)\">\n          <ax-icon class=\"fa-light fa-rotate-left\"></ax-icon>\n        </ax-button>\n      } @else if (file.status !== 'deleted') {\n        <!-- All actions from hooks (including default actions) -->\n        @if (!readonly() || (readonly() && file.status === 'attached')) {\n          @for (action of actionsFor(file, $index); track action.id ?? action.textKey ?? action.text ?? $index) {\n            <ax-button\n              [look]=\"'blank'\"\n              class=\"ax-sm\"\n              [color]=\"getActionColor(action)\"\n              (onClick)=\"runAction(action)\"\n            >\n              @if (action.icon) {\n                <ax-icon class=\"{{ action.icon }}\"></ax-icon>\n              }\n            </ax-button>\n          }\n        }\n      }\n    </div>\n  </div>\n} @empty {\n  <div class=\"__empty-state\">\n    <axp-state-message\n      icon=\"fa-light fa-folder-open\"\n      [title]=\"'@general:widgets.file-uploader.empty-state.title'\"\n      [description]=\"'@general:widgets.file-uploader.empty-state.description'\"\n    >\n    </axp-state-message>\n  </div>\n}\n", styles: [":host{display:flex;width:100%;flex-direction:column;gap:.125rem;padding-top:.5rem;padding-bottom:.5rem}:host .__item{display:flex;cursor:pointer;align-items:center;gap:.75rem;border-left-width:4px;border-color:transparent;padding:.5rem}:host .__item:hover{background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}:host .__item.--removed{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-danger-500),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-danger-50),var(--tw-bg-opacity, 1))}:host .__item.--attached{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-success-500),var(--tw-border-opacity, 1));animation:attached-flash 1s ease-out forwards}:host .__item .__icon{width:1.5rem;flex-shrink:0}:host .__item .__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start;font-size:.875rem;line-height:1.25rem;font-weight:500}:host .__item .__actions{margin-left:auto;display:flex}@keyframes attached-flash{0%{background-color:rgb(var(--ax-sys-color-success-50))}to{background-color:transparent}}.__empty-state{cursor:pointer;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s}.__empty-state:hover{opacity:.8}\n"], dependencies: [{ kind: "ngmodule", type: 
                 // Angular
                 CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: 
                 // ACoreX
@@ -10945,7 +10935,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         // Platform
                         AXPStateMessageComponent,
                     ], providers: [], template: "@for (file of displayFiles(); track $index) {\n  <div\n    class=\"__item\"\n    [ngClass]=\"{ '--removed': file.status === 'deleted', '--attached': file.status === 'attached' }\"\n  >\n    <div class=\"__icon\">\n      <i class=\"fa-fw {{ getFileInfo(file.name).icon }} fa-solid\"></i>\n    </div>\n    <div class=\"__name\">{{ file.name }}</div>\n    <div class=\"__actions\">\n      @if (file.status === 'deleted' && multiple()) {\n        <!-- Revert button - only show when multiple is true -->\n        <ax-button [look]=\"'blank'\" class=\"ax-sm\" color=\"warning\" (onClick)=\"handleFileRevert($event,file)\">\n          <ax-icon class=\"fa-light fa-rotate-left\"></ax-icon>\n        </ax-button>\n      } @else if (file.status !== 'deleted') {\n        <!-- All actions from hooks (including default actions) -->\n        @if (!readonly() || (readonly() && file.status === 'attached')) {\n          @for (action of actionsFor(file, $index); track action.id ?? action.textKey ?? action.text ?? $index) {\n            <ax-button\n              [look]=\"'blank'\"\n              class=\"ax-sm\"\n              [color]=\"getActionColor(action)\"\n              (onClick)=\"runAction(action)\"\n            >\n              @if (action.icon) {\n                <ax-icon class=\"{{ action.icon }}\"></ax-icon>\n              }\n            </ax-button>\n          }\n        }\n      }\n    </div>\n  </div>\n} @empty {\n  <div class=\"__empty-state\">\n    <axp-state-message\n      icon=\"fa-light fa-folder-open\"\n      [title]=\"'@general:widgets.file-uploader.empty-state.title'\"\n      [description]=\"'@general:widgets.file-uploader.empty-state.description'\"\n    >\n    </axp-state-message>\n  </div>\n}\n", styles: [":host{display:flex;width:100%;flex-direction:column;gap:.125rem;padding-top:.5rem;padding-bottom:.5rem}:host .__item{display:flex;cursor:pointer;align-items:center;gap:.75rem;border-left-width:4px;border-color:transparent;padding:.5rem}:host .__item:hover{background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}:host .__item.--removed{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-danger-500),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-danger-50),var(--tw-bg-opacity, 1))}:host .__item.--attached{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-success-500),var(--tw-border-opacity, 1));animation:attached-flash 1s ease-out forwards}:host .__item .__icon{width:1.5rem;flex-shrink:0}:host .__item .__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start;font-size:.875rem;line-height:1.25rem;font-weight:500}:host .__item .__actions{margin-left:auto;display:flex}@keyframes attached-flash{0%{background-color:rgb(var(--ax-sys-color-success-50))}to{background-color:transparent}}.__empty-state{cursor:pointer;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s}.__empty-state:hover{opacity:.8}\n"] }]
-        }], propDecorators: { onRemove: [{ type: i0.Output, args: ["onRemove"] }], onRevert: [{ type: i0.Output, args: ["onRevert"] }], onRename: [{ type: i0.Output, args: ["onRename"] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], fileEditable: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileEditable", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], files: [{ type: i0.Input, args: [{ isSignal: true, alias: "files", required: false }] }], plugins: [{ type: i0.Input, args: [{ isSignal: true, alias: "plugins", required: false }] }], excludePlugins: [{ type: i0.Input, args: [{ isSignal: true, alias: "excludePlugins", required: false }] }], host: [{ type: i0.Input, args: [{ isSignal: true, alias: "host", required: false }] }] } });
+        }], propDecorators: { onRemove: [{ type: i0.Output, args: ["onRemove"] }], onRevert: [{ type: i0.Output, args: ["onRevert"] }], onRename: [{ type: i0.Output, args: ["onRename"] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], fileEditable: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileEditable", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], files: [{ type: i0.Input, args: [{ isSignal: true, alias: "files", required: false }] }], plugins: [{ type: i0.Input, args: [{ isSignal: true, alias: "plugins", required: false }] }], excludePlugins: [{ type: i0.Input, args: [{ isSignal: true, alias: "excludePlugins", required: false }] }], capabilities: [{ type: i0.Input, args: [{ isSignal: true, alias: "capabilities", required: false }] }] } });
 
 class AXPFileUploaderWidgetService {
     constructor() {
@@ -11115,7 +11105,6 @@ class AXPFileUploaderWidgetEditComponent extends AXPValueWidgetComponent {
     }
     async configureFromHooks() {
         const payload = await this.hooks.runAsync(FileUploaderWebhookKeys.Configure, {
-            host: this,
             plugins: this.plugins() ?? [],
             excludePlugins: this.excludePlugins() ?? [],
             capabilities: this.capabilities,
@@ -11152,16 +11141,13 @@ class AXPFileUploaderWidgetEditComponent extends AXPValueWidgetComponent {
         }));
         // allow plugins to transform items IN-PLACE before adding (no reassignment)
         await this.hooks.runAsync(FileUploaderWebhookKeys.BeforeFilesAdded, {
-            host: this,
             plugins: this.plugins() ?? [],
             excludePlugins: this.excludePlugins() ?? [],
             capabilities: this.capabilities,
             newFiles: fileUploadRequests,
         });
         this.setValue([...(this.getValue() ?? []), ...fileUploadRequests]);
-        console.log(this.getValue());
         await this.hooks.runAsync(FileUploaderWebhookKeys.AfterFilesAdded, {
-            host: this,
             plugins: this.plugins() ?? [],
             excludePlugins: this.excludePlugins() ?? [],
             capabilities: this.capabilities,
@@ -11271,15 +11257,14 @@ class AXPFileUploaderWidgetEditComponent extends AXPValueWidgetComponent {
         [fileEditable]="fileEditable()"
         [plugins]="plugins()"
         [excludePlugins]="excludePlugins()"
-        [host]="this"
+        [capabilities]="capabilities"
         [multiple]="multiple()"
         (onRemove)="handleFileRemove($event)"
         (onRevert)="handleFileRevert($event)"
         (onRename)="handleFileRename($event)"
-        [readonly]="readonly()"
       ></axp-file-list>
     </div>
-  `, isInline: true, styles: [".__drag-over{background-color:rgba(var(--ax-sys-color-primary-50),.1);border:2px dashed rgb(var(--ax-sys-color-primary-500));border-radius:.375rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.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: "component", type: i1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "directive", type: AXUploaderZoneDirective, selector: "[axUploaderZone]", inputs: ["multiple", "accept", "overlayTemplate", "disableBrowse", "disableDragDrop"], outputs: ["fileChange", "onChanged", "dragEnter", "dragLeave", "dragOver", "onFileUploadComplete", "onFilesUploadComplete"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i5$2.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXPComponentSlotModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i5.AXTranslatorDirective, selector: "[translate]" }, { kind: "component", type: AXPFileListComponent, selector: "axp-file-list", inputs: ["readonly", "fileEditable", "multiple", "files", "plugins", "excludePlugins", "host"], outputs: ["onRemove", "onRevert", "onRename"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [".__drag-over{background-color:rgba(var(--ax-sys-color-primary-50),.1);border:2px dashed rgb(var(--ax-sys-color-primary-500));border-radius:.375rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.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: "component", type: i1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "directive", type: AXUploaderZoneDirective, selector: "[axUploaderZone]", inputs: ["multiple", "accept", "overlayTemplate", "disableBrowse", "disableDragDrop"], outputs: ["fileChange", "onChanged", "dragEnter", "dragLeave", "dragOver", "onFileUploadComplete", "onFilesUploadComplete"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i5$2.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXPComponentSlotModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i5.AXTranslatorDirective, selector: "[translate]" }, { kind: "component", type: AXPFileListComponent, selector: "axp-file-list", inputs: ["readonly", "fileEditable", "multiple", "files", "plugins", "excludePlugins", "capabilities"], outputs: ["onRemove", "onRevert", "onRename"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPFileUploaderWidgetEditComponent, decorators: [{
             type: Component,
@@ -11323,12 +11308,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         [fileEditable]="fileEditable()"
         [plugins]="plugins()"
         [excludePlugins]="excludePlugins()"
-        [host]="this"
+        [capabilities]="capabilities"
         [multiple]="multiple()"
         (onRemove)="handleFileRemove($event)"
         (onRevert)="handleFileRevert($event)"
         (onRename)="handleFileRename($event)"
-        [readonly]="readonly()"
       ></axp-file-list>
     </div>
   `, host: {
@@ -11369,7 +11353,7 @@ class AXPFileUploaderWidgetViewComponent extends AXPValueWidgetComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPFileUploaderWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: AXPFileUploaderWidgetViewComponent, isStandalone: true, selector: "axp-file-uploader-widget-view", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `
   <axp-file-list [files]="files()" [readonly]="true"></axp-file-list>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXUploaderModule }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPFileListComponent, selector: "axp-file-list", inputs: ["readonly", "fileEditable", "multiple", "files", "plugins", "excludePlugins", "host"], outputs: ["onRemove", "onRevert", "onRename"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXUploaderModule }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPFileListComponent, selector: "axp-file-list", inputs: ["readonly", "fileEditable", "multiple", "files", "plugins", "excludePlugins", "capabilities"], outputs: ["onRemove", "onRevert", "onRename"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPFileUploaderWidgetViewComponent, decorators: [{
             type: Component,
@@ -11460,10 +11444,11 @@ class AXPGalleryWidgetEditComponent extends AXPValueWidgetComponent {
     constructor() {
         super(...arguments);
         this.thumbnail = computed(() => this.options()['thumbnail'], ...(ngDevMode ? [{ debugName: "thumbnail" }] : []));
-        this.height = computed(() => this.options()['height'], ...(ngDevMode ? [{ debugName: "height" }] : []));
+        this.height = computed(() => this.options()['height'] ?? '30rem', ...(ngDevMode ? [{ debugName: "height" }] : []));
         this.header = computed(() => this.options()['header'], ...(ngDevMode ? [{ debugName: "header" }] : []));
         this.fileInfo = computed(() => this.options()['fileInfo'], ...(ngDevMode ? [{ debugName: "fileInfo" }] : []));
-        this.fullScreenButton = computed(() => this.options()['fullScreenButton'], ...(ngDevMode ? [{ debugName: "fullScreenButton" }] : []));
+        this.fullScreenButton = computed(() => this.options()['fullScreenButton'] ?? true, ...(ngDevMode ? [{ debugName: "fullScreenButton" }] : []));
+        this.downloadButton = computed(() => this.options()['downloadButton'] ?? true, ...(ngDevMode ? [{ debugName: "downloadButton" }] : []));
         this.allowUploadTypes = computed(() => this.options()['allowUploadTypes'] ?? [`image/*`], ...(ngDevMode ? [{ debugName: "allowUploadTypes" }] : []));
         this.allowUpload = computed(() => this.options()['allowUpload'] ?? true, ...(ngDevMode ? [{ debugName: "allowUpload" }] : []));
         this.plugins = computed(() => this.options()['plugins'] ?? [], ...(ngDevMode ? [{ debugName: "plugins" }] : []));
@@ -11472,6 +11457,8 @@ class AXPGalleryWidgetEditComponent extends AXPValueWidgetComponent {
         this.hooks = inject(AXPHookService);
         this.fileActionsService = inject(AXPFileActionsService);
         this.fileStorageService = inject(AXPFileStorageService);
+        this.loadingDialog = inject(AXLoadingDialogService);
+        this.translationService = inject(AXTranslationService);
         this.gallery = viewChild('c', ...(ngDevMode ? [{ debugName: "gallery" }] : []));
         /**
          * Convert AXPFileListItem[] to AXMediaViewerData[] for display in media viewer.
@@ -11545,6 +11532,41 @@ class AXPGalleryWidgetEditComponent extends AXPValueWidgetComponent {
         super.ngOnInit();
         this.loadActions();
     }
+    /** Downloads the file at the current media viewer index. */
+    async download() {
+        const galleryRef = this.gallery();
+        const files = this.getValue() ?? [];
+        if (!galleryRef || files.length === 0) {
+            return;
+        }
+        const index = galleryRef.getActiveIndex();
+        const file = files[index];
+        if (!file) {
+            return;
+        }
+        const loadingDialogRef = this.loadingDialog.show({
+            title: await this.translationService.translateAsync('@general:actions.download.processing'),
+            mode: 'indeterminate',
+            progressColor: 'primary',
+            status: await this.translationService.translateAsync('@general:actions.download.processing'),
+        });
+        try {
+            const url = await this.resolveFileUrl(file);
+            if (!url) {
+                return;
+            }
+            const link = document.createElement('a');
+            link.href = url;
+            link.download = file.name ?? 'download';
+            link.target = '_blank';
+            link.rel = 'noopener noreferrer';
+            link.click();
+            link.remove();
+        }
+        finally {
+            loadingDialogRef.close();
+        }
+    }
     async loadActions() {
         const payload = {
             plugins: this.plugins() ?? [],
@@ -11673,29 +11695,27 @@ class AXPGalleryWidgetEditComponent extends AXPValueWidgetComponent {
         @if (allowUpload()) {
           <ax-prefix>
             <div *translate="let t">
-              <ax-menu
-                [openOn]="'click'"
-                [hasArrow]="true"
-                style="--ax-comp-menu-action-list-horizontal-min-width:auto"
-              >
-                <ax-menu-item>
-                  <ax-prefix>
-                    <ax-icon icon="fa-light fa-plus"></ax-icon>
-                  </ax-prefix>
-                  <ax-text>{{ (t('@general:actions.add-item.title') | async)! }}</ax-text>
-
-                  @for (action of fileActions(); track action.plugin) {
-                    <ax-menu-item (onClick)="action.run(capabilities)">
-                      @if (action.icon) {
-                        <ax-prefix>
-                          <ax-icon [icon]="action.icon"></ax-icon>
-                        </ax-prefix>
-                      }
-                      <ax-text>{{ action.text ?? (action.textKey ? (t(action.textKey) | async)! : '') }}</ax-text>
-                    </ax-menu-item>
-                  }
-                </ax-menu-item>
-              </ax-menu>
+              <ax-button class="ax-sm" [text]="(t('@general:actions.add-item.title') | async)!">
+                <ax-prefix>
+                  <ax-icon icon="fa-light fa-plus"></ax-icon>
+                </ax-prefix>
+                <ax-dropdown-panel>
+                  <ax-button-item-list>
+                    @for (action of fileActions(); track action.plugin) {
+                      <ax-button-item
+                        (onClick)="action.run(capabilities)"
+                        [text]="action.text ?? (action.textKey ? (t(action.textKey) | async)! : '')"
+                      >
+                        @if (action.icon) {
+                          <ax-prefix>
+                            <ax-icon [icon]="action.icon"></ax-icon>
+                          </ax-prefix>
+                        }
+                      </ax-button-item>
+                    }
+                  </ax-button-item-list>
+                </ax-dropdown-panel>
+              </ax-button>
             </div>
           </ax-prefix>
         }
@@ -11705,6 +11725,11 @@ class AXPGalleryWidgetEditComponent extends AXPValueWidgetComponent {
         }
 
         <ax-suffix>
+          @if (downloadButton()) {
+            <ax-button class="ax-sm" look="blank" (click)="download()" [disabled]="mediaViewerData().length === 0">
+              <ax-icon icon="fa-light fa-download"></ax-icon>
+            </ax-button>
+          }
           @if (fullScreenButton()) {
             <ax-fullscreen-button> </ax-fullscreen-button>
           }
@@ -11723,7 +11748,7 @@ class AXPGalleryWidgetEditComponent extends AXPValueWidgetComponent {
         <ax-icon class="rtl:ax-rotate-180 ax-icon ax-icon-chevron-left"> </ax-icon>
       </ax-button>
     </ax-suffix>
-  </ax-media-viewer-container>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXMediaViewerModule }, { kind: "component", type: i1$d.AXMediaViewerContainerComponent, selector: "ax-media-viewer-container", inputs: ["dataArray", "thumbnail", "pagination"] }, { kind: "component", type: i1$d.AXFileInfoComponent, selector: "ax-file-info" }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: i2.AXDecoratorFullScreenButtonComponent, selector: "ax-fullscreen-button", inputs: ["element", "isActive"], outputs: ["elementChange", "isActiveChange"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.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: AXMenuModule }, { kind: "component", type: i4$1.AXMenuItemComponent, selector: "ax-menu-item", inputs: ["name", "data", "disabled", "color"], outputs: ["onClick"] }, { kind: "component", type: i4$1.AXMenuComponent, selector: "ax-menu", inputs: ["orientation", "openOn", "closeOn", "items", "hasArrow"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i5.AXTranslatorDirective, selector: "[translate]" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  </ax-media-viewer-container>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXMediaViewerModule }, { kind: "component", type: i1$d.AXMediaViewerContainerComponent, selector: "ax-media-viewer-container", inputs: ["dataArray", "thumbnail", "pagination"] }, { kind: "component", type: i1$d.AXFileInfoComponent, selector: "ax-file-info" }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: i2.AXDecoratorFullScreenButtonComponent, selector: "ax-fullscreen-button", inputs: ["element", "isActive"], outputs: ["elementChange", "isActiveChange"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.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: "component", type: i1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i5$2.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i5.AXTranslatorDirective, selector: "[translate]" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPGalleryWidgetEditComponent, decorators: [{
             type: Component,
@@ -11735,29 +11760,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         @if (allowUpload()) {
           <ax-prefix>
             <div *translate="let t">
-              <ax-menu
-                [openOn]="'click'"
-                [hasArrow]="true"
-                style="--ax-comp-menu-action-list-horizontal-min-width:auto"
-              >
-                <ax-menu-item>
-                  <ax-prefix>
-                    <ax-icon icon="fa-light fa-plus"></ax-icon>
-                  </ax-prefix>
-                  <ax-text>{{ (t('@general:actions.add-item.title') | async)! }}</ax-text>
-
-                  @for (action of fileActions(); track action.plugin) {
-                    <ax-menu-item (onClick)="action.run(capabilities)">
-                      @if (action.icon) {
-                        <ax-prefix>
-                          <ax-icon [icon]="action.icon"></ax-icon>
-                        </ax-prefix>
-                      }
-                      <ax-text>{{ action.text ?? (action.textKey ? (t(action.textKey) | async)! : '') }}</ax-text>
-                    </ax-menu-item>
-                  }
-                </ax-menu-item>
-              </ax-menu>
+              <ax-button class="ax-sm" [text]="(t('@general:actions.add-item.title') | async)!">
+                <ax-prefix>
+                  <ax-icon icon="fa-light fa-plus"></ax-icon>
+                </ax-prefix>
+                <ax-dropdown-panel>
+                  <ax-button-item-list>
+                    @for (action of fileActions(); track action.plugin) {
+                      <ax-button-item
+                        (onClick)="action.run(capabilities)"
+                        [text]="action.text ?? (action.textKey ? (t(action.textKey) | async)! : '')"
+                      >
+                        @if (action.icon) {
+                          <ax-prefix>
+                            <ax-icon [icon]="action.icon"></ax-icon>
+                          </ax-prefix>
+                        }
+                      </ax-button-item>
+                    }
+                  </ax-button-item-list>
+                </ax-dropdown-panel>
+              </ax-button>
             </div>
           </ax-prefix>
         }
@@ -11767,6 +11790,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         }
 
         <ax-suffix>
+          @if (downloadButton()) {
+            <ax-button class="ax-sm" look="blank" (click)="download()" [disabled]="mediaViewerData().length === 0">
+              <ax-icon icon="fa-light fa-download"></ax-icon>
+            </ax-button>
+          }
           @if (fullScreenButton()) {
             <ax-fullscreen-button> </ax-fullscreen-button>
           }
@@ -11791,7 +11819,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         '[style.height]': 'height()',
                     },
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [AXMediaViewerModule, AXDecoratorModule, AXButtonModule, AXMenuModule, AXTranslationModule, AsyncPipe],
+                    imports: [AXMediaViewerModule, AXDecoratorModule, AXButtonModule, AXDropdownModule, AXTranslationModule, AsyncPipe],
                 }]
         }], propDecorators: { gallery: [{ type: i0.ViewChild, args: ['c', { isSignal: true }] }] } });
 
@@ -11803,12 +11831,17 @@ var galleryWidgetEdit_component = /*#__PURE__*/Object.freeze({
 class AXPGalleryWidgetViewComponent extends AXPValueWidgetComponent {
     constructor() {
         super(...arguments);
+        this.loadingDialog = inject(AXLoadingDialogService);
+        this.translationService = inject(AXTranslationService);
         this.internalValue = computed(() => {
             const parsedValue = this.getValue() ? JSON.parse(this.getValue()) : [];
             return Array.isArray(parsedValue) ? parsedValue.map((c) => c) : [parsedValue];
         }, ...(ngDevMode ? [{ debugName: "internalValue" }] : []));
         this.multiple = computed(() => this.options()['multiple'], ...(ngDevMode ? [{ debugName: "multiple" }] : []));
-        this.height = computed(() => this.options()['height'], ...(ngDevMode ? [{ debugName: "height" }] : []));
+        this.height = computed(() => this.options()['height'] ?? 30, ...(ngDevMode ? [{ debugName: "height" }] : []));
+        this.header = computed(() => this.options()['header'] ?? true, ...(ngDevMode ? [{ debugName: "header" }] : []));
+        this.fullScreenButton = computed(() => this.options()['fullScreenButton'] ?? true, ...(ngDevMode ? [{ debugName: "fullScreenButton" }] : []));
+        this.downloadButton = computed(() => this.options()['downloadButton'] ?? true, ...(ngDevMode ? [{ debugName: "downloadButton" }] : []));
         this.thumbnails = computed(() => this.internalValue().filter((i) => i.id !== this.activeMedia()?.id), ...(ngDevMode ? [{ debugName: "thumbnails" }] : []));
         this.activeMedia = signal(undefined, ...(ngDevMode ? [{ debugName: "activeMedia" }] : []));
     }
@@ -11818,6 +11851,30 @@ class AXPGalleryWidgetViewComponent extends AXPValueWidgetComponent {
     changeMediaSelected(media) {
         this.activeMedia.set(media);
     }
+    /** Downloads the currently active media file. */
+    async download() {
+        const media = this.activeMedia();
+        if (!media?.url) {
+            return;
+        }
+        const loadingDialogRef = this.loadingDialog.show({
+            title: await this.translationService.translateAsync('@general:actions.download.processing'),
+            mode: 'indeterminate',
+            progressColor: 'primary',
+            status: await this.translationService.translateAsync('@general:actions.download.processing'),
+        });
+        try {
+            const link = document.createElement('a');
+            link.href = media.url;
+            link.download = media.name ?? 'download';
+            link.target = '_blank';
+            link.rel = 'noopener noreferrer';
+            link.click();
+        }
+        finally {
+            loadingDialogRef.close();
+        }
+    }
     getMediaInfo(mediaName) {
         const extension = mediaName.split('.').pop()?.toLowerCase();
         switch (extension) {
@@ -11844,6 +11901,18 @@ class AXPGalleryWidgetViewComponent extends AXPValueWidgetComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AXPGalleryWidgetViewComponent, isStandalone: true, selector: "axp-gallery-widget-view", host: { properties: { "style.height": "height()" }, classAttribute: "ax-block" }, usesInheritance: true, ngImport: i0, template: `
     <div class="ax-grid ax-grid-cols-12 ax-gap-2">
       @if (internalValue().length) {
+        @if (header()) {
+          <div class="ax-col-start-1 ax-col-end-13 ax-flex ax-justify-end ax-gap-2 ax-mb-2">
+            @if (downloadButton()) {
+              <ax-button class="ax-sm" look="blank" (click)="download()">
+                <ax-icon icon="fa-light fa-download"></ax-icon>
+              </ax-button>
+            }
+            @if (fullScreenButton()) {
+              <ax-fullscreen-button></ax-fullscreen-button>
+            }
+          </div>
+        }
         <div class="ax-flex ax-items-center ax-justify-between ax-rounded-lg  ax-col-start-1 ax-col-end-13">
           <div class="ax-flex ax-items-center md:ax-justify-start ax-justify-center ax-w-full ax-gap-3">
             <div class="ax-flex ax-flex-col ax-items-center ax-gap-4">
@@ -11905,7 +11974,7 @@ class AXPGalleryWidgetViewComponent extends AXPValueWidgetComponent {
         </axp-state-message>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i1$e.AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i2$1.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i1$e.AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: i2.AXDecoratorFullScreenButtonComponent, selector: "ax-fullscreen-button", inputs: ["element", "isActive"], outputs: ["elementChange", "isActiveChange"] }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i2$1.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "variant"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.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: AXMediaViewerModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPGalleryWidgetViewComponent, decorators: [{
             type: Component,
@@ -11914,6 +11983,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                     template: `
     <div class="ax-grid ax-grid-cols-12 ax-gap-2">
       @if (internalValue().length) {
+        @if (header()) {
+          <div class="ax-col-start-1 ax-col-end-13 ax-flex ax-justify-end ax-gap-2 ax-mb-2">
+            @if (downloadButton()) {
+              <ax-button class="ax-sm" look="blank" (click)="download()">
+                <ax-icon icon="fa-light fa-download"></ax-icon>
+              </ax-button>
+            }
+            @if (fullScreenButton()) {
+              <ax-fullscreen-button></ax-fullscreen-button>
+            }
+          </div>
+        }
         <div class="ax-flex ax-items-center ax-justify-between ax-rounded-lg  ax-col-start-1 ax-col-end-13">
           <div class="ax-flex ax-items-center md:ax-justify-start ax-justify-center ax-w-full ax-gap-3">
             <div class="ax-flex ax-flex-col ax-items-center ax-gap-4">
@@ -11981,7 +12062,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         '[style.height]': 'height()',
                     },
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [AXImageModule, AXDecoratorModule, AXLoadingModule, AXPStateMessageComponent],
+                    imports: [
+                        AXImageModule,
+                        AXDecoratorModule,
+                        AXLoadingModule,
+                        AXPStateMessageComponent,
+                        AXButtonModule,
+                        AXMediaViewerModule,
+                    ],
                 }]
         }] });