ngx-virtual-select-field-filterable 1.4.7 → 1.4.9
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/README.md +2 -0
- package/fesm2022/ngx-virtual-select-field-filterable.mjs +65 -28
- package/fesm2022/ngx-virtual-select-field-filterable.mjs.map +1 -1
- package/index.d.ts +307 -1
- package/package.json +6 -6
- package/lib/virtual-select-field/index.d.ts +0 -10
- package/lib/virtual-select-field/keycodes.d.ts +0 -7
- package/lib/virtual-select-field/virtual-select-field-option/index.d.ts +0 -3
- package/lib/virtual-select-field/virtual-select-field-option/virtual-select-field-option.component.d.ts +0 -36
- package/lib/virtual-select-field/virtual-select-field-option/virtual-select-field-option.models.d.ts +0 -5
- package/lib/virtual-select-field/virtual-select-field-option-for/index.d.ts +0 -2
- package/lib/virtual-select-field/virtual-select-field-option-for/virtual-select-field-option-for.directive.d.ts +0 -17
- package/lib/virtual-select-field/virtual-select-field-option-for/virtual-select-field-option-for.models.d.ts +0 -14
- package/lib/virtual-select-field/virtual-select-field-trigger/index.d.ts +0 -1
- package/lib/virtual-select-field/virtual-select-field-trigger/virtual-select-field-trigger.directive.d.ts +0 -7
- package/lib/virtual-select-field/virtual-select-field.component.d.ts +0 -203
- package/lib/virtual-select-field/virtual-select-field.constants.d.ts +0 -8
- package/lib/virtual-select-field/virtual-select-field.models.d.ts +0 -18
package/README.md
CHANGED
|
@@ -33,6 +33,7 @@ Features:
|
|
|
33
33
|
- Single select
|
|
34
34
|
- Filterable options with search input
|
|
35
35
|
- Clear buttons for filter and selection
|
|
36
|
+
- Loading spinner for async data
|
|
36
37
|
- Integrates with Angular Material Form Field
|
|
37
38
|
- Custom trigger template
|
|
38
39
|
- Custom option template
|
|
@@ -244,6 +245,7 @@ Component to define select field
|
|
|
244
245
|
| filterPlaceholder | `string` | `'Search...'`| Placeholder text for the filter input |
|
|
245
246
|
| filterClearable | `boolean` | `true` | Show clear button in filter input |
|
|
246
247
|
| clearable | `boolean` | `false` | Show clear button in select trigger to clear all selections |
|
|
248
|
+
| loading | `boolean` | `false` | Show loading spinner while data is being loaded |
|
|
247
249
|
| value | `TValue[] \| TValue \| null` | `null` | Value of the select field |
|
|
248
250
|
| placeholder | `string` | none | Placeholder for the select field |
|
|
249
251
|
| required | `boolean` | `false` | Define if fields is required |
|
|
@@ -9,12 +9,13 @@ import { SelectionModel } from '@angular/cdk/collections';
|
|
|
9
9
|
import { ListKeyManager } from '@angular/cdk/a11y';
|
|
10
10
|
import * as i2 from '@angular/cdk/overlay';
|
|
11
11
|
import { ViewportRuler, CdkOverlayOrigin, OverlayModule, CdkConnectedOverlay } from '@angular/cdk/overlay';
|
|
12
|
-
import * as i3 from '@angular/cdk/scrolling';
|
|
13
12
|
import { ScrollingModule, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
|
|
14
|
-
import * as
|
|
13
|
+
import * as i3 from '@angular/material/form-field';
|
|
15
14
|
import { MAT_FORM_FIELD, MatFormFieldModule, MatFormFieldControl } from '@angular/material/form-field';
|
|
16
|
-
import * as
|
|
15
|
+
import * as i4 from '@angular/material/input';
|
|
17
16
|
import { MatInputModule } from '@angular/material/input';
|
|
17
|
+
import * as i5 from '@angular/material/progress-spinner';
|
|
18
|
+
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
|
18
19
|
import { hasModifierKey } from '@angular/cdk/keycodes';
|
|
19
20
|
import * as i1 from '@angular/material/core';
|
|
20
21
|
import { MatPseudoCheckboxModule, MatRippleModule } from '@angular/material/core';
|
|
@@ -34,10 +35,10 @@ class NgxVirtualSelectFieldOptionForDirective {
|
|
|
34
35
|
static ngTemplateContextGuard(_dir, ctx) {
|
|
35
36
|
return true;
|
|
36
37
|
}
|
|
37
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
38
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
38
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgxVirtualSelectFieldOptionForDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
39
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: NgxVirtualSelectFieldOptionForDirective, isStandalone: true, selector: "[ngxVirtualSelectFieldOptionFor]", inputs: { options: ["ngxVirtualSelectFieldOptionForOf", "options"] }, ngImport: i0 }); }
|
|
39
40
|
}
|
|
40
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
41
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgxVirtualSelectFieldOptionForDirective, decorators: [{
|
|
41
42
|
type: Directive,
|
|
42
43
|
args: [{
|
|
43
44
|
selector: '[ngxVirtualSelectFieldOptionFor]',
|
|
@@ -50,15 +51,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImpor
|
|
|
50
51
|
|
|
51
52
|
const NGX_VIRTUAL_SELECT_FIELD_TRIGGER = new InjectionToken('NGX_VIRTUAL_SELECT_FIELD_TRIGGER');
|
|
52
53
|
class NgxVirtualSelectFieldTriggerDirective {
|
|
53
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
54
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
54
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgxVirtualSelectFieldTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
55
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: NgxVirtualSelectFieldTriggerDirective, isStandalone: true, selector: "ngx-virtual-select-field-trigger", providers: [
|
|
55
56
|
{
|
|
56
57
|
provide: NGX_VIRTUAL_SELECT_FIELD_TRIGGER,
|
|
57
58
|
useExisting: NgxVirtualSelectFieldTriggerDirective,
|
|
58
59
|
},
|
|
59
60
|
], ngImport: i0 }); }
|
|
60
61
|
}
|
|
61
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
62
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgxVirtualSelectFieldTriggerDirective, decorators: [{
|
|
62
63
|
type: Directive,
|
|
63
64
|
args: [{
|
|
64
65
|
selector: 'ngx-virtual-select-field-trigger',
|
|
@@ -84,8 +85,8 @@ class NgxVirtualSelectFieldOptionComponent {
|
|
|
84
85
|
this.disabled = false;
|
|
85
86
|
this.selectedChange = new EventEmitter();
|
|
86
87
|
this.multiple = this._optionParent?.multiple ?? false;
|
|
87
|
-
this.active = signal(false);
|
|
88
|
-
this.selected = signal(false);
|
|
88
|
+
this.active = signal(false, ...(ngDevMode ? [{ debugName: "active" }] : []));
|
|
89
|
+
this.selected = signal(false, ...(ngDevMode ? [{ debugName: "selected" }] : []));
|
|
89
90
|
this.hostNativeElement = this._elementRef.nativeElement;
|
|
90
91
|
}
|
|
91
92
|
// #region Highlightable
|
|
@@ -117,10 +118,10 @@ class NgxVirtualSelectFieldOptionComponent {
|
|
|
117
118
|
selected: this.selected(),
|
|
118
119
|
});
|
|
119
120
|
}
|
|
120
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
121
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
121
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgxVirtualSelectFieldOptionComponent, deps: [{ token: NGX_VIRTUAL_SELECT_FIELD_OPTION_PARENT }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
122
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: NgxVirtualSelectFieldOptionComponent, isStandalone: true, selector: "ngx-virtual-select-field-option", inputs: { value: "value", disabled: ["disabled", "disabled", booleanAttribute] }, outputs: { selectedChange: "selectedChange" }, host: { attributes: { "role": "option" }, listeners: { "click": "onClick()" }, properties: { "class.ngx-virtual-select-field-option--active": "active()", "class.ngx-virtual-select-field-option--selected": "selected()", "class.ngx-virtual-select-field-option--multiple": "multiple", "class.ngx-virtual-select-field-option--disabled": "disabled" }, classAttribute: "ngx-virtual-select-field-option" }, ngImport: i0, template: "@if(multiple){\n<mat-pseudo-checkbox\n [state]=\"selected() ? 'checked' : 'unchecked'\"\n></mat-pseudo-checkbox>\n}\n\n<span class=\"ngx-virtual-select-field-option__label\"\n ><ng-content></ng-content\n></span>\n\n@if (!multiple && selected() ) {\n<mat-pseudo-checkbox state=\"checked\" appearance=\"minimal\"></mat-pseudo-checkbox>\n}\n\n<div\n class=\"ngx-virtual-select-field-option__ripple\"\n matRipple\n [matRippleTrigger]=\"hostNativeElement\"\n [matRippleDisabled]=\"disabled\"\n></div>\n", styles: [":host{cursor:pointer;position:relative;display:inline-flex;flex-direction:row;gap:var(--ngx-virtual-select-field-option-gap);padding:var(--ngx-virtual-select-field-option-padding);line-height:var(--ngx-virtual-select-field-option-line-height);height:var(--ngx-virtual-select-field__viewport-option-height);color:var(--ngx-virtual-select-field-option-color);font-family:var(--ngx-virtual-select-field-option-font-family);font-size:var(--ngx-virtual-select-field-option-font-size);font-weight:var(--ngx-virtual-select-field-option-font-weight);letter-spacing:var(--ngx-virtual-select-field-option-letter-spacing)}:host.ngx-virtual-select-field-option{display:flex;align-items:center;box-sizing:border-box;width:100%}:host.ngx-virtual-select-field-option--active{background-color:var(--ngx-virtual-select-field-option-background-color--active)}:host.ngx-virtual-select-field-option--selected{color:var(--ngx-virtual-select-field-option-selected-state-label-text-color)}:host.ngx-virtual-select-field-option--selected:not(.ngx-virtual-select-field-option--multiple){background-color:var(--ngx-virtual-select-field-option-background-color--selected)}:host.ngx-virtual-select-field-option--disabled{pointer-events:none;opacity:var(--ngx-virtual-select-field-option-disabled-state-opacity)}:host.ngx-virtual-select-field-option:hover{background-color:var(--ngx-virtual-select-field-option-background-color--hover)}:host.ngx-virtual-select-field-option :host.ngx-virtual-select-field-option__label{flex:1;display:inline-flex;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host.ngx-virtual-select-field-option :host.ngx-virtual-select-field-option__ripple{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatPseudoCheckboxModule }, { kind: "component", type: i1.MatPseudoCheckbox, selector: "mat-pseudo-checkbox", inputs: ["state", "disabled", "appearance"] }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
122
123
|
}
|
|
123
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
124
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgxVirtualSelectFieldOptionComponent, decorators: [{
|
|
124
125
|
type: Component,
|
|
125
126
|
args: [{ selector: 'ngx-virtual-select-field-option', standalone: true, imports: [CommonModule, MatPseudoCheckboxModule, MatRippleModule], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
126
127
|
role: 'option',
|
|
@@ -297,6 +298,11 @@ class NgxVirtualSelectFieldComponent {
|
|
|
297
298
|
* @default false
|
|
298
299
|
*/
|
|
299
300
|
this.clearable = false;
|
|
301
|
+
/**
|
|
302
|
+
* Show loading spinner
|
|
303
|
+
* @default false
|
|
304
|
+
*/
|
|
305
|
+
this.loading = false;
|
|
300
306
|
this._value = [];
|
|
301
307
|
this._placeholder = '';
|
|
302
308
|
this._required = false;
|
|
@@ -321,9 +327,9 @@ class NgxVirtualSelectFieldComponent {
|
|
|
321
327
|
this.autofilled = false;
|
|
322
328
|
this.POSITIONS = POSITIONS;
|
|
323
329
|
this.overlayPanelClass = this._defaultOptions?.overlayPanelClass || '';
|
|
324
|
-
this.isPanelOpened = signal(false);
|
|
325
|
-
this.filterText = signal('');
|
|
326
|
-
this.options = signal([]);
|
|
330
|
+
this.isPanelOpened = signal(false, ...(ngDevMode ? [{ debugName: "isPanelOpened" }] : []));
|
|
331
|
+
this.filterText = signal('', ...(ngDevMode ? [{ debugName: "filterText" }] : []));
|
|
332
|
+
this.options = signal([], ...(ngDevMode ? [{ debugName: "options" }] : []));
|
|
327
333
|
this.filteredOptions = computed(() => {
|
|
328
334
|
const searchText = this.filterText().toLowerCase().trim();
|
|
329
335
|
const allOptions = this.options();
|
|
@@ -334,13 +340,13 @@ class NgxVirtualSelectFieldComponent {
|
|
|
334
340
|
const label = option.getLabel?.() ?? option.label;
|
|
335
341
|
return label.toLowerCase().includes(searchText);
|
|
336
342
|
});
|
|
337
|
-
});
|
|
338
|
-
this.hasOptionsToFilter = computed(() => this.options().length > 1);
|
|
343
|
+
}, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : []));
|
|
344
|
+
this.hasOptionsToFilter = computed(() => this.options().length > 1, ...(ngDevMode ? [{ debugName: "hasOptionsToFilter" }] : []));
|
|
339
345
|
this.hasNoFilteredResults = computed(() => {
|
|
340
346
|
const filtered = this.filteredOptions();
|
|
341
347
|
const hasFilter = this.filterText().trim().length > 0;
|
|
342
348
|
return hasFilter && filtered.length === 0 && this.options().length > 0;
|
|
343
|
-
});
|
|
349
|
+
}, ...(ngDevMode ? [{ debugName: "hasNoFilteredResults" }] : []));
|
|
344
350
|
this.triggerValue$ = null;
|
|
345
351
|
this._changeDetectorRef = inject(ChangeDetectorRef);
|
|
346
352
|
this._destroyRef = inject(DestroyRef);
|
|
@@ -543,6 +549,26 @@ class NgxVirtualSelectFieldComponent {
|
|
|
543
549
|
this._selectionModel.clear();
|
|
544
550
|
this.emitValue();
|
|
545
551
|
}
|
|
552
|
+
isAllSelected() {
|
|
553
|
+
if (!this._selectionModel) {
|
|
554
|
+
return false;
|
|
555
|
+
}
|
|
556
|
+
const enabledOptions = this.options().filter((option) => !option.disabled);
|
|
557
|
+
return (enabledOptions.length > 0 &&
|
|
558
|
+
enabledOptions.length === this._selectionModel.selected.length);
|
|
559
|
+
}
|
|
560
|
+
isIndeterminate() {
|
|
561
|
+
if (!this._selectionModel) {
|
|
562
|
+
return false;
|
|
563
|
+
}
|
|
564
|
+
const selectedCount = this._selectionModel.selected.length;
|
|
565
|
+
const enabledOptions = this.options().filter((option) => !option.disabled);
|
|
566
|
+
return selectedCount > 0 && selectedCount < enabledOptions.length;
|
|
567
|
+
}
|
|
568
|
+
onSelectAllChange() {
|
|
569
|
+
this.toggleAllOptions(this.options());
|
|
570
|
+
this.emitValue();
|
|
571
|
+
}
|
|
546
572
|
onFilterKeyDown(event) {
|
|
547
573
|
const isArrowKey = event.key === ARROW_DOWN_KEY ||
|
|
548
574
|
event.key === ARROW_UP_KEY ||
|
|
@@ -783,8 +809,8 @@ class NgxVirtualSelectFieldComponent {
|
|
|
783
809
|
}
|
|
784
810
|
}
|
|
785
811
|
static { this.nextId = 0; }
|
|
786
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
787
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
812
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgxVirtualSelectFieldComponent, deps: [{ token: MAT_FORM_FIELD, optional: true }, { token: NGX_VIRTUAL_SELECT_FIELD_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
813
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: NgxVirtualSelectFieldComponent, isStandalone: true, selector: "ngx-virtual-select-field", inputs: { userAriaDescribedBy: ["aria-describedby", "userAriaDescribedBy"], panelWidth: "panelWidth", optionHeight: ["optionHeight", "optionHeight", (value) => numberAttribute(value, OPTION_HEIGHT)], panelViewportPageSize: ["panelViewportPageSize", "panelViewportPageSize", (value) => numberAttribute(value, PANEL_VIEWPORT_PAGE_SIZE)], multiple: ["multiple", "multiple", booleanAttribute], tabIndex: ["tabIndex", "tabIndex", (value) => numberAttribute(value, 0)], typeaheadDebounceInterval: ["typeaheadDebounceInterval", "typeaheadDebounceInterval", numberAttribute], panelClass: "panelClass", filterable: ["filterable", "filterable", booleanAttribute], filterPlaceholder: "filterPlaceholder", filterClearable: ["filterClearable", "filterClearable", booleanAttribute], clearable: ["clearable", "clearable", booleanAttribute], loading: ["loading", "loading", booleanAttribute], value: "value", placeholder: "placeholder", required: ["required", "required", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute] }, outputs: { valueChange: "valueChange", selectionChange: "selectionChange" }, host: { listeners: { "focus": "onFocusIn()", "blur": "onFocusOut()", "keydown": "onKeyDown($event)" }, properties: { "attr.tabindex": "this.disabled ? -1 : tabIndex", "class.ngx-virtual-select-field-disabled": "disabled", "class.ngx-virtual-select-field-invalid": "errorState" }, classAttribute: "ngx-virtual-select-field" }, providers: [
|
|
788
814
|
{
|
|
789
815
|
provide: MatFormFieldControl,
|
|
790
816
|
useExisting: NgxVirtualSelectFieldComponent,
|
|
@@ -793,11 +819,19 @@ class NgxVirtualSelectFieldComponent {
|
|
|
793
819
|
provide: NGX_VIRTUAL_SELECT_FIELD_OPTION_PARENT,
|
|
794
820
|
useExisting: NgxVirtualSelectFieldComponent,
|
|
795
821
|
},
|
|
796
|
-
], queries: [{ propertyName: "optionFor", first: true, predicate: NgxVirtualSelectFieldOptionForDirective, descendants: true }, { propertyName: "customTrigger", first: true, predicate: NGX_VIRTUAL_SELECT_FIELD_TRIGGER, descendants: true }, { propertyName: "optionsQuery", predicate: NgxVirtualSelectFieldOptionComponent }], viewQueries: [{ propertyName: "cdkVirtualScrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "cdkConnectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }], exportAs: ["ngxVirtualSelectField"], ngImport: i0, template: "<div\n class=\"ngx-virtual-select-field-trigger\"\n cdk-overlay-origin\n (click)=\"open()\"\n #fallbackOverlayOrigin=\"cdkOverlayOrigin\"\n #trigger\n>\n <div class=\"ngx-virtual-select-field-value\">\n @if (empty) {\n <span class=\"ngx-virtual-select-field-placeholder\">{{\n placeholder\n }}</span>\n } @else {\n <span>\n @if (customTrigger) {\n <ng-content select=\"ngx-virtual-select-field-trigger\"></ng-content>\n } @else {\n <span>{{ triggerValue$ | async }}</span>\n }\n </span>\n }\n </div>\n\n @if (clearable && !empty && !disabled) {\n <button\n type=\"button\"\n class=\"ngx-virtual-select-field-clear\"\n (click)=\"onClear($event)\"\n aria-label=\"Clear selection\"\n >\n <svg\n viewBox=\"0 0 24 24\"\n width=\"18px\"\n height=\"18px\"\n focusable=\"false\"\n >\n <path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"/>\n </svg>\n </button>\n }\n\n <div class=\"ngx-virtual-select-field-arrow-wrapper\">\n <div class=\"ngx-virtual-select-field-arrow\">\n <!-- Use an inline SVG, because it works better than a CSS triangle in high contrast mode. -->\n <svg\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n focusable=\"false\"\n aria-hidden=\"true\"\n >\n <path d=\"M7 10l5 5 5-5z\" />\n </svg>\n </div>\n </div>\n</div>\n\n<ng-template\n cdk-connected-overlay\n cdkConnectedOverlayLockPosition\n cdkConnectedOverlayHasBackdrop\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n [cdkConnectedOverlayOpen]=\"isPanelOpened()\"\n [cdkConnectedOverlayOrigin]=\"preferredOverlayOrigin || fallbackOverlayOrigin\"\n [cdkConnectedOverlayPositions]=\"POSITIONS\"\n [cdkConnectedOverlayPanelClass]=\"overlayPanelClass\"\n [cdkConnectedOverlayWidth]=\"overlayWidth()\"\n (backdropClick)=\"close()\"\n (detach)=\"close()\"\n (attach)=\"onOverlayAttached()\"\n>\n <!--\n [attr.aria-multiselectable]=\"multiple\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"_getPanelAriaLabelledby()\"\n [@transformPanel]=\"'showing'\"\n (@transformPanel.done)=\"_panelDoneAnimatingStream.next($event.toState)\"\n -->\n <div class=\"ngx-virtual-select-field-panel {{ inheritedColorTheme }}\" [ngClass]=\"panelClass\">\n @if (filterable && hasOptionsToFilter()) {\n <div class=\"ngx-virtual-select-field-filter-wrapper\">\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"ngx-virtual-select-field-filter-field\">\n <input\n matInput\n #filterInput\n type=\"text\"\n [placeholder]=\"filterPlaceholder\"\n [value]=\"filterText()\"\n (input)=\"onFilterInput($event)\"\n (keydown)=\"onFilterKeyDown($event)\"\n />\n @if (filterClearable && filterText()) {\n <button\n matSuffix\n type=\"button\"\n class=\"ngx-virtual-select-field-filter-clear\"\n (click)=\"onFilterClear()\"\n aria-label=\"Clear filter\"\n >\n <svg\n viewBox=\"0 0 24 24\"\n width=\"18px\"\n height=\"18px\"\n focusable=\"false\"\n >\n <path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"/>\n </svg>\n </button>\n }\n </mat-form-field>\n </div>\n }\n @if (hasNoFilteredResults()) {\n <div class=\"ngx-virtual-select-field-no-results\">\n No results found. Try adjusting your filter.\n </div>\n }\n <cdk-virtual-scroll-viewport\n role=\"listbox\"\n tabindex=\"-1\"\n class=\"ngx-virtual-select-field-viewport\"\n [style.--ngx-virtual-select-field__viewport-page-size]=\"maxPageSize\"\n [style.--ngx-virtual-select-field__viewport-option-height.px]=\"optionHeight\"\n [itemSize]=\"optionHeight\"\n (scrolledIndexChange)=\"onScrolledIndexChange()\"\n (keydown)=\"onKeyDown($event)\"\n >\n <div class=\"ngx-virtual-select-field-list-wrapper\">\n <ng-container\n *cdkVirtualFor=\"\n let option of filteredOptions();\n trackBy: optionTrackBy\n \"\n >\n <ng-container\n [ngTemplateOutlet]=\"optionFor.template\"\n [ngTemplateOutletContext]=\"{ $implicit: option }\"\n >\n </ng-container>\n </ng-container>\n </div>\n </cdk-virtual-scroll-viewport>\n </div>\n</ng-template>\n", styles: [":host{color:var(--ngx-virtual-select-field-trigger-text-color);font-family:var(--ngx-virtual-select-field-trigger-font-family);line-height:var(--ngx-virtual-select-field-trigger-line-height);font-size:var(--ngx-virtual-select-field-trigger-font-size);font-weight:var(--ngx-virtual-select-field-trigger-font-weight);letter-spacing:var(--ngx-virtual-select-field-trigger-letter-spacing);outline:none}.ngx-virtual-select-field-trigger{display:inline-flex;align-items:center;cursor:pointer;position:relative;box-sizing:border-box;width:100%}:host-context(.ngx-virtual-select-field-disabled) .ngx-virtual-select-field-trigger{cursor:default;color:var(--ngx-virtual-select-field-trigger-text-color--disabled)}.ngx-virtual-select-field-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.ngx-virtual-select-field-placeholder{transition:var(--ngx-virtual-select-field-placeholder-transition);color:var(--ngx-virtual-select-field-placeholder-text-color)}._mat-animation-noopable .ngx-virtual-select-field-placeholder{transition:none}:host-context(.mat-form-field-hide-placeholder) .ngx-virtual-select-field-placeholder{color:transparent;-webkit-text-fill-color:transparent;transition:none;display:block}.ngx-virtual-select-field-placeholder:empty:before{content:\" \";white-space:pre;width:1px;display:inline-block}.ngx-virtual-select-field-arrow{width:calc(var(--ngx-virtual-select-field-arrow-size) * 2);height:var(--ngx-virtual-select-field-arrow-size);position:relative;color:var(--ngx-virtual-select-field-arrow-color--enabled)}:host-context(.ngx-virtual-select-field-invalid) .ngx-virtual-select-field-arrow{color:var(--ngx-virtual-select-field-arrow-color--invalid)}:host-context(.mat-focused):not(.ngx-virtual-select-field-invalid) .ngx-virtual-select-field-arrow{color:var(--ngx-virtual-select-field-arrow-color--focused)}:host-context(.ngx-virtual-select-field-disabled) .ngx-virtual-select-field-arrow{color:var(--ngx-virtual-select-field-arrow-color--disabled)}.ngx-virtual-select-field-arrow svg{fill:currentColor;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@media(forced-colors:active){.ngx-virtual-select-field-arrow svg{fill:CanvasText}:host-context(.ngx-virtual-select-field-disabled) .ngx-virtual-select-field-arrow svg{fill:GrayText}}.ngx-virtual-select-field-clear{position:absolute;transform:translateY(-8px);right:20px;border:none;background:transparent;cursor:pointer;padding:4px;margin-right:4px;display:flex;align-items:center;justify-content:center;color:var(--ngx-virtual-select-field-trigger-text-color);opacity:.6;transition:opacity .2s;flex-shrink:0}.ngx-virtual-select-field-clear:hover{opacity:1}.ngx-virtual-select-field-clear svg{fill:currentColor}.ngx-virtual-select-field-arrow-wrapper{height:24px;flex-shrink:0;display:inline-flex;align-items:center}:host-context(.mat-form-field-appearance-fill) .ngx-virtual-select-field-arrow-wrapper{transform:translateY(-8px)}:host-context(.mat-form-field-appearance-fill .mdc-text-field--no-label) .ngx-virtual-select-field-arrow-wrapper{transform:none}.ngx-virtual-select-field-panel{width:100%;background:var(--ngx-virtual-select-field-panel-background);box-shadow:var(--ngx-virtual-select-field-panel-box-shadow);display:flex;flex-direction:column}@media(forced-colors:active){.ngx-virtual-select-field-panel{outline:solid 1px}}.ngx-virtual-select-field-filter-wrapper{padding:8px;border-bottom:1px solid var(--ngx-virtual-select-field-divider-color, rgba(0, 0, 0, .12));background:var(--ngx-virtual-select-field-panel-background)}.ngx-virtual-select-field-filter-field{width:100%;display:block}.ngx-virtual-select-field-filter-clear{border:none;background:transparent;cursor:pointer;padding:4px 20px 4px 4px;display:flex;align-items:center;justify-content:center;color:var(--ngx-virtual-select-field-trigger-text-color);opacity:.6;transition:opacity .2s}.ngx-virtual-select-field-filter-clear:hover{opacity:1}.ngx-virtual-select-field-filter-clear svg{fill:currentColor}.ngx-virtual-select-field-viewport{width:100%;height:calc(var(--ngx-virtual-select-field__viewport-option-height) * var(--ngx-virtual-select-field__viewport-page-size) + var(--ngx-virtual-select-field-panel-list-wrapper-padding) * 2)}.ngx-virtual-select-field-list-wrapper{display:flex;flex-direction:column;padding-top:var(--ngx-virtual-select-field-panel-list-wrapper-padding);padding-bottom:var(--ngx-virtual-select-field-panel-list-wrapper-padding)}.ngx-virtual-select-field-no-results{padding:16px;text-align:center;color:var(--ngx-virtual-select-field-no-results-text-color, currentColor);font-size:14px;opacity:.6}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: i3.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
822
|
+
], queries: [{ propertyName: "optionFor", first: true, predicate: NgxVirtualSelectFieldOptionForDirective, descendants: true }, { propertyName: "customTrigger", first: true, predicate: NGX_VIRTUAL_SELECT_FIELD_TRIGGER, descendants: true }, { propertyName: "optionsQuery", predicate: NgxVirtualSelectFieldOptionComponent }], viewQueries: [{ propertyName: "cdkVirtualScrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "cdkConnectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }], exportAs: ["ngxVirtualSelectField"], ngImport: i0, template: "<div\n class=\"ngx-virtual-select-field-trigger\"\n cdk-overlay-origin\n (click)=\"open()\"\n #fallbackOverlayOrigin=\"cdkOverlayOrigin\"\n #trigger\n>\n <div class=\"ngx-virtual-select-field-value\">\n @if (empty) {\n <span class=\"ngx-virtual-select-field-placeholder\">{{\n placeholder\n }}</span>\n } @else {\n <span>\n @if (customTrigger) {\n <ng-content select=\"ngx-virtual-select-field-trigger\"></ng-content>\n } @else {\n <span>{{ triggerValue$ | async }}</span>\n }\n </span>\n }\n </div>\n\n @if (clearable && !empty && !disabled) {\n <button\n type=\"button\"\n class=\"ngx-virtual-select-field-clear\"\n (click)=\"onClear($event)\"\n aria-label=\"Clear selection\"\n >\n <svg\n viewBox=\"0 0 24 24\"\n width=\"18px\"\n height=\"18px\"\n focusable=\"false\"\n >\n <path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"/>\n </svg>\n </button>\n }\n\n <div class=\"ngx-virtual-select-field-arrow-wrapper\">\n <div class=\"ngx-virtual-select-field-arrow\">\n <!-- Use an inline SVG, because it works better than a CSS triangle in high contrast mode. -->\n <svg\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n focusable=\"false\"\n aria-hidden=\"true\"\n >\n <path d=\"M7 10l5 5 5-5z\" />\n </svg>\n </div>\n </div>\n</div>\n\n<ng-template\n cdk-connected-overlay\n cdkConnectedOverlayLockPosition\n cdkConnectedOverlayHasBackdrop\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n [cdkConnectedOverlayOpen]=\"isPanelOpened()\"\n [cdkConnectedOverlayOrigin]=\"preferredOverlayOrigin || fallbackOverlayOrigin\"\n [cdkConnectedOverlayPositions]=\"POSITIONS\"\n [cdkConnectedOverlayPanelClass]=\"overlayPanelClass\"\n [cdkConnectedOverlayWidth]=\"overlayWidth()\"\n (backdropClick)=\"close()\"\n (detach)=\"close()\"\n (attach)=\"onOverlayAttached()\"\n>\n <!--\n [attr.aria-multiselectable]=\"multiple\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"_getPanelAriaLabelledby()\"\n [@transformPanel]=\"'showing'\"\n (@transformPanel.done)=\"_panelDoneAnimatingStream.next($event.toState)\"\n -->\n <div class=\"ngx-virtual-select-field-panel {{ inheritedColorTheme }}\" [ngClass]=\"panelClass\">\n @if (filterable && hasOptionsToFilter()) {\n <div class=\"ngx-virtual-select-field-filter-wrapper\">\n @if (multiple) {\n <div class=\"ngx-virtual-select-field-select-all\">\n <mat-pseudo-checkbox\n [state]=\"isAllSelected() ? 'checked' : (isIndeterminate() ? 'indeterminate' : 'unchecked')\"\n (click)=\"onSelectAllChange(); $event.stopPropagation()\"\n aria-label=\"Select all options\"\n ></mat-pseudo-checkbox>\n </div>\n }\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"ngx-virtual-select-field-filter-field\">\n <input\n matInput\n #filterInput\n type=\"text\"\n [placeholder]=\"filterPlaceholder\"\n [value]=\"filterText()\"\n (input)=\"onFilterInput($event)\"\n (keydown)=\"onFilterKeyDown($event)\"\n />\n @if (filterClearable && filterText()) {\n <button\n matSuffix\n type=\"button\"\n class=\"ngx-virtual-select-field-filter-clear\"\n (click)=\"onFilterClear()\"\n aria-label=\"Clear filter\"\n >\n <svg\n viewBox=\"0 0 24 24\"\n width=\"18px\"\n height=\"18px\"\n focusable=\"false\"\n >\n <path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"/>\n </svg>\n </button>\n }\n </mat-form-field>\n </div>\n }\n @if (loading) {\n <div class=\"ngx-virtual-select-field-loading\">\n <mat-spinner diameter=\"40\"></mat-spinner>\n </div>\n } @else if (hasNoFilteredResults()) {\n <div class=\"ngx-virtual-select-field-no-results\">\n No results found. Try adjusting your filter.\n </div>\n }\n @if (!loading) {\n <cdk-virtual-scroll-viewport\n role=\"listbox\"\n tabindex=\"-1\"\n class=\"ngx-virtual-select-field-viewport\"\n [style.--ngx-virtual-select-field__viewport-page-size]=\"maxPageSize\"\n [style.--ngx-virtual-select-field__viewport-option-height.px]=\"optionHeight\"\n [itemSize]=\"optionHeight\"\n (scrolledIndexChange)=\"onScrolledIndexChange()\"\n (keydown)=\"onKeyDown($event)\"\n >\n <div class=\"ngx-virtual-select-field-list-wrapper\">\n <ng-container\n *cdkVirtualFor=\"\n let option of filteredOptions();\n trackBy: optionTrackBy\n \"\n >\n <ng-container\n [ngTemplateOutlet]=\"optionFor.template\"\n [ngTemplateOutletContext]=\"{ $implicit: option }\"\n >\n </ng-container>\n </ng-container>\n </div>\n </cdk-virtual-scroll-viewport>\n }\n </div>\n</ng-template>\n", styles: [":host{color:var(--ngx-virtual-select-field-trigger-text-color);font-family:var(--ngx-virtual-select-field-trigger-font-family);line-height:var(--ngx-virtual-select-field-trigger-line-height);font-size:var(--ngx-virtual-select-field-trigger-font-size);font-weight:var(--ngx-virtual-select-field-trigger-font-weight);letter-spacing:var(--ngx-virtual-select-field-trigger-letter-spacing);outline:none}.ngx-virtual-select-field-trigger{display:inline-flex;align-items:center;cursor:pointer;position:relative;box-sizing:border-box;width:100%}:host-context(.ngx-virtual-select-field-disabled) .ngx-virtual-select-field-trigger{cursor:default;color:var(--ngx-virtual-select-field-trigger-text-color--disabled)}.ngx-virtual-select-field-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;min-width:0}.ngx-virtual-select-field-placeholder{transition:var(--ngx-virtual-select-field-placeholder-transition);color:var(--ngx-virtual-select-field-placeholder-text-color)}._mat-animation-noopable .ngx-virtual-select-field-placeholder{transition:none}:host-context(.mat-form-field-hide-placeholder) .ngx-virtual-select-field-placeholder{color:transparent;-webkit-text-fill-color:transparent;transition:none;display:block}.ngx-virtual-select-field-placeholder:empty:before{content:\" \";white-space:pre;width:1px;display:inline-block}.ngx-virtual-select-field-arrow{width:calc(var(--ngx-virtual-select-field-arrow-size) * 2);height:var(--ngx-virtual-select-field-arrow-size);position:relative;color:var(--ngx-virtual-select-field-arrow-color--enabled)}:host-context(.ngx-virtual-select-field-invalid) .ngx-virtual-select-field-arrow{color:var(--ngx-virtual-select-field-arrow-color--invalid)}:host-context(.mat-focused):not(.ngx-virtual-select-field-invalid) .ngx-virtual-select-field-arrow{color:var(--ngx-virtual-select-field-arrow-color--focused)}:host-context(.ngx-virtual-select-field-disabled) .ngx-virtual-select-field-arrow{color:var(--ngx-virtual-select-field-arrow-color--disabled)}.ngx-virtual-select-field-arrow svg{fill:currentColor;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@media(forced-colors:active){.ngx-virtual-select-field-arrow svg{fill:CanvasText}:host-context(.ngx-virtual-select-field-disabled) .ngx-virtual-select-field-arrow svg{fill:GrayText}}.ngx-virtual-select-field-clear{position:absolute;transform:translateY(-8px);right:20px;border:none;background:transparent;cursor:pointer;padding:4px;margin-right:4px;display:flex;align-items:center;justify-content:center;color:var(--ngx-virtual-select-field-trigger-text-color);opacity:.6;transition:opacity .2s;flex-shrink:0}.ngx-virtual-select-field-clear:hover{opacity:1}.ngx-virtual-select-field-clear svg{fill:currentColor}.ngx-virtual-select-field-arrow-wrapper{height:24px;flex-shrink:0;display:inline-flex;align-items:center}:host-context(.mat-form-field-appearance-fill) .ngx-virtual-select-field-arrow-wrapper{transform:translateY(-8px)}:host-context(.mat-form-field-appearance-fill .mdc-text-field--no-label) .ngx-virtual-select-field-arrow-wrapper{transform:none}.ngx-virtual-select-field-panel{width:100%;background:var(--ngx-virtual-select-field-panel-background);box-shadow:var(--ngx-virtual-select-field-panel-box-shadow);display:flex;flex-direction:column}@media(forced-colors:active){.ngx-virtual-select-field-panel{outline:solid 1px}}.ngx-virtual-select-field-filter-wrapper{display:flex;align-items:flex-start;gap:12px;padding:8px;border-bottom:1px solid var(--ngx-virtual-select-field-divider-color, rgba(0, 0, 0, .12));background:var(--ngx-virtual-select-field-panel-background)}.ngx-virtual-select-field-select-all{display:flex;align-items:center;cursor:pointer;flex-shrink:0;padding-top:16px;padding-left:8px}.ngx-virtual-select-field-select-all mat-pseudo-checkbox{margin:0}.ngx-virtual-select-field-select-all:hover mat-pseudo-checkbox{opacity:.8}.ngx-virtual-select-field-filter-field{flex:1;min-width:0;display:block}.ngx-virtual-select-field-filter-field ::ng-deep .mat-mdc-text-field-wrapper{width:100%}.ngx-virtual-select-field-filter-clear{border:none;background:transparent;cursor:pointer;padding:4px 20px 4px 4px;display:flex;align-items:center;justify-content:center;color:var(--ngx-virtual-select-field-trigger-text-color);opacity:.6;transition:opacity .2s}.ngx-virtual-select-field-filter-clear:hover{opacity:1}.ngx-virtual-select-field-filter-clear svg{fill:currentColor}.ngx-virtual-select-field-viewport{width:100%;height:calc(var(--ngx-virtual-select-field__viewport-option-height) * var(--ngx-virtual-select-field__viewport-page-size) + var(--ngx-virtual-select-field-panel-list-wrapper-padding) * 2)}.ngx-virtual-select-field-list-wrapper{display:flex;flex-direction:column;padding-top:var(--ngx-virtual-select-field-panel-list-wrapper-padding);padding-bottom:var(--ngx-virtual-select-field-panel-list-wrapper-padding)}.ngx-virtual-select-field-no-results{padding:16px;text-align:center;color:var(--ngx-virtual-select-field-no-results-text-color, currentColor);font-size:14px;opacity:.6}.ngx-virtual-select-field-loading{padding:32px;display:flex;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: i2.ɵɵCdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2.ɵɵCdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2.ɵɵCdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatPseudoCheckboxModule }, { kind: "component", type: i1.MatPseudoCheckbox, selector: "mat-pseudo-checkbox", inputs: ["state", "disabled", "appearance"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
797
823
|
}
|
|
798
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
824
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgxVirtualSelectFieldComponent, decorators: [{
|
|
799
825
|
type: Component,
|
|
800
|
-
args: [{ selector: 'ngx-virtual-select-field', exportAs: 'ngxVirtualSelectField', standalone: true, imports: [
|
|
826
|
+
args: [{ selector: 'ngx-virtual-select-field', exportAs: 'ngxVirtualSelectField', standalone: true, imports: [
|
|
827
|
+
CommonModule,
|
|
828
|
+
OverlayModule,
|
|
829
|
+
ScrollingModule,
|
|
830
|
+
MatFormFieldModule,
|
|
831
|
+
MatInputModule,
|
|
832
|
+
MatProgressSpinnerModule,
|
|
833
|
+
MatPseudoCheckboxModule,
|
|
834
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
801
835
|
{
|
|
802
836
|
provide: MatFormFieldControl,
|
|
803
837
|
useExisting: NgxVirtualSelectFieldComponent,
|
|
@@ -814,8 +848,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImpor
|
|
|
814
848
|
class: 'ngx-virtual-select-field',
|
|
815
849
|
'[class.ngx-virtual-select-field-disabled]': 'disabled',
|
|
816
850
|
'[class.ngx-virtual-select-field-invalid]': 'errorState',
|
|
817
|
-
}, template: "<div\n class=\"ngx-virtual-select-field-trigger\"\n cdk-overlay-origin\n (click)=\"open()\"\n #fallbackOverlayOrigin=\"cdkOverlayOrigin\"\n #trigger\n>\n <div class=\"ngx-virtual-select-field-value\">\n @if (empty) {\n <span class=\"ngx-virtual-select-field-placeholder\">{{\n placeholder\n }}</span>\n } @else {\n <span>\n @if (customTrigger) {\n <ng-content select=\"ngx-virtual-select-field-trigger\"></ng-content>\n } @else {\n <span>{{ triggerValue$ | async }}</span>\n }\n </span>\n }\n </div>\n\n @if (clearable && !empty && !disabled) {\n <button\n type=\"button\"\n class=\"ngx-virtual-select-field-clear\"\n (click)=\"onClear($event)\"\n aria-label=\"Clear selection\"\n >\n <svg\n viewBox=\"0 0 24 24\"\n width=\"18px\"\n height=\"18px\"\n focusable=\"false\"\n >\n <path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"/>\n </svg>\n </button>\n }\n\n <div class=\"ngx-virtual-select-field-arrow-wrapper\">\n <div class=\"ngx-virtual-select-field-arrow\">\n <!-- Use an inline SVG, because it works better than a CSS triangle in high contrast mode. -->\n <svg\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n focusable=\"false\"\n aria-hidden=\"true\"\n >\n <path d=\"M7 10l5 5 5-5z\" />\n </svg>\n </div>\n </div>\n</div>\n\n<ng-template\n cdk-connected-overlay\n cdkConnectedOverlayLockPosition\n cdkConnectedOverlayHasBackdrop\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n [cdkConnectedOverlayOpen]=\"isPanelOpened()\"\n [cdkConnectedOverlayOrigin]=\"preferredOverlayOrigin || fallbackOverlayOrigin\"\n [cdkConnectedOverlayPositions]=\"POSITIONS\"\n [cdkConnectedOverlayPanelClass]=\"overlayPanelClass\"\n [cdkConnectedOverlayWidth]=\"overlayWidth()\"\n (backdropClick)=\"close()\"\n (detach)=\"close()\"\n (attach)=\"onOverlayAttached()\"\n>\n <!--\n [attr.aria-multiselectable]=\"multiple\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"_getPanelAriaLabelledby()\"\n [@transformPanel]=\"'showing'\"\n (@transformPanel.done)=\"_panelDoneAnimatingStream.next($event.toState)\"\n -->\n <div class=\"ngx-virtual-select-field-panel {{ inheritedColorTheme }}\" [ngClass]=\"panelClass\">\n @if (filterable && hasOptionsToFilter()) {\n <div class=\"ngx-virtual-select-field-filter-wrapper\">\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"ngx-virtual-select-field-filter-field\">\n <input\n matInput\n #filterInput\n type=\"text\"\n [placeholder]=\"filterPlaceholder\"\n [value]=\"filterText()\"\n (input)=\"onFilterInput($event)\"\n (keydown)=\"onFilterKeyDown($event)\"\n />\n @if (filterClearable && filterText()) {\n <button\n matSuffix\n type=\"button\"\n class=\"ngx-virtual-select-field-filter-clear\"\n (click)=\"onFilterClear()\"\n aria-label=\"Clear filter\"\n >\n <svg\n viewBox=\"0 0 24 24\"\n width=\"18px\"\n height=\"18px\"\n focusable=\"false\"\n >\n <path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"/>\n </svg>\n </button>\n }\n </mat-form-field>\n </div>\n }\n @if (hasNoFilteredResults()) {\n <div class=\"ngx-virtual-select-field-no-results\">\n No results found. Try adjusting your filter.\n </div>\n }\n <cdk-virtual-scroll-viewport\n role=\"listbox\"\n tabindex=\"-1\"\n class=\"ngx-virtual-select-field-viewport\"\n [style.--ngx-virtual-select-field__viewport-page-size]=\"maxPageSize\"\n [style.--ngx-virtual-select-field__viewport-option-height.px]=\"optionHeight\"\n [itemSize]=\"optionHeight\"\n (scrolledIndexChange)=\"onScrolledIndexChange()\"\n (keydown)=\"onKeyDown($event)\"\n >\n <div class=\"ngx-virtual-select-field-list-wrapper\">\n <ng-container\n *cdkVirtualFor=\"\n let option of filteredOptions();\n trackBy: optionTrackBy\n \"\n >\n <ng-container\n [ngTemplateOutlet]=\"optionFor.template\"\n [ngTemplateOutletContext]=\"{ $implicit: option }\"\n >\n </ng-container>\n </ng-container>\n </div>\n </cdk-virtual-scroll-viewport>\n </div>\n</ng-template>\n", styles: [":host{color:var(--ngx-virtual-select-field-trigger-text-color);font-family:var(--ngx-virtual-select-field-trigger-font-family);line-height:var(--ngx-virtual-select-field-trigger-line-height);font-size:var(--ngx-virtual-select-field-trigger-font-size);font-weight:var(--ngx-virtual-select-field-trigger-font-weight);letter-spacing:var(--ngx-virtual-select-field-trigger-letter-spacing);outline:none}.ngx-virtual-select-field-trigger{display:inline-flex;align-items:center;cursor:pointer;position:relative;box-sizing:border-box;width:100%}:host-context(.ngx-virtual-select-field-disabled) .ngx-virtual-select-field-trigger{cursor:default;color:var(--ngx-virtual-select-field-trigger-text-color--disabled)}.ngx-virtual-select-field-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.ngx-virtual-select-field-placeholder{transition:var(--ngx-virtual-select-field-placeholder-transition);color:var(--ngx-virtual-select-field-placeholder-text-color)}._mat-animation-noopable .ngx-virtual-select-field-placeholder{transition:none}:host-context(.mat-form-field-hide-placeholder) .ngx-virtual-select-field-placeholder{color:transparent;-webkit-text-fill-color:transparent;transition:none;display:block}.ngx-virtual-select-field-placeholder:empty:before{content:\" \";white-space:pre;width:1px;display:inline-block}.ngx-virtual-select-field-arrow{width:calc(var(--ngx-virtual-select-field-arrow-size) * 2);height:var(--ngx-virtual-select-field-arrow-size);position:relative;color:var(--ngx-virtual-select-field-arrow-color--enabled)}:host-context(.ngx-virtual-select-field-invalid) .ngx-virtual-select-field-arrow{color:var(--ngx-virtual-select-field-arrow-color--invalid)}:host-context(.mat-focused):not(.ngx-virtual-select-field-invalid) .ngx-virtual-select-field-arrow{color:var(--ngx-virtual-select-field-arrow-color--focused)}:host-context(.ngx-virtual-select-field-disabled) .ngx-virtual-select-field-arrow{color:var(--ngx-virtual-select-field-arrow-color--disabled)}.ngx-virtual-select-field-arrow svg{fill:currentColor;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@media(forced-colors:active){.ngx-virtual-select-field-arrow svg{fill:CanvasText}:host-context(.ngx-virtual-select-field-disabled) .ngx-virtual-select-field-arrow svg{fill:GrayText}}.ngx-virtual-select-field-clear{position:absolute;transform:translateY(-8px);right:20px;border:none;background:transparent;cursor:pointer;padding:4px;margin-right:4px;display:flex;align-items:center;justify-content:center;color:var(--ngx-virtual-select-field-trigger-text-color);opacity:.6;transition:opacity .2s;flex-shrink:0}.ngx-virtual-select-field-clear:hover{opacity:1}.ngx-virtual-select-field-clear svg{fill:currentColor}.ngx-virtual-select-field-arrow-wrapper{height:24px;flex-shrink:0;display:inline-flex;align-items:center}:host-context(.mat-form-field-appearance-fill) .ngx-virtual-select-field-arrow-wrapper{transform:translateY(-8px)}:host-context(.mat-form-field-appearance-fill .mdc-text-field--no-label) .ngx-virtual-select-field-arrow-wrapper{transform:none}.ngx-virtual-select-field-panel{width:100%;background:var(--ngx-virtual-select-field-panel-background);box-shadow:var(--ngx-virtual-select-field-panel-box-shadow);display:flex;flex-direction:column}@media(forced-colors:active){.ngx-virtual-select-field-panel{outline:solid 1px}}.ngx-virtual-select-field-filter-wrapper{padding:8px;border-bottom:1px solid var(--ngx-virtual-select-field-divider-color, rgba(0, 0, 0, .12));background:var(--ngx-virtual-select-field-panel-background)}.ngx-virtual-select-field-filter-field{width:100%;display:block}.ngx-virtual-select-field-filter-clear{border:none;background:transparent;cursor:pointer;padding:4px 20px 4px 4px;display:flex;align-items:center;justify-content:center;color:var(--ngx-virtual-select-field-trigger-text-color);opacity:.6;transition:opacity .2s}.ngx-virtual-select-field-filter-clear:hover{opacity:1}.ngx-virtual-select-field-filter-clear svg{fill:currentColor}.ngx-virtual-select-field-viewport{width:100%;height:calc(var(--ngx-virtual-select-field__viewport-option-height) * var(--ngx-virtual-select-field__viewport-page-size) + var(--ngx-virtual-select-field-panel-list-wrapper-padding) * 2)}.ngx-virtual-select-field-list-wrapper{display:flex;flex-direction:column;padding-top:var(--ngx-virtual-select-field-panel-list-wrapper-padding);padding-bottom:var(--ngx-virtual-select-field-panel-list-wrapper-padding)}.ngx-virtual-select-field-no-results{padding:16px;text-align:center;color:var(--ngx-virtual-select-field-no-results-text-color, currentColor);font-size:14px;opacity:.6}\n"] }]
|
|
818
|
-
}], ctorParameters: () => [{ type:
|
|
851
|
+
}, template: "<div\n class=\"ngx-virtual-select-field-trigger\"\n cdk-overlay-origin\n (click)=\"open()\"\n #fallbackOverlayOrigin=\"cdkOverlayOrigin\"\n #trigger\n>\n <div class=\"ngx-virtual-select-field-value\">\n @if (empty) {\n <span class=\"ngx-virtual-select-field-placeholder\">{{\n placeholder\n }}</span>\n } @else {\n <span>\n @if (customTrigger) {\n <ng-content select=\"ngx-virtual-select-field-trigger\"></ng-content>\n } @else {\n <span>{{ triggerValue$ | async }}</span>\n }\n </span>\n }\n </div>\n\n @if (clearable && !empty && !disabled) {\n <button\n type=\"button\"\n class=\"ngx-virtual-select-field-clear\"\n (click)=\"onClear($event)\"\n aria-label=\"Clear selection\"\n >\n <svg\n viewBox=\"0 0 24 24\"\n width=\"18px\"\n height=\"18px\"\n focusable=\"false\"\n >\n <path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"/>\n </svg>\n </button>\n }\n\n <div class=\"ngx-virtual-select-field-arrow-wrapper\">\n <div class=\"ngx-virtual-select-field-arrow\">\n <!-- Use an inline SVG, because it works better than a CSS triangle in high contrast mode. -->\n <svg\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n focusable=\"false\"\n aria-hidden=\"true\"\n >\n <path d=\"M7 10l5 5 5-5z\" />\n </svg>\n </div>\n </div>\n</div>\n\n<ng-template\n cdk-connected-overlay\n cdkConnectedOverlayLockPosition\n cdkConnectedOverlayHasBackdrop\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n [cdkConnectedOverlayOpen]=\"isPanelOpened()\"\n [cdkConnectedOverlayOrigin]=\"preferredOverlayOrigin || fallbackOverlayOrigin\"\n [cdkConnectedOverlayPositions]=\"POSITIONS\"\n [cdkConnectedOverlayPanelClass]=\"overlayPanelClass\"\n [cdkConnectedOverlayWidth]=\"overlayWidth()\"\n (backdropClick)=\"close()\"\n (detach)=\"close()\"\n (attach)=\"onOverlayAttached()\"\n>\n <!--\n [attr.aria-multiselectable]=\"multiple\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"_getPanelAriaLabelledby()\"\n [@transformPanel]=\"'showing'\"\n (@transformPanel.done)=\"_panelDoneAnimatingStream.next($event.toState)\"\n -->\n <div class=\"ngx-virtual-select-field-panel {{ inheritedColorTheme }}\" [ngClass]=\"panelClass\">\n @if (filterable && hasOptionsToFilter()) {\n <div class=\"ngx-virtual-select-field-filter-wrapper\">\n @if (multiple) {\n <div class=\"ngx-virtual-select-field-select-all\">\n <mat-pseudo-checkbox\n [state]=\"isAllSelected() ? 'checked' : (isIndeterminate() ? 'indeterminate' : 'unchecked')\"\n (click)=\"onSelectAllChange(); $event.stopPropagation()\"\n aria-label=\"Select all options\"\n ></mat-pseudo-checkbox>\n </div>\n }\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"ngx-virtual-select-field-filter-field\">\n <input\n matInput\n #filterInput\n type=\"text\"\n [placeholder]=\"filterPlaceholder\"\n [value]=\"filterText()\"\n (input)=\"onFilterInput($event)\"\n (keydown)=\"onFilterKeyDown($event)\"\n />\n @if (filterClearable && filterText()) {\n <button\n matSuffix\n type=\"button\"\n class=\"ngx-virtual-select-field-filter-clear\"\n (click)=\"onFilterClear()\"\n aria-label=\"Clear filter\"\n >\n <svg\n viewBox=\"0 0 24 24\"\n width=\"18px\"\n height=\"18px\"\n focusable=\"false\"\n >\n <path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"/>\n </svg>\n </button>\n }\n </mat-form-field>\n </div>\n }\n @if (loading) {\n <div class=\"ngx-virtual-select-field-loading\">\n <mat-spinner diameter=\"40\"></mat-spinner>\n </div>\n } @else if (hasNoFilteredResults()) {\n <div class=\"ngx-virtual-select-field-no-results\">\n No results found. Try adjusting your filter.\n </div>\n }\n @if (!loading) {\n <cdk-virtual-scroll-viewport\n role=\"listbox\"\n tabindex=\"-1\"\n class=\"ngx-virtual-select-field-viewport\"\n [style.--ngx-virtual-select-field__viewport-page-size]=\"maxPageSize\"\n [style.--ngx-virtual-select-field__viewport-option-height.px]=\"optionHeight\"\n [itemSize]=\"optionHeight\"\n (scrolledIndexChange)=\"onScrolledIndexChange()\"\n (keydown)=\"onKeyDown($event)\"\n >\n <div class=\"ngx-virtual-select-field-list-wrapper\">\n <ng-container\n *cdkVirtualFor=\"\n let option of filteredOptions();\n trackBy: optionTrackBy\n \"\n >\n <ng-container\n [ngTemplateOutlet]=\"optionFor.template\"\n [ngTemplateOutletContext]=\"{ $implicit: option }\"\n >\n </ng-container>\n </ng-container>\n </div>\n </cdk-virtual-scroll-viewport>\n }\n </div>\n</ng-template>\n", styles: [":host{color:var(--ngx-virtual-select-field-trigger-text-color);font-family:var(--ngx-virtual-select-field-trigger-font-family);line-height:var(--ngx-virtual-select-field-trigger-line-height);font-size:var(--ngx-virtual-select-field-trigger-font-size);font-weight:var(--ngx-virtual-select-field-trigger-font-weight);letter-spacing:var(--ngx-virtual-select-field-trigger-letter-spacing);outline:none}.ngx-virtual-select-field-trigger{display:inline-flex;align-items:center;cursor:pointer;position:relative;box-sizing:border-box;width:100%}:host-context(.ngx-virtual-select-field-disabled) .ngx-virtual-select-field-trigger{cursor:default;color:var(--ngx-virtual-select-field-trigger-text-color--disabled)}.ngx-virtual-select-field-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;min-width:0}.ngx-virtual-select-field-placeholder{transition:var(--ngx-virtual-select-field-placeholder-transition);color:var(--ngx-virtual-select-field-placeholder-text-color)}._mat-animation-noopable .ngx-virtual-select-field-placeholder{transition:none}:host-context(.mat-form-field-hide-placeholder) .ngx-virtual-select-field-placeholder{color:transparent;-webkit-text-fill-color:transparent;transition:none;display:block}.ngx-virtual-select-field-placeholder:empty:before{content:\" \";white-space:pre;width:1px;display:inline-block}.ngx-virtual-select-field-arrow{width:calc(var(--ngx-virtual-select-field-arrow-size) * 2);height:var(--ngx-virtual-select-field-arrow-size);position:relative;color:var(--ngx-virtual-select-field-arrow-color--enabled)}:host-context(.ngx-virtual-select-field-invalid) .ngx-virtual-select-field-arrow{color:var(--ngx-virtual-select-field-arrow-color--invalid)}:host-context(.mat-focused):not(.ngx-virtual-select-field-invalid) .ngx-virtual-select-field-arrow{color:var(--ngx-virtual-select-field-arrow-color--focused)}:host-context(.ngx-virtual-select-field-disabled) .ngx-virtual-select-field-arrow{color:var(--ngx-virtual-select-field-arrow-color--disabled)}.ngx-virtual-select-field-arrow svg{fill:currentColor;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@media(forced-colors:active){.ngx-virtual-select-field-arrow svg{fill:CanvasText}:host-context(.ngx-virtual-select-field-disabled) .ngx-virtual-select-field-arrow svg{fill:GrayText}}.ngx-virtual-select-field-clear{position:absolute;transform:translateY(-8px);right:20px;border:none;background:transparent;cursor:pointer;padding:4px;margin-right:4px;display:flex;align-items:center;justify-content:center;color:var(--ngx-virtual-select-field-trigger-text-color);opacity:.6;transition:opacity .2s;flex-shrink:0}.ngx-virtual-select-field-clear:hover{opacity:1}.ngx-virtual-select-field-clear svg{fill:currentColor}.ngx-virtual-select-field-arrow-wrapper{height:24px;flex-shrink:0;display:inline-flex;align-items:center}:host-context(.mat-form-field-appearance-fill) .ngx-virtual-select-field-arrow-wrapper{transform:translateY(-8px)}:host-context(.mat-form-field-appearance-fill .mdc-text-field--no-label) .ngx-virtual-select-field-arrow-wrapper{transform:none}.ngx-virtual-select-field-panel{width:100%;background:var(--ngx-virtual-select-field-panel-background);box-shadow:var(--ngx-virtual-select-field-panel-box-shadow);display:flex;flex-direction:column}@media(forced-colors:active){.ngx-virtual-select-field-panel{outline:solid 1px}}.ngx-virtual-select-field-filter-wrapper{display:flex;align-items:flex-start;gap:12px;padding:8px;border-bottom:1px solid var(--ngx-virtual-select-field-divider-color, rgba(0, 0, 0, .12));background:var(--ngx-virtual-select-field-panel-background)}.ngx-virtual-select-field-select-all{display:flex;align-items:center;cursor:pointer;flex-shrink:0;padding-top:16px;padding-left:8px}.ngx-virtual-select-field-select-all mat-pseudo-checkbox{margin:0}.ngx-virtual-select-field-select-all:hover mat-pseudo-checkbox{opacity:.8}.ngx-virtual-select-field-filter-field{flex:1;min-width:0;display:block}.ngx-virtual-select-field-filter-field ::ng-deep .mat-mdc-text-field-wrapper{width:100%}.ngx-virtual-select-field-filter-clear{border:none;background:transparent;cursor:pointer;padding:4px 20px 4px 4px;display:flex;align-items:center;justify-content:center;color:var(--ngx-virtual-select-field-trigger-text-color);opacity:.6;transition:opacity .2s}.ngx-virtual-select-field-filter-clear:hover{opacity:1}.ngx-virtual-select-field-filter-clear svg{fill:currentColor}.ngx-virtual-select-field-viewport{width:100%;height:calc(var(--ngx-virtual-select-field__viewport-option-height) * var(--ngx-virtual-select-field__viewport-page-size) + var(--ngx-virtual-select-field-panel-list-wrapper-padding) * 2)}.ngx-virtual-select-field-list-wrapper{display:flex;flex-direction:column;padding-top:var(--ngx-virtual-select-field-panel-list-wrapper-padding);padding-bottom:var(--ngx-virtual-select-field-panel-list-wrapper-padding)}.ngx-virtual-select-field-no-results{padding:16px;text-align:center;color:var(--ngx-virtual-select-field-no-results-text-color, currentColor);font-size:14px;opacity:.6}.ngx-virtual-select-field-loading{padding:32px;display:flex;justify-content:center;align-items:center}\n"] }]
|
|
852
|
+
}], ctorParameters: () => [{ type: i3.MatFormField, decorators: [{
|
|
819
853
|
type: Optional
|
|
820
854
|
}, {
|
|
821
855
|
type: Inject,
|
|
@@ -864,6 +898,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImpor
|
|
|
864
898
|
}], clearable: [{
|
|
865
899
|
type: Input,
|
|
866
900
|
args: [{ transform: booleanAttribute }]
|
|
901
|
+
}], loading: [{
|
|
902
|
+
type: Input,
|
|
903
|
+
args: [{ transform: booleanAttribute }]
|
|
867
904
|
}], value: [{
|
|
868
905
|
type: Input
|
|
869
906
|
}], placeholder: [{
|
|
@@ -874,7 +911,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImpor
|
|
|
874
911
|
}], disabled: [{
|
|
875
912
|
type: Input,
|
|
876
913
|
args: [{ transform: booleanAttribute }]
|
|
877
|
-
}], cdkVirtualScrollViewport: [{
|
|
914
|
+
}], valueChange: [{ type: i0.Output, args: ["valueChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], cdkVirtualScrollViewport: [{
|
|
878
915
|
type: ViewChild,
|
|
879
916
|
args: [CdkVirtualScrollViewport, { static: false }]
|
|
880
917
|
}], cdkConnectedOverlay: [{
|