@ng-matero/extensions 21.1.3 → 21.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/alert/_m2-alert.scss +10 -5
- package/core/style/_elevation.scss +42 -2
- package/core/theming/_color-api-backwards-compatibility.scss +5 -1
- package/core/theming/_m2-inspection.scss +8 -2
- package/core/tokens/_m3-tokens.scss +7 -3
- package/core/tokens/_system.scss +20 -4
- package/core/tokens/_token-utils.scss +6 -1
- package/core/typography/_versioning.scss +2 -3
- package/fesm2022/mtxAlert.mjs +7 -7
- package/fesm2022/mtxButton.mjs +7 -7
- package/fesm2022/mtxCheckboxGroup.mjs +7 -7
- package/fesm2022/mtxColorpicker.mjs +19 -19
- package/fesm2022/mtxColorpicker.mjs.map +1 -1
- package/fesm2022/mtxColumnResize.mjs +43 -43
- package/fesm2022/mtxCore.mjs +21 -21
- package/fesm2022/mtxDatetimepicker.mjs +58 -58
- package/fesm2022/mtxDialog.mjs +10 -10
- package/fesm2022/mtxDrawer.mjs +10 -10
- package/fesm2022/mtxDrawer.mjs.map +1 -1
- package/fesm2022/mtxGrid.mjs +69 -69
- package/fesm2022/mtxLoader.mjs +7 -7
- package/fesm2022/mtxPhotoviewer.mjs +7 -7
- package/fesm2022/mtxPopover.mjs +19 -19
- package/fesm2022/mtxProgress.mjs +7 -7
- package/fesm2022/mtxSelect.mjs +147 -162
- package/fesm2022/mtxSelect.mjs.map +1 -1
- package/fesm2022/mtxSplit.mjs +10 -10
- package/fesm2022/mtxTooltip.mjs +10 -10
- package/grid/_m2-grid.scss +24 -4
- package/package.json +3 -3
- package/progress/_m2-progress.scss +9 -4
- package/select/select.scss +89 -122
- package/types/mtxSelect.d.ts +59 -70
package/fesm2022/mtxSelect.mjs
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject, ElementRef, booleanAttribute, Input, ChangeDetectionStrategy, Component, Injectable, TemplateRef, Directive, InjectionToken, ChangeDetectorRef, DOCUMENT, EventEmitter, Output, ContentChildren, ContentChild, ViewChild, ViewEncapsulation, NgModule } from '@angular/core';
|
|
3
1
|
import { NgTemplateOutlet, CommonModule } from '@angular/common';
|
|
2
|
+
import * as i0 from '@angular/core';
|
|
3
|
+
import { inject, ElementRef, booleanAttribute, Input, ChangeDetectionStrategy, Component, Injectable, TemplateRef, Directive, InjectionToken, ChangeDetectorRef, EventEmitter, Output, ContentChild, ContentChildren, ViewChild, ViewEncapsulation, NgModule } from '@angular/core';
|
|
4
4
|
import * as i2 from '@angular/forms';
|
|
5
|
-
import { Validators, NgControl, NgForm, FormGroupDirective, FormsModule
|
|
6
|
-
import * as i1 from '@ng-
|
|
7
|
-
import { NgSelectModule } from '@ng-
|
|
5
|
+
import { Validators, NgControl, NgForm, FormGroupDirective, FormsModule } from '@angular/forms';
|
|
6
|
+
import * as i1 from '@ng-matero/ng-select';
|
|
7
|
+
import { NgSelectModule } from '@ng-matero/ng-select';
|
|
8
|
+
import { Subject, Subscription, merge } from 'rxjs';
|
|
8
9
|
import { FocusMonitor } from '@angular/cdk/a11y';
|
|
9
10
|
import { ErrorStateMatcher, _ErrorStateTracker } from '@angular/material/core';
|
|
10
11
|
import { MAT_FORM_FIELD, MatFormFieldControl } from '@angular/material/form-field';
|
|
11
|
-
import { Subject, Subscription, merge } from 'rxjs';
|
|
12
12
|
import { takeUntil, startWith } from 'rxjs/operators';
|
|
13
13
|
|
|
14
14
|
class MtxOption {
|
|
@@ -41,12 +41,12 @@ class MtxOption {
|
|
|
41
41
|
ngOnDestroy() {
|
|
42
42
|
this.stateChange$.complete();
|
|
43
43
|
}
|
|
44
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
45
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.
|
|
44
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxOption, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
45
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.5", type: MtxOption, isStandalone: true, selector: "mtx-option", inputs: { value: "value", disabled: ["disabled", "disabled", booleanAttribute] }, exportAs: ["mtxOption"], usesOnChanges: true, ngImport: i0, template: `
|
|
46
46
|
<ng-content></ng-content>
|
|
47
47
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
48
48
|
}
|
|
49
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
49
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxOption, decorators: [{
|
|
50
50
|
type: Component,
|
|
51
51
|
args: [{
|
|
52
52
|
selector: 'mtx-option',
|
|
@@ -80,10 +80,10 @@ class MtxSelectIntl {
|
|
|
80
80
|
this.loadingText = this._defaultOptions?.loadingText ?? 'Loading...';
|
|
81
81
|
this.clearAllText = this._defaultOptions?.clearAllText ?? 'Clear all';
|
|
82
82
|
}
|
|
83
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
84
|
-
/** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.
|
|
83
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxSelectIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
84
|
+
/** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxSelectIntl, providedIn: 'root' }); }
|
|
85
85
|
}
|
|
86
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
86
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxSelectIntl, decorators: [{
|
|
87
87
|
type: Injectable,
|
|
88
88
|
args: [{ providedIn: 'root' }]
|
|
89
89
|
}] });
|
|
@@ -92,10 +92,10 @@ class MtxSelectOptionTemplate {
|
|
|
92
92
|
constructor() {
|
|
93
93
|
this.template = inject(TemplateRef);
|
|
94
94
|
}
|
|
95
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
96
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.
|
|
95
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxSelectOptionTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
96
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.5", type: MtxSelectOptionTemplate, isStandalone: true, selector: "[ng-option-tmp]", ngImport: i0 }); }
|
|
97
97
|
}
|
|
98
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
98
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxSelectOptionTemplate, decorators: [{
|
|
99
99
|
type: Directive,
|
|
100
100
|
args: [{ selector: '[ng-option-tmp]' }]
|
|
101
101
|
}] });
|
|
@@ -103,10 +103,10 @@ class MtxSelectOptgroupTemplate {
|
|
|
103
103
|
constructor() {
|
|
104
104
|
this.template = inject(TemplateRef);
|
|
105
105
|
}
|
|
106
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
107
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.
|
|
106
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxSelectOptgroupTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
107
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.5", type: MtxSelectOptgroupTemplate, isStandalone: true, selector: "[ng-optgroup-tmp]", ngImport: i0 }); }
|
|
108
108
|
}
|
|
109
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
109
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxSelectOptgroupTemplate, decorators: [{
|
|
110
110
|
type: Directive,
|
|
111
111
|
args: [{ selector: '[ng-optgroup-tmp]' }]
|
|
112
112
|
}] });
|
|
@@ -114,10 +114,10 @@ class MtxSelectLabelTemplate {
|
|
|
114
114
|
constructor() {
|
|
115
115
|
this.template = inject(TemplateRef);
|
|
116
116
|
}
|
|
117
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
118
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.
|
|
117
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxSelectLabelTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
118
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.5", type: MtxSelectLabelTemplate, isStandalone: true, selector: "[ng-label-tmp]", ngImport: i0 }); }
|
|
119
119
|
}
|
|
120
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
120
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxSelectLabelTemplate, decorators: [{
|
|
121
121
|
type: Directive,
|
|
122
122
|
args: [{ selector: '[ng-label-tmp]' }]
|
|
123
123
|
}] });
|
|
@@ -125,10 +125,10 @@ class MtxSelectMultiLabelTemplate {
|
|
|
125
125
|
constructor() {
|
|
126
126
|
this.template = inject(TemplateRef);
|
|
127
127
|
}
|
|
128
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
129
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.
|
|
128
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxSelectMultiLabelTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
129
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.5", type: MtxSelectMultiLabelTemplate, isStandalone: true, selector: "[ng-multi-label-tmp]", ngImport: i0 }); }
|
|
130
130
|
}
|
|
131
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
131
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxSelectMultiLabelTemplate, decorators: [{
|
|
132
132
|
type: Directive,
|
|
133
133
|
args: [{ selector: '[ng-multi-label-tmp]' }]
|
|
134
134
|
}] });
|
|
@@ -136,10 +136,10 @@ class MtxSelectHeaderTemplate {
|
|
|
136
136
|
constructor() {
|
|
137
137
|
this.template = inject(TemplateRef);
|
|
138
138
|
}
|
|
139
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
140
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.
|
|
139
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxSelectHeaderTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
140
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.5", type: MtxSelectHeaderTemplate, isStandalone: true, selector: "[ng-header-tmp]", ngImport: i0 }); }
|
|
141
141
|
}
|
|
142
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
142
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxSelectHeaderTemplate, decorators: [{
|
|
143
143
|
type: Directive,
|
|
144
144
|
args: [{ selector: '[ng-header-tmp]' }]
|
|
145
145
|
}] });
|
|
@@ -147,10 +147,10 @@ class MtxSelectFooterTemplate {
|
|
|
147
147
|
constructor() {
|
|
148
148
|
this.template = inject(TemplateRef);
|
|
149
149
|
}
|
|
150
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
151
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.
|
|
150
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxSelectFooterTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
151
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.5", type: MtxSelectFooterTemplate, isStandalone: true, selector: "[ng-footer-tmp]", ngImport: i0 }); }
|
|
152
152
|
}
|
|
153
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
153
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxSelectFooterTemplate, decorators: [{
|
|
154
154
|
type: Directive,
|
|
155
155
|
args: [{ selector: '[ng-footer-tmp]' }]
|
|
156
156
|
}] });
|
|
@@ -158,10 +158,10 @@ class MtxSelectNotFoundTemplate {
|
|
|
158
158
|
constructor() {
|
|
159
159
|
this.template = inject(TemplateRef);
|
|
160
160
|
}
|
|
161
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
162
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.
|
|
161
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxSelectNotFoundTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
162
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.5", type: MtxSelectNotFoundTemplate, isStandalone: true, selector: "[ng-notfound-tmp]", ngImport: i0 }); }
|
|
163
163
|
}
|
|
164
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
164
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxSelectNotFoundTemplate, decorators: [{
|
|
165
165
|
type: Directive,
|
|
166
166
|
args: [{ selector: '[ng-notfound-tmp]' }]
|
|
167
167
|
}] });
|
|
@@ -169,10 +169,10 @@ class MtxSelectTypeToSearchTemplate {
|
|
|
169
169
|
constructor() {
|
|
170
170
|
this.template = inject(TemplateRef);
|
|
171
171
|
}
|
|
172
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
173
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.
|
|
172
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxSelectTypeToSearchTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
173
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.5", type: MtxSelectTypeToSearchTemplate, isStandalone: true, selector: "[ng-typetosearch-tmp]", ngImport: i0 }); }
|
|
174
174
|
}
|
|
175
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
175
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxSelectTypeToSearchTemplate, decorators: [{
|
|
176
176
|
type: Directive,
|
|
177
177
|
args: [{ selector: '[ng-typetosearch-tmp]' }]
|
|
178
178
|
}] });
|
|
@@ -180,10 +180,10 @@ class MtxSelectLoadingTextTemplate {
|
|
|
180
180
|
constructor() {
|
|
181
181
|
this.template = inject(TemplateRef);
|
|
182
182
|
}
|
|
183
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
184
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.
|
|
183
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxSelectLoadingTextTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
184
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.5", type: MtxSelectLoadingTextTemplate, isStandalone: true, selector: "[ng-loadingtext-tmp]", ngImport: i0 }); }
|
|
185
185
|
}
|
|
186
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
186
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxSelectLoadingTextTemplate, decorators: [{
|
|
187
187
|
type: Directive,
|
|
188
188
|
args: [{ selector: '[ng-loadingtext-tmp]' }]
|
|
189
189
|
}] });
|
|
@@ -191,10 +191,10 @@ class MtxSelectTagTemplate {
|
|
|
191
191
|
constructor() {
|
|
192
192
|
this.template = inject(TemplateRef);
|
|
193
193
|
}
|
|
194
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
195
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.
|
|
194
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxSelectTagTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
195
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.5", type: MtxSelectTagTemplate, isStandalone: true, selector: "[ng-tag-tmp]", ngImport: i0 }); }
|
|
196
196
|
}
|
|
197
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
197
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxSelectTagTemplate, decorators: [{
|
|
198
198
|
type: Directive,
|
|
199
199
|
args: [{ selector: '[ng-tag-tmp]' }]
|
|
200
200
|
}] });
|
|
@@ -202,10 +202,10 @@ class MtxSelectLoadingSpinnerTemplate {
|
|
|
202
202
|
constructor() {
|
|
203
203
|
this.template = inject(TemplateRef);
|
|
204
204
|
}
|
|
205
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
206
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.
|
|
205
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxSelectLoadingSpinnerTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
206
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.5", type: MtxSelectLoadingSpinnerTemplate, isStandalone: true, selector: "[ng-loadingspinner-tmp]", ngImport: i0 }); }
|
|
207
207
|
}
|
|
208
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
208
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxSelectLoadingSpinnerTemplate, decorators: [{
|
|
209
209
|
type: Directive,
|
|
210
210
|
args: [{ selector: '[ng-loadingspinner-tmp]' }]
|
|
211
211
|
}] });
|
|
@@ -213,10 +213,10 @@ class MtxSelectPlaceholderTemplate {
|
|
|
213
213
|
constructor() {
|
|
214
214
|
this.template = inject(TemplateRef);
|
|
215
215
|
}
|
|
216
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
217
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.
|
|
216
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxSelectPlaceholderTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
217
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.5", type: MtxSelectPlaceholderTemplate, isStandalone: true, selector: "[ng-placeholder-tmp]", ngImport: i0 }); }
|
|
218
218
|
}
|
|
219
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
219
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxSelectPlaceholderTemplate, decorators: [{
|
|
220
220
|
type: Directive,
|
|
221
221
|
args: [{ selector: '[ng-placeholder-tmp]' }]
|
|
222
222
|
}] });
|
|
@@ -224,10 +224,10 @@ class MtxSelectClearbuttonTemplate {
|
|
|
224
224
|
constructor() {
|
|
225
225
|
this.template = inject(TemplateRef);
|
|
226
226
|
}
|
|
227
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
228
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.
|
|
227
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxSelectClearbuttonTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
228
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.5", type: MtxSelectClearbuttonTemplate, isStandalone: true, selector: "[ng-clearbutton-tmp]", ngImport: i0 }); }
|
|
229
229
|
}
|
|
230
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
230
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxSelectClearbuttonTemplate, decorators: [{
|
|
231
231
|
type: Directive,
|
|
232
232
|
args: [{ selector: '[ng-clearbutton-tmp]' }]
|
|
233
233
|
}] });
|
|
@@ -236,12 +236,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
236
236
|
const MTX_SELECT_DEFAULT_OPTIONS = new InjectionToken('mtx-select-default-options');
|
|
237
237
|
let nextUniqueId = 0;
|
|
238
238
|
class MtxSelect {
|
|
239
|
-
get clearSearchOnAdd() {
|
|
240
|
-
return this._clearSearchOnAdd ?? this.closeOnSelect;
|
|
241
|
-
}
|
|
242
|
-
set clearSearchOnAdd(value) {
|
|
243
|
-
this._clearSearchOnAdd = value;
|
|
244
|
-
}
|
|
245
239
|
get items() {
|
|
246
240
|
return this._items;
|
|
247
241
|
}
|
|
@@ -305,10 +299,6 @@ class MtxSelect {
|
|
|
305
299
|
set errorStateMatcher(value) {
|
|
306
300
|
this._errorStateTracker.matcher = value;
|
|
307
301
|
}
|
|
308
|
-
/** Whether or not the overlay panel is open. */
|
|
309
|
-
get panelOpen() {
|
|
310
|
-
return !!this.ngSelect.isOpen;
|
|
311
|
-
}
|
|
312
302
|
/** Whether the select is in an error state. */
|
|
313
303
|
get errorState() {
|
|
314
304
|
return this._errorStateTracker.errorState;
|
|
@@ -326,7 +316,17 @@ class MtxSelect {
|
|
|
326
316
|
this._defaultOptions = inject(MTX_SELECT_DEFAULT_OPTIONS, {
|
|
327
317
|
optional: true,
|
|
328
318
|
});
|
|
329
|
-
this.
|
|
319
|
+
this.blurEvent = new EventEmitter();
|
|
320
|
+
this.focusEvent = new EventEmitter();
|
|
321
|
+
this.changeEvent = new EventEmitter();
|
|
322
|
+
this.openEvent = new EventEmitter();
|
|
323
|
+
this.closeEvent = new EventEmitter();
|
|
324
|
+
this.searchEvent = new EventEmitter();
|
|
325
|
+
this.clearEvent = new EventEmitter();
|
|
326
|
+
this.addEvent = new EventEmitter();
|
|
327
|
+
this.removeEvent = new EventEmitter();
|
|
328
|
+
this.scroll = new EventEmitter();
|
|
329
|
+
this.scrollToEnd = new EventEmitter();
|
|
330
330
|
this.addTag = false;
|
|
331
331
|
this.appearance = 'underline';
|
|
332
332
|
this.appendTo = this._defaultOptions?.appendTo ?? 'body';
|
|
@@ -335,13 +335,12 @@ class MtxSelect {
|
|
|
335
335
|
this.closeOnSelect = true;
|
|
336
336
|
this.clearable = true;
|
|
337
337
|
this.clearOnBackspace = true;
|
|
338
|
-
this.
|
|
338
|
+
this.panelPosition = 'auto';
|
|
339
339
|
this.bufferAmount = 4;
|
|
340
340
|
this.selectableGroup = false;
|
|
341
341
|
this.selectableGroupAsModel = true;
|
|
342
342
|
this.hideSelected = false;
|
|
343
343
|
this.loading = false;
|
|
344
|
-
this.labelForId = null;
|
|
345
344
|
this.markFirst = true;
|
|
346
345
|
this.multiple = false;
|
|
347
346
|
this.searchable = true;
|
|
@@ -350,26 +349,17 @@ class MtxSelect {
|
|
|
350
349
|
this.searchWhileComposing = true;
|
|
351
350
|
this.selectOnTab = false;
|
|
352
351
|
this.trackByFn = null;
|
|
353
|
-
this.
|
|
354
|
-
this.openOnEnter = this._defaultOptions?.openOnEnter ?? true;
|
|
352
|
+
this.openOnEnter = this._defaultOptions?.openOnEnter;
|
|
355
353
|
this.minTermLength = 0;
|
|
356
354
|
this.editableSearchTerm = false;
|
|
357
355
|
this.keyDownFn = (_) => true;
|
|
358
|
-
this.virtualScroll = this._defaultOptions?.virtualScroll
|
|
356
|
+
this.virtualScroll = this._defaultOptions?.virtualScroll;
|
|
357
|
+
this.panelDisabled = false;
|
|
359
358
|
this.fixedPlaceholder = this._defaultOptions?.fixedPlaceholder ?? false;
|
|
360
|
-
this.
|
|
361
|
-
this.
|
|
362
|
-
this.
|
|
363
|
-
this.
|
|
364
|
-
this.openEvent = new EventEmitter();
|
|
365
|
-
this.closeEvent = new EventEmitter();
|
|
366
|
-
this.searchEvent = new EventEmitter();
|
|
367
|
-
this.clearEvent = new EventEmitter();
|
|
368
|
-
this.addEvent = new EventEmitter();
|
|
369
|
-
this.removeEvent = new EventEmitter();
|
|
370
|
-
this.scroll = new EventEmitter();
|
|
371
|
-
this.scrollToEnd = new EventEmitter();
|
|
372
|
-
this._clearSearchOnAdd = this._defaultOptions?.clearSearchOnAdd;
|
|
359
|
+
this.preventToggleOnRightClick = false;
|
|
360
|
+
this.clearSearchOnAdd = this._defaultOptions?.clearSearchOnAdd;
|
|
361
|
+
this.deselectOnClick = this._defaultOptions?.deselectOnClick;
|
|
362
|
+
this.inputAttrs = {};
|
|
373
363
|
this._items = [];
|
|
374
364
|
this._itemsAreUsed = false;
|
|
375
365
|
/** Emits whenever the component is destroyed. */
|
|
@@ -382,11 +372,13 @@ class MtxSelect {
|
|
|
382
372
|
this._focused = false;
|
|
383
373
|
/** Whether the select is disabled. */
|
|
384
374
|
this.disabled = false;
|
|
385
|
-
/**
|
|
386
|
-
this.ariaLabel =
|
|
387
|
-
/**
|
|
375
|
+
/** `aria-label` of the ng-select input. */
|
|
376
|
+
this.ariaLabel = null;
|
|
377
|
+
/** `aria-labelledby` of the ng-select input. */
|
|
388
378
|
this.ariaLabelledby = null;
|
|
389
|
-
/**
|
|
379
|
+
/** `aria-describedby` of the ng-select input. */
|
|
380
|
+
this.ariaDescribedby = null;
|
|
381
|
+
/** The aria-describedby attribute on the ng-select input for improved a11y. */
|
|
390
382
|
this._ariaDescribedby = null;
|
|
391
383
|
/** A name for this control that can be used by `mat-form-field`. */
|
|
392
384
|
this.controlType = 'mtx-select';
|
|
@@ -455,16 +447,18 @@ class MtxSelect {
|
|
|
455
447
|
if (this.ariaLabel) {
|
|
456
448
|
return null;
|
|
457
449
|
}
|
|
458
|
-
|
|
459
|
-
let value = (labelId ? labelId + ' ' : '') + this._valueId;
|
|
450
|
+
let value = this._parentFormField?.getLabelId() || '';
|
|
460
451
|
if (this.ariaLabelledby) {
|
|
461
452
|
value += ' ' + this.ariaLabelledby;
|
|
462
453
|
}
|
|
454
|
+
if (!value) {
|
|
455
|
+
value = this._valueId;
|
|
456
|
+
}
|
|
463
457
|
return value;
|
|
464
458
|
}
|
|
465
459
|
/** Implemented as part of MatFormFieldControl. */
|
|
466
460
|
setDescribedByIds(ids) {
|
|
467
|
-
this._ariaDescribedby = ids.length ? ids.join(' ') : null;
|
|
461
|
+
this._ariaDescribedby = this.ariaDescribedby || (ids.length ? ids.join(' ') : null);
|
|
468
462
|
}
|
|
469
463
|
/**
|
|
470
464
|
* Disables the select. Part of the ControlValueAccessor interface required
|
|
@@ -553,9 +547,7 @@ class MtxSelect {
|
|
|
553
547
|
this.ngSelect.detectChanges();
|
|
554
548
|
});
|
|
555
549
|
};
|
|
556
|
-
this.mtxOptions.changes
|
|
557
|
-
.pipe(startWith(this.mtxOptions), takeUntil(this._destroy$))
|
|
558
|
-
.subscribe(options => {
|
|
550
|
+
this.mtxOptions.changes.pipe(startWith(this.mtxOptions), takeUntil(this._destroy$)).subscribe(options => {
|
|
559
551
|
mapMtxOptions(options);
|
|
560
552
|
handleOptionChange();
|
|
561
553
|
});
|
|
@@ -572,41 +564,30 @@ class MtxSelect {
|
|
|
572
564
|
blur() {
|
|
573
565
|
this.ngSelect.blur();
|
|
574
566
|
}
|
|
575
|
-
|
|
576
|
-
this.openEvent.emit();
|
|
577
|
-
// TODO: The ng-select has no `panelClass` prop, so we can add the theme color by the following way.
|
|
578
|
-
setTimeout(() => {
|
|
579
|
-
const dropdownEl = this._document.getElementById(this.ngSelect.dropdownId);
|
|
580
|
-
dropdownEl?.classList.add('mat-' + this._parentFormField?.color);
|
|
581
|
-
});
|
|
582
|
-
}
|
|
583
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MtxSelect, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
584
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: MtxSelect, isStandalone: true, selector: "mtx-select", inputs: { addTag: "addTag", addTagText: "addTagText", appearance: "appearance", appendTo: "appendTo", bindLabel: "bindLabel", bindValue: "bindValue", closeOnSelect: ["closeOnSelect", "closeOnSelect", booleanAttribute], clearAllText: "clearAllText", clearable: ["clearable", "clearable", booleanAttribute], clearOnBackspace: ["clearOnBackspace", "clearOnBackspace", booleanAttribute], compareWith: "compareWith", dropdownPosition: "dropdownPosition", groupBy: "groupBy", groupValue: "groupValue", bufferAmount: "bufferAmount", selectableGroup: ["selectableGroup", "selectableGroup", booleanAttribute], selectableGroupAsModel: ["selectableGroupAsModel", "selectableGroupAsModel", booleanAttribute], hideSelected: ["hideSelected", "hideSelected", booleanAttribute], loading: ["loading", "loading", booleanAttribute], loadingText: "loadingText", labelForId: "labelForId", 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", inputAttrs: "inputAttrs", tabIndex: "tabIndex", openOnEnter: ["openOnEnter", "openOnEnter", booleanAttribute], minTermLength: "minTermLength", editableSearchTerm: ["editableSearchTerm", "editableSearchTerm", booleanAttribute], keyDownFn: "keyDownFn", virtualScroll: ["virtualScroll", "virtualScroll", booleanAttribute], typeToSearchText: "typeToSearchText", typeahead: "typeahead", isOpen: "isOpen", fixedPlaceholder: ["fixedPlaceholder", "fixedPlaceholder", booleanAttribute], deselectOnClick: ["deselectOnClick", "deselectOnClick", booleanAttribute], clearSearchOnAdd: "clearSearchOnAdd", items: "items", value: "value", id: "id", placeholder: "placeholder", disabled: ["disabled", "disabled", booleanAttribute], required: ["required", "required", booleanAttribute], errorStateMatcher: "errorStateMatcher", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"] }, outputs: { blurEvent: "blur", focusEvent: "focus", changeEvent: "change", openEvent: "open", closeEvent: "close", searchEvent: "search", clearEvent: "clear", addEvent: "add", removeEvent: "remove", scroll: "scroll", scrollToEnd: "scrollToEnd" }, host: { attributes: { "role": "combobox", "aria-autocomplete": "none" }, properties: { "attr.id": "id", "attr.aria-expanded": "panelOpen", "attr.aria-label": "ariaLabel || null", "attr.aria-labelledby": "_getAriaLabelledby()", "attr.aria-describedby": "_ariaDescribedby || null", "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 #ngSelect\n [class.ng-select-invalid]=\"errorState\"\n [(ngModel)]=\"value\"\n [ngModelOptions]=\"{standalone: true}\"\n [placeholder]=\"placeholder || _intl.placeholder!\"\n [items]=\"items\"\n [addTag]=\"addTag\"\n [addTagText]=\"addTagText || _intl.addTagText\"\n [appendTo]=\"appendTo\"\n [appearance]=\"appearance\"\n [bindLabel]=\"bindLabel!\"\n [bindValue]=\"bindValue!\"\n [closeOnSelect]=\"closeOnSelect\"\n [clearAllText]=\"clearAllText || _intl.clearAllText\"\n [clearable]=\"clearable\"\n [clearOnBackspace]=\"clearOnBackspace\"\n [dropdownPosition]=\"dropdownPosition\"\n [groupBy]=\"groupBy\"\n [groupValue]=\"groupValue\"\n [bufferAmount]=\"bufferAmount\"\n [hideSelected]=\"hideSelected\"\n [isOpen]=\"$any(isOpen)\"\n [compareWith]=\"compareWith\"\n [inputAttrs]=\"inputAttrs\"\n [loading]=\"loading\"\n [loadingText]=\"loadingText || _intl.loadingText\"\n [labelForId]=\"labelForId\"\n [markFirst]=\"markFirst\"\n [maxSelectedItems]=\"maxSelectedItems\"\n [multiple]=\"multiple\"\n [notFoundText]=\"notFoundText || _intl.notFoundText\"\n [readonly]=\"readonly || disabled\"\n [typeahead]=\"typeahead\"\n [typeToSearchText]=\"typeToSearchText || _intl.typeToSearchText\"\n [trackByFn]=\"trackByFn\"\n [searchable]=\"searchable\"\n [searchFn]=\"searchFn\"\n [searchWhileComposing]=\"searchWhileComposing\"\n [clearSearchOnAdd]=\"clearSearchOnAdd\"\n [selectableGroup]=\"selectableGroup\"\n [selectableGroupAsModel]=\"selectableGroupAsModel\"\n [selectOnTab]=\"selectOnTab\"\n [tabIndex]=\"tabIndex\"\n [openOnEnter]=\"openOnEnter\"\n [minTermLength]=\"minTermLength\"\n [editableSearchTerm]=\"editableSearchTerm\"\n [keyDownFn]=\"keyDownFn\"\n [virtualScroll]=\"virtualScroll\"\n [fixedPlaceholder]=\"fixedPlaceholder\"\n [deselectOnClick]=\"deselectOnClick\"\n (blur)=\"blurEvent.emit($event)\"\n (focus)=\"focusEvent.emit($event)\"\n (change)=\"changeEvent.emit($event)\"\n (open)=\"openChange()\"\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\n @if (optionTemplate) {\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\"\n let-searchTerm=\"searchTerm\">\n <ng-template [ngTemplateOutlet]=\"optionTemplate\"\n [ngTemplateOutletContext]=\"{ item: item, item$: item$, index: index, searchTerm: searchTerm }\">\n </ng-template>\n </ng-template>\n }\n\n @if (optgroupTemplate) {\n <ng-template ng-optgroup-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\"\n let-searchTerm=\"searchTerm\">\n <ng-template [ngTemplateOutlet]=\"optgroupTemplate\"\n [ngTemplateOutletContext]=\"{ item: item, item$: item$, index: index, searchTerm: searchTerm }\">\n </ng-template>\n </ng-template>\n }\n\n @if (labelTemplate) {\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\" let-label=\"label\">\n <ng-template [ngTemplateOutlet]=\"labelTemplate\"\n [ngTemplateOutletContext]=\"{ item: item, clear: clear, label: label }\">\n </ng-template>\n </ng-template>\n }\n\n @if (multiLabelTemplate) {\n <ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n <ng-template [ngTemplateOutlet]=\"multiLabelTemplate\"\n [ngTemplateOutletContext]=\"{ items: items, clear: clear }\">\n </ng-template>\n </ng-template>\n }\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 [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 [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 [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\n</ng-select>\n", styles: [".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-select-container .ng-value-container{align-items:center;gap:4px}.ng-select .ng-select-container .ng-value-container .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-select-container .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))}.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-has-value .ng-placeholder{display:none}.ng-select .ng-clear-wrapper{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-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-opened .ng-arrow-wrapper .ng-arrow{top:-2px;border-width:0 5px 5px}.ng-select.ng-select-single.ng-select-filtered .ng-placeholder{display:initial;visibility:hidden}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{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-select-container .ng-value-container .ng-value.ng-value-disabled{opacity:.4}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label{display:inline-block;margin:0 4px;line-height:16px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{width:16px;height:16px;line-height:16px;border-radius:50%;text-align:center}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon: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-select-container .ng-value-container .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-wrapper{width:10px}.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{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-dropdown-panel-items .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-dropdown-panel-items .ng-optgroup.ng-option-disabled{cursor:default}.ng-dropdown-panel .ng-dropdown-panel-items .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-dropdown-panel-items .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-dropdown-panel-items .ng-option{position:relative;padding:14px 16px;text-overflow:ellipsis;text-decoration:none;text-align:left;white-space:nowrap;overflow:hidden;color:var(--mtx-select-option-label-text-color, var(--mat-sys-on-surface))}.ng-dropdown-panel .ng-dropdown-panel-items .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-dropdown-panel-items .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-dropdown-panel-items .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))}[dir=rtl] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{text-align:right}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-left:32px}[dir=rtl] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-right:32px;padding-left:0}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{margin-right:6px;font-size:80%}[dir=rtl] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{margin-left:6px;margin-right:0}\n"], dependencies: [{ kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i1.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "dropdownPosition", "appendTo", "outsideClickEvent", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "tabFocusOnClearButton", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "deselectOnClick", "clearSearchOnAdd", "compareWith", "keyDownFn", "bindLabel", "bindValue", "appearance", "isOpen", "items"], outputs: ["bindLabelChange", "bindValueChange", "appearanceChange", "isOpenChange", "itemsChange", "blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["ngSelect"] }, { kind: "directive", type: i1.NgOptgroupTemplateDirective, selector: "[ng-optgroup-tmp]" }, { kind: "directive", type: i1.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i1.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i1.NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "directive", type: i1.NgHeaderTemplateDirective, selector: "[ng-header-tmp]" }, { kind: "directive", type: i1.NgFooterTemplateDirective, selector: "[ng-footer-tmp]" }, { kind: "directive", type: i1.NgPlaceholderTemplateDirective, selector: "[ng-placeholder-tmp]" }, { kind: "directive", type: i1.NgNotFoundTemplateDirective, selector: "[ng-notfound-tmp]" }, { kind: "directive", type: i1.NgTypeToSearchTemplateDirective, selector: "[ng-typetosearch-tmp]" }, { kind: "directive", type: i1.NgLoadingTextTemplateDirective, selector: "[ng-loadingtext-tmp]" }, { kind: "directive", type: i1.NgTagTemplateDirective, selector: "[ng-tag-tmp]" }, { kind: "directive", type: i1.NgLoadingSpinnerTemplateDirective, selector: "[ng-loadingspinner-tmp]" }, { kind: "directive", type: i1.NgClearButtonTemplateDirective, 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 }); }
|
|
567
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxSelect, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
568
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: MtxSelect, isStandalone: true, selector: "mtx-select", inputs: { addTag: "addTag", addTagText: "addTagText", appearance: "appearance", appendTo: "appendTo", bindLabel: "bindLabel", bindValue: "bindValue", closeOnSelect: ["closeOnSelect", "closeOnSelect", booleanAttribute], clearable: ["clearable", "clearable", booleanAttribute], clearAllText: "clearAllText", clearOnBackspace: ["clearOnBackspace", "clearOnBackspace", booleanAttribute], compareWith: "compareWith", panelPosition: "panelPosition", groupBy: "groupBy", groupValue: "groupValue", bufferAmount: "bufferAmount", selectableGroup: ["selectableGroup", "selectableGroup", booleanAttribute], selectableGroupAsModel: ["selectableGroupAsModel", "selectableGroupAsModel", booleanAttribute], hideSelected: ["hideSelected", "hideSelected", booleanAttribute], loading: ["loading", "loading", booleanAttribute], loadingText: "loadingText", markFirst: ["markFirst", "markFirst", booleanAttribute], maxSelectedItems: "maxSelectedItems", multiple: ["multiple", "multiple", booleanAttribute], notFoundText: "notFoundText", searchable: ["searchable", "searchable", booleanAttribute], readonly: ["readonly", "readonly", booleanAttribute], searchFn: "searchFn", searchWhileComposing: ["searchWhileComposing", "searchWhileComposing", booleanAttribute], selectOnTab: ["selectOnTab", "selectOnTab", booleanAttribute], trackByFn: "trackByFn", tabIndex: "tabIndex", openOnEnter: ["openOnEnter", "openOnEnter", booleanAttribute], minTermLength: "minTermLength", editableSearchTerm: ["editableSearchTerm", "editableSearchTerm", booleanAttribute], keyDownFn: "keyDownFn", virtualScroll: ["virtualScroll", "virtualScroll", booleanAttribute], typeToSearchText: "typeToSearchText", typeahead: "typeahead", panelDisabled: ["panelDisabled", "panelDisabled", booleanAttribute], fixedPlaceholder: ["fixedPlaceholder", "fixedPlaceholder", booleanAttribute], preventToggleOnRightClick: ["preventToggleOnRightClick", "preventToggleOnRightClick", booleanAttribute], clearSearchOnAdd: ["clearSearchOnAdd", "clearSearchOnAdd", booleanAttribute], deselectOnClick: ["deselectOnClick", "deselectOnClick", booleanAttribute], inputId: "inputId", inputAttrs: "inputAttrs", panelClass: "panelClass", items: "items", value: "value", id: "id", placeholder: "placeholder", disabled: ["disabled", "disabled", booleanAttribute], required: ["required", "required", booleanAttribute], errorStateMatcher: "errorStateMatcher", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], ariaDescribedby: ["aria-describedby", "ariaDescribedby"] }, outputs: { blurEvent: "blur", focusEvent: "focus", changeEvent: "change", openEvent: "open", closeEvent: "close", searchEvent: "search", clearEvent: "clear", addEvent: "add", removeEvent: "remove", scroll: "scroll", scrollToEnd: "scrollToEnd" }, host: { properties: { "attr.id": "id", "attr.aria-required": "required.toString()", "attr.aria-disabled": "disabled.toString()", "attr.aria-invalid": "errorState", "class.mtx-select-floating": "shouldLabelFloat", "class.mtx-select-disabled": "disabled", "class.mtx-select-invalid": "errorState", "class.mtx-select-required": "required", "class.mtx-select-empty": "empty", "class.mtx-select-multiple": "multiple" }, classAttribute: "mtx-select" }, providers: [{ provide: MatFormFieldControl, useExisting: MtxSelect }], queries: [{ propertyName: "optionTemplate", first: true, predicate: MtxSelectOptionTemplate, descendants: true, read: TemplateRef }, { propertyName: "optgroupTemplate", first: true, predicate: MtxSelectOptgroupTemplate, descendants: true, read: TemplateRef }, { propertyName: "labelTemplate", first: true, predicate: MtxSelectLabelTemplate, descendants: true, read: TemplateRef }, { propertyName: "multiLabelTemplate", first: true, predicate: MtxSelectMultiLabelTemplate, descendants: true, read: TemplateRef }, { propertyName: "headerTemplate", first: true, predicate: MtxSelectHeaderTemplate, descendants: true, read: TemplateRef }, { propertyName: "footerTemplate", first: true, predicate: MtxSelectFooterTemplate, descendants: true, read: TemplateRef }, { propertyName: "notFoundTemplate", first: true, predicate: MtxSelectNotFoundTemplate, descendants: true, read: TemplateRef }, { propertyName: "typeToSearchTemplate", first: true, predicate: MtxSelectTypeToSearchTemplate, descendants: true, read: TemplateRef }, { propertyName: "loadingTextTemplate", first: true, predicate: MtxSelectLoadingTextTemplate, descendants: true, read: TemplateRef }, { propertyName: "tagTemplate", first: true, predicate: MtxSelectTagTemplate, descendants: true, read: TemplateRef }, { propertyName: "loadingSpinnerTemplate", first: true, predicate: MtxSelectLoadingSpinnerTemplate, descendants: true, read: TemplateRef }, { propertyName: "placeholderTemplate", first: true, predicate: MtxSelectPlaceholderTemplate, descendants: true, read: TemplateRef }, { propertyName: "clearbuttonTemplate", first: true, predicate: MtxSelectClearbuttonTemplate, descendants: true, read: TemplateRef }, { propertyName: "mtxOptions", predicate: MtxOption, descendants: true }], viewQueries: [{ propertyName: "ngSelect", first: true, predicate: ["ngSelect"], descendants: true, static: true }], exportAs: ["mtxSelect"], ngImport: i0, template: "<ng-select\n #ngSelect\n [class.ng-select-invalid]=\"errorState\"\n [panelClass]=\"panelClass\"\n [(ngModel)]=\"value\"\n [placeholder]=\"placeholder || _intl.placeholder\"\n [items]=\"items\"\n [addTag]=\"addTag\"\n [addTagText]=\"addTagText || _intl.addTagText\"\n [appendTo]=\"appendTo\"\n [appearance]=\"appearance\"\n [bindLabel]=\"bindLabel\"\n [bindValue]=\"bindValue\"\n [closeOnSelect]=\"closeOnSelect\"\n [clearAllText]=\"clearAllText || _intl.clearAllText\"\n [clearable]=\"clearable\"\n [clearOnBackspace]=\"clearOnBackspace\"\n [panelPosition]=\"panelPosition\"\n [groupBy]=\"groupBy\"\n [groupValue]=\"groupValue\"\n [bufferAmount]=\"bufferAmount\"\n [hideSelected]=\"hideSelected\"\n [panelDisabled]=\"panelDisabled\"\n [compareWith]=\"compareWith\"\n [loading]=\"loading\"\n [loadingText]=\"loadingText || _intl.loadingText\"\n [markFirst]=\"markFirst\"\n [maxSelectedItems]=\"maxSelectedItems\"\n [multiple]=\"multiple\"\n [notFoundText]=\"notFoundText || _intl.notFoundText\"\n [readonly]=\"readonly || disabled\"\n [typeahead]=\"typeahead\"\n [typeToSearchText]=\"typeToSearchText || _intl.typeToSearchText\"\n [trackByFn]=\"trackByFn\"\n [searchable]=\"searchable\"\n [searchFn]=\"searchFn\"\n [searchWhileComposing]=\"searchWhileComposing\"\n [clearSearchOnAdd]=\"clearSearchOnAdd\"\n [selectableGroup]=\"selectableGroup\"\n [selectableGroupAsModel]=\"selectableGroupAsModel\"\n [selectOnTab]=\"selectOnTab\"\n [tabIndex]=\"tabIndex\"\n [openOnEnter]=\"openOnEnter\"\n [minTermLength]=\"minTermLength\"\n [editableSearchTerm]=\"editableSearchTerm\"\n [keyDownFn]=\"keyDownFn\"\n [virtualScroll]=\"virtualScroll\"\n [fixedPlaceholder]=\"fixedPlaceholder\"\n [deselectOnClick]=\"deselectOnClick\"\n [preventToggleOnRightClick]=\"preventToggleOnRightClick\"\n (blur)=\"blurEvent.emit($event)\"\n (focus)=\"focusEvent.emit($event)\"\n (change)=\"changeEvent.emit($event)\"\n (open)=\"openEvent.emit()\"\n (close)=\"closeEvent.emit()\"\n (search)=\"searchEvent.emit($event)\"\n (clear)=\"clearEvent.emit($event)\"\n (add)=\"addEvent.emit($event)\"\n (remove)=\"removeEvent.emit($event)\"\n (scroll)=\"scroll.emit($event)\"\n (scrollToEnd)=\"scrollToEnd.emit()\"\n [inputId]=\"inputId\"\n [ariaLabel]=\"ariaLabel\"\n [ariaLabelledby]=\"_getAriaLabelledby()\"\n [ariaDescribedby]=\"_ariaDescribedby\"\n [inputAttrs]=\"inputAttrs\"\n>\n @if (optionTemplate) {\n <ng-template\n ng-option-tmps\n let-item=\"item\"\n let-item$=\"item$\"\n let-index=\"index\"\n let-searchTerm=\"searchTerm\"\n >\n <ng-template\n [ngTemplateOutlet]=\"optionTemplate\"\n [ngTemplateOutletContext]=\"{\n item: item,\n item$: item$,\n index: index,\n searchTerm: searchTerm,\n }\"\n ></ng-template>\n </ng-template>\n }\n\n @if (optgroupTemplate) {\n <ng-template\n ng-optgroup-tmp\n let-item=\"item\"\n let-item$=\"item$\"\n let-index=\"index\"\n let-searchTerm=\"searchTerm\"\n >\n <ng-template\n [ngTemplateOutlet]=\"optgroupTemplate\"\n [ngTemplateOutletContext]=\"{\n item: item,\n item$: item$,\n index: index,\n searchTerm: searchTerm,\n }\"\n ></ng-template>\n </ng-template>\n }\n\n @if (labelTemplate) {\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\" let-label=\"label\">\n <ng-template\n [ngTemplateOutlet]=\"labelTemplate\"\n [ngTemplateOutletContext]=\"{ item: item, clear: clear, label: label }\"\n ></ng-template>\n </ng-template>\n }\n\n @if (multiLabelTemplate) {\n <ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n <ng-template\n [ngTemplateOutlet]=\"multiLabelTemplate\"\n [ngTemplateOutletContext]=\"{ items: items, clear: clear }\"\n ></ng-template>\n </ng-template>\n }\n\n @if (headerTemplate) {\n <ng-template ng-header-tmp>\n <ng-template [ngTemplateOutlet]=\"headerTemplate\"></ng-template>\n </ng-template>\n }\n\n @if (footerTemplate) {\n <ng-template ng-footer-tmp>\n <ng-template [ngTemplateOutlet]=\"footerTemplate\"></ng-template>\n </ng-template>\n }\n\n @if (notFoundTemplate) {\n <ng-template ng-notfound-tmp let-searchTerm=\"searchTerm\">\n <ng-template\n [ngTemplateOutlet]=\"notFoundTemplate\"\n [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\"\n ></ng-template>\n </ng-template>\n }\n\n @if (typeToSearchTemplate) {\n <ng-template ng-typetosearch-tmp>\n <ng-template [ngTemplateOutlet]=\"typeToSearchTemplate\"></ng-template>\n </ng-template>\n }\n\n @if (loadingTextTemplate) {\n <ng-template ng-loadingtext-tmp let-searchTerm=\"searchTerm\">\n <ng-template\n [ngTemplateOutlet]=\"loadingTextTemplate\"\n [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\"\n ></ng-template>\n </ng-template>\n }\n\n @if (tagTemplate) {\n <ng-template ng-tag-tmp let-searchTerm=\"searchTerm\">\n <ng-template\n [ngTemplateOutlet]=\"tagTemplate\"\n [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\"\n ></ng-template>\n </ng-template>\n }\n\n @if (loadingSpinnerTemplate) {\n <ng-template ng-loadingspinner-tmp>\n <ng-template [ngTemplateOutlet]=\"loadingSpinnerTemplate\"></ng-template>\n </ng-template>\n }\n\n @if (placeholderTemplate) {\n <ng-template ng-placeholder-tmp>\n <ng-template [ngTemplateOutlet]=\"placeholderTemplate\"></ng-template>\n </ng-template>\n }\n\n @if (clearbuttonTemplate) {\n <ng-template ng-clearbutton-tmp>\n <ng-template [ngTemplateOutlet]=\"clearbuttonTemplate\"></ng-template>\n </ng-template>\n }\n</ng-select>\n", styles: [".mat-mdc-form-field .ng-select{padding:var(--mat-form-field-filled-with-label-container-padding-top, 24px) 16px var(--mat-form-field-filled-with-label-container-padding-bottom, 8px);margin:calc(var(--mat-form-field-filled-with-label-container-padding-top, 24px) * -1) -16px calc(var(--mat-form-field-filled-with-label-container-padding-bottom, 8px) * -1)}.mdc-text-field--outlined .ng-select,.mdc-text-field--no-label .ng-select{padding-top:var(--mat-form-field-container-vertical-padding, 16px);padding-bottom:var(--mat-form-field-container-vertical-padding, 16px);margin-top:calc(var(--mat-form-field-container-vertical-padding, 16px) * -1);margin-bottom:calc(var(--mat-form-field-container-vertical-padding, 16px) * -1)}.ng-select .ng-select-container{align-items:center;color:var(--mtx-select-container-text-color, var(--mat-sys-on-surface))}.ng-select .ng-value-container{align-items:center;gap:4px}.ng-select .ng-input>input{height:var(--mat-form-field-container-text-line-height, var(--mat-sys-body-large-line-height));color:inherit;font:inherit}.ng-select .ng-clear-wrapper{display:inline-flex;justify-content:center;align-items:center;width:24px;height:var(--mat-form-field-container-text-line-height, var(--mat-sys-body-large-line-height));color:var(--mtx-select-clear-icon-color, var(--mat-sys-on-surface))}.ng-select .ng-clear-wrapper:hover .ng-clear{color:var(--mtx-select-clear-icon-hover-color, var(--mat-sys-error))}.ng-select .ng-placeholder{transition:opacity .2s;opacity:1;color:var(--mtx-select-placeholder-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.mat-form-field-hide-placeholder .ng-select .ng-placeholder{opacity:0}.ng-select.ng-select-disabled .ng-value{color:var(--mtx-select-disabled-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.ng-select.ng-select-single.ng-select-filtered .ng-placeholder{display:initial;visibility:hidden}.ng-select.ng-select-multiple .ng-value{box-sizing:border-box;display:inline-flex;align-items:center;height:var(--mat-form-field-container-text-line-height, var(--mat-sys-body-large-line-height));padding:0 calc((var(--mat-form-field-container-text-line-height, var(--mat-sys-body-large-line-height)) - 16px) / 2);border-radius:9999px;font-size:.875em;background-color:var(--mtx-select-multiple-value-background-color, transparent);border:1px solid var(--mtx-select-multiple-value-outline-color, var(--mat-sys-outline))}.ng-select.ng-select-multiple .ng-value.ng-value-disabled{opacity:.4}.ng-select.ng-select-multiple .ng-value-label{display:inline-block;margin:0 4px;line-height:16px}.ng-select.ng-select-multiple .ng-value-remove{width:16px;height:16px;line-height:16px;border-radius:50%;text-align:center}.ng-select.ng-select-multiple .ng-value-remove:hover{background-color:var(--mtx-select-multiple-value-icon-hover-background-color, var(--mat-sys-outline-variant))}.ng-select.ng-select-multiple.ng-select-disabled .ng-value{border-color:var(--mtx-select-multiple-value-disabled-outline-color, color-mix(in srgb, var(--mat-sys-outline) 38%, transparent))}.ng-select .ng-arrow{border-width:5px 5px 2px;border-style:solid;border-color:var(--mtx-select-enabled-arrow-color, var(--mat-sys-on-surface)) transparent transparent}.ng-select.ng-select-disabled .ng-arrow{border-color:var(--mtx-select-disabled-arrow-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent)) transparent transparent}.ng-select.ng-select-invalid .ng-arrow{border-color:var(--mtx-select-invalid-arrow-color, var(--mat-sys-error)) transparent transparent}.ng-select.ng-select-opened .ng-arrow{top:-2px;border-width:0 5px 5px;border-color:transparent transparent var(--mtx-select-enabled-arrow-color, var(--mat-sys-on-surface))}.ng-select.ng-select-opened.ng-select-invalid .ng-arrow{border-color:transparent transparent var(--mtx-select-invalid-arrow-color, var(--mat-sys-error))}.ng-dropdown-panel{background-color:var(--mtx-select-panel-background-color, var(--mat-sys-surface-container))}.ng-dropdown-panel.ng-select-bottom{top:100%;border-bottom-left-radius:var(--mtx-select-container-shape, var(--mat-sys-corner-extra-small));border-bottom-right-radius:var(--mtx-select-container-shape, var(--mat-sys-corner-extra-small));box-shadow:var(--mtx-select-container-elevation-shadow, 0px 3px 1px -2px rgba(0, 0, 0, .2), 0px 2px 2px 0px rgba(0, 0, 0, .14), 0px 1px 5px 0px rgba(0, 0, 0, .12))}.ng-dropdown-panel.ng-select-top{bottom:100%;border-top-left-radius:var(--mtx-select-container-shape, var(--mat-sys-corner-extra-small));border-top-right-radius:var(--mtx-select-container-shape, var(--mat-sys-corner-extra-small));box-shadow:var(--mtx-select-container-elevation-shadow, 0px 3px 1px -2px rgba(0, 0, 0, .2), 0px 2px 2px 0px rgba(0, 0, 0, .14), 0px 1px 5px 0px rgba(0, 0, 0, .12))}.ng-dropdown-panel .ng-dropdown-header,.ng-dropdown-panel .ng-dropdown-footer{padding:14px 16px}.ng-dropdown-panel .ng-dropdown-header{border-bottom:1px solid var(--mtx-select-panel-divider-color, var(--mat-sys-outline))}.ng-dropdown-panel .ng-dropdown-footer{border-top:1px solid var(--mtx-select-panel-divider-color, var(--mat-sys-outline))}.ng-dropdown-panel .ng-optgroup{padding:14px 16px;font-weight:500;-webkit-user-select:none;user-select:none;cursor:pointer;color:var(--mtx-select-optgroup-label-text-color, var(--mat-sys-on-surface))}.ng-dropdown-panel .ng-optgroup.ng-option-disabled{cursor:default}.ng-dropdown-panel .ng-optgroup.ng-option-marked{background-color:var(--mtx-select-option-hover-state-background-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), transparent))}.ng-dropdown-panel .ng-optgroup.ng-option-selected{background-color:var(--mtx-select-option-selected-state-background-color, var(--mat-sys-secondary-container));color:var(--mtx-select-option-selected-state-text-color, var(--mat-sys-on-surface))}.ng-dropdown-panel .ng-option{position:relative;padding:14px 16px;color:var(--mtx-select-option-label-text-color, var(--mat-sys-on-surface))}.ng-dropdown-panel .ng-option.ng-option-marked{background-color:var(--mtx-select-option-hover-state-background-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), transparent))}.ng-dropdown-panel .ng-option.ng-option-selected{background-color:var(--mtx-select-option-selected-state-background-color, var(--mat-sys-secondary-container));color:var(--mtx-select-option-selected-state-text-color, var(--mat-sys-on-surface))}.ng-dropdown-panel .ng-option.ng-option-disabled{color:var(--mtx-select-option-disabled-state-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.ng-dropdown-panel .ng-option.ng-option-child{padding-inline-start:32px}.ng-dropdown-panel .ng-tag-label{display:inline-block;margin-inline-end:6px;font-size:80%}\n"], dependencies: [{ kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i1.NgSelect, selector: "ng-select", inputs: ["bindLabel", "bindValue", "placeholder", "fixedPlaceholder", "appendTo", "panelPosition", "panelDisabled", "readonly", "multiple", "searchable", "clearable", "clearOnBackspace", "clearAllText", "loading", "loadingText", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "virtualScroll", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "searchWhileComposing", "editableSearchTerm", "maxSelectedItems", "minTermLength", "markFirst", "preventToggleOnRightClick", "addTag", "addTagText", "notFoundText", "typeahead", "typeToSearchText", "groupBy", "groupValue", "searchFn", "keyDownFn", "trackByFn", "appearance", "tabIndex", "ariaLabel", "ariaLabelledby", "ariaDescribedby", "inputAttrs", "panelClass", "inputId", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i1.NgOptgroupTemplate, selector: "[ng-optgroup-tmp]" }, { kind: "directive", type: i1.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 }); }
|
|
585
569
|
}
|
|
586
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
570
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxSelect, decorators: [{
|
|
587
571
|
type: Component,
|
|
588
572
|
args: [{ selector: 'mtx-select', exportAs: 'mtxSelect', host: {
|
|
589
|
-
'role': 'combobox',
|
|
590
|
-
'aria-autocomplete': 'none',
|
|
591
573
|
'[attr.id]': 'id',
|
|
592
|
-
'[attr.aria-expanded]': 'panelOpen',
|
|
593
|
-
'[attr.aria-label]': 'ariaLabel || null',
|
|
594
|
-
'[attr.aria-labelledby]': '_getAriaLabelledby()',
|
|
595
|
-
'[attr.aria-describedby]': '_ariaDescribedby || null',
|
|
596
574
|
'[attr.aria-required]': 'required.toString()',
|
|
597
575
|
'[attr.aria-disabled]': 'disabled.toString()',
|
|
598
576
|
'[attr.aria-invalid]': 'errorState',
|
|
577
|
+
'class': 'mtx-select',
|
|
599
578
|
'[class.mtx-select-floating]': 'shouldLabelFloat',
|
|
600
579
|
'[class.mtx-select-disabled]': 'disabled',
|
|
601
580
|
'[class.mtx-select-invalid]': 'errorState',
|
|
602
581
|
'[class.mtx-select-required]': 'required',
|
|
603
582
|
'[class.mtx-select-empty]': 'empty',
|
|
604
583
|
'[class.mtx-select-multiple]': 'multiple',
|
|
605
|
-
'class': 'mtx-select',
|
|
606
|
-
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: MatFormFieldControl, useExisting: MtxSelect }], imports: [NgSelectModule, FormsModule, NgTemplateOutlet], template: "<ng-select #ngSelect\n [class.ng-select-invalid]=\"errorState\"\n [(ngModel)]=\"value\"\n [ngModelOptions]=\"{standalone: true}\"\n [placeholder]=\"placeholder || _intl.placeholder!\"\n [items]=\"items\"\n [addTag]=\"addTag\"\n [addTagText]=\"addTagText || _intl.addTagText\"\n [appendTo]=\"appendTo\"\n [appearance]=\"appearance\"\n [bindLabel]=\"bindLabel!\"\n [bindValue]=\"bindValue!\"\n [closeOnSelect]=\"closeOnSelect\"\n [clearAllText]=\"clearAllText || _intl.clearAllText\"\n [clearable]=\"clearable\"\n [clearOnBackspace]=\"clearOnBackspace\"\n [dropdownPosition]=\"dropdownPosition\"\n [groupBy]=\"groupBy\"\n [groupValue]=\"groupValue\"\n [bufferAmount]=\"bufferAmount\"\n [hideSelected]=\"hideSelected\"\n [isOpen]=\"$any(isOpen)\"\n [compareWith]=\"compareWith\"\n [inputAttrs]=\"inputAttrs\"\n [loading]=\"loading\"\n [loadingText]=\"loadingText || _intl.loadingText\"\n [labelForId]=\"labelForId\"\n [markFirst]=\"markFirst\"\n [maxSelectedItems]=\"maxSelectedItems\"\n [multiple]=\"multiple\"\n [notFoundText]=\"notFoundText || _intl.notFoundText\"\n [readonly]=\"readonly || disabled\"\n [typeahead]=\"typeahead\"\n [typeToSearchText]=\"typeToSearchText || _intl.typeToSearchText\"\n [trackByFn]=\"trackByFn\"\n [searchable]=\"searchable\"\n [searchFn]=\"searchFn\"\n [searchWhileComposing]=\"searchWhileComposing\"\n [clearSearchOnAdd]=\"clearSearchOnAdd\"\n [selectableGroup]=\"selectableGroup\"\n [selectableGroupAsModel]=\"selectableGroupAsModel\"\n [selectOnTab]=\"selectOnTab\"\n [tabIndex]=\"tabIndex\"\n [openOnEnter]=\"openOnEnter\"\n [minTermLength]=\"minTermLength\"\n [editableSearchTerm]=\"editableSearchTerm\"\n [keyDownFn]=\"keyDownFn\"\n [virtualScroll]=\"virtualScroll\"\n [fixedPlaceholder]=\"fixedPlaceholder\"\n [deselectOnClick]=\"deselectOnClick\"\n (blur)=\"blurEvent.emit($event)\"\n (focus)=\"focusEvent.emit($event)\"\n (change)=\"changeEvent.emit($event)\"\n (open)=\"openChange()\"\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\n @if (optionTemplate) {\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\"\n let-searchTerm=\"searchTerm\">\n <ng-template [ngTemplateOutlet]=\"optionTemplate\"\n [ngTemplateOutletContext]=\"{ item: item, item$: item$, index: index, searchTerm: searchTerm }\">\n </ng-template>\n </ng-template>\n }\n\n @if (optgroupTemplate) {\n <ng-template ng-optgroup-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\"\n let-searchTerm=\"searchTerm\">\n <ng-template [ngTemplateOutlet]=\"optgroupTemplate\"\n [ngTemplateOutletContext]=\"{ item: item, item$: item$, index: index, searchTerm: searchTerm }\">\n </ng-template>\n </ng-template>\n }\n\n @if (labelTemplate) {\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\" let-label=\"label\">\n <ng-template [ngTemplateOutlet]=\"labelTemplate\"\n [ngTemplateOutletContext]=\"{ item: item, clear: clear, label: label }\">\n </ng-template>\n </ng-template>\n }\n\n @if (multiLabelTemplate) {\n <ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n <ng-template [ngTemplateOutlet]=\"multiLabelTemplate\"\n [ngTemplateOutletContext]=\"{ items: items, clear: clear }\">\n </ng-template>\n </ng-template>\n }\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 [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 [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 [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\n</ng-select>\n", styles: [".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-select-container .ng-value-container{align-items:center;gap:4px}.ng-select .ng-select-container .ng-value-container .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-select-container .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))}.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-has-value .ng-placeholder{display:none}.ng-select .ng-clear-wrapper{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-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-opened .ng-arrow-wrapper .ng-arrow{top:-2px;border-width:0 5px 5px}.ng-select.ng-select-single.ng-select-filtered .ng-placeholder{display:initial;visibility:hidden}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{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-select-container .ng-value-container .ng-value.ng-value-disabled{opacity:.4}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label{display:inline-block;margin:0 4px;line-height:16px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{width:16px;height:16px;line-height:16px;border-radius:50%;text-align:center}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon: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-select-container .ng-value-container .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-wrapper{width:10px}.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{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-dropdown-panel-items .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-dropdown-panel-items .ng-optgroup.ng-option-disabled{cursor:default}.ng-dropdown-panel .ng-dropdown-panel-items .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-dropdown-panel-items .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-dropdown-panel-items .ng-option{position:relative;padding:14px 16px;text-overflow:ellipsis;text-decoration:none;text-align:left;white-space:nowrap;overflow:hidden;color:var(--mtx-select-option-label-text-color, var(--mat-sys-on-surface))}.ng-dropdown-panel .ng-dropdown-panel-items .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-dropdown-panel-items .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-dropdown-panel-items .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))}[dir=rtl] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{text-align:right}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-left:32px}[dir=rtl] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-right:32px;padding-left:0}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{margin-right:6px;font-size:80%}[dir=rtl] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{margin-left:6px;margin-right:0}\n"] }]
|
|
584
|
+
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: MatFormFieldControl, useExisting: MtxSelect }], imports: [NgSelectModule, FormsModule, NgTemplateOutlet], template: "<ng-select\n #ngSelect\n [class.ng-select-invalid]=\"errorState\"\n [panelClass]=\"panelClass\"\n [(ngModel)]=\"value\"\n [placeholder]=\"placeholder || _intl.placeholder\"\n [items]=\"items\"\n [addTag]=\"addTag\"\n [addTagText]=\"addTagText || _intl.addTagText\"\n [appendTo]=\"appendTo\"\n [appearance]=\"appearance\"\n [bindLabel]=\"bindLabel\"\n [bindValue]=\"bindValue\"\n [closeOnSelect]=\"closeOnSelect\"\n [clearAllText]=\"clearAllText || _intl.clearAllText\"\n [clearable]=\"clearable\"\n [clearOnBackspace]=\"clearOnBackspace\"\n [panelPosition]=\"panelPosition\"\n [groupBy]=\"groupBy\"\n [groupValue]=\"groupValue\"\n [bufferAmount]=\"bufferAmount\"\n [hideSelected]=\"hideSelected\"\n [panelDisabled]=\"panelDisabled\"\n [compareWith]=\"compareWith\"\n [loading]=\"loading\"\n [loadingText]=\"loadingText || _intl.loadingText\"\n [markFirst]=\"markFirst\"\n [maxSelectedItems]=\"maxSelectedItems\"\n [multiple]=\"multiple\"\n [notFoundText]=\"notFoundText || _intl.notFoundText\"\n [readonly]=\"readonly || disabled\"\n [typeahead]=\"typeahead\"\n [typeToSearchText]=\"typeToSearchText || _intl.typeToSearchText\"\n [trackByFn]=\"trackByFn\"\n [searchable]=\"searchable\"\n [searchFn]=\"searchFn\"\n [searchWhileComposing]=\"searchWhileComposing\"\n [clearSearchOnAdd]=\"clearSearchOnAdd\"\n [selectableGroup]=\"selectableGroup\"\n [selectableGroupAsModel]=\"selectableGroupAsModel\"\n [selectOnTab]=\"selectOnTab\"\n [tabIndex]=\"tabIndex\"\n [openOnEnter]=\"openOnEnter\"\n [minTermLength]=\"minTermLength\"\n [editableSearchTerm]=\"editableSearchTerm\"\n [keyDownFn]=\"keyDownFn\"\n [virtualScroll]=\"virtualScroll\"\n [fixedPlaceholder]=\"fixedPlaceholder\"\n [deselectOnClick]=\"deselectOnClick\"\n [preventToggleOnRightClick]=\"preventToggleOnRightClick\"\n (blur)=\"blurEvent.emit($event)\"\n (focus)=\"focusEvent.emit($event)\"\n (change)=\"changeEvent.emit($event)\"\n (open)=\"openEvent.emit()\"\n (close)=\"closeEvent.emit()\"\n (search)=\"searchEvent.emit($event)\"\n (clear)=\"clearEvent.emit($event)\"\n (add)=\"addEvent.emit($event)\"\n (remove)=\"removeEvent.emit($event)\"\n (scroll)=\"scroll.emit($event)\"\n (scrollToEnd)=\"scrollToEnd.emit()\"\n [inputId]=\"inputId\"\n [ariaLabel]=\"ariaLabel\"\n [ariaLabelledby]=\"_getAriaLabelledby()\"\n [ariaDescribedby]=\"_ariaDescribedby\"\n [inputAttrs]=\"inputAttrs\"\n>\n @if (optionTemplate) {\n <ng-template\n ng-option-tmps\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"] }]
|
|
607
585
|
}], ctorParameters: () => [], propDecorators: { ngSelect: [{
|
|
608
586
|
type: ViewChild,
|
|
609
587
|
args: ['ngSelect', { static: true }]
|
|
588
|
+
}], mtxOptions: [{
|
|
589
|
+
type: ContentChildren,
|
|
590
|
+
args: [MtxOption, { descendants: true }]
|
|
610
591
|
}], optionTemplate: [{
|
|
611
592
|
type: ContentChild,
|
|
612
593
|
args: [MtxSelectOptionTemplate, { read: TemplateRef }]
|
|
@@ -646,9 +627,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
646
627
|
}], clearbuttonTemplate: [{
|
|
647
628
|
type: ContentChild,
|
|
648
629
|
args: [MtxSelectClearbuttonTemplate, { read: TemplateRef }]
|
|
649
|
-
}],
|
|
650
|
-
type:
|
|
651
|
-
args: [
|
|
630
|
+
}], blurEvent: [{
|
|
631
|
+
type: Output,
|
|
632
|
+
args: ['blur']
|
|
633
|
+
}], focusEvent: [{
|
|
634
|
+
type: Output,
|
|
635
|
+
args: ['focus']
|
|
636
|
+
}], changeEvent: [{
|
|
637
|
+
type: Output,
|
|
638
|
+
args: ['change']
|
|
639
|
+
}], openEvent: [{
|
|
640
|
+
type: Output,
|
|
641
|
+
args: ['open']
|
|
642
|
+
}], closeEvent: [{
|
|
643
|
+
type: Output,
|
|
644
|
+
args: ['close']
|
|
645
|
+
}], searchEvent: [{
|
|
646
|
+
type: Output,
|
|
647
|
+
args: ['search']
|
|
648
|
+
}], clearEvent: [{
|
|
649
|
+
type: Output,
|
|
650
|
+
args: ['clear']
|
|
651
|
+
}], addEvent: [{
|
|
652
|
+
type: Output,
|
|
653
|
+
args: ['add']
|
|
654
|
+
}], removeEvent: [{
|
|
655
|
+
type: Output,
|
|
656
|
+
args: ['remove']
|
|
657
|
+
}], scroll: [{
|
|
658
|
+
type: Output,
|
|
659
|
+
args: ['scroll']
|
|
660
|
+
}], scrollToEnd: [{
|
|
661
|
+
type: Output,
|
|
662
|
+
args: ['scrollToEnd']
|
|
652
663
|
}], addTag: [{
|
|
653
664
|
type: Input
|
|
654
665
|
}], addTagText: [{
|
|
@@ -664,17 +675,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
664
675
|
}], closeOnSelect: [{
|
|
665
676
|
type: Input,
|
|
666
677
|
args: [{ transform: booleanAttribute }]
|
|
667
|
-
}], clearAllText: [{
|
|
668
|
-
type: Input
|
|
669
678
|
}], clearable: [{
|
|
670
679
|
type: Input,
|
|
671
680
|
args: [{ transform: booleanAttribute }]
|
|
681
|
+
}], clearAllText: [{
|
|
682
|
+
type: Input
|
|
672
683
|
}], clearOnBackspace: [{
|
|
673
684
|
type: Input,
|
|
674
685
|
args: [{ transform: booleanAttribute }]
|
|
675
686
|
}], compareWith: [{
|
|
676
687
|
type: Input
|
|
677
|
-
}],
|
|
688
|
+
}], panelPosition: [{
|
|
678
689
|
type: Input
|
|
679
690
|
}], groupBy: [{
|
|
680
691
|
type: Input
|
|
@@ -696,8 +707,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
696
707
|
args: [{ transform: booleanAttribute }]
|
|
697
708
|
}], loadingText: [{
|
|
698
709
|
type: Input
|
|
699
|
-
}], labelForId: [{
|
|
700
|
-
type: Input
|
|
701
710
|
}], markFirst: [{
|
|
702
711
|
type: Input,
|
|
703
712
|
args: [{ transform: booleanAttribute }]
|
|
@@ -724,8 +733,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
724
733
|
args: [{ transform: booleanAttribute }]
|
|
725
734
|
}], trackByFn: [{
|
|
726
735
|
type: Input
|
|
727
|
-
}], inputAttrs: [{
|
|
728
|
-
type: Input
|
|
729
736
|
}], tabIndex: [{
|
|
730
737
|
type: Input
|
|
731
738
|
}], openOnEnter: [{
|
|
@@ -745,48 +752,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
745
752
|
type: Input
|
|
746
753
|
}], typeahead: [{
|
|
747
754
|
type: Input
|
|
748
|
-
}],
|
|
749
|
-
type: Input
|
|
755
|
+
}], panelDisabled: [{
|
|
756
|
+
type: Input,
|
|
757
|
+
args: [{ transform: booleanAttribute }]
|
|
750
758
|
}], fixedPlaceholder: [{
|
|
751
759
|
type: Input,
|
|
752
760
|
args: [{ transform: booleanAttribute }]
|
|
753
|
-
}],
|
|
761
|
+
}], preventToggleOnRightClick: [{
|
|
754
762
|
type: Input,
|
|
755
763
|
args: [{ transform: booleanAttribute }]
|
|
756
|
-
}], blurEvent: [{
|
|
757
|
-
type: Output,
|
|
758
|
-
args: ['blur']
|
|
759
|
-
}], focusEvent: [{
|
|
760
|
-
type: Output,
|
|
761
|
-
args: ['focus']
|
|
762
|
-
}], changeEvent: [{
|
|
763
|
-
type: Output,
|
|
764
|
-
args: ['change']
|
|
765
|
-
}], openEvent: [{
|
|
766
|
-
type: Output,
|
|
767
|
-
args: ['open']
|
|
768
|
-
}], closeEvent: [{
|
|
769
|
-
type: Output,
|
|
770
|
-
args: ['close']
|
|
771
|
-
}], searchEvent: [{
|
|
772
|
-
type: Output,
|
|
773
|
-
args: ['search']
|
|
774
|
-
}], clearEvent: [{
|
|
775
|
-
type: Output,
|
|
776
|
-
args: ['clear']
|
|
777
|
-
}], addEvent: [{
|
|
778
|
-
type: Output,
|
|
779
|
-
args: ['add']
|
|
780
|
-
}], removeEvent: [{
|
|
781
|
-
type: Output,
|
|
782
|
-
args: ['remove']
|
|
783
|
-
}], scroll: [{
|
|
784
|
-
type: Output,
|
|
785
|
-
args: ['scroll']
|
|
786
|
-
}], scrollToEnd: [{
|
|
787
|
-
type: Output,
|
|
788
|
-
args: ['scrollToEnd']
|
|
789
764
|
}], clearSearchOnAdd: [{
|
|
765
|
+
type: Input,
|
|
766
|
+
args: [{ transform: booleanAttribute }]
|
|
767
|
+
}], deselectOnClick: [{
|
|
768
|
+
type: Input,
|
|
769
|
+
args: [{ transform: booleanAttribute }]
|
|
770
|
+
}], inputId: [{
|
|
771
|
+
type: Input
|
|
772
|
+
}], inputAttrs: [{
|
|
773
|
+
type: Input
|
|
774
|
+
}], panelClass: [{
|
|
790
775
|
type: Input
|
|
791
776
|
}], items: [{
|
|
792
777
|
type: Input
|
|
@@ -810,13 +795,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
810
795
|
}], ariaLabelledby: [{
|
|
811
796
|
type: Input,
|
|
812
797
|
args: ['aria-labelledby']
|
|
798
|
+
}], ariaDescribedby: [{
|
|
799
|
+
type: Input,
|
|
800
|
+
args: ['aria-describedby']
|
|
813
801
|
}] } });
|
|
814
802
|
|
|
815
803
|
class MtxSelectModule {
|
|
816
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
817
|
-
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.
|
|
804
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
805
|
+
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.5", ngImport: i0, type: MtxSelectModule, imports: [CommonModule,
|
|
818
806
|
FormsModule,
|
|
819
|
-
ReactiveFormsModule,
|
|
820
807
|
NgSelectModule,
|
|
821
808
|
MtxSelect,
|
|
822
809
|
MtxOption,
|
|
@@ -847,19 +834,17 @@ class MtxSelectModule {
|
|
|
847
834
|
MtxSelectLoadingSpinnerTemplate,
|
|
848
835
|
MtxSelectPlaceholderTemplate,
|
|
849
836
|
MtxSelectClearbuttonTemplate] }); }
|
|
850
|
-
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.
|
|
837
|
+
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxSelectModule, imports: [CommonModule,
|
|
851
838
|
FormsModule,
|
|
852
|
-
ReactiveFormsModule,
|
|
853
839
|
NgSelectModule,
|
|
854
840
|
MtxSelect] }); }
|
|
855
841
|
}
|
|
856
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
842
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxSelectModule, decorators: [{
|
|
857
843
|
type: NgModule,
|
|
858
844
|
args: [{
|
|
859
845
|
imports: [
|
|
860
846
|
CommonModule,
|
|
861
847
|
FormsModule,
|
|
862
|
-
ReactiveFormsModule,
|
|
863
848
|
NgSelectModule,
|
|
864
849
|
MtxSelect,
|
|
865
850
|
MtxOption,
|