@ng-nest/ui 15.0.19 → 16.0.0

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

@@ -1,883 +0,0 @@
-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 */ XSelectProperty.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: XSelectProperty, deps: null, target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ XSelectProperty.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", 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", 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: "15.2.7", ngImport: i0, type: XSelectProperty, decorators: [{
-            type: Component,
-            args: [{ 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 {
-    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();
-    }
-    done(event) {
-        this.animating(false);
-        event.toState === 'void' && this.destroyPortal();
-    }
-    start() {
-        this.animating(true);
-    }
-    get getSelectAllText() {
-        return this.selectAllText || this.locale.selectAllText;
-    }
-    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 */ XSelectPortalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", 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: "15.2.7", 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: "15.2.7", 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 {
-    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();
-    }
-    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();
-    }
-    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 */ XSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", 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: "15.2.7", 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: "15.2.7", 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 */ XSelectModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: XSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-/** @nocollapse */ XSelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.7", 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: "15.2.7", ngImport: i0, type: XSelectModule, imports: [CommonModule,
-        FormsModule,
-        ReactiveFormsModule,
-        XPortalModule,
-        XInputModule,
-        XListModule,
-        XBaseFormModule,
-        XTagModule,
-        XI18nModule,
-        XOutletModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", 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