@ng-matero/extensions 21.3.1 → 22.0.0

package/fesm2022/mtxSelect.mjs

@@ -21,7 +21,7 @@ class MtxOption {
         return (this.elementRef.nativeElement.textContent || '').trim();
     }
     ngOnChanges(changes) {
-        if (changes.disabled) {
+        if (changes['disabled']) {
             this.stateChange$.next({
                 value: this.value,
                 disabled: this.disabled,
@@ -41,12 +41,12 @@ class MtxOption {
     ngOnDestroy() {
         this.stateChange$.complete();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: MtxOption, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.11", type: MtxOption, isStandalone: true, selector: "mtx-option", inputs: { value: "value", disabled: ["disabled", "disabled", booleanAttribute] }, exportAs: ["mtxOption"], usesOnChanges: true, ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: MtxOption, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "22.0.3", 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.11", ngImport: i0, type: MtxOption, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: MtxOption, decorators: [{
             type: Component,
             args: [{
                     selector: 'mtx-option',
@@ -80,10 +80,10 @@ class MtxSelectIntl {
         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.11", ngImport: i0, type: MtxSelectIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: MtxSelectIntl, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: MtxSelectIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: MtxSelectIntl, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: MtxSelectIntl, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: MtxSelectIntl, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -92,144 +92,144 @@ class MtxSelectOptionTemplate {
     constructor() {
         this.template = inject(TemplateRef);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: MtxSelectOptionTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.11", type: MtxSelectOptionTemplate, isStandalone: true, selector: "[ng-option-tmp]", ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: MtxSelectOptionTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.3", type: MtxSelectOptionTemplate, isStandalone: true, selector: "[ngSelectOption]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: MtxSelectOptionTemplate, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: MtxSelectOptionTemplate, decorators: [{
             type: Directive,
-            args: [{ selector: '[ng-option-tmp]' }]
+            args: [{ selector: '[ngSelectOption]' }]
         }] });
 class MtxSelectOptgroupTemplate {
     constructor() {
         this.template = inject(TemplateRef);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: MtxSelectOptgroupTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.11", type: MtxSelectOptgroupTemplate, isStandalone: true, selector: "[ng-optgroup-tmp]", ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: MtxSelectOptgroupTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.3", type: MtxSelectOptgroupTemplate, isStandalone: true, selector: "[ngSelectOptgroup]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: MtxSelectOptgroupTemplate, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: MtxSelectOptgroupTemplate, decorators: [{
             type: Directive,
-            args: [{ selector: '[ng-optgroup-tmp]' }]
+            args: [{ selector: '[ngSelectOptgroup]' }]
         }] });
 class MtxSelectLabelTemplate {
     constructor() {
         this.template = inject(TemplateRef);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: MtxSelectLabelTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.11", type: MtxSelectLabelTemplate, isStandalone: true, selector: "[ng-label-tmp]", ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: MtxSelectLabelTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.3", type: MtxSelectLabelTemplate, isStandalone: true, selector: "[ngSelectLabel]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: MtxSelectLabelTemplate, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: MtxSelectLabelTemplate, decorators: [{
             type: Directive,
-            args: [{ selector: '[ng-label-tmp]' }]
+            args: [{ selector: '[ngSelectLabel]' }]
         }] });
 class MtxSelectMultiLabelTemplate {
     constructor() {
         this.template = inject(TemplateRef);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: MtxSelectMultiLabelTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.11", type: MtxSelectMultiLabelTemplate, isStandalone: true, selector: "[ng-multi-label-tmp]", ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: MtxSelectMultiLabelTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.3", type: MtxSelectMultiLabelTemplate, isStandalone: true, selector: "[ngSelectMultiLabel]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: MtxSelectMultiLabelTemplate, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: MtxSelectMultiLabelTemplate, decorators: [{
             type: Directive,
-            args: [{ selector: '[ng-multi-label-tmp]' }]
+            args: [{ selector: '[ngSelectMultiLabel]' }]
         }] });
-class MtxSelectHeaderTemplate {
+class MtxSelectPanelHeaderTemplate {
     constructor() {
         this.template = inject(TemplateRef);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: MtxSelectHeaderTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.11", type: MtxSelectHeaderTemplate, isStandalone: true, selector: "[ng-header-tmp]", ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: MtxSelectPanelHeaderTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.3", type: MtxSelectPanelHeaderTemplate, isStandalone: true, selector: "[ngSelectPanelHeader]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: MtxSelectHeaderTemplate, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: MtxSelectPanelHeaderTemplate, decorators: [{
             type: Directive,
-            args: [{ selector: '[ng-header-tmp]' }]
+            args: [{ selector: '[ngSelectPanelHeader]' }]
         }] });
-class MtxSelectFooterTemplate {
+class MtxSelectPanelFooterTemplate {
     constructor() {
         this.template = inject(TemplateRef);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: MtxSelectFooterTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.11", type: MtxSelectFooterTemplate, isStandalone: true, selector: "[ng-footer-tmp]", ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: MtxSelectPanelFooterTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.3", type: MtxSelectPanelFooterTemplate, isStandalone: true, selector: "[ngSelectPanelFooter]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: MtxSelectFooterTemplate, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: MtxSelectPanelFooterTemplate, decorators: [{
             type: Directive,
-            args: [{ selector: '[ng-footer-tmp]' }]
+            args: [{ selector: '[ngSelectPanelFooter]' }]
         }] });
 class MtxSelectNotFoundTemplate {
     constructor() {
         this.template = inject(TemplateRef);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: MtxSelectNotFoundTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.11", type: MtxSelectNotFoundTemplate, isStandalone: true, selector: "[ng-notfound-tmp]", ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: MtxSelectNotFoundTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.3", type: MtxSelectNotFoundTemplate, isStandalone: true, selector: "[ngSelectNotFound]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: MtxSelectNotFoundTemplate, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: MtxSelectNotFoundTemplate, decorators: [{
             type: Directive,
-            args: [{ selector: '[ng-notfound-tmp]' }]
+            args: [{ selector: '[ngSelectNotFound]' }]
         }] });
 class MtxSelectTypeToSearchTemplate {
     constructor() {
         this.template = inject(TemplateRef);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: MtxSelectTypeToSearchTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.11", type: MtxSelectTypeToSearchTemplate, isStandalone: true, selector: "[ng-typetosearch-tmp]", ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: MtxSelectTypeToSearchTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.3", type: MtxSelectTypeToSearchTemplate, isStandalone: true, selector: "[ngSelectTypeToSearch]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: MtxSelectTypeToSearchTemplate, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: MtxSelectTypeToSearchTemplate, decorators: [{
             type: Directive,
-            args: [{ selector: '[ng-typetosearch-tmp]' }]
+            args: [{ selector: '[ngSelectTypeToSearch]' }]
         }] });
 class MtxSelectLoadingTextTemplate {
     constructor() {
         this.template = inject(TemplateRef);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: MtxSelectLoadingTextTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.11", type: MtxSelectLoadingTextTemplate, isStandalone: true, selector: "[ng-loadingtext-tmp]", ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: MtxSelectLoadingTextTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.3", type: MtxSelectLoadingTextTemplate, isStandalone: true, selector: "[ngSelectLoadingText]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: MtxSelectLoadingTextTemplate, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: MtxSelectLoadingTextTemplate, decorators: [{
             type: Directive,
-            args: [{ selector: '[ng-loadingtext-tmp]' }]
+            args: [{ selector: '[ngSelectLoadingText]' }]
         }] });
 class MtxSelectTagTemplate {
     constructor() {
         this.template = inject(TemplateRef);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: MtxSelectTagTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.11", type: MtxSelectTagTemplate, isStandalone: true, selector: "[ng-tag-tmp]", ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: MtxSelectTagTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.3", type: MtxSelectTagTemplate, isStandalone: true, selector: "[ngSelectTag]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: MtxSelectTagTemplate, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: MtxSelectTagTemplate, decorators: [{
             type: Directive,
-            args: [{ selector: '[ng-tag-tmp]' }]
+            args: [{ selector: '[ngSelectTag]' }]
         }] });
