@ng-nest/ui 18.0.11 → 18.0.12

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, Directive, inject, Renderer2, ElementRef, ChangeDetectorRef, HostBinding, NgModule } from '@angular/core';
+import { input, Directive, inject, Renderer2, ElementRef, ChangeDetectorRef, effect, HostBinding, NgModule } from '@angular/core';
 import { Subject, fromEvent, takeUntil, of, delay, tap } from 'rxjs';
 import { XPropertyFunction, XToNumber, XToBoolean, XComputed } from '@ng-nest/ui/core';
 import { DOCUMENT } from '@angular/common';
@@ -42,21 +42,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
         }] });
 
 class XRippleDirective extends XRippleProperty {
+    get className() {
+        return `${XRipplePrefix} ${XRipplePrefix}-${this.type()}`;
+    }
     constructor() {
-        super(...arguments);
+        super();
         this.unsub = new Subject();
         this.renderer = inject(Renderer2);
         this.elementRef = inject(ElementRef);
         this.cdr = inject(ChangeDetectorRef);
         this.document = inject(DOCUMENT);
+        this.downEvent = null;
+        this.upEvent = null;
+        effect(() => {
+            if (this.disabled()) {
+                this.downEvent?.unsubscribe();
+                this.upEvent?.unsubscribe();
+            }
+            else {
+                this.downEvent?.unsubscribe();
+                this.upEvent?.unsubscribe();
+                this.setEvent();
+            }
+        });
     }
-    get className() {
-        return `${XRipplePrefix} ${XRipplePrefix}-${this.type()}`;
+    ngOnDestroy() {
+        this.unsub.next();
+        this.unsub.complete();
     }
-    ngOnInit() {
-        if (this.disabled())
-            return;
-        fromEvent(this.elementRef.nativeElement, 'mousedown')
+    setEvent() {
+        this.downEvent = fromEvent(this.elementRef.nativeElement, 'mousedown')
             .pipe(takeUntil(this.unsub))
             .subscribe((event) => {
             const eleRect = this.elementRef.nativeElement.getBoundingClientRect();
@@ -75,7 +90,7 @@ class XRippleDirective extends XRippleProperty {
             ripple.style.transform = 'scale(1)';
             ripple.style.opacity = '0.3';
             const downTime = new Date().getTime();
-            const upEvent = fromEvent(this.document.documentElement, 'mouseup')
+            this.upEvent = fromEvent(this.document.documentElement, 'mouseup')
                 .pipe(takeUntil(this.unsub))
                 .subscribe(() => {
                 const upTime = new Date().getTime();
@@ -86,16 +101,12 @@ class XRippleDirective extends XRippleProperty {
                     }
                     // TODO: use zoneless, renderer removeChild will not take effect immediately
                     this.cdr.markForCheck();
-                    upEvent.unsubscribe();
+                    this.upEvent?.unsubscribe();
                 }), takeUntil(this.unsub))
                     .subscribe();
             });
         });
     }
-    ngOnDestroy() {
-        this.unsub.next();
-        this.unsub.complete();
-    }
     distanceToFurthestCorner(x, y, rect) {
         const distX = Math.max(Math.abs(x - rect.left), Math.abs(x - rect.right));
         const distY = Math.max(Math.abs(y - rect.top), Math.abs(y - rect.bottom));
@@ -104,7 +115,7 @@ class XRippleDirective extends XRippleProperty {
     enforceStyleRecalculation(element) {
         XComputed(element).getPropertyValue('opacity');
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: XRippleDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: XRippleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.2", type: XRippleDirective, isStandalone: true, selector: "[x-ripple]", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: XRippleDirective, decorators: [{
@@ -113,7 +124,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                     selector: `[${XRipplePrefix}]`,
                     standalone: true
                 }]
-        }], propDecorators: { className: [{
+        }], ctorParameters: () => [], propDecorators: { className: [{
                 type: HostBinding,
                 args: ['class']
             }] } });

