@acorex/platform 19.4.4 → 19.4.6

package/fesm2022/acorex-platform-widgets.mjs

@@ -12,7 +12,7 @@ import { AXLoadingModule } from '@acorex/components/loading';
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { computed, EventEmitter, ChangeDetectionStrategy, Component, inject, afterNextRender, HostBinding, signal, ViewEncapsulation, InjectionToken, effect, ViewChild, untracked, CUSTOM_ELEMENTS_SCHEMA, input, ChangeDetectorRef, viewChild, ElementRef, afterRender, NgZone, model, linkedSignal, HostListener, importProvidersFrom, NgModule } from '@angular/core';
+import { computed, EventEmitter, ChangeDetectionStrategy, Component, inject, afterNextRender, HostBinding, signal, ViewEncapsulation, InjectionToken, effect, ViewChild, CUSTOM_ELEMENTS_SCHEMA, untracked, Injectable, output, input, ChangeDetectorRef, viewChild, ElementRef, afterRender, NgZone, model, linkedSignal, HostListener, importProvidersFrom, NgModule } from '@angular/core';
 import * as i1 from '@acorex/components/check-box';
 import { AXCheckBoxModule } from '@acorex/components/check-box';
 import * as i4 from '@acorex/components/form';
@@ -54,20 +54,19 @@ import * as i5$1 from '@acorex/components/search-box';
 import { AXSearchBoxModule } from '@acorex/components/search-box';
 import * as i2$5 from '@acorex/components/selection-list';
 import { AXSelectionListModule } from '@acorex/components/selection-list';
-import { first, Subscription } from 'rxjs';
-import { AXFileService } from '@acorex/core/file';
+import { first } from 'rxjs';
 import * as i6$1 from '@acorex/components/dropdown';
 import { AXDropdownModule } from '@acorex/components/dropdown';
 import * as i2$6 from '@acorex/components/switch';
 import { AXSwitchModule } from '@acorex/components/switch';
-import * as i2$7 from '@acorex/components/uploader';
-import { AXUploaderModule } from '@acorex/components/uploader';
-import { AXLoadingDialogService } from '@acorex/components/loading-dialog';
+import { AXFileService } from '@acorex/core/file';
 import * as i5$2 from '@acorex/platform/layout/components';
 import { AXPComponentSlotModule } from '@acorex/platform/layout/components';
+import { AXPDataGenerator, objectKeyValueTransforms } from '@acorex/platform/core';
+import { AXUploaderModule } from '@acorex/components/uploader';
 import * as i1$5 from '@acorex/components/media-viewer';
 import { AXMediaViewerModule } from '@acorex/components/media-viewer';
-import * as i2$8 from '@acorex/components/image';
+import * as i2$7 from '@acorex/components/image';
 import { AXImageModule } from '@acorex/components/image';
 import * as i1$6 from '@acorex/components/map';
 import { AXMapModule } from '@acorex/components/map';
@@ -78,11 +77,11 @@ import * as i1$8 from '@acorex/components/button-group';
 import { AXButtonGroupModule } from '@acorex/components/button-group';
 import * as i7$1 from '@acorex/components/range-slider';
 import { AXRangeSliderModule } from '@acorex/components/range-slider';
-import * as i2$9 from '@acorex/components/color-box';
+import * as i2$8 from '@acorex/components/color-box';
 import { AXColorBoxModule } from '@acorex/components/color-box';
 import * as i1$9 from '@acorex/components/popover';
 import { AXPopoverComponent, AXPopoverModule } from '@acorex/components/popover';
-import * as i2$a from '@acorex/components/cron-job';
+import * as i2$9 from '@acorex/components/cron-job';
 import { AXCronJobModule } from '@acorex/components/cron-job';
 import * as i1$a from '@acorex/components/qrcode';
 import { AXQrcodeModule } from '@acorex/components/qrcode';
@@ -90,11 +89,10 @@ import { AXColorUtil } from '@acorex/core/utils';
 import * as i6$2 from '@acorex/components/dropdown-button';
 import { AXDropdownButtonModule } from '@acorex/components/dropdown-button';
 import { AXDataTableModule } from '@acorex/components/data-table';
-import * as i2$b from '@acorex/components/time-duration';
+import * as i2$a from '@acorex/components/time-duration';
 import { AXTimeDurationModule } from '@acorex/components/time-duration';
 import * as i1$b from '@acorex/components/collapse';
 import { AXCollapseModule } from '@acorex/components/collapse';