-class MtxSelectLoadingSpinnerTemplate {
+class MtxSelectLoadingTemplate {
     constructor() {
         this.template = inject(TemplateRef);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: MtxSelectLoadingSpinnerTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.11", type: MtxSelectLoadingSpinnerTemplate, isStandalone: true, selector: "[ng-loadingspinner-tmp]", ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: MtxSelectLoadingTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.3", type: MtxSelectLoadingTemplate, isStandalone: true, selector: "[ngSelectLoading]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: MtxSelectLoadingSpinnerTemplate, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: MtxSelectLoadingTemplate, decorators: [{
             type: Directive,
-            args: [{ selector: '[ng-loadingspinner-tmp]' }]
+            args: [{ selector: '[ngSelectLoading]' }]
         }] });
 class MtxSelectPlaceholderTemplate {
     constructor() {
         this.template = inject(TemplateRef);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: MtxSelectPlaceholderTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.11", type: MtxSelectPlaceholderTemplate, isStandalone: true, selector: "[ng-placeholder-tmp]", ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: MtxSelectPlaceholderTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.3", type: MtxSelectPlaceholderTemplate, isStandalone: true, selector: "[ngSelectPlaceholder]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: MtxSelectPlaceholderTemplate, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: MtxSelectPlaceholderTemplate, decorators: [{
             type: Directive,
-            args: [{ selector: '[ng-placeholder-tmp]' }]
+            args: [{ selector: '[ngSelectPlaceholder]' }]
         }] });
 class MtxSelectClearbuttonTemplate {
     constructor() {
         this.template = inject(TemplateRef);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: MtxSelectClearbuttonTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.11", type: MtxSelectClearbuttonTemplate, isStandalone: true, selector: "[ng-clearbutton-tmp]", ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: MtxSelectClearbuttonTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.3", type: MtxSelectClearbuttonTemplate, isStandalone: true, selector: "[ngSelectClearButton]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: MtxSelectClearbuttonTemplate, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: MtxSelectClearbuttonTemplate, decorators: [{
             type: Directive,
-            args: [{ selector: '[ng-clearbutton-tmp]' }]
+            args: [{ selector: '[ngSelectClearButton]' }]
         }] });
 
 /** Injection token that can be used to specify default select options. */
