@ng-matero/extensions
Version:
Angular Material Extensions
584 lines (580 loc) • 74.3 kB
JavaScript
import { NgTemplateOutlet, CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { inject, ElementRef, booleanAttribute, Input, ChangeDetectionStrategy, Component, Injectable, TemplateRef, Directive, InjectionToken, ChangeDetectorRef, EventEmitter, Output, ContentChild, ContentChildren, ViewChild, ViewEncapsulation, NgModule } from '@angular/core';
import * as i2 from '@angular/forms';
import { Validators, NgControl, NgForm, FormGroupDirective, FormsModule } from '@angular/forms';
import * as i1 from '@ng-matero/ng-select';
import { NgSelectModule } from '@ng-matero/ng-select';
import { Subject, Subscription, merge } from 'rxjs';
import { FocusMonitor } from '@angular/cdk/a11y';
import { ErrorStateMatcher, _ErrorStateTracker } from '@angular/material/core';
import { MAT_FORM_FIELD, MatFormFieldControl } from '@angular/material/form-field';
import { takeUntil, startWith } from 'rxjs/operators';
class MtxOption {
constructor() {
this.elementRef = inject(ElementRef);
this.disabled = false;
this.stateChange$ = new Subject();
}
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();
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxOption, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.5", type: MtxOption, isStandalone: true, selector: "mtx-option", inputs: { value: "value", disabled: ["disabled", "disabled", booleanAttribute] }, exportAs: ["mtxOption"], usesOnChanges: true, ngImport: i0, template: `
<ng-content></ng-content>
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxOption, decorators: [{
type: Component,
args: [{
selector: 'mtx-option',
exportAs: 'mtxOption',
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<ng-content></ng-content>
`,
}]
}], propDecorators: { value: [{
type: Input
}], disabled: [{
type: Input,
args: [{ transform: booleanAttribute }]
}] } });
class MtxSelectIntl {
constructor() {
this._defaultOptions = inject(MTX_SELECT_DEFAULT_OPTIONS, {
optional: true,
});
/**
* Stream to emit from when labels are changed. Use this to notify components when the labels have
* changed after initialization.
*/
this.changes = new Subject();
this.placeholder = this._defaultOptions?.placeholder;
this.notFoundText = this._defaultOptions?.notFoundText ?? 'No items found';
this.typeToSearchText = this._defaultOptions?.typeToSearchText ?? 'Type to search';
this.addTagText = this._defaultOptions?.addTagText ?? 'Add item';
this.loadingText = this._defaultOptions?.loadingText ?? 'Loading...';
this.clearAllText = this._defaultOptions?.clearAllText ?? 'Clear all';
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxSelectIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
/** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxSelectIntl, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxSelectIntl, decorators: [{
type: Injectable,
args: [{ providedIn: 'root' }]
}] });
class MtxSelectOptionTemplate {
constructor() {
this.template = inject(TemplateRef);
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxSelectOptionTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.5", type: MtxSelectOptionTemplate, isStandalone: true, selector: "[ng-option-tmp]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxSelectOptionTemplate, decorators: [{
type: Directive,
args: [{ selector: '[ng-option-tmp]' }]
}] });
class MtxSelectOptgroupTemplate {
constructor() {
this.template = inject(TemplateRef);
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxSelectOptgroupTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.5", type: MtxSelectOptgroupTemplate, isStandalone: true, selector: "[ng-optgroup-tmp]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxSelectOptgroupTemplate, decorators: [{
type: Directive,
args: [{ selector: '[ng-optgroup-tmp]' }]
}] });
class MtxSelectLabelTemplate {
constructor() {
this.template = inject(TemplateRef);
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxSelectLabelTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.5", type: MtxSelectLabelTemplate, isStandalone: true, selector: "[ng-label-tmp]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxSelectLabelTemplate, decorators: [{
type: Directive,
args: [{ selector: '[ng-label-tmp]' }]
}] });
class MtxSelectMultiLabelTemplate {
constructor() {
this.template = inject(TemplateRef);
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxSelectMultiLabelTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.5", type: MtxSelectMultiLabelTemplate, isStandalone: true, selector: "[ng-multi-label-tmp]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxSelectMultiLabelTemplate, decorators: [{
type: Directive,
args: [{ selector: '[ng-multi-label-tmp]' }]
}] });
class MtxSelectHeaderTemplate {
constructor() {
this.template = inject(TemplateRef);
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxSelectHeaderTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.5", type: MtxSelectHeaderTemplate, isStandalone: true, selector: "[ng-header-tmp]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxSelectHeaderTemplate, decorators: [{
type: Directive,
args: [{ selector: '[ng-header-tmp]' }]
}] });
class MtxSelectFooterTemplate {
constructor() {
this.template = inject(TemplateRef);
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxSelectFooterTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.5", type: MtxSelectFooterTemplate, isStandalone: true, selector: "[ng-footer-tmp]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxSelectFooterTemplate, decorators: [{
type: Directive,
args: [{ selector: '[ng-footer-tmp]' }]
}] });
class MtxSelectNotFoundTemplate {
constructor() {
this.template = inject(TemplateRef);
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxSelectNotFoundTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.5", type: MtxSelectNotFoundTemplate, isStandalone: true, selector: "[ng-notfound-tmp]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxSelectNotFoundTemplate, decorators: [{
type: Directive,
args: [{ selector: '[ng-notfound-tmp]' }]
}] });
class MtxSelectTypeToSearchTemplate {
constructor() {
this.template = inject(TemplateRef);
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxSelectTypeToSearchTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.5", type: MtxSelectTypeToSearchTemplate, isStandalone: true, selector: "[ng-typetosearch-tmp]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxSelectTypeToSearchTemplate, decorators: [{
type: Directive,
args: [{ selector: '[ng-typetosearch-tmp]' }]
}] });
class MtxSelectLoadingTextTemplate {
constructor() {
this.template = inject(TemplateRef);
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxSelectLoadingTextTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.5", type: MtxSelectLoadingTextTemplate, isStandalone: true, selector: "[ng-loadingtext-tmp]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxSelectLoadingTextTemplate, decorators: [{
type: Directive,
args: [{ selector: '[ng-loadingtext-tmp]' }]
}] });
class MtxSelectTagTemplate {
constructor() {
this.template = inject(TemplateRef);
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxSelectTagTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.5", type: MtxSelectTagTemplate, isStandalone: true, selector: "[ng-tag-tmp]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxSelectTagTemplate, decorators: [{
type: Directive,
args: [{ selector: '[ng-tag-tmp]' }]
}] });
class MtxSelectLoadingSpinnerTemplate {
constructor() {
this.template = inject(TemplateRef);
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxSelectLoadingSpinnerTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.5", type: MtxSelectLoadingSpinnerTemplate, isStandalone: true, selector: "[ng-loadingspinner-tmp]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxSelectLoadingSpinnerTemplate, decorators: [{
type: Directive,
args: [{ selector: '[ng-loadingspinner-tmp]' }]
}] });
class MtxSelectPlaceholderTemplate {
constructor() {
this.template = inject(TemplateRef);
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxSelectPlaceholderTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.5", type: MtxSelectPlaceholderTemplate, isStandalone: true, selector: "[ng-placeholder-tmp]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxSelectPlaceholderTemplate, decorators: [{
type: Directive,
args: [{ selector: '[ng-placeholder-tmp]' }]
}] });
class MtxSelectClearbuttonTemplate {
constructor() {
this.template = inject(TemplateRef);
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxSelectClearbuttonTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.5", type: MtxSelectClearbuttonTemplate, isStandalone: true, selector: "[ng-clearbutton-tmp]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxSelectClearbuttonTemplate, decorators: [{
type: Directive,
args: [{ selector: '[ng-clearbutton-tmp]' }]
}] });
/** Injection token that can be used to specify default select options. */
const MTX_SELECT_DEFAULT_OPTIONS = new InjectionToken('mtx-select-default-options');
let nextUniqueId = 0;
class MtxSelect {
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) {
const hasAssigned = this._assignValue(newValue);
if (hasAssigned) {
this._onChange(newValue);
}
}
/** 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 select is focused. */
get focused() {
return this._focused;
}
/** Whether the select has a value. */
get empty() {
return this.value == null || (Array.isArray(this.value) && this.value.length === 0);
}
/**
* Implemented as part of MatFormFieldControl.
* @docs-private
*/
get shouldLabelFloat() {
return this.focused || !this.empty;
}
/** Whether the component is required. */
get required() {
return this._required ?? this.ngControl?.control?.hasValidator(Validators.required) ?? false;
}
set required(value) {
this._required = value;
this.stateChanges.next();
}
/** Object used to control when error messages are shown. */
get errorStateMatcher() {
return this._errorStateTracker.matcher;
}
set errorStateMatcher(value) {
this._errorStateTracker.matcher = value;
}
/** Whether the select is in an error state. */
get errorState() {
return this._errorStateTracker.errorState;
}
set errorState(value) {
this._errorStateTracker.errorState = value;
}
constructor() {
this._intl = inject(MtxSelectIntl);
this._changeDetectorRef = inject(ChangeDetectorRef);
this._elementRef = inject(ElementRef);
this._focusMonitor = inject(FocusMonitor);
this.ngControl = inject(NgControl, { optional: true, self: true });
this._parentFormField = inject(MAT_FORM_FIELD, { optional: true });
this._defaultOptions = inject(MTX_SELECT_DEFAULT_OPTIONS, {
optional: true,
});
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.addTag = false;
this.appearance = 'underline';
this.appendTo = this._defaultOptions?.appendTo ?? 'body';
this.bindLabel = this._defaultOptions?.bindLabel;
this.bindValue = this._defaultOptions?.bindValue;
this.closeOnSelect = true;
this.clearable = true;
this.clearOnBackspace = true;
this.panelPosition = 'auto';
this.bufferAmount = 4;
this.selectableGroup = false;
this.selectableGroupAsModel = true;
this.hideSelected = false;
this.loading = false;
this.markFirst = true;
this.multiple = false;
this.searchable = true;
this.readonly = false;
this.searchFn = null;
this.searchWhileComposing = true;
this.selectOnTab = false;
this.trackByFn = null;
this.openOnEnter = this._defaultOptions?.openOnEnter;
this.minTermLength = 0;
this.editableSearchTerm = false;
this.keyDownFn = (_) => true;
this.virtualScroll = this._defaultOptions?.virtualScroll;
this.panelDisabled = false;
this.fixedPlaceholder = this._defaultOptions?.fixedPlaceholder ?? false;
this.preventToggleOnRightClick = false;
this.clearSearchOnAdd = this._defaultOptions?.clearSearchOnAdd;
this.deselectOnClick = this._defaultOptions?.deselectOnClick;
this.inputAttrs = {};
this._items = [];
this._itemsAreUsed = false;
/** Emits whenever the component is destroyed. */
this._destroy$ = new Subject();
this._value = null;
/** Implemented as part of MatFormFieldControl. */
this.stateChanges = new Subject();
/** Unique id for this select. */
this._uid = `mtx-select-${nextUniqueId++}`;
this._focused = false;
/** Whether the select is disabled. */
this.disabled = false;
/** `aria-label` of the ng-select input. */
this.ariaLabel = null;
/** `aria-labelledby` of the ng-select input. */
this.ariaLabelledby = null;
/** `aria-describedby` of the ng-select input. */
this.ariaDescribedby = null;
/** The aria-describedby attribute on the ng-select input for improved a11y. */
this._ariaDescribedby = null;
/** 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 = () => { };
/** ID for the DOM node containing the select's value. */
this._valueId = `mtx-select-value-${nextUniqueId++}`;
this._intlChangesSubscription = Subscription.EMPTY;
const _focusMonitor = this._focusMonitor;
const defaultErrorStateMatcher = inject(ErrorStateMatcher);
const parentForm = inject(NgForm, { optional: true });
const parentFormGroup = inject(FormGroupDirective, { optional: true });
const ngControl = this.ngControl;
this._intlChangesSubscription = this._intl.changes.subscribe(() => {
this._changeDetectorRef.detectChanges();
});
_focusMonitor.monitor(this._elementRef, true).subscribe(origin => {
if (this._focused && !origin) {
this._onTouched();
}
this._focused = !!origin;
this.stateChanges.next();
});
if (this.ngControl) {
// Note: we provide the value accessor through here, instead of
// the `providers` to avoid running into a circular import.
this.ngControl.valueAccessor = this;
}
this._errorStateTracker = new _ErrorStateTracker(defaultErrorStateMatcher, ngControl, parentFormGroup, parentForm, this.stateChanges);
// Force setter to be called in case id was not specified.
// eslint-disable-next-line no-self-assign
this.id = this.id;
}
ngAfterViewInit() {
if (!this._itemsAreUsed) {
this.ngSelect.escapeHTML = false;
this._setItemsFromMtxOptions();
}
}
ngDoCheck() {
if (this.ngControl) {
const ngControl = this.ngControl;
// The disabled state might go out of sync if the form group is swapped out. See #17860.
if (this._previousControl !== ngControl.control) {
if (this._previousControl !== undefined &&
ngControl.disabled !== null &&
ngControl.disabled !== this.disabled) {
this.disabled = ngControl.disabled;
}
this._previousControl = ngControl.control;
}
this.updateErrorState();
}
}
ngOnDestroy() {
this._destroy$.next();
this._destroy$.complete();
this.stateChanges.complete();
this._focusMonitor.stopMonitoring(this._elementRef);
this._intlChangesSubscription.unsubscribe();
}
/** Gets the value for the `aria-labelledby` attribute of the inputs. */
_getAriaLabelledby() {
if (this.ariaLabel) {
return null;
}
let value = this._parentFormField?.getLabelId() || '';
if (this.ariaLabelledby) {
value += ' ' + this.ariaLabelledby;
}
if (!value) {
value = this._valueId;
}
return value;
}
/** Implemented as part of MatFormFieldControl. */
setDescribedByIds(ids) {
this._ariaDescribedby = this.ariaDescribedby || (ids.length ? ids.join(' ') : null);
}
/**
* 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;
this._changeDetectorRef.markForCheck();
this.stateChanges.next();
}
/** Implemented as part of MatFormFieldControl. */
onContainerClick(event) {
const target = event.target;
if (!target.classList.contains('ng-arrow-wrapper')) {
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._assignValue(value);
}
/**
* 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;
}
/** Refreshes the error state of the select. */
updateErrorState() {
this._errorStateTracker.updateErrorState();
}
/** Assigns a specific value to the select. Returns whether the value has changed. */
_assignValue(newValue) {
// Always re-assign an array, because it might have been mutated.
if (newValue !== this._value || (this.multiple && Array.isArray(newValue))) {
this._value = newValue;
this._changeDetectorRef.markForCheck();
return true;
}
return false;
}
/** NgSelect's `_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 */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxSelect, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: MtxSelect, isStandalone: true, selector: "mtx-select", inputs: { addTag: "addTag", addTagText: "addTagText", appearance: "appearance", appendTo: "appendTo", bindLabel: "bindLabel", bindValue: "bindValue", closeOnSelect: ["closeOnSelect", "closeOnSelect", booleanAttribute], clearable: ["clearable", "clearable", booleanAttribute], clearAllText: "clearAllText", clearOnBackspace: ["clearOnBackspace", "clearOnBackspace", booleanAttribute], compareWith: "compareWith", panelPosition: "panelPosition", groupBy: "groupBy", groupValue: "groupValue", bufferAmount: "bufferAmount", selectableGroup: ["selectableGroup", "selectableGroup", booleanAttribute], selectableGroupAsModel: ["selectableGroupAsModel", "selectableGroupAsModel", booleanAttribute], hideSelected: ["hideSelected", "hideSelected", booleanAttribute], loading: ["loading", "loading", booleanAttribute], loadingText: "loadingText", markFirst: ["markFirst", "markFirst", booleanAttribute], maxSelectedItems: "maxSelectedItems", multiple: ["multiple", "multiple", booleanAttribute], notFoundText: "notFoundText", searchable: ["searchable", "searchable", booleanAttribute], readonly: ["readonly", "readonly", booleanAttribute], searchFn: "searchFn", searchWhileComposing: ["searchWhileComposing", "searchWhileComposing", booleanAttribute], selectOnTab: ["selectOnTab", "selectOnTab", booleanAttribute], trackByFn: "trackByFn", tabIndex: "tabIndex", openOnEnter: ["openOnEnter", "openOnEnter", booleanAttribute], minTermLength: "minTermLength", editableSearchTerm: ["editableSearchTerm", "editableSearchTerm", booleanAttribute], keyDownFn: "keyDownFn", virtualScroll: ["virtualScroll", "virtualScroll", booleanAttribute], typeToSearchText: "typeToSearchText", typeahead: "typeahead", panelDisabled: ["panelDisabled", "panelDisabled", booleanAttribute], fixedPlaceholder: ["fixedPlaceholder", "fixedPlaceholder", booleanAttribute], preventToggleOnRightClick: ["preventToggleOnRightClick", "preventToggleOnRightClick", booleanAttribute], clearSearchOnAdd: ["clearSearchOnAdd", "clearSearchOnAdd", booleanAttribute], deselectOnClick: ["deselectOnClick", "deselectOnClick", booleanAttribute], inputId: "inputId", inputAttrs: "inputAttrs", panelClass: "panelClass", items: "items", value: "value", id: "id", placeholder: "placeholder", disabled: ["disabled", "disabled", booleanAttribute], required: ["required", "required", booleanAttribute], errorStateMatcher: "errorStateMatcher", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], ariaDescribedby: ["aria-describedby", "ariaDescribedby"] }, 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-required": "required.toString()", "attr.aria-disabled": "disabled.toString()", "attr.aria-invalid": "errorState", "class.mtx-select-floating": "shouldLabelFloat", "class.mtx-select-disabled": "disabled", "class.mtx-select-invalid": "errorState", "class.mtx-select-required": "required", "class.mtx-select-empty": "empty", "class.mtx-select-multiple": "multiple" }, classAttribute: "mtx-select" }, providers: [{ provide: MatFormFieldControl, useExisting: MtxSelect }], queries: [{ propertyName: "optionTemplate", first: true, predicate: MtxSelectOptionTemplate, descendants: true, read: TemplateRef }, { propertyName: "optgroupTemplate", first: true, predicate: MtxSelectOptgroupTemplate, descendants: true, read: TemplateRef }, { propertyName: "labelTemplate", first: true, predicate: MtxSelectLabelTemplate, descendants: true, read: TemplateRef }, { propertyName: "multiLabelTemplate", first: true, predicate: MtxSelectMultiLabelTemplate, descendants: true, read: TemplateRef }, { propertyName: "headerTemplate", first: true, predicate: MtxSelectHeaderTemplate, descendants: true, read: TemplateRef }, { propertyName: "footerTemplate", first: true, predicate: MtxSelectFooterTemplate, descendants: true, read: TemplateRef }, { propertyName: "notFoundTemplate", first: true, predicate: MtxSelectNotFoundTemplate, descendants: true, read: TemplateRef }, { propertyName: "typeToSearchTemplate", first: true, predicate: MtxSelectTypeToSearchTemplate, descendants: true, read: TemplateRef }, { propertyName: "loadingTextTemplate", first: true, predicate: MtxSelectLoadingTextTemplate, descendants: true, read: TemplateRef }, { propertyName: "tagTemplate", first: true, predicate: MtxSelectTagTemplate, descendants: true, read: TemplateRef }, { propertyName: "loadingSpinnerTemplate", first: true, predicate: MtxSelectLoadingSpinnerTemplate, descendants: true, read: TemplateRef }, { propertyName: "placeholderTemplate", first: true, predicate: MtxSelectPlaceholderTemplate, descendants: true, read: TemplateRef }, { propertyName: "clearbuttonTemplate", first: true, predicate: MtxSelectClearbuttonTemplate, descendants: true, read: TemplateRef }, { propertyName: "mtxOptions", predicate: MtxOption, descendants: true }], viewQueries: [{ propertyName: "ngSelect", first: true, predicate: ["ngSelect"], descendants: true, static: true }], exportAs: ["mtxSelect"], ngImport: i0, template: "<ng-select\n #ngSelect\n [class.ng-select-invalid]=\"errorState\"\n [panelClass]=\"panelClass\"\n [(ngModel)]=\"value\"\n [placeholder]=\"placeholder || _intl.placeholder\"\n [items]=\"items\"\n [addTag]=\"addTag\"\n [addTagText]=\"addTagText || _intl.addTagText\"\n [appendTo]=\"appendTo\"\n [appearance]=\"appearance\"\n [bindLabel]=\"bindLabel\"\n [bindValue]=\"bindValue\"\n [closeOnSelect]=\"closeOnSelect\"\n [clearAllText]=\"clearAllText || _intl.clearAllText\"\n [clearable]=\"clearable\"\n [clearOnBackspace]=\"clearOnBackspace\"\n [panelPosition]=\"panelPosition\"\n [groupBy]=\"groupBy\"\n [groupValue]=\"groupValue\"\n [bufferAmount]=\"bufferAmount\"\n [hideSelected]=\"hideSelected\"\n [panelDisabled]=\"panelDisabled\"\n [compareWith]=\"compareWith\"\n [loading]=\"loading\"\n [loadingText]=\"loadingText || _intl.loadingText\"\n [markFirst]=\"markFirst\"\n [maxSelectedItems]=\"maxSelectedItems\"\n [multiple]=\"multiple\"\n [notFoundText]=\"notFoundText || _intl.notFoundText\"\n [readonly]=\"readonly || disabled\"\n [typeahead]=\"typeahead\"\n [typeToSearchText]=\"typeToSearchText || _intl.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 [fixedPlaceholder]=\"fixedPlaceholder\"\n [deselectOnClick]=\"deselectOnClick\"\n [preventToggleOnRightClick]=\"preventToggleOnRightClick\"\n (blur)=\"blurEvent.emit($event)\"\n (focus)=\"focusEvent.emit($event)\"\n (change)=\"changeEvent.emit($event)\"\n (open)=\"openEvent.emit()\"\n (close)=\"closeEvent.emit()\"\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()\"\n [inputId]=\"inputId\"\n [ariaLabel]=\"ariaLabel\"\n [ariaLabelledby]=\"_getAriaLabelledby()\"\n [ariaDescribedby]=\"_ariaDescribedby\"\n [inputAttrs]=\"inputAttrs\"\n>\n @if (optionTemplate) {\n <ng-template\n ng-option-tmp\n let-item=\"item\"\n let-item$=\"item$\"\n let-index=\"index\"\n let-searchTerm=\"searchTerm\"\n >\n <ng-template\n [ngTemplateOutlet]=\"optionTemplate\"\n [ngTemplateOutletContext]=\"{\n item: item,\n item$: item$,\n index: index,\n searchTerm: searchTerm,\n }\"\n ></ng-template>\n </ng-template>\n }\n\n @if (optgroupTemplate) {\n <ng-template\n ng-optgroup-tmp\n let-item=\"item\"\n let-item$=\"item$\"\n let-index=\"index\"\n let-searchTerm=\"searchTerm\"\n >\n <ng-template\n [ngTemplateOutlet]=\"optgroupTemplate\"\n [ngTemplateOutletContext]=\"{\n item: item,\n item$: item$,\n index: index,\n searchTerm: searchTerm,\n }\"\n ></ng-template>\n </ng-template>\n }\n\n @if (labelTemplate) {\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\" let-label=\"label\">\n <ng-template\n [ngTemplateOutlet]=\"labelTemplate\"\n [ngTemplateOutletContext]=\"{ item: item, clear: clear, label: label }\"\n ></ng-template>\n </ng-template>\n }\n\n @if (multiLabelTemplate) {\n <ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n <ng-template\n [ngTemplateOutlet]=\"multiLabelTemplate\"\n [ngTemplateOutletContext]=\"{ items: items, clear: clear }\"\n ></ng-template>\n </ng-template>\n }\n\n @if (headerTemplate) {\n <ng-template ng-header-tmp>\n <ng-template [ngTemplateOutlet]=\"headerTemplate\"></ng-template>\n </ng-template>\n }\n\n @if (footerTemplate) {\n <ng-template ng-footer-tmp>\n <ng-template [ngTemplateOutlet]=\"footerTemplate\"></ng-template>\n </ng-template>\n }\n\n @if (notFoundTemplate) {\n <ng-template ng-notfound-tmp let-searchTerm=\"searchTerm\">\n <ng-template\n [ngTemplateOutlet]=\"notFoundTemplate\"\n [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\"\n ></ng-template>\n </ng-template>\n }\n\n @if (typeToSearchTemplate) {\n <ng-template ng-typetosearch-tmp>\n <ng-template [ngTemplateOutlet]=\"typeToSearchTemplate\"></ng-template>\n </ng-template>\n }\n\n @if (loadingTextTemplate) {\n <ng-template ng-loadingtext-tmp let-searchTerm=\"searchTerm\">\n <ng-template\n [ngTemplateOutlet]=\"loadingTextTemplate\"\n [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\"\n ></ng-template>\n </ng-template>\n }\n\n @if (tagTemplate) {\n <ng-template ng-tag-tmp let-searchTerm=\"searchTerm\">\n <ng-template\n [ngTemplateOutlet]=\"tagTemplate\"\n [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\"\n ></ng-template>\n </ng-template>\n }\n\n @if (loadingSpinnerTemplate) {\n <ng-template ng-loadingspinner-tmp>\n <ng-template [ngTemplateOutlet]=\"loadingSpinnerTemplate\"></ng-template>\n </ng-template>\n }\n\n @if (placeholderTemplate) {\n <ng-template ng-placeholder-tmp>\n <ng-template [ngTemplateOutlet]=\"placeholderTemplate\"></ng-template>\n </ng-template>\n }\n\n @if (clearbuttonTemplate) {\n <ng-template ng-clearbutton-tmp>\n <ng-template [ngTemplateOutlet]=\"clearbuttonTemplate\"></ng-template>\n </ng-template>\n }\n</ng-select>\n", styles: [".mat-mdc-form-field .ng-select{padding:var(--mat-form-field-filled-with-label-container-padding-top, 24px) 16px var(--mat-form-field-filled-with-label-container-padding-bottom, 8px);margin:calc(var(--mat-form-field-filled-with-label-container-padding-top, 24px) * -1) -16px calc(var(--mat-form-field-filled-with-label-container-padding-bottom, 8px) * -1)}.mdc-text-field--outlined .ng-select,.mdc-text-field--no-label .ng-select{padding-top:var(--mat-form-field-container-vertical-padding, 16px);padding-bottom:var(--mat-form-field-container-vertical-padding, 16px);margin-top:calc(var(--mat-form-field-container-vertical-padding, 16px) * -1);margin-bottom:calc(var(--mat-form-field-container-vertical-padding, 16px) * -1)}.ng-select .ng-select-container{align-items:center;color:var(--mtx-select-container-text-color, var(--mat-sys-on-surface))}.ng-select .ng-value-container{align-items:center;gap:4px}.ng-select .ng-input>input{height:var(--mat-form-field-container-text-line-height, var(--mat-sys-body-large-line-height));color:inherit;font:inherit}.ng-select .ng-clear-wrapper{display:inline-flex;justify-content:center;align-items:center;width:24px;height:var(--mat-form-field-container-text-line-height, var(--mat-sys-body-large-line-height));color:var(--mtx-select-clear-icon-color, var(--mat-sys-on-surface))}.ng-select .ng-clear-wrapper:hover .ng-clear{color:var(--mtx-select-clear-icon-hover-color, var(--mat-sys-error))}.ng-select .ng-placeholder{transition:opacity .2s;opacity:1;color:var(--mtx-select-placeholder-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.mat-form-field-hide-placeholder .ng-select .ng-placeholder{opacity:0}.ng-select.ng-select-disabled .ng-value{color:var(--mtx-select-disabled-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.ng-select.ng-select-single.ng-select-filtered .ng-placeholder{display:initial;visibility:hidden}.ng-select.ng-select-multiple .ng-value{box-sizing:border-box;display:inline-flex;align-items:center;height:var(--mat-form-field-container-text-line-height, var(--mat-sys-body-large-line-height));padding:0 calc((var(--mat-form-field-container-text-line-height, var(--mat-sys-body-large-line-height)) - 16px) / 2);border-radius:9999px;font-size:.875em;background-color:var(--mtx-select-multiple-value-background-color, transparent);border:1px solid var(--mtx-select-multiple-value-outline-color, var(--mat-sys-outline))}.ng-select.ng-select-multiple .ng-value.ng-value-disabled{opacity:.4}.ng-select.ng-select-multiple .ng-value-label{display:inline-block;margin:0 4px;line-height:16px}.ng-select.ng-select-multiple .ng-value-remove{width:16px;height:16px;line-height:16px;border-radius:50%;text-align:center}.ng-select.ng-select-multiple .ng-value-remove:hover{background-color:var(--mtx-select-multiple-value-icon-hover-background-color, var(--mat-sys-outline-variant))}.ng-select.ng-select-multiple.ng-select-disabled .ng-value{border-color:var(--mtx-select-multiple-value-disabled-outline-color, color-mix(in srgb, var(--mat-sys-outline) 38%, transparent))}.ng-select .ng-arrow{border-width:5px 5px 2px;border-style:solid;border-color:var(--mtx-select-enabled-arrow-color, var(--mat-sys-on-surface)) transparent transparent}.ng-select.ng-select-disabled .ng-arrow{border-color:var(--mtx-select-disabled-arrow-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent)) transparent transparent}.ng-select.ng-select-invalid .ng-arrow{border-color:var(--mtx-select-invalid-arrow-color, var(--mat-sys-error)) transparent transparent}.ng-select.ng-select-opened .ng-arrow{top:-2px;border-width:0 5px 5px;border-color:transparent transparent var(--mtx-select-enabled-arrow-color, var(--mat-sys-on-surface))}.ng-select.ng-select-opened.ng-select-invalid .ng-arrow{border-color:transparent transparent var(--mtx-select-invalid-arrow-color, var(--mat-sys-error))}.ng-dropdown-panel{background-color:var(--mtx-select-panel-background-color, var(--mat-sys-surface-container))}.ng-dropdown-panel.ng-select-bottom{top:100%;border-bottom-left-radius:var(--mtx-select-container-shape, var(--mat-sys-corner-extra-small));border-bottom-right-radius:var(--mtx-select-container-shape, var(--mat-sys-corner-extra-small));box-shadow:var(--mtx-select-container-elevation-shadow, 0px 3px 1px -2px rgba(0, 0, 0, .2), 0px 2px 2px 0px rgba(0, 0, 0, .14), 0px 1px 5px 0px rgba(0, 0, 0, .12))}.ng-dropdown-panel.ng-select-top{bottom:100%;border-top-left-radius:var(--mtx-select-container-shape, var(--mat-sys-corner-extra-small));border-top-right-radius:var(--mtx-select-container-shape, var(--mat-sys-corner-extra-small));box-shadow:var(--mtx-select-container-elevation-shadow, 0px 3px 1px -2px rgba(0, 0, 0, .2), 0px 2px 2px 0px rgba(0, 0, 0, .14), 0px 1px 5px 0px rgba(0, 0, 0, .12))}.ng-dropdown-panel .ng-dropdown-header,.ng-dropdown-panel .ng-dropdown-footer{padding:14px 16px}.ng-dropdown-panel .ng-dropdown-header{border-bottom:1px solid var(--mtx-select-panel-divider-color, var(--mat-sys-outline))}.ng-dropdown-panel .ng-dropdown-footer{border-top:1px solid var(--mtx-select-panel-divider-color, var(--mat-sys-outline))}.ng-dropdown-panel .ng-optgroup{padding:14px 16px;font-weight:500;-webkit-user-select:none;user-select:none;cursor:pointer;color:var(--mtx-select-optgroup-label-text-color, var(--mat-sys-on-surface))}.ng-dropdown-panel .ng-optgroup.ng-option-disabled{cursor:default}.ng-dropdown-panel .ng-optgroup.ng-option-marked{background-color:var(--mtx-select-option-hover-state-background-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), transparent))}.ng-dropdown-panel .ng-optgroup.ng-option-selected{background-color:var(--mtx-select-option-selected-state-background-color, var(--mat-sys-secondary-container));color:var(--mtx-select-option-selected-state-text-color, var(--mat-sys-on-surface))}.ng-dropdown-panel .ng-option{position:relative;padding:14px 16px;color:var(--mtx-select-option-label-text-color, var(--mat-sys-on-surface))}.ng-dropdown-panel .ng-option.ng-option-marked{background-color:var(--mtx-select-option-hover-state-background-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), transparent))}.ng-dropdown-panel .ng-option.ng-option-selected{background-color:var(--mtx-select-option-selected-state-background-color, var(--mat-sys-secondary-container));color:var(--mtx-select-option-selected-state-text-color, var(--mat-sys-on-surface))}.ng-dropdown-panel .ng-option.ng-option-disabled{color:var(--mtx-select-option-disabled-state-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.ng-dropdown-panel .ng-option.ng-option-child{padding-inline-start:32px}.ng-dropdown-panel .ng-tag-label{display:inline-block;margin-inline-end:6px;font-size:80%}\n"], dependencies: [{ kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i1.NgSelect, selector: "ng-select", inputs: ["bindLabel", "bindValue", "placeholder", "fixedPlaceholder", "appendTo", "panelPosition", "panelDisabled", "readonly", "multiple", "searchable", "clearable", "clearOnBackspace", "clearAllText", "loading", "loadingText", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "virtualScroll", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "searchWhileComposing", "editableSearchTerm", "maxSelectedItems", "minTermLength", "markFirst", "preventToggleOnRightClick", "addTag", "addTagText", "notFoundText", "typeahead", "typeToSearchText", "groupBy", "groupValue", "searchFn", "keyDownFn", "trackByFn", "appearance", "tabIndex", "ariaLabel", "ariaLabelledby", "ariaDescribedby", "inputAttrs", "panelClass", "inputId", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i1.NgOptgroupTemplate, selector: "[ng-optgroup-tmp]" }, { kind: "directive", type: i1.NgOptionTemplate, selector: "[ng-option-tmp]" }, { kind: "directive", type: i1.NgLabelTemplate, selector: "[ng-label-tmp]" }, { kind: "directive", type: i1.NgMultiLabelTemplate, selector: "[ng-multi-label-tmp]" }, { kind: "directive", type: i1.NgHeaderTemplate, selector: "[ng-header-tmp]" }, { kind: "directive", type: i1.NgFooterTemplate, selector: "[ng-footer-tmp]" }, { kind: "directive", type: i1.NgPlaceholderTemplate, selector: "[ng-placeholder-tmp]" }, { kind: "directive", type: i1.NgNotFoundTemplate, selector: "[ng-notfound-tmp]" }, { kind: "directive", type: i1.NgTypeToSearchTemplate, selector: "[ng-typetosearch-tmp]" }, { kind: "directive", type: i1.NgLoadingTextTemplate, selector: "[ng-loadingtext-tmp]" }, { kind: "directive", type: i1.NgTagTemplate, selector: "[ng-tag-tmp]" }, { kind: "directive", type: i1.NgLoadingSpinnerTemplate, selector: "[ng-loadingspinner-tmp]" }, { kind: "directive", type: i1.NgClearButtonTemplate, selector: "[ng-clearbutton-tmp]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxSelect, decorators: [{
type: Component,
args: [{ selector: 'mtx-select', exportAs: 'mtxSelect', host: {
'[attr.id]': 'id',
'[attr.aria-required]': 'required.toString()',
'[attr.aria-disabled]': 'disabled.toString()',
'[attr.aria-invalid]': 'errorState',
'class': 'mtx-select',
'[class.mtx-select-floating]': 'shouldLabelFloat',
'[class.mtx-select-disabled]': 'disabled',
'[class.mtx-select-invalid]': 'errorState',
'[class.mtx-select-required]': 'required',
'[class.mtx-select-empty]': 'empty',
'[class.mtx-select-multiple]': 'multiple',
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: MatFormFieldControl, useExisting: MtxSelect }], imports: [NgSelectModule, FormsModule, NgTemplateOutlet], template: "<ng-select\n #ngSelect\n [class.ng-select-invalid]=\"errorState\"\n [panelClass]=\"panelClass\"\n [(ngModel)]=\"value\"\n [placeholder]=\"placeholder || _intl.placeholder\"\n [items]=\"items\"\n [addTag]=\"addTag\"\n [addTagText]=\"addTagText || _intl.addTagText\"\n [appendTo]=\"appendTo\"\n [appearance]=\"appearance\"\n [bindLabel]=\"bindLabel\"\n [bindValue]=\"bindValue\"\n [closeOnSelect]=\"closeOnSelect\"\n [clearAllText]=\"clearAllText || _intl.clearAllText\"\n [clearable]=\"clearable\"\n [clearOnBackspace]=\"clearOnBackspace\"\n [panelPosition]=\"panelPosition\"\n [groupBy]=\"groupBy\"\n [groupValue]=\"groupValue\"\n [bufferAmount]=\"bufferAmount\"\n [hideSelected]=\"hideSelected\"\n [panelDisabled]=\"panelDisabled\"\n [compareWith]=\"compareWith\"\n [loading]=\"loading\"\n [loadingText]=\"loadingTex