-import { objectKeyValueTransforms } from '@acorex/platform/core';
 import { DomSanitizer } from '@angular/platform-browser';
 
 const AXP_STYLING_PROPERTY_GROUP = {
@@ -824,6 +822,22 @@ const AXP_LAYOUT_SHOW_HEADER_PROPERTY = createBooleanProperty({
     path: 'options.showHeader',
     defaultValue: true,
 });
+const AXP_LAYOUT_DIRECTION_PROPERTY = {
+    name: 'direction',
+    title: 'Direction',
+    group: AXP_BOX_MODEL_PROPERTY_GROUP,
+    schema: {
+        dataType: 'string',
+        defaultValue: 'ltr',
+        interface: {
+            name: 'direction',
+            path: 'options.direction',
+            type: AXPWidgetsCatalog.direction,
+            options: {},
+        },
+    },
+    visible: true,
+};
 
 const AXP_TABLE_COLUMN_WIDTH_PROPERTY = {
     name: 'width',
@@ -2776,7 +2790,7 @@ class AXPLargeTextWidgetEditComponent extends AXPValueWidgetComponent {
     }
     ngOnInit() {
         super.ngOnInit();
-        console.log(this.multiLanguage());
+        //console.log(this.multiLanguage());
         this.getCurrentLanguage();
     }
     handleValueChange(e) {
@@ -5730,278 +5744,6 @@ const AXPSelectionListWidget = {
     },
 };
 
-class AXPSingleFileBoxWidgetColumnComponent extends AXPValueWidgetComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPSingleFileBoxWidgetColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: AXPSingleFileBoxWidgetColumnComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: ``, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPSingleFileBoxWidgetColumnComponent, decorators: [{
-            type: Component,
-            args: [{
-                    template: ``,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule],
-                    inputs: [],
-                }]
-        }] });
-
-var singleFileBoxWidgetColumn_component = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    AXPSingleFileBoxWidgetColumnComponent: AXPSingleFileBoxWidgetColumnComponent
-});
-
-class AXPSingleFileBoxWidgetEditComponent extends AXPValueWidgetComponent {
-    constructor() {
-        super(...arguments);
-        this.showPreview = computed(() => this.options()['showPreview']);
-        this.refId = computed(() => this.options()['refId']);
-        this.refType = computed(() => this.options()['refType']);
-        this.fileService = inject(AXFileService);
-        this.fileStorage = inject(AXPFileStorageService);
-        this.url = signal(null);
-        this.isEmpty = computed(() => this.url() == null);
-        this.markedAsCommited = null;
-        this.markedAsDeleted = null;
-        this.#effect1 = effect(async () => {
-            const fileId = this.getValue();
-            await untracked(async () => {
-                try {
-                    if (fileId) {
-                        this.setStatus(AXPWidgetStatus.Processing);
-                        const info = await this.fileStorage.getInfo(fileId);
-                        this.url.set(info.url ? info.url : null);
-                    }
-                    else {
-                        this.url.set(null);
-                    }
-                    this.setStatus(AXPWidgetStatus.Rendered);
-                }
-                catch (error) {
-                    this.setStatus(AXPWidgetStatus.Error);
-                }
-            });
-        });
-        this.#effect2 = effect(async () => {
-            const status = this.layoutService.status();
-            if (status == AXPPageStatus.Submitted) {
-                if (this.markedAsCommited) {
-                    await this.fileStorage.commit(this.markedAsCommited);
-                    this.markedAsCommited = null;
-                }
-                if (this.markedAsDeleted) {
-                    await this.fileStorage.markForDeletion(this.markedAsDeleted);
-                    this.markedAsDeleted = null;
-                }
-            }
-        });
-    }
-    #effect1;
-    #effect2;
-    async chooseFile() {
-        const files = await this.fileService.choose({ accept: 'image/png, image/jpeg' });
-        const file = files[0];
-        const base64 = await this.fileService.blobToBase64(file);
-        this.url.set(base64);
-        // start upload
-        const info = await this.fileStorage.save({
-            category: 'company-logo',
-            file: file,
-            refId: this.refId(),
-            refType: this.refType(),
-            isPrimary: true,
-        });
-        this.markedAsCommited = info.fileId;
-        this.setValue(info.fileId);
-    }
-    async handleChange() {
-        await this.chooseFile();
-    }
-    async handleRemove() {
-        this.markedAsDeleted = this.getValue();
-        this.setValue(null);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPSingleFileBoxWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXPSingleFileBoxWidgetEditComponent, isStandalone: true, selector: "axp-single-file-box-widget", usesInheritance: true, ngImport: i0, template: `
-    @if(showPreview()) { @if(isBusy()) {
-    <div class="axp-empty axp-state-loading">
-      <i class="fa-solid fa-spinner-third fa-spin"></i>
-    </div>
-    } @else if(!url()) {
-    <div class="axp-empty" (click)="handleChange()" [class.axp-state-error]="this.status() == 'error'">
-      <i class="fa-solid fa-camera ax-text-3xl ax-text-gray-400"></i>
-    </div>
-    } @else {
-    <div class="axp-content" [class.axp-state-error]="this.status() == 'error'">
-      <div [style.backgroundImage]="url() ? 'url(' + url() + ')' : ''"></div>
-      <div>
-        <div (click)="handleChange()">
-          <i class="fa-solid fa-camera "></i>
-        </div>
-        <div (click)="handleRemove()">
-          <i class="fa-light fa-trash-can  "></i>
-        </div>
-      </div>
-    </div>
-    } }@else {
-    <div>
-      <p>Upload</p>
-    </div>
-    }
-  `, isInline: true, styles: ["axp-avatar-widget-edit .axp-empty{height:11rem;width:11rem;cursor:pointer;border-radius:.375rem;border-width:2px;border-style:dashed;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-surface),var(--tw-bg-opacity, 1));display:flex;align-items:center;justify-content:center}axp-avatar-widget-edit .axp-empty.axp-state-error{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-danger-surface),var(--tw-border-opacity, 1))}axp-avatar-widget-edit .axp-empty:hover{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-primary-surface),var(--tw-border-opacity, 1))}axp-avatar-widget-edit .axp-empty.axp-state-loading{--fa-animation-duration: .7s}axp-avatar-widget-edit .axp-empty.axp-state-loading i{font-size:1.875rem;line-height:2.25rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-primary-500),var(--tw-text-opacity, 1))}axp-avatar-widget-edit .axp-empty.axp-state-loading i:is(.ax-dark *){--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-primary-400),var(--tw-text-opacity, 1))}axp-avatar-widget-edit .axp-content{cursor:pointer;overflow:hidden;border-radius:.375rem;border-width:1px;display:flex}axp-avatar-widget-edit .axp-content.axp-state-error{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-danger-surface),var(--tw-border-opacity, 1))}axp-avatar-widget-edit .axp-content>:first-child{border-start-start-radius:.375rem;border-end-start-radius:.375rem;background-size:cover;background-position:center;height:11rem;width:11rem;border-inline-end-width:1px}axp-avatar-widget-edit .axp-content>:last-child{display:flex;flex-direction:column}axp-avatar-widget-edit .axp-content>:last-child>:not([hidden])~:not([hidden]){--tw-divide-y-reverse: 0;border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px * var(--tw-divide-y-reverse))}axp-avatar-widget-edit .axp-content>:last-child{overflow:hidden}axp-avatar-widget-edit .axp-content>:last-child>div{display:flex;width:5rem;flex:1 1 0%;align-items:center;justify-content:center;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-surface),var(--tw-bg-opacity, 1))}axp-avatar-widget-edit .axp-content>:last-child>div:hover{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-darkest-surface),var(--tw-bg-opacity, 1))}axp-avatar-widget-edit .axp-content>:last-child>div>i{font-size:1.5rem;line-height:2rem}axp-avatar-widget-edit .axp-content>:last-child>:first-child{--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-on-surface),var(--tw-text-opacity, 1))}axp-avatar-widget-edit .axp-content>:last-child>:last-child{--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-danger-500),var(--tw-text-opacity, 1))}axp-avatar-widget-edit .axp-content>:last-child>:last-child:is(.ax-dark *){--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-danger-800),var(--tw-text-opacity, 1))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXButtonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPSingleFileBoxWidgetEditComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'axp-single-file-box-widget', template: `
-    @if(showPreview()) { @if(isBusy()) {
-    <div class="axp-empty axp-state-loading">
-      <i class="fa-solid fa-spinner-third fa-spin"></i>
-    </div>
-    } @else if(!url()) {
-    <div class="axp-empty" (click)="handleChange()" [class.axp-state-error]="this.status() == 'error'">
-      <i class="fa-solid fa-camera ax-text-3xl ax-text-gray-400"></i>
-    </div>
-    } @else {
-    <div class="axp-content" [class.axp-state-error]="this.status() == 'error'">
-      <div [style.backgroundImage]="url() ? 'url(' + url() + ')' : ''"></div>
-      <div>
-        <div (click)="handleChange()">
-          <i class="fa-solid fa-camera "></i>
-        </div>
-        <div (click)="handleRemove()">
-          <i class="fa-light fa-trash-can  "></i>
-        </div>
-      </div>
-    </div>
-    } }@else {
-    <div>
-      <p>Upload</p>
-    </div>
-    }
-  `, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        CommonModule,
-                        AXTextBoxModule,
-                        FormsModule,
-                        AXFormModule,
-                        AXDecoratorModule,
-                        AXValidationModule,
-                        AXButtonModule,
-                    ], inputs: [], styles: ["axp-avatar-widget-edit .axp-empty{height:11rem;width:11rem;cursor:pointer;border-radius:.375rem;border-width:2px;border-style:dashed;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-surface),var(--tw-bg-opacity, 1));display:flex;align-items:center;justify-content:center}axp-avatar-widget-edit .axp-empty.axp-state-error{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-danger-surface),var(--tw-border-opacity, 1))}axp-avatar-widget-edit .axp-empty:hover{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-primary-surface),var(--tw-border-opacity, 1))}axp-avatar-widget-edit .axp-empty.axp-state-loading{--fa-animation-duration: .7s}axp-avatar-widget-edit .axp-empty.axp-state-loading i{font-size:1.875rem;line-height:2.25rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-primary-500),var(--tw-text-opacity, 1))}axp-avatar-widget-edit .axp-empty.axp-state-loading i:is(.ax-dark *){--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-primary-400),var(--tw-text-opacity, 1))}axp-avatar-widget-edit .axp-content{cursor:pointer;overflow:hidden;border-radius:.375rem;border-width:1px;display:flex}axp-avatar-widget-edit .axp-content.axp-state-error{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-danger-surface),var(--tw-border-opacity, 1))}axp-avatar-widget-edit .axp-content>:first-child{border-start-start-radius:.375rem;border-end-start-radius:.375rem;background-size:cover;background-position:center;height:11rem;width:11rem;border-inline-end-width:1px}axp-avatar-widget-edit .axp-content>:last-child{display:flex;flex-direction:column}axp-avatar-widget-edit .axp-content>:last-child>:not([hidden])~:not([hidden]){--tw-divide-y-reverse: 0;border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px * var(--tw-divide-y-reverse))}axp-avatar-widget-edit .axp-content>:last-child{overflow:hidden}axp-avatar-widget-edit .axp-content>:last-child>div{display:flex;width:5rem;flex:1 1 0%;align-items:center;justify-content:center;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-surface),var(--tw-bg-opacity, 1))}axp-avatar-widget-edit .axp-content>:last-child>div:hover{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-darkest-surface),var(--tw-bg-opacity, 1))}axp-avatar-widget-edit .axp-content>:last-child>div>i{font-size:1.5rem;line-height:2rem}axp-avatar-widget-edit .axp-content>:last-child>:first-child{--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-on-surface),var(--tw-text-opacity, 1))}axp-avatar-widget-edit .axp-content>:last-child>:last-child{--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-danger-500),var(--tw-text-opacity, 1))}axp-avatar-widget-edit .axp-content>:last-child>:last-child:is(.ax-dark *){--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-danger-800),var(--tw-text-opacity, 1))}\n"] }]
-        }] });
-
-var singleFileBoxWidgetEdit_component = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    AXPSingleFileBoxWidgetEditComponent: AXPSingleFileBoxWidgetEditComponent
-});
-
-class AXPSingleFileBoxWidgetFilterComponent extends AXPValueWidgetComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPSingleFileBoxWidgetFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: AXPSingleFileBoxWidgetFilterComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: ``, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPSingleFileBoxWidgetFilterComponent, decorators: [{
-            type: Component,
-            args: [{
-                    template: ``,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule, FormsModule],
-                    inputs: [],
-                }]
-        }] });
-
-var singleFileBoxWidgetFilter_component = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    AXPSingleFileBoxWidgetFilterComponent: AXPSingleFileBoxWidgetFilterComponent
-});
-
-class AXPSingleFileBoxWidgetPrintComponent extends AXPValueWidgetComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPSingleFileBoxWidgetPrintComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: AXPSingleFileBoxWidgetPrintComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: ``, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPSingleFileBoxWidgetPrintComponent, decorators: [{
-            type: Component,
-            args: [{
-                    template: ``,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule],
-                    inputs: [],
-                }]
-        }] });
-
-var singleFileBoxWidgetPrint_component = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    AXPSingleFileBoxWidgetPrintComponent: AXPSingleFileBoxWidgetPrintComponent
-});
-
-class AXPSingleFileBoxWidgetViewComponent extends AXPValueWidgetComponent {
-    constructor() {
-        super(...arguments);
-        this.internalValue = computed(() => (Array.isArray(this.getValue()) ? this.getValue() : [this.getValue()]));
-        this.multiple = computed(() => this.options()['multiple']);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPSingleFileBoxWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXPSingleFileBoxWidgetViewComponent, isStandalone: true, selector: "axp-single-file-box-widget", usesInheritance: true, ngImport: i0, template: `
-    <div>
-      @if(multiple()) { @for (item of internalValue(); track $index) {
-      <p>{{ item }}</p>
-      } }@else {
-      <p>{{ internalValue()[0] }}</p>
-      }
-    </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPSingleFileBoxWidgetViewComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'axp-single-file-box-widget',
-                    template: `
-    <div>
-      @if(multiple()) { @for (item of internalValue(); track $index) {
-      <p>{{ item }}</p>
-      } }@else {
-      <p>{{ internalValue()[0] }}</p>
-      }
-    </div>
-  `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule],
-                    inputs: [],
-                }]
-        }] });
-
-var singleFileBoxWidgetView_component = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    AXPSingleFileBoxWidgetViewComponent: AXPSingleFileBoxWidgetViewComponent
-});
-
-const AXPSingleFileBoxWidget = {
-    name: 'single-file-box-editor',
-    title: 'SingleFileBox',
-    icon: 'fa-light fa-cube',
-    description: 'Single Upload and show file',
-    categories: AXP_WIDGETS_EDITOR_CATEGORY,
-    type: 'editor',
-    defaultFilterWidgetName: 'string-filter',
-    properties: [AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY],
-    components: {
-        view: {
-            component: () => Promise.resolve().then(function () { return singleFileBoxWidgetView_component; }).then((c) => c.AXPSingleFileBoxWidgetViewComponent),
-        },
-        edit: {
-            component: () => Promise.resolve().then(function () { return singleFileBoxWidgetEdit_component; }).then((c) => c.AXPSingleFileBoxWidgetEditComponent),
-        },
-        filter: {
-            component: () => Promise.resolve().then(function () { return singleFileBoxWidgetFilter_component; }).then((c) => c.AXPSingleFileBoxWidgetFilterComponent),
-        },
-        column: {
-            component: () => Promise.resolve().then(function () { return singleFileBoxWidgetColumn_component; }).then((c) => c.AXPSingleFileBoxWidgetColumnComponent),
-        },
-        print: {
-            component: () => Promise.resolve().then(function () { return singleFileBoxWidgetPrint_component; }).then((c) => c.AXPSingleFileBoxWidgetPrintComponent),
-        },
-        designer: {
-            component: () => Promise.resolve().then(function () { return singleFileBoxWidgetEdit_component; }).then((c) => c.AXPSingleFileBoxWidgetEditComponent),
-        },
-    },
-};
-
 class AXPTemplateBoxWidgetColumnComponent extends AXPValueWidgetComponent {
     constructor() {
         super(...arguments);
@@ -7249,532 +6991,53 @@ const AXPAvatarWidget = {
     },
 };
 
-class AXPFileBoxWidgetColumnComponent extends AXPValueWidgetComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPFileBoxWidgetColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: AXPFileBoxWidgetColumnComponent, isStandalone: true, selector: "ng-component", inputs: { rawValue: "rawValue" }, usesInheritance: true, ngImport: i0, template: ``, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+class AXPFileUploaderWidgetService {
+    constructor() {
+        this.popupService = inject(AXPopupService);
+        this.translate = inject(AXTranslationService);
+    }
+    async showFileList(options) {
+        const defaultOptions = {
+            files: [],
+            readOnly: false,
+            multiple: false,
+            accept: '*',
+        };
+        options = { ...defaultOptions, ...options };
+        const component = await import('./acorex-platform-widgets-file-list-popup.component-TNxbcVav.mjs').then(m => m.AXPFileListPopupComponent);
+        const result = await this.popupService.open(component, {
+            title: (await this.translate.translateAsync('@document-management:file')),
+            data: {
+                files: signal(options.files),
+                readOnly: signal(options.readOnly),
+                multiple: signal(options.multiple),
+                accept: signal(options.accept),
+            },
+        });
+        return result?.data?.data?.files;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPFileUploaderWidgetService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPFileUploaderWidgetService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPFileBoxWidgetColumnComponent, decorators: [{
-            type: Component,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPFileUploaderWidgetService, decorators: [{
+            type: Injectable,
             args: [{
-                    template: ``,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule],
-                    inputs: ['rawValue']
+                    providedIn: 'root'
                 }]
         }] });
 
-var fileBoxWidgetColumn_component = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    AXPFileBoxWidgetColumnComponent: AXPFileBoxWidgetColumnComponent
-});
-
-class AXPFileBoxWidgetEditComponent extends AXPValueWidgetComponent {
+class AXPFileUploaderWidgetColumnComponent extends AXPColumnWidgetComponent {
     constructor() {
         super(...arguments);
-        this.fileStorage = inject(AXPFileStorageService);
-        this.fileTypeService = inject(AXPFileTypeProviderService);
-        this.isLoading = signal(true);
-        this.fileTypes = signal([]);
-        this.multiple = computed(() => this.options()['multiple']);
-        this.accept = computed(() => this.options()['accept']);
-        this.description = computed(() => this.options()['description']);
-        this.metaData = computed(() => this.options()['metaData']);
-        this.refId = computed(() => this.options()['refId']);
-        this.refType = computed(() => this.options()['refType']);
-        this.markedListAsCommitted = null;
-        this.markedListAsDeleted = null;
+        this.count = computed(() => castArray(this.rawValue).length);
+        this.fileService = inject(AXPFileUploaderWidgetService);
     }
-    async ngOnInit() {
-        super.ngOnInit();
-        this.fileTypes.set(await this.fileTypeService.items());
-        this.isLoading.set(false);
-    }
-    async ngOnDestroy() {
-        const status = this.layoutService.status();
-        if (status == AXPPageStatus.Submitted) {
-            if (this.markedListAsCommitted) {
-                for (const fileId of this.markedListAsCommitted) {
-                    await this.fileStorage.commit(fileId);
-                }
-                this.markedListAsCommitted = null;
-            }
-            if (this.markedListAsDeleted) {
-                for (const fileId of this.markedListAsDeleted) {
-                    await this.fileStorage.markForDeletion(fileId);
-                }
-                this.markedListAsDeleted = null;
-            }
-        }
-    }
-    async handleOnFileRemove(file) {
-        this.setValue(this.getValue().filter((f) => f.fileId !== file.fileId));
-        await this.fileStorage.markForDeletion(file.fileId);
-    }
-    handleOnFileUploadComplete(e) { }
-    handleOnFilesUploadComplete(e) { }
-    async handleChanged(e) {
-        console.log(e);
-        const results = [];
-        for (var i = 0; i < e.requests.length; i++) {
-            results.push(await this.fileStorage.save({
-                category: 'file-upload',
-                file: e.requests[i].file,
-                refId: this.refId(),
-                refType: this.refType(),
-                isPrimary: true,
-                name: e.requests[i].file.name,
-            }));
-            e.requests[i].finish({
-                id: results[i].fileId,
-            });
-        }
-        if (!this.multiple()) {
-            if (results.length > 0 && results[0].fileId) {
-                console.log(results[0]);
-                this.setValue([results[0]]);
-                this.markedListAsCommitted = [results[0].fileId];
-            }
-        }
-        else {
-            console.log(results);
-            this.setValue([...(this.getValue() ?? []), ...results]);
-            this.markedListAsCommitted = [...(this.markedListAsCommitted ?? []), ...results.map((r) => r.fileId)];
-        }
-    }
-    getFileInfo(fileName) {
-        const extension = fileName.split('.').pop()?.toLowerCase() || '';
-        const extensions = this.fileTypes().flatMap((t) => t.extensions);
-        const fileType = extensions.find((e) => e.name === extension);
-        return {
-            icon: fileType?.icon || 'fa-light fa-file',
-            type: fileType?.name || 'Unknown',
-        };
-    }
-    get __class() {
-        const cls = {};
-        cls[`ax-block`] = true;
-        cls[`ax-flex-1`] = true;
-        return cls;
-    }
-    async handleFileDownload(event, file) {
-        event.stopPropagation();
-        const link = document.createElement('a');
-        link.href = file.url ?? '';
-        link.download = file.name ?? ''; // Set the desired file name
-        document.body.appendChild(link);
-        link.click();
-        document.body.removeChild(link);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPFileBoxWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXPFileBoxWidgetEditComponent, isStandalone: true, selector: "axp-file-widget-edit", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `
-    @if(isLoading()){<ax-loading></ax-loading>}@else{
-    <div class="ax-grid ax-grid-cols-12">
-      <div class="ax-col-span-12">
-        <ax-uploader-drop-zone
-          axUploaderZone
-          (onChanged)="handleChanged($event)"
-          [multiple]="multiple()"
-          [accept]="accept()"
-          [description]="description()"
-          (onFileUploadComplete)="handleOnFileUploadComplete($event)"
-          (onFilesUploadComplete)="handleOnFilesUploadComplete($event)"
-        ></ax-uploader-drop-zone>
-      </div>
-    </div>
-    <div class="__content fa-xl">
-      @for (file of getValue(); track $index) { @let fileInfo = getFileInfo(file.name!);
-      <div class="__explorer-item">
-        <div class="__icon">
-          <i class="fa-fw {{ fileInfo.icon }} fa-solid"></i>
-        </div>
-        <div class="__name">{{ file.name }}</div>
-        <div class="ax-flex ax-gap-2 ax-ml-auto">
-          <ax-icon
-            class="fa-regular fa-download ax-text-lg ax-cursor-pointer hover:ax-text-primary"
-            (click)="handleFileDownload($event, file)"
-          ></ax-icon>
-          <ax-icon
-            class="fa-regular ax-text-lg fa-trash ax-cursor-pointer hover:ax-text-danger"
-            (click)="handleOnFileRemove(file)"
-          ></ax-icon>
-        </div>
-      </div>
-      }
-    </div>
-    }
-  `, isInline: true, styles: [":host{width:100%}:host .__content{display:flex;flex-direction:column;gap:.125rem}:host .__content .__explorer-item{display:flex;cursor:pointer;align-items:center;gap:.75rem;border-radius:.375rem;padding:.5rem}:host .__content .__explorer-item:hover{background-color:rgb(var(--ax-sys-color-light-surface));color:rgb(var(--ax-sys-color-on-light-surface));border-color:rgb(var(--ax-sys-color-border-light-surface))}:host .__content .__explorer-item .__icon{width:1.5rem;flex-shrink:0}:host .__content .__explorer-item .__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start;font-size:.875rem;line-height:1.25rem;font-weight:500}:host .__content .__explorer-item.--selected{background-color:rgb(var(--ax-sys-color-darker-surface));color:rgb(var(--ax-sys-color-on-darker-surface));border-color:rgb(var(--ax-sys-color-border-darker-surface))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXUploaderModule }, { kind: "component", type: i2$7.AXUploaderDropZoneComponent, selector: "ax-uploader-drop-zone", inputs: ["description"] }, { kind: "directive", type: i2$7.AXUploaderZoneDirective, selector: "[axUploaderZone]", inputs: ["multiple", "accept"], outputs: ["onChanged", "onFileUploadComplete", "onFilesUploadComplete"] }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i2$1.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPFileBoxWidgetEditComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'axp-file-widget-edit', template: `
-    @if(isLoading()){<ax-loading></ax-loading>}@else{
-    <div class="ax-grid ax-grid-cols-12">
-      <div class="ax-col-span-12">
-        <ax-uploader-drop-zone
-          axUploaderZone
-          (onChanged)="handleChanged($event)"
-          [multiple]="multiple()"
-          [accept]="accept()"
-          [description]="description()"
-          (onFileUploadComplete)="handleOnFileUploadComplete($event)"
-          (onFilesUploadComplete)="handleOnFilesUploadComplete($event)"
-        ></ax-uploader-drop-zone>
-      </div>
-    </div>
-    <div class="__content fa-xl">
-      @for (file of getValue(); track $index) { @let fileInfo = getFileInfo(file.name!);
-      <div class="__explorer-item">
-        <div class="__icon">
-          <i class="fa-fw {{ fileInfo.icon }} fa-solid"></i>
-        </div>
-        <div class="__name">{{ file.name }}</div>
-        <div class="ax-flex ax-gap-2 ax-ml-auto">
-          <ax-icon
-            class="fa-regular fa-download ax-text-lg ax-cursor-pointer hover:ax-text-primary"
-            (click)="handleFileDownload($event, file)"
-          ></ax-icon>
-          <ax-icon
-            class="fa-regular ax-text-lg fa-trash ax-cursor-pointer hover:ax-text-danger"
-            (click)="handleOnFileRemove(file)"
-          ></ax-icon>
-        </div>
-      </div>
-      }
-    </div>
-    }
-  `, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, AXButtonModule, AXDecoratorModule, AXUploaderModule, AXLoadingModule], inputs: [], styles: [":host{width:100%}:host .__content{display:flex;flex-direction:column;gap:.125rem}:host .__content .__explorer-item{display:flex;cursor:pointer;align-items:center;gap:.75rem;border-radius:.375rem;padding:.5rem}:host .__content .__explorer-item:hover{background-color:rgb(var(--ax-sys-color-light-surface));color:rgb(var(--ax-sys-color-on-light-surface));border-color:rgb(var(--ax-sys-color-border-light-surface))}:host .__content .__explorer-item .__icon{width:1.5rem;flex-shrink:0}:host .__content .__explorer-item .__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start;font-size:.875rem;line-height:1.25rem;font-weight:500}:host .__content .__explorer-item.--selected{background-color:rgb(var(--ax-sys-color-darker-surface));color:rgb(var(--ax-sys-color-on-darker-surface));border-color:rgb(var(--ax-sys-color-border-darker-surface))}\n"] }]
-        }], propDecorators: { __class: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-var fileBoxWidgetEdit_component = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    AXPFileBoxWidgetEditComponent: AXPFileBoxWidgetEditComponent
-});
-
-class AXPFileBoxWidgetFilterComponent extends AXPValueWidgetComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPFileBoxWidgetFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: AXPFileBoxWidgetFilterComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: ``, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPFileBoxWidgetFilterComponent, decorators: [{
-            type: Component,
-            args: [{
-                    template: ``,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule, FormsModule],
-                    inputs: []
-                }]
-        }] });
-
-var fileBoxWidgetFilter_component = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    AXPFileBoxWidgetFilterComponent: AXPFileBoxWidgetFilterComponent
-});
-
-class AXPFileBoxWidgetPrintComponent extends AXPValueWidgetComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPFileBoxWidgetPrintComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: AXPFileBoxWidgetPrintComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: ``, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPFileBoxWidgetPrintComponent, decorators: [{
-            type: Component,
-            args: [{
-                    template: ``,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule],
-                    inputs: []
-                }]
-        }] });
-
-var fileBoxWidgetPrint_component = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    AXPFileBoxWidgetPrintComponent: AXPFileBoxWidgetPrintComponent
-});
-
-class AXPFileBoxWidgetViewComponent extends AXPValueWidgetComponent {
-    constructor() {
-        super(...arguments);
-        this.fileStorageService = inject(AXPFileStorageService);
-        this.loadingDialog = inject(AXLoadingDialogService);
-        this.translateService = inject(AXTranslationService);
-        this.multiple = computed(() => this.options()['multiple']);
-        this.downloadable = computed(() => this.options()['downloadable']);
-        this.internalValue = signal([]);
-        this.downloadSubscription = new Subscription();
-    }
-    ngOnInit() {
-        this.updateInternalValue();
-        super.ngOnInit();
-    }
-    async handleDownload(item) {
-        const d = this.loadingDialog.show({
-            title: await this.translateService.translateAsync('downloader.dialog.downloading'), // Downloading File
-            mode: 'determinate',
-            progressColor: 'primary',
-            progressValue: 0,
-            text: await this.translateService.translateAsync('downloader.dialog.waiting'), // Waiting...
-            buttons: [
-                {
-                    text: await this.translateService.translateAsync('downloader.dialog.cancel'),
-                    color: 'danger',
-                    onClick: () => {
-                        this.cancelDownload();
-                        d.close();
-                    },
-                },
-            ],
-        });
-    }
-    cancelDownload() {
-        this.downloadSubscription.unsubscribe();
-    }
-    triggerDownload(blob, name) {
-        const link = document.createElement('a');
-        const url = URL.createObjectURL(blob);
-        link.href = url;
-        link.download = name || 'asset';
-        document.body.appendChild(link);
-        link.click();
-        document.body.removeChild(link);
-        URL.revokeObjectURL(url);
-    }
-    getFileInfo(extension) {
-        switch (extension) {
-            case 'txt':
-                return { icon: 'fa-file-alt', color: 'ax-bg-blue-100 ax-text-blue-500' };
-            case 'pdf':
-                return { icon: 'fa-file-pdf', color: 'ax-bg-red-100 ax-text-red-500' };
-            case 'doc':
-            case 'docx':
-                return { icon: 'fa-file-word', color: 'ax-bg-blue-200 ax-text-blue-600' };
-            case 'xls':
-            case 'xlsx':
-                return { icon: 'fa-file-excel', color: 'ax-bg-green-100 ax-text-green-500' };
-            case 'ppt':
-            case 'pptx':
-                return { icon: 'fa-file-powerpoint', color: 'ax-bg-orange-100 ax-text-orange-500' };
-            case 'jpg':
-            case 'jpeg':
-            case 'png':
-            case 'gif':
-            case 'bmp':
-                return { icon: 'fa-file-image', color: 'ax-bg-purple-100 ax-text-purple-500' };
-            case 'zip':
-            case 'rar':
-            case '7z':
-                return { icon: 'fa-file-archive', color: 'ax-bg-yellow-100 ax-text-yellow-500' };
-            case 'mp3':
-            case 'wav':
-            case 'ogg':
-                return { icon: 'fa-file-audio', color: 'ax-bg-pink-100 ax-text-pink-500' };
-            case 'mp4':
-            case 'avi':
-            case 'mkv':
-            case 'mov':
-                return { icon: 'fa-file-video', color: 'ax-bg-blue-100 ax-text-blue-500' };
-            case 'js':
-            case 'jsx':
-            case 'ts':
-            case 'tsx':
-                return { icon: 'fa-file-code', color: 'ax-bg-yellow-100 ax-text-yellow-500' };
-            // Add more cases as needed for other file types
-            default:
-                return { icon: 'fa-file', color: 'ax-bg-gray-100 ax-text-gray-500' };
-        }
-    }
-    async updateInternalValue() {
-        if (!this.getValue()) {
-            this.internalValue.set([]);
-        }
-        else {
-            if (Array.isArray(this.getValue())) {
-                this.internalValue.set(await Promise.all(this.getValue().map(async (item) => await this.fileStorageService.getInfo(item))));
-            }
-            else {
-                this.internalValue.set([await this.fileStorageService.getInfo(this.getValue())]);
-            }
-        }
-        console.log(this.internalValue());
-        console.log(this.getValue());
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPFileBoxWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXPFileBoxWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
-    <div class="ax-grid ax-grid-cols-12 ax-gap-2">
-      @if (multiple()) { @for (item of internalValue(); track item.fileId) {
-      <ng-template [ngTemplateOutlet]="itemTemplate" ] [ngTemplateOutletContext]="{ data: item }" ]></ng-template>
-      } } @else {
-      <ng-template
-        [ngTemplateOutlet]="itemTemplate"
-        ]
-        [ngTemplateOutletContext]="{ data: internalValue()[0] }"
-        ]
-      ></ng-template>
-      }
-      <ng-template #itemTemplate let-item="data">
-        <div
-          *ngIf="item"
-          class="ax-flex ax-items-center ax-justify-between ax-p-2 ax-border ax-rounded-lg ax-bg-surface ax-col-start-1 ax-col-end-13"
-        >
-          <div class="ax-flex ax-items-center ax-gap-3">
-            <ng-container *ngIf="getFileInfo(item.mimeType) as fileInfo">
-              <div
-                class="ax-w-10 ax-h-10 ax-rounded-lg ax-flex ax-items-center ax-justify-center"
-                [ngClass]="[fileInfo.color]"
-              >
-                <i [ngClass]="['fa-solid', 'ax-text-xl', fileInfo.icon]"></i>
-              </div>
-            </ng-container>
-            <div>
-              <div class="ax-leading-6">{{ item.fileId }}</div>
-              <p class="ax-text-sm ax-text-neutral-400">{{ item.size }}</p>
-            </div>
-          </div>
-          @if (downloadable()) {
-          <ax-button
-            (onClick)="handleDownload(item)"
-            look="blank"
-            class="!ax-text-neutral-400 hover:!ax-text-neutral-600"
-          >
-            <ax-icon>
-              <i class="fa-solid fa-download"></i>
-            </ax-icon>
-          </ax-button>
-          }
-        </div>
-      </ng-template>
-    </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPFileBoxWidgetViewComponent, decorators: [{
-            type: Component,
-            args: [{
-                    template: `
-    <div class="ax-grid ax-grid-cols-12 ax-gap-2">
-      @if (multiple()) { @for (item of internalValue(); track item.fileId) {
-      <ng-template [ngTemplateOutlet]="itemTemplate" ] [ngTemplateOutletContext]="{ data: item }" ]></ng-template>
-      } } @else {
-      <ng-template
-        [ngTemplateOutlet]="itemTemplate"
-        ]
-        [ngTemplateOutletContext]="{ data: internalValue()[0] }"
-        ]
-      ></ng-template>
-      }
-      <ng-template #itemTemplate let-item="data">
-        <div
-          *ngIf="item"
-          class="ax-flex ax-items-center ax-justify-between ax-p-2 ax-border ax-rounded-lg ax-bg-surface ax-col-start-1 ax-col-end-13"
-        >
-          <div class="ax-flex ax-items-center ax-gap-3">
-            <ng-container *ngIf="getFileInfo(item.mimeType) as fileInfo">
-              <div
-                class="ax-w-10 ax-h-10 ax-rounded-lg ax-flex ax-items-center ax-justify-center"
-                [ngClass]="[fileInfo.color]"
-              >
-                <i [ngClass]="['fa-solid', 'ax-text-xl', fileInfo.icon]"></i>
-              </div>
-            </ng-container>
-            <div>
-              <div class="ax-leading-6">{{ item.fileId }}</div>
-              <p class="ax-text-sm ax-text-neutral-400">{{ item.size }}</p>
-            </div>
-          </div>
-          @if (downloadable()) {
-          <ax-button
-            (onClick)="handleDownload(item)"
-            look="blank"
-            class="!ax-text-neutral-400 hover:!ax-text-neutral-600"
-          >
-            <ax-icon>
-              <i class="fa-solid fa-download"></i>
-            </ax-icon>
-          </ax-button>
-          }
-        </div>
-      </ng-template>
-    </div>
-  `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule, AXButtonModule, AXDecoratorModule],
-                    inputs: [],
-                }]
-        }] });
-
-var fileBoxWidgetView_component = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    AXPFileBoxWidgetViewComponent: AXPFileBoxWidgetViewComponent
-});
-
-const AXPFileBoxWidget = {
-    name: 'file',
-    title: 'File',
-    description: 'Uploads and manages files',
-    icon: 'fa-light fa-files',
-    categories: AXP_WIDGETS_ADVANCE_CATEGORY,
-    type: 'editor',
-    properties: [
-        AXP_NAME_PROPERTY,
-        AXP_DATA_PATH_PROPERTY,
-        AXP_ALLOW_MULTIPLE_PROPERTY,
-        AXP_DOWNLOADABLE_PROPERTY,
-        AXP_DESCRIPTION_PROPERTY,
-        {
-            name: 'accept',
-            title: 'Accept',
-            group: AXP_BEHAVIOR_PROPERTY_GROUP,
-            schema: {
-                dataType: 'string',
-                interface: {
-                    name: 'accept',
-                    path: 'options.accept',
-                    type: AXPWidgetsCatalog.text,
-                },
-            },
-            visible: true,
-        },
-    ],
-    components: {
-        view: {
-            component: () => Promise.resolve().then(function () { return fileBoxWidgetView_component; }).then((c) => c.AXPFileBoxWidgetViewComponent),
-        },
-        edit: {
-            component: () => Promise.resolve().then(function () { return fileBoxWidgetEdit_component; }).then((c) => c.AXPFileBoxWidgetEditComponent),
-        },
-        filter: {
-            component: () => Promise.resolve().then(function () { return fileBoxWidgetFilter_component; }).then((c) => c.AXPFileBoxWidgetFilterComponent),
-        },
-        column: {
-            component: () => Promise.resolve().then(function () { return fileBoxWidgetColumn_component; }).then((c) => c.AXPFileBoxWidgetColumnComponent),
-        },
-        print: {
-            component: () => Promise.resolve().then(function () { return fileBoxWidgetPrint_component; }).then((c) => c.AXPFileBoxWidgetPrintComponent),
-        },
-        designer: {
-            component: () => Promise.resolve().then(function () { return fileBoxWidgetEdit_component; }).then((c) => c.AXPFileBoxWidgetEditComponent),
-        },
-    },
-};
-
-class AXPFileManagementService {
-}
-
-class AXPFileUploaderWidgetColumnComponent extends AXPColumnWidgetComponent {
-    constructor() {
-        super(...arguments);
-        this.count = computed(() => castArray(this.rawValue).length);
-        this.popupService = inject(AXPopupService);
-        this.translate = inject(AXTranslationService);
-    }
-    async openFileList() {
-        const component = await Promise.resolve().then(function () { return fileList_component; }).then(m => m.AXPFileListComponent);
-        const files = this.rawValue;
-        this.popupService.open(component, {
-            title: (await this.translate.translateAsync('@document-management:file')),
-            data: {
-                readOnly: signal(true),
-                files: signal(files)
-            }
-        });
+    async openFileList() {
+        const files = this.rawValue;
+        this.fileService.showFileList({
+            files: files,
+            readOnly: true,
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPFileUploaderWidgetColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: AXPFileUploaderWidgetColumnComponent, isStandalone: true, selector: "ng-component", inputs: { rawValue: "rawValue", rowData: "rowData" }, usesInheritance: true, ngImport: i0, template: `
@@ -7809,8 +7072,10 @@ class AXPFileListComponent {
         this.fileTypeService = inject(AXPFileTypeProviderService);
         this.isLoading = signal(true);
         this.fileTypes = signal([]);
+        this.onRemove = output();
         this.readOnly = input(false);
         this.files = input([]);
+        this.displayFiles = computed(() => this.files().filter(file => file.status !== 'deleted'));
     }
     async ngOnInit() {
         this.fileTypes.set(await this.fileTypeService.items());
@@ -7826,11 +7091,10 @@ class AXPFileListComponent {
         };
     }
     async handleFileDownload(file) {
-        debugger;
-        if (!(file instanceof Blob)) {
+        if (file.source?.kind !== 'blob' || !(file.source.value instanceof Blob)) {
             throw new Error('This action expects a File or Blob object');
         }
-        const url = URL.createObjectURL(file);
+        const url = URL.createObjectURL(file.source.value);
         const link = document.createElement('a');
         link.href = url;
         link.download = file.name ?? ''; // Set the desired file name
@@ -7840,11 +7104,12 @@ class AXPFileListComponent {
         URL.revokeObjectURL(url);
     }
     async handleFileRemove(file) {
+        this.onRemove.emit(file);
     }
     ngOnDestroy() {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPFileListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXPFileListComponent, isStandalone: true, selector: "axp-file-list", inputs: { readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: false, transformFunction: null } }, providers: [], ngImport: i0, template: "@for (file of files(); track $index) {\n  <div class=\"__item\">\n    <div class=\"__icon\">\n      <i class=\"fa-fw {{ getFileInfo(file.name).icon }} fa-solid\"></i>\n    </div>\n    <div class=\"__name\">{{ file.name }}</div>\n    <div class=\"__actions\">\n      <ax-button [look]=\"'blank'\" class=\"ax-sm\" color=\"primary\" (onClick)=\"handleFileDownload(file)\">\n        <ax-icon class=\"fa-light fa-download\"></ax-icon>\n      </ax-button>\n      @if (!readOnly()) {\n        <ax-button [look]=\"'blank'\" class=\"ax-sm\" color=\"danger\" (onClick)=\"handleFileRemove(file)\">\n          <ax-icon class=\"fa-light fa-trash-can\"></ax-icon>\n        </ax-button>\n      }\n    </div>\n  </div>\n} @empty {\n  <div class=\"ax-text-center ax-text-muted ax-text-sm\">\n    {{ '@document-management:no-files' | translate | async }}\n  </div>\n}\n", styles: [":host{display:flex;width:100%;flex-direction:column;gap:.125rem;padding-top:.5rem;padding-bottom:.5rem}:host .__item{display:flex;cursor:pointer;align-items:center;gap:.75rem;border-radius:.375rem;padding:.5rem}:host .__item:hover{background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}:host .__item .__icon{width:1.5rem;flex-shrink:0}:host .__item .__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start;font-size:.875rem;line-height:1.25rem;font-weight:500}:host .__item .__actions{margin-left:auto;display:flex}\n"], dependencies: [{ kind: "ngmodule", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXPFileListComponent, isStandalone: true, selector: "axp-file-list", inputs: { readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onRemove: "onRemove" }, providers: [], ngImport: i0, template: "@for (file of displayFiles(); track $index) {\n  <div class=\"__item\">\n    <div class=\"__icon\">\n      <i class=\"fa-fw {{ getFileInfo(file.name).icon }} fa-solid\"></i>\n    </div>\n    <div class=\"__name\">{{ file.name }}</div>\n    <div class=\"__actions\">\n      <ax-button [look]=\"'blank'\" class=\"ax-sm\" color=\"primary\" (onClick)=\"handleFileDownload(file)\">\n        <ax-icon class=\"fa-light fa-download\"></ax-icon>\n      </ax-button>\n      @if (!readOnly()) {\n        <ax-button [look]=\"'blank'\" class=\"ax-sm\" color=\"danger\" (onClick)=\"handleFileRemove(file)\">\n          <ax-icon class=\"fa-light fa-trash-can\"></ax-icon>\n        </ax-button>\n      }\n    </div>\n  </div>\n} @empty {\n  <div class=\"ax-text-center ax-text-muted ax-text-sm ax-p-4\">\n    {{ '@document-management:no-files' | translate | async }}\n  </div>\n}\n", styles: [":host{display:flex;width:100%;flex-direction:column;gap:.125rem;padding-top:.5rem;padding-bottom:.5rem}:host .__item{display:flex;cursor:pointer;align-items:center;gap:.75rem;border-radius:.375rem;padding:.5rem}:host .__item:hover{background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}:host .__item .__icon{width:1.5rem;flex-shrink:0}:host .__item .__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start;font-size:.875rem;line-height:1.25rem;font-weight:500}:host .__item .__actions{margin-left:auto;display:flex}\n"], dependencies: [{ kind: "ngmodule", type: 
                 // Angular
                 CommonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: 
                 // ACoreX
@@ -7864,20 +7129,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                         AXDecoratorModule,
                         AXTranslationModule
                         // Platform
-                    ], providers: [], template: "@for (file of files(); track $index) {\n  <div class=\"__item\">\n    <div class=\"__icon\">\n      <i class=\"fa-fw {{ getFileInfo(file.name).icon }} fa-solid\"></i>\n    </div>\n    <div class=\"__name\">{{ file.name }}</div>\n    <div class=\"__actions\">\n      <ax-button [look]=\"'blank'\" class=\"ax-sm\" color=\"primary\" (onClick)=\"handleFileDownload(file)\">\n        <ax-icon class=\"fa-light fa-download\"></ax-icon>\n      </ax-button>\n      @if (!readOnly()) {\n        <ax-button [look]=\"'blank'\" class=\"ax-sm\" color=\"danger\" (onClick)=\"handleFileRemove(file)\">\n          <ax-icon class=\"fa-light fa-trash-can\"></ax-icon>\n        </ax-button>\n      }\n    </div>\n  </div>\n} @empty {\n  <div class=\"ax-text-center ax-text-muted ax-text-sm\">\n    {{ '@document-management:no-files' | translate | async }}\n  </div>\n}\n", styles: [":host{display:flex;width:100%;flex-direction:column;gap:.125rem;padding-top:.5rem;padding-bottom:.5rem}:host .__item{display:flex;cursor:pointer;align-items:center;gap:.75rem;border-radius:.375rem;padding:.5rem}:host .__item:hover{background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}:host .__item .__icon{width:1.5rem;flex-shrink:0}:host .__item .__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start;font-size:.875rem;line-height:1.25rem;font-weight:500}:host .__item .__actions{margin-left:auto;display:flex}\n"] }]
+                    ], providers: [], template: "@for (file of displayFiles(); track $index) {\n  <div class=\"__item\">\n    <div class=\"__icon\">\n      <i class=\"fa-fw {{ getFileInfo(file.name).icon }} fa-solid\"></i>\n    </div>\n    <div class=\"__name\">{{ file.name }}</div>\n    <div class=\"__actions\">\n      <ax-button [look]=\"'blank'\" class=\"ax-sm\" color=\"primary\" (onClick)=\"handleFileDownload(file)\">\n        <ax-icon class=\"fa-light fa-download\"></ax-icon>\n      </ax-button>\n      @if (!readOnly()) {\n        <ax-button [look]=\"'blank'\" class=\"ax-sm\" color=\"danger\" (onClick)=\"handleFileRemove(file)\">\n          <ax-icon class=\"fa-light fa-trash-can\"></ax-icon>\n        </ax-button>\n      }\n    </div>\n  </div>\n} @empty {\n  <div class=\"ax-text-center ax-text-muted ax-text-sm ax-p-4\">\n    {{ '@document-management:no-files' | translate | async }}\n  </div>\n}\n", styles: [":host{display:flex;width:100%;flex-direction:column;gap:.125rem;padding-top:.5rem;padding-bottom:.5rem}:host .__item{display:flex;cursor:pointer;align-items:center;gap:.75rem;border-radius:.375rem;padding:.5rem}:host .__item:hover{background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}:host .__item .__icon{width:1.5rem;flex-shrink:0}:host .__item .__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start;font-size:.875rem;line-height:1.25rem;font-weight:500}:host .__item .__actions{margin-left:auto;display:flex}\n"] }]
         }] });
 
