@ng-nest/ui 15.0.20 → 16.0.1

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

@@ -0,0 +1,883 @@
+import { Subject, BehaviorSubject } 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 i4 from '@ng-nest/ui/core';
+import { XDataConvert, XWithConfig, XInputBoolean, XInputNumber, XConnectBaseAnimation, XIsEmpty, XIsArray, XIsChange, XResize, XClearClass, XSetData, XComputed, XIsFunction, XIsObjectArray, XRemove, XIsString, XIsObservable } from '@ng-nest/ui/core';
+import { XControlValueAccessor, XValueAccessor, XBaseFormModule } from '@ng-nest/ui/base-form';
+import * as i1$1 from '@ng-nest/ui/portal';
+import { XPortalConnectedPosition, XPortalModule } from '@ng-nest/ui/portal';
+import { 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 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, BACKSPACE, ESCAPE, TAB } from '@angular/cdk/keycodes';
+import * as i2 from '@angular/cdk/overlay';
+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
+ * @selector x-select
+ * @decorator component
+ */
+const XSelectPrefix = 'x-select';
+const X_CONFIG_NAME = 'select';
+/**
+ * Select Property
+ */
+class XSelectProperty extends XControlValueAccessor {
+    constructor() {
+        super(...arguments);
+        /**
+         * @zh_CN 节点数据
+         * @en_US Node data
+         */
+        this.data = [];
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: XSelectProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: XSelectProperty, selector: "x-select-property", inputs: { data: "data", clearable: "clearable", async: "async", placement: "placement", multiple: "multiple", selectAll: "selectAll", selectAllText: "selectAllText", nodeTpl: "nodeTpl", size: "size", bordered: "bordered", portalMaxHeight: "portalMaxHeight", portalWidth: "portalWidth", search: "search", caseSensitive: "caseSensitive", debounceTime: "debounceTime", maxTagCount: "maxTagCount", maxTagContent: "maxTagContent", virtualScroll: "virtualScroll" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+}
+__decorate([
+    XDataConvert()
+], XSelectProperty.prototype, "data", void 0);
+__decorate([
+    XWithConfig(X_CONFIG_NAME, true),
+    XInputBoolean()
+], XSelectProperty.prototype, "clearable", void 0);
+__decorate([
+    XInputBoolean()
+], XSelectProperty.prototype, "async", void 0);
+__decorate([
+    XWithConfig(X_CONFIG_NAME, 'bottom')
+], XSelectProperty.prototype, "placement", void 0);
+__decorate([
+    XInputBoolean()
+], XSelectProperty.prototype, "multiple", void 0);
+__decorate([
+    XInputBoolean()
+], XSelectProperty.prototype, "selectAll", void 0);
+__decorate([
+    XWithConfig(X_CONFIG_NAME)
+], XSelectProperty.prototype, "selectAllText", void 0);
+__decorate([
+    XWithConfig(X_CONFIG_NAME, 'medium')
+], XSelectProperty.prototype, "size", void 0);
+__decorate([
+    XInputBoolean(),
+    XWithConfig(X_CONFIG_NAME, true)
+], XSelectProperty.prototype, "bordered", void 0);
+__decorate([
+    XWithConfig(X_CONFIG_NAME, '12rem')
+], XSelectProperty.prototype, "portalMaxHeight", void 0);
+__decorate([
+    XInputBoolean(),
+    XWithConfig(X_CONFIG_NAME, false)
+], XSelectProperty.prototype, "search", void 0);
+__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);
+__decorate([
+    XWithConfig(X_CONFIG_NAME),
+    XInputBoolean()
+], XSelectProperty.prototype, "virtualScroll", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: XSelectProperty, decorators: [{
+            type: Component,
+            args: [{ selector: `${XSelectPrefix}-property`, template: '' }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], clearable: [{
+                type: Input
+            }], async: [{
+                type: Input
+            }], placement: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], selectAll: [{
+                type: Input
+            }], selectAllText: [{
+                type: Input
+            }], nodeTpl: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], bordered: [{
+                type: Input
+            }], portalMaxHeight: [{
+                type: Input
+            }], portalWidth: [{
+                type: Input
+            }], search: [{
+                type: Input
+            }], caseSensitive: [{
+                type: Input
+            }], debounceTime: [{
+                type: Input
+            }], maxTagCount: [{
+                type: Input
+            }], maxTagContent: [{
+                type: Input
+            }], virtualScroll: [{
+                type: Input
+            }] } });
+/**
+ * Select Portal
+ * @selector x-select-portal
+ * @decorator component
+ */
+const XSelectPortalPrefix = 'x-select-portal';
+
+class XSelectPortalComponent {
+    done(event) {
+        this.animating(false);
+        event.toState === 'void' && this.destroyPortal();
+    }
+    start() {
+        this.animating(true);
+    }
+    get getSelectAllText() {
+        return this.selectAllText || this.locale.selectAllText;
+    }
+    constructor(renderer, cdr, i18n) {
+        this.renderer = renderer;
+        this.cdr = cdr;
+        this.i18n = i18n;
+        this.multiple = 1;
+        this.selectAll = false;
+        this.show = false;
+        this.objectArray = false;
+        this.caseSensitive = true;
+        this.active = -1;
+        this.portalMaxHeight = '';
+        this.locale = {};
+        this.search = false;
+        this.scrollNull = undefined;
+        this._unSubject = new Subject();
+    }
+    ngOnInit() {
+        this.valueChange.pipe(takeUntil(this._unSubject)).subscribe((x) => {
+            this.value = x;
+            this.cdr.detectChanges();
+        });
+        this.positionChange.pipe(takeUntil(this._unSubject)).subscribe((x) => {
+            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.inputChange.pipe(takeUntil(this._unSubject)).subscribe((x) => {
+            this.keywordText = x;
+        });
+        this.i18n.localeChange
+            .pipe(map((x) => x.select), takeUntil(this._unSubject))
+            .subscribe((x) => {
+            this.locale = x;
+            this.cdr.markForCheck();
+        });
+    }
+    ngOnDestroy() {
+        this._unSubject.next();
+        this._unSubject.unsubscribe();
+    }
+    stopPropagation(event) {
+        event.stopPropagation();
+    }
+    nodeClick(node) {
+        if (this.multiple === 0) {
+            this.nodeEmit(node, this.value);
+        }
+        else {
+            this.nodeEmit(node);
+        }
+    }
+    onSelectAll(_isSelectAll) {
+        this.nodeEmit(null, this.value);
+    }
+    onActive(num) {
+        this.active = num;
+    }
+    onTabOut() {
+        this.closeSubject.next();
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: XSelectPortalComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.XI18nService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", 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    [virtualScroll]=\"virtualScroll\"\r\n    [size]=\"size\"\r\n    [heightAdaption]=\"selectPortal\"\r\n    [keywordText]=\"keywordText\"\r\n    [caseSensitive]=\"caseSensitive\"\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: "16.0.0", 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    [virtualScroll]=\"virtualScroll\"\r\n    [size]=\"size\"\r\n    [heightAdaption]=\"selectPortal\"\r\n    [keywordText]=\"keywordText\"\r\n    [caseSensitive]=\"caseSensitive\"\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"] }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i1.XI18nService }]; }, propDecorators: { placement: [{
+                type: HostBinding,
+                args: ['@x-connect-base-animation']
+            }], done: [{
+                type: HostListener,
+                args: ['@x-connect-base-animation.done', ['$event']]
+            }], start: [{
+                type: HostListener,
+                args: ['@x-connect-base-animation.start', ['$event']]
+            }], list: [{
+                type: ViewChild,
+                args: ['list']
+            }] } });
+
+class XSelectComponent extends XSelectProperty {
+    get getReadonly() {
+        return (this.readonly && !this.search) || (Boolean(this.search) && Boolean(this.multiple));
+    }
+    get getMaxTagContent() {
+        return this.maxTagContent || this.locale.maxTagContent;
+    }
+    writeValue(value) {
+        if (this.multiple) {
+            if (XIsEmpty(value)) {
+                value = [];
+            }
+            if (!XIsArray(value)) {
+                value = [value];
+            }
+        }
+        this.value = value;
+        this.setDisplayValue();
+        this.valueChange.next(this.value);
+        this.cdr.detectChanges();
+    }
+    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.noPortalWidthPlacements = ['bottom', 'top'];
+        this.hasPortalWidthPlacements = ['bottom-start', 'bottom-end', 'top-start', 'top-end'];
+        this.placements = [];
+        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 BehaviorSubject([]);
+        this.keydownSubject = new Subject();
+        this.inputChange = new Subject();
+        this.composition = false;
+        this.multipleInputSizeChange = new Subject();
+        this._unSubject = new Subject();
+    }
+    ngOnInit() {
+        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;
+        }
+        if (this.portalWidth) {
+            if (this.placement === 'bottom') {
+                this.placement = 'bottom-start';
+            }
+            this.placements = [this.placement, ...this.hasPortalWidthPlacements];
+        }
+        else {
+            this.placements = [this.placement, ...this.noPortalWidthPlacements];
+        }
+        this.i18n.localeChange
+            .pipe(map((x) => x.select), takeUntil(this._unSubject))
+            .subscribe((x) => {
+            this.locale = x;
+            this.cdr.markForCheck();
+        });
+    }
+    ngOnChanges(changes) {
+        const { data } = changes;
+        XIsChange(data) && this.setData();
+    }
+    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);
+        this.labelMap[`x-text-align-${this.labelAlign}`] = this.labelAlign ? true : false;
+    }
+    setData() {
+        if (this.async)
+            return;
+        XSetData(this.data, this._unSubject).subscribe((x) => {
+            this.nodes = x;
+            this.dataChange.next(this.nodes);
+            this.setDisplayValue();
+            this.setPortal();
+            this.cdr.detectChanges();
+        });
+    }
+    setSubject() {
+        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, BACKSPACE].includes(keyCode)) {
+                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 = XComputed(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 || this.iconSpin)
+            return;
+        this.enter = true;
+        if (!XIsEmpty(this.displayValue)) {
+            this.icon = '';
+            this.showClearable = true;
+            this.cdr.detectChanges();
+        }
+    }
+    mleave() {
+        if (this.disabled || !this.clearable || this.iconSpin)
+            return;
+        this.enter = false;
+        if (this.clearable) {
+            this.icon = 'fto-chevron-down';
+            this.showClearable = false;
+            this.cdr.detectChanges();
+        }
+    }
+    modelChange(value) {
+        if (XIsFunction(this.data)) {
+            if (!this.portalAttached()) {
+                this.showPortal();
+            }
+            this.icon = 'fto-loader';
+            this.iconSpin = true;
+            this.cdr.detectChanges();
+            XSetData(this.data, this._unSubject, true, value).subscribe((x) => {
+                this.icon = '';
+                this.iconSpin = false;
+                if (!this.enter && this.clearable) {
+                    this.showClearable = false;
+                }
+                this.nodes = x;
+                this.dataChange.next(this.nodes);
+                this.cdr.detectChanges();
+            });
+            return;
+        }
+        if (this.nodes) {
+            if (!this.portalAttached()) {
+                this.showPortal();
+            }
+            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.multiple ? [] : '';
+        this.displayValue = '';
+        this.multipleSearchValue = '';
+        this.selectedNodes = [];
+        this.setDisplayNodes();
+        this.valueTplContext.$node = null;
+        this.mleave();
+        this.valueChange.next(this.value);
+        this.inputChange.next('');
+        if (this.onChange)
+            this.onChange(this.value);
+    }
+    setDisplayValue(clickNode) {
+        if (this.nodes.length > 0) {
+            if (this.multiple) {
+                if (XIsEmpty(this.value)) {
+                    this.value = [];
+                    this.displayValue = '';
+                    this.selectedNodes = [];
+                    this.displayNodes = [];
+                    this.displayMore = '';
+                    this.valueTplContext.$node = null;
+                    this.setDisplayNodes();
+                }
+                else {
+                    let ids = [];
+                    let selected = [];
+                    if (XIsObjectArray(this.value)) {
+                        this.objectArray = true;
+                        ids = this.value.map((x) => x.id);
+                    }
+                    else {
+                        this.objectArray = false;
+                        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.setDisplayNodes();
+                    this.displayValue = this.selectedNodes.map((x) => x.label).join(',');
+                    this.valueTplContext.$node = [...this.selectedNodes];
+                }
+            }
+            else {
+                let node = this.nodes.find((x) => x.id === this.value);
+                if (node) {
+                    this.displayValue = node.label;
+                    this.valueTplContext.$node = node;
+                }
+                else {
+                    this.displayValue = '';
+                    this.valueTplContext.$node = null;
+                }
+            }
+            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)
+            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();
+    }
+    closePortal() {
+        if (this.portalAttached()) {
+            this.portal?.overlayRef?.detach();
+            this.active = false;
+            this.multipleSearchValue = '';
+            this.cdr.detectChanges();
+            return true;
+        }
+        return false;
+    }
+    destroyPortal() {
+        this.portal?.overlayRef?.dispose();
+    }
+    showPortal(click = false) {
+        if (this.disabled || this.iconSpin || this.animating)
+            return;
+        this.active = true;
+        if ((this.async && XIsObservable(this.data) && this.nodes.length === 0) || XIsFunction(this.data)) {
+            this.icon = 'fto-loader';
+            this.iconSpin = true;
+            this.inputCom.cdr.detectChanges();
+            XSetData(this.data, this._unSubject, true, click ? '' : this.displayValue).subscribe((x) => {
+                this.icon = 'fto-chevron-down';
+                this.iconSpin = false;
+                if (!this.enter && this.clearable) {
+                    this.showClearable = false;
+                }
+                this.inputCom.cdr.detectChanges();
+                this.nodes = x;
+                this.dataChange.next(this.nodes);
+                if (!this.search)
+                    this.setDisplayValue();
+                this.createPortal();
+                this.cdr.detectChanges();
+            });
+        }
+        else {
+            this.dataChange.next(this.nodes);
+            this.createPortal();
+        }
+        if (this.search && this.multiple) {
+            this.multipleInput.inputFocus();
+        }
+        else {
+            this.inputCom.inputFocus();
+        }
+    }
+    createPortal() {
+        this.nodes.filter((x) => x.selected).map((x) => (x.selected = false));
+        this.box = this.inputCom.inputRef.nativeElement.getBoundingClientRect();
+        const config = {
+            backdropClass: '',
+            width: this.portalWidth || this.box.width,
+            positionStrategy: this.setPlacement(),
+            scrollStrategy: this.overlay.scrollStrategies.reposition()
+        };
+        this.setPosition(config);
+        this.portal = this.portalService.attach({
+            content: XSelectPortalComponent,
+            viewContainerRef: this.viewContainerRef,
+            overlayConfig: config
+        });
+        this.portal.overlayRef
+            ?.outsidePointerEvents()
+            .pipe(takeUntil(this._unSubject))
+            .subscribe(() => {
+            this.setDisplayValue();
+            this.closeSubject.next();
+        });
+        this.setInstance();
+    }
+    setPosition(config) {
+        let position = config.positionStrategy;
+        position.positionChanges.pipe(takeUntil(this._unSubject)).subscribe((pos) => {
+            const place = XPortalConnectedPosition.get(pos.connectionPair);
+            place !== this.placement && this.positionChange.next(place);
+        });
+    }
+    setInstance() {
+        let componentRef = this.portal.componentRef;
+        if (!componentRef)
+            return;
+        Object.assign(componentRef.instance, {
+            data: this.nodes,
+            value: this.value,
+            placement: this.placement,
+            multiple: this.multiple === true ? 0 : 1,
+            selectAll: this.selectAll,
+            nodeTpl: this.nodeTpl,
+            valueChange: this.valueChange,
+            positionChange: this.positionChange,
+            closeSubject: this.closeSubject,
+            keydownSubject: this.keydownSubject,
+            dataChange: this.dataChange,
+            inputCom: this.inputCom,
+            portalMaxHeight: this.portalMaxHeight,
+            objectArray: this.objectArray,
+            selectAllText: this.selectAllText,
+            caseSensitive: this.caseSensitive,
+            search: this.search,
+            virtualScroll: this.virtualScroll,
+            size: this.size,
+            inputChange: this.inputChange,
+            destroyPortal: () => this.destroyPortal(),
+            nodeEmit: (node, value) => this.nodeClick(node, value),
+            animating: (ing) => (this.animating = ing)
+        });
+        componentRef.changeDetectorRef.detectChanges();
+    }
+    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;
+            this.displayValue = node.label;
+            this.valueTplContext.$node = node;
+            this.value = node.id;
+            this.closeSubject.next();
+        }
+        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,
+            placement: this.placements,
+            transformOriginOn: 'x-select-portal'
+        });
+    }
+    setPortal() {
+        this.portalAttached() && this.portal?.overlayRef?.updatePositionStrategy(this.setPlacement());
+    }
+    formControlChanges() {
+        this.setData();
+        this.ngOnInit();
+        this.writeValue(this.value);
+        this.ngAfterViewInit();
+        this.cdr.detectChanges();
+    }
+    onKeydown($event) {
+        this.keydownSubject.next($event);
+        if ($event.keyCode !== TAB && !this.search) {
+            $event.preventDefault();
+        }
+    }
+    onFocus(_event) {
+        if (this.search && this.multiple) {
+            this.multipleInput.inputFocus();
+        }
+        else {
+            this.inputCom.inputFocus();
+        }
+    }
+    onInput(_event) {
+        this.formControlValidator();
+        setTimeout(() => this.inputChange.next(this.multiple ? this.multipleSearchValue : this.displayValue));
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", 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 */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", 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      [disabled]=\"disabled\"\r\n      [validator]=\"validator\"\r\n      [icon]=\"icon\"\r\n      [iconSpin]=\"iconSpin\"\r\n      [placeholder]=\"placeholder\"\r\n      [readonly]=\"getReadonly\"\r\n      [clearable]=\"showClearable\"\r\n      [(ngModel)]=\"displayValue\"\r\n      [valueTpl]=\"valueTpl ? valueTpl : nodeTpl\"\r\n      [valueTplContext]=\"valueTplContext\"\r\n      [size]=\"size\"\r\n      [bordered]=\"bordered\"\r\n      [before]=\"before\"\r\n      [after]=\"after\"\r\n      [pattern]=\"pattern\"\r\n      [message]=\"message\"\r\n      [pointer]=\"true\"\r\n      [inputPadding]=\"inputPadding\"\r\n      [(active)]=\"active\"\r\n      (clearEmit)=\"clearEmit()\"\r\n      (xKeydown)=\"onKeydown($event)\"\r\n      (xInput)=\"onInput($event)\"\r\n      (xFocus)=\"onFocus($event)\"\r\n      (xClick)=\"showPortal(true)\"\r\n      (xMouseenter)=\"menter()\"\r\n      (xMouseleave)=\"mleave()\"\r\n      (xComposition)=\"composition = $event\"\r\n    ></x-input>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #multipleValueTpl>\r\n  <x-tag\r\n    [@.disabled]=\"true\"\r\n    *ngFor=\"let node of displayNodes; index as i\"\r\n    [closable]=\"!disabled\"\r\n    (close)=\"closeNode($event, node, i)\"\r\n    [size]=\"size\"\r\n    >{{ node.label }}</x-tag\r\n  >\r\n  <x-tag [@.disabled]=\"true\" *ngIf=\"showDisplayMore\" [size]=\"size\">\r\n    <ng-container *xOutlet=\"getMaxTagContent; context: { $surplus: selectedSurplus, $total: selectedTotal }\">{{\r\n      displayMore\r\n    }}</ng-container>\r\n  </x-tag>\r\n  <x-input\r\n    #multipleInput\r\n    *ngIf=\"search\"\r\n    bordered=\"false\"\r\n    [size]=\"size\"\r\n    inputPadding=\"0.275\"\r\n    [(ngModel)]=\"multipleSearchValue\"\r\n    (xInput)=\"onInput($event)\"\r\n    (xKeydown)=\"onKeydown($event)\"\r\n  ></x-input>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";x-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-multiple .x-input-value-template-value>x-input .x-input-row>.x-input-input>input{background-color:transparent}.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: "16.0.0", 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\" [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      [disabled]=\"disabled\"\r\n      [validator]=\"validator\"\r\n      [icon]=\"icon\"\r\n      [iconSpin]=\"iconSpin\"\r\n      [placeholder]=\"placeholder\"\r\n      [readonly]=\"getReadonly\"\r\n      [clearable]=\"showClearable\"\r\n      [(ngModel)]=\"displayValue\"\r\n      [valueTpl]=\"valueTpl ? valueTpl : nodeTpl\"\r\n      [valueTplContext]=\"valueTplContext\"\r\n      [size]=\"size\"\r\n      [bordered]=\"bordered\"\r\n      [before]=\"before\"\r\n      [after]=\"after\"\r\n      [pattern]=\"pattern\"\r\n      [message]=\"message\"\r\n      [pointer]=\"true\"\r\n      [inputPadding]=\"inputPadding\"\r\n      [(active)]=\"active\"\r\n      (clearEmit)=\"clearEmit()\"\r\n      (xKeydown)=\"onKeydown($event)\"\r\n      (xInput)=\"onInput($event)\"\r\n      (xFocus)=\"onFocus($event)\"\r\n      (xClick)=\"showPortal(true)\"\r\n      (xMouseenter)=\"menter()\"\r\n      (xMouseleave)=\"mleave()\"\r\n      (xComposition)=\"composition = $event\"\r\n    ></x-input>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #multipleValueTpl>\r\n  <x-tag\r\n    [@.disabled]=\"true\"\r\n    *ngFor=\"let node of displayNodes; index as i\"\r\n    [closable]=\"!disabled\"\r\n    (close)=\"closeNode($event, node, i)\"\r\n    [size]=\"size\"\r\n    >{{ node.label }}</x-tag\r\n  >\r\n  <x-tag [@.disabled]=\"true\" *ngIf=\"showDisplayMore\" [size]=\"size\">\r\n    <ng-container *xOutlet=\"getMaxTagContent; context: { $surplus: selectedSurplus, $total: selectedTotal }\">{{\r\n      displayMore\r\n    }}</ng-container>\r\n  </x-tag>\r\n  <x-input\r\n    #multipleInput\r\n    *ngIf=\"search\"\r\n    bordered=\"false\"\r\n    [size]=\"size\"\r\n    inputPadding=\"0.275\"\r\n    [(ngModel)]=\"multipleSearchValue\"\r\n    (xInput)=\"onInput($event)\"\r\n    (xKeydown)=\"onKeydown($event)\"\r\n  ></x-input>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";x-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-multiple .x-input-value-template-value>x-input .x-input-row>.x-input-input>input{background-color:transparent}.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 */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: XSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: XSelectModule, declarations: [XSelectComponent, XSelectPortalComponent, XSelectProperty], imports: [CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            XPortalModule,
+            XInputModule,
+            XListModule,
+            XBaseFormModule,
+            XTagModule,
+            XI18nModule,
+            XOutletModule], exports: [XSelectComponent, XSelectPortalComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: XSelectModule, imports: [CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            XPortalModule,
+            XInputModule,
+            XListModule,
+            XBaseFormModule,
+            XTagModule,
+            XI18nModule,
+            XOutletModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: XSelectModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [XSelectComponent, XSelectPortalComponent, XSelectProperty],
+                    exports: [XSelectComponent, XSelectPortalComponent],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        XPortalModule,
+                        XInputModule,
+                        XListModule,
+                        XBaseFormModule,
+                        XTagModule,
+                        XI18nModule,
+                        XOutletModule
+                    ]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { XSelectComponent, XSelectModule, XSelectPortalComponent, XSelectPortalPrefix, XSelectPrefix, XSelectProperty };
+//# sourceMappingURL=ng-nest-ui-select.mjs.map