@ng-nest/ui 14.0.1 → 14.0.4

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

@@ -1,24 +1,29 @@
-import { Subject, debounceTime, BehaviorSubject } from 'rxjs';
+import { Subject } from 'rxjs';
 import * as i0 from '@angular/core';
 import { Component, Input, ViewEncapsulation, ChangeDetectionStrategy, HostBinding, HostListener, ViewChild, NgModule } from '@angular/core';
 import { __decorate } from 'tslib';
-import * as i3$1 from '@ng-nest/ui/core';
-import { XDataConvert, XWithConfig, XInputBoolean, XConnectBaseAnimation, XIsEmpty, XIsChange, XClearClass, XSetData, XIsObjectArray, XIsObservable, XIsArray } from '@ng-nest/ui/core';
+import * as i4 from '@ng-nest/ui/core';
+import { XDataConvert, XWithConfig, XInputBoolean, XInputNumber, XConnectBaseAnimation, XIsEmpty, XIsChange, XResize, XClearClass, XSetData, XIsFunction, XIsObjectArray, XRemove, XIsString, XIsObservable, XIsArray } from '@ng-nest/ui/core';
 import { XControlValueAccessor, XValueAccessor, XBaseFormModule } from '@ng-nest/ui/base-form';
 import * as i1$1 from '@ng-nest/ui/portal';
 import { XPortalConnectedPosition, XPortalModule } from '@ng-nest/ui/portal';
-import { takeUntil, filter, map, throttleTime } from 'rxjs/operators';
+import { takeUntil, map, debounceTime, distinctUntilChanged, throttleTime } from 'rxjs/operators';
 import * as i1 from '@ng-nest/ui/i18n';
 import { XI18nModule } from '@ng-nest/ui/i18n';
-import * as i4 from '@angular/forms';
+import * as i6 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i3 from '@ng-nest/ui/list';
 import { XListModule } from '@ng-nest/ui/list';
 import { DOWN_ARROW, UP_ARROW, LEFT_ARROW, RIGHT_ARROW, ENTER, MAC_ENTER, ESCAPE, TAB } from '@angular/cdk/keycodes';
 import * as i2 from '@angular/cdk/overlay';
-import * as i5 from '@ng-nest/ui/input';
-import { XInputModule } from '@ng-nest/ui/input';
+import * as i5 from '@angular/common';
 import { CommonModule } from '@angular/common';
