@d4k-ui/nbx-inputs 21.0.0

package/fesm2022/d4k-ui-nbx-inputs.mjs

@@ -0,0 +1,1342 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, Injector, DestroyRef, input, signal, computed, effect, Directive, Component, HostListener, ChangeDetectionStrategy, viewChild, viewChildren, output, importProvidersFrom } from '@angular/core';
+import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
+import * as i1$2 from '@angular/forms';
+import { FormControl, FormArray, FormGroup, FormControlName, FormArrayName, NgControl, Validators, ValueChangeEvent, StatusChangeEvent, PristineChangeEvent, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Observable, finalize, throttleTime, startWith, map } from 'rxjs';
+import { Clipboard } from '@angular/cdk/clipboard';
+import * as i1$1 from '@angular/cdk/overlay';
+import { Overlay, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
+import { trigger, transition, style, animate } from '@angular/animations';
+import { NbIconComponent, NbTooltipDirective, NbOptionComponent, NbOptionListComponent, NbCheckboxComponent, NbInputDirective, NbButtonComponent, NbFormFieldComponent, NbSuffixDirective, NbDatepickerDirective, NbDatepickerComponent, NbDateService, NbRangepickerComponent, NbDateTimePickerComponent, NbSelectComponent } from '@d4k-ui/theme';
+import { KeyValuePipe } from '@angular/common';
+import * as i1 from '@angular/cdk/scrolling';
+import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
+
+/**
+ *
+ * @param formGroup
+ * @param onlyActive if true, only not disabled controls will be marked as dirty
+ */
+function markAllControlsAsDirty(abstractControl) {
+    if (abstractControl instanceof FormControl) {
+        abstractControl.markAsDirty();
+        return;
+    }
+    if (abstractControl instanceof FormArray) {
+        abstractControl.controls.forEach((control) => {
+            markAllControlsAsDirty(control);
+        });
+        return;
+    }
+    if (abstractControl instanceof FormGroup) {
+        Object.values(abstractControl.controls).forEach((control) => {
+            markAllControlsAsDirty(control);
+        });
+    }
+}
+function isQueryIncludesInObject(obj, query) {
+    return Object.keys(obj).some((key) => {
+        if (!obj[key]) {
+            return false;
+        }
+        if (Array.isArray(obj[key])) {
+            return obj[key].some((item) => isQueryIncludesInObject(item, query));
+        }
+        if (typeof obj[key] === 'object') {
+            return isQueryIncludesInObject(obj[key], query);
+        }
+        if (typeof obj[key] === 'string' || typeof obj[key] === 'number') {
+            return obj[key].toString().toLowerCase().includes(query.toLowerCase());
+        }
+        return false;
+    });
+}
+function getFilteredBySearchArray(arr, query) {
+    return arr.filter((item) => isQueryIncludesInObject(item, query));
+}
+function filterAndSortOptionsBySearch(list, query) {
+    const filtered = filterOptionsBySearch(list, query);
+    return sortOptionsBySearchIndex(filtered, query.toString(), 'title');
+}
+/** Returned filtered array of options witch includes query */
+function filterOptionsBySearch(list, query) {
+    if (!query)
+        return [];
+    const queryInLowerCase = query.toString().toLowerCase();
+    return list.filter((item) => item.title?.toString()?.toLowerCase()?.includes(queryInLowerCase));
+}
+/** Returned array of options sorted by query includes index */
+function sortOptionsBySearchIndex(list, query, keySortBy) {
+    const queryInLowerCase = query.toLowerCase();
+    return list.sort((a, b) => a[keySortBy].toLowerCase().indexOf(queryInLowerCase) - b[keySortBy].toLowerCase().indexOf(queryInLowerCase));
+}
+/**
+ * @returns Object { [controlKey]: control value if value not undefined } value of any control will be included if control is dirty
+ */
+function getOnlyDirtyControlsValuesRecursive(form, excludeKeys) {
+    const data = {};
+    Object.entries(form.controls).forEach(([key, control]) => {
+        if (excludeKeys && excludeKeys.includes(key)) {
+            return;
+        }
+        if (control instanceof FormControl && control.dirty && typeof control.value !== 'undefined') {
+            data[key] = control.value;
+            return;
+        }
+        if (control instanceof FormArray && form.dirty) {
+            const valuesArray = control.getRawValue();
+            if (valuesArray?.length) {
+                data[key] = valuesArray;
+            }
+            return;
+        }
+        if (control instanceof FormGroup) {
+            const valuesObject = getOnlyDirtyControlsValuesRecursive(control);
+            if (Object.keys(valuesObject)?.length) {
+                data[key] = valuesObject;
+            }
+        }
+    });
+    return data;
+}
+function getRandomId(prefix = '', suffix = '') {
+    return `${prefix ? `${prefix}-` : ''}${Math.random().toString(16).slice(2)}${suffix ? `-${suffix}` : ''}`;
+}
+function resizeObservable(elem, throttleDelay = 100) {
+    let notifier;
+    const resizeObserver = new ResizeObserver(([entry]) => {
+        notifier?.next(entry);
+    });
+    resizeObserver.observe(elem);
+    return new Observable((observer) => {
+        notifier = observer;
+    }).pipe(finalize(() => {
+        resizeObserver.unobserve(elem);
+        resizeObserver.disconnect();
+    }), throttleTime(throttleDelay));
+}
+
+function isValueExist(value) {
+    if (typeof value === 'undefined') {
+        return false;
+    }
+    if (typeof value === 'boolean') {
+        return value ? 'string' : false;
+    }
+    if (!value.length) {
+        return 'string';
+    }
+    return value === 'json' ? 'json' : 'string';
+}
+class NbxControlValueAccessorBaseDirective {
+    elementRef = inject(ElementRef);
+    injector = inject(Injector);
+    destroyRef = inject(DestroyRef);
+    id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    labelInfo = input(...(ngDevMode ? [undefined, { debugName: "labelInfo" }] : /* istanbul ignore next */ []));
+    status = input('basic', ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    withCopyButton = input(false, { ...(ngDevMode ? { debugName: "withCopyButton" } : /* istanbul ignore next */ {}), transform: isValueExist });
+    size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    customErrorsMessages = input({}, ...(ngDevMode ? [{ debugName: "customErrorsMessages" }] : /* istanbul ignore next */ []));
+    labelPosition = input(...(ngDevMode ? [undefined, { debugName: "labelPosition" }] : /* istanbul ignore next */ []));
+    styleVars = {};
+    value = signal(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    touched = signal(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+    disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    dirty = signal(false, ...(ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []));
+    invalid = signal(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    errors = signal(null, ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+    initId = getRandomId();
+    withoutControl = false;
+    control;
+    errorDisplayedState = computed(() => {
+        return this.invalid() && this.dirty();
+    }, ...(ngDevMode ? [{ debugName: "errorDisplayedState" }] : /* istanbul ignore next */ []));
+    getContext() {
+        return {
+            value: this.value,
+            hasRequiredValidator: this.hasRequiredValidator,
+            errorDisplayedState: this.errorDisplayedState,
+            errors: this.errors,
+            disabled: this.disabled,
+            labelInfo: this.labelInfo,
+            withCopyButton: this.withCopyButton,
+            labelPosition: this.labelPosition,
+            customErrorsMessages: this.customErrorsMessages,
+        };
+    }
+    constructor() {
+        effect(() => {
+            this.elementRef.nativeElement.setAttribute('style', this.getStylesString(this.size(), this.status()));
+        });
+    }
+    ngAfterContentInit() {
+        try {
+            this.control = this.injector.get(FormControlName).control;
+            this.subscribeToStateChange(this.control);
+        }
+        catch {
+            try {
+                this.control = this.injector.get(FormArrayName).control;
+                this.subscribeToStateChange(this.control);
+            }
+            catch {
+                try {
+                    const ngControl = this.injector.get(NgControl);
+                    if (ngControl) {
+                        this.control = ngControl.control;
+                        this.subscribeToStateChange(this.control);
+                    }
+                }
+                catch {
+                    this.withoutControl = true;
+                    this.control = new FormControl();
+                    this.subscribeToStateChange(this.control);
+                }
+            }
+        }
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    writeValue(value) {
+        // this.value.set(value);
+    }
+    getInputId(prefix) {
+        return this.id() || prefix + '-' + this.initId;
+    }
+    valueChanged(value) {
+        this.onTouched();
+        this.onChange(value);
+        if (this.withoutControl) {
+            this.control?.setValue(value);
+            this.control?.markAsDirty();
+        }
+    }
+    onChange(value) {
+        return value;
+    }
+    onTouched() {
+        if (!this.touched()) {
+            this.touched.set(true);
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
+    }
+    get hasRequiredValidator() {
+        return !!this.control?.hasValidator(Validators.required);
+    }
+    getStylesString(size, status) {
+        return `--nbx-input-background-color: var(--input-${status}-background-color); --nbx-input-font-size: var(--input-${size}-text-font-size, 1rem); --nbx-input-font-weight: var(--input-${size}-text-font-weight); --nbx-input-line-height: var(--input-${size}-text-line-height); --nbx-input-text-color: var(--input-${status}-text-color)`;
+    }
+    subscribeToStateChange(control) {
+        if (!control) {
+            return;
+        }
+        this.value.set(control.value);
+        this.invalid.set(control.invalid);
+        this.errors.set(control.errors);
+        control.events.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((event) => {
+            if (event instanceof ValueChangeEvent) {
+                this.value.set(event.value);
+                this.errors.set(control.errors);
+            }
+            if (event instanceof StatusChangeEvent) {
+                this.invalid.set(event.status === 'INVALID');
+            }
+            if (event instanceof PristineChangeEvent) {
+                this.dirty.set(!event.pristine);
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NbxControlValueAccessorBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.15", type: NbxControlValueAccessorBaseDirective, isStandalone: true, inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, labelInfo: { classPropertyName: "labelInfo", publicName: "labelInfo", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, withCopyButton: { classPropertyName: "withCopyButton", publicName: "withCopyButton", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, customErrorsMessages: { classPropertyName: "customErrorsMessages", publicName: "customErrorsMessages", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NbxControlValueAccessorBaseDirective, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], labelInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelInfo", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], withCopyButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "withCopyButton", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], customErrorsMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "customErrorsMessages", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }] } });
+
+class NbxCustomTooltipComponent {
+    text = input('', ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NbxCustomTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.15", type: NbxCustomTooltipComponent, isStandalone: true, selector: "nbx-custom-tooltip", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "@tooltip": "true" } }, ngImport: i0, template: `<div class="tooltip-wrap">
+    {{ text() }}
+    <div class="triangle"></div>
+  </div>`, isInline: true, styles: [".tooltip-wrap{background-color:#000000e6;color:#fff;padding:5px;border-radius:5px;position:relative}div.triangle{position:absolute;top:100%;left:50%;transform:translate(-50%);width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid rgba(0,0,0,.9)}\n"], animations: [
+            trigger('tooltip', [
+                transition(':enter', [style({ opacity: 0 }), animate(200, style({ opacity: 1 }))]),
+                transition(':leave', [animate(200, style({ opacity: 0 }))]),
+            ]),
+        ] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NbxCustomTooltipComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'nbx-custom-tooltip', template: `<div class="tooltip-wrap">
+    {{ text() }}
+    <div class="triangle"></div>
+  </div>`, host: {
+                        '[@tooltip]': 'true',
+                    }, animations: [
+                        trigger('tooltip', [
+                            transition(':enter', [style({ opacity: 0 }), animate(200, style({ opacity: 1 }))]),
+                            transition(':leave', [animate(200, style({ opacity: 0 }))]),
+                        ]),
+                    ], styles: [".tooltip-wrap{background-color:#000000e6;color:#fff;padding:5px;border-radius:5px;position:relative}div.triangle{position:absolute;top:100%;left:50%;transform:translate(-50%);width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid rgba(0,0,0,.9)}\n"] }]
+        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }] } });
+
+function getPreparedCopyText(value, asJson = false) {
+    if (asJson) {
+        return JSON.stringify(value);
+    }
+    if (!value) {
+        return '';
+    }
+    if (Array.isArray(value)) {
+        return value.reduce((acc, curr) => {
+            if (acc.length) {
+                acc += `, ${curr}`;
+            }
+            else {
+                acc = `${curr}`;
+            }
+            return acc;
+        }, '');
+    }
+    const newString = value.toString().replace(/\\./g, ' ').replace(/\s\s+/g, ' ').trim();
+    return newString;
+}
+class NbxClipboardDirective {
+    clipboard = inject(Clipboard);
+    overlay = inject(Overlay);
+    elementRef = inject(ElementRef);
+    value = input('', { ...(ngDevMode ? { debugName: "value" } : /* istanbul ignore next */ {}), alias: 'nbxClipboard' });
+    nbxClipboardCopyType = input('string', ...(ngDevMode ? [{ debugName: "nbxClipboardCopyType" }] : /* istanbul ignore next */ []));
+    onClick() {
+        this.copyToClipboard();
+        this.showAnimation();
+        this.showPopover();
+        return false;
+    }
+    ngOnDestroy() {
+        this.overlayRef?.dispose();
+    }
+    showAnimation() {
+        this.elementRef.nativeElement
+            .animate([
+            { transform: 'scale(1.1)' },
+            { transform: 'scale(1.2)' },
+            { transform: 'scale(1.4)' },
+            { transform: 'scale(1)' },
+        ], {
+            duration: 500,
+            easing: 'ease',
+            trigger: 'enter',
+        })
+            .play();
+    }
+    overlayRef;
+    copyToClipboard() {
+        this.clipboard.copy(getPreparedCopyText(this.value(), this.nbxClipboardCopyType() === 'json'));
+    }
+    showPopover() {
+        if (!this.elementRef.nativeElement)
+            return;
+        this.show();
+        setTimeout(() => {
+            this.hide();
+        }, 700);
+    }
+    show() {
+        if (this.overlayRef) {
+            this.overlayRef.dispose();
+        }
+        this.overlayRef = this.overlay.create(this.getOverlayConfig());
+        const tooltipPortal = new ComponentPortal(NbxCustomTooltipComponent);
+        const tooltipRef = this.overlayRef.attach(tooltipPortal);
+        tooltipRef.setInput('text', 'Copied');
+    }
+    hide() {
+        this.overlayRef.detach();
+        this.overlayRef.dispose();
+    }
+    getOverlayConfig() {
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo(this.elementRef)
+            .withPush(false)
+            .withPositions([
+            {
+                originX: 'center',
+                originY: 'top',
+                overlayX: 'center',
+                overlayY: 'bottom',
+                offsetY: -5,
+            },
+            {
+                originX: 'center',
+                originY: 'bottom',
+                overlayX: 'center',
+                overlayY: 'top',
+                offsetY: 5,
+            },
+        ]);
+        return new OverlayConfig({
+            positionStrategy: positionStrategy,
+            hasBackdrop: true,
+            backdropClass: 'cdk-overlay-transparent-backdrop',
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NbxClipboardDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.15", type: NbxClipboardDirective, isStandalone: true, selector: "[nbxClipboard]", inputs: { value: { classPropertyName: "value", publicName: "nbxClipboard", isSignal: true, isRequired: false, transformFunction: null }, nbxClipboardCopyType: { classPropertyName: "nbxClipboardCopyType", publicName: "nbxClipboardCopyType", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick()" }, properties: { "attr.disabled": "!this.value() || null" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NbxClipboardDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[nbxClipboard]',
+                    standalone: true,
+                    host: {
+                        '[attr.disabled]': '!this.value() || null',
+                    },
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "nbxClipboard", required: false }] }], nbxClipboardCopyType: [{ type: i0.Input, args: [{ isSignal: true, alias: "nbxClipboardCopyType", required: false }] }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+class IntOrFloatDirective {
+    nbxIntOrFloat = input.required(...(ngDevMode ? [{ debugName: "nbxIntOrFloat" }] : /* istanbul ignore next */ []));
+    elRef = inject(ElementRef);
+    onKeyPress(event) {
+        const type = this.nbxIntOrFloat();
+        const key = event.key;
+        if (type === 'int') {
+            // Allow only digits
+            if (!/^\d$/.test(key)) {
+                event.preventDefault();
+            }
+        }
+        else if (type === 'float') {
+            // Allow digits and one dot
+            const input = event.target;
+            if (!/^\d$/.test(key) && !(key === '.' && !input.value.includes('.'))) {
+                event.preventDefault();
+            }
+        }
+    }
+    constructor() {
+        effect(() => {
+            if (this.nbxIntOrFloat() === 'int') {
+                try {
+                    const value = this.elRef.nativeElement.value;
+                    if (value.includes('.')) {
+                        this.elRef.nativeElement.value = value.split('.')[0];
+                    }
+                }
+                catch {
+                    //do nothing
+                }
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: IntOrFloatDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.15", type: IntOrFloatDirective, isStandalone: true, selector: "[nbxIntOrFloat]", inputs: { nbxIntOrFloat: { classPropertyName: "nbxIntOrFloat", publicName: "nbxIntOrFloat", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "keypress": "onKeyPress($event)" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: IntOrFloatDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[nbxIntOrFloat]',
+                }]
+        }], ctorParameters: () => [], propDecorators: { nbxIntOrFloat: [{ type: i0.Input, args: [{ isSignal: true, alias: "nbxIntOrFloat", required: true }] }], onKeyPress: [{
+                type: HostListener,
+                args: ['keypress', ['$event']]
+            }] } });
+
+const NbxValidatorsErrorsMessage = {
+    min: {
+        dataKey: 'min',
+        messageFunction: (length = '0') => `Min value ${length}`,
+    },
+    max: {
+        dataKey: 'max',
+        messageFunction: (length = '100') => `Max value ${length}`,
+    },
+    maxlength: {
+        dataKey: 'requiredLength',
+        messageFunction: (length = '0') => `Maximum length must be ${length}`,
+    },
+    url: 'Invalid URL. Valid example: http://example.com',
+    required: 'Required field',
+    minlength: {
+        dataKey: 'requiredLength',
+        messageFunction: (length = '0') => `Minimum length must be ${length}`,
+    },
+    email: 'Invalid email',
+    nbDatepickerMax: 'Date is later the possible',
+    nbDatepickerMin: 'Date is less then possible',
+    unknownError: 'Not acceptable value',
+};
+
+class NbxInputErrorsComponent {
+    /**
+     * @description you need to provide key as error key like 'required' and translateKey as value
+     */
+    customErrorsMessages = input({}, ...(ngDevMode ? [{ debugName: "customErrorsMessages" }] : /* istanbul ignore next */ []));
+    errors = input.required(...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+    errorMessages = computed(() => {
+        const custom = this.customErrorsMessages();
+        return {
+            ...NbxValidatorsErrorsMessage,
+            ...custom,
+        };
+    }, ...(ngDevMode ? [{ debugName: "errorMessages" }] : /* istanbul ignore next */ []));
+    getErrorMessage(key, errorValue) {
+        try {
+            if (!this.errorMessages()[key]) {
+                if (typeof errorValue === 'string') {
+                    return errorValue;
+                }
+            }
+            const message = this.errorMessages()[key];
+            if (typeof message === 'string') {
+                return message;
+            }
+            if (typeof errorValue !== 'string') {
+                return message.messageFunction(errorValue[message.dataKey]);
+            }
+            return 'Not acceptable value';
+        }
+        catch {
+            return 'Not acceptable value';
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NbxInputErrorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: NbxInputErrorsComponent, isStandalone: true, selector: "nbx-input-errors", inputs: { customErrorsMessages: { classPropertyName: "customErrorsMessages", publicName: "customErrorsMessages", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"input-errors\">\n  @for(err of errors() | keyvalue; track err.key ){\n    <div class=\"error\">{{ getErrorMessage(err.key, err.value) }}</div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NbxInputErrorsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nbx-input-errors', imports: [KeyValuePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"input-errors\">\n  @for(err of errors() | keyvalue; track err.key ){\n    <div class=\"error\">{{ getErrorMessage(err.key, err.value) }}</div>\n  }\n</div>\n" }]
+        }], propDecorators: { customErrorsMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "customErrorsMessages", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: true }] }] } });
+
+class NbxInputLabelComponent {
+    labelInfo = input(...(ngDevMode ? [undefined, { debugName: "labelInfo" }] : /* istanbul ignore next */ []));
+    isRequired = input(false, ...(ngDevMode ? [{ debugName: "isRequired" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    inputId = input(...(ngDevMode ? [undefined, { debugName: "inputId" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NbxInputLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: NbxInputLabelComponent, isStandalone: true, selector: "nbx-input-label", inputs: { labelInfo: { classPropertyName: "labelInfo", publicName: "labelInfo", isSignal: true, isRequired: false, transformFunction: null }, isRequired: { classPropertyName: "isRequired", publicName: "isRequired", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"label-wrap\">\n  <label [class]=\"{ required: isRequired(), disabled: disabled() }\" class=\"input-label\" [for]=\"inputId()\">\n    <ng-content></ng-content>\n  </label>\n  @if (labelInfo()?.type === 'icon') {\n    <nb-icon\n      nbTooltip=\"{{ labelInfo()?.text }}\"\n      [nbTooltipStatus]=\"labelInfo()?.status || 'primary'\"\n      icon=\"alert-circle-outline\"\n      class=\"label-info\"></nb-icon>\n  }\n  @if (labelInfo()?.type === 'text') {\n    <span [title]=\"labelInfo()?.text\" class=\"label-info\">{{ labelInfo()?.text }}</span>\n  }\n</div>\n", styles: [":host{transition:all .3s ease}.label-wrap{display:flex;gap:.2rem;font-size:var(--nbx-input-font-size)}.input-label:empty+.label-info{display:none}.input-label{font-weight:600;font-size:inherit;transition:font-size .3s ease}label:not(:empty).required:after{content:\"*\";position:relative;font-size:inherit;color:red;padding-left:.25rem;font-weight:600}label.input-label.disabled{color:var(--input-primary-disabled-text-color)}nb-icon{font-size:inherit}\n"], dependencies: [{ kind: "component", type: NbIconComponent, selector: "nb-icon", inputs: ["icon", "pack", "options", "status", "config"], outputs: ["iconChange", "packChange", "optionsChange", "statusChange"] }, { kind: "directive", type: NbTooltipDirective, selector: "[nbTooltip]", inputs: ["nbTooltip", "nbTooltipPlacement", "nbTooltipAdjustment", "nbTooltipClass", "nbTooltipIcon", "nbTooltipStatus", "nbTooltipTrigger", "nbTooltipOffset", "nbTooltipDisabled"], outputs: ["nbTooltipShowStateChange"], exportAs: ["nbTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NbxInputLabelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nbx-input-label', imports: [NbIconComponent, NbTooltipDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"label-wrap\">\n  <label [class]=\"{ required: isRequired(), disabled: disabled() }\" class=\"input-label\" [for]=\"inputId()\">\n    <ng-content></ng-content>\n  </label>\n  @if (labelInfo()?.type === 'icon') {\n    <nb-icon\n      nbTooltip=\"{{ labelInfo()?.text }}\"\n      [nbTooltipStatus]=\"labelInfo()?.status || 'primary'\"\n      icon=\"alert-circle-outline\"\n      class=\"label-info\"></nb-icon>\n  }\n  @if (labelInfo()?.type === 'text') {\n    <span [title]=\"labelInfo()?.text\" class=\"label-info\">{{ labelInfo()?.text }}</span>\n  }\n</div>\n", styles: [":host{transition:all .3s ease}.label-wrap{display:flex;gap:.2rem;font-size:var(--nbx-input-font-size)}.input-label:empty+.label-info{display:none}.input-label{font-weight:600;font-size:inherit;transition:font-size .3s ease}label:not(:empty).required:after{content:\"*\";position:relative;font-size:inherit;color:red;padding-left:.25rem;font-weight:600}label.input-label.disabled{color:var(--input-primary-disabled-text-color)}nb-icon{font-size:inherit}\n"] }]
+        }], propDecorators: { labelInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelInfo", required: false }] }], isRequired: [{ type: i0.Input, args: [{ isSignal: true, alias: "isRequired", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }] } });
+
+class NbxInputWrapperComponent {
+    labelContent = viewChild('labelContent', { ...(ngDevMode ? { debugName: "labelContent" } : /* istanbul ignore next */ {}), read: ElementRef });
+    context = input.required(...(ngDevMode ? [{ debugName: "context" }] : /* istanbul ignore next */ []));
+    /**
+     * @description set to true if the input has fieldset with button in the end
+     * need to move copy button more to the left
+     */
+    isInputHasButton = input(false, ...(ngDevMode ? [{ debugName: "isInputHasButton" }] : /* istanbul ignore next */ []));
+    inputId = input(...(ngDevMode ? [undefined, { debugName: "inputId" }] : /* istanbul ignore next */ []));
+    copyAsJson = input(false, ...(ngDevMode ? [{ debugName: "copyAsJson" }] : /* istanbul ignore next */ []));
+    /**
+     * @description It's only needed to correctly display the "float" label type.
+     * It's used for inputs like chips and similar ones that don't use input to display the value.
+     * For correct operation, you also need to set searchHasValue.
+     */
+    floatLabelOnlyBySearch = input(false, ...(ngDevMode ? [{ debugName: "floatLabelOnlyBySearch" }] : /* istanbul ignore next */ []));
+    /**
+     * @description It's only needed to correctly display the "float" label type.
+     * set this input if you use different controls for search and value
+     */
+    searchHasValue = input(false, ...(ngDevMode ? [{ debugName: "searchHasValue" }] : /* istanbul ignore next */ []));
+    isLabelHasContent = computed(() => {
+        return this.labelContent()?.nativeElement.querySelector('label')?.hasChildNodes();
+    }, ...(ngDevMode ? [{ debugName: "isLabelHasContent" }] : /* istanbul ignore next */ []));
+    isControlHasValue = computed(() => {
+        if (this.searchHasValue())
+            return true;
+        const value = this.context().value();
+        if (this.floatLabelOnlyBySearch() || typeof value === 'undefined' || value === null || value === '')
+            return false;
+        if (Array.isArray(value)) {
+            return value?.length;
+        }
+        return true;
+    }, ...(ngDevMode ? [{ debugName: "isControlHasValue" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NbxInputWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: NbxInputWrapperComponent, isStandalone: true, selector: "nbx-input-wrapper", inputs: { context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: true, transformFunction: null }, isInputHasButton: { classPropertyName: "isInputHasButton", publicName: "isInputHasButton", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, copyAsJson: { classPropertyName: "copyAsJson", publicName: "copyAsJson", isSignal: true, isRequired: false, transformFunction: null }, floatLabelOnlyBySearch: { classPropertyName: "floatLabelOnlyBySearch", publicName: "floatLabelOnlyBySearch", isSignal: true, isRequired: false, transformFunction: null }, searchHasValue: { classPropertyName: "searchHasValue", publicName: "searchHasValue", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "labelContent", first: true, predicate: ["labelContent"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<div class=\"nbx-input-wrap\" [class.invalid]=\"context().errorDisplayedState()\">\n  <div\n    class=\"input-fieldset\"\n    [class]=\"context().labelPosition()\"\n    [class.has-value]=\"isControlHasValue()\"\n    [class.no-label]=\"!isLabelHasContent()\">\n    @if (context().labelPosition() !== 'none') {\n      <nbx-input-label\n        [labelInfo]=\"context().labelInfo()\"\n        [isRequired]=\"context().hasRequiredValidator\"\n        [disabled]=\"context().disabled()\"\n        [inputId]=\"inputId()\"\n        #labelContent>\n        <ng-content #labelContent select=\"[label-content]\"></ng-content>\n      </nbx-input-label>\n    }\n    <div class=\"input-content-wrap\">\n      <ng-content></ng-content>\n      @if (context().withCopyButton(); as copyType) {\n        <button\n          type=\"button\"\n          [class.move-left]=\"isInputHasButton()\"\n          [id]=\"inputId() + '-copy-button'\"\n          class=\"copy-button\"\n          [nbxClipboard]=\"context().value()\"\n          [nbxClipboardCopyType]=\"copyType\">\n          <nb-icon icon=\"copy-outline\"></nb-icon>\n        </button>\n      }\n    </div>\n  </div>\n  <nbx-input-errors\n    [customErrorsMessages]=\"context().customErrorsMessages()\"\n    [errors]=\"context().errors()\"></nbx-input-errors>\n</div>\n", styles: [".nbx-input-wrap .input-fieldset{position:relative;display:flex;flex-direction:column;gap:.313rem}.nbx-input-wrap .input-fieldset.inline,.nbx-input-wrap .input-fieldset.inline-reverse{align-items:center}.nbx-input-wrap .input-fieldset.inline{flex-direction:row}.nbx-input-wrap .input-fieldset.inline-reverse{flex-direction:row-reverse}.nbx-input-wrap .input-fieldset.block-center{align-items:center}.nbx-input-wrap .input-fieldset.float nbx-input-label{pointer-events:none}.nbx-input-wrap .input-fieldset.float nbx-input-label::ng-deep .label-info{pointer-events:all}.nbx-input-wrap .input-fieldset.float ::ng-deep input::placeholder,.nbx-input-wrap .input-fieldset.float ::ng-deep textarea::placeholder,.nbx-input-wrap .input-fieldset.float ::ng-deep .select-button::placeholder,.nbx-input-wrap .input-fieldset.float ::ng-deep div.textarea-container::placeholder{opacity:0}.nbx-input-wrap .input-fieldset.float ::ng-deep div.textarea-container:before{opacity:0}.nbx-input-wrap .input-fieldset.float:focus-within ::ng-deep input::placeholder,.nbx-input-wrap .input-fieldset.float:focus-within ::ng-deep textarea::placeholder,.nbx-input-wrap .input-fieldset.float:focus-within ::ng-deep .select-button::placeholder,.nbx-input-wrap .input-fieldset.float:focus-within ::ng-deep div.textarea-container::placeholder{opacity:1}.nbx-input-wrap .input-fieldset.float:focus-within ::ng-deep div.textarea-container:before{opacity:1}.nbx-input-wrap .input-fieldset.float nbx-input-label ::ng-deep nb-icon{font-size:inherit}.nbx-input-wrap .input-fieldset.float nbx-input-label{background-color:var(--nbx-input-background-color);z-index:1;line-height:1;top:min(50%,1.3rem);transform:translateY(-50%);left:1rem;position:absolute}.nbx-input-wrap .input-fieldset.float:focus-within nbx-input-label ::ng-deep .label-wrap label,.nbx-input-wrap .input-fieldset.float.has-value nbx-input-label ::ng-deep .label-wrap label{font-size:calc(1em - 20%)}.nbx-input-wrap .input-fieldset.float:focus-within nbx-input-label,.nbx-input-wrap .input-fieldset.float.has-value nbx-input-label{left:.625rem;padding:0 .375rem;top:0}.nbx-input-wrap .input-fieldset.no-label{gap:0}.nbx-input-wrap ::ng-deep .input-errors{opacity:0;overflow:hidden;max-height:0;max-width:unset;transition:max-height .5s ease}.nbx-input-wrap.invalid::ng-deep input,.nbx-input-wrap.invalid::ng-deep textarea,.nbx-input-wrap.invalid::ng-deep .select-button,.nbx-input-wrap.invalid::ng-deep div.textarea-container{border-color:#ff0606!important}.nbx-input-wrap.invalid::ng-deep .input-errors{opacity:1;margin-top:.2rem;max-height:6rem;max-width:unset;color:#ff0606}.nbx-input-wrap .input-content-wrap{position:relative}.nbx-input-wrap .copy-button{border:none;outline:none;background:none;border-radius:5px;position:absolute;z-index:2;right:0;top:0;padding:.2rem}.nbx-input-wrap .copy-button.move-left{right:2.5rem}@media(hover:hover){.nbx-input-wrap .copy-button:hover{background-color:var(--option-hover-background-color)}}\n"], dependencies: [{ kind: "component", type: NbxInputErrorsComponent, selector: "nbx-input-errors", inputs: ["customErrorsMessages", "errors"] }, { kind: "component", type: NbxInputLabelComponent, selector: "nbx-input-label", inputs: ["labelInfo", "isRequired", "disabled", "inputId"] }, { kind: "directive", type: NbxClipboardDirective, selector: "[nbxClipboard]", inputs: ["nbxClipboard", "nbxClipboardCopyType"] }, { kind: "component", type: NbIconComponent, selector: "nb-icon", inputs: ["icon", "pack", "options", "status", "config"], outputs: ["iconChange", "packChange", "optionsChange", "statusChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NbxInputWrapperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nbx-input-wrapper', imports: [NbxInputErrorsComponent, NbxInputLabelComponent, NbxClipboardDirective, NbIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"nbx-input-wrap\" [class.invalid]=\"context().errorDisplayedState()\">\n  <div\n    class=\"input-fieldset\"\n    [class]=\"context().labelPosition()\"\n    [class.has-value]=\"isControlHasValue()\"\n    [class.no-label]=\"!isLabelHasContent()\">\n    @if (context().labelPosition() !== 'none') {\n      <nbx-input-label\n        [labelInfo]=\"context().labelInfo()\"\n        [isRequired]=\"context().hasRequiredValidator\"\n        [disabled]=\"context().disabled()\"\n        [inputId]=\"inputId()\"\n        #labelContent>\n        <ng-content #labelContent select=\"[label-content]\"></ng-content>\n      </nbx-input-label>\n    }\n    <div class=\"input-content-wrap\">\n      <ng-content></ng-content>\n      @if (context().withCopyButton(); as copyType) {\n        <button\n          type=\"button\"\n          [class.move-left]=\"isInputHasButton()\"\n          [id]=\"inputId() + '-copy-button'\"\n          class=\"copy-button\"\n          [nbxClipboard]=\"context().value()\"\n          [nbxClipboardCopyType]=\"copyType\">\n          <nb-icon icon=\"copy-outline\"></nb-icon>\n        </button>\n      }\n    </div>\n  </div>\n  <nbx-input-errors\n    [customErrorsMessages]=\"context().customErrorsMessages()\"\n    [errors]=\"context().errors()\"></nbx-input-errors>\n</div>\n", styles: [".nbx-input-wrap .input-fieldset{position:relative;display:flex;flex-direction:column;gap:.313rem}.nbx-input-wrap .input-fieldset.inline,.nbx-input-wrap .input-fieldset.inline-reverse{align-items:center}.nbx-input-wrap .input-fieldset.inline{flex-direction:row}.nbx-input-wrap .input-fieldset.inline-reverse{flex-direction:row-reverse}.nbx-input-wrap .input-fieldset.block-center{align-items:center}.nbx-input-wrap .input-fieldset.float nbx-input-label{pointer-events:none}.nbx-input-wrap .input-fieldset.float nbx-input-label::ng-deep .label-info{pointer-events:all}.nbx-input-wrap .input-fieldset.float ::ng-deep input::placeholder,.nbx-input-wrap .input-fieldset.float ::ng-deep textarea::placeholder,.nbx-input-wrap .input-fieldset.float ::ng-deep .select-button::placeholder,.nbx-input-wrap .input-fieldset.float ::ng-deep div.textarea-container::placeholder{opacity:0}.nbx-input-wrap .input-fieldset.float ::ng-deep div.textarea-container:before{opacity:0}.nbx-input-wrap .input-fieldset.float:focus-within ::ng-deep input::placeholder,.nbx-input-wrap .input-fieldset.float:focus-within ::ng-deep textarea::placeholder,.nbx-input-wrap .input-fieldset.float:focus-within ::ng-deep .select-button::placeholder,.nbx-input-wrap .input-fieldset.float:focus-within ::ng-deep div.textarea-container::placeholder{opacity:1}.nbx-input-wrap .input-fieldset.float:focus-within ::ng-deep div.textarea-container:before{opacity:1}.nbx-input-wrap .input-fieldset.float nbx-input-label ::ng-deep nb-icon{font-size:inherit}.nbx-input-wrap .input-fieldset.float nbx-input-label{background-color:var(--nbx-input-background-color);z-index:1;line-height:1;top:min(50%,1.3rem);transform:translateY(-50%);left:1rem;position:absolute}.nbx-input-wrap .input-fieldset.float:focus-within nbx-input-label ::ng-deep .label-wrap label,.nbx-input-wrap .input-fieldset.float.has-value nbx-input-label ::ng-deep .label-wrap label{font-size:calc(1em - 20%)}.nbx-input-wrap .input-fieldset.float:focus-within nbx-input-label,.nbx-input-wrap .input-fieldset.float.has-value nbx-input-label{left:.625rem;padding:0 .375rem;top:0}.nbx-input-wrap .input-fieldset.no-label{gap:0}.nbx-input-wrap ::ng-deep .input-errors{opacity:0;overflow:hidden;max-height:0;max-width:unset;transition:max-height .5s ease}.nbx-input-wrap.invalid::ng-deep input,.nbx-input-wrap.invalid::ng-deep textarea,.nbx-input-wrap.invalid::ng-deep .select-button,.nbx-input-wrap.invalid::ng-deep div.textarea-container{border-color:#ff0606!important}.nbx-input-wrap.invalid::ng-deep .input-errors{opacity:1;margin-top:.2rem;max-height:6rem;max-width:unset;color:#ff0606}.nbx-input-wrap .input-content-wrap{position:relative}.nbx-input-wrap .copy-button{border:none;outline:none;background:none;border-radius:5px;position:absolute;z-index:2;right:0;top:0;padding:.2rem}.nbx-input-wrap .copy-button.move-left{right:2.5rem}@media(hover:hover){.nbx-input-wrap .copy-button:hover{background-color:var(--option-hover-background-color)}}\n"] }]
+        }], propDecorators: { labelContent: [{ type: i0.ViewChild, args: ['labelContent', { ...{ read: ElementRef }, isSignal: true }] }], context: [{ type: i0.Input, args: [{ isSignal: true, alias: "context", required: true }] }], isInputHasButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "isInputHasButton", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], copyAsJson: [{ type: i0.Input, args: [{ isSignal: true, alias: "copyAsJson", required: false }] }], floatLabelOnlyBySearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatLabelOnlyBySearch", required: false }] }], searchHasValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchHasValue", required: false }] }] } });
+
+class NbxSelectOptionsListComponent {
+    optionsList = viewChildren('optionItem', { ...(ngDevMode ? { debugName: "optionsList" } : /* istanbul ignore next */ {}), read: ElementRef });
+    virtualScrollContainer = viewChild(CdkVirtualScrollViewport, ...(ngDevMode ? [{ debugName: "virtualScrollContainer" }] : /* istanbul ignore next */ []));
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    optionsListClass = input('', ...(ngDevMode ? [{ debugName: "optionsListClass" }] : /* istanbul ignore next */ []));
+    enableVirtualScroll = input(false, ...(ngDevMode ? [{ debugName: "enableVirtualScroll" }] : /* istanbul ignore next */ []));
+    /**
+     * you can correct height of option if you have change it style for correct work of virtual scroll
+     */
+    virtualScrollItemSizePX = input(38, ...(ngDevMode ? [{ debugName: "virtualScrollItemSizePX" }] : /* istanbul ignore next */ []));
+    optionClicked = output();
+    selectAll = output();
+    tabClicked = output();
+    multi = input(false, ...(ngDevMode ? [{ debugName: "multi" }] : /* istanbul ignore next */ []));
+    selectedValues = input([], ...(ngDevMode ? [{ debugName: "selectedValues" }] : /* istanbul ignore next */ []));
+    focusedOptionIndex = 0;
+    isAllSelected = computed(() => this.options()?.every((option) => this.selectedValues().includes(option.value)), ...(ngDevMode ? [{ debugName: "isAllSelected" }] : /* istanbul ignore next */ []));
+    ngOnChanges({ options }) {
+        if (options) {
+            this.focusedOptionIndex = 0;
+            this.virtualScrollContainer()?.scrollTo({ top: 0 });
+        }
+    }
+    selectAllOptions() {
+        this.selectAll.emit(this.options());
+    }
+    optionClickedHandler(option, index) {
+        this.focusedOptionIndex = index;
+        this.optionClicked.emit(option);
+    }
+    keydown(event) {
+        if (event.code === 'Tab') {
+            event.preventDefault();
+            this.tabClicked.emit();
+            return;
+        }
+        if (event.code === 'ArrowDown') {
+            event.preventDefault();
+            if (this.focusedOptionIndex >= this.options().length - 1) {
+                return;
+            }
+            this.focusedOptionIndex++;
+            this.setFocusedOptionByIndex(this.focusedOptionIndex);
+        }
+        if (event.code === 'ArrowUp') {
+            event.preventDefault();
+            if (this.focusedOptionIndex <= 0) {
+                return;
+            }
+            this.focusedOptionIndex--;
+            this.setFocusedOptionByIndex(this.focusedOptionIndex);
+        }
+    }
+    setFocusedOptionByIndex(index) {
+        const optionsList = this.optionsList();
+        if (optionsList) {
+            optionsList[index]?.nativeElement.focus();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NbxSelectOptionsListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: NbxSelectOptionsListComponent, isStandalone: true, selector: "nbx-select-options-list", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionsListClass: { classPropertyName: "optionsListClass", publicName: "optionsListClass", isSignal: true, isRequired: false, transformFunction: null }, enableVirtualScroll: { classPropertyName: "enableVirtualScroll", publicName: "enableVirtualScroll", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollItemSizePX: { classPropertyName: "virtualScrollItemSizePX", publicName: "virtualScrollItemSizePX", isSignal: true, isRequired: false, transformFunction: null }, multi: { classPropertyName: "multi", publicName: "multi", isSignal: true, isRequired: false, transformFunction: null }, selectedValues: { classPropertyName: "selectedValues", publicName: "selectedValues", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionClicked: "optionClicked", selectAll: "selectAll", tabClicked: "tabClicked" }, viewQueries: [{ propertyName: "optionsList", predicate: ["optionItem"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "virtualScrollContainer", first: true, predicate: CdkVirtualScrollViewport, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<nb-option-list\n  #optionsListContainer\n  [style.--all-elements-height]=\"options().length * virtualScrollItemSizePX() + 'px'\"\n  [style.--element-height]=\"virtualScrollItemSizePX() + 'px'\"\n  (keydown)=\"keydown($event)\"\n  [class.multi]=\"multi()\"\n  [class.with-virtual-scroll]=\"enableVirtualScroll()\"\n  [class]=\"optionsListClass()\">\n  @if (multi()) {\n    <nb-option\n      [disabled]=\"isAllSelected()\"\n      (click)=\"$event.preventDefault(); $event.stopPropagation(); selectAllOptions()\"\n      >Select all</nb-option\n    >\n  }\n  @if (enableVirtualScroll()) {\n    <cdk-virtual-scroll-viewport\n      [itemSize]=\"virtualScrollItemSizePX()\"\n      maxBufferPx=\"600\"\n      minBufferPx=\"600\"\n      class=\"virtual-scroll-viewport\">\n      <nb-option\n        #optionItem\n        *cdkVirtualFor=\"let option of options(); let i = index\"\n        class=\"virtual-scroll-item\"\n        [disabled]=\"option.disabled\"\n        [id]=\"'nb-option-' + option.value\"\n        [tabindex]=\"i\"\n        [value]=\"option.value\"\n        (keyup.enter)=\"optionClickedHandler(option, i)\"\n        (click)=\"optionClickedHandler(option, i)\">\n        @if (multi()) {\n          <nb-checkbox\n            class=\"multiselect-autocomplete-checkbox\"\n            status=\"primary\"\n            [disabled]=\"option.disabled\"\n            [checked]=\"selectedValues().includes(option.value)\"\n            >{{ option.title }}</nb-checkbox\n          >\n        } @else {\n          {{ option.title }}\n        }\n      </nb-option>\n    </cdk-virtual-scroll-viewport>\n  } @else {\n    @for (option of options(); track $index) {\n      @if (option) {\n        <nb-option\n          #optionItem\n          [disabled]=\"option.disabled\"\n          [id]=\"'nb-option-' + option.value\"\n          [tabindex]=\"$index\"\n          [value]=\"option.value\"\n          (keyup.enter)=\"optionClickedHandler(option, $index)\"\n          (click)=\"optionClickedHandler(option, $index)\">\n          @if (multi()) {\n            <nb-checkbox\n              class=\"multiselect-autocomplete-checkbox\"\n              status=\"primary\"\n              [disabled]=\"option.disabled\"\n              [checked]=\"selectedValues().includes(option.value)\"\n              >{{ option.title }}</nb-checkbox\n            >\n          } @else {\n            {{ option.title }}\n          }\n        </nb-option>\n      }\n    }\n  }\n</nb-option-list>\n", styles: [":host{width:100%;position:relative;z-index:9999;background-color:var(--option-list-background-color);box-shadow:var(--shadow)}nb-option-list{width:100%;display:block}nb-option-list.with-virtual-scroll ::ng-deep .option-list{overflow:hidden}nb-option-list.multi.with-virtual-scroll ::ng-deep .option-list{overflow:hidden}nb-option-list.multi.with-virtual-scroll ::ng-deep .option-list .virtual-scroll-viewport{max-height:calc(var(--option-list-max-height) - var(--element-height))}.virtual-scroll-viewport{height:var(--all-elements-height);max-height:var(--option-list-max-height)}.virtual-scroll-item{height:38px}\n"], dependencies: [{ kind: "component", type: NbOptionComponent, selector: "nb-option", inputs: ["value", "disabled"], outputs: ["selectionChange"] }, { kind: "component", type: NbOptionListComponent, selector: "nb-option-list", inputs: ["size", "position"] }, { kind: "component", type: NbCheckboxComponent, selector: "nb-checkbox", inputs: ["checked", "disabled", "status", "indeterminate"], outputs: ["checkedChange"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NbxSelectOptionsListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nbx-select-options-list', imports: [NbOptionComponent, NbOptionListComponent, NbCheckboxComponent, ScrollingModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nb-option-list\n  #optionsListContainer\n  [style.--all-elements-height]=\"options().length * virtualScrollItemSizePX() + 'px'\"\n  [style.--element-height]=\"virtualScrollItemSizePX() + 'px'\"\n  (keydown)=\"keydown($event)\"\n  [class.multi]=\"multi()\"\n  [class.with-virtual-scroll]=\"enableVirtualScroll()\"\n  [class]=\"optionsListClass()\">\n  @if (multi()) {\n    <nb-option\n      [disabled]=\"isAllSelected()\"\n      (click)=\"$event.preventDefault(); $event.stopPropagation(); selectAllOptions()\"\n      >Select all</nb-option\n    >\n  }\n  @if (enableVirtualScroll()) {\n    <cdk-virtual-scroll-viewport\n      [itemSize]=\"virtualScrollItemSizePX()\"\n      maxBufferPx=\"600\"\n      minBufferPx=\"600\"\n      class=\"virtual-scroll-viewport\">\n      <nb-option\n        #optionItem\n        *cdkVirtualFor=\"let option of options(); let i = index\"\n        class=\"virtual-scroll-item\"\n        [disabled]=\"option.disabled\"\n        [id]=\"'nb-option-' + option.value\"\n        [tabindex]=\"i\"\n        [value]=\"option.value\"\n        (keyup.enter)=\"optionClickedHandler(option, i)\"\n        (click)=\"optionClickedHandler(option, i)\">\n        @if (multi()) {\n          <nb-checkbox\n            class=\"multiselect-autocomplete-checkbox\"\n            status=\"primary\"\n            [disabled]=\"option.disabled\"\n            [checked]=\"selectedValues().includes(option.value)\"\n            >{{ option.title }}</nb-checkbox\n          >\n        } @else {\n          {{ option.title }}\n        }\n      </nb-option>\n    </cdk-virtual-scroll-viewport>\n  } @else {\n    @for (option of options(); track $index) {\n      @if (option) {\n        <nb-option\n          #optionItem\n          [disabled]=\"option.disabled\"\n          [id]=\"'nb-option-' + option.value\"\n          [tabindex]=\"$index\"\n          [value]=\"option.value\"\n          (keyup.enter)=\"optionClickedHandler(option, $index)\"\n          (click)=\"optionClickedHandler(option, $index)\">\n          @if (multi()) {\n            <nb-checkbox\n              class=\"multiselect-autocomplete-checkbox\"\n              status=\"primary\"\n              [disabled]=\"option.disabled\"\n              [checked]=\"selectedValues().includes(option.value)\"\n              >{{ option.title }}</nb-checkbox\n            >\n          } @else {\n            {{ option.title }}\n          }\n        </nb-option>\n      }\n    }\n  }\n</nb-option-list>\n", styles: [":host{width:100%;position:relative;z-index:9999;background-color:var(--option-list-background-color);box-shadow:var(--shadow)}nb-option-list{width:100%;display:block}nb-option-list.with-virtual-scroll ::ng-deep .option-list{overflow:hidden}nb-option-list.multi.with-virtual-scroll ::ng-deep .option-list{overflow:hidden}nb-option-list.multi.with-virtual-scroll ::ng-deep .option-list .virtual-scroll-viewport{max-height:calc(var(--option-list-max-height) - var(--element-height))}.virtual-scroll-viewport{height:var(--all-elements-height);max-height:var(--option-list-max-height)}.virtual-scroll-item{height:38px}\n"] }]
+        }], propDecorators: { optionsList: [{ type: i0.ViewChildren, args: ['optionItem', { ...{ read: ElementRef }, isSignal: true }] }], virtualScrollContainer: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkVirtualScrollViewport), { isSignal: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionsListClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionsListClass", required: false }] }], enableVirtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableVirtualScroll", required: false }] }], virtualScrollItemSizePX: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScrollItemSizePX", required: false }] }], optionClicked: [{ type: i0.Output, args: ["optionClicked"] }], selectAll: [{ type: i0.Output, args: ["selectAll"] }], tabClicked: [{ type: i0.Output, args: ["tabClicked"] }], multi: [{ type: i0.Input, args: [{ isSignal: true, alias: "multi", required: false }] }], selectedValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedValues", required: false }] }] } });
+
+class NbxInputAutocompleteComponent extends NbxControlValueAccessorBaseDirective {
+    clientWidth = signal('100%', ...(ngDevMode ? [{ debugName: "clientWidth" }] : /* istanbul ignore next */ []));
+    optionsListContainer = viewChild('optionsListContainer', { ...(ngDevMode ? { debugName: "optionsListContainer" } : /* istanbul ignore next */ {}), read: (ElementRef) });
+    inputElement = viewChild('inputElement', { ...(ngDevMode ? { debugName: "inputElement" } : /* istanbul ignore next */ {}), read: ElementRef });
+    searchControl = new FormControl('');
+    searchValueSignal = toSignal(this.searchControl.valueChanges);
+    optionsListClass = input('', ...(ngDevMode ? [{ debugName: "optionsListClass" }] : /* istanbul ignore next */ []));
+    options = input.required(...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    /**
+     * you can correct height of option if you have change it style for correct work of virtual scroll
+     */
+    virtualScrollItemSizePX = input(38, ...(ngDevMode ? [{ debugName: "virtualScrollItemSizePX" }] : /* istanbul ignore next */ []));
+    enableVirtualScroll = input(false, ...(ngDevMode ? [{ debugName: "enableVirtualScroll" }] : /* istanbul ignore next */ []));
+    anyStringInput = input(false, ...(ngDevMode ? [{ debugName: "anyStringInput" }] : /* istanbul ignore next */ []));
+    selectChanged = output();
+    overlayVisible = signal(false, ...(ngDevMode ? [{ debugName: "overlayVisible" }] : /* istanbul ignore next */ []));
+    filteredOptions = computed(() => {
+        const value = this.searchValueSignal();
+        if (!value) {
+            return this.options();
+        }
+        return filterAndSortOptionsBySearch(this.options(), value);
+    }, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
+    ngOnInit() {
+        this.searchControl.valueChanges
+            .pipe(startWith(''), map((value) => value || ''), takeUntilDestroyed(this.destroyRef))
+            .subscribe((str) => {
+            if (!str) {
+                if (this.control?.value) {
+                    this.control?.reset();
+                }
+                return;
+            }
+            const equalValueOption = this.getEqualValue(str, this.options());
+            if (equalValueOption) {
+                this.setValue(equalValueOption.value);
+                this.toggleOverlay(false);
+            }
+            else if (this.anyStringInput()) {
+                this.setValue(str);
+            }
+        });
+    }
+    ngOnChanges({ options }) {
+        if (options) {
+            this.updateInputTitle(this.value());
+        }
+    }
+    ngAfterViewInit() {
+        setTimeout(() => {
+            const element = this.inputElement()?.nativeElement;
+            if (element) {
+                this.clientWidth.set(element.clientWidth || '100%');
+                resizeObservable(element)
+                    .pipe(takeUntilDestroyed(this.destroyRef))
+                    .subscribe(() => {
+                    this.clientWidth.set(this.inputElement()?.nativeElement.clientWidth || '100%');
+                });
+            }
+        }, 200);
+    }
+    moveFocusToNextElement() {
+        this.inputElement()?.nativeElement.focus();
+    }
+    switchFocusToOptions() {
+        const optionsListContainer = this.optionsListContainer();
+        if (optionsListContainer) {
+            const firstOption = optionsListContainer.nativeElement.querySelector('nb-option');
+            firstOption?.focus();
+        }
+    }
+    getEqualValue(str, options) {
+        if (!options || !str) {
+            return;
+        }
+        return options.find((el) => el?.value === str || el?.title === str);
+    }
+    optionSelected(option) {
+        this.selectChanged.emit(option.value);
+        this.setValue(option.value);
+        this.inputElement()?.nativeElement.focus();
+        this.toggleOverlay(false);
+    }
+    toggleOverlay(state) {
+        if (state !== this.overlayVisible()) {
+            this.onTouched();
+            this.overlayVisible.set(state ?? !this.overlayVisible);
+        }
+    }
+    updateInputTitle(value) {
+        const options = this.options();
+        if (!options) {
+            return;
+        }
+        const option = options.find((option) => option?.value === value);
+        if (!option) {
+            this.searchControl.setValue(value, { emitEvent: false });
+            return;
+        }
+        this.searchControl.setValue(option?.title, { emitEvent: false });
+    }
+    setValue(value) {
+        super.valueChanged(value);
+        this.updateInputTitle(value);
+    }
+    writeValue(value) {
+        super.writeValue(value);
+        this.updateInputTitle(value);
+    }
+    setDisabledState(isDisabled) {
+        super.setDisabledState(isDisabled);
+        if (isDisabled) {
+            this.searchControl.disable({ emitEvent: false });
+        }
+        else {
+            this.searchControl.enable({ emitEvent: false });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NbxInputAutocompleteComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.15", type: NbxInputAutocompleteComponent, isStandalone: true, selector: "nbx-input-autocomplete", inputs: { optionsListClass: { classPropertyName: "optionsListClass", publicName: "optionsListClass", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, virtualScrollItemSizePX: { classPropertyName: "virtualScrollItemSizePX", publicName: "virtualScrollItemSizePX", isSignal: true, isRequired: false, transformFunction: null }, enableVirtualScroll: { classPropertyName: "enableVirtualScroll", publicName: "enableVirtualScroll", isSignal: true, isRequired: false, transformFunction: null }, anyStringInput: { classPropertyName: "anyStringInput", publicName: "anyStringInput", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectChanged: "selectChanged" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: NbxInputAutocompleteComponent,
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "optionsListContainer", first: true, predicate: ["optionsListContainer"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<nbx-input-wrapper\n  (keydown.tab)=\"toggleOverlay(false)\"\n  [context]=\"getContext()\"\n  [inputId]=\"getInputId('input-autocomplete')\"\n  [searchHasValue]=\"!!searchControl.value\">\n  <ng-content label-content></ng-content>\n  <input\n    #inputElement\n    #trigger=\"cdkOverlayOrigin\"\n    type=\"text\"\n    [status]=\"status()\"\n    [size]=\"size()\"\n    (click)=\"toggleOverlay(true)\"\n    (focus)=\"toggleOverlay(true)\"\n    (input)=\"toggleOverlay(true)\"\n    (keydown.arrowdown)=\"$event.preventDefault(); switchFocusToOptions()\"\n    autocomplete=\"off\"\n    [id]=\"getInputId('input-autocomplete')\"\n    [formControl]=\"searchControl\"\n    [placeholder]=\"placeholder()\"\n    nbInput\n    cdkOverlayOrigin\n    fullWidth />\n\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"trigger\"\n    [cdkConnectedOverlayOpen]=\"overlayVisible()\"\n    [cdkConnectedOverlayWidth]=\"clientWidth()\"\n    (overlayOutsideClick)=\"toggleOverlay(false)\"\n    (detach)=\"toggleOverlay(false)\">\n    <nbx-select-options-list\n      #optionsListContainer\n      [optionsListClass]=\"optionsListClass()\"\n      [virtualScrollItemSizePX]=\"virtualScrollItemSizePX()\"\n      [enableVirtualScroll]=\"enableVirtualScroll()\"\n      (optionClicked)=\"optionSelected($any($event))\"\n      (tabClicked)=\"moveFocusToNextElement()\"\n      [options]=\"filteredOptions()\"></nbx-select-options-list>\n  </ng-template>\n</nbx-input-wrapper>\n", dependencies: [{ kind: "component", type: NbxInputWrapperComponent, selector: "nbx-input-wrapper", inputs: ["context", "isInputHasButton", "inputId", "copyAsJson", "floatLabelOnlyBySearch", "searchHasValue"] }, { kind: "component", type: NbxSelectOptionsListComponent, selector: "nbx-select-options-list", inputs: ["options", "optionsListClass", "enableVirtualScroll", "virtualScrollItemSizePX", "multi", "selectedValues"], outputs: ["optionClicked", "selectAll", "tabClicked"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: NbInputDirective, selector: "input[nbInput],textarea[nbInput]", inputs: ["fieldSize", "size", "status", "shape", "fullWidth"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NbxInputAutocompleteComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nbx-input-autocomplete', imports: [
+                        NbxInputWrapperComponent,
+                        NbxSelectOptionsListComponent,
+                        OverlayModule,
+                        NbInputDirective,
+                        ReactiveFormsModule,
+                    ], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: NbxInputAutocompleteComponent,
+                            multi: true,
+                        },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nbx-input-wrapper\n  (keydown.tab)=\"toggleOverlay(false)\"\n  [context]=\"getContext()\"\n  [inputId]=\"getInputId('input-autocomplete')\"\n  [searchHasValue]=\"!!searchControl.value\">\n  <ng-content label-content></ng-content>\n  <input\n    #inputElement\n    #trigger=\"cdkOverlayOrigin\"\n    type=\"text\"\n    [status]=\"status()\"\n    [size]=\"size()\"\n    (click)=\"toggleOverlay(true)\"\n    (focus)=\"toggleOverlay(true)\"\n    (input)=\"toggleOverlay(true)\"\n    (keydown.arrowdown)=\"$event.preventDefault(); switchFocusToOptions()\"\n    autocomplete=\"off\"\n    [id]=\"getInputId('input-autocomplete')\"\n    [formControl]=\"searchControl\"\n    [placeholder]=\"placeholder()\"\n    nbInput\n    cdkOverlayOrigin\n    fullWidth />\n\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"trigger\"\n    [cdkConnectedOverlayOpen]=\"overlayVisible()\"\n    [cdkConnectedOverlayWidth]=\"clientWidth()\"\n    (overlayOutsideClick)=\"toggleOverlay(false)\"\n    (detach)=\"toggleOverlay(false)\">\n    <nbx-select-options-list\n      #optionsListContainer\n      [optionsListClass]=\"optionsListClass()\"\n      [virtualScrollItemSizePX]=\"virtualScrollItemSizePX()\"\n      [enableVirtualScroll]=\"enableVirtualScroll()\"\n      (optionClicked)=\"optionSelected($any($event))\"\n      (tabClicked)=\"moveFocusToNextElement()\"\n      [options]=\"filteredOptions()\"></nbx-select-options-list>\n  </ng-template>\n</nbx-input-wrapper>\n" }]
+        }], propDecorators: { optionsListContainer: [{ type: i0.ViewChild, args: ['optionsListContainer', { ...{
+                            read: (ElementRef),
+                        }, isSignal: true }] }], inputElement: [{ type: i0.ViewChild, args: ['inputElement', { ...{ read: ElementRef }, isSignal: true }] }], optionsListClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionsListClass", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], virtualScrollItemSizePX: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScrollItemSizePX", required: false }] }], enableVirtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableVirtualScroll", required: false }] }], anyStringInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "anyStringInput", required: false }] }], selectChanged: [{ type: i0.Output, args: ["selectChanged"] }] } });
+
+class NbxInputColorSelectComponent extends NbxControlValueAccessorBaseDirective {
+    overlayVisible = signal(false, ...(ngDevMode ? [{ debugName: "overlayVisible" }] : /* istanbul ignore next */ []));
+    colorSelected = output();
+    /**
+     * @description if you want show select options as color you need to provide customData: string in option otherwise will be shown as regular select string
+     * @example {value: 'green', title: 'green',customData: '#000000'  }
+     */
+    options = input.required(...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    /**
+     * @description Display title in list
+     * @default true
+     */
+    withTitle = input(true, ...(ngDevMode ? [{ debugName: "withTitle" }] : /* istanbul ignore next */ []));
+    selectedOption() {
+        return this.options().find((option) => option.value === this.value());
+    }
+    toggleOverlay(state) {
+        this.overlayVisible.update((old) => state ?? !old);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NbxInputColorSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: NbxInputColorSelectComponent, isStandalone: true, selector: "nbx-input-color-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, withTitle: { classPropertyName: "withTitle", publicName: "withTitle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { colorSelected: "colorSelected" }, host: { properties: { "style": "{\n      '--nbx-color-input-disabled-text-color': 'var(--input-' + status() + '-disabled-text-color)',\n      '--nbx-color-input-hover-background-color': 'var(--select-outline-' + status() + '-hover-background-color)',\n      '--nbx-color-input-border-color': 'var(--select-outline-' + status() + '-border-color)',\n      '--nbx-color-input-disabled-border-color': 'var(--select-outline-' + status() + '-disabled-border-color)',\n      '--nbx-color-input-padding': 'var(--select-outline-' + size() + '-padding)',\n      }" }, classAttribute: "input-control" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: NbxInputColorSelectComponent,
+                multi: true,
+            },
+        ], usesInheritance: true, ngImport: i0, template: "<nbx-input-wrapper [context]=\"getContext()\" [inputId]=\"getInputId('color-select-input')\">\n  <ng-content label-content></ng-content>\n  <div class=\"input-color-wrap\">\n    <div class=\"nb-form-control-container nb-form-field-control-with-suffix\">\n      <button\n        type=\"button\"\n        [disabled]=\"disabled()\"\n        (click)=\"!disabled() ? toggleOverlay() : false\"\n        cdkOverlayOrigin\n        #trigger=\"cdkOverlayOrigin\"\n        [id]=\"getInputId('color-select-input')\"\n        class=\"select-button\">\n        @if (selectedOption(); as selected) {\n          @if (!selected.customData || withTitle()) {\n            {{ selected.title }}\n          }\n          @if (selected.customData) {\n            <div class=\"color-round\" [style.backgroundColor]=\"selected.customData\"></div>\n          }\n        } @else {\n          @if (withTitle()) {\n            <span> none </span>\n          }\n          <nb-icon icon=\"slash-outline\"></nb-icon>\n        }\n\n        <nb-icon icon=\"chevron-down-outline\" [class.active]=\"overlayVisible()\"></nb-icon>\n      </button>\n\n      <ng-template\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"trigger\"\n        [cdkConnectedOverlayOpen]=\"overlayVisible()\"\n        (overlayOutsideClick)=\"toggleOverlay(false)\">\n        <div class=\"color-options-list\" [class.with-title]=\"withTitle()\">\n          <button\n            type=\"button\"\n            class=\"color-option\"\n            id=\"color-option-reset\"\n            (click)=\"valueChanged($any(null)); toggleOverlay(false); colorSelected.emit(null)\">\n            @if (withTitle()) {\n              <div class=\"option-with-title\">\n                none\n                <nb-icon icon=\"slash-outline\"></nb-icon>\n              </div>\n            } @else {\n              <nb-icon icon=\"slash-outline\"></nb-icon>\n            }\n          </button>\n          @for (option of options(); track $index) {\n            <button\n              type=\"button\"\n              class=\"color-option\"\n              id=\"color-option-{{ $index }}\"\n              [class.selected]=\"option.value === value()\"\n              (click)=\"valueChanged(option.value); toggleOverlay(false); colorSelected.emit(option.value)\">\n              @if (option.customData) {\n                @if (withTitle()) {\n                  <div class=\"option-with-title\">\n                    {{ option.title }}\n                    <div class=\"color-round\" [style.backgroundColor]=\"option.customData\"></div>\n                  </div>\n                } @else {\n                  <div class=\"color-round\" [style.backgroundColor]=\"option.customData\"></div>\n                }\n              } @else {\n                {{ option.title }}\n              }\n            </button>\n          }\n        </div>\n      </ng-template>\n    </div>\n  </div>\n</nbx-input-wrapper>\n", styles: ["@charset \"UTF-8\";button{padding:0;border:none;outline:none;background:none}.input-color-wrap{display:flex;align-items:center;width:100%;max-width:100%}.input-color-wrap .nb-form-control-container{width:100%}.select-button{background-color:var(--nbx-input-background-color);border-color:var(--nbx-color-input-border-color);color:var(--nbx-input-text-color);font-size:var(--nbx-input-font-size);font-weight:var(--nbx-input-font-weight);line-height:var(--nbx-input-line-height, 1);border-style:var(--select-outline-border-style);border-width:var(--select-outline-border-width);border-radius:var(--select-rectangle-border-radius);padding:var(--nbx-color-input-padding);display:flex;align-items:center;gap:.5rem}.select-button:disabled{border-color:var(--nbx-color-input-disabled-border-color);color:var(--nbx-color-input-disabled-text-color)}.select-button:hover{background-color:var(--nbx-color-input-hover-background-color)}.select-button nb-icon.active{transform:rotate(180deg)}.select-button nb-icon{font-size:inherit}.select-button .color-round{width:var(--nbx-input-line-height, 1.2em);height:var(--nbx-input-line-height, 1.2em)}.color-options-list{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;padding:.5rem;background-color:var(--option-list-background-color);border-color:var(--option-list-border-color);border-style:var(--option-list-border-style);border-width:var(--option-list-border-width);border-radius:var(--option-list-border-radius);box-shadow:var(--option-list-shadow);overflow:hidden}.color-options-list .color-option{padding:.1rem;color:var(--option-text-color);font-weight:600;position:relative}@media(hover:hover){.color-options-list .color-option:hover{background-color:var(--option-hover-background-color)}}.color-options-list .color-option.selected{z-index:1}.color-options-list .color-option.selected .color-round:after{z-index:2;content:\"\\2713\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:1rem;color:#fff}.color-options-list.with-title{grid-template-columns:1fr;padding:.5rem 0}.color-options-list.with-title .color-option{padding:.5rem 1rem}.color-options-list.with-title .color-option.selected{background-color:var(--option-hover-background-color)}.color-options-list .option-with-title{display:flex;gap:.2rem;justify-content:space-between}.color-round{position:relative;width:1.2em;height:1.2em;border-radius:50%}\n"], dependencies: [{ kind: "component", type: NbIconComponent, selector: "nb-icon", inputs: ["icon", "pack", "options", "status", "config"], outputs: ["iconChange", "packChange", "optionsChange", "statusChange"] }, { kind: "component", type: NbxInputWrapperComponent, selector: "nbx-input-wrapper", inputs: ["context", "isInputHasButton", "inputId", "copyAsJson", "floatLabelOnlyBySearch", "searchHasValue"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NbxInputColorSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nbx-input-color-select', imports: [NbIconComponent, NbxInputWrapperComponent, ReactiveFormsModule, OverlayModule], host: {
+                        class: 'input-control',
+                        '[style]': `{
+      '--nbx-color-input-disabled-text-color': 'var(--input-' + status() + '-disabled-text-color)',
+      '--nbx-color-input-hover-background-color': 'var(--select-outline-' + status() + '-hover-background-color)',
+      '--nbx-color-input-border-color': 'var(--select-outline-' + status() + '-border-color)',
+      '--nbx-color-input-disabled-border-color': 'var(--select-outline-' + status() + '-disabled-border-color)',
+      '--nbx-color-input-padding': 'var(--select-outline-' + size() + '-padding)',
+      }`,
+                    }, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: NbxInputColorSelectComponent,
+                            multi: true,
+                        },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nbx-input-wrapper [context]=\"getContext()\" [inputId]=\"getInputId('color-select-input')\">\n  <ng-content label-content></ng-content>\n  <div class=\"input-color-wrap\">\n    <div class=\"nb-form-control-container nb-form-field-control-with-suffix\">\n      <button\n        type=\"button\"\n        [disabled]=\"disabled()\"\n        (click)=\"!disabled() ? toggleOverlay() : false\"\n        cdkOverlayOrigin\n        #trigger=\"cdkOverlayOrigin\"\n        [id]=\"getInputId('color-select-input')\"\n        class=\"select-button\">\n        @if (selectedOption(); as selected) {\n          @if (!selected.customData || withTitle()) {\n            {{ selected.title }}\n          }\n          @if (selected.customData) {\n            <div class=\"color-round\" [style.backgroundColor]=\"selected.customData\"></div>\n          }\n        } @else {\n          @if (withTitle()) {\n            <span> none </span>\n          }\n          <nb-icon icon=\"slash-outline\"></nb-icon>\n        }\n\n        <nb-icon icon=\"chevron-down-outline\" [class.active]=\"overlayVisible()\"></nb-icon>\n      </button>\n\n      <ng-template\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"trigger\"\n        [cdkConnectedOverlayOpen]=\"overlayVisible()\"\n        (overlayOutsideClick)=\"toggleOverlay(false)\">\n        <div class=\"color-options-list\" [class.with-title]=\"withTitle()\">\n          <button\n            type=\"button\"\n            class=\"color-option\"\n            id=\"color-option-reset\"\n            (click)=\"valueChanged($any(null)); toggleOverlay(false); colorSelected.emit(null)\">\n            @if (withTitle()) {\n              <div class=\"option-with-title\">\n                none\n                <nb-icon icon=\"slash-outline\"></nb-icon>\n              </div>\n            } @else {\n              <nb-icon icon=\"slash-outline\"></nb-icon>\n            }\n          </button>\n          @for (option of options(); track $index) {\n            <button\n              type=\"button\"\n              class=\"color-option\"\n              id=\"color-option-{{ $index }}\"\n              [class.selected]=\"option.value === value()\"\n              (click)=\"valueChanged(option.value); toggleOverlay(false); colorSelected.emit(option.value)\">\n              @if (option.customData) {\n                @if (withTitle()) {\n                  <div class=\"option-with-title\">\n                    {{ option.title }}\n                    <div class=\"color-round\" [style.backgroundColor]=\"option.customData\"></div>\n                  </div>\n                } @else {\n                  <div class=\"color-round\" [style.backgroundColor]=\"option.customData\"></div>\n                }\n              } @else {\n                {{ option.title }}\n              }\n            </button>\n          }\n        </div>\n      </ng-template>\n    </div>\n  </div>\n</nbx-input-wrapper>\n", styles: ["@charset \"UTF-8\";button{padding:0;border:none;outline:none;background:none}.input-color-wrap{display:flex;align-items:center;width:100%;max-width:100%}.input-color-wrap .nb-form-control-container{width:100%}.select-button{background-color:var(--nbx-input-background-color);border-color:var(--nbx-color-input-border-color);color:var(--nbx-input-text-color);font-size:var(--nbx-input-font-size);font-weight:var(--nbx-input-font-weight);line-height:var(--nbx-input-line-height, 1);border-style:var(--select-outline-border-style);border-width:var(--select-outline-border-width);border-radius:var(--select-rectangle-border-radius);padding:var(--nbx-color-input-padding);display:flex;align-items:center;gap:.5rem}.select-button:disabled{border-color:var(--nbx-color-input-disabled-border-color);color:var(--nbx-color-input-disabled-text-color)}.select-button:hover{background-color:var(--nbx-color-input-hover-background-color)}.select-button nb-icon.active{transform:rotate(180deg)}.select-button nb-icon{font-size:inherit}.select-button .color-round{width:var(--nbx-input-line-height, 1.2em);height:var(--nbx-input-line-height, 1.2em)}.color-options-list{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;padding:.5rem;background-color:var(--option-list-background-color);border-color:var(--option-list-border-color);border-style:var(--option-list-border-style);border-width:var(--option-list-border-width);border-radius:var(--option-list-border-radius);box-shadow:var(--option-list-shadow);overflow:hidden}.color-options-list .color-option{padding:.1rem;color:var(--option-text-color);font-weight:600;position:relative}@media(hover:hover){.color-options-list .color-option:hover{background-color:var(--option-hover-background-color)}}.color-options-list .color-option.selected{z-index:1}.color-options-list .color-option.selected .color-round:after{z-index:2;content:\"\\2713\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:1rem;color:#fff}.color-options-list.with-title{grid-template-columns:1fr;padding:.5rem 0}.color-options-list.with-title .color-option{padding:.5rem 1rem}.color-options-list.with-title .color-option.selected{background-color:var(--option-hover-background-color)}.color-options-list .option-with-title{display:flex;gap:.2rem;justify-content:space-between}.color-round{position:relative;width:1.2em;height:1.2em;border-radius:50%}\n"] }]
+        }], propDecorators: { colorSelected: [{ type: i0.Output, args: ["colorSelected"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], withTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "withTitle", required: false }] }] } });
+
+/**
+ * @description for correct work you need to provide NbDatepickerModule.forRoot() in you root providers list
+ */
+class NbxInputDatePickerComponent extends NbxControlValueAccessorBaseDirective {
+    minDate = input(null, ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
+    maxDate = input(null, ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
+    dateChanged = output();
+    constructor() {
+        super();
+    }
+    dateSelected(event) {
+        this.dateChanged.emit(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NbxInputDatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.15", type: NbxInputDatePickerComponent, isStandalone: true, selector: "nbx-input-date-picker", inputs: { minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateChanged: "dateChanged" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: NbxInputDatePickerComponent,
+                multi: true,
+            },
+        ], usesInheritance: true, ngImport: i0, template: "<nbx-input-wrapper [context]=\"getContext()\" [isInputHasButton]=\"true\" [inputId]=\"getInputId('date-picker')\">\n  <ng-content label-content></ng-content>\n  <nb-form-field>\n    <input\n      fullWidth\n      nbInput\n      [status]=\"status()\"\n      [size]=\"size()\"\n      [id]=\"getInputId('date-picker')\"\n      [placeholder]=\"placeholder()\"\n      [nbDatepicker]=\"datePicker\"\n      [formControl]=\"control\" />\n    <button\n      type=\"button\"\n      [id]=\"getInputId('date-picker') + '-reset-button'\"\n      [disabled]=\"disabled()\"\n      title=\"Clear\"\n      nbSuffix\n      nbButton\n      appearance=\"ghost\"\n      (click)=\"control.reset()\">\n      <nb-icon icon=\"backspace-outline\" pack=\"eva\"> </nb-icon>\n    </button>\n  </nb-form-field>\n  <nb-datepicker\n    #datePicker\n    style=\"display: none\"\n    (dateChange)=\"dateSelected($event)\"\n    [min]=\"minDate()\"\n    [max]=\"maxDate()\"></nb-datepicker>\n</nbx-input-wrapper>\n", dependencies: [{ kind: "component", type: NbxInputWrapperComponent, selector: "nbx-input-wrapper", inputs: ["context", "isInputHasButton", "inputId", "copyAsJson", "floatLabelOnlyBySearch", "searchHasValue"] }, { kind: "directive", type: NbInputDirective, selector: "input[nbInput],textarea[nbInput]", inputs: ["fieldSize", "size", "status", "shape", "fullWidth"] }, { kind: "component", type: NbButtonComponent, selector: "button[nbButton],a[nbButton],input[type=\"button\"][nbButton],input[type=\"submit\"][nbButton]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: NbIconComponent, selector: "nb-icon", inputs: ["icon", "pack", "options", "status", "config"], outputs: ["iconChange", "packChange", "optionsChange", "statusChange"] }, { kind: "component", type: NbFormFieldComponent, selector: "nb-form-field" }, { kind: "directive", type: NbSuffixDirective, selector: "[nbSuffix]" }, { kind: "directive", type: NbDatepickerDirective, selector: "input[nbDatepicker]", inputs: ["nbDatepicker"] }, { kind: "component", type: NbDatepickerComponent, selector: "nb-datepicker", inputs: ["date"], outputs: ["dateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NbxInputDatePickerComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'nbx-input-date-picker', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: NbxInputDatePickerComponent,
+                            multi: true,
+                        },
+                    ], imports: [
+                        NbxInputWrapperComponent,
+                        NbInputDirective,
+                        NbButtonComponent,
+                        ReactiveFormsModule,
+                        NbIconComponent,
+                        NbFormFieldComponent,
+                        NbSuffixDirective,
+                        NbDatepickerDirective,
+                        NbDatepickerComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nbx-input-wrapper [context]=\"getContext()\" [isInputHasButton]=\"true\" [inputId]=\"getInputId('date-picker')\">\n  <ng-content label-content></ng-content>\n  <nb-form-field>\n    <input\n      fullWidth\n      nbInput\n      [status]=\"status()\"\n      [size]=\"size()\"\n      [id]=\"getInputId('date-picker')\"\n      [placeholder]=\"placeholder()\"\n      [nbDatepicker]=\"datePicker\"\n      [formControl]=\"control\" />\n    <button\n      type=\"button\"\n      [id]=\"getInputId('date-picker') + '-reset-button'\"\n      [disabled]=\"disabled()\"\n      title=\"Clear\"\n      nbSuffix\n      nbButton\n      appearance=\"ghost\"\n      (click)=\"control.reset()\">\n      <nb-icon icon=\"backspace-outline\" pack=\"eva\"> </nb-icon>\n    </button>\n  </nb-form-field>\n  <nb-datepicker\n    #datePicker\n    style=\"display: none\"\n    (dateChange)=\"dateSelected($event)\"\n    [min]=\"minDate()\"\n    [max]=\"maxDate()\"></nb-datepicker>\n</nbx-input-wrapper>\n" }]
+        }], ctorParameters: () => [], propDecorators: { minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], dateChanged: [{ type: i0.Output, args: ["dateChanged"] }] } });
+
+/**
+ * @description for correct work you need to provide NbDatepickerModule.forRoot() in you root providers list
+ */
+class NbxInputDateRangePickerComponent extends NbxControlValueAccessorBaseDirective {
+    dateService = inject(NbDateService);
+    minDate = input(null, ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
+    maxDate = input(null, ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
+    dateRangeChanged = output();
+    inputControl = new FormControl();
+    constructor() {
+        super();
+        this.dateService.compareDates = (date1, date2) => {
+            const date1Time = date1.getTime();
+            if (date2 instanceof Date) {
+                return date1Time - date2.getTime();
+            }
+            if (date2?.start && date2?.end) {
+                const start = new Date(date2?.start).getTime();
+                const end = new Date(date2?.end).getTime();
+                return date1Time === start ? 0 : date1Time > start && date1Time < end ? 1 : -1;
+            }
+            if (date2?.start) {
+                const start = new Date(date2.start).getTime();
+                return date1Time === start ? 0 : date1Time > start ? 1 : -1;
+            }
+            if (date2?.end) {
+                const end = new Date(date2.end).getTime();
+                return date1Time === end ? 0 : date1Time < end ? 1 : -1;
+            }
+            return 0;
+        };
+    }
+    dateChanged(event) {
+        this.dateRangeChanged.emit(event);
+        return;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NbxInputDateRangePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.15", type: NbxInputDateRangePickerComponent, isStandalone: true, selector: "nbx-input-date-range-picker", inputs: { minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateRangeChanged: "dateRangeChanged" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: NbxInputDateRangePickerComponent,
+                multi: true,
+            },
+        ], usesInheritance: true, ngImport: i0, template: "<nbx-input-wrapper [context]=\"getContext()\" [isInputHasButton]=\"true\" [inputId]=\"getInputId('date-range-picker')\">\n  <ng-content label-content></ng-content>\n  <nb-form-field>\n    <input\n      fullWidth\n      nbInput\n      [status]=\"status()\"\n      [size]=\"size()\"\n      [placeholder]=\"placeholder()\"\n      [nbDatepicker]=\"dateRangePicker\"\n      [formControl]=\"control\"\n      [id]=\"getInputId('date-range-picker')\" />\n    <button\n      type=\"button\"\n      [disabled]=\"disabled()\"\n      [id]=\"getInputId('date-range-picker') + '-reset-button'\"\n      title=\"Clear\"\n      nbSuffix\n      nbButton\n      appearance=\"ghost\"\n      (click)=\"control.reset()\">\n      <nb-icon icon=\"backspace-outline\" pack=\"eva\"> </nb-icon>\n    </button>\n  </nb-form-field>\n  <nb-rangepicker\n    #dateRangePicker\n    style=\"display: none\"\n    (rangeChange)=\"dateChanged($event)\"\n    [min]=\"minDate()\"\n    [max]=\"maxDate()\"></nb-rangepicker>\n</nbx-input-wrapper>\n", dependencies: [{ kind: "component", type: NbxInputWrapperComponent, selector: "nbx-input-wrapper", inputs: ["context", "isInputHasButton", "inputId", "copyAsJson", "floatLabelOnlyBySearch", "searchHasValue"] }, { kind: "directive", type: NbInputDirective, selector: "input[nbInput],textarea[nbInput]", inputs: ["fieldSize", "size", "status", "shape", "fullWidth"] }, { kind: "component", type: NbButtonComponent, selector: "button[nbButton],a[nbButton],input[type=\"button\"][nbButton],input[type=\"submit\"][nbButton]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: NbIconComponent, selector: "nb-icon", inputs: ["icon", "pack", "options", "status", "config"], outputs: ["iconChange", "packChange", "optionsChange", "statusChange"] }, { kind: "component", type: NbFormFieldComponent, selector: "nb-form-field" }, { kind: "directive", type: NbSuffixDirective, selector: "[nbSuffix]" }, { kind: "directive", type: NbDatepickerDirective, selector: "input[nbDatepicker]", inputs: ["nbDatepicker"] }, { kind: "component", type: NbRangepickerComponent, selector: "nb-rangepicker", inputs: ["range"], outputs: ["rangeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NbxInputDateRangePickerComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'nbx-input-date-range-picker', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: NbxInputDateRangePickerComponent,
+                            multi: true,
+                        },
+                    ], imports: [
+                        NbxInputWrapperComponent,
+                        NbInputDirective,
+                        NbButtonComponent,
+                        ReactiveFormsModule,
+                        NbIconComponent,
+                        NbFormFieldComponent,
+                        NbSuffixDirective,
+                        NbDatepickerDirective,
+                        NbRangepickerComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nbx-input-wrapper [context]=\"getContext()\" [isInputHasButton]=\"true\" [inputId]=\"getInputId('date-range-picker')\">\n  <ng-content label-content></ng-content>\n  <nb-form-field>\n    <input\n      fullWidth\n      nbInput\n      [status]=\"status()\"\n      [size]=\"size()\"\n      [placeholder]=\"placeholder()\"\n      [nbDatepicker]=\"dateRangePicker\"\n      [formControl]=\"control\"\n      [id]=\"getInputId('date-range-picker')\" />\n    <button\n      type=\"button\"\n      [disabled]=\"disabled()\"\n      [id]=\"getInputId('date-range-picker') + '-reset-button'\"\n      title=\"Clear\"\n      nbSuffix\n      nbButton\n      appearance=\"ghost\"\n      (click)=\"control.reset()\">\n      <nb-icon icon=\"backspace-outline\" pack=\"eva\"> </nb-icon>\n    </button>\n  </nb-form-field>\n  <nb-rangepicker\n    #dateRangePicker\n    style=\"display: none\"\n    (rangeChange)=\"dateChanged($event)\"\n    [min]=\"minDate()\"\n    [max]=\"maxDate()\"></nb-rangepicker>\n</nbx-input-wrapper>\n" }]
+        }], ctorParameters: () => [], propDecorators: { minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], dateRangeChanged: [{ type: i0.Output, args: ["dateRangeChanged"] }] } });
+
+/**
+ * @description for correct work you need to provide NbDatepickerModule.forRoot() and NbTimepickerModule.forRoot() in you root providers list
+ */
+class NbxInputDateTimePickerComponent extends NbxControlValueAccessorBaseDirective {
+    minDate = input(null, ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
+    maxDate = input(null, ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
+    dateChanged = output();
+    constructor() {
+        super();
+    }
+    dateSelected(event) {
+        this.dateChanged.emit(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NbxInputDateTimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.15", type: NbxInputDateTimePickerComponent, isStandalone: true, selector: "nbx-input-date-time-picker", inputs: { minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateChanged: "dateChanged" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: NbxInputDateTimePickerComponent,
+                multi: true,
+            },
+        ], usesInheritance: true, ngImport: i0, template: "<nbx-input-wrapper [context]=\"getContext()\" [isInputHasButton]=\"true\" [inputId]=\"getInputId('date-time-picker')\">\n  <ng-content label-content></ng-content>\n  <nb-form-field>\n    <input\n      fullWidth\n      nbInput\n      [status]=\"status()\"\n      [size]=\"size()\"\n      [placeholder]=\"placeholder()\"\n      [id]=\"getInputId('date-time-picker')\"\n      [nbDatepicker]=\"dateTimePicker\"\n      [formControl]=\"control\" />\n    <button\n      type=\"button\"\n      [id]=\"getInputId('date-picker') + '-reset-button'\"\n      [disabled]=\"disabled()\"\n      title=\"Clear\"\n      nbSuffix\n      nbButton\n      appearance=\"ghost\"\n      (click)=\"control.reset()\">\n      <nb-icon icon=\"backspace-outline\" pack=\"eva\"> </nb-icon>\n    </button>\n  </nb-form-field>\n  <nb-date-timepicker\n    #dateTimePicker\n    style=\"display: none\"\n    (dateTimeChange)=\"dateSelected($event)\"\n    singleColumn\n    [step]=\"10\"\n    [min]=\"minDate()\"\n    [max]=\"maxDate()\"></nb-date-timepicker>\n</nbx-input-wrapper>\n", dependencies: [{ kind: "component", type: NbxInputWrapperComponent, selector: "nbx-input-wrapper", inputs: ["context", "isInputHasButton", "inputId", "copyAsJson", "floatLabelOnlyBySearch", "searchHasValue"] }, { kind: "directive", type: NbInputDirective, selector: "input[nbInput],textarea[nbInput]", inputs: ["fieldSize", "size", "status", "shape", "fullWidth"] }, { kind: "component", type: NbButtonComponent, selector: "button[nbButton],a[nbButton],input[type=\"button\"][nbButton],input[type=\"submit\"][nbButton]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: NbIconComponent, selector: "nb-icon", inputs: ["icon", "pack", "options", "status", "config"], outputs: ["iconChange", "packChange", "optionsChange", "statusChange"] }, { kind: "component", type: NbFormFieldComponent, selector: "nb-form-field" }, { kind: "directive", type: NbSuffixDirective, selector: "[nbSuffix]" }, { kind: "directive", type: NbDatepickerDirective, selector: "input[nbDatepicker]", inputs: ["nbDatepicker"] }, { kind: "component", type: NbDateTimePickerComponent, selector: "nb-date-timepicker", inputs: ["step", "title", "applyButtonText", "currentTimeButtonText", "showCurrentTimeButton", "twelveHoursFormat", "showAmPmLabel", "withSeconds", "singleColumn"], outputs: ["dateTimeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NbxInputDateTimePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nbx-input-date-time-picker', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: NbxInputDateTimePickerComponent,
+                            multi: true,
+                        },
+                    ], imports: [
+                        NbxInputWrapperComponent,
+                        NbInputDirective,
+                        NbButtonComponent,
+                        ReactiveFormsModule,
+                        NbIconComponent,
+                        NbFormFieldComponent,
+                        NbSuffixDirective,
+                        NbDatepickerDirective,
+                        NbDateTimePickerComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nbx-input-wrapper [context]=\"getContext()\" [isInputHasButton]=\"true\" [inputId]=\"getInputId('date-time-picker')\">\n  <ng-content label-content></ng-content>\n  <nb-form-field>\n    <input\n      fullWidth\n      nbInput\n      [status]=\"status()\"\n      [size]=\"size()\"\n      [placeholder]=\"placeholder()\"\n      [id]=\"getInputId('date-time-picker')\"\n      [nbDatepicker]=\"dateTimePicker\"\n      [formControl]=\"control\" />\n    <button\n      type=\"button\"\n      [id]=\"getInputId('date-picker') + '-reset-button'\"\n      [disabled]=\"disabled()\"\n      title=\"Clear\"\n      nbSuffix\n      nbButton\n      appearance=\"ghost\"\n      (click)=\"control.reset()\">\n      <nb-icon icon=\"backspace-outline\" pack=\"eva\"> </nb-icon>\n    </button>\n  </nb-form-field>\n  <nb-date-timepicker\n    #dateTimePicker\n    style=\"display: none\"\n    (dateTimeChange)=\"dateSelected($event)\"\n    singleColumn\n    [step]=\"10\"\n    [min]=\"minDate()\"\n    [max]=\"maxDate()\"></nb-date-timepicker>\n</nbx-input-wrapper>\n" }]
+        }], ctorParameters: () => [], propDecorators: { minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], dateChanged: [{ type: i0.Output, args: ["dateChanged"] }] } });
+
+class NbxInputMultiselectAutocompleteComponent extends NbxControlValueAccessorBaseDirective {
+    inputElement = viewChild('inputElement', { ...(ngDevMode ? { debugName: "inputElement" } : /* istanbul ignore next */ {}), read: ElementRef });
+    optionsListContainer = viewChild('optionsListContainer', { ...(ngDevMode ? { debugName: "optionsListContainer" } : /* istanbul ignore next */ {}), read: (ElementRef) });
+    searchControl = new FormControl('');
+    clientWidth = signal('100%', ...(ngDevMode ? [{ debugName: "clientWidth" }] : /* istanbul ignore next */ []));
+    optionsListClass = input('', ...(ngDevMode ? [{ debugName: "optionsListClass" }] : /* istanbul ignore next */ []));
+    selectedOnTop = input(false, ...(ngDevMode ? [{ debugName: "selectedOnTop" }] : /* istanbul ignore next */ []));
+    /**
+     * you can correct height of option if you have change it style for correct work of virtual scroll
+     */
+    virtualScrollItemSizePX = input(38, ...(ngDevMode ? [{ debugName: "virtualScrollItemSizePX" }] : /* istanbul ignore next */ []));
+    enableVirtualScroll = input(false, ...(ngDevMode ? [{ debugName: "enableVirtualScroll" }] : /* istanbul ignore next */ []));
+    options = input.required(...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    selectedChange = output();
+    searchValue = toSignal(this.searchControl.valueChanges.pipe(map((value) => value || '')));
+    selectedValues = signal([], ...(ngDevMode ? [{ debugName: "selectedValues" }] : /* istanbul ignore next */ []));
+    selectedTitlesString = computed(() => {
+        return this.selectedValues().reduce((prev, current) => {
+            const option = this.options().find((option) => option.value === current);
+            if (!option)
+                return prev;
+            return (prev += `${prev ? ', ' : ''}${option.title}`);
+        }, '');
+    }, ...(ngDevMode ? [{ debugName: "selectedTitlesString" }] : /* istanbul ignore next */ []));
+    overlayVisible = signal(false, ...(ngDevMode ? [{ debugName: "overlayVisible" }] : /* istanbul ignore next */ []));
+    filteredOptions = computed(() => {
+        const list = !this.searchValue()
+            ? this.options()
+            : filterAndSortOptionsBySearch(this.options(), this.searchValue());
+        if (!this.selectedOnTop()) {
+            return list;
+        }
+        const options = [];
+        list.forEach((option) => {
+            if (this.selectedValues().includes(option.value)) {
+                options.unshift(option);
+            }
+            else {
+                options.push(option);
+            }
+        });
+        return options;
+    }, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
+    ngAfterViewInit() {
+        setTimeout(() => {
+            const element = this.inputElement()?.nativeElement;
+            if (element) {
+                this.clientWidth.set(element.clientWidth || '100%');
+                resizeObservable(element)
+                    .pipe(takeUntilDestroyed(this.destroyRef))
+                    .subscribe(() => {
+                    this.clientWidth.set(this.inputElement()?.nativeElement.clientWidth || '100%');
+                });
+            }
+        }, 200);
+    }
+    writeValue(value) {
+        this.value.set(value || []);
+        this.setSelected(value || [], true);
+    }
+    optionClicked(value) {
+        let newValue = [];
+        if (!this.selectedValues().includes(value)) {
+            newValue = [...this.selectedValues(), value];
+        }
+        else {
+            newValue = this.selectedValues().filter((insideValue) => insideValue !== value);
+        }
+        this.setSelected(newValue);
+    }
+    moveFocusToNextElement() {
+        this.inputElement()?.nativeElement.focus();
+    }
+    switchFocusToOptions() {
+        const optionsListContainer = this.optionsListContainer();
+        if (optionsListContainer) {
+            const firstOption = optionsListContainer.nativeElement.querySelector('nb-option');
+            firstOption?.focus();
+        }
+    }
+    resetSelection() {
+        this.setSelected([]);
+        this.searchControl.reset();
+    }
+    selectAllOptions() {
+        const allValues = this.options().map((option) => option.value);
+        this.setSelected(allValues);
+    }
+    setDisabledState(isDisabled) {
+        super.setDisabledState(isDisabled);
+        if (isDisabled) {
+            this.searchControl.disable({ emitEvent: false });
+        }
+        else {
+            this.searchControl.enable({ emitEvent: false });
+        }
+    }
+    setSelected(valuesArray, onlySelf = false) {
+        this.selectedValues.set(valuesArray);
+        if (!onlySelf) {
+            this.valueChanged(valuesArray);
+            setTimeout(() => {
+                this.selectedChange.emit(this.value());
+            }, 50);
+        }
+    }
+    toggleOverlay(state) {
+        if (state !== this.overlayVisible()) {
+            this.onTouched();
+            this.overlayVisible.set(state ?? !this.overlayVisible);
+            if (!this.overlayVisible()) {
+                this.searchControl.reset('');
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NbxInputMultiselectAutocompleteComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.15", type: NbxInputMultiselectAutocompleteComponent, isStandalone: true, selector: "nbx-input-multiselect-autocomplete", inputs: { optionsListClass: { classPropertyName: "optionsListClass", publicName: "optionsListClass", isSignal: true, isRequired: false, transformFunction: null }, selectedOnTop: { classPropertyName: "selectedOnTop", publicName: "selectedOnTop", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollItemSizePX: { classPropertyName: "virtualScrollItemSizePX", publicName: "virtualScrollItemSizePX", isSignal: true, isRequired: false, transformFunction: null }, enableVirtualScroll: { classPropertyName: "enableVirtualScroll", publicName: "enableVirtualScroll", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selectedChange: "selectedChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: NbxInputMultiselectAutocompleteComponent,
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "optionsListContainer", first: true, predicate: ["optionsListContainer"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<nbx-input-wrapper\n  [context]=\"getContext()\"\n  [searchHasValue]=\"!!searchControl.value\"\n  (keydown.tab)=\"toggleOverlay(false)\"\n  [isInputHasButton]=\"true\"\n  [inputId]=\"getInputId('multiselect-autocomplete-input')\">\n  <ng-content label-content></ng-content>\n  <nb-form-field>\n    <input\n      nbInput\n      cdkOverlayOrigin\n      #inputElement\n      #trigger=\"cdkOverlayOrigin\"\n      [status]=\"status()\"\n      [size]=\"size()\"\n      (click)=\"toggleOverlay(true)\"\n      (focus)=\"toggleOverlay(true)\"\n      (input)=\"toggleOverlay(true)\"\n      (keydown.arrowdown)=\"$event.preventDefault(); switchFocusToOptions()\"\n      [class.has-value]=\"selectedTitlesString()\"\n      [formControl]=\"searchControl\"\n      [id]=\"getInputId('multiselect-autocomplete-input')\"\n      fullWidth\n      [placeholder]=\"selectedTitlesString() || placeholder()\"\n      type=\"text\" />\n\n    <button\n      title=\"Clear\"\n      type=\"button\"\n      [disabled]=\"disabled()\"\n      [size]=\"size()\"\n      [status]=\"status()\"\n      nbSuffix\n      nbButton\n      [id]=\"getInputId('multi-autocomplete-input') + '-clear-button'\"\n      appearance=\"ghost\"\n      (click)=\"resetSelection()\">\n      <nb-icon icon=\"backspace-outline\" pack=\"eva\"> </nb-icon>\n    </button>\n    <ng-template\n      cdkConnectedOverlay\n      [cdkConnectedOverlayOrigin]=\"trigger\"\n      [cdkConnectedOverlayOpen]=\"overlayVisible()\"\n      [cdkConnectedOverlayWidth]=\"clientWidth()\"\n      (overlayOutsideClick)=\"toggleOverlay(false)\"\n      (detach)=\"toggleOverlay(false)\">\n      <nbx-select-options-list\n        #optionsListContainer\n        [multi]=\"true\"\n        [optionsListClass]=\"optionsListClass()\"\n        [virtualScrollItemSizePX]=\"virtualScrollItemSizePX()\"\n        [enableVirtualScroll]=\"enableVirtualScroll()\"\n        [selectedValues]=\"selectedValues()\"\n        (selectAll)=\"selectAllOptions()\"\n        (optionClicked)=\"optionClicked($event.value)\"\n        (tabClicked)=\"moveFocusToNextElement()\"\n        [options]=\"filteredOptions()\"></nbx-select-options-list>\n    </ng-template>\n  </nb-form-field>\n</nbx-input-wrapper>\n", styles: [".options{padding:0}.options nb-checkbox{display:inline-flex;height:100%;width:100%}input::placeholder{font-size:var(--nbx-input-font-size)!important;line-height:var(--nbx-input-line-height);opacity:1!important}input.has-value::placeholder{font-weight:var(--nbx-input-font-weight);color:var(--nbx-input-text-color)}.d-inline-flex{display:inline-flex}.w-100{width:100%}.multiselect-autocomplete-checkbox ::ng-deep label{padding:var(--option-medium-padding, .5rem);width:100%}.input-container{position:relative}.input-container input:focus~.selected-text-container{left:5rem;max-width:80%;background-color:var(--input-basic-focus-background-color)}.input-container input:focus:hover~.selected-text-container{background-color:var(--input-basic-focus-and-hover-background-color)}.input-container input:hover~.selected-text-container{background-color:var(--input-basic-hover-background-color)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: NbInputDirective, selector: "input[nbInput],textarea[nbInput]", inputs: ["fieldSize", "size", "status", "shape", "fullWidth"] }, { kind: "component", type: NbButtonComponent, selector: "button[nbButton],a[nbButton],input[type=\"button\"][nbButton],input[type=\"submit\"][nbButton]" }, { kind: "component", type: NbIconComponent, selector: "nb-icon", inputs: ["icon", "pack", "options", "status", "config"], outputs: ["iconChange", "packChange", "optionsChange", "statusChange"] }, { kind: "component", type: NbFormFieldComponent, selector: "nb-form-field" }, { kind: "directive", type: NbSuffixDirective, selector: "[nbSuffix]" }, { kind: "component", type: NbxInputWrapperComponent, selector: "nbx-input-wrapper", inputs: ["context", "isInputHasButton", "inputId", "copyAsJson", "floatLabelOnlyBySearch", "searchHasValue"] }, { kind: "component", type: NbxSelectOptionsListComponent, selector: "nbx-select-options-list", inputs: ["options", "optionsListClass", "enableVirtualScroll", "virtualScrollItemSizePX", "multi", "selectedValues"], outputs: ["optionClicked", "selectAll", "tabClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NbxInputMultiselectAutocompleteComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nbx-input-multiselect-autocomplete', imports: [
+                        ReactiveFormsModule,
+                        OverlayModule,
+                        NbInputDirective,
+                        NbButtonComponent,
+                        NbIconComponent,
+                        NbFormFieldComponent,
+                        NbSuffixDirective,
+                        NbxInputWrapperComponent,
+                        NbxSelectOptionsListComponent,
+                    ], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: NbxInputMultiselectAutocompleteComponent,
+                            multi: true,
+                        },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nbx-input-wrapper\n  [context]=\"getContext()\"\n  [searchHasValue]=\"!!searchControl.value\"\n  (keydown.tab)=\"toggleOverlay(false)\"\n  [isInputHasButton]=\"true\"\n  [inputId]=\"getInputId('multiselect-autocomplete-input')\">\n  <ng-content label-content></ng-content>\n  <nb-form-field>\n    <input\n      nbInput\n      cdkOverlayOrigin\n      #inputElement\n      #trigger=\"cdkOverlayOrigin\"\n      [status]=\"status()\"\n      [size]=\"size()\"\n      (click)=\"toggleOverlay(true)\"\n      (focus)=\"toggleOverlay(true)\"\n      (input)=\"toggleOverlay(true)\"\n      (keydown.arrowdown)=\"$event.preventDefault(); switchFocusToOptions()\"\n      [class.has-value]=\"selectedTitlesString()\"\n      [formControl]=\"searchControl\"\n      [id]=\"getInputId('multiselect-autocomplete-input')\"\n      fullWidth\n      [placeholder]=\"selectedTitlesString() || placeholder()\"\n      type=\"text\" />\n\n    <button\n      title=\"Clear\"\n      type=\"button\"\n      [disabled]=\"disabled()\"\n      [size]=\"size()\"\n      [status]=\"status()\"\n      nbSuffix\n      nbButton\n      [id]=\"getInputId('multi-autocomplete-input') + '-clear-button'\"\n      appearance=\"ghost\"\n      (click)=\"resetSelection()\">\n      <nb-icon icon=\"backspace-outline\" pack=\"eva\"> </nb-icon>\n    </button>\n    <ng-template\n      cdkConnectedOverlay\n      [cdkConnectedOverlayOrigin]=\"trigger\"\n      [cdkConnectedOverlayOpen]=\"overlayVisible()\"\n      [cdkConnectedOverlayWidth]=\"clientWidth()\"\n      (overlayOutsideClick)=\"toggleOverlay(false)\"\n      (detach)=\"toggleOverlay(false)\">\n      <nbx-select-options-list\n        #optionsListContainer\n        [multi]=\"true\"\n        [optionsListClass]=\"optionsListClass()\"\n        [virtualScrollItemSizePX]=\"virtualScrollItemSizePX()\"\n        [enableVirtualScroll]=\"enableVirtualScroll()\"\n        [selectedValues]=\"selectedValues()\"\n        (selectAll)=\"selectAllOptions()\"\n        (optionClicked)=\"optionClicked($event.value)\"\n        (tabClicked)=\"moveFocusToNextElement()\"\n        [options]=\"filteredOptions()\"></nbx-select-options-list>\n    </ng-template>\n  </nb-form-field>\n</nbx-input-wrapper>\n", styles: [".options{padding:0}.options nb-checkbox{display:inline-flex;height:100%;width:100%}input::placeholder{font-size:var(--nbx-input-font-size)!important;line-height:var(--nbx-input-line-height);opacity:1!important}input.has-value::placeholder{font-weight:var(--nbx-input-font-weight);color:var(--nbx-input-text-color)}.d-inline-flex{display:inline-flex}.w-100{width:100%}.multiselect-autocomplete-checkbox ::ng-deep label{padding:var(--option-medium-padding, .5rem);width:100%}.input-container{position:relative}.input-container input:focus~.selected-text-container{left:5rem;max-width:80%;background-color:var(--input-basic-focus-background-color)}.input-container input:focus:hover~.selected-text-container{background-color:var(--input-basic-focus-and-hover-background-color)}.input-container input:hover~.selected-text-container{background-color:var(--input-basic-hover-background-color)}\n"] }]
+        }], propDecorators: { inputElement: [{ type: i0.ViewChild, args: ['inputElement', { ...{ read: ElementRef }, isSignal: true }] }], optionsListContainer: [{ type: i0.ViewChild, args: ['optionsListContainer', { ...{
+                            read: (ElementRef),
+                        }, isSignal: true }] }], optionsListClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionsListClass", required: false }] }], selectedOnTop: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedOnTop", required: false }] }], virtualScrollItemSizePX: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScrollItemSizePX", required: false }] }], enableVirtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableVirtualScroll", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], selectedChange: [{ type: i0.Output, args: ["selectedChange"] }] } });
+
+class NbxInputNumberComponent extends NbxControlValueAccessorBaseDirective {
+    min = input(null, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    max = input(null, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    onlyInt = input(false, ...(ngDevMode ? [{ debugName: "onlyInt" }] : /* istanbul ignore next */ []));
+    inputKeyup = output();
+    inputKeyUp(target) {
+        this.inputKeyup.emit(target.value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NbxInputNumberComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.15", type: NbxInputNumberComponent, isStandalone: true, selector: "nbx-input-number", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, onlyInt: { classPropertyName: "onlyInt", publicName: "onlyInt", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { inputKeyup: "inputKeyup" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: NbxInputNumberComponent,
+                multi: true,
+            },
+        ], usesInheritance: true, ngImport: i0, template: "<nbx-input-wrapper [context]=\"getContext()\" [inputId]=\"getInputId('input-number')\">\n  <ng-content label-content></ng-content>\n\n  <input\n    (keydown.arrowDown)=\"$event.preventDefault()\"\n    (keydown.arrowUp)=\"$event.preventDefault()\"\n    (wheel)=\"$event.preventDefault()\"\n    [formControl]=\"control\"\n    (input)=\"inputKeyUp($any($event.target))\"\n    fullWidth\n    [nbxIntOrFloat]=\"onlyInt() ? 'int' : 'float'\"\n    [status]=\"status()\"\n    [size]=\"size()\"\n    nbInput\n    [id]=\"getInputId('input-number')\"\n    [min]=\"min()\"\n    [max]=\"max()\"\n    [placeholder]=\"placeholder()\"\n    type=\"number\" />\n</nbx-input-wrapper>\n", styles: ["input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\n"], dependencies: [{ kind: "directive", type: NbInputDirective, selector: "input[nbInput],textarea[nbInput]", inputs: ["fieldSize", "size", "status", "shape", "fullWidth"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: NbxInputWrapperComponent, selector: "nbx-input-wrapper", inputs: ["context", "isInputHasButton", "inputId", "copyAsJson", "floatLabelOnlyBySearch", "searchHasValue"] }, { kind: "directive", type: IntOrFloatDirective, selector: "[nbxIntOrFloat]", inputs: ["nbxIntOrFloat"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NbxInputNumberComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nbx-input-number', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: NbxInputNumberComponent,
+                            multi: true,
+                        },
+                    ], imports: [NbInputDirective, ReactiveFormsModule, NbxInputWrapperComponent, IntOrFloatDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nbx-input-wrapper [context]=\"getContext()\" [inputId]=\"getInputId('input-number')\">\n  <ng-content label-content></ng-content>\n\n  <input\n    (keydown.arrowDown)=\"$event.preventDefault()\"\n    (keydown.arrowUp)=\"$event.preventDefault()\"\n    (wheel)=\"$event.preventDefault()\"\n    [formControl]=\"control\"\n    (input)=\"inputKeyUp($any($event.target))\"\n    fullWidth\n    [nbxIntOrFloat]=\"onlyInt() ? 'int' : 'float'\"\n    [status]=\"status()\"\n    [size]=\"size()\"\n    nbInput\n    [id]=\"getInputId('input-number')\"\n    [min]=\"min()\"\n    [max]=\"max()\"\n    [placeholder]=\"placeholder()\"\n    type=\"number\" />\n</nbx-input-wrapper>\n", styles: ["input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\n"] }]
+        }], propDecorators: { min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], onlyInt: [{ type: i0.Input, args: [{ isSignal: true, alias: "onlyInt", required: false }] }], inputKeyup: [{ type: i0.Output, args: ["inputKeyup"] }] } });
+
+class NbxInputSelectComponent extends NbxControlValueAccessorBaseDirective {
+    multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
+    optionsListClass = input('', ...(ngDevMode ? [{ debugName: "optionsListClass" }] : /* istanbul ignore next */ []));
+    options = input.required(...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    selectedChange = output();
+    isAllSelected = computed(() => this.value()?.length === this.options()?.length, ...(ngDevMode ? [{ debugName: "isAllSelected" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+    }
+    selectAll() {
+        const allValues = this.options().map((item) => item.value);
+        this.control.setValue(allValues);
+    }
+    resetForm() {
+        this.control?.reset();
+        if (this.multiple()) {
+            this.valueChanged([]);
+            this.selectedChangeEvent();
+        }
+    }
+    selectedChangeEvent() {
+        setTimeout(() => {
+            this.selectedChange.emit(this.control.value);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NbxInputSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: NbxInputSelectComponent, isStandalone: true, selector: "nbx-input-select", inputs: { multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, optionsListClass: { classPropertyName: "optionsListClass", publicName: "optionsListClass", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selectedChange: "selectedChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: NbxInputSelectComponent,
+                multi: true,
+            },
+        ], usesInheritance: true, ngImport: i0, template: "<nbx-input-wrapper [context]=\"getContext()\" [isInputHasButton]=\"true\" [inputId]=\"getInputId('select-input')\">\n  <ng-content label-content></ng-content>\n  <div class=\"select-wrapper\">\n    <div class=\"nb-form-control-container nb-form-field-control-with-suffix\">\n      <nb-select\n        [multiple]=\"multiple()\"\n        [optionsListClass]=\"optionsListClass()\"\n        [class.multiple]=\"multiple()\"\n        [status]=\"status()\"\n        [size]=\"size()\"\n        [id]=\"getInputId('select-input')\"\n        fullWidth\n        [formControl]=\"control\"\n        [placeholder]=\"placeholder()\"\n        (selectedChange)=\"selectedChangeEvent()\">\n        @if (multiple()) {\n          <nb-option\n            [disabled]=\"isAllSelected()\"\n            (click)=\"$event.preventDefault(); $event.stopPropagation(); selectAll()\"\n            [value]=\"null\">\n            Select all\n          </nb-option>\n        }\n        @for (option of options(); track $index) {\n          <nb-option [value]=\"option.value\" [disabled]=\"option?.disabled\">\n            {{ option.title }}\n          </nb-option>\n        }\n      </nb-select>\n    </div>\n    @if (multiple()) {\n      <div\n        [class]=\"['nb-form-field-suffix-' + size(), 'nb-form-field-addon-' + status()]\"\n        class=\"nb-form-field-addon ng-star-inserted\">\n        <button\n          type=\"button\"\n          title=\"Clear\"\n          [id]=\"getInputId('select-input') + '-clear-button'\"\n          nbButton\n          appearance=\"ghost\"\n          (click)=\"resetForm()\">\n          <nb-icon icon=\"backspace-outline\" pack=\"eva\"> </nb-icon>\n        </button>\n      </div>\n    }\n  </div>\n</nbx-input-wrapper>\n", styles: [".select-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.select-wrapper .nb-form-control-container{width:100%}nb-select.multiple::ng-deep .select-button nb-icon{display:none}\n"], dependencies: [{ kind: "component", type: NbIconComponent, selector: "nb-icon", inputs: ["icon", "pack", "options", "status", "config"], outputs: ["iconChange", "packChange", "optionsChange", "statusChange"] }, { kind: "component", type: NbSelectComponent, selector: "nb-select", inputs: ["size", "status", "shape", "appearance", "optionsListClass", "optionsPanelClass", "optionsWidth", "disabled", "fullWidth", "placeholder", "compareWith", "selected", "multiple", "optionsOverlayOffset", "scrollStrategy", "outline", "filled", "hero"], outputs: ["selectedChange"] }, { kind: "component", type: NbOptionComponent, selector: "nb-option", inputs: ["value", "disabled"], outputs: ["selectionChange"] }, { kind: "component", type: NbxInputWrapperComponent, selector: "nbx-input-wrapper", inputs: ["context", "isInputHasButton", "inputId", "copyAsJson", "floatLabelOnlyBySearch", "searchHasValue"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: NbButtonComponent, selector: "button[nbButton],a[nbButton],input[type=\"button\"][nbButton],input[type=\"submit\"][nbButton]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NbxInputSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nbx-input-select', imports: [
+                        NbIconComponent,
+                        NbSelectComponent,
+                        NbOptionComponent,
+                        NbxInputWrapperComponent,
+                        ReactiveFormsModule,
+                        NbButtonComponent,
+                    ], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: NbxInputSelectComponent,
+                            multi: true,
+                        },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nbx-input-wrapper [context]=\"getContext()\" [isInputHasButton]=\"true\" [inputId]=\"getInputId('select-input')\">\n  <ng-content label-content></ng-content>\n  <div class=\"select-wrapper\">\n    <div class=\"nb-form-control-container nb-form-field-control-with-suffix\">\n      <nb-select\n        [multiple]=\"multiple()\"\n        [optionsListClass]=\"optionsListClass()\"\n        [class.multiple]=\"multiple()\"\n        [status]=\"status()\"\n        [size]=\"size()\"\n        [id]=\"getInputId('select-input')\"\n        fullWidth\n        [formControl]=\"control\"\n        [placeholder]=\"placeholder()\"\n        (selectedChange)=\"selectedChangeEvent()\">\n        @if (multiple()) {\n          <nb-option\n            [disabled]=\"isAllSelected()\"\n            (click)=\"$event.preventDefault(); $event.stopPropagation(); selectAll()\"\n            [value]=\"null\">\n            Select all\n          </nb-option>\n        }\n        @for (option of options(); track $index) {\n          <nb-option [value]=\"option.value\" [disabled]=\"option?.disabled\">\n            {{ option.title }}\n          </nb-option>\n        }\n      </nb-select>\n    </div>\n    @if (multiple()) {\n      <div\n        [class]=\"['nb-form-field-suffix-' + size(), 'nb-form-field-addon-' + status()]\"\n        class=\"nb-form-field-addon ng-star-inserted\">\n        <button\n          type=\"button\"\n          title=\"Clear\"\n          [id]=\"getInputId('select-input') + '-clear-button'\"\n          nbButton\n          appearance=\"ghost\"\n          (click)=\"resetForm()\">\n          <nb-icon icon=\"backspace-outline\" pack=\"eva\"> </nb-icon>\n        </button>\n      </div>\n    }\n  </div>\n</nbx-input-wrapper>\n", styles: [".select-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.select-wrapper .nb-form-control-container{width:100%}nb-select.multiple::ng-deep .select-button nb-icon{display:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], optionsListClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionsListClass", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], selectedChange: [{ type: i0.Output, args: ["selectedChange"] }] } });
+
+class NbxInputTextComponent extends NbxControlValueAccessorBaseDirective {
+    type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    min = input(null, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    max = input(null, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    inputKeyup = output();
+    inputKeyUp(target) {
+        this.inputKeyup.emit(target.value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NbxInputTextComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.15", type: NbxInputTextComponent, isStandalone: true, selector: "nbx-input-text", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { inputKeyup: "inputKeyup" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: NbxInputTextComponent,
+                multi: true,
+            },
+        ], usesInheritance: true, ngImport: i0, template: "<nbx-input-wrapper [context]=\"getContext()\" [inputId]=\"getInputId('input-' + type())\">\n  <ng-content label-content></ng-content>\n\n  <input\n    [formControl]=\"control\"\n    (input)=\"inputKeyUp($any($event.target))\"\n    fullWidth\n    [id]=\"getInputId('input-' + type())\"\n    nbInput\n    [status]=\"status()\"\n    [size]=\"size()\"\n    [placeholder]=\"placeholder()\"\n    type=\"string\" />\n</nbx-input-wrapper>\n", styles: ["input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none}\n"], dependencies: [{ kind: "directive", type: NbInputDirective, selector: "input[nbInput],textarea[nbInput]", inputs: ["fieldSize", "size", "status", "shape", "fullWidth"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: NbxInputWrapperComponent, selector: "nbx-input-wrapper", inputs: ["context", "isInputHasButton", "inputId", "copyAsJson", "floatLabelOnlyBySearch", "searchHasValue"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NbxInputTextComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'nbx-input-text', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: NbxInputTextComponent,
+                            multi: true,
+                        },
+                    ], imports: [NbInputDirective, ReactiveFormsModule, NbxInputWrapperComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nbx-input-wrapper [context]=\"getContext()\" [inputId]=\"getInputId('input-' + type())\">\n  <ng-content label-content></ng-content>\n\n  <input\n    [formControl]=\"control\"\n    (input)=\"inputKeyUp($any($event.target))\"\n    fullWidth\n    [id]=\"getInputId('input-' + type())\"\n    nbInput\n    [status]=\"status()\"\n    [size]=\"size()\"\n    [placeholder]=\"placeholder()\"\n    type=\"string\" />\n</nbx-input-wrapper>\n", styles: ["input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none}\n"] }]
+        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], inputKeyup: [{ type: i0.Output, args: ["inputKeyup"] }] } });
+
+class NbxInputTextareaComponent extends NbxControlValueAccessorBaseDirective {
+    textareaInput = viewChild('textareaInput', ...(ngDevMode ? [{ debugName: "textareaInput" }] : /* istanbul ignore next */ []));
+    inputKeyup = output();
+    rows = input(null, ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        effect(() => {
+            const valueData = this.value();
+            if (valueData !== this.innerHTMLValue) {
+                this.setTextAreaValue(valueData || '');
+            }
+        });
+    }
+    onPaste(e) {
+        e.preventDefault();
+        const pasteData = e.clipboardData?.getData('text/plain');
+        const selection = window.getSelection();
+        if (selection && selection.rangeCount > 0) {
+            const range = selection.getRangeAt(0);
+            range.deleteContents();
+            range.insertNode(document.createTextNode(pasteData || ''));
+            range.collapse(false);
+            this.valueChanged(this.innerHTMLValue || '');
+        }
+    }
+    keyup() {
+        this.valueChanged(this.innerHTMLValue);
+        this.inputKeyup.emit(this.innerHTMLValue);
+    }
+    get innerHTMLValue() {
+        return this.textareaInput()?.nativeElement.innerHTML || '';
+    }
+    setTextAreaValue(value) {
+        const nativeElement = this.textareaInput()?.nativeElement;
+        if (nativeElement) {
+            nativeElement.innerHTML = value;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NbxInputTextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.15", type: NbxInputTextareaComponent, isStandalone: true, selector: "nbx-input-textarea", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { inputKeyup: "inputKeyup" }, host: { properties: { "style": "{\n      '--nbx-input-disabled-text-color': 'var(--input-' + status() + '-disabled-text-color)',\n      '--nbx-input-disabled-border-color': 'var(--input-' + status() + '-disabled-border-color)',\n      }" }, classAttribute: "input-control" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: NbxInputTextareaComponent,
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "textareaInput", first: true, predicate: ["textareaInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<nbx-input-wrapper [context]=\"getContext()\" [inputId]=\"getInputId('input-textarea')\">\n  <ng-content label-content></ng-content>\n  <div\n    #textareaInput\n    role=\"none\"\n    [id]=\"getInputId('input-textarea')\"\n    [attr.placeholder]=\"placeholder()\"\n    [class.disabled]=\"disabled()\"\n    [class]=\"['size-' + size(), 'status-' + status()]\"\n    [style]=\"{ 'min-height': 'calc(1.2rem * ' + (rows() || 0) + ' + 1rem)' }\"\n    class=\"textarea-container input-full-width shape-rectangle nb-transition\"\n    [attr.contenteditable]=\"!disabled()\"\n    nbInput\n    fullWidth\n    (paste)=\"onPaste($event)\"\n    (input)=\"keyup()\"></div>\n</nbx-input-wrapper>\n", styles: [".textarea-container{white-space:pre-wrap}.textarea-container *{background-color:inherit!important}.textarea-container.disabled{color:var(--nbx-input-disabled-text-color);border-color:var(--nbx-input-disabled-border-color);line-break:anywhere}.input-fieldset .has-value [placeholder]:before{content:\"\"}[placeholder]:empty:before{content:attr(placeholder);color:var(--input-primary-placeholder-text-color);font-weight:400}[placeholder]:not(:empty):focus:before{content:\"\"}\n"], dependencies: [{ kind: "component", type: NbxInputWrapperComponent, selector: "nbx-input-wrapper", inputs: ["context", "isInputHasButton", "inputId", "copyAsJson", "floatLabelOnlyBySearch", "searchHasValue"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NbxInputTextareaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nbx-input-textarea', host: {
+                        class: 'input-control',
+                        '[style]': `{
+      '--nbx-input-disabled-text-color': 'var(--input-' + status() + '-disabled-text-color)',
+      '--nbx-input-disabled-border-color': 'var(--input-' + status() + '-disabled-border-color)',
+      }`,
+                    }, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: NbxInputTextareaComponent,
+                            multi: true,
+                        },
+                    ], imports: [NbxInputWrapperComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nbx-input-wrapper [context]=\"getContext()\" [inputId]=\"getInputId('input-textarea')\">\n  <ng-content label-content></ng-content>\n  <div\n    #textareaInput\n    role=\"none\"\n    [id]=\"getInputId('input-textarea')\"\n    [attr.placeholder]=\"placeholder()\"\n    [class.disabled]=\"disabled()\"\n    [class]=\"['size-' + size(), 'status-' + status()]\"\n    [style]=\"{ 'min-height': 'calc(1.2rem * ' + (rows() || 0) + ' + 1rem)' }\"\n    class=\"textarea-container input-full-width shape-rectangle nb-transition\"\n    [attr.contenteditable]=\"!disabled()\"\n    nbInput\n    fullWidth\n    (paste)=\"onPaste($event)\"\n    (input)=\"keyup()\"></div>\n</nbx-input-wrapper>\n", styles: [".textarea-container{white-space:pre-wrap}.textarea-container *{background-color:inherit!important}.textarea-container.disabled{color:var(--nbx-input-disabled-text-color);border-color:var(--nbx-input-disabled-border-color);line-break:anywhere}.input-fieldset .has-value [placeholder]:before{content:\"\"}[placeholder]:empty:before{content:attr(placeholder);color:var(--input-primary-placeholder-text-color);font-weight:400}[placeholder]:not(:empty):focus:before{content:\"\"}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { textareaInput: [{ type: i0.ViewChild, args: ['textareaInput', { isSignal: true }] }], inputKeyup: [{ type: i0.Output, args: ["inputKeyup"] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }] } });
+
+const urlRegExp = new RegExp(/^https?:\/\/(www\.)?[a-zA-Z0-9-]{1,63}(\.[a-zA-Z0-9-]{1,63})*\.[a-zA-Z]{2,6}(\/[-a-zA-Z0-9@:%._+~#?&//=]*)?$/);
+const emailPattern = /(^$|(^([^<>()\[\]\\,;:\s@"]+(\.[^<>()\[\]\\,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$)/;
+const NbxValidators = {
+    url: (control) => {
+        const pattern = urlRegExp.test(control.value);
+        return pattern || !control.value ? null : { url: 'Invalid URL. Valid example: http://example.com' };
+    },
+    email: (control) => {
+        const pattern = new RegExp(emailPattern).test(control.value);
+        return pattern || !control.value ? null : { email: true };
+    },
+};
+
+/**
+ * @deprecated not need to use it! All providers already provided in theme
+ * @returns null
+ */
+function provideNbxInputs() {
+    return importProvidersFrom();
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { IntOrFloatDirective, NbxClipboardDirective, NbxControlValueAccessorBaseDirective, NbxCustomTooltipComponent, NbxInputAutocompleteComponent, NbxInputColorSelectComponent, NbxInputDatePickerComponent, NbxInputDateRangePickerComponent, NbxInputDateTimePickerComponent, NbxInputErrorsComponent, NbxInputLabelComponent, NbxInputMultiselectAutocompleteComponent, NbxInputNumberComponent, NbxInputSelectComponent, NbxInputTextComponent, NbxInputTextareaComponent, NbxInputWrapperComponent, NbxValidators, NbxValidatorsErrorsMessage, filterAndSortOptionsBySearch, filterOptionsBySearch, getFilteredBySearchArray, getOnlyDirtyControlsValuesRecursive, getRandomId, isQueryIncludesInObject, markAllControlsAsDirty, provideNbxInputs, resizeObservable, sortOptionsBySearchIndex };
+//# sourceMappingURL=d4k-ui-nbx-inputs.mjs.map