@olafvv/ngx-dynamic-form 0.4.0 → 0.5.1
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/README.md +2 -2
- package/esm2022/lib/components/dynamic-form-field/dynamic-form-field.component.mjs +4 -2
- package/esm2022/lib/controls/button/dynamic-button.component.mjs +3 -3
- package/esm2022/lib/controls/button/dynamic-button.model.mjs +1 -1
- package/esm2022/lib/controls/button-toggles/dynamic-button-toggles.model.mjs +1 -1
- package/esm2022/lib/controls/datepicker/dynamic-datepicker.component.mjs +3 -3
- package/esm2022/lib/controls/datepicker/dynamic-datepicker.model.mjs +1 -1
- package/esm2022/lib/controls/input/dynamic-input.component.mjs +6 -4
- package/esm2022/lib/controls/input/dynamic-input.model.mjs +3 -1
- package/esm2022/lib/controls/radio-group/dynamic-radio-group.model.mjs +1 -1
- package/esm2022/lib/controls/readonly/dynamic-readonly.model.mjs +1 -1
- package/esm2022/lib/controls/select/dynamic-select.model.mjs +1 -1
- package/esm2022/lib/controls/textarea/dynamic-textarea.model.mjs +1 -1
- package/esm2022/lib/models/classes/dynamic-form-field-base.mjs +4 -1
- package/esm2022/lib/models/classes/dynamic-form-field-model.mjs +4 -1
- package/esm2022/lib/models/classes/dynamic-form-field-value-model.mjs +11 -11
- package/esm2022/lib/models/interfaces/dynamic-form-field-config.interface.mjs +1 -1
- package/esm2022/lib/models/interfaces/dynamic-form-field-relation.interface.mjs +1 -1
- package/esm2022/lib/services/dynamic-form.service.mjs +2 -2
- package/fesm2022/olafvv-ngx-dynamic-form.mjs +30 -19
- package/fesm2022/olafvv-ngx-dynamic-form.mjs.map +1 -1
- package/lib/components/dynamic-form-field/dynamic-form-field.component.d.ts +1 -0
- package/lib/controls/button/dynamic-button.model.d.ts +11 -1
- package/lib/controls/button-toggles/dynamic-button-toggles.model.d.ts +2 -2
- package/lib/controls/datepicker/dynamic-datepicker.model.d.ts +2 -5
- package/lib/controls/input/dynamic-input.model.d.ts +6 -2
- package/lib/controls/radio-group/dynamic-radio-group.model.d.ts +2 -2
- package/lib/controls/readonly/dynamic-readonly.model.d.ts +1 -1
- package/lib/controls/select/dynamic-select.model.d.ts +7 -0
- package/lib/controls/textarea/dynamic-textarea.model.d.ts +23 -0
- package/lib/models/classes/dynamic-form-field-base.d.ts +3 -0
- package/lib/models/classes/dynamic-form-field-model.d.ts +3 -0
- package/lib/models/classes/dynamic-form-field-value-model.d.ts +22 -7
- package/lib/models/interfaces/dynamic-form-field-config.interface.d.ts +14 -10
- package/lib/models/interfaces/dynamic-form-field-relation.interface.d.ts +2 -2
- package/package.json +5 -5
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export {};
|
|
2
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
2
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHluYW1pYy1mb3JtLWZpZWxkLWNvbmZpZy5pbnRlcmZhY2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtZHluYW1pYy1mb3JtL3NyYy9saWIvbW9kZWxzL2ludGVyZmFjZXMvZHluYW1pYy1mb3JtLWZpZWxkLWNvbmZpZy5pbnRlcmZhY2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IER5bmFtaWNGb3JtRmllbGRSZWxhdGlvbiB9IGZyb20gJy4vZHluYW1pYy1mb3JtLWZpZWxkLXJlbGF0aW9uLmludGVyZmFjZSc7XG5pbXBvcnQgeyBEeW5hbWljRm9ybVZhbGlkYXRvciB9IGZyb20gJy4vZHluYW1pYy1mb3JtLXZhbGlkYXRvci5pbnRlcmZhY2UnO1xuXG4vKipcbiAqIEJhc2UgY29uZmlndXJhdGlvbiBvYmplY3QgZm9yIGVhY2ggRHluYW1pYyBGb3JtIEZpZWxkLlxuICogRXhwZWN0cyBhIGdlbmVyaWMgdHlwZSBkZXNjcmliaW5nIHRoZSB0eXBlIG9mIHRoZSB2YWx1ZSB0aGUgY29udHJvbCBob2xkcy5cbiAqL1xuZXhwb3J0IGludGVyZmFjZSBEeW5hbWljRm9ybUZpZWxkQ29uZmlnIHtcbiAgLyoqXG4gICAqIE5hbWUgdXNlZCBhcyBGb3JtQ29udHJvbE5hbWVcbiAgICogQHJlcXVpcmVkXG4gICAqL1xuICBuYW1lOiBzdHJpbmc7XG4gIC8qKlxuICAgKiBXaGV0aGVyIHRoZSBjb250cm9sIGhhcyB0byBiZSBkaXNhYmxlZC5cbiAgICogRGVmYXVsdCB2YWx1ZSBpcyBmYWxzZS5cbiAgICogQG9wdGlvbmFsXG4gICAqL1xuICBkaXNhYmxlZD86IGJvb2xlYW47XG4gIC8qKlxuICAgKiBXaGV0aGVyIHRoZSBjb250cm9sIHNob3VsZCBiZSBoaWRkZW4uXG4gICAqIERlZmF1bHQgdmFsdWUgaXMgZmFsc2VcbiAgICogQG9wdGlvbmFsXG4gICAqL1xuICBoaWRkZW4/OiBib29sZWFuO1xuICAvKipcbiAgICogQWRkcyBhbiBpZCBhdHRyaWJ1dGUgdG8gdGhlIEZvcm1Db250cm9sLlxuICAgKiBXaGVuIG5vdCBwcm92aWRlZCwgdGhlIHJlcXVpcmVkICduYW1lJyBwcm9wZXJ0eSBpcyB1c2VkIGFzIGlkXG4gICAqIEBvcHRpb25hbFxuICAgKi9cbiAgaWQ/OiBzdHJpbmc7XG4gIC8qKlxuICAgKiBVc2VkIGFzIG1hdC1sYWJlbCB3aGVuIHByb3ZpZGVkXG4gICAqIEBvcHRpb25hbFxuICAgKi9cbiAgbGFiZWw/OiBzdHJpbmcgfCBudWxsO1xuICAvKipcbiAgICogSGludCB0ZXh0IHVuZGVybmVhdGggdGhlIEZvcm1Db250cm9sXG4gICAqIEBvcHRpb25hbFxuICAgKi9cbiAgaGludD86IHN0cmluZztcbiAgLyoqXG4gICAqIEFycmF5IG9mIER5bmFtaWMgRm9ybSBWYWxpZGF0b3JzXG4gICAqIEBvcHRpb25hbFxuICAgKi9cbiAgdmFsaWRhdG9ycz86IER5bmFtaWNGb3JtVmFsaWRhdG9yW107XG4gIC8qKlxuICAgKiBBcnJheSBvZiBEeW5hbWljIEZvcm0gUmVsYXRpb25zXG4gICAqIEBvcHRpb25hbFxuICAgKi9cbiAgcmVsYXRpb25zPzogRHluYW1pY0Zvcm1GaWVsZFJlbGF0aW9uW107XG4gIC8qKlxuICAgKiBFdmVudCBuYW1lIGZvciB0aGUgY29udHJvbCB0byB1cGRhdGUgb24uXG4gICAqIFRoaXMgd2lsbCBkZXRlcm1pbmUgd2hlbiBBbmd1bGFyIGlzIGNoZWNraW5nIHRoZSB2YWxpZGF0b3JzXG4gICAqIFBvc3NpYmxlIHZhbHVlczpcbiAgICogLSBgY2hhbmdlYDogb24gZXZlcnkgY2hhbmdlIGV2ZW50IG9uIHRoZSBGb3JtQ29udHJvbFxuICAgKiAtIGBibHVyYDogb24gdGhlIGJsdXIgZXZlbnQgb2YgdGhlIEZvcm1Db250cm9sXG4gICAqIC0gYHN1Ym1pdGA6IHdoZW4gdGhlIHBhcmVudCBmb3JtIG9mIHRoZSBGb3JtQ29udHJvbCBpcyBzdWJtaXR0ZWRcbiAgICpcbiAgICogRGVmYXVsdCB2YWx1ZSBpcyAnYmx1cicuXG4gICAqIEBvcHRpb25hbFxuICAgKi9cbiAgdXBkYXRlT24/OiAnc3VibWl0JyB8ICdibHVyJyB8ICdjaGFuZ2UnO1xuICAvKipcbiAgICogU2V0cyB0aGUgd2lkdGggb2YgdGhlIGZpZWxkLCBiYXNlZCBvbiBwZXJjZW50YWdlcy4gRGVmYXVsdCB2YWx1ZSBpcyAxMDAuXG4gICAqIEBvcHRpb25hbFxuICAgKi9cbiAgd2lkdGg/OiBudW1iZXI7XG59XG4iXX0=
|
|
@@ -12,4 +12,4 @@ export var RelationOperator;
|
|
|
12
12
|
RelationOperator["AND"] = "AND";
|
|
13
13
|
RelationOperator["OR"] = "OR";
|
|
14
14
|
})(RelationOperator || (RelationOperator = {}));
|
|
15
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
15
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHluYW1pYy1mb3JtLWZpZWxkLXJlbGF0aW9uLmludGVyZmFjZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1keW5hbWljLWZvcm0vc3JjL2xpYi9tb2RlbHMvaW50ZXJmYWNlcy9keW5hbWljLWZvcm0tZmllbGQtcmVsYXRpb24uaW50ZXJmYWNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE1BQU0sQ0FBTixJQUFZLGtCQU9YO0FBUEQsV0FBWSxrQkFBa0I7SUFDNUIsMkNBQXFCLENBQUE7SUFDckIseUNBQW1CLENBQUE7SUFDbkIsdUNBQWlCLENBQUE7SUFDakIseUNBQW1CLENBQUE7SUFDbkIsMkNBQXFCLENBQUE7SUFDckIsMkNBQXFCLENBQUE7QUFDdkIsQ0FBQyxFQVBXLGtCQUFrQixLQUFsQixrQkFBa0IsUUFPN0I7QUFFRCxNQUFNLENBQU4sSUFBWSxnQkFHWDtBQUhELFdBQVksZ0JBQWdCO0lBQzFCLCtCQUFXLENBQUE7SUFDWCw2QkFBUyxDQUFBO0FBQ1gsQ0FBQyxFQUhXLGdCQUFnQixLQUFoQixnQkFBZ0IsUUFHM0IiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgZW51bSBSZWxhdGlvbkFjdGlvblR5cGUge1xuICBESVNBQkxFRCA9ICdESVNBQkxFRCcsXG4gIEVOQUJMRUQgPSAnRU5BQkxFRCcsXG4gIEhJRERFTiA9ICdISURERU4nLFxuICBWSVNJQkxFID0gJ1ZJU0lCTEUnLFxuICBSRVFVSVJFRCA9ICdSRVFVSVJFRCcsXG4gIE9QVElPTkFMID0gJ09QVElPTkFMJ1xufVxuXG5leHBvcnQgZW51bSBSZWxhdGlvbk9wZXJhdG9yIHtcbiAgQU5EID0gJ0FORCcsXG4gIE9SID0gJ09SJ1xufVxuXG5leHBvcnQgaW50ZXJmYWNlIFJlbGF0aW9uQ29uZGl0aW9uIHtcbiAgLyoqIE5hbWUgb2YgYSBmaWVsZCBpbiB0aGUgc2FtZSBmb3JtIHRoaXMgZmllbGQgaXMgZGVwZW5kZWQgb24gKi9cbiAgZmllbGROYW1lPzogc3RyaW5nO1xuICAvKipcbiAgICogUGF0aCB0byB0aGUgcmVsYXRlZCBmaWVsZC5cbiAgICogVGhpcyBtdXN0IGJlIHVzZWQgd2hlbiB3b3JraW5nIHdpdGggbmVzdGVkIEZvcm1Hcm91cHMgYW5kIHlvdSB3YW50IHRvIHJlbGF0ZSBhIGZpZWxkIGluIGEgZGlmZmVyZW50IGdyb3VwLlxuICAgKi9cbiAgcGF0aD86IHN0cmluZztcbiAgLyoqIE1ldGhvZCB0aGF0IHJldHVybnMgdHJ1ZSB3aGVuIHRoZSBjb25kaXRpb24gaXMgbWV0LiBUaGUgcGFzc2VkIHBhcmFtZXRlciBpcyB0aGUgdmFsdWUgb2YgdGhlIGRlcGVuZGVkIGZpZWxkICovXG4gIHZhbHVlOiAodmFsOiBhbnkpID0+IGJvb2xlYW47XG59XG5cbmV4cG9ydCBpbnRlcmZhY2UgRHluYW1pY0Zvcm1GaWVsZFJlbGF0aW9uIHtcbiAgYWN0aW9uVHlwZTogUmVsYXRpb25BY3Rpb25UeXBlO1xuICBjb25kaXRpb25zOiBSZWxhdGlvbkNvbmRpdGlvbltdO1xuICBvcGVyYXRvcj86IFJlbGF0aW9uT3BlcmF0b3I7XG59XG4iXX0=
|
|
@@ -29,11 +29,11 @@ export class DynamicFormService {
|
|
|
29
29
|
const group = this.fb.group({});
|
|
30
30
|
config.forEach((row) => {
|
|
31
31
|
row.forEach((controlConfig) => {
|
|
32
|
-
const controlValueConfig = controlConfig;
|
|
33
32
|
const controlOptions = {
|
|
34
33
|
updateOn: controlConfig.updateOn,
|
|
35
34
|
validators: this.validatorsService.getValidatorFns(controlConfig.validators)
|
|
36
35
|
};
|
|
36
|
+
const controlValueConfig = controlConfig;
|
|
37
37
|
const control = new UntypedFormControl({ value: controlValueConfig.value ?? controlValueConfig.defaultValue, disabled: controlValueConfig.disabled }, controlOptions);
|
|
38
38
|
group.addControl(controlConfig.name, control);
|
|
39
39
|
});
|
|
@@ -78,4 +78,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
78
78
|
}, {
|
|
79
79
|
type: Optional
|
|
80
80
|
}] }, { type: i1.FormBuilder }, { type: i2.DynamicFormValidationsService }] });
|
|
81
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
81
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHluYW1pYy1mb3JtLnNlcnZpY2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtZHluYW1pYy1mb3JtL3NyYy9saWIvc2VydmljZXMvZHluYW1pYy1mb3JtLnNlcnZpY2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLE1BQU0sRUFBRSxVQUFVLEVBQUUsUUFBUSxFQUFRLE1BQU0sZUFBZSxDQUFDO0FBQ25FLE9BQU8sRUFBbUMsa0JBQWtCLEVBQW9CLE1BQU0sZ0JBQWdCLENBQUM7QUFDdkcsT0FBTyxFQUFFLEdBQUcsRUFBYyxNQUFNLE1BQU0sQ0FBQztBQUt2QyxPQUFPLEVBQUUseUJBQXlCLEVBQUUsTUFBTSxrREFBa0QsQ0FBQzs7OztBQVM3RixNQUFNLE9BQU8sa0JBQWtCO0lBQzdCLFlBQ3lELHlCQUFvRCxFQUNuRyxFQUFlLEVBQ2YsaUJBQWdEO1FBRkQsOEJBQXlCLEdBQXpCLHlCQUF5QixDQUEyQjtRQUNuRyxPQUFFLEdBQUYsRUFBRSxDQUFhO1FBQ2Ysc0JBQWlCLEdBQWpCLGlCQUFpQixDQUErQjtJQUN2RCxDQUFDO0lBRUo7Ozs7T0FJRztJQUNJLDZCQUE2QixDQUFDLEtBQTRCO1FBQy9ELE9BQU8sT0FBTyxJQUFJLENBQUMseUJBQXlCLEtBQUssVUFBVSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMseUJBQXlCLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQztJQUM3RyxDQUFDO0lBRUQ7Ozs7O09BS0c7SUFDSSxlQUFlLENBQUMsTUFBeUI7UUFDOUMsTUFBTSxLQUFLLEdBQXFCLElBQUksQ0FBQyxFQUFFLENBQUMsS0FBSyxDQUFDLEVBQUUsQ0FBQyxDQUFDO1FBRWxELE1BQU0sQ0FBQyxPQUFPLENBQUMsQ0FBQyxHQUFHLEVBQUUsRUFBRTtZQUNyQixHQUFHLENBQUMsT0FBTyxDQUFDLENBQUMsYUFBYSxFQUFFLEVBQUU7Z0JBQzVCLE1BQU0sY0FBYyxHQUF1QjtvQkFDekMsUUFBUSxFQUFFLGFBQWEsQ0FBQyxRQUFRO29CQUNoQyxVQUFVLEVBQUUsSUFBSSxDQUFDLGlCQUFpQixDQUFDLGVBQWUsQ0FBQyxhQUFhLENBQUMsVUFBVSxDQUFDO2lCQUM3RSxDQUFDO2dCQUVGLE1BQU0sa0JBQWtCLEdBQUcsYUFBcUQsQ0FBQztnQkFDakYsTUFBTSxPQUFPLEdBQUcsSUFBSSxrQkFBa0IsQ0FDcEMsRUFBRSxLQUFLLEVBQUUsa0JBQWtCLENBQUMsS0FBSyxJQUFJLGtCQUFrQixDQUFDLFlBQVksRUFBRSxRQUFRLEVBQUUsa0JBQWtCLENBQUMsUUFBUSxFQUFFLEVBQzdHLGNBQWMsQ0FDZixDQUFDO2dCQUVGLEtBQUssQ0FBQyxVQUFVLENBQUMsYUFBYSxDQUFDLElBQUksRUFBRSxPQUFPLENBQUMsQ0FBQztZQUNoRCxDQUFDLENBQUMsQ0FBQztRQUNMLENBQUMsQ0FBQyxDQUFDO1FBRUgsT0FBTyxLQUFLLENBQUM7SUFDZixDQUFDO0lBRUQ7Ozs7Ozs7Ozs7Ozs7T0FhRztJQUNJLHNCQUFzQixDQUMzQixPQUF3QixFQUN4QixPQUE0QixFQUM1QixPQUF1QjtRQUV2QixPQUFPLE9BQU8sQ0FBQyxJQUFJLENBQ2pCLEdBQUcsQ0FBQyxDQUFDLElBQUksRUFBRSxFQUFFO1lBQ1gsT0FBTyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUMsSUFBSSxFQUFFLEVBQUU7Z0JBQ3ZCLE9BQU87b0JBQ0wsS0FBSyxFQUFFLE9BQU8sQ0FBQyxJQUFJLENBQUM7b0JBQ3BCLEtBQUssRUFBRSxPQUFPLENBQUMsSUFBSSxDQUFDO2lCQUNyQixDQUFDO1lBQ0osQ0FBQyxDQUFDLENBQUM7UUFDTCxDQUFDLENBQUMsQ0FDSCxDQUFDO0lBQ0osQ0FBQzsrR0ExRVUsa0JBQWtCLGtCQUVuQix5QkFBeUI7bUhBRnhCLGtCQUFrQixjQUZqQixNQUFNOzs0RkFFUCxrQkFBa0I7a0JBSDlCLFVBQVU7bUJBQUM7b0JBQ1YsVUFBVSxFQUFFLE1BQU07aUJBQ25COzswQkFHSSxNQUFNOzJCQUFDLHlCQUF5Qjs7MEJBQUcsUUFBUSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEluamVjdCwgSW5qZWN0YWJsZSwgT3B0aW9uYWwsIFR5cGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEZvcm1CdWlsZGVyLCBGb3JtQ29udHJvbE9wdGlvbnMsIFVudHlwZWRGb3JtQ29udHJvbCwgVW50eXBlZEZvcm1Hcm91cCB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcbmltcG9ydCB7IG1hcCwgT2JzZXJ2YWJsZSB9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHsgRHluYW1pY0Zvcm1GaWVsZCB9IGZyb20gJy4uL21vZGVscy9jbGFzc2VzL2R5bmFtaWMtZm9ybS1maWVsZC1iYXNlJztcbmltcG9ydCB7IER5bmFtaWNGb3JtRmllbGRNb2RlbCB9IGZyb20gJy4uL21vZGVscy9jbGFzc2VzL2R5bmFtaWMtZm9ybS1maWVsZC1tb2RlbCc7XG5pbXBvcnQgeyBEeW5hbWljRm9ybUZpZWxkT3B0aW9uIH0gZnJvbSAnLi4vbW9kZWxzL2NsYXNzZXMvZHluYW1pYy1mb3JtLWZpZWxkLW9wdGlvbi1tb2RlbCc7XG5pbXBvcnQgeyBEeW5hbWljRm9ybUZpZWxkVmFsdWVDb25maWcgfSBmcm9tICcuLi9tb2RlbHMvY2xhc3Nlcy9keW5hbWljLWZvcm0tZmllbGQtdmFsdWUtbW9kZWwnO1xuaW1wb3J0IHsgRFlOQU1JQ19GT1JNX0ZJRUxEX01BUF9GTiB9IGZyb20gJy4uL21vZGVscy90b2tlbnMvZHluYW1pYy1mb3JtLWZpZWxkLW1hcC1mbi50b2tlbic7XG5pbXBvcnQgeyBEeW5hbWljRm9ybUNvbmZpZyB9IGZyb20gJy4uL21vZGVscy90eXBlcy9keW5hbWljLWZvcm0tY29uZmlnLnR5cGUnO1xuaW1wb3J0IHsgRHluYW1pY0Zvcm1WYWxpZGF0aW9uc1NlcnZpY2UgfSBmcm9tICcuL2R5bmFtaWMtdmFsaWRhdGlvbnMuc2VydmljZSc7XG5cbmV4cG9ydCB0eXBlIER5bmFtaWNGb3JtRmllbGRUeXBlTWFwRm4gPSAoZmllbGQ6IER5bmFtaWNGb3JtRmllbGRNb2RlbCkgPT4gVHlwZTxEeW5hbWljRm9ybUZpZWxkPiB8IG51bGw7XG5cbkBJbmplY3RhYmxlKHtcbiAgcHJvdmlkZWRJbjogJ3Jvb3QnXG59KVxuZXhwb3J0IGNsYXNzIER5bmFtaWNGb3JtU2VydmljZSB7XG4gIGNvbnN0cnVjdG9yKFxuICAgIEBJbmplY3QoRFlOQU1JQ19GT1JNX0ZJRUxEX01BUF9GTikgQE9wdGlvbmFsKCkgcHJpdmF0ZSBEWU5BTUlDX0ZPUk1fRklFTERfTUFQX0ZOOiBEeW5hbWljRm9ybUZpZWxkVHlwZU1hcEZuLFxuICAgIHByaXZhdGUgZmI6IEZvcm1CdWlsZGVyLFxuICAgIHByaXZhdGUgdmFsaWRhdG9yc1NlcnZpY2U6IER5bmFtaWNGb3JtVmFsaWRhdGlvbnNTZXJ2aWNlXG4gICkge31cblxuICAvKipcbiAgICogQ2hlY2sgaWYgdGhlcmUgaXMgYSBmdW5jdGlvbiBwcm92aWRlZCB0byB1c2UgY3VzdG9tIGZvcm0gY29udHJvbHNcbiAgICogQHBhcmFtIG1vZGVsXG4gICAqIEByZXR1cm5zXG4gICAqL1xuICBwdWJsaWMgZ2V0Q3VzdG9tQ29udHJvbENvbXBvbmVudFR5cGUobW9kZWw6IER5bmFtaWNGb3JtRmllbGRNb2RlbCk6IFR5cGU8RHluYW1pY0Zvcm1GaWVsZD4gfCBudWxsIHtcbiAgICByZXR1cm4gdHlwZW9mIHRoaXMuRFlOQU1JQ19GT1JNX0ZJRUxEX01BUF9GTiA9PT0gJ2Z1bmN0aW9uJyA/IHRoaXMuRFlOQU1JQ19GT1JNX0ZJRUxEX01BUF9GTihtb2RlbCkgOiBudWxsO1xuICB9XG5cbiAgLyoqXG4gICAqIENyZWF0ZSBhIEZvcm1Hcm91cCBmcm9tIHRoZSBwcm92aWRlZCBmb3JtIGNvbmZpZ3VyYXRpb24uXG4gICAqIFJldHVybnMgYSBGb3JtR3JvdXAuXG4gICAqIEBwYXJhbSB7RHluYW1pY0Zvcm1Db25maWd9IGNvbmZpZyBDb25maWd1cmF0aW9uIG9iamVjdCBvZiBhIGZvcm1cbiAgICogQHJldHVybnMge1VudHlwZWRGb3JtR3JvdXB9XG4gICAqL1xuICBwdWJsaWMgY3JlYXRlRm9ybUdyb3VwKGNvbmZpZzogRHluYW1pY0Zvcm1Db25maWcpOiBVbnR5cGVkRm9ybUdyb3VwIHtcbiAgICBjb25zdCBncm91cDogVW50eXBlZEZvcm1Hcm91cCA9IHRoaXMuZmIuZ3JvdXAoe30pO1xuXG4gICAgY29uZmlnLmZvckVhY2goKHJvdykgPT4ge1xuICAgICAgcm93LmZvckVhY2goKGNvbnRyb2xDb25maWcpID0+IHtcbiAgICAgICAgY29uc3QgY29udHJvbE9wdGlvbnM6IEZvcm1Db250cm9sT3B0aW9ucyA9IHtcbiAgICAgICAgICB1cGRhdGVPbjogY29udHJvbENvbmZpZy51cGRhdGVPbixcbiAgICAgICAgICB2YWxpZGF0b3JzOiB0aGlzLnZhbGlkYXRvcnNTZXJ2aWNlLmdldFZhbGlkYXRvckZucyhjb250cm9sQ29uZmlnLnZhbGlkYXRvcnMpXG4gICAgICAgIH07XG5cbiAgICAgICAgY29uc3QgY29udHJvbFZhbHVlQ29uZmlnID0gY29udHJvbENvbmZpZyBhcyBEeW5hbWljRm9ybUZpZWxkVmFsdWVDb25maWc8dW5rbm93bj47XG4gICAgICAgIGNvbnN0IGNvbnRyb2wgPSBuZXcgVW50eXBlZEZvcm1Db250cm9sKFxuICAgICAgICAgIHsgdmFsdWU6IGNvbnRyb2xWYWx1ZUNvbmZpZy52YWx1ZSA/PyBjb250cm9sVmFsdWVDb25maWcuZGVmYXVsdFZhbHVlLCBkaXNhYmxlZDogY29udHJvbFZhbHVlQ29uZmlnLmRpc2FibGVkIH0sXG4gICAgICAgICAgY29udHJvbE9wdGlvbnNcbiAgICAgICAgKTtcblxuICAgICAgICBncm91cC5hZGRDb250cm9sKGNvbnRyb2xDb25maWcubmFtZSwgY29udHJvbCk7XG4gICAgICB9KTtcbiAgICB9KTtcblxuICAgIHJldHVybiBncm91cDtcbiAgfVxuXG4gIC8qKlxuICAgKiBUcmFuc2Zvcm0gYW55IGxpc3QgKE9ic2VydmFibGUpIHRvIGEgbGlzdCBvZiBEeW5hbWljRm9ybUZpZWxkT3B0aW9uIHdoaWNoIGlzIHVzZWQgaW4gYW55IER5bmFtaWMgRm9ybSBGaWVsZCB3aXRoIG9wdGlvbnMgKGUuZy4gRHluYW1pY1NlbGVjdCkuXG4gICAqIFBvc3NpYmxlIHRvIHByb3ZpZGUgdGhlIG1ldGhvZCB3aXRoIFR5cGUgZGVmaW5pdGlvbnMgdG8gZGVmaW5lIHRoZSBwcm92aWRlZCBsaXN0IHR5cGUgYW5kIGRlc2lyZWQgb3B0aW9uIHZhbHVlIHR5cGU6XG4gICAqXG4gICAqIGBkeW5hbWljRm9ybVNlcnZpY2UudG9EeW5hbWljT3B0aW9uTGlzdDxULCBLPiguLi4pYFxuICAgKlxuICAgKiBHZW5lcmljIHR5cGVzOlxuICAgKiAgLSBUID0gVGhlIHR5cGUgb2YgdGhlIGl0ZW1zIGluIHRoZSBwcm92aWRlZCBsaXN0XG4gICAqICAtIEsgPSBUaGUgdHlwZSBvZiB0aGUgdmFsdWUgaW5zaWRlIGFuIER5bmFtaWNGb3JtRmllbGRPcHRpb24uIERlZmF1bHQgaXMgJ3N0cmluZydcbiAgICogQHBhcmFtIGxpc3RPYnMgQW4gT2JzZXJ2YWJsZSBvZiBhIGxpc3Qgb2YgaXRlbXMgb2YgdHlwZSBUXG4gICAqIEBwYXJhbSBsYWJlbENiIENhbGxiYWNrIHRvIGRlZmluZSB0aGUgbGFiZWwgb2YgdGhlIG9wdGlvbnMgaW4gdGhlIHRlbXBsYXRlXG4gICAqIEBwYXJhbSB2YWx1ZUNiIENhbGxiYWNrIHRvIGRlZmluZSB0aGUgdmFsdWUgb2YgdGhlIG9wdGlvbnMuIE11c3QgcmV0dXJuIGEgdmFsdWUgb2YgdHlwZSBLIChkZWZhdWx0IHN0cmluZylcbiAgICogQHJldHVybnNcbiAgICovXG4gIHB1YmxpYyB0b0R5bmFtaWNPcHRpb25MaXN0T2JzPFQsIEsgPSBzdHJpbmc+KFxuICAgIGxpc3RPYnM6IE9ic2VydmFibGU8VFtdPixcbiAgICBsYWJlbENiOiAoaXRlbTogVCkgPT4gc3RyaW5nLFxuICAgIHZhbHVlQ2I6IChpdGVtOiBUKSA9PiBLXG4gICk6IE9ic2VydmFibGU8RHluYW1pY0Zvcm1GaWVsZE9wdGlvbjxLPltdPiB7XG4gICAgcmV0dXJuIGxpc3RPYnMucGlwZShcbiAgICAgIG1hcCgobGlzdCkgPT4ge1xuICAgICAgICByZXR1cm4gbGlzdC5tYXAoKGl0ZW0pID0+IHtcbiAgICAgICAgICByZXR1cm4ge1xuICAgICAgICAgICAgbGFiZWw6IGxhYmVsQ2IoaXRlbSksXG4gICAgICAgICAgICB2YWx1ZTogdmFsdWVDYihpdGVtKVxuICAgICAgICAgIH07XG4gICAgICAgIH0pO1xuICAgICAgfSlcbiAgICApO1xuICB9XG59XG4iXX0=
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { AsyncPipe, NgIf, NgClass } from '@angular/common';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import { InjectionToken, Injectable, Inject, Optional, EventEmitter, Component, Input, Output, signal, ViewChild, inject, Injector, ViewContainerRef, ChangeDetectionStrategy } from '@angular/core';
|
|
3
|
+
import { InjectionToken, Injectable, Inject, Optional, EventEmitter, Component, Input, Output, signal, ViewChild, inject, Injector, ChangeDetectorRef, ViewContainerRef, ChangeDetectionStrategy } from '@angular/core';
|
|
4
4
|
import * as i1 from '@angular/forms';
|
|
5
5
|
import { UntypedFormControl, ReactiveFormsModule, Validators } from '@angular/forms';
|
|
6
6
|
import { map, BehaviorSubject, of, isObservable, startWith, distinctUntilChanged, Subscription } from 'rxjs';
|
|
@@ -18,6 +18,8 @@ import * as i3 from '@angular/material/input';
|
|
|
18
18
|
import { MatInputModule, MatInput } from '@angular/material/input';
|
|
19
19
|
import * as i5 from '@angular/material/icon';
|
|
20
20
|
import { MatIconModule } from '@angular/material/icon';
|
|
21
|
+
import * as i6 from '@angular/material/progress-spinner';
|
|
22
|
+
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
|
21
23
|
import * as i2$2 from '@angular/material/radio';
|
|
22
24
|
import { MatRadioModule } from '@angular/material/radio';
|
|
23
25
|
import * as i4$1 from '@angular/material/core';
|
|
@@ -87,11 +89,11 @@ class DynamicFormService {
|
|
|
87
89
|
const group = this.fb.group({});
|
|
88
90
|
config.forEach((row) => {
|
|
89
91
|
row.forEach((controlConfig) => {
|
|
90
|
-
const controlValueConfig = controlConfig;
|
|
91
92
|
const controlOptions = {
|
|
92
93
|
updateOn: controlConfig.updateOn,
|
|
93
94
|
validators: this.validatorsService.getValidatorFns(controlConfig.validators)
|
|
94
95
|
};
|
|
96
|
+
const controlValueConfig = controlConfig;
|
|
95
97
|
const control = new UntypedFormControl({ value: controlValueConfig.value ?? controlValueConfig.defaultValue, disabled: controlValueConfig.disabled }, controlOptions);
|
|
96
98
|
group.addControl(controlConfig.name, control);
|
|
97
99
|
});
|
|
@@ -137,6 +139,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
137
139
|
type: Optional
|
|
138
140
|
}] }, { type: i1.FormBuilder }, { type: DynamicFormValidationsService }] });
|
|
139
141
|
|
|
142
|
+
/**
|
|
143
|
+
* Base class for the DynamicFormField component classes
|
|
144
|
+
*/
|
|
140
145
|
class DynamicFormFieldBase {
|
|
141
146
|
get id() {
|
|
142
147
|
return this.model.id ?? this.model.name;
|
|
@@ -184,6 +189,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
184
189
|
type: Output
|
|
185
190
|
}] } });
|
|
186
191
|
|
|
192
|
+
/**
|
|
193
|
+
* Base class for all DynamicFormFields
|
|
194
|
+
*/
|
|
187
195
|
class DynamicFormFieldModel {
|
|
188
196
|
constructor(config) {
|
|
189
197
|
this.id = config.id ?? config.name;
|
|
@@ -213,25 +221,25 @@ class DynamicFormFieldModel {
|
|
|
213
221
|
}
|
|
214
222
|
}
|
|
215
223
|
|
|
224
|
+
/**
|
|
225
|
+
* Base class for a DynamicFormField with a value
|
|
226
|
+
*/
|
|
216
227
|
class DynamicFormFieldValueModel extends DynamicFormFieldModel {
|
|
217
228
|
constructor(config) {
|
|
218
229
|
super(config);
|
|
219
|
-
this.
|
|
220
|
-
|
|
221
|
-
this._value$ = new BehaviorSubject(
|
|
222
|
-
this.
|
|
223
|
-
}
|
|
224
|
-
get defaultValue() {
|
|
225
|
-
return this._defaultValue;
|
|
226
|
-
}
|
|
227
|
-
set defaultValue(val) {
|
|
228
|
-
this._defaultValue = val;
|
|
230
|
+
this.defaultValue = config.defaultValue ?? null;
|
|
231
|
+
const val = config.value ?? null;
|
|
232
|
+
this._value$ = new BehaviorSubject(val);
|
|
233
|
+
this._valueChanged = config.valueChanged;
|
|
229
234
|
}
|
|
230
235
|
get value() {
|
|
231
236
|
return this._value$.getValue();
|
|
232
237
|
}
|
|
233
238
|
set value(val) {
|
|
234
239
|
this._value$.next(val);
|
|
240
|
+
if (this._valueChanged) {
|
|
241
|
+
this._valueChanged(val);
|
|
242
|
+
}
|
|
235
243
|
}
|
|
236
244
|
}
|
|
237
245
|
|
|
@@ -296,11 +304,11 @@ class DynamicButtonComponent extends DynamicFormFieldBase {
|
|
|
296
304
|
this.model.onClick();
|
|
297
305
|
}
|
|
298
306
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
299
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DynamicButtonComponent, isStandalone: true, selector: "dynamic-button", inputs: { model: "model", group: "group" }, usesInheritance: true, ngImport: i0, template: "<div class=\"dynamic-button-wrapper\">\n <button mat-button\n [id]=\"id\"\n (click)=\"onClick()\">\n <span>{{model.label}}</span>\n </button>\n</div>", styles: [".dynamic-button-wrapper{height:var(--mat-form-field-container-height, 56px);display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }] }); }
|
|
307
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DynamicButtonComponent, isStandalone: true, selector: "dynamic-button", inputs: { model: "model", group: "group" }, usesInheritance: true, ngImport: i0, template: "<div class=\"dynamic-button-wrapper\">\n <button mat-button\n [id]=\"id\"\n [disabled]=\"model.disabled\"\n (click)=\"onClick()\">\n <span>{{model.label}}</span>\n </button>\n</div>", styles: [".dynamic-button-wrapper{height:var(--mat-form-field-container-height, 56px);display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }] }); }
|
|
300
308
|
}
|
|
301
309
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicButtonComponent, decorators: [{
|
|
302
310
|
type: Component,
|
|
303
|
-
args: [{ standalone: true, imports: [MatButtonModule], selector: 'dynamic-button', template: "<div class=\"dynamic-button-wrapper\">\n <button mat-button\n [id]=\"id\"\n (click)=\"onClick()\">\n <span>{{model.label}}</span>\n </button>\n</div>", styles: [".dynamic-button-wrapper{height:var(--mat-form-field-container-height, 56px);display:flex;align-items:center}\n"] }]
|
|
311
|
+
args: [{ standalone: true, imports: [MatButtonModule], selector: 'dynamic-button', template: "<div class=\"dynamic-button-wrapper\">\n <button mat-button\n [id]=\"id\"\n [disabled]=\"model.disabled\"\n (click)=\"onClick()\">\n <span>{{model.label}}</span>\n </button>\n</div>", styles: [".dynamic-button-wrapper{height:var(--mat-form-field-container-height, 56px);display:flex;align-items:center}\n"] }]
|
|
304
312
|
}], propDecorators: { model: [{
|
|
305
313
|
type: Input
|
|
306
314
|
}], group: [{
|
|
@@ -362,11 +370,11 @@ class DynamicDatepickerComponent extends DynamicFormFieldBase {
|
|
|
362
370
|
this.change = new EventEmitter();
|
|
363
371
|
}
|
|
364
372
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicDatepickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
365
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
373
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DynamicDatepickerComponent, isStandalone: true, selector: "dynamic-datepicker", inputs: { model: "model", group: "group" }, outputs: { change: "change" }, usesInheritance: true, ngImport: i0, template: "<mat-form-field [formGroup]=\"group\"\n [id]=\"model.id\"\n color=\"primary\">\n <mat-label *ngIf=\"model.label\">{{model.label}}</mat-label>\n\n <input matInput\n [min]=\"model.min\"\n [max]=\"model.max\"\n [matDatepicker]=\"picker\">\n\n <mat-hint *ngIf=\"model.hint\">{{model.hint}}</mat-hint>\n\n <mat-datepicker-toggle matIconSuffix\n [for]=\"picker\"></mat-datepicker-toggle>\n <mat-datepicker #picker\n [startAt]=\"model.startAt\"\n [startView]=\"model.startView\"></mat-datepicker>\n\n @for(validator of model.validators; track validator.name) {\n <ng-container ngProjectAs=\"mat-error\">\n <mat-error *ngIf=\"hasError(validator.name)\">{{validator.message}}</mat-error>\n </ng-container>\n }\n\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i4.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }] }); }
|
|
366
374
|
}
|
|
367
375
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicDatepickerComponent, decorators: [{
|
|
368
376
|
type: Component,
|
|
369
|
-
args: [{ standalone: true, imports: [NgIf, ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatDatepickerModule], selector: 'dynamic-datepicker', template: "<mat-form-field [formGroup]=\"group\"\n [id]=\"model.id\"\n color=\"primary\">\n <mat-label *ngIf=\"model.label\">{{model.label}}</mat-label>\n\n <input matInput\n [min]=\"model.min\"\n [max]=\"model.max\"\n [matDatepicker]=\"picker\">\n\n <mat-hint *ngIf=\"model.hint\">{{model.hint}}</mat-hint>\n\n <mat-datepicker-toggle matIconSuffix\n [for]=\"picker\"></mat-datepicker-toggle>\n <mat-datepicker #picker\n [startAt]=\"model.startAt\"\n [startView]=\"model.startView\"></mat-datepicker>\n\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"] }]
|
|
377
|
+
args: [{ standalone: true, imports: [NgIf, ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatDatepickerModule], selector: 'dynamic-datepicker', template: "<mat-form-field [formGroup]=\"group\"\n [id]=\"model.id\"\n color=\"primary\">\n <mat-label *ngIf=\"model.label\">{{model.label}}</mat-label>\n\n <input matInput\n [min]=\"model.min\"\n [max]=\"model.max\"\n [matDatepicker]=\"picker\">\n\n <mat-hint *ngIf=\"model.hint\">{{model.hint}}</mat-hint>\n\n <mat-datepicker-toggle matIconSuffix\n [for]=\"picker\"></mat-datepicker-toggle>\n <mat-datepicker #picker\n [startAt]=\"model.startAt\"\n [startView]=\"model.startView\"></mat-datepicker>\n\n @for(validator of model.validators; track validator.name) {\n <ng-container ngProjectAs=\"mat-error\">\n <mat-error *ngIf=\"hasError(validator.name)\">{{validator.message}}</mat-error>\n </ng-container>\n }\n\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"] }]
|
|
370
378
|
}], propDecorators: { model: [{
|
|
371
379
|
type: Input
|
|
372
380
|
}], group: [{
|
|
@@ -399,7 +407,7 @@ class DynamicInputComponent extends DynamicFormFieldBase {
|
|
|
399
407
|
return `${this.valueCount} / ${this.model.maxLength}`;
|
|
400
408
|
}
|
|
401
409
|
get showClear() {
|
|
402
|
-
return !!this.control.value && !this.control.disabled;
|
|
410
|
+
return !!this.control.value && !this.control.disabled && !this.model.showLoader;
|
|
403
411
|
}
|
|
404
412
|
onChange(event) {
|
|
405
413
|
// Ignore the native HTML 5 change event
|
|
@@ -409,11 +417,11 @@ class DynamicInputComponent extends DynamicFormFieldBase {
|
|
|
409
417
|
this.change.emit(event);
|
|
410
418
|
}
|
|
411
419
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
412
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DynamicInputComponent, isStandalone: true, selector: "dynamic-input", inputs: { model: "model", group: "group" }, outputs: { change: "change" }, viewQueries: [{ propertyName: "input", first: true, predicate: MatInput, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<mat-form-field [formGroup]=\"group\"\n [id]=\"id\"\n color=\"primary\">\n <mat-label *ngIf=\"model.label\">{{model.label}}</mat-label>\n\n <span matTextPrefix\n *ngIf=\"model.prefix\">{{model.prefix}}</span>\n\n <input matInput\n [type]=\"model.inputType\"\n [formControlName]=\"model.name\"\n [placeholder]=\"model.placeholder\"\n [attr.min]=\"model.min\"\n [attr.max]=\"model.max\"\n [attr.minLength]=\"model.minLength\"\n [attr.maxLength]=\"model.maxLength\"\n [pattern]=\"model.pattern\"\n [autocomplete]=\"model.autocomplete\"\n (change)=\"onChange($event)\" />\n\n <button matSuffix\n mat-icon-button\n *ngIf=\"showClear\"\n (click)=\"resetControl()\">\n <mat-icon fontIcon=\"clear\"></mat-icon>\n </button>\n\n <mat-hint *ngIf=\"model.hint\"\n align=\"start\">{{model.hint}}</mat-hint>\n\n <mat-hint *ngIf=\"model.maxLength\"\n align=\"end\">{{maxCountText}}</mat-hint>\n\n @for(validator of model.validators; track validator.name) {\n <ng-container ngProjectAs=\"mat-error\">\n <mat-error *ngIf=\"hasError(validator.name)\">{{validator.message}}</mat-error>\n </ng-container>\n }\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
420
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DynamicInputComponent, isStandalone: true, selector: "dynamic-input", inputs: { model: "model", group: "group" }, outputs: { change: "change" }, viewQueries: [{ propertyName: "input", first: true, predicate: MatInput, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<mat-form-field [formGroup]=\"group\"\n [id]=\"id\"\n color=\"primary\">\n <mat-label *ngIf=\"model.label\">{{model.label}}</mat-label>\n\n <span matTextPrefix\n *ngIf=\"model.prefix\">{{model.prefix}}</span>\n\n <input matInput\n [type]=\"model.inputType\"\n [formControlName]=\"model.name\"\n [placeholder]=\"model.placeholder\"\n [attr.min]=\"model.min\"\n [attr.max]=\"model.max\"\n [attr.minLength]=\"model.minLength\"\n [attr.maxLength]=\"model.maxLength\"\n [pattern]=\"model.pattern\"\n [autocomplete]=\"model.autocomplete\"\n (change)=\"onChange($event)\" />\n\n <button matSuffix\n mat-icon-button\n *ngIf=\"showClear\"\n (click)=\"resetControl()\">\n <mat-icon fontIcon=\"clear\"></mat-icon>\n </button>\n\n <div matSuffix\n *ngIf=\"model.showLoader()\"\n class=\"loaderIcon\">\n <mat-spinner diameter=\"16\"\n color=\"primary\"></mat-spinner>\n </div>\n\n <mat-hint *ngIf=\"model.hint\"\n align=\"start\">{{model.hint}}</mat-hint>\n\n <mat-hint *ngIf=\"model.maxLength\"\n align=\"end\">{{maxCountText}}</mat-hint>\n\n @for(validator of model.validators; track validator.name) {\n <ng-container ngProjectAs=\"mat-error\">\n <mat-error *ngIf=\"hasError(validator.name)\">{{validator.message}}</mat-error>\n </ng-container>\n }\n</mat-form-field>", styles: ["mat-form-field{width:100%}mat-form-field .loaderIcon{padding:8px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i6.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
|
|
413
421
|
}
|
|
414
422
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicInputComponent, decorators: [{
|
|
415
423
|
type: Component,
|
|
416
|
-
args: [{
|
|
424
|
+
args: [{ standalone: true, imports: [NgIf, ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatButtonModule, MatIconModule, MatProgressSpinnerModule], selector: 'dynamic-input', template: "<mat-form-field [formGroup]=\"group\"\n [id]=\"id\"\n color=\"primary\">\n <mat-label *ngIf=\"model.label\">{{model.label}}</mat-label>\n\n <span matTextPrefix\n *ngIf=\"model.prefix\">{{model.prefix}}</span>\n\n <input matInput\n [type]=\"model.inputType\"\n [formControlName]=\"model.name\"\n [placeholder]=\"model.placeholder\"\n [attr.min]=\"model.min\"\n [attr.max]=\"model.max\"\n [attr.minLength]=\"model.minLength\"\n [attr.maxLength]=\"model.maxLength\"\n [pattern]=\"model.pattern\"\n [autocomplete]=\"model.autocomplete\"\n (change)=\"onChange($event)\" />\n\n <button matSuffix\n mat-icon-button\n *ngIf=\"showClear\"\n (click)=\"resetControl()\">\n <mat-icon fontIcon=\"clear\"></mat-icon>\n </button>\n\n <div matSuffix\n *ngIf=\"model.showLoader()\"\n class=\"loaderIcon\">\n <mat-spinner diameter=\"16\"\n color=\"primary\"></mat-spinner>\n </div>\n\n <mat-hint *ngIf=\"model.hint\"\n align=\"start\">{{model.hint}}</mat-hint>\n\n <mat-hint *ngIf=\"model.maxLength\"\n align=\"end\">{{maxCountText}}</mat-hint>\n\n @for(validator of model.validators; track validator.name) {\n <ng-container ngProjectAs=\"mat-error\">\n <mat-error *ngIf=\"hasError(validator.name)\">{{validator.message}}</mat-error>\n </ng-container>\n }\n</mat-form-field>", styles: ["mat-form-field{width:100%}mat-form-field .loaderIcon{padding:8px}\n"] }]
|
|
417
425
|
}], propDecorators: { input: [{
|
|
418
426
|
type: ViewChild,
|
|
419
427
|
args: [MatInput, { static: true }]
|
|
@@ -441,6 +449,7 @@ class DynamicInput extends DynamicFormFieldValueModel {
|
|
|
441
449
|
this.autocomplete = config.autocomplete ?? 'off';
|
|
442
450
|
this.prefix = config.prefix ?? null;
|
|
443
451
|
this.hideClearIcon = config.hideClearIcon ?? false;
|
|
452
|
+
this.showLoader = config.showLoader ?? signal(false);
|
|
444
453
|
}
|
|
445
454
|
}
|
|
446
455
|
|
|
@@ -799,6 +808,7 @@ class DynamicFormFieldComponent {
|
|
|
799
808
|
this.change = new EventEmitter();
|
|
800
809
|
this.dynamicFormService = inject(DynamicFormService);
|
|
801
810
|
this.relationService = inject(DynamicFormRelationsService);
|
|
811
|
+
this.cdRef = inject(ChangeDetectorRef);
|
|
802
812
|
this._subs = new Subscription();
|
|
803
813
|
}
|
|
804
814
|
/** Get the instance of a control component using the injected custom method or local method */
|
|
@@ -894,6 +904,7 @@ class DynamicFormFieldComponent {
|
|
|
894
904
|
*/
|
|
895
905
|
onDisabledChange(disabled) {
|
|
896
906
|
disabled ? this._control.disable() : this._control.enable();
|
|
907
|
+
this.cdRef.markForCheck();
|
|
897
908
|
}
|
|
898
909
|
onChange(ev) {
|
|
899
910
|
this.change.emit(this.createDynamicFormEvent(ev, 'change'));
|