@acorex/platform 20.6.0-next.13 → 20.6.0-next.14

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

@@ -5028,6 +5028,7 @@ class AXPImageEditorPopupComponent extends AXBasePageComponent {
         this.image = input.required(...(ngDevMode ? [{ debugName: "image" }] : []));
         this.showHistory = input(true, ...(ngDevMode ? [{ debugName: "showHistory" }] : []));
         this.look = input('blank', ...(ngDevMode ? [{ debugName: "look" }] : []));
+        this.aspectRatio = input(undefined, ...(ngDevMode ? [{ debugName: "aspectRatio" }] : []));
         this.container = viewChild(AXImageEditorContainerComponent, ...(ngDevMode ? [{ debugName: "container" }] : []));
         this.blobUrl = signal(null, ...(ngDevMode ? [{ debugName: "blobUrl" }] : []));
         this.url = signal(null, ...(ngDevMode ? [{ debugName: "url" }] : []));
@@ -5057,7 +5058,6 @@ class AXPImageEditorPopupComponent extends AXBasePageComponent {
         }
     }
     handleSave() {
-        this.container()?.save();
         this.close({ data: this.context() });
     }
     handleCancel() {
@@ -5070,10 +5070,15 @@ class AXPImageEditorPopupComponent extends AXBasePageComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPImageEditorPopupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPImageEditorPopupComponent, isStandalone: true, selector: "axp-image-editor-popup", inputs: { image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: true, transformFunction: null }, showHistory: { classPropertyName: "showHistory", publicName: "showHistory", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "container", first: true, predicate: AXImageEditorContainerComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPImageEditorPopupComponent, isStandalone: true, selector: "axp-image-editor-popup", inputs: { image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: true, transformFunction: null }, showHistory: { classPropertyName: "showHistory", publicName: "showHistory", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "container", first: true, predicate: AXImageEditorContainerComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
     <ax-form class="ax-flex ax-justify-center">
       <ax-form-field class="ax-p-2">
-        <ax-image-editor-container #container [look]="look()" (onValueChanged)="handleValueChanged($event)">
+        <ax-image-editor-container
+          [aspectRatio]="[aspectRatio() ?? '16/9']"
+          #container
+          [look]="look()"
+          (onValueChanged)="handleValueChanged($event)"
+        >
           <ax-header>
             <ax-toolbar>
               <ax-prefix>
@@ -5089,9 +5094,14 @@ class AXPImageEditorPopupComponent extends AXBasePageComponent {
     </ax-form>
     <ax-footer class="ax-flex ax-justify-end ax-gap-2">
       <ax-suffix>
-        <ax-button  look="solid" (onClick)="handleCancel()" [text]="'@general:actions.cancel.title' | translate | async">
+        <ax-button look="solid" (onClick)="handleCancel()" [text]="'@general:actions.cancel.title' | translate | async">
         </ax-button>
-        <ax-button color="primary" look="solid" (onClick)="handleSave()" [text]="'@general:actions.save.title' | translate | async">
+        <ax-button
+          color="primary"
+          look="solid"
+          (onClick)="handleSave()"
+          [text]="'@general:actions.save.title' | translate | async"
+        >
         </ax-button>
       </ax-suffix>
     </ax-footer>
@@ -5110,7 +5120,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
                     ], template: `
     <ax-form class="ax-flex ax-justify-center">
       <ax-form-field class="ax-p-2">
-        <ax-image-editor-container #container [look]="look()" (onValueChanged)="handleValueChanged($event)">
+        <ax-image-editor-container
+          [aspectRatio]="[aspectRatio() ?? '16/9']"
+          #container
+          [look]="look()"
+          (onValueChanged)="handleValueChanged($event)"
+        >
           <ax-header>
             <ax-toolbar>
               <ax-prefix>
@@ -5126,14 +5141,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
     </ax-form>
     <ax-footer class="ax-flex ax-justify-end ax-gap-2">
       <ax-suffix>
-        <ax-button  look="solid" (onClick)="handleCancel()" [text]="'@general:actions.cancel.title' | translate | async">
+        <ax-button look="solid" (onClick)="handleCancel()" [text]="'@general:actions.cancel.title' | translate | async">
         </ax-button>
-        <ax-button color="primary" look="solid" (onClick)="handleSave()" [text]="'@general:actions.save.title' | translate | async">
+        <ax-button
+          color="primary"
+          look="solid"
+          (onClick)="handleSave()"
+          [text]="'@general:actions.save.title' | translate | async"
+        >
         </ax-button>
       </ax-suffix>
     </ax-footer>
   `, styles: ["::ng-deep ax-image-editor-view>canvas{height:65vh}\n"] }]
-        }], propDecorators: { image: [{ type: i0.Input, args: [{ isSignal: true, alias: "image", required: true }] }], showHistory: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHistory", required: false }] }], look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }], container: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXImageEditorContainerComponent), { isSignal: true }] }] } });
+        }], propDecorators: { image: [{ type: i0.Input, args: [{ isSignal: true, alias: "image", required: true }] }], showHistory: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHistory", required: false }] }], look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }], aspectRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "aspectRatio", required: false }] }], container: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXImageEditorContainerComponent), { isSignal: true }] }] } });
 
 var imageEditorPopup_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -5153,6 +5173,7 @@ class AXPImageEditorService {
                 image: signal(options?.image),
                 showHistory: signal(options?.showHistory ?? true),
                 look: signal(options?.look ?? 'solid'),
+                aspectRatio: signal(options?.aspectRatio),
             },
         });
         return result?.data?.data?.image ?? null;
@@ -5165,97 +5186,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
             args: [{ providedIn: 'root' }]
         }] });
 
-class AXPWidgetPropertyViewerPopupComponent extends AXBasePageComponent {
-    constructor() {
-        super(...arguments);
-        //#region ----   Inputs   ----
-        this.widget = input.required(...(ngDevMode ? [{ debugName: "widget" }] : []));
-        this.mode = input('simple', ...(ngDevMode ? [{ debugName: "mode" }] : []));
-        //#endregion
-        //#region ----   Properties   ----
-        this.currentValues = signal({}, ...(ngDevMode ? [{ debugName: "currentValues" }] : []));
-    }
-    //#endregion
-    //#region ----   Event Handlers   ----
-    handlePropertyChanged(event) {
-        this.currentValues.set(event.values);
-    }
-    handleCloseClick() {
-        this.close();
-    }
-    handleApplyClick() {
-        this.close({
-            values: this.currentValues(),
-            mode: 'update'
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPWidgetPropertyViewerPopupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.12", type: AXPWidgetPropertyViewerPopupComponent, isStandalone: true, selector: "axp-widget-property-viewer-popup", inputs: { widget: { classPropertyName: "widget", publicName: "widget", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
-    <div class="ax-flex ax-flex-col ax-h-full ax-overflow-hidden">
-      <axp-widget-property-viewer 
-        [widget]="widget()" 
-        [mode]="mode()"
-        (onChanged)="handlePropertyChanged($event)">
-      </axp-widget-property-viewer>
-    </div>
-
-    <ax-footer>
-      <ax-suffix>
-        <ax-button 
-          look="solid" 
-          [text]="'@general:actions.close.title' | translate | async"
-          (onClick)="handleCloseClick()">
-        </ax-button>
-        <ax-button 
-          look="solid" 
-          color="primary" 
-          [text]="'@general:actions.apply.title' | translate | async"
-          (onClick)="handleApplyClick()">
-        </ax-button>
-      </ax-suffix>
-    </ax-footer>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPWidgetPropertyViewerComponent, selector: "axp-widget-property-viewer", inputs: ["widget", "mode"], outputs: ["onChanged"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPWidgetPropertyViewerPopupComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'axp-widget-property-viewer-popup',
-                    template: `
-    <div class="ax-flex ax-flex-col ax-h-full ax-overflow-hidden">
-      <axp-widget-property-viewer 
-        [widget]="widget()" 
-        [mode]="mode()"
-        (onChanged)="handlePropertyChanged($event)">
-      </axp-widget-property-viewer>
-    </div>
-
-    <ax-footer>
-      <ax-suffix>
-        <ax-button 
-          look="solid" 
-          [text]="'@general:actions.close.title' | translate | async"
-          (onClick)="handleCloseClick()">
-        </ax-button>
-        <ax-button 
-          look="solid" 
-          color="primary" 
-          [text]="'@general:actions.apply.title' | translate | async"
-          (onClick)="handleApplyClick()">
-        </ax-button>
-      </ax-suffix>
-    </ax-footer>
-  `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [
-                        CommonModule,
-                        AXButtonModule,
-                        AXDecoratorModule,
-                        AXTranslationModule,
-                        AXPWidgetPropertyViewerComponent
-                    ],
-                }]
-        }], propDecorators: { widget: [{ type: i0.Input, args: [{ isSignal: true, alias: "widget", required: true }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }] } });
-
 class AXPQuerySortsComponent {
     constructor() {
         this.sortDefinitions = model([], ...(ngDevMode ? [{ debugName: "sortDefinitions" }] : []));
@@ -5746,60 +5676,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
             args: [{ selector: 'axp-query-views', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXTabsModule, AXTranslationModule, CommonModule], template: "<ax-tabs #tabs [look]=\"'with-line'\" class=\"ax-font-semibold\">\n  @for (item of views(); track item.name) {\n    <ax-tab-item (onClick)=\"setView(item)\" [key]=\"item.name\" [text]=\"(item.title | translate | async) || 'item.title'\">\n    </ax-tab-item>\n  }\n  <!-- <ax-tab-item\n      (onClick)=\"createNew()\"\n      [key]=\"'create-new'\"\n      [text]=\"('@general:actions.create.title' | translate | async) || 'Create New'\"\n    >\n    </ax-tab-item> -->\n</ax-tabs>\n" }]
         }], propDecorators: { tabs: [{ type: i0.ViewChild, args: ['tabs', { isSignal: true }] }], views: [{ type: i0.Input, args: [{ isSignal: true, alias: "views", required: false }] }, { type: i0.Output, args: ["viewsChange"] }], selectedView: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedView", required: true }] }, { type: i0.Output, args: ["selectedViewChange"] }] } });
 
-/**
- * Generic widget item component for displaying selectable widgets with icons, titles, and descriptions.
- * Can be used across different modules for consistent widget display and interaction.
- */
-class AXPWidgetItemComponent {
-    constructor() {
-        // Inputs
-        /** The widget data to display */
-        this.widget = input.required(...(ngDevMode ? [{ debugName: "widget" }] : []));
-        /** Whether this widget is currently selected */
-        this.isSelected = input(false, ...(ngDevMode ? [{ debugName: "isSelected" }] : []));
-        /** Whether to show the pin button */
-        this.showPinButton = input(true, ...(ngDevMode ? [{ debugName: "showPinButton" }] : []));
-        /** Custom CSS classes to apply to the widget item */
-        this.customClasses = input('', ...(ngDevMode ? [{ debugName: "customClasses" }] : []));
-        // Outputs
-        /** Emitted when the widget item is clicked */
-        this.onWidgetClick = output();
-        /** Emitted when the pin button is clicked */
-        this.onPinClick = output();
-    }
-    /**
-     * Handle widget item click event
-     */
-    handleClick(event) {
-        this.onWidgetClick.emit({
-            event,
-            widget: this.widget()
-        });
-    }
-    /**
-     * Handle pin button click event
-     */
-    handlePinClick(event) {
-        event.stopPropagation(); // Prevent widget click event
-        this.onPinClick.emit({
-            event,
-            widget: this.widget()
-        });
-    }
-    /**
-     * Get the effective icon to display
-     */
-    getIconClass() {
-        return this.widget().icon || 'fa-light fa-document';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPWidgetItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPWidgetItemComponent, isStandalone: true, selector: "axp-widget-item", inputs: { widget: { classPropertyName: "widget", publicName: "widget", isSignal: true, isRequired: true, transformFunction: null }, isSelected: { classPropertyName: "isSelected", publicName: "isSelected", isSignal: true, isRequired: false, transformFunction: null }, showPinButton: { classPropertyName: "showPinButton", publicName: "showPinButton", isSignal: true, isRequired: false, transformFunction: null }, customClasses: { classPropertyName: "customClasses", publicName: "customClasses", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onWidgetClick: "onWidgetClick", onPinClick: "onPinClick" }, ngImport: i0, template: "<div (click)=\"handleClick($event)\"\n    class=\"ax-py-2 ax-px-3 ax-rounded-md ax-flex ax-gap-3 ax-items-center ax-group hover:ax-bg-primary-lightest/65 hover:ax-text-primary-on-lightest ax-cursor-pointer ax-w-full\"\n    [class.ax-bg-primary-lightest]=\"isSelected()\" [class.ax-text-primary-on-lightest]=\"isSelected()\"\n    [class.ax-border-primary-lightest]=\"isSelected()\" [class]=\"customClasses()\">\n\n    <!-- Widget Icon -->\n    <div class=\"ax-min-w-10 ax-h-10 ax-flex ax-items-center ax-justify-center ax-rounded-md ax-border group-hover:ax-bg-primary-lighter group-hover:ax-text-primary-on-lighter group-hover:ax-border-primary-lighter\"\n        [class.ax-bg-primary-light]=\"isSelected()\" [class.ax-text-primary-on-light]=\"isSelected()\"\n        [class.ax-border-primary-light]=\"isSelected()\" [class.ax-surface]=\"!isSelected()\">\n        <i [ngClass]=\"getIconClass()\" class=\"ax-text-lg\"></i>\n    </div>\n\n    <!-- Widget Content -->\n    <div class=\"ax-flex ax-flex-col ax-gap-1 ax-flex-1 ax-w-[70%]\">\n        <div class=\"ax-flex ax-items-center ax-justify-between ax-gap-2\">\n            <!-- Widget Title -->\n            <div class=\"ax-font-semibold ax-text-sm ax-truncate\" [title]=\"widget().title\">\n                {{ widget().title }}\n            </div>\n\n            <!-- Pin Button -->\n            @if (showPinButton()) {\n            <div (click)=\"handlePinClick($event)\" class=\"ax-cursor-pointer\">\n                @if (widget().isPinned) {\n                <i class=\"fa-solid fa-thumbtack ax-text-sm ax-rotate-45\" title=\"Unpin\"></i>\n                } @else {\n                <i class=\"fa-light fa-thumbtack ax-text-sm ax-rotate-45 ax-invisible group-hover:ax-visible\"\n                    title=\"Pin\"></i>\n                }\n            </div>\n            }\n        </div>\n\n        <!-- Widget Description -->\n        @if (widget().description) {\n        <span class=\"ax-text-xs ax-truncate\" [title]=\"widget().description\">\n            {{ widget().description }}\n        </span>\n        }\n    </div>\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPWidgetItemComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'axp-widget-item', imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<div (click)=\"handleClick($event)\"\n    class=\"ax-py-2 ax-px-3 ax-rounded-md ax-flex ax-gap-3 ax-items-center ax-group hover:ax-bg-primary-lightest/65 hover:ax-text-primary-on-lightest ax-cursor-pointer ax-w-full\"\n    [class.ax-bg-primary-lightest]=\"isSelected()\" [class.ax-text-primary-on-lightest]=\"isSelected()\"\n    [class.ax-border-primary-lightest]=\"isSelected()\" [class]=\"customClasses()\">\n\n    <!-- Widget Icon -->\n    <div class=\"ax-min-w-10 ax-h-10 ax-flex ax-items-center ax-justify-center ax-rounded-md ax-border group-hover:ax-bg-primary-lighter group-hover:ax-text-primary-on-lighter group-hover:ax-border-primary-lighter\"\n        [class.ax-bg-primary-light]=\"isSelected()\" [class.ax-text-primary-on-light]=\"isSelected()\"\n        [class.ax-border-primary-light]=\"isSelected()\" [class.ax-surface]=\"!isSelected()\">\n        <i [ngClass]=\"getIconClass()\" class=\"ax-text-lg\"></i>\n    </div>\n\n    <!-- Widget Content -->\n    <div class=\"ax-flex ax-flex-col ax-gap-1 ax-flex-1 ax-w-[70%]\">\n        <div class=\"ax-flex ax-items-center ax-justify-between ax-gap-2\">\n            <!-- Widget Title -->\n            <div class=\"ax-font-semibold ax-text-sm ax-truncate\" [title]=\"widget().title\">\n                {{ widget().title }}\n            </div>\n\n            <!-- Pin Button -->\n            @if (showPinButton()) {\n            <div (click)=\"handlePinClick($event)\" class=\"ax-cursor-pointer\">\n                @if (widget().isPinned) {\n                <i class=\"fa-solid fa-thumbtack ax-text-sm ax-rotate-45\" title=\"Unpin\"></i>\n                } @else {\n                <i class=\"fa-light fa-thumbtack ax-text-sm ax-rotate-45 ax-invisible group-hover:ax-visible\"\n                    title=\"Pin\"></i>\n                }\n            </div>\n            }\n        </div>\n\n        <!-- Widget Description -->\n        @if (widget().description) {\n        <span class=\"ax-text-xs ax-truncate\" [title]=\"widget().description\">\n            {{ widget().description }}\n        </span>\n        }\n    </div>\n</div>" }]
-        }], propDecorators: { widget: [{ type: i0.Input, args: [{ isSignal: true, alias: "widget", required: true }] }], isSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSelected", required: false }] }], showPinButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPinButton", required: false }] }], customClasses: [{ type: i0.Input, args: [{ isSignal: true, alias: "customClasses", required: false }] }], onWidgetClick: [{ type: i0.Output, args: ["onWidgetClick"] }], onPinClick: [{ type: i0.Output, args: ["onPinClick"] }] } });
-
 //#region ----   Component   ----
 /**
  * Compact widget field configurator component
@@ -6026,6 +5902,151 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
                     ], template: "<!-- Widget Selector & Info Container -->\n<div class=\"__widget-container\">\n  <!-- Edit Mode: Show Select Box -->\n  @if (isEditMode()) {\n  <div class=\"__widget-selector\">\n    <ax-select-box [(ngModel)]=\"selectedWidgetType\" [dataSource]=\"availableWidgets()\"\n      [placeholder]=\"('@general:actions.select.title' | translate | async) ?? ''\" [readonly]=\"readonly()\"\n      (onValueChanged)=\"onWidgetTypeChange($event)\" valueField=\"value\" textField=\"text\" [itemTemplate]=\"itemTemplate\"\n      [selectedTemplate]=\"selectedTemplate\">\n      <ax-search-box></ax-search-box>\n      <ax-clear-button></ax-clear-button>\n    </ax-select-box>\n  </div>\n  }\n\n  <!-- View Mode: Show Widget Info -->\n  @if (!isEditMode()) {\n  @if (selectedWidgetType() && currentWidgetConfig(); as config) {\n  <div class=\"__widget-info\">\n    <!-- Widget Header (Clickable to Edit) -->\n    <div class=\"__widget-header\" [class.__editable]=\"!readonly()\" (click)=\"enterEditMode()\">\n      <div>\n        @if (config.icon) {\n        <i [class]=\"config.icon\"></i>\n        }\n        <div>\n          <span>\n            {{ config.title }}\n          </span>\n          @if (config.description) {\n          <p>\n            {{ config.description }}\n          </p>\n          }\n        </div>\n      </div>\n\n      <!-- Action Buttons -->\n      <div class=\"__action-buttons\" (click)=\"$event.stopPropagation()\">\n        <!-- Configure Button -->\n        @if (config.hasProperties) {\n        <ax-button [disabled]=\"!canConfigure() || readonly()\"\n          [title]=\"('@general:actions.configure.title' | translate | async) ?? ''\" look=\"blank\"\n          [color]=\"isConfigured() ? 'primary' : 'default'\" size=\"sm\" (onClick)=\"openPropertyViewer()\">\n          <ax-icon icon=\"fa-solid fa-cog\"></ax-icon>\n        </ax-button>\n        }\n        <!-- Preview Button -->\n        <ax-button [disabled]=\"!canPreview()\" [title]=\"('@general:actions.preview.title' | translate | async) ?? ''\"\n          look=\"blank\" size=\"sm\" (onClick)=\"openPreview()\">\n          <ax-icon icon=\"fa-solid fa-eye\"></ax-icon>\n        </ax-button>\n      </div>\n    </div>\n\n    <!-- No Configuration Needed State -->\n    @if (!config.hasProperties) {\n    <axp-state-message mode=\"info\" icon=\"fa-solid fa-info-circle\"\n      [description]=\"'@general:widgets.widget-configurator.no-configuration-needed'\" variant=\"compact\">\n    </axp-state-message>\n    }\n  </div>\n  } @else {\n  <!-- Empty State (Clickable to Edit) -->\n  <div class=\"__widget-empty\" [class.__editable]=\"!readonly()\" (click)=\"enterEditMode()\">\n    <i class=\"fa-solid fa-puzzle-piece\"></i>\n    <span>\n      {{ ('@general:widgets.widget-configurator.select-widget-type' | translate | async) ?? 'Select a widget type' }}\n    </span>\n  </div>\n  }\n  }\n\n  <!-- Widget Item Template (Dropdown Items) -->\n  <ng-template #itemTemplate let-context>\n    @let item = context.data;\n    <div class=\"__item-template ax-flex ax-w-full ax-items-center ax-gap-3 ax-p-2\">\n      @if (item.icon) {\n      <i [class]=\"item.icon + ' ax-text-base ax-w-5 ax-text-center'\"></i>\n      }\n      <div class=\"ax-flex ax-items-center ax-gap-2 ax-flex-1 ax-min-w-0\">\n        <div class=\"ax-text-sm ax-font-medium\">\n          {{ item.text }}\n        </div>\n        @if (item.description) {\n        <div class=\"ax-text-xs ax-text-neutral-600\">\n          {{ item.description }}\n        </div>\n        }\n      </div>\n    </div>\n  </ng-template>\n\n  <!-- Widget Selected Template (Selected Value Display) -->\n  <ng-template #selectedTemplate let-item>\n    <div class=\"__selected-template\">\n      @if (item?.data?.icon) {\n      <i [class]=\"item.data.icon\"></i>\n      }\n      <span>\n        {{ item?.data?.text }}\n      </span>\n    </div>\n  </ng-template>\n</div>", styles: ["axp-widget-field-configurator{display:flex;flex-direction:column}axp-widget-field-configurator .__widget-container{border-radius:.375rem;border-width:1px;padding:1rem;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));transition:all .2s ease}axp-widget-field-configurator .__widget-selector{display:flex;flex-direction:column}axp-widget-field-configurator .__widget-selector ax-select-box{width:100%}axp-widget-field-configurator .__widget-info{display:flex;flex-direction:column;gap:.75rem}axp-widget-field-configurator .__widget-info .__widget-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.375rem .5rem}axp-widget-field-configurator .__widget-info .__widget-header.__editable{cursor:pointer}axp-widget-field-configurator .__widget-info .__widget-header.__editable:hover{border-radius:.375rem;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lighter-surface),var(--tw-bg-opacity, 1))}axp-widget-field-configurator .__widget-info .__widget-header:not(.__editable){cursor:not-allowed}axp-widget-field-configurator .__widget-info .__widget-header>div:first-child{display:flex;flex:1 1 0%;align-items:center;gap:.5rem}axp-widget-field-configurator .__widget-info .__widget-header>div:first-child i{font-size:1rem;line-height:1.5rem;flex-shrink:0}axp-widget-field-configurator .__widget-info .__widget-header>div:first-child>div{display:flex;flex:1 1 0%;flex-direction:column;gap:.125rem}axp-widget-field-configurator .__widget-info .__widget-header>div:first-child>div>span{font-size:.875rem;line-height:1.25rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}axp-widget-field-configurator .__widget-info .__widget-header>div:first-child>div>p{margin:0;font-size:.75rem;line-height:1rem;line-height:1.625;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}axp-widget-field-configurator .__widget-info .__description{line-height:1.5}axp-widget-field-configurator .__widget-info .__action-buttons{display:flex;align-items:center;gap:.25rem;flex-shrink:0}axp-widget-field-configurator .__widget-empty{display:flex;align-items:center;gap:.5rem;padding:.5rem}axp-widget-field-configurator .__widget-empty.__editable{cursor:pointer}axp-widget-field-configurator .__widget-empty.__editable:hover{border-radius:.375rem;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lighter-surface),var(--tw-bg-opacity, 1))}axp-widget-field-configurator .__widget-empty:not(.__editable){cursor:not-allowed}axp-widget-field-configurator .__widget-empty>i{font-size:1rem;line-height:1.5rem;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}axp-widget-field-configurator .__widget-empty>span{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}axp-widget-field-configurator .__item-template>i{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}axp-widget-field-configurator .__item-template>div>div:first-child{flex-shrink:0}axp-widget-field-configurator .__item-template>div>div:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}axp-widget-field-configurator .__selected-template{display:flex;align-items:center;gap:.5rem}axp-widget-field-configurator .__selected-template>i{font-size:.875rem;line-height:1.25rem}axp-widget-field-configurator .__selected-template>span{font-size:.875rem;line-height:1.25rem;font-weight:500}axp-widget-field-configurator :host([readonly]){pointer-events:none;opacity:.7}\n"] }]
         }], ctorParameters: () => [], propDecorators: { widget: [{ type: i0.Input, args: [{ isSignal: true, alias: "widget", required: false }] }, { type: i0.Output, args: ["widgetChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], fieldName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldName", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }] } });
 
+/**
+ * Generic widget item component for displaying selectable widgets with icons, titles, and descriptions.
+ * Can be used across different modules for consistent widget display and interaction.
+ */
+class AXPWidgetItemComponent {
+    constructor() {
+        // Inputs
+        /** The widget data to display */
+        this.widget = input.required(...(ngDevMode ? [{ debugName: "widget" }] : []));
+        /** Whether this widget is currently selected */
+        this.isSelected = input(false, ...(ngDevMode ? [{ debugName: "isSelected" }] : []));
+        /** Whether to show the pin button */
+        this.showPinButton = input(true, ...(ngDevMode ? [{ debugName: "showPinButton" }] : []));
+        /** Custom CSS classes to apply to the widget item */
+        this.customClasses = input('', ...(ngDevMode ? [{ debugName: "customClasses" }] : []));
+        // Outputs
+        /** Emitted when the widget item is clicked */
+        this.onWidgetClick = output();
+        /** Emitted when the pin button is clicked */
+        this.onPinClick = output();
+    }
+    /**
+     * Handle widget item click event
+     */
+    handleClick(event) {
+        this.onWidgetClick.emit({
+            event,
+            widget: this.widget()
+        });
+    }
+    /**
+     * Handle pin button click event
+     */
+    handlePinClick(event) {
+        event.stopPropagation(); // Prevent widget click event
+        this.onPinClick.emit({
+            event,
+            widget: this.widget()
+        });
+    }
+    /**
+     * Get the effective icon to display
+     */
+    getIconClass() {
+        return this.widget().icon || 'fa-light fa-document';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPWidgetItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPWidgetItemComponent, isStandalone: true, selector: "axp-widget-item", inputs: { widget: { classPropertyName: "widget", publicName: "widget", isSignal: true, isRequired: true, transformFunction: null }, isSelected: { classPropertyName: "isSelected", publicName: "isSelected", isSignal: true, isRequired: false, transformFunction: null }, showPinButton: { classPropertyName: "showPinButton", publicName: "showPinButton", isSignal: true, isRequired: false, transformFunction: null }, customClasses: { classPropertyName: "customClasses", publicName: "customClasses", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onWidgetClick: "onWidgetClick", onPinClick: "onPinClick" }, ngImport: i0, template: "<div (click)=\"handleClick($event)\"\n    class=\"ax-py-2 ax-px-3 ax-rounded-md ax-flex ax-gap-3 ax-items-center ax-group hover:ax-bg-primary-lightest/65 hover:ax-text-primary-on-lightest ax-cursor-pointer ax-w-full\"\n    [class.ax-bg-primary-lightest]=\"isSelected()\" [class.ax-text-primary-on-lightest]=\"isSelected()\"\n    [class.ax-border-primary-lightest]=\"isSelected()\" [class]=\"customClasses()\">\n\n    <!-- Widget Icon -->\n    <div class=\"ax-min-w-10 ax-h-10 ax-flex ax-items-center ax-justify-center ax-rounded-md ax-border group-hover:ax-bg-primary-lighter group-hover:ax-text-primary-on-lighter group-hover:ax-border-primary-lighter\"\n        [class.ax-bg-primary-light]=\"isSelected()\" [class.ax-text-primary-on-light]=\"isSelected()\"\n        [class.ax-border-primary-light]=\"isSelected()\" [class.ax-surface]=\"!isSelected()\">\n        <i [ngClass]=\"getIconClass()\" class=\"ax-text-lg\"></i>\n    </div>\n\n    <!-- Widget Content -->\n    <div class=\"ax-flex ax-flex-col ax-gap-1 ax-flex-1 ax-w-[70%]\">\n        <div class=\"ax-flex ax-items-center ax-justify-between ax-gap-2\">\n            <!-- Widget Title -->\n            <div class=\"ax-font-semibold ax-text-sm ax-truncate\" [title]=\"widget().title\">\n                {{ widget().title }}\n            </div>\n\n            <!-- Pin Button -->\n            @if (showPinButton()) {\n            <div (click)=\"handlePinClick($event)\" class=\"ax-cursor-pointer\">\n                @if (widget().isPinned) {\n                <i class=\"fa-solid fa-thumbtack ax-text-sm ax-rotate-45\" title=\"Unpin\"></i>\n                } @else {\n                <i class=\"fa-light fa-thumbtack ax-text-sm ax-rotate-45 ax-invisible group-hover:ax-visible\"\n                    title=\"Pin\"></i>\n                }\n            </div>\n            }\n        </div>\n\n        <!-- Widget Description -->\n        @if (widget().description) {\n        <span class=\"ax-text-xs ax-truncate\" [title]=\"widget().description\">\n            {{ widget().description }}\n        </span>\n        }\n    </div>\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPWidgetItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-widget-item', imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<div (click)=\"handleClick($event)\"\n    class=\"ax-py-2 ax-px-3 ax-rounded-md ax-flex ax-gap-3 ax-items-center ax-group hover:ax-bg-primary-lightest/65 hover:ax-text-primary-on-lightest ax-cursor-pointer ax-w-full\"\n    [class.ax-bg-primary-lightest]=\"isSelected()\" [class.ax-text-primary-on-lightest]=\"isSelected()\"\n    [class.ax-border-primary-lightest]=\"isSelected()\" [class]=\"customClasses()\">\n\n    <!-- Widget Icon -->\n    <div class=\"ax-min-w-10 ax-h-10 ax-flex ax-items-center ax-justify-center ax-rounded-md ax-border group-hover:ax-bg-primary-lighter group-hover:ax-text-primary-on-lighter group-hover:ax-border-primary-lighter\"\n        [class.ax-bg-primary-light]=\"isSelected()\" [class.ax-text-primary-on-light]=\"isSelected()\"\n        [class.ax-border-primary-light]=\"isSelected()\" [class.ax-surface]=\"!isSelected()\">\n        <i [ngClass]=\"getIconClass()\" class=\"ax-text-lg\"></i>\n    </div>\n\n    <!-- Widget Content -->\n    <div class=\"ax-flex ax-flex-col ax-gap-1 ax-flex-1 ax-w-[70%]\">\n        <div class=\"ax-flex ax-items-center ax-justify-between ax-gap-2\">\n            <!-- Widget Title -->\n            <div class=\"ax-font-semibold ax-text-sm ax-truncate\" [title]=\"widget().title\">\n                {{ widget().title }}\n            </div>\n\n            <!-- Pin Button -->\n            @if (showPinButton()) {\n            <div (click)=\"handlePinClick($event)\" class=\"ax-cursor-pointer\">\n                @if (widget().isPinned) {\n                <i class=\"fa-solid fa-thumbtack ax-text-sm ax-rotate-45\" title=\"Unpin\"></i>\n                } @else {\n                <i class=\"fa-light fa-thumbtack ax-text-sm ax-rotate-45 ax-invisible group-hover:ax-visible\"\n                    title=\"Pin\"></i>\n                }\n            </div>\n            }\n        </div>\n\n        <!-- Widget Description -->\n        @if (widget().description) {\n        <span class=\"ax-text-xs ax-truncate\" [title]=\"widget().description\">\n            {{ widget().description }}\n        </span>\n        }\n    </div>\n</div>" }]
+        }], propDecorators: { widget: [{ type: i0.Input, args: [{ isSignal: true, alias: "widget", required: true }] }], isSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSelected", required: false }] }], showPinButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPinButton", required: false }] }], customClasses: [{ type: i0.Input, args: [{ isSignal: true, alias: "customClasses", required: false }] }], onWidgetClick: [{ type: i0.Output, args: ["onWidgetClick"] }], onPinClick: [{ type: i0.Output, args: ["onPinClick"] }] } });
+
+class AXPWidgetPropertyViewerPopupComponent extends AXBasePageComponent {
+    constructor() {
+        super(...arguments);
+        //#region ----   Inputs   ----
+        this.widget = input.required(...(ngDevMode ? [{ debugName: "widget" }] : []));
+        this.mode = input('simple', ...(ngDevMode ? [{ debugName: "mode" }] : []));
+        //#endregion
+        //#region ----   Properties   ----
+        this.currentValues = signal({}, ...(ngDevMode ? [{ debugName: "currentValues" }] : []));
+    }
+    //#endregion
+    //#region ----   Event Handlers   ----
+    handlePropertyChanged(event) {
+        this.currentValues.set(event.values);
+    }
+    handleCloseClick() {
+        this.close();
+    }
+    handleApplyClick() {
+        this.close({
+            values: this.currentValues(),
+            mode: 'update'
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPWidgetPropertyViewerPopupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.12", type: AXPWidgetPropertyViewerPopupComponent, isStandalone: true, selector: "axp-widget-property-viewer-popup", inputs: { widget: { classPropertyName: "widget", publicName: "widget", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    <div class="ax-flex ax-flex-col ax-h-full ax-overflow-hidden">
+      <axp-widget-property-viewer 
+        [widget]="widget()" 
+        [mode]="mode()"
+        (onChanged)="handlePropertyChanged($event)">
+      </axp-widget-property-viewer>
+    </div>
+
+    <ax-footer>
+      <ax-suffix>
+        <ax-button 
+          look="solid" 
+          [text]="'@general:actions.close.title' | translate | async"
+          (onClick)="handleCloseClick()">
+        </ax-button>
+        <ax-button 
+          look="solid" 
+          color="primary" 
+          [text]="'@general:actions.apply.title' | translate | async"
+          (onClick)="handleApplyClick()">
+        </ax-button>
+      </ax-suffix>
+    </ax-footer>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPWidgetPropertyViewerComponent, selector: "axp-widget-property-viewer", inputs: ["widget", "mode"], outputs: ["onChanged"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPWidgetPropertyViewerPopupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'axp-widget-property-viewer-popup',
+                    template: `
+    <div class="ax-flex ax-flex-col ax-h-full ax-overflow-hidden">
+      <axp-widget-property-viewer 
+        [widget]="widget()" 
+        [mode]="mode()"
+        (onChanged)="handlePropertyChanged($event)">
+      </axp-widget-property-viewer>
+    </div>
+
+    <ax-footer>
+      <ax-suffix>
+        <ax-button 
+          look="solid" 
+          [text]="'@general:actions.close.title' | translate | async"
+          (onClick)="handleCloseClick()">
+        </ax-button>
+        <ax-button 
+          look="solid" 
+          color="primary" 
+          [text]="'@general:actions.apply.title' | translate | async"
+          (onClick)="handleApplyClick()">
+        </ax-button>
+      </ax-suffix>
+    </ax-footer>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [
+                        CommonModule,
+                        AXButtonModule,
+                        AXDecoratorModule,
+                        AXTranslationModule,
+                        AXPWidgetPropertyViewerComponent
+                    ],
+                }]
+        }], propDecorators: { widget: [{ type: i0.Input, args: [{ isSignal: true, alias: "widget", required: true }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }] } });
+
 /**
  * Generated bundle index. Do not edit.
  */