@acorex/platform 20.4.1 → 20.5.0-next.0

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

@@ -1012,6 +1012,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
 //#region ----   Tree Node Interface   ----
 //#endregion
 
+//#region ----   Component   ----
+/**
+ * Color Palette Picker Component
+ * Displays a grid of color swatches for selection
+ */
+class AXPColorPalettePickerComponent {
+    constructor() {
+        //#region ----   Inputs   ----
+        /**
+         * Array of color codes to display
+         */
+        this.colors = input([], ...(ngDevMode ? [{ debugName: "colors" }] : []));
+        /**
+         * Currently selected color
+         */
+        this.selectedColor = input(...(ngDevMode ? [undefined, { debugName: "selectedColor" }] : []));
+        /**
+         * Disable the entire palette
+         */
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+        /**
+         * Make the palette readonly
+         */
+        this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
+        //#endregion
+        //#region ----   Outputs   ----
+        /**
+         * Emits when a color is selected
+         */
+        this.colorSelected = output();
+    }
+    //#endregion
+    //#region ----   Event Handlers   ----
+    /**
+     * Handle color selection
+     */
+    handleColorSelect(color) {
+        if (this.disabled() || this.readonly()) {
+            return;
+        }
+        this.colorSelected.emit(color);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPColorPalettePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: AXPColorPalettePickerComponent, isStandalone: true, selector: "axp-color-palette-picker", inputs: { colors: { classPropertyName: "colors", publicName: "colors", isSignal: true, isRequired: false, transformFunction: null }, selectedColor: { classPropertyName: "selectedColor", publicName: "selectedColor", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { colorSelected: "colorSelected" }, ngImport: i0, template: "<div class=\"axp-color-palette-picker\">\n    <div class=\"__swatches\">\n        @for (color of colors(); track color) {\n        <button type=\"button\" class=\"__swatch\" [class.__selected]=\"selectedColor() === color\"\n            [class.__disabled]=\"disabled() || readonly()\" [style.background-color]=\"color\"\n            [disabled]=\"disabled() || readonly()\" (click)=\"handleColorSelect(color)\">\n            @if (selectedColor() === color) {\n            <svg class=\"__checkmark\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M5 13l4 4L19 7\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\" />\n            </svg>\n            }\n        </button>\n        }\n    </div>\n</div>", styles: [".axp-color-palette-picker{width:100%}.axp-color-palette-picker .__swatches{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:.5rem}.axp-color-palette-picker .__swatches .__swatch{height:1.5rem;width:1.5rem;border-radius:9999px;border-width:2px;border-color:transparent;cursor:pointer;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s;display:flex;align-items:center;justify-content:center;position:relative}.axp-color-palette-picker .__swatches .__swatch:hover:not(.__disabled){--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);box-shadow:0 0 0 4px var(--ax-color-hover)}.axp-color-palette-picker .__swatches .__swatch:focus-visible:not(.__disabled){outline:2px solid var(--ax-color-primary);outline-offset:2px;box-shadow:0 0 0 4px var(--ax-color-primary-alpha-20)}.axp-color-palette-picker .__swatches .__swatch.__selected{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);box-shadow:0 0 0 4px var(--ax-color-primary-alpha-20);outline:1px solid var(--ax-color-border);outline-offset:0}.axp-color-palette-picker .__swatches .__swatch.__disabled{cursor:not-allowed;opacity:.5}.axp-color-palette-picker .__swatches .__swatch .__checkmark{height:1.25rem;width:1.25rem;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6)) drop-shadow(0 0 1px rgba(255,255,255,.3))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPColorPalettePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-color-palette-picker', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule], template: "<div class=\"axp-color-palette-picker\">\n    <div class=\"__swatches\">\n        @for (color of colors(); track color) {\n        <button type=\"button\" class=\"__swatch\" [class.__selected]=\"selectedColor() === color\"\n            [class.__disabled]=\"disabled() || readonly()\" [style.background-color]=\"color\"\n            [disabled]=\"disabled() || readonly()\" (click)=\"handleColorSelect(color)\">\n            @if (selectedColor() === color) {\n            <svg class=\"__checkmark\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M5 13l4 4L19 7\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\" />\n            </svg>\n            }\n        </button>\n        }\n    </div>\n</div>", styles: [".axp-color-palette-picker{width:100%}.axp-color-palette-picker .__swatches{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:.5rem}.axp-color-palette-picker .__swatches .__swatch{height:1.5rem;width:1.5rem;border-radius:9999px;border-width:2px;border-color:transparent;cursor:pointer;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s;display:flex;align-items:center;justify-content:center;position:relative}.axp-color-palette-picker .__swatches .__swatch:hover:not(.__disabled){--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);box-shadow:0 0 0 4px var(--ax-color-hover)}.axp-color-palette-picker .__swatches .__swatch:focus-visible:not(.__disabled){outline:2px solid var(--ax-color-primary);outline-offset:2px;box-shadow:0 0 0 4px var(--ax-color-primary-alpha-20)}.axp-color-palette-picker .__swatches .__swatch.__selected{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);box-shadow:0 0 0 4px var(--ax-color-primary-alpha-20);outline:1px solid var(--ax-color-border);outline-offset:0}.axp-color-palette-picker .__swatches .__swatch.__disabled{cursor:not-allowed;opacity:.5}.axp-color-palette-picker .__swatches .__swatch .__checkmark{height:1.25rem;width:1.25rem;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6)) drop-shadow(0 0 1px rgba(255,255,255,.3))}\n"] }]
+        }] });
+
 class AXPQueryColumnsComponent {
     constructor() {
         this.columns = model([], ...(ngDevMode ? [{ debugName: "columns" }] : []));
@@ -3154,7 +3204,7 @@ class AXPExtraPropertiesComponent {
         </axp-widgets-container>
       </div>
      
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i2$4.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i3$1.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i4$4.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i5$2.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$1.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.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { 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: AXPWidgetCoreModule }, { kind: "component", type: i3$2.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$2.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i3$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3$3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i2$4.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i3$1.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i4$4.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i5$2.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$1.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.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { 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: AXPWidgetCoreModule }, { kind: "component", type: i3$2.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$2.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i3$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3$3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: AXTranslationModule }, { 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.4", ngImport: i0, type: AXPExtraPropertiesComponent, decorators: [{
             type: Component,
@@ -3503,7 +3553,7 @@ class AXPExtraPropertiesSchemaComponent {
         return `${k}${i}`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPExtraPropertiesSchemaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: AXPExtraPropertiesSchemaComponent, isStandalone: true, selector: "axp-extra-properties-schema", inputs: { schema: { classPropertyName: "schema", publicName: "schema", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { schemaChange: "schemaChange" }, host: { classAttribute: "ax-flex ax-flex-1 ax-h-full ax-gap-4 ax-p-4" }, ngImport: i0, template: "<!-- Left Panel: list/manage properties -->\n<div class=\"ax-flex ax-flex-col ax-gap-3 ax-min-h-0 ax-h-full ax-w-2/3\">\n    <div class=\"ax-overflow-y-auto ax-min-h-0 ax-h-full ax-pe-2 -ax-me-2\">\n        <div cdkDropList (cdkDropListDropped)=\"handleDrop($event)\" class=\"ax-flex ax-flex-col ax-gap-3\">\n            @for (item of schema(); track item.key) {\n            @if (mode() === 'edit') {\n            <div class=\"ax-grid ax-grid-cols-12 ax-gap-4 ax-items-center ax-rounded ax-border ax-p-3 ax-cursor-pointer ax-lightest-surface \"\n                [class.!ax-lighter-surface]=\"item.key === selectedKey()\" (click)=\"handleSelect(item.key)\" cdkDrag\n                [cdkDragDisabled]=\"false\">\n                <div class=\"ax-col-span-12 md:ax-col-span-4 ax-flex ax-items-center ax-gap-3\">\n                    <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move ax-text-neutral-500\"\n                        cdkDragHandle></ax-icon>\n                    <div>\n                        <div class=\"ax-font-semibold\">{{ item.title }}</div>\n                    </div>\n                </div>\n                <div class=\"ax-col-span-12 md:ax-col-span-7 ax-grid ax-grid-cols-12 ax-gap-4 ax-items-center\">\n                    <ax-form-field class=\"ax-col-span-12 md:ax-col-span-6\">\n                        <ax-select-box [value]=\"item.type\" [dataSource]=\"typeOptions()\" valueField=\"id\"\n                            textField=\"title\"\n                            (onValueChanged)=\"handleUpdateType(item.key, $event.value)\"></ax-select-box>\n                    </ax-form-field>\n                    <ax-form-field class=\"ax-col-span-12 md:ax-col-span-6\">\n                        <ax-text-box [ngModel]=\"item.title\"\n                            (onValueChanged)=\"handleUpdateTitle(item.key, $event.value)\"></ax-text-box>\n                    </ax-form-field>\n                </div>\n                <div class=\"ax-hidden md:ax-block md:ax-col-span-1 md:ax-justify-self-end\">\n                    <ax-button look=\"blank\" color=\"danger\" (onClick)=\"handleRemove(item.key)\">\n                        <ax-prefix><ax-icon class=\"fa-light fa-trash-can\"></ax-icon></ax-prefix>\n                    </ax-button>\n                </div>\n            </div>\n            } @else {\n            <div class=\"ax-grid ax-grid-cols-12 ax-gap-1 ax-rounded ax-border ax-p-3\">\n                <div class=\"ax-font-semibold\">{{ item.title }}</div>\n                <div class=\"ax-col-span-12 ax-text-xs ax-text-muted\">{{ item.key }}</div>\n            </div>\n            }\n            } @empty {\n            <div class=\"ax-text-sm ax-text-gray-400\">{{ '@extra-properties:messages.no-schema-fields' | translate |\n                async\n                }}</div>\n            }\n\n            @if (mode() === 'edit') {\n            <div class=\"ax-grid ax-grid-cols-12 ax-gap-4 ax-items-end ax-mt-4 ax-border-t ax-border-dashed ax-pt-4\">\n                <!-- Type -->\n                <ax-form-field class=\"ax-col-span-12 md:ax-col-span-6 lg:ax-col-span-6\">\n                    <ax-label>{{ '@extra-properties:labels.type' | translate | async }}</ax-label>\n                    <ax-select-box [ngModel]=\"newTypeId()\" [dataSource]=\"typeOptions()\" valueField=\"id\"\n                        textField=\"title\" (onValueChanged)=\"newTypeChanged($event.value)\"></ax-select-box>\n                </ax-form-field>\n                <!-- Title -->\n                <ax-form-field class=\"ax-col-span-12 md:ax-col-span-6 lg:ax-col-span-6\">\n                    <ax-label>{{ '@extra-properties:labels.title' | translate | async }}</ax-label>\n                    <ax-text-box [ngModel]=\"newTitle()\"\n                        (onValueChanged)=\"handleTitleChange($event.value)\"></ax-text-box>\n                </ax-form-field>\n                <!-- Add -->\n                <div class=\"ax-col-span-12 ax-flex ax-justify-end\">\n                    <ax-button look=\"solid\" (onClick)=\"handleAdd()\" [disabled]=\"!canAdd()\"\n                        text=\"{{ '@extra-properties:actions.add-field' | translate | async }}\">\n                        <ax-prefix><ax-icon class=\"fa-solid fa-add\"></ax-icon></ax-prefix>\n                    </ax-button>\n                </div>\n            </div>\n            }\n        </div>\n    </div>\n</div>\n\n<!-- Right Panel: widget property viewer for selected item -->\n<div class=\"ax-w-1/3 ax-border ax-rounded  ax-h-full ax-flex ax-flex-col ax-lightest-surface\">\n    @if (mode() === 'edit' && selectedItem()) {\n    <div class=\"ax-p-4 ax-font-semibold ax-border-b ax-lighter-surface\">\n        {{selectedItem()?.title}}\n    </div>\n    <div class=\"ax-overflow-y-auto  ax-flex-1\">\n        <axp-widget-property-viewer [widget]=\"{ type: selectedItem()!.type, options: selectedItem()!.options }\"\n            [mode]=\"'advanced'\" (onChanged)=\"handleViewerChanged($event)\" />\n    </div>\n    }\n    @else {\n    <div class=\"ax-text-sm ax-text-muted ax-p-4 ax-text-center\">{{ '@extra-properties:messages.select-field-to-edit' |\n        translate | async }}</div>\n    }\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i2$4.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i3$1.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i4$4.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i5$2.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$1.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.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { 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: DragDropModule }, { kind: "directive", type: i3$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3$3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: AXPExtraPropertiesSchemaComponent, isStandalone: true, selector: "axp-extra-properties-schema", inputs: { schema: { classPropertyName: "schema", publicName: "schema", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { schemaChange: "schemaChange" }, host: { classAttribute: "ax-flex ax-flex-1 ax-h-full ax-gap-4 ax-p-4" }, ngImport: i0, template: "<!-- Left Panel: list/manage properties -->\n<div class=\"ax-flex ax-flex-col ax-gap-3 ax-min-h-0 ax-h-full ax-w-2/3\">\n    <div class=\"ax-overflow-y-auto ax-min-h-0 ax-h-full ax-pe-2 -ax-me-2\">\n        <div cdkDropList (cdkDropListDropped)=\"handleDrop($event)\" class=\"ax-flex ax-flex-col ax-gap-3\">\n            @for (item of schema(); track item.key) {\n            @if (mode() === 'edit') {\n            <div class=\"ax-grid ax-grid-cols-12 ax-gap-4 ax-items-center ax-rounded ax-border ax-p-3 ax-cursor-pointer ax-lightest-surface \"\n                [class.!ax-lighter-surface]=\"item.key === selectedKey()\" (click)=\"handleSelect(item.key)\" cdkDrag\n                [cdkDragDisabled]=\"false\">\n                <div class=\"ax-col-span-12 md:ax-col-span-4 ax-flex ax-items-center ax-gap-3\">\n                    <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move ax-text-neutral-500\"\n                        cdkDragHandle></ax-icon>\n                    <div>\n                        <div class=\"ax-font-semibold\">{{ item.title }}</div>\n                    </div>\n                </div>\n                <div class=\"ax-col-span-12 md:ax-col-span-7 ax-grid ax-grid-cols-12 ax-gap-4 ax-items-center\">\n                    <ax-form-field class=\"ax-col-span-12 md:ax-col-span-6\">\n                        <ax-select-box [value]=\"item.type\" [dataSource]=\"typeOptions()\" valueField=\"id\"\n                            textField=\"title\"\n                            (onValueChanged)=\"handleUpdateType(item.key, $event.value)\"></ax-select-box>\n                    </ax-form-field>\n                    <ax-form-field class=\"ax-col-span-12 md:ax-col-span-6\">\n                        <ax-text-box [ngModel]=\"item.title\"\n                            (onValueChanged)=\"handleUpdateTitle(item.key, $event.value)\"></ax-text-box>\n                    </ax-form-field>\n                </div>\n                <div class=\"ax-hidden md:ax-block md:ax-col-span-1 md:ax-justify-self-end\">\n                    <ax-button look=\"blank\" color=\"danger\" (onClick)=\"handleRemove(item.key)\">\n                        <ax-prefix><ax-icon class=\"fa-light fa-trash-can\"></ax-icon></ax-prefix>\n                    </ax-button>\n                </div>\n            </div>\n            } @else {\n            <div class=\"ax-grid ax-grid-cols-12 ax-gap-1 ax-rounded ax-border ax-p-3\">\n                <div class=\"ax-font-semibold\">{{ item.title }}</div>\n                <div class=\"ax-col-span-12 ax-text-xs ax-text-muted\">{{ item.key }}</div>\n            </div>\n            }\n            } @empty {\n            <div class=\"ax-text-sm ax-text-gray-400\">{{ '@extra-properties:messages.no-schema-fields' | translate |\n                async\n                }}</div>\n            }\n\n            @if (mode() === 'edit') {\n            <div class=\"ax-grid ax-grid-cols-12 ax-gap-4 ax-items-end ax-mt-4 ax-border-t ax-border-dashed ax-pt-4\">\n                <!-- Type -->\n                <ax-form-field class=\"ax-col-span-12 md:ax-col-span-6 lg:ax-col-span-6\">\n                    <ax-label>{{ '@extra-properties:labels.type' | translate | async }}</ax-label>\n                    <ax-select-box [ngModel]=\"newTypeId()\" [dataSource]=\"typeOptions()\" valueField=\"id\"\n                        textField=\"title\" (onValueChanged)=\"newTypeChanged($event.value)\"></ax-select-box>\n                </ax-form-field>\n                <!-- Title -->\n                <ax-form-field class=\"ax-col-span-12 md:ax-col-span-6 lg:ax-col-span-6\">\n                    <ax-label>{{ '@extra-properties:labels.title' | translate | async }}</ax-label>\n                    <ax-text-box [ngModel]=\"newTitle()\"\n                        (onValueChanged)=\"handleTitleChange($event.value)\"></ax-text-box>\n                </ax-form-field>\n                <!-- Add -->\n                <div class=\"ax-col-span-12 ax-flex ax-justify-end\">\n                    <ax-button look=\"solid\" (onClick)=\"handleAdd()\" [disabled]=\"!canAdd()\"\n                        text=\"{{ '@extra-properties:actions.add-field' | translate | async }}\">\n                        <ax-prefix><ax-icon class=\"fa-solid fa-add\"></ax-icon></ax-prefix>\n                    </ax-button>\n                </div>\n            </div>\n            }\n        </div>\n    </div>\n</div>\n\n<!-- Right Panel: widget property viewer for selected item -->\n<div class=\"ax-w-1/3 ax-border ax-rounded  ax-h-full ax-flex ax-flex-col ax-lightest-surface\">\n    @if (mode() === 'edit' && selectedItem()) {\n    <div class=\"ax-p-4 ax-font-semibold ax-border-b ax-lighter-surface\">\n        {{selectedItem()?.title}}\n    </div>\n    <div class=\"ax-overflow-y-auto  ax-flex-1\">\n        <axp-widget-property-viewer [widget]=\"{ type: selectedItem()!.type, options: selectedItem()!.options }\"\n            [mode]=\"'advanced'\" (onChanged)=\"handleViewerChanged($event)\" />\n    </div>\n    }\n    @else {\n    <div class=\"ax-text-sm ax-text-muted ax-p-4 ax-text-center\">{{ '@extra-properties:messages.select-field-to-edit' |\n        translate | async }}</div>\n    }\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i2$4.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i3$1.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i4$4.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i5$2.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$1.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.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { 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: DragDropModule }, { kind: "directive", type: i3$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3$3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { 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.4", ngImport: i0, type: AXPExtraPropertiesSchemaComponent, decorators: [{
             type: Component,
@@ -3932,7 +3982,7 @@ class AXPQueryFiltersComponent {
     }
     #effect2;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPQueryFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: AXPQueryFiltersComponent, isStandalone: true, selector: "axp-query-filters", inputs: { filtersDefinitions: { classPropertyName: "filtersDefinitions", publicName: "filtersDefinitions", isSignal: true, isRequired: false, transformFunction: null }, initialFilters: { classPropertyName: "initialFilters", publicName: "initialFilters", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onFiltersChanged: "onFiltersChanged" }, viewQueries: [{ propertyName: "tagBox", first: true, predicate: ["tagBox"], descendants: true, isSignal: true }, { propertyName: "popover", first: true, predicate: ["popover"], descendants: true, isSignal: true }, { propertyName: "listItems", predicate: ["caseItem"], descendants: true }], ngImport: i0, template: "<div class=\"ax-flex ax-items-center ax-gap-2 ax-p-2\">\n  <ax-button (keydown)=\"handleButtonKeyDown($event)\" (onClick)=\"popover.open()\" #filterButton [look]=\"'blank'\">\n    <ax-icon class=\"far fa-bars-filter ax-cursor-pointer\"> </ax-icon>\n  </ax-button>\n  <ax-tag-box\n    [ngModel]=\"asyncTags()\"\n    (onValueChanged)=\"handleSelectFilters($event)\"\n    [textField]=\"'query'\"\n    [valueField]=\"'id'\"\n    [readonly]=\"filtersDefinitions().length === 0\"\n    [look]=\"'none'\"\n    [readonlyField]=\"'readOnly'\"\n    (onKeyDown)=\"handleKeyDown($event)\"\n    [addOnEnter]=\"false\"\n    [placeholder]=\"\n      (filtersDefinitions().length === 0\n        ? '@general:terms.interface.filter.no-filter-definitions'\n        : '@general:terms.interface.filter.placeholder'\n      )\n        | translate\n        | async\n    \"\n    #tagBox\n  ></ax-tag-box>\n</div>\n\n<ax-popover\n  [offsetY]=\"activeFilter() ? -30 : 0\"\n  [target]=\"tagBoxInput\"\n  [openOn]=\"'toggle'\"\n  (onOpened)=\"onPopoverOpened($event)\"\n  [closeOn]=\"'clickOut'\"\n  (onClosed)=\"handlePopoverClosed($event)\"\n  [adaptivityEnabled]=\"true\"\n  #popover\n>\n  <div\n    class=\"md:ax-min-w-72 ax-border ax-surface ax-w-full ax-rounded-md md:ax-max-h-96 ax-max-w-80 md:ax-overflow-auto\"\n  >\n    <axp-widgets-container [context]=\"context()\" (onContextChanged)=\"onContextChanged($event)\">\n      @if (activeFilter()) {\n        <div class=\"ax-flex ax-flex-col ax-lightest-surface ax-shadow-md\">\n          <ax-header class=\"ax-border-b ax-border-light ax-px-4 ax-py-2\">{{\n            activeFilter()?.title! | translate | async\n          }}</ax-header>\n          <ax-content class=\"ax-p-4\">\n            <div class=\"ax-mb-2\">\n              <ax-badge [text]=\"getActiveOperator(activeFilter())!\"></ax-badge>\n            </div>\n            <ng-container\n              axp-widget-renderer\n              [node]=\"{\n                type: activeFilter()?.widget?.type || 'text-editor',\n                path: activeFilter()?.field,\n                options: activeFilter()?.widget?.options,\n              }\"\n              [mode]=\"'edit'\"\n            >\n            </ng-container>\n          </ax-content>\n          <ax-footer class=\"ax-border-t ax-flex ax-justify-end ax-border-light ax-w-full ax-px-4 ax-py-2\">\n            <ax-button\n              class=\"ax-xs\"\n              [text]=\"'@general:actions.apply.title' | translate | async\"\n              (onClick)=\"handleApplyFilter()\"\n            ></ax-button>\n          </ax-footer>\n        </div>\n      } @else {\n        <div axListNavigation #list=\"axListNavigation\" class=\"axp-list-items\">\n          @if (tagBox.inputValue()) {\n            @for (inlineFilter of inlineFilters(); track inlineFilter.field) {\n              <div\n                axListNavigationItem\n                #caseItem=\"axListNavigationItem\"\n                [class.axp-state-focused]=\"caseItem.isActive()\"\n                tabindex=\"0\"\n                (click)=\"handleSelectInlineFilter(inlineFilter)\"\n                (keydown)=\"handleInlineFilterKeyDown($event, inlineFilter)\"\n              >\n                {{ inlineFilter.title | translate | async }} {{ getActiveOperator(inlineFilter) }} '{{\n                  tagBox.inputValue()\n                }}'\n              </div>\n            }\n            <span class=\"ax-w-full ax-border-t ax-border-light ax-my-1\"></span>\n          }\n          @for (field of filterFields(); track field.field) {\n            <div\n              axListNavigationItem\n              #caseItem=\"axListNavigationItem\"\n              [class.axp-state-focused]=\"caseItem.isActive()\"\n              (click)=\"handleSelectField(field)\"\n              (keydown)=\"handleFieldKeyDown($event, field)\"\n              tabindex=\"0\"\n            >\n              <div class=\"ax-flex ax-items-end ax-gap-2\">\n                <ax-icon class=\"ax-w-5\" [class]=\"'fa-light ' + field.icon\"> </ax-icon>\n                {{ field.title | translate | async }}\n              </div>\n            </div>\n          }\n        </div>\n      }\n    </axp-widgets-container>\n  </div>\n</ax-popover>\n", styles: ["axp-query-filters{width:100%}.axp-list-items{display:flex;min-width:10rem;flex-direction:column;border-radius:.375rem;border-width:1px;padding-top:1rem;padding-bottom:1rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);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))}.axp-list-items>div{min-width:7rem;cursor:pointer;padding:.5rem 1rem;text-align:start}.axp-list-items>div:focus{outline:none}.axp-list-items>div.axp-state-focused,.axp-list-items>div:hover{background-color:rgb(var(--ax-sys-color-surface));color:rgb(var(--ax-sys-color-on-surface));border-color:rgb(var(--ax-sys-color-border-surface))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$1.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.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { 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: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i4$5.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "ngmodule", type: AXTagBoxModule }, { kind: "component", type: i5$3.AXTagBoxComponent, selector: "ax-tag-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "allowNull", "type", "look", "addOnComma", "addOnEnter", "valueField", "textField", "readonlyField", "allowDuplicateValues"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$2.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$2.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXListNavigationModule }, { kind: "directive", type: i7.AXListNavigationDirective, selector: "[axListNavigation]", inputs: ["orientation"], outputs: ["onNavigationChanged", "onKeypress"], exportAs: ["axListNavigation"] }, { kind: "directive", type: i7.AXListNavigationItemDirective, selector: "[axListNavigationItem]", outputs: ["onKeypress"], exportAs: ["axListNavigationItem"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i8.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: AXPQueryFiltersComponent, isStandalone: true, selector: "axp-query-filters", inputs: { filtersDefinitions: { classPropertyName: "filtersDefinitions", publicName: "filtersDefinitions", isSignal: true, isRequired: false, transformFunction: null }, initialFilters: { classPropertyName: "initialFilters", publicName: "initialFilters", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onFiltersChanged: "onFiltersChanged" }, viewQueries: [{ propertyName: "tagBox", first: true, predicate: ["tagBox"], descendants: true, isSignal: true }, { propertyName: "popover", first: true, predicate: ["popover"], descendants: true, isSignal: true }, { propertyName: "listItems", predicate: ["caseItem"], descendants: true }], ngImport: i0, template: "<div class=\"ax-flex ax-items-center ax-gap-2 ax-p-2\">\n  <ax-button (keydown)=\"handleButtonKeyDown($event)\" (onClick)=\"popover.open()\" #filterButton [look]=\"'blank'\">\n    <ax-icon class=\"far fa-bars-filter ax-cursor-pointer\"> </ax-icon>\n  </ax-button>\n  <ax-tag-box\n    [ngModel]=\"asyncTags()\"\n    (onValueChanged)=\"handleSelectFilters($event)\"\n    [textField]=\"'query'\"\n    [valueField]=\"'id'\"\n    [readonly]=\"filtersDefinitions().length === 0\"\n    [look]=\"'none'\"\n    [readonlyField]=\"'readOnly'\"\n    (onKeyDown)=\"handleKeyDown($event)\"\n    [addOnEnter]=\"false\"\n    [placeholder]=\"\n      (filtersDefinitions().length === 0\n        ? '@general:terms.interface.filter.no-filter-definitions'\n        : '@general:terms.interface.filter.placeholder'\n      )\n        | translate\n        | async\n    \"\n    #tagBox\n  ></ax-tag-box>\n</div>\n\n<ax-popover\n  [offsetY]=\"activeFilter() ? -30 : 0\"\n  [target]=\"tagBoxInput\"\n  [openOn]=\"'toggle'\"\n  (onOpened)=\"onPopoverOpened($event)\"\n  [closeOn]=\"'clickOut'\"\n  (onClosed)=\"handlePopoverClosed($event)\"\n  [adaptivityEnabled]=\"true\"\n  #popover\n>\n  <div\n    class=\"md:ax-min-w-72 ax-border ax-surface ax-w-full ax-rounded-md md:ax-max-h-96 ax-max-w-80 md:ax-overflow-auto\"\n  >\n    <axp-widgets-container [context]=\"context()\" (onContextChanged)=\"onContextChanged($event)\">\n      @if (activeFilter()) {\n        <div class=\"ax-flex ax-flex-col ax-lightest-surface ax-shadow-md\">\n          <ax-header class=\"ax-border-b ax-border-light ax-px-4 ax-py-2\">{{\n            activeFilter()?.title! | translate | async\n          }}</ax-header>\n          <ax-content class=\"ax-p-4\">\n            <div class=\"ax-mb-2\">\n              <ax-badge [text]=\"getActiveOperator(activeFilter())!\"></ax-badge>\n            </div>\n            <ng-container\n              axp-widget-renderer\n              [node]=\"{\n                type: activeFilter()?.widget?.type || 'text-editor',\n                path: activeFilter()?.field,\n                options: activeFilter()?.widget?.options,\n              }\"\n              [mode]=\"'edit'\"\n            >\n            </ng-container>\n          </ax-content>\n          <ax-footer class=\"ax-border-t ax-flex ax-justify-end ax-border-light ax-w-full ax-px-4 ax-py-2\">\n            <ax-button\n              class=\"ax-xs\"\n              [text]=\"'@general:actions.apply.title' | translate | async\"\n              (onClick)=\"handleApplyFilter()\"\n            ></ax-button>\n          </ax-footer>\n        </div>\n      } @else {\n        <div axListNavigation #list=\"axListNavigation\" class=\"axp-list-items\">\n          @if (tagBox.inputValue()) {\n            @for (inlineFilter of inlineFilters(); track inlineFilter.field) {\n              <div\n                axListNavigationItem\n                #caseItem=\"axListNavigationItem\"\n                [class.axp-state-focused]=\"caseItem.isActive()\"\n                tabindex=\"0\"\n                (click)=\"handleSelectInlineFilter(inlineFilter)\"\n                (keydown)=\"handleInlineFilterKeyDown($event, inlineFilter)\"\n              >\n                {{ inlineFilter.title | translate | async }} {{ getActiveOperator(inlineFilter) }} '{{\n                  tagBox.inputValue()\n                }}'\n              </div>\n            }\n            <span class=\"ax-w-full ax-border-t ax-border-light ax-my-1\"></span>\n          }\n          @for (field of filterFields(); track field.field) {\n            <div\n              axListNavigationItem\n              #caseItem=\"axListNavigationItem\"\n              [class.axp-state-focused]=\"caseItem.isActive()\"\n              (click)=\"handleSelectField(field)\"\n              (keydown)=\"handleFieldKeyDown($event, field)\"\n              tabindex=\"0\"\n            >\n              <div class=\"ax-flex ax-items-end ax-gap-2\">\n                <ax-icon class=\"ax-w-5\" [class]=\"'fa-light ' + field.icon\"> </ax-icon>\n                {{ field.title | translate | async }}\n              </div>\n            </div>\n          }\n        </div>\n      }\n    </axp-widgets-container>\n  </div>\n</ax-popover>\n", styles: ["axp-query-filters{width:100%}.axp-list-items{display:flex;min-width:10rem;flex-direction:column;border-radius:.375rem;border-width:1px;padding-top:1rem;padding-bottom:1rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);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))}.axp-list-items>div{min-width:7rem;cursor:pointer;padding:.5rem 1rem;text-align:start}.axp-list-items>div:focus{outline:none}.axp-list-items>div.axp-state-focused,.axp-list-items>div:hover{background-color:rgb(var(--ax-sys-color-surface));color:rgb(var(--ax-sys-color-on-surface));border-color:rgb(var(--ax-sys-color-border-surface))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$1.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.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { 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: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i4$5.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "ngmodule", type: AXTagBoxModule }, { kind: "component", type: i5$3.AXTagBoxComponent, selector: "ax-tag-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "allowNull", "type", "look", "addOnComma", "addOnEnter", "valueField", "textField", "readonlyField", "allowDuplicateValues", "tagTemplate"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onTagClick", "onTagDblClick", "onTagContextMenu"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$2.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$2.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXListNavigationModule }, { kind: "directive", type: i7.AXListNavigationDirective, selector: "[axListNavigation]", inputs: ["orientation"], outputs: ["onNavigationChanged", "onKeypress"], exportAs: ["axListNavigation"] }, { kind: "directive", type: i7.AXListNavigationItemDirective, selector: "[axListNavigationItem]", outputs: ["onKeypress"], exportAs: ["axListNavigationItem"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i8.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPQueryFiltersComponent, decorators: [{
             type: Component,
@@ -4432,28 +4482,566 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 }]
         }] });
 
-const AXP_USER_AVATAR_PROVIDER = new InjectionToken('AXP_USER_AVATAR_PROVIDER', {
-    providedIn: 'root',
-    factory: () => {
-        return new AXPUserAvatarProviderDefault();
+class AXPTreeListItemComponent {
+    constructor() {
+        // Inputs
+        this.node = input.required(...(ngDevMode ? [{ debugName: "node" }] : []));
+        this.level = input(0, ...(ngDevMode ? [{ debugName: "level" }] : []));
+        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
+        this.look = input('default', ...(ngDevMode ? [{ debugName: "look" }] : []));
+        this.expanded = input(false, ...(ngDevMode ? [{ debugName: "expanded" }] : []));
+        this.selected = input(false, ...(ngDevMode ? [{ debugName: "selected" }] : []));
+        this.dragState = input.required(...(ngDevMode ? [{ debugName: "dragState" }] : []));
+        this.expandedNodes = input.required(...(ngDevMode ? [{ debugName: "expandedNodes" }] : []));
+        this.selectedNodes = input.required(...(ngDevMode ? [{ debugName: "selectedNodes" }] : []));
+        this.isLastChild = input(false, ...(ngDevMode ? [{ debugName: "isLastChild" }] : []));
+        // Outputs
+        this.dragStart = output();
+        this.dragOver = output();
+        this.dragEnd = output();
+        this.dragCancel = output();
+        this.nodeClick = output();
+        this.toggle = output();
+        this.select = output();
+        // Internal state
+        this.dropPosition = signal(null, ...(ngDevMode ? [{ debugName: "dropPosition" }] : []));
+        this.dragOverZone = signal(null, ...(ngDevMode ? [{ debugName: "dragOverZone" }] : []));
+        // Computed
+        this.hasChildren = computed(() => {
+            const children = this.node().children;
+            return children && children.length > 0;
+        }, ...(ngDevMode ? [{ debugName: "hasChildren" }] : []));
+        this.isDragging = computed(() => {
+            const state = this.dragState();
+            return state.isDragging && state.dragNode?.id === this.node().id;
+        }, ...(ngDevMode ? [{ debugName: "isDragging" }] : []));
+        this.isDragOver = computed(() => {
+            const state = this.dragState();
+            return state.isDragging && state.dropTarget?.id === this.node().id;
+        }, ...(ngDevMode ? [{ debugName: "isDragOver" }] : []));
+        this.canDrop = computed(() => {
+            const state = this.dragState();
+            return this.isDragOver() && state.canDrop;
+        }, ...(ngDevMode ? [{ debugName: "canDrop" }] : []));
+        this.indentStyle = computed(() => ({
+            paddingLeft: `${this.level() * this.config().indentSize}px`,
+        }), ...(ngDevMode ? [{ debugName: "indentStyle" }] : []));
+        this.showExpandIcon = computed(() => {
+            return this.config().expandable && this.hasChildren();
+        }, ...(ngDevMode ? [{ debugName: "showExpandIcon" }] : []));
+        this.visibleActions = computed(() => {
+            return this.node().actions?.filter((action) => action.visible !== false) || [];
+        }, ...(ngDevMode ? [{ debugName: "visibleActions" }] : []));
+    }
+    // Checkbox model for two-way binding
+    get checkboxValue() {
+        return this.selected();
+    }
+    set checkboxValue(value) {
+        if (value !== this.selected()) {
+            this.select.emit(this.node());
+        }
     }
-});
-class AXPUserAvatarProviderDefault {
-    provide(userId) {
-        return Promise.resolve({
-            id: userId,
-            username: 'johndoe',
-            firstName: 'John',
-            lastName: 'Doe',
-            status: 'online',
-            avatarUrl: 'https://via.placeholder.com/150',
+    // Drag and drop handlers
+    onDragStart(event) {
+        if (!this.config().dragEnabled || this.node().disabled || this.node().draggable === false) {
+            event.preventDefault();
+            return;
+        }
+        event.stopPropagation();
+        if (event.dataTransfer) {
+            event.dataTransfer.effectAllowed = 'move';
+            event.dataTransfer.setData('text/plain', this.node().id);
+            // Create drag image from the entire item content
+            const itemContent = event.target.closest('.axp-tree-list-item-content');
+            if (itemContent) {
+                const dragImage = itemContent.cloneNode(true);
+                dragImage.style.position = 'absolute';
+                dragImage.style.top = '-9999px';
+                dragImage.style.opacity = '0.8';
+                dragImage.style.pointerEvents = 'none';
+                document.body.appendChild(dragImage);
+                event.dataTransfer.setDragImage(dragImage, 20, 20);
+                setTimeout(() => document.body.removeChild(dragImage), 0);
+            }
+        }
+        this.dragStart.emit(this.node());
+    }
+    onDragOver(event) {
+        if (!this.config().dragEnabled) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        const state = this.dragState();
+        if (!state.isDragging || !state.dragNode) {
+            return;
+        }
+        // Calculate drop position based on mouse position
+        const rect = event.currentTarget.getBoundingClientRect();
+        const y = event.clientY - rect.top;
+        const height = rect.height;
+        const threshold = height / 3;
+        let position;
+        let zone;
+        if (y < threshold) {
+            position = 'before';
+            zone = 'top';
+        }
+        else if (y > height - threshold) {
+            position = 'after';
+            zone = 'bottom';
+        }
+        else {
+            position = 'inside';
+            zone = 'middle';
+        }
+        // Don't allow dropping inside if node doesn't accept children
+        if (position === 'inside' && this.node().droppable === false) {
+            position = y < height / 2 ? 'before' : 'after';
+            zone = y < height / 2 ? 'top' : 'bottom';
+        }
+        this.dropPosition.set(position);
+        this.dragOverZone.set(zone);
+        this.dragOver.emit({ node: this.node(), position });
+        if (event.dataTransfer) {
+            event.dataTransfer.dropEffect = state.canDrop ? 'move' : 'none';
+        }
+    }
+    onDragLeave(event) {
+        event.stopPropagation();
+        // Only clear if we're actually leaving this element
+        const relatedTarget = event.relatedTarget;
+        if (!relatedTarget || !event.currentTarget.contains(relatedTarget)) {
+            this.dropPosition.set(null);
+            this.dragOverZone.set(null);
+        }
+    }
+    onDrop(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.dropPosition.set(null);
+        this.dragOverZone.set(null);
+        this.dragEnd.emit();
+    }
+    onDragEnd(event) {
+        event.stopPropagation();
+        this.dropPosition.set(null);
+        this.dragOverZone.set(null);
+        this.dragEnd.emit();
+    }
+    // Node interaction handlers
+    onToggleClick(event) {
+        event.stopPropagation();
+        if (this.config().expandable && this.hasChildren()) {
+            this.toggle.emit(this.node());
+        }
+    }
+    onContentClick(event) {
+        if (!this.node().disabled) {
+            this.nodeClick.emit(this.node());
+            if (this.node().selectable !== false) {
+                this.select.emit(this.node());
+            }
+        }
+    }
+    onActionClick(event, action) {
+        event.stopPropagation();
+        if (!action.disabled && action.onClick) {
+            action.onClick(this.node());
+        }
+    }
+    // Helper methods
+    getDropIndicatorClass() {
+        const zone = this.dragOverZone();
+        const canDrop = this.canDrop();
+        if (!zone || !canDrop) {
+            return '';
+        }
+        return `axp-tree-list-item-drop-${zone}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPTreeListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: AXPTreeListItemComponent, isStandalone: true, selector: "axp-tree-list-item", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, dragState: { classPropertyName: "dragState", publicName: "dragState", isSignal: true, isRequired: true, transformFunction: null }, expandedNodes: { classPropertyName: "expandedNodes", publicName: "expandedNodes", isSignal: true, isRequired: true, transformFunction: null }, selectedNodes: { classPropertyName: "selectedNodes", publicName: "selectedNodes", isSignal: true, isRequired: true, transformFunction: null }, isLastChild: { classPropertyName: "isLastChild", publicName: "isLastChild", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dragStart: "dragStart", dragOver: "dragOver", dragEnd: "dragEnd", dragCancel: "dragCancel", nodeClick: "nodeClick", toggle: "toggle", select: "select" }, host: { properties: { "class.axp-tree-list-item-expanded": "expanded()", "class.axp-tree-list-item-collapsed": "!expanded() && hasChildren()", "class.axp-tree-list-item-selected": "selected()", "class.axp-tree-list-item-disabled": "node().disabled", "class.axp-tree-list-item-dragging": "isDragging()", "class.axp-tree-list-item-drag-over": "isDragOver()", "class.axp-tree-list-item-can-drop": "canDrop()", "attr.data-level": "level()", "attr.data-node-id": "node().id" }, classAttribute: "axp-tree-list-item" }, ngImport: i0, template: "<div\n  class=\"axp-tree-list-item-wrapper\"\n  [class]=\"getDropIndicatorClass()\"\n  [style.--indent]=\"level() * config().indentSize + 'px'\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n>\n  <!-- Tree lines -->\n  @if (config().showLines && level() > 0) {\n    <div class=\"axp-tree-list-item-lines\">\n      <!-- Vertical line -->\n      <div\n        class=\"axp-tree-list-item-line-vertical\"\n        [class.last-child]=\"isLastChild()\"\n        [style.left.px]=\"(level() - 1) * config().indentSize + 12\"\n      ></div>\n      <!-- Horizontal line -->\n      <div class=\"axp-tree-list-item-line-horizontal\" [style.left.px]=\"(level() - 1) * config().indentSize + 12\"></div>\n    </div>\n  }\n\n  <div class=\"axp-tree-list-item-content\" [ngStyle]=\"indentStyle()\" (click)=\"onContentClick($event)\">\n    <!-- Expand/Collapse Icon -->\n    @if (showExpandIcon()) {\n      <ax-button\n        class=\"axp-tree-list-item-toggle\"\n        [class.axp-tree-list-item-toggle-expanded]=\"expanded()\"\n        (click)=\"onToggleClick($event)\"\n        mode=\"text\"\n        size=\"sm\"\n      >\n        <i class=\"fa-light\" [class.fa-chevron-right]=\"!expanded()\" [class.fa-chevron-down]=\"expanded()\"></i>\n      </ax-button>\n    } @else if (config().expandable) {\n      <span class=\"axp-tree-list-item-toggle-placeholder\"></span>\n    }\n\n    <!-- Drag Indicator -->\n    @if (config().dragEnabled && config().showDragIndicator && !node().disabled && node().draggable !== false) {\n      <div\n        class=\"axp-tree-list-item-drag-handle\"\n        [attr.draggable]=\"true\"\n        (dragstart)=\"onDragStart($event)\"\n        (dragend)=\"onDragEnd($event)\"\n      >\n        <i class=\"fa-light fa-grip-vertical\"></i>\n      </div>\n    }\n\n    <!-- Checkbox -->\n    @if (config().showCheckboxes) {\n      <div class=\"axp-tree-list-item-checkbox\" (click)=\"$event.stopPropagation()\">\n        <ax-check-box [(ngModel)]=\"checkboxValue\" />\n      </div>\n    }\n\n    <!-- Icon -->\n    @if (config().showIcons && node().icon) {\n      <div class=\"axp-tree-list-item-icon\">\n        <i [class]=\"node().icon\"></i>\n      </div>\n    }\n\n    <!-- Content -->\n    <div class=\"axp-tree-list-item-main\">\n      <div class=\"axp-tree-list-item-title\">\n        <span>{{ node().title }}</span>\n\n        <!-- Badge -->\n        @if (config().showBadges && node().badge) {\n          <ax-badge [color]=\"node().badge?.color || 'primary'\" [text]=\"node().badge?.text ?? ''\"></ax-badge>\n        }\n      </div>\n\n      <!-- Description -->\n      @if (config().showDescription && node().description) {\n        <div class=\"axp-tree-list-item-description\">\n          {{ node().description }}\n        </div>\n      }\n    </div>\n\n    <!-- Actions -->\n    @if (config().showActions && visibleActions().length > 0) {\n      <div class=\"axp-tree-list-item-actions\">\n        @for (action of visibleActions(); track action.id) {\n          <ax-button\n            class=\"axp-tree-list-item-action\"\n            [disabled]=\"action.disabled\"\n            [color]=\"action.color || 'secondary'\"\n            [title]=\"action.text\"\n            (click)=\"onActionClick($event, action)\"\n            mode=\"text\"\n            size=\"sm\"\n          >\n            @if (action.icon) {\n              <i [class]=\"action.icon\"></i>\n            }\n          </ax-button>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Drop Indicators -->\n  @if (canDrop()) {\n    <div class=\"axp-tree-list-item-drop-indicator\" [attr.data-position]=\"dropPosition()\"></div>\n  }\n</div>\n\n<!-- Children -->\n@if (hasChildren() && expanded()) {\n  <div class=\"axp-tree-list-item-children\">\n    @for (child of node().children; track child.id; let isLast = $last) {\n      <axp-tree-list-item\n        [node]=\"child\"\n        [level]=\"level() + 1\"\n        [config]=\"config()\"\n        [look]=\"look()\"\n        [expanded]=\"expandedNodes().has(child.id)\"\n        [selected]=\"selectedNodes().has(child.id)\"\n        [dragState]=\"dragState()\"\n        [expandedNodes]=\"expandedNodes()\"\n        [selectedNodes]=\"selectedNodes()\"\n        [isLastChild]=\"isLast\"\n        (dragStart)=\"dragStart.emit($event)\"\n        (dragOver)=\"dragOver.emit($event)\"\n        (dragEnd)=\"dragEnd.emit()\"\n        (dragCancel)=\"dragCancel.emit()\"\n        (nodeClick)=\"nodeClick.emit($event)\"\n        (toggle)=\"toggle.emit($event)\"\n        (select)=\"select.emit($event)\"\n      />\n    }\n  </div>\n}\n", styles: [".axp-tree-list-item{display:block;position:relative}.axp-tree-list-item-wrapper{position:relative;transition:all .2s ease}.axp-tree-list-item-content{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;min-height:2.5rem;cursor:pointer;transition:all .15s ease;border-radius:4px;position:relative;z-index:1}.axp-tree-list-item-content:hover{background-color:var(--ax-color-hover)}.axp-tree-list-item-content:active{background-color:var(--ax-color-active)}.axp-tree-list-item-selected .axp-tree-list-item-content{background-color:var(--ax-color-primary-alpha-10);color:var(--ax-color-primary);font-weight:500}.axp-tree-list-item-disabled .axp-tree-list-item-content{opacity:.5;cursor:not-allowed;pointer-events:none}.axp-tree-list-item-toggle{display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;padding:0;border:none;background:none;cursor:pointer;color:var(--ax-color-text-secondary);transition:all .15s ease;border-radius:2px;flex-shrink:0}.axp-tree-list-item-toggle:hover{background-color:var(--ax-color-hover);color:var(--ax-color-text-primary)}.axp-tree-list-item-toggle i{font-size:.75rem;transition:transform .2s ease}.axp-tree-list-item-toggle-expanded i{transform:rotate(0)}.axp-tree-list-item-toggle-placeholder{width:1.25rem;height:1.25rem;flex-shrink:0}.axp-tree-list-item-drag-handle{display:flex;align-items:center;justify-content:center;width:1rem;color:var(--ax-color-text-tertiary);cursor:grab;flex-shrink:0;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.axp-tree-list-item-drag-handle:active{cursor:grabbing}.axp-tree-list-item-drag-handle i{font-size:.975rem;pointer-events:none}.axp-tree-list-item-dragging{opacity:.5}.axp-tree-list-item-dragging .axp-tree-list-item-content{background-color:var(--ax-color-primary-alpha-10);border:2px dashed var(--ax-color-primary)}.axp-tree-list-item-drag-over .axp-tree-list-item-content{background-color:var(--ax-color-primary-alpha-5)}.axp-tree-list-item-checkbox{display:flex;align-items:center;flex-shrink:0}.axp-tree-list-item-checkbox input[type=checkbox]{width:1rem;height:1rem;cursor:pointer}.axp-tree-list-item-icon{display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;color:var(--ax-color-text-secondary);flex-shrink:0}.axp-tree-list-item-icon i{font-size:1.125rem}.axp-tree-list-item-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:.125rem}.axp-tree-list-item-title{display:flex;align-items:center;gap:1.5rem;font-size:.875rem;line-height:1.25rem;font-weight:500}.axp-tree-list-item-title span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.axp-tree-list-item-badge{display:inline-flex;align-items:center;padding:.125rem .5rem;font-size:.75rem;font-weight:600;border-radius:9999px;flex-shrink:0}.axp-tree-list-item-badge[data-color=primary]{background-color:var(--ax-color-primary-alpha-10);color:var(--ax-color-primary)}.axp-tree-list-item-badge[data-color=secondary]{background-color:var(--ax-color-secondary-alpha-10);color:var(--ax-color-secondary)}.axp-tree-list-item-badge[data-color=success]{background-color:var(--ax-color-success-alpha-10);color:var(--ax-color-success)}.axp-tree-list-item-badge[data-color=danger]{background-color:var(--ax-color-danger-alpha-10);color:var(--ax-color-danger)}.axp-tree-list-item-badge[data-color=warning]{background-color:var(--ax-color-warning-alpha-10);color:var(--ax-color-warning)}.axp-tree-list-item-badge[data-color=info]{background-color:var(--ax-color-info-alpha-10);color:var(--ax-color-info)}.axp-tree-list-item-description{font-size:.75rem;line-height:1rem;color:var(--ax-color-text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.axp-tree-list-item-actions{display:flex;align-items:center;gap:.25rem;margin-left:auto;flex-shrink:0;opacity:0;transition:opacity .15s ease}.axp-tree-list-item-content:hover .axp-tree-list-item-actions{opacity:1}.axp-tree-list-item-action{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;border:none;background:none;cursor:pointer;border-radius:4px;transition:all .15s ease;color:var(--ax-color-text-secondary)}.axp-tree-list-item-action:hover{background-color:var(--ax-color-hover);color:var(--ax-color-text-primary)}.axp-tree-list-item-action[data-color=danger]:hover{background-color:var(--ax-color-danger-alpha-10);color:var(--ax-color-danger)}.axp-tree-list-item-action[data-color=success]:hover{background-color:var(--ax-color-success-alpha-10);color:var(--ax-color-success)}.axp-tree-list-item-action[data-color=warning]:hover{background-color:var(--ax-color-warning-alpha-10);color:var(--ax-color-warning)}.axp-tree-list-item-action[data-color=primary]:hover{background-color:var(--ax-color-primary-alpha-10);color:var(--ax-color-primary)}.axp-tree-list-item-action-disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.axp-tree-list-item-action i{font-size:.975rem}.axp-tree-list-item-children{overflow:hidden;animation:expandCollapse .2s ease}.axp-tree-list-item-drop-indicator{position:absolute;left:0;right:0;height:2px;background-color:var(--ax-color-primary);pointer-events:none;z-index:10}.axp-tree-list-item-drop-indicator:before{content:\"\";position:absolute;left:0;top:50%;transform:translateY(-50%);width:6px;height:6px;border-radius:50%;background-color:var(--ax-color-primary)}.axp-tree-list-item-drop-indicator[data-position=before]{top:-1px}.axp-tree-list-item-drop-indicator[data-position=after]{bottom:-1px}.axp-tree-list-item-drop-indicator[data-position=inside]{display:none}.axp-tree-list-item-drop-top{border-top:2px solid var(--ax-color-primary)}.axp-tree-list-item-drop-bottom{border-bottom:2px solid var(--ax-color-primary)}.axp-tree-list-item-drop-middle.axp-tree-list-item-can-drop .axp-tree-list-item-content{background-color:var(--ax-color-primary-alpha-10);border:2px dashed var(--ax-color-primary)}.axp-tree-list-lines .axp-tree-list-item,.axp-tree-list-item-children{position:relative}.axp-tree-list-item-lines{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0}.axp-tree-list-item-line-vertical{position:absolute;top:0;bottom:0;width:1px;background-color:var(--ax-color-border, #d0d0d0)}.axp-tree-list-item-line-vertical.last-child{bottom:50%}.axp-tree-list-item-line-horizontal{position:absolute;top:50%;width:12px;height:1px;background-color:var(--ax-color-border, #d0d0d0)}@keyframes expandCollapse{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "component", type: AXPTreeListItemComponent, selector: "axp-tree-list-item", inputs: ["node", "level", "config", "look", "expanded", "selected", "dragState", "expandedNodes", "selectedNodes", "isLastChild"], outputs: ["dragStart", "dragOver", "dragEnd", "dragCancel", "nodeClick", "toggle", "select"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$1.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: AXCheckBoxModule }, { kind: "component", type: i2$3.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i8.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPTreeListItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-tree-list-item', standalone: true, imports: [CommonModule, FormsModule, AXButtonModule, AXCheckBoxModule, AXBadgeModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'axp-tree-list-item',
+                        '[class.axp-tree-list-item-expanded]': 'expanded()',
+                        '[class.axp-tree-list-item-collapsed]': '!expanded() && hasChildren()',
+                        '[class.axp-tree-list-item-selected]': 'selected()',
+                        '[class.axp-tree-list-item-disabled]': 'node().disabled',
+                        '[class.axp-tree-list-item-dragging]': 'isDragging()',
+                        '[class.axp-tree-list-item-drag-over]': 'isDragOver()',
+                        '[class.axp-tree-list-item-can-drop]': 'canDrop()',
+                        '[attr.data-level]': 'level()',
+                        '[attr.data-node-id]': 'node().id',
+                    }, template: "<div\n  class=\"axp-tree-list-item-wrapper\"\n  [class]=\"getDropIndicatorClass()\"\n  [style.--indent]=\"level() * config().indentSize + 'px'\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n>\n  <!-- Tree lines -->\n  @if (config().showLines && level() > 0) {\n    <div class=\"axp-tree-list-item-lines\">\n      <!-- Vertical line -->\n      <div\n        class=\"axp-tree-list-item-line-vertical\"\n        [class.last-child]=\"isLastChild()\"\n        [style.left.px]=\"(level() - 1) * config().indentSize + 12\"\n      ></div>\n      <!-- Horizontal line -->\n      <div class=\"axp-tree-list-item-line-horizontal\" [style.left.px]=\"(level() - 1) * config().indentSize + 12\"></div>\n    </div>\n  }\n\n  <div class=\"axp-tree-list-item-content\" [ngStyle]=\"indentStyle()\" (click)=\"onContentClick($event)\">\n    <!-- Expand/Collapse Icon -->\n    @if (showExpandIcon()) {\n      <ax-button\n        class=\"axp-tree-list-item-toggle\"\n        [class.axp-tree-list-item-toggle-expanded]=\"expanded()\"\n        (click)=\"onToggleClick($event)\"\n        mode=\"text\"\n        size=\"sm\"\n      >\n        <i class=\"fa-light\" [class.fa-chevron-right]=\"!expanded()\" [class.fa-chevron-down]=\"expanded()\"></i>\n      </ax-button>\n    } @else if (config().expandable) {\n      <span class=\"axp-tree-list-item-toggle-placeholder\"></span>\n    }\n\n    <!-- Drag Indicator -->\n    @if (config().dragEnabled && config().showDragIndicator && !node().disabled && node().draggable !== false) {\n      <div\n        class=\"axp-tree-list-item-drag-handle\"\n        [attr.draggable]=\"true\"\n        (dragstart)=\"onDragStart($event)\"\n        (dragend)=\"onDragEnd($event)\"\n      >\n        <i class=\"fa-light fa-grip-vertical\"></i>\n      </div>\n    }\n\n    <!-- Checkbox -->\n    @if (config().showCheckboxes) {\n      <div class=\"axp-tree-list-item-checkbox\" (click)=\"$event.stopPropagation()\">\n        <ax-check-box [(ngModel)]=\"checkboxValue\" />\n      </div>\n    }\n\n    <!-- Icon -->\n    @if (config().showIcons && node().icon) {\n      <div class=\"axp-tree-list-item-icon\">\n        <i [class]=\"node().icon\"></i>\n      </div>\n    }\n\n    <!-- Content -->\n    <div class=\"axp-tree-list-item-main\">\n      <div class=\"axp-tree-list-item-title\">\n        <span>{{ node().title }}</span>\n\n        <!-- Badge -->\n        @if (config().showBadges && node().badge) {\n          <ax-badge [color]=\"node().badge?.color || 'primary'\" [text]=\"node().badge?.text ?? ''\"></ax-badge>\n        }\n      </div>\n\n      <!-- Description -->\n      @if (config().showDescription && node().description) {\n        <div class=\"axp-tree-list-item-description\">\n          {{ node().description }}\n        </div>\n      }\n    </div>\n\n    <!-- Actions -->\n    @if (config().showActions && visibleActions().length > 0) {\n      <div class=\"axp-tree-list-item-actions\">\n        @for (action of visibleActions(); track action.id) {\n          <ax-button\n            class=\"axp-tree-list-item-action\"\n            [disabled]=\"action.disabled\"\n            [color]=\"action.color || 'secondary'\"\n            [title]=\"action.text\"\n            (click)=\"onActionClick($event, action)\"\n            mode=\"text\"\n            size=\"sm\"\n          >\n            @if (action.icon) {\n              <i [class]=\"action.icon\"></i>\n            }\n          </ax-button>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Drop Indicators -->\n  @if (canDrop()) {\n    <div class=\"axp-tree-list-item-drop-indicator\" [attr.data-position]=\"dropPosition()\"></div>\n  }\n</div>\n\n<!-- Children -->\n@if (hasChildren() && expanded()) {\n  <div class=\"axp-tree-list-item-children\">\n    @for (child of node().children; track child.id; let isLast = $last) {\n      <axp-tree-list-item\n        [node]=\"child\"\n        [level]=\"level() + 1\"\n        [config]=\"config()\"\n        [look]=\"look()\"\n        [expanded]=\"expandedNodes().has(child.id)\"\n        [selected]=\"selectedNodes().has(child.id)\"\n        [dragState]=\"dragState()\"\n        [expandedNodes]=\"expandedNodes()\"\n        [selectedNodes]=\"selectedNodes()\"\n        [isLastChild]=\"isLast\"\n        (dragStart)=\"dragStart.emit($event)\"\n        (dragOver)=\"dragOver.emit($event)\"\n        (dragEnd)=\"dragEnd.emit()\"\n        (dragCancel)=\"dragCancel.emit()\"\n        (nodeClick)=\"nodeClick.emit($event)\"\n        (toggle)=\"toggle.emit($event)\"\n        (select)=\"select.emit($event)\"\n      />\n    }\n  </div>\n}\n", styles: [".axp-tree-list-item{display:block;position:relative}.axp-tree-list-item-wrapper{position:relative;transition:all .2s ease}.axp-tree-list-item-content{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;min-height:2.5rem;cursor:pointer;transition:all .15s ease;border-radius:4px;position:relative;z-index:1}.axp-tree-list-item-content:hover{background-color:var(--ax-color-hover)}.axp-tree-list-item-content:active{background-color:var(--ax-color-active)}.axp-tree-list-item-selected .axp-tree-list-item-content{background-color:var(--ax-color-primary-alpha-10);color:var(--ax-color-primary);font-weight:500}.axp-tree-list-item-disabled .axp-tree-list-item-content{opacity:.5;cursor:not-allowed;pointer-events:none}.axp-tree-list-item-toggle{display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;padding:0;border:none;background:none;cursor:pointer;color:var(--ax-color-text-secondary);transition:all .15s ease;border-radius:2px;flex-shrink:0}.axp-tree-list-item-toggle:hover{background-color:var(--ax-color-hover);color:var(--ax-color-text-primary)}.axp-tree-list-item-toggle i{font-size:.75rem;transition:transform .2s ease}.axp-tree-list-item-toggle-expanded i{transform:rotate(0)}.axp-tree-list-item-toggle-placeholder{width:1.25rem;height:1.25rem;flex-shrink:0}.axp-tree-list-item-drag-handle{display:flex;align-items:center;justify-content:center;width:1rem;color:var(--ax-color-text-tertiary);cursor:grab;flex-shrink:0;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.axp-tree-list-item-drag-handle:active{cursor:grabbing}.axp-tree-list-item-drag-handle i{font-size:.975rem;pointer-events:none}.axp-tree-list-item-dragging{opacity:.5}.axp-tree-list-item-dragging .axp-tree-list-item-content{background-color:var(--ax-color-primary-alpha-10);border:2px dashed var(--ax-color-primary)}.axp-tree-list-item-drag-over .axp-tree-list-item-content{background-color:var(--ax-color-primary-alpha-5)}.axp-tree-list-item-checkbox{display:flex;align-items:center;flex-shrink:0}.axp-tree-list-item-checkbox input[type=checkbox]{width:1rem;height:1rem;cursor:pointer}.axp-tree-list-item-icon{display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;color:var(--ax-color-text-secondary);flex-shrink:0}.axp-tree-list-item-icon i{font-size:1.125rem}.axp-tree-list-item-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:.125rem}.axp-tree-list-item-title{display:flex;align-items:center;gap:1.5rem;font-size:.875rem;line-height:1.25rem;font-weight:500}.axp-tree-list-item-title span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.axp-tree-list-item-badge{display:inline-flex;align-items:center;padding:.125rem .5rem;font-size:.75rem;font-weight:600;border-radius:9999px;flex-shrink:0}.axp-tree-list-item-badge[data-color=primary]{background-color:var(--ax-color-primary-alpha-10);color:var(--ax-color-primary)}.axp-tree-list-item-badge[data-color=secondary]{background-color:var(--ax-color-secondary-alpha-10);color:var(--ax-color-secondary)}.axp-tree-list-item-badge[data-color=success]{background-color:var(--ax-color-success-alpha-10);color:var(--ax-color-success)}.axp-tree-list-item-badge[data-color=danger]{background-color:var(--ax-color-danger-alpha-10);color:var(--ax-color-danger)}.axp-tree-list-item-badge[data-color=warning]{background-color:var(--ax-color-warning-alpha-10);color:var(--ax-color-warning)}.axp-tree-list-item-badge[data-color=info]{background-color:var(--ax-color-info-alpha-10);color:var(--ax-color-info)}.axp-tree-list-item-description{font-size:.75rem;line-height:1rem;color:var(--ax-color-text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.axp-tree-list-item-actions{display:flex;align-items:center;gap:.25rem;margin-left:auto;flex-shrink:0;opacity:0;transition:opacity .15s ease}.axp-tree-list-item-content:hover .axp-tree-list-item-actions{opacity:1}.axp-tree-list-item-action{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;border:none;background:none;cursor:pointer;border-radius:4px;transition:all .15s ease;color:var(--ax-color-text-secondary)}.axp-tree-list-item-action:hover{background-color:var(--ax-color-hover);color:var(--ax-color-text-primary)}.axp-tree-list-item-action[data-color=danger]:hover{background-color:var(--ax-color-danger-alpha-10);color:var(--ax-color-danger)}.axp-tree-list-item-action[data-color=success]:hover{background-color:var(--ax-color-success-alpha-10);color:var(--ax-color-success)}.axp-tree-list-item-action[data-color=warning]:hover{background-color:var(--ax-color-warning-alpha-10);color:var(--ax-color-warning)}.axp-tree-list-item-action[data-color=primary]:hover{background-color:var(--ax-color-primary-alpha-10);color:var(--ax-color-primary)}.axp-tree-list-item-action-disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.axp-tree-list-item-action i{font-size:.975rem}.axp-tree-list-item-children{overflow:hidden;animation:expandCollapse .2s ease}.axp-tree-list-item-drop-indicator{position:absolute;left:0;right:0;height:2px;background-color:var(--ax-color-primary);pointer-events:none;z-index:10}.axp-tree-list-item-drop-indicator:before{content:\"\";position:absolute;left:0;top:50%;transform:translateY(-50%);width:6px;height:6px;border-radius:50%;background-color:var(--ax-color-primary)}.axp-tree-list-item-drop-indicator[data-position=before]{top:-1px}.axp-tree-list-item-drop-indicator[data-position=after]{bottom:-1px}.axp-tree-list-item-drop-indicator[data-position=inside]{display:none}.axp-tree-list-item-drop-top{border-top:2px solid var(--ax-color-primary)}.axp-tree-list-item-drop-bottom{border-bottom:2px solid var(--ax-color-primary)}.axp-tree-list-item-drop-middle.axp-tree-list-item-can-drop .axp-tree-list-item-content{background-color:var(--ax-color-primary-alpha-10);border:2px dashed var(--ax-color-primary)}.axp-tree-list-lines .axp-tree-list-item,.axp-tree-list-item-children{position:relative}.axp-tree-list-item-lines{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0}.axp-tree-list-item-line-vertical{position:absolute;top:0;bottom:0;width:1px;background-color:var(--ax-color-border, #d0d0d0)}.axp-tree-list-item-line-vertical.last-child{bottom:50%}.axp-tree-list-item-line-horizontal{position:absolute;top:50%;width:12px;height:1px;background-color:var(--ax-color-border, #d0d0d0)}@keyframes expandCollapse{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}\n"] }]
+        }] });
+
+/**
+ * Helper functions for tree-list node operations
+ */
+class AXPTreeListHelper {
+    /**
+     * Find a node by its ID in the tree
+     */
+    static findNodeById(nodes, nodeId) {
+        for (const node of nodes) {
+            if (node.id === nodeId) {
+                return node;
+            }
+            if (node.children) {
+                const found = this.findNodeById(node.children, nodeId);
+                if (found) {
+                    return found;
+                }
+            }
+        }
+        return null;
+    }
+    /**
+     * Find a node's parent and index in the tree
+     */
+    static findNodeParentAndIndex(nodes, nodeId, parent = null) {
+        for (let i = 0; i < nodes.length; i++) {
+            const node = nodes[i];
+            if (node.id === nodeId) {
+                return { parent, index: i };
+            }
+            if (node.children) {
+                const result = this.findNodeParentAndIndex(node.children, nodeId, node);
+                if (result.parent !== null || result.index !== -1) {
+                    return result;
+                }
+            }
+        }
+        return { parent: null, index: -1 };
+    }
+    /**
+     * Remove a node from the tree by its ID
+     */
+    static removeNode(nodes, nodeId) {
+        return nodes
+            .filter((node) => node.id !== nodeId)
+            .map((node) => ({
+            ...node,
+            children: node.children ? this.removeNode(node.children, nodeId) : undefined,
+        }));
+    }
+    /**
+     * Check if a node is a descendant of another node
+     */
+    static isDescendant(parent, child) {
+        if (parent.id === child.id) {
+            return true;
+        }
+        if (!parent.children) {
+            return false;
+        }
+        for (const node of parent.children) {
+            if (this.isDescendant(node, child)) {
+                return true;
+            }
+        }
+        return false;
+    }
+    /**
+     * Get all node IDs from the tree
+     */
+    static getAllNodeIds(nodes) {
+        const ids = [];
+        this.traverseNodes(nodes, (node) => ids.push(node.id));
+        return ids;
+    }
+    /**
+     * Traverse all nodes in the tree and apply a callback
+     */
+    static traverseNodes(nodes, callback) {
+        for (const node of nodes) {
+            callback(node);
+            if (node.children) {
+                this.traverseNodes(node.children, callback);
+            }
+        }
+    }
+    /**
+     * Validate if drop is allowed
+     */
+    static validateDrop(dragNode, dropNode, position, config) {
+        // Check if dropping to root is allowed
+        if (dropNode === null && !config.allowDragToRoot) {
+            return false;
+        }
+        // Check if target node accepts drops
+        if (dropNode && dropNode.droppable === false) {
+            return false;
+        }
+        // Check custom validation
+        if (config.validateDrop && !config.validateDrop(dragNode, dropNode, position)) {
+            return false;
+        }
+        return true;
+    }
+    /**
+     * Perform the drop operation on the nodes array
+     */
+    static performDrop(nodes, dragNode, dropNode, position) {
+        const { parent: oldParent, index: oldIndex } = this.findNodeParentAndIndex(nodes, dragNode.id);
+        // Remove from old position
+        const newNodes = this.removeNode(nodes, dragNode.id);
+        // Insert at new position
+        let newParent = null;
+        let newIndex = 0;
+        if (dropNode === null) {
+            // Drop at root level
+            newIndex = position === 'before' ? 0 : newNodes.length;
+            newNodes.splice(newIndex, 0, dragNode);
+        }
+        else if (position === 'inside') {
+            // Drop inside target node - need to find the node in newNodes tree
+            const targetNode = this.findNodeById(newNodes, dropNode.id);
+            if (targetNode) {
+                newParent = targetNode;
+                if (!targetNode.children) {
+                    targetNode.children = [];
+                }
+                newIndex = targetNode.children.length;
+                targetNode.children.push(dragNode);
+            }
+        }
+        else {
+            // Drop before or after target node
+            const { parent, index } = this.findNodeParentAndIndex(newNodes, dropNode.id);
+            newParent = parent;
+            newIndex = position === 'before' ? index : index + 1;
+            if (parent) {
+                parent.children.splice(newIndex, 0, dragNode);
+            }
+            else {
+                newNodes.splice(newIndex, 0, dragNode);
+            }
+        }
+        return {
+            newNodes,
+            oldParent,
+            newParent,
+            oldIndex,
+            newIndex,
+        };
+    }
+}
+
+class AXPTreeListComponent {
+    constructor() {
+        // Inputs
+        this.nodes = model([], ...(ngDevMode ? [{ debugName: "nodes" }] : []));
+        this.config = input({}, ...(ngDevMode ? [{ debugName: "config" }] : []));
+        this.look = input('default', ...(ngDevMode ? [{ debugName: "look" }] : []));
+        // Outputs
+        this.nodeDrop = output();
+        this.nodeClick = output();
+        this.nodeExpand = output();
+        this.nodeSelect = output();
+        // Internal state
+        this.dragState = signal({
+            isDragging: false,
+            dragNode: null,
+            dropTarget: null,
+            dropPosition: null,
+            canDrop: false,
+        }, ...(ngDevMode ? [{ debugName: "dragState" }] : []));
+        this.expandedNodes = signal(new Set(), ...(ngDevMode ? [{ debugName: "expandedNodes" }] : []));
+        this.selectedNodes = signal(new Set(), ...(ngDevMode ? [{ debugName: "selectedNodes" }] : []));
+        // Computed
+        this.mergedConfig = computed(() => ({
+            dragEnabled: this.config().dragEnabled ?? false,
+            showDragIndicator: this.config().showDragIndicator ?? true,
+            expandable: this.config().expandable ?? true,
+            showLines: this.config().showLines ?? false,
+            defaultExpanded: this.config().defaultExpanded ?? false,
+            multiSelect: this.config().multiSelect ?? false,
+            showCheckboxes: this.config().showCheckboxes ?? false,
+            showIcons: this.config().showIcons ?? true,
+            showActions: this.config().showActions ?? true,
+            showDescription: this.config().showDescription ?? true,
+            showBadges: this.config().showBadges ?? true,
+            indentSize: this.config().indentSize ?? 24,
+            animationDuration: this.config().animationDuration ?? 200,
+            allowDragToRoot: this.config().allowDragToRoot ?? true,
+            allowDragBetweenLevels: this.config().allowDragBetweenLevels ?? true,
+            validateDrop: this.config().validateDrop ?? (() => true),
+        }), ...(ngDevMode ? [{ debugName: "mergedConfig" }] : []));
+        // Initialize expanded state based on defaultExpanded
+        effect(() => {
+            const config = this.mergedConfig();
+            if (config.defaultExpanded) {
+                this.expandAll();
+            }
+        });
+    }
+    // Public API methods
+    expandAll() {
+        const allIds = AXPTreeListHelper.getAllNodeIds(this.nodes());
+        this.expandedNodes.set(new Set(allIds));
+    }
+    collapseAll() {
+        this.expandedNodes.set(new Set());
+    }
+    expandNode(nodeId) {
+        this.expandedNodes.update((set) => {
+            const newSet = new Set(set);
+            newSet.add(nodeId);
+            return newSet;
+        });
+    }
+    collapseNode(nodeId) {
+        this.expandedNodes.update((set) => {
+            const newSet = new Set(set);
+            newSet.delete(nodeId);
+            return newSet;
+        });
+    }
+    toggleNode(nodeId) {
+        if (this.expandedNodes().has(nodeId)) {
+            this.collapseNode(nodeId);
+        }
+        else {
+            this.expandNode(nodeId);
+        }
+    }
+    selectNode(nodeId, multiSelect = false) {
+        this.selectedNodes.update((set) => {
+            const newSet = multiSelect ? new Set(set) : new Set();
+            if (newSet.has(nodeId)) {
+                newSet.delete(nodeId);
+            }
+            else {
+                newSet.add(nodeId);
+            }
+            return newSet;
+        });
+    }
+    clearSelection() {
+        this.selectedNodes.set(new Set());
+    }
+    getSelectedNodes() {
+        const selected = [];
+        const selectedIds = this.selectedNodes();
+        AXPTreeListHelper.traverseNodes(this.nodes(), (node) => {
+            if (selectedIds.has(node.id)) {
+                selected.push(node);
+            }
+        });
+        return selected;
+    }
+    // Drag and drop handlers
+    onDragStart(node) {
+        const config = this.mergedConfig();
+        if (!config.dragEnabled || node.disabled || node.draggable === false) {
+            return;
+        }
+        this.dragState.set({
+            isDragging: true,
+            dragNode: node,
+            dropTarget: null,
+            dropPosition: null,
+            canDrop: false,
+        });
+    }
+    onDragOver(node, position) {
+        const state = this.dragState();
+        if (!state.isDragging || !state.dragNode) {
+            return;
+        }
+        // Prevent dropping on itself or its descendants
+        if (node && AXPTreeListHelper.isDescendant(state.dragNode, node)) {
+            this.dragState.update((s) => ({ ...s, dropTarget: null, dropPosition: null, canDrop: false }));
+            return;
+        }
+        // Validate drop
+        const canDrop = AXPTreeListHelper.validateDrop(state.dragNode, node, position, this.mergedConfig());
+        this.dragState.update((s) => ({
+            ...s,
+            dropTarget: node,
+            dropPosition: position,
+            canDrop,
+        }));
+    }
+    onDragEnd() {
+        const state = this.dragState();
+        if (state.isDragging && state.dragNode && state.canDrop && state.dropTarget !== undefined && state.dropPosition) {
+            this.performDrop(state.dragNode, state.dropTarget, state.dropPosition);
+        }
+        this.dragState.set({
+            isDragging: false,
+            dragNode: null,
+            dropTarget: null,
+            dropPosition: null,
+            canDrop: false,
+        });
+    }
+    onDragCancel() {
+        this.dragState.set({
+            isDragging: false,
+            dragNode: null,
+            dropTarget: null,
+            dropPosition: null,
+            canDrop: false,
         });
     }
+    // Node event handlers
+    onNodeClick(node, event) {
+        this.nodeClick.emit({ node, event });
+    }
+    onNodeToggle(node) {
+        this.toggleNode(node.id);
+        this.nodeExpand.emit({ node, expanded: this.expandedNodes().has(node.id) });
+    }
+    onNodeSelect(node) {
+        const multiSelect = this.mergedConfig().multiSelect;
+        this.selectNode(node.id, multiSelect);
+        this.nodeSelect.emit({
+            node,
+            selected: this.selectedNodes().has(node.id),
+            selectedNodes: this.getSelectedNodes(),
+        });
+    }
+    // Helper methods
+    performDrop(dragNode, dropNode, position) {
+        const result = AXPTreeListHelper.performDrop(this.nodes(), dragNode, dropNode, position);
+        // Auto-expand the target node if dropping inside
+        if (position === 'inside' && dropNode) {
+            this.expandNode(dropNode.id);
+        }
+        this.nodes.set([...result.newNodes]);
+        this.nodeDrop.emit({
+            dragNode,
+            dropNode,
+            position,
+            oldParent: result.oldParent,
+            newParent: result.newParent,
+            oldIndex: result.oldIndex,
+            newIndex: result.newIndex,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPTreeListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: AXPTreeListComponent, isStandalone: true, selector: "axp-tree-list", inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodes: "nodesChange", nodeDrop: "nodeDrop", nodeClick: "nodeClick", nodeExpand: "nodeExpand", nodeSelect: "nodeSelect" }, host: { properties: { "class.axp-tree-list-dragging": "dragState().isDragging", "attr.data-look": "look()" }, classAttribute: "axp-tree-list" }, ngImport: i0, template: "<div class=\"axp-tree-list-container\">\n  @for (node of nodes(); track node.id; let isLast = $last) {\n    <axp-tree-list-item\n      [node]=\"node\"\n      [level]=\"0\"\n      [config]=\"mergedConfig()\"\n      [look]=\"look()\"\n      [expanded]=\"expandedNodes().has(node.id)\"\n      [selected]=\"selectedNodes().has(node.id)\"\n      [dragState]=\"dragState()\"\n      [isLastChild]=\"isLast\"\n      (dragStart)=\"onDragStart($event)\"\n      (dragOver)=\"onDragOver($event.node, $event.position)\"\n      (dragEnd)=\"onDragEnd()\"\n      (dragCancel)=\"onDragCancel()\"\n      (nodeClick)=\"onNodeClick($event, $any($event))\"\n      (toggle)=\"onNodeToggle($event)\"\n      (select)=\"onNodeSelect($event)\"\n      [expandedNodes]=\"expandedNodes()\"\n      [selectedNodes]=\"selectedNodes()\"\n    />\n  }\n\n  @if (nodes().length === 0) {\n    <div class=\"axp-tree-list-empty\">\n      <i class=\"fa-light fa-folder-open\"></i>\n      <span>No items to display</span>\n    </div>\n  }\n</div>\n", styles: [".axp-tree-list{display:block;width:100%}.axp-tree-list-container{display:flex;flex-direction:column;gap:2px}.axp-tree-list-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem;color:var(--ax-color-text-secondary);gap:.5rem}.axp-tree-list-empty i{font-size:2rem;opacity:.5}.axp-tree-list-empty span{font-size:.875rem}.axp-tree-list-dragging{-webkit-user-select:none;-moz-user-select:-moz-none;user-select:none;cursor:grabbing}.axp-tree-list[data-look=folder] .axp-tree-list-item-content{border-radius:0;border-left:3px solid transparent}.axp-tree-list[data-look=folder] .axp-tree-list-item-content:hover{border-left-color:var(--ax-color-primary)}.axp-tree-list[data-look=folder] .axp-tree-list-item-selected .axp-tree-list-item-content{border-left-color:var(--ax-color-primary);background-color:var(--ax-color-primary-alpha-10)}.axp-tree-list[data-look=card] .axp-tree-list-item-content{border:1px solid var(--ax-color-border);border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.05)}.axp-tree-list[data-look=card] .axp-tree-list-item-content:hover{box-shadow:0 2px 6px rgba(0,0,0,.1)}.axp-tree-list[data-look=card] .axp-tree-list-item-selected .axp-tree-list-item-content{border-color:var(--ax-color-primary);box-shadow:0 0 0 2px var(--ax-color-primary-alpha-20)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AXPTreeListItemComponent, selector: "axp-tree-list-item", inputs: ["node", "level", "config", "look", "expanded", "selected", "dragState", "expandedNodes", "selectedNodes", "isLastChild"], outputs: ["dragStart", "dragOver", "dragEnd", "dragCancel", "nodeClick", "toggle", "select"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPTreeListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-tree-list', standalone: true, imports: [CommonModule, AXPTreeListItemComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'axp-tree-list',
+                        '[class.axp-tree-list-dragging]': 'dragState().isDragging',
+                        '[attr.data-look]': 'look()',
+                    }, template: "<div class=\"axp-tree-list-container\">\n  @for (node of nodes(); track node.id; let isLast = $last) {\n    <axp-tree-list-item\n      [node]=\"node\"\n      [level]=\"0\"\n      [config]=\"mergedConfig()\"\n      [look]=\"look()\"\n      [expanded]=\"expandedNodes().has(node.id)\"\n      [selected]=\"selectedNodes().has(node.id)\"\n      [dragState]=\"dragState()\"\n      [isLastChild]=\"isLast\"\n      (dragStart)=\"onDragStart($event)\"\n      (dragOver)=\"onDragOver($event.node, $event.position)\"\n      (dragEnd)=\"onDragEnd()\"\n      (dragCancel)=\"onDragCancel()\"\n      (nodeClick)=\"onNodeClick($event, $any($event))\"\n      (toggle)=\"onNodeToggle($event)\"\n      (select)=\"onNodeSelect($event)\"\n      [expandedNodes]=\"expandedNodes()\"\n      [selectedNodes]=\"selectedNodes()\"\n    />\n  }\n\n  @if (nodes().length === 0) {\n    <div class=\"axp-tree-list-empty\">\n      <i class=\"fa-light fa-folder-open\"></i>\n      <span>No items to display</span>\n    </div>\n  }\n</div>\n", styles: [".axp-tree-list{display:block;width:100%}.axp-tree-list-container{display:flex;flex-direction:column;gap:2px}.axp-tree-list-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem;color:var(--ax-color-text-secondary);gap:.5rem}.axp-tree-list-empty i{font-size:2rem;opacity:.5}.axp-tree-list-empty span{font-size:.875rem}.axp-tree-list-dragging{-webkit-user-select:none;-moz-user-select:-moz-none;user-select:none;cursor:grabbing}.axp-tree-list[data-look=folder] .axp-tree-list-item-content{border-radius:0;border-left:3px solid transparent}.axp-tree-list[data-look=folder] .axp-tree-list-item-content:hover{border-left-color:var(--ax-color-primary)}.axp-tree-list[data-look=folder] .axp-tree-list-item-selected .axp-tree-list-item-content{border-left-color:var(--ax-color-primary);background-color:var(--ax-color-primary-alpha-10)}.axp-tree-list[data-look=card] .axp-tree-list-item-content{border:1px solid var(--ax-color-border);border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.05)}.axp-tree-list[data-look=card] .axp-tree-list-item-content:hover{box-shadow:0 2px 6px rgba(0,0,0,.1)}.axp-tree-list[data-look=card] .axp-tree-list-item-selected .axp-tree-list-item-content{border-color:var(--ax-color-primary);box-shadow:0 0 0 2px var(--ax-color-primary-alpha-20)}\n"] }]
+        }], ctorParameters: () => [] });
+
+const AXP_USER_AVATAR_PROVIDER = new InjectionToken('AXP_USER_AVATAR_PROVIDER');
 
 class AXPUserAvatarService {
     constructor() {
-        this.provider = inject(AXP_USER_AVATAR_PROVIDER);
+        this.provider = inject(AXP_USER_AVATAR_PROVIDER, { optional: true });
         // Cache configuration
         this.cacheExpiryTime = 5 * 60 * 1000; // 5 minutes in milliseconds
         this.refreshInterval = 3 * 60 * 1000; // 3 minutes in milliseconds
@@ -4538,7 +5126,7 @@ class AXPUserAvatarService {
      */
     async fetchAndUpdateCache(userId) {
         try {
-            const data = await this.provider.provide(userId);
+            const data = await this.provider?.provide(userId);
             if (!data) {
                 throw new Error(`User info not found for ${userId}`);
             }
@@ -4590,13 +5178,14 @@ class AXPUserAvatarComponent {
         this.isOnline = computed(() => this.userInfo()?.status === 'online', ...(ngDevMode ? [{ debugName: "isOnline" }] : []));
         this.avatarText = computed(() => this.getInitials(), ...(ngDevMode ? [{ debugName: "avatarText" }] : []));
         this.avatarColor = computed(() => this.pickColor(this.avatarText()), ...(ngDevMode ? [{ debugName: "avatarColor" }] : []));
-        this.hasPicture = signal(true, ...(ngDevMode ? [{ debugName: "hasPicture" }] : []));
+        this.hasAvatar = computed(() => !isNil(this.src()) && !isEmpty(this.src()), ...(ngDevMode ? [{ debugName: "hasAvatar" }] : []));
+        this.isAvatarLoaded = signal(false, ...(ngDevMode ? [{ debugName: "isAvatarLoaded" }] : []));
     }
     onImageError(event) {
-        this.hasPicture.set(false);
+        this.isAvatarLoaded.set(false);
     }
     onImageLoad(event) {
-        this.hasPicture.set(true);
+        this.isAvatarLoaded.set(true);
     }
     ngOnInit() {
         this.loadUserData();
@@ -4630,12 +5219,6 @@ class AXPUserAvatarComponent {
         if (this.userInfo()?.avatarUrl) {
             this.src.set(this.userInfo()?.avatarUrl);
         }
-        else {
-            // Generate a placeholder - you could use an external service like UI Avatars
-            // or implement your own logic
-            const initials = this.getInitials();
-            this.src.set(`https://avatar.iran.liara.run/username?username=${encodeURIComponent(initials)}`);
-        }
     }
     /**
      * Get initials from first and last name
@@ -4659,11 +5242,11 @@ class AXPUserAvatarComponent {
         return colors[idx];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPUserAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: AXPUserAvatarComponent, isStandalone: true, selector: "axp-user-avatar", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, userId: { classPropertyName: "userId", publicName: "userId", isSignal: true, isRequired: false, transformFunction: null } }, providers: [], ngImport: i0, template: "<ax-avatar #avatar [size]=\"size()\" class=\"ax-cursor-pointer\">\n  @if(hasPicture()){\n  <ax-image (onError)=\"onImageError($event)\" (onLoad)=\"onImageLoad($event)\" [src]=\"src()\"></ax-image>\n  }@else{\n  <ax-text class=\"ax-{{ avatarColor() }}-lightest \">\n    <small class=\"ax-text-xs ax-font-semibold\">{{ avatarText() }}</small>\n  </ax-text>\n  }\n</ax-avatar>\n\n<!--\n\nax-primary-lightest\nax-warning-lightest\nax-success-lightest\nax-danger-lightest\nax-secondary-lightest\nax-accent1-lightest\nax-accent2-lightest\nax-accent3-lightest\n\n-->\n", styles: [""], dependencies: [{ kind: "ngmodule", type: AXAvatarModule }, { kind: "component", type: i1$4.AXAvatarComponent, selector: "ax-avatar", inputs: ["color", "size", "shape", "look"], outputs: ["sizeChange"] }, { 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: AXImageModule }, { kind: "component", type: i3$5.AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "ngmodule", type: AXBadgeModule }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: AXPUserAvatarComponent, isStandalone: true, selector: "axp-user-avatar", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, userId: { classPropertyName: "userId", publicName: "userId", isSignal: true, isRequired: false, transformFunction: null } }, providers: [], ngImport: i0, template: "<ax-avatar #avatar [size]=\"size()\" class=\"ax-cursor-pointer\">\n  @if(hasAvatar()){\n  <ax-image (onError)=\"onImageError($event)\" (onLoad)=\"onImageLoad($event)\" [src]=\"src()\"></ax-image>\n  }@else{\n  <ax-text class=\"ax-{{ avatarColor() }}-lightest \">\n    <small class=\"ax-text-xs ax-font-semibold\">{{ avatarText() }}</small>\n  </ax-text>\n  }\n</ax-avatar>\n\n<!--\n\nax-primary-lightest\nax-warning-lightest\nax-success-lightest\nax-danger-lightest\nax-secondary-lightest\nax-accent1-lightest\nax-accent2-lightest\nax-accent3-lightest\n\n-->", styles: [""], dependencies: [{ kind: "ngmodule", type: AXAvatarModule }, { kind: "component", type: i1$4.AXAvatarComponent, selector: "ax-avatar", inputs: ["color", "size", "shape", "look"], outputs: ["sizeChange"] }, { 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: AXImageModule }, { kind: "component", type: i3$5.AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "ngmodule", type: AXBadgeModule }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPUserAvatarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'axp-user-avatar', imports: [AXAvatarModule, AXDecoratorModule, AXImageModule, AXBadgeModule], encapsulation: ViewEncapsulation.None, providers: [], template: "<ax-avatar #avatar [size]=\"size()\" class=\"ax-cursor-pointer\">\n  @if(hasPicture()){\n  <ax-image (onError)=\"onImageError($event)\" (onLoad)=\"onImageLoad($event)\" [src]=\"src()\"></ax-image>\n  }@else{\n  <ax-text class=\"ax-{{ avatarColor() }}-lightest \">\n    <small class=\"ax-text-xs ax-font-semibold\">{{ avatarText() }}</small>\n  </ax-text>\n  }\n</ax-avatar>\n\n<!--\n\nax-primary-lightest\nax-warning-lightest\nax-success-lightest\nax-danger-lightest\nax-secondary-lightest\nax-accent1-lightest\nax-accent2-lightest\nax-accent3-lightest\n\n-->\n" }]
+            args: [{ selector: 'axp-user-avatar', imports: [AXAvatarModule, AXDecoratorModule, AXImageModule, AXBadgeModule], encapsulation: ViewEncapsulation.None, providers: [], template: "<ax-avatar #avatar [size]=\"size()\" class=\"ax-cursor-pointer\">\n  @if(hasAvatar()){\n  <ax-image (onError)=\"onImageError($event)\" (onLoad)=\"onImageLoad($event)\" [src]=\"src()\"></ax-image>\n  }@else{\n  <ax-text class=\"ax-{{ avatarColor() }}-lightest \">\n    <small class=\"ax-text-xs ax-font-semibold\">{{ avatarText() }}</small>\n  </ax-text>\n  }\n</ax-avatar>\n\n<!--\n\nax-primary-lightest\nax-warning-lightest\nax-success-lightest\nax-danger-lightest\nax-secondary-lightest\nax-accent1-lightest\nax-accent2-lightest\nax-accent3-lightest\n\n-->" }]
         }] });
 
 class AXPQueryViewsComponent {
@@ -4764,5 +5347,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXPActivityLogComponent, AXPCategoryTreeComponent, AXPCompareViewComponent, AXPComponentSlot, AXPComponentSlotDirective, AXPComponentSlotModule, AXPComponentSlotRegistryService, AXPDataSelectorComponent, AXPDataSelectorService, AXPDynamicFormDesignerComponent, AXPExtraPropertiesComponent, AXPExtraPropertiesSchemaComponent, AXPExtraPropertiesValuesComponent, AXPImageEditorPopupComponent, AXPImageEditorService, AXPMenuBadgeHelper, AXPQueryColumnsComponent, AXPQueryFiltersComponent, AXPQuerySortsComponent, AXPQueryViewsComponent, AXPStateMessageComponent, AXPTaskBadgeDirective, AXPTaskBadgeProvider, AXPTaskBadgeService, AXPTemplateViewerComponent, AXPTemplateViewerService, AXPThemeLayoutActionsComponent, AXPThemeLayoutBlockComponent, AXPThemeLayoutContainerComponent, AXPThemeLayoutEndSideComponent, AXPThemeLayoutFooterComponent, AXPThemeLayoutHeaderComponent, AXPThemeLayoutListComponent, AXPThemeLayoutListItemComponent, AXPThemeLayoutListItemsGroupComponent, AXPThemeLayoutPageHeaderComponent, AXPThemeLayoutPagePrimaryActionsComponent, AXPThemeLayoutPageSecondaryActionsComponent, AXPThemeLayoutSectionComponent, AXPThemeLayoutStartSideComponent, AXPThemeLayoutToolbarComponent, AXPUserAvatarComponent, AXPUserAvatarService, AXPWidgetItemComponent, AXPWidgetPropertyViewerComponent, AXPWidgetPropertyViewerPopupComponent, AXPWidgetPropertyViewerService, AXP_EXTRA_PROPERTY_TYPES, AXP_TASK_BADGE_PROVIDERS, AXP_USER_AVATAR_PROVIDER, convertDesignerFieldToFormField, convertDesignerGroupToFormGroup, convertDesignerStateToFormDefinition };
+export { AXPActivityLogComponent, AXPCategoryTreeComponent, AXPColorPalettePickerComponent, AXPCompareViewComponent, AXPComponentSlot, AXPComponentSlotDirective, AXPComponentSlotModule, AXPComponentSlotRegistryService, AXPDataSelectorComponent, AXPDataSelectorService, AXPDynamicFormDesignerComponent, AXPExtraPropertiesComponent, AXPExtraPropertiesSchemaComponent, AXPExtraPropertiesValuesComponent, AXPImageEditorPopupComponent, AXPImageEditorService, AXPMenuBadgeHelper, AXPQueryColumnsComponent, AXPQueryFiltersComponent, AXPQuerySortsComponent, AXPQueryViewsComponent, AXPStateMessageComponent, AXPTaskBadgeDirective, AXPTaskBadgeProvider, AXPTaskBadgeService, AXPTemplateViewerComponent, AXPTemplateViewerService, AXPThemeLayoutActionsComponent, AXPThemeLayoutBlockComponent, AXPThemeLayoutContainerComponent, AXPThemeLayoutEndSideComponent, AXPThemeLayoutFooterComponent, AXPThemeLayoutHeaderComponent, AXPThemeLayoutListComponent, AXPThemeLayoutListItemComponent, AXPThemeLayoutListItemsGroupComponent, AXPThemeLayoutPageHeaderComponent, AXPThemeLayoutPagePrimaryActionsComponent, AXPThemeLayoutPageSecondaryActionsComponent, AXPThemeLayoutSectionComponent, AXPThemeLayoutStartSideComponent, AXPThemeLayoutToolbarComponent, AXPTreeListComponent, AXPTreeListHelper, AXPTreeListItemComponent, AXPUserAvatarComponent, AXPUserAvatarService, AXPWidgetItemComponent, AXPWidgetPropertyViewerComponent, AXPWidgetPropertyViewerPopupComponent, AXPWidgetPropertyViewerService, AXP_EXTRA_PROPERTY_TYPES, AXP_TASK_BADGE_PROVIDERS, AXP_USER_AVATAR_PROVIDER, convertDesignerFieldToFormField, convertDesignerGroupToFormGroup, convertDesignerStateToFormDefinition };
 //# sourceMappingURL=acorex-platform-layout-components.mjs.map