+import * as i7 from '@ng-nest/ui/input';
+import { XInputModule } from '@ng-nest/ui/input';
+import * as i8 from '@ng-nest/ui/tag';
+import { XTagModule } from '@ng-nest/ui/tag';
+import * as i9 from '@ng-nest/ui/outlet';
+import { XOutletModule } from '@ng-nest/ui/outlet';
 
 /**
  * Select
@@ -41,7 +46,7 @@ class XSelectProperty extends XControlValueAccessor {
     }
 }
 /** @nocollapse */ XSelectProperty.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: XSelectProperty, deps: null, target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ XSelectProperty.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: XSelectProperty, selector: "ng-component", inputs: { data: "data", clearable: "clearable", async: "async", placement: "placement", multiple: "multiple", selectAll: "selectAll", selectAllText: "selectAllText", nodeTpl: "nodeTpl", size: "size", bordered: "bordered", portalMaxHeight: "portalMaxHeight", search: "search", caseSensitive: "caseSensitive" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
+/** @nocollapse */ XSelectProperty.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: XSelectProperty, selector: "ng-component", inputs: { data: "data", clearable: "clearable", async: "async", placement: "placement", multiple: "multiple", selectAll: "selectAll", selectAllText: "selectAllText", nodeTpl: "nodeTpl", size: "size", bordered: "bordered", portalMaxHeight: "portalMaxHeight", search: "search", caseSensitive: "caseSensitive", debounceTime: "debounceTime", maxTagCount: "maxTagCount", maxTagContent: "maxTagContent" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
 __decorate([
     XDataConvert()
 ], XSelectProperty.prototype, "data", void 0);
@@ -82,6 +87,16 @@ __decorate([
     XInputBoolean(),
     XWithConfig(X_CONFIG_NAME, true)
 ], XSelectProperty.prototype, "caseSensitive", void 0);
+__decorate([
+    XWithConfig(X_CONFIG_NAME, 200)
+], XSelectProperty.prototype, "debounceTime", void 0);
+__decorate([
+    XInputNumber(),
+    XWithConfig(X_CONFIG_NAME)
+], XSelectProperty.prototype, "maxTagCount", void 0);
+__decorate([
+    XWithConfig(X_CONFIG_NAME)
+], XSelectProperty.prototype, "maxTagContent", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: XSelectProperty, decorators: [{
             type: Component,
             args: [{ template: '' }]
@@ -111,6 +126,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
                 type: Input
             }], caseSensitive: [{
                 type: Input
+            }], debounceTime: [{
+                type: Input
+            }], maxTagCount: [{
+                type: Input
+            }], maxTagContent: [{
+                type: Input
             }] } });
 /**
  * Select Portal
@@ -147,7 +168,6 @@ class XSelectPortalComponent {
         return this.selectAllText || this.locale.selectAllText;
     }
     ngOnInit() {
-        this.searchData = [...this.data];
         this.valueChange.pipe(takeUntil(this._unSubject)).subscribe((x) => {
             this.value = x;
             this.cdr.detectChanges();
@@ -156,23 +176,16 @@ class XSelectPortalComponent {
             this.placement = x;
             this.cdr.detectChanges();
         });
+        this.dataChange.pipe(takeUntil(this._unSubject)).subscribe((x) => {
+            this.data = x;
+            this.cdr.detectChanges();
+        });
         this.closeSubject.pipe(takeUntil(this._unSubject)).subscribe(() => {
             this.list.setUnActive(this.active);
         });
         this.keydownSubject.pipe(takeUntil(this._unSubject)).subscribe((x) => {
             this.list.keydown(x);
         });
-        this.searchSubject
-            .pipe(filter((x) => x !== null), debounceTime(10), takeUntil(this._unSubject))
-            .subscribe((x) => {
-            if (this.caseSensitive) {
-                this.data = this.searchData.filter((y) => y.label.indexOf(x) >= 0);
-            }
-            else {
-                this.data = this.searchData.filter((y) => y.label.toLowerCase().indexOf(x.toLowerCase()) >= 0);
-            }
-            this.cdr.detectChanges();
-        });
         this.i18n.localeChange
             .pipe(map((x) => x.select), takeUntil(this._unSubject))
             .subscribe((x) => {
@@ -188,13 +201,15 @@ class XSelectPortalComponent {
         event.stopPropagation();
     }
     nodeClick(node) {
-        if (this.multiple === 0)
-            this.nodeEmit(this.value);
-        else
+        if (this.multiple === 0) {
+            this.nodeEmit(node, this.value);
+        }
+        else {
             this.nodeEmit(node);
+        }
     }
     onSelectAll(_isSelectAll) {
-        this.nodeEmit(this.value);
+        this.nodeEmit(null, this.value);
     }
     onActive(num) {
         this.active = num;
@@ -204,7 +219,7 @@ class XSelectPortalComponent {
     }
 }
 /** @nocollapse */ XSelectPortalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: XSelectPortalComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.XI18nService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ XSelectPortalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: XSelectPortalComponent, selector: "x-select-portal", host: { listeners: { "@x-connect-base-animation.done": "done($event)", "@x-connect-base-animation.start": "start($event)" }, properties: { "@x-connect-base-animation": "this.placement" } }, viewQueries: [{ propertyName: "list", first: true, predicate: ["list"], descendants: true }], ngImport: i0, template: "<div #selectPortal class=\"x-select-portal\" (click)=\"inputCom.inputFocus(); stopPropagation($event)\" [style.maxHeight]=\"portalMaxHeight\">\r\n  <x-list\r\n    #list\r\n    [data]=\"data\"\r\n    [(ngModel)]=\"value\"\r\n    (nodeClick)=\"nodeClick($event)\"\r\n    (keyManagerChange)=\"onActive($event)\"\r\n    (keyManagerTabOut)=\"onTabOut()\"\r\n    (onSelectAll)=\"onSelectAll($event)\"\r\n    checked\r\n    [objectArray]=\"objectArray\"\r\n    [multiple]=\"multiple\"\r\n    [selectAll]=\"selectAll\"\r\n    [selectAllText]=\"getSelectAllText\"\r\n    [nodeTpl]=\"nodeTpl\"\r\n    [scrollElement]=\"search ? scrollNull : selectPortal\"\r\n  ></x-list>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";x-select-portal{width:100%}.x-select-portal{margin:.0625rem 0;font-size:var(--x-font-size);color:var(--x-text);border:var(--x-border-width) var(--x-border-style) var(--x-border);width:100%;border-radius:var(--x-border-radius);box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color);position:relative;display:flex;background-color:var(--x-background);overflow:hidden auto;max-height:calc((calc(var(--x-font-size) + .875rem) * 6) + (var(--x-border-width) * 7))}\n"], dependencies: [{ kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.XListComponent, selector: "x-list" }], animations: [XConnectBaseAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+/** @nocollapse */ XSelectPortalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: XSelectPortalComponent, selector: "x-select-portal", host: { listeners: { "@x-connect-base-animation.done": "done($event)", "@x-connect-base-animation.start": "start($event)" }, properties: { "@x-connect-base-animation": "this.placement" } }, viewQueries: [{ propertyName: "list", first: true, predicate: ["list"], descendants: true }], ngImport: i0, template: "<div #selectPortal class=\"x-select-portal\" (click)=\"inputCom.inputFocus(); stopPropagation($event)\" [style.maxHeight]=\"portalMaxHeight\">\r\n  <x-list\r\n    #list\r\n    [data]=\"data\"\r\n    [(ngModel)]=\"value\"\r\n    (nodeClick)=\"nodeClick($event)\"\r\n    (keyManagerChange)=\"onActive($event)\"\r\n    (keyManagerTabOut)=\"onTabOut()\"\r\n    (onSelectAll)=\"onSelectAll($event)\"\r\n    checked\r\n    [objectArray]=\"objectArray\"\r\n    [multiple]=\"multiple\"\r\n    [selectAll]=\"selectAll\"\r\n    [selectAllText]=\"getSelectAllText\"\r\n    [nodeTpl]=\"nodeTpl\"\r\n    [scrollElement]=\"search ? scrollNull : selectPortal\"\r\n  ></x-list>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";x-select-portal{width:100%}.x-select-portal{margin:.0625rem 0;font-size:var(--x-font-size);color:var(--x-text);border:var(--x-border-width) var(--x-border-style) var(--x-border);width:100%;border-radius:var(--x-border-radius);box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color);position:relative;display:flex;background-color:var(--x-background);overflow:hidden auto;max-height:calc((calc(var(--x-font-size) + .875rem) * 6) + (var(--x-border-width) * 7))}\n"], dependencies: [{ kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.XListComponent, selector: "x-list" }], animations: [XConnectBaseAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: XSelectPortalComponent, decorators: [{
             type: Component,
             args: [{ selector: `${XSelectPortalPrefix}`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [XConnectBaseAnimation], template: "<div #selectPortal class=\"x-select-portal\" (click)=\"inputCom.inputFocus(); stopPropagation($event)\" [style.maxHeight]=\"portalMaxHeight\">\r\n  <x-list\r\n    #list\r\n    [data]=\"data\"\r\n    [(ngModel)]=\"value\"\r\n    (nodeClick)=\"nodeClick($event)\"\r\n    (keyManagerChange)=\"onActive($event)\"\r\n    (keyManagerTabOut)=\"onTabOut()\"\r\n    (onSelectAll)=\"onSelectAll($event)\"\r\n    checked\r\n    [objectArray]=\"objectArray\"\r\n    [multiple]=\"multiple\"\r\n    [selectAll]=\"selectAll\"\r\n    [selectAllText]=\"getSelectAllText\"\r\n    [nodeTpl]=\"nodeTpl\"\r\n    [scrollElement]=\"search ? scrollNull : selectPortal\"\r\n  ></x-list>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";x-select-portal{width:100%}.x-select-portal{margin:.0625rem 0;font-size:var(--x-font-size);color:var(--x-text);border:var(--x-border-width) var(--x-border-style) var(--x-border);width:100%;border-radius:var(--x-border-radius);box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color);position:relative;display:flex;background-color:var(--x-background);overflow:hidden auto;max-height:calc((calc(var(--x-font-size) + .875rem) * 6) + (var(--x-border-width) * 7))}\n"] }]
@@ -223,36 +238,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
             }] } });
 
 class XSelectComponent extends XSelectProperty {
-    constructor(renderer, cdr, portalService, viewContainerRef, overlay, configService) {
+    constructor(renderer, cdr, portalService, viewContainerRef, overlay, i18n, configService) {
         super();
         this.renderer = renderer;
         this.cdr = cdr;
         this.portalService = portalService;
         this.viewContainerRef = viewContainerRef;
         this.overlay = overlay;
+        this.i18n = i18n;
         this.configService = configService;
         this.readonly = true;
         this.enter = false;
         this.showClearable = false;
         this.displayValue = '';
+        this.multipleSearchValue = '';
         this.nodes = [];
+        this.selectedNodes = [];
+        this.displayNodes = [];
+        this.displayMore = '';
+        this.showDisplayMore = false;
+        this.searchNodes = [];
         this.icon = 'fto-chevron-down';
         this.iconSpin = false;
         this.maxNodes = 6;
+        this.inputPadding = 0.4;
         this.protalTobottom = true;
         this.asyncLoading = false;
         this.animating = false;
         this.objectArray = false;
+        this.selectedSurplus = 0;
+        this.selectedTotal = 0;
+        this.locale = {};
         this.valueTplContext = { $node: null, $isValue: true };
         this.valueChange = new Subject();
         this.positionChange = new Subject();
         this.closeSubject = new Subject();
+        this.dataChange = new Subject();
         this.keydownSubject = new Subject();
-        this.searchSubject = new BehaviorSubject(null);
+        this.inputChange = new Subject();
+        this.composition = false;
+        this.multipleInputSizeChange = new Subject();
         this._unSubject = new Subject();
     }
     get getReadonly() {
-        return this.readonly && !this.search;
+        return (this.readonly && !this.search) || (Boolean(this.search) && Boolean(this.multiple));
+    }
+    get getMaxTagContent() {
+        return this.maxTagContent || this.locale.maxTagContent;
     }
     writeValue(value) {
         if (this.multiple && XIsEmpty(value)) {
@@ -267,6 +299,16 @@ class XSelectComponent extends XSelectProperty {
         this.setFlex(this.select.nativeElement, this.renderer, this.justify, this.align, this.direction);
         this.setClassMap();
         this.setSubject();
+        if (this.multiple) {
+            this.valueTpl = this.multipleValueTpl;
+            this.inputPadding = 0.125;
+        }
+        this.i18n.localeChange
+            .pipe(map((x) => x.select), takeUntil(this._unSubject))
+            .subscribe((x) => {
+            this.locale = x;
+            this.cdr.markForCheck();
+        });
     }
     ngOnChanges(changes) {
         const { data } = changes;
@@ -274,10 +316,19 @@ class XSelectComponent extends XSelectProperty {
     }
     ngAfterViewInit() {
         this.setPortal();
+        if (this.multiple && this.inputCom.inputValueRef) {
+            XResize(this.inputCom.inputValueRef.nativeElement)
+                .pipe(debounceTime(30), takeUntil(this._unSubject))
+                .subscribe((x) => {
+                this._resizeObserver = x.resizeObserver;
+                this.setMutipleInputSize();
+            });
+        }
     }
     ngOnDestroy() {
         this._unSubject.next();
         this._unSubject.unsubscribe();
+        this._resizeObserver?.disconnect();
     }
     setClassMap() {
         XClearClass(this.labelMap);
@@ -297,18 +348,66 @@ class XSelectComponent extends XSelectProperty {
         this.closeSubject.pipe(takeUntil(this._unSubject)).subscribe(() => {
             this.closePortal();
         });
+        this.inputChange.pipe(debounceTime(this.debounceTime), distinctUntilChanged(), takeUntil(this._unSubject)).subscribe((x) => {
+            this.modelChange(x);
+        });
         this.keydownSubject.pipe(throttleTime(10), takeUntil(this._unSubject)).subscribe((x) => {
             const keyCode = x.keyCode;
             if (!this.portalAttached() && [DOWN_ARROW, UP_ARROW, LEFT_ARROW, RIGHT_ARROW, ENTER, MAC_ENTER].includes(keyCode)) {
-                this.showPortal();
+                this.inputChange.next(this.displayValue);
             }
             if (this.portalAttached() && [ESCAPE].includes(keyCode)) {
                 this.closeSubject.next();
             }
         });
+        this.multipleInputSizeChange.pipe(distinctUntilChanged(), takeUntil(this._unSubject)).subscribe((x) => {
+            if (this.multipleInput) {
+                const input = this.multipleInput?.elementRef.nativeElement;
+                this.renderer.setStyle(input, 'width', `${x}px`);
+            }
+        });
+    }
+    setMutipleInputSize() {
+        const ivf = this.inputCom.inputValueRef.nativeElement;
+        let { clientWidth, scrollHeight } = ivf;
+        const len = ivf.children.length;
+        let lastRowTagTop = -1;
+        let lines = 1;
+        let rowTagTop = -1;
+        let lastRowTagsWidth = 0;
+        let marginLeft = 0;
+        let marginTop = 0;
+        for (let i = len - 1; i >= 0; i--) {
+            const ele = ivf.children[i];
+            if (ele.tagName === 'X-TAG') {
+                const { offsetTop, offsetWidth } = ele;
+                const style = getComputedStyle(ele);
+                marginLeft = Number(style.marginLeft.replace('px', ''));
+                marginTop = Number(style.marginTop.replace('px', ''));
+                if (rowTagTop === -1) {
+                    rowTagTop = offsetTop;
+                }
+                else if (rowTagTop !== offsetTop) {
+                    lines++;
+                    rowTagTop = offsetTop;
+                }
+                if (lastRowTagTop === -1) {
+                    lastRowTagTop = offsetTop;
+                }
+                if (lastRowTagTop === offsetTop) {
+                    lastRowTagsWidth += offsetWidth + marginLeft;
+                }
+            }
+        }
+        const height = scrollHeight + (lines > 1 ? marginTop : 0);
+        this.renderer.setStyle(this.inputCom.inputRef.nativeElement, 'height', `${height}px`);
+        if (this.multipleInput) {
+            this.multipleInputSizeChange.next(clientWidth - lastRowTagsWidth - marginLeft);
+        }
+        this.portal?.overlayRef?.updatePosition();
     }
     menter() {
-        if (this.disabled || !this.clearable)
+        if (this.disabled || !this.clearable || this.iconSpin)
             return;
         this.enter = true;
         if (!XIsEmpty(this.displayValue)) {
@@ -318,7 +417,7 @@ class XSelectComponent extends XSelectProperty {
         }
     }
     mleave() {
-        if (this.disabled || !this.clearable)
+        if (this.disabled || !this.clearable || this.iconSpin)
             return;
         this.enter = false;
         if (this.clearable) {
@@ -327,35 +426,102 @@ class XSelectComponent extends XSelectProperty {
             this.cdr.detectChanges();
         }
     }
+    modelChange(value) {
+        if (XIsFunction(this.data)) {
+            if (!this.portalAttached()) {
+                this.showPortal();
+            }
+            else {
+                this.icon = 'fto-loader';
+                this.iconSpin = true;
+                this.cdr.detectChanges();
+                XSetData(this.data, this._unSubject, true, value).subscribe((x) => {
+                    this.icon = '';
+                    this.iconSpin = false;
+                    this.nodes = x;
+                    this.dataChange.next(this.nodes);
+                    this.cdr.detectChanges();
+                });
+            }
+            return;
+        }
+        if (this.nodes) {
+            if (!this.portalAttached()) {
+                this.showPortal();
+            }
+            else {
+                if (XIsEmpty(value)) {
+                    this.searchNodes = [...this.nodes];
+                }
+                else {
+                    this.setSearchNodes(value);
+                }
+                this.dataChange.next(this.searchNodes);
+            }
+        }
+    }
+    setSearchNodes(value) {
+        if (this.caseSensitive) {
+            this.searchNodes = this.nodes.filter((x) => x.label.indexOf(value) >= 0);
+        }
+        else {
+            this.searchNodes = this.nodes.filter((x) => x.label.toLowerCase().indexOf(value.toLowerCase()) >= 0);
+        }
+    }
     clearEmit() {
-        this.value = '';
+        this.value = this.multiple ? [] : '';
         this.displayValue = '';
+        this.multipleSearchValue = '';
+        this.selectedNodes = [];
+        this.setDisplayNodes();
         this.valueTplContext.$node = null;
         this.mleave();
         this.valueChange.next(this.value);
-        this.searchSubject.next('');
+        this.inputChange.next('');
         if (this.onChange)
             this.onChange(this.value);
     }
-    setDisplayValue() {
+    setDisplayValue(clickNode) {
         if (this.nodes.length > 0) {
             if (this.multiple) {
                 if (XIsEmpty(this.value)) {
                     this.displayValue = '';
+                    this.selectedNodes = [];
+                    this.displayNodes = [];
+                    this.displayMore = '';
                     this.valueTplContext.$node = null;
+                    this.setDisplayNodes();
                 }
                 else {
-                    let nodes = [];
+                    let ids = [];
+                    let selected = [];
                     if (XIsObjectArray(this.value)) {
                         this.objectArray = true;
-                        nodes = this.nodes.filter((x) => !XIsEmpty(this.value.find((y) => y.id === x.id)));
+                        ids = this.value.map((x) => x.id);
                     }
                     else {
                         this.objectArray = false;
-                        nodes = this.nodes.filter((x) => !XIsEmpty(this.value.find((y) => y === x.id)));
+                        ids = this.value;
+                    }
+                    if (clickNode) {
+                        if (clickNode.selected) {
+                            this.selectedNodes.push(clickNode);
+                        }
+                        else {
+                            XRemove(this.selectedNodes, (x) => x.id === clickNode.id);
+                        }
+                    }
+                    else {
+                        for (let id of ids) {
+                            let node = this.nodes.find((x) => x.id === id);
+                            if (node)
+                                selected.push(node);
+                        }
+                        this.selectedNodes = selected;
                     }
-                    this.displayValue = nodes.map((x) => x.label).join(',');
-                    this.valueTplContext.$node = [...nodes];
+                    this.setDisplayNodes();
+                    this.displayValue = this.selectedNodes.map((x) => x.label).join(',');
+                    this.valueTplContext.$node = [...this.selectedNodes];
                 }
             }
             else {
@@ -372,6 +538,48 @@ class XSelectComponent extends XSelectProperty {
             this.cdr.detectChanges();
         }
     }
+    closeNode(event, node, index) {
+        let inx = -1;
+        if (XIsObjectArray(this.value)) {
+            inx = this.value.findIndex((y) => y.id === node.id);
+        }
+        else {
+            inx = this.value.findIndex((y) => y === node.id);
+        }
+        if (inx >= 0) {
+            this.value.splice(inx, 1);
+            this.valueChange.next(this.value);
+            if (this.onChange)
+                this.onChange(this.value);
+            this.selectedNodes.splice(index, 1);
+            this.setDisplayNodes();
+        }
+        event.stopPropagation();
+    }
+    setDisplayNodes() {
+        if (!this.multiple || !this.search)
+            return;
+        const maxlen = this.selectedNodes.length;
+        let len = 0;
+        if (!this.maxTagCount) {
+            len = maxlen;
+        }
+        else {
+            len = maxlen > Number(this.maxTagCount) ? Number(this.maxTagCount) : maxlen;
+        }
+        let more = maxlen - len;
+        more = more < 0 ? 0 : more;
+        this.displayNodes = this.selectedNodes.slice(0, len);
+        this.showDisplayMore = more > 0;
+        if (XIsString(this.getMaxTagContent)) {
+            this.displayMore = more > 0 ? this.getMaxTagContent.replace(/\{\{surplus\}\}/g, `${more}`) : '';
+        }
+        else {
+            this.selectedSurplus = more;
+            this.selectedTotal = maxlen;
+        }
+        setTimeout(() => this.setMutipleInputSize());
+    }
     portalAttached() {
         return this.portal?.overlayRef?.hasAttached();
     }
@@ -379,6 +587,7 @@ class XSelectComponent extends XSelectProperty {
         if (this.portalAttached()) {
             this.portal?.overlayRef?.detach();
             this.active = false;
+            this.multipleSearchValue = '';
             this.cdr.detectChanges();
             return true;
         }
@@ -387,29 +596,34 @@ class XSelectComponent extends XSelectProperty {
     destroyPortal() {
         this.portal?.overlayRef?.dispose();
     }
-    showPortal() {
-        if (this.disabled || this.iconSpin)
-            return;
-        if (this.animating)
+    showPortal(click = false) {
+        if (this.disabled || this.iconSpin || this.animating)
             return;
         this.active = true;
-        if (this.async && XIsObservable(this.data) && this.nodes.length === 0) {
+        if ((this.async && XIsObservable(this.data) && this.nodes.length === 0) || XIsFunction(this.data)) {
             this.icon = 'fto-loader';
             this.iconSpin = true;
-            this.cdr.detectChanges();
-            XSetData(this.data, this._unSubject).subscribe((x) => {
-                this.nodes = x;
-                this.setDisplayValue();
-                this.createPortal();
+            this.inputCom.cdr.detectChanges();
+            XSetData(this.data, this._unSubject, true, click ? '' : this.displayValue).subscribe((x) => {
                 this.icon = 'fto-chevron-down';
                 this.iconSpin = false;
+                this.inputCom.cdr.detectChanges();
+                this.nodes = x;
+                if (!this.search)
+                    this.setDisplayValue();
+                this.createPortal();
                 this.cdr.detectChanges();
             });
         }
         else {
             this.createPortal();
         }
-        this.inputCom.inputFocus();
+        if (this.search && this.multiple) {
+            this.multipleInput.inputFocus();
+        }
+        else {
+            this.inputCom.inputFocus();
+        }
     }
     createPortal() {
         this.nodes.filter((x) => x.selected).map((x) => (x.selected = false));
@@ -434,9 +648,6 @@ class XSelectComponent extends XSelectProperty {
             this.closeSubject.next();
         });
         this.setInstance();
-        if (this.search && this.value) {
-            this.searchSubject.next('');
-        }
     }
     setPosition(config) {
         let position = config.positionStrategy;
@@ -460,7 +671,7 @@ class XSelectComponent extends XSelectProperty {
             positionChange: this.positionChange,
             closeSubject: this.closeSubject,
             keydownSubject: this.keydownSubject,
-            searchSubject: this.searchSubject,
+            dataChange: this.dataChange,
             inputCom: this.inputCom,
             portalMaxHeight: this.portalMaxHeight,
             objectArray: this.objectArray,
@@ -468,16 +679,45 @@ class XSelectComponent extends XSelectProperty {
             caseSensitive: this.caseSensitive,
             search: this.search,
             destroyPortal: () => this.destroyPortal(),
-            nodeEmit: (node) => this.nodeClick(node),
+            nodeEmit: (node, value) => this.nodeClick(node, value),
             animating: (ing) => (this.animating = ing)
         });
         componentRef.changeDetectorRef.detectChanges();
     }
-    nodeClick(node) {
-        if (this.multiple && XIsArray(node)) {
-            node = node;
-            this.value = node;
-            this.setDisplayValue();
+    nodeClick(node, value) {
+        if (this.multiple) {
+            if (node) {
+                if (XIsObjectArray(value)) {
+                    if (node.selected) {
+                        this.value.push(node);
+                    }
+                    else {
+                        let inx = this.value.findIndex((x) => x.id === node.id);
+                        this.value.splice(inx, 1);
+                    }
+                }
+                else if (XIsArray(value)) {
+                    if (node.selected) {
+                        this.value.push(node.id);
+                    }
+                    else {
+                        this.value.splice(this.value.indexOf(node.id), 1);
+                    }
+                }
+            }
+            else {
+                this.value = value;
+            }
+            if (this.multipleInput) {
+                const input = this.multipleInput.elementRef.nativeElement;
+                this.renderer.setStyle(input, 'width', '2rem');
+            }
+            if (this.search && this.multipleSearchValue !== '') {
+                this.multipleSearchValue = '';
+                this.inputChange.next('');
+                this.valueChange.next([...this.value]);
+            }
+            this.setDisplayValue(node);
         }
         else {
             node = node;
@@ -486,11 +726,20 @@ class XSelectComponent extends XSelectProperty {
             this.value = node.id;
             this.closeSubject.next();
         }
-        this.inputCom.inputFocus();
+        if (this.search && this.multiple) {
+            this.multipleInput.inputFocus();
+        }
+        else {
+            this.inputCom.inputFocus();
+        }
         if (this.onChange)
             this.onChange(this.value);
+        this.formControlValidator();
         this.cdr.detectChanges();
     }
+    selectAllNodes(value) {
+        this.value = value;
+    }
     setPlacement() {
         return this.portalService.setPlacement({
             elementRef: this.inputCom.inputRef,
@@ -513,39 +762,77 @@ class XSelectComponent extends XSelectProperty {
         }
     }
     onFocus(_event) {
-        this.inputCom.inputFocus();
+        if (this.search && this.multiple) {
+            this.multipleInput.inputFocus();
+        }
+        else {
+            this.inputCom.inputFocus();
+        }
     }
     onInput(_event) {
-        this.searchSubject.next(this.displayValue);
-        if (!this.portalAttached()) {
-            this.showPortal();
-        }
+        this.formControlValidator();
+        setTimeout(() => this.inputChange.next(this.multiple ? this.multipleSearchValue : this.displayValue));
     }
 }
-/** @nocollapse */ XSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: XSelectComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1$1.XPortalService }, { token: i0.ViewContainerRef }, { token: i2.Overlay }, { token: i3$1.XConfigService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ XSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: XSelectComponent, selector: "x-select", providers: [XValueAccessor(XSelectComponent)], viewQueries: [{ propertyName: "inputCom", first: true, predicate: ["inputCom"], descendants: true, static: true }, { propertyName: "select", first: true, predicate: ["select"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div #select class=\"x-select\">\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      [justify]=\"justify\"\r\n      [align]=\"align\"\r\n      [direction]=\"direction\"\r\n      [required]=\"required\"\r\n      [icon]=\"icon\"\r\n      [iconSpin]=\"iconSpin\"\r\n      [placeholder]=\"placeholder\"\r\n      [readonly]=\"getReadonly\"\r\n      [clearable]=\"showClearable\"\r\n      [(ngModel)]=\"displayValue\"\r\n      [valueTpl]=\"valueTpl ? valueTpl : nodeTpl\"\r\n      [valueTplContext]=\"valueTplContext\"\r\n      [size]=\"size\"\r\n      [bordered]=\"bordered\"\r\n      [before]=\"before\"\r\n      [after]=\"after\"\r\n      [pattern]=\"pattern\"\r\n      [message]=\"message\"\r\n      [pointer]=\"true\"\r\n      [(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()\"\r\n      (xMouseenter)=\"menter()\"\r\n      (xMouseleave)=\"mleave()\"\r\n    ></x-input>\r\n  </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";x-select{display:inline-block;width:12rem}.x-select{margin:0;padding:0;width:100%}.x-select x-input{width:100%}.x-select-portal{margin:.0625rem 0;font-size:var(--x-font-size);color:var(--x-text);border:var(--x-border-width) var(--x-border-style) var(--x-border);width:100%;border-radius:var(--x-border-radius);box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color);position:relative;display:flex;background-color:var(--x-background);overflow:hidden auto;max-height:calc((calc(var(--x-font-size) + .875rem) * 6) + (var(--x-border-width) * 7))}\n"], dependencies: [{ kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.XInputComponent, selector: "x-input" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+/** @nocollapse */ XSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: XSelectComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1$1.XPortalService }, { token: i0.ViewContainerRef }, { token: i2.Overlay }, { token: i1.XI18nService }, { token: i4.XConfigService }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ XSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: XSelectComponent, selector: "x-select", providers: [XValueAccessor(XSelectComponent)], viewQueries: [{ propertyName: "inputCom", first: true, predicate: ["inputCom"], descendants: true, static: true }, { propertyName: "select", first: true, predicate: ["select"], descendants: true, static: true }, { propertyName: "multipleValueTpl", first: true, predicate: ["multipleValueTpl"], descendants: true, static: true }, { propertyName: "multipleInput", first: true, predicate: ["multipleInput"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div #select class=\"x-select\" [class.x-select-multiple]=\"multiple\">\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      [justify]=\"justify\"\r\n      [align]=\"align\"\r\n      [direction]=\"direction\"\r\n      [required]=\"required\"\r\n      [validator]=\"validator\"\r\n      [icon]=\"icon\"\r\n      [iconSpin]=\"iconSpin\"\r\n      [placeholder]=\"placeholder\"\r\n      [readonly]=\"getReadonly\"\r\n      [clearable]=\"showClearable\"\r\n      [(ngModel)]=\"displayValue\"\r\n      [valueTpl]=\"valueTpl ? valueTpl : nodeTpl\"\r\n      [valueTplContext]=\"valueTplContext\"\r\n      [size]=\"size\"\r\n      [bordered]=\"bordered\"\r\n      [before]=\"before\"\r\n      [after]=\"after\"\r\n      [pattern]=\"pattern\"\r\n      [message]=\"message\"\r\n      [pointer]=\"true\"\r\n      [inputPadding]=\"inputPadding\"\r\n      [(active)]=\"active\"\r\n      (clearEmit)=\"clearEmit()\"\r\n      (xKeydown)=\"onKeydown($event)\"\r\n      (xInput)=\"onInput($event)\"\r\n      (xFocus)=\"onFocus($event)\"\r\n      (xClick)=\"showPortal(true)\"\r\n      (xMouseenter)=\"menter()\"\r\n      (xMouseleave)=\"mleave()\"\r\n      (xComposition)=\"composition = $event\"\r\n    ></x-input>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #multipleValueTpl>\r\n  <x-tag [@.disabled]=\"true\" *ngFor=\"let node of displayNodes; index as i\" closable (close)=\"closeNode($event, node, i)\" [size]=\"size\">{{\r\n    node.label\r\n  }}</x-tag>\r\n  <x-tag [@.disabled]=\"true\" *ngIf=\"showDisplayMore\" [size]=\"size\">\r\n    <ng-container *xOutlet=\"getMaxTagContent; context: { $surplus: selectedSurplus, $total: selectedTotal }\">{{\r\n      displayMore\r\n    }}</ng-container>\r\n  </x-tag>\r\n  <x-input\r\n    #multipleInput\r\n    *ngIf=\"search\"\r\n    bordered=\"false\"\r\n    [size]=\"size\"\r\n    inputPadding=\"0.275\"\r\n    [(ngModel)]=\"multipleSearchValue\"\r\n    (xInput)=\"onInput($event)\"\r\n    (xKeydown)=\"onKeydown($event)\"\r\n  ></x-input>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";x-select{display:inline-block;width:12rem}.x-select{margin:0;padding:0;width:100%}.x-select x-input{width:100%}.x-select-multiple .x-input-value-template-value{display:flex;align-items:center;margin-bottom:.125rem;flex-wrap:wrap;width:initial;height:initial!important}.x-select-multiple .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{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{right:calc(-var(--x-padding-large)/2)}.x-select-multiple .x-input-value-template-value>x-tag .x-tag-large{height:var(--x-height-medium);line-height:var(--x-height-medium);padding:0 var(--x-padding-medium)}.x-select-multiple .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{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{right:calc(-var(--x-padding-small)/2)}.x-select-multiple .x-input-value-template-value>x-tag .x-tag-small{height:var(--x-height-mini);line-height:var(--x-height-mini);padding:0 var(--x-padding-mini)}.x-select-multiple .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{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{right:-.0625rem}.x-select-multiple .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{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{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){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{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{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{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){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{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{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{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){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{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{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{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){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{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{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{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){height:1.125rem;line-height:1.125rem;padding:0 .125rem}.x-select-multiple .x-input-value-template-value>x-input .x-input-mini>label{height:1.125rem;line-height:1.125rem}.x-select-portal{margin:.0625rem 0;font-size:var(--x-font-size);color:var(--x-text);border:var(--x-border-width) var(--x-border-style) var(--x-border);width:100%;border-radius:var(--x-border-radius);box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color);position:relative;display:flex;background-color:var(--x-background);overflow:hidden auto;max-height:calc((calc(var(--x-font-size) + .875rem) * 6) + (var(--x-border-width) * 7))}\n"], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i6.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.XInputComponent, selector: "x-input" }, { kind: "component", type: i8.XTagComponent, selector: "x-tag" }, { kind: "directive", type: i9.XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: XSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: `${XSelectPrefix}`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [XValueAccessor(XSelectComponent)], template: "<div #select class=\"x-select\">\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      [justify]=\"justify\"\r\n      [align]=\"align\"\r\n      [direction]=\"direction\"\r\n      [required]=\"required\"\r\n      [icon]=\"icon\"\r\n      [iconSpin]=\"iconSpin\"\r\n      [placeholder]=\"placeholder\"\r\n      [readonly]=\"getReadonly\"\r\n      [clearable]=\"showClearable\"\r\n      [(ngModel)]=\"displayValue\"\r\n      [valueTpl]=\"valueTpl ? valueTpl : nodeTpl\"\r\n      [valueTplContext]=\"valueTplContext\"\r\n      [size]=\"size\"\r\n      [bordered]=\"bordered\"\r\n      [before]=\"before\"\r\n      [after]=\"after\"\r\n      [pattern]=\"pattern\"\r\n      [message]=\"message\"\r\n      [pointer]=\"true\"\r\n      [(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()\"\r\n      (xMouseenter)=\"menter()\"\r\n      (xMouseleave)=\"mleave()\"\r\n    ></x-input>\r\n  </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";x-select{display:inline-block;width:12rem}.x-select{margin:0;padding:0;width:100%}.x-select x-input{width:100%}.x-select-portal{margin:.0625rem 0;font-size:var(--x-font-size);color:var(--x-text);border:var(--x-border-width) var(--x-border-style) var(--x-border);width:100%;border-radius:var(--x-border-radius);box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color);position:relative;display:flex;background-color:var(--x-background);overflow:hidden auto;max-height:calc((calc(var(--x-font-size) + .875rem) * 6) + (var(--x-border-width) * 7))}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i1$1.XPortalService }, { type: i0.ViewContainerRef }, { type: i2.Overlay }, { type: i3$1.XConfigService }]; }, propDecorators: { inputCom: [{
+            args: [{ selector: `${XSelectPrefix}`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [XValueAccessor(XSelectComponent)], template: "<div #select class=\"x-select\" [class.x-select-multiple]=\"multiple\">\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      [justify]=\"justify\"\r\n      [align]=\"align\"\r\n      [direction]=\"direction\"\r\n      [required]=\"required\"\r\n      [validator]=\"validator\"\r\n      [icon]=\"icon\"\r\n      [iconSpin]=\"iconSpin\"\r\n      [placeholder]=\"placeholder\"\r\n      [readonly]=\"getReadonly\"\r\n      [clearable]=\"showClearable\"\r\n      [(ngModel)]=\"displayValue\"\r\n      [valueTpl]=\"valueTpl ? valueTpl : nodeTpl\"\r\n      [valueTplContext]=\"valueTplContext\"\r\n      [size]=\"size\"\r\n      [bordered]=\"bordered\"\r\n      [before]=\"before\"\r\n      [after]=\"after\"\r\n      [pattern]=\"pattern\"\r\n      [message]=\"message\"\r\n      [pointer]=\"true\"\r\n      [inputPadding]=\"inputPadding\"\r\n      [(active)]=\"active\"\r\n      (clearEmit)=\"clearEmit()\"\r\n      (xKeydown)=\"onKeydown($event)\"\r\n      (xInput)=\"onInput($event)\"\r\n      (xFocus)=\"onFocus($event)\"\r\n      (xClick)=\"showPortal(true)\"\r\n      (xMouseenter)=\"menter()\"\r\n      (xMouseleave)=\"mleave()\"\r\n      (xComposition)=\"composition = $event\"\r\n    ></x-input>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #multipleValueTpl>\r\n  <x-tag [@.disabled]=\"true\" *ngFor=\"let node of displayNodes; index as i\" closable (close)=\"closeNode($event, node, i)\" [size]=\"size\">{{\r\n    node.label\r\n  }}</x-tag>\r\n  <x-tag [@.disabled]=\"true\" *ngIf=\"showDisplayMore\" [size]=\"size\">\r\n    <ng-container *xOutlet=\"getMaxTagContent; context: { $surplus: selectedSurplus, $total: selectedTotal }\">{{\r\n      displayMore\r\n    }}</ng-container>\r\n  </x-tag>\r\n  <x-input\r\n    #multipleInput\r\n    *ngIf=\"search\"\r\n    bordered=\"false\"\r\n    [size]=\"size\"\r\n    inputPadding=\"0.275\"\r\n    [(ngModel)]=\"multipleSearchValue\"\r\n    (xInput)=\"onInput($event)\"\r\n    (xKeydown)=\"onKeydown($event)\"\r\n  ></x-input>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";x-select{display:inline-block;width:12rem}.x-select{margin:0;padding:0;width:100%}.x-select x-input{width:100%}.x-select-multiple .x-input-value-template-value{display:flex;align-items:center;margin-bottom:.125rem;flex-wrap:wrap;width:initial;height:initial!important}.x-select-multiple .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{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{right:calc(-var(--x-padding-large)/2)}.x-select-multiple .x-input-value-template-value>x-tag .x-tag-large{height:var(--x-height-medium);line-height:var(--x-height-medium);padding:0 var(--x-padding-medium)}.x-select-multiple .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{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{right:calc(-var(--x-padding-small)/2)}.x-select-multiple .x-input-value-template-value>x-tag .x-tag-small{height:var(--x-height-mini);line-height:var(--x-height-mini);padding:0 var(--x-padding-mini)}.x-select-multiple .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{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{right:-.0625rem}.x-select-multiple .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{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{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){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{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{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{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){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{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{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{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){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{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{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{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){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{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{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{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){height:1.125rem;line-height:1.125rem;padding:0 .125rem}.x-select-multiple .x-input-value-template-value>x-input .x-input-mini>label{height:1.125rem;line-height:1.125rem}.x-select-portal{margin:.0625rem 0;font-size:var(--x-font-size);color:var(--x-text);border:var(--x-border-width) var(--x-border-style) var(--x-border);width:100%;border-radius:var(--x-border-radius);box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color);position:relative;display:flex;background-color:var(--x-background);overflow:hidden auto;max-height:calc((calc(var(--x-font-size) + .875rem) * 6) + (var(--x-border-width) * 7))}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i1$1.XPortalService }, { type: i0.ViewContainerRef }, { type: i2.Overlay }, { type: i1.XI18nService }, { type: i4.XConfigService }]; }, propDecorators: { inputCom: [{
                 type: ViewChild,
                 args: ['inputCom', { static: true }]
             }], select: [{
                 type: ViewChild,
                 args: ['select', { static: true }]
+            }], multipleValueTpl: [{
+                type: ViewChild,
+                args: ['multipleValueTpl', { static: true }]
+            }], multipleInput: [{
+                type: ViewChild,
+                args: ['multipleInput']
             }] } });
 
 class XSelectModule {
 }
 /** @nocollapse */ XSelectModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: XSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-/** @nocollapse */ XSelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: XSelectModule, declarations: [XSelectComponent, XSelectPortalComponent, XSelectProperty], imports: [CommonModule, FormsModule, ReactiveFormsModule, XPortalModule, XInputModule, XListModule, XBaseFormModule, XI18nModule], exports: [XSelectComponent, XSelectPortalComponent] });
-/** @nocollapse */ XSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: XSelectModule, imports: [CommonModule, FormsModule, ReactiveFormsModule, XPortalModule, XInputModule, XListModule, XBaseFormModule, XI18nModule] });
+/** @nocollapse */ XSelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: XSelectModule, declarations: [XSelectComponent, XSelectPortalComponent, XSelectProperty], imports: [CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        XPortalModule,
+        XInputModule,
+        XListModule,
+        XBaseFormModule,
+        XTagModule,
+        XI18nModule,
+        XOutletModule], exports: [XSelectComponent, XSelectPortalComponent] });
+/** @nocollapse */ XSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: XSelectModule, imports: [CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        XPortalModule,
+        XInputModule,
+        XListModule,
+        XBaseFormModule,
+        XTagModule,
+        XI18nModule,
+        XOutletModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: XSelectModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [XSelectComponent, XSelectPortalComponent, XSelectProperty],
                     exports: [XSelectComponent, XSelectPortalComponent],
-                    imports: [CommonModule, FormsModule, ReactiveFormsModule, XPortalModule, XInputModule, XListModule, XBaseFormModule, XI18nModule]
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        XPortalModule,
+                        XInputModule,
+                        XListModule,
+                        XBaseFormModule,
+                        XTagModule,
+                        XI18nModule,
+                        XOutletModule
+                    ]
                 }]
         }] });