ngx-render-material-forms 2.5.4 → 2.5.5
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/esm2020/lib/components/select/select.component.mjs +48 -17
- package/fesm2015/ngx-render-material-forms.js +47 -16
- package/fesm2015/ngx-render-material-forms.mjs.map +1 -1
- package/fesm2020/ngx-render-material-forms.js +47 -16
- package/fesm2020/ngx-render-material-forms.mjs.map +1 -1
- package/lib/components/select/select.component.d.ts +3 -1
- package/package.json +1 -1
|
@@ -2839,8 +2839,8 @@ class MaterialSelectComponent extends MaterialComponent {
|
|
|
2839
2839
|
this.storeDependentItems = [];
|
|
2840
2840
|
this.executionFlag = false;
|
|
2841
2841
|
this.apiCounter = 0;
|
|
2842
|
-
this.optionsInitialized = false;
|
|
2843
2842
|
this.lastOptionsHash = '';
|
|
2843
|
+
this.hasInitializedOptions = false;
|
|
2844
2844
|
}
|
|
2845
2845
|
onInputChange(event) {
|
|
2846
2846
|
if (this.instance.component.key.toLowerCase() === 'vendorproductid' && event.target.value === '') {
|
|
@@ -3043,6 +3043,7 @@ class MaterialSelectComponent extends MaterialComponent {
|
|
|
3043
3043
|
const vendorId = this.getValueByKey(paramsData, 'vendorId');
|
|
3044
3044
|
const dealId = this.getValueByKey(paramsData, 'dealId');
|
|
3045
3045
|
const isEdit = this.getValueByKey(paramsData, 'isEdit');
|
|
3046
|
+
this.isEditFlag = isEdit;
|
|
3046
3047
|
let finalParams;
|
|
3047
3048
|
this.instance?.parent?.components?.length && this.instance.parent.components.forEach(items => {
|
|
3048
3049
|
if (this.checkVendorRefItems(items)) {
|
|
@@ -3155,37 +3156,64 @@ class MaterialSelectComponent extends MaterialComponent {
|
|
|
3155
3156
|
incomingItems.forEach(item => {
|
|
3156
3157
|
const rawValue = this.commonService.onlyNumbers(item['value']) ? item['value'] + ' ' : item['value'];
|
|
3157
3158
|
const label = item['text']?.trim();
|
|
3158
|
-
|
|
3159
|
-
|
|
3160
|
-
seen.
|
|
3161
|
-
|
|
3159
|
+
if (label && rawValue) {
|
|
3160
|
+
const key = `${label}-${rawValue}`;
|
|
3161
|
+
if (!seen.has(key)) {
|
|
3162
|
+
seen.add(key);
|
|
3163
|
+
newOptions.push({ label, value: rawValue });
|
|
3164
|
+
}
|
|
3162
3165
|
}
|
|
3163
3166
|
});
|
|
3164
3167
|
}
|
|
3165
3168
|
// compare hashes to avoid unnecessary reassignments
|
|
3166
3169
|
const newHash = JSON.stringify(newOptions);
|
|
3170
|
+
//start
|
|
3171
|
+
this.storeDependentItems = newOptions;
|
|
3172
|
+
if (!this.commonService.getDropDownFlag()) {
|
|
3173
|
+
this.storeDependentItems = this.instance.component.data.values;
|
|
3174
|
+
}
|
|
3175
|
+
const selectedIndex = this.storeDependentItems.findIndex(item => this.compareObjects(item.value, this.control.value));
|
|
3176
|
+
//end
|
|
3177
|
+
if (selectedIndex < 0 && !this.isValidData(this.storeDependentItems)) {
|
|
3178
|
+
this.instance.component.data.values = [];
|
|
3179
|
+
}
|
|
3167
3180
|
if (newHash !== this.lastOptionsHash) {
|
|
3168
3181
|
this.lastOptionsHash = newHash;
|
|
3169
3182
|
this.storeDependentItems = newOptions;
|
|
3170
3183
|
if (!this.commonService.getDropDownFlag()) {
|
|
3171
3184
|
this.storeDependentItems = this.instance.component.data.values;
|
|
3172
3185
|
}
|
|
3173
|
-
this.
|
|
3174
|
-
|
|
3175
|
-
|
|
3176
|
-
this.
|
|
3177
|
-
|
|
3178
|
-
|
|
3186
|
+
const selectedIndex = this.storeDependentItems.findIndex(item => this.compareObjects(item.value, this.control.value));
|
|
3187
|
+
if (selectedIndex < 0) {
|
|
3188
|
+
this.filteredOptions = Promise.resolve(this.storeDependentItems);
|
|
3189
|
+
this.selectOptions = Promise.resolve(this.storeDependentItems);
|
|
3190
|
+
this.selectOptions.then(result => {
|
|
3191
|
+
this.filteredOptionsLength = result.length;
|
|
3192
|
+
});
|
|
3193
|
+
}
|
|
3179
3194
|
setTimeout(() => {
|
|
3180
3195
|
const panel = this.selectElem?.panel?.nativeElement;
|
|
3181
3196
|
if (panel && this.storeDependentItems?.length) {
|
|
3197
|
+
const matOptions = panel.querySelectorAll('.mat-option');
|
|
3198
|
+
const selected = panel.querySelector('.mat-option.mat-selected');
|
|
3199
|
+
if (selected && !selected.classList.contains('mat-active')) {
|
|
3200
|
+
matOptions.forEach(option => option.classList.remove('mat-active'));
|
|
3201
|
+
}
|
|
3182
3202
|
const selectedIndex = this.storeDependentItems.findIndex(item => this.compareObjects(item.value, this.control.value));
|
|
3203
|
+
const optionHeight = 48;
|
|
3204
|
+
const visibleTop = panel.scrollTop;
|
|
3205
|
+
const visibleBottom = visibleTop + panel.offsetHeight;
|
|
3206
|
+
const itemTop = selectedIndex * optionHeight;
|
|
3207
|
+
const itemBottom = itemTop + optionHeight;
|
|
3208
|
+
const shouldScroll = selectedIndex >= 0 && (itemTop < visibleTop || itemBottom > visibleBottom);
|
|
3183
3209
|
if (selectedIndex >= 0) {
|
|
3184
|
-
|
|
3185
|
-
|
|
3210
|
+
panel.scrollTo({
|
|
3211
|
+
top: itemTop,
|
|
3212
|
+
behavior: 'smooth'
|
|
3213
|
+
});
|
|
3186
3214
|
}
|
|
3187
3215
|
}
|
|
3188
|
-
},
|
|
3216
|
+
}, 150);
|
|
3189
3217
|
}
|
|
3190
3218
|
}
|
|
3191
3219
|
}
|
|
@@ -3287,6 +3315,9 @@ class MaterialSelectComponent extends MaterialComponent {
|
|
|
3287
3315
|
return false;
|
|
3288
3316
|
}
|
|
3289
3317
|
}
|
|
3318
|
+
isValidData(data) {
|
|
3319
|
+
return !data.some(item => !item.label?.trim() || !item.value?.trim());
|
|
3320
|
+
}
|
|
3290
3321
|
getErrorMessage() {
|
|
3291
3322
|
if (this.instance.error && this.instance.error.messages) {
|
|
3292
3323
|
const { messages } = this.instance.error;
|
|
@@ -3363,7 +3394,7 @@ MaterialSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
|
|
|
3363
3394
|
<mat-error *ngIf="isError()" >{{ getErrorMessage() }}</mat-error>
|
|
3364
3395
|
</mat-form-field>
|
|
3365
3396
|
</ng-template>
|
|
3366
|
-
`, isInline: true, styles: [".example-viewport{height:200px}.product-picker{overflow-x:hidden}.virtual-full-view{height:auto!important;white-space:normal!important;line-height:1.4!important;text-overflow:initial!important;min-height:48px!important;overflow:visible!important;overflow:initial!important;padding-top:10px!important;padding-bottom:10px!important}::ng-deep .product-picker .cdk-virtual-scroll-content-wrapper{width:100%!important}.virtual-full-view .mat-pseudo-checkbox{align-self:top!important}
|
|
3397
|
+
`, isInline: true, styles: [".example-viewport{height:200px}.product-picker{overflow-x:hidden}.virtual-full-view{height:auto!important;white-space:normal!important;line-height:1.4!important;text-overflow:initial!important;min-height:48px!important;overflow:visible!important;overflow:initial!important;padding-top:10px!important;padding-bottom:10px!important}::ng-deep .product-picker .cdk-virtual-scroll-content-wrapper{width:100%!important}.virtual-full-view .mat-pseudo-checkbox{align-self:top!important}\n"], dependencies: [{ 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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix]" }, { kind: "component", type: i4$3.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i5$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "component", type: i10.MatSelectSearchComponent, selector: "ngx-mat-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "indexAndLengthScreenReaderText", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toogleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti"], outputs: ["toggleAll"] }, { kind: "directive", type: i10.MatSelectSearchClearDirective, selector: "[ngxMatSelectSearchClear]" }, { kind: "component", type: FormioFormFieldComponent, selector: "mat-formio-form-field", inputs: ["labelTemplate", "renderTopLabel", "showDescription", "renderElementOnly", "instance", "componentTemplate"] }, { kind: "component", type: LabelComponent, selector: "span[matFormioLabel]", inputs: ["instance"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
|
|
3367
3398
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialSelectComponent, decorators: [{
|
|
3368
3399
|
type: Component,
|
|
3369
3400
|
args: [{ selector: 'mat-formio-select', template: `
|
|
@@ -3407,7 +3438,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
|
|
|
3407
3438
|
<mat-error *ngIf="isError()" >{{ getErrorMessage() }}</mat-error>
|
|
3408
3439
|
</mat-form-field>
|
|
3409
3440
|
</ng-template>
|
|
3410
|
-
`, styles: [".example-viewport{height:200px}.product-picker{overflow-x:hidden}.virtual-full-view{height:auto!important;white-space:normal!important;line-height:1.4!important;text-overflow:initial!important;min-height:48px!important;overflow:visible!important;overflow:initial!important;padding-top:10px!important;padding-bottom:10px!important}::ng-deep .product-picker .cdk-virtual-scroll-content-wrapper{width:100%!important}.virtual-full-view .mat-pseudo-checkbox{align-self:top!important}
|
|
3441
|
+
`, styles: [".example-viewport{height:200px}.product-picker{overflow-x:hidden}.virtual-full-view{height:auto!important;white-space:normal!important;line-height:1.4!important;text-overflow:initial!important;min-height:48px!important;overflow:visible!important;overflow:initial!important;padding-top:10px!important;padding-bottom:10px!important}::ng-deep .product-picker .cdk-virtual-scroll-content-wrapper{width:100%!important}.virtual-full-view .mat-pseudo-checkbox{align-self:top!important}\n"] }]
|
|
3411
3442
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$2.HttpClient }, { type: CommonService }]; }, propDecorators: { multiSelect: [{
|
|
3412
3443
|
type: ViewChild,
|
|
3413
3444
|
args: ['multiSelect', { static: true }]
|