@ng-matero/extensions 12.5.2 → 13.0.0

package/fesm2020/mtxSelect.mjs

@@ -0,0 +1,709 @@
+import * as i0 from '@angular/core';
+import { Directive, Component, ChangeDetectionStrategy, Input, EventEmitter, TemplateRef, ViewEncapsulation, Optional, Self, ViewChild, ContentChild, ContentChildren, Output, NgModule } from '@angular/core';
+import * as i4 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i2 from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i3 from '@ng-select/ng-select';
+import { NgSelectModule } from '@ng-select/ng-select';
+import { MatFormFieldControl } from '@angular/material/form-field';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { Subject, merge } from 'rxjs';
+import { takeUntil, startWith } from 'rxjs/operators';
+import * as i1 from '@angular/cdk/a11y';
+
+class MtxSelectOptionTemplateDirective {
+    constructor(template) {
+        this.template = template;
+    }
+}
+/** @nocollapse */ /** @nocollapse */ MtxSelectOptionTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MtxSelectOptionTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ MtxSelectOptionTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.0", type: MtxSelectOptionTemplateDirective, selector: "[ng-option-tmp]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MtxSelectOptionTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[ng-option-tmp]' }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+class MtxSelectOptgroupTemplateDirective {
+    constructor(template) {
+        this.template = template;
+    }
+}
+/** @nocollapse */ /** @nocollapse */ MtxSelectOptgroupTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MtxSelectOptgroupTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ MtxSelectOptgroupTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.0", type: MtxSelectOptgroupTemplateDirective, selector: "[ng-optgroup-tmp]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MtxSelectOptgroupTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[ng-optgroup-tmp]' }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+class MtxSelectLabelTemplateDirective {
+    constructor(template) {
+        this.template = template;
+    }
+}
+/** @nocollapse */ /** @nocollapse */ MtxSelectLabelTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MtxSelectLabelTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ MtxSelectLabelTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.0", type: MtxSelectLabelTemplateDirective, selector: "[ng-label-tmp]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MtxSelectLabelTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[ng-label-tmp]' }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+class MtxSelectMultiLabelTemplateDirective {
+    constructor(template) {
+        this.template = template;
+    }
+}
+/** @nocollapse */ /** @nocollapse */ MtxSelectMultiLabelTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MtxSelectMultiLabelTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ MtxSelectMultiLabelTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.0", type: MtxSelectMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MtxSelectMultiLabelTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[ng-multi-label-tmp]' }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+class MtxSelectHeaderTemplateDirective {
+    constructor(template) {
+        this.template = template;
+    }
+}
+/** @nocollapse */ /** @nocollapse */ MtxSelectHeaderTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MtxSelectHeaderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ MtxSelectHeaderTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.0", type: MtxSelectHeaderTemplateDirective, selector: "[ng-header-tmp]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MtxSelectHeaderTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[ng-header-tmp]' }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+class MtxSelectFooterTemplateDirective {
+    constructor(template) {
+        this.template = template;
+    }
+}
+/** @nocollapse */ /** @nocollapse */ MtxSelectFooterTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MtxSelectFooterTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ MtxSelectFooterTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.0", type: MtxSelectFooterTemplateDirective, selector: "[ng-footer-tmp]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MtxSelectFooterTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[ng-footer-tmp]' }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+class MtxSelectNotFoundTemplateDirective {
+    constructor(template) {
+        this.template = template;
+    }
+}
+/** @nocollapse */ /** @nocollapse */ MtxSelectNotFoundTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MtxSelectNotFoundTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ MtxSelectNotFoundTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.0", type: MtxSelectNotFoundTemplateDirective, selector: "[ng-notfound-tmp]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MtxSelectNotFoundTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[ng-notfound-tmp]' }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+class MtxSelectTypeToSearchTemplateDirective {
+    constructor(template) {
+        this.template = template;
+    }
+}
+/** @nocollapse */ /** @nocollapse */ MtxSelectTypeToSearchTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MtxSelectTypeToSearchTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ MtxSelectTypeToSearchTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.0", type: MtxSelectTypeToSearchTemplateDirective, selector: "[ng-typetosearch-tmp]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MtxSelectTypeToSearchTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[ng-typetosearch-tmp]' }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+class MtxSelectLoadingTextTemplateDirective {
+    constructor(template) {
+        this.template = template;
+    }
+}
+/** @nocollapse */ /** @nocollapse */ MtxSelectLoadingTextTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MtxSelectLoadingTextTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ MtxSelectLoadingTextTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.0", type: MtxSelectLoadingTextTemplateDirective, selector: "[ng-loadingtext-tmp]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MtxSelectLoadingTextTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[ng-loadingtext-tmp]' }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+class MtxSelectTagTemplateDirective {
+    constructor(template) {
+        this.template = template;
+    }
+}
+/** @nocollapse */ /** @nocollapse */ MtxSelectTagTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MtxSelectTagTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ MtxSelectTagTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.0", type: MtxSelectTagTemplateDirective, selector: "[ng-tag-tmp]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MtxSelectTagTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[ng-tag-tmp]' }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+class MtxSelectLoadingSpinnerTemplateDirective {
+    constructor(template) {
+        this.template = template;
+    }
+}
+/** @nocollapse */ /** @nocollapse */ MtxSelectLoadingSpinnerTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MtxSelectLoadingSpinnerTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ MtxSelectLoadingSpinnerTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.0", type: MtxSelectLoadingSpinnerTemplateDirective, selector: "[ng-loadingspinner-tmp]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MtxSelectLoadingSpinnerTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[ng-loadingspinner-tmp]' }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+
+class MtxOptionComponent {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+        this.stateChange$ = new Subject();
+        this._disabled = false;
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        this._disabled = this._isDisabled(value);
+    }
+    get label() {
+        return (this.elementRef.nativeElement.textContent || '').trim();
+    }
+    ngOnChanges(changes) {
+        if (changes.disabled) {
+            this.stateChange$.next({
+                value: this.value,
+                disabled: this._disabled,
+            });
+        }
+    }
+    ngAfterViewChecked() {
+        if (this.label !== this._previousLabel) {
+            this._previousLabel = this.label;
+            this.stateChange$.next({
+                value: this.value,
+                disabled: this._disabled,
+                label: this.elementRef.nativeElement.innerHTML,
+            });
+        }
+    }
+    ngOnDestroy() {
+        this.stateChange$.complete();
+    }
+    _isDisabled(value) {
+        return value != null && `${value}` !== 'false';
+    }
+}
+/** @nocollapse */ /** @nocollapse */ MtxOptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MtxOptionComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ MtxOptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.0", type: MtxOptionComponent, selector: "mtx-option", inputs: { value: "value", disabled: "disabled" }, exportAs: ["mtxOption"], usesOnChanges: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MtxOptionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mtx-option',
+                    exportAs: 'mtxOption',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `<ng-content></ng-content>`,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { value: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }] } });
+
+function isDefined(value) {
+    return value !== undefined && value !== null;
+}
+let nextUniqueId = 0;
+class MtxSelectComponent {
+    constructor(_focusMonitor, _elementRef, _changeDetectorRef, ngControl) {
+        this._focusMonitor = _focusMonitor;
+        this._elementRef = _elementRef;
+        this._changeDetectorRef = _changeDetectorRef;
+        this.ngControl = ngControl;
+        /** MtxSelect options */
+        this.addTag = false;
+        this.addTagText = 'Add item';
+        this.appearance = 'underline';
+        this.closeOnSelect = true;
+        this.clearAllText = 'Clear all';
+        this.clearable = true;
+        this.clearOnBackspace = true;
+        this.dropdownPosition = 'auto';
+        this.selectableGroup = false;
+        this.selectableGroupAsModel = true;
+        this.hideSelected = false;
+        this.loading = false;
+        this.loadingText = 'Loading...';
+        this.labelForId = null;
+        this.markFirst = true;
+        this.multiple = false;
+        this.notFoundText = 'No items found';
+        this.searchable = true;
+        this.readonly = false;
+        this.searchFn = null;
+        this.searchWhileComposing = true;
+        this.selectOnTab = false;
+        this.trackByFn = null;
+        this.inputAttrs = {};
+        this.minTermLength = 0;
+        this.editableSearchTerm = false;
+        this.keyDownFn = (_) => true;
+        this.virtualScroll = false;
+        this.typeToSearchText = 'Type to search';
+        this.blurEvent = new EventEmitter();
+        this.focusEvent = new EventEmitter();
+        this.changeEvent = new EventEmitter();
+        this.openEvent = new EventEmitter();
+        this.closeEvent = new EventEmitter();
+        this.searchEvent = new EventEmitter();
+        this.clearEvent = new EventEmitter();
+        this.addEvent = new EventEmitter();
+        this.removeEvent = new EventEmitter();
+        this.scroll = new EventEmitter();
+        this.scrollToEnd = new EventEmitter();
+        this._items = [];
+        this._destroy$ = new Subject();
+        this._value = null;
+        /** Implemented as part of MatFormFieldControl. */
+        this.stateChanges = new Subject();
+        /** Unique id for this input. */
+        this._uid = `mtx-select-${nextUniqueId++}`;
+        this._focused = false;
+        this._required = false;
+        this._disabled = false;
+        this.errorState = false;
+        /** A name for this control that can be used by `mat-form-field`. */
+        this.controlType = 'mtx-select';
+        /** `View -> model callback called when value changes` */
+        this._onChange = () => { };
+        /** `View -> model callback called when select has been touched` */
+        this._onTouched = () => { };
+        _focusMonitor.monitor(_elementRef, true).subscribe(origin => {
+            if (this._focused && !origin) {
+                this._onTouched();
+            }
+            this._focused = !!origin;
+            this.stateChanges.next();
+        });
+        if (this.ngControl != null) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    get clearSearchOnAdd() {
+        return isDefined(this._clearSearchOnAdd) ? this._clearSearchOnAdd : this.closeOnSelect;
+    }
+    set clearSearchOnAdd(value) {
+        this._clearSearchOnAdd = value;
+    }
+    get items() {
+        return this._items;
+    }
+    set items(value) {
+        this._itemsAreUsed = true;
+        this._items = value;
+    }
+    /** Value of the select control. */
+    get value() {
+        return this._value;
+    }
+    set value(newValue) {
+        this._value = newValue;
+        this._onChange(newValue);
+        this.stateChanges.next();
+    }
+    /** Unique id of the element. */
+    get id() {
+        return this._id;
+    }
+    set id(value) {
+        this._id = value || this._uid;
+        this.stateChanges.next();
+    }
+    /** Placeholder to be shown if value is empty. */
+    get placeholder() {
+        return this._placeholder;
+    }
+    set placeholder(value) {
+        this._placeholder = value;
+        this.stateChanges.next();
+    }
+    /** Whether the input is focused. */
+    get focused() {
+        return this._focused;
+    }
+    get empty() {
+        return this.value == null || (Array.isArray(this.value) && this.value.length === 0);
+    }
+    get shouldLabelFloat() {
+        return this.focused || !this.empty;
+    }
+    get required() {
+        return this._required;
+    }
+    set required(value) {
+        this._required = coerceBooleanProperty(value);
+        this.stateChanges.next();
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        this._disabled = coerceBooleanProperty(value);
+        this.readonly = this._disabled;
+        this.stateChanges.next();
+    }
+    ngOnInit() {
+        // Fix compareWith warning of undefined value
+        // https://github.com/ng-select/ng-select/issues/1537
+        if (this.compareWith) {
+            this.ngSelect.compareWith = this.compareWith;
+        }
+    }
+    ngAfterViewInit() {
+        if (!this._itemsAreUsed) {
+            this._setItemsFromMtxOptions();
+        }
+    }
+    ngDoCheck() {
+        if (this.ngControl) {
+            this.errorState = (this.ngControl.invalid && this.ngControl.touched);
+            this.stateChanges.next();
+        }
+    }
+    ngOnDestroy() {
+        this._destroy$.next();
+        this._destroy$.complete();
+        this.stateChanges.complete();
+        this._focusMonitor.stopMonitoring(this._elementRef);
+    }
+    /** Implemented as part of MatFormFieldControl. */
+    setDescribedByIds(ids) {
+        this._ariaDescribedby = ids.join(' ');
+    }
+    /**
+     * Disables the select. Part of the ControlValueAccessor interface required
+     * to integrate with Angular's core forms API.
+     *
+     * @param isDisabled Sets whether the component is disabled.
+     */
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    /** Implemented as part of MatFormFieldControl. */
+    onContainerClick(event) {
+        const target = event.target;
+        if (/mat-form-field|mtx-select/g.test(target.parentElement?.classList[0] || '')) {
+            this.focus();
+            this.open();
+        }
+    }
+    /**
+     * Sets the select's value. Part of the ControlValueAccessor interface
+     * required to integrate with Angular's core forms API.
+     *
+     * @param value New value to be written to the model.
+     */
+    writeValue(value) {
+        this.value = value;
+        this._changeDetectorRef.markForCheck();
+    }
+    /**
+     * Saves a callback function to be invoked when the select's value
+     * changes from user input. Part of the ControlValueAccessor interface
+     * required to integrate with Angular's core forms API.
+     *
+     * @param fn Callback to be triggered when the value changes.
+     */
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    /**
+     * Saves a callback function to be invoked when the select is blurred
+     * by the user. Part of the ControlValueAccessor interface required
+     * to integrate with Angular's core forms API.
+     *
+     * @param fn Callback to be triggered when the component has been touched.
+     */
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    /** NgSelect: _setItemsFromNgOptions */
+    _setItemsFromMtxOptions() {
+        const mapMtxOptions = (options) => {
+            this.items = options.map(option => ({
+                $ngOptionValue: option.value,
+                $ngOptionLabel: option.elementRef.nativeElement.innerHTML,
+                disabled: option.disabled,
+            }));
+            this.ngSelect.itemsList.setItems(this.items);
+            if (this.ngSelect.hasValue) {
+                this.ngSelect.itemsList.mapSelectedItems();
+            }
+            this.ngSelect.detectChanges();
+        };
+        const handleOptionChange = () => {
+            const changedOrDestroyed = merge(this.mtxOptions.changes, this._destroy$);
+            merge(...this.mtxOptions.map(option => option.stateChange$))
+                .pipe(takeUntil(changedOrDestroyed))
+                .subscribe(option => {
+                const item = this.ngSelect.itemsList.findItem(option.value);
+                item.disabled = option.disabled;
+                item.label = option.label || item.label;
+                this.ngSelect.detectChanges();
+            });
+        };
+        this.mtxOptions.changes
+            .pipe(startWith(this.mtxOptions), takeUntil(this._destroy$))
+            .subscribe(options => {
+            mapMtxOptions(options);
+            handleOptionChange();
+        });
+    }
+    open() {
+        this.ngSelect.open();
+    }
+    close() {
+        this.ngSelect.close();
+    }
+    focus() {
+        this.ngSelect.focus();
+    }
+    blur() {
+        this.ngSelect.blur();
+    }
+}
+/** @nocollapse */ /** @nocollapse */ MtxSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MtxSelectComponent, deps: [{ token: i1.FocusMonitor }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ MtxSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.0", type: MtxSelectComponent, selector: "mtx-select", inputs: { addTag: "addTag", addTagText: "addTagText", appearance: "appearance", appendTo: "appendTo", bindLabel: "bindLabel", bindValue: "bindValue", closeOnSelect: "closeOnSelect", clearAllText: "clearAllText", clearable: "clearable", clearOnBackspace: "clearOnBackspace", compareWith: "compareWith", dropdownPosition: "dropdownPosition", groupBy: "groupBy", groupValue: "groupValue", selectableGroup: "selectableGroup", selectableGroupAsModel: "selectableGroupAsModel", hideSelected: "hideSelected", isOpen: "isOpen", loading: "loading", loadingText: "loadingText", labelForId: "labelForId", markFirst: "markFirst", maxSelectedItems: "maxSelectedItems", multiple: "multiple", notFoundText: "notFoundText", searchable: "searchable", readonly: "readonly", searchFn: "searchFn", searchWhileComposing: "searchWhileComposing", selectOnTab: "selectOnTab", trackByFn: "trackByFn", inputAttrs: "inputAttrs", tabIndex: "tabIndex", openOnEnter: "openOnEnter", minTermLength: "minTermLength", editableSearchTerm: "editableSearchTerm", keyDownFn: "keyDownFn", virtualScroll: "virtualScroll", typeToSearchText: "typeToSearchText", typeahead: "typeahead", clearSearchOnAdd: "clearSearchOnAdd", items: "items", value: "value", id: "id", placeholder: "placeholder", required: "required", disabled: "disabled" }, outputs: { blurEvent: "blur", focusEvent: "focus", changeEvent: "change", openEvent: "open", closeEvent: "close", searchEvent: "search", clearEvent: "clear", addEvent: "add", removeEvent: "remove", scroll: "scroll", scrollToEnd: "scrollToEnd" }, host: { properties: { "attr.id": "id", "attr.aria-describedby": "_ariaDescribedby || null", "class.mtx-select-floating": "shouldLabelFloat", "class.mtx-select-invalid": "errorState" }, classAttribute: "mtx-select" }, providers: [{ provide: MatFormFieldControl, useExisting: MtxSelectComponent }], queries: [{ propertyName: "optionTemplate", first: true, predicate: MtxSelectOptionTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "optgroupTemplate", first: true, predicate: MtxSelectOptgroupTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "labelTemplate", first: true, predicate: MtxSelectLabelTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "multiLabelTemplate", first: true, predicate: MtxSelectMultiLabelTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "headerTemplate", first: true, predicate: MtxSelectHeaderTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "footerTemplate", first: true, predicate: MtxSelectFooterTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "notFoundTemplate", first: true, predicate: MtxSelectNotFoundTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "typeToSearchTemplate", first: true, predicate: MtxSelectTypeToSearchTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "loadingTextTemplate", first: true, predicate: MtxSelectLoadingTextTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "tagTemplate", first: true, predicate: MtxSelectTagTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "loadingSpinnerTemplate", first: true, predicate: MtxSelectLoadingSpinnerTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "mtxOptions", predicate: MtxOptionComponent, descendants: true }], viewQueries: [{ propertyName: "ngSelect", first: true, predicate: ["ngSelect"], descendants: true, static: true }], exportAs: ["mtxSelect"], ngImport: i0, template: "<ng-select #ngSelect [class.ng-select-invalid]=\"errorState\"\n           [(ngModel)]=\"value\"\n           [placeholder]=\"placeholder\"\n           [items]=\"items\"\n           [addTag]=\"addTag\"\n           [addTagText]=\"addTagText\"\n           [appendTo]=\"appendTo\"\n           [appearance]=\"appearance\"\n           [bindLabel]=\"bindLabel\"\n           [bindValue]=\"bindValue\"\n           [closeOnSelect]=\"closeOnSelect\"\n           [clearAllText]=\"clearAllText\"\n           [clearable]=\"clearable\"\n           [clearOnBackspace]=\"clearOnBackspace\"\n           [dropdownPosition]=\"dropdownPosition\"\n           [groupBy]=\"groupBy\"\n           [groupValue]=\"groupValue\"\n           [hideSelected]=\"hideSelected\"\n           [isOpen]=\"isOpen\"\n           [inputAttrs]=\"inputAttrs\"\n           [loading]=\"loading\"\n           [loadingText]=\"loadingText\"\n           [labelForId]=\"labelForId\"\n           [markFirst]=\"markFirst\"\n           [maxSelectedItems]=\"maxSelectedItems\"\n           [multiple]=\"multiple\"\n           [notFoundText]=\"notFoundText\"\n           [readonly]=\"readonly\"\n           [typeahead]=\"typeahead\"\n           [typeToSearchText]=\"typeToSearchText\"\n           [trackByFn]=\"trackByFn\"\n           [searchable]=\"searchable\"\n           [searchFn]=\"searchFn\"\n           [searchWhileComposing]=\"searchWhileComposing\"\n           [clearSearchOnAdd]=\"clearSearchOnAdd\"\n           [selectableGroup]=\"selectableGroup\"\n           [selectableGroupAsModel]=\"selectableGroupAsModel\"\n           [selectOnTab]=\"selectOnTab\"\n           [tabIndex]=\"tabIndex\"\n           [openOnEnter]=\"openOnEnter\"\n           [minTermLength]=\"minTermLength\"\n           [editableSearchTerm]=\"editableSearchTerm\"\n           [keyDownFn]=\"keyDownFn\"\n           [virtualScroll]=\"virtualScroll\"\n           (blur)=\"blurEvent.emit($event)\"\n           (focus)=\"focusEvent.emit($event)\"\n           (change)=\"changeEvent.emit($event)\"\n           (open)=\"openEvent.emit($event)\"\n           (close)=\"closeEvent.emit($event)\"\n           (search)=\"searchEvent.emit($event)\"\n           (clear)=\"clearEvent.emit($event)\"\n           (add)=\"addEvent.emit($event)\"\n           (remove)=\"removeEvent.emit($event)\"\n           (scroll)=\"scroll.emit($event)\"\n           (scrollToEnd)=\"scrollToEnd.emit($event)\">\n\n  <ng-container *ngIf=\"optionTemplate\">\n    <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\"\n                 let-searchTerm=\"searchTerm\">\n      <ng-template [ngTemplateOutlet]=\"optionTemplate\"\n                   [ngTemplateOutletContext]=\"{ item: item, item$: item$, index: index, searchTerm: searchTerm }\">\n      </ng-template>\n    </ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"optgroupTemplate\">\n    <ng-template ng-optgroup-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\"\n                 let-searchTerm=\"searchTerm\">\n      <ng-template [ngTemplateOutlet]=\"optgroupTemplate\"\n                   [ngTemplateOutletContext]=\"{ item: item, item$: item$, index: index, searchTerm: searchTerm }\">\n      </ng-template>\n    </ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"labelTemplate\">\n    <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\" let-label=\"label\">\n      <ng-template [ngTemplateOutlet]=\"labelTemplate\"\n                   [ngTemplateOutletContext]=\"{ item: item, clear: clear, label: label }\">\n      </ng-template>\n    </ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"multiLabelTemplate\">\n    <ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n      <ng-template [ngTemplateOutlet]=\"multiLabelTemplate\"\n                   [ngTemplateOutletContext]=\"{ items: items, clear: clear }\">\n      </ng-template>\n    </ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"headerTemplate\">\n    <ng-template ng-header-tmp>\n      <ng-template [ngTemplateOutlet]=\"headerTemplate\">\n      </ng-template>\n    </ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"footerTemplate\">\n    <ng-template ng-footer-tmp>\n      <ng-template [ngTemplateOutlet]=\"footerTemplate\">\n      </ng-template>\n    </ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"notFoundTemplate\">\n    <ng-template ng-notfound-tmp let-searchTerm=\"searchTerm\">\n      <ng-template [ngTemplateOutlet]=\"notFoundTemplate\"\n                   [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\">\n      </ng-template>\n    </ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"typeToSearchTemplate\">\n    <ng-template ng-typetosearch-tmp>\n      <ng-template [ngTemplateOutlet]=\"typeToSearchTemplate\">\n      </ng-template>\n    </ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"loadingTextTemplate\">\n    <ng-template ng-loadingtext-tmp let-searchTerm=\"searchTerm\">\n      <ng-template [ngTemplateOutlet]=\"loadingTextTemplate\"\n                   [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\">\n      </ng-template>\n    </ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"tagTemplate\">\n    <ng-template ng-tag-tmp let-searchTerm=\"searchTerm\">\n      <ng-template [ngTemplateOutlet]=\"tagTemplate\"\n                   [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\">\n      </ng-template>\n    </ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"loadingSpinnerTemplate\">\n    <ng-template ng-loadingspinner-tmp>\n      <ng-template [ngTemplateOutlet]=\"loadingSpinnerTemplate\">\n      </ng-template>\n    </ng-template>\n  </ng-container>\n\n</ng-select>\n", styles: [".ng-select{padding-top:1.28125em;margin-top:-1.28125em;padding-bottom:.4375em;margin-bottom:-.4375em}.ng-select .ng-select-container,.ng-select .ng-select-container .ng-value-container{align-items:center}.ng-select .ng-select-container .ng-value-container .ng-input>input{font:inherit;padding:0}.mat-form-field-has-label .ng-select .ng-placeholder{transition:opacity .2s;opacity:0}.mat-form-field-has-label .mtx-select-floating .ng-select .ng-placeholder{opacity:1}.ng-select .ng-has-value .ng-placeholder{display:none}.ng-select.ng-select-opened .ng-arrow-wrapper .ng-arrow{top:-2px;border-width:0 5px 5px}.ng-select.ng-select-single.ng-select-filtered .ng-placeholder{display:initial;visibility:hidden}.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder:after,.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-value:after{display:inline-block;content:\"\"}.ng-select.ng-select-multiple .ng-select-container .ng-value-container{margin:-4px 0}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{margin:4px;border-radius:16px;font-size:.875em;line-height:18px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label{display:inline-block;margin:0 8px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{display:inline-block;width:18px;height:18px;border-radius:100%;text-align:center}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{margin-right:-4px}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{margin-left:-4px;margin-right:auto}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{margin-left:-4px}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{margin-right:-4px;margin-left:auto}.ng-select .ng-clear-wrapper{height:18px;text-align:center}.ng-select .ng-arrow-wrapper{width:18px}.ng-select .ng-arrow-wrapper .ng-arrow{border-width:5px 5px 2px;border-style:solid}.ng-dropdown-panel{left:0}[dir=rtl] .ng-dropdown-panel{right:0;left:auto}.ng-dropdown-panel.ng-select-bottom{top:100%;border-bottom-left-radius:4px;border-bottom-right-radius:4px;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.ng-dropdown-panel.ng-select-top{bottom:100%;border-top-left-radius:4px;border-top-right-radius:4px;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.ng-dropdown-panel .ng-dropdown-header,.ng-dropdown-panel .ng-dropdown-footer{padding:14px 16px}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{height:3em;padding:14px 16px;font-weight:500;-webkit-user-select:none;user-select:none;cursor:pointer}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-disabled{cursor:default}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{position:relative;padding:14px 16px;text-overflow:ellipsis;text-decoration:none;text-align:left;white-space:nowrap;overflow:hidden}[dir=rtl] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{text-align:right}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-left:32px}[dir=rtl] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-right:32px;padding-left:0}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{padding-right:5px;font-size:80%;font-weight:400}[dir=rtl] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{padding-left:5px;padding-right:0}\n"], components: [{ type: i3.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }], directives: [{ type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { type: MtxSelectOptionTemplateDirective, selector: "[ng-option-tmp]" }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgOptgroupTemplateDirective, selector: "[ng-optgroup-tmp]" }, { type: MtxSelectOptgroupTemplateDirective, selector: "[ng-optgroup-tmp]" }, { type: i3.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { type: MtxSelectLabelTemplateDirective, selector: "[ng-label-tmp]" }, { type: i3.NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { type: MtxSelectMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { type: i3.NgHeaderTemplateDirective, selector: "[ng-header-tmp]" }, { type: MtxSelectHeaderTemplateDirective, selector: "[ng-header-tmp]" }, { type: i3.NgFooterTemplateDirective, selector: "[ng-footer-tmp]" }, { type: MtxSelectFooterTemplateDirective, selector: "[ng-footer-tmp]" }, { type: i3.NgNotFoundTemplateDirective, selector: "[ng-notfound-tmp]" }, { type: MtxSelectNotFoundTemplateDirective, selector: "[ng-notfound-tmp]" }, { type: i3.NgTypeToSearchTemplateDirective, selector: "[ng-typetosearch-tmp]" }, { type: MtxSelectTypeToSearchTemplateDirective, selector: "[ng-typetosearch-tmp]" }, { type: i3.NgLoadingTextTemplateDirective, selector: "[ng-loadingtext-tmp]" }, { type: MtxSelectLoadingTextTemplateDirective, selector: "[ng-loadingtext-tmp]" }, { type: i3.NgTagTemplateDirective, selector: "[ng-tag-tmp]" }, { type: MtxSelectTagTemplateDirective, selector: "[ng-tag-tmp]" }, { type: i3.NgLoadingSpinnerTemplateDirective, selector: "[ng-loadingspinner-tmp]" }, { type: MtxSelectLoadingSpinnerTemplateDirective, selector: "[ng-loadingspinner-tmp]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MtxSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mtx-select', exportAs: 'mtxSelect', host: {
+                        '[attr.id]': 'id',
+                        '[attr.aria-describedby]': '_ariaDescribedby || null',
+                        '[class.mtx-select-floating]': 'shouldLabelFloat',
+                        '[class.mtx-select-invalid]': 'errorState',
+                        'class': 'mtx-select',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: MatFormFieldControl, useExisting: MtxSelectComponent }], template: "<ng-select #ngSelect [class.ng-select-invalid]=\"errorState\"\n           [(ngModel)]=\"value\"\n           [placeholder]=\"placeholder\"\n           [items]=\"items\"\n           [addTag]=\"addTag\"\n           [addTagText]=\"addTagText\"\n           [appendTo]=\"appendTo\"\n           [appearance]=\"appearance\"\n           [bindLabel]=\"bindLabel\"\n           [bindValue]=\"bindValue\"\n           [closeOnSelect]=\"closeOnSelect\"\n           [clearAllText]=\"clearAllText\"\n           [clearable]=\"clearable\"\n           [clearOnBackspace]=\"clearOnBackspace\"\n           [dropdownPosition]=\"dropdownPosition\"\n           [groupBy]=\"groupBy\"\n           [groupValue]=\"groupValue\"\n           [hideSelected]=\"hideSelected\"\n           [isOpen]=\"isOpen\"\n           [inputAttrs]=\"inputAttrs\"\n           [loading]=\"loading\"\n           [loadingText]=\"loadingText\"\n           [labelForId]=\"labelForId\"\n           [markFirst]=\"markFirst\"\n           [maxSelectedItems]=\"maxSelectedItems\"\n           [multiple]=\"multiple\"\n           [notFoundText]=\"notFoundText\"\n           [readonly]=\"readonly\"\n           [typeahead]=\"typeahead\"\n           [typeToSearchText]=\"typeToSearchText\"\n           [trackByFn]=\"trackByFn\"\n           [searchable]=\"searchable\"\n           [searchFn]=\"searchFn\"\n           [searchWhileComposing]=\"searchWhileComposing\"\n           [clearSearchOnAdd]=\"clearSearchOnAdd\"\n           [selectableGroup]=\"selectableGroup\"\n           [selectableGroupAsModel]=\"selectableGroupAsModel\"\n           [selectOnTab]=\"selectOnTab\"\n           [tabIndex]=\"tabIndex\"\n           [openOnEnter]=\"openOnEnter\"\n           [minTermLength]=\"minTermLength\"\n           [editableSearchTerm]=\"editableSearchTerm\"\n           [keyDownFn]=\"keyDownFn\"\n           [virtualScroll]=\"virtualScroll\"\n           (blur)=\"blurEvent.emit($event)\"\n           (focus)=\"focusEvent.emit($event)\"\n           (change)=\"changeEvent.emit($event)\"\n           (open)=\"openEvent.emit($event)\"\n           (close)=\"closeEvent.emit($event)\"\n           (search)=\"searchEvent.emit($event)\"\n           (clear)=\"clearEvent.emit($event)\"\n           (add)=\"addEvent.emit($event)\"\n           (remove)=\"removeEvent.emit($event)\"\n           (scroll)=\"scroll.emit($event)\"\n           (scrollToEnd)=\"scrollToEnd.emit($event)\">\n\n  <ng-container *ngIf=\"optionTemplate\">\n    <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\"\n                 let-searchTerm=\"searchTerm\">\n      <ng-template [ngTemplateOutlet]=\"optionTemplate\"\n                   [ngTemplateOutletContext]=\"{ item: item, item$: item$, index: index, searchTerm: searchTerm }\">\n      </ng-template>\n    </ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"optgroupTemplate\">\n    <ng-template ng-optgroup-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\"\n                 let-searchTerm=\"searchTerm\">\n      <ng-template [ngTemplateOutlet]=\"optgroupTemplate\"\n                   [ngTemplateOutletContext]=\"{ item: item, item$: item$, index: index, searchTerm: searchTerm }\">\n      </ng-template>\n    </ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"labelTemplate\">\n    <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\" let-label=\"label\">\n      <ng-template [ngTemplateOutlet]=\"labelTemplate\"\n                   [ngTemplateOutletContext]=\"{ item: item, clear: clear, label: label }\">\n      </ng-template>\n    </ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"multiLabelTemplate\">\n    <ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n      <ng-template [ngTemplateOutlet]=\"multiLabelTemplate\"\n                   [ngTemplateOutletContext]=\"{ items: items, clear: clear }\">\n      </ng-template>\n    </ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"headerTemplate\">\n    <ng-template ng-header-tmp>\n      <ng-template [ngTemplateOutlet]=\"headerTemplate\">\n      </ng-template>\n    </ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"footerTemplate\">\n    <ng-template ng-footer-tmp>\n      <ng-template [ngTemplateOutlet]=\"footerTemplate\">\n      </ng-template>\n    </ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"notFoundTemplate\">\n    <ng-template ng-notfound-tmp let-searchTerm=\"searchTerm\">\n      <ng-template [ngTemplateOutlet]=\"notFoundTemplate\"\n                   [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\">\n      </ng-template>\n    </ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"typeToSearchTemplate\">\n    <ng-template ng-typetosearch-tmp>\n      <ng-template [ngTemplateOutlet]=\"typeToSearchTemplate\">\n      </ng-template>\n    </ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"loadingTextTemplate\">\n    <ng-template ng-loadingtext-tmp let-searchTerm=\"searchTerm\">\n      <ng-template [ngTemplateOutlet]=\"loadingTextTemplate\"\n                   [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\">\n      </ng-template>\n    </ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"tagTemplate\">\n    <ng-template ng-tag-tmp let-searchTerm=\"searchTerm\">\n      <ng-template [ngTemplateOutlet]=\"tagTemplate\"\n                   [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\">\n      </ng-template>\n    </ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"loadingSpinnerTemplate\">\n    <ng-template ng-loadingspinner-tmp>\n      <ng-template [ngTemplateOutlet]=\"loadingSpinnerTemplate\">\n      </ng-template>\n    </ng-template>\n  </ng-container>\n\n</ng-select>\n", styles: [".ng-select{padding-top:1.28125em;margin-top:-1.28125em;padding-bottom:.4375em;margin-bottom:-.4375em}.ng-select .ng-select-container,.ng-select .ng-select-container .ng-value-container{align-items:center}.ng-select .ng-select-container .ng-value-container .ng-input>input{font:inherit;padding:0}.mat-form-field-has-label .ng-select .ng-placeholder{transition:opacity .2s;opacity:0}.mat-form-field-has-label .mtx-select-floating .ng-select .ng-placeholder{opacity:1}.ng-select .ng-has-value .ng-placeholder{display:none}.ng-select.ng-select-opened .ng-arrow-wrapper .ng-arrow{top:-2px;border-width:0 5px 5px}.ng-select.ng-select-single.ng-select-filtered .ng-placeholder{display:initial;visibility:hidden}.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder:after,.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-value:after{display:inline-block;content:\"\"}.ng-select.ng-select-multiple .ng-select-container .ng-value-container{margin:-4px 0}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{margin:4px;border-radius:16px;font-size:.875em;line-height:18px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label{display:inline-block;margin:0 8px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{display:inline-block;width:18px;height:18px;border-radius:100%;text-align:center}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{margin-right:-4px}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{margin-left:-4px;margin-right:auto}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{margin-left:-4px}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{margin-right:-4px;margin-left:auto}.ng-select .ng-clear-wrapper{height:18px;text-align:center}.ng-select .ng-arrow-wrapper{width:18px}.ng-select .ng-arrow-wrapper .ng-arrow{border-width:5px 5px 2px;border-style:solid}.ng-dropdown-panel{left:0}[dir=rtl] .ng-dropdown-panel{right:0;left:auto}.ng-dropdown-panel.ng-select-bottom{top:100%;border-bottom-left-radius:4px;border-bottom-right-radius:4px;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.ng-dropdown-panel.ng-select-top{bottom:100%;border-top-left-radius:4px;border-top-right-radius:4px;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.ng-dropdown-panel .ng-dropdown-header,.ng-dropdown-panel .ng-dropdown-footer{padding:14px 16px}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{height:3em;padding:14px 16px;font-weight:500;-webkit-user-select:none;user-select:none;cursor:pointer}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-disabled{cursor:default}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{position:relative;padding:14px 16px;text-overflow:ellipsis;text-decoration:none;text-align:left;white-space:nowrap;overflow:hidden}[dir=rtl] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{text-align:right}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-left:32px}[dir=rtl] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-right:32px;padding-left:0}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{padding-right:5px;font-size:80%;font-weight:400}[dir=rtl] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{padding-left:5px;padding-right:0}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.FocusMonitor }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i2.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }]; }, propDecorators: { ngSelect: [{
+                type: ViewChild,
+                args: ['ngSelect', { static: true }]
+            }], optionTemplate: [{
+                type: ContentChild,
+                args: [MtxSelectOptionTemplateDirective, { read: TemplateRef }]
+            }], optgroupTemplate: [{
+                type: ContentChild,
+                args: [MtxSelectOptgroupTemplateDirective, { read: TemplateRef }]
+            }], labelTemplate: [{
+                type: ContentChild,
+                args: [MtxSelectLabelTemplateDirective, { read: TemplateRef }]
+            }], multiLabelTemplate: [{
+                type: ContentChild,
+                args: [MtxSelectMultiLabelTemplateDirective, { read: TemplateRef }]
+            }], headerTemplate: [{
+                type: ContentChild,
+                args: [MtxSelectHeaderTemplateDirective, { read: TemplateRef }]
+            }], footerTemplate: [{
+                type: ContentChild,
+                args: [MtxSelectFooterTemplateDirective, { read: TemplateRef }]
+            }], notFoundTemplate: [{
+                type: ContentChild,
+                args: [MtxSelectNotFoundTemplateDirective, { read: TemplateRef }]
+            }], typeToSearchTemplate: [{
+                type: ContentChild,
+                args: [MtxSelectTypeToSearchTemplateDirective, { read: TemplateRef }]
+            }], loadingTextTemplate: [{
+                type: ContentChild,
+                args: [MtxSelectLoadingTextTemplateDirective, { read: TemplateRef }]
+            }], tagTemplate: [{
+                type: ContentChild,
+                args: [MtxSelectTagTemplateDirective, { read: TemplateRef }]
+            }], loadingSpinnerTemplate: [{
+                type: ContentChild,
+                args: [MtxSelectLoadingSpinnerTemplateDirective, { read: TemplateRef }]
+            }], mtxOptions: [{
+                type: ContentChildren,
+                args: [MtxOptionComponent, { descendants: true }]
+            }], addTag: [{
+                type: Input
+            }], addTagText: [{
+                type: Input
+            }], appearance: [{
+                type: Input
+            }], appendTo: [{
+                type: Input
+            }], bindLabel: [{
+                type: Input
+            }], bindValue: [{
+                type: Input
+            }], closeOnSelect: [{
+                type: Input
+            }], clearAllText: [{
+                type: Input
+            }], clearable: [{
+                type: Input
+            }], clearOnBackspace: [{
+                type: Input
+            }], compareWith: [{
+                type: Input
+            }], dropdownPosition: [{
+                type: Input
+            }], groupBy: [{
+                type: Input
+            }], groupValue: [{
+                type: Input
+            }], selectableGroup: [{
+                type: Input
+            }], selectableGroupAsModel: [{
+                type: Input
+            }], hideSelected: [{
+                type: Input
+            }], isOpen: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], loadingText: [{
+                type: Input
+            }], labelForId: [{
+                type: Input
+            }], markFirst: [{
+                type: Input
+            }], maxSelectedItems: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], notFoundText: [{
+                type: Input
+            }], searchable: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], searchFn: [{
+                type: Input
+            }], searchWhileComposing: [{
+                type: Input
+            }], selectOnTab: [{
+                type: Input
+            }], trackByFn: [{
+                type: Input
+            }], inputAttrs: [{
+                type: Input
+            }], tabIndex: [{
+                type: Input
+            }], openOnEnter: [{
+                type: Input
+            }], minTermLength: [{
+                type: Input
+            }], editableSearchTerm: [{
+                type: Input
+            }], keyDownFn: [{
+                type: Input
+            }], virtualScroll: [{
+                type: Input
+            }], typeToSearchText: [{
+                type: Input
+            }], typeahead: [{
+                type: Input
+            }], blurEvent: [{
+                type: Output,
+                args: ['blur']
+            }], focusEvent: [{
+                type: Output,
+                args: ['focus']
+            }], changeEvent: [{
+                type: Output,
+                args: ['change']
+            }], openEvent: [{
+                type: Output,
+                args: ['open']
+            }], closeEvent: [{
+                type: Output,
+                args: ['close']
+            }], searchEvent: [{
+                type: Output,
+                args: ['search']
+            }], clearEvent: [{
+                type: Output,
+                args: ['clear']
+            }], addEvent: [{
+                type: Output,
+                args: ['add']
+            }], removeEvent: [{
+                type: Output,
+                args: ['remove']
+            }], scroll: [{
+                type: Output,
+                args: ['scroll']
+            }], scrollToEnd: [{
+                type: Output,
+                args: ['scrollToEnd']
+            }], clearSearchOnAdd: [{
+                type: Input
+            }], items: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }] } });
+
+class MtxSelectModule {
+}
+/** @nocollapse */ /** @nocollapse */ MtxSelectModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MtxSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ /** @nocollapse */ MtxSelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MtxSelectModule, declarations: [MtxSelectComponent,
+        MtxOptionComponent,
+        MtxSelectOptgroupTemplateDirective,
+        MtxSelectOptionTemplateDirective,
+        MtxSelectLabelTemplateDirective,
+        MtxSelectMultiLabelTemplateDirective,
+        MtxSelectHeaderTemplateDirective,
+        MtxSelectFooterTemplateDirective,
+        MtxSelectNotFoundTemplateDirective,
+        MtxSelectTypeToSearchTemplateDirective,
+        MtxSelectLoadingTextTemplateDirective,
+        MtxSelectTagTemplateDirective,
+        MtxSelectLoadingSpinnerTemplateDirective], imports: [CommonModule, FormsModule, ReactiveFormsModule, NgSelectModule], exports: [MtxSelectComponent,
+        MtxOptionComponent,
+        MtxSelectOptgroupTemplateDirective,
+        MtxSelectOptionTemplateDirective,
+        MtxSelectLabelTemplateDirective,
+        MtxSelectMultiLabelTemplateDirective,
+        MtxSelectHeaderTemplateDirective,
+        MtxSelectFooterTemplateDirective,
+        MtxSelectNotFoundTemplateDirective,
+        MtxSelectTypeToSearchTemplateDirective,
+        MtxSelectLoadingTextTemplateDirective,
+        MtxSelectTagTemplateDirective,
+        MtxSelectLoadingSpinnerTemplateDirective] });
+/** @nocollapse */ /** @nocollapse */ MtxSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MtxSelectModule, imports: [[CommonModule, FormsModule, ReactiveFormsModule, NgSelectModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MtxSelectModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, FormsModule, ReactiveFormsModule, NgSelectModule],
+                    exports: [
+                        MtxSelectComponent,
+                        MtxOptionComponent,
+                        MtxSelectOptgroupTemplateDirective,
+                        MtxSelectOptionTemplateDirective,
+                        MtxSelectLabelTemplateDirective,
+                        MtxSelectMultiLabelTemplateDirective,
+                        MtxSelectHeaderTemplateDirective,
+                        MtxSelectFooterTemplateDirective,
+                        MtxSelectNotFoundTemplateDirective,
+                        MtxSelectTypeToSearchTemplateDirective,
+                        MtxSelectLoadingTextTemplateDirective,
+                        MtxSelectTagTemplateDirective,
+                        MtxSelectLoadingSpinnerTemplateDirective,
+                    ],
+                    declarations: [
+                        MtxSelectComponent,
+                        MtxOptionComponent,
+                        MtxSelectOptgroupTemplateDirective,
+                        MtxSelectOptionTemplateDirective,
+                        MtxSelectLabelTemplateDirective,
+                        MtxSelectMultiLabelTemplateDirective,
+                        MtxSelectHeaderTemplateDirective,
+                        MtxSelectFooterTemplateDirective,
+                        MtxSelectNotFoundTemplateDirective,
+                        MtxSelectTypeToSearchTemplateDirective,
+                        MtxSelectLoadingTextTemplateDirective,
+                        MtxSelectTagTemplateDirective,
+                        MtxSelectLoadingSpinnerTemplateDirective,
+                    ],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MtxOptionComponent, MtxSelectComponent, MtxSelectFooterTemplateDirective, MtxSelectHeaderTemplateDirective, MtxSelectLabelTemplateDirective, MtxSelectLoadingSpinnerTemplateDirective, MtxSelectLoadingTextTemplateDirective, MtxSelectModule, MtxSelectMultiLabelTemplateDirective, MtxSelectNotFoundTemplateDirective, MtxSelectOptgroupTemplateDirective, MtxSelectOptionTemplateDirective, MtxSelectTagTemplateDirective, MtxSelectTypeToSearchTemplateDirective, isDefined };
+//# sourceMappingURL=mtxSelect.mjs.map