@acorex/platform 20.0.2 → 20.0.4

package/fesm2022/acorex-platform-widgets.mjs

@@ -7079,9 +7079,14 @@ class AXPFileListComponent {
         this.isLoading = signal(true);
         this.fileTypes = signal([]);
         this.onRemove = output();
+        this.onRevert = output();
         this.readOnly = input(false);
         this.files = input([]);
-        this.displayFiles = computed(() => this.files().filter(file => file.status !== 'deleted'));
+        /**
+         * All files should be displayed, even those with `deleted` status.
+         * The template will handle the visual differences based on the status.
+         */
+        this.displayFiles = computed(() => this.files());
     }
     async ngOnInit() {
         this.fileTypes.set(await this.fileTypeService.items());
@@ -7172,12 +7177,18 @@ class AXPFileListComponent {
     async handleFileRemove(file) {
         this.onRemove.emit(file);
     }
+    /**
+     * Handle revert action – emit the file so parent components can update the status.
+     */
+    handleFileRevert(file) {
+        this.onRevert.emit(file);
+    }
     ngOnDestroy() {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPFileListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: AXPFileListComponent, isStandalone: true, selector: "axp-file-list", inputs: { readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onRemove: "onRemove" }, providers: [], ngImport: i0, template: "@for (file of displayFiles(); track $index) {\n  <div class=\"__item\">\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      <ax-button [look]=\"'blank'\" class=\"ax-sm\" color=\"primary\" (onClick)=\"handleFileDownload(file)\">\n        <ax-icon class=\"fa-light fa-download\"></ax-icon>\n      </ax-button>\n      @if (!readOnly()) {\n        <ax-button [look]=\"'blank'\" class=\"ax-sm\" color=\"danger\" (onClick)=\"handleFileRemove(file)\">\n          <ax-icon class=\"fa-light fa-trash-can\"></ax-icon>\n        </ax-button>\n      }\n    </div>\n  </div>\n} @empty {\n  <div class=\"ax-text-center ax-text-muted ax-text-sm ax-p-4\">\n    {{ '@document-management:no-files' | translate | async }}\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-radius:.375rem;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 .__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}\n"], dependencies: [{ kind: "ngmodule", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: AXPFileListComponent, isStandalone: true, selector: "axp-file-list", inputs: { readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onRemove: "onRemove", onRevert: "onRevert" }, providers: [], ngImport: i0, template: "@for (file of displayFiles(); track $index) {\n  <div class=\"__item\" [ngClass]=\"{'--removed': file.status === 'deleted', '--attached': file.status === 'attached'}\">\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') {\n        <!-- Revert button -->\n        <ax-button [look]=\"'blank'\" class=\"ax-sm\" color=\"warning\" (onClick)=\"handleFileRevert(file)\">\n          <ax-icon class=\"fa-light fa-rotate-left\"></ax-icon>\n        </ax-button>\n      } @else {\n        <!-- Regular actions -->\n        <ax-button [look]=\"'blank'\" class=\"ax-sm\" color=\"primary\" (onClick)=\"handleFileDownload(file)\">\n          <ax-icon class=\"fa-light fa-download\"></ax-icon>\n        </ax-button>\n        @if (!readOnly()) {\n          <ax-button [look]=\"'blank'\" class=\"ax-sm\" color=\"danger\" (onClick)=\"handleFileRemove(file)\">\n            <ax-icon class=\"fa-light fa-trash-can\"></ax-icon>\n          </ax-button>\n        }\n      }\n    </div>\n  </div>\n} @empty {\n  <div class=\"ax-text-center ax-text-muted ax-text-sm ax-p-4\">\n    {{ '@document-management:no-files' | translate | async }}\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}}\n"], dependencies: [{ kind: "ngmodule", type: 
                 // Angular
-                CommonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: 
+                CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: 
                 // ACoreX
                 AXFormModule }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.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: AXLabelModule }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }] }); }
 }
@@ -7195,7 +7206,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
                         AXDecoratorModule,
                         AXTranslationModule
                         // Platform
