@ng-nest/ui 17.0.0 → 17.0.2

package/fesm2022/ng-nest-ui-tree-select.mjs

@@ -1,32 +1,23 @@
 import { Subject, BehaviorSubject, fromEvent } from 'rxjs';
 import * as i0 from '@angular/core';
-import { Component, Input, ViewEncapsulation, ChangeDetectionStrategy, HostBinding, HostListener, ViewChild, inject, NgModule } from '@angular/core';
+import { Component, Input, ChangeDetectorRef, inject, ViewEncapsulation, ChangeDetectionStrategy, HostBinding, HostListener, ViewChild, Renderer2, ViewContainerRef, ElementRef, NgModule } from '@angular/core';
 import { __decorate } from 'tslib';
-import * as i4$1 from '@ng-nest/ui/core';
-import { XDataConvert, XWithConfig, XInputBoolean, XInputNumber, XIsEmpty, XConnectBaseAnimation, XIsArray, XIsObjectArray, XIsChange, XResize, XClearClass, XSetData, XParents, XComputed, XIsFunction, XRemove, XIsString, XIsObservable } from '@ng-nest/ui/core';
-import { XControlValueAccessor, XValueAccessor, XBaseFormModule } from '@ng-nest/ui/base-form';
-import * as i1$1 from '@ng-nest/ui/portal';
-import { XPortalConnectedPosition, XPortalModule } from '@ng-nest/ui/portal';
+import { XDataConvert, XWithConfig, XInputBoolean, XInputNumber, XIsEmpty, XConnectBaseAnimation, XConfigService, XIsArray, XIsObjectArray, XIsChange, XResize, XClearClass, XSetData, XParents, XComputed, XIsFunction, XRemove, XIsString, XIsObservable } from '@ng-nest/ui/core';
+import { XControlValueAccessor, XValueAccessor } from '@ng-nest/ui/base-form';
+import { XPortalService, XPortalConnectedPosition } from '@ng-nest/ui/portal';
+import { XInputComponent } from '@ng-nest/ui/input';
 import { takeUntil, map, debounceTime, distinctUntilChanged, throttleTime, filter } from 'rxjs/operators';
-import * as i1 from '@ng-nest/ui/i18n';
-import { XI18nModule } from '@ng-nest/ui/i18n';
-import * as i5 from '@angular/common';
-import { DOCUMENT, CommonModule } from '@angular/common';
-import * as i3 from '@ng-nest/ui/tree';
-import { XTreeModule } from '@ng-nest/ui/tree';
-import * as i4 from '@ng-nest/ui/empty';
-import { XEmptyModule } from '@ng-nest/ui/empty';
+import { XI18nService } from '@ng-nest/ui/i18n';
+import { XTreeComponent } from '@ng-nest/ui/tree';
+import { XEmptyComponent } from '@ng-nest/ui/empty';
+import * as i1 from '@angular/common';
+import { CommonModule, DOCUMENT } from '@angular/common';
+import { Overlay } from '@angular/cdk/overlay';
 import { DOWN_ARROW, UP_ARROW, LEFT_ARROW, RIGHT_ARROW, ENTER, MAC_ENTER, BACKSPACE, TAB } from '@angular/cdk/keycodes';
-import * as i2 from '@angular/cdk/overlay';
-import * as i6 from '@angular/forms';
+import { XTagComponent } from '@ng-nest/ui/tag';
+import * as i2 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import * as i7 from '@ng-nest/ui/input';
-import { XInputModule } from '@ng-nest/ui/input';
-import * as i8 from '@ng-nest/ui/tag';
-import { XTagModule } from '@ng-nest/ui/tag';
-import * as i9 from '@ng-nest/ui/outlet';
-import { XOutletModule } from '@ng-nest/ui/outlet';
-import { XListModule } from '@ng-nest/ui/list';
+import { XOutletDirective } from '@ng-nest/ui/outlet';
 
 /**
  * Tree Select
@@ -183,6 +174,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImpor
 const XTreeSelectPortalPrefix = 'x-tree-select-portal';
 
 class XTreeSelectPortalComponent {
+    constructor() {
+        this.selectAll = false;
+        this.show = false;
+        this.objectArray = false;
+        this.caseSensitive = true;
+        this.active = -1;
+        this.portalMaxHeight = '';
+        this.locale = {};
+        this.search = false;
+        this.scrollNull = undefined;
+        this._unSubject = new Subject();
+        this.cdr = inject(ChangeDetectorRef);
+        this.i18n = inject(XI18nService);
+    }
     done(event) {
         this.animating(false);
         event.toState === 'void' && this.destroyPortal();
@@ -197,21 +202,6 @@ class XTreeSelectPortalComponent {
     get getSelectAllText() {
         return this.selectAllText || this.locale.selectAllText;
     }
-    constructor(renderer, cdr, i18n) {
-        this.renderer = renderer;
-        this.cdr = cdr;
-        this.i18n = i18n;
-        this.selectAll = false;
-        this.show = false;
-        this.objectArray = false;
-        this.caseSensitive = true;
-        this.active = -1;
-        this.portalMaxHeight = '';
-        this.locale = {};
-        this.search = false;
-        this.scrollNull = undefined;
-        this._unSubject = new Subject();
-    }
     ngOnInit() {
         this.valueChange.pipe(takeUntil(this._unSubject)).subscribe((x) => {
             this.value = x;
@@ -262,13 +252,13 @@ class XTreeSelectPortalComponent {
     onActive(num) {
         this.active = num;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XTreeSelectPortalComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.XI18nService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: XTreeSelectPortalComponent, selector: "x-tree-select-portal", host: { listeners: { "@x-connect-base-animation.done": "done($event)", "@x-connect-base-animation.start": "start($event)" }, properties: { "@x-connect-base-animation": "this.placement" } }, viewQueries: [{ propertyName: "tree", first: true, predicate: ["tree"], descendants: true }], ngImport: i0, template: "<div\r\n  #treeSelectPortal\r\n  class=\"x-tree-select-portal\"\r\n  (click)=\"inputCom.inputFocus(); stopPropagation($event)\"\r\n  [style.maxHeight]=\"portalMaxHeight\"\r\n>\r\n  <!-- <x-list\r\n    #list\r\n    [data]=\"data\"\r\n    [(ngModel)]=\"value\"\r\n    (nodeClick)=\"nodeClick($event)\"\r\n    (keyManagerChange)=\"onActive($event)\"\r\n    (keyManagerTabOut)=\"onTabOut()\"\r\n    (onSelectAll)=\"onSelectAll($event)\"\r\n    checked\r\n    [objectArray]=\"objectArray\"\r\n    [multiple]=\"multiple\"\r\n    [selectAll]=\"selectAll\"\r\n    [selectAllText]=\"getSelectAllText\"\r\n    [nodeTpl]=\"nodeTpl\"\r\n    [scrollElement]=\"search ? scrollNull : treeSelectPortal\"\r\n    [virtualScroll]=\"virtualScroll\"\r\n    [size]=\"size\"\r\n    [heightAdaption]=\"treeSelectPortal\"\r\n  ></x-list> -->\r\n  <x-tree\r\n    #tree\r\n    [data]=\"data\"\r\n    [labelTpl]=\"nodeTpl\"\r\n    [virtualScroll]=\"virtualScroll\"\r\n    [scrollElement]=\"search ? scrollNull : treeSelectPortal\"\r\n    [heightAdaption]=\"treeSelectPortal\"\r\n    [expandedLevel]=\"expandedLevel\"\r\n    [(activatedId)]=\"value\"\r\n    (nodeClick)=\"nodeClick($event)\"\r\n    [multiple]=\"multiple\"\r\n    [allowManyActivated]=\"multiple\"\r\n    [objectArray]=\"objectArray\"\r\n    [keywordText]=\"keywordText\"\r\n    [caseSensitive]=\"caseSensitive\"\r\n    [onlyLeaf]=\"onlyLeaf\"\r\n    [nodeOpen]=\"onlyLeaf\"\r\n  ></x-tree>\r\n  <x-empty *ngIf=\"isEmpty\"></x-empty>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";x-tree-select-portal{width:100%}.x-tree-select-portal{margin:.0625rem 0;font-size:var(--x-font-size);color:var(--x-text);border:var(--x-border-width) var(--x-border-style) var(--x-border);width:100%;border-radius:var(--x-border-radius);box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color);position:relative;display:flex;flex-direction:column;background-color:var(--x-background);overflow:hidden auto;max-height:calc(calc(var(--x-font-size) + .875rem) * 6 + var(--x-border-width) * 7)}.x-tree-select-portal x-tree{width:100%}.x-tree-select-portal x-empty{margin:1rem;display:block}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.XTreeComponent, selector: "x-tree" }, { kind: "component", type: i4.XEmptyComponent, selector: "x-empty" }], animations: [XConnectBaseAnimation], 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: XTreeSelectPortalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: XTreeSelectPortalComponent, isStandalone: true, selector: "x-tree-select-portal", host: { listeners: { "@x-connect-base-animation.done": "done($event)", "@x-connect-base-animation.start": "start($event)" }, properties: { "@x-connect-base-animation": "this.placement" } }, viewQueries: [{ propertyName: "tree", first: true, predicate: ["tree"], descendants: true }], ngImport: i0, template: "<div\r\n  #treeSelectPortal\r\n  class=\"x-tree-select-portal\"\r\n  (click)=\"inputCom.inputFocus(); stopPropagation($event)\"\r\n  [style.maxHeight]=\"portalMaxHeight\"\r\n>\r\n  <!-- <x-list\r\n    #list\r\n    [data]=\"data\"\r\n    [(ngModel)]=\"value\"\r\n    (nodeClick)=\"nodeClick($event)\"\r\n    (keyManagerChange)=\"onActive($event)\"\r\n    (keyManagerTabOut)=\"onTabOut()\"\r\n    (onSelectAll)=\"onSelectAll($event)\"\r\n    checked\r\n    [objectArray]=\"objectArray\"\r\n    [multiple]=\"multiple\"\r\n    [selectAll]=\"selectAll\"\r\n    [selectAllText]=\"getSelectAllText\"\r\n    [nodeTpl]=\"nodeTpl\"\r\n    [scrollElement]=\"search ? scrollNull : treeSelectPortal\"\r\n    [virtualScroll]=\"virtualScroll\"\r\n    [size]=\"size\"\r\n    [heightAdaption]=\"treeSelectPortal\"\r\n  ></x-list> -->\r\n  <x-tree\r\n    #tree\r\n    [data]=\"data\"\r\n    [labelTpl]=\"nodeTpl\"\r\n    [virtualScroll]=\"virtualScroll\"\r\n    [scrollElement]=\"search ? scrollNull : treeSelectPortal\"\r\n    [heightAdaption]=\"treeSelectPortal\"\r\n    [expandedLevel]=\"expandedLevel\"\r\n    [(activatedId)]=\"value\"\r\n    (nodeClick)=\"nodeClick($event)\"\r\n    [multiple]=\"multiple\"\r\n    [allowManyActivated]=\"multiple\"\r\n    [objectArray]=\"objectArray\"\r\n    [keywordText]=\"keywordText\"\r\n    [caseSensitive]=\"caseSensitive\"\r\n    [onlyLeaf]=\"onlyLeaf\"\r\n    [nodeOpen]=\"onlyLeaf\"\r\n  ></x-tree>\r\n  <x-empty *ngIf=\"isEmpty\"></x-empty>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";x-tree-select-portal{width:100%}.x-tree-select-portal{margin:.0625rem 0;font-size:var(--x-font-size);color:var(--x-text);border:var(--x-border-width) var(--x-border-style) var(--x-border);width:100%;border-radius:var(--x-border-radius);box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color);position:relative;display:flex;flex-direction:column;background-color:var(--x-background);overflow:hidden auto;max-height:calc(calc(var(--x-font-size) + .875rem) * 6 + var(--x-border-width) * 7)}.x-tree-select-portal x-tree{width:100%}.x-tree-select-portal x-empty{margin:1rem;display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: XTreeComponent, selector: "x-tree" }, { kind: "component", type: XEmptyComponent, selector: "x-empty" }], animations: [XConnectBaseAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XTreeSelectPortalComponent, decorators: [{
             type: Component,
-            args: [{ selector: `${XTreeSelectPortalPrefix}`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [XConnectBaseAnimation], template: "<div\r\n  #treeSelectPortal\r\n  class=\"x-tree-select-portal\"\r\n  (click)=\"inputCom.inputFocus(); stopPropagation($event)\"\r\n  [style.maxHeight]=\"portalMaxHeight\"\r\n>\r\n  <!-- <x-list\r\n    #list\r\n    [data]=\"data\"\r\n    [(ngModel)]=\"value\"\r\n    (nodeClick)=\"nodeClick($event)\"\r\n    (keyManagerChange)=\"onActive($event)\"\r\n    (keyManagerTabOut)=\"onTabOut()\"\r\n    (onSelectAll)=\"onSelectAll($event)\"\r\n    checked\r\n    [objectArray]=\"objectArray\"\r\n    [multiple]=\"multiple\"\r\n    [selectAll]=\"selectAll\"\r\n    [selectAllText]=\"getSelectAllText\"\r\n    [nodeTpl]=\"nodeTpl\"\r\n    [scrollElement]=\"search ? scrollNull : treeSelectPortal\"\r\n    [virtualScroll]=\"virtualScroll\"\r\n    [size]=\"size\"\r\n    [heightAdaption]=\"treeSelectPortal\"\r\n  ></x-list> -->\r\n  <x-tree\r\n    #tree\r\n    [data]=\"data\"\r\n    [labelTpl]=\"nodeTpl\"\r\n    [virtualScroll]=\"virtualScroll\"\r\n    [scrollElement]=\"search ? scrollNull : treeSelectPortal\"\r\n    [heightAdaption]=\"treeSelectPortal\"\r\n    [expandedLevel]=\"expandedLevel\"\r\n    [(activatedId)]=\"value\"\r\n    (nodeClick)=\"nodeClick($event)\"\r\n    [multiple]=\"multiple\"\r\n    [allowManyActivated]=\"multiple\"\r\n    [objectArray]=\"objectArray\"\r\n    [keywordText]=\"keywordText\"\r\n    [caseSensitive]=\"caseSensitive\"\r\n    [onlyLeaf]=\"onlyLeaf\"\r\n    [nodeOpen]=\"onlyLeaf\"\r\n  ></x-tree>\r\n  <x-empty *ngIf=\"isEmpty\"></x-empty>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";x-tree-select-portal{width:100%}.x-tree-select-portal{margin:.0625rem 0;font-size:var(--x-font-size);color:var(--x-text);border:var(--x-border-width) var(--x-border-style) var(--x-border);width:100%;border-radius:var(--x-border-radius);box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color);position:relative;display:flex;flex-direction:column;background-color:var(--x-background);overflow:hidden auto;max-height:calc(calc(var(--x-font-size) + .875rem) * 6 + var(--x-border-width) * 7)}.x-tree-select-portal x-tree{width:100%}.x-tree-select-portal x-empty{margin:1rem;display:block}\n"] }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i1.XI18nService }], propDecorators: { placement: [{
+            args: [{ selector: `${XTreeSelectPortalPrefix}`, standalone: true, imports: [CommonModule, XTreeComponent, XEmptyComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [XConnectBaseAnimation], template: "<div\r\n  #treeSelectPortal\r\n  class=\"x-tree-select-portal\"\r\n  (click)=\"inputCom.inputFocus(); stopPropagation($event)\"\r\n  [style.maxHeight]=\"portalMaxHeight\"\r\n>\r\n  <!-- <x-list\r\n    #list\r\n    [data]=\"data\"\r\n    [(ngModel)]=\"value\"\r\n    (nodeClick)=\"nodeClick($event)\"\r\n    (keyManagerChange)=\"onActive($event)\"\r\n    (keyManagerTabOut)=\"onTabOut()\"\r\n    (onSelectAll)=\"onSelectAll($event)\"\r\n    checked\r\n    [objectArray]=\"objectArray\"\r\n    [multiple]=\"multiple\"\r\n    [selectAll]=\"selectAll\"\r\n    [selectAllText]=\"getSelectAllText\"\r\n    [nodeTpl]=\"nodeTpl\"\r\n    [scrollElement]=\"search ? scrollNull : treeSelectPortal\"\r\n    [virtualScroll]=\"virtualScroll\"\r\n    [size]=\"size\"\r\n    [heightAdaption]=\"treeSelectPortal\"\r\n  ></x-list> -->\r\n  <x-tree\r\n    #tree\r\n    [data]=\"data\"\r\n    [labelTpl]=\"nodeTpl\"\r\n    [virtualScroll]=\"virtualScroll\"\r\n    [scrollElement]=\"search ? scrollNull : treeSelectPortal\"\r\n    [heightAdaption]=\"treeSelectPortal\"\r\n    [expandedLevel]=\"expandedLevel\"\r\n    [(activatedId)]=\"value\"\r\n    (nodeClick)=\"nodeClick($event)\"\r\n    [multiple]=\"multiple\"\r\n    [allowManyActivated]=\"multiple\"\r\n    [objectArray]=\"objectArray\"\r\n    [keywordText]=\"keywordText\"\r\n    [caseSensitive]=\"caseSensitive\"\r\n    [onlyLeaf]=\"onlyLeaf\"\r\n    [nodeOpen]=\"onlyLeaf\"\r\n  ></x-tree>\r\n  <x-empty *ngIf=\"isEmpty\"></x-empty>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";x-tree-select-portal{width:100%}.x-tree-select-portal{margin:.0625rem 0;font-size:var(--x-font-size);color:var(--x-text);border:var(--x-border-width) var(--x-border-style) var(--x-border);width:100%;border-radius:var(--x-border-radius);box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color);position:relative;display:flex;flex-direction:column;background-color:var(--x-background);overflow:hidden auto;max-height:calc(calc(var(--x-font-size) + .875rem) * 6 + var(--x-border-width) * 7)}.x-tree-select-portal x-tree{width:100%}.x-tree-select-portal x-empty{margin:1rem;display:block}\n"] }]
+        }], propDecorators: { placement: [{
                 type: HostBinding,
                 args: ['@x-connect-base-animation']
             }], done: [{
@@ -283,37 +273,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImpor
             }] } });
 
 class XTreeSelectComponent extends XTreeSelectProperty {
-    get getReadonly() {
-        return (this.readonly && !this.search) || (Boolean(this.search) && Boolean(this.multiple));
-    }
-    get getMaxTagContent() {
-        return this.maxTagContent || this.locale.maxTagContent;
-    }
-    writeValue(value) {
-        if (this.multiple) {
-            if (XIsEmpty(value)) {
-                value = [];
-            }
-            if (!XIsArray(value)) {
-                value = [value];
-            }
-            this.objectArray = XIsObjectArray(value);
-        }
-        this.value = value;
-        this.setDisplayValue();
-        this.valueChange.next(this.value);
-        this.cdr.detectChanges();
-    }
-    constructor(renderer, cdr, portalService, viewContainerRef, overlay, i18n, configService, elementRef) {
-        super();
-        this.renderer = renderer;
-        this.cdr = cdr;
-        this.portalService = portalService;
-        this.viewContainerRef = viewContainerRef;
-        this.overlay = overlay;
-        this.i18n = i18n;
-        this.configService = configService;
-        this.elementRef = elementRef;
+    constructor() {
+        super(...arguments);
         this.readonly = true;
         this.enter = false;
         this.showClearable = false;
@@ -347,6 +308,35 @@ class XTreeSelectComponent extends XTreeSelectProperty {
         this.multipleInputSizeChange = new Subject();
         this._unSubject = new Subject();
         this.document = inject(DOCUMENT);
+        this.renderer = inject(Renderer2);
+        this.cdr = inject(ChangeDetectorRef);
+        this.portalService = inject(XPortalService);
+        this.viewContainerRef = inject(ViewContainerRef);
+        this.overlay = inject(Overlay);
+        this.i18n = inject(XI18nService);
+        this.elementRef = inject(ElementRef);
+        this.configService = inject(XConfigService);
+    }
+    get getReadonly() {
+        return (this.readonly && !this.search) || (Boolean(this.search) && Boolean(this.multiple));
+    }
+    get getMaxTagContent() {
+        return this.maxTagContent || this.locale.maxTagContent;
+    }
+    writeValue(value) {
+        if (this.multiple) {
+            if (XIsEmpty(value)) {
+                value = [];
+            }
+            if (!XIsArray(value)) {
+                value = [value];
+            }
+            this.objectArray = XIsObjectArray(value);
+        }
+        this.value = value;
+        this.setDisplayValue();
+        this.valueChange.next(this.value);
+        this.cdr.detectChanges();
     }
     ngOnInit() {
         this.setFlex(this.treeSelect.nativeElement, this.renderer, this.justify, this.align, this.direction);
@@ -403,12 +393,15 @@ class XTreeSelectComponent extends XTreeSelectProperty {
         this.closeSubject.pipe(takeUntil(this._unSubject)).subscribe(() => {
             this.closePortal();
         });
-        this.inputChange.pipe(debounceTime(this.debounceTime), distinctUntilChanged(), takeUntil(this._unSubject)).subscribe((x) => {
+        this.inputChange
+            .pipe(debounceTime(this.debounceTime), distinctUntilChanged(), takeUntil(this._unSubject))
+            .subscribe((x) => {
             this.modelChange(x);
         });
         this.keydownSubject.pipe(throttleTime(10), takeUntil(this._unSubject)).subscribe((x) => {
             const keyCode = x.keyCode;
-            if (!this.portalAttached() && [DOWN_ARROW, UP_ARROW, LEFT_ARROW, RIGHT_ARROW, ENTER, MAC_ENTER, BACKSPACE].includes(keyCode)) {
+            if (!this.portalAttached() &&
+                [DOWN_ARROW, UP_ARROW, LEFT_ARROW, RIGHT_ARROW, ENTER, MAC_ENTER, BACKSPACE].includes(keyCode)) {
                 this.inputChange.next(this.displayValue);
             }
             // if (this.portalAttached() && [ESCAPE].includes(keyCode)) {
@@ -903,13 +896,13 @@ class XTreeSelectComponent extends XTreeSelectProperty {
         this.formControlValidator();
         setTimeout(() => this.inputChange.next(this.multiple ? this.multipleSearchValue : this.displayValue));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XTreeSelectComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1$1.XPortalService }, { token: i0.ViewContainerRef }, { token: i2.Overlay }, { token: i1.XI18nService }, { token: i4$1.XConfigService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: XTreeSelectComponent, selector: "x-tree-select", providers: [XValueAccessor(XTreeSelectComponent)], viewQueries: [{ propertyName: "inputCom", first: true, predicate: ["inputCom"], descendants: true, static: true }, { propertyName: "treeSelect", first: true, predicate: ["treeSelect"], descendants: true, static: true }, { propertyName: "multipleValueTpl", first: true, predicate: ["multipleValueTpl"], descendants: true, static: true }, { propertyName: "multipleInput", first: true, predicate: ["multipleInput"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div #treeSelect class=\"x-tree-select\" [class.x-tree-select-multiple]=\"multiple\">\r\n  <div class=\"x-tree-select-row\">\r\n    <x-input\r\n      #inputCom\r\n      type=\"text\"\r\n      [label]=\"label\"\r\n      [labelWidth]=\"labelWidth\"\r\n      [labelAlign]=\"labelAlign\"\r\n      [justify]=\"justify\"\r\n      [align]=\"align\"\r\n      [direction]=\"direction\"\r\n      [required]=\"required\"\r\n      [disabled]=\"disabled\"\r\n      [validator]=\"validator\"\r\n      [icon]=\"icon\"\r\n      [iconSpin]=\"iconSpin\"\r\n      [placeholder]=\"placeholder\"\r\n      [readonly]=\"getReadonly\"\r\n      [clearable]=\"showClearable\"\r\n      [(ngModel)]=\"displayValue\"\r\n      [valueTpl]=\"valueTpl ? valueTpl : nodeTpl\"\r\n      [valueTplContext]=\"valueTplContext\"\r\n      [size]=\"size\"\r\n      [bordered]=\"bordered\"\r\n      [before]=\"before\"\r\n      [after]=\"after\"\r\n      [pattern]=\"pattern\"\r\n      [message]=\"message\"\r\n      [pointer]=\"true\"\r\n      [inputPadding]=\"inputPadding\"\r\n      [(active)]=\"active\"\r\n      (clearEmit)=\"clearEmit()\"\r\n      (xKeydown)=\"onKeydown($event)\"\r\n      (xInput)=\"onInput($event)\"\r\n      (xFocus)=\"onFocus($event)\"\r\n      (xClick)=\"showPortal(true)\"\r\n      (xMouseenter)=\"menter()\"\r\n      (xMouseleave)=\"mleave()\"\r\n      (xComposition)=\"composition = $event\"\r\n    ></x-input>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #multipleValueTpl>\r\n  <x-tag\r\n    [@.disabled]=\"true\"\r\n    *ngFor=\"let node of displayNodes; index as i\"\r\n    [closable]=\"!disabled\"\r\n    (close)=\"closeNode($event, node, i)\"\r\n    [size]=\"size\"\r\n    >{{ showPath ? node.path : node.label }}</x-tag\r\n  >\r\n  <x-tag [@.disabled]=\"true\" *ngIf=\"showDisplayMore\" [size]=\"size\">\r\n    <ng-container *xOutlet=\"getMaxTagContent; context: { $surplus: selectedSurplus, $total: selectedTotal }\">{{\r\n      displayMore\r\n    }}</ng-container>\r\n  </x-tag>\r\n  <x-input\r\n    #multipleInput\r\n    *ngIf=\"search\"\r\n    bordered=\"false\"\r\n    [size]=\"size\"\r\n    inputPadding=\"0.275\"\r\n    [(ngModel)]=\"multipleSearchValue\"\r\n    (xInput)=\"onInput($event)\"\r\n    (xKeydown)=\"onKeydown($event)\"\r\n  ></x-input>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";x-tree-select{display:inline-block;width:12rem}.x-tree-select{margin:0;padding:0;width:100%}.x-tree-select x-input{width:100%}.x-tree-select-multiple .x-input-value-template-value{display:flex;align-items:center;margin-bottom:.125rem;flex-wrap:wrap;width:initial;height:initial!important}.x-tree-select-multiple .x-input-value-template-value>x-tag{display:inline-flex;margin-left:.0625rem;margin-top:.125rem}.x-tree-select-multiple .x-input-value-template-value>x-tag .x-tag-big{height:var(--x-height-large);line-height:var(--x-height-large);padding:0 var(--x-padding-large)}.x-tree-select-multiple .x-input-value-template-value>x-tag .x-tag-big>.x-icon{right:calc(-var(--x-padding-large)/2)}.x-tree-select-multiple .x-input-value-template-value>x-tag .x-tag-large{height:var(--x-height-medium);line-height:var(--x-height-medium);padding:0 var(--x-padding-medium)}.x-tree-select-multiple .x-input-value-template-value>x-tag .x-tag-large>.x-icon{right:calc(-var(--x-padding-medium)/2)}.x-tree-select-multiple .x-input-value-template-value>x-tag .x-tag-medium{height:var(--x-height-small);line-height:var(--x-height-small);padding:0 var(--x-padding-small)}.x-tree-select-multiple .x-input-value-template-value>x-tag .x-tag-medium>.x-icon{right:calc(-var(--x-padding-small)/2)}.x-tree-select-multiple .x-input-value-template-value>x-tag .x-tag-small{height:var(--x-height-mini);line-height:var(--x-height-mini);padding:0 var(--x-padding-mini)}.x-tree-select-multiple .x-input-value-template-value>x-tag .x-tag-small>.x-icon{right:calc(-var(--x-padding-mini)/2)}.x-tree-select-multiple .x-input-value-template-value>x-tag .x-tag-mini{height:1.125rem;line-height:1.125rem;padding:0 .125rem}.x-tree-select-multiple .x-input-value-template-value>x-tag .x-tag-mini>.x-icon{right:-.0625rem}.x-tree-select-multiple .x-input-value-template-value>x-input{margin-top:.125rem;width:5rem;min-width:3rem}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-big>.x-input-row>.x-input-input>input,.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-big>.x-input-row>.x-input-input>.x-input-row-before:not(.x-input-row-before-template),.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-big>.x-input-row>.x-input-input>.x-input-row-after:not(.x-input-row-after-template),.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-big>.x-input-row>.x-input-input>.x-input-value-template-value{height:var(--x-height-large);line-height:var(--x-height-large);padding:0 var(--x-padding-large)}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-big>.x-input-row>.x-input-input>.x-input-max-length{height:var(--x-height-large);line-height:var(--x-height-large)}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-big>.x-input-row>.x-input-row-before:not(.x-input-row-before-template),.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-big>.x-input-row>.x-input-row-after:not(.x-input-row-after-template){height:var(--x-height-large);line-height:var(--x-height-large);padding:0 var(--x-padding-large)}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-big>label{height:var(--x-height-large);line-height:var(--x-height-large)}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-large>.x-input-row>.x-input-input>input,.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-large>.x-input-row>.x-input-input>.x-input-row-before:not(.x-input-row-before-template),.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-large>.x-input-row>.x-input-input>.x-input-row-after:not(.x-input-row-after-template),.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-large>.x-input-row>.x-input-input>.x-input-value-template-value{height:var(--x-height-medium);line-height:var(--x-height-medium);padding:0 var(--x-padding-medium)}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-large>.x-input-row>.x-input-input>.x-input-max-length{height:var(--x-height-medium);line-height:var(--x-height-medium)}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-large>.x-input-row>.x-input-row-before:not(.x-input-row-before-template),.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-large>.x-input-row>.x-input-row-after:not(.x-input-row-after-template){height:var(--x-height-medium);line-height:var(--x-height-medium);padding:0 var(--x-padding-medium)}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-large>label{height:var(--x-height-medium);line-height:var(--x-height-medium)}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-medium>.x-input-row>.x-input-input>input,.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-medium>.x-input-row>.x-input-input>.x-input-row-before:not(.x-input-row-before-template),.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-medium>.x-input-row>.x-input-input>.x-input-row-after:not(.x-input-row-after-template),.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-medium>.x-input-row>.x-input-input>.x-input-value-template-value{height:var(--x-height-small);line-height:var(--x-height-small);padding:0 var(--x-padding-small)}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-medium>.x-input-row>.x-input-input>.x-input-max-length{height:var(--x-height-small);line-height:var(--x-height-small)}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-medium>.x-input-row>.x-input-row-before:not(.x-input-row-before-template),.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-medium>.x-input-row>.x-input-row-after:not(.x-input-row-after-template){height:var(--x-height-small);line-height:var(--x-height-small);padding:0 var(--x-padding-small)}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-medium>label{height:var(--x-height-small);line-height:var(--x-height-small)}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-small>.x-input-row>.x-input-input>input,.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-small>.x-input-row>.x-input-input>.x-input-row-before:not(.x-input-row-before-template),.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-small>.x-input-row>.x-input-input>.x-input-row-after:not(.x-input-row-after-template),.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-small>.x-input-row>.x-input-input>.x-input-value-template-value{height:var(--x-height-mini);line-height:var(--x-height-mini);padding:0 var(--x-padding-mini)}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-small>.x-input-row>.x-input-input>.x-input-max-length{height:var(--x-height-mini);line-height:var(--x-height-mini)}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-small>.x-input-row>.x-input-row-before:not(.x-input-row-before-template),.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-small>.x-input-row>.x-input-row-after:not(.x-input-row-after-template){height:var(--x-height-mini);line-height:var(--x-height-mini);padding:0 var(--x-padding-mini)}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-small>label{height:var(--x-height-mini);line-height:var(--x-height-mini)}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-mini>.x-input-row>.x-input-input>input,.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-mini>.x-input-row>.x-input-input>.x-input-row-before:not(.x-input-row-before-template),.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-mini>.x-input-row>.x-input-input>.x-input-row-after:not(.x-input-row-after-template),.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-mini>.x-input-row>.x-input-input>.x-input-value-template-value{height:1.125rem;line-height:1.125rem;padding:0 .125rem}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-mini>.x-input-row>.x-input-input>.x-input-max-length{height:1.125rem;line-height:1.125rem}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-mini>.x-input-row>.x-input-row-before:not(.x-input-row-before-template),.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-mini>.x-input-row>.x-input-row-after:not(.x-input-row-after-template){height:1.125rem;line-height:1.125rem;padding:0 .125rem}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-mini>label{height:1.125rem;line-height:1.125rem}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-row>.x-input-input>input{background-color:transparent}.x-tree-select-portal{margin:.0625rem 0;font-size:var(--x-font-size);color:var(--x-text);border:var(--x-border-width) var(--x-border-style) var(--x-border);width:100%;border-radius:var(--x-border-radius);box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color);position:relative;display:flex;flex-direction:column;background-color:var(--x-background);overflow:hidden auto;max-height:calc(calc(var(--x-font-size) + .875rem) * 6 + var(--x-border-width) * 7)}.x-tree-select-portal x-tree{width:100%}.x-tree-select-portal x-empty{margin:1rem;display:block}\n"], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i6.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.XInputComponent, selector: "x-input" }, { kind: "component", type: i8.XTagComponent, selector: "x-tag" }, { kind: "directive", type: i9.XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }], 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: XTreeSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: XTreeSelectComponent, isStandalone: true, selector: "x-tree-select", providers: [XValueAccessor(XTreeSelectComponent)], viewQueries: [{ propertyName: "inputCom", first: true, predicate: ["inputCom"], descendants: true, static: true }, { propertyName: "treeSelect", first: true, predicate: ["treeSelect"], descendants: true, static: true }, { propertyName: "multipleValueTpl", first: true, predicate: ["multipleValueTpl"], descendants: true, static: true }, { propertyName: "multipleInput", first: true, predicate: ["multipleInput"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div #treeSelect class=\"x-tree-select\" [class.x-tree-select-multiple]=\"multiple\">\r\n  <div class=\"x-tree-select-row\">\r\n    <x-input\r\n      #inputCom\r\n      type=\"text\"\r\n      [label]=\"label\"\r\n      [labelWidth]=\"labelWidth\"\r\n      [labelAlign]=\"labelAlign\"\r\n      [justify]=\"justify\"\r\n      [align]=\"align\"\r\n      [direction]=\"direction\"\r\n      [required]=\"required\"\r\n      [disabled]=\"disabled\"\r\n      [validator]=\"validator\"\r\n      [icon]=\"icon\"\r\n      [iconSpin]=\"iconSpin\"\r\n      [placeholder]=\"placeholder\"\r\n      [readonly]=\"getReadonly\"\r\n      [clearable]=\"showClearable\"\r\n      [(ngModel)]=\"displayValue\"\r\n      [valueTpl]=\"valueTpl ? valueTpl : nodeTpl\"\r\n      [valueTplContext]=\"valueTplContext\"\r\n      [size]=\"size\"\r\n      [bordered]=\"bordered\"\r\n      [before]=\"before\"\r\n      [after]=\"after\"\r\n      [pattern]=\"pattern\"\r\n      [message]=\"message\"\r\n      [pointer]=\"true\"\r\n      [inputPadding]=\"inputPadding\"\r\n      [(active)]=\"active\"\r\n      (clearEmit)=\"clearEmit()\"\r\n      (xKeydown)=\"onKeydown($event)\"\r\n      (xInput)=\"onInput($event)\"\r\n      (xFocus)=\"onFocus($event)\"\r\n      (xClick)=\"showPortal(true)\"\r\n      (xMouseenter)=\"menter()\"\r\n      (xMouseleave)=\"mleave()\"\r\n      (xComposition)=\"composition = $event\"\r\n    ></x-input>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #multipleValueTpl>\r\n  <x-tag\r\n    [@.disabled]=\"true\"\r\n    *ngFor=\"let node of displayNodes; index as i\"\r\n    [closable]=\"!disabled\"\r\n    (close)=\"closeNode($event, node, i)\"\r\n    [size]=\"size\"\r\n    >{{ showPath ? node.path : node.label }}</x-tag\r\n  >\r\n  <x-tag [@.disabled]=\"true\" *ngIf=\"showDisplayMore\" [size]=\"size\">\r\n    <ng-container *xOutlet=\"getMaxTagContent; context: { $surplus: selectedSurplus, $total: selectedTotal }\">{{\r\n      displayMore\r\n    }}</ng-container>\r\n  </x-tag>\r\n  <x-input\r\n    #multipleInput\r\n    *ngIf=\"search\"\r\n    bordered=\"false\"\r\n    [size]=\"size\"\r\n    inputPadding=\"0.275\"\r\n    [(ngModel)]=\"multipleSearchValue\"\r\n    (xInput)=\"onInput($event)\"\r\n    (xKeydown)=\"onKeydown($event)\"\r\n  ></x-input>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";x-tree-select{display:inline-block;width:12rem}.x-tree-select{margin:0;padding:0;width:100%}.x-tree-select x-input{width:100%}.x-tree-select-multiple .x-input-value-template-value{display:flex;align-items:center;margin-bottom:.125rem;flex-wrap:wrap;width:initial;height:initial!important}.x-tree-select-multiple .x-input-value-template-value>x-tag{display:inline-flex;margin-left:.0625rem;margin-top:.125rem}.x-tree-select-multiple .x-input-value-template-value>x-tag .x-tag-big{height:var(--x-height-large);line-height:var(--x-height-large);padding:0 var(--x-padding-large)}.x-tree-select-multiple .x-input-value-template-value>x-tag .x-tag-big>.x-icon{right:calc(-var(--x-padding-large)/2)}.x-tree-select-multiple .x-input-value-template-value>x-tag .x-tag-large{height:var(--x-height-medium);line-height:var(--x-height-medium);padding:0 var(--x-padding-medium)}.x-tree-select-multiple .x-input-value-template-value>x-tag .x-tag-large>.x-icon{right:calc(-var(--x-padding-medium)/2)}.x-tree-select-multiple .x-input-value-template-value>x-tag .x-tag-medium{height:var(--x-height-small);line-height:var(--x-height-small);padding:0 var(--x-padding-small)}.x-tree-select-multiple .x-input-value-template-value>x-tag .x-tag-medium>.x-icon{right:calc(-var(--x-padding-small)/2)}.x-tree-select-multiple .x-input-value-template-value>x-tag .x-tag-small{height:var(--x-height-mini);line-height:var(--x-height-mini);padding:0 var(--x-padding-mini)}.x-tree-select-multiple .x-input-value-template-value>x-tag .x-tag-small>.x-icon{right:calc(-var(--x-padding-mini)/2)}.x-tree-select-multiple .x-input-value-template-value>x-tag .x-tag-mini{height:1.125rem;line-height:1.125rem;padding:0 .125rem}.x-tree-select-multiple .x-input-value-template-value>x-tag .x-tag-mini>.x-icon{right:-.0625rem}.x-tree-select-multiple .x-input-value-template-value>x-input{margin-top:.125rem;width:5rem;min-width:3rem}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-big>.x-input-row>.x-input-input>input,.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-big>.x-input-row>.x-input-input>.x-input-row-before:not(.x-input-row-before-template),.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-big>.x-input-row>.x-input-input>.x-input-row-after:not(.x-input-row-after-template),.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-big>.x-input-row>.x-input-input>.x-input-value-template-value{height:var(--x-height-large);line-height:var(--x-height-large);padding:0 var(--x-padding-large)}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-big>.x-input-row>.x-input-input>.x-input-max-length{height:var(--x-height-large);line-height:var(--x-height-large)}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-big>.x-input-row>.x-input-row-before:not(.x-input-row-before-template),.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-big>.x-input-row>.x-input-row-after:not(.x-input-row-after-template){height:var(--x-height-large);line-height:var(--x-height-large);padding:0 var(--x-padding-large)}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-big>label{height:var(--x-height-large);line-height:var(--x-height-large)}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-large>.x-input-row>.x-input-input>input,.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-large>.x-input-row>.x-input-input>.x-input-row-before:not(.x-input-row-before-template),.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-large>.x-input-row>.x-input-input>.x-input-row-after:not(.x-input-row-after-template),.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-large>.x-input-row>.x-input-input>.x-input-value-template-value{height:var(--x-height-medium);line-height:var(--x-height-medium);padding:0 var(--x-padding-medium)}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-large>.x-input-row>.x-input-input>.x-input-max-length{height:var(--x-height-medium);line-height:var(--x-height-medium)}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-large>.x-input-row>.x-input-row-before:not(.x-input-row-before-template),.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-large>.x-input-row>.x-input-row-after:not(.x-input-row-after-template){height:var(--x-height-medium);line-height:var(--x-height-medium);padding:0 var(--x-padding-medium)}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-large>label{height:var(--x-height-medium);line-height:var(--x-height-medium)}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-medium>.x-input-row>.x-input-input>input,.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-medium>.x-input-row>.x-input-input>.x-input-row-before:not(.x-input-row-before-template),.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-medium>.x-input-row>.x-input-input>.x-input-row-after:not(.x-input-row-after-template),.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-medium>.x-input-row>.x-input-input>.x-input-value-template-value{height:var(--x-height-small);line-height:var(--x-height-small);padding:0 var(--x-padding-small)}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-medium>.x-input-row>.x-input-input>.x-input-max-length{height:var(--x-height-small);line-height:var(--x-height-small)}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-medium>.x-input-row>.x-input-row-before:not(.x-input-row-before-template),.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-medium>.x-input-row>.x-input-row-after:not(.x-input-row-after-template){height:var(--x-height-small);line-height:var(--x-height-small);padding:0 var(--x-padding-small)}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-medium>label{height:var(--x-height-small);line-height:var(--x-height-small)}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-small>.x-input-row>.x-input-input>input,.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-small>.x-input-row>.x-input-input>.x-input-row-before:not(.x-input-row-before-template),.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-small>.x-input-row>.x-input-input>.x-input-row-after:not(.x-input-row-after-template),.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-small>.x-input-row>.x-input-input>.x-input-value-template-value{height:var(--x-height-mini);line-height:var(--x-height-mini);padding:0 var(--x-padding-mini)}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-small>.x-input-row>.x-input-input>.x-input-max-length{height:var(--x-height-mini);line-height:var(--x-height-mini)}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-small>.x-input-row>.x-input-row-before:not(.x-input-row-before-template),.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-small>.x-input-row>.x-input-row-after:not(.x-input-row-after-template){height:var(--x-height-mini);line-height:var(--x-height-mini);padding:0 var(--x-padding-mini)}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-small>label{height:var(--x-height-mini);line-height:var(--x-height-mini)}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-mini>.x-input-row>.x-input-input>input,.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-mini>.x-input-row>.x-input-input>.x-input-row-before:not(.x-input-row-before-template),.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-mini>.x-input-row>.x-input-input>.x-input-row-after:not(.x-input-row-after-template),.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-mini>.x-input-row>.x-input-input>.x-input-value-template-value{height:1.125rem;line-height:1.125rem;padding:0 .125rem}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-mini>.x-input-row>.x-input-input>.x-input-max-length{height:1.125rem;line-height:1.125rem}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-mini>.x-input-row>.x-input-row-before:not(.x-input-row-before-template),.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-mini>.x-input-row>.x-input-row-after:not(.x-input-row-after-template){height:1.125rem;line-height:1.125rem;padding:0 .125rem}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-mini>label{height:1.125rem;line-height:1.125rem}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-row>.x-input-input>input{background-color:transparent}.x-tree-select-portal{margin:.0625rem 0;font-size:var(--x-font-size);color:var(--x-text);border:var(--x-border-width) var(--x-border-style) var(--x-border);width:100%;border-radius:var(--x-border-radius);box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color);position:relative;display:flex;flex-direction:column;background-color:var(--x-background);overflow:hidden auto;max-height:calc(calc(var(--x-font-size) + .875rem) * 6 + var(--x-border-width) * 7)}.x-tree-select-portal x-tree{width:100%}.x-tree-select-portal 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: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: XInputComponent, selector: "x-input" }, { kind: "component", type: XTagComponent, selector: "x-tag" }, { 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: XTreeSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: `${XTreeSelectPrefix}`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [XValueAccessor(XTreeSelectComponent)], template: "<div #treeSelect class=\"x-tree-select\" [class.x-tree-select-multiple]=\"multiple\">\r\n  <div class=\"x-tree-select-row\">\r\n    <x-input\r\n      #inputCom\r\n      type=\"text\"\r\n      [label]=\"label\"\r\n      [labelWidth]=\"labelWidth\"\r\n      [labelAlign]=\"labelAlign\"\r\n      [justify]=\"justify\"\r\n      [align]=\"align\"\r\n      [direction]=\"direction\"\r\n      [required]=\"required\"\r\n      [disabled]=\"disabled\"\r\n      [validator]=\"validator\"\r\n      [icon]=\"icon\"\r\n      [iconSpin]=\"iconSpin\"\r\n      [placeholder]=\"placeholder\"\r\n      [readonly]=\"getReadonly\"\r\n      [clearable]=\"showClearable\"\r\n      [(ngModel)]=\"displayValue\"\r\n      [valueTpl]=\"valueTpl ? valueTpl : nodeTpl\"\r\n      [valueTplContext]=\"valueTplContext\"\r\n      [size]=\"size\"\r\n      [bordered]=\"bordered\"\r\n      [before]=\"before\"\r\n      [after]=\"after\"\r\n      [pattern]=\"pattern\"\r\n      [message]=\"message\"\r\n      [pointer]=\"true\"\r\n      [inputPadding]=\"inputPadding\"\r\n      [(active)]=\"active\"\r\n      (clearEmit)=\"clearEmit()\"\r\n      (xKeydown)=\"onKeydown($event)\"\r\n      (xInput)=\"onInput($event)\"\r\n      (xFocus)=\"onFocus($event)\"\r\n      (xClick)=\"showPortal(true)\"\r\n      (xMouseenter)=\"menter()\"\r\n      (xMouseleave)=\"mleave()\"\r\n      (xComposition)=\"composition = $event\"\r\n    ></x-input>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #multipleValueTpl>\r\n  <x-tag\r\n    [@.disabled]=\"true\"\r\n    *ngFor=\"let node of displayNodes; index as i\"\r\n    [closable]=\"!disabled\"\r\n    (close)=\"closeNode($event, node, i)\"\r\n    [size]=\"size\"\r\n    >{{ showPath ? node.path : node.label }}</x-tag\r\n  >\r\n  <x-tag [@.disabled]=\"true\" *ngIf=\"showDisplayMore\" [size]=\"size\">\r\n    <ng-container *xOutlet=\"getMaxTagContent; context: { $surplus: selectedSurplus, $total: selectedTotal }\">{{\r\n      displayMore\r\n    }}</ng-container>\r\n  </x-tag>\r\n  <x-input\r\n    #multipleInput\r\n    *ngIf=\"search\"\r\n    bordered=\"false\"\r\n    [size]=\"size\"\r\n    inputPadding=\"0.275\"\r\n    [(ngModel)]=\"multipleSearchValue\"\r\n    (xInput)=\"onInput($event)\"\r\n    (xKeydown)=\"onKeydown($event)\"\r\n  ></x-input>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";x-tree-select{display:inline-block;width:12rem}.x-tree-select{margin:0;padding:0;width:100%}.x-tree-select x-input{width:100%}.x-tree-select-multiple .x-input-value-template-value{display:flex;align-items:center;margin-bottom:.125rem;flex-wrap:wrap;width:initial;height:initial!important}.x-tree-select-multiple .x-input-value-template-value>x-tag{display:inline-flex;margin-left:.0625rem;margin-top:.125rem}.x-tree-select-multiple .x-input-value-template-value>x-tag .x-tag-big{height:var(--x-height-large);line-height:var(--x-height-large);padding:0 var(--x-padding-large)}.x-tree-select-multiple .x-input-value-template-value>x-tag .x-tag-big>.x-icon{right:calc(-var(--x-padding-large)/2)}.x-tree-select-multiple .x-input-value-template-value>x-tag .x-tag-large{height:var(--x-height-medium);line-height:var(--x-height-medium);padding:0 var(--x-padding-medium)}.x-tree-select-multiple .x-input-value-template-value>x-tag .x-tag-large>.x-icon{right:calc(-var(--x-padding-medium)/2)}.x-tree-select-multiple .x-input-value-template-value>x-tag .x-tag-medium{height:var(--x-height-small);line-height:var(--x-height-small);padding:0 var(--x-padding-small)}.x-tree-select-multiple .x-input-value-template-value>x-tag .x-tag-medium>.x-icon{right:calc(-var(--x-padding-small)/2)}.x-tree-select-multiple .x-input-value-template-value>x-tag .x-tag-small{height:var(--x-height-mini);line-height:var(--x-height-mini);padding:0 var(--x-padding-mini)}.x-tree-select-multiple .x-input-value-template-value>x-tag .x-tag-small>.x-icon{right:calc(-var(--x-padding-mini)/2)}.x-tree-select-multiple .x-input-value-template-value>x-tag .x-tag-mini{height:1.125rem;line-height:1.125rem;padding:0 .125rem}.x-tree-select-multiple .x-input-value-template-value>x-tag .x-tag-mini>.x-icon{right:-.0625rem}.x-tree-select-multiple .x-input-value-template-value>x-input{margin-top:.125rem;width:5rem;min-width:3rem}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-big>.x-input-row>.x-input-input>input,.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-big>.x-input-row>.x-input-input>.x-input-row-before:not(.x-input-row-before-template),.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-big>.x-input-row>.x-input-input>.x-input-row-after:not(.x-input-row-after-template),.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-big>.x-input-row>.x-input-input>.x-input-value-template-value{height:var(--x-height-large);line-height:var(--x-height-large);padding:0 var(--x-padding-large)}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-big>.x-input-row>.x-input-input>.x-input-max-length{height:var(--x-height-large);line-height:var(--x-height-large)}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-big>.x-input-row>.x-input-row-before:not(.x-input-row-before-template),.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-big>.x-input-row>.x-input-row-after:not(.x-input-row-after-template){height:var(--x-height-large);line-height:var(--x-height-large);padding:0 var(--x-padding-large)}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-big>label{height:var(--x-height-large);line-height:var(--x-height-large)}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-large>.x-input-row>.x-input-input>input,.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-large>.x-input-row>.x-input-input>.x-input-row-before:not(.x-input-row-before-template),.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-large>.x-input-row>.x-input-input>.x-input-row-after:not(.x-input-row-after-template),.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-large>.x-input-row>.x-input-input>.x-input-value-template-value{height:var(--x-height-medium);line-height:var(--x-height-medium);padding:0 var(--x-padding-medium)}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-large>.x-input-row>.x-input-input>.x-input-max-length{height:var(--x-height-medium);line-height:var(--x-height-medium)}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-large>.x-input-row>.x-input-row-before:not(.x-input-row-before-template),.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-large>.x-input-row>.x-input-row-after:not(.x-input-row-after-template){height:var(--x-height-medium);line-height:var(--x-height-medium);padding:0 var(--x-padding-medium)}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-large>label{height:var(--x-height-medium);line-height:var(--x-height-medium)}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-medium>.x-input-row>.x-input-input>input,.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-medium>.x-input-row>.x-input-input>.x-input-row-before:not(.x-input-row-before-template),.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-medium>.x-input-row>.x-input-input>.x-input-row-after:not(.x-input-row-after-template),.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-medium>.x-input-row>.x-input-input>.x-input-value-template-value{height:var(--x-height-small);line-height:var(--x-height-small);padding:0 var(--x-padding-small)}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-medium>.x-input-row>.x-input-input>.x-input-max-length{height:var(--x-height-small);line-height:var(--x-height-small)}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-medium>.x-input-row>.x-input-row-before:not(.x-input-row-before-template),.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-medium>.x-input-row>.x-input-row-after:not(.x-input-row-after-template){height:var(--x-height-small);line-height:var(--x-height-small);padding:0 var(--x-padding-small)}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-medium>label{height:var(--x-height-small);line-height:var(--x-height-small)}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-small>.x-input-row>.x-input-input>input,.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-small>.x-input-row>.x-input-input>.x-input-row-before:not(.x-input-row-before-template),.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-small>.x-input-row>.x-input-input>.x-input-row-after:not(.x-input-row-after-template),.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-small>.x-input-row>.x-input-input>.x-input-value-template-value{height:var(--x-height-mini);line-height:var(--x-height-mini);padding:0 var(--x-padding-mini)}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-small>.x-input-row>.x-input-input>.x-input-max-length{height:var(--x-height-mini);line-height:var(--x-height-mini)}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-small>.x-input-row>.x-input-row-before:not(.x-input-row-before-template),.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-small>.x-input-row>.x-input-row-after:not(.x-input-row-after-template){height:var(--x-height-mini);line-height:var(--x-height-mini);padding:0 var(--x-padding-mini)}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-small>label{height:var(--x-height-mini);line-height:var(--x-height-mini)}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-mini>.x-input-row>.x-input-input>input,.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-mini>.x-input-row>.x-input-input>.x-input-row-before:not(.x-input-row-before-template),.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-mini>.x-input-row>.x-input-input>.x-input-row-after:not(.x-input-row-after-template),.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-mini>.x-input-row>.x-input-input>.x-input-value-template-value{height:1.125rem;line-height:1.125rem;padding:0 .125rem}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-mini>.x-input-row>.x-input-input>.x-input-max-length{height:1.125rem;line-height:1.125rem}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-mini>.x-input-row>.x-input-row-before:not(.x-input-row-before-template),.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-mini>.x-input-row>.x-input-row-after:not(.x-input-row-after-template){height:1.125rem;line-height:1.125rem;padding:0 .125rem}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-mini>label{height:1.125rem;line-height:1.125rem}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-row>.x-input-input>input{background-color:transparent}.x-tree-select-portal{margin:.0625rem 0;font-size:var(--x-font-size);color:var(--x-text);border:var(--x-border-width) var(--x-border-style) var(--x-border);width:100%;border-radius:var(--x-border-radius);box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color);position:relative;display:flex;flex-direction:column;background-color:var(--x-background);overflow:hidden auto;max-height:calc(calc(var(--x-font-size) + .875rem) * 6 + var(--x-border-width) * 7)}.x-tree-select-portal x-tree{width:100%}.x-tree-select-portal x-empty{margin:1rem;display:block}\n"] }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i1$1.XPortalService }, { type: i0.ViewContainerRef }, { type: i2.Overlay }, { type: i1.XI18nService }, { type: i4$1.XConfigService }, { type: i0.ElementRef }], propDecorators: { inputCom: [{
+            args: [{ selector: `${XTreeSelectPrefix}`, standalone: true, imports: [CommonModule, FormsModule, ReactiveFormsModule, XInputComponent, XTagComponent, XOutletDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [XValueAccessor(XTreeSelectComponent)], template: "<div #treeSelect class=\"x-tree-select\" [class.x-tree-select-multiple]=\"multiple\">\r\n  <div class=\"x-tree-select-row\">\r\n    <x-input\r\n      #inputCom\r\n      type=\"text\"\r\n      [label]=\"label\"\r\n      [labelWidth]=\"labelWidth\"\r\n      [labelAlign]=\"labelAlign\"\r\n      [justify]=\"justify\"\r\n      [align]=\"align\"\r\n      [direction]=\"direction\"\r\n      [required]=\"required\"\r\n      [disabled]=\"disabled\"\r\n      [validator]=\"validator\"\r\n      [icon]=\"icon\"\r\n      [iconSpin]=\"iconSpin\"\r\n      [placeholder]=\"placeholder\"\r\n      [readonly]=\"getReadonly\"\r\n      [clearable]=\"showClearable\"\r\n      [(ngModel)]=\"displayValue\"\r\n      [valueTpl]=\"valueTpl ? valueTpl : nodeTpl\"\r\n      [valueTplContext]=\"valueTplContext\"\r\n      [size]=\"size\"\r\n      [bordered]=\"bordered\"\r\n      [before]=\"before\"\r\n      [after]=\"after\"\r\n      [pattern]=\"pattern\"\r\n      [message]=\"message\"\r\n      [pointer]=\"true\"\r\n      [inputPadding]=\"inputPadding\"\r\n      [(active)]=\"active\"\r\n      (clearEmit)=\"clearEmit()\"\r\n      (xKeydown)=\"onKeydown($event)\"\r\n      (xInput)=\"onInput($event)\"\r\n      (xFocus)=\"onFocus($event)\"\r\n      (xClick)=\"showPortal(true)\"\r\n      (xMouseenter)=\"menter()\"\r\n      (xMouseleave)=\"mleave()\"\r\n      (xComposition)=\"composition = $event\"\r\n    ></x-input>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #multipleValueTpl>\r\n  <x-tag\r\n    [@.disabled]=\"true\"\r\n    *ngFor=\"let node of displayNodes; index as i\"\r\n    [closable]=\"!disabled\"\r\n    (close)=\"closeNode($event, node, i)\"\r\n    [size]=\"size\"\r\n    >{{ showPath ? node.path : node.label }}</x-tag\r\n  >\r\n  <x-tag [@.disabled]=\"true\" *ngIf=\"showDisplayMore\" [size]=\"size\">\r\n    <ng-container *xOutlet=\"getMaxTagContent; context: { $surplus: selectedSurplus, $total: selectedTotal }\">{{\r\n      displayMore\r\n    }}</ng-container>\r\n  </x-tag>\r\n  <x-input\r\n    #multipleInput\r\n    *ngIf=\"search\"\r\n    bordered=\"false\"\r\n    [size]=\"size\"\r\n    inputPadding=\"0.275\"\r\n    [(ngModel)]=\"multipleSearchValue\"\r\n    (xInput)=\"onInput($event)\"\r\n    (xKeydown)=\"onKeydown($event)\"\r\n  ></x-input>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";x-tree-select{display:inline-block;width:12rem}.x-tree-select{margin:0;padding:0;width:100%}.x-tree-select x-input{width:100%}.x-tree-select-multiple .x-input-value-template-value{display:flex;align-items:center;margin-bottom:.125rem;flex-wrap:wrap;width:initial;height:initial!important}.x-tree-select-multiple .x-input-value-template-value>x-tag{display:inline-flex;margin-left:.0625rem;margin-top:.125rem}.x-tree-select-multiple .x-input-value-template-value>x-tag .x-tag-big{height:var(--x-height-large);line-height:var(--x-height-large);padding:0 var(--x-padding-large)}.x-tree-select-multiple .x-input-value-template-value>x-tag .x-tag-big>.x-icon{right:calc(-var(--x-padding-large)/2)}.x-tree-select-multiple .x-input-value-template-value>x-tag .x-tag-large{height:var(--x-height-medium);line-height:var(--x-height-medium);padding:0 var(--x-padding-medium)}.x-tree-select-multiple .x-input-value-template-value>x-tag .x-tag-large>.x-icon{right:calc(-var(--x-padding-medium)/2)}.x-tree-select-multiple .x-input-value-template-value>x-tag .x-tag-medium{height:var(--x-height-small);line-height:var(--x-height-small);padding:0 var(--x-padding-small)}.x-tree-select-multiple .x-input-value-template-value>x-tag .x-tag-medium>.x-icon{right:calc(-var(--x-padding-small)/2)}.x-tree-select-multiple .x-input-value-template-value>x-tag .x-tag-small{height:var(--x-height-mini);line-height:var(--x-height-mini);padding:0 var(--x-padding-mini)}.x-tree-select-multiple .x-input-value-template-value>x-tag .x-tag-small>.x-icon{right:calc(-var(--x-padding-mini)/2)}.x-tree-select-multiple .x-input-value-template-value>x-tag .x-tag-mini{height:1.125rem;line-height:1.125rem;padding:0 .125rem}.x-tree-select-multiple .x-input-value-template-value>x-tag .x-tag-mini>.x-icon{right:-.0625rem}.x-tree-select-multiple .x-input-value-template-value>x-input{margin-top:.125rem;width:5rem;min-width:3rem}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-big>.x-input-row>.x-input-input>input,.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-big>.x-input-row>.x-input-input>.x-input-row-before:not(.x-input-row-before-template),.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-big>.x-input-row>.x-input-input>.x-input-row-after:not(.x-input-row-after-template),.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-big>.x-input-row>.x-input-input>.x-input-value-template-value{height:var(--x-height-large);line-height:var(--x-height-large);padding:0 var(--x-padding-large)}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-big>.x-input-row>.x-input-input>.x-input-max-length{height:var(--x-height-large);line-height:var(--x-height-large)}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-big>.x-input-row>.x-input-row-before:not(.x-input-row-before-template),.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-big>.x-input-row>.x-input-row-after:not(.x-input-row-after-template){height:var(--x-height-large);line-height:var(--x-height-large);padding:0 var(--x-padding-large)}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-big>label{height:var(--x-height-large);line-height:var(--x-height-large)}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-large>.x-input-row>.x-input-input>input,.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-large>.x-input-row>.x-input-input>.x-input-row-before:not(.x-input-row-before-template),.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-large>.x-input-row>.x-input-input>.x-input-row-after:not(.x-input-row-after-template),.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-large>.x-input-row>.x-input-input>.x-input-value-template-value{height:var(--x-height-medium);line-height:var(--x-height-medium);padding:0 var(--x-padding-medium)}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-large>.x-input-row>.x-input-input>.x-input-max-length{height:var(--x-height-medium);line-height:var(--x-height-medium)}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-large>.x-input-row>.x-input-row-before:not(.x-input-row-before-template),.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-large>.x-input-row>.x-input-row-after:not(.x-input-row-after-template){height:var(--x-height-medium);line-height:var(--x-height-medium);padding:0 var(--x-padding-medium)}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-large>label{height:var(--x-height-medium);line-height:var(--x-height-medium)}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-medium>.x-input-row>.x-input-input>input,.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-medium>.x-input-row>.x-input-input>.x-input-row-before:not(.x-input-row-before-template),.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-medium>.x-input-row>.x-input-input>.x-input-row-after:not(.x-input-row-after-template),.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-medium>.x-input-row>.x-input-input>.x-input-value-template-value{height:var(--x-height-small);line-height:var(--x-height-small);padding:0 var(--x-padding-small)}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-medium>.x-input-row>.x-input-input>.x-input-max-length{height:var(--x-height-small);line-height:var(--x-height-small)}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-medium>.x-input-row>.x-input-row-before:not(.x-input-row-before-template),.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-medium>.x-input-row>.x-input-row-after:not(.x-input-row-after-template){height:var(--x-height-small);line-height:var(--x-height-small);padding:0 var(--x-padding-small)}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-medium>label{height:var(--x-height-small);line-height:var(--x-height-small)}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-small>.x-input-row>.x-input-input>input,.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-small>.x-input-row>.x-input-input>.x-input-row-before:not(.x-input-row-before-template),.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-small>.x-input-row>.x-input-input>.x-input-row-after:not(.x-input-row-after-template),.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-small>.x-input-row>.x-input-input>.x-input-value-template-value{height:var(--x-height-mini);line-height:var(--x-height-mini);padding:0 var(--x-padding-mini)}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-small>.x-input-row>.x-input-input>.x-input-max-length{height:var(--x-height-mini);line-height:var(--x-height-mini)}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-small>.x-input-row>.x-input-row-before:not(.x-input-row-before-template),.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-small>.x-input-row>.x-input-row-after:not(.x-input-row-after-template){height:var(--x-height-mini);line-height:var(--x-height-mini);padding:0 var(--x-padding-mini)}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-small>label{height:var(--x-height-mini);line-height:var(--x-height-mini)}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-mini>.x-input-row>.x-input-input>input,.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-mini>.x-input-row>.x-input-input>.x-input-row-before:not(.x-input-row-before-template),.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-mini>.x-input-row>.x-input-input>.x-input-row-after:not(.x-input-row-after-template),.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-mini>.x-input-row>.x-input-input>.x-input-value-template-value{height:1.125rem;line-height:1.125rem;padding:0 .125rem}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-mini>.x-input-row>.x-input-input>.x-input-max-length{height:1.125rem;line-height:1.125rem}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-mini>.x-input-row>.x-input-row-before:not(.x-input-row-before-template),.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-mini>.x-input-row>.x-input-row-after:not(.x-input-row-after-template){height:1.125rem;line-height:1.125rem;padding:0 .125rem}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-mini>label{height:1.125rem;line-height:1.125rem}.x-tree-select-multiple .x-input-value-template-value>x-input .x-input-row>.x-input-input>input{background-color:transparent}.x-tree-select-portal{margin:.0625rem 0;font-size:var(--x-font-size);color:var(--x-text);border:var(--x-border-width) var(--x-border-style) var(--x-border);width:100%;border-radius:var(--x-border-radius);box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color);position:relative;display:flex;flex-direction:column;background-color:var(--x-background);overflow:hidden auto;max-height:calc(calc(var(--x-font-size) + .875rem) * 6 + var(--x-border-width) * 7)}.x-tree-select-portal x-tree{width:100%}.x-tree-select-portal x-empty{margin:1rem;display:block}\n"] }]
+        }], propDecorators: { inputCom: [{
                 type: ViewChild,
                 args: ['inputCom', { static: true }]
             }], treeSelect: [{
@@ -925,50 +918,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImpor
 
 class XTreeSelectModule {
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XTreeSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.2", ngImport: i0, type: XTreeSelectModule, declarations: [XTreeSelectComponent, XTreeSelectPortalComponent, XTreeSelectProperty], imports: [CommonModule,
-            FormsModule,
-            ReactiveFormsModule,
-            XPortalModule,
-            XInputModule,
-            XListModule,
-            XBaseFormModule,
-            XTagModule,
-            XI18nModule,
-            XOutletModule,
-            XTreeModule,
-            XEmptyModule], exports: [XTreeSelectComponent, XTreeSelectPortalComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XTreeSelectModule, imports: [CommonModule,
-            FormsModule,
-            ReactiveFormsModule,
-            XPortalModule,
-            XInputModule,
-            XListModule,
-            XBaseFormModule,
-            XTagModule,
-            XI18nModule,
-            XOutletModule,
-            XTreeModule,
-            XEmptyModule] }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.2", ngImport: i0, type: XTreeSelectModule, imports: [XTreeSelectComponent], exports: [XTreeSelectComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XTreeSelectModule, imports: [XTreeSelectComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XTreeSelectModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [XTreeSelectComponent, XTreeSelectPortalComponent, XTreeSelectProperty],
-                    exports: [XTreeSelectComponent, XTreeSelectPortalComponent],
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                        XPortalModule,
-                        XInputModule,
-                        XListModule,
-                        XBaseFormModule,
-                        XTagModule,
-                        XI18nModule,
-                        XOutletModule,
-                        XTreeModule,
-                        XEmptyModule
-                    ]
+                    declarations: [],
+                    exports: [XTreeSelectComponent],
+                    imports: [XTreeSelectComponent]
                 }]
         }] });