ngx-render-material-forms 2.5.3 → 2.5.4
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 +56 -15
- package/fesm2015/ngx-render-material-forms.js +58 -15
- package/fesm2015/ngx-render-material-forms.mjs.map +1 -1
- package/fesm2020/ngx-render-material-forms.js +55 -14
- package/fesm2020/ngx-render-material-forms.mjs.map +1 -1
- package/lib/components/select/select.component.d.ts +2 -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.optionsInitialized = false;
|
|
2843
|
+
this.lastOptionsHash = '';
|
|
2842
2844
|
}
|
|
2843
2845
|
onInputChange(event) {
|
|
2844
2846
|
if (this.instance.component.key.toLowerCase() === 'vendorproductid' && event.target.value === '') {
|
|
@@ -3131,21 +3133,60 @@ class MaterialSelectComponent extends MaterialComponent {
|
|
|
3131
3133
|
});
|
|
3132
3134
|
}
|
|
3133
3135
|
if (this.checkVendorRefItems(this.instance) && checkInvokeFromLibrary) {
|
|
3134
|
-
this.storeDependentItems = [];
|
|
3135
|
-
this.secondDropdownItems = this.commonService.getDropdownItems();
|
|
3136
|
-
if (this.secondDropdownItems?.length) {
|
|
3137
|
-
|
|
3138
|
-
|
|
3136
|
+
// this.storeDependentItems = [];
|
|
3137
|
+
// this.secondDropdownItems = this.commonService.getDropdownItems();
|
|
3138
|
+
// if (this.secondDropdownItems?.length) {
|
|
3139
|
+
// this.secondDropdownItems.forEach((renderElement, index, array) => {
|
|
3140
|
+
// this.storeDependentItems.push({ label: renderElement['text'], value: this.commonService.onlyNumbers(renderElement['value']) ? renderElement['value'] + ' ' : renderElement['value'] });
|
|
3141
|
+
// });
|
|
3142
|
+
// }
|
|
3143
|
+
// if (!this.commonService.getDropDownFlag()) {
|
|
3144
|
+
// this.storeDependentItems = this.instance.component.data.values;
|
|
3145
|
+
// }
|
|
3146
|
+
// this.filteredOptions = Promise.resolve(this.storeDependentItems);
|
|
3147
|
+
// this.selectOptions = Promise.resolve(this.storeDependentItems);
|
|
3148
|
+
// this.selectOptions.then(result => {
|
|
3149
|
+
// this.filteredOptionsLength = result.length
|
|
3150
|
+
// });
|
|
3151
|
+
const incomingItems = this.commonService.getDropdownItems();
|
|
3152
|
+
const seen = new Set();
|
|
3153
|
+
const newOptions = [];
|
|
3154
|
+
if (incomingItems?.length) {
|
|
3155
|
+
incomingItems.forEach(item => {
|
|
3156
|
+
const rawValue = this.commonService.onlyNumbers(item['value']) ? item['value'] + ' ' : item['value'];
|
|
3157
|
+
const label = item['text']?.trim();
|
|
3158
|
+
const key = `${label}-${rawValue}`;
|
|
3159
|
+
if (!seen.has(key)) {
|
|
3160
|
+
seen.add(key);
|
|
3161
|
+
newOptions.push({ label, value: rawValue });
|
|
3162
|
+
}
|
|
3139
3163
|
});
|
|
3140
3164
|
}
|
|
3141
|
-
|
|
3142
|
-
|
|
3165
|
+
// compare hashes to avoid unnecessary reassignments
|
|
3166
|
+
const newHash = JSON.stringify(newOptions);
|
|
3167
|
+
if (newHash !== this.lastOptionsHash) {
|
|
3168
|
+
this.lastOptionsHash = newHash;
|
|
3169
|
+
this.storeDependentItems = newOptions;
|
|
3170
|
+
if (!this.commonService.getDropDownFlag()) {
|
|
3171
|
+
this.storeDependentItems = this.instance.component.data.values;
|
|
3172
|
+
}
|
|
3173
|
+
this.filteredOptions = Promise.resolve(this.storeDependentItems);
|
|
3174
|
+
this.selectOptions = Promise.resolve(this.storeDependentItems);
|
|
3175
|
+
this.selectOptions.then(result => {
|
|
3176
|
+
this.filteredOptionsLength = result.length;
|
|
3177
|
+
});
|
|
3178
|
+
// scroll to selected item
|
|
3179
|
+
setTimeout(() => {
|
|
3180
|
+
const panel = this.selectElem?.panel?.nativeElement;
|
|
3181
|
+
if (panel && this.storeDependentItems?.length) {
|
|
3182
|
+
const selectedIndex = this.storeDependentItems.findIndex(item => this.compareObjects(item.value, this.control.value));
|
|
3183
|
+
if (selectedIndex >= 0) {
|
|
3184
|
+
const optionHeight = 48;
|
|
3185
|
+
panel.scrollTop = selectedIndex * optionHeight;
|
|
3186
|
+
}
|
|
3187
|
+
}
|
|
3188
|
+
}, 200);
|
|
3143
3189
|
}
|
|
3144
|
-
this.filteredOptions = Promise.resolve(this.storeDependentItems);
|
|
3145
|
-
this.selectOptions = Promise.resolve(this.storeDependentItems);
|
|
3146
|
-
this.selectOptions.then(result => {
|
|
3147
|
-
this.filteredOptionsLength = result.length;
|
|
3148
|
-
});
|
|
3149
3190
|
}
|
|
3150
3191
|
}
|
|
3151
3192
|
});
|
|
@@ -3322,7 +3363,7 @@ MaterialSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
|
|
|
3322
3363
|
<mat-error *ngIf="isError()" >{{ getErrorMessage() }}</mat-error>
|
|
3323
3364
|
</mat-form-field>
|
|
3324
3365
|
</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}.virtual-full-view.mat-active{background:none}\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" }] });
|
|
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}.mat-option.virtual-full-view.mat-active{background:none}.mat-option.virtual-full-view.mat-selected .mat-option-text span{color:#000000de}\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
3367
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialSelectComponent, decorators: [{
|
|
3327
3368
|
type: Component,
|
|
3328
3369
|
args: [{ selector: 'mat-formio-select', template: `
|
|
@@ -3366,7 +3407,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
|
|
|
3366
3407
|
<mat-error *ngIf="isError()" >{{ getErrorMessage() }}</mat-error>
|
|
3367
3408
|
</mat-form-field>
|
|
3368
3409
|
</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}.virtual-full-view.mat-active{background:none}\n"] }]
|
|
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}.mat-option.virtual-full-view.mat-active{background:none}.mat-option.virtual-full-view.mat-selected .mat-option-text span{color:#000000de}\n"] }]
|
|
3370
3411
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$2.HttpClient }, { type: CommonService }]; }, propDecorators: { multiSelect: [{
|
|
3371
3412
|
type: ViewChild,
|
|
3372
3413
|
args: ['multiSelect', { static: true }]
|