@@ -327,8 +327,9 @@ class MtxSelect {
         this.removeEvent = new EventEmitter();
         this.scroll = new EventEmitter();
         this.scrollToEnd = new EventEmitter();
+        this.usePopover = this._defaultOptions?.usePopover ?? true;
         this.addTag = false;
-        this.appendTo = this._defaultOptions?.appendTo ?? 'body';
+        this.appendTo = this._defaultOptions?.appendTo;
         this.bindLabel = this._defaultOptions?.bindLabel;
         this.bindValue = this._defaultOptions?.bindValue;
         this.closeOnSelect = true;
@@ -473,7 +474,7 @@ class MtxSelect {
     /** Implemented as part of MatFormFieldControl. */
     onContainerClick(event) {
         const target = event.target;
-        if (!target.classList.contains('ng-arrow-wrapper')) {
+        if (!target.closest('.ng-select-arrow')) {
             this.focus();
             this.open();
         }
@@ -563,10 +564,10 @@ class MtxSelect {
     blur() {
         this.ngSelect.blur();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: MtxSelect, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: MtxSelect, isStandalone: true, selector: "mtx-select", inputs: { addTag: "addTag", addTagText: "addTagText", 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", 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], tabIndex: "tabIndex", 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: "ariaLabel", ariaLabelledby: "ariaLabelledby", ariaDescribedby: "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  [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  [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  [tabIndex]=\"tabIndex\"\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", "inputAttrs", "ariaLabel", "ariaLabelledby", "ariaDescribedby", "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 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: MtxSelect, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.3", type: MtxSelect, isStandalone: true, selector: "mtx-select", inputs: { usePopover: ["usePopover", "usePopover", booleanAttribute], addTag: "addTag", addTagText: "addTagText", 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", 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], tabIndex: "tabIndex", 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: "ariaLabel", ariaLabelledby: "ariaLabelledby", ariaDescribedby: "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: "panelHeaderTemplate", first: true, predicate: MtxSelectPanelHeaderTemplate, descendants: true, read: TemplateRef }, { propertyName: "panelFooterTemplate", first: true, predicate: MtxSelectPanelFooterTemplate, 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: "loadingTemplate", first: true, predicate: MtxSelectLoadingTemplate, 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  [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  [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  [tabIndex]=\"tabIndex\"\n  [inputId]=\"inputId\"\n  [ariaLabel]=\"ariaLabel\"\n  [ariaLabelledby]=\"_getAriaLabelledby()\"\n  [ariaDescribedby]=\"_ariaDescribedby\"\n  [inputAttrs]=\"inputAttrs\"\n  [usePopover]=\"usePopover\"\n>\n  @if (optionTemplate) {\n    <ng-template\n      ngSelectOption\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      ngSelectOptgroup\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 ngSelectLabel 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 ngSelectMultiLabel 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 (panelHeaderTemplate) {\n    <ng-template ngSelectPanelHeader>\n      <ng-template [ngTemplateOutlet]=\"panelHeaderTemplate\"></ng-template>\n    </ng-template>\n  }\n\n  @if (panelFooterTemplate) {\n    <ng-template ngSelectPanelFooter>\n      <ng-template [ngTemplateOutlet]=\"panelFooterTemplate\"></ng-template>\n    </ng-template>\n  }\n\n  @if (notFoundTemplate) {\n    <ng-template ngSelectNotFound 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 ngSelectTypeToSearch>\n      <ng-template [ngTemplateOutlet]=\"typeToSearchTemplate\"></ng-template>\n    </ng-template>\n  }\n\n  @if (loadingTextTemplate) {\n    <ng-template ngSelectLoadingText 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 ngSelectTag let-searchTerm=\"searchTerm\">\n      <ng-template\n        [ngTemplateOutlet]=\"tagTemplate\"\n        [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\"\n      ></ng-template>\n    </ng-template>\n  }\n\n  @if (loadingTemplate) {\n    <ng-template ngSelectLoading>\n      <ng-template [ngTemplateOutlet]=\"loadingTemplate\"></ng-template>\n    </ng-template>\n  }\n\n  @if (placeholderTemplate) {\n    <ng-template ngSelectPlaceholder>\n      <ng-template [ngTemplateOutlet]=\"placeholderTemplate\"></ng-template>\n    </ng-template>\n  }\n\n  @if (clearbuttonTemplate) {\n    <ng-template ngSelectClearButton>\n      <ng-template [ngTemplateOutlet]=\"clearbuttonTemplate\"></ng-template>\n    </ng-template>\n  }\n</ng-select>\n", styles: [".ng-select{--ns-indicator-icon-size: 16px}.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-multiple .ng-select-value{box-sizing:border-box;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-multiple .ng-select-value.ng-select-value-disabled{opacity:.4}.ng-select-multiple .ng-select-value-label{display:inline-block;margin:0 4px}.ng-select-multiple .ng-select-value-remove{display:inline-flex;justify-content:center;align-items:center;width:16px;height:16px;border-radius:50%}.ng-select-multiple .ng-select-value-remove:hover{background-color:var(--mtx-select-multiple-value-icon-hover-background-color, var(--mat-sys-outline-variant))}.ng-select-multiple.ng-select-disabled .ng-select-value{border-color:var(--mtx-select-multiple-value-disabled-outline-color, color-mix(in srgb, var(--mat-sys-outline) 38%, transparent))}.ng-select-control{color:var(--mtx-select-container-text-color, var(--mat-sys-on-surface))}.ng-select-value-container{gap:4px}.ng-select-disabled .ng-select-value{color:var(--mtx-select-disabled-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.ng-select-input{height:var(--mat-form-field-container-text-line-height, var(--mat-sys-body-large-line-height));color:inherit;font:inherit}.ng-select-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-placeholder{opacity:0}.ng-select-clear,.ng-select-arrow{display:inline-flex;align-items:center;line-height:1;transition:color .15s}.ng-select-clear{color:var(--mtx-select-clear-icon-color, var(--mat-sys-on-surface))}.ng-select-clear:hover{color:var(--mtx-select-clear-icon-hover-color, var(--mat-sys-error))}.ng-select-arrow{color:var(--mtx-select-enabled-arrow-color, var(--mat-sys-on-surface))}.ng-select-disabled .ng-select-arrow{color:var(--mtx-select-disabled-arrow-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.ng-select-invalid .ng-select-arrow{color:var(--mtx-select-invalid-arrow-color, var(--mat-sys-error))}.ng-select-opened .ng-select-arrow{transform:rotate(180deg)}.ng-select-panel{background-color:var(--mtx-select-panel-background-color, var(--mat-sys-surface-container))}.ng-select-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-select-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-select-panel-header,.ng-select-panel-footer{padding:14px 16px}.ng-select-panel-header{border-bottom:1px solid var(--mtx-select-panel-divider-color, var(--mat-sys-outline))}.ng-select-panel-footer{border-top:1px solid var(--mtx-select-panel-divider-color, var(--mat-sys-outline))}.ng-select-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-select-optgroup.ng-select-option-disabled{cursor:default}.ng-select-optgroup.ng-select-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-select-optgroup.ng-select-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-select-option{position:relative;padding:14px 16px;color:var(--mtx-select-option-label-text-color, var(--mat-sys-on-surface))}.ng-select-option.ng-select-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-select-option.ng-select-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-select-option.ng-select-option-disabled{color:var(--mtx-select-option-disabled-state-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.ng-select-option.ng-select-option-child{padding-inline-start:32px}.ng-select-tag-option{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", "usePopover", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "searchWhileComposing", "editableSearchTerm", "maxSelectedItems", "minTermLength", "markFirst", "preventToggleOnRightClick", "addTag", "addTagText", "notFoundText", "typeahead", "typeToSearchText", "groupBy", "groupValue", "searchFn", "keyDownFn", "trackByFn", "tabIndex", "inputAttrs", "ariaLabel", "ariaLabelledby", "ariaDescribedby", "panelClass", "inputId", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i1.NgSelectOptgroupTemplate, selector: "[ngSelectOptgroup]" }, { kind: "directive", type: i1.NgSelectOptionTemplate, selector: "[ngSelectOption]" }, { kind: "directive", type: i1.NgSelectLabelTemplate, selector: "[ngSelectLabel]" }, { kind: "directive", type: i1.NgSelectMultiLabelTemplate, selector: "[ngSelectMultiLabel]" }, { kind: "directive", type: i1.NgSelectPanelHeaderTemplate, selector: "[ngSelectPanelHeader]" }, { kind: "directive", type: i1.NgSelectPanelFooterTemplate, selector: "[ngSelectPanelFooter]" }, { kind: "directive", type: i1.NgSelectPlaceholderTemplate, selector: "[ngSelectPlaceholder]" }, { kind: "directive", type: i1.NgSelectClearButtonTemplate, selector: "[ngSelectClearButton]" }, { kind: "directive", type: i1.NgSelectNotFoundTemplate, selector: "[ngSelectNotFound]" }, { kind: "directive", type: i1.NgSelectTypeToSearchTemplate, selector: "[ngSelectTypeToSearch]" }, { kind: "directive", type: i1.NgSelectLoadingTextTemplate, selector: "[ngSelectLoadingText]" }, { kind: "directive", type: i1.NgSelectTagTemplate, selector: "[ngSelectTag]" }, { kind: "directive", type: i1.NgSelectLoadingTemplate, selector: "[ngSelectLoading]" }, { 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.11", ngImport: i0, type: MtxSelect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: MtxSelect, decorators: [{
             type: Component,
             args: [{ selector: 'mtx-select', exportAs: 'mtxSelect', host: {
                         '[attr.id]': 'id',
@@ -580,7 +581,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                         '[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  [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  [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  [tabIndex]=\"tabIndex\"\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"] }]
+                    }, 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  [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  [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  [tabIndex]=\"tabIndex\"\n  [inputId]=\"inputId\"\n  [ariaLabel]=\"ariaLabel\"\n  [ariaLabelledby]=\"_getAriaLabelledby()\"\n  [ariaDescribedby]=\"_ariaDescribedby\"\n  [inputAttrs]=\"inputAttrs\"\n  [usePopover]=\"usePopover\"\n>\n  @if (optionTemplate) {\n    <ng-template\n      ngSelectOption\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      ngSelectOptgroup\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 ngSelectLabel 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 ngSelectMultiLabel 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 (panelHeaderTemplate) {\n    <ng-template ngSelectPanelHeader>\n      <ng-template [ngTemplateOutlet]=\"panelHeaderTemplate\"></ng-template>\n    </ng-template>\n  }\n\n  @if (panelFooterTemplate) {\n    <ng-template ngSelectPanelFooter>\n      <ng-template [ngTemplateOutlet]=\"panelFooterTemplate\"></ng-template>\n    </ng-template>\n  }\n\n  @if (notFoundTemplate) {\n    <ng-template ngSelectNotFound 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 ngSelectTypeToSearch>\n      <ng-template [ngTemplateOutlet]=\"typeToSearchTemplate\"></ng-template>\n    </ng-template>\n  }\n\n  @if (loadingTextTemplate) {\n    <ng-template ngSelectLoadingText 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 ngSelectTag let-searchTerm=\"searchTerm\">\n      <ng-template\n        [ngTemplateOutlet]=\"tagTemplate\"\n        [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\"\n      ></ng-template>\n    </ng-template>\n  }\n\n  @if (loadingTemplate) {\n    <ng-template ngSelectLoading>\n      <ng-template [ngTemplateOutlet]=\"loadingTemplate\"></ng-template>\n    </ng-template>\n  }\n\n  @if (placeholderTemplate) {\n    <ng-template ngSelectPlaceholder>\n      <ng-template [ngTemplateOutlet]=\"placeholderTemplate\"></ng-template>\n    </ng-template>\n  }\n\n  @if (clearbuttonTemplate) {\n    <ng-template ngSelectClearButton>\n      <ng-template [ngTemplateOutlet]=\"clearbuttonTemplate\"></ng-template>\n    </ng-template>\n  }\n</ng-select>\n", styles: [".ng-select{--ns-indicator-icon-size: 16px}.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-multiple .ng-select-value{box-sizing:border-box;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-multiple .ng-select-value.ng-select-value-disabled{opacity:.4}.ng-select-multiple .ng-select-value-label{display:inline-block;margin:0 4px}.ng-select-multiple .ng-select-value-remove{display:inline-flex;justify-content:center;align-items:center;width:16px;height:16px;border-radius:50%}.ng-select-multiple .ng-select-value-remove:hover{background-color:var(--mtx-select-multiple-value-icon-hover-background-color, var(--mat-sys-outline-variant))}.ng-select-multiple.ng-select-disabled .ng-select-value{border-color:var(--mtx-select-multiple-value-disabled-outline-color, color-mix(in srgb, var(--mat-sys-outline) 38%, transparent))}.ng-select-control{color:var(--mtx-select-container-text-color, var(--mat-sys-on-surface))}.ng-select-value-container{gap:4px}.ng-select-disabled .ng-select-value{color:var(--mtx-select-disabled-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.ng-select-input{height:var(--mat-form-field-container-text-line-height, var(--mat-sys-body-large-line-height));color:inherit;font:inherit}.ng-select-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-placeholder{opacity:0}.ng-select-clear,.ng-select-arrow{display:inline-flex;align-items:center;line-height:1;transition:color .15s}.ng-select-clear{color:var(--mtx-select-clear-icon-color, var(--mat-sys-on-surface))}.ng-select-clear:hover{color:var(--mtx-select-clear-icon-hover-color, var(--mat-sys-error))}.ng-select-arrow{color:var(--mtx-select-enabled-arrow-color, var(--mat-sys-on-surface))}.ng-select-disabled .ng-select-arrow{color:var(--mtx-select-disabled-arrow-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.ng-select-invalid .ng-select-arrow{color:var(--mtx-select-invalid-arrow-color, var(--mat-sys-error))}.ng-select-opened .ng-select-arrow{transform:rotate(180deg)}.ng-select-panel{background-color:var(--mtx-select-panel-background-color, var(--mat-sys-surface-container))}.ng-select-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-select-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-select-panel-header,.ng-select-panel-footer{padding:14px 16px}.ng-select-panel-header{border-bottom:1px solid var(--mtx-select-panel-divider-color, var(--mat-sys-outline))}.ng-select-panel-footer{border-top:1px solid var(--mtx-select-panel-divider-color, var(--mat-sys-outline))}.ng-select-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-select-optgroup.ng-select-option-disabled{cursor:default}.ng-select-optgroup.ng-select-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-select-optgroup.ng-select-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-select-option{position:relative;padding:14px 16px;color:var(--mtx-select-option-label-text-color, var(--mat-sys-on-surface))}.ng-select-option.ng-select-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-select-option.ng-select-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-select-option.ng-select-option-disabled{color:var(--mtx-select-option-disabled-state-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.ng-select-option.ng-select-option-child{padding-inline-start:32px}.ng-select-tag-option{display:inline-block;margin-inline-end:6px;font-size:80%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { ngSelect: [{
                 type: ViewChild,
                 args: ['ngSelect', { static: true }]
@@ -599,12 +600,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
             }], multiLabelTemplate: [{
                 type: ContentChild,
                 args: [MtxSelectMultiLabelTemplate, { read: TemplateRef }]
-            }], headerTemplate: [{
+            }], panelHeaderTemplate: [{
                 type: ContentChild,
-                args: [MtxSelectHeaderTemplate, { read: TemplateRef }]
-            }], footerTemplate: [{
+                args: [MtxSelectPanelHeaderTemplate, { read: TemplateRef }]
+            }], panelFooterTemplate: [{
                 type: ContentChild,
-                args: [MtxSelectFooterTemplate, { read: TemplateRef }]
+                args: [MtxSelectPanelFooterTemplate, { read: TemplateRef }]
             }], notFoundTemplate: [{
                 type: ContentChild,
                 args: [MtxSelectNotFoundTemplate, { read: TemplateRef }]
@@ -617,9 +618,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
             }], tagTemplate: [{
                 type: ContentChild,
                 args: [MtxSelectTagTemplate, { read: TemplateRef }]
-            }], loadingSpinnerTemplate: [{
+            }], loadingTemplate: [{
                 type: ContentChild,
-                args: [MtxSelectLoadingSpinnerTemplate, { read: TemplateRef }]
+                args: [MtxSelectLoadingTemplate, { read: TemplateRef }]
             }], placeholderTemplate: [{
                 type: ContentChild,
                 args: [MtxSelectPlaceholderTemplate, { read: TemplateRef }]
@@ -659,6 +660,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
             }], scrollToEnd: [{
                 type: Output,
                 args: ['scrollToEnd']
+            }], usePopover: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], addTag: [{
                 type: Input
             }], addTagText: [{
@@ -795,8 +799,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
             }] } });
 
 class MtxSelectModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: MtxSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.11", ngImport: i0, type: MtxSelectModule, imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: MtxSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.3", ngImport: i0, type: MtxSelectModule, imports: [CommonModule,
             FormsModule,
             NgSelectModule,
             MtxSelect,
@@ -805,13 +809,13 @@ class MtxSelectModule {
             MtxSelectOptionTemplate,
             MtxSelectLabelTemplate,
             MtxSelectMultiLabelTemplate,
-            MtxSelectHeaderTemplate,
-            MtxSelectFooterTemplate,
+            MtxSelectPanelHeaderTemplate,
+            MtxSelectPanelFooterTemplate,
             MtxSelectNotFoundTemplate,
             MtxSelectTypeToSearchTemplate,
             MtxSelectLoadingTextTemplate,
             MtxSelectTagTemplate,
-            MtxSelectLoadingSpinnerTemplate,
+            MtxSelectLoadingTemplate,
             MtxSelectPlaceholderTemplate,
             MtxSelectClearbuttonTemplate], exports: [MtxSelect,
             MtxOption,
@@ -819,21 +823,21 @@ class MtxSelectModule {
             MtxSelectOptionTemplate,
             MtxSelectLabelTemplate,
             MtxSelectMultiLabelTemplate,
-            MtxSelectHeaderTemplate,
-            MtxSelectFooterTemplate,
+            MtxSelectPanelHeaderTemplate,
+            MtxSelectPanelFooterTemplate,
             MtxSelectNotFoundTemplate,
             MtxSelectTypeToSearchTemplate,
             MtxSelectLoadingTextTemplate,
             MtxSelectTagTemplate,
-            MtxSelectLoadingSpinnerTemplate,
+            MtxSelectLoadingTemplate,
             MtxSelectPlaceholderTemplate,
             MtxSelectClearbuttonTemplate] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: MtxSelectModule, imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: MtxSelectModule, imports: [CommonModule,
             FormsModule,
             NgSelectModule,
             MtxSelect] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: MtxSelectModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: MtxSelectModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -846,13 +850,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                         MtxSelectOptionTemplate,
                         MtxSelectLabelTemplate,
                         MtxSelectMultiLabelTemplate,
-                        MtxSelectHeaderTemplate,
-                        MtxSelectFooterTemplate,
+                        MtxSelectPanelHeaderTemplate,
+                        MtxSelectPanelFooterTemplate,
                         MtxSelectNotFoundTemplate,
                         MtxSelectTypeToSearchTemplate,
                         MtxSelectLoadingTextTemplate,
                         MtxSelectTagTemplate,
-                        MtxSelectLoadingSpinnerTemplate,
+                        MtxSelectLoadingTemplate,
                         MtxSelectPlaceholderTemplate,
                         MtxSelectClearbuttonTemplate,
                     ],
@@ -863,13 +867,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                         MtxSelectOptionTemplate,
                         MtxSelectLabelTemplate,
                         MtxSelectMultiLabelTemplate,
-                        MtxSelectHeaderTemplate,
-                        MtxSelectFooterTemplate,
+                        MtxSelectPanelHeaderTemplate,
+                        MtxSelectPanelFooterTemplate,
                         MtxSelectNotFoundTemplate,
                         MtxSelectTypeToSearchTemplate,
                         MtxSelectLoadingTextTemplate,
                         MtxSelectTagTemplate,
-                        MtxSelectLoadingSpinnerTemplate,
+                        MtxSelectLoadingTemplate,
                         MtxSelectPlaceholderTemplate,
                         MtxSelectClearbuttonTemplate,
                     ],
@@ -880,5 +884,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { MTX_SELECT_DEFAULT_OPTIONS, MtxOption, MtxSelect, MtxSelectClearbuttonTemplate, MtxSelectFooterTemplate, MtxSelectHeaderTemplate, MtxSelectIntl, MtxSelectLabelTemplate, MtxSelectLoadingSpinnerTemplate, MtxSelectLoadingTextTemplate, MtxSelectModule, MtxSelectMultiLabelTemplate, MtxSelectNotFoundTemplate, MtxSelectOptgroupTemplate, MtxSelectOptionTemplate, MtxSelectPlaceholderTemplate, MtxSelectTagTemplate, MtxSelectTypeToSearchTemplate };
+export { MTX_SELECT_DEFAULT_OPTIONS, MtxOption, MtxSelect, MtxSelectClearbuttonTemplate, MtxSelectIntl, MtxSelectLabelTemplate, MtxSelectLoadingTemplate, MtxSelectLoadingTextTemplate, MtxSelectModule, MtxSelectMultiLabelTemplate, MtxSelectNotFoundTemplate, MtxSelectOptgroupTemplate, MtxSelectOptionTemplate, MtxSelectPanelFooterTemplate, MtxSelectPanelHeaderTemplate, MtxSelectPlaceholderTemplate, MtxSelectTagTemplate, MtxSelectTypeToSearchTemplate };
 //# sourceMappingURL=mtxSelect.mjs.map