@ng-matero/extensions 14.6.4 → 14.8.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/_index.scss +4 -5
- package/_theming.scss +4 -5
- package/button/_button-theme.import.scss +2 -0
- package/button/_button-theme.scss +9 -0
- package/checkbox-group/checkbox-group.component.d.ts +6 -6
- package/{_all-color.scss → core/color/_all-color.scss} +2 -2
- package/core/pipes/index.d.ts +1 -0
- package/core/pipes/is-template-ref.pipe.d.ts +7 -0
- package/core/pipes/pipes.module.d.ts +3 -2
- package/core/theming/_all-theme.scss +53 -0
- package/core/theming/prebuilt/deeppurple-amber.scss +20 -0
- package/core/theming/prebuilt/indigo-pink.scss +20 -0
- package/core/theming/prebuilt/pink-bluegrey.scss +20 -0
- package/core/theming/prebuilt/purple-green.scss +20 -0
- package/datetimepicker/public-api.d.ts +1 -0
- package/esm2020/checkbox-group/checkbox-group.component.mjs +10 -11
- package/esm2020/core/pipes/index.mjs +2 -1
- package/esm2020/core/pipes/is-template-ref.pipe.mjs +14 -0
- package/esm2020/core/pipes/pipes.module.mjs +5 -4
- package/esm2020/datetimepicker/datetimepicker-input.mjs +1 -1
- package/esm2020/datetimepicker/public-api.mjs +2 -1
- package/esm2020/grid/cell.component.mjs +34 -48
- package/esm2020/grid/column-menu.component.mjs +3 -3
- package/esm2020/grid/grid.component.mjs +78 -69
- package/esm2020/grid/grid.interface.mjs +1 -1
- package/esm2020/grid/grid.module.mjs +24 -3
- package/esm2020/grid/grid.pipe.mjs +108 -0
- package/esm2020/grid/grid.service.mjs +22 -3
- package/esm2020/grid/public-api.mjs +2 -1
- package/esm2020/select/select.component.mjs +44 -33
- package/esm2020/split/interface.mjs +1 -1
- package/esm2020/split/split.component.mjs +24 -9
- package/esm2020/tooltip/tooltip-module.mjs +5 -4
- package/esm2020/tooltip/tooltip.mjs +24 -7
- package/fesm2015/mtxCheckboxGroup.mjs +7 -8
- package/fesm2015/mtxCheckboxGroup.mjs.map +1 -1
- package/fesm2015/mtxCore.mjs +17 -5
- package/fesm2015/mtxCore.mjs.map +1 -1
- package/fesm2015/mtxDatetimepicker.mjs +1 -1
- package/fesm2015/mtxDatetimepicker.mjs.map +1 -1
- package/fesm2015/mtxGrid.mjs +260 -119
- package/fesm2015/mtxGrid.mjs.map +1 -1
- package/fesm2015/mtxSelect.mjs +43 -31
- package/fesm2015/mtxSelect.mjs.map +1 -1
- package/fesm2015/mtxSplit.mjs +26 -8
- package/fesm2015/mtxSplit.mjs.map +1 -1
- package/fesm2015/mtxTooltip.mjs +27 -9
- package/fesm2015/mtxTooltip.mjs.map +1 -1
- package/fesm2020/mtxCheckboxGroup.mjs +7 -8
- package/fesm2020/mtxCheckboxGroup.mjs.map +1 -1
- package/fesm2020/mtxCore.mjs +17 -5
- package/fesm2020/mtxCore.mjs.map +1 -1
- package/fesm2020/mtxDatetimepicker.mjs +1 -1
- package/fesm2020/mtxDatetimepicker.mjs.map +1 -1
- package/fesm2020/mtxGrid.mjs +256 -119
- package/fesm2020/mtxGrid.mjs.map +1 -1
- package/fesm2020/mtxSelect.mjs +42 -31
- package/fesm2020/mtxSelect.mjs.map +1 -1
- package/fesm2020/mtxSplit.mjs +23 -8
- package/fesm2020/mtxSplit.mjs.map +1 -1
- package/fesm2020/mtxTooltip.mjs +27 -9
- package/fesm2020/mtxTooltip.mjs.map +1 -1
- package/form-group/_form-group-theme.scss +2 -2
- package/grid/_grid-theme.scss +5 -5
- package/grid/cell.component.d.ts +16 -12
- package/grid/cell.component.scss +1 -1
- package/grid/column-menu.component.d.ts +1 -1
- package/grid/grid.component.d.ts +23 -16
- package/grid/grid.interface.d.ts +63 -20
- package/grid/grid.module.d.ts +20 -19
- package/grid/grid.pipe.d.ts +31 -0
- package/grid/grid.service.d.ts +18 -3
- package/grid/public-api.d.ts +1 -0
- package/loader/_loader-theme.scss +1 -1
- package/package.json +17 -2
- package/prebuilt-themes/deeppurple-amber.css +1 -0
- package/prebuilt-themes/indigo-pink.css +1 -0
- package/prebuilt-themes/pink-bluegrey.css +1 -0
- package/prebuilt-themes/purple-green.css +1 -0
- package/select/select.component.d.ts +36 -15
- package/split/_split-theme.scss +1 -1
- package/split/interface.d.ts +12 -0
- package/split/split.component.d.ts +7 -4
- package/tooltip/tooltip-module.d.ts +3 -2
- package/tooltip/tooltip.d.ts +9 -2
- package/_all-theme.scss +0 -47
package/fesm2020/mtxSelect.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Component, ChangeDetectionStrategy, Input, Directive, EventEmitter, TemplateRef, ViewEncapsulation, Optional, Self, Inject, ViewChild, ContentChild, ContentChildren, Output, NgModule } from '@angular/core';
|
|
2
|
+
import { Component, ChangeDetectionStrategy, Input, Directive, InjectionToken, EventEmitter, TemplateRef, ViewEncapsulation, Optional, Self, Inject, ViewChild, ContentChild, ContentChildren, Output, NgModule } from '@angular/core';
|
|
3
3
|
import * as i4 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
5
|
import * as i3 from '@angular/forms';
|
|
@@ -8,7 +8,7 @@ import * as i5 from '@ng-select/ng-select';
|
|
|
8
8
|
import { NgSelectModule } from '@ng-select/ng-select';
|
|
9
9
|
import { coerceBooleanProperty } from '@angular/cdk/coercion';
|
|
10
10
|
import * as i2 from '@angular/material/core';
|
|
11
|
-
import { mixinErrorState } from '@angular/material/core';
|
|
11
|
+
import { mixinDisabled, mixinErrorState } from '@angular/material/core';
|
|
12
12
|
import * as i7 from '@angular/material/form-field';
|
|
13
13
|
import { MAT_FORM_FIELD, MatFormFieldControl } from '@angular/material/form-field';
|
|
14
14
|
import { Subject, merge } from 'rxjs';
|
|
@@ -190,10 +190,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
|
|
|
190
190
|
args: [{ selector: '[ng-loadingspinner-tmp]' }]
|
|
191
191
|
}], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
|
|
192
192
|
|
|
193
|
+
/** Injection token that can be used to specify default select options. */
|
|
194
|
+
const MTX_SELECT_DEFAULT_OPTIONS = new InjectionToken('mtx-select-default-options');
|
|
193
195
|
let nextUniqueId = 0;
|
|
194
196
|
// Boilerplate for applying mixins to MtxSelect.
|
|
195
197
|
/** @docs-private */
|
|
196
|
-
const _MtxSelectMixinBase = mixinErrorState(class {
|
|
198
|
+
const _MtxSelectMixinBase = mixinDisabled(mixinErrorState(class {
|
|
197
199
|
constructor(_defaultErrorStateMatcher, _parentForm, _parentFormGroup,
|
|
198
200
|
/**
|
|
199
201
|
* Form control bound to the component.
|
|
@@ -212,19 +214,23 @@ const _MtxSelectMixinBase = mixinErrorState(class {
|
|
|
212
214
|
*/
|
|
213
215
|
this.stateChanges = new Subject();
|
|
214
216
|
}
|
|
215
|
-
});
|
|
217
|
+
}));
|
|
216
218
|
class MtxSelectComponent extends _MtxSelectMixinBase {
|
|
217
|
-
constructor(_changeDetectorRef, _elementRef, _focusMonitor, _defaultErrorStateMatcher, _parentForm, _parentFormGroup, ngControl, _parentFormField) {
|
|
219
|
+
constructor(_changeDetectorRef, _elementRef, _focusMonitor, _defaultErrorStateMatcher, _parentForm, _parentFormGroup, ngControl, _parentFormField, _defaultOptions) {
|
|
218
220
|
super(_defaultErrorStateMatcher, _parentForm, _parentFormGroup, ngControl);
|
|
219
221
|
this._changeDetectorRef = _changeDetectorRef;
|
|
220
222
|
this._elementRef = _elementRef;
|
|
221
223
|
this._focusMonitor = _focusMonitor;
|
|
222
224
|
this._parentFormField = _parentFormField;
|
|
225
|
+
this._defaultOptions = _defaultOptions;
|
|
223
226
|
this.addTag = false;
|
|
224
|
-
this.addTagText = 'Add item';
|
|
227
|
+
this.addTagText = this._defaultOptions?.addTagText ?? 'Add item';
|
|
225
228
|
this.appearance = 'underline';
|
|
229
|
+
this.appendTo = this._defaultOptions?.appendTo ?? 'body';
|
|
230
|
+
this.bindLabel = this._defaultOptions?.bindLabel;
|
|
231
|
+
this.bindValue = this._defaultOptions?.bindValue;
|
|
226
232
|
this.closeOnSelect = true;
|
|
227
|
-
this.clearAllText = 'Clear all';
|
|
233
|
+
this.clearAllText = this._defaultOptions?.clearAllText ?? 'Clear all';
|
|
228
234
|
this.clearable = true;
|
|
229
235
|
this.clearOnBackspace = true;
|
|
230
236
|
this.dropdownPosition = 'auto';
|
|
@@ -232,11 +238,11 @@ class MtxSelectComponent extends _MtxSelectMixinBase {
|
|
|
232
238
|
this.selectableGroupAsModel = true;
|
|
233
239
|
this.hideSelected = false;
|
|
234
240
|
this.loading = false;
|
|
235
|
-
this.loadingText = 'Loading...';
|
|
241
|
+
this.loadingText = this._defaultOptions?.loadingText ?? 'Loading...';
|
|
236
242
|
this.labelForId = null;
|
|
237
243
|
this.markFirst = true;
|
|
238
244
|
this.multiple = false;
|
|
239
|
-
this.notFoundText = 'No items found';
|
|
245
|
+
this.notFoundText = this._defaultOptions?.notFoundText ?? 'No items found';
|
|
240
246
|
this.searchable = true;
|
|
241
247
|
this.readonly = false;
|
|
242
248
|
this.searchFn = null;
|
|
@@ -244,11 +250,12 @@ class MtxSelectComponent extends _MtxSelectMixinBase {
|
|
|
244
250
|
this.selectOnTab = false;
|
|
245
251
|
this.trackByFn = null;
|
|
246
252
|
this.inputAttrs = {};
|
|
253
|
+
this.openOnEnter = this._defaultOptions?.openOnEnter ?? true;
|
|
247
254
|
this.minTermLength = 0;
|
|
248
255
|
this.editableSearchTerm = false;
|
|
249
256
|
this.keyDownFn = (_) => true;
|
|
250
257
|
this.virtualScroll = false;
|
|
251
|
-
this.typeToSearchText = 'Type to search';
|
|
258
|
+
this.typeToSearchText = this._defaultOptions?.typeToSearchText ?? 'Type to search';
|
|
252
259
|
this.blurEvent = new EventEmitter();
|
|
253
260
|
this.focusEvent = new EventEmitter();
|
|
254
261
|
this.changeEvent = new EventEmitter();
|
|
@@ -260,6 +267,7 @@ class MtxSelectComponent extends _MtxSelectMixinBase {
|
|
|
260
267
|
this.removeEvent = new EventEmitter();
|
|
261
268
|
this.scroll = new EventEmitter();
|
|
262
269
|
this.scrollToEnd = new EventEmitter();
|
|
270
|
+
this._clearSearchOnAdd = this._defaultOptions?.clearSearchOnAdd;
|
|
263
271
|
this._items = [];
|
|
264
272
|
this._itemsAreUsed = false;
|
|
265
273
|
/** Emits whenever the component is destroyed. */
|
|
@@ -269,8 +277,8 @@ class MtxSelectComponent extends _MtxSelectMixinBase {
|
|
|
269
277
|
this.stateChanges = new Subject();
|
|
270
278
|
/** Unique id for this select. */
|
|
271
279
|
this._uid = `mtx-select-${nextUniqueId++}`;
|
|
280
|
+
this._placeholder = this._defaultOptions?.placeholder;
|
|
272
281
|
this._focused = false;
|
|
273
|
-
this._disabled = false;
|
|
274
282
|
/** Aria label of the select. */
|
|
275
283
|
this.ariaLabel = '';
|
|
276
284
|
/** Input that can be used to specify the `aria-labelledby` attribute. */
|
|
@@ -362,16 +370,6 @@ class MtxSelectComponent extends _MtxSelectMixinBase {
|
|
|
362
370
|
this._required = coerceBooleanProperty(value);
|
|
363
371
|
this.stateChanges.next();
|
|
364
372
|
}
|
|
365
|
-
/** Whether the select is disabled. */
|
|
366
|
-
get disabled() {
|
|
367
|
-
return this._disabled;
|
|
368
|
-
}
|
|
369
|
-
set disabled(value) {
|
|
370
|
-
this._disabled = coerceBooleanProperty(value);
|
|
371
|
-
this.readonly = this._disabled;
|
|
372
|
-
this.stateChanges.next();
|
|
373
|
-
this._changeDetectorRef.markForCheck();
|
|
374
|
-
}
|
|
375
373
|
/** Whether or not the overlay panel is open. */
|
|
376
374
|
get panelOpen() {
|
|
377
375
|
return !!this.ngSelect.isOpen;
|
|
@@ -389,10 +387,17 @@ class MtxSelectComponent extends _MtxSelectMixinBase {
|
|
|
389
387
|
}
|
|
390
388
|
}
|
|
391
389
|
ngDoCheck() {
|
|
390
|
+
const ngControl = this.ngControl;
|
|
392
391
|
if (this.ngControl) {
|
|
393
|
-
//
|
|
394
|
-
|
|
395
|
-
|
|
392
|
+
// The disabled state might go out of sync if the form group is swapped out. See #17860.
|
|
393
|
+
if (this._previousControl !== ngControl.control) {
|
|
394
|
+
if (this._previousControl !== undefined &&
|
|
395
|
+
ngControl.disabled !== null &&
|
|
396
|
+
ngControl.disabled !== this.disabled) {
|
|
397
|
+
this.disabled = ngControl.disabled;
|
|
398
|
+
}
|
|
399
|
+
this._previousControl = ngControl.control;
|
|
400
|
+
}
|
|
396
401
|
this.updateErrorState();
|
|
397
402
|
}
|
|
398
403
|
}
|
|
@@ -426,11 +431,14 @@ class MtxSelectComponent extends _MtxSelectMixinBase {
|
|
|
426
431
|
*/
|
|
427
432
|
setDisabledState(isDisabled) {
|
|
428
433
|
this.disabled = isDisabled;
|
|
434
|
+
this.readonly = isDisabled;
|
|
435
|
+
this._changeDetectorRef.markForCheck();
|
|
436
|
+
this.stateChanges.next();
|
|
429
437
|
}
|
|
430
438
|
/** Implemented as part of MatFormFieldControl. */
|
|
431
439
|
onContainerClick(event) {
|
|
432
440
|
const target = event.target;
|
|
433
|
-
if (/mat-form-field|mtx-select/g.test(target.parentElement?.classList[0] || '')) {
|
|
441
|
+
if (/mat-mdc-form-field|mtx-select/g.test(target.parentElement?.classList[0] || '')) {
|
|
434
442
|
this.focus();
|
|
435
443
|
this.open();
|
|
436
444
|
}
|
|
@@ -510,8 +518,8 @@ class MtxSelectComponent extends _MtxSelectMixinBase {
|
|
|
510
518
|
this.ngSelect.blur();
|
|
511
519
|
}
|
|
512
520
|
}
|
|
513
|
-
/** @nocollapse */ MtxSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: MtxSelectComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.FocusMonitor }, { token: i2.ErrorStateMatcher }, { token: i3.NgForm, optional: true }, { token: i3.FormGroupDirective, optional: true }, { token: i3.NgControl, optional: true, self: true }, { token: MAT_FORM_FIELD, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
514
|
-
/** @nocollapse */ MtxSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: MtxSelectComponent, selector: "mtx-select", inputs: { addTag: "addTag", addTagText: "addTagText", appearance: "appearance", appendTo: "appendTo", bindLabel: "bindLabel", bindValue: "bindValue", closeOnSelect: "closeOnSelect", clearAllText: "clearAllText", clearable: "clearable", clearOnBackspace: "clearOnBackspace", compareWith: "compareWith", dropdownPosition: "dropdownPosition", groupBy: "groupBy", groupValue: "groupValue", selectableGroup: "selectableGroup", selectableGroupAsModel: "selectableGroupAsModel", hideSelected: "hideSelected", isOpen: "isOpen", loading: "loading", loadingText: "loadingText", labelForId: "labelForId", markFirst: "markFirst", maxSelectedItems: "maxSelectedItems", multiple: "multiple", notFoundText: "notFoundText", searchable: "searchable", readonly: "readonly", searchFn: "searchFn", searchWhileComposing: "searchWhileComposing", selectOnTab: "selectOnTab", trackByFn: "trackByFn", inputAttrs: "inputAttrs", tabIndex: "tabIndex", openOnEnter: "openOnEnter", minTermLength: "minTermLength", editableSearchTerm: "editableSearchTerm", keyDownFn: "keyDownFn", virtualScroll: "virtualScroll", typeToSearchText: "typeToSearchText", typeahead: "typeahead", clearSearchOnAdd: "clearSearchOnAdd", items: "items", value: "value", id: "id", placeholder: "placeholder", required: "required", disabled: "disabled", 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: MtxSelectComponent }], queries: [{ propertyName: "optionTemplate", first: true, predicate: MtxSelectOptionTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "optgroupTemplate", first: true, predicate: MtxSelectOptgroupTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "labelTemplate", first: true, predicate: MtxSelectLabelTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "multiLabelTemplate", first: true, predicate: MtxSelectMultiLabelTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "headerTemplate", first: true, predicate: MtxSelectHeaderTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "footerTemplate", first: true, predicate: MtxSelectFooterTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "notFoundTemplate", first: true, predicate: MtxSelectNotFoundTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "typeToSearchTemplate", first: true, predicate: MtxSelectTypeToSearchTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "loadingTextTemplate", first: true, predicate: MtxSelectLoadingTextTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "tagTemplate", first: true, predicate: MtxSelectTagTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "loadingSpinnerTemplate", first: true, predicate: MtxSelectLoadingSpinnerTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "mtxOptions", predicate: MtxOptionComponent, descendants: true }], viewQueries: [{ propertyName: "ngSelect", first: true, predicate: ["ngSelect"], descendants: true, static: true }], exportAs: ["mtxSelect"], usesInheritance: true, ngImport: i0, template: "<ng-select #ngSelect [class.ng-select-invalid]=\"errorState\"\n [(ngModel)]=\"value\"\n [ngModelOptions]=\"{standalone: true}\"\n [placeholder]=\"placeholder\"\n [items]=\"items\"\n [addTag]=\"addTag\"\n [addTagText]=\"addTagText\"\n [appendTo]=\"appendTo\"\n [appearance]=\"appearance\"\n [bindLabel]=\"bindLabel\"\n [bindValue]=\"bindValue\"\n [closeOnSelect]=\"closeOnSelect\"\n [clearAllText]=\"clearAllText\"\n [clearable]=\"clearable\"\n [clearOnBackspace]=\"clearOnBackspace\"\n [dropdownPosition]=\"dropdownPosition\"\n [groupBy]=\"groupBy\"\n [groupValue]=\"groupValue\"\n [hideSelected]=\"hideSelected\"\n [isOpen]=\"isOpen\"\n [inputAttrs]=\"inputAttrs\"\n [loading]=\"loading\"\n [loadingText]=\"loadingText\"\n [labelForId]=\"labelForId\"\n [markFirst]=\"markFirst\"\n [maxSelectedItems]=\"maxSelectedItems\"\n [multiple]=\"multiple\"\n [notFoundText]=\"notFoundText\"\n [readonly]=\"readonly\"\n [typeahead]=\"typeahead\"\n [typeToSearchText]=\"typeToSearchText\"\n [trackByFn]=\"trackByFn\"\n [searchable]=\"searchable\"\n [searchFn]=\"searchFn\"\n [searchWhileComposing]=\"searchWhileComposing\"\n [clearSearchOnAdd]=\"clearSearchOnAdd\"\n [selectableGroup]=\"selectableGroup\"\n [selectableGroupAsModel]=\"selectableGroupAsModel\"\n [selectOnTab]=\"selectOnTab\"\n [tabIndex]=\"tabIndex\"\n [openOnEnter]=\"openOnEnter\"\n [minTermLength]=\"minTermLength\"\n [editableSearchTerm]=\"editableSearchTerm\"\n [keyDownFn]=\"keyDownFn\"\n [virtualScroll]=\"virtualScroll\"\n (blur)=\"blurEvent.emit($event)\"\n (focus)=\"focusEvent.emit($event)\"\n (change)=\"changeEvent.emit($event)\"\n (open)=\"openEvent.emit($event)\"\n (close)=\"closeEvent.emit($event)\"\n (search)=\"searchEvent.emit($event)\"\n (clear)=\"clearEvent.emit($event)\"\n (add)=\"addEvent.emit($event)\"\n (remove)=\"removeEvent.emit($event)\"\n (scroll)=\"scroll.emit($event)\"\n (scrollToEnd)=\"scrollToEnd.emit($event)\">\n\n <ng-container *ngIf=\"optionTemplate\">\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\"\n let-searchTerm=\"searchTerm\">\n <ng-template [ngTemplateOutlet]=\"optionTemplate\"\n [ngTemplateOutletContext]=\"{ item: item, item$: item$, index: index, searchTerm: searchTerm }\">\n </ng-template>\n </ng-template>\n </ng-container>\n\n <ng-container *ngIf=\"optgroupTemplate\">\n <ng-template ng-optgroup-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\"\n let-searchTerm=\"searchTerm\">\n <ng-template [ngTemplateOutlet]=\"optgroupTemplate\"\n [ngTemplateOutletContext]=\"{ item: item, item$: item$, index: index, searchTerm: searchTerm }\">\n </ng-template>\n </ng-template>\n </ng-container>\n\n <ng-container *ngIf=\"labelTemplate\">\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\" let-label=\"label\">\n <ng-template [ngTemplateOutlet]=\"labelTemplate\"\n [ngTemplateOutletContext]=\"{ item: item, clear: clear, label: label }\">\n </ng-template>\n </ng-template>\n </ng-container>\n\n <ng-container *ngIf=\"multiLabelTemplate\">\n <ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n <ng-template [ngTemplateOutlet]=\"multiLabelTemplate\"\n [ngTemplateOutletContext]=\"{ items: items, clear: clear }\">\n </ng-template>\n </ng-template>\n </ng-container>\n\n <ng-container *ngIf=\"headerTemplate\">\n <ng-template ng-header-tmp>\n <ng-template [ngTemplateOutlet]=\"headerTemplate\">\n </ng-template>\n </ng-template>\n </ng-container>\n\n <ng-container *ngIf=\"footerTemplate\">\n <ng-template ng-footer-tmp>\n <ng-template [ngTemplateOutlet]=\"footerTemplate\">\n </ng-template>\n </ng-template>\n </ng-container>\n\n <ng-container *ngIf=\"notFoundTemplate\">\n <ng-template ng-notfound-tmp let-searchTerm=\"searchTerm\">\n <ng-template [ngTemplateOutlet]=\"notFoundTemplate\"\n [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\">\n </ng-template>\n </ng-template>\n </ng-container>\n\n <ng-container *ngIf=\"typeToSearchTemplate\">\n <ng-template ng-typetosearch-tmp>\n <ng-template [ngTemplateOutlet]=\"typeToSearchTemplate\">\n </ng-template>\n </ng-template>\n </ng-container>\n\n <ng-container *ngIf=\"loadingTextTemplate\">\n <ng-template ng-loadingtext-tmp let-searchTerm=\"searchTerm\">\n <ng-template [ngTemplateOutlet]=\"loadingTextTemplate\"\n [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\">\n </ng-template>\n </ng-template>\n </ng-container>\n\n <ng-container *ngIf=\"tagTemplate\">\n <ng-template ng-tag-tmp let-searchTerm=\"searchTerm\">\n <ng-template [ngTemplateOutlet]=\"tagTemplate\"\n [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\">\n </ng-template>\n </ng-template>\n </ng-container>\n\n <ng-container *ngIf=\"loadingSpinnerTemplate\">\n <ng-template ng-loadingspinner-tmp>\n <ng-template [ngTemplateOutlet]=\"loadingSpinnerTemplate\">\n </ng-template>\n </ng-template>\n </ng-container>\n\n</ng-select>\n", styles: [".ng-select{padding-top:1.28125em;margin-top:-1.28125em;padding-bottom:.4375em;margin-bottom:-.4375em}.mat-form-field-appearance-fill .ng-select{padding:.25em .75em .75em;margin:-.25em -.75em -.75em}.mat-form-field-appearance-outline .ng-select{padding:1em .75em;margin:-1em -.75em}.ng-select .ng-select-container,.ng-select .ng-select-container .ng-value-container{align-items:center}.ng-select .ng-select-container .ng-value-container .ng-input>input{font:inherit;padding:0}.mat-form-field-has-label .ng-select .ng-placeholder{transition:opacity .2s;opacity:0}.mat-form-field-has-label .mtx-select-floating .ng-select .ng-placeholder{opacity:1}.ng-select .ng-has-value .ng-placeholder{display:none}.ng-select.ng-select-opened .ng-arrow-wrapper .ng-arrow{top:-2px;border-width:0 5px 5px}.ng-select.ng-select-single.ng-select-filtered .ng-placeholder{display:initial;visibility:hidden}.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder:after,.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-value:after{display:inline-block;content:\"\"}.ng-select.ng-select-multiple .ng-select-container .ng-value-container{margin:-4px 0}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{margin:4px;border-radius:16px;font-size:.875em;line-height:18px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label{display:inline-block;margin:0 8px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{display:inline-block;width:18px;height:18px;border-radius:100%;text-align:center}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{margin-right:-4px}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{margin-left:-4px;margin-right:auto}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{margin-left:-4px}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{margin-right:-4px;margin-left:auto}.ng-select .ng-clear-wrapper{height:18px;text-align:center}.ng-select .ng-arrow-wrapper{width:18px}.ng-select .ng-arrow-wrapper .ng-arrow{border-width:5px 5px 2px;border-style:solid}.ng-dropdown-panel{left:0}[dir=rtl] .ng-dropdown-panel{right:0;left:auto}.ng-dropdown-panel.ng-select-bottom{top:100%;border-bottom-left-radius:4px;border-bottom-right-radius:4px;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.ng-dropdown-panel.ng-select-top{bottom:100%;border-top-left-radius:4px;border-top-right-radius:4px;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.ng-dropdown-panel .ng-dropdown-header,.ng-dropdown-panel .ng-dropdown-footer{padding:14px 16px}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{height:3em;padding:14px 16px;font-weight:500;-webkit-user-select:none;user-select:none;cursor:pointer}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-disabled{cursor:default}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{position:relative;padding:14px 16px;text-overflow:ellipsis;text-decoration:none;text-align:left;white-space:nowrap;overflow:hidden}[dir=rtl] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{text-align:right}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-left:32px}[dir=rtl] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-right:32px;padding-left:0}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{padding-right:5px;font-size:80%;font-weight:400}[dir=rtl] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{padding-left:5px;padding-right:0}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i5.NgOptgroupTemplateDirective, selector: "[ng-optgroup-tmp]" }, { kind: "directive", type: i5.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i5.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i5.NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "directive", type: i5.NgHeaderTemplateDirective, selector: "[ng-header-tmp]" }, { kind: "directive", type: i5.NgFooterTemplateDirective, selector: "[ng-footer-tmp]" }, { kind: "directive", type: i5.NgNotFoundTemplateDirective, selector: "[ng-notfound-tmp]" }, { kind: "directive", type: i5.NgTypeToSearchTemplateDirective, selector: "[ng-typetosearch-tmp]" }, { kind: "directive", type: i5.NgLoadingTextTemplateDirective, selector: "[ng-loadingtext-tmp]" }, { kind: "directive", type: i5.NgTagTemplateDirective, selector: "[ng-tag-tmp]" }, { kind: "directive", type: i5.NgLoadingSpinnerTemplateDirective, selector: "[ng-loadingspinner-tmp]" }, { kind: "directive", type: MtxSelectOptgroupTemplateDirective, selector: "[ng-optgroup-tmp]" }, { kind: "directive", type: MtxSelectOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: MtxSelectLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: MtxSelectMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "directive", type: MtxSelectHeaderTemplateDirective, selector: "[ng-header-tmp]" }, { kind: "directive", type: MtxSelectFooterTemplateDirective, selector: "[ng-footer-tmp]" }, { kind: "directive", type: MtxSelectNotFoundTemplateDirective, selector: "[ng-notfound-tmp]" }, { kind: "directive", type: MtxSelectTypeToSearchTemplateDirective, selector: "[ng-typetosearch-tmp]" }, { kind: "directive", type: MtxSelectLoadingTextTemplateDirective, selector: "[ng-loadingtext-tmp]" }, { kind: "directive", type: MtxSelectTagTemplateDirective, selector: "[ng-tag-tmp]" }, { kind: "directive", type: MtxSelectLoadingSpinnerTemplateDirective, selector: "[ng-loadingspinner-tmp]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
521
|
+
/** @nocollapse */ MtxSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: MtxSelectComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.FocusMonitor }, { token: i2.ErrorStateMatcher }, { token: i3.NgForm, optional: true }, { token: i3.FormGroupDirective, optional: true }, { token: i3.NgControl, optional: true, self: true }, { token: MAT_FORM_FIELD, optional: true }, { token: MTX_SELECT_DEFAULT_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
522
|
+
/** @nocollapse */ MtxSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: MtxSelectComponent, selector: "mtx-select", inputs: { disabled: "disabled", addTag: "addTag", addTagText: "addTagText", appearance: "appearance", appendTo: "appendTo", bindLabel: "bindLabel", bindValue: "bindValue", closeOnSelect: "closeOnSelect", clearAllText: "clearAllText", clearable: "clearable", clearOnBackspace: "clearOnBackspace", compareWith: "compareWith", dropdownPosition: "dropdownPosition", groupBy: "groupBy", groupValue: "groupValue", selectableGroup: "selectableGroup", selectableGroupAsModel: "selectableGroupAsModel", hideSelected: "hideSelected", isOpen: "isOpen", loading: "loading", loadingText: "loadingText", labelForId: "labelForId", markFirst: "markFirst", maxSelectedItems: "maxSelectedItems", multiple: "multiple", notFoundText: "notFoundText", searchable: "searchable", readonly: "readonly", searchFn: "searchFn", searchWhileComposing: "searchWhileComposing", selectOnTab: "selectOnTab", trackByFn: "trackByFn", inputAttrs: "inputAttrs", tabIndex: "tabIndex", openOnEnter: "openOnEnter", minTermLength: "minTermLength", editableSearchTerm: "editableSearchTerm", keyDownFn: "keyDownFn", virtualScroll: "virtualScroll", typeToSearchText: "typeToSearchText", typeahead: "typeahead", clearSearchOnAdd: "clearSearchOnAdd", items: "items", value: "value", id: "id", placeholder: "placeholder", required: "required", 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: MtxSelectComponent }], queries: [{ propertyName: "optionTemplate", first: true, predicate: MtxSelectOptionTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "optgroupTemplate", first: true, predicate: MtxSelectOptgroupTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "labelTemplate", first: true, predicate: MtxSelectLabelTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "multiLabelTemplate", first: true, predicate: MtxSelectMultiLabelTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "headerTemplate", first: true, predicate: MtxSelectHeaderTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "footerTemplate", first: true, predicate: MtxSelectFooterTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "notFoundTemplate", first: true, predicate: MtxSelectNotFoundTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "typeToSearchTemplate", first: true, predicate: MtxSelectTypeToSearchTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "loadingTextTemplate", first: true, predicate: MtxSelectLoadingTextTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "tagTemplate", first: true, predicate: MtxSelectTagTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "loadingSpinnerTemplate", first: true, predicate: MtxSelectLoadingSpinnerTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "mtxOptions", predicate: MtxOptionComponent, descendants: true }], viewQueries: [{ propertyName: "ngSelect", first: true, predicate: ["ngSelect"], descendants: true, static: true }], exportAs: ["mtxSelect"], usesInheritance: true, ngImport: i0, template: "<ng-select #ngSelect\n [class.ng-select-invalid]=\"errorState\"\n [(ngModel)]=\"value\"\n [ngModelOptions]=\"{standalone: true}\"\n [placeholder]=\"placeholder\"\n [items]=\"items\"\n [addTag]=\"addTag\"\n [addTagText]=\"addTagText\"\n [appendTo]=\"appendTo\"\n [appearance]=\"appearance\"\n [bindLabel]=\"bindLabel!\"\n [bindValue]=\"bindValue!\"\n [closeOnSelect]=\"closeOnSelect\"\n [clearAllText]=\"clearAllText\"\n [clearable]=\"clearable\"\n [clearOnBackspace]=\"clearOnBackspace\"\n [dropdownPosition]=\"dropdownPosition\"\n [groupBy]=\"groupBy\"\n [groupValue]=\"groupValue\"\n [hideSelected]=\"hideSelected\"\n [isOpen]=\"isOpen\"\n [inputAttrs]=\"inputAttrs\"\n [loading]=\"loading\"\n [loadingText]=\"loadingText\"\n [labelForId]=\"labelForId\"\n [markFirst]=\"markFirst\"\n [maxSelectedItems]=\"maxSelectedItems\"\n [multiple]=\"multiple\"\n [notFoundText]=\"notFoundText\"\n [readonly]=\"readonly\"\n [typeahead]=\"typeahead\"\n [typeToSearchText]=\"typeToSearchText\"\n [trackByFn]=\"trackByFn\"\n [searchable]=\"searchable\"\n [searchFn]=\"searchFn\"\n [searchWhileComposing]=\"searchWhileComposing\"\n [clearSearchOnAdd]=\"clearSearchOnAdd\"\n [selectableGroup]=\"selectableGroup\"\n [selectableGroupAsModel]=\"selectableGroupAsModel\"\n [selectOnTab]=\"selectOnTab\"\n [tabIndex]=\"tabIndex\"\n [openOnEnter]=\"openOnEnter\"\n [minTermLength]=\"minTermLength\"\n [editableSearchTerm]=\"editableSearchTerm\"\n [keyDownFn]=\"keyDownFn\"\n [virtualScroll]=\"virtualScroll\"\n (blur)=\"blurEvent.emit($event)\"\n (focus)=\"focusEvent.emit($event)\"\n (change)=\"changeEvent.emit($event)\"\n (open)=\"openEvent.emit($event)\"\n (close)=\"closeEvent.emit($event)\"\n (search)=\"searchEvent.emit($event)\"\n (clear)=\"clearEvent.emit($event)\"\n (add)=\"addEvent.emit($event)\"\n (remove)=\"removeEvent.emit($event)\"\n (scroll)=\"scroll.emit($event)\"\n (scrollToEnd)=\"scrollToEnd.emit($event)\">\n\n <ng-container *ngIf=\"optionTemplate\">\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\"\n let-searchTerm=\"searchTerm\">\n <ng-template [ngTemplateOutlet]=\"optionTemplate\"\n [ngTemplateOutletContext]=\"{ item: item, item$: item$, index: index, searchTerm: searchTerm }\">\n </ng-template>\n </ng-template>\n </ng-container>\n\n <ng-container *ngIf=\"optgroupTemplate\">\n <ng-template ng-optgroup-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\"\n let-searchTerm=\"searchTerm\">\n <ng-template [ngTemplateOutlet]=\"optgroupTemplate\"\n [ngTemplateOutletContext]=\"{ item: item, item$: item$, index: index, searchTerm: searchTerm }\">\n </ng-template>\n </ng-template>\n </ng-container>\n\n <ng-container *ngIf=\"labelTemplate\">\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\" let-label=\"label\">\n <ng-template [ngTemplateOutlet]=\"labelTemplate\"\n [ngTemplateOutletContext]=\"{ item: item, clear: clear, label: label }\">\n </ng-template>\n </ng-template>\n </ng-container>\n\n <ng-container *ngIf=\"multiLabelTemplate\">\n <ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n <ng-template [ngTemplateOutlet]=\"multiLabelTemplate\"\n [ngTemplateOutletContext]=\"{ items: items, clear: clear }\">\n </ng-template>\n </ng-template>\n </ng-container>\n\n <ng-container *ngIf=\"headerTemplate\">\n <ng-template ng-header-tmp>\n <ng-template [ngTemplateOutlet]=\"headerTemplate\">\n </ng-template>\n </ng-template>\n </ng-container>\n\n <ng-container *ngIf=\"footerTemplate\">\n <ng-template ng-footer-tmp>\n <ng-template [ngTemplateOutlet]=\"footerTemplate\">\n </ng-template>\n </ng-template>\n </ng-container>\n\n <ng-container *ngIf=\"notFoundTemplate\">\n <ng-template ng-notfound-tmp let-searchTerm=\"searchTerm\">\n <ng-template [ngTemplateOutlet]=\"notFoundTemplate\"\n [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\">\n </ng-template>\n </ng-template>\n </ng-container>\n\n <ng-container *ngIf=\"typeToSearchTemplate\">\n <ng-template ng-typetosearch-tmp>\n <ng-template [ngTemplateOutlet]=\"typeToSearchTemplate\">\n </ng-template>\n </ng-template>\n </ng-container>\n\n <ng-container *ngIf=\"loadingTextTemplate\">\n <ng-template ng-loadingtext-tmp let-searchTerm=\"searchTerm\">\n <ng-template [ngTemplateOutlet]=\"loadingTextTemplate\"\n [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\">\n </ng-template>\n </ng-template>\n </ng-container>\n\n <ng-container *ngIf=\"tagTemplate\">\n <ng-template ng-tag-tmp let-searchTerm=\"searchTerm\">\n <ng-template [ngTemplateOutlet]=\"tagTemplate\"\n [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\">\n </ng-template>\n </ng-template>\n </ng-container>\n\n <ng-container *ngIf=\"loadingSpinnerTemplate\">\n <ng-template ng-loadingspinner-tmp>\n <ng-template [ngTemplateOutlet]=\"loadingSpinnerTemplate\">\n </ng-template>\n </ng-template>\n </ng-container>\n\n</ng-select>\n", styles: [".ng-select{padding-top:1.28125em;margin-top:-1.28125em;padding-bottom:.4375em;margin-bottom:-.4375em}.mat-form-field-appearance-fill .ng-select{padding:.25em .75em .75em;margin:-.25em -.75em -.75em}.mat-form-field-appearance-outline .ng-select{padding:1em .75em;margin:-1em -.75em}.ng-select .ng-select-container,.ng-select .ng-select-container .ng-value-container{align-items:center}.ng-select .ng-select-container .ng-value-container .ng-input>input{font:inherit;padding:0}.mat-form-field-has-label .ng-select .ng-placeholder{transition:opacity .2s;opacity:0}.mat-form-field-has-label .mtx-select-floating .ng-select .ng-placeholder{opacity:1}.ng-select .ng-has-value .ng-placeholder{display:none}.ng-select.ng-select-opened .ng-arrow-wrapper .ng-arrow{top:-2px;border-width:0 5px 5px}.ng-select.ng-select-single.ng-select-filtered .ng-placeholder{display:initial;visibility:hidden}.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder:after,.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-value:after{display:inline-block;content:\"\"}.ng-select.ng-select-multiple .ng-select-container .ng-value-container{margin:-4px 0}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{margin:4px;border-radius:16px;font-size:.875em;line-height:18px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label{display:inline-block;margin:0 8px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{display:inline-block;width:18px;height:18px;border-radius:100%;text-align:center}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{margin-right:-4px}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{margin-left:-4px;margin-right:auto}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{margin-left:-4px}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{margin-right:-4px;margin-left:auto}.ng-select .ng-clear-wrapper{height:18px;text-align:center}.ng-select .ng-arrow-wrapper{width:18px}.ng-select .ng-arrow-wrapper .ng-arrow{border-width:5px 5px 2px;border-style:solid}.ng-dropdown-panel{left:0}[dir=rtl] .ng-dropdown-panel{right:0;left:auto}.ng-dropdown-panel.ng-select-bottom{top:100%;border-bottom-left-radius:4px;border-bottom-right-radius:4px;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.ng-dropdown-panel.ng-select-top{bottom:100%;border-top-left-radius:4px;border-top-right-radius:4px;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.ng-dropdown-panel .ng-dropdown-header,.ng-dropdown-panel .ng-dropdown-footer{padding:14px 16px}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{height:3em;padding:14px 16px;font-weight:500;-webkit-user-select:none;user-select:none;cursor:pointer}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-disabled{cursor:default}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{position:relative;padding:14px 16px;text-overflow:ellipsis;text-decoration:none;text-align:left;white-space:nowrap;overflow:hidden}[dir=rtl] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{text-align:right}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-left:32px}[dir=rtl] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-right:32px;padding-left:0}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{padding-right:5px;font-size:80%;font-weight:400}[dir=rtl] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{padding-left:5px;padding-right:0}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i5.NgOptgroupTemplateDirective, selector: "[ng-optgroup-tmp]" }, { kind: "directive", type: i5.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i5.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i5.NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "directive", type: i5.NgHeaderTemplateDirective, selector: "[ng-header-tmp]" }, { kind: "directive", type: i5.NgFooterTemplateDirective, selector: "[ng-footer-tmp]" }, { kind: "directive", type: i5.NgNotFoundTemplateDirective, selector: "[ng-notfound-tmp]" }, { kind: "directive", type: i5.NgTypeToSearchTemplateDirective, selector: "[ng-typetosearch-tmp]" }, { kind: "directive", type: i5.NgLoadingTextTemplateDirective, selector: "[ng-loadingtext-tmp]" }, { kind: "directive", type: i5.NgTagTemplateDirective, selector: "[ng-tag-tmp]" }, { kind: "directive", type: i5.NgLoadingSpinnerTemplateDirective, selector: "[ng-loadingspinner-tmp]" }, { kind: "directive", type: MtxSelectOptgroupTemplateDirective, selector: "[ng-optgroup-tmp]" }, { kind: "directive", type: MtxSelectOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: MtxSelectLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: MtxSelectMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "directive", type: MtxSelectHeaderTemplateDirective, selector: "[ng-header-tmp]" }, { kind: "directive", type: MtxSelectFooterTemplateDirective, selector: "[ng-footer-tmp]" }, { kind: "directive", type: MtxSelectNotFoundTemplateDirective, selector: "[ng-notfound-tmp]" }, { kind: "directive", type: MtxSelectTypeToSearchTemplateDirective, selector: "[ng-typetosearch-tmp]" }, { kind: "directive", type: MtxSelectLoadingTextTemplateDirective, selector: "[ng-loadingtext-tmp]" }, { kind: "directive", type: MtxSelectTagTemplateDirective, selector: "[ng-tag-tmp]" }, { kind: "directive", type: MtxSelectLoadingSpinnerTemplateDirective, selector: "[ng-loadingspinner-tmp]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
515
523
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: MtxSelectComponent, decorators: [{
|
|
516
524
|
type: Component,
|
|
517
525
|
args: [{ selector: 'mtx-select', exportAs: 'mtxSelect', host: {
|
|
@@ -532,7 +540,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
|
|
|
532
540
|
'[class.mtx-select-empty]': 'empty',
|
|
533
541
|
'[class.mtx-select-multiple]': 'multiple',
|
|
534
542
|
'class': 'mtx-select',
|
|
535
|
-
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: MatFormFieldControl, useExisting: MtxSelectComponent }], template: "<ng-select #ngSelect
|
|
543
|
+
}, inputs: ['disabled'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: MatFormFieldControl, useExisting: MtxSelectComponent }], template: "<ng-select #ngSelect\n [class.ng-select-invalid]=\"errorState\"\n [(ngModel)]=\"value\"\n [ngModelOptions]=\"{standalone: true}\"\n [placeholder]=\"placeholder\"\n [items]=\"items\"\n [addTag]=\"addTag\"\n [addTagText]=\"addTagText\"\n [appendTo]=\"appendTo\"\n [appearance]=\"appearance\"\n [bindLabel]=\"bindLabel!\"\n [bindValue]=\"bindValue!\"\n [closeOnSelect]=\"closeOnSelect\"\n [clearAllText]=\"clearAllText\"\n [clearable]=\"clearable\"\n [clearOnBackspace]=\"clearOnBackspace\"\n [dropdownPosition]=\"dropdownPosition\"\n [groupBy]=\"groupBy\"\n [groupValue]=\"groupValue\"\n [hideSelected]=\"hideSelected\"\n [isOpen]=\"isOpen\"\n [inputAttrs]=\"inputAttrs\"\n [loading]=\"loading\"\n [loadingText]=\"loadingText\"\n [labelForId]=\"labelForId\"\n [markFirst]=\"markFirst\"\n [maxSelectedItems]=\"maxSelectedItems\"\n [multiple]=\"multiple\"\n [notFoundText]=\"notFoundText\"\n [readonly]=\"readonly\"\n [typeahead]=\"typeahead\"\n [typeToSearchText]=\"typeToSearchText\"\n [trackByFn]=\"trackByFn\"\n [searchable]=\"searchable\"\n [searchFn]=\"searchFn\"\n [searchWhileComposing]=\"searchWhileComposing\"\n [clearSearchOnAdd]=\"clearSearchOnAdd\"\n [selectableGroup]=\"selectableGroup\"\n [selectableGroupAsModel]=\"selectableGroupAsModel\"\n [selectOnTab]=\"selectOnTab\"\n [tabIndex]=\"tabIndex\"\n [openOnEnter]=\"openOnEnter\"\n [minTermLength]=\"minTermLength\"\n [editableSearchTerm]=\"editableSearchTerm\"\n [keyDownFn]=\"keyDownFn\"\n [virtualScroll]=\"virtualScroll\"\n (blur)=\"blurEvent.emit($event)\"\n (focus)=\"focusEvent.emit($event)\"\n (change)=\"changeEvent.emit($event)\"\n (open)=\"openEvent.emit($event)\"\n (close)=\"closeEvent.emit($event)\"\n (search)=\"searchEvent.emit($event)\"\n (clear)=\"clearEvent.emit($event)\"\n (add)=\"addEvent.emit($event)\"\n (remove)=\"removeEvent.emit($event)\"\n (scroll)=\"scroll.emit($event)\"\n (scrollToEnd)=\"scrollToEnd.emit($event)\">\n\n <ng-container *ngIf=\"optionTemplate\">\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\"\n let-searchTerm=\"searchTerm\">\n <ng-template [ngTemplateOutlet]=\"optionTemplate\"\n [ngTemplateOutletContext]=\"{ item: item, item$: item$, index: index, searchTerm: searchTerm }\">\n </ng-template>\n </ng-template>\n </ng-container>\n\n <ng-container *ngIf=\"optgroupTemplate\">\n <ng-template ng-optgroup-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\"\n let-searchTerm=\"searchTerm\">\n <ng-template [ngTemplateOutlet]=\"optgroupTemplate\"\n [ngTemplateOutletContext]=\"{ item: item, item$: item$, index: index, searchTerm: searchTerm }\">\n </ng-template>\n </ng-template>\n </ng-container>\n\n <ng-container *ngIf=\"labelTemplate\">\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\" let-label=\"label\">\n <ng-template [ngTemplateOutlet]=\"labelTemplate\"\n [ngTemplateOutletContext]=\"{ item: item, clear: clear, label: label }\">\n </ng-template>\n </ng-template>\n </ng-container>\n\n <ng-container *ngIf=\"multiLabelTemplate\">\n <ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n <ng-template [ngTemplateOutlet]=\"multiLabelTemplate\"\n [ngTemplateOutletContext]=\"{ items: items, clear: clear }\">\n </ng-template>\n </ng-template>\n </ng-container>\n\n <ng-container *ngIf=\"headerTemplate\">\n <ng-template ng-header-tmp>\n <ng-template [ngTemplateOutlet]=\"headerTemplate\">\n </ng-template>\n </ng-template>\n </ng-container>\n\n <ng-container *ngIf=\"footerTemplate\">\n <ng-template ng-footer-tmp>\n <ng-template [ngTemplateOutlet]=\"footerTemplate\">\n </ng-template>\n </ng-template>\n </ng-container>\n\n <ng-container *ngIf=\"notFoundTemplate\">\n <ng-template ng-notfound-tmp let-searchTerm=\"searchTerm\">\n <ng-template [ngTemplateOutlet]=\"notFoundTemplate\"\n [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\">\n </ng-template>\n </ng-template>\n </ng-container>\n\n <ng-container *ngIf=\"typeToSearchTemplate\">\n <ng-template ng-typetosearch-tmp>\n <ng-template [ngTemplateOutlet]=\"typeToSearchTemplate\">\n </ng-template>\n </ng-template>\n </ng-container>\n\n <ng-container *ngIf=\"loadingTextTemplate\">\n <ng-template ng-loadingtext-tmp let-searchTerm=\"searchTerm\">\n <ng-template [ngTemplateOutlet]=\"loadingTextTemplate\"\n [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\">\n </ng-template>\n </ng-template>\n </ng-container>\n\n <ng-container *ngIf=\"tagTemplate\">\n <ng-template ng-tag-tmp let-searchTerm=\"searchTerm\">\n <ng-template [ngTemplateOutlet]=\"tagTemplate\"\n [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\">\n </ng-template>\n </ng-template>\n </ng-container>\n\n <ng-container *ngIf=\"loadingSpinnerTemplate\">\n <ng-template ng-loadingspinner-tmp>\n <ng-template [ngTemplateOutlet]=\"loadingSpinnerTemplate\">\n </ng-template>\n </ng-template>\n </ng-container>\n\n</ng-select>\n", styles: [".ng-select{padding-top:1.28125em;margin-top:-1.28125em;padding-bottom:.4375em;margin-bottom:-.4375em}.mat-form-field-appearance-fill .ng-select{padding:.25em .75em .75em;margin:-.25em -.75em -.75em}.mat-form-field-appearance-outline .ng-select{padding:1em .75em;margin:-1em -.75em}.ng-select .ng-select-container,.ng-select .ng-select-container .ng-value-container{align-items:center}.ng-select .ng-select-container .ng-value-container .ng-input>input{font:inherit;padding:0}.mat-form-field-has-label .ng-select .ng-placeholder{transition:opacity .2s;opacity:0}.mat-form-field-has-label .mtx-select-floating .ng-select .ng-placeholder{opacity:1}.ng-select .ng-has-value .ng-placeholder{display:none}.ng-select.ng-select-opened .ng-arrow-wrapper .ng-arrow{top:-2px;border-width:0 5px 5px}.ng-select.ng-select-single.ng-select-filtered .ng-placeholder{display:initial;visibility:hidden}.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder:after,.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-value:after{display:inline-block;content:\"\"}.ng-select.ng-select-multiple .ng-select-container .ng-value-container{margin:-4px 0}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{margin:4px;border-radius:16px;font-size:.875em;line-height:18px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label{display:inline-block;margin:0 8px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{display:inline-block;width:18px;height:18px;border-radius:100%;text-align:center}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{margin-right:-4px}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{margin-left:-4px;margin-right:auto}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{margin-left:-4px}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{margin-right:-4px;margin-left:auto}.ng-select .ng-clear-wrapper{height:18px;text-align:center}.ng-select .ng-arrow-wrapper{width:18px}.ng-select .ng-arrow-wrapper .ng-arrow{border-width:5px 5px 2px;border-style:solid}.ng-dropdown-panel{left:0}[dir=rtl] .ng-dropdown-panel{right:0;left:auto}.ng-dropdown-panel.ng-select-bottom{top:100%;border-bottom-left-radius:4px;border-bottom-right-radius:4px;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.ng-dropdown-panel.ng-select-top{bottom:100%;border-top-left-radius:4px;border-top-right-radius:4px;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.ng-dropdown-panel .ng-dropdown-header,.ng-dropdown-panel .ng-dropdown-footer{padding:14px 16px}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{height:3em;padding:14px 16px;font-weight:500;-webkit-user-select:none;user-select:none;cursor:pointer}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-disabled{cursor:default}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{position:relative;padding:14px 16px;text-overflow:ellipsis;text-decoration:none;text-align:left;white-space:nowrap;overflow:hidden}[dir=rtl] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{text-align:right}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-left:32px}[dir=rtl] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-right:32px;padding-left:0}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{padding-right:5px;font-size:80%;font-weight:400}[dir=rtl] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{padding-left:5px;padding-right:0}\n"] }]
|
|
536
544
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1.FocusMonitor }, { type: i2.ErrorStateMatcher }, { type: i3.NgForm, decorators: [{
|
|
537
545
|
type: Optional
|
|
538
546
|
}] }, { type: i3.FormGroupDirective, decorators: [{
|
|
@@ -546,6 +554,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
|
|
|
546
554
|
}, {
|
|
547
555
|
type: Inject,
|
|
548
556
|
args: [MAT_FORM_FIELD]
|
|
557
|
+
}] }, { type: undefined, decorators: [{
|
|
558
|
+
type: Optional
|
|
559
|
+
}, {
|
|
560
|
+
type: Inject,
|
|
561
|
+
args: [MTX_SELECT_DEFAULT_OPTIONS]
|
|
549
562
|
}] }]; }, propDecorators: { ngSelect: [{
|
|
550
563
|
type: ViewChild,
|
|
551
564
|
args: ['ngSelect', { static: true }]
|
|
@@ -710,8 +723,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
|
|
|
710
723
|
type: Input
|
|
711
724
|
}], required: [{
|
|
712
725
|
type: Input
|
|
713
|
-
}], disabled: [{
|
|
714
|
-
type: Input
|
|
715
726
|
}], errorStateMatcher: [{
|
|
716
727
|
type: Input
|
|
717
728
|
}], ariaLabel: [{
|
|
@@ -792,5 +803,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
|
|
|
792
803
|
* Generated bundle index. Do not edit.
|
|
793
804
|
*/
|
|
794
805
|
|
|
795
|
-
export { MtxOptionComponent, MtxSelectComponent, MtxSelectFooterTemplateDirective, MtxSelectHeaderTemplateDirective, MtxSelectLabelTemplateDirective, MtxSelectLoadingSpinnerTemplateDirective, MtxSelectLoadingTextTemplateDirective, MtxSelectModule, MtxSelectMultiLabelTemplateDirective, MtxSelectNotFoundTemplateDirective, MtxSelectOptgroupTemplateDirective, MtxSelectOptionTemplateDirective, MtxSelectTagTemplateDirective, MtxSelectTypeToSearchTemplateDirective };
|
|
806
|
+
export { MTX_SELECT_DEFAULT_OPTIONS, MtxOptionComponent, MtxSelectComponent, MtxSelectFooterTemplateDirective, MtxSelectHeaderTemplateDirective, MtxSelectLabelTemplateDirective, MtxSelectLoadingSpinnerTemplateDirective, MtxSelectLoadingTextTemplateDirective, MtxSelectModule, MtxSelectMultiLabelTemplateDirective, MtxSelectNotFoundTemplateDirective, MtxSelectOptgroupTemplateDirective, MtxSelectOptionTemplateDirective, MtxSelectTagTemplateDirective, MtxSelectTypeToSearchTemplateDirective };
|
|
796
807
|
//# sourceMappingURL=mtxSelect.mjs.map
|