@ng-nest/ui 17.0.0 → 17.0.2

package/fesm2022/ng-nest-ui-list.mjs

@@ -1,30 +1,24 @@
 import { Subject } from 'rxjs';
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, ViewEncapsulation, ChangeDetectionStrategy, HostBinding, InjectionToken, Directive, Optional, Inject, SkipSelf, ViewChild, ViewChildren, HostListener, NgModule } from '@angular/core';
+import { EventEmitter, Component, Input, Output, ChangeDetectorRef, inject, ElementRef, ViewEncapsulation, ChangeDetectionStrategy, HostBinding, InjectionToken, Directive, AfterRenderPhase, afterRender, ViewChild, ViewChildren, HostListener, NgModule } from '@angular/core';
 import { __decorate } from 'tslib';
-import * as i1 from '@ng-nest/ui/core';
-import { XDataConvert, XInputNumber, XInputBoolean, XWithConfig, XIsChange, XClearClass, XIsUndefined, XIsEmpty, XResize, XSetData, XIsNull } from '@ng-nest/ui/core';
-import { XControlValueAccessor, XValueAccessor, XBaseFormModule } from '@ng-nest/ui/base-form';
-import * as i4$1 from '@angular/cdk/drag-drop';
+import { XDataConvert, XInputNumber, XInputBoolean, XWithConfig, XConfigService, XIsChange, XClearClass, XIsUndefined, XIsEmpty, XResize, XSetData, XIsNull } from '@ng-nest/ui/core';
+import { XControlValueAccessor, XValueAccessor } from '@ng-nest/ui/base-form';
+import * as i2 from '@angular/cdk/drag-drop';
 import { moveItemInArray, CdkDropList, DragDropModule } from '@angular/cdk/drag-drop';
-import * as i2 from '@angular/common';
+import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i3 from '@ng-nest/ui/icon';
-import { XIconModule } from '@ng-nest/ui/icon';
-import * as i4 from '@ng-nest/ui/keyword';
-import { XKeywordModule } from '@ng-nest/ui/keyword';
-import { ActiveDescendantKeyManager, A11yModule } from '@angular/cdk/a11y';
+import { XIconComponent } from '@ng-nest/ui/icon';
+import { XKeywordDirective } from '@ng-nest/ui/keyword';
+import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
 import { ENTER } from '@angular/cdk/keycodes';
 import { map, takeUntil, debounceTime } from 'rxjs/operators';
-import { coerceBooleanProperty, coerceArray } from '@angular/cdk/coercion';
-import * as i2$1 from '@ng-nest/ui/i18n';
-import { XI18nModule } from '@ng-nest/ui/i18n';
-import * as i6 from '@ng-nest/ui/empty';
-import { XEmptyModule } from '@ng-nest/ui/empty';
-import * as i7 from '@ng-nest/ui/outlet';
-import { XOutletModule } from '@ng-nest/ui/outlet';
-import * as i8 from '@angular/cdk/scrolling';
+import { XI18nService } from '@ng-nest/ui/i18n';
+import * as i3 from '@angular/cdk/scrolling';
 import { ScrollingModule } from '@angular/cdk/scrolling';
+import { coerceBooleanProperty, coerceArray } from '@angular/cdk/coercion';
+import { XOutletDirective } from '@ng-nest/ui/outlet';
+import { XEmptyComponent } from '@ng-nest/ui/empty';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 /**
@@ -289,13 +283,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImpor
             }] } });
 
 class XListOptionComponent extends XListOptionProperty {
-    constructor(elementRef, cdr, configService) {
-        super();
-        this.elementRef = elementRef;
-        this.cdr = cdr;
-        this.configService = configService;
+    constructor() {
+        super(...arguments);
         this.role = 'option';
         this.classMap = {};
+        this.cdr = inject(ChangeDetectorRef);
+        this.elementRef = inject(ElementRef);
+        this.configService = inject(XConfigService);
     }
     ngOnInit() {
         if (this.node)
@@ -324,13 +318,13 @@ class XListOptionComponent extends XListOptionProperty {
     getLabel() {
         return this.label;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XListOptionComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.XConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: XListOptionComponent, selector: "x-list-option", host: { properties: { "attr.role": "this.role" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\r\n  class=\"x-list-option\"\r\n  [ngClass]=\"classMap\"\r\n  [class.x-selected]=\"selected\"\r\n  [class.x-disabled]=\"disabled\"\r\n  [class.x-open-portal]=\"node?.openPortal\"\r\n  [class.x-active]=\"active\"\r\n  [class.x-list-icon]=\"icon\"\r\n  [class.x-list-divided]=\"divided\"\r\n>\r\n  <div class=\"x-list-option-content\">\r\n    <ng-container *ngIf=\"!nodeTpl\">\r\n      <x-icon [type]=\"icon\" *ngIf=\"icon\"></x-icon>\r\n      <span x-keyword [text]=\"keywordText\" [caseSensitive]=\"caseSensitive\">{{ label }}</span>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"nodeTpl\">\r\n      <ng-template *ngTemplateOutlet=\"nodeTpl; context: { $node: node }\"></ng-template>\r\n    </ng-container>\r\n  </div>\r\n  <x-icon class=\"x-list-leaf\" type=\"fto-chevron-right\" *ngIf=\"leaf\"></x-icon>\r\n  <x-icon class=\"x-list-checked\" type=\"fto-check\" *ngIf=\"checked && !leaf && selected\"></x-icon>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";x-list-option{display:block}.x-list-option{border-radius:var(--x-border-radius);display:flex;align-items:center;justify-content:space-between;border:.0625rem dashed transparent;transition:border-color var(--x-animation-duration-base),background-color var(--x-animation-duration-base),color var(--x-animation-duration-base)}.x-list-option-content{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none;-webkit-user-select:none;user-select:none;display:inline-block}.x-list-option:not(:first-child){margin-top:var(--x-border-width)}.x-list-option:hover:not(.x-disabled),.x-list-option.x-active:not(.x-disabled){background-color:var(--x-background-a200)}.x-list-option.x-list-divided{margin-top:.8125rem}.x-list-option.x-list-divided:before{content:\" \";position:absolute;top:0;left:0;width:100%;margin-top:-.5rem;border-top:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-list-option.x-selected:not(.x-disabled){background-color:var(--x-background-a400);color:var(--x-primary)}.x-list-option.x-selected:not(.x-disabled)>x-icon{color:var(--x-primary)}.x-list-option.x-disabled{color:var(--x-text-500);cursor:not-allowed}.x-list-option.x-disabled:hover{background-color:inherit}.x-list-option.x-disabled>span x-icon{color:var(--x-text-500)}.x-list-option-big{padding:0 var(--x-padding-big);height:var(--x-height-big);line-height:var(--x-height-big)}.x-list-option-large{padding:0 var(--x-padding-large);height:var(--x-height-large);line-height:var(--x-height-large)}.x-list-option-medium{padding:0 var(--x-padding-medium);height:var(--x-height-medium);line-height:var(--x-height-medium)}.x-list-option-small{padding:0 var(--x-padding-small);height:var(--x-height-small);line-height:var(--x-height-small)}.x-list-option-mini{padding:0 var(--x-padding-mini);height:var(--x-height-mini);line-height:var(--x-height-mini)}body>x-list-option{display:block}body>x-list-option.cdk-drag-preview .x-list-option{border-radius:var(--x-border-radius);display:flex;align-items:center;justify-content:space-between;border:.0625rem dashed transparent;border-color:var(--x-border);color:var(--x-text-400);background-color:var(--x-background-a100);opacity:.9}body>x-list-option.cdk-drag-animating{transition:transform var(--x-animation-duration-base) cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.XIconComponent, selector: "x-icon" }, { kind: "directive", type: i4.XKeywordDirective, selector: "[x-keyword]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XListOptionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: XListOptionComponent, isStandalone: true, selector: "x-list-option", host: { properties: { "attr.role": "this.role" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\r\n  class=\"x-list-option\"\r\n  [ngClass]=\"classMap\"\r\n  [class.x-selected]=\"selected\"\r\n  [class.x-disabled]=\"disabled\"\r\n  [class.x-open-portal]=\"node?.openPortal\"\r\n  [class.x-active]=\"active\"\r\n  [class.x-list-icon]=\"icon\"\r\n  [class.x-list-divided]=\"divided\"\r\n>\r\n  <div class=\"x-list-option-content\">\r\n    <ng-container *ngIf=\"!nodeTpl\">\r\n      <x-icon [type]=\"icon\" *ngIf=\"icon\"></x-icon>\r\n      <span x-keyword [text]=\"keywordText\" [caseSensitive]=\"caseSensitive\">{{ label }}</span>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"nodeTpl\">\r\n      <ng-template *ngTemplateOutlet=\"nodeTpl; context: { $node: node }\"></ng-template>\r\n    </ng-container>\r\n  </div>\r\n  <x-icon class=\"x-list-leaf\" type=\"fto-chevron-right\" *ngIf=\"leaf\"></x-icon>\r\n  <x-icon class=\"x-list-checked\" type=\"fto-check\" *ngIf=\"checked && !leaf && selected\"></x-icon>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";x-list-option{display:block}.x-list-option{border-radius:var(--x-border-radius);display:flex;align-items:center;justify-content:space-between;border:.0625rem dashed transparent;transition:border-color var(--x-animation-duration-base),background-color var(--x-animation-duration-base),color var(--x-animation-duration-base)}.x-list-option-content{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none;-webkit-user-select:none;user-select:none;display:inline-block}.x-list-option:not(:first-child){margin-top:var(--x-border-width)}.x-list-option:hover:not(.x-disabled),.x-list-option.x-active:not(.x-disabled){background-color:var(--x-background-a200)}.x-list-option.x-list-divided{margin-top:.8125rem}.x-list-option.x-list-divided:before{content:\" \";position:absolute;top:0;left:0;width:100%;margin-top:-.5rem;border-top:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-list-option.x-selected:not(.x-disabled){background-color:var(--x-background-a400);color:var(--x-primary)}.x-list-option.x-selected:not(.x-disabled)>x-icon{color:var(--x-primary)}.x-list-option.x-disabled{color:var(--x-text-500);cursor:not-allowed}.x-list-option.x-disabled:hover{background-color:inherit}.x-list-option.x-disabled>span x-icon{color:var(--x-text-500)}.x-list-option-big{padding:0 var(--x-padding-big);height:var(--x-height-big);line-height:var(--x-height-big)}.x-list-option-large{padding:0 var(--x-padding-large);height:var(--x-height-large);line-height:var(--x-height-large)}.x-list-option-medium{padding:0 var(--x-padding-medium);height:var(--x-height-medium);line-height:var(--x-height-medium)}.x-list-option-small{padding:0 var(--x-padding-small);height:var(--x-height-small);line-height:var(--x-height-small)}.x-list-option-mini{padding:0 var(--x-padding-mini);height:var(--x-height-mini);line-height:var(--x-height-mini)}body>x-list-option{display:block}body>x-list-option.cdk-drag-preview .x-list-option{border-radius:var(--x-border-radius);display:flex;align-items:center;justify-content:space-between;border:.0625rem dashed transparent;border-color:var(--x-border);color:var(--x-text-400);background-color:var(--x-background-a100);opacity:.9}body>x-list-option.cdk-drag-animating{transition:transform var(--x-animation-duration-base) cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: XIconComponent, selector: "x-icon" }, { kind: "directive", type: XKeywordDirective, selector: "[x-keyword]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XListOptionComponent, decorators: [{
             type: Component,
-            args: [{ selector: `${XListOptionPrefix}`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"x-list-option\"\r\n  [ngClass]=\"classMap\"\r\n  [class.x-selected]=\"selected\"\r\n  [class.x-disabled]=\"disabled\"\r\n  [class.x-open-portal]=\"node?.openPortal\"\r\n  [class.x-active]=\"active\"\r\n  [class.x-list-icon]=\"icon\"\r\n  [class.x-list-divided]=\"divided\"\r\n>\r\n  <div class=\"x-list-option-content\">\r\n    <ng-container *ngIf=\"!nodeTpl\">\r\n      <x-icon [type]=\"icon\" *ngIf=\"icon\"></x-icon>\r\n      <span x-keyword [text]=\"keywordText\" [caseSensitive]=\"caseSensitive\">{{ label }}</span>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"nodeTpl\">\r\n      <ng-template *ngTemplateOutlet=\"nodeTpl; context: { $node: node }\"></ng-template>\r\n    </ng-container>\r\n  </div>\r\n  <x-icon class=\"x-list-leaf\" type=\"fto-chevron-right\" *ngIf=\"leaf\"></x-icon>\r\n  <x-icon class=\"x-list-checked\" type=\"fto-check\" *ngIf=\"checked && !leaf && selected\"></x-icon>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";x-list-option{display:block}.x-list-option{border-radius:var(--x-border-radius);display:flex;align-items:center;justify-content:space-between;border:.0625rem dashed transparent;transition:border-color var(--x-animation-duration-base),background-color var(--x-animation-duration-base),color var(--x-animation-duration-base)}.x-list-option-content{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none;-webkit-user-select:none;user-select:none;display:inline-block}.x-list-option:not(:first-child){margin-top:var(--x-border-width)}.x-list-option:hover:not(.x-disabled),.x-list-option.x-active:not(.x-disabled){background-color:var(--x-background-a200)}.x-list-option.x-list-divided{margin-top:.8125rem}.x-list-option.x-list-divided:before{content:\" \";position:absolute;top:0;left:0;width:100%;margin-top:-.5rem;border-top:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-list-option.x-selected:not(.x-disabled){background-color:var(--x-background-a400);color:var(--x-primary)}.x-list-option.x-selected:not(.x-disabled)>x-icon{color:var(--x-primary)}.x-list-option.x-disabled{color:var(--x-text-500);cursor:not-allowed}.x-list-option.x-disabled:hover{background-color:inherit}.x-list-option.x-disabled>span x-icon{color:var(--x-text-500)}.x-list-option-big{padding:0 var(--x-padding-big);height:var(--x-height-big);line-height:var(--x-height-big)}.x-list-option-large{padding:0 var(--x-padding-large);height:var(--x-height-large);line-height:var(--x-height-large)}.x-list-option-medium{padding:0 var(--x-padding-medium);height:var(--x-height-medium);line-height:var(--x-height-medium)}.x-list-option-small{padding:0 var(--x-padding-small);height:var(--x-height-small);line-height:var(--x-height-small)}.x-list-option-mini{padding:0 var(--x-padding-mini);height:var(--x-height-mini);line-height:var(--x-height-mini)}body>x-list-option{display:block}body>x-list-option.cdk-drag-preview .x-list-option{border-radius:var(--x-border-radius);display:flex;align-items:center;justify-content:space-between;border:.0625rem dashed transparent;border-color:var(--x-border);color:var(--x-text-400);background-color:var(--x-background-a100);opacity:.9}body>x-list-option.cdk-drag-animating{transition:transform var(--x-animation-duration-base) cubic-bezier(0,0,.2,1)}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.XConfigService }], propDecorators: { role: [{
+            args: [{ selector: `${XListOptionPrefix}`, standalone: true, imports: [CommonModule, XIconComponent, XKeywordDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"x-list-option\"\r\n  [ngClass]=\"classMap\"\r\n  [class.x-selected]=\"selected\"\r\n  [class.x-disabled]=\"disabled\"\r\n  [class.x-open-portal]=\"node?.openPortal\"\r\n  [class.x-active]=\"active\"\r\n  [class.x-list-icon]=\"icon\"\r\n  [class.x-list-divided]=\"divided\"\r\n>\r\n  <div class=\"x-list-option-content\">\r\n    <ng-container *ngIf=\"!nodeTpl\">\r\n      <x-icon [type]=\"icon\" *ngIf=\"icon\"></x-icon>\r\n      <span x-keyword [text]=\"keywordText\" [caseSensitive]=\"caseSensitive\">{{ label }}</span>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"nodeTpl\">\r\n      <ng-template *ngTemplateOutlet=\"nodeTpl; context: { $node: node }\"></ng-template>\r\n    </ng-container>\r\n  </div>\r\n  <x-icon class=\"x-list-leaf\" type=\"fto-chevron-right\" *ngIf=\"leaf\"></x-icon>\r\n  <x-icon class=\"x-list-checked\" type=\"fto-check\" *ngIf=\"checked && !leaf && selected\"></x-icon>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";x-list-option{display:block}.x-list-option{border-radius:var(--x-border-radius);display:flex;align-items:center;justify-content:space-between;border:.0625rem dashed transparent;transition:border-color var(--x-animation-duration-base),background-color var(--x-animation-duration-base),color var(--x-animation-duration-base)}.x-list-option-content{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none;-webkit-user-select:none;user-select:none;display:inline-block}.x-list-option:not(:first-child){margin-top:var(--x-border-width)}.x-list-option:hover:not(.x-disabled),.x-list-option.x-active:not(.x-disabled){background-color:var(--x-background-a200)}.x-list-option.x-list-divided{margin-top:.8125rem}.x-list-option.x-list-divided:before{content:\" \";position:absolute;top:0;left:0;width:100%;margin-top:-.5rem;border-top:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-list-option.x-selected:not(.x-disabled){background-color:var(--x-background-a400);color:var(--x-primary)}.x-list-option.x-selected:not(.x-disabled)>x-icon{color:var(--x-primary)}.x-list-option.x-disabled{color:var(--x-text-500);cursor:not-allowed}.x-list-option.x-disabled:hover{background-color:inherit}.x-list-option.x-disabled>span x-icon{color:var(--x-text-500)}.x-list-option-big{padding:0 var(--x-padding-big);height:var(--x-height-big);line-height:var(--x-height-big)}.x-list-option-large{padding:0 var(--x-padding-large);height:var(--x-height-large);line-height:var(--x-height-large)}.x-list-option-medium{padding:0 var(--x-padding-medium);height:var(--x-height-medium);line-height:var(--x-height-medium)}.x-list-option-small{padding:0 var(--x-padding-small);height:var(--x-height-small);line-height:var(--x-height-small)}.x-list-option-mini{padding:0 var(--x-padding-mini);height:var(--x-height-mini);line-height:var(--x-height-mini)}body>x-list-option{display:block}body>x-list-option.cdk-drag-preview .x-list-option{border-radius:var(--x-border-radius);display:flex;align-items:center;justify-content:space-between;border:.0625rem dashed transparent;border-color:var(--x-border);color:var(--x-text-400);background-color:var(--x-background-a100);opacity:.9}body>x-list-option.cdk-drag-animating{transition:transform var(--x-animation-duration-base) cubic-bezier(0,0,.2,1)}\n"] }]
+        }], propDecorators: { role: [{
                 type: HostBinding,
                 args: ['attr.role']
             }] } });
@@ -366,12 +360,13 @@ class XListDropGroup {
         this.dropLists.clear();
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XListDropGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.2", type: XListDropGroup, selector: "[xListDropGroup]", inputs: { disabled: ["xListDropGroupDisabled", "disabled"] }, providers: [{ provide: X_LIST_DROP_GROUP, useExisting: XListDropGroup }], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.2", type: XListDropGroup, isStandalone: true, selector: "[xListDropGroup]", inputs: { disabled: ["xListDropGroupDisabled", "disabled"] }, providers: [{ provide: X_LIST_DROP_GROUP, useExisting: XListDropGroup }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XListDropGroup, decorators: [{
             type: Directive,
             args: [{
                     selector: '[xListDropGroup]',
+                    standalone: true,
                     providers: [{ provide: X_LIST_DROP_GROUP, useExisting: XListDropGroup }]
                 }]
         }], propDecorators: { disabled: [{
@@ -421,14 +416,8 @@ class XListComponent extends XListProperty {
         this.setKeyManager();
         this.cdr.detectChanges();
     }
-    constructor(renderer, cdr, elementRef, configService, i18n, group) {
+    constructor() {
         super();
-        this.renderer = renderer;
-        this.cdr = cdr;
-        this.elementRef = elementRef;
-        this.configService = configService;
-        this.i18n = i18n;
-        this.group = group;
         this.nodes = [];
         this.selectedNodes = [];
         this.isSelectAll = false;
@@ -446,6 +435,15 @@ class XListComponent extends XListProperty {
             big: 36
         };
         this._unSubject = new Subject();
+        this.cdr = inject(ChangeDetectorRef);
+        this.i18n = inject(XI18nService);
+        this.group = inject(X_LIST_DROP_GROUP, { optional: true, skipSelf: true });
+        this.configService = inject(XConfigService);
+        afterRender(() => {
+            if (this.virtualScroll && this.scrollHeight) {
+                this.virtualBody?.checkViewportSize();
+            }
+        }, { phase: AfterRenderPhase.MixedReadWrite });
     }
     ngOnInit() {
         this.i18n.localeChange
@@ -704,20 +702,23 @@ class XListComponent extends XListProperty {
         if (num > -1)
             this.nodes[num].active = false;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XListComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.XConfigService }, { token: i2$1.XI18nService }, { token: X_LIST_DROP_GROUP, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: XListComponent, selector: "x-list", host: { listeners: { "keydown": "keydown($event)" }, properties: { "attr.role": "this.role", "attr.tabindex": "this.tabindex" } }, providers: [XValueAccessor(XListComponent)], viewQueries: [{ propertyName: "headerRef", first: true, predicate: ["headerRef"], descendants: true }, { propertyName: "footerRef", first: true, predicate: ["footerRef"], descendants: true }, { propertyName: "selectAllRef", first: true, predicate: ["selectAllRef"], descendants: true }, { propertyName: "loadMoreRef", first: true, predicate: ["loadMoreRef"], descendants: true }, { propertyName: "virtualBody", first: true, predicate: ["virtualBody"], descendants: true }, { propertyName: "dropList", first: true, predicate: CdkDropList, descendants: true }, { propertyName: "listItems", first: true, predicate: ["listItems"], descendants: true }, { propertyName: "options", predicate: XListOptionComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"x-list\">\r\n  <ng-container *ngIf=\"header\">\r\n    <div #headerRef class=\"x-list-header\" *xOutlet=\"header\">{{ header }}</div>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"selectAll && multiple === 0\">\r\n    <div #selectAllRef class=\"x-list-select-all\">\r\n      <x-list-option\r\n        [size]=\"size\"\r\n        [label]=\"getSelectAllText\"\r\n        [checked]=\"true\"\r\n        [selected]=\"isSelectAll\"\r\n        (click)=\"onSelectAllNodes()\"\r\n      ></x-list-option>\r\n    </div>\r\n  </ng-container>\r\n  <cdk-virtual-scroll-viewport\r\n    #virtualBody\r\n    *ngIf=\"virtualScroll; else contentTpl\"\r\n    [itemSize]=\"getItemSize\"\r\n    [minBufferPx]=\"minBufferPx\"\r\n    [maxBufferPx]=\"maxBufferPx\"\r\n    class=\"x-list-content\"\r\n    [style.height.px]=\"getVirtualScrollHeight\"\r\n    [hidden]=\"isEmpty\"\r\n  >\r\n    <x-list-option\r\n      *cdkVirtualFor=\"let node of nodes; trackBy: trackByNode\"\r\n      [node]=\"node\"\r\n      [checked]=\"checked\"\r\n      [nodeTpl]=\"nodeTpl\"\r\n      [selected]=\"node.selected\"\r\n      [disabled]=\"node.disabled\"\r\n      [openPortal]=\"node.openPortal\"\r\n      [(active)]=\"node.active\"\r\n      [icon]=\"node.icon\"\r\n      [label]=\"node.label\"\r\n      [leaf]=\"node.leaf\"\r\n      [size]=\"size\"\r\n      [keywordText]=\"keywordText\"\r\n      [caseSensitive]=\"caseSensitive\"\r\n      (click)=\"onNodeClick($event, node)\"\r\n      (mouseenter)=\"onMouseenter($event, node)\"\r\n      (mouseleave)=\"onMouseleave($event, node)\"\r\n    ></x-list-option>\r\n  </cdk-virtual-scroll-viewport>\r\n\r\n  <ng-container *ngIf=\"loadMore && !isEmpty\">\r\n    <div #loadMoreRef class=\"x-list-load-more\">\r\n      <x-list-option [size]=\"size\" [nodeTpl]=\"loadMoreTpl\" (click)=\"onLoadMore()\"></x-list-option>\r\n    </div>\r\n    <ng-template #loadMoreTpl>\r\n      <x-icon *ngIf=\"icon && iconSpin\" [type]=\"icon\" [spin]=\"iconSpin\"></x-icon>\r\n      {{ icon && iconSpin ? getLoadingMoreText : getLoadMoreText }}\r\n    </ng-template>\r\n  </ng-container>\r\n  <x-empty *ngIf=\"isEmpty\"></x-empty>\r\n  <ng-container *ngIf=\"footer\">\r\n    <div #footerRef class=\"x-list-footer\" *xOutlet=\"footer\">{{ footer }}</div>\r\n  </ng-container>\r\n</div>\r\n\r\n<ng-template #contentTpl>\r\n  <div\r\n    class=\"x-list-content\"\r\n    cdkDropList\r\n    (cdkDropListDropped)=\"dropCdk($event)\"\r\n    [cdkDropListDisabled]=\"!drag\"\r\n    [hidden]=\"isEmpty\"\r\n    [cdkDropListData]=\"nodes\"\r\n    [cdkDropListEnterPredicate]=\"predicate\"\r\n  >\r\n    <x-list-option\r\n      *ngFor=\"let node of nodes; trackBy: trackByNode\"\r\n      cdkDrag\r\n      [cdkDragDisabled]=\"node.disabled\"\r\n      [node]=\"node\"\r\n      [checked]=\"checked\"\r\n      [nodeTpl]=\"nodeTpl\"\r\n      [selected]=\"node.selected\"\r\n      [disabled]=\"node.disabled\"\r\n      [(active)]=\"node.active\"\r\n      [openPortal]=\"node.openPortal\"\r\n      [icon]=\"node.icon\"\r\n      [label]=\"node.label\"\r\n      [leaf]=\"node.leaf\"\r\n      [size]=\"size\"\r\n      [keywordText]=\"keywordText\"\r\n      [caseSensitive]=\"caseSensitive\"\r\n      (click)=\"onNodeClick($event, node)\"\r\n      (mouseenter)=\"onMouseenter($event, node)\"\r\n      (mouseleave)=\"onMouseleave($event, node)\"\r\n    ></x-list-option>\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";x-list{width:100%}x-list:focus{outline:none}.x-list{margin:0;padding:0;width:100%}.x-list:focus{outline:none}.x-list-select-all{cursor:pointer;font-weight:700}.x-list-load-more,.x-list-content{cursor:pointer}.x-list-content.cdk-drop-list-dragging x-list-option.cdk-drag-placeholder .x-list-option{border-color:var(--x-primary);color:var(--x-primary);background-color:var(--x-background);opacity:.8}.x-list-content.cdk-drop-list-dragging x-list-option:not(.cdk-drag-placeholder){transition:transform var(--x-animation-duration-base) cubic-bezier(0,0,.2,1)}.x-list-header,.x-list-footer{padding:0 .4rem;height:calc(var(--x-font-size) + 1rem);line-height:calc(var(--x-font-size) + 1rem);font-weight:700}.x-list-leaf,.x-list-checked{right:0;margin-left:.4rem;color:var(--x-text-400)}.x-list-icon>span x-icon{color:var(--x-text-300);margin-right:.25rem}.x-list>x-empty{margin:1rem;display:block}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i3.XIconComponent, selector: "x-icon" }, { kind: "component", type: i6.XEmptyComponent, selector: "x-empty" }, { kind: "directive", type: i7.XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { kind: "directive", type: i8.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i8.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i8.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: XListOptionComponent, selector: "x-list-option" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: XListComponent, isStandalone: true, selector: "x-list", host: { listeners: { "keydown": "keydown($event)" }, properties: { "attr.role": "this.role", "attr.tabindex": "this.tabindex" } }, providers: [XValueAccessor(XListComponent)], viewQueries: [{ propertyName: "headerRef", first: true, predicate: ["headerRef"], descendants: true }, { propertyName: "footerRef", first: true, predicate: ["footerRef"], descendants: true }, { propertyName: "selectAllRef", first: true, predicate: ["selectAllRef"], descendants: true }, { propertyName: "loadMoreRef", first: true, predicate: ["loadMoreRef"], descendants: true }, { propertyName: "virtualBody", first: true, predicate: ["virtualBody"], descendants: true }, { propertyName: "dropList", first: true, predicate: CdkDropList, descendants: true }, { propertyName: "listItems", first: true, predicate: ["listItems"], descendants: true }, { propertyName: "options", predicate: XListOptionComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"x-list\">\r\n  <ng-container *ngIf=\"header\">\r\n    <div #headerRef class=\"x-list-header\" *xOutlet=\"header\">{{ header }}</div>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"selectAll && multiple === 0\">\r\n    <div #selectAllRef class=\"x-list-select-all\">\r\n      <x-list-option\r\n        [size]=\"size\"\r\n        [label]=\"getSelectAllText\"\r\n        [checked]=\"true\"\r\n        [selected]=\"isSelectAll\"\r\n        (click)=\"onSelectAllNodes()\"\r\n      ></x-list-option>\r\n    </div>\r\n  </ng-container>\r\n  <cdk-virtual-scroll-viewport\r\n    #virtualBody\r\n    *ngIf=\"virtualScroll; else contentTpl\"\r\n    [itemSize]=\"getItemSize\"\r\n    [minBufferPx]=\"minBufferPx\"\r\n    [maxBufferPx]=\"maxBufferPx\"\r\n    class=\"x-list-content\"\r\n    [style.height.px]=\"getVirtualScrollHeight\"\r\n    [hidden]=\"isEmpty\"\r\n  >\r\n    <x-list-option\r\n      *cdkVirtualFor=\"let node of nodes; trackBy: trackByNode\"\r\n      [node]=\"node\"\r\n      [checked]=\"checked\"\r\n      [nodeTpl]=\"nodeTpl\"\r\n      [selected]=\"node.selected\"\r\n      [disabled]=\"node.disabled\"\r\n      [openPortal]=\"node.openPortal\"\r\n      [(active)]=\"node.active\"\r\n      [icon]=\"node.icon\"\r\n      [label]=\"node.label\"\r\n      [leaf]=\"node.leaf\"\r\n      [size]=\"size\"\r\n      [keywordText]=\"keywordText\"\r\n      [caseSensitive]=\"caseSensitive\"\r\n      (click)=\"onNodeClick($event, node)\"\r\n      (mouseenter)=\"onMouseenter($event, node)\"\r\n      (mouseleave)=\"onMouseleave($event, node)\"\r\n    ></x-list-option>\r\n  </cdk-virtual-scroll-viewport>\r\n\r\n  <ng-container *ngIf=\"loadMore && !isEmpty\">\r\n    <div #loadMoreRef class=\"x-list-load-more\">\r\n      <x-list-option [size]=\"size\" [nodeTpl]=\"loadMoreTpl\" (click)=\"onLoadMore()\"></x-list-option>\r\n    </div>\r\n    <ng-template #loadMoreTpl>\r\n      <x-icon *ngIf=\"icon && iconSpin\" [type]=\"icon\" [spin]=\"iconSpin\"></x-icon>\r\n      {{ icon && iconSpin ? getLoadingMoreText : getLoadMoreText }}\r\n    </ng-template>\r\n  </ng-container>\r\n  <x-empty *ngIf=\"isEmpty\"></x-empty>\r\n  <ng-container *ngIf=\"footer\">\r\n    <div #footerRef class=\"x-list-footer\" *xOutlet=\"footer\">{{ footer }}</div>\r\n  </ng-container>\r\n</div>\r\n\r\n<ng-template #contentTpl>\r\n  <div\r\n    class=\"x-list-content\"\r\n    cdkDropList\r\n    (cdkDropListDropped)=\"dropCdk($event)\"\r\n    [cdkDropListDisabled]=\"!drag\"\r\n    [hidden]=\"isEmpty\"\r\n    [cdkDropListData]=\"nodes\"\r\n    [cdkDropListEnterPredicate]=\"predicate\"\r\n  >\r\n    <x-list-option\r\n      *ngFor=\"let node of nodes; trackBy: trackByNode\"\r\n      cdkDrag\r\n      [cdkDragDisabled]=\"node.disabled\"\r\n      [node]=\"node\"\r\n      [checked]=\"checked\"\r\n      [nodeTpl]=\"nodeTpl\"\r\n      [selected]=\"node.selected\"\r\n      [disabled]=\"node.disabled\"\r\n      [(active)]=\"node.active\"\r\n      [openPortal]=\"node.openPortal\"\r\n      [icon]=\"node.icon\"\r\n      [label]=\"node.label\"\r\n      [leaf]=\"node.leaf\"\r\n      [size]=\"size\"\r\n      [keywordText]=\"keywordText\"\r\n      [caseSensitive]=\"caseSensitive\"\r\n      (click)=\"onNodeClick($event, node)\"\r\n      (mouseenter)=\"onMouseenter($event, node)\"\r\n      (mouseleave)=\"onMouseleave($event, node)\"\r\n    ></x-list-option>\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";x-list{width:100%}x-list:focus{outline:none}.x-list{margin:0;padding:0;width:100%}.x-list:focus{outline:none}.x-list-select-all{cursor:pointer;font-weight:700}.x-list-load-more,.x-list-content{cursor:pointer}.x-list-content.cdk-drop-list-dragging x-list-option.cdk-drag-placeholder .x-list-option{border-color:var(--x-primary);color:var(--x-primary);background-color:var(--x-background);opacity:.8}.x-list-content.cdk-drop-list-dragging x-list-option:not(.cdk-drag-placeholder){transition:transform var(--x-animation-duration-base) cubic-bezier(0,0,.2,1)}.x-list-header,.x-list-footer{padding:0 .4rem;height:calc(var(--x-font-size) + 1rem);line-height:calc(var(--x-font-size) + 1rem);font-weight:700}.x-list-leaf,.x-list-checked{right:0;margin-left:.4rem;color:var(--x-text-400)}.x-list-icon>span x-icon{color:var(--x-text-300);margin-right:.25rem}.x-list>x-empty{margin:1rem;display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i3.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: XIconComponent, selector: "x-icon" }, { kind: "component", type: XEmptyComponent, selector: "x-empty" }, { kind: "component", type: XListOptionComponent, selector: "x-list-option" }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XListComponent, decorators: [{
             type: Component,
-            args: [{ selector: `${XListPrefix}`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [XValueAccessor(XListComponent)], template: "<div class=\"x-list\">\r\n  <ng-container *ngIf=\"header\">\r\n    <div #headerRef class=\"x-list-header\" *xOutlet=\"header\">{{ header }}</div>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"selectAll && multiple === 0\">\r\n    <div #selectAllRef class=\"x-list-select-all\">\r\n      <x-list-option\r\n        [size]=\"size\"\r\n        [label]=\"getSelectAllText\"\r\n        [checked]=\"true\"\r\n        [selected]=\"isSelectAll\"\r\n        (click)=\"onSelectAllNodes()\"\r\n      ></x-list-option>\r\n    </div>\r\n  </ng-container>\r\n  <cdk-virtual-scroll-viewport\r\n    #virtualBody\r\n    *ngIf=\"virtualScroll; else contentTpl\"\r\n    [itemSize]=\"getItemSize\"\r\n    [minBufferPx]=\"minBufferPx\"\r\n    [maxBufferPx]=\"maxBufferPx\"\r\n    class=\"x-list-content\"\r\n    [style.height.px]=\"getVirtualScrollHeight\"\r\n    [hidden]=\"isEmpty\"\r\n  >\r\n    <x-list-option\r\n      *cdkVirtualFor=\"let node of nodes; trackBy: trackByNode\"\r\n      [node]=\"node\"\r\n      [checked]=\"checked\"\r\n      [nodeTpl]=\"nodeTpl\"\r\n      [selected]=\"node.selected\"\r\n      [disabled]=\"node.disabled\"\r\n      [openPortal]=\"node.openPortal\"\r\n      [(active)]=\"node.active\"\r\n      [icon]=\"node.icon\"\r\n      [label]=\"node.label\"\r\n      [leaf]=\"node.leaf\"\r\n      [size]=\"size\"\r\n      [keywordText]=\"keywordText\"\r\n      [caseSensitive]=\"caseSensitive\"\r\n      (click)=\"onNodeClick($event, node)\"\r\n      (mouseenter)=\"onMouseenter($event, node)\"\r\n      (mouseleave)=\"onMouseleave($event, node)\"\r\n    ></x-list-option>\r\n  </cdk-virtual-scroll-viewport>\r\n\r\n  <ng-container *ngIf=\"loadMore && !isEmpty\">\r\n    <div #loadMoreRef class=\"x-list-load-more\">\r\n      <x-list-option [size]=\"size\" [nodeTpl]=\"loadMoreTpl\" (click)=\"onLoadMore()\"></x-list-option>\r\n    </div>\r\n    <ng-template #loadMoreTpl>\r\n      <x-icon *ngIf=\"icon && iconSpin\" [type]=\"icon\" [spin]=\"iconSpin\"></x-icon>\r\n      {{ icon && iconSpin ? getLoadingMoreText : getLoadMoreText }}\r\n    </ng-template>\r\n  </ng-container>\r\n  <x-empty *ngIf=\"isEmpty\"></x-empty>\r\n  <ng-container *ngIf=\"footer\">\r\n    <div #footerRef class=\"x-list-footer\" *xOutlet=\"footer\">{{ footer }}</div>\r\n  </ng-container>\r\n</div>\r\n\r\n<ng-template #contentTpl>\r\n  <div\r\n    class=\"x-list-content\"\r\n    cdkDropList\r\n    (cdkDropListDropped)=\"dropCdk($event)\"\r\n    [cdkDropListDisabled]=\"!drag\"\r\n    [hidden]=\"isEmpty\"\r\n    [cdkDropListData]=\"nodes\"\r\n    [cdkDropListEnterPredicate]=\"predicate\"\r\n  >\r\n    <x-list-option\r\n      *ngFor=\"let node of nodes; trackBy: trackByNode\"\r\n      cdkDrag\r\n      [cdkDragDisabled]=\"node.disabled\"\r\n      [node]=\"node\"\r\n      [checked]=\"checked\"\r\n      [nodeTpl]=\"nodeTpl\"\r\n      [selected]=\"node.selected\"\r\n      [disabled]=\"node.disabled\"\r\n      [(active)]=\"node.active\"\r\n      [openPortal]=\"node.openPortal\"\r\n      [icon]=\"node.icon\"\r\n      [label]=\"node.label\"\r\n      [leaf]=\"node.leaf\"\r\n      [size]=\"size\"\r\n      [keywordText]=\"keywordText\"\r\n      [caseSensitive]=\"caseSensitive\"\r\n      (click)=\"onNodeClick($event, node)\"\r\n      (mouseenter)=\"onMouseenter($event, node)\"\r\n      (mouseleave)=\"onMouseleave($event, node)\"\r\n    ></x-list-option>\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";x-list{width:100%}x-list:focus{outline:none}.x-list{margin:0;padding:0;width:100%}.x-list:focus{outline:none}.x-list-select-all{cursor:pointer;font-weight:700}.x-list-load-more,.x-list-content{cursor:pointer}.x-list-content.cdk-drop-list-dragging x-list-option.cdk-drag-placeholder .x-list-option{border-color:var(--x-primary);color:var(--x-primary);background-color:var(--x-background);opacity:.8}.x-list-content.cdk-drop-list-dragging x-list-option:not(.cdk-drag-placeholder){transition:transform var(--x-animation-duration-base) cubic-bezier(0,0,.2,1)}.x-list-header,.x-list-footer{padding:0 .4rem;height:calc(var(--x-font-size) + 1rem);line-height:calc(var(--x-font-size) + 1rem);font-weight:700}.x-list-leaf,.x-list-checked{right:0;margin-left:.4rem;color:var(--x-text-400)}.x-list-icon>span x-icon{color:var(--x-text-300);margin-right:.25rem}.x-list>x-empty{margin:1rem;display:block}\n"] }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1.XConfigService }, { type: i2$1.XI18nService }, { type: XListDropGroup, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [X_LIST_DROP_GROUP]
-                }, {
-                    type: SkipSelf
-                }] }], propDecorators: { headerRef: [{
+            args: [{ selector: `${XListPrefix}`, standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        DragDropModule,
+                        ScrollingModule,
+                        XIconComponent,
+                        XEmptyComponent,
+                        XListOptionComponent,
+                        XOutletDirective
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [XValueAccessor(XListComponent)], template: "<div class=\"x-list\">\r\n  <ng-container *ngIf=\"header\">\r\n    <div #headerRef class=\"x-list-header\" *xOutlet=\"header\">{{ header }}</div>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"selectAll && multiple === 0\">\r\n    <div #selectAllRef class=\"x-list-select-all\">\r\n      <x-list-option\r\n        [size]=\"size\"\r\n        [label]=\"getSelectAllText\"\r\n        [checked]=\"true\"\r\n        [selected]=\"isSelectAll\"\r\n        (click)=\"onSelectAllNodes()\"\r\n      ></x-list-option>\r\n    </div>\r\n  </ng-container>\r\n  <cdk-virtual-scroll-viewport\r\n    #virtualBody\r\n    *ngIf=\"virtualScroll; else contentTpl\"\r\n    [itemSize]=\"getItemSize\"\r\n    [minBufferPx]=\"minBufferPx\"\r\n    [maxBufferPx]=\"maxBufferPx\"\r\n    class=\"x-list-content\"\r\n    [style.height.px]=\"getVirtualScrollHeight\"\r\n    [hidden]=\"isEmpty\"\r\n  >\r\n    <x-list-option\r\n      *cdkVirtualFor=\"let node of nodes; trackBy: trackByNode\"\r\n      [node]=\"node\"\r\n      [checked]=\"checked\"\r\n      [nodeTpl]=\"nodeTpl\"\r\n      [selected]=\"node.selected\"\r\n      [disabled]=\"node.disabled\"\r\n      [openPortal]=\"node.openPortal\"\r\n      [(active)]=\"node.active\"\r\n      [icon]=\"node.icon\"\r\n      [label]=\"node.label\"\r\n      [leaf]=\"node.leaf\"\r\n      [size]=\"size\"\r\n      [keywordText]=\"keywordText\"\r\n      [caseSensitive]=\"caseSensitive\"\r\n      (click)=\"onNodeClick($event, node)\"\r\n      (mouseenter)=\"onMouseenter($event, node)\"\r\n      (mouseleave)=\"onMouseleave($event, node)\"\r\n    ></x-list-option>\r\n  </cdk-virtual-scroll-viewport>\r\n\r\n  <ng-container *ngIf=\"loadMore && !isEmpty\">\r\n    <div #loadMoreRef class=\"x-list-load-more\">\r\n      <x-list-option [size]=\"size\" [nodeTpl]=\"loadMoreTpl\" (click)=\"onLoadMore()\"></x-list-option>\r\n    </div>\r\n    <ng-template #loadMoreTpl>\r\n      <x-icon *ngIf=\"icon && iconSpin\" [type]=\"icon\" [spin]=\"iconSpin\"></x-icon>\r\n      {{ icon && iconSpin ? getLoadingMoreText : getLoadMoreText }}\r\n    </ng-template>\r\n  </ng-container>\r\n  <x-empty *ngIf=\"isEmpty\"></x-empty>\r\n  <ng-container *ngIf=\"footer\">\r\n    <div #footerRef class=\"x-list-footer\" *xOutlet=\"footer\">{{ footer }}</div>\r\n  </ng-container>\r\n</div>\r\n\r\n<ng-template #contentTpl>\r\n  <div\r\n    class=\"x-list-content\"\r\n    cdkDropList\r\n    (cdkDropListDropped)=\"dropCdk($event)\"\r\n    [cdkDropListDisabled]=\"!drag\"\r\n    [hidden]=\"isEmpty\"\r\n    [cdkDropListData]=\"nodes\"\r\n    [cdkDropListEnterPredicate]=\"predicate\"\r\n  >\r\n    <x-list-option\r\n      *ngFor=\"let node of nodes; trackBy: trackByNode\"\r\n      cdkDrag\r\n      [cdkDragDisabled]=\"node.disabled\"\r\n      [node]=\"node\"\r\n      [checked]=\"checked\"\r\n      [nodeTpl]=\"nodeTpl\"\r\n      [selected]=\"node.selected\"\r\n      [disabled]=\"node.disabled\"\r\n      [(active)]=\"node.active\"\r\n      [openPortal]=\"node.openPortal\"\r\n      [icon]=\"node.icon\"\r\n      [label]=\"node.label\"\r\n      [leaf]=\"node.leaf\"\r\n      [size]=\"size\"\r\n      [keywordText]=\"keywordText\"\r\n      [caseSensitive]=\"caseSensitive\"\r\n      (click)=\"onNodeClick($event, node)\"\r\n      (mouseenter)=\"onMouseenter($event, node)\"\r\n      (mouseleave)=\"onMouseleave($event, node)\"\r\n    ></x-list-option>\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";x-list{width:100%}x-list:focus{outline:none}.x-list{margin:0;padding:0;width:100%}.x-list:focus{outline:none}.x-list-select-all{cursor:pointer;font-weight:700}.x-list-load-more,.x-list-content{cursor:pointer}.x-list-content.cdk-drop-list-dragging x-list-option.cdk-drag-placeholder .x-list-option{border-color:var(--x-primary);color:var(--x-primary);background-color:var(--x-background);opacity:.8}.x-list-content.cdk-drop-list-dragging x-list-option:not(.cdk-drag-placeholder){transition:transform var(--x-animation-duration-base) cubic-bezier(0,0,.2,1)}.x-list-header,.x-list-footer{padding:0 .4rem;height:calc(var(--x-font-size) + 1rem);line-height:calc(var(--x-font-size) + 1rem);font-weight:700}.x-list-leaf,.x-list-checked{right:0;margin-left:.4rem;color:var(--x-text-400)}.x-list-icon>span x-icon{color:var(--x-text-300);margin-right:.25rem}.x-list>x-empty{margin:1rem;display:block}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { headerRef: [{
                 type: ViewChild,
                 args: ['headerRef']
             }], footerRef: [{
@@ -754,50 +755,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImpor
 
 class XListModule {
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.2", ngImport: i0, type: XListModule, declarations: [XListComponent, XListDropGroup, XListOptionComponent, XListProperty, XListOptionProperty], imports: [CommonModule,
-            FormsModule,
-            ReactiveFormsModule,
-            DragDropModule,
-            A11yModule,
-            XIconModule,
-            XEmptyModule,
-            XBaseFormModule,
-            XI18nModule,
-            XOutletModule,
-            ScrollingModule,
-            XKeywordModule], exports: [XListComponent, XListDropGroup, XListOptionComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XListModule, imports: [CommonModule,
-            FormsModule,
-            ReactiveFormsModule,
-            DragDropModule,
-            A11yModule,
-            XIconModule,
-            XEmptyModule,
-            XBaseFormModule,
-            XI18nModule,
-            XOutletModule,
-            ScrollingModule,
-            XKeywordModule] }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.2", ngImport: i0, type: XListModule, imports: [XListComponent, XListDropGroup, XListOptionComponent], exports: [XListComponent, XListDropGroup, XListOptionComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XListModule, imports: [XListComponent, XListOptionComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XListModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [XListComponent, XListDropGroup, XListOptionComponent, XListProperty, XListOptionProperty],
                     exports: [XListComponent, XListDropGroup, XListOptionComponent],
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                        DragDropModule,
-                        A11yModule,
-                        XIconModule,
-                        XEmptyModule,
-                        XBaseFormModule,
-                        XI18nModule,
-                        XOutletModule,
-                        ScrollingModule,
-                        XKeywordModule
-                    ]
+                    imports: [XListComponent, XListDropGroup, XListOptionComponent]
                 }]
         }] });