@acorex/platform 20.7.4 → 20.7.6

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

@@ -86,6 +86,8 @@ import { AXUploaderZoneDirective } from '@acorex/cdk/uploader';
 import { AXUploaderModule } from '@acorex/components/uploader';
 import * as i1$d from '@acorex/components/media-viewer';
 import { AXMediaViewerModule } from '@acorex/components/media-viewer';
+import * as i4$2 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';
@@ -11435,7 +11437,12 @@ class AXPGalleryWidgetEditComponent extends AXPValueWidgetComponent {
             },
             addFiles: (files) => {
                 const currentFiles = this.getValue() ?? [];
-                this.setValue([...currentFiles, ...files]);
+                const newValue = [...currentFiles, ...files];
+                this.setValue(newValue);
+                // Navigate to the last item after view updates
+                setTimeout(() => {
+                    this.gallery()?.goToIndex(newValue.length - 1);
+                }, 1000);
             },
             updateFile: (predicate, updater) => {
                 const currentFiles = this.getValue() ?? [];
@@ -11484,6 +11491,25 @@ class AXPGalleryWidgetEditComponent extends AXPValueWidgetComponent {
         const actions = await this.fileActionsService.getActions(payload);
         this.innerActions.set(actions);
     }
+    /**
+     * Format file size with appropriate unit (B, KB, MB, GB, etc.)
+     * Divides by 1000 until the value is less than 1000
+     */
+    formatFileSize(size) {
+        if (!size) {
+            return '';
+        }
+        const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+        let value = size;
+        let unitIndex = 0;
+        while (value >= 1000 && unitIndex < units.length - 1) {
+            value /= 1000;
+            unitIndex++;
+        }
+        // Round to 2 decimal places, but remove trailing zeros
+        const roundedValue = Math.round(value * 100) / 100;
+        return `${roundedValue} ${units[unitIndex]}`;
+    }
     /**
      * Convert AXPFileListItem to AXMediaViewerData for display in media viewer
      */
@@ -11498,7 +11524,7 @@ class AXPGalleryWidgetEditComponent extends AXPValueWidgetComponent {
             name: file.name,
             type: 'image',
             url: url,
-            size: file.size?.toString() ?? '',
+            size: this.formatFileSize(file.size),
         };
     }
     /**
@@ -11544,38 +11570,41 @@ class AXPGalleryWidgetEditComponent extends AXPValueWidgetComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AXPGalleryWidgetEditComponent, isStandalone: true, selector: "axp-gallery-widget-edit", host: { properties: { "style.height": "height()" }, classAttribute: "ax-block" }, viewQueries: [{ propertyName: "gallery", first: true, predicate: ["c"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: ` <ax-media-viewer-container [thumbnail]="thumbnail()" #c [dataArray]="mediaViewerData()">
     @if (header()) {
       <ax-header>
-        @if (fileInfo()) {
-          <ax-prefix> <ax-file-info></ax-file-info></ax-prefix>
-        }
-        <ax-suffix>
-          @if (allowUpload()) {
+        @if (allowUpload()) {
+          <ax-prefix>
             <div *translate="let t">
-              <ax-button class="ax-sm" [text]="t('@general:actions.add-item.title') | async" [color]="'primary'">
-                <ax-prefix>
-                  <ax-icon icon="fa-light  fa-plus"></ax-icon>
-                </ax-prefix>
-                <ax-dropdown-panel>
-                  <ax-button-item-list>
-                  
-                    <ng-container>
-                      @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-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>
                       }
-                    </ng-container>
-                  </ax-button-item-list>
-                </ax-dropdown-panel>
-              </ax-button>
+                      <ax-text>{{ action.text ?? (action.textKey ? (t(action.textKey) | async)! : '') }}</ax-text>
+                    </ax-menu-item>
+                  }
+                </ax-menu-item>
+              </ax-menu>
             </div>
-          }
+          </ax-prefix>
+        }
+
+        @if (fileInfo()) {
+          <ax-file-info></ax-file-info>
+        }
+
+        <ax-suffix>
           @if (fullScreenButton()) {
             <ax-fullscreen-button> </ax-fullscreen-button>
           }
@@ -11584,17 +11613,17 @@ class AXPGalleryWidgetEditComponent extends AXPValueWidgetComponent {
     }
 
     <ax-prefix>
-      <ax-button class="ax-sm" (click)="c.next()">
+      <ax-button class="ax-sm" (click)="c.next()" [disabled]="c.getActiveIndex() === this.mediaViewerData().length - 1">
         <ax-icon class="rtl:ax-rotate-180 ax-icon ax-icon-chevron-right"> </ax-icon>
       </ax-button>
     </ax-prefix>
 
     <ax-suffix>
-      <ax-button class="ax-sm" (click)="c.prev()">
+      <ax-button class="ax-sm" (click)="c.prev()" [disabled]="c.getActiveIndex() === 0">
         <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: "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$1.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 }); }
+  </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$2.AXMenuItemComponent, selector: "ax-menu-item", inputs: ["name", "data", "disabled", "color"], outputs: ["onClick"] }, { kind: "component", type: i4$2.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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPGalleryWidgetEditComponent, decorators: [{
             type: Component,
@@ -11603,38 +11632,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                     template: ` <ax-media-viewer-container [thumbnail]="thumbnail()" #c [dataArray]="mediaViewerData()">
     @if (header()) {
       <ax-header>
-        @if (fileInfo()) {
-          <ax-prefix> <ax-file-info></ax-file-info></ax-prefix>
-        }
-        <ax-suffix>
-          @if (allowUpload()) {
+        @if (allowUpload()) {
+          <ax-prefix>
             <div *translate="let t">
-              <ax-button class="ax-sm" [text]="t('@general:actions.add-item.title') | async" [color]="'primary'">
-                <ax-prefix>
-                  <ax-icon icon="fa-light  fa-plus"></ax-icon>
-                </ax-prefix>
-                <ax-dropdown-panel>
-                  <ax-button-item-list>
-                  
-                    <ng-container>
-                      @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-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>
                       }
-                    </ng-container>
-                  </ax-button-item-list>
-                </ax-dropdown-panel>
-              </ax-button>
+                      <ax-text>{{ action.text ?? (action.textKey ? (t(action.textKey) | async)! : '') }}</ax-text>
+                    </ax-menu-item>
+                  }
+                </ax-menu-item>
+              </ax-menu>
             </div>
-          }
+          </ax-prefix>
+        }
+
+        @if (fileInfo()) {
+          <ax-file-info></ax-file-info>
+        }
+
+        <ax-suffix>
           @if (fullScreenButton()) {
             <ax-fullscreen-button> </ax-fullscreen-button>
           }
@@ -11643,13 +11675,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
     }
 
     <ax-prefix>
-      <ax-button class="ax-sm" (click)="c.next()">
+      <ax-button class="ax-sm" (click)="c.next()" [disabled]="c.getActiveIndex() === this.mediaViewerData().length - 1">
         <ax-icon class="rtl:ax-rotate-180 ax-icon ax-icon-chevron-right"> </ax-icon>
       </ax-button>
     </ax-prefix>
 
     <ax-suffix>
-      <ax-button class="ax-sm" (click)="c.prev()">
+      <ax-button class="ax-sm" (click)="c.prev()" [disabled]="c.getActiveIndex() === 0">
         <ax-icon class="rtl:ax-rotate-180 ax-icon ax-icon-chevron-left"> </ax-icon>
       </ax-button>
     </ax-suffix>
@@ -11659,14 +11691,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         '[style.height]': 'height()',
                     },
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [
-                        AXMediaViewerModule,
-                        AXDecoratorModule,
-                        AXButtonModule,
-                        AXDropdownModule,
-                        AXTranslationModule,
-                        AsyncPipe,
-                    ],
+                    imports: [AXMediaViewerModule, AXDecoratorModule, AXButtonModule, AXMenuModule, AXTranslationModule, AsyncPipe],
                 }]
         }], propDecorators: { gallery: [{ type: i0.ViewChild, args: ['c', { isSignal: true }] }] } });