@acorex/platform 20.7.10 → 20.7.12

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';
@@ -11460,10 +11459,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 +11472,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 +11547,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 +11710,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 +11740,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 +11763,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 +11775,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 +11805,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 +11834,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 +11846,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 +11866,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 +11916,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 +11989,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 +11998,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 +12077,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,
+                    ],
                 }]
         }] });