ngx-render-material-forms 2.5.3 → 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 +85 -13
- package/fesm2015/ngx-render-material-forms.js +87 -13
- package/fesm2015/ngx-render-material-forms.mjs.map +1 -1
- package/fesm2020/ngx-render-material-forms.js +84 -12
- package/fesm2020/ngx-render-material-forms.mjs.map +1 -1
- package/lib/components/select/select.component.d.ts +4 -0
- package/package.json +1 -1
|
@@ -2839,6 +2839,8 @@ class MaterialSelectComponent extends MaterialComponent {
|
|
|
2839
2839
|
this.storeDependentItems = [];
|
|
2840
2840
|
this.executionFlag = false;
|
|
2841
2841
|
this.apiCounter = 0;
|
|
2842
|
+
this.lastOptionsHash = '';
|
|
2843
|
+
this.hasInitializedOptions = false;
|
|
2842
2844
|
}
|
|
2843
2845
|
onInputChange(event) {
|
|
2844
2846
|
if (this.instance.component.key.toLowerCase() === 'vendorproductid' && event.target.value === '') {
|
|
@@ -3041,6 +3043,7 @@ class MaterialSelectComponent extends MaterialComponent {
|
|
|
3041
3043
|
const vendorId = this.getValueByKey(paramsData, 'vendorId');
|
|
3042
3044
|
const dealId = this.getValueByKey(paramsData, 'dealId');
|
|
3043
3045
|
const isEdit = this.getValueByKey(paramsData, 'isEdit');
|
|
3046
|
+
this.isEditFlag = isEdit;
|
|
3044
3047
|
let finalParams;
|
|
3045
3048
|
this.instance?.parent?.components?.length && this.instance.parent.components.forEach(items => {
|
|
3046
3049
|
if (this.checkVendorRefItems(items)) {
|
|
@@ -3131,21 +3134,87 @@ class MaterialSelectComponent extends MaterialComponent {
|
|
|
3131
3134
|
});
|
|
3132
3135
|
}
|
|
3133
3136
|
if (this.checkVendorRefItems(this.instance) && checkInvokeFromLibrary) {
|
|
3134
|
-
this.storeDependentItems = [];
|
|
3135
|
-
this.secondDropdownItems = this.commonService.getDropdownItems();
|
|
3136
|
-
if (this.secondDropdownItems?.length) {
|
|
3137
|
-
|
|
3138
|
-
|
|
3137
|
+
// this.storeDependentItems = [];
|
|
3138
|
+
// this.secondDropdownItems = this.commonService.getDropdownItems();
|
|
3139
|
+
// if (this.secondDropdownItems?.length) {
|
|
3140
|
+
// this.secondDropdownItems.forEach((renderElement, index, array) => {
|
|
3141
|
+
// this.storeDependentItems.push({ label: renderElement['text'], value: this.commonService.onlyNumbers(renderElement['value']) ? renderElement['value'] + ' ' : renderElement['value'] });
|
|
3142
|
+
// });
|
|
3143
|
+
// }
|
|
3144
|
+
// if (!this.commonService.getDropDownFlag()) {
|
|
3145
|
+
// this.storeDependentItems = this.instance.component.data.values;
|
|
3146
|
+
// }
|
|
3147
|
+
// this.filteredOptions = Promise.resolve(this.storeDependentItems);
|
|
3148
|
+
// this.selectOptions = Promise.resolve(this.storeDependentItems);
|
|
3149
|
+
// this.selectOptions.then(result => {
|
|
3150
|
+
// this.filteredOptionsLength = result.length
|
|
3151
|
+
// });
|
|
3152
|
+
const incomingItems = this.commonService.getDropdownItems();
|
|
3153
|
+
const seen = new Set();
|
|
3154
|
+
const newOptions = [];
|
|
3155
|
+
if (incomingItems?.length) {
|
|
3156
|
+
incomingItems.forEach(item => {
|
|
3157
|
+
const rawValue = this.commonService.onlyNumbers(item['value']) ? item['value'] + ' ' : item['value'];
|
|
3158
|
+
const label = item['text']?.trim();
|
|
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
|
+
}
|
|
3165
|
+
}
|
|
3139
3166
|
});
|
|
3140
3167
|
}
|
|
3168
|
+
// compare hashes to avoid unnecessary reassignments
|
|
3169
|
+
const newHash = JSON.stringify(newOptions);
|
|
3170
|
+
//start
|
|
3171
|
+
this.storeDependentItems = newOptions;
|
|
3141
3172
|
if (!this.commonService.getDropDownFlag()) {
|
|
3142
3173
|
this.storeDependentItems = this.instance.component.data.values;
|
|
3143
3174
|
}
|
|
3144
|
-
this.
|
|
3145
|
-
|
|
3146
|
-
this.
|
|
3147
|
-
this.
|
|
3148
|
-
}
|
|
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
|
+
}
|
|
3180
|
+
if (newHash !== this.lastOptionsHash) {
|
|
3181
|
+
this.lastOptionsHash = newHash;
|
|
3182
|
+
this.storeDependentItems = newOptions;
|
|
3183
|
+
if (!this.commonService.getDropDownFlag()) {
|
|
3184
|
+
this.storeDependentItems = this.instance.component.data.values;
|
|
3185
|
+
}
|
|
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
|
+
}
|
|
3194
|
+
setTimeout(() => {
|
|
3195
|
+
const panel = this.selectElem?.panel?.nativeElement;
|
|
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
|
+
}
|
|
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);
|
|
3209
|
+
if (selectedIndex >= 0) {
|
|
3210
|
+
panel.scrollTo({
|
|
3211
|
+
top: itemTop,
|
|
3212
|
+
behavior: 'smooth'
|
|
3213
|
+
});
|
|
3214
|
+
}
|
|
3215
|
+
}
|
|
3216
|
+
}, 150);
|
|
3217
|
+
}
|
|
3149
3218
|
}
|
|
3150
3219
|
}
|
|
3151
3220
|
});
|
|
@@ -3246,6 +3315,9 @@ class MaterialSelectComponent extends MaterialComponent {
|
|
|
3246
3315
|
return false;
|
|
3247
3316
|
}
|
|
3248
3317
|
}
|
|
3318
|
+
isValidData(data) {
|
|
3319
|
+
return !data.some(item => !item.label?.trim() || !item.value?.trim());
|
|
3320
|
+
}
|
|
3249
3321
|
getErrorMessage() {
|
|
3250
3322
|
if (this.instance.error && this.instance.error.messages) {
|
|
3251
3323
|
const { messages } = this.instance.error;
|
|
@@ -3322,7 +3394,7 @@ MaterialSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
|
|
|
3322
3394
|
<mat-error *ngIf="isError()" >{{ getErrorMessage() }}</mat-error>
|
|
3323
3395
|
</mat-form-field>
|
|
3324
3396
|
</ng-template>
|
|
3325
|
-
`, 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" }] });
|
|
3326
3398
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialSelectComponent, decorators: [{
|
|
3327
3399
|
type: Component,
|
|
3328
3400
|
args: [{ selector: 'mat-formio-select', template: `
|
|
@@ -3366,7 +3438,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
|
|
|
3366
3438
|
<mat-error *ngIf="isError()" >{{ getErrorMessage() }}</mat-error>
|
|
3367
3439
|
</mat-form-field>
|
|
3368
3440
|
</ng-template>
|
|
3369
|
-
`, 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"] }]
|
|
3370
3442
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$2.HttpClient }, { type: CommonService }]; }, propDecorators: { multiSelect: [{
|
|
3371
3443
|
type: ViewChild,
|
|
3372
3444
|
args: ['multiSelect', { static: true }]
|