-                    ], providers: [], template: "@for (file of displayFiles(); track $index) {\n  <div class=\"__item\">\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      <ax-button [look]=\"'blank'\" class=\"ax-sm\" color=\"primary\" (onClick)=\"handleFileDownload(file)\">\n        <ax-icon class=\"fa-light fa-download\"></ax-icon>\n      </ax-button>\n      @if (!readOnly()) {\n        <ax-button [look]=\"'blank'\" class=\"ax-sm\" color=\"danger\" (onClick)=\"handleFileRemove(file)\">\n          <ax-icon class=\"fa-light fa-trash-can\"></ax-icon>\n        </ax-button>\n      }\n    </div>\n  </div>\n} @empty {\n  <div class=\"ax-text-center ax-text-muted ax-text-sm ax-p-4\">\n    {{ '@document-management:no-files' | translate | async }}\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-radius:.375rem;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 .__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}\n"] }]
+                    ], providers: [], template: "@for (file of displayFiles(); track $index) {\n  <div class=\"__item\" [ngClass]=\"{'--removed': file.status === 'deleted', '--attached': file.status === 'attached'}\">\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') {\n        <!-- Revert button -->\n        <ax-button [look]=\"'blank'\" class=\"ax-sm\" color=\"warning\" (onClick)=\"handleFileRevert(file)\">\n          <ax-icon class=\"fa-light fa-rotate-left\"></ax-icon>\n        </ax-button>\n      } @else {\n        <!-- Regular actions -->\n        <ax-button [look]=\"'blank'\" class=\"ax-sm\" color=\"primary\" (onClick)=\"handleFileDownload(file)\">\n          <ax-icon class=\"fa-light fa-download\"></ax-icon>\n        </ax-button>\n        @if (!readOnly()) {\n          <ax-button [look]=\"'blank'\" class=\"ax-sm\" color=\"danger\" (onClick)=\"handleFileRemove(file)\">\n            <ax-icon class=\"fa-light fa-trash-can\"></ax-icon>\n          </ax-button>\n        }\n      }\n    </div>\n  </div>\n} @empty {\n  <div class=\"ax-text-center ax-text-muted ax-text-sm ax-p-4\">\n    {{ '@document-management:no-files' | translate | async }}\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}}\n"] }]
         }] });
 
 class AXPFileUploaderWidgetEditComponent extends AXPValueWidgetComponent {
@@ -7248,6 +7259,13 @@ class AXPFileUploaderWidgetEditComponent extends AXPValueWidgetComponent {
             this.setValue(this.getValue()?.map(f => f.id === file.id ? file : f) ?? []);
         }
     }
+    /**
+     * Revert a deleted file back to attached status.
+     */
+    handleFileRevert(file) {
+        file.status = 'uploaded';
+        this.setValue(this.getValue()?.map(f => f.id === file.id ? file : f) ?? []);
+    }
     clear() {
         for (const file of this.files()) {
             this.removeFile(file);
@@ -7287,9 +7305,9 @@ class AXPFileUploaderWidgetEditComponent extends AXPValueWidgetComponent {
     </ax-button>
   </div>
   <div class="ax-p-2">
-    <axp-file-list [files]="files()" (onRemove)="handleFileRemove($event)"   ></axp-file-list>
+    <axp-file-list [files]="files()" (onRemove)="handleFileRemove($event)" (onRevert)="handleFileRevert($event)"></axp-file-list>
   </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.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: i2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$2.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: i6$1.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXPComponentSlotModule }, { kind: "directive", type: i5$2.AXPComponentSlotDirective, selector: "axp-component-slot", inputs: ["name", "host", "context"], exportAs: ["slot"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i6.AXTranslatorDirective, selector: "[translate]" }, { kind: "component", type: AXPFileListComponent, selector: "axp-file-list", inputs: ["readOnly", "files"], outputs: ["onRemove"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.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: i2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$2.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: i6$1.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXPComponentSlotModule }, { kind: "directive", type: i5$2.AXPComponentSlotDirective, selector: "axp-component-slot", inputs: ["name", "host", "context"], exportAs: ["slot"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i6.AXTranslatorDirective, selector: "[translate]" }, { kind: "component", type: AXPFileListComponent, selector: "axp-file-list", inputs: ["readOnly", "files"], outputs: ["onRemove", "onRevert"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPFileUploaderWidgetEditComponent, decorators: [{
             type: Component,
@@ -7319,7 +7337,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
     </ax-button>
   </div>
   <div class="ax-p-2">
-    <axp-file-list [files]="files()" (onRemove)="handleFileRemove($event)"   ></axp-file-list>
+    <axp-file-list [files]="files()" (onRemove)="handleFileRemove($event)" (onRevert)="handleFileRevert($event)"></axp-file-list>
   </div>
   `,
                     host: {
@@ -7382,7 +7400,7 @@ class AXPFileUploaderWidgetViewComponent extends AXPValueWidgetComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPFileUploaderWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", 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", "files"], outputs: ["onRemove"] }], 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", "files"], outputs: ["onRemove", "onRevert"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPFileUploaderWidgetViewComponent, decorators: [{
             type: Component,