@wlcm/angular 17.7.21 → 17.7.23
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/forms/esm2022/lib/forms/components/autocomplete/autocomplete.component.mjs +3 -3
- package/forms/esm2022/lib/forms/components/select/select.component.mjs +42 -12
- package/forms/fesm2022/wlcm-angular-forms.mjs +42 -12
- package/forms/fesm2022/wlcm-angular-forms.mjs.map +1 -1
- package/forms/lib/forms/components/autocomplete/autocomplete.component.d.ts +1 -0
- package/forms/lib/forms/components/select/select.component.d.ts +5 -0
- package/package.json +1 -1
|
@@ -17,6 +17,7 @@ import { RxLet } from '@rx-angular/template/let';
|
|
|
17
17
|
import * as i3 from '@angular/material/core';
|
|
18
18
|
import * as i1$2 from '@angular/material/checkbox';
|
|
19
19
|
import { MatCheckboxModule } from '@angular/material/checkbox';
|
|
20
|
+
import { toObservable } from '@angular/core/rxjs-interop';
|
|
20
21
|
import { CdkOverlayOrigin } from '@angular/cdk/overlay';
|
|
21
22
|
import { mergeWith } from 'lodash-es';
|
|
22
23
|
import { MatRadioModule, MAT_RADIO_DEFAULT_OPTIONS } from '@angular/material/radio';
|
|
@@ -618,7 +619,7 @@ let WlcmAutocompleteComponent = class WlcmAutocompleteComponent extends WlcmAuto
|
|
|
618
619
|
return { bind: () => autocomplete };
|
|
619
620
|
},
|
|
620
621
|
},
|
|
621
|
-
], viewQueries: [{ propertyName: "inputElement", first: true, predicate: WLCM_INPUT, descendants: true, read: ElementRef }, { propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }, { propertyName: "autocomplete", first: true, predicate: MatAutocomplete, descendants: true }], exportAs: ["wlcmAutocomplete"], usesInheritance: true, ngImport: i0, template: "<input\n wlcmInput\n type=\"text\"\n [matAutocomplete]=\"autocomplete\"\n [placeholder]=\"placeholder\"\n [formControl]=\"control\"\n (blur)=\"blured()\"\n/>\n\n<mat-autocomplete\n #autocomplete=\"matAutocomplete\"\n wlcmAutocomplete\n [disableRipple]=\"true\"\n [displayWith]=\"displayWith\"\n [hideSingleSelectionIndicator]=\"true\"\n (panelScrolled)=\"loadMore()\"\n>\n <ng-container *rxLet=\"$any(options$ | async); let options\">\n <mat-option\n *ngFor=\"let option of options\"\n [ngClass]=\"{ 'wlcm-custom-option-content': optionTemplate }\"\n [value]=\"option\"\n >\n @if (optionTemplate) {\n <ng-container\n *ngTemplateOutlet=\"optionTemplate; context: { $implicit: option }\"\n ></ng-container>\n } @else {\n {{ option.viewValue }}\n }\n </mat-option>\n\n <mat-option [disabled]=\"true\" *ngIf=\"options.length === 0\">\n @if (noResultsTemplate()) {\n <ng-container\n *ngTemplateOutlet=\"\n noResultsTemplate()!;\n context: { $implicit: control.value }\n \"\n ></ng-container>\n } @else {\n
|
|
622
|
+
], viewQueries: [{ propertyName: "inputElement", first: true, predicate: WLCM_INPUT, descendants: true, read: ElementRef }, { propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }, { propertyName: "autocomplete", first: true, predicate: MatAutocomplete, descendants: true }], exportAs: ["wlcmAutocomplete"], usesInheritance: true, ngImport: i0, template: "<input\n wlcmInput\n type=\"text\"\n [matAutocomplete]=\"autocomplete\"\n [placeholder]=\"placeholder\"\n [formControl]=\"control\"\n (blur)=\"blured()\"\n/>\n\n<mat-autocomplete\n #autocomplete=\"matAutocomplete\"\n wlcmAutocomplete\n [disableRipple]=\"true\"\n [displayWith]=\"displayWith\"\n [hideSingleSelectionIndicator]=\"true\"\n (panelScrolled)=\"loadMore()\"\n>\n <ng-container *rxLet=\"$any(options$ | async); let options\">\n <mat-option\n *ngFor=\"let option of options\"\n [ngClass]=\"{ 'wlcm-custom-option-content': optionTemplate }\"\n [value]=\"option\"\n >\n @if (optionTemplate) {\n <ng-container\n *ngTemplateOutlet=\"optionTemplate; context: { $implicit: option }\"\n ></ng-container>\n } @else {\n {{ option.viewValue }}\n }\n </mat-option>\n\n <mat-option [disabled]=\"true\" *ngIf=\"options.length === 0\">\n @if (noResultsTemplate()) {\n <ng-container\n *ngTemplateOutlet=\"\n noResultsTemplate()!;\n context: { $implicit: control.value, loading: loading$ | async }\n \"\n ></ng-container>\n } @else {\n <ng-container\n *ngTemplateOutlet=\"\n defaultNoResultsTemplate;\n context: { $implicit: control.value, loading: loading$ | async }\n \"\n ></ng-container>\n }\n </mat-option>\n </ng-container>\n</mat-autocomplete>\n\n<ng-template #defaultNoResultsTemplate let-loading=\"loading\">\n @if (loading) {\n Please wait...\n } @else {\n No results found\n }\n</ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i1$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i1$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: AutocompleteDirective, selector: "[wlcmAutocomplete]", outputs: ["panelScrolled"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: WlcmInputDirective, selector: "[wlcmInput]" }, { kind: "directive", type: RxLet, selector: "[rxLet]", inputs: ["rxLet", "rxLetStrategy", "rxLetComplete", "rxLetError", "rxLetSuspense", "rxLetContextTrigger", "rxLetCompleteTrigger", "rxLetErrorTrigger", "rxLetSuspenseTrigger", "rxLetNextTrigger", "rxLetRenderCallback", "rxLetParent", "rxLetPatchZone"], outputs: ["rendered"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
622
623
|
};
|
|
623
624
|
WlcmAutocompleteComponent = __decorate([
|
|
624
625
|
UntilDestroy(),
|
|
@@ -646,7 +647,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
|
|
|
646
647
|
return { bind: () => autocomplete };
|
|
647
648
|
},
|
|
648
649
|
},
|
|
649
|
-
], template: "<input\n wlcmInput\n type=\"text\"\n [matAutocomplete]=\"autocomplete\"\n [placeholder]=\"placeholder\"\n [formControl]=\"control\"\n (blur)=\"blured()\"\n/>\n\n<mat-autocomplete\n #autocomplete=\"matAutocomplete\"\n wlcmAutocomplete\n [disableRipple]=\"true\"\n [displayWith]=\"displayWith\"\n [hideSingleSelectionIndicator]=\"true\"\n (panelScrolled)=\"loadMore()\"\n>\n <ng-container *rxLet=\"$any(options$ | async); let options\">\n <mat-option\n *ngFor=\"let option of options\"\n [ngClass]=\"{ 'wlcm-custom-option-content': optionTemplate }\"\n [value]=\"option\"\n >\n @if (optionTemplate) {\n <ng-container\n *ngTemplateOutlet=\"optionTemplate; context: { $implicit: option }\"\n ></ng-container>\n } @else {\n {{ option.viewValue }}\n }\n </mat-option>\n\n <mat-option [disabled]=\"true\" *ngIf=\"options.length === 0\">\n @if (noResultsTemplate()) {\n <ng-container\n *ngTemplateOutlet=\"\n noResultsTemplate()!;\n context: { $implicit: control.value }\n \"\n ></ng-container>\n } @else {\n
|
|
650
|
+
], template: "<input\n wlcmInput\n type=\"text\"\n [matAutocomplete]=\"autocomplete\"\n [placeholder]=\"placeholder\"\n [formControl]=\"control\"\n (blur)=\"blured()\"\n/>\n\n<mat-autocomplete\n #autocomplete=\"matAutocomplete\"\n wlcmAutocomplete\n [disableRipple]=\"true\"\n [displayWith]=\"displayWith\"\n [hideSingleSelectionIndicator]=\"true\"\n (panelScrolled)=\"loadMore()\"\n>\n <ng-container *rxLet=\"$any(options$ | async); let options\">\n <mat-option\n *ngFor=\"let option of options\"\n [ngClass]=\"{ 'wlcm-custom-option-content': optionTemplate }\"\n [value]=\"option\"\n >\n @if (optionTemplate) {\n <ng-container\n *ngTemplateOutlet=\"optionTemplate; context: { $implicit: option }\"\n ></ng-container>\n } @else {\n {{ option.viewValue }}\n }\n </mat-option>\n\n <mat-option [disabled]=\"true\" *ngIf=\"options.length === 0\">\n @if (noResultsTemplate()) {\n <ng-container\n *ngTemplateOutlet=\"\n noResultsTemplate()!;\n context: { $implicit: control.value, loading: loading$ | async }\n \"\n ></ng-container>\n } @else {\n <ng-container\n *ngTemplateOutlet=\"\n defaultNoResultsTemplate;\n context: { $implicit: control.value, loading: loading$ | async }\n \"\n ></ng-container>\n }\n </mat-option>\n </ng-container>\n</mat-autocomplete>\n\n<ng-template #defaultNoResultsTemplate let-loading=\"loading\">\n @if (loading) {\n Please wait...\n } @else {\n No results found\n }\n</ng-template>\n" }]
|
|
650
651
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
651
652
|
type: Inject,
|
|
652
653
|
args: [WLCM_FORM_FIELD]
|
|
@@ -903,9 +904,15 @@ let WlcmSelectComponent = class WlcmSelectComponent {
|
|
|
903
904
|
this.WlcmIconName = WlcmIconName;
|
|
904
905
|
this._paginatedData = null;
|
|
905
906
|
this._previousValue = null;
|
|
907
|
+
this._optionsCache = new Set();
|
|
906
908
|
this.computedOptions = computed(() => {
|
|
907
|
-
|
|
909
|
+
const options = this.paginated() ? this.paginatedOptions() : this.options();
|
|
910
|
+
if (this.isOptionDisabled() && options.length > 0) {
|
|
911
|
+
this.updateOptionsStatus();
|
|
912
|
+
}
|
|
913
|
+
return options;
|
|
908
914
|
});
|
|
915
|
+
this.prefilledOptions = signal([]);
|
|
909
916
|
this.matOptions = viewChildren(MatOption);
|
|
910
917
|
this._focusStream$ = new BehaviorSubject(EMPTY);
|
|
911
918
|
this._blurStream$ = new BehaviorSubject(EMPTY);
|
|
@@ -920,14 +927,11 @@ let WlcmSelectComponent = class WlcmSelectComponent {
|
|
|
920
927
|
if (this.parentFormMember) {
|
|
921
928
|
this.handleStateChange();
|
|
922
929
|
}
|
|
923
|
-
|
|
924
|
-
|
|
930
|
+
toObservable(this.paginated)
|
|
931
|
+
.pipe(untilDestroyed(this))
|
|
932
|
+
.subscribe((paginated) => {
|
|
933
|
+
if (paginated)
|
|
925
934
|
this.loadPaginatedOptions();
|
|
926
|
-
}, { allowSignalWrites: true });
|
|
927
|
-
effect(() => {
|
|
928
|
-
if (this.isOptionDisabled() && this.computedOptions().length > 0) {
|
|
929
|
-
this.updateOptionsStatus();
|
|
930
|
-
}
|
|
931
935
|
});
|
|
932
936
|
}
|
|
933
937
|
ngAfterViewInit() {
|
|
@@ -983,6 +987,8 @@ let WlcmSelectComponent = class WlcmSelectComponent {
|
|
|
983
987
|
});
|
|
984
988
|
}
|
|
985
989
|
writeValue(value) {
|
|
990
|
+
if (this.paginated())
|
|
991
|
+
this.prefillOptions(value);
|
|
986
992
|
this.updateValue(value);
|
|
987
993
|
}
|
|
988
994
|
registerOnChange(callback) {
|
|
@@ -1007,6 +1013,8 @@ let WlcmSelectComponent = class WlcmSelectComponent {
|
|
|
1007
1013
|
this.fetchPaginatedOptions({ ...this.queryParams, page: 1 })
|
|
1008
1014
|
.pipe(untilDestroyed(this), first())
|
|
1009
1015
|
.subscribe((paginatedData) => {
|
|
1016
|
+
this._optionsCache.clear();
|
|
1017
|
+
this.cacheOptions(paginatedData.data);
|
|
1010
1018
|
this._paginatedData = paginatedData;
|
|
1011
1019
|
this.paginatedOptions.set(paginatedData.data);
|
|
1012
1020
|
});
|
|
@@ -1018,10 +1026,32 @@ let WlcmSelectComponent = class WlcmSelectComponent {
|
|
|
1018
1026
|
this.fetchPaginatedOptions({ ...this.queryParams })
|
|
1019
1027
|
.pipe(untilDestroyed(this), first())
|
|
1020
1028
|
.subscribe((paginatedData) => {
|
|
1029
|
+
this.cacheOptions(paginatedData.data);
|
|
1021
1030
|
this._paginatedData = paginatedData;
|
|
1022
1031
|
this.paginatedOptions.update((options) => [...options, ...paginatedData.data]);
|
|
1023
1032
|
});
|
|
1024
1033
|
}
|
|
1034
|
+
cacheOptions(options) {
|
|
1035
|
+
options.forEach((option) => this._optionsCache.add(option.value));
|
|
1036
|
+
this.syncPrefilledOptions();
|
|
1037
|
+
}
|
|
1038
|
+
syncPrefilledOptions() {
|
|
1039
|
+
if (this.prefilledOptions().length === 0)
|
|
1040
|
+
return;
|
|
1041
|
+
this.prefilledOptions.update((options) => {
|
|
1042
|
+
return options.filter((option) => !this._optionsCache.has(option.value));
|
|
1043
|
+
});
|
|
1044
|
+
}
|
|
1045
|
+
prefillOptions(value) {
|
|
1046
|
+
let prefilledOptions = [];
|
|
1047
|
+
if (value instanceof Array) {
|
|
1048
|
+
prefilledOptions = value.filter((option) => option instanceof Object);
|
|
1049
|
+
}
|
|
1050
|
+
else if (value instanceof Object) {
|
|
1051
|
+
prefilledOptions = [value];
|
|
1052
|
+
}
|
|
1053
|
+
this.prefilledOptions.set(prefilledOptions);
|
|
1054
|
+
}
|
|
1025
1055
|
handleScrollDown() {
|
|
1026
1056
|
const element = document.querySelector('.mat-mdc-select-panel');
|
|
1027
1057
|
this.zone.runOutsideAngular(() => {
|
|
@@ -1048,7 +1078,7 @@ let WlcmSelectComponent = class WlcmSelectComponent {
|
|
|
1048
1078
|
},
|
|
1049
1079
|
{ provide: NG_VALIDATORS, useExisting: forwardRef(() => WlcmSelectComponent), multi: true },
|
|
1050
1080
|
{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => WlcmSelectComponent), multi: true },
|
|
1051
|
-
], viewQueries: [{ propertyName: "matOptions", predicate: MatOption, descendants: true, isSignal: true }, { propertyName: "matSelect", first: true, predicate: MatSelect, descendants: true }], hostDirectives: [{ directive: WlcmSelectInputBinderDirective }], ngImport: i0, template: "<mat-select\n #selectComponent\n [value]=\"value()\"\n [disabled]=\"disabled()\"\n [multiple]=\"multiple\"\n [disableRipple]=\"true\"\n [placeholder]=\"placeholder\"\n [hideSingleSelectionIndicator]=\"true\"\n [ngClass]=\"{ focused: selectComponent.focused }\"\n (selectionChange)=\"select($event)\"\n [compareWith]=\"compareWith\"\n (opened)=\"panelOpened()\"\n (closed)=\"panelClosed()\"\n>\n @if (triggerTemplate()) {\n <mat-select-trigger>\n <ng-container\n *ngTemplateOutlet=\"\n triggerTemplate()!;\n context: $any({ $implicit: selectComponent.selected })\n \"\n ></ng-container>\n </mat-select-trigger>\n }\n\n <mat-option\n *ngFor=\"let option of
|
|
1081
|
+
], viewQueries: [{ propertyName: "matOptions", predicate: MatOption, descendants: true, isSignal: true }, { propertyName: "matSelect", first: true, predicate: MatSelect, descendants: true }], hostDirectives: [{ directive: WlcmSelectInputBinderDirective }], ngImport: i0, template: "<mat-select\n #selectComponent\n [value]=\"value()\"\n [disabled]=\"disabled()\"\n [multiple]=\"multiple\"\n [disableRipple]=\"true\"\n [placeholder]=\"placeholder\"\n [hideSingleSelectionIndicator]=\"true\"\n [ngClass]=\"{ focused: selectComponent.focused }\"\n (selectionChange)=\"select($event)\"\n [compareWith]=\"compareWith\"\n (opened)=\"panelOpened()\"\n (closed)=\"panelClosed()\"\n>\n @if (triggerTemplate()) {\n <mat-select-trigger>\n <ng-container\n *ngTemplateOutlet=\"\n triggerTemplate()!;\n context: $any({ $implicit: selectComponent.selected })\n \"\n ></ng-container>\n </mat-select-trigger>\n }\n\n <mat-option\n *ngFor=\"let option of prefilledOptions()\"\n [value]=\"selectOptionFormat() === 'CompleteOption' ? option : option.value\"\n >\n <ng-container\n [ngTemplateOutlet]=\"wlcmSelectOptionContent\"\n [ngTemplateOutletContext]=\"{ $implicit: option }\"\n ></ng-container>\n </mat-option>\n\n <mat-option\n *ngFor=\"let option of computedOptions()\"\n [value]=\"selectOptionFormat() === 'CompleteOption' ? option : option.value\"\n >\n <ng-container\n [ngTemplateOutlet]=\"wlcmSelectOptionContent\"\n [ngTemplateOutletContext]=\"{ $implicit: option }\"\n ></ng-container>\n </mat-option>\n</mat-select>\n\n<div class=\"wlcm-select-arrow\">\n <ng-container\n [wlcmIcon]=\"WlcmIconName.CHEVRON_DOWN\"\n [wlcmIconStopPropagation]=\"false\"\n ></ng-container>\n</div>\n\n<ng-template #wlcmSelectOptionContent let-option>\n @if (optionTemplate()) {\n <ng-container\n *ngTemplateOutlet=\"optionTemplate(); context: $any({ $implicit: option })\"\n ></ng-container>\n } @else {\n {{ option.viewValue }}\n }\n</ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i4$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: WlcmIconDirective, selector: "[wlcmIcon]", inputs: ["wlcmIcon", "wlcmIconStopPropagation"], outputs: ["wlcmIconClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1052
1082
|
};
|
|
1053
1083
|
WlcmSelectComponent = __decorate([
|
|
1054
1084
|
UntilDestroy(),
|
|
@@ -1069,7 +1099,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
|
|
|
1069
1099
|
},
|
|
1070
1100
|
{ provide: NG_VALIDATORS, useExisting: forwardRef(() => WlcmSelectComponent), multi: true },
|
|
1071
1101
|
{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => WlcmSelectComponent), multi: true },
|
|
1072
|
-
], template: "<mat-select\n #selectComponent\n [value]=\"value()\"\n [disabled]=\"disabled()\"\n [multiple]=\"multiple\"\n [disableRipple]=\"true\"\n [placeholder]=\"placeholder\"\n [hideSingleSelectionIndicator]=\"true\"\n [ngClass]=\"{ focused: selectComponent.focused }\"\n (selectionChange)=\"select($event)\"\n [compareWith]=\"compareWith\"\n (opened)=\"panelOpened()\"\n (closed)=\"panelClosed()\"\n>\n @if (triggerTemplate()) {\n <mat-select-trigger>\n <ng-container\n *ngTemplateOutlet=\"\n triggerTemplate()!;\n context: $any({ $implicit: selectComponent.selected })\n \"\n ></ng-container>\n </mat-select-trigger>\n }\n\n <mat-option\n *ngFor=\"let option of
|
|
1102
|
+
], template: "<mat-select\n #selectComponent\n [value]=\"value()\"\n [disabled]=\"disabled()\"\n [multiple]=\"multiple\"\n [disableRipple]=\"true\"\n [placeholder]=\"placeholder\"\n [hideSingleSelectionIndicator]=\"true\"\n [ngClass]=\"{ focused: selectComponent.focused }\"\n (selectionChange)=\"select($event)\"\n [compareWith]=\"compareWith\"\n (opened)=\"panelOpened()\"\n (closed)=\"panelClosed()\"\n>\n @if (triggerTemplate()) {\n <mat-select-trigger>\n <ng-container\n *ngTemplateOutlet=\"\n triggerTemplate()!;\n context: $any({ $implicit: selectComponent.selected })\n \"\n ></ng-container>\n </mat-select-trigger>\n }\n\n <mat-option\n *ngFor=\"let option of prefilledOptions()\"\n [value]=\"selectOptionFormat() === 'CompleteOption' ? option : option.value\"\n >\n <ng-container\n [ngTemplateOutlet]=\"wlcmSelectOptionContent\"\n [ngTemplateOutletContext]=\"{ $implicit: option }\"\n ></ng-container>\n </mat-option>\n\n <mat-option\n *ngFor=\"let option of computedOptions()\"\n [value]=\"selectOptionFormat() === 'CompleteOption' ? option : option.value\"\n >\n <ng-container\n [ngTemplateOutlet]=\"wlcmSelectOptionContent\"\n [ngTemplateOutletContext]=\"{ $implicit: option }\"\n ></ng-container>\n </mat-option>\n</mat-select>\n\n<div class=\"wlcm-select-arrow\">\n <ng-container\n [wlcmIcon]=\"WlcmIconName.CHEVRON_DOWN\"\n [wlcmIconStopPropagation]=\"false\"\n ></ng-container>\n</div>\n\n<ng-template #wlcmSelectOptionContent let-option>\n @if (optionTemplate()) {\n <ng-container\n *ngTemplateOutlet=\"optionTemplate(); context: $any({ $implicit: option })\"\n ></ng-container>\n } @else {\n {{ option.viewValue }}\n }\n</ng-template>\n" }]
|
|
1073
1103
|
}], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i1$3.ScrollDetectionApi }, { type: undefined, decorators: [{
|
|
1074
1104
|
type: Inject,
|
|
1075
1105
|
args: [WLCM_FORM_FIELD]
|