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
|
@@ -2841,6 +2841,8 @@ class MaterialSelectComponent extends MaterialComponent {
|
|
|
2841
2841
|
this.storeDependentItems = [];
|
|
2842
2842
|
this.executionFlag = false;
|
|
2843
2843
|
this.apiCounter = 0;
|
|
2844
|
+
this.lastOptionsHash = '';
|
|
2845
|
+
this.hasInitializedOptions = false;
|
|
2844
2846
|
}
|
|
2845
2847
|
onInputChange(event) {
|
|
2846
2848
|
if (this.instance.component.key.toLowerCase() === 'vendorproductid' && event.target.value === '') {
|
|
@@ -3046,6 +3048,7 @@ class MaterialSelectComponent extends MaterialComponent {
|
|
|
3046
3048
|
const vendorId = this.getValueByKey(paramsData, 'vendorId');
|
|
3047
3049
|
const dealId = this.getValueByKey(paramsData, 'dealId');
|
|
3048
3050
|
const isEdit = this.getValueByKey(paramsData, 'isEdit');
|
|
3051
|
+
this.isEditFlag = isEdit;
|
|
3049
3052
|
let finalParams;
|
|
3050
3053
|
((_c = (_b = (_a = this.instance) === null || _a === void 0 ? void 0 : _a.parent) === null || _b === void 0 ? void 0 : _b.components) === null || _c === void 0 ? void 0 : _c.length) && this.instance.parent.components.forEach(items => {
|
|
3051
3054
|
var _a, _b, _c, _d;
|
|
@@ -3122,7 +3125,7 @@ class MaterialSelectComponent extends MaterialComponent {
|
|
|
3122
3125
|
}
|
|
3123
3126
|
}
|
|
3124
3127
|
this.selectElem.openedChange.subscribe((isOpen) => __awaiter(this, void 0, void 0, function* () {
|
|
3125
|
-
var _a, _b
|
|
3128
|
+
var _a, _b;
|
|
3126
3129
|
let i = 0;
|
|
3127
3130
|
if (isOpen) {
|
|
3128
3131
|
const newProductPickerFlag = (_b = (_a = this.instance) === null || _a === void 0 ? void 0 : _a.component) === null || _b === void 0 ? void 0 : _b.attributes;
|
|
@@ -3138,21 +3141,89 @@ class MaterialSelectComponent extends MaterialComponent {
|
|
|
3138
3141
|
});
|
|
3139
3142
|
}
|
|
3140
3143
|
if (this.checkVendorRefItems(this.instance) && checkInvokeFromLibrary) {
|
|
3141
|
-
this.storeDependentItems = [];
|
|
3142
|
-
this.secondDropdownItems = this.commonService.getDropdownItems();
|
|
3143
|
-
if (
|
|
3144
|
-
|
|
3145
|
-
|
|
3144
|
+
// this.storeDependentItems = [];
|
|
3145
|
+
// this.secondDropdownItems = this.commonService.getDropdownItems();
|
|
3146
|
+
// if (this.secondDropdownItems?.length) {
|
|
3147
|
+
// this.secondDropdownItems.forEach((renderElement, index, array) => {
|
|
3148
|
+
// this.storeDependentItems.push({ label: renderElement['text'], value: this.commonService.onlyNumbers(renderElement['value']) ? renderElement['value'] + ' ' : renderElement['value'] });
|
|
3149
|
+
// });
|
|
3150
|
+
// }
|
|
3151
|
+
// if (!this.commonService.getDropDownFlag()) {
|
|
3152
|
+
// this.storeDependentItems = this.instance.component.data.values;
|
|
3153
|
+
// }
|
|
3154
|
+
// this.filteredOptions = Promise.resolve(this.storeDependentItems);
|
|
3155
|
+
// this.selectOptions = Promise.resolve(this.storeDependentItems);
|
|
3156
|
+
// this.selectOptions.then(result => {
|
|
3157
|
+
// this.filteredOptionsLength = result.length
|
|
3158
|
+
// });
|
|
3159
|
+
const incomingItems = this.commonService.getDropdownItems();
|
|
3160
|
+
const seen = new Set();
|
|
3161
|
+
const newOptions = [];
|
|
3162
|
+
if (incomingItems === null || incomingItems === void 0 ? void 0 : incomingItems.length) {
|
|
3163
|
+
incomingItems.forEach(item => {
|
|
3164
|
+
var _a;
|
|
3165
|
+
const rawValue = this.commonService.onlyNumbers(item['value']) ? item['value'] + ' ' : item['value'];
|
|
3166
|
+
const label = (_a = item['text']) === null || _a === void 0 ? void 0 : _a.trim();
|
|
3167
|
+
if (label && rawValue) {
|
|
3168
|
+
const key = `${label}-${rawValue}`;
|
|
3169
|
+
if (!seen.has(key)) {
|
|
3170
|
+
seen.add(key);
|
|
3171
|
+
newOptions.push({ label, value: rawValue });
|
|
3172
|
+
}
|
|
3173
|
+
}
|
|
3146
3174
|
});
|
|
3147
3175
|
}
|
|
3176
|
+
// compare hashes to avoid unnecessary reassignments
|
|
3177
|
+
const newHash = JSON.stringify(newOptions);
|
|
3178
|
+
//start
|
|
3179
|
+
this.storeDependentItems = newOptions;
|
|
3148
3180
|
if (!this.commonService.getDropDownFlag()) {
|
|
3149
3181
|
this.storeDependentItems = this.instance.component.data.values;
|
|
3150
3182
|
}
|
|
3151
|
-
this.
|
|
3152
|
-
|
|
3153
|
-
this.
|
|
3154
|
-
this.
|
|
3155
|
-
}
|
|
3183
|
+
const selectedIndex = this.storeDependentItems.findIndex(item => this.compareObjects(item.value, this.control.value));
|
|
3184
|
+
//end
|
|
3185
|
+
if (selectedIndex < 0 && !this.isValidData(this.storeDependentItems)) {
|
|
3186
|
+
this.instance.component.data.values = [];
|
|
3187
|
+
}
|
|
3188
|
+
if (newHash !== this.lastOptionsHash) {
|
|
3189
|
+
this.lastOptionsHash = newHash;
|
|
3190
|
+
this.storeDependentItems = newOptions;
|
|
3191
|
+
if (!this.commonService.getDropDownFlag()) {
|
|
3192
|
+
this.storeDependentItems = this.instance.component.data.values;
|
|
3193
|
+
}
|
|
3194
|
+
const selectedIndex = this.storeDependentItems.findIndex(item => this.compareObjects(item.value, this.control.value));
|
|
3195
|
+
if (selectedIndex < 0) {
|
|
3196
|
+
this.filteredOptions = Promise.resolve(this.storeDependentItems);
|
|
3197
|
+
this.selectOptions = Promise.resolve(this.storeDependentItems);
|
|
3198
|
+
this.selectOptions.then(result => {
|
|
3199
|
+
this.filteredOptionsLength = result.length;
|
|
3200
|
+
});
|
|
3201
|
+
}
|
|
3202
|
+
setTimeout(() => {
|
|
3203
|
+
var _a, _b, _c;
|
|
3204
|
+
const panel = (_b = (_a = this.selectElem) === null || _a === void 0 ? void 0 : _a.panel) === null || _b === void 0 ? void 0 : _b.nativeElement;
|
|
3205
|
+
if (panel && ((_c = this.storeDependentItems) === null || _c === void 0 ? void 0 : _c.length)) {
|
|
3206
|
+
const matOptions = panel.querySelectorAll('.mat-option');
|
|
3207
|
+
const selected = panel.querySelector('.mat-option.mat-selected');
|
|
3208
|
+
if (selected && !selected.classList.contains('mat-active')) {
|
|
3209
|
+
matOptions.forEach(option => option.classList.remove('mat-active'));
|
|
3210
|
+
}
|
|
3211
|
+
const selectedIndex = this.storeDependentItems.findIndex(item => this.compareObjects(item.value, this.control.value));
|
|
3212
|
+
const optionHeight = 48;
|
|
3213
|
+
const visibleTop = panel.scrollTop;
|
|
3214
|
+
const visibleBottom = visibleTop + panel.offsetHeight;
|
|
3215
|
+
const itemTop = selectedIndex * optionHeight;
|
|
3216
|
+
const itemBottom = itemTop + optionHeight;
|
|
3217
|
+
const shouldScroll = selectedIndex >= 0 && (itemTop < visibleTop || itemBottom > visibleBottom);
|
|
3218
|
+
if (selectedIndex >= 0) {
|
|
3219
|
+
panel.scrollTo({
|
|
3220
|
+
top: itemTop,
|
|
3221
|
+
behavior: 'smooth'
|
|
3222
|
+
});
|
|
3223
|
+
}
|
|
3224
|
+
}
|
|
3225
|
+
}, 150);
|
|
3226
|
+
}
|
|
3156
3227
|
}
|
|
3157
3228
|
}
|
|
3158
3229
|
}));
|
|
@@ -3256,6 +3327,9 @@ class MaterialSelectComponent extends MaterialComponent {
|
|
|
3256
3327
|
return false;
|
|
3257
3328
|
}
|
|
3258
3329
|
}
|
|
3330
|
+
isValidData(data) {
|
|
3331
|
+
return !data.some(item => { var _a, _b; return !((_a = item.label) === null || _a === void 0 ? void 0 : _a.trim()) || !((_b = item.value) === null || _b === void 0 ? void 0 : _b.trim()); });
|
|
3332
|
+
}
|
|
3259
3333
|
getErrorMessage() {
|
|
3260
3334
|
if (this.instance.error && this.instance.error.messages) {
|
|
3261
3335
|
const { messages } = this.instance.error;
|
|
@@ -3332,7 +3406,7 @@ MaterialSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
|
|
|
3332
3406
|
<mat-error *ngIf="isError()" >{{ getErrorMessage() }}</mat-error>
|
|
3333
3407
|
</mat-form-field>
|
|
3334
3408
|
</ng-template>
|
|
3335
|
-
`, 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}
|
|
3409
|
+
`, 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" }] });
|
|
3336
3410
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialSelectComponent, decorators: [{
|
|
3337
3411
|
type: Component,
|
|
3338
3412
|
args: [{ selector: 'mat-formio-select', template: `
|
|
@@ -3376,7 +3450,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
|
|
|
3376
3450
|
<mat-error *ngIf="isError()" >{{ getErrorMessage() }}</mat-error>
|
|
3377
3451
|
</mat-form-field>
|
|
3378
3452
|
</ng-template>
|
|
3379
|
-
`, 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}
|
|
3453
|
+
`, 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"] }]
|
|
3380
3454
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$2.HttpClient }, { type: CommonService }]; }, propDecorators: { multiSelect: [{
|
|
3381
3455
|
type: ViewChild,
|
|
3382
3456
|
args: ['multiSelect', { static: true }]
|