@masterteam/forms 0.0.1 → 0.0.3
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.
|
@@ -10,7 +10,13 @@ import { NumberField } from '@masterteam/components/number-field';
|
|
|
10
10
|
import { SliderField } from '@masterteam/components/slider-field';
|
|
11
11
|
import { MultiSelectField } from '@masterteam/components/multi-select-field';
|
|
12
12
|
import { CheckboxField } from '@masterteam/components/checkbox-field';
|
|
13
|
-
import {
|
|
13
|
+
import { ColorPickerField } from '@masterteam/components/color-picker-field';
|
|
14
|
+
import { TextFieldConfig, TextareaFieldConfig, SelectFieldConfig, DateFieldConfig, NumberFieldConfig, SliderFieldConfig, MultiSelectFieldConfig, CheckboxFieldConfig, RadioButtonFieldConfig, RadioCardsFieldConfig, ToggleFieldConfig, EditorFieldConfig, IconFieldConfig, ColorPickerFieldConfig } from '@masterteam/components';
|
|
15
|
+
import { IconField } from '@masterteam/components/icon-field';
|
|
16
|
+
import { ToggleField } from '@masterteam/components/toggle-field';
|
|
17
|
+
import { RadioCardsField } from '@masterteam/components/radio-cards-field';
|
|
18
|
+
import { RadioButtonField } from '@masterteam/components/radio-button-field';
|
|
19
|
+
import { EditorField } from '@masterteam/components/editor-field';
|
|
14
20
|
|
|
15
21
|
class DynamicField {
|
|
16
22
|
// Input signal with transform to handle class for text type
|
|
@@ -49,18 +55,36 @@ class DynamicField {
|
|
|
49
55
|
if (value.type === 'checkbox') {
|
|
50
56
|
return new CheckboxFieldConfig(value);
|
|
51
57
|
}
|
|
58
|
+
if (value.type === 'radio-button') {
|
|
59
|
+
return new RadioButtonFieldConfig(value);
|
|
60
|
+
}
|
|
61
|
+
if (value.type === 'radio-cards') {
|
|
62
|
+
return new RadioCardsFieldConfig(value);
|
|
63
|
+
}
|
|
64
|
+
if (value.type === 'toggle') {
|
|
65
|
+
return new ToggleFieldConfig(value);
|
|
66
|
+
}
|
|
67
|
+
if (value.type === 'editor-field') {
|
|
68
|
+
return new EditorFieldConfig(value);
|
|
69
|
+
}
|
|
70
|
+
if (value.type === 'icon-field') {
|
|
71
|
+
return new IconFieldConfig(value);
|
|
72
|
+
}
|
|
73
|
+
if (value.type === 'color-picker') {
|
|
74
|
+
return new ColorPickerFieldConfig(value);
|
|
75
|
+
}
|
|
52
76
|
}
|
|
53
77
|
// Default fallback to TextFieldConfig
|
|
54
78
|
return new TextFieldConfig({
|
|
55
79
|
...value,
|
|
56
80
|
});
|
|
57
81
|
}
|
|
58
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.
|
|
59
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.
|
|
82
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DynamicField, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
83
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: DynamicField, isStandalone: true, selector: "mt-dynamic-field", inputs: { fieldConfig: { classPropertyName: "fieldConfig", publicName: "fieldConfig", isSignal: true, isRequired: true, transformFunction: null }, fieldName: { classPropertyName: "fieldName", publicName: "fieldName", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@switch (transformedFieldConfig().type) {\n @case (\"text\") {\n <mt-text-field\n [label]=\"transformedFieldConfig().label\"\n [placeholder]=\"transformedFieldConfig().placeholder\"\n [type]=\"transformedFieldConfig().inputType || 'text'\"\n [readonly]=\"transformedFieldConfig().readonly!\"\n [formControlName]=\"fieldName()\"\n />\n }\n @case (\"textarea\") {\n <mt-textarea-field\n [label]=\"transformedFieldConfig().label\"\n [placeholder]=\"transformedFieldConfig().placeholder\"\n [readonly]=\"transformedFieldConfig().readonly!\"\n [formControlName]=\"fieldName()\"\n />\n }\n @case (\"select\") {\n <mt-select-field\n [label]=\"transformedFieldConfig().label || ''\"\n [placeholder]=\"transformedFieldConfig().placeholder || ''\"\n [options]=\"transformedFieldConfig().options || []\"\n [optionLabel]=\"transformedFieldConfig().optionLabel || 'label'\"\n [optionValue]=\"transformedFieldConfig().optionValue || 'value'\"\n [readonly]=\"transformedFieldConfig().readonly!\"\n [formControlName]=\"fieldName()\"\n />\n }\n @case (\"date\") {\n <mt-date-field\n [label]=\"transformedFieldConfig().label\"\n [placeholder]=\"transformedFieldConfig().placeholder\"\n [readonly]=\"transformedFieldConfig().readonly!\"\n [formControlName]=\"fieldName()\"\n />\n }\n @case (\"number\") {\n <mt-number-field\n [label]=\"transformedFieldConfig().label\"\n [placeholder]=\"transformedFieldConfig().placeholder\"\n [readonly]=\"transformedFieldConfig().readonly!\"\n [formControlName]=\"fieldName()\"\n />\n }\n @case (\"slider\") {\n <mt-slider-field\n [label]=\"transformedFieldConfig().label\"\n [readonly]=\"transformedFieldConfig().readonly!\"\n [formControlName]=\"fieldName()\"\n />\n }\n @case (\"multi-select\") {\n <mt-multi-select-field\n [label]=\"transformedFieldConfig().label || ''\"\n [placeholder]=\"transformedFieldConfig().placeholder || ''\"\n [options]=\"transformedFieldConfig().options || []\"\n [optionLabel]=\"transformedFieldConfig().optionLabel || 'label'\"\n [optionValue]=\"transformedFieldConfig().optionValue || 'value'\"\n [readonly]=\"transformedFieldConfig().readonly!\"\n [formControlName]=\"fieldName()\"\n />\n }\n @case (\"checkbox\") {\n <mt-checkbox-field\n [label]=\"transformedFieldConfig().label\"\n [readonly]=\"transformedFieldConfig().readonly!\"\n [formControlName]=\"fieldName()\"\n />\n }\n @case (\"radio-button\") {\n <mt-radio-button-field\n [label]=\"transformedFieldConfig().label\"\n [options]=\"transformedFieldConfig().options || []\"\n [readonly]=\"transformedFieldConfig().readonly!\"\n [formControlName]=\"fieldName()\"\n />\n }\n @case (\"radio-cards\") {\n <mt-radio-cards-field\n [label]=\"transformedFieldConfig().label\"\n [options]=\"transformedFieldConfig().options || []\"\n [size]=\"transformedFieldConfig().size || 'small'\"\n [readonly]=\"transformedFieldConfig().readonly!\"\n [formControlName]=\"fieldName()\"\n />\n }\n @case (\"toggle\") {\n <mt-toggle-field\n [label]=\"transformedFieldConfig().label\"\n [readonly]=\"transformedFieldConfig().readonly!\"\n [formControlName]=\"fieldName()\"\n />\n }\n @case (\"icon-field\") {\n <mt-icon-field\n [label]=\"transformedFieldConfig().label\"\n [readonly]=\"transformedFieldConfig().readonly!\"\n [formControlName]=\"fieldName()\"\n />\n }\n @case (\"color-picker\") {\n <mt-color-picker-field\n [label]=\"transformedFieldConfig().label\"\n [readonly]=\"transformedFieldConfig().readonly!\"\n [formControlName]=\"fieldName()\"\n />\n }\n @case (\"editor-field\") {\n <mt-editor-field\n [label]=\"transformedFieldConfig().label\"\n [readonly]=\"transformedFieldConfig().readonly!\"\n [formControlName]=\"fieldName()\"\n />\n }\n}\n", styles: [":host{display:block;width:100%}\n"], dependencies: [{ kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "pKeyFilter", "required"] }, { kind: "component", type: TextareaField, selector: "mt-textarea-field", inputs: ["field", "label", "placeholder", "class", "readonly", "noErrorStyle", "pInputs", "rows", "required"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required"], outputs: ["onChange"] }, { kind: "component", type: DateField, selector: "mt-date-field", inputs: ["field", "label", "placeholder", "class", "readonly", "showIcon", "showClear", "showTime", "pInputs", "required"] }, { kind: "component", type: NumberField, selector: "mt-number-field", inputs: ["field", "label", "placeholder", "class", "readonly", "pInputs", "format", "maxFractionDigits", "min", "max", "required"] }, { kind: "component", type: SliderField, selector: "mt-slider-field", inputs: ["field", "label", "animate", "class", "min", "max", "step", "hideNumber", "unit", "readonly", "pInputs", "required"], outputs: ["onChange", "onSlideEnd"] }, { kind: "component", type: MultiSelectField, selector: "mt-multi-select-field", inputs: ["field", "label", "placeholder", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "display", "required"], outputs: ["onChange"] }, { kind: "component", type: CheckboxField, selector: "mt-checkbox-field", inputs: ["label", "labelPosition", "placeholder", "readonly", "pInputs", "required"], outputs: ["onChange"] }, { kind: "component", type: ColorPickerField, selector: "mt-color-picker-field", inputs: ["label", "placeholder", "class", "readonly", "pInputs", "required"], outputs: ["onChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: IconField, selector: "mt-icon-field", inputs: ["label", "required"] }, { kind: "component", type: EditorField, selector: "mt-editor-field", inputs: ["label", "placeholder", "readonly", "theme", "height", "modules", "required"] }, { kind: "component", type: RadioButtonField, selector: "mt-radio-button-field", inputs: ["labelPosition", "readonly", "pInputs", "required", "options", "size", "label"], outputs: ["onChange"] }, { kind: "component", type: RadioCardsField, selector: "mt-radio-cards-field", inputs: ["circle", "label", "required", "color", "size", "options"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "labelPosition", "placeholder", "readonly", "pInputs", "required"], outputs: ["onChange"] }], viewProviders: [
|
|
60
84
|
{ provide: ControlContainer, useExisting: FormGroupDirective },
|
|
61
85
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
62
86
|
}
|
|
63
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.
|
|
87
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DynamicField, decorators: [{
|
|
64
88
|
type: Component,
|
|
65
89
|
args: [{ selector: 'mt-dynamic-field', standalone: true, imports: [
|
|
66
90
|
TextField,
|
|
@@ -71,10 +95,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImpor
|
|
|
71
95
|
SliderField,
|
|
72
96
|
MultiSelectField,
|
|
73
97
|
CheckboxField,
|
|
98
|
+
ColorPickerField,
|
|
74
99
|
ReactiveFormsModule,
|
|
100
|
+
IconField,
|
|
101
|
+
EditorField,
|
|
102
|
+
RadioButtonField,
|
|
103
|
+
RadioCardsField,
|
|
104
|
+
ToggleField,
|
|
75
105
|
], changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [
|
|
76
106
|
{ provide: ControlContainer, useExisting: FormGroupDirective },
|
|
77
|
-
], template: "@switch (transformedFieldConfig().type) {\n @case (\"text\") {\n <mt-text-field\n [label]=\"transformedFieldConfig().label\"\n [placeholder]=\"transformedFieldConfig().placeholder\"\n [type]=\"transformedFieldConfig().inputType || 'text'\"\n [readonly]=\"transformedFieldConfig().readonly!\"\n [formControlName]=\"fieldName()\"\n />\n }\n @case (\"textarea\") {\n <mt-textarea-field\n [label]=\"transformedFieldConfig().label\"\n [placeholder]=\"transformedFieldConfig().placeholder\"\n [readonly]=\"transformedFieldConfig().readonly!\"\n [formControlName]=\"fieldName()\"\n />\n }\n @case (\"select\") {\n <mt-select-field\n [label]=\"transformedFieldConfig().label || ''\"\n [placeholder]=\"transformedFieldConfig().placeholder || ''\"\n [options]=\"transformedFieldConfig().options || []\"\n [optionLabel]=\"transformedFieldConfig().optionLabel || 'label'\"\n [optionValue]=\"transformedFieldConfig().optionValue || 'value'\"\n [readonly]=\"transformedFieldConfig().readonly!\"\n [formControlName]=\"fieldName()\"\n />\n }\n @case (\"date\") {\n <mt-date-field\n [label]=\"transformedFieldConfig().label\"\n [placeholder]=\"transformedFieldConfig().placeholder\"\n [readonly]=\"transformedFieldConfig().readonly!\"\n [formControlName]=\"fieldName()\"\n />\n }\n @case (\"number\") {\n <mt-number-field\n [label]=\"transformedFieldConfig().label\"\n [placeholder]=\"transformedFieldConfig().placeholder\"\n [readonly]=\"transformedFieldConfig().readonly!\"\n [formControlName]=\"fieldName()\"\n />\n }\n @case (\"slider\") {\n <mt-slider-field\n [label]=\"transformedFieldConfig().label\"\n [readonly]=\"transformedFieldConfig().readonly!\"\n [formControlName]=\"fieldName()\"\n />\n }\n @case (\"multi-select\") {\n <mt-multi-select-field\n [label]=\"transformedFieldConfig().label || ''\"\n [placeholder]=\"transformedFieldConfig().placeholder || ''\"\n [options]=\"transformedFieldConfig().options || []\"\n [optionLabel]=\"transformedFieldConfig().optionLabel || 'label'\"\n [optionValue]=\"transformedFieldConfig().optionValue || 'value'\"\n [readonly]=\"transformedFieldConfig().readonly!\"\n [formControlName]=\"fieldName()\"\n />\n }\n @case (\"checkbox\") {\n <mt-checkbox-field\n [label]=\"transformedFieldConfig().label\"\n [readonly]=\"transformedFieldConfig().readonly!\"\n [formControlName]=\"fieldName()\"\n />\n }\n}\n", styles: [":host{display:block;width:100%}\n"] }]
|
|
107
|
+
], template: "@switch (transformedFieldConfig().type) {\n @case (\"text\") {\n <mt-text-field\n [label]=\"transformedFieldConfig().label\"\n [placeholder]=\"transformedFieldConfig().placeholder\"\n [type]=\"transformedFieldConfig().inputType || 'text'\"\n [readonly]=\"transformedFieldConfig().readonly!\"\n [formControlName]=\"fieldName()\"\n />\n }\n @case (\"textarea\") {\n <mt-textarea-field\n [label]=\"transformedFieldConfig().label\"\n [placeholder]=\"transformedFieldConfig().placeholder\"\n [readonly]=\"transformedFieldConfig().readonly!\"\n [formControlName]=\"fieldName()\"\n />\n }\n @case (\"select\") {\n <mt-select-field\n [label]=\"transformedFieldConfig().label || ''\"\n [placeholder]=\"transformedFieldConfig().placeholder || ''\"\n [options]=\"transformedFieldConfig().options || []\"\n [optionLabel]=\"transformedFieldConfig().optionLabel || 'label'\"\n [optionValue]=\"transformedFieldConfig().optionValue || 'value'\"\n [readonly]=\"transformedFieldConfig().readonly!\"\n [formControlName]=\"fieldName()\"\n />\n }\n @case (\"date\") {\n <mt-date-field\n [label]=\"transformedFieldConfig().label\"\n [placeholder]=\"transformedFieldConfig().placeholder\"\n [readonly]=\"transformedFieldConfig().readonly!\"\n [formControlName]=\"fieldName()\"\n />\n }\n @case (\"number\") {\n <mt-number-field\n [label]=\"transformedFieldConfig().label\"\n [placeholder]=\"transformedFieldConfig().placeholder\"\n [readonly]=\"transformedFieldConfig().readonly!\"\n [formControlName]=\"fieldName()\"\n />\n }\n @case (\"slider\") {\n <mt-slider-field\n [label]=\"transformedFieldConfig().label\"\n [readonly]=\"transformedFieldConfig().readonly!\"\n [formControlName]=\"fieldName()\"\n />\n }\n @case (\"multi-select\") {\n <mt-multi-select-field\n [label]=\"transformedFieldConfig().label || ''\"\n [placeholder]=\"transformedFieldConfig().placeholder || ''\"\n [options]=\"transformedFieldConfig().options || []\"\n [optionLabel]=\"transformedFieldConfig().optionLabel || 'label'\"\n [optionValue]=\"transformedFieldConfig().optionValue || 'value'\"\n [readonly]=\"transformedFieldConfig().readonly!\"\n [formControlName]=\"fieldName()\"\n />\n }\n @case (\"checkbox\") {\n <mt-checkbox-field\n [label]=\"transformedFieldConfig().label\"\n [readonly]=\"transformedFieldConfig().readonly!\"\n [formControlName]=\"fieldName()\"\n />\n }\n @case (\"radio-button\") {\n <mt-radio-button-field\n [label]=\"transformedFieldConfig().label\"\n [options]=\"transformedFieldConfig().options || []\"\n [readonly]=\"transformedFieldConfig().readonly!\"\n [formControlName]=\"fieldName()\"\n />\n }\n @case (\"radio-cards\") {\n <mt-radio-cards-field\n [label]=\"transformedFieldConfig().label\"\n [options]=\"transformedFieldConfig().options || []\"\n [size]=\"transformedFieldConfig().size || 'small'\"\n [readonly]=\"transformedFieldConfig().readonly!\"\n [formControlName]=\"fieldName()\"\n />\n }\n @case (\"toggle\") {\n <mt-toggle-field\n [label]=\"transformedFieldConfig().label\"\n [readonly]=\"transformedFieldConfig().readonly!\"\n [formControlName]=\"fieldName()\"\n />\n }\n @case (\"icon-field\") {\n <mt-icon-field\n [label]=\"transformedFieldConfig().label\"\n [readonly]=\"transformedFieldConfig().readonly!\"\n [formControlName]=\"fieldName()\"\n />\n }\n @case (\"color-picker\") {\n <mt-color-picker-field\n [label]=\"transformedFieldConfig().label\"\n [readonly]=\"transformedFieldConfig().readonly!\"\n [formControlName]=\"fieldName()\"\n />\n }\n @case (\"editor-field\") {\n <mt-editor-field\n [label]=\"transformedFieldConfig().label\"\n [readonly]=\"transformedFieldConfig().readonly!\"\n [formControlName]=\"fieldName()\"\n />\n }\n}\n", styles: [":host{display:block;width:100%}\n"] }]
|
|
78
108
|
}], ctorParameters: () => [] });
|
|
79
109
|
|
|
80
110
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"masterteam-forms-dynamic-field.mjs","sources":["../../../../packages/masterteam/forms/dynamic-field/dynamic-field.ts","../../../../packages/masterteam/forms/dynamic-field/dynamic-field.html","../../../../packages/masterteam/forms/dynamic-field/masterteam-forms-dynamic-field.ts"],"sourcesContent":["import {\n Component,\n input,\n computed,\n ChangeDetectionStrategy,\n Signal,\n inject,\n} from '@angular/core';\nimport {\n ReactiveFormsModule,\n ControlContainer,\n FormGroupDirective,\n} from '@angular/forms';\nimport { TextField } from '@masterteam/components/text-field';\nimport { TextareaField } from '@masterteam/components/textarea-field';\nimport { SelectField } from '@masterteam/components/select-field';\nimport { DateField } from '@masterteam/components/date-field';\nimport { NumberField } from '@masterteam/components/number-field';\nimport { SliderField } from '@masterteam/components/slider-field';\nimport { MultiSelectField } from '@masterteam/components/multi-select-field';\nimport { CheckboxField } from '@masterteam/components/checkbox-field';\nimport {\n TextFieldConfig,\n TextareaFieldConfig,\n SelectFieldConfig,\n DateFieldConfig,\n NumberFieldConfig,\n SliderFieldConfig,\n MultiSelectFieldConfig,\n CheckboxFieldConfig,\n DynamicFieldConfig,\n} from '@masterteam/components';\n\n@Component({\n selector: 'mt-dynamic-field',\n standalone: true,\n imports: [\n TextField,\n TextareaField,\n SelectField,\n DateField,\n NumberField,\n SliderField,\n MultiSelectField,\n CheckboxField,\n ReactiveFormsModule,\n ],\n templateUrl: './dynamic-field.html',\n styleUrls: ['./dynamic-field.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n viewProviders: [\n { provide: ControlContainer, useExisting: FormGroupDirective },\n ],\n})\nexport class DynamicField {\n // Input signal with transform to handle class for text type\n readonly fieldConfig = input.required<DynamicFieldConfig>();\n\n // Computed property for transformed field config\n readonly transformedFieldConfig: Signal<DynamicFieldConfig> = computed(() =>\n this.transformToFieldConfig(this.fieldConfig()),\n );\n\n // Inject ControlContainer to connect directly with parent form\n private controlContainer = inject(ControlContainer);\n\n // Input for the form control name\n readonly fieldName = input.required<string>();\n constructor() {}\n\n private transformToFieldConfig(value: any): DynamicFieldConfig {\n // If it's a plain object, transform it to appropriate field config\n if (typeof value === 'object') {\n if (value.type === 'text') {\n return new TextFieldConfig(value);\n }\n if (value.type === 'textarea') {\n return new TextareaFieldConfig(value);\n }\n if (value.type === 'select') {\n return new SelectFieldConfig(value);\n }\n if (value.type === 'date') {\n return new DateFieldConfig(value);\n }\n if (value.type === 'number') {\n return new NumberFieldConfig(value);\n }\n if (value.type === 'slider') {\n return new SliderFieldConfig(value);\n }\n if (value.type === 'multi-select') {\n return new MultiSelectFieldConfig(value);\n }\n if (value.type === 'checkbox') {\n return new CheckboxFieldConfig(value);\n }\n }\n\n // Default fallback to TextFieldConfig\n return new TextFieldConfig({\n ...value,\n });\n }\n}\n","@switch (transformedFieldConfig().type) {\n @case (\"text\") {\n <mt-text-field\n [label]=\"transformedFieldConfig().label\"\n [placeholder]=\"transformedFieldConfig().placeholder\"\n [type]=\"transformedFieldConfig().inputType || 'text'\"\n [readonly]=\"transformedFieldConfig().readonly!\"\n [formControlName]=\"fieldName()\"\n />\n }\n @case (\"textarea\") {\n <mt-textarea-field\n [label]=\"transformedFieldConfig().label\"\n [placeholder]=\"transformedFieldConfig().placeholder\"\n [readonly]=\"transformedFieldConfig().readonly!\"\n [formControlName]=\"fieldName()\"\n />\n }\n @case (\"select\") {\n <mt-select-field\n [label]=\"transformedFieldConfig().label || ''\"\n [placeholder]=\"transformedFieldConfig().placeholder || ''\"\n [options]=\"transformedFieldConfig().options || []\"\n [optionLabel]=\"transformedFieldConfig().optionLabel || 'label'\"\n [optionValue]=\"transformedFieldConfig().optionValue || 'value'\"\n [readonly]=\"transformedFieldConfig().readonly!\"\n [formControlName]=\"fieldName()\"\n />\n }\n @case (\"date\") {\n <mt-date-field\n [label]=\"transformedFieldConfig().label\"\n [placeholder]=\"transformedFieldConfig().placeholder\"\n [readonly]=\"transformedFieldConfig().readonly!\"\n [formControlName]=\"fieldName()\"\n />\n }\n @case (\"number\") {\n <mt-number-field\n [label]=\"transformedFieldConfig().label\"\n [placeholder]=\"transformedFieldConfig().placeholder\"\n [readonly]=\"transformedFieldConfig().readonly!\"\n [formControlName]=\"fieldName()\"\n />\n }\n @case (\"slider\") {\n <mt-slider-field\n [label]=\"transformedFieldConfig().label\"\n [readonly]=\"transformedFieldConfig().readonly!\"\n [formControlName]=\"fieldName()\"\n />\n }\n @case (\"multi-select\") {\n <mt-multi-select-field\n [label]=\"transformedFieldConfig().label || ''\"\n [placeholder]=\"transformedFieldConfig().placeholder || ''\"\n [options]=\"transformedFieldConfig().options || []\"\n [optionLabel]=\"transformedFieldConfig().optionLabel || 'label'\"\n [optionValue]=\"transformedFieldConfig().optionValue || 'value'\"\n [readonly]=\"transformedFieldConfig().readonly!\"\n [formControlName]=\"fieldName()\"\n />\n }\n @case (\"checkbox\") {\n <mt-checkbox-field\n [label]=\"transformedFieldConfig().label\"\n [readonly]=\"transformedFieldConfig().readonly!\"\n [formControlName]=\"fieldName()\"\n />\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"masterteam-forms-dynamic-field.mjs","sources":["../../../../packages/masterteam/forms/dynamic-field/dynamic-field.ts","../../../../packages/masterteam/forms/dynamic-field/dynamic-field.html","../../../../packages/masterteam/forms/dynamic-field/masterteam-forms-dynamic-field.ts"],"sourcesContent":["import {\n Component,\n input,\n computed,\n ChangeDetectionStrategy,\n Signal,\n inject,\n} from '@angular/core';\nimport {\n ReactiveFormsModule,\n ControlContainer,\n FormGroupDirective,\n} from '@angular/forms';\nimport { TextField } from '@masterteam/components/text-field';\nimport { TextareaField } from '@masterteam/components/textarea-field';\nimport { SelectField } from '@masterteam/components/select-field';\nimport { DateField } from '@masterteam/components/date-field';\nimport { NumberField } from '@masterteam/components/number-field';\nimport { SliderField } from '@masterteam/components/slider-field';\nimport { MultiSelectField } from '@masterteam/components/multi-select-field';\nimport { CheckboxField } from '@masterteam/components/checkbox-field';\nimport { ColorPickerField } from '@masterteam/components/color-picker-field';\nimport {\n TextFieldConfig,\n TextareaFieldConfig,\n SelectFieldConfig,\n DateFieldConfig,\n NumberFieldConfig,\n SliderFieldConfig,\n MultiSelectFieldConfig,\n CheckboxFieldConfig,\n ColorPickerFieldConfig,\n DynamicFieldConfig,\n IconFieldConfig,\n RadioButtonFieldConfig,\n RadioCardsFieldConfig,\n ToggleFieldConfig,\n EditorFieldConfig,\n} from '@masterteam/components';\nimport { IconField } from '@masterteam/components/icon-field';\nimport { ToggleField } from '@masterteam/components/toggle-field';\nimport { RadioCardsField } from '@masterteam/components/radio-cards-field';\nimport { RadioButtonField } from '@masterteam/components/radio-button-field';\nimport { EditorField } from '@masterteam/components/editor-field';\n\n@Component({\n selector: 'mt-dynamic-field',\n standalone: true,\n imports: [\n TextField,\n TextareaField,\n SelectField,\n DateField,\n NumberField,\n SliderField,\n MultiSelectField,\n CheckboxField,\n ColorPickerField,\n ReactiveFormsModule,\n IconField,\n EditorField,\n RadioButtonField,\n RadioCardsField,\n ToggleField,\n ],\n templateUrl: './dynamic-field.html',\n styleUrls: ['./dynamic-field.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n viewProviders: [\n { provide: ControlContainer, useExisting: FormGroupDirective },\n ],\n})\nexport class DynamicField {\n // Input signal with transform to handle class for text type\n readonly fieldConfig = input.required<DynamicFieldConfig>();\n\n // Computed property for transformed field config\n readonly transformedFieldConfig: Signal<DynamicFieldConfig> = computed(() =>\n this.transformToFieldConfig(this.fieldConfig()),\n );\n\n // Inject ControlContainer to connect directly with parent form\n private controlContainer = inject(ControlContainer);\n\n // Input for the form control name\n readonly fieldName = input.required<string>();\n constructor() {}\n\n private transformToFieldConfig(value: any): DynamicFieldConfig {\n // If it's a plain object, transform it to appropriate field config\n if (typeof value === 'object') {\n if (value.type === 'text') {\n return new TextFieldConfig(value);\n }\n if (value.type === 'textarea') {\n return new TextareaFieldConfig(value);\n }\n if (value.type === 'select') {\n return new SelectFieldConfig(value);\n }\n if (value.type === 'date') {\n return new DateFieldConfig(value);\n }\n if (value.type === 'number') {\n return new NumberFieldConfig(value);\n }\n if (value.type === 'slider') {\n return new SliderFieldConfig(value);\n }\n if (value.type === 'multi-select') {\n return new MultiSelectFieldConfig(value);\n }\n if (value.type === 'checkbox') {\n return new CheckboxFieldConfig(value);\n }\n if (value.type === 'radio-button') {\n return new RadioButtonFieldConfig(value);\n }\n if (value.type === 'radio-cards') {\n return new RadioCardsFieldConfig(value);\n }\n if (value.type === 'toggle') {\n return new ToggleFieldConfig(value);\n }\n if (value.type === 'editor-field') {\n return new EditorFieldConfig(value);\n }\n if (value.type === 'icon-field') {\n return new IconFieldConfig(value);\n }\n if (value.type === 'color-picker') {\n return new ColorPickerFieldConfig(value);\n }\n }\n\n // Default fallback to TextFieldConfig\n return new TextFieldConfig({\n ...value,\n });\n }\n}\n","@switch (transformedFieldConfig().type) {\n @case (\"text\") {\n <mt-text-field\n [label]=\"transformedFieldConfig().label\"\n [placeholder]=\"transformedFieldConfig().placeholder\"\n [type]=\"transformedFieldConfig().inputType || 'text'\"\n [readonly]=\"transformedFieldConfig().readonly!\"\n [formControlName]=\"fieldName()\"\n />\n }\n @case (\"textarea\") {\n <mt-textarea-field\n [label]=\"transformedFieldConfig().label\"\n [placeholder]=\"transformedFieldConfig().placeholder\"\n [readonly]=\"transformedFieldConfig().readonly!\"\n [formControlName]=\"fieldName()\"\n />\n }\n @case (\"select\") {\n <mt-select-field\n [label]=\"transformedFieldConfig().label || ''\"\n [placeholder]=\"transformedFieldConfig().placeholder || ''\"\n [options]=\"transformedFieldConfig().options || []\"\n [optionLabel]=\"transformedFieldConfig().optionLabel || 'label'\"\n [optionValue]=\"transformedFieldConfig().optionValue || 'value'\"\n [readonly]=\"transformedFieldConfig().readonly!\"\n [formControlName]=\"fieldName()\"\n />\n }\n @case (\"date\") {\n <mt-date-field\n [label]=\"transformedFieldConfig().label\"\n [placeholder]=\"transformedFieldConfig().placeholder\"\n [readonly]=\"transformedFieldConfig().readonly!\"\n [formControlName]=\"fieldName()\"\n />\n }\n @case (\"number\") {\n <mt-number-field\n [label]=\"transformedFieldConfig().label\"\n [placeholder]=\"transformedFieldConfig().placeholder\"\n [readonly]=\"transformedFieldConfig().readonly!\"\n [formControlName]=\"fieldName()\"\n />\n }\n @case (\"slider\") {\n <mt-slider-field\n [label]=\"transformedFieldConfig().label\"\n [readonly]=\"transformedFieldConfig().readonly!\"\n [formControlName]=\"fieldName()\"\n />\n }\n @case (\"multi-select\") {\n <mt-multi-select-field\n [label]=\"transformedFieldConfig().label || ''\"\n [placeholder]=\"transformedFieldConfig().placeholder || ''\"\n [options]=\"transformedFieldConfig().options || []\"\n [optionLabel]=\"transformedFieldConfig().optionLabel || 'label'\"\n [optionValue]=\"transformedFieldConfig().optionValue || 'value'\"\n [readonly]=\"transformedFieldConfig().readonly!\"\n [formControlName]=\"fieldName()\"\n />\n }\n @case (\"checkbox\") {\n <mt-checkbox-field\n [label]=\"transformedFieldConfig().label\"\n [readonly]=\"transformedFieldConfig().readonly!\"\n [formControlName]=\"fieldName()\"\n />\n }\n @case (\"radio-button\") {\n <mt-radio-button-field\n [label]=\"transformedFieldConfig().label\"\n [options]=\"transformedFieldConfig().options || []\"\n [readonly]=\"transformedFieldConfig().readonly!\"\n [formControlName]=\"fieldName()\"\n />\n }\n @case (\"radio-cards\") {\n <mt-radio-cards-field\n [label]=\"transformedFieldConfig().label\"\n [options]=\"transformedFieldConfig().options || []\"\n [size]=\"transformedFieldConfig().size || 'small'\"\n [readonly]=\"transformedFieldConfig().readonly!\"\n [formControlName]=\"fieldName()\"\n />\n }\n @case (\"toggle\") {\n <mt-toggle-field\n [label]=\"transformedFieldConfig().label\"\n [readonly]=\"transformedFieldConfig().readonly!\"\n [formControlName]=\"fieldName()\"\n />\n }\n @case (\"icon-field\") {\n <mt-icon-field\n [label]=\"transformedFieldConfig().label\"\n [readonly]=\"transformedFieldConfig().readonly!\"\n [formControlName]=\"fieldName()\"\n />\n }\n @case (\"color-picker\") {\n <mt-color-picker-field\n [label]=\"transformedFieldConfig().label\"\n [readonly]=\"transformedFieldConfig().readonly!\"\n [formControlName]=\"fieldName()\"\n />\n }\n @case (\"editor-field\") {\n <mt-editor-field\n [label]=\"transformedFieldConfig().label\"\n [readonly]=\"transformedFieldConfig().readonly!\"\n [formControlName]=\"fieldName()\"\n />\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;MAwEa,YAAY,CAAA;;AAEd,IAAA,WAAW,GAAG,KAAK,CAAC,QAAQ,sDAAsB;;AAGlD,IAAA,sBAAsB,GAA+B,QAAQ,CAAC,MACrE,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,kEAChD;;AAGO,IAAA,gBAAgB,GAAG,MAAM,CAAC,gBAAgB,CAAC;;AAG1C,IAAA,SAAS,GAAG,KAAK,CAAC,QAAQ,oDAAU;AAC7C,IAAA,WAAA,GAAA,EAAe;AAEP,IAAA,sBAAsB,CAAC,KAAU,EAAA;;AAEvC,QAAA,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;AAC7B,YAAA,IAAI,KAAK,CAAC,IAAI,KAAK,MAAM,EAAE;AACzB,gBAAA,OAAO,IAAI,eAAe,CAAC,KAAK,CAAC;YACnC;AACA,YAAA,IAAI,KAAK,CAAC,IAAI,KAAK,UAAU,EAAE;AAC7B,gBAAA,OAAO,IAAI,mBAAmB,CAAC,KAAK,CAAC;YACvC;AACA,YAAA,IAAI,KAAK,CAAC,IAAI,KAAK,QAAQ,EAAE;AAC3B,gBAAA,OAAO,IAAI,iBAAiB,CAAC,KAAK,CAAC;YACrC;AACA,YAAA,IAAI,KAAK,CAAC,IAAI,KAAK,MAAM,EAAE;AACzB,gBAAA,OAAO,IAAI,eAAe,CAAC,KAAK,CAAC;YACnC;AACA,YAAA,IAAI,KAAK,CAAC,IAAI,KAAK,QAAQ,EAAE;AAC3B,gBAAA,OAAO,IAAI,iBAAiB,CAAC,KAAK,CAAC;YACrC;AACA,YAAA,IAAI,KAAK,CAAC,IAAI,KAAK,QAAQ,EAAE;AAC3B,gBAAA,OAAO,IAAI,iBAAiB,CAAC,KAAK,CAAC;YACrC;AACA,YAAA,IAAI,KAAK,CAAC,IAAI,KAAK,cAAc,EAAE;AACjC,gBAAA,OAAO,IAAI,sBAAsB,CAAC,KAAK,CAAC;YAC1C;AACA,YAAA,IAAI,KAAK,CAAC,IAAI,KAAK,UAAU,EAAE;AAC7B,gBAAA,OAAO,IAAI,mBAAmB,CAAC,KAAK,CAAC;YACvC;AACA,YAAA,IAAI,KAAK,CAAC,IAAI,KAAK,cAAc,EAAE;AACjC,gBAAA,OAAO,IAAI,sBAAsB,CAAC,KAAK,CAAC;YAC1C;AACA,YAAA,IAAI,KAAK,CAAC,IAAI,KAAK,aAAa,EAAE;AAChC,gBAAA,OAAO,IAAI,qBAAqB,CAAC,KAAK,CAAC;YACzC;AACA,YAAA,IAAI,KAAK,CAAC,IAAI,KAAK,QAAQ,EAAE;AAC3B,gBAAA,OAAO,IAAI,iBAAiB,CAAC,KAAK,CAAC;YACrC;AACA,YAAA,IAAI,KAAK,CAAC,IAAI,KAAK,cAAc,EAAE;AACjC,gBAAA,OAAO,IAAI,iBAAiB,CAAC,KAAK,CAAC;YACrC;AACA,YAAA,IAAI,KAAK,CAAC,IAAI,KAAK,YAAY,EAAE;AAC/B,gBAAA,OAAO,IAAI,eAAe,CAAC,KAAK,CAAC;YACnC;AACA,YAAA,IAAI,KAAK,CAAC,IAAI,KAAK,cAAc,EAAE;AACjC,gBAAA,OAAO,IAAI,sBAAsB,CAAC,KAAK,CAAC;YAC1C;QACF;;QAGA,OAAO,IAAI,eAAe,CAAC;AACzB,YAAA,GAAG,KAAK;AACT,SAAA,CAAC;IACJ;uGAnEW,YAAY,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAZ,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,YAAY,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECxEzB,k9HAoHA,EAAA,MAAA,EAAA,CAAA,mCAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDnEI,SAAS,+KACT,aAAa,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,OAAA,EAAA,aAAA,EAAA,OAAA,EAAA,UAAA,EAAA,cAAA,EAAA,SAAA,EAAA,MAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACb,WAAW,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,OAAA,EAAA,aAAA,EAAA,sBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,SAAA,EAAA,SAAA,EAAA,aAAA,EAAA,aAAA,EAAA,QAAA,EAAA,UAAA,EAAA,SAAA,EAAA,WAAA,EAAA,kBAAA,EAAA,UAAA,CAAA,EAAA,OAAA,EAAA,CAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACX,SAAS,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,OAAA,EAAA,aAAA,EAAA,OAAA,EAAA,UAAA,EAAA,UAAA,EAAA,WAAA,EAAA,UAAA,EAAA,SAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACT,WAAW,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,OAAA,EAAA,aAAA,EAAA,OAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,KAAA,EAAA,KAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACX,WAAW,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,OAAA,EAAA,SAAA,EAAA,OAAA,EAAA,KAAA,EAAA,KAAA,EAAA,MAAA,EAAA,YAAA,EAAA,MAAA,EAAA,UAAA,EAAA,SAAA,EAAA,UAAA,CAAA,EAAA,OAAA,EAAA,CAAA,UAAA,EAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACX,gBAAgB,EAAA,QAAA,EAAA,uBAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,OAAA,EAAA,aAAA,EAAA,OAAA,EAAA,UAAA,EAAA,SAAA,EAAA,SAAA,EAAA,aAAA,EAAA,aAAA,EAAA,QAAA,EAAA,UAAA,EAAA,SAAA,EAAA,WAAA,EAAA,SAAA,EAAA,UAAA,CAAA,EAAA,OAAA,EAAA,CAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAChB,aAAa,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,eAAA,EAAA,aAAA,EAAA,UAAA,EAAA,SAAA,EAAA,UAAA,CAAA,EAAA,OAAA,EAAA,CAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACb,gBAAgB,EAAA,QAAA,EAAA,uBAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,aAAA,EAAA,OAAA,EAAA,UAAA,EAAA,SAAA,EAAA,UAAA,CAAA,EAAA,OAAA,EAAA,CAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAChB,mBAAmB,uSACnB,SAAS,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACT,WAAW,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,aAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,SAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACX,gBAAgB,EAAA,QAAA,EAAA,uBAAA,EAAA,MAAA,EAAA,CAAA,eAAA,EAAA,UAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,MAAA,EAAA,OAAA,CAAA,EAAA,OAAA,EAAA,CAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAChB,eAAe,EAAA,QAAA,EAAA,sBAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,MAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACf,WAAW,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,eAAA,EAAA,aAAA,EAAA,UAAA,EAAA,SAAA,EAAA,UAAA,CAAA,EAAA,OAAA,EAAA,CAAA,UAAA,CAAA,EAAA,CAAA,EAAA,aAAA,EAKE;AACb,YAAA,EAAE,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,kBAAkB,EAAE;AAC/D,SAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAEU,YAAY,EAAA,UAAA,EAAA,CAAA;kBA3BxB,SAAS;+BACE,kBAAkB,EAAA,UAAA,EAChB,IAAI,EAAA,OAAA,EACP;wBACP,SAAS;wBACT,aAAa;wBACb,WAAW;wBACX,SAAS;wBACT,WAAW;wBACX,WAAW;wBACX,gBAAgB;wBAChB,aAAa;wBACb,gBAAgB;wBAChB,mBAAmB;wBACnB,SAAS;wBACT,WAAW;wBACX,gBAAgB;wBAChB,eAAe;wBACf,WAAW;qBACZ,EAAA,eAAA,EAGgB,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC;AACb,wBAAA,EAAE,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,kBAAkB,EAAE;AAC/D,qBAAA,EAAA,QAAA,EAAA,k9HAAA,EAAA,MAAA,EAAA,CAAA,mCAAA,CAAA,EAAA;;;AEtEH;;AAEG;;;;"}
|
|
@@ -136,8 +136,8 @@ class DynamicForm {
|
|
|
136
136
|
this.statusSubscription.unsubscribe();
|
|
137
137
|
}
|
|
138
138
|
}
|
|
139
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.
|
|
140
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.
|
|
139
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DynamicForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
140
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: DynamicForm, isStandalone: true, selector: "mt-dynamic-form", inputs: { formConfig: { classPropertyName: "formConfig", publicName: "formConfig", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
|
|
141
141
|
{
|
|
142
142
|
provide: NG_VALUE_ACCESSOR,
|
|
143
143
|
useExisting: forwardRef(() => DynamicForm),
|
|
@@ -150,7 +150,7 @@ class DynamicForm {
|
|
|
150
150
|
},
|
|
151
151
|
], ngImport: i0, template: "<form [formGroup]=\"form\">\n <div\n class=\"flex flex-col gap-6 max-w-4xl mx-auto p-4\"\n [class]=\"formConfig().layout?.containerClass\"\n >\n @for (\n section of formConfig().sections | sort: \"order\";\n track section.key || $index\n ) {\n <div\n [class]=\"\n section.cssClass ||\n formConfig().layout?.sectionClass ||\n 'flex flex-col gap-4'\n \"\n >\n @if (section.type === \"header\" && section.label) {\n <h3\n [class]=\"\n section?.headerClass ||\n 'text-xl font-semibold text-gray-800 border-b-2 border-gray-200 pb-2 mb-4'\n \"\n >\n {{ section.label }}\n </h3>\n }\n\n <div\n [class]=\"\n section?.bodyClass ||\n 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 items-start'\n \"\n >\n @for (field of section.fields | sort: \"order\"; track field.key) {\n <div\n [class]=\"\n field.cssClass ||\n formConfig().layout?.fieldClass ||\n 'flex flex-col gap-1'\n \"\n [hidden]=\"field.hidden\"\n >\n <mt-dynamic-field\n [fieldConfig]=\"field\"\n [fieldName]=\"field.key!\"\n />\n </div>\n }\n </div>\n </div>\n }\n </div>\n</form>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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: "component", type: DynamicField, selector: "mt-dynamic-field", inputs: ["fieldConfig", "fieldName"] }, { kind: "pipe", type: SortPipe, name: "sort" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
152
152
|
}
|
|
153
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.
|
|
153
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DynamicForm, decorators: [{
|
|
154
154
|
type: Component,
|
|
155
155
|
args: [{ selector: 'mt-dynamic-form', standalone: true, imports: [CommonModule, ReactiveFormsModule, DynamicField, SortPipe], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
156
156
|
{
|
|
@@ -37,10 +37,10 @@ class SortPipe {
|
|
|
37
37
|
return current && current[key] !== undefined ? current[key] : 0;
|
|
38
38
|
}, obj);
|
|
39
39
|
}
|
|
40
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.
|
|
41
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.1.
|
|
40
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: SortPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
41
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.1.3", ngImport: i0, type: SortPipe, isStandalone: true, name: "sort" });
|
|
42
42
|
}
|
|
43
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.
|
|
43
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: SortPipe, decorators: [{
|
|
44
44
|
type: Pipe,
|
|
45
45
|
args: [{
|
|
46
46
|
name: 'sort',
|
package/package.json
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@masterteam/forms",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.3",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"directory": ".",
|
|
6
6
|
"linkDirectory": false,
|
|
7
7
|
"access": "public"
|
|
8
8
|
},
|
|
9
9
|
"peerDependencies": {
|
|
10
|
-
"@angular/common": "^20.1.
|
|
11
|
-
"@angular/core": "^20.1.
|
|
12
|
-
"@angular/forms": "^20.1.
|
|
10
|
+
"@angular/common": "^20.1.3",
|
|
11
|
+
"@angular/core": "^20.1.3",
|
|
12
|
+
"@angular/forms": "^20.1.3",
|
|
13
13
|
"postcss": "^8.5.6",
|
|
14
14
|
"@tailwindcss/postcss": "^4.1.11",
|
|
15
15
|
"tailwindcss": "^4.1.11",
|
|
16
16
|
"tailwindcss-primeui": "^0.6.1",
|
|
17
|
-
"primeng": "20.0.
|
|
18
|
-
"@primeuix/themes": "^1.2.
|
|
17
|
+
"primeng": "^20.0.1",
|
|
18
|
+
"@primeuix/themes": "^1.2.2",
|
|
19
19
|
"rxjs": "^7.8.2"
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|