package/fesm2022/ng-nest-ui-ripple.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-nest-ui-ripple.mjs","sources":["../../../../lib/ng-nest/ui/ripple/ripple.property.ts","../../../../lib/ng-nest/ui/ripple/ripple.directive.ts","../../../../lib/ng-nest/ui/ripple/ripple.module.ts","../../../../lib/ng-nest/ui/ripple/ng-nest-ui-ripple.ts"],"sourcesContent":["import { XPropertyFunction, XToBoolean, XToNumber } from '@ng-nest/ui/core';\r\nimport { Directive, input } from '@angular/core';\r\nimport type { XBoolean, XNumber, XType } from '@ng-nest/ui/core';\r\n\r\n/**\r\n * Ripple\r\n * @selector x-ripple\r\n * @decorator directive\r\n */\r\nexport const XRipplePrefix = 'x-ripple';\r\nconst X_RIPPLE_CONFIG_NAME = 'ripple';\r\n\r\n/**\r\n * Ripple Property\r\n */\r\n@Directive({ selector: '[x-ripple]' })\r\nexport class XRippleProperty extends XPropertyFunction(X_RIPPLE_CONFIG_NAME) {\r\n  /**\r\n   * @zh_CN 类型\r\n   * @en_US Types of\r\n   */\r\n  readonly type = input<XRippleType>(this.config?.type ?? 'initial');\r\n  /**\r\n   * @zh_CN 执行时间\r\n   * @en_US The execution time\r\n   */\r\n  readonly duration = input<number, XNumber>(500, {transform: XToNumber});\r\n  /**\r\n   * @zh_CN 禁用\r\n   * @en_US Disable\r\n   */\r\n  readonly disabled = input<boolean, XBoolean>(false, { transform: XToBoolean });\r\n}\r\n\r\n/**\r\n * @zh_CN 波纹类型\r\n * @en_US Ripple type\r\n */\r\nexport type XRippleType = XType;\r\n","import {\r\n  OnInit,\r\n  Renderer2,\r\n  ElementRef,\r\n  Directive,\r\n  OnDestroy,\r\n  inject,\r\n  HostBinding,\r\n  ChangeDetectorRef\r\n} from '@angular/core';\r\nimport { delay, fromEvent, of, Subject, takeUntil, tap } from 'rxjs';\r\nimport { XRipplePrefix, XRippleProperty } from './ripple.property';\r\nimport { XComputed } from '@ng-nest/ui/core';\r\nimport { DOCUMENT } from '@angular/common';\r\n\r\n@Directive({\r\n  selector: `[${XRipplePrefix}]`,\r\n  standalone: true\r\n})\r\nexport class XRippleDirective extends XRippleProperty implements OnInit, OnDestroy {\r\n  @HostBinding('class') get className() {\r\n    return `${XRipplePrefix} ${XRipplePrefix}-${this.type()}`;\r\n  }\r\n\r\n  private unsub = new Subject<void>();\r\n  private renderer = inject(Renderer2);\r\n  private elementRef = inject(ElementRef);\r\n  private cdr = inject(ChangeDetectorRef);\r\n  private document = inject(DOCUMENT);\r\n\r\n  ngOnInit() {\r\n    if (this.disabled()) return;\r\n\r\n    fromEvent<MouseEvent>(this.elementRef.nativeElement, 'mousedown')\r\n      .pipe(takeUntil(this.unsub))\r\n      .subscribe((event) => {\r\n        const eleRect = this.elementRef.nativeElement.getBoundingClientRect();\r\n        const radius = this.distanceToFurthestCorner(event.x, event.y, eleRect);\r\n        const offsetX = event.x - eleRect.left;\r\n        const offsetY = event.y - eleRect.top;\r\n        const ripple = this.renderer.createElement('div');\r\n        this.renderer.addClass(ripple, 'x-ripple-element');\r\n        ripple.style.left = `${offsetX - radius}px`;\r\n        ripple.style.top = `${offsetY - radius}px`;\r\n        ripple.style.height = `${radius * 2}px`;\r\n        ripple.style.width = `${radius * 2}px`;\r\n        ripple.style.transitionDuration = `${this.duration()}ms`;\r\n        this.renderer.appendChild(this.elementRef.nativeElement, ripple);\r\n        this.enforceStyleRecalculation(ripple);\r\n        ripple.style.transform = 'scale(1)';\r\n        ripple.style.opacity = '0.3';\r\n        const downTime = new Date().getTime();\r\n\r\n        const upEvent = fromEvent<MouseEvent>(this.document.documentElement, 'mouseup')\r\n          .pipe(takeUntil(this.unsub))\r\n          .subscribe(() => {\r\n            const upTime = new Date().getTime();\r\n            of(true)\r\n              .pipe(\r\n                delay(upTime - downTime > this.duration() ? 0 : this.duration() - (upTime - downTime)),\r\n                tap(() => {\r\n                  if (this.renderer.parentNode(ripple)) {\r\n                    this.renderer.removeChild(this.elementRef.nativeElement, ripple);\r\n                  }\r\n                  // TODO: use zoneless, renderer removeChild will not take effect immediately\r\n                  this.cdr.markForCheck();\r\n                  upEvent.unsubscribe();\r\n                }),\r\n                takeUntil(this.unsub)\r\n              )\r\n              .subscribe();\r\n          });\r\n      });\r\n  }\r\n\r\n  ngOnDestroy(): void {\r\n    this.unsub.next();\r\n    this.unsub.complete();\r\n  }\r\n\r\n  distanceToFurthestCorner(x: number, y: number, rect: DOMRect) {\r\n    const distX = Math.max(Math.abs(x - rect.left), Math.abs(x - rect.right));\r\n    const distY = Math.max(Math.abs(y - rect.top), Math.abs(y - rect.bottom));\r\n    return Math.sqrt(distX * distX + distY * distY);\r\n  }\r\n\r\n  enforceStyleRecalculation(element: HTMLElement) {\r\n    XComputed(element).getPropertyValue('opacity');\r\n  }\r\n}\r\n","import { NgModule } from '@angular/core';\r\nimport { XRippleDirective } from './ripple.directive';\r\n\r\n@NgModule({\r\n  imports: [XRippleDirective],\r\n  exports: [XRippleDirective]\r\n})\r\nexport class XRippleModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ng-nest-ui-ripple.mjs","sources":["../../../../lib/ng-nest/ui/ripple/ripple.property.ts","../../../../lib/ng-nest/ui/ripple/ripple.directive.ts","../../../../lib/ng-nest/ui/ripple/ripple.module.ts","../../../../lib/ng-nest/ui/ripple/ng-nest-ui-ripple.ts"],"sourcesContent":["import { XPropertyFunction, XToBoolean, XToNumber } from '@ng-nest/ui/core';\r\nimport { Directive, input } from '@angular/core';\r\nimport type { XBoolean, XNumber, XType } from '@ng-nest/ui/core';\r\n\r\n/**\r\n * Ripple\r\n * @selector x-ripple\r\n * @decorator directive\r\n */\r\nexport const XRipplePrefix = 'x-ripple';\r\nconst X_RIPPLE_CONFIG_NAME = 'ripple';\r\n\r\n/**\r\n * Ripple Property\r\n */\r\n@Directive({ selector: '[x-ripple]' })\r\nexport class XRippleProperty extends XPropertyFunction(X_RIPPLE_CONFIG_NAME) {\r\n  /**\r\n   * @zh_CN 类型\r\n   * @en_US Types of\r\n   */\r\n  readonly type = input<XRippleType>(this.config?.type ?? 'initial');\r\n  /**\r\n   * @zh_CN 执行时间\r\n   * @en_US The execution time\r\n   */\r\n  readonly duration = input<number, XNumber>(500, {transform: XToNumber});\r\n  /**\r\n   * @zh_CN 禁用\r\n   * @en_US Disable\r\n   */\r\n  readonly disabled = input<boolean, XBoolean>(false, { transform: XToBoolean });\r\n}\r\n\r\n/**\r\n * @zh_CN 波纹类型\r\n * @en_US Ripple type\r\n */\r\nexport type XRippleType = XType;\r\n","import {\r\n  Renderer2,\r\n  ElementRef,\r\n  Directive,\r\n  OnDestroy,\r\n  inject,\r\n  HostBinding,\r\n  ChangeDetectorRef,\r\n  effect\r\n} from '@angular/core';\r\nimport { delay, fromEvent, of, Subject, Subscription, takeUntil, tap } from 'rxjs';\r\nimport { XRipplePrefix, XRippleProperty } from './ripple.property';\r\nimport { XComputed } from '@ng-nest/ui/core';\r\nimport { DOCUMENT } from '@angular/common';\r\n\r\n@Directive({\r\n  selector: `[${XRipplePrefix}]`,\r\n  standalone: true\r\n})\r\nexport class XRippleDirective extends XRippleProperty implements OnDestroy {\r\n  @HostBinding('class') get className() {\r\n    return `${XRipplePrefix} ${XRipplePrefix}-${this.type()}`;\r\n  }\r\n\r\n  private unsub = new Subject<void>();\r\n  private renderer = inject(Renderer2);\r\n  private elementRef = inject(ElementRef);\r\n  private cdr = inject(ChangeDetectorRef);\r\n  private document = inject(DOCUMENT);\r\n  downEvent: Subscription | null = null;\r\n  upEvent: Subscription | null = null;\r\n\r\n  constructor() {\r\n    super();\r\n    effect(() => {\r\n      if (this.disabled()) {\r\n        this.downEvent?.unsubscribe();\r\n        this.upEvent?.unsubscribe();\r\n      } else {\r\n        this.downEvent?.unsubscribe();\r\n        this.upEvent?.unsubscribe();\r\n        this.setEvent();\r\n      }\r\n    });\r\n  }\r\n\r\n  ngOnDestroy(): void {\r\n    this.unsub.next();\r\n    this.unsub.complete();\r\n  }\r\n\r\n  setEvent() {\r\n    this.downEvent = fromEvent<MouseEvent>(this.elementRef.nativeElement, 'mousedown')\r\n      .pipe(takeUntil(this.unsub))\r\n      .subscribe((event) => {\r\n        const eleRect = this.elementRef.nativeElement.getBoundingClientRect();\r\n        const radius = this.distanceToFurthestCorner(event.x, event.y, eleRect);\r\n        const offsetX = event.x - eleRect.left;\r\n        const offsetY = event.y - eleRect.top;\r\n        const ripple = this.renderer.createElement('div');\r\n        this.renderer.addClass(ripple, 'x-ripple-element');\r\n        ripple.style.left = `${offsetX - radius}px`;\r\n        ripple.style.top = `${offsetY - radius}px`;\r\n        ripple.style.height = `${radius * 2}px`;\r\n        ripple.style.width = `${radius * 2}px`;\r\n        ripple.style.transitionDuration = `${this.duration()}ms`;\r\n        this.renderer.appendChild(this.elementRef.nativeElement, ripple);\r\n        this.enforceStyleRecalculation(ripple);\r\n        ripple.style.transform = 'scale(1)';\r\n        ripple.style.opacity = '0.3';\r\n        const downTime = new Date().getTime();\r\n\r\n        this.upEvent = fromEvent<MouseEvent>(this.document.documentElement, 'mouseup')\r\n          .pipe(takeUntil(this.unsub))\r\n          .subscribe(() => {\r\n            const upTime = new Date().getTime();\r\n            of(true)\r\n              .pipe(\r\n                delay(upTime - downTime > this.duration() ? 0 : this.duration() - (upTime - downTime)),\r\n                tap(() => {\r\n                  if (this.renderer.parentNode(ripple)) {\r\n                    this.renderer.removeChild(this.elementRef.nativeElement, ripple);\r\n                  }\r\n                  // TODO: use zoneless, renderer removeChild will not take effect immediately\r\n                  this.cdr.markForCheck();\r\n                  this.upEvent?.unsubscribe();\r\n                }),\r\n                takeUntil(this.unsub)\r\n              )\r\n              .subscribe();\r\n          });\r\n      });\r\n  }\r\n\r\n  distanceToFurthestCorner(x: number, y: number, rect: DOMRect) {\r\n    const distX = Math.max(Math.abs(x - rect.left), Math.abs(x - rect.right));\r\n    const distY = Math.max(Math.abs(y - rect.top), Math.abs(y - rect.bottom));\r\n    return Math.sqrt(distX * distX + distY * distY);\r\n  }\r\n\r\n  enforceStyleRecalculation(element: HTMLElement) {\r\n    XComputed(element).getPropertyValue('opacity');\r\n  }\r\n}\r\n","import { NgModule } from '@angular/core';\r\nimport { XRippleDirective } from './ripple.directive';\r\n\r\n@NgModule({\r\n  imports: [XRippleDirective],\r\n  exports: [XRippleDirective]\r\n})\r\nexport class XRippleModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

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

@@ -87,6 +87,13 @@ class XSelectProperty extends XFormControlFunction(X_SELECT_CONFIG_NAME) {
         this.portalMaxHeight = input(this.config?.portalMaxHeight ?? '12rem', {
             transform: XToCssPixelValue
         });
+        /**
+         * @zh_CN 下拉框的高度，启用虚拟滚动的时候必须设置一个高度
+         * @en_US The biggest height of the drop-down box
+         */
+        this.portalHeight = input('', {
+            transform: XToCssPixelValue
+        });
         /**
          * @zh_CN 下拉框的宽度
          * @en_US The width of the drop-down box
@@ -231,7 +238,7 @@ class XSelectProperty extends XFormControlFunction(X_SELECT_CONFIG_NAME) {
         this.inputValidator = input();
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: XSelectProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.2", type: XSelectProperty, selector: "x-select-property", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, async: { classPropertyName: "async", publicName: "async", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, selectAll: { classPropertyName: "selectAll", publicName: "selectAll", isSignal: true, isRequired: false, transformFunction: null }, selectAllText: { classPropertyName: "selectAllText", publicName: "selectAllText", isSignal: true, isRequired: false, transformFunction: null }, nodeTpl: { classPropertyName: "nodeTpl", publicName: "nodeTpl", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, portalMaxHeight: { classPropertyName: "portalMaxHeight", publicName: "portalMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, portalWidth: { classPropertyName: "portalWidth", publicName: "portalWidth", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, caseSensitive: { classPropertyName: "caseSensitive", publicName: "caseSensitive", isSignal: true, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null }, maxTagCount: { classPropertyName: "maxTagCount", publicName: "maxTagCount", isSignal: true, isRequired: false, transformFunction: null }, maxTagContent: { classPropertyName: "maxTagContent", publicName: "maxTagContent", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, allowInput: { classPropertyName: "allowInput", publicName: "allowInput", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, pointer: { classPropertyName: "pointer", publicName: "pointer", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelWidth: { classPropertyName: "labelWidth", publicName: "labelWidth", isSignal: true, isRequired: false, transformFunction: null }, labelAlign: { classPropertyName: "labelAlign", publicName: "labelAlign", isSignal: true, isRequired: false, transformFunction: null }, justify: { classPropertyName: "justify", publicName: "justify", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, valueTpl: { classPropertyName: "valueTpl", publicName: "valueTpl", isSignal: true, isRequired: false, transformFunction: null }, valueTplContext: { classPropertyName: "valueTplContext", publicName: "valueTplContext", isSignal: true, isRequired: false, transformFunction: null }, before: { classPropertyName: "before", publicName: "before", isSignal: true, isRequired: false, transformFunction: null }, after: { classPropertyName: "after", publicName: "after", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, inputValidator: { classPropertyName: "inputValidator", publicName: "inputValidator", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.2", type: XSelectProperty, selector: "x-select-property", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, async: { classPropertyName: "async", publicName: "async", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, selectAll: { classPropertyName: "selectAll", publicName: "selectAll", isSignal: true, isRequired: false, transformFunction: null }, selectAllText: { classPropertyName: "selectAllText", publicName: "selectAllText", isSignal: true, isRequired: false, transformFunction: null }, nodeTpl: { classPropertyName: "nodeTpl", publicName: "nodeTpl", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, portalMaxHeight: { classPropertyName: "portalMaxHeight", publicName: "portalMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, portalHeight: { classPropertyName: "portalHeight", publicName: "portalHeight", isSignal: true, isRequired: false, transformFunction: null }, portalWidth: { classPropertyName: "portalWidth", publicName: "portalWidth", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, caseSensitive: { classPropertyName: "caseSensitive", publicName: "caseSensitive", isSignal: true, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null }, maxTagCount: { classPropertyName: "maxTagCount", publicName: "maxTagCount", isSignal: true, isRequired: false, transformFunction: null }, maxTagContent: { classPropertyName: "maxTagContent", publicName: "maxTagContent", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, allowInput: { classPropertyName: "allowInput", publicName: "allowInput", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, pointer: { classPropertyName: "pointer", publicName: "pointer", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelWidth: { classPropertyName: "labelWidth", publicName: "labelWidth", isSignal: true, isRequired: false, transformFunction: null }, labelAlign: { classPropertyName: "labelAlign", publicName: "labelAlign", isSignal: true, isRequired: false, transformFunction: null }, justify: { classPropertyName: "justify", publicName: "justify", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, valueTpl: { classPropertyName: "valueTpl", publicName: "valueTpl", isSignal: true, isRequired: false, transformFunction: null }, valueTplContext: { classPropertyName: "valueTplContext", publicName: "valueTplContext", isSignal: true, isRequired: false, transformFunction: null }, before: { classPropertyName: "before", publicName: "before", isSignal: true, isRequired: false, transformFunction: null }, after: { classPropertyName: "after", publicName: "after", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, inputValidator: { classPropertyName: "inputValidator", publicName: "inputValidator", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: XSelectProperty, decorators: [{
             type: Component,
@@ -258,6 +265,7 @@ class XSelectPortalComponent {
         this.nodeTpl = input();
         this.inputCom = input();
         this.portalMaxHeight = input('');
+        this.portalHeight = input('');
         this.objectArray = input(false);
         this.selectAll = input(false);
         this.selectAllText = input('');
@@ -319,11 +327,11 @@ class XSelectPortalComponent {
         this.closeSubject.next();
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: XSelectPortalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.2", type: XSelectPortalComponent, isStandalone: true, selector: "x-select-portal", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, nodeTpl: { classPropertyName: "nodeTpl", publicName: "nodeTpl", isSignal: true, isRequired: false, transformFunction: null }, inputCom: { classPropertyName: "inputCom", publicName: "inputCom", isSignal: true, isRequired: false, transformFunction: null }, portalMaxHeight: { classPropertyName: "portalMaxHeight", publicName: "portalMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, objectArray: { classPropertyName: "objectArray", publicName: "objectArray", isSignal: true, isRequired: false, transformFunction: null }, selectAll: { classPropertyName: "selectAll", publicName: "selectAll", isSignal: true, isRequired: false, transformFunction: null }, selectAllText: { classPropertyName: "selectAllText", publicName: "selectAllText", isSignal: true, isRequired: false, transformFunction: null }, caseSensitive: { classPropertyName: "caseSensitive", publicName: "caseSensitive", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, keywordText: { classPropertyName: "keywordText", publicName: "keywordText", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", animating: "animating", nodeClick: "nodeClick" }, host: { listeners: { "@x-connect-base-animation.done": "done($event)", "@x-connect-base-animation.start": "start($event)" }, properties: { "@x-connect-base-animation": "this.getPlacement" } }, viewQueries: [{ propertyName: "list", first: true, predicate: ["list"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n  #selectPortal\r\n  class=\"x-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)=\"onNodeClick($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]=\"selectPortal\"\r\n    [virtualScroll]=\"virtualScroll()\"\r\n    [size]=\"size()!\"\r\n    [heightAdaption]=\"selectPortal\"\r\n    [keywordText]=\"keywordText()\"\r\n    [caseSensitive]=\"caseSensitive()\"\r\n    [inPortal]=\"true\"\r\n  ></x-list>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";x-select-portal{width:100%}.x-select-portal{color:var(--x-text);width:100%;border-radius:var(--x-border-small-radius);box-shadow:var(--x-box-shadow);position:relative;display:flex;background-color:var(--x-background-100);overflow:hidden auto;max-height:calc(calc(var(--x-font-size) + .875rem) * 6 + var(--x-border-width) * 7)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: XListComponent, selector: "x-list" }], animations: [XConnectBaseAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.2", type: XSelectPortalComponent, isStandalone: true, selector: "x-select-portal", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, nodeTpl: { classPropertyName: "nodeTpl", publicName: "nodeTpl", isSignal: true, isRequired: false, transformFunction: null }, inputCom: { classPropertyName: "inputCom", publicName: "inputCom", isSignal: true, isRequired: false, transformFunction: null }, portalMaxHeight: { classPropertyName: "portalMaxHeight", publicName: "portalMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, portalHeight: { classPropertyName: "portalHeight", publicName: "portalHeight", isSignal: true, isRequired: false, transformFunction: null }, objectArray: { classPropertyName: "objectArray", publicName: "objectArray", isSignal: true, isRequired: false, transformFunction: null }, selectAll: { classPropertyName: "selectAll", publicName: "selectAll", isSignal: true, isRequired: false, transformFunction: null }, selectAllText: { classPropertyName: "selectAllText", publicName: "selectAllText", isSignal: true, isRequired: false, transformFunction: null }, caseSensitive: { classPropertyName: "caseSensitive", publicName: "caseSensitive", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, keywordText: { classPropertyName: "keywordText", publicName: "keywordText", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", animating: "animating", nodeClick: "nodeClick" }, host: { listeners: { "@x-connect-base-animation.done": "done($event)", "@x-connect-base-animation.start": "start($event)" }, properties: { "@x-connect-base-animation": "this.getPlacement" } }, viewQueries: [{ propertyName: "list", first: true, predicate: ["list"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n  #selectPortal\r\n  class=\"x-select-portal\"\r\n  [class.x-select-portal-virtualScroll]=\"virtualScroll()\"\r\n  (click)=\"inputCom()?.inputFocus(); stopPropagation($event)\"\r\n  [style.maxHeight]=\"portalHeight() ? portalHeight() : portalMaxHeight()\"\r\n  [style.height]=\"portalHeight()\"\r\n>\r\n  <x-list\r\n    #list\r\n    [data]=\"data()!\"\r\n    [(ngModel)]=\"value\"\r\n    (nodeClick)=\"onNodeClick($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]=\"selectPortal\"\r\n    [virtualScroll]=\"virtualScroll()\"\r\n    [size]=\"size()!\"\r\n    [heightAdaption]=\"selectPortal\"\r\n    [keywordText]=\"keywordText()\"\r\n    [caseSensitive]=\"caseSensitive()\"\r\n    [inPortal]=\"true\"\r\n  ></x-list>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";x-select-portal{width:100%}.x-select-portal{color:var(--x-text);width:100%;border-radius:var(--x-border-small-radius);box-shadow:var(--x-box-shadow);position:relative;display:flex;background-color:var(--x-background-100);overflow:hidden auto;max-height:calc(calc(var(--x-font-size) + .875rem) * 6 + var(--x-border-width) * 7)}.x-select-portal-virtualScroll{overflow-y:hidden}.x-select-portal-virtualScroll .x-list-portal{padding:0}.x-select-portal-virtualScroll .x-list-portal .cdk-virtual-scroll-content-wrapper{padding:.125rem .25rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: XListComponent, selector: "x-list" }], animations: [XConnectBaseAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: XSelectPortalComponent, decorators: [{
             type: Component,
-            args: [{ selector: `${XSelectPortalPrefix}`, standalone: true, imports: [FormsModule, XListComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [XConnectBaseAnimation], template: "<div\r\n  #selectPortal\r\n  class=\"x-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)=\"onNodeClick($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]=\"selectPortal\"\r\n    [virtualScroll]=\"virtualScroll()\"\r\n    [size]=\"size()!\"\r\n    [heightAdaption]=\"selectPortal\"\r\n    [keywordText]=\"keywordText()\"\r\n    [caseSensitive]=\"caseSensitive()\"\r\n    [inPortal]=\"true\"\r\n  ></x-list>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";x-select-portal{width:100%}.x-select-portal{color:var(--x-text);width:100%;border-radius:var(--x-border-small-radius);box-shadow:var(--x-box-shadow);position:relative;display:flex;background-color:var(--x-background-100);overflow:hidden auto;max-height:calc(calc(var(--x-font-size) + .875rem) * 6 + var(--x-border-width) * 7)}\n"] }]
+            args: [{ selector: `${XSelectPortalPrefix}`, standalone: true, imports: [FormsModule, XListComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [XConnectBaseAnimation], template: "<div\r\n  #selectPortal\r\n  class=\"x-select-portal\"\r\n  [class.x-select-portal-virtualScroll]=\"virtualScroll()\"\r\n  (click)=\"inputCom()?.inputFocus(); stopPropagation($event)\"\r\n  [style.maxHeight]=\"portalHeight() ? portalHeight() : portalMaxHeight()\"\r\n  [style.height]=\"portalHeight()\"\r\n>\r\n  <x-list\r\n    #list\r\n    [data]=\"data()!\"\r\n    [(ngModel)]=\"value\"\r\n    (nodeClick)=\"onNodeClick($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]=\"selectPortal\"\r\n    [virtualScroll]=\"virtualScroll()\"\r\n    [size]=\"size()!\"\r\n    [heightAdaption]=\"selectPortal\"\r\n    [keywordText]=\"keywordText()\"\r\n    [caseSensitive]=\"caseSensitive()\"\r\n    [inPortal]=\"true\"\r\n  ></x-list>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";x-select-portal{width:100%}.x-select-portal{color:var(--x-text);width:100%;border-radius:var(--x-border-small-radius);box-shadow:var(--x-box-shadow);position:relative;display:flex;background-color:var(--x-background-100);overflow:hidden auto;max-height:calc(calc(var(--x-font-size) + .875rem) * 6 + var(--x-border-width) * 7)}.x-select-portal-virtualScroll{overflow-y:hidden}.x-select-portal-virtualScroll .x-list-portal{padding:0}.x-select-portal-virtualScroll .x-list-portal .cdk-virtual-scroll-content-wrapper{padding:.125rem .25rem}\n"] }]
         }], propDecorators: { getPlacement: [{
                 type: HostBinding,
                 args: ['@x-connect-base-animation']
@@ -348,6 +356,9 @@ class XSelectComponent extends XSelectProperty {
         this.value.set(value);
         this.setDisplayValue();
     }
+    get getWidth() {
+        return this.width();
+    }
     constructor() {
         super();
         this.i18n = inject(XI18nService);
@@ -441,6 +452,7 @@ class XSelectComponent extends XSelectProperty {
         effect(() => this.portalComponent()?.setInput('nodeTpl', this.nodeTpl()));
         effect(() => this.portalComponent()?.setInput('inputCom', this.inputCom()));
         effect(() => this.portalComponent()?.setInput('portalMaxHeight', this.portalMaxHeight()));
+        effect(() => this.portalComponent()?.setInput('portalHeight', this.portalHeight()));
         effect(() => this.portalComponent()?.setInput('objectArray', this.objectArray()));
         effect(() => this.portalComponent()?.setInput('selectAll', this.selectAll()));
         effect(() => this.portalComponent()?.setInput('selectAllText', this.selectAllText()));
@@ -653,7 +665,7 @@ class XSelectComponent extends XSelectProperty {
         if (this.nodes().length > 0) {
             if (this.multiple()) {
                 if (XIsEmpty(this.value())) {
-                    if (XIsUndefined(this.value()) || XIsNull(this.value())) {
+                    if (XIsUndefined(this.value()) || XIsNull(this.value()) || this.value() === '') {
                         this.value.set([]);
                     }
                     else {
@@ -989,12 +1001,15 @@ class XSelectComponent extends XSelectProperty {
         setTimeout(() => this.inputChange.next(this.multiple() ? this.multipleSearchValue() : this.displayValue()));
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: XSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: XSelectComponent, isStandalone: true, selector: "x-select", providers: [XValueAccessor(XSelectComponent)], viewQueries: [{ propertyName: "inputCom", first: true, predicate: ["inputCom"], descendants: true, isSignal: true }, { propertyName: "select", first: true, predicate: ["select"], descendants: true, isSignal: true }, { propertyName: "multipleValueTpl", first: true, predicate: ["multipleValueTpl"], descendants: true, isSignal: true }, { propertyName: "multipleInput", first: true, predicate: ["multipleInput"], descendants: true, isSignal: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "valueTemplate", first: true, predicate: ["valueTemplate"], descendants: true, isSignal: true }, { propertyName: "searchTemplate", first: true, predicate: ["searchTemplate"], descendants: true, isSignal: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\r\n  #select\r\n  class=\"x-select\"\r\n  [class.x-select-multiple]=\"multiple()\"\r\n  [class.x-select-search-single]=\"search() && !multiple()\"\r\n>\r\n  <div class=\"x-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      [width]=\"width()\"\r\n      [justify]=\"justify()\"\r\n      [align]=\"align()\"\r\n      [direction]=\"direction()\"\r\n      [disabled]=\"disabledComputed()\"\r\n      [required]=\"requiredComputed()\"\r\n      [validator]=\"validatorComputed()!\"\r\n      [inputValidator]=\"inputValidator()\"\r\n      [icon]=\"icon()\"\r\n      [iconSpin]=\"iconSpin()\"\r\n      [placeholder]=\"placeholder()\"\r\n      [readonly]=\"getReadonly()\"\r\n      [clearable]=\"showClearable()\"\r\n      [(ngModel)]=\"value\"\r\n      [valueTpl]=\"valueTplComputed()\"\r\n      [valueTplContext]=\"valueTplContextComputed()\"\r\n      [size]=\"size()\"\r\n      [bordered]=\"bordered()\"\r\n      [before]=\"before()\"\r\n      [after]=\"after()\"\r\n      [pattern]=\"patternComputed()\"\r\n      [message]=\"messageComputed()\"\r\n      [pointer]=\"pointer()\"\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.set($event)\"\r\n    ></x-input>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #valueTemplate>{{ displayValue() }}</ng-template>\r\n\r\n<ng-template #searchTemplate>\r\n  <x-input\r\n    #searchInput\r\n    [bordered]=\"false\"\r\n    [size]=\"size()\"\r\n    [(ngModel)]=\"displayValue\"\r\n    (xInput)=\"onInput($event)\"\r\n    (xKeydown)=\"onKeydown($event)\"\r\n  ></x-input>\r\n</ng-template>\r\n\r\n<ng-template #multipleValueTpl>\r\n  @for (node of displayNodes(); track node.id; let i = $index) {\r\n    <x-tag\r\n      [@.disabled]=\"true\"\r\n      [bordered]=\"false\"\r\n      [closable]=\"!disabledComputed()\"\r\n      [type]=\"'info'\"\r\n      (close)=\"closeNode($event, node, i)\"\r\n      [size]=\"size()\"\r\n      >{{ node.label }}</x-tag\r\n    >\r\n  }\r\n  @if (showDisplayMore()) {\r\n    <x-tag [@.disabled]=\"true\" [bordered]=\"false\" [type]=\"'info'\" [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  }\r\n\r\n  @if (search()) {\r\n    <x-input\r\n      #multipleInput\r\n      [bordered]=\"false\"\r\n      [size]=\"size()\"\r\n      [ngModel]=\"multipleSearchValue()\"\r\n      (ngModelChange)=\"multipleSearchValue.set($event)\"\r\n      (xInput)=\"onInput($event)\"\r\n      (xKeydown)=\"onKeydown($event)\"\r\n    ></x-input>\r\n  }\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";x-select{display:inline-block;width:12rem}.x-select{margin:0;padding:0}.x-select{width:100%}.x-select x-input{width:100%}.x-select-multiple .x-input-value-template-value,.x-select-search-single .x-input-value-template-value{display:flex;align-items:center;margin-bottom:.125rem;flex-wrap:wrap;width:initial;height:initial!important;left:.125rem!important}.x-select-multiple .x-input-value-template-value>x-tag,.x-select-search-single .x-input-value-template-value>x-tag{display:inline-flex;margin-left:.0625rem;margin-top:.125rem}.x-select-multiple .x-input-value-template-value>x-tag .x-tag-big,.x-select-search-single .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-select-multiple .x-input-value-template-value>x-tag .x-tag-big>.x-icon,.x-select-search-single .x-input-value-template-value>x-tag .x-tag-big>.x-icon{right:calc(-var(--x-padding-large)/2)}.x-select-multiple .x-input-value-template-value>x-tag .x-tag-large,.x-select-search-single .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-select-multiple .x-input-value-template-value>x-tag .x-tag-large>.x-icon,.x-select-search-single .x-input-value-template-value>x-tag .x-tag-large>.x-icon{right:calc(-var(--x-padding-medium)/2)}.x-select-multiple .x-input-value-template-value>x-tag .x-tag-medium,.x-select-search-single .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-select-multiple .x-input-value-template-value>x-tag .x-tag-medium>.x-icon,.x-select-search-single .x-input-value-template-value>x-tag .x-tag-medium>.x-icon{right:calc(-var(--x-padding-small)/2)}.x-select-multiple .x-input-value-template-value>x-tag .x-tag-small,.x-select-search-single .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-select-multiple .x-input-value-template-value>x-tag .x-tag-small>.x-icon,.x-select-search-single .x-input-value-template-value>x-tag .x-tag-small>.x-icon{right:calc(-var(--x-padding-mini)/2)}.x-select-multiple .x-input-value-template-value>x-tag .x-tag-mini,.x-select-search-single .x-input-value-template-value>x-tag .x-tag-mini{height:1.125rem;line-height:1.125rem;padding:0 .125rem}.x-select-multiple .x-input-value-template-value>x-tag .x-tag-mini>.x-icon,.x-select-search-single .x-input-value-template-value>x-tag .x-tag-mini>.x-icon{right:-.0625rem}.x-select-multiple .x-input-value-template-value>x-input,.x-select-search-single .x-input-value-template-value>x-input{margin-top:.125rem;width:5rem}.x-select-multiple .x-input-value-template-value>x-input .x-input-big>.x-input-row>.x-input-input>input,.x-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-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-select-multiple .x-input-value-template-value>x-input .x-input-big>.x-input-row>.x-input-input>.x-input-value-template-value,.x-select-search-single .x-input-value-template-value>x-input .x-input-big>.x-input-row>.x-input-input>input,.x-select-search-single .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-select-search-single .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-select-search-single .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-select-multiple .x-input-value-template-value>x-input .x-input-big>.x-input-row>.x-input-input>.x-input-max-length,.x-select-search-single .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-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-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),.x-select-search-single .x-input-value-template-value>x-input .x-input-big>.x-input-row>.x-input-row-before:not(.x-input-row-before-template),.x-select-search-single .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-select-multiple .x-input-value-template-value>x-input .x-input-big>label,.x-select-search-single .x-input-value-template-value>x-input .x-input-big>label{height:var(--x-height-large);line-height:var(--x-height-large)}.x-select-multiple .x-input-value-template-value>x-input .x-input-large>.x-input-row>.x-input-input>input,.x-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-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-select-multiple .x-input-value-template-value>x-input .x-input-large>.x-input-row>.x-input-input>.x-input-value-template-value,.x-select-search-single .x-input-value-template-value>x-input .x-input-large>.x-input-row>.x-input-input>input,.x-select-search-single .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-select-search-single .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-select-search-single .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-select-multiple .x-input-value-template-value>x-input .x-input-large>.x-input-row>.x-input-input>.x-input-max-length,.x-select-search-single .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-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-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),.x-select-search-single .x-input-value-template-value>x-input .x-input-large>.x-input-row>.x-input-row-before:not(.x-input-row-before-template),.x-select-search-single .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-select-multiple .x-input-value-template-value>x-input .x-input-large>label,.x-select-search-single .x-input-value-template-value>x-input .x-input-large>label{height:var(--x-height-medium);line-height:var(--x-height-medium)}.x-select-multiple .x-input-value-template-value>x-input .x-input-medium>.x-input-row>.x-input-input>input,.x-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-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-select-multiple .x-input-value-template-value>x-input .x-input-medium>.x-input-row>.x-input-input>.x-input-value-template-value,.x-select-search-single .x-input-value-template-value>x-input .x-input-medium>.x-input-row>.x-input-input>input,.x-select-search-single .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-select-search-single .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-select-search-single .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-select-multiple .x-input-value-template-value>x-input .x-input-medium>.x-input-row>.x-input-input>.x-input-max-length,.x-select-search-single .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-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-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),.x-select-search-single .x-input-value-template-value>x-input .x-input-medium>.x-input-row>.x-input-row-before:not(.x-input-row-before-template),.x-select-search-single .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-select-multiple .x-input-value-template-value>x-input .x-input-medium>label,.x-select-search-single .x-input-value-template-value>x-input .x-input-medium>label{height:var(--x-height-small);line-height:var(--x-height-small)}.x-select-multiple .x-input-value-template-value>x-input .x-input-small>.x-input-row>.x-input-input>input,.x-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-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-select-multiple .x-input-value-template-value>x-input .x-input-small>.x-input-row>.x-input-input>.x-input-value-template-value,.x-select-search-single .x-input-value-template-value>x-input .x-input-small>.x-input-row>.x-input-input>input,.x-select-search-single .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-select-search-single .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-select-search-single .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-select-multiple .x-input-value-template-value>x-input .x-input-small>.x-input-row>.x-input-input>.x-input-max-length,.x-select-search-single .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-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-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),.x-select-search-single .x-input-value-template-value>x-input .x-input-small>.x-input-row>.x-input-row-before:not(.x-input-row-before-template),.x-select-search-single .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-select-multiple .x-input-value-template-value>x-input .x-input-small>label,.x-select-search-single .x-input-value-template-value>x-input .x-input-small>label{height:var(--x-height-mini);line-height:var(--x-height-mini)}.x-select-multiple .x-input-value-template-value>x-input .x-input-mini>.x-input-row>.x-input-input>input,.x-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-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-select-multiple .x-input-value-template-value>x-input .x-input-mini>.x-input-row>.x-input-input>.x-input-value-template-value,.x-select-search-single .x-input-value-template-value>x-input .x-input-mini>.x-input-row>.x-input-input>input,.x-select-search-single .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-select-search-single .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-select-search-single .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-select-multiple .x-input-value-template-value>x-input .x-input-mini>.x-input-row>.x-input-input>.x-input-max-length,.x-select-search-single .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-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-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),.x-select-search-single .x-input-value-template-value>x-input .x-input-mini>.x-input-row>.x-input-row-before:not(.x-input-row-before-template),.x-select-search-single .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-select-multiple .x-input-value-template-value>x-input .x-input-mini>label,.x-select-search-single .x-input-value-template-value>x-input .x-input-mini>label{height:1.125rem;line-height:1.125rem}.x-select-multiple .x-input-value-template-value>x-input .x-input-row>.x-input-input>input,.x-select-search-single .x-input-value-template-value>x-input .x-input-row>.x-input-input>input{background-color:transparent}.x-select-search-single .x-input-value-template-value{left:.75rem!important}.x-select-search-single .x-input-value-template-value>x-input{width:100%}.x-select-search-single .x-input-value-template-value>x-input .x-input-row>.x-input-input>input{padding:0!important}.x-select-portal{color:var(--x-text);width:100%;border-radius:var(--x-border-small-radius);box-shadow:var(--x-box-shadow);position:relative;display:flex;background-color:var(--x-background-100);overflow:hidden auto;max-height:calc(calc(var(--x-font-size) + .875rem) * 6 + var(--x-border-width) * 7)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: XTagComponent, selector: "x-tag" }, { kind: "component", type: XInputComponent, selector: "x-input" }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: XSelectComponent, isStandalone: true, selector: "x-select", host: { properties: { "style.width": "this.getWidth" } }, providers: [XValueAccessor(XSelectComponent)], viewQueries: [{ propertyName: "inputCom", first: true, predicate: ["inputCom"], descendants: true, isSignal: true }, { propertyName: "select", first: true, predicate: ["select"], descendants: true, isSignal: true }, { propertyName: "multipleValueTpl", first: true, predicate: ["multipleValueTpl"], descendants: true, isSignal: true }, { propertyName: "multipleInput", first: true, predicate: ["multipleInput"], descendants: true, isSignal: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "valueTemplate", first: true, predicate: ["valueTemplate"], descendants: true, isSignal: true }, { propertyName: "searchTemplate", first: true, predicate: ["searchTemplate"], descendants: true, isSignal: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\r\n  #select\r\n  class=\"x-select\"\r\n  [class.x-select-multiple]=\"multiple()\"\r\n  [class.x-select-search-single]=\"search() && !multiple()\"\r\n>\r\n  <div class=\"x-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      [width]=\"width()\"\r\n      [justify]=\"justify()\"\r\n      [align]=\"align()\"\r\n      [direction]=\"direction()\"\r\n      [disabled]=\"disabledComputed()\"\r\n      [required]=\"requiredComputed()\"\r\n      [validator]=\"validatorComputed()!\"\r\n      [inputValidator]=\"inputValidator()\"\r\n      [icon]=\"icon()\"\r\n      [iconSpin]=\"iconSpin()\"\r\n      [placeholder]=\"placeholder()\"\r\n      [readonly]=\"getReadonly()\"\r\n      [clearable]=\"showClearable()\"\r\n      [(ngModel)]=\"value\"\r\n      [valueTpl]=\"valueTplComputed()\"\r\n      [valueTplContext]=\"valueTplContextComputed()\"\r\n      [size]=\"size()\"\r\n      [bordered]=\"bordered()\"\r\n      [before]=\"before()\"\r\n      [after]=\"after()\"\r\n      [pattern]=\"patternComputed()\"\r\n      [message]=\"messageComputed()\"\r\n      [pointer]=\"pointer()\"\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.set($event)\"\r\n    ></x-input>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #valueTemplate>{{ displayValue() }}</ng-template>\r\n\r\n<ng-template #searchTemplate>\r\n  <x-input\r\n    #searchInput\r\n    [bordered]=\"false\"\r\n    [size]=\"size()\"\r\n    [(ngModel)]=\"displayValue\"\r\n    (xInput)=\"onInput($event)\"\r\n    (xKeydown)=\"onKeydown($event)\"\r\n  ></x-input>\r\n</ng-template>\r\n\r\n<ng-template #multipleValueTpl>\r\n  @for (node of displayNodes(); track node.id; let i = $index) {\r\n    <x-tag\r\n      [@.disabled]=\"true\"\r\n      [bordered]=\"false\"\r\n      [closable]=\"!disabledComputed()\"\r\n      [type]=\"'info'\"\r\n      (close)=\"closeNode($event, node, i)\"\r\n      [size]=\"size()\"\r\n      >{{ node.label }}</x-tag\r\n    >\r\n  }\r\n  @if (showDisplayMore()) {\r\n    <x-tag [@.disabled]=\"true\" [bordered]=\"false\" [type]=\"'info'\" [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  }\r\n\r\n  @if (search()) {\r\n    <x-input\r\n      #multipleInput\r\n      [bordered]=\"false\"\r\n      [size]=\"size()\"\r\n      [ngModel]=\"multipleSearchValue()\"\r\n      (ngModelChange)=\"multipleSearchValue.set($event)\"\r\n      (xInput)=\"onInput($event)\"\r\n      (xKeydown)=\"onKeydown($event)\"\r\n    ></x-input>\r\n  }\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";x-select{display:inline-block;width:12rem}.x-select{margin:0;padding:0}.x-select{width:100%}.x-select x-input{width:100%}.x-select-multiple .x-input-value-template-value,.x-select-search-single .x-input-value-template-value{display:flex;align-items:center;margin-bottom:.125rem;flex-wrap:wrap;width:initial;height:initial!important;left:.125rem!important}.x-select-multiple .x-input-value-template-value>x-tag,.x-select-search-single .x-input-value-template-value>x-tag{display:inline-flex;margin-left:.0625rem;margin-top:.125rem}.x-select-multiple .x-input-value-template-value>x-tag .x-tag-big,.x-select-search-single .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-select-multiple .x-input-value-template-value>x-tag .x-tag-big>.x-icon,.x-select-search-single .x-input-value-template-value>x-tag .x-tag-big>.x-icon{right:calc(-var(--x-padding-large)/2)}.x-select-multiple .x-input-value-template-value>x-tag .x-tag-large,.x-select-search-single .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-select-multiple .x-input-value-template-value>x-tag .x-tag-large>.x-icon,.x-select-search-single .x-input-value-template-value>x-tag .x-tag-large>.x-icon{right:calc(-var(--x-padding-medium)/2)}.x-select-multiple .x-input-value-template-value>x-tag .x-tag-medium,.x-select-search-single .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-select-multiple .x-input-value-template-value>x-tag .x-tag-medium>.x-icon,.x-select-search-single .x-input-value-template-value>x-tag .x-tag-medium>.x-icon{right:calc(-var(--x-padding-small)/2)}.x-select-multiple .x-input-value-template-value>x-tag .x-tag-small,.x-select-search-single .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-select-multiple .x-input-value-template-value>x-tag .x-tag-small>.x-icon,.x-select-search-single .x-input-value-template-value>x-tag .x-tag-small>.x-icon{right:calc(-var(--x-padding-mini)/2)}.x-select-multiple .x-input-value-template-value>x-tag .x-tag-mini,.x-select-search-single .x-input-value-template-value>x-tag .x-tag-mini{height:1.125rem;line-height:1.125rem;padding:0 .125rem}.x-select-multiple .x-input-value-template-value>x-tag .x-tag-mini>.x-icon,.x-select-search-single .x-input-value-template-value>x-tag .x-tag-mini>.x-icon{right:-.0625rem}.x-select-multiple .x-input-value-template-value>x-input,.x-select-search-single .x-input-value-template-value>x-input{margin-top:.125rem;width:5rem}.x-select-multiple .x-input-value-template-value>x-input .x-input-big>.x-input-row>.x-input-input>input,.x-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-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-select-multiple .x-input-value-template-value>x-input .x-input-big>.x-input-row>.x-input-input>.x-input-value-template-value,.x-select-search-single .x-input-value-template-value>x-input .x-input-big>.x-input-row>.x-input-input>input,.x-select-search-single .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-select-search-single .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-select-search-single .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-select-multiple .x-input-value-template-value>x-input .x-input-big>.x-input-row>.x-input-input>.x-input-max-length,.x-select-search-single .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-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-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),.x-select-search-single .x-input-value-template-value>x-input .x-input-big>.x-input-row>.x-input-row-before:not(.x-input-row-before-template),.x-select-search-single .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-select-multiple .x-input-value-template-value>x-input .x-input-big>label,.x-select-search-single .x-input-value-template-value>x-input .x-input-big>label{height:var(--x-height-large);line-height:var(--x-height-large)}.x-select-multiple .x-input-value-template-value>x-input .x-input-large>.x-input-row>.x-input-input>input,.x-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-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-select-multiple .x-input-value-template-value>x-input .x-input-large>.x-input-row>.x-input-input>.x-input-value-template-value,.x-select-search-single .x-input-value-template-value>x-input .x-input-large>.x-input-row>.x-input-input>input,.x-select-search-single .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-select-search-single .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-select-search-single .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-select-multiple .x-input-value-template-value>x-input .x-input-large>.x-input-row>.x-input-input>.x-input-max-length,.x-select-search-single .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-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-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),.x-select-search-single .x-input-value-template-value>x-input .x-input-large>.x-input-row>.x-input-row-before:not(.x-input-row-before-template),.x-select-search-single .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-select-multiple .x-input-value-template-value>x-input .x-input-large>label,.x-select-search-single .x-input-value-template-value>x-input .x-input-large>label{height:var(--x-height-medium);line-height:var(--x-height-medium)}.x-select-multiple .x-input-value-template-value>x-input .x-input-medium>.x-input-row>.x-input-input>input,.x-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-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-select-multiple .x-input-value-template-value>x-input .x-input-medium>.x-input-row>.x-input-input>.x-input-value-template-value,.x-select-search-single .x-input-value-template-value>x-input .x-input-medium>.x-input-row>.x-input-input>input,.x-select-search-single .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-select-search-single .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-select-search-single .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-select-multiple .x-input-value-template-value>x-input .x-input-medium>.x-input-row>.x-input-input>.x-input-max-length,.x-select-search-single .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-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-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),.x-select-search-single .x-input-value-template-value>x-input .x-input-medium>.x-input-row>.x-input-row-before:not(.x-input-row-before-template),.x-select-search-single .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-select-multiple .x-input-value-template-value>x-input .x-input-medium>label,.x-select-search-single .x-input-value-template-value>x-input .x-input-medium>label{height:var(--x-height-small);line-height:var(--x-height-small)}.x-select-multiple .x-input-value-template-value>x-input .x-input-small>.x-input-row>.x-input-input>input,.x-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-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-select-multiple .x-input-value-template-value>x-input .x-input-small>.x-input-row>.x-input-input>.x-input-value-template-value,.x-select-search-single .x-input-value-template-value>x-input .x-input-small>.x-input-row>.x-input-input>input,.x-select-search-single .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-select-search-single .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-select-search-single .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-select-multiple .x-input-value-template-value>x-input .x-input-small>.x-input-row>.x-input-input>.x-input-max-length,.x-select-search-single .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-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-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),.x-select-search-single .x-input-value-template-value>x-input .x-input-small>.x-input-row>.x-input-row-before:not(.x-input-row-before-template),.x-select-search-single .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-select-multiple .x-input-value-template-value>x-input .x-input-small>label,.x-select-search-single .x-input-value-template-value>x-input .x-input-small>label{height:var(--x-height-mini);line-height:var(--x-height-mini)}.x-select-multiple .x-input-value-template-value>x-input .x-input-mini>.x-input-row>.x-input-input>input,.x-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-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-select-multiple .x-input-value-template-value>x-input .x-input-mini>.x-input-row>.x-input-input>.x-input-value-template-value,.x-select-search-single .x-input-value-template-value>x-input .x-input-mini>.x-input-row>.x-input-input>input,.x-select-search-single .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-select-search-single .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-select-search-single .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-select-multiple .x-input-value-template-value>x-input .x-input-mini>.x-input-row>.x-input-input>.x-input-max-length,.x-select-search-single .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-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-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),.x-select-search-single .x-input-value-template-value>x-input .x-input-mini>.x-input-row>.x-input-row-before:not(.x-input-row-before-template),.x-select-search-single .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-select-multiple .x-input-value-template-value>x-input .x-input-mini>label,.x-select-search-single .x-input-value-template-value>x-input .x-input-mini>label{height:1.125rem;line-height:1.125rem}.x-select-multiple .x-input-value-template-value>x-input .x-input-row>.x-input-input>input,.x-select-search-single .x-input-value-template-value>x-input .x-input-row>.x-input-input>input{background-color:transparent}.x-select-search-single .x-input-value-template-value{left:.75rem!important}.x-select-search-single .x-input-value-template-value>x-input{width:100%}.x-select-search-single .x-input-value-template-value>x-input .x-input-row>.x-input-input>input{padding:0!important}.x-select-portal{color:var(--x-text);width:100%;border-radius:var(--x-border-small-radius);box-shadow:var(--x-box-shadow);position:relative;display:flex;background-color:var(--x-background-100);overflow:hidden auto;max-height:calc(calc(var(--x-font-size) + .875rem) * 6 + var(--x-border-width) * 7)}.x-select-portal-virtualScroll{overflow-y:hidden}.x-select-portal-virtualScroll .x-list-portal{padding:0}.x-select-portal-virtualScroll .x-list-portal .cdk-virtual-scroll-content-wrapper{padding:.125rem .25rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: XTagComponent, selector: "x-tag" }, { kind: "component", type: XInputComponent, selector: "x-input" }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: XSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: `${XSelectPrefix}`, standalone: true, imports: [FormsModule, ReactiveFormsModule, XTagComponent, XInputComponent, XOutletDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [XValueAccessor(XSelectComponent)], template: "<div\r\n  #select\r\n  class=\"x-select\"\r\n  [class.x-select-multiple]=\"multiple()\"\r\n  [class.x-select-search-single]=\"search() && !multiple()\"\r\n>\r\n  <div class=\"x-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      [width]=\"width()\"\r\n      [justify]=\"justify()\"\r\n      [align]=\"align()\"\r\n      [direction]=\"direction()\"\r\n      [disabled]=\"disabledComputed()\"\r\n      [required]=\"requiredComputed()\"\r\n      [validator]=\"validatorComputed()!\"\r\n      [inputValidator]=\"inputValidator()\"\r\n      [icon]=\"icon()\"\r\n      [iconSpin]=\"iconSpin()\"\r\n      [placeholder]=\"placeholder()\"\r\n      [readonly]=\"getReadonly()\"\r\n      [clearable]=\"showClearable()\"\r\n      [(ngModel)]=\"value\"\r\n      [valueTpl]=\"valueTplComputed()\"\r\n      [valueTplContext]=\"valueTplContextComputed()\"\r\n      [size]=\"size()\"\r\n      [bordered]=\"bordered()\"\r\n      [before]=\"before()\"\r\n      [after]=\"after()\"\r\n      [pattern]=\"patternComputed()\"\r\n      [message]=\"messageComputed()\"\r\n      [pointer]=\"pointer()\"\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.set($event)\"\r\n    ></x-input>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #valueTemplate>{{ displayValue() }}</ng-template>\r\n\r\n<ng-template #searchTemplate>\r\n  <x-input\r\n    #searchInput\r\n    [bordered]=\"false\"\r\n    [size]=\"size()\"\r\n    [(ngModel)]=\"displayValue\"\r\n    (xInput)=\"onInput($event)\"\r\n    (xKeydown)=\"onKeydown($event)\"\r\n  ></x-input>\r\n</ng-template>\r\n\r\n<ng-template #multipleValueTpl>\r\n  @for (node of displayNodes(); track node.id; let i = $index) {\r\n    <x-tag\r\n      [@.disabled]=\"true\"\r\n      [bordered]=\"false\"\r\n      [closable]=\"!disabledComputed()\"\r\n      [type]=\"'info'\"\r\n      (close)=\"closeNode($event, node, i)\"\r\n      [size]=\"size()\"\r\n      >{{ node.label }}</x-tag\r\n    >\r\n  }\r\n  @if (showDisplayMore()) {\r\n    <x-tag [@.disabled]=\"true\" [bordered]=\"false\" [type]=\"'info'\" [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  }\r\n\r\n  @if (search()) {\r\n    <x-input\r\n      #multipleInput\r\n      [bordered]=\"false\"\r\n      [size]=\"size()\"\r\n      [ngModel]=\"multipleSearchValue()\"\r\n      (ngModelChange)=\"multipleSearchValue.set($event)\"\r\n      (xInput)=\"onInput($event)\"\r\n      (xKeydown)=\"onKeydown($event)\"\r\n    ></x-input>\r\n  }\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";x-select{display:inline-block;width:12rem}.x-select{margin:0;padding:0}.x-select{width:100%}.x-select x-input{width:100%}.x-select-multiple .x-input-value-template-value,.x-select-search-single .x-input-value-template-value{display:flex;align-items:center;margin-bottom:.125rem;flex-wrap:wrap;width:initial;height:initial!important;left:.125rem!important}.x-select-multiple .x-input-value-template-value>x-tag,.x-select-search-single .x-input-value-template-value>x-tag{display:inline-flex;margin-left:.0625rem;margin-top:.125rem}.x-select-multiple .x-input-value-template-value>x-tag .x-tag-big,.x-select-search-single .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-select-multiple .x-input-value-template-value>x-tag .x-tag-big>.x-icon,.x-select-search-single .x-input-value-template-value>x-tag .x-tag-big>.x-icon{right:calc(-var(--x-padding-large)/2)}.x-select-multiple .x-input-value-template-value>x-tag .x-tag-large,.x-select-search-single .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-select-multiple .x-input-value-template-value>x-tag .x-tag-large>.x-icon,.x-select-search-single .x-input-value-template-value>x-tag .x-tag-large>.x-icon{right:calc(-var(--x-padding-medium)/2)}.x-select-multiple .x-input-value-template-value>x-tag .x-tag-medium,.x-select-search-single .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-select-multiple .x-input-value-template-value>x-tag .x-tag-medium>.x-icon,.x-select-search-single .x-input-value-template-value>x-tag .x-tag-medium>.x-icon{right:calc(-var(--x-padding-small)/2)}.x-select-multiple .x-input-value-template-value>x-tag .x-tag-small,.x-select-search-single .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-select-multiple .x-input-value-template-value>x-tag .x-tag-small>.x-icon,.x-select-search-single .x-input-value-template-value>x-tag .x-tag-small>.x-icon{right:calc(-var(--x-padding-mini)/2)}.x-select-multiple .x-input-value-template-value>x-tag .x-tag-mini,.x-select-search-single .x-input-value-template-value>x-tag .x-tag-mini{height:1.125rem;line-height:1.125rem;padding:0 .125rem}.x-select-multiple .x-input-value-template-value>x-tag .x-tag-mini>.x-icon,.x-select-search-single .x-input-value-template-value>x-tag .x-tag-mini>.x-icon{right:-.0625rem}.x-select-multiple .x-input-value-template-value>x-input,.x-select-search-single .x-input-value-template-value>x-input{margin-top:.125rem;width:5rem}.x-select-multiple .x-input-value-template-value>x-input .x-input-big>.x-input-row>.x-input-input>input,.x-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-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-select-multiple .x-input-value-template-value>x-input .x-input-big>.x-input-row>.x-input-input>.x-input-value-template-value,.x-select-search-single .x-input-value-template-value>x-input .x-input-big>.x-input-row>.x-input-input>input,.x-select-search-single .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-select-search-single .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-select-search-single .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-select-multiple .x-input-value-template-value>x-input .x-input-big>.x-input-row>.x-input-input>.x-input-max-length,.x-select-search-single .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-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-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),.x-select-search-single .x-input-value-template-value>x-input .x-input-big>.x-input-row>.x-input-row-before:not(.x-input-row-before-template),.x-select-search-single .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-select-multiple .x-input-value-template-value>x-input .x-input-big>label,.x-select-search-single .x-input-value-template-value>x-input .x-input-big>label{height:var(--x-height-large);line-height:var(--x-height-large)}.x-select-multiple .x-input-value-template-value>x-input .x-input-large>.x-input-row>.x-input-input>input,.x-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-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-select-multiple .x-input-value-template-value>x-input .x-input-large>.x-input-row>.x-input-input>.x-input-value-template-value,.x-select-search-single .x-input-value-template-value>x-input .x-input-large>.x-input-row>.x-input-input>input,.x-select-search-single .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-select-search-single .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-select-search-single .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-select-multiple .x-input-value-template-value>x-input .x-input-large>.x-input-row>.x-input-input>.x-input-max-length,.x-select-search-single .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-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-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),.x-select-search-single .x-input-value-template-value>x-input .x-input-large>.x-input-row>.x-input-row-before:not(.x-input-row-before-template),.x-select-search-single .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-select-multiple .x-input-value-template-value>x-input .x-input-large>label,.x-select-search-single .x-input-value-template-value>x-input .x-input-large>label{height:var(--x-height-medium);line-height:var(--x-height-medium)}.x-select-multiple .x-input-value-template-value>x-input .x-input-medium>.x-input-row>.x-input-input>input,.x-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-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-select-multiple .x-input-value-template-value>x-input .x-input-medium>.x-input-row>.x-input-input>.x-input-value-template-value,.x-select-search-single .x-input-value-template-value>x-input .x-input-medium>.x-input-row>.x-input-input>input,.x-select-search-single .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-select-search-single .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-select-search-single .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-select-multiple .x-input-value-template-value>x-input .x-input-medium>.x-input-row>.x-input-input>.x-input-max-length,.x-select-search-single .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-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-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),.x-select-search-single .x-input-value-template-value>x-input .x-input-medium>.x-input-row>.x-input-row-before:not(.x-input-row-before-template),.x-select-search-single .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-select-multiple .x-input-value-template-value>x-input .x-input-medium>label,.x-select-search-single .x-input-value-template-value>x-input .x-input-medium>label{height:var(--x-height-small);line-height:var(--x-height-small)}.x-select-multiple .x-input-value-template-value>x-input .x-input-small>.x-input-row>.x-input-input>input,.x-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-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-select-multiple .x-input-value-template-value>x-input .x-input-small>.x-input-row>.x-input-input>.x-input-value-template-value,.x-select-search-single .x-input-value-template-value>x-input .x-input-small>.x-input-row>.x-input-input>input,.x-select-search-single .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-select-search-single .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-select-search-single .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-select-multiple .x-input-value-template-value>x-input .x-input-small>.x-input-row>.x-input-input>.x-input-max-length,.x-select-search-single .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-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-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),.x-select-search-single .x-input-value-template-value>x-input .x-input-small>.x-input-row>.x-input-row-before:not(.x-input-row-before-template),.x-select-search-single .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-select-multiple .x-input-value-template-value>x-input .x-input-small>label,.x-select-search-single .x-input-value-template-value>x-input .x-input-small>label{height:var(--x-height-mini);line-height:var(--x-height-mini)}.x-select-multiple .x-input-value-template-value>x-input .x-input-mini>.x-input-row>.x-input-input>input,.x-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-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-select-multiple .x-input-value-template-value>x-input .x-input-mini>.x-input-row>.x-input-input>.x-input-value-template-value,.x-select-search-single .x-input-value-template-value>x-input .x-input-mini>.x-input-row>.x-input-input>input,.x-select-search-single .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-select-search-single .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-select-search-single .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-select-multiple .x-input-value-template-value>x-input .x-input-mini>.x-input-row>.x-input-input>.x-input-max-length,.x-select-search-single .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-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-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),.x-select-search-single .x-input-value-template-value>x-input .x-input-mini>.x-input-row>.x-input-row-before:not(.x-input-row-before-template),.x-select-search-single .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-select-multiple .x-input-value-template-value>x-input .x-input-mini>label,.x-select-search-single .x-input-value-template-value>x-input .x-input-mini>label{height:1.125rem;line-height:1.125rem}.x-select-multiple .x-input-value-template-value>x-input .x-input-row>.x-input-input>input,.x-select-search-single .x-input-value-template-value>x-input .x-input-row>.x-input-input>input{background-color:transparent}.x-select-search-single .x-input-value-template-value{left:.75rem!important}.x-select-search-single .x-input-value-template-value>x-input{width:100%}.x-select-search-single .x-input-value-template-value>x-input .x-input-row>.x-input-input>input{padding:0!important}.x-select-portal{color:var(--x-text);width:100%;border-radius:var(--x-border-small-radius);box-shadow:var(--x-box-shadow);position:relative;display:flex;background-color:var(--x-background-100);overflow:hidden auto;max-height:calc(calc(var(--x-font-size) + .875rem) * 6 + var(--x-border-width) * 7)}\n"] }]
-        }], ctorParameters: () => [] });
+            args: [{ selector: `${XSelectPrefix}`, standalone: true, imports: [FormsModule, ReactiveFormsModule, XTagComponent, XInputComponent, XOutletDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [XValueAccessor(XSelectComponent)], template: "<div\r\n  #select\r\n  class=\"x-select\"\r\n  [class.x-select-multiple]=\"multiple()\"\r\n  [class.x-select-search-single]=\"search() && !multiple()\"\r\n>\r\n  <div class=\"x-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      [width]=\"width()\"\r\n      [justify]=\"justify()\"\r\n      [align]=\"align()\"\r\n      [direction]=\"direction()\"\r\n      [disabled]=\"disabledComputed()\"\r\n      [required]=\"requiredComputed()\"\r\n      [validator]=\"validatorComputed()!\"\r\n      [inputValidator]=\"inputValidator()\"\r\n      [icon]=\"icon()\"\r\n      [iconSpin]=\"iconSpin()\"\r\n      [placeholder]=\"placeholder()\"\r\n      [readonly]=\"getReadonly()\"\r\n      [clearable]=\"showClearable()\"\r\n      [(ngModel)]=\"value\"\r\n      [valueTpl]=\"valueTplComputed()\"\r\n      [valueTplContext]=\"valueTplContextComputed()\"\r\n      [size]=\"size()\"\r\n      [bordered]=\"bordered()\"\r\n      [before]=\"before()\"\r\n      [after]=\"after()\"\r\n      [pattern]=\"patternComputed()\"\r\n      [message]=\"messageComputed()\"\r\n      [pointer]=\"pointer()\"\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.set($event)\"\r\n    ></x-input>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #valueTemplate>{{ displayValue() }}</ng-template>\r\n\r\n<ng-template #searchTemplate>\r\n  <x-input\r\n    #searchInput\r\n    [bordered]=\"false\"\r\n    [size]=\"size()\"\r\n    [(ngModel)]=\"displayValue\"\r\n    (xInput)=\"onInput($event)\"\r\n    (xKeydown)=\"onKeydown($event)\"\r\n  ></x-input>\r\n</ng-template>\r\n\r\n<ng-template #multipleValueTpl>\r\n  @for (node of displayNodes(); track node.id; let i = $index) {\r\n    <x-tag\r\n      [@.disabled]=\"true\"\r\n      [bordered]=\"false\"\r\n      [closable]=\"!disabledComputed()\"\r\n      [type]=\"'info'\"\r\n      (close)=\"closeNode($event, node, i)\"\r\n      [size]=\"size()\"\r\n      >{{ node.label }}</x-tag\r\n    >\r\n  }\r\n  @if (showDisplayMore()) {\r\n    <x-tag [@.disabled]=\"true\" [bordered]=\"false\" [type]=\"'info'\" [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  }\r\n\r\n  @if (search()) {\r\n    <x-input\r\n      #multipleInput\r\n      [bordered]=\"false\"\r\n      [size]=\"size()\"\r\n      [ngModel]=\"multipleSearchValue()\"\r\n      (ngModelChange)=\"multipleSearchValue.set($event)\"\r\n      (xInput)=\"onInput($event)\"\r\n      (xKeydown)=\"onKeydown($event)\"\r\n    ></x-input>\r\n  }\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";x-select{display:inline-block;width:12rem}.x-select{margin:0;padding:0}.x-select{width:100%}.x-select x-input{width:100%}.x-select-multiple .x-input-value-template-value,.x-select-search-single .x-input-value-template-value{display:flex;align-items:center;margin-bottom:.125rem;flex-wrap:wrap;width:initial;height:initial!important;left:.125rem!important}.x-select-multiple .x-input-value-template-value>x-tag,.x-select-search-single .x-input-value-template-value>x-tag{display:inline-flex;margin-left:.0625rem;margin-top:.125rem}.x-select-multiple .x-input-value-template-value>x-tag .x-tag-big,.x-select-search-single .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-select-multiple .x-input-value-template-value>x-tag .x-tag-big>.x-icon,.x-select-search-single .x-input-value-template-value>x-tag .x-tag-big>.x-icon{right:calc(-var(--x-padding-large)/2)}.x-select-multiple .x-input-value-template-value>x-tag .x-tag-large,.x-select-search-single .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-select-multiple .x-input-value-template-value>x-tag .x-tag-large>.x-icon,.x-select-search-single .x-input-value-template-value>x-tag .x-tag-large>.x-icon{right:calc(-var(--x-padding-medium)/2)}.x-select-multiple .x-input-value-template-value>x-tag .x-tag-medium,.x-select-search-single .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-select-multiple .x-input-value-template-value>x-tag .x-tag-medium>.x-icon,.x-select-search-single .x-input-value-template-value>x-tag .x-tag-medium>.x-icon{right:calc(-var(--x-padding-small)/2)}.x-select-multiple .x-input-value-template-value>x-tag .x-tag-small,.x-select-search-single .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-select-multiple .x-input-value-template-value>x-tag .x-tag-small>.x-icon,.x-select-search-single .x-input-value-template-value>x-tag .x-tag-small>.x-icon{right:calc(-var(--x-padding-mini)/2)}.x-select-multiple .x-input-value-template-value>x-tag .x-tag-mini,.x-select-search-single .x-input-value-template-value>x-tag .x-tag-mini{height:1.125rem;line-height:1.125rem;padding:0 .125rem}.x-select-multiple .x-input-value-template-value>x-tag .x-tag-mini>.x-icon,.x-select-search-single .x-input-value-template-value>x-tag .x-tag-mini>.x-icon{right:-.0625rem}.x-select-multiple .x-input-value-template-value>x-input,.x-select-search-single .x-input-value-template-value>x-input{margin-top:.125rem;width:5rem}.x-select-multiple .x-input-value-template-value>x-input .x-input-big>.x-input-row>.x-input-input>input,.x-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-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-select-multiple .x-input-value-template-value>x-input .x-input-big>.x-input-row>.x-input-input>.x-input-value-template-value,.x-select-search-single .x-input-value-template-value>x-input .x-input-big>.x-input-row>.x-input-input>input,.x-select-search-single .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-select-search-single .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-select-search-single .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-select-multiple .x-input-value-template-value>x-input .x-input-big>.x-input-row>.x-input-input>.x-input-max-length,.x-select-search-single .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-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-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),.x-select-search-single .x-input-value-template-value>x-input .x-input-big>.x-input-row>.x-input-row-before:not(.x-input-row-before-template),.x-select-search-single .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-select-multiple .x-input-value-template-value>x-input .x-input-big>label,.x-select-search-single .x-input-value-template-value>x-input .x-input-big>label{height:var(--x-height-large);line-height:var(--x-height-large)}.x-select-multiple .x-input-value-template-value>x-input .x-input-large>.x-input-row>.x-input-input>input,.x-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-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-select-multiple .x-input-value-template-value>x-input .x-input-large>.x-input-row>.x-input-input>.x-input-value-template-value,.x-select-search-single .x-input-value-template-value>x-input .x-input-large>.x-input-row>.x-input-input>input,.x-select-search-single .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-select-search-single .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-select-search-single .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-select-multiple .x-input-value-template-value>x-input .x-input-large>.x-input-row>.x-input-input>.x-input-max-length,.x-select-search-single .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-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-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),.x-select-search-single .x-input-value-template-value>x-input .x-input-large>.x-input-row>.x-input-row-before:not(.x-input-row-before-template),.x-select-search-single .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-select-multiple .x-input-value-template-value>x-input .x-input-large>label,.x-select-search-single .x-input-value-template-value>x-input .x-input-large>label{height:var(--x-height-medium);line-height:var(--x-height-medium)}.x-select-multiple .x-input-value-template-value>x-input .x-input-medium>.x-input-row>.x-input-input>input,.x-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-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-select-multiple .x-input-value-template-value>x-input .x-input-medium>.x-input-row>.x-input-input>.x-input-value-template-value,.x-select-search-single .x-input-value-template-value>x-input .x-input-medium>.x-input-row>.x-input-input>input,.x-select-search-single .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-select-search-single .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-select-search-single .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-select-multiple .x-input-value-template-value>x-input .x-input-medium>.x-input-row>.x-input-input>.x-input-max-length,.x-select-search-single .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-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-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),.x-select-search-single .x-input-value-template-value>x-input .x-input-medium>.x-input-row>.x-input-row-before:not(.x-input-row-before-template),.x-select-search-single .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-select-multiple .x-input-value-template-value>x-input .x-input-medium>label,.x-select-search-single .x-input-value-template-value>x-input .x-input-medium>label{height:var(--x-height-small);line-height:var(--x-height-small)}.x-select-multiple .x-input-value-template-value>x-input .x-input-small>.x-input-row>.x-input-input>input,.x-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-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-select-multiple .x-input-value-template-value>x-input .x-input-small>.x-input-row>.x-input-input>.x-input-value-template-value,.x-select-search-single .x-input-value-template-value>x-input .x-input-small>.x-input-row>.x-input-input>input,.x-select-search-single .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-select-search-single .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-select-search-single .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-select-multiple .x-input-value-template-value>x-input .x-input-small>.x-input-row>.x-input-input>.x-input-max-length,.x-select-search-single .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-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-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),.x-select-search-single .x-input-value-template-value>x-input .x-input-small>.x-input-row>.x-input-row-before:not(.x-input-row-before-template),.x-select-search-single .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-select-multiple .x-input-value-template-value>x-input .x-input-small>label,.x-select-search-single .x-input-value-template-value>x-input .x-input-small>label{height:var(--x-height-mini);line-height:var(--x-height-mini)}.x-select-multiple .x-input-value-template-value>x-input .x-input-mini>.x-input-row>.x-input-input>input,.x-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-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-select-multiple .x-input-value-template-value>x-input .x-input-mini>.x-input-row>.x-input-input>.x-input-value-template-value,.x-select-search-single .x-input-value-template-value>x-input .x-input-mini>.x-input-row>.x-input-input>input,.x-select-search-single .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-select-search-single .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-select-search-single .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-select-multiple .x-input-value-template-value>x-input .x-input-mini>.x-input-row>.x-input-input>.x-input-max-length,.x-select-search-single .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-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-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),.x-select-search-single .x-input-value-template-value>x-input .x-input-mini>.x-input-row>.x-input-row-before:not(.x-input-row-before-template),.x-select-search-single .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-select-multiple .x-input-value-template-value>x-input .x-input-mini>label,.x-select-search-single .x-input-value-template-value>x-input .x-input-mini>label{height:1.125rem;line-height:1.125rem}.x-select-multiple .x-input-value-template-value>x-input .x-input-row>.x-input-input>input,.x-select-search-single .x-input-value-template-value>x-input .x-input-row>.x-input-input>input{background-color:transparent}.x-select-search-single .x-input-value-template-value{left:.75rem!important}.x-select-search-single .x-input-value-template-value>x-input{width:100%}.x-select-search-single .x-input-value-template-value>x-input .x-input-row>.x-input-input>input{padding:0!important}.x-select-portal{color:var(--x-text);width:100%;border-radius:var(--x-border-small-radius);box-shadow:var(--x-box-shadow);position:relative;display:flex;background-color:var(--x-background-100);overflow:hidden auto;max-height:calc(calc(var(--x-font-size) + .875rem) * 6 + var(--x-border-width) * 7)}.x-select-portal-virtualScroll{overflow-y:hidden}.x-select-portal-virtualScroll .x-list-portal{padding:0}.x-select-portal-virtualScroll .x-list-portal .cdk-virtual-scroll-content-wrapper{padding:.125rem .25rem}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { getWidth: [{
+                type: HostBinding,
+                args: ['style.width']
+            }] } });
 
 class XSelectModule {
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: XSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }