@masterteam/forms 0.0.27 → 0.0.29

package/fesm2022/masterteam-forms-dynamic-field.mjs

@@ -94,12 +94,12 @@ class DynamicField {
             ...value,
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DynamicField, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", 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      [filter]=\"transformedFieldConfig().filter\"\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 (\"pick-list\") {\n    <mt-pick-list-field\n      [label]=\"transformedFieldConfig().label || ''\"\n      [options]=\"transformedFieldConfig().options || []\"\n      [optionLabel]=\"transformedFieldConfig().optionLabel || 'label'\"\n      [optionValue]=\"transformedFieldConfig().optionValue || 'value'\"\n      [sourceHeader]=\"transformedFieldConfig().sourceHeader || 'Available'\"\n      [targetHeader]=\"transformedFieldConfig().targetHeader || 'Selected'\"\n      [showSourceControls]=\"transformedFieldConfig().showSourceControls ?? true\"\n      [showTargetControls]=\"transformedFieldConfig().showTargetControls ?? true\"\n      [showSourceFilter]=\"transformedFieldConfig().showSourceFilter ?? false\"\n      [showTargetFilter]=\"transformedFieldConfig().showTargetFilter ?? false\"\n      [filterBy]=\"transformedFieldConfig().filterBy\"\n      [dataKey]=\"transformedFieldConfig().dataKey\"\n      [dragdrop]=\"transformedFieldConfig().dragdrop\"\n      [responsive]=\"transformedFieldConfig().responsive\"\n      [readonly]=\"transformedFieldConfig().readonly!\"\n      [formControlName]=\"fieldName()\"\n    />\n  }\n  @case (\"user-search\") {\n    <mt-user-search-field\n      [label]=\"transformedFieldConfig().label || ''\"\n      [placeholder]=\"transformedFieldConfig().placeholder || ''\"\n      [hint]=\"transformedFieldConfig().hint || ''\"\n      [apiUrl]=\"transformedFieldConfig().apiUrl || ''\"\n      [optionLabel]=\"transformedFieldConfig().optionLabel || 'label'\"\n      [optionValue]=\"transformedFieldConfig().optionValue || 'value'\"\n      [readonly]=\"transformedFieldConfig().readonly!\"\n      [context]=\"transformedFieldConfig().context\"\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      [orientation]=\"transformedFieldConfig().orientation || 'vertical'\"\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  @case (\"upload-file\") {\n    <mt-upload-field\n      [label]=\"transformedFieldConfig().label\"\n      [formControlName]=\"fieldName()\"\n      [shape]=\"transformedFieldConfig().shape\"\n      [size]=\"transformedFieldConfig().size\"\n      [userImgClass]=\"transformedFieldConfig().userImgClass\"\n      [readonly]=\"transformedFieldConfig().readonly!\"\n      [endPoint]=\"transformedFieldConfig().endPoint\"\n      [accept]=\"transformedFieldConfig().accept\"\n      [fileSizeLimit]=\"transformedFieldConfig().fileSizeLimit\"\n      [context]=\"transformedFieldConfig().context\"\n      [title]=\"transformedFieldConfig().title\"\n      [description]=\"transformedFieldConfig().description\"\n    />\n  }\n  @case (\"spacer\") {\n    <div class=\"spacer\"></div>\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", "required", "icon", "iconPosition"] }, { 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: PickListField, selector: "mt-pick-list-field", inputs: ["label", "class", "readonly", "options", "optionLabel", "optionValue", "sourceHeader", "targetHeader", "showSourceControls", "showTargetControls", "showSourceFilter", "showTargetFilter", "filterBy", "dataKey", "filterLocale", "filterMatchMode", "dragdrop", "responsive", "required"] }, { 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", "variant", "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", "orientation", "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"] }, { kind: "component", type: UserSearchField, selector: "mt-user-search-field", inputs: ["hint", "label", "placeholder", "class", "readonly", "required", "apiUrl", "dataKey", "paramName", "context", "size"] }, { kind: "component", type: UploadField, selector: "mt-upload-field", inputs: ["label", "title", "description", "endPoint", "size", "userImgClass", "shape", "accept", "isDragging", "fileSizeLimit", "readonly", "context"], outputs: ["isDraggingChange", "onChange"] }], viewProviders: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: DynamicField, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", 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      [filter]=\"transformedFieldConfig().filter\"\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 (\"pick-list\") {\n    <mt-pick-list-field\n      [label]=\"transformedFieldConfig().label || ''\"\n      [options]=\"transformedFieldConfig().options || []\"\n      [optionLabel]=\"transformedFieldConfig().optionLabel || 'label'\"\n      [optionValue]=\"transformedFieldConfig().optionValue || 'value'\"\n      [sourceHeader]=\"transformedFieldConfig().sourceHeader || 'Available'\"\n      [targetHeader]=\"transformedFieldConfig().targetHeader || 'Selected'\"\n      [showSourceControls]=\"transformedFieldConfig().showSourceControls ?? true\"\n      [showTargetControls]=\"transformedFieldConfig().showTargetControls ?? true\"\n      [showSourceFilter]=\"transformedFieldConfig().showSourceFilter ?? false\"\n      [showTargetFilter]=\"transformedFieldConfig().showTargetFilter ?? false\"\n      [filterBy]=\"transformedFieldConfig().filterBy\"\n      [dataKey]=\"transformedFieldConfig().dataKey\"\n      [dragdrop]=\"transformedFieldConfig().dragdrop\"\n      [responsive]=\"transformedFieldConfig().responsive\"\n      [readonly]=\"transformedFieldConfig().readonly!\"\n      [formControlName]=\"fieldName()\"\n    />\n  }\n  @case (\"user-search\") {\n    <mt-user-search-field\n      [label]=\"transformedFieldConfig().label || ''\"\n      [placeholder]=\"transformedFieldConfig().placeholder || ''\"\n      [hint]=\"transformedFieldConfig().hint || ''\"\n      [apiUrl]=\"transformedFieldConfig().apiUrl || ''\"\n      [optionLabel]=\"transformedFieldConfig().optionLabel || 'label'\"\n      [optionValue]=\"transformedFieldConfig().optionValue || 'value'\"\n      [readonly]=\"transformedFieldConfig().readonly!\"\n      [context]=\"transformedFieldConfig().context\"\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      [orientation]=\"transformedFieldConfig().orientation || 'vertical'\"\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  @case (\"upload-file\") {\n    <mt-upload-field\n      [label]=\"transformedFieldConfig().label\"\n      [formControlName]=\"fieldName()\"\n      [shape]=\"transformedFieldConfig().shape\"\n      [size]=\"transformedFieldConfig().size\"\n      [userImgClass]=\"transformedFieldConfig().userImgClass\"\n      [readonly]=\"transformedFieldConfig().readonly!\"\n      [endPoint]=\"transformedFieldConfig().endPoint\"\n      [accept]=\"transformedFieldConfig().accept\"\n      [fileSizeLimit]=\"transformedFieldConfig().fileSizeLimit\"\n      [context]=\"transformedFieldConfig().context\"\n      [title]=\"transformedFieldConfig().title\"\n      [description]=\"transformedFieldConfig().description\"\n    />\n  }\n  @case (\"spacer\") {\n    <div class=\"spacer\"></div>\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", "required", "icon", "iconPosition"] }, { 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: PickListField, selector: "mt-pick-list-field", inputs: ["label", "class", "readonly", "options", "optionLabel", "optionValue", "sourceHeader", "targetHeader", "showSourceControls", "showTargetControls", "showSourceFilter", "showTargetFilter", "filterBy", "dataKey", "filterLocale", "filterMatchMode", "dragdrop", "responsive", "required"] }, { 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", "variant", "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", "orientation", "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"] }, { kind: "component", type: UserSearchField, selector: "mt-user-search-field", inputs: ["hint", "label", "placeholder", "class", "readonly", "required", "apiUrl", "dataKey", "paramName", "context", "size"] }, { kind: "component", type: UploadField, selector: "mt-upload-field", inputs: ["label", "title", "description", "endPoint", "size", "userImgClass", "shape", "accept", "isDragging", "fileSizeLimit", "readonly", "context"], outputs: ["isDraggingChange", "onChange"] }], viewProviders: [
             { provide: ControlContainer, useExisting: FormGroupDirective },
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DynamicField, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: DynamicField, decorators: [{
             type: Component,
             args: [{ selector: 'mt-dynamic-field', standalone: true, imports: [
                         TextField,

package/fesm2022/masterteam-forms-dynamic-form.mjs

@@ -339,8 +339,8 @@ class DynamicForm {
             this.formSubscription.unsubscribe();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DynamicForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DynamicForm, isStandalone: true, selector: "mt-dynamic-form", inputs: { formConfig: { classPropertyName: "formConfig", publicName: "formConfig", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: DynamicForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: DynamicForm, isStandalone: true, selector: "mt-dynamic-form", inputs: { formConfig: { classPropertyName: "formConfig", publicName: "formConfig", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => DynamicForm),
@@ -353,7 +353,7 @@ class DynamicForm {
             },
         ], ngImport: i0, template: "<form [formGroup]=\"form\">\n  <div\n    class=\"flex flex-col gap-6\"\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-color border-b-2 border-gray-200 pb-2 mb-4'\n            \"\n          >\n            {{ section.label }}\n          </h3>\n        }\n\n        <div\n          [class]=\"section?.bodyClass || '@container grid gap-4 items-start'\"\n          [style]=\"\n            !section?.bodyClass\n              ? sectionGridStyles()[section.key || 'section-' + $index]\n              : {}\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              [style]=\"fieldColSpanStyles()[field.key!]\"\n              [hidden]=\"field.type !== 'spacer' && hiddenFields()[field.key!]\"\n            >\n              @if (field.type === \"spacer\") {\n                <mt-dynamic-field\n                  [fieldConfig]=\"field\"\n                  [fieldName]=\"field.key!\"\n                />\n              } @else if (field.key!.includes(\".\")) {\n                <!-- Handle nested fields (e.g., name.ar, name.en) -->\n                @let parentKey = field.key!.split(\".\")[0];\n                @let childKey = field.key!.split(\".\")[1];\n                <form [formGroup]=\"form.get(parentKey)\">\n                  <mt-dynamic-field\n                    [fieldConfig]=\"field\"\n                    [fieldName]=\"childKey\"\n                  />\n                </form>\n              } @else {\n                <!-- Handle regular fields -->\n                <mt-dynamic-field\n                  [fieldConfig]=\"field\"\n                  [fieldName]=\"field.key!\"\n                />\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],[formArray],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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DynamicForm, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: DynamicForm, decorators: [{
             type: Component,
             args: [{ selector: 'mt-dynamic-form', standalone: true, imports: [CommonModule, ReactiveFormsModule, DynamicField, SortPipe], providers: [
                         {

package/fesm2022/masterteam-forms-pipes.mjs

@@ -37,10 +37,10 @@ class SortPipe {
             return current && current[key] !== undefined ? current[key] : 0;
         }, obj);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SortPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.1", ngImport: i0, type: SortPipe, isStandalone: true, name: "sort" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: SortPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: SortPipe, isStandalone: true, name: "sort" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SortPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: SortPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'sort',

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@masterteam/forms",
-  "version": "0.0.27",
+  "version": "0.0.29",
   "publishConfig": {
-    "directory": ".",
-    "linkDirectory": false,
+    "directory": "../../../dist/masterteam/forms",
+    "linkDirectory": true,
     "access": "public"
   },
   "peerDependencies": {
-    "@angular/common": "^21.0.1",
-    "@angular/core": "^21.0.1",
-    "@angular/forms": "^21.0.1",
+    "@angular/common": "^21.0.2",
+    "@angular/core": "^21.0.2",
+    "@angular/forms": "^21.0.2",
     "postcss": "^8.5.6",
     "@tailwindcss/postcss": "^4.1.17",
     "tailwindcss": "^4.1.17",
@@ -19,8 +19,8 @@
     "rxjs": "^7.8.2"
   },
   "dependencies": {
-    "@masterteam/components": "x",
-    "tslib": "^2.3.0"
+    "tslib": "^2.3.0",
+    "@masterteam/components": "^0.0.64"
   },
   "sideEffects": false,
   "exports": {