-var fileList_component = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    AXPFileListComponent: AXPFileListComponent
-});
-
 class AXPFileUploaderWidgetEditComponent extends AXPValueWidgetComponent {
     constructor() {
         super(...arguments);
         this.fileService = inject(AXFileService);
         this.multiple = computed(() => this.options()['multiple']);
         this.accept = computed(() => this.options()['accept']);
+        this.files = computed(() => this.getValue()?.map(file => ({
+            ...file,
+        })) ?? []);
     }
     async uploadFromComputer() {
         // Use the direct file upload approach when no document type is specified
@@ -7885,7 +7148,44 @@ class AXPFileUploaderWidgetEditComponent extends AXPValueWidgetComponent {
             multiple: this.multiple(),
             accept: this.accept(),
         });
-        this.setValue([...(this.getValue() ?? []), ...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();
+        }
+        // create the file upload requests
+        const fileUploadRequests = files.map(file => ({
+            id: AXPDataGenerator.uuid(),
+            name: file.name,
+            size: file.size,
+            type: file.type,
+            status: 'attached',
+            source: {
+                kind: 'blob',
+                value: file
+            }
+        }));
+        this.setValue([...(this.getValue() ?? []), ...fileUploadRequests]);
+    }
+    handleFileRemove(file) {
+        this.removeFile(file);
+    }
+    removeFile(file) {
+        if (file.status === 'attached') {
+            this.setValue(this.getValue()?.filter(f => f.id !== file.id) ?? []);
+        }
+        else {
+            file.status = 'deleted';
+            this.setValue([...(this.getValue() ?? []), file]);
+        }
+    }
+    clear() {
+        for (const file of this.files()) {
+            this.removeFile(file);
+        }
     }
     get __class() {
         const cls = {};
@@ -7897,8 +7197,8 @@ class AXPFileUploaderWidgetEditComponent extends AXPValueWidgetComponent {
         return cls;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPFileUploaderWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: AXPFileUploaderWidgetEditComponent, isStandalone: true, selector: "axp-file-uploader-widget-edit", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `
-  <div class="ax-flex ax-justify-end ax-border-b  ax-p-2" *translate="let t">
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: AXPFileUploaderWidgetEditComponent, isStandalone: true, selector: "axp-file-uploader-widget-edit", host: { properties: { "class": "this.__class" }, styleAttribute: "border-color: rgba(var(--ax-comp-editor-border-color)); !important;" }, usesInheritance: true, ngImport: i0, template: `
+  <div class="ax-flex ax-justify-end ax-border-b ax-p-2"  *translate="let t">
     <!-- Add Item Button -->
     <ax-button class="ax-sm" [text]="t('@document-management:actions.add-item') | async" [color]="'primary'">
       <ax-prefix>
@@ -7921,16 +7221,16 @@ class AXPFileUploaderWidgetEditComponent extends AXPValueWidgetComponent {
     </ax-button>
   </div>
   <div class="ax-p-2">
-    <axp-file-list [files]="getValue()"></axp-file-list>
+    <axp-file-list [files]="files()" (onRemove)="handleFileRemove($event)"  ></axp-file-list>
   </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.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: AXUploaderModule }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i6$1.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXPComponentSlotModule }, { kind: "directive", type: i5$2.AXPComponentSlotDirective, selector: "axp-component-slot", inputs: ["name", "host", "context"], exportAs: ["slot"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i6.AXTranslatorDirective, selector: "[translate]" }, { kind: "component", type: AXPFileListComponent, selector: "axp-file-list", inputs: ["readOnly", "files"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i6$1.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXPComponentSlotModule }, { kind: "directive", type: i5$2.AXPComponentSlotDirective, selector: "axp-component-slot", inputs: ["name", "host", "context"], exportAs: ["slot"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i6.AXTranslatorDirective, selector: "[translate]" }, { kind: "component", type: AXPFileListComponent, selector: "axp-file-list", inputs: ["readOnly", "files"], outputs: ["onRemove"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPFileUploaderWidgetEditComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-file-uploader-widget-edit',
                     template: `
-  <div class="ax-flex ax-justify-end ax-border-b  ax-p-2" *translate="let t">
+  <div class="ax-flex ax-justify-end ax-border-b ax-p-2"  *translate="let t">
     <!-- Add Item Button -->
     <ax-button class="ax-sm" [text]="t('@document-management:actions.add-item') | async" [color]="'primary'">
       <ax-prefix>
@@ -7953,9 +7253,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
     </ax-button>
   </div>
   <div class="ax-p-2">
-    <axp-file-list [files]="getValue()"></axp-file-list>
+    <axp-file-list [files]="files()" (onRemove)="handleFileRemove($event)"  ></axp-file-list>
   </div>
   `,
+                    host: {
+                        style: 'border-color: rgba(var(--ax-comp-editor-border-color)); !important;'
+                    },
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     standalone: true,
                     imports: [
@@ -7963,7 +7266,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                         FormsModule,
                         AXButtonModule,
                         AXDecoratorModule,
-                        AXUploaderModule,
                         AXLoadingModule,
                         AXDropdownModule,
                         AXPComponentSlotModule,
@@ -8001,6 +7303,13 @@ var fileUploaderWidgetPrint_component = /*#__PURE__*/Object.freeze({
 });
 
 class AXPFileUploaderWidgetViewComponent extends AXPValueWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.files = computed(() => this.getValue()?.map(file => ({
+            ...file,
+            status: 'uploaded'
+        })) ?? []);
+    }
     get __class() {
         const cls = {};
         cls[`ax-block`] = true;
@@ -8009,15 +7318,15 @@ class AXPFileUploaderWidgetViewComponent extends AXPValueWidgetComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPFileUploaderWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: AXPFileUploaderWidgetViewComponent, isStandalone: true, selector: "axp-file-uploader-widget-view", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `
-  <axp-file-list [files]="getValue()" [readOnly]="true"></axp-file-list>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXUploaderModule }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPFileListComponent, selector: "axp-file-list", inputs: ["readOnly", "files"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  <axp-file-list [files]="files()" [readOnly]="true"></axp-file-list>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXUploaderModule }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPFileListComponent, selector: "axp-file-list", inputs: ["readOnly", "files"], outputs: ["onRemove"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPFileUploaderWidgetViewComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-file-uploader-widget-view',
                     template: `
-  <axp-file-list [files]="getValue()" [readOnly]="true"></axp-file-list>
+  <axp-file-list [files]="files()" [readOnly]="true"></axp-file-list>
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     standalone: true,
@@ -8091,9 +7400,6 @@ const AXPFileUploaderWidget = {
     },
 };
 
-class AXPFileUploaderManagementService {
-}
-
 class AXPGalleryWidgetEditComponent extends AXPValueWidgetComponent {
     constructor() {
         super(...arguments);
@@ -8325,7 +7631,7 @@ class AXPGalleryWidgetViewComponent extends AXPValueWidgetComponent {
       <small>No Media!</small>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i2$8.AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i2$1.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i2$7.AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i2$1.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPGalleryWidgetViewComponent, decorators: [{
             type: Component,
@@ -8506,11 +7812,7 @@ class AXPMapBoxWidgetEditComponent extends AXPValueWidgetComponent {
         this.height = computed(() => this.options()['height'] ?? 300);
         this.fitToDraw = computed(() => this.options()['fitToDraw'] ?? false);
         this.limitDraw = computed(() => this.options()?.limitDraw ?? undefined);
-        this.#effect2 = effect(() => {
-            console.log('limitDraw', this.limitDraw());
-        });
     }
-    #effect2;
     onMarkerChanged($event) {
         this.setValue({ polygons: this.getValue()?.polygons ?? [], markers: $event });
     }
@@ -8867,7 +8169,7 @@ class AXPSignatureWidgetEditComponent extends AXPValueWidgetComponent {
       </div>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.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: AXImageModule }, { kind: "component", type: i2$8.AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.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: AXImageModule }, { kind: "component", type: i2$7.AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPSignatureWidgetEditComponent, decorators: [{
             type: Component,
@@ -8965,7 +8267,7 @@ class AXPSignatureWidgetViewComponent extends AXPValueWidgetComponent {
       <span>{{placeholder()}}</span>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i2$8.AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i2$7.AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPSignatureWidgetViewComponent, decorators: [{
             type: Component,
@@ -9932,59 +9234,273 @@ class AXPAdvancedGridItemWidgetViewComponent extends AXPLayoutWidgetComponent {
     }
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: i1$3.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPAdvancedGridItemWidgetViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPAdvancedGridItemWidgetViewComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'axp-grid-layout-item-widget',
+                    template: `
+    @for (child of children(); track $index) {
+    <ng-container axp-widget-renderer [node]="child" [index]="index" [parentNode]="this" [mode]="this.mode">
+    </ng-container>
+    }
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [CommonModule, AXPLayoutBuilderModule],
+                    providers: [
+                        {
+                            provide: AXPLayoutWidgetComponent,
+                            useExisting: AXPAdvancedGridItemWidgetViewComponent,
+                        },
+                    ],
+                }]
+        }], propDecorators: { __class: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+var advancedGridItemWidgetView_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPAdvancedGridItemWidgetViewComponent: AXPAdvancedGridItemWidgetViewComponent
+});
+
+const AXPAdvancedGridItemWidget = {
+    name: 'advanced-grid-item-layout',
+    title: 'Advanced Grid Item',
+    type: 'container',
+    categories: AXP_WIDGETS_LAYOUT_CATEGORY,
+    icon: 'fa-light fa-objects-column',
+    properties: [
+        AXP_NAME_PROPERTY,
+        // ...AXP_LAYOUT_GRID_ITEM_PROPERTIES,
+    ],
+    components: {
+        view: {
+            component: () => Promise.resolve().then(function () { return advancedGridItemWidgetView_component; }).then((c) => c.AXPAdvancedGridItemWidgetViewComponent),
+        },
+        edit: {
+            component: () => Promise.resolve().then(function () { return advancedGridItemWidgetView_component; }).then((c) => c.AXPAdvancedGridItemWidgetViewComponent),
+        },
+        designer: {
+            component: () => Promise.resolve().then(function () { return advancedGridItemWidgetDesigner_component; }).then((c) => c.AXPAdvancedGridItemWidgetDesignerComponent),
+        },
+    },
+};
+
+class AXPBlockWidgetDesignerComponent extends AXPLayoutWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.backgroundColor = computed(() => this.options()['backgroundColor']);
+        this.cssClass = computed(() => this.options()['cssClass']);
+    }
+    get __class() {
+        const cls = {};
+        //
+        cls[`ax-w-full`] = true;
+        //
+        cls[`ax-flex`] = true;
+        return cls;
+    }
+    get __style() {
+        const spacing = this.options()?.['spacing'];
+        const border = this.options()?.['border'];
+        const direction = this.options()?.['direction'];
+        return {
+            // Background
+            'background-color': this.backgroundColor(),
+            // Spacing
+            padding: spacing?.padding ?? 0,
+            margin: spacing?.margin ?? 0,
+            // Border
+            'border-radius': border?.radius ?? 0,
+            'border-width': border?.width ?? 0,
+            'border-color': border?.color ?? '#000000',
+            'border-style': border?.style ?? 'none',
+            // Direction
+            direction: direction ?? 'ltr',
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPBlockWidgetDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXPBlockWidgetDesignerComponent, isStandalone: true, selector: "axp-block-widget", host: { properties: { "class": "this.__class", "style": "this.__style" } }, providers: [
+            {
+                provide: AXPLayoutWidgetComponent,
+                useExisting: AXPBlockWidgetDesignerComponent,
+            },
+        ], usesInheritance: true, ngImport: i0, template: `
+    @for (node of children(); track $index) {
+      <ng-container
+        axp-widget-designer-renderer
+        [node]="node"
+        [parentNode]="this"
+        [mode]="this.mode"
+        [locked]="this.locked"
+      ></ng-container>
+    } @empty {
+      <axp-designer-add-widget-mini-button
+        class="ax-flex-1 ax-self-center ax-place-self-end"
+      ></axp-designer-add-widget-mini-button>
+    }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "index", "locked", "mode", "node"] }, { kind: "component", type: AXPDesignerAddWidgetMiniButtonComponent, selector: "axp-designer-add-widget-mini-button", outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPBlockWidgetDesignerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'axp-block-widget',
+                    template: `
+    @for (node of children(); track $index) {
+      <ng-container
+        axp-widget-designer-renderer
+        [node]="node"
+        [parentNode]="this"
+        [mode]="this.mode"
+        [locked]="this.locked"
+      ></ng-container>
+    } @empty {
+      <axp-designer-add-widget-mini-button
+        class="ax-flex-1 ax-self-center ax-place-self-end"
+      ></axp-designer-add-widget-mini-button>
+    }
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [
+                        CommonModule,
+                        AXPLayoutBuilderModule,
+                        AXPWidgetDesignerRendererDirective,
+                        AXPDesignerAddWidgetMiniButtonComponent,
+                    ],
+                    providers: [
+                        {
+                            provide: AXPLayoutWidgetComponent,
+                            useExisting: AXPBlockWidgetDesignerComponent,
+                        },
+                    ],
+                }]
+        }], propDecorators: { __class: [{
+                type: HostBinding,
+                args: ['class']
+            }], __style: [{
+                type: HostBinding,
+                args: ['style']
+            }] } });
+
+var blockWidgetDesigner_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPBlockWidgetDesignerComponent: AXPBlockWidgetDesignerComponent
+});
+
+class AXPBlockWidgetViewComponent extends AXPLayoutWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.backgroundColor = computed(() => this.options()['backgroundColor']);
+        this.cssClass = computed(() => this.options()['cssClass']);
+    }
+    get __class() {
+        const cls = {};
+        //
+        cls[`ax-w-full`] = true;
+        cls[`ax-widget-outline`] = true;
+        //
+        cls[`ax-flex`] = true;
+        return cls;
+    }
+    get __style() {
+        const spacing = this.options()?.['spacing'];
+        const border = this.options()?.['border'];
+        const direction = this.options()?.['direction'];
+        return {
+            // Background
+            'background-color': this.backgroundColor(),
+            // Spacing
+            padding: spacing?.padding ?? 0,
+            margin: spacing?.margin ?? 0,
+            // Border
+            'border-radius': border?.radius ?? 0,
+            'border-width': border?.width ?? 0,
+            'border-color': border?.color ?? '#000000',
+            'border-style': border?.style ?? 'none',
+            // Direction
+            direction: direction ?? 'ltr',
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPBlockWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXPBlockWidgetViewComponent, isStandalone: true, selector: "axp-block-widget", host: { properties: { "class": "this.__class", "style": "this.__style" } }, usesInheritance: true, ngImport: i0, template: `
+    @for (node of children(); track $index) {
+      <ng-container
+        axp-widget-renderer
+        [node]="node"
+        [index]="index"
+        [parentNode]="this"
+        [mode]="this.mode"
+      ></ng-container>
+    }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: i1$3.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPBlockWidgetViewComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'axp-grid-layout-item-widget',
+                    selector: 'axp-block-widget',
                     template: `
-    @for (child of children(); track $index) {
-    <ng-container axp-widget-renderer [node]="child" [index]="index" [parentNode]="this" [mode]="this.mode">
-    </ng-container>
+    @for (node of children(); track $index) {
+      <ng-container
+        axp-widget-renderer
+        [node]="node"
+        [index]="index"
+        [parentNode]="this"
+        [mode]="this.mode"
+      ></ng-container>
     }
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [CommonModule, AXPLayoutBuilderModule],
-                    providers: [
-                        {
-                            provide: AXPLayoutWidgetComponent,
-                            useExisting: AXPAdvancedGridItemWidgetViewComponent,
-                        },
-                    ],
                 }]
         }], propDecorators: { __class: [{
                 type: HostBinding,
                 args: ['class']
+            }], __style: [{
+                type: HostBinding,
+                args: ['style']
             }] } });
 
-var advancedGridItemWidgetView_component = /*#__PURE__*/Object.freeze({
+var blockWidgetView_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    AXPAdvancedGridItemWidgetViewComponent: AXPAdvancedGridItemWidgetViewComponent
+    AXPBlockWidgetViewComponent: AXPBlockWidgetViewComponent
 });
 
-const AXPAdvancedGridItemWidget = {
-    name: 'advanced-grid-item-layout',
-    title: 'Advanced Grid Item',
+const AXPBlockWidget = {
+    name: 'block-layout',
     type: 'container',
+    title: 'Block Layout',
+    description: 'Organizes content in blocks',
+    icon: 'fa-light fa-block',
     categories: AXP_WIDGETS_LAYOUT_CATEGORY,
-    icon: 'fa-light fa-objects-column',
+    groups: [AXPWidgetGroupEnum.FormElement],
+    options: {
+        canInsert: true,
+    },
     properties: [
         AXP_NAME_PROPERTY,
-        // ...AXP_LAYOUT_GRID_ITEM_PROPERTIES,
+        // AXP_FONT_SIZE_PROPERTY,
+        // cloneProperty(AXP_BG_COLOR_PROPERTY, { schema: { defaultValue: null } }),
+        AXP_LAYOUT_SPACING_PROPERTY,
+        AXP_LAYOUT_BORDER_PROPERTY,
+        AXP_LAYOUT_DIRECTION_PROPERTY,
     ],
     components: {
-        view: {
-            component: () => Promise.resolve().then(function () { return advancedGridItemWidgetView_component; }).then((c) => c.AXPAdvancedGridItemWidgetViewComponent),
+        designer: {
+            component: () => Promise.resolve().then(function () { return blockWidgetDesigner_component; }).then((c) => c.AXPBlockWidgetDesignerComponent),
         },
         edit: {
-            component: () => Promise.resolve().then(function () { return advancedGridItemWidgetView_component; }).then((c) => c.AXPAdvancedGridItemWidgetViewComponent),
+            component: () => Promise.resolve().then(function () { return blockWidgetView_component; }).then((c) => c.AXPBlockWidgetViewComponent),
         },
-        designer: {
-            component: () => Promise.resolve().then(function () { return advancedGridItemWidgetDesigner_component; }).then((c) => c.AXPAdvancedGridItemWidgetDesignerComponent),
+        print: {
+            component: () => Promise.resolve().then(function () { return blockWidgetView_component; }).then((c) => c.AXPBlockWidgetViewComponent),
+        },
+        view: {
+            component: () => Promise.resolve().then(function () { return blockWidgetView_component; }).then((c) => c.AXPBlockWidgetViewComponent),
         },
     },
 };
 
-class AXPBlockWidgetDesignerComponent extends AXPLayoutWidgetComponent {
+class AXPFlexWidgetDesignerComponent extends AXPLayoutWidgetComponent {
     constructor() {
         super(...arguments);
         this.backgroundColor = computed(() => this.options()['backgroundColor']);
@@ -10016,51 +9532,50 @@ class AXPBlockWidgetDesignerComponent extends AXPLayoutWidgetComponent {
             // Flexbox
             'flex-direction': flex?.direction ?? 'row',
             'flex-wrap': flex?.wrap ?? 'nowrap',
+            'overflow-x': flex?.wrap === 'nowrap' ? 'auto' : '',
             'justify-content': flex?.justify ?? 'flex-start',
             'align-items': flex?.align ?? 'flex-start',
             gap: flex?.gap ?? '0px',
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPBlockWidgetDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXPBlockWidgetDesignerComponent, isStandalone: true, selector: "axp-block-widget", host: { properties: { "class": "this.__class", "style": "this.__style" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPFlexWidgetDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXPFlexWidgetDesignerComponent, isStandalone: true, selector: "axp-flex-widget", host: { properties: { "class": "this.__class", "style": "this.__style" } }, providers: [
             {
                 provide: AXPLayoutWidgetComponent,
-                useExisting: AXPBlockWidgetDesignerComponent,
+                useExisting: AXPFlexWidgetDesignerComponent,
             },
         ], usesInheritance: true, ngImport: i0, template: `
     @for (node of children(); track $index) {
-    <ng-container
-      axp-widget-designer-renderer
-      [node]="node"
-      [parentNode]="this"
-      [mode]="this.mode"
-      [locked]="this.locked"
-    ></ng-container>
-    } @empty {
+      <ng-container
+        axp-widget-designer-renderer
+        [node]="node"
+        [parentNode]="this"
+        [mode]="this.mode"
+        [locked]="this.locked"
+      ></ng-container>
+    }
     <axp-designer-add-widget-mini-button
-      class="ax-flex-1 ax-self-center ax-place-self-end"
+      class="ax-p-1 ax-flex-1 ax-self-center ax-place-self-end"
     ></axp-designer-add-widget-mini-button>
-    }
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "index", "locked", "mode", "node"] }, { kind: "component", type: AXPDesignerAddWidgetMiniButtonComponent, selector: "axp-designer-add-widget-mini-button", outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPBlockWidgetDesignerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPFlexWidgetDesignerComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'axp-block-widget',
+                    selector: 'axp-flex-widget',
                     template: `
     @for (node of children(); track $index) {
-    <ng-container
-      axp-widget-designer-renderer
-      [node]="node"
-      [parentNode]="this"
-      [mode]="this.mode"
-      [locked]="this.locked"
-    ></ng-container>
-    } @empty {
+      <ng-container
+        axp-widget-designer-renderer
+        [node]="node"
+        [parentNode]="this"
+        [mode]="this.mode"
+        [locked]="this.locked"
+      ></ng-container>
+    }
     <axp-designer-add-widget-mini-button
-      class="ax-flex-1 ax-self-center ax-place-self-end"
+      class="ax-p-1 ax-flex-1 ax-self-center ax-place-self-end"
     ></axp-designer-add-widget-mini-button>
-    }
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [
@@ -10072,7 +9587,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     providers: [
                         {
                             provide: AXPLayoutWidgetComponent,
-                            useExisting: AXPBlockWidgetDesignerComponent,
+                            useExisting: AXPFlexWidgetDesignerComponent,
                         },
                     ],
                 }]
@@ -10084,17 +9599,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 args: ['style']
             }] } });
 
-var blockWidgetDesigner_component = /*#__PURE__*/Object.freeze({
+var flexWidgetDesigner_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    AXPBlockWidgetDesignerComponent: AXPBlockWidgetDesignerComponent
+    AXPFlexWidgetDesignerComponent: AXPFlexWidgetDesignerComponent
 });
 
-class AXPBlockWidgetViewComponent extends AXPLayoutWidgetComponent {
+class AXPFlexWidgetViewComponent extends AXPLayoutWidgetComponent {
     constructor() {
         super(...arguments);
         this.backgroundColor = computed(() => this.options()['backgroundColor']);
         this.cssClass = computed(() => this.options()['cssClass']);
-        this.flex = computed(() => (this.options()['flex'] ?? {}));
     }
     get __class() {
         const cls = {};
@@ -10103,12 +9617,13 @@ class AXPBlockWidgetViewComponent extends AXPLayoutWidgetComponent {
         cls[`ax-widget-outline`] = true;
         //
         cls[`ax-flex`] = true;
+        // cls[`ax-overflow-auto`] = true;
         return cls;
     }
     get __style() {
         const spacing = this.options()?.['spacing'];
         const border = this.options()?.['border'];
-        const flex = this.flex();
+        const flex = this.options()?.['flex'];
         return {
             // Background
             'background-color': this.backgroundColor(),
@@ -10123,37 +9638,38 @@ class AXPBlockWidgetViewComponent extends AXPLayoutWidgetComponent {
             // Flexbox
             'flex-direction': flex?.direction ?? 'row',
             'flex-wrap': flex?.wrap ?? 'nowrap',
+            'overflow-x': flex?.wrap === 'nowrap' ? 'auto' : '',
             'justify-content': flex?.justify ?? 'flex-start',
             'align-items': flex?.align ?? 'flex-start',
             gap: flex?.gap ?? '0px',
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPBlockWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXPBlockWidgetViewComponent, isStandalone: true, selector: "axp-block-widget", host: { properties: { "class": "this.__class", "style": "this.__style" } }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPFlexWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXPFlexWidgetViewComponent, isStandalone: true, selector: "axp-flex-widget", host: { properties: { "class": "this.__class", "style": "this.__style" } }, usesInheritance: true, ngImport: i0, template: `
     @for (node of children(); track $index) {
-    <ng-container
-      axp-widget-renderer
-      [node]="node"
-      [index]="index"
-      [parentNode]="this"
-      [mode]="this.mode"
-    ></ng-container>
+      <ng-container
+        axp-widget-renderer
+        [node]="node"
+        [index]="index"
+        [parentNode]="this"
+        [mode]="this.mode"
+      ></ng-container>
     }
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: i1$3.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPBlockWidgetViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPFlexWidgetViewComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'axp-block-widget',
+                    selector: 'axp-flex-widget',
                     template: `
     @for (node of children(); track $index) {
-    <ng-container
-      axp-widget-renderer
-      [node]="node"
-      [index]="index"
-      [parentNode]="this"
-      [mode]="this.mode"
-    ></ng-container>
+      <ng-container
+        axp-widget-renderer
+        [node]="node"
+        [index]="index"
+        [parentNode]="this"
+        [mode]="this.mode"
+      ></ng-container>
     }
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -10167,42 +9683,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 args: ['style']
             }] } });
 
-var blockWidgetView_component = /*#__PURE__*/Object.freeze({
+var flexWidgetView_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    AXPBlockWidgetViewComponent: AXPBlockWidgetViewComponent
+    AXPFlexWidgetViewComponent: AXPFlexWidgetViewComponent
 });
 
-const AXPBlockWidget = {
-    name: 'block-layout',
+const AXPFlexWidget = {
+    name: 'flex-layout',
     type: 'container',
-    title: 'Block Layout',
-    description: 'Organizes content in blocks',
-    icon: 'fa-light fa-block',
+    title: 'Flex Layout',
+    description: 'Organizes content in flexible layout',
+    icon: 'fa-light fa-box-taped',
     categories: AXP_WIDGETS_LAYOUT_CATEGORY,
     groups: [AXPWidgetGroupEnum.FormElement],
     options: {
         canInsert: true,
     },
-    properties: [
-        AXP_NAME_PROPERTY,
-        // AXP_FONT_SIZE_PROPERTY,
-        // cloneProperty(AXP_BG_COLOR_PROPERTY, { schema: { defaultValue: null } }),
-        AXP_LAYOUT_SPACING_PROPERTY,
-        AXP_LAYOUT_BORDER_PROPERTY,
-        AXP_LAYOUT_FLEX_PROPERTY,
-    ],
+    properties: [AXP_NAME_PROPERTY, AXP_LAYOUT_SPACING_PROPERTY, AXP_LAYOUT_BORDER_PROPERTY, AXP_LAYOUT_FLEX_PROPERTY],
     components: {
         designer: {
-            component: () => Promise.resolve().then(function () { return blockWidgetDesigner_component; }).then((c) => c.AXPBlockWidgetDesignerComponent),
+            component: () => Promise.resolve().then(function () { return flexWidgetDesigner_component; }).then((c) => c.AXPFlexWidgetDesignerComponent),
         },
         edit: {
-            component: () => Promise.resolve().then(function () { return blockWidgetView_component; }).then((c) => c.AXPBlockWidgetViewComponent),
+            component: () => Promise.resolve().then(function () { return flexWidgetView_component; }).then((c) => c.AXPFlexWidgetViewComponent),
         },
         print: {
-            component: () => Promise.resolve().then(function () { return blockWidgetView_component; }).then((c) => c.AXPBlockWidgetViewComponent),
+            component: () => Promise.resolve().then(function () { return flexWidgetView_component; }).then((c) => c.AXPFlexWidgetViewComponent),
         },
         view: {
-            component: () => Promise.resolve().then(function () { return blockWidgetView_component; }).then((c) => c.AXPBlockWidgetViewComponent),
+            component: () => Promise.resolve().then(function () { return flexWidgetView_component; }).then((c) => c.AXPFlexWidgetViewComponent),
         },
     },
 };
@@ -10284,7 +9793,7 @@ const AXPPageWidget = {
             component: () => Promise.resolve().then(function () { return pageWidgetView_component; }).then((c) => c.AXPPageWidgetViewComponent),
         },
         designer: {
-            component: () => import('./acorex-platform-widgets-page-widget-designer.component-9XMpubtr.mjs').then((c) => c.AXPPageWidgetDesignerComponent),
+            component: () => import('./acorex-platform-widgets-page-widget-designer.component-DuKrIkHh.mjs').then((c) => c.AXPPageWidgetDesignerComponent),
         },
     },
 };
@@ -11375,7 +10884,7 @@ class AXPBorderWidgetEditComponent extends AXPValueWidgetComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPBorderWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXPBorderWidgetEditComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "allBorderEl", first: true, predicate: ["allBorderEl"], descendants: true, isSignal: true }, { propertyName: "allRadiusEl", first: true, predicate: ["allRadiusEl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-pt-2 axp-border-container\">\n  <div class=\"ax-radius-box ax-flex ax-justify-between ax-items-center ax-gap-2 ax-h-[26px]\">\n    <span class=\"ax-text-sm ax-font-light\">Radius</span>\n    <div class=\"ax-flex ax-gap-2 ax-items-center\">\n      <button\n        #allRadiusEl\n        (pointerdown)=\"handleActiveRadiusSide($event)\"\n        name=\"all\"\n        class=\"ax-p-1 hover:!ax-bg-[var(--hover-effect)]\"\n      >\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M2.5 5.5C2.5 3.84315 3.84315 2.5 5.5 2.5H10.5C12.1569 2.5 13.5 3.84315 13.5 5.5V10.5C13.5 12.1569 12.1569 13.5 10.5 13.5H5.5C3.84315 13.5 2.5 12.1569 2.5 10.5V5.5Z\"\n            stroke=\"currentColor\"\n          ></path>\n        </svg>\n      </button>\n\n      <button\n        (pointerdown)=\"handleActiveRadiusSide($event)\"\n        name=\"sides\"\n        class=\"ax-p-1 hover:!ax-bg-[var(--hover-effect)]\"\n      >\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M4.5 2C3.11929 2 2 3.11929 2 4.5V7H3V4.5C3 3.67157 3.67157 3 4.5 3H7V2H4.5Z\"\n            fill=\"currentColor\"\n          ></path>\n          <path\n            d=\"M9 2V3H11.5C12.3284 3 13 3.67157 13 4.5V7H14V4.5C14 3.11929 12.8807 2 11.5 2H9Z\"\n            fill=\"currentColor\"\n          ></path>\n          <path\n            d=\"M14 9H13V11.5C13 12.3284 12.3284 13 11.5 13H9V14H11.5C12.8807 14 14 12.8807 14 11.5V9Z\"\n            fill=\"currentColor\"\n          ></path>\n          <path\n            d=\"M7 14V13H4.5C3.67157 13 3 12.3284 3 11.5V9H2V11.5C2 12.8807 3.11929 14 4.5 14H7Z\"\n            fill=\"currentColor\"\n          ></path>\n        </svg>\n      </button>\n\n      @if(currentActiveRadiusSide() ==='all'){\n      <div class=\"ax-flex ax-justify-center ax-items-center ax-flex-shrink\">\n        <ax-range-slider\n          [values]=\"allRadius()\"\n          [min]=\"0\"\n          [max]=\"100\"\n          (valuesChange)=\"setBorder($event ?? 0, 'radius', 'all')\"\n          class=\"ax-min-w-28\"\n        ></ax-range-slider>\n      </div>\n      <div class=\"ax-flex ax-justify-start ax-items-center\">\n        <ax-number-box\n          [minValue]=\"0\"\n          [maxValue]=\"100\"\n          [value]=\"allRadius()\"\n          [changeOnScroll]=\"true\"\n          (valueChange)=\"setBorder($event ?? 0, 'radius', 'all')\"\n          class=\"ax-min-w-8\"\n          [showSpinButtons]=\"false\"\n          ><ax-suffix><ax-text class=\"!ax-text-xs !ax-px-1\">PX</ax-text></ax-suffix></ax-number-box\n        >\n      </div>\n      }@else{\n      <div class=\"ax-w-48\"></div>\n      }\n    </div>\n  </div>\n\n  <div\n    class=\"axp-border-radius-sides ax-flex ax-justify-end ax-items-center ax-overflow-y-hidden ax-transition-[height] ax-duration-300 ax-ease-in-out\"\n    [class]=\"currentActiveRadiusSide() === 'all' ? '!ax-h-0' : '!ax-h-[56px]'\"\n  >\n    <div class=\"ax-grid ax-grid-cols-2 ax-grid-rows-2 ax-gap-2\">\n      <div class=\"ax-flex ax-gap-1 ax-items-center\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <g opacity=\"0.4\">\n            <path d=\"M14 14V9H13V13H9V14H14Z\" fill=\"currentColor\"></path>\n            <path d=\"M7 14V13H3V9H2V14H7Z\" fill=\"currentColor\"></path>\n            <path d=\"M2 7H3V6.5C3 4.567 4.567 3 6.5 3H7V2H6.5C4.01472 2 2 4.01472 2 6.5V7Z\" fill=\"currentColor\"></path>\n            <path d=\"M9 2V3H13V7H14V2H9Z\" fill=\"currentColor\"></path>\n          </g>\n          <path d=\"M2.5 7V6.5C2.5 4.29086 4.29086 2.5 6.5 2.5H7\" stroke=\"currentColor\"></path>\n        </svg>\n        <div class=\"ax-flex ax-justify-start ax-items-center ax-max-w-12\">\n          <ax-number-box\n            [minValue]=\"0\"\n            [changeOnScroll]=\"true\"\n            [value]=\"calculatedValues().radius['top-left']\"\n            (valueChange)=\"setBorder($event ?? 0, 'radius', 'top-left')\"\n            [showSpinButtons]=\"false\"\n            ><ax-suffix><ax-text class=\"!ax-text-xs !ax-px-1\">PX</ax-text></ax-suffix></ax-number-box\n          >\n        </div>\n      </div>\n      <div class=\"ax-flex ax-gap-1 ax-items-center\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <g opacity=\"0.4\">\n            <path d=\"M2 14V9H3V13H7V14H2Z\" fill=\"currentColor\"></path>\n            <path d=\"M9 14V13H13V9H14V14H9Z\" fill=\"currentColor\"></path>\n            <path\n              d=\"M14 7H13V6.5C13 4.567 11.433 3 9.5 3H9V2H9.5C11.9853 2 14 4.01472 14 6.5V7Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path d=\"M7 2V3H3V7H2V2H7Z\" fill=\"currentColor\"></path>\n          </g>\n          <path d=\"M13.5 7V6.5C13.5 4.29086 11.7091 2.5 9.5 2.5H9\" stroke=\"currentColor\"></path>\n        </svg>\n        <div class=\"ax-flex ax-justify-start ax-items-center ax-max-w-12\">\n          <ax-number-box\n            [minValue]=\"0\"\n            [changeOnScroll]=\"true\"\n            [value]=\"calculatedValues().radius['top-right']\"\n            (valueChange)=\"setBorder($event ?? 0, 'radius', 'top-right')\"\n            [showSpinButtons]=\"false\"\n            ><ax-suffix><ax-text class=\"!ax-text-xs !ax-px-1\">PX</ax-text></ax-suffix></ax-number-box\n          >\n        </div>\n      </div>\n      <div class=\"ax-flex ax-gap-1 ax-items-center\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <g opacity=\"0.4\">\n            <path d=\"M2 2V7H3V3H7V2H2Z\" fill=\"currentColor\"></path>\n            <path d=\"M9 2V3H13V7H14V2H9Z\" fill=\"currentColor\"></path>\n            <path d=\"M14 9H13V13H9V14H14V9Z\" fill=\"currentColor\"></path>\n            <path\n              d=\"M7 14V13H6.5C4.567 13 3 11.433 3 9.5V9H2V9.5C2 11.9853 4.01472 14 6.5 14H7Z\"\n              fill=\"currentColor\"\n            ></path>\n          </g>\n          <path d=\"M2.5 9V9.5C2.5 11.7091 4.29086 13.5 6.5 13.5H7\" stroke=\"currentColor\"></path>\n        </svg>\n        <div class=\"ax-flex ax-justify-start ax-items-center ax-max-w-12\">\n          <ax-number-box\n            [minValue]=\"0\"\n            [changeOnScroll]=\"true\"\n            [value]=\"calculatedValues().radius['bottom-left']\"\n            (valueChange)=\"setBorder($event ?? 0, 'radius', 'bottom-left')\"\n            [showSpinButtons]=\"false\"\n            ><ax-suffix><ax-text class=\"!ax-text-xs !ax-px-1\">PX</ax-text></ax-suffix></ax-number-box\n          >\n        </div>\n      </div>\n      <div class=\"ax-flex ax-gap-1 ax-items-center\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <g opacity=\"0.4\">\n            <path d=\"M2 2V7H3V3H7V2H2Z\" fill=\"currentColor\"></path>\n            <path d=\"M9 2V3H13V7H14V2H9Z\" fill=\"currentColor\"></path>\n            <path\n              d=\"M14 9H13V11.5C13 12.3284 12.3284 13 11.5 13H9V14H11.5C12.8807 14 14 12.8807 14 11.5V9Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path d=\"M7 14V13H3V9H2V14H7Z\" fill=\"currentColor\"></path>\n          </g>\n          <path d=\"M13.5 9V9.5C13.5 11.7091 11.7091 13.5 9.5 13.5H9\" stroke=\"currentColor\"></path>\n        </svg>\n        <div class=\"ax-flex ax-justify-start ax-items-center ax-max-w-12\">\n          <ax-number-box\n            [minValue]=\"0\"\n            [changeOnScroll]=\"true\"\n            [value]=\"calculatedValues().radius['bottom-right']\"\n            (valueChange)=\"setBorder($event ?? 0, 'radius', 'bottom-right')\"\n            [showSpinButtons]=\"false\"\n            ><ax-suffix><ax-text class=\"!ax-text-xs !ax-px-1\">PX</ax-text></ax-suffix></ax-number-box\n          >\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ax-flex ax-justify-between ax-items-center ax-py-1\">\n    <span class=\"ax-text-sm ax-font-light\">Borders</span>\n  </div>\n\n  <div class=\"ax-border-box ax-flex ax-justify-between ax-items-center ax-gap-4\">\n    <div class=\"ax-grid ax-grid-cols-3 ax-grid-rows-3 ax-gap-1 ax-flex-shrink-0\">\n      <!-- Top Border -->\n      <div class=\"ax-border-box-top ax-col-start-2 ax-row-start-1\">\n        <button\n          (pointerdown)=\"handleActiveBorderSide($event)\"\n          name=\"top\"\n          class=\"ax-p-1 hover:!ax-bg-[var(--hover-effect)]\"\n        >\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              opacity=\"0.4\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M2 13C2 13.5523 2.44772 14 3 14H13C13.5523 14 14 13.5523 14 13V5H13V13H3V5H2V13Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2 3H14V2H2V3Z\" fill=\"currentColor\"></path>\n          </svg>\n        </button>\n      </div>\n\n      <!-- Right Border -->\n      <div class=\"ax-border-box-right ax-col-start-3 ax-row-start-2\">\n        <button\n          (pointerdown)=\"handleActiveBorderSide($event)\"\n          name=\"right\"\n          class=\"ax-p-1 hover:!ax-bg-[var(--hover-effect)]\"\n        >\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              opacity=\"0.4\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M3 2C2.44772 2 2 2.44772 2 3L2 13C2 13.5523 2.44772 14 3 14L11 14L11 13L3 13L3 3L11 3L11 2L3 2Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M13 2L13 14L14 14L14 2L13 2Z\" fill=\"currentColor\"></path>\n          </svg>\n        </button>\n      </div>\n\n      <!-- Bottom Border -->\n      <div class=\"ax-border-box-bottom ax-col-start-2 ax-row-start-3\">\n        <button\n          (pointerdown)=\"handleActiveBorderSide($event)\"\n          name=\"bottom\"\n          class=\"ax-p-1 hover:!ax-bg-[var(--hover-effect)]\"\n        >\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              opacity=\"0.4\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M2 3C2 2.44772 2.44772 2 3 2H13C13.5523 2 14 2.44772 14 3V11H13V3H3V11H2V3Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2 13H14V14H2V13Z\" fill=\"currentColor\"></path>\n          </svg>\n        </button>\n      </div>\n\n      <!-- Left Border -->\n      <div class=\"ax-border-box-left ax-col-start-1 ax-row-start-2\">\n        <button\n          (pointerdown)=\"handleActiveBorderSide($event)\"\n          name=\"left\"\n          class=\"ax-p-1 hover:!ax-bg-[var(--hover-effect)]\"\n        >\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              opacity=\"0.4\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M13 2C13.5523 2 14 2.44772 14 3L14 13C14 13.5523 13.5523 14 13 14L5 14L5 13L13 13L13 3L5 3L5 2L13 2Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M3 2L3 14L2 14L2 2L3 2Z\" fill=\"currentColor\"></path>\n          </svg>\n        </button>\n      </div>\n\n      <!-- All -->\n      <div class=\"ax-border-box-all ax-col-start-2 ax-row-start-2\">\n        <button\n          #allBorderEl\n          (pointerdown)=\"handleActiveBorderSide($event)\"\n          name=\"all\"\n          class=\"ax-p-1 hover:!ax-bg-[var(--hover-effect)]\"\n        >\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M2 3C2 2.44772 2.44772 2 3 2H13C13.5523 2 14 2.44772 14 3V13C14 13.5523 13.5523 14 13 14H3C2.44772 14 2 13.5523 2 13V3ZM13 3L3 3V13H13V3Z\"\n              fill=\"currentColor\"\n            ></path>\n          </svg>\n        </button>\n      </div>\n    </div>\n    <div class=\"ax-grid ax-grid-cols-[auto_1fr] ax-items-center ax-gap-x-2 ax-gap-y-2\">\n      <div class=\"ax-text-sm ax-font-light\">Style</div>\n      <ax-button-group [selection]=\"'single'\">\n        <ax-button-group-item\n          (onClick)=\"setBorder('none', 'style', currentActiveSide())\"\n          [selected]=\"shownStyle() === 'none'\"\n          ><ax-prefix\n            ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M8.70714 8.00004L12.3536 4.35359L11.6465 3.64648L8.00004 7.29293L4.35359 3.64648L3.64648 4.35359L7.29293 8.00004L3.64648 11.6465L4.35359 12.3536L8.00004 8.70714L11.6465 12.3536L12.3536 11.6465L8.70714 8.00004Z\"\n                fill=\"currentColor\"\n              ></path></svg></ax-prefix\n        ></ax-button-group-item>\n        <ax-button-group-item\n          (onClick)=\"setBorder('solid', 'style', currentActiveSide())\"\n          [selected]=\"shownStyle() === 'solid'\"\n          ><ax-prefix\n            ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M2 7.5H14\" stroke=\"currentColor\"></path></svg></ax-prefix\n        ></ax-button-group-item>\n        <ax-button-group-item\n          (onClick)=\"setBorder('dashed', 'style', currentActiveSide())\"\n          [selected]=\"shownStyle() === 'dashed'\"\n          ><ax-prefix\n            ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M5 7H2V8H5V7ZM11 8H12H14V7H12H11V8ZM9.5 7H6.5V8H9.5V7Z\"\n                fill=\"currentColor\"\n              ></path></svg></ax-prefix\n        ></ax-button-group-item>\n        <ax-button-group-item\n          (onClick)=\"setBorder('dotted', 'style', currentActiveSide())\"\n          [selected]=\"shownStyle() === 'dotted'\"\n          ><ax-prefix\n            ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M4 7H3V8H4V7ZM6 7H5V8H6V7ZM7 7H8V8H7V7ZM10 7H9V8H10V7ZM11 7H12V8H11V7ZM14 7H13V8H14V7Z\"\n                fill=\"currentColor\"\n              ></path></svg></ax-prefix\n        ></ax-button-group-item>\n      </ax-button-group>\n      <div class=\"ax-contents\" [class]=\"shownStyle() === 'none' ? 'ax-invisible' : 'ax-visible'\">\n        <div class=\"ax-text-sm ax-font-light\">Width</div>\n        <div class=\"ax-flex ax-justify-start ax-items-center ax-max-w-36\">\n          <ax-number-box\n            [minValue]=\"0\"\n            [changeOnScroll]=\"true\"\n            [value]=\"shownWidth()\"\n            (valueChange)=\"setBorder($event ?? 0, 'width', currentActiveSide())\"\n            class=\"ax-min-w-8 ax-exclude\"\n            [showSpinButtons]=\"false\"\n            ><ax-suffix><ax-text>PX</ax-text></ax-suffix></ax-number-box\n          >\n        </div>\n\n        <div class=\"ax-text-sm ax-font-light\">Color</div>\n        <div class=\"ax-flex ax-justify-start ax-items-center ax-max-w-36 ax-overflow-hidden\">\n          <ax-color-box\n            [value]=\"shownColor()\"\n            (valueChange)=\"setBorder($event, 'color', currentActiveSide())\"\n          ></ax-color-box>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".axp-border-container{--hover-effect: #404040;--focus-color: rgba(0, 106, 204, .18);--ax-range-slider-base-thickness: .15rem}.axp-border-container ax-range-slider{padding:.5rem!important}.axp-border-container ax-number-box:not(.ax-exclude) div:first-child{height:1.5rem!important;border-radius:.25rem!important;font-size:12px}.axp-border-container ax-number-box:not(.ax-exclude) div:first-child input{padding:.25rem 0 .25rem .25rem!important}\n"], dependencies: [{ kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$4.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "type", "changeOnScroll", "thousandsSeparator", "padDecimalZeros", "step", "decimals", "decimalStep", "showSpinButtons", "minValue", "maxValue", "class"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.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: AXRangeSliderModule }, { kind: "component", type: i7$1.AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: i1$8.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "color", "look", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i1$8.AXButtonGroupItemComponent, selector: "ax-button-group-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "ngmodule", type: AXColorBoxModule }, { kind: "component", type: i2$9.AXColorBoxComponent, selector: "ax-color-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "showBadge", "showValue", "showClearButton", "showIcon"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXPBorderWidgetEditComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "allBorderEl", first: true, predicate: ["allBorderEl"], descendants: true, isSignal: true }, { propertyName: "allRadiusEl", first: true, predicate: ["allRadiusEl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-pt-2 axp-border-container\">\n  <div class=\"ax-radius-box ax-flex ax-justify-between ax-items-center ax-gap-2 ax-h-[26px]\">\n    <span class=\"ax-text-sm ax-font-light\">Radius</span>\n    <div class=\"ax-flex ax-gap-2 ax-items-center\">\n      <button\n        #allRadiusEl\n        (pointerdown)=\"handleActiveRadiusSide($event)\"\n        name=\"all\"\n        class=\"ax-p-1 hover:!ax-bg-[var(--hover-effect)]\"\n      >\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M2.5 5.5C2.5 3.84315 3.84315 2.5 5.5 2.5H10.5C12.1569 2.5 13.5 3.84315 13.5 5.5V10.5C13.5 12.1569 12.1569 13.5 10.5 13.5H5.5C3.84315 13.5 2.5 12.1569 2.5 10.5V5.5Z\"\n            stroke=\"currentColor\"\n          ></path>\n        </svg>\n      </button>\n\n      <button\n        (pointerdown)=\"handleActiveRadiusSide($event)\"\n        name=\"sides\"\n        class=\"ax-p-1 hover:!ax-bg-[var(--hover-effect)]\"\n      >\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M4.5 2C3.11929 2 2 3.11929 2 4.5V7H3V4.5C3 3.67157 3.67157 3 4.5 3H7V2H4.5Z\"\n            fill=\"currentColor\"\n          ></path>\n          <path\n            d=\"M9 2V3H11.5C12.3284 3 13 3.67157 13 4.5V7H14V4.5C14 3.11929 12.8807 2 11.5 2H9Z\"\n            fill=\"currentColor\"\n          ></path>\n          <path\n            d=\"M14 9H13V11.5C13 12.3284 12.3284 13 11.5 13H9V14H11.5C12.8807 14 14 12.8807 14 11.5V9Z\"\n            fill=\"currentColor\"\n          ></path>\n          <path\n            d=\"M7 14V13H4.5C3.67157 13 3 12.3284 3 11.5V9H2V11.5C2 12.8807 3.11929 14 4.5 14H7Z\"\n            fill=\"currentColor\"\n          ></path>\n        </svg>\n      </button>\n\n      @if(currentActiveRadiusSide() ==='all'){\n      <div class=\"ax-flex ax-justify-center ax-items-center ax-flex-shrink\">\n        <ax-range-slider\n          [values]=\"allRadius()\"\n          [min]=\"0\"\n          [max]=\"100\"\n          (valuesChange)=\"setBorder($event ?? 0, 'radius', 'all')\"\n          class=\"ax-min-w-28\"\n        ></ax-range-slider>\n      </div>\n      <div class=\"ax-flex ax-justify-start ax-items-center\">\n        <ax-number-box\n          [minValue]=\"0\"\n          [maxValue]=\"100\"\n          [value]=\"allRadius()\"\n          [changeOnScroll]=\"true\"\n          (valueChange)=\"setBorder($event ?? 0, 'radius', 'all')\"\n          class=\"ax-min-w-8\"\n          [showSpinButtons]=\"false\"\n          ><ax-suffix><ax-text class=\"!ax-text-xs !ax-px-1\">PX</ax-text></ax-suffix></ax-number-box\n        >\n      </div>\n      }@else{\n      <div class=\"ax-w-48\"></div>\n      }\n    </div>\n  </div>\n\n  <div\n    class=\"axp-border-radius-sides ax-flex ax-justify-end ax-items-center ax-overflow-y-hidden ax-transition-[height] ax-duration-300 ax-ease-in-out\"\n    [class]=\"currentActiveRadiusSide() === 'all' ? '!ax-h-0' : '!ax-h-[56px]'\"\n  >\n    <div class=\"ax-grid ax-grid-cols-2 ax-grid-rows-2 ax-gap-2\">\n      <div class=\"ax-flex ax-gap-1 ax-items-center\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <g opacity=\"0.4\">\n            <path d=\"M14 14V9H13V13H9V14H14Z\" fill=\"currentColor\"></path>\n            <path d=\"M7 14V13H3V9H2V14H7Z\" fill=\"currentColor\"></path>\n            <path d=\"M2 7H3V6.5C3 4.567 4.567 3 6.5 3H7V2H6.5C4.01472 2 2 4.01472 2 6.5V7Z\" fill=\"currentColor\"></path>\n            <path d=\"M9 2V3H13V7H14V2H9Z\" fill=\"currentColor\"></path>\n          </g>\n          <path d=\"M2.5 7V6.5C2.5 4.29086 4.29086 2.5 6.5 2.5H7\" stroke=\"currentColor\"></path>\n        </svg>\n        <div class=\"ax-flex ax-justify-start ax-items-center ax-max-w-12\">\n          <ax-number-box\n            [minValue]=\"0\"\n            [changeOnScroll]=\"true\"\n            [value]=\"calculatedValues().radius['top-left']\"\n            (valueChange)=\"setBorder($event ?? 0, 'radius', 'top-left')\"\n            [showSpinButtons]=\"false\"\n            ><ax-suffix><ax-text class=\"!ax-text-xs !ax-px-1\">PX</ax-text></ax-suffix></ax-number-box\n          >\n        </div>\n      </div>\n      <div class=\"ax-flex ax-gap-1 ax-items-center\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <g opacity=\"0.4\">\n            <path d=\"M2 14V9H3V13H7V14H2Z\" fill=\"currentColor\"></path>\n            <path d=\"M9 14V13H13V9H14V14H9Z\" fill=\"currentColor\"></path>\n            <path\n              d=\"M14 7H13V6.5C13 4.567 11.433 3 9.5 3H9V2H9.5C11.9853 2 14 4.01472 14 6.5V7Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path d=\"M7 2V3H3V7H2V2H7Z\" fill=\"currentColor\"></path>\n          </g>\n          <path d=\"M13.5 7V6.5C13.5 4.29086 11.7091 2.5 9.5 2.5H9\" stroke=\"currentColor\"></path>\n        </svg>\n        <div class=\"ax-flex ax-justify-start ax-items-center ax-max-w-12\">\n          <ax-number-box\n            [minValue]=\"0\"\n            [changeOnScroll]=\"true\"\n            [value]=\"calculatedValues().radius['top-right']\"\n            (valueChange)=\"setBorder($event ?? 0, 'radius', 'top-right')\"\n            [showSpinButtons]=\"false\"\n            ><ax-suffix><ax-text class=\"!ax-text-xs !ax-px-1\">PX</ax-text></ax-suffix></ax-number-box\n          >\n        </div>\n      </div>\n      <div class=\"ax-flex ax-gap-1 ax-items-center\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <g opacity=\"0.4\">\n            <path d=\"M2 2V7H3V3H7V2H2Z\" fill=\"currentColor\"></path>\n            <path d=\"M9 2V3H13V7H14V2H9Z\" fill=\"currentColor\"></path>\n            <path d=\"M14 9H13V13H9V14H14V9Z\" fill=\"currentColor\"></path>\n            <path\n              d=\"M7 14V13H6.5C4.567 13 3 11.433 3 9.5V9H2V9.5C2 11.9853 4.01472 14 6.5 14H7Z\"\n              fill=\"currentColor\"\n            ></path>\n          </g>\n          <path d=\"M2.5 9V9.5C2.5 11.7091 4.29086 13.5 6.5 13.5H7\" stroke=\"currentColor\"></path>\n        </svg>\n        <div class=\"ax-flex ax-justify-start ax-items-center ax-max-w-12\">\n          <ax-number-box\n            [minValue]=\"0\"\n            [changeOnScroll]=\"true\"\n            [value]=\"calculatedValues().radius['bottom-left']\"\n            (valueChange)=\"setBorder($event ?? 0, 'radius', 'bottom-left')\"\n            [showSpinButtons]=\"false\"\n            ><ax-suffix><ax-text class=\"!ax-text-xs !ax-px-1\">PX</ax-text></ax-suffix></ax-number-box\n          >\n        </div>\n      </div>\n      <div class=\"ax-flex ax-gap-1 ax-items-center\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <g opacity=\"0.4\">\n            <path d=\"M2 2V7H3V3H7V2H2Z\" fill=\"currentColor\"></path>\n            <path d=\"M9 2V3H13V7H14V2H9Z\" fill=\"currentColor\"></path>\n            <path\n              d=\"M14 9H13V11.5C13 12.3284 12.3284 13 11.5 13H9V14H11.5C12.8807 14 14 12.8807 14 11.5V9Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path d=\"M7 14V13H3V9H2V14H7Z\" fill=\"currentColor\"></path>\n          </g>\n          <path d=\"M13.5 9V9.5C13.5 11.7091 11.7091 13.5 9.5 13.5H9\" stroke=\"currentColor\"></path>\n        </svg>\n        <div class=\"ax-flex ax-justify-start ax-items-center ax-max-w-12\">\n          <ax-number-box\n            [minValue]=\"0\"\n            [changeOnScroll]=\"true\"\n            [value]=\"calculatedValues().radius['bottom-right']\"\n            (valueChange)=\"setBorder($event ?? 0, 'radius', 'bottom-right')\"\n            [showSpinButtons]=\"false\"\n            ><ax-suffix><ax-text class=\"!ax-text-xs !ax-px-1\">PX</ax-text></ax-suffix></ax-number-box\n          >\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ax-flex ax-justify-between ax-items-center ax-py-1\">\n    <span class=\"ax-text-sm ax-font-light\">Borders</span>\n  </div>\n\n  <div class=\"ax-border-box ax-flex ax-justify-between ax-items-center ax-gap-4\">\n    <div class=\"ax-grid ax-grid-cols-3 ax-grid-rows-3 ax-gap-1 ax-flex-shrink-0\">\n      <!-- Top Border -->\n      <div class=\"ax-border-box-top ax-col-start-2 ax-row-start-1\">\n        <button\n          (pointerdown)=\"handleActiveBorderSide($event)\"\n          name=\"top\"\n          class=\"ax-p-1 hover:!ax-bg-[var(--hover-effect)]\"\n        >\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              opacity=\"0.4\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M2 13C2 13.5523 2.44772 14 3 14H13C13.5523 14 14 13.5523 14 13V5H13V13H3V5H2V13Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2 3H14V2H2V3Z\" fill=\"currentColor\"></path>\n          </svg>\n        </button>\n      </div>\n\n      <!-- Right Border -->\n      <div class=\"ax-border-box-right ax-col-start-3 ax-row-start-2\">\n        <button\n          (pointerdown)=\"handleActiveBorderSide($event)\"\n          name=\"right\"\n          class=\"ax-p-1 hover:!ax-bg-[var(--hover-effect)]\"\n        >\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              opacity=\"0.4\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M3 2C2.44772 2 2 2.44772 2 3L2 13C2 13.5523 2.44772 14 3 14L11 14L11 13L3 13L3 3L11 3L11 2L3 2Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M13 2L13 14L14 14L14 2L13 2Z\" fill=\"currentColor\"></path>\n          </svg>\n        </button>\n      </div>\n\n      <!-- Bottom Border -->\n      <div class=\"ax-border-box-bottom ax-col-start-2 ax-row-start-3\">\n        <button\n          (pointerdown)=\"handleActiveBorderSide($event)\"\n          name=\"bottom\"\n          class=\"ax-p-1 hover:!ax-bg-[var(--hover-effect)]\"\n        >\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              opacity=\"0.4\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M2 3C2 2.44772 2.44772 2 3 2H13C13.5523 2 14 2.44772 14 3V11H13V3H3V11H2V3Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2 13H14V14H2V13Z\" fill=\"currentColor\"></path>\n          </svg>\n        </button>\n      </div>\n\n      <!-- Left Border -->\n      <div class=\"ax-border-box-left ax-col-start-1 ax-row-start-2\">\n        <button\n          (pointerdown)=\"handleActiveBorderSide($event)\"\n          name=\"left\"\n          class=\"ax-p-1 hover:!ax-bg-[var(--hover-effect)]\"\n        >\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              opacity=\"0.4\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M13 2C13.5523 2 14 2.44772 14 3L14 13C14 13.5523 13.5523 14 13 14L5 14L5 13L13 13L13 3L5 3L5 2L13 2Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M3 2L3 14L2 14L2 2L3 2Z\" fill=\"currentColor\"></path>\n          </svg>\n        </button>\n      </div>\n\n      <!-- All -->\n      <div class=\"ax-border-box-all ax-col-start-2 ax-row-start-2\">\n        <button\n          #allBorderEl\n          (pointerdown)=\"handleActiveBorderSide($event)\"\n          name=\"all\"\n          class=\"ax-p-1 hover:!ax-bg-[var(--hover-effect)]\"\n        >\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M2 3C2 2.44772 2.44772 2 3 2H13C13.5523 2 14 2.44772 14 3V13C14 13.5523 13.5523 14 13 14H3C2.44772 14 2 13.5523 2 13V3ZM13 3L3 3V13H13V3Z\"\n              fill=\"currentColor\"\n            ></path>\n          </svg>\n        </button>\n      </div>\n    </div>\n    <div class=\"ax-grid ax-grid-cols-[auto_1fr] ax-items-center ax-gap-x-2 ax-gap-y-2\">\n      <div class=\"ax-text-sm ax-font-light\">Style</div>\n      <ax-button-group [selection]=\"'single'\">\n        <ax-button-group-item\n          (onClick)=\"setBorder('none', 'style', currentActiveSide())\"\n          [selected]=\"shownStyle() === 'none'\"\n          ><ax-prefix\n            ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M8.70714 8.00004L12.3536 4.35359L11.6465 3.64648L8.00004 7.29293L4.35359 3.64648L3.64648 4.35359L7.29293 8.00004L3.64648 11.6465L4.35359 12.3536L8.00004 8.70714L11.6465 12.3536L12.3536 11.6465L8.70714 8.00004Z\"\n                fill=\"currentColor\"\n              ></path></svg></ax-prefix\n        ></ax-button-group-item>\n        <ax-button-group-item\n          (onClick)=\"setBorder('solid', 'style', currentActiveSide())\"\n          [selected]=\"shownStyle() === 'solid'\"\n          ><ax-prefix\n            ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M2 7.5H14\" stroke=\"currentColor\"></path></svg></ax-prefix\n        ></ax-button-group-item>\n        <ax-button-group-item\n          (onClick)=\"setBorder('dashed', 'style', currentActiveSide())\"\n          [selected]=\"shownStyle() === 'dashed'\"\n          ><ax-prefix\n            ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M5 7H2V8H5V7ZM11 8H12H14V7H12H11V8ZM9.5 7H6.5V8H9.5V7Z\"\n                fill=\"currentColor\"\n              ></path></svg></ax-prefix\n        ></ax-button-group-item>\n        <ax-button-group-item\n          (onClick)=\"setBorder('dotted', 'style', currentActiveSide())\"\n          [selected]=\"shownStyle() === 'dotted'\"\n          ><ax-prefix\n            ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M4 7H3V8H4V7ZM6 7H5V8H6V7ZM7 7H8V8H7V7ZM10 7H9V8H10V7ZM11 7H12V8H11V7ZM14 7H13V8H14V7Z\"\n                fill=\"currentColor\"\n              ></path></svg></ax-prefix\n        ></ax-button-group-item>\n      </ax-button-group>\n      <div class=\"ax-contents\" [class]=\"shownStyle() === 'none' ? 'ax-invisible' : 'ax-visible'\">\n        <div class=\"ax-text-sm ax-font-light\">Width</div>\n        <div class=\"ax-flex ax-justify-start ax-items-center ax-max-w-36\">\n          <ax-number-box\n            [minValue]=\"0\"\n            [changeOnScroll]=\"true\"\n            [value]=\"shownWidth()\"\n            (valueChange)=\"setBorder($event ?? 0, 'width', currentActiveSide())\"\n            class=\"ax-min-w-8 ax-exclude\"\n            [showSpinButtons]=\"false\"\n            ><ax-suffix><ax-text>PX</ax-text></ax-suffix></ax-number-box\n          >\n        </div>\n\n        <div class=\"ax-text-sm ax-font-light\">Color</div>\n        <div class=\"ax-flex ax-justify-start ax-items-center ax-max-w-36 ax-overflow-hidden\">\n          <ax-color-box\n            [value]=\"shownColor()\"\n            (valueChange)=\"setBorder($event, 'color', currentActiveSide())\"\n          ></ax-color-box>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".axp-border-container{--hover-effect: #404040;--focus-color: rgba(0, 106, 204, .18);--ax-range-slider-base-thickness: .15rem}.axp-border-container ax-range-slider{padding:.5rem!important}.axp-border-container ax-number-box:not(.ax-exclude) div:first-child{height:1.5rem!important;border-radius:.25rem!important;font-size:12px}.axp-border-container ax-number-box:not(.ax-exclude) div:first-child input{padding:.25rem 0 .25rem .25rem!important}\n"], dependencies: [{ kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$4.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "type", "changeOnScroll", "thousandsSeparator", "padDecimalZeros", "step", "decimals", "decimalStep", "showSpinButtons", "minValue", "maxValue", "class"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.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: AXRangeSliderModule }, { kind: "component", type: i7$1.AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: i1$8.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "color", "look", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i1$8.AXButtonGroupItemComponent, selector: "ax-button-group-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "ngmodule", type: AXColorBoxModule }, { kind: "component", type: i2$8.AXColorBoxComponent, selector: "ax-color-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "showBadge", "showValue", "showClearButton", "showIcon"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPBorderWidgetEditComponent, decorators: [{
             type: Component,
@@ -11411,6 +10920,47 @@ const AXPBorderWidget = {
     },
 };
 
+class AXPDirectionWidgetEditComponent extends AXPValueWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.direction = computed(() => this.getValue() || 'ltr');
+        this.directionOptions = [
+            { id: 'ltr', text: 'Left to Right', icon: 'fa-light fa-arrow-right' },
+            { id: 'rtl', text: 'Right to Left', icon: 'fa-light fa-arrow-left' },
+        ];
+    }
+    setDirection(value) {
+        const data = value || 'ltr';
+        this.setValue(data);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPDirectionWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: AXPDirectionWidgetEditComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"ax-pt-2\">\n  <span class=\"ax-text-sm ax-font-light\">Direction</span>\n  <div class=\"ax-mt-2\">\n    <ax-selection-list\n      [items]=\"directionOptions\"\n      [ngModel]=\"direction()\"\n      (ngModelChange)=\"setDirection($event)\"\n      direction=\"horizontal\"\n      [multiple]=\"false\"\n      [showControl]=\"true\"\n      look=\"card\"\n      valueField=\"id\"\n      textField=\"text\"\n    >\n      <ng-template #itemTemplate let-item>\n        <div class=\"ax-flex ax-items-center\">\n          <i [class]=\"item.icon\"></i>\n          <span class=\"ax-ml-2\">{{ item.text }}</span>\n        </div>\n      </ng-template>\n    </ax-selection-list>\n  </div>\n</div>\n", styles: [".ax-selection-list-item{min-width:80px;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: AXSelectionListModule }, { kind: "component", type: i2$5.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"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPDirectionWidgetEditComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXSelectionListModule, FormsModule], template: "<div class=\"ax-pt-2\">\n  <span class=\"ax-text-sm ax-font-light\">Direction</span>\n  <div class=\"ax-mt-2\">\n    <ax-selection-list\n      [items]=\"directionOptions\"\n      [ngModel]=\"direction()\"\n      (ngModelChange)=\"setDirection($event)\"\n      direction=\"horizontal\"\n      [multiple]=\"false\"\n      [showControl]=\"true\"\n      look=\"card\"\n      valueField=\"id\"\n      textField=\"text\"\n    >\n      <ng-template #itemTemplate let-item>\n        <div class=\"ax-flex ax-items-center\">\n          <i [class]=\"item.icon\"></i>\n          <span class=\"ax-ml-2\">{{ item.text }}</span>\n        </div>\n      </ng-template>\n    </ax-selection-list>\n  </div>\n</div>\n", styles: [".ax-selection-list-item{min-width:80px;text-align:center}\n"] }]
+        }] });
+
+var directionWidgetEditor_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPDirectionWidgetEditComponent: AXPDirectionWidgetEditComponent
+});
+
+const AXPDirectionWidget = {
+    name: 'direction',
+    title: 'Direction',
+    description: 'Setting text direction (RTL/LTR)',
+    categories: AXP_WIDGETS_EDITOR_CATEGORY,
+    icon: 'fa-light fa-directions',
+    type: 'editor',
+    properties: [AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY],
+    components: {
+        edit: {
+            component: () => Promise.resolve().then(function () { return directionWidgetEditor_component; }).then((c) => c.AXPDirectionWidgetEditComponent),
+        },
+    },
+};
+
 const AXP_Flex_Box_Alignments = [
     { value: 'top-left', label: 'Top Left', align: 'flex-start', justify: 'flex-start' },
     { value: 'top-center', label: 'Top Center', align: 'flex-start', justify: 'center' },
@@ -11740,7 +11290,7 @@ class AXPSpacingWidgetEditComponent extends AXPValueWidgetComponent {
             { label: '200', value: 200 },
         ];
         this.popover = viewChild.required(AXPopoverComponent);
-        this.afterRender = afterNextRender(() => {
+        this.#afterRender = afterNextRender(() => {
             if (this.getValue()) {
                 this.calculatedValues.set(AXPPropertyEditorHelper.parseSpacingBox(this.getValue()));
                 this.originalValues.set(AXPPropertyEditorHelper.parseSpacingBox(this.getValue()));
@@ -11819,6 +11369,7 @@ class AXPSpacingWidgetEditComponent extends AXPValueWidgetComponent {
         const touch = e.touches[0];
         return { clientX: touch.clientX, clientY: touch.clientY };
     }
+    #afterRender;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPSpacingWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXPSpacingWidgetEditComponent, isStandalone: true, selector: "ng-component", 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  </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            <div style=\"display: grid; grid-template-columns: 1fr auto; transform: translate3d(0px, 0px, 0px)\">\n              <div\n                data-legacy-styled=\"true\"\n                style=\"\n                  grid-area: 1 / 1 / 2 / -1;\n                  align-items: stretch;\n                  background-color: var(--color-ui-input-background);\n                  border-color: var(--color-border-2);\n                  border-radius: 4px;\n                  border-style: solid;\n                  border-width: 1px;\n                  display: flex;\n                  flex: 0 1 auto;\n                  height: 24px;\n                  position: relative;\n                \"\n              >\n                <input\n                  autocomplete=\"off\"\n                  data-wf-text-input=\"true\"\n                  name=\"spacing\"\n                  placeholder=\"\"\n                  aria-label=\"Edit spacing input\"\n                  type=\"text\"\n                  aria-disabled=\"false\"\n                  [value]=\"value\"\n                  (input)=\"setSpacing($event, type, side)\"\n                  style=\"\n                    padding-right: 20px;\n                    background-color: transparent;\n                    border-color: transparent;\n                    border-radius: 4px;\n                    border-style: solid;\n                    border-width: 0px;\n                    box-sizing: border-box;\n                    color: var(--color-text-primary);\n                    cursor: auto;\n                    display: block;\n                    font-family: inherit;\n                    font-size: inherit;\n                    height: 100%;\n                    line-height: 1;\n                    outline: transparent solid 2px;\n                    padding: 0px 4px;\n                    width: 100%;\n                  \"\n                />\n              </div>\n              <div\n                id=\"spacing-UnitSelect\"\n                data-prevent-global-event-handlers=\"true\"\n                tabindex=\"-1\"\n                data-legacy-styled=\"true\"\n                aria-expanded=\"false\"\n                aria-haspopup=\"listbox\"\n                data-focus=\"false\"\n                style=\"\n                  border-color: transparent;\n                  outline: 0px;\n                  cursor: default;\n                  user-select: none;\n                  font-size: 9px;\n                  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu,\n                    Cantarell, 'Helvetica Neue', Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji',\n                    'Segoe UI Symbol', sans-serif;\n                  line-height: 12px;\n                  letter-spacing: -0.115px;\n                  text-transform: none;\n                  color: var(--color-text-primary);\n                  place-self: center stretch;\n                  grid-area: 1 / 2 / 2 / 3;\n                  z-index: 1;\n                  min-width: 16px;\n                  border-radius: 1px;\n                  height: calc(100% - 2px);\n                  text-align: center;\n                  background: transparent;\n                  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px;\n                  border-width: 0px;\n                  margin: 1px;\n                  position: relative;\n                  right: 2px;\n                  display: grid;\n                  grid-template-columns: auto;\n                  grid-auto-flow: column;\n                  justify-content: unset;\n                  width: 100%;\n                  flex-grow: unset;\n                  padding: 0px;\n                  box-sizing: border-box;\n                  --component-icon-color: var(--color-text-secondary);\n                  align-items: center;\n                  border-style: solid;\n                \"\n              >\n                <div\n                  data-legacy-styled=\"true\"\n                  style=\"\n                    justify-self: start;\n                    width: 100%;\n                    overflow: hidden;\n                    text-overflow: ellipsis;\n                    white-space: nowrap;\n                  \"\n                >\n                  PX\n                  <!--PX-->\n                </div>\n              </div>\n            </div>\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\"> {{ units()[this.current().type][this.current().side] }}</span>\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;-moz-user-select:-moz-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;-moz-user-select:-moz-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;-moz-user-select:-moz-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;-moz-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;-moz-appearance:none;appearance:none;height:10px;width:10px;background-color:#fff;border-radius:50%;border:1px solid #353535;box-shadow:-407px 0 0 400px rgba(41,41,41,.44)}.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 rgba(41,41,41,.44)}.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: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i1$9.AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXRangeSliderModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -12882,7 +12433,7 @@ class AXPCronJobWidgetEditComponent extends AXPValueWidgetComponent {
         this.setValue(e.data);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPCronJobWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: AXPCronJobWidgetEditComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `<ax-cron-job-container [ngModel]="expreesion()"> </ax-cron-job-container>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXCronJobModule }, { kind: "component", type: i2$a.AXCronJobContainerComponent, selector: "ax-cron-job-container", outputs: ["onValueChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: AXPCronJobWidgetEditComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `<ax-cron-job-container [ngModel]="expreesion()"> </ax-cron-job-container>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXCronJobModule }, { kind: "component", type: i2$9.AXCronJobContainerComponent, selector: "ax-cron-job-container", outputs: ["onValueChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPCronJobWidgetEditComponent, decorators: [{
             type: Component,
@@ -12962,7 +12513,7 @@ class AXPCronJobWidgetDesignerComponent extends AXPValueWidgetComponent {
         this.expreesion = signal('* * * ? * * *');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPCronJobWidgetDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: AXPCronJobWidgetDesignerComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `<ax-cron-job-container [ngModel]="expreesion()"> </ax-cron-job-container>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXCronJobModule }, { kind: "component", type: i2$a.AXCronJobContainerComponent, selector: "ax-cron-job-container", outputs: ["onValueChanged"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: AXPCronJobWidgetDesignerComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `<ax-cron-job-container [ngModel]="expreesion()"> </ax-cron-job-container>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXCronJobModule }, { kind: "component", type: i2$9.AXCronJobContainerComponent, selector: "ax-cron-job-container", outputs: ["onValueChanged"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPCronJobWidgetDesignerComponent, decorators: [{
             type: Component,
@@ -13188,7 +12739,7 @@ class AXPColorBoxWidgetEditComponent extends AXPValueWidgetComponent {
       <ax-clear-button></ax-clear-button>
       } 
     </ax-color-box>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXColorBoxModule }, { kind: "component", type: i2$9.AXColorBoxComponent, selector: "ax-color-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "showBadge", "showValue", "showClearButton", "showIcon"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i4.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXColorBoxModule }, { kind: "component", type: i2$8.AXColorBoxComponent, selector: "ax-color-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "showBadge", "showValue", "showClearButton", "showIcon"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i4.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPColorBoxWidgetEditComponent, decorators: [{
             type: Component,
@@ -14143,7 +13694,7 @@ class AXPTimerDurationWidgetEditComponent extends AXPValueWidgetComponent {
     [valueEnd]="to()"
     [disabled]="disabled()"
   >
-  </ax-time-duration>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXTimeDurationModule }, { kind: "component", type: i2$b.AXTimeDurationComponent, selector: "ax-time-duration", inputs: ["disabled", "tabIndex", "readonly", "look", "valueStart", "valueEnd"], outputs: ["onValueChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  </ax-time-duration>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXTimeDurationModule }, { kind: "component", type: i2$a.AXTimeDurationComponent, selector: "ax-time-duration", inputs: ["disabled", "tabIndex", "readonly", "look", "valueStart", "valueEnd"], outputs: ["onValueChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPTimerDurationWidgetEditComponent, decorators: [{
             type: Component,
@@ -15410,17 +14961,49 @@ var gridWidgetDesigner_component = /*#__PURE__*/Object.freeze({
 class AXPGridWidgetViewComponent extends AXPLayoutWidgetComponent {
     constructor() {
         super(...arguments);
-        this.cols = computed(() => this.options()['cols'] ?? 1);
-        this.rows = computed(() => this.options()['rows'] ?? 1);
-        this.gap = computed(() => this.options()['gap'] ?? 0);
+        this.cols = computed(() => this.calcGridRowOrColumn(this.options()['grid']?.default?.gridTemplateColumns ?? 'repeat(1, 1fr)'));
+        this.rows = computed(() => this.calcGridRowOrColumn(this.options()['grid']?.default?.gridTemplateRows ?? 'repeat(1, 1fr)'));
+        this.align = computed(() => this.options()['grid']?.default?.alignItems ?? 'stretch');
+        this.justify = computed(() => this.options()['grid']?.default?.justifyItems ?? 'stretch');
+        this.autoFlow = computed(() => this.options()['grid']?.default?.gridAutoFlow ?? 'row');
+        this.gap = computed(() => this.options()['grid']?.default?.gap ?? '1px');
+    }
+    calcGridRowOrColumn(value) {
+        return AXPPropertyEditorHelper.parseGridTemplate(value);
+    }
+    get __class() {
+        return {
+            'ax-widget-container': true,
+            'ax-block': true,
+            'ax-w-full': true,
+        };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPGridWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXPGridWidgetViewComponent, isStandalone: true, selector: "axp-grid-layout-widget", usesInheritance: true, ngImport: i0, template: `
-    <div class="ax-grid ax-grid-cols-{{ cols() }} ax-grid-rows-{{ rows() }} ax-gap-{{ gap() }}">
-      @for (child of children(); track $index) {
-      <ng-container axp-widget-renderer [node]="child" [index]="index" [parentNode]="this" [mode]="this.mode"> </ng-container>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXPGridWidgetViewComponent, isStandalone: true, selector: "axp-grid-layout-widget", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `
+    <div
+      class="ax-grid ax-grid-flow-{{ autoFlow() }} ax-grid-cols-{{ cols() }} ax-grid-rows-{{ rows() }} ax-items-{{
+        align()
+      }} ax-justify-items-{{ justify() }}"
+      [style]="{ gap: gap() }"
+    >
+      @for (node of children(); track $index) {
+        <ng-container
+          axp-widget-renderer
+          [node]="node"
+          [index]="index"
+          [parentNode]="this"
+          [mode]="this.mode"
+        ></ng-container>
       }
     </div>
+
+    <!--TO BE SURE ALL DYNAMIC TAILWIND CLASSES WORK WELL!-->
+    @if (false) {
+      <div class="ax-hidden">
+        ax-items-start ax-items-center ax-items-end ax-items-stretch ax-justify-items-start ax-justify-items-center
+        ax-justify-items-end ax-justify-items-stretch ax-grid-flow-row ax-grid-flow-col
+      </div>
+    }
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: i1$3.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPGridWidgetViewComponent, decorators: [{
@@ -15428,16 +15011,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             args: [{
                     selector: 'axp-grid-layout-widget',
                     template: `
-    <div class="ax-grid ax-grid-cols-{{ cols() }} ax-grid-rows-{{ rows() }} ax-gap-{{ gap() }}">
-      @for (child of children(); track $index) {
-      <ng-container axp-widget-renderer [node]="child" [index]="index" [parentNode]="this" [mode]="this.mode"> </ng-container>
+    <div
+      class="ax-grid ax-grid-flow-{{ autoFlow() }} ax-grid-cols-{{ cols() }} ax-grid-rows-{{ rows() }} ax-items-{{
+        align()
+      }} ax-justify-items-{{ justify() }}"
+      [style]="{ gap: gap() }"
+    >
+      @for (node of children(); track $index) {
+        <ng-container
+          axp-widget-renderer
+          [node]="node"
+          [index]="index"
+          [parentNode]="this"
+          [mode]="this.mode"
+        ></ng-container>
       }
     </div>
+
+    <!--TO BE SURE ALL DYNAMIC TAILWIND CLASSES WORK WELL!-->
+    @if (false) {
+      <div class="ax-hidden">
+        ax-items-start ax-items-center ax-items-end ax-items-stretch ax-justify-items-start ax-justify-items-center
+        ax-justify-items-end ax-justify-items-stretch ax-grid-flow-row ax-grid-flow-col
+      </div>
+    }
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule, AXPLayoutBuilderModule]
+                    imports: [CommonModule, AXPLayoutBuilderModule],
                 }]
-        }] });
+        }], propDecorators: { __class: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
 
 var gridWidgetView_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -16499,6 +16104,7 @@ class AXPWidgetsModule {
                     AXPDocumentWidget,
                     //
                     AXPBlockWidget,
+                    AXPFlexWidget,
                     AXPPageWidget,
                     AXPRepeaterWidget,
                     AXPTextBlockWidget,
@@ -16525,7 +16131,6 @@ class AXPWidgetsModule {
                     AXPLargeTextWidget,
                     AXPMapBoxWidget,
                     AXPCronJobWidget,
-                    AXPFileBoxWidget,
                     AXPFileUploaderWidget,
                     AXPQrcodeWidget,
                     AXPPasswordBoxWidget,
@@ -16539,6 +16144,7 @@ class AXPWidgetsModule {
                     //
                     AXPSpacingWidget,
                     AXPBorderWidget,
+                    AXPDirectionWidget,
                     //
                     AXPStringFilterWidget,
                     AXPBooleanFilterWidget,
@@ -16574,6 +16180,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                                 AXPDocumentWidget,
                                 //
                                 AXPBlockWidget,
+                                AXPFlexWidget,
                                 AXPPageWidget,
                                 AXPRepeaterWidget,
                                 AXPTextBlockWidget,
@@ -16600,7 +16207,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                                 AXPLargeTextWidget,
                                 AXPMapBoxWidget,
                                 AXPCronJobWidget,
-                                AXPFileBoxWidget,
                                 AXPFileUploaderWidget,
                                 AXPQrcodeWidget,
                                 AXPPasswordBoxWidget,
@@ -16614,6 +16220,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                                 //
                                 AXPSpacingWidget,
                                 AXPBorderWidget,
+                                AXPDirectionWidget,
                                 //
                                 AXPStringFilterWidget,
                                 AXPBooleanFilterWidget,
@@ -16653,5 +16260,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AXPAdvancedGridItemWidget, AXPAdvancedGridItemWidgetDesignerComponent, AXPAdvancedGridItemWidgetPrintComponent, AXPAdvancedGridItemWidgetViewComponent, AXPAdvancedGridOptionsWidget, AXPAdvancedGridOptionsWidgetEditComponent, AXPAdvancedGridWidget, AXPAdvancedGridWidgetDesignerComponent, AXPAdvancedGridWidgetViewComponent, AXPAvatarWidget, AXPAvatarWidgetColumnComponent, AXPAvatarWidgetDesignerComponent, AXPAvatarWidgetEditComponent, AXPAvatarWidgetPrintComponent, AXPAvatarWidgetViewComponent, AXPBetweenExpressionValidationWidget, AXPBetweenValidationWidgetEditComponent, AXPBlockWidget, AXPBlockWidgetDesignerComponent, AXPBlockWidgetViewComponent, AXPBorderWidget, AXPBorderWidgetEditComponent, AXPButtonWidget, AXPButtonWidgetViewComponent, AXPCallbackValidationWidget, AXPCallbackValidationWidgetEditComponent, AXPCheckBoxWidget, AXPCheckBoxWidgetEditComponent, AXPContactWidget, AXPContactWidgetColumnComponent, AXPContactWidgetEditComponent, AXPContactWidgetPrintComponent, AXPContactWidgetViewComponent, AXPDateTimeBoxWidget, AXPDateTimeBoxWidgetColumnComponent, AXPDateTimeBoxWidgetEditComponent, AXPDateTimeBoxWidgetFilterComponent, AXPDateTimeBoxWidgetPrintComponent, AXPDateTimeBoxWidgetViewComponent, AXPEmailBoxWidget, AXPEmailBoxWidgetColumnComponent, AXPEmailBoxWidgetEditComponent, AXPEmailBoxWidgetFilterComponent, AXPEmailBoxWidgetPrintComponent, AXPEmailBoxWidgetViewComponent, AXPEqualValidationWidget, AXPEqualValidationWidgetEditComponent, AXPFileBoxWidget, AXPFileBoxWidgetColumnComponent, AXPFileBoxWidgetEditComponent, AXPFileBoxWidgetFilterComponent, AXPFileBoxWidgetPrintComponent, AXPFileBoxWidgetViewComponent, AXPFileManagementService, AXPFileUploaderManagementService, AXPFileUploaderWidget, AXPFileUploaderWidgetColumnComponent, AXPFileUploaderWidgetEditComponent, AXPFileUploaderWidgetPrintComponent, AXPFileUploaderWidgetViewComponent, AXPFlexOptionsWidget, AXPFlexOptionsWidgetEditComponent, AXPGalleryWidget, AXPGalleryWidgetEditComponent, AXPGalleryWidgetPrintComponent, AXPGalleryWidgetViewComponent, AXPGreaterThanExpressionValidationWidget, AXPGreaterThanValidationWidgetEditComponent, AXPGridOptionsWidget, AXPGridOptionsWidgetEditComponent, AXPLargeTextWidget, AXPLargeTextWidgetColumnComponent, AXPLargeTextWidgetEditComponent, AXPLargeTextWidgetFilterComponent, AXPLargeTextWidgetPrintComponent, AXPLargeTextWidgetViewComponent, AXPLessThanExpressionValidationWidget, AXPLessThanValidationWidgetEditComponent, AXPLinkWidget, AXPLinkWidgetColumnComponent, AXPLinkWidgetEditComponent, AXPLinkWidgetFilterComponent, AXPLinkWidgetPrintComponent, AXPLinkWidgetViewComponent, AXPMapBoxWidget, AXPMapBoxWidgetEditComponent, AXPMapBoxWidgetViewComponent, AXPMaxLengthExpressionValidationWidget, AXPMaxLengthValidationWidgetEditComponent, AXPMinLengthExpressionValidationWidget, AXPMinLengthValidationWidgetEditComponent, AXPNumberBoxWidget, AXPNumberBoxWidgetColumnComponent, AXPNumberBoxWidgetEditComponent, AXPNumberBoxWidgetFilterComponent, AXPNumberBoxWidgetPrintComponent, AXPNumberBoxWidgetViewComponent, AXPPageWidget, AXPPageWidgetViewComponent, AXPPasswordBoxWidget, AXPPasswordBoxWidgetColumnComponent, AXPPasswordBoxWidgetEditComponent, AXPPasswordBoxWidgetFilterComponent, AXPPasswordBoxWidgetPrintComponent, AXPPasswordBoxWidgetViewComponent, AXPPhoneBoxWidget, AXPPhoneBoxWidgetColumnComponent, AXPPhoneBoxWidgetEditComponent, AXPPhoneBoxWidgetFilterComponent, AXPPhoneBoxWidgetPrintComponent, AXPPhoneBoxWidgetViewComponent, AXPPropertyEditorHelper, AXPRegularExpressionValidationWidget, AXPRegularExpressionValidationWidgetEditComponent, AXPRepeaterWidget, AXPRepeaterWidgetDesignerComponent, AXPRepeaterWidgetEditComponent, AXPRepeaterWidgetPrintComponent, AXPRepeaterWidgetViewComponent, AXPRequiredValidationWidget, AXPRequiredValidationWidgetEditComponent, AXPRichTextWidget, AXPRichTextWidgetColumnComponent, AXPRichTextWidgetEditComponent, AXPRichTextWidgetFilterComponent, AXPRichTextWidgetPrintComponent, AXPRichTextWidgetViewComponent, AXPSelectBoxWidget, AXPSelectBoxWidgetColumnComponent, AXPSelectBoxWidgetEditComponent, AXPSelectBoxWidgetFilterComponent, AXPSelectBoxWidgetPrintComponent, AXPSelectBoxWidgetViewComponent, AXPSelectionListWidget, AXPSelectionListWidgetColumnComponent, AXPSelectionListWidgetDesignerComponent, AXPSelectionListWidgetEditComponent, AXPSelectionListWidgetFilterComponent, AXPSelectionListWidgetPrintComponent, AXPSelectionListWidgetViewComponent, AXPSignatureWidget, AXPSignatureWidgetColumnComponent, AXPSignatureWidgetEditComponent, AXPSignatureWidgetFilterComponent, AXPSignatureWidgetPrintComponent, AXPSignatureWidgetViewComponent, AXPSingleFileBoxWidget, AXPSingleFileBoxWidgetColumnComponent, AXPSingleFileBoxWidgetEditComponent, AXPSingleFileBoxWidgetFilterComponent, AXPSingleFileBoxWidgetPrintComponent, AXPSingleFileBoxWidgetViewComponent, AXPSpacingWidget, AXPSpacingWidgetEditComponent, AXPTemplateBoxWidget, AXPTemplateBoxWidgetColumnComponent, AXPTemplateBoxWidgetEditComponent, AXPTemplateBoxWidgetFilterComponent, AXPTemplateBoxWidgetPrintComponent, AXPTemplateBoxWidgetViewComponent, AXPTextBoxWidget, AXPTextBoxWidgetColumnComponent, AXPTextBoxWidgetEditComponent, AXPTextBoxWidgetFilterComponent, AXPTextBoxWidgetPrintComponent$1 as AXPTextBoxWidgetPrintComponent, AXPTextBoxWidgetViewComponent, AXPToggleWidget, AXPToggleWidgetColumnComponent, AXPToggleWidgetEditComponent, AXPToggleWidgetFilterComponent, AXPToggleWidgetPrintComponent, AXPToggleWidgetViewComponent, AXPWidgetsModule, AXP_ALLOW_MULTIPLE_PROPERTY, AXP_ALLOW_SEARCH_PROPERTY, AXP_ANIMATION_PROPERTY_GROUP, AXP_APPEARANCE_PROPERTY_GROUP, AXP_BEHAVIOR_PROPERTY_GROUP, AXP_BETWEEN_VALIDATION_PROPERTY, AXP_BG_COLOR_PROPERTY, AXP_BOX_MODEL_PROPERTY_GROUP, AXP_CALLBACK_VALIDATION_PROPERTY, AXP_COLOR_PROPERTY, AXP_CONTENT_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DATA_PROPERTY_GROUP, AXP_DATA_SOURCE_PROPERTIES, AXP_DATA_SOURCE_PROPERTY, AXP_DATA_SOURCE_TEXT_FIELD, AXP_DATA_SOURCE_VALUE_FIELD, AXP_DATE_FORMAT_PROPERTY, AXP_DESCRIPTION_PROPERTY, AXP_DIRECTION_PROPERTY, AXP_DISABLED_PROPERTY, AXP_DOWNLOADABLE_PROPERTY, AXP_EQUAL_VALIDATION_PROPERTY, AXP_FALSY_TEXT_PROPERTY, AXP_FONT_SIZE_PROPERTY, AXP_Flex_Box_Align_Options, AXP_Flex_Box_Alignments, AXP_Flex_Box_Justify_Options, AXP_GREATER_THAN_VALIDATION_PROPERTY, AXP_Grid_Box_Align_Items_Options, AXP_Grid_Box_Alignments, AXP_Grid_Box_Justify_Items_Options, AXP_HAS_CLEAR_BUTTON_PROPERTY, AXP_HAS_COPY_ICON_PROPERTY, AXP_HAS_EYE_ICON_PROPERTY, AXP_HAS_ICON_PROPERTY, AXP_HAS_LABEL_PROPERTY, AXP_ICON_PROPERTY, AXP_IS_LOADING_PROPERTY, AXP_LABEL_PROPERTY, AXP_LAYOUT_ADVANCED_GRID_PROPERTY, AXP_LAYOUT_BORDER_PROPERTY, AXP_LAYOUT_COLUMNS_PROPERTY, AXP_LAYOUT_COL_END_PROPERTY, AXP_LAYOUT_COL_SPAN_PROPERTY, AXP_LAYOUT_COL_START_PROPERTY, AXP_LAYOUT_FLEX_PROPERTY, AXP_LAYOUT_FLEX_PROPERTY_GROUP, AXP_LAYOUT_GAP_PROPERTY, AXP_LAYOUT_GRID_ITEM_PROPERTIES, AXP_LAYOUT_GRID_PROPERTIES, AXP_LAYOUT_GRID_PROPERTY, AXP_LAYOUT_GRID_PROPERTY_GROUP, AXP_LAYOUT_GRID_ROW_PROPERTIES, AXP_LAYOUT_ROWS_PROPERTY, AXP_LAYOUT_SHOW_HEADER_PROPERTY, AXP_LAYOUT_SPACING_PROPERTY, AXP_LESS_THAN_VALIDATION_PROPERTY, AXP_MAX_LENGTH_VALIDATION_PROPERTY, AXP_MIN_LENGTH_VALIDATION_PROPERTY, AXP_NAME_PROPERTY, AXP_PLACEHOLDER_PROPERTY, AXP_READONLY_PROPERTY, AXP_REGULAR_EXPRESSION_VALIDATION_PROPERTY, AXP_REQUIRED_VALIDATION_PROPERTY, AXP_STYLE_COLOR_PROPERTY, AXP_STYLE_LOOK_PROPERTY, AXP_STYLING_PROPERTY_GROUP, AXP_TABLE_COLUMN_HEIGHT_PROPERTY, AXP_TABLE_COLUMN_WIDTH_PROPERTY, AXP_TEXT_FIELD_PROPERTY, AXP_TEXT_PROPERTY, AXP_THEME_PROPERTY, AXP_TITLE_PROPERTY, AXP_TRULY_TEXT_PROPERTY, AXP_VALIDATION_PROPERTY_GROUP, AXP_VALUE_FIELD_PROPERTY, AXP_WIDGET_PROPERTY_GROUP, AXP_default_Border_Box_Units, AXP_default_Border_Box_Value, AXP_default_Spacing_Box_Units, AXP_default_Spacing_Box_Value, DEFAULT_STRATEGY_CONFIG, STRATEGY_CONFIG_TOKEN, booleanDefaultProperty, findNonEmptyBreakpoints, largeTextDefaultProperty, numberDefaultProperty, numberMaxValueProperty, numberMinValueProperty, plainTextDefaultProperty };
+export { AXPAdvancedGridItemWidget, AXPAdvancedGridItemWidgetDesignerComponent, AXPAdvancedGridItemWidgetPrintComponent, AXPAdvancedGridItemWidgetViewComponent, AXPAdvancedGridOptionsWidget, AXPAdvancedGridOptionsWidgetEditComponent, AXPAdvancedGridWidget, AXPAdvancedGridWidgetDesignerComponent, AXPAdvancedGridWidgetViewComponent, AXPAvatarWidget, AXPAvatarWidgetColumnComponent, AXPAvatarWidgetDesignerComponent, AXPAvatarWidgetEditComponent, AXPAvatarWidgetPrintComponent, AXPAvatarWidgetViewComponent, AXPBetweenExpressionValidationWidget, AXPBetweenValidationWidgetEditComponent, AXPBlockWidget, AXPBlockWidgetDesignerComponent, AXPBlockWidgetViewComponent, AXPBorderWidget, AXPBorderWidgetEditComponent, AXPButtonWidget, AXPButtonWidgetViewComponent, AXPCallbackValidationWidget, AXPCallbackValidationWidgetEditComponent, AXPCheckBoxWidget, AXPCheckBoxWidgetEditComponent, AXPContactWidget, AXPContactWidgetColumnComponent, AXPContactWidgetEditComponent, AXPContactWidgetPrintComponent, AXPContactWidgetViewComponent, AXPDateTimeBoxWidget, AXPDateTimeBoxWidgetColumnComponent, AXPDateTimeBoxWidgetEditComponent, AXPDateTimeBoxWidgetFilterComponent, AXPDateTimeBoxWidgetPrintComponent, AXPDateTimeBoxWidgetViewComponent, AXPDirectionWidget, AXPDirectionWidgetEditComponent, AXPEmailBoxWidget, AXPEmailBoxWidgetColumnComponent, AXPEmailBoxWidgetEditComponent, AXPEmailBoxWidgetFilterComponent, AXPEmailBoxWidgetPrintComponent, AXPEmailBoxWidgetViewComponent, AXPEqualValidationWidget, AXPEqualValidationWidgetEditComponent, AXPFileUploaderWidget, AXPFileUploaderWidgetColumnComponent, AXPFileUploaderWidgetEditComponent, AXPFileUploaderWidgetPrintComponent, AXPFileUploaderWidgetService, AXPFileUploaderWidgetViewComponent, AXPFlexOptionsWidget, AXPFlexOptionsWidgetEditComponent, AXPFlexWidget, AXPFlexWidgetDesignerComponent, AXPFlexWidgetViewComponent, AXPGalleryWidget, AXPGalleryWidgetEditComponent, AXPGalleryWidgetPrintComponent, AXPGalleryWidgetViewComponent, AXPGreaterThanExpressionValidationWidget, AXPGreaterThanValidationWidgetEditComponent, AXPGridOptionsWidget, AXPGridOptionsWidgetEditComponent, AXPLargeTextWidget, AXPLargeTextWidgetColumnComponent, AXPLargeTextWidgetEditComponent, AXPLargeTextWidgetFilterComponent, AXPLargeTextWidgetPrintComponent, AXPLargeTextWidgetViewComponent, AXPLessThanExpressionValidationWidget, AXPLessThanValidationWidgetEditComponent, AXPLinkWidget, AXPLinkWidgetColumnComponent, AXPLinkWidgetEditComponent, AXPLinkWidgetFilterComponent, AXPLinkWidgetPrintComponent, AXPLinkWidgetViewComponent, AXPMapBoxWidget, AXPMapBoxWidgetEditComponent, AXPMapBoxWidgetViewComponent, AXPMaxLengthExpressionValidationWidget, AXPMaxLengthValidationWidgetEditComponent, AXPMinLengthExpressionValidationWidget, AXPMinLengthValidationWidgetEditComponent, AXPNumberBoxWidget, AXPNumberBoxWidgetColumnComponent, AXPNumberBoxWidgetEditComponent, AXPNumberBoxWidgetFilterComponent, AXPNumberBoxWidgetPrintComponent, AXPNumberBoxWidgetViewComponent, AXPPageWidget, AXPPageWidgetViewComponent, AXPPasswordBoxWidget, AXPPasswordBoxWidgetColumnComponent, AXPPasswordBoxWidgetEditComponent, AXPPasswordBoxWidgetFilterComponent, AXPPasswordBoxWidgetPrintComponent, AXPPasswordBoxWidgetViewComponent, AXPPhoneBoxWidget, AXPPhoneBoxWidgetColumnComponent, AXPPhoneBoxWidgetEditComponent, AXPPhoneBoxWidgetFilterComponent, AXPPhoneBoxWidgetPrintComponent, AXPPhoneBoxWidgetViewComponent, AXPPropertyEditorHelper, AXPRegularExpressionValidationWidget, AXPRegularExpressionValidationWidgetEditComponent, AXPRepeaterWidget, AXPRepeaterWidgetDesignerComponent, AXPRepeaterWidgetEditComponent, AXPRepeaterWidgetPrintComponent, AXPRepeaterWidgetViewComponent, AXPRequiredValidationWidget, AXPRequiredValidationWidgetEditComponent, AXPRichTextWidget, AXPRichTextWidgetColumnComponent, AXPRichTextWidgetEditComponent, AXPRichTextWidgetFilterComponent, AXPRichTextWidgetPrintComponent, AXPRichTextWidgetViewComponent, AXPSelectBoxWidget, AXPSelectBoxWidgetColumnComponent, AXPSelectBoxWidgetEditComponent, AXPSelectBoxWidgetFilterComponent, AXPSelectBoxWidgetPrintComponent, AXPSelectBoxWidgetViewComponent, AXPSelectionListWidget, AXPSelectionListWidgetColumnComponent, AXPSelectionListWidgetDesignerComponent, AXPSelectionListWidgetEditComponent, AXPSelectionListWidgetFilterComponent, AXPSelectionListWidgetPrintComponent, AXPSelectionListWidgetViewComponent, AXPSignatureWidget, AXPSignatureWidgetColumnComponent, AXPSignatureWidgetEditComponent, AXPSignatureWidgetFilterComponent, AXPSignatureWidgetPrintComponent, AXPSignatureWidgetViewComponent, AXPSpacingWidget, AXPSpacingWidgetEditComponent, AXPTemplateBoxWidget, AXPTemplateBoxWidgetColumnComponent, AXPTemplateBoxWidgetEditComponent, AXPTemplateBoxWidgetFilterComponent, AXPTemplateBoxWidgetPrintComponent, AXPTemplateBoxWidgetViewComponent, AXPTextBoxWidget, AXPTextBoxWidgetColumnComponent, AXPTextBoxWidgetEditComponent, AXPTextBoxWidgetFilterComponent, AXPTextBoxWidgetPrintComponent$1 as AXPTextBoxWidgetPrintComponent, AXPTextBoxWidgetViewComponent, AXPToggleWidget, AXPToggleWidgetColumnComponent, AXPToggleWidgetEditComponent, AXPToggleWidgetFilterComponent, AXPToggleWidgetPrintComponent, AXPToggleWidgetViewComponent, AXPWidgetsModule, AXP_ALLOW_MULTIPLE_PROPERTY, AXP_ALLOW_SEARCH_PROPERTY, AXP_ANIMATION_PROPERTY_GROUP, AXP_APPEARANCE_PROPERTY_GROUP, AXP_BEHAVIOR_PROPERTY_GROUP, AXP_BETWEEN_VALIDATION_PROPERTY, AXP_BG_COLOR_PROPERTY, AXP_BOX_MODEL_PROPERTY_GROUP, AXP_CALLBACK_VALIDATION_PROPERTY, AXP_COLOR_PROPERTY, AXP_CONTENT_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DATA_PROPERTY_GROUP, AXP_DATA_SOURCE_PROPERTIES, AXP_DATA_SOURCE_PROPERTY, AXP_DATA_SOURCE_TEXT_FIELD, AXP_DATA_SOURCE_VALUE_FIELD, AXP_DATE_FORMAT_PROPERTY, AXP_DESCRIPTION_PROPERTY, AXP_DIRECTION_PROPERTY, AXP_DISABLED_PROPERTY, AXP_DOWNLOADABLE_PROPERTY, AXP_EQUAL_VALIDATION_PROPERTY, AXP_FALSY_TEXT_PROPERTY, AXP_FONT_SIZE_PROPERTY, AXP_Flex_Box_Align_Options, AXP_Flex_Box_Alignments, AXP_Flex_Box_Justify_Options, AXP_GREATER_THAN_VALIDATION_PROPERTY, AXP_Grid_Box_Align_Items_Options, AXP_Grid_Box_Alignments, AXP_Grid_Box_Justify_Items_Options, AXP_HAS_CLEAR_BUTTON_PROPERTY, AXP_HAS_COPY_ICON_PROPERTY, AXP_HAS_EYE_ICON_PROPERTY, AXP_HAS_ICON_PROPERTY, AXP_HAS_LABEL_PROPERTY, AXP_ICON_PROPERTY, AXP_IS_LOADING_PROPERTY, AXP_LABEL_PROPERTY, AXP_LAYOUT_ADVANCED_GRID_PROPERTY, AXP_LAYOUT_BORDER_PROPERTY, AXP_LAYOUT_COLUMNS_PROPERTY, AXP_LAYOUT_COL_END_PROPERTY, AXP_LAYOUT_COL_SPAN_PROPERTY, AXP_LAYOUT_COL_START_PROPERTY, AXP_LAYOUT_DIRECTION_PROPERTY, AXP_LAYOUT_FLEX_PROPERTY, AXP_LAYOUT_FLEX_PROPERTY_GROUP, AXP_LAYOUT_GAP_PROPERTY, AXP_LAYOUT_GRID_ITEM_PROPERTIES, AXP_LAYOUT_GRID_PROPERTIES, AXP_LAYOUT_GRID_PROPERTY, AXP_LAYOUT_GRID_PROPERTY_GROUP, AXP_LAYOUT_GRID_ROW_PROPERTIES, AXP_LAYOUT_ROWS_PROPERTY, AXP_LAYOUT_SHOW_HEADER_PROPERTY, AXP_LAYOUT_SPACING_PROPERTY, AXP_LESS_THAN_VALIDATION_PROPERTY, AXP_MAX_LENGTH_VALIDATION_PROPERTY, AXP_MIN_LENGTH_VALIDATION_PROPERTY, AXP_NAME_PROPERTY, AXP_PLACEHOLDER_PROPERTY, AXP_READONLY_PROPERTY, AXP_REGULAR_EXPRESSION_VALIDATION_PROPERTY, AXP_REQUIRED_VALIDATION_PROPERTY, AXP_STYLE_COLOR_PROPERTY, AXP_STYLE_LOOK_PROPERTY, AXP_STYLING_PROPERTY_GROUP, AXP_TABLE_COLUMN_HEIGHT_PROPERTY, AXP_TABLE_COLUMN_WIDTH_PROPERTY, AXP_TEXT_FIELD_PROPERTY, AXP_TEXT_PROPERTY, AXP_THEME_PROPERTY, AXP_TITLE_PROPERTY, AXP_TRULY_TEXT_PROPERTY, AXP_VALIDATION_PROPERTY_GROUP, AXP_VALUE_FIELD_PROPERTY, AXP_WIDGET_PROPERTY_GROUP, AXP_default_Border_Box_Units, AXP_default_Border_Box_Value, AXP_default_Spacing_Box_Units, AXP_default_Spacing_Box_Value, DEFAULT_STRATEGY_CONFIG, STRATEGY_CONFIG_TOKEN, booleanDefaultProperty, findNonEmptyBreakpoints, largeTextDefaultProperty, numberDefaultProperty, numberMaxValueProperty, numberMinValueProperty, plainTextDefaultProperty };
 //# sourceMappingURL=acorex-platform-widgets.mjs.map