@acorex/platform 20.7.13 → 20.7.15

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

@@ -21,7 +21,7 @@ import * as i1$6 from '@acorex/components/text-box';
 import { AXTextBoxModule } from '@acorex/components/text-box';
 import * as i5 from '@acorex/core/translation';
 import { AXTranslationModule, AXTranslationService } from '@acorex/core/translation';
-import { AXPDeviceService, AXPColorPaletteService, extractValue, setSmart, AXPTagService, AXPExpressionEvaluatorService, AXPHookService, AXPDataGenerator, AXPDataSourceDefinitionProviderService, applyQueryArray, objectKeyValueTransforms } from '@acorex/platform/core';
+import { AXPDeviceService, AXPColorPaletteService, extractValue, setSmart, AXPTagService, AXPExpressionEvaluatorService, AXPHookService, AXPDataGenerator, AXPComponentSlotModule, AXPDataSourceDefinitionProviderService, applyQueryArray, objectKeyValueTransforms } from '@acorex/platform/core';
 import * as i1$3 from '@angular/common';
 import { CommonModule, AsyncPipe } from '@angular/common';
 import * as i0 from '@angular/core';
@@ -36,7 +36,7 @@ import { AXPClipBoardService, AXPSettingsService, AXPRegionalSetting, AXPFilterO
 import * as i2$2 from '@acorex/components/color-box';
 import { AXColorBoxModule } from '@acorex/components/color-box';
 import { isNil, isNull, isEmpty, isNumber, castArray, set, get, isEqual, cloneDeep } from 'lodash-es';
-import { AXPColorPalettePickerComponent, AXPDragDropListComponent, AXPColumnItemListComponent, AXPImageEditorService, AXPStateMessageComponent, AXPComponentSlotModule, AXPStopwatchComponent, AXPWidgetFieldConfiguratorComponent, AXPTableColumnsEditorService, AXPTableDataEditorService, AXPQueryFiltersComponent, AXPQuerySortsComponent, AXPQueryColumnsComponent } from '@acorex/platform/layout/components';
+import { AXPColorPalettePickerComponent, AXPDragDropListComponent, AXPColumnItemListComponent, AXPImageEditorService, AXPStateMessageComponent, AXPStopwatchComponent, AXPWidgetFieldConfiguratorComponent, AXPTableColumnsEditorService, AXPTableDataEditorService, AXPQueryFiltersComponent, AXPQuerySortsComponent, AXPQueryColumnsComponent } from '@acorex/platform/layout/components';
 import * as i3$3 from '@acorex/components/select-box';
 import { AXSelectBoxModule, AXSelectBoxComponent } from '@acorex/components/select-box';
 import { AXPLayoutBuilderService } from '@acorex/platform/layout/builder';
@@ -10288,8 +10288,7 @@ class AXPEditFileUploaderCommand {
     //#region ----   Command Execution   ----
     async execute(input) {
         try {
-            // Show dialog to edit file details
-            const updatedFile = await this.showEditDialog(input.file, input.plugins ?? [], input.excludePlugins ?? []);
+            const updatedFile = await this.showEditDialog(input.file, input.plugins ?? [], input.excludePlugins ?? [], input.enableTitleDescription ?? false, input.isNewFile ?? false);
             return {
                 success: true,
                 data: updatedFile
@@ -10306,10 +10305,13 @@ class AXPEditFileUploaderCommand {
     }
     //#endregion
     //#region ----   Dialog Logic   ----
-    async showEditDialog(file, plugins, excludePlugins) {
-        const title = await this.translationService.translateAsync('@general:widgets.file-uploader.edit-dialog.title');
-        const renameLabel = await this.translationService.translateAsync('@general:actions.rename.title');
-        const renamePlaceholder = await this.translationService.translateAsync('@general:actions.rename.title');
+    async showEditDialog(file, plugins, excludePlugins, enableTitleDescription, isNewFile) {
+        const titleKey = isNewFile ? '@general:widgets.file-uploader.edit-dialog.add-title' : '@general:widgets.file-uploader.edit-dialog.title';
+        const title = await this.translationService.translateAsync(titleKey);
+        const nameLabel = await this.translationService.translateAsync('@general:terms.common.name');
+        const namePlaceholder = await this.translationService.translateAsync('@general:terms.common.name');
+        const titleLabel = await this.translationService.translateAsync('@general:terms.common.title');
+        const descriptionLabel = await this.translationService.translateAsync('@general:terms.common.description');
         const submitLabel = await this.translationService.translateAsync('@general:actions.submit.title');
         // Hooks: parameter insertion points
         const beforeRenamePayload = await this.hooks.runAsync(FileUploaderWebhookKeys.EditDialog.Params.BeforeRename, {
@@ -10353,22 +10355,44 @@ class AXPEditFileUploaderCommand {
                         .setGap('16px');
                     // Add items before rename
                     this.buildFormFields(formFlex, beforeRenamePayload?.items ?? []);
-                    // Rename field
-                    formFlex.formField(renameLabel, field => {
+                    // Name field (label "Name" when enableTitleDescription, else "Rename")
+                    formFlex.formField(nameLabel, field => {
                         field.path('name');
                         field.textBox({
-                            placeholder: renamePlaceholder,
+                            placeholder: namePlaceholder,
                             validations: [
                                 { rule: 'maxLength', options: { value: 256 } }
                             ]
                         });
                     });
+                    // Title and description fields when enableTitleDescription is true
+                    if (enableTitleDescription) {
+                        formFlex.formField(titleLabel, field => {
+                            field.path('title');
+                            field.textBox({
+                                placeholder: titleLabel,
+                                validations: [
+                                    { rule: 'maxLength', options: { value: 256 } }
+                                ]
+                            });
+                        });
+                        formFlex.formField(descriptionLabel, field => {
+                            field.path('description');
+                            field.largeTextBox({
+                                placeholder: descriptionLabel,
+                                validations: [
+                                    { rule: 'maxLength', options: { value: 1024 } }
+                                ]
+                            });
+                        });
+                    }
                     // Add items after rename
                     this.buildFormFields(formFlex, afterRenamePayload?.items ?? []);
                 });
                 // Add groups after form
                 this.buildGroups(contentBuilder, groupsAfterPayload?.groups ?? []);
             })
+                .setCloseButton(true)
                 .setActions(actions => {
                 actions.custom({
                     title: submitLabel,
@@ -10555,6 +10579,8 @@ class AXPFileListComponent {
         this.onRename = output();
         this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
         this.fileEditable = input(true, ...(ngDevMode ? [{ debugName: "fileEditable" }] : []));
+        /** When true, edit dialog shows name, title and description fields. Default false. */
+        this.enableTitleDescription = input(false, ...(ngDevMode ? [{ debugName: "enableTitleDescription" }] : []));
         this.multiple = input(true, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
         this.files = input([], ...(ngDevMode ? [{ debugName: "files" }] : []));
         // Plugin context (passed from parent widget)
@@ -10870,6 +10896,7 @@ class AXPFileListComponent {
             file,
             plugins: this.plugins() ?? [],
             excludePlugins: this.excludePlugins() ?? [],
+            enableTitleDescription: this.enableTitleDescription(),
         });
         if (!commandResult?.success || !commandResult.data) {
             return;
@@ -10911,7 +10938,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 }, 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: 
+    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 }, enableTitleDescription: { classPropertyName: "enableTitleDescription", publicName: "enableTitleDescription", 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', '--with-meta': enableTitleDescription() }\"\n  >\n    <div class=\"__icon\">\n      <i class=\"fa-fw {{ getFileInfo(file.name).icon }} fa-solid\"></i>\n    </div>\n    @if (enableTitleDescription()) {\n      <div class=\"__content\">\n        <div class=\"__primary\">{{ file.name }}{{ file.title?.trim() ? ' - ' + file.title : '' }}</div>\n        @if (file.description?.trim()) {\n          <div class=\"__secondary\">{{ file.description }}</div>\n        }\n      </div>\n    } @else {\n      <div class=\"__name\">{{ file.name }}</div>\n    }\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 .__content{display:flex;min-width:0px;flex:1 1 0%;flex-direction:column;gap:.125rem}:host .__item .__primary{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start;font-size:.875rem;line-height:1.25rem;font-weight:500}:host .__item .__secondary{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;text-align:start;font-size:.75rem;line-height:1rem;color:var(--ax-sys-color-text-secondary)}:host .__item.--with-meta .__content{justify-content:center}:host .__item .__actions{margin-left:auto;display:flex;flex-shrink:0}@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
@@ -10934,8 +10961,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         AXTranslationModule,
                         // 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 }] }], capabilities: [{ type: i0.Input, args: [{ isSignal: true, alias: "capabilities", required: false }] }] } });
+                    ], providers: [], template: "@for (file of displayFiles(); track $index) {\n  <div\n    class=\"__item\"\n    [ngClass]=\"{ '--removed': file.status === 'deleted', '--attached': file.status === 'attached', '--with-meta': enableTitleDescription() }\"\n  >\n    <div class=\"__icon\">\n      <i class=\"fa-fw {{ getFileInfo(file.name).icon }} fa-solid\"></i>\n    </div>\n    @if (enableTitleDescription()) {\n      <div class=\"__content\">\n        <div class=\"__primary\">{{ file.name }}{{ file.title?.trim() ? ' - ' + file.title : '' }}</div>\n        @if (file.description?.trim()) {\n          <div class=\"__secondary\">{{ file.description }}</div>\n        }\n      </div>\n    } @else {\n      <div class=\"__name\">{{ file.name }}</div>\n    }\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 .__content{display:flex;min-width:0px;flex:1 1 0%;flex-direction:column;gap:.125rem}:host .__item .__primary{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start;font-size:.875rem;line-height:1.25rem;font-weight:500}:host .__item .__secondary{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;text-align:start;font-size:.75rem;line-height:1rem;color:var(--ax-sys-color-text-secondary)}:host .__item.--with-meta .__content{justify-content:center}:host .__item .__actions{margin-left:auto;display:flex;flex-shrink:0}@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 }] }], enableTitleDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableTitleDescription", 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() {
@@ -10950,11 +10977,15 @@ class AXPFileUploaderWidgetService {
             accept: '*',
             fileEditable: true,
             maxFileSize: 1024 * 1024 * 10,
+            plugins: [],
+            excludePlugins: [],
+            enableTitleDescription: false,
+            showEditDialogAfterSelect: false,
         };
         options = { ...defaultOptions, ...options };
-        const component = await import('./acorex-platform-layout-widgets-file-list-popup.component-BfV3spe3.mjs').then(m => m.AXPFileListPopupComponent);
+        const component = await import('./acorex-platform-layout-widgets-file-list-popup.component-B0omAUil.mjs').then((m) => m.AXPFileListPopupComponent);
         const result = await this.popupService.open(component, {
-            title: (await this.translate.translateAsync('@document-management:terms.common.file')),
+            title: await this.translate.translateAsync('@document-management:terms.common.file'),
             data: {
                 files: signal(options.files),
                 readOnly: signal(options.readOnly),
@@ -10962,6 +10993,10 @@ class AXPFileUploaderWidgetService {
                 accept: signal(options.accept),
                 maxFileSize: signal(options.maxFileSize),
                 fileEditable: signal(options.fileEditable ?? true),
+                plugins: signal(options.plugins ?? []),
+                excludePlugins: signal(options.excludePlugins ?? []),
+                enableTitleDescription: signal(options.enableTitleDescription ?? false),
+                showEditDialogAfterSelect: signal(options.showEditDialogAfterSelect ?? false),
             },
         });
         return result?.data?.data?.files;
@@ -11025,6 +11060,7 @@ class AXPFileUploaderWidgetEditComponent extends AXPValueWidgetComponent {
         this.fileService = inject(AXFileService);
         this.hooks = inject(AXPHookService);
         this.fileActionsService = inject(AXPFileActionsService);
+        this.commandExecutor = inject(AXPCommandExecutor);
         this.multiple = computed(() => this.options()['multiple'], ...(ngDevMode ? [{ debugName: "multiple" }] : []));
         this.acceptOverride = signal(undefined, ...(ngDevMode ? [{ debugName: "acceptOverride" }] : []));
         this.accept = computed(() => this.acceptOverride() ?? this.options()['accept'], ...(ngDevMode ? [{ debugName: "accept" }] : []));
@@ -11037,6 +11073,9 @@ class AXPFileUploaderWidgetEditComponent extends AXPValueWidgetComponent {
             }
             return this.options()['fileEditable'];
         }, ...(ngDevMode ? [{ debugName: "fileEditable" }] : []));
+        this.enableTitleDescription = computed(() => this.options()['enableTitleDescription'] ?? false, ...(ngDevMode ? [{ debugName: "enableTitleDescription" }] : []));
+        /** When true, show the edit dialog (name/title/description + plugin hooks) after each file select; otherwise add to list and user edits via Edit button. */
+        this.showEditDialogAfterSelect = computed(() => this.options()['showEditDialogAfterSelect'] ?? false, ...(ngDevMode ? [{ debugName: "showEditDialogAfterSelect" }] : []));
         this.readonly = computed(() => this.options()['readonly'], ...(ngDevMode ? [{ debugName: "readonly" }] : []));
         this.maxFileSize = computed(() => this.options()['maxFileSize'], ...(ngDevMode ? [{ debugName: "maxFileSize" }] : []));
         // Drag and drop state
@@ -11062,7 +11101,14 @@ class AXPFileUploaderWidgetEditComponent extends AXPValueWidgetComponent {
         this.capabilities = {
             getFiles: () => this.files(),
             setFiles: (files) => this.setValue(files),
-            addFiles: (files) => this.setValue([...(this.getValue() ?? []), ...files]),
+            addFiles: (files) => {
+                if (this.showEditDialogAfterSelect()) {
+                    this.addFilesWithEditDialogAsync(files);
+                }
+                else {
+                    this.setValue([...(this.getValue() ?? []), ...files]);
+                }
+            },
             updateFile: (predicate, updater) => {
                 const current = this.getValue() ?? [];
                 const next = current.map((f) => (predicate(f) ? updater(f) : f));
@@ -11116,18 +11162,16 @@ class AXPFileUploaderWidgetEditComponent extends AXPValueWidgetComponent {
     }
     /**
      * Process files from various sources (file picker, drag-drop, etc.)
+     * When showEditDialogAfterSelect is true, the edit dialog (with plugin hooks) is shown per file before adding; otherwise files are added and user can edit via Edit button.
      */
     async processFiles(files) {
-        // if no files are selected, return
         if (files.length === 0) {
             return;
         }
-        // if the widget is not multiple, clear the files
         if (!this.multiple()) {
             this.clear();
         }
-        // if the file size is greater than the max file size, return
-        // create the file upload requests
+        const showDialog = this.showEditDialogAfterSelect();
         const fileUploadRequests = files.map((file) => ({
             id: AXPDataGenerator.uuid(),
             name: file.name,
@@ -11139,7 +11183,11 @@ class AXPFileUploaderWidgetEditComponent extends AXPValueWidgetComponent {
                 value: file,
             },
         }));
-        // allow plugins to transform items IN-PLACE before adding (no reassignment)
+        if (showDialog) {
+            await this.addFilesWithEditDialogAsync(fileUploadRequests);
+            return;
+        }
+        // Default: run BeforeFilesAdded (plugins may transform), then add all, then AfterFilesAdded
         await this.hooks.runAsync(FileUploaderWebhookKeys.BeforeFilesAdded, {
             plugins: this.plugins() ?? [],
             excludePlugins: this.excludePlugins() ?? [],
@@ -11154,6 +11202,33 @@ class AXPFileUploaderWidgetEditComponent extends AXPValueWidgetComponent {
             newFiles: fileUploadRequests,
         });
     }
+    /**
+     * Show edit dialog per file and add only those submitted. Used when showEditDialogAfterSelect is true (both from zone and from dropdown actions).
+     */
+    async addFilesWithEditDialogAsync(fileItems) {
+        const added = [];
+        for (const fileItem of fileItems) {
+            const result = await this.commandExecutor.execute('FileUploader:Edit', {
+                file: fileItem,
+                plugins: this.plugins() ?? [],
+                excludePlugins: this.excludePlugins() ?? [],
+                enableTitleDescription: this.enableTitleDescription(),
+                isNewFile: true,
+            });
+            if (result?.success && result.data) {
+                added.push(result.data);
+            }
+        }
+        if (added.length > 0) {
+            this.setValue([...(this.getValue() ?? []), ...added]);
+            await this.hooks.runAsync(FileUploaderWebhookKeys.AfterFilesAdded, {
+                plugins: this.plugins() ?? [],
+                excludePlugins: this.excludePlugins() ?? [],
+                capabilities: this.capabilities,
+                newFiles: added,
+            });
+        }
+    }
     handleFileRemove(file) {
         this.removeFile(file);
     }
@@ -11180,17 +11255,19 @@ class AXPFileUploaderWidgetEditComponent extends AXPValueWidgetComponent {
         this.setValue((this.getValue() ?? []).map((f) => (f.id === file.id ? file : f)) ?? []);
     }
     /**
-     * Handle file rename action
+     * Handle file rename action. Persists name/title/description to file storage immediately when edited
+     * so they are saved even if the entity payload does not carry these fields.
      */
     handleFileRename(file) {
         const currentFiles = this.getValue() ?? [];
         const previousFile = currentFiles.find((f) => f.id === file.id);
-        // Check if name has changed and previous status was 'uploaded' or 'remote'
         const nameChanged = previousFile && previousFile.name !== file.name;
-        const shouldChangeStatus = nameChanged &&
+        const titleChanged = previousFile && previousFile.title !== file.title;
+        const descriptionChanged = previousFile && previousFile.description !== file.description;
+        const anyMetadataChanged = nameChanged || titleChanged || descriptionChanged;
+        const shouldChangeStatus = anyMetadataChanged &&
             previousFile &&
             (previousFile.status === 'uploaded' || previousFile.status === 'remote');
-        // Update file data and change status to 'editing' if name changed and status was 'uploaded' or 'remote'
         const updatedFile = {
             ...file,
             status: shouldChangeStatus ? 'editing' : file.status,
@@ -11255,6 +11332,7 @@ class AXPFileUploaderWidgetEditComponent extends AXPValueWidgetComponent {
         [files]="files()"
         [readonly]="readonly()"
         [fileEditable]="fileEditable()"
+        [enableTitleDescription]="enableTitleDescription()"
         [plugins]="plugins()"
         [excludePlugins]="excludePlugins()"
         [capabilities]="capabilities"
@@ -11264,7 +11342,7 @@ class AXPFileUploaderWidgetEditComponent extends AXPValueWidgetComponent {
         (onRename)="handleFileRename($event)"
       ></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", "capabilities"], 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", "enableTitleDescription", "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,
@@ -11306,6 +11384,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         [files]="files()"
         [readonly]="readonly()"
         [fileEditable]="fileEditable()"
+        [enableTitleDescription]="enableTitleDescription()"
         [plugins]="plugins()"
         [excludePlugins]="excludePlugins()"
         [capabilities]="capabilities"
@@ -11353,7 +11432,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", "capabilities"], 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", "enableTitleDescription", "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,
@@ -11412,6 +11491,18 @@ const AXPFileUploaderWidget = {
             path: 'options.fileEditable',
             group: AXP_BEHAVIOR_PROPERTY_GROUP,
         }),
+        createBooleanProperty({
+            name: 'enableTitleDescription',
+            title: 'Enable Title & Description',
+            path: 'options.enableTitleDescription',
+            group: AXP_BEHAVIOR_PROPERTY_GROUP,
+        }),
+        createBooleanProperty({
+            name: 'showEditDialogAfterSelect',
+            title: 'Show Edit Dialog After File Select',
+            path: 'options.showEditDialogAfterSelect',
+            group: AXP_BEHAVIOR_PROPERTY_GROUP,
+        }),
         createNumberProperty({
             name: 'maxFileSize',
             title: 'Max File Size (bytes)',
@@ -11460,6 +11551,8 @@ class AXPGalleryWidgetEditComponent extends AXPValueWidgetComponent {
         this.loadingDialog = inject(AXLoadingDialogService);
         this.translationService = inject(AXTranslationService);
         this.gallery = viewChild('c', ...(ngDevMode ? [{ debugName: "gallery" }] : []));
+        /** Object URLs created for blobs/binary; revoked on destroy for memory safety. */
+        this.objectUrls = new Set();
         /**
          * Convert AXPFileListItem[] to AXMediaViewerData[] for display in media viewer.
          * Uses lazy-loading callbacks for URL resolution.
@@ -11622,15 +11715,28 @@ class AXPGalleryWidgetEditComponent extends AXPValueWidgetComponent {
      * Resolve the URL for a file item.
      * Returns a promise that resolves to the file URL.
      */
+    /**
+     * Register an object URL for later revocation on destroy (memory safety).
+     */
+    trackObjectUrl(url) {
+        if (url.startsWith('blob:')) {
+            this.objectUrls.add(url);
+        }
+        return url;
+    }
     async resolveFileUrl(file) {
         // Blob source - create object URL
         if (file.source?.kind === 'blob' && file.source.value instanceof Blob) {
-            return URL.createObjectURL(file.source.value);
+            return this.trackObjectUrl(URL.createObjectURL(file.source.value));
         }
         // File ID source - fetch from storage service
         if (file.source?.kind === 'fileId' && typeof file.source.value === 'string') {
             const fileInfo = await this.fileStorageService.getInfo(file.source.value);
-            return fileInfo?.url ?? '';
+            if (fileInfo?.url)
+                return fileInfo.url;
+            if (fileInfo?.binary)
+                return this.trackObjectUrl(URL.createObjectURL(fileInfo.binary));
+            return '';
         }
         // URL source - return directly
         if (file.source?.kind === 'url' && typeof file.source.value === 'string') {
@@ -11645,10 +11751,20 @@ class AXPGalleryWidgetEditComponent extends AXPValueWidgetComponent {
             }
             // Assume it's a file ID - fetch from storage service
             const fileInfo = await this.fileStorageService.getInfo(value);
-            return fileInfo?.url ?? '';
+            if (fileInfo?.url)
+                return fileInfo.url;
+            if (fileInfo?.binary)
+                return this.trackObjectUrl(URL.createObjectURL(fileInfo.binary));
+            return '';
         }
         return '';
     }
+    ngOnDestroy() {
+        for (const url of this.objectUrls) {
+            URL.revokeObjectURL(url);
+        }
+        this.objectUrls.clear();
+    }
     /**
      * Process files from various sources (file picker, drag-drop, etc.)
      * This method is called by drag-and-drop handler
@@ -13126,7 +13242,7 @@ class AXPQrcodeWidgetEditComponent extends AXPValueWidgetComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPQrcodeWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AXPQrcodeWidgetEditComponent, isStandalone: true, selector: "axp-qrcode-widget-edit", host: { classAttribute: "ax-block ax-flex-1" }, usesInheritance: true, ngImport: i0, template: "<!-- Main Container -->\n<div class=\"ax-flex ax-flex-col ax-gap-3 ax-p-3 ax-w-fit\">\n  <div class=\"ax-flex ax-justify-center\">\n    <!-- QR Code Container -->\n    <div class=\"ax-bg-lightest ax-border ax-border-default ax-rounded-md ax-shadow-md ax-p-3\" #qr>\n      <!-- QR Code Display or Empty Placeholder -->\n      @if (value()) {\n        <!-- Display QR Code when value exists -->\n        <ax-qrcode [content]=\"value()\" [size]=\"size()\" [color]=\"color()\" [level]=\"level()\" [outputType]=\"'svg'\">\n        </ax-qrcode>\n      } @else {\n        <!-- Empty State: Show placeholder when value is null or empty -->\n        <div\n          class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-text-center\"\n          [style.width.px]=\"size()\"\n          [style.height.px]=\"size()\"\n        >\n          <ax-icon icon=\"fa-light fa-qrcode\" class=\"ax-text-4xl ax-text-gray-400 ax-mb-3\"></ax-icon>\n          <div class=\"ax-text-sm ax-text-gray-500\">\n            {{ '@general:state-message.empty.title' | translate | async }}\n          </div>\n        </div>\n      }\n\n      <!-- Action Buttons Section -->\n      @if (!readonly()) {\n        <div class=\"ax-flex ax-items-center ax-justify-between ax-gap-2 ax-pt-4\">\n          <!-- Edit Button: Opens popover to edit QR code content -->\n          <ax-button\n            #editBtn\n            look=\"twotone\"\n            [title]=\"('@general:actions.edit.title' | translate | async)!\"\n            (onClick)=\"beginEdit()\"\n          >\n            <!-- Edit Popover: Text input for editing QR code content -->\n            <ax-popover #po [target]=\"editBtn\" [openOn]=\"'toggle'\" [closeOn]=\"'clickOut'\" [adaptivityEnabled]=\"true\">\n              <div\n                class=\"ax-bg-lightest ax-border ax-border-default ax-rounded-md ax-shadow-md ax-p-5 ax-w-full sm:ax-w-96\"\n              >\n                <!-- Text Input for QR Code Content -->\n                <ax-text-box\n                  [value]=\"draft()\"\n                  [disabled]=\"disabled()\"\n                  [readonly]=\"readonly()\"\n                  [placeholder]=\"placeholder() | translate | async\"\n                  (onValueChanged)=\"onDraftChange($event)\"\n                >\n                  @if (hasClearButton()) {\n                    <ax-clear-button></ax-clear-button>\n                  }\n                </ax-text-box>\n                <!-- Popover Action Buttons -->\n                <div class=\"ax-flex ax-justify-end ax-gap-2 ax-mt-3\">\n                  <ax-button\n                    look=\"outline\"\n                    class=\"ax-sm\"\n                    [text]=\"('@general:actions.cancel.title' | translate | async)!\"\n                    (onClick)=\"cancelEdit(); po.close()\"\n                  ></ax-button>\n                  <ax-button\n                    look=\"solid\"\n                    class=\"ax-sm\"\n                    color=\"primary\"\n                    [text]=\"('@general:actions.submit.title' | translate | async)!\"\n                    (onClick)=\"applyDraft(); po.close()\"\n                  ></ax-button>\n                </div>\n              </div>\n            </ax-popover>\n            <ax-icon icon=\"fa-light fa-pen\"></ax-icon>\n          </ax-button>\n\n          <!-- Upload Button: Upload text file to set QR code content -->\n          <!-- <ax-button\n            look=\"twotone\"\n            [title]=\"('@general:actions.upload.title' | translate | async)!\"\n            (onClick)=\"fileInput.click()\"\n          >\n            <input #fileInput type=\"file\" accept=\"text/plain\" class=\"ax-hidden\" (change)=\"onFileSelected($event)\" />\n            <ax-icon icon=\"fa-light fa-upload\"></ax-icon>\n          </ax-button> -->\n\n          <!-- Export Button: Download QR code as image (only shown when value exists) -->\n          @if (value()) {\n            <ax-button\n              look=\"twotone\"\n              [title]=\"('@general:actions.export.title' | translate | async)!\"\n              (onClick)=\"downloadQr(qr)\"\n            >\n              <ax-icon icon=\"fa-light fa-download\"></ax-icon>\n            </ax-button>\n          }\n\n          <!-- Delete Button: Clear QR code value (only shown when not readonly and value exists) -->\n          @if (!readonly() && value()) {\n            <ax-button\n              look=\"twotone\"\n              [title]=\"('@general:actions.delete.title' | translate | async)!\"\n              (onClick)=\"clearValue()\"\n            >\n              <ax-icon icon=\"ax-text-danger fa-light fa-trash-can\"></ax-icon>\n            </ax-button>\n          }\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i1$6.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "maskPattern", "customTokens", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { 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: AXPopoverModule }, { kind: "component", type: i3$7.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "forceDisableActionSheetStyle", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "repositionOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXQrcodeModule }, { kind: "component", type: i5$3.AXQrcodeComponent, selector: "ax-qrcode", inputs: ["content", "size", "level", "color", "backgroundColor", "outputType"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AXPQrcodeWidgetEditComponent, isStandalone: true, selector: "axp-qrcode-widget-edit", host: { classAttribute: "ax-block ax-flex-1" }, usesInheritance: true, ngImport: i0, template: "<!-- Main Container -->\n<div class=\"ax-flex ax-flex-col ax-gap-3 ax-p-3 ax-w-fit\">\n  <div class=\"ax-flex ax-justify-center\">\n    <!-- QR Code Container -->\n    <div class=\"ax-bg-lightest ax-border ax-border-default ax-rounded-md ax-shadow-md ax-p-3\" #qr>\n      <!-- QR Code Display or Empty Placeholder -->\n      @if (value()) {\n        <!-- Display QR Code when value exists -->\n        <ax-qrcode [content]=\"value()\" [size]=\"size()\" [color]=\"color()\" [level]=\"level()\" [outputType]=\"'svg'\">\n        </ax-qrcode>\n      } @else {\n        <!-- Empty State: Show placeholder when value is null or empty -->\n        <div\n          class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-text-center\"\n          [style.width.px]=\"size()\"\n          [style.height.px]=\"size()\"\n        >\n          <ax-icon icon=\"fa-light fa-qrcode\" class=\"ax-text-4xl ax-text-gray-400 ax-mb-3\"></ax-icon>\n          <div class=\"ax-text-sm ax-text-gray-500\">\n            {{ '@general:state-message.empty.title' | translate | async }}\n          </div>\n        </div>\n      }\n\n      <!-- Action Buttons Section -->\n      @if (!readonly()) {\n        <div class=\"ax-flex ax-items-center ax-justify-between ax-gap-2 ax-pt-4\">\n          <!-- Edit Button: Opens popover to edit QR code content -->\n          <ax-button\n            #editBtn\n            look=\"twotone\"\n            [title]=\"('@general:actions.edit.title' | translate | async)!\"\n            (onClick)=\"beginEdit()\"\n          >\n            <!-- Edit Popover: Text input for editing QR code content -->\n            <ax-popover #po [target]=\"editBtn\" [openOn]=\"'toggle'\" [closeOn]=\"'clickOut'\" [adaptivityEnabled]=\"true\">\n              <div\n                class=\"ax-bg-lightest ax-border ax-border-default ax-rounded-md ax-shadow-md ax-p-5 ax-w-full sm:ax-w-96\"\n              >\n                <!-- Text Input for QR Code Content -->\n                <ax-text-box\n                  [value]=\"draft()\"\n                  [disabled]=\"disabled()\"\n                  [readonly]=\"readonly()\"\n                  [placeholder]=\"placeholder() | translate | async\"\n                  (onValueChanged)=\"onDraftChange($event)\"\n                >\n                  @if (hasClearButton()) {\n                    <ax-clear-button></ax-clear-button>\n                  }\n                </ax-text-box>\n                <!-- Popover Action Buttons -->\n                <div class=\"ax-flex ax-justify-end ax-gap-2 ax-mt-3\">\n                  <ax-button\n                    look=\"outline\"\n                    class=\"ax-sm\"\n                    [text]=\"('@general:actions.cancel.title' | translate | async)!\"\n                    (onClick)=\"cancelEdit(); po.close()\"\n                  ></ax-button>\n                  <ax-button\n                    look=\"solid\"\n                    class=\"ax-sm\"\n                    color=\"primary\"\n                    [text]=\"('@general:actions.submit.title' | translate | async)!\"\n                    (onClick)=\"applyDraft(); po.close()\"\n                  ></ax-button>\n                </div>\n              </div>\n            </ax-popover>\n            <ax-icon icon=\"fa-light fa-pen\"></ax-icon>\n          </ax-button>\n\n          <!-- Upload Button: Upload text file to set QR code content -->\n          <!-- <ax-button\n            look=\"twotone\"\n            [title]=\"('@general:actions.upload.title' | translate | async)!\"\n            (onClick)=\"fileInput.click()\"\n          >\n            <input #fileInput type=\"file\" accept=\"text/plain\" class=\"ax-hidden\" (change)=\"onFileSelected($event)\" />\n            <ax-icon icon=\"fa-light fa-upload\"></ax-icon>\n          </ax-button> -->\n\n          <!-- Export Button: Download QR code as image (only shown when value exists) -->\n          @if (value()) {\n            <ax-button\n              look=\"twotone\"\n              [title]=\"('@general:actions.export.title' | translate | async)!\"\n              (onClick)=\"downloadQr(qr)\"\n            >\n              <ax-icon icon=\"fa-light fa-download\"></ax-icon>\n            </ax-button>\n          }\n\n          <!-- Delete Button: Clear QR code value (only shown when not readonly and value exists) -->\n          @if (!readonly() && value()) {\n            <ax-button\n              look=\"twotone\"\n              [title]=\"('@general:actions.delete.title' | translate | async)!\"\n              (onClick)=\"clearValue()\"\n            >\n              <ax-icon icon=\"ax-text-danger fa-light fa-trash-can\"></ax-icon>\n            </ax-button>\n          }\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i1$6.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "maskPattern", "customTokens", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { 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: AXPopoverModule }, { kind: "component", type: i3$7.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "repositionOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXQrcodeModule }, { kind: "component", type: i5$3.AXQrcodeComponent, selector: "ax-qrcode", inputs: ["content", "size", "level", "color", "backgroundColor", "outputType"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPQrcodeWidgetEditComponent, decorators: [{
             type: Component,
@@ -14122,7 +14238,7 @@ class AXPStatusChipComponent {
         </div>
       </ax-popover>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i3$7.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "forceDisableActionSheetStyle", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "repositionOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i3$7.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "repositionOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPStatusChipComponent, decorators: [{
             type: Component,
@@ -17079,7 +17195,7 @@ const AXPRepeaterWidget = {
             component: () => Promise.resolve().then(function () { return repeaterWidgetDesigner_component; }).then((c) => c.AXPRepeaterWidgetDesignerComponent),
         },
         column: {
-            component: () => import('./acorex-platform-layout-widgets-repeater-widget-column.component-DnhR00cH.mjs').then((c) => c.AXPRepeaterWidgetColumnComponent),
+            component: () => import('./acorex-platform-layout-widgets-repeater-widget-column.component-fcCirNxz.mjs').then((c) => c.AXPRepeaterWidgetColumnComponent),
         },
     },
 };
@@ -21058,7 +21174,7 @@ class AXPSpacingWidgetEditComponent extends AXPValueWidgetComponent {
         return { clientX: touch.clientX, clientY: touch.clientY };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPSpacingWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AXPSpacingWidgetEditComponent, isStandalone: true, selector: "axp-spacing-widget-editor", viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"axp-spacing-box ax-flex ax-justify-center ax-items-center ax-pt-4 ax-pb-2\">\n  <div class=\"axp-spacing-inner-box\">\n    <div class=\"axp-spacing-margin-box\">\n      <!--MARGIN SVG DEFINE-->\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"224\" height=\"112\" class=\"area\">\n        <mask id=\"margin-mask\" width=\"224\" height=\"112\">\n          <rect fill=\"#000\" height=\"112\" width=\"224\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#fff\" height=\"112\" rx=\"4\" width=\"224\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#000\" height=\"66\" rx=\"4\" width=\"154\" x=\"35\" y=\"23\"></rect>\n        </mask>\n        <defs>\n          <linearGradient id=\"FuseLinearGradient\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <stop stop-color=\"white\"></stop>\n            <stop offset=\"1\" stop-color=\"white\" stop-opacity=\"0\"></stop>\n          </linearGradient>\n        </defs>\n\n        <!--MARGIN TOP SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'top')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'top')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  h224\n  l-36,24\n  h-152\n  l-36,-24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  h224\n  l-36,24\n  h-152\n  l-36,-24z\n  \"\n              fill-opacity=\"0.12\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"url(#FuseLinearGradient)\"\n              d=\"\n  m0,0\n  h224\n  l-36,24\n  h-152\n  l-36,-24z\n  \"\n              fill-opacity=\"0.02\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n        <!--MARGIN RIGHT SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'right')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'right')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m224,0\n  v112\n  l-36,-24\n  v-64\n  l36,-24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m224,0\n  v112\n  l-36,-24\n  v-64\n  l36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n        <!--MARGIN BOTTOM SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'bottom')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'bottom')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,112\n  h224\n  l-36,-24\n  h-152\n  l-36,24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,112\n  h224\n  l-36,-24\n  h-152\n  l-36,24z\n  \"\n              fill-opacity=\"0.064\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n        <!--MARGIN LEFT SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'left')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'left')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  v112\n  l36,-24\n  v-64\n  l-36,-24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  v112\n  l36,-24\n  v-64\n  l-36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n      </svg>\n\n      <!--MARGIN TOP VALUE-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 1 / 2 / 2 / 3\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 1 / 2 / 2 / 3\">\n          <span>{{ calculatedValues().margin.top + ' ' + units().margin.top }}</span>\n        </div>\n      </div>\n\n      <!--MARGIN RIGHT VALUE-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 2 / 3 / 3 / 4\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 3 / 3 / 4\">\n          <span>{{ calculatedValues().margin.right + ' ' + units().margin.right }}</span>\n        </div>\n      </div>\n\n      <!--MARGIN BOTTOM VALUE-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 3 / 2 / 4 / 3\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 3 / 2 / 4 / 3\">\n          <span>{{ calculatedValues().margin.bottom + ' ' + units().margin.bottom }}</span>\n        </div>\n      </div>\n\n      <!--MARGIN LEFT VALUE-->\n      <div tabindex=\"0\" style=\"grid-area: 2 / 1 / 3 / 2\" class=\"axp-spacing-value-container\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 1 / 3 / 2\">\n          <span>{{ calculatedValues().margin.left + ' ' + units().margin.left }}</span>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"axp-spacing-padding-box\">\n      <!--SVG DEFINE-->\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"150\" height=\"62\" class=\"area\">\n        <mask id=\"padding-mask\" width=\"150\" height=\"62\">\n          <rect fill=\"#000\" height=\"60\" width=\"150\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#fff\" height=\"60\" rx=\"2\" width=\"150\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#000\" height=\"14\" rx=\"2\" width=\"80\" x=\"35\" y=\"23\"></rect>\n        </mask>\n\n        <!--PADDING TOP SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'top')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'top')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  h150\n  l-36,24\n  h-78\n  l-36,-24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  h150\n  l-36,24\n  h-78\n  l-36,-24z\n  \"\n              fill-opacity=\"0.064\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n\n        <!--PADDING RIGHT SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'right')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'right')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m150,0\n  v60\n  l-36,-24\n  v-12\n  l36,-24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m150,0\n  v60\n  l-36,-24\n  v-12\n  l36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n\n        <!--PADDING BOTTOM SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'bottom')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'bottom')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,60\n  h150\n  l-36,-24\n  h-78\n  l-36,24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,60\n  h150\n  l-36,-24\n  h-78\n  l-36,24z\n  \"\n              fill-opacity=\"0.12\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n\n        <!--PADDING LEFT SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'left')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'left')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  v60\n  l36,-24\n  v-12\n  l-36,-24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  v60\n  l36,-24\n  v-12\n  l-36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n      </svg>\n\n      <!--PADDING TOP SVG-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 1 / 2 / 2 / 3\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 1 / 2 / 2 / 3\">\n          <span>{{ this.calculatedValues().padding.top + ' ' + units().padding.top }}</span>\n        </div>\n      </div>\n\n      <!--PADDING RIGHT SVG-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 2 / 3 / 3 / 4\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 3 / 3 / 4\">\n          <span>{{ this.calculatedValues().padding.right + ' ' + units().padding.right }}</span>\n        </div>\n      </div>\n\n      <!--PADDING BOTTOM SVG-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 3 / 2 / 4 / 3\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 3 / 2 / 4 / 3\">\n          <span>{{ this.calculatedValues().padding.bottom + ' ' + units().padding.bottom }}</span>\n        </div>\n      </div>\n\n      <!--PADDING LEFT SVG-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 2 / 1 / 3 / 2\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 1 / 3 / 2\">\n          <span>{{ this.calculatedValues().padding.left + ' ' + units().padding.left }}</span>\n        </div>\n      </div>\n    </div>\n\n    <!--PADDING TEXT-->\n    <svg class=\"axp-spacing-padding-text\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\">\n      <text x=\"5\" y=\"10\" fill=\"white\" font-weight=\"500\" font-size=\"7\">PADDING</text>\n    </svg>\n\n    <!--MARGIN TEXT-->\n    <svg class=\"axp-spacing-margin-text\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\">\n      <text x=\"5\" y=\"10\" fill=\"white\" font-weight=\"500\" font-size=\"7\">MARGIN</text>\n    </svg>\n\n    <!-- Ctrl hint -->\n    <!-- <div class=\"ax-text-xs ax-text-center ax-text-neutral-400 ax-mt-1\">\n      Hold Ctrl while dragging to adjust all sides\n    </div> -->\n  </div>\n</div>\n\n<ng-template #template let-type=\"type\" let-side=\"side\" let-value=\"value\">\n  <div\n    class=\"axp-spacing-popup-container\"\n    (keydown.control.b)=\"setSpacing(originalValues()[this.current().type][this.current().side], type, side)\"\n  >\n    <div class=\"axp-spacing-popover\">\n      <!--SET EMPTY-->\n      <div class=\"ax-size-4 ax-cursor-pointer\" (click)=\"setSpacing(0, type, side)\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path opacity=\"0.4\" d=\"M14 2L14 13L10 13L10 2L14 2Z\" fill=\"currentColor\" fill-opacity=\"0.67\"></path>\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M7.99995 7L7.99995 1H8.99995L8.99995 14H7.99995L7.99995 8L3.70706 8L5.85351 10.1464L5.1464 10.8536L1.79285 7.5L5.1464 4.14645L5.85351 4.85355L3.70706 7L7.99995 7Z\"\n            fill=\"currentColor\"\n          ></path>\n        </svg>\n      </div>\n\n      <div class=\"ax-flex ax-justify-center ax-h-6 ax-flex-col\">\n        <input\n          type=\"range\"\n          name=\"range\"\n          [min]=\"0\"\n          [max]=\"200\"\n          [value]=\"this.calculatedValues()[this.current().type][this.current().side]\"\n          (input)=\"setSpacing($event, type, side)\"\n        />\n      </div>\n      <div>\n        <!--INPUT NUMBER-->\n        <div style=\"--local-gap: 8px\">\n          <div\n            style=\"\n              gap: 8px;\n              height: auto;\n              display: flex;\n              flex-flow: column;\n              -webkit-box-align: stretch;\n              align-items: stretch;\n              -webkit-box-pack: start;\n              position: relative;\n              justify-content: stretch;\n              width: 100%;\n              -webkit-box-flex: 1;\n              flex-grow: 1;\n            \"\n          >\n            <ax-number-box\n              class=\"ax-sm\"\n              [minValue]=\"0\"\n              [changeOnScroll]=\"true\"\n              [ngModel]=\"value\"\n              (onValueChanged)=\"setSpacing($event.value ?? 0, type, side)\"\n              [showSpinButtons]=\"false\"\n            >\n              <ax-suffix>\n                <ax-dropdown-button [text]=\"getSpacingUnitLabel(type, side)\" [look]=\"'blank'\" [mode]=\"'dropdown'\">\n                  <ax-button-item-list>\n                    @for (u of spacingUnits; track $index) {\n                      <ax-button-item\n                        [text]=\"u.toUpperCase()\"\n                        [selected]=\"getSpacingUnit(type, side) === u\"\n                        (onClick)=\"onSpacingUnitChange(u, type, side)\"\n                      ></ax-button-item>\n                    }\n                  </ax-button-item-list>\n                </ax-dropdown-button>\n              </ax-suffix>\n            </ax-number-box>\n          </div>\n        </div>\n      </div>\n      <div class=\"axp-spacing-template-values\">\n        @for (i of FixedValues; track $index) {\n          <div\n            (click)=\"setSpacing(i.value, type, side)\"\n            class=\"hover:!ax-bg-gradient-to-b hover:!ax-from-white/20 hover:!ax-to-white/5 !ax-cursor-pointer\"\n            [class]=\"i.colspan ? 'ax-col-span-' + i.colspan : ''\"\n            [class]=\"i.rowspan ? 'ax-row-span-' + i.rowspan : ''\"\n            tabindex=\"0\"\n            style=\"\n              border-bottom-color: var(--color-border-1);\n              border-left-color: var(--color-border-1);\n              border-right-color: var(--color-border-1);\n              border-top-color: var(--color-border-1);\n              outline: 0px;\n              cursor: default;\n              user-select: none;\n              padding: 0px;\n              box-sizing: border-box;\n              font-family: inherit;\n              font-size: inherit;\n              --component-icon-color: var(--color-text-secondary);\n              position: relative;\n              display: flex;\n              align-items: center;\n              justify-content: center;\n              height: 100%;\n              border-radius: 4px;\n              color: var(--color-action-secondary-text);\n              background: var(--color-action-secondary-background);\n              border-width: 0px;\n              border-style: solid;\n              box-shadow: var(--box-shadows-action-secondary);\n              align-self: center;\n            \"\n          >\n            <div class=\"ax-truncate\">\n              {{ i.label }}\n              <span class=\"ax-text-xs ax-text-neutral-400\">\n                {{ units()[this.current().type][this.current().side] }}</span\n              >\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n\n    <div class=\"ax-h-[1px] ax-mt-1 ax-mb-1 ax-bg-border-1 ax-pointer-events-none\"></div>\n\n    <div\n      [class.ax-opacity-50]=\"\n        originalValues()[this.current().type][this.current().side] ===\n        calculatedValues()[this.current().type][this.current().side]\n      \"\n      (click)=\"setSpacing(originalValues()[this.current().type][this.current().side], type, side)\"\n      tabindex=\"0\"\n      class=\"ax-outline-none ax-select-none ax-py-1 ax-px-2 ax-my-1 ax-min-h-6 ax-cursor-pointer hover:!ax-bg-[#404040]\"\n    >\n      <div class=\"ax-flex ax-flex-row ax-items-center\">\n        <div class=\"ax-min-w-6 ax-self-center ax-grow ax-basis-0\">\n          <div class=\"ax-items-center ax-box-border ax-grid ax-grid-cols-[16px_1fr_auto] ax-gap-x-2 ax-gap-y-1\">\n            <div class=\"ax-size-4\">\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  d=\"M3.70712 5.00004L6.35357 2.35359L5.64646 1.64648L1.79291 5.50004L5.64646 9.35359L6.35357 8.64648L3.70712 6.00004H10C11.6569 6.00004 13 7.34318 13 9.00004C13 10.6569 11.6569 12 10 12H8.00001V13H10C12.2092 13 14 11.2092 14 9.00004C14 6.7909 12.2092 5.00004 10 5.00004H3.70712Z\"\n                  fill=\"currentColor\"\n                ></path>\n              </svg>\n            </div>\n            <div>Reset</div>\n          </div>\n        </div>\n        <div class=\"ax-self-center\">\n          <div\n            class=\"ax-cursor-default ax-select-none ax-text-[11.5px] ax-font-normal ax-leading-4 ax-tracking-tight ax-text-secondary ax-justify-self-end ax-ml-[1px]\"\n          >\n            <span><kbd>Ctrl</kbd> + <kbd>B</kbd></span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ax-popover #popover [openOn]=\"'click'\" [offsetY]=\"10\" [closeOn]=\"'clickOut'\">\n  <ng-container\n    [ngTemplateOutlet]=\"template\"\n    [ngTemplateOutletContext]=\"{\n      type: this.current().type,\n      side: this.current().side,\n      value: this.calculatedValues()[this.current().type][this.current().side],\n    }\"\n  ></ng-container>\n</ax-popover>\n", styles: [".axp-spacing-box{--color-text-secondary: rgba(255, 255, 255, .67);--color-ui-scrollbar-thumb: rgba(255, 255, 255, .67);--color-background-1: #292929;--color-text-secondary: white;--color-border-2: rgba(255, 255, 255, .16);--color-changed: rgb(167, 209, 255);--color-background: rgba(0, 106, 204, .18)}.axp-spacing-box .axp-spacing-inner-box{transform:scale(1.2);position:relative;display:grid;width:224px;height:112px;grid-template-columns:36px 1px 36px 1fr 36px 1px 36px;grid-template-rows:24px 2px 24px 1fr 24px 2px 24px;outline-style:none;cursor:default;-webkit-user-select:none;user-select:none}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-value-container{pointer-events:none;border:none;outline:0px;cursor:default;-webkit-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;place-self:center;padding:2px;height:auto;width:auto;font-family:inherit;font-size:inherit;position:relative;border-radius:4px;color:var(--color-text-secondary);background:transparent;box-sizing:border-box;box-shadow:none}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-value-container .axp-spacing-value-field{cursor:default;-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;font-weight:400;line-height:10px;letter-spacing:-.115px;display:flex;color:var(--color-text-secondary);background:transparent;padding:2px;margin:0;border-radius:2px;max-width:100%;box-sizing:content-box;place-self:center;position:relative;opacity:1;align-items:center;justify-content:center}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-margin-box{border-radius:4px;grid-area:1/1/-1/-1;display:grid;grid-template-columns:36px 1fr 36px;grid-template-rows:24px minmax(8px,1fr) 24px;justify-items:center;width:224px;height:112px}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-padding-box{border-radius:4px;grid-area:3/3/span 3/span 3;display:grid;grid-template-columns:36px 1fr 36px;grid-template-rows:24px minmax(8px,1fr) 24px;justify-items:center;width:150px;height:60px}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-padding-text{grid-area:3/3/span 3/span 3;pointer-events:none;position:relative}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-margin-text{grid-area:1/1/-1/-1;pointer-events:none;position:relative}.axp-spacing-popup-container{--color-action-secondary-text: white;--color-action-secondary-background: linear-gradient( 180deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .11) 100% );--box-shadows-action-secondary: 0px .5px 1px rgba(0, 0, 0, .8), inset 0px .5px .5px rgba(255, 255, 255, .12);--color-border-1: rgba(255, 255, 255, .13);max-width:239px;min-width:201px;background:#353535;border-radius:.5rem;color:var(--color-text-secondary, white);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,Helvetica,Arial,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,sans-serif;font-size:11.5px;line-height:16px}.axp-spacing-popup-container .axp-spacing-popover{display:grid;grid-template-columns:16px 1fr 56px;grid-template-rows:24px 1fr;align-items:center;gap:8px;width:241px;padding:8px}.axp-spacing-popup-container .axp-spacing-popover .axp-spacing-template-values{display:grid;grid-area:2/1/3/-1;grid-template-columns:repeat(5,1fr);grid-template-rows:24px 24px;gap:4px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]{-webkit-appearance:none;appearance:none;width:100%;cursor:pointer;outline:none;overflow:hidden;border-radius:12px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-webkit-slider-runnable-track{height:10px;background:#ccc;border-radius:12px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-moz-range-track{height:10px;background:#ccc;border-radius:12px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:10px;width:10px;background-color:#fff;border-radius:50%;border:1px solid #353535;box-shadow:-407px 0 0 400px #29292970}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-moz-range-thumb{height:10px;width:10px;background-color:#fff;border-radius:50%;border:1px solid #353535;box-shadow:-407px 0 0 400px #29292970}.area{grid-area:1/1/-1/-1;overflow:hidden;border-radius:2px;filter:drop-shadow(rgba(255,255,255,.2) 0px -.5px 0px) drop-shadow(rgba(0,0,0,.4) 0px 0px 1px) drop-shadow(rgba(0,0,0,.2) 0px 1px 0px)}\n"], dependencies: [{ kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$7.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "minValue", "maxValue", "showSpinButtons", "thousandsSeparator", "decimals", "changeOnScroll", "step"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "thousandsSeparatorChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i3$7.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "forceDisableActionSheetStyle", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "repositionOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXRangeSliderModule }, { kind: "ngmodule", type: AXButtonModule }, { 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: AXDropdownButtonModule }, { kind: "component", type: i6.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "color", "look", "text", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AXPSpacingWidgetEditComponent, isStandalone: true, selector: "axp-spacing-widget-editor", viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"axp-spacing-box ax-flex ax-justify-center ax-items-center ax-pt-4 ax-pb-2\">\n  <div class=\"axp-spacing-inner-box\">\n    <div class=\"axp-spacing-margin-box\">\n      <!--MARGIN SVG DEFINE-->\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"224\" height=\"112\" class=\"area\">\n        <mask id=\"margin-mask\" width=\"224\" height=\"112\">\n          <rect fill=\"#000\" height=\"112\" width=\"224\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#fff\" height=\"112\" rx=\"4\" width=\"224\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#000\" height=\"66\" rx=\"4\" width=\"154\" x=\"35\" y=\"23\"></rect>\n        </mask>\n        <defs>\n          <linearGradient id=\"FuseLinearGradient\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <stop stop-color=\"white\"></stop>\n            <stop offset=\"1\" stop-color=\"white\" stop-opacity=\"0\"></stop>\n          </linearGradient>\n        </defs>\n\n        <!--MARGIN TOP SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'top')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'top')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  h224\n  l-36,24\n  h-152\n  l-36,-24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  h224\n  l-36,24\n  h-152\n  l-36,-24z\n  \"\n              fill-opacity=\"0.12\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"url(#FuseLinearGradient)\"\n              d=\"\n  m0,0\n  h224\n  l-36,24\n  h-152\n  l-36,-24z\n  \"\n              fill-opacity=\"0.02\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n        <!--MARGIN RIGHT SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'right')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'right')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m224,0\n  v112\n  l-36,-24\n  v-64\n  l36,-24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m224,0\n  v112\n  l-36,-24\n  v-64\n  l36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n        <!--MARGIN BOTTOM SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'bottom')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'bottom')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,112\n  h224\n  l-36,-24\n  h-152\n  l-36,24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,112\n  h224\n  l-36,-24\n  h-152\n  l-36,24z\n  \"\n              fill-opacity=\"0.064\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n        <!--MARGIN LEFT SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'left')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'left')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  v112\n  l36,-24\n  v-64\n  l-36,-24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  v112\n  l36,-24\n  v-64\n  l-36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n      </svg>\n\n      <!--MARGIN TOP VALUE-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 1 / 2 / 2 / 3\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 1 / 2 / 2 / 3\">\n          <span>{{ calculatedValues().margin.top + ' ' + units().margin.top }}</span>\n        </div>\n      </div>\n\n      <!--MARGIN RIGHT VALUE-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 2 / 3 / 3 / 4\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 3 / 3 / 4\">\n          <span>{{ calculatedValues().margin.right + ' ' + units().margin.right }}</span>\n        </div>\n      </div>\n\n      <!--MARGIN BOTTOM VALUE-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 3 / 2 / 4 / 3\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 3 / 2 / 4 / 3\">\n          <span>{{ calculatedValues().margin.bottom + ' ' + units().margin.bottom }}</span>\n        </div>\n      </div>\n\n      <!--MARGIN LEFT VALUE-->\n      <div tabindex=\"0\" style=\"grid-area: 2 / 1 / 3 / 2\" class=\"axp-spacing-value-container\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 1 / 3 / 2\">\n          <span>{{ calculatedValues().margin.left + ' ' + units().margin.left }}</span>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"axp-spacing-padding-box\">\n      <!--SVG DEFINE-->\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"150\" height=\"62\" class=\"area\">\n        <mask id=\"padding-mask\" width=\"150\" height=\"62\">\n          <rect fill=\"#000\" height=\"60\" width=\"150\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#fff\" height=\"60\" rx=\"2\" width=\"150\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#000\" height=\"14\" rx=\"2\" width=\"80\" x=\"35\" y=\"23\"></rect>\n        </mask>\n\n        <!--PADDING TOP SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'top')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'top')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  h150\n  l-36,24\n  h-78\n  l-36,-24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  h150\n  l-36,24\n  h-78\n  l-36,-24z\n  \"\n              fill-opacity=\"0.064\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n\n        <!--PADDING RIGHT SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'right')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'right')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m150,0\n  v60\n  l-36,-24\n  v-12\n  l36,-24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m150,0\n  v60\n  l-36,-24\n  v-12\n  l36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n\n        <!--PADDING BOTTOM SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'bottom')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'bottom')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,60\n  h150\n  l-36,-24\n  h-78\n  l-36,24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,60\n  h150\n  l-36,-24\n  h-78\n  l-36,24z\n  \"\n              fill-opacity=\"0.12\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n\n        <!--PADDING LEFT SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'left')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'left')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  v60\n  l36,-24\n  v-12\n  l-36,-24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  v60\n  l36,-24\n  v-12\n  l-36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n      </svg>\n\n      <!--PADDING TOP SVG-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 1 / 2 / 2 / 3\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 1 / 2 / 2 / 3\">\n          <span>{{ this.calculatedValues().padding.top + ' ' + units().padding.top }}</span>\n        </div>\n      </div>\n\n      <!--PADDING RIGHT SVG-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 2 / 3 / 3 / 4\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 3 / 3 / 4\">\n          <span>{{ this.calculatedValues().padding.right + ' ' + units().padding.right }}</span>\n        </div>\n      </div>\n\n      <!--PADDING BOTTOM SVG-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 3 / 2 / 4 / 3\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 3 / 2 / 4 / 3\">\n          <span>{{ this.calculatedValues().padding.bottom + ' ' + units().padding.bottom }}</span>\n        </div>\n      </div>\n\n      <!--PADDING LEFT SVG-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 2 / 1 / 3 / 2\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 1 / 3 / 2\">\n          <span>{{ this.calculatedValues().padding.left + ' ' + units().padding.left }}</span>\n        </div>\n      </div>\n    </div>\n\n    <!--PADDING TEXT-->\n    <svg class=\"axp-spacing-padding-text\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\">\n      <text x=\"5\" y=\"10\" fill=\"white\" font-weight=\"500\" font-size=\"7\">PADDING</text>\n    </svg>\n\n    <!--MARGIN TEXT-->\n    <svg class=\"axp-spacing-margin-text\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\">\n      <text x=\"5\" y=\"10\" fill=\"white\" font-weight=\"500\" font-size=\"7\">MARGIN</text>\n    </svg>\n\n    <!-- Ctrl hint -->\n    <!-- <div class=\"ax-text-xs ax-text-center ax-text-neutral-400 ax-mt-1\">\n      Hold Ctrl while dragging to adjust all sides\n    </div> -->\n  </div>\n</div>\n\n<ng-template #template let-type=\"type\" let-side=\"side\" let-value=\"value\">\n  <div\n    class=\"axp-spacing-popup-container\"\n    (keydown.control.b)=\"setSpacing(originalValues()[this.current().type][this.current().side], type, side)\"\n  >\n    <div class=\"axp-spacing-popover\">\n      <!--SET EMPTY-->\n      <div class=\"ax-size-4 ax-cursor-pointer\" (click)=\"setSpacing(0, type, side)\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path opacity=\"0.4\" d=\"M14 2L14 13L10 13L10 2L14 2Z\" fill=\"currentColor\" fill-opacity=\"0.67\"></path>\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M7.99995 7L7.99995 1H8.99995L8.99995 14H7.99995L7.99995 8L3.70706 8L5.85351 10.1464L5.1464 10.8536L1.79285 7.5L5.1464 4.14645L5.85351 4.85355L3.70706 7L7.99995 7Z\"\n            fill=\"currentColor\"\n          ></path>\n        </svg>\n      </div>\n\n      <div class=\"ax-flex ax-justify-center ax-h-6 ax-flex-col\">\n        <input\n          type=\"range\"\n          name=\"range\"\n          [min]=\"0\"\n          [max]=\"200\"\n          [value]=\"this.calculatedValues()[this.current().type][this.current().side]\"\n          (input)=\"setSpacing($event, type, side)\"\n        />\n      </div>\n      <div>\n        <!--INPUT NUMBER-->\n        <div style=\"--local-gap: 8px\">\n          <div\n            style=\"\n              gap: 8px;\n              height: auto;\n              display: flex;\n              flex-flow: column;\n              -webkit-box-align: stretch;\n              align-items: stretch;\n              -webkit-box-pack: start;\n              position: relative;\n              justify-content: stretch;\n              width: 100%;\n              -webkit-box-flex: 1;\n              flex-grow: 1;\n            \"\n          >\n            <ax-number-box\n              class=\"ax-sm\"\n              [minValue]=\"0\"\n              [changeOnScroll]=\"true\"\n              [ngModel]=\"value\"\n              (onValueChanged)=\"setSpacing($event.value ?? 0, type, side)\"\n              [showSpinButtons]=\"false\"\n            >\n              <ax-suffix>\n                <ax-dropdown-button [text]=\"getSpacingUnitLabel(type, side)\" [look]=\"'blank'\" [mode]=\"'dropdown'\">\n                  <ax-button-item-list>\n                    @for (u of spacingUnits; track $index) {\n                      <ax-button-item\n                        [text]=\"u.toUpperCase()\"\n                        [selected]=\"getSpacingUnit(type, side) === u\"\n                        (onClick)=\"onSpacingUnitChange(u, type, side)\"\n                      ></ax-button-item>\n                    }\n                  </ax-button-item-list>\n                </ax-dropdown-button>\n              </ax-suffix>\n            </ax-number-box>\n          </div>\n        </div>\n      </div>\n      <div class=\"axp-spacing-template-values\">\n        @for (i of FixedValues; track $index) {\n          <div\n            (click)=\"setSpacing(i.value, type, side)\"\n            class=\"hover:!ax-bg-gradient-to-b hover:!ax-from-white/20 hover:!ax-to-white/5 !ax-cursor-pointer\"\n            [class]=\"i.colspan ? 'ax-col-span-' + i.colspan : ''\"\n            [class]=\"i.rowspan ? 'ax-row-span-' + i.rowspan : ''\"\n            tabindex=\"0\"\n            style=\"\n              border-bottom-color: var(--color-border-1);\n              border-left-color: var(--color-border-1);\n              border-right-color: var(--color-border-1);\n              border-top-color: var(--color-border-1);\n              outline: 0px;\n              cursor: default;\n              user-select: none;\n              padding: 0px;\n              box-sizing: border-box;\n              font-family: inherit;\n              font-size: inherit;\n              --component-icon-color: var(--color-text-secondary);\n              position: relative;\n              display: flex;\n              align-items: center;\n              justify-content: center;\n              height: 100%;\n              border-radius: 4px;\n              color: var(--color-action-secondary-text);\n              background: var(--color-action-secondary-background);\n              border-width: 0px;\n              border-style: solid;\n              box-shadow: var(--box-shadows-action-secondary);\n              align-self: center;\n            \"\n          >\n            <div class=\"ax-truncate\">\n              {{ i.label }}\n              <span class=\"ax-text-xs ax-text-neutral-400\">\n                {{ units()[this.current().type][this.current().side] }}</span\n              >\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n\n    <div class=\"ax-h-[1px] ax-mt-1 ax-mb-1 ax-bg-border-1 ax-pointer-events-none\"></div>\n\n    <div\n      [class.ax-opacity-50]=\"\n        originalValues()[this.current().type][this.current().side] ===\n        calculatedValues()[this.current().type][this.current().side]\n      \"\n      (click)=\"setSpacing(originalValues()[this.current().type][this.current().side], type, side)\"\n      tabindex=\"0\"\n      class=\"ax-outline-none ax-select-none ax-py-1 ax-px-2 ax-my-1 ax-min-h-6 ax-cursor-pointer hover:!ax-bg-[#404040]\"\n    >\n      <div class=\"ax-flex ax-flex-row ax-items-center\">\n        <div class=\"ax-min-w-6 ax-self-center ax-grow ax-basis-0\">\n          <div class=\"ax-items-center ax-box-border ax-grid ax-grid-cols-[16px_1fr_auto] ax-gap-x-2 ax-gap-y-1\">\n            <div class=\"ax-size-4\">\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  d=\"M3.70712 5.00004L6.35357 2.35359L5.64646 1.64648L1.79291 5.50004L5.64646 9.35359L6.35357 8.64648L3.70712 6.00004H10C11.6569 6.00004 13 7.34318 13 9.00004C13 10.6569 11.6569 12 10 12H8.00001V13H10C12.2092 13 14 11.2092 14 9.00004C14 6.7909 12.2092 5.00004 10 5.00004H3.70712Z\"\n                  fill=\"currentColor\"\n                ></path>\n              </svg>\n            </div>\n            <div>Reset</div>\n          </div>\n        </div>\n        <div class=\"ax-self-center\">\n          <div\n            class=\"ax-cursor-default ax-select-none ax-text-[11.5px] ax-font-normal ax-leading-4 ax-tracking-tight ax-text-secondary ax-justify-self-end ax-ml-[1px]\"\n          >\n            <span><kbd>Ctrl</kbd> + <kbd>B</kbd></span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ax-popover #popover [openOn]=\"'click'\" [offsetY]=\"10\" [closeOn]=\"'clickOut'\">\n  <ng-container\n    [ngTemplateOutlet]=\"template\"\n    [ngTemplateOutletContext]=\"{\n      type: this.current().type,\n      side: this.current().side,\n      value: this.calculatedValues()[this.current().type][this.current().side],\n    }\"\n  ></ng-container>\n</ax-popover>\n", styles: [".axp-spacing-box{--color-text-secondary: rgba(255, 255, 255, .67);--color-ui-scrollbar-thumb: rgba(255, 255, 255, .67);--color-background-1: #292929;--color-text-secondary: white;--color-border-2: rgba(255, 255, 255, .16);--color-changed: rgb(167, 209, 255);--color-background: rgba(0, 106, 204, .18)}.axp-spacing-box .axp-spacing-inner-box{transform:scale(1.2);position:relative;display:grid;width:224px;height:112px;grid-template-columns:36px 1px 36px 1fr 36px 1px 36px;grid-template-rows:24px 2px 24px 1fr 24px 2px 24px;outline-style:none;cursor:default;-webkit-user-select:none;user-select:none}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-value-container{pointer-events:none;border:none;outline:0px;cursor:default;-webkit-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;place-self:center;padding:2px;height:auto;width:auto;font-family:inherit;font-size:inherit;position:relative;border-radius:4px;color:var(--color-text-secondary);background:transparent;box-sizing:border-box;box-shadow:none}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-value-container .axp-spacing-value-field{cursor:default;-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;font-weight:400;line-height:10px;letter-spacing:-.115px;display:flex;color:var(--color-text-secondary);background:transparent;padding:2px;margin:0;border-radius:2px;max-width:100%;box-sizing:content-box;place-self:center;position:relative;opacity:1;align-items:center;justify-content:center}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-margin-box{border-radius:4px;grid-area:1/1/-1/-1;display:grid;grid-template-columns:36px 1fr 36px;grid-template-rows:24px minmax(8px,1fr) 24px;justify-items:center;width:224px;height:112px}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-padding-box{border-radius:4px;grid-area:3/3/span 3/span 3;display:grid;grid-template-columns:36px 1fr 36px;grid-template-rows:24px minmax(8px,1fr) 24px;justify-items:center;width:150px;height:60px}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-padding-text{grid-area:3/3/span 3/span 3;pointer-events:none;position:relative}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-margin-text{grid-area:1/1/-1/-1;pointer-events:none;position:relative}.axp-spacing-popup-container{--color-action-secondary-text: white;--color-action-secondary-background: linear-gradient( 180deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .11) 100% );--box-shadows-action-secondary: 0px .5px 1px rgba(0, 0, 0, .8), inset 0px .5px .5px rgba(255, 255, 255, .12);--color-border-1: rgba(255, 255, 255, .13);max-width:239px;min-width:201px;background:#353535;border-radius:.5rem;color:var(--color-text-secondary, white);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,Helvetica,Arial,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,sans-serif;font-size:11.5px;line-height:16px}.axp-spacing-popup-container .axp-spacing-popover{display:grid;grid-template-columns:16px 1fr 56px;grid-template-rows:24px 1fr;align-items:center;gap:8px;width:241px;padding:8px}.axp-spacing-popup-container .axp-spacing-popover .axp-spacing-template-values{display:grid;grid-area:2/1/3/-1;grid-template-columns:repeat(5,1fr);grid-template-rows:24px 24px;gap:4px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]{-webkit-appearance:none;appearance:none;width:100%;cursor:pointer;outline:none;overflow:hidden;border-radius:12px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-webkit-slider-runnable-track{height:10px;background:#ccc;border-radius:12px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-moz-range-track{height:10px;background:#ccc;border-radius:12px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:10px;width:10px;background-color:#fff;border-radius:50%;border:1px solid #353535;box-shadow:-407px 0 0 400px #29292970}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-moz-range-thumb{height:10px;width:10px;background-color:#fff;border-radius:50%;border:1px solid #353535;box-shadow:-407px 0 0 400px #29292970}.area{grid-area:1/1/-1/-1;overflow:hidden;border-radius:2px;filter:drop-shadow(rgba(255,255,255,.2) 0px -.5px 0px) drop-shadow(rgba(0,0,0,.4) 0px 0px 1px) drop-shadow(rgba(0,0,0,.2) 0px 1px 0px)}\n"], dependencies: [{ kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$7.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "minValue", "maxValue", "showSpinButtons", "thousandsSeparator", "decimals", "changeOnScroll", "step"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "thousandsSeparatorChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i3$7.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "repositionOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXRangeSliderModule }, { kind: "ngmodule", type: AXButtonModule }, { 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: AXDropdownButtonModule }, { kind: "component", type: i6.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "color", "look", "text", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPSpacingWidgetEditComponent, decorators: [{
             type: Component,
@@ -24075,7 +24191,7 @@ class AXPListToolbarWidgetViewComponent extends AXPValueWidgetComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPListToolbarWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AXPListToolbarWidgetViewComponent, isStandalone: true, selector: "axp-list-toolbar-widget-view", usesInheritance: true, ngImport: i0, template: "<div class=\"ax-flex ax-items-center ax-gap-2 ax-border-b ax-border-light w-full\">\n  @if (canFilter()) {\n    <axp-query-filters\n      [filtersDefinitions]=\"filterDefinitions()\"\n      [initialFilters]=\"initialFilters()\"\n      (onFiltersChanged)=\"onFiltersChanged($event)\"\n    ></axp-query-filters>\n  }\n  <div class=\"ax-flex ax-items-center ax-gap-1 md:ax-gap-2\">\n    @if (filterTriggerMode() === 'manual' && isFiltersDirty()) {\n      <ax-button\n        [title]=\"'@general:actions.apply.title'\"\n        [iconOnly]=\"true\"\n        #filterButton\n        [color]=\"'primary'\"\n        (onClick)=\"applyFilters()\"\n      >\n        <ax-prefix>\n          <i class=\"fa-light fa-search\"></i>\n        </ax-prefix>\n      </ax-button>\n    }\n    @if (canColumns()) {\n      <ax-button [iconOnly]=\"true\" #columnButton [color]=\"'default'\">\n        <i class=\"fa-light fa-table-columns\"></i>\n      </ax-button>\n      <ax-popover\n        [adaptivityEnabled]=\"true\"\n        [offsetY]=\"30\"\n        [target]=\"columnButton\"\n        [openOn]=\"'toggle'\"\n        [closeOn]=\"'clickOut'\"\n        #popover\n      >\n        <div class=\"ax-lightest-surface ax-shadow-md ax-border md:ax-w-72 ax-w-full ax-rounded-md\">\n          <ax-header class=\"ax-border-b ax-lighter-surface ax-rounded-t-md ax-p-4 ax-font-bold\">\n            {{ '@general:terms.common.columns' | translate | async }}\n          </ax-header>\n          <div class=\"ax-py-2 ax-px-4\">\n            <axp-query-columns\n              [columns]=\"columnDefinitions()\"\n              (columnsChange)=\"onColumnsChanged($event)\"\n            ></axp-query-columns>\n          </div>\n        </div>\n      </ax-popover>\n    }\n    @if (canSort()) {\n      <ax-button [iconOnly]=\"true\" [text]=\"'Sorts'\" #sortButton [color]=\"'default'\">\n        <i class=\"fa-light fa-sort-amount-up\"></i>\n      </ax-button>\n      <ax-popover\n        [adaptivityEnabled]=\"true\"\n        [offsetY]=\"10\"\n        [target]=\"sortButton\"\n        [openOn]=\"'toggle'\"\n        [closeOn]=\"'clickOut'\"\n        #popover\n      >\n        <div class=\"ax-lightest-surface ax-shadow-md ax-border md:ax-w-72 ax-w-full ax-rounded-md\">\n          <ax-header class=\"ax-border-b ax-lighter-surface ax-rounded-t-md ax-p-4 ax-font-bold\">\n            {{ '@general:terms.common.sorts' | translate | async }}\n          </ax-header>\n          <div class=\"ax-py-2 ax-px-4\">\n            <axp-query-sorts\n              [sortDefinitions]=\"sortDefinitions()\"\n              (sortQueriesChange)=\"onSortsChanged($event)\"\n              [initialSortQueries]=\"initialSorts()\"\n            ></axp-query-sorts>\n          </div>\n        </div>\n      </ax-popover>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: AXDecoratorModule }, { 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: AXTranslationModule }, { kind: "component", type: AXPQueryFiltersComponent, selector: "axp-query-filters", inputs: ["filtersDefinitions", "initialFilters"], outputs: ["onFiltersChanged"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i3$7.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "forceDisableActionSheetStyle", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "repositionOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXPQuerySortsComponent, selector: "axp-query-sorts", inputs: ["sortDefinitions", "initialSortQueries"], outputs: ["sortDefinitionsChange", "sortQueriesChange"] }, { kind: "component", type: AXPQueryColumnsComponent, selector: "axp-query-columns", inputs: ["columns"], outputs: ["columnsChange"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AXPListToolbarWidgetViewComponent, isStandalone: true, selector: "axp-list-toolbar-widget-view", usesInheritance: true, ngImport: i0, template: "<div class=\"ax-flex ax-items-center ax-gap-2 ax-border-b ax-border-light w-full\">\n  @if (canFilter()) {\n    <axp-query-filters\n      [filtersDefinitions]=\"filterDefinitions()\"\n      [initialFilters]=\"initialFilters()\"\n      (onFiltersChanged)=\"onFiltersChanged($event)\"\n    ></axp-query-filters>\n  }\n  <div class=\"ax-flex ax-items-center ax-gap-1 md:ax-gap-2\">\n    @if (filterTriggerMode() === 'manual' && isFiltersDirty()) {\n      <ax-button\n        [title]=\"'@general:actions.apply.title'\"\n        [iconOnly]=\"true\"\n        #filterButton\n        [color]=\"'primary'\"\n        (onClick)=\"applyFilters()\"\n      >\n        <ax-prefix>\n          <i class=\"fa-light fa-search\"></i>\n        </ax-prefix>\n      </ax-button>\n    }\n    @if (canColumns()) {\n      <ax-button [iconOnly]=\"true\" #columnButton [color]=\"'default'\">\n        <i class=\"fa-light fa-table-columns\"></i>\n      </ax-button>\n      <ax-popover\n        [adaptivityEnabled]=\"true\"\n        [offsetY]=\"30\"\n        [target]=\"columnButton\"\n        [openOn]=\"'toggle'\"\n        [closeOn]=\"'clickOut'\"\n        #popover\n      >\n        <div class=\"ax-lightest-surface ax-shadow-md ax-border md:ax-w-72 ax-w-full ax-rounded-md\">\n          <ax-header class=\"ax-border-b ax-lighter-surface ax-rounded-t-md ax-p-4 ax-font-bold\">\n            {{ '@general:terms.common.columns' | translate | async }}\n          </ax-header>\n          <div class=\"ax-py-2 ax-px-4\">\n            <axp-query-columns\n              [columns]=\"columnDefinitions()\"\n              (columnsChange)=\"onColumnsChanged($event)\"\n            ></axp-query-columns>\n          </div>\n        </div>\n      </ax-popover>\n    }\n    @if (canSort()) {\n      <ax-button [iconOnly]=\"true\" [text]=\"'Sorts'\" #sortButton [color]=\"'default'\">\n        <i class=\"fa-light fa-sort-amount-up\"></i>\n      </ax-button>\n      <ax-popover\n        [adaptivityEnabled]=\"true\"\n        [offsetY]=\"10\"\n        [target]=\"sortButton\"\n        [openOn]=\"'toggle'\"\n        [closeOn]=\"'clickOut'\"\n        #popover\n      >\n        <div class=\"ax-lightest-surface ax-shadow-md ax-border md:ax-w-72 ax-w-full ax-rounded-md\">\n          <ax-header class=\"ax-border-b ax-lighter-surface ax-rounded-t-md ax-p-4 ax-font-bold\">\n            {{ '@general:terms.common.sorts' | translate | async }}\n          </ax-header>\n          <div class=\"ax-py-2 ax-px-4\">\n            <axp-query-sorts\n              [sortDefinitions]=\"sortDefinitions()\"\n              (sortQueriesChange)=\"onSortsChanged($event)\"\n              [initialSortQueries]=\"initialSorts()\"\n            ></axp-query-sorts>\n          </div>\n        </div>\n      </ax-popover>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: AXDecoratorModule }, { 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: AXTranslationModule }, { kind: "component", type: AXPQueryFiltersComponent, selector: "axp-query-filters", inputs: ["filtersDefinitions", "initialFilters"], outputs: ["onFiltersChanged"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i3$7.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "repositionOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXPQuerySortsComponent, selector: "axp-query-sorts", inputs: ["sortDefinitions", "initialSortQueries"], outputs: ["sortDefinitionsChange", "sortQueriesChange"] }, { kind: "component", type: AXPQueryColumnsComponent, selector: "axp-query-columns", inputs: ["columns"], outputs: ["columnsChange"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPListToolbarWidgetViewComponent, decorators: [{
             type: Component,
@@ -24934,7 +25050,7 @@ class AXPFilterOperationsComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPFilterOperationsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AXPFilterOperationsComponent, isStandalone: true, selector: "axp-filter-operations", inputs: { selectedOperation: { classPropertyName: "selectedOperation", publicName: "selectedOperation", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedOperation: "selectedOperationChange" }, ngImport: i0, template: "@if(operations().length){\n<ax-button #changeOperator look=\"blank\" color=\"default\" class=\"ax-sm\">\n  <ax-icon class=\"fa-solid fa-ellipsis-vertical\"></ax-icon>\n</ax-button>\n<ax-popover\n  #operatorsPopover\n  [target]=\"changeOperator\"\n  [openOn]=\"'toggle'\"\n  [closeOn]=\"'clickOut'\"\n  [adaptivityEnabled]=\"true\"\n>\n  <div\n    class=\"ax-max-h-max ax-overflow-auto ax-bg-lightest ax-py-5 ax-px-3 ax-border ax-border-default ax-rounded-md ax-shadow-md ax-w-full ax-min-w-[250px]\"\n  >\n    <ax-selection-list\n      class=\"\"\n      [valueField]=\"'name'\"\n      [textField]=\"'title'\"\n      [(ngModel)]=\"selectedOperation\"\n      (ngModelChange)=\"operatorsPopover.close()\"\n      [direction]=\"'vertical'\"\n      [items]=\"operations()\"\n      [multiple]=\"false\"\n    ></ax-selection-list>\n  </div>\n</ax-popover>\n}\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i3$7.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "forceDisableActionSheetStyle", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "repositionOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { 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: AXSelectionListModule }, { kind: "component", type: i2$4.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "size", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AXPFilterOperationsComponent, isStandalone: true, selector: "axp-filter-operations", inputs: { selectedOperation: { classPropertyName: "selectedOperation", publicName: "selectedOperation", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedOperation: "selectedOperationChange" }, ngImport: i0, template: "@if(operations().length){\n<ax-button #changeOperator look=\"blank\" color=\"default\" class=\"ax-sm\">\n  <ax-icon class=\"fa-solid fa-ellipsis-vertical\"></ax-icon>\n</ax-button>\n<ax-popover\n  #operatorsPopover\n  [target]=\"changeOperator\"\n  [openOn]=\"'toggle'\"\n  [closeOn]=\"'clickOut'\"\n  [adaptivityEnabled]=\"true\"\n>\n  <div\n    class=\"ax-max-h-max ax-overflow-auto ax-bg-lightest ax-py-5 ax-px-3 ax-border ax-border-default ax-rounded-md ax-shadow-md ax-w-full ax-min-w-[250px]\"\n  >\n    <ax-selection-list\n      class=\"\"\n      [valueField]=\"'name'\"\n      [textField]=\"'title'\"\n      [(ngModel)]=\"selectedOperation\"\n      (ngModelChange)=\"operatorsPopover.close()\"\n      [direction]=\"'vertical'\"\n      [items]=\"operations()\"\n      [multiple]=\"false\"\n    ></ax-selection-list>\n  </div>\n</ax-popover>\n}\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i3$7.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "repositionOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { 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: AXSelectionListModule }, { kind: "component", type: i2$4.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "size", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPFilterOperationsComponent, decorators: [{
             type: Component,