@ruc-lib/metaform 2.0.0 → 2.0.1

package/src/lib/ruclib-metaform/ruclib-metaform.component.stories.ts

@@ -0,0 +1,676 @@
+import { Meta, moduleMetadata } from '@storybook/angular';
+import { RuclibMetaformComponent } from './ruclib-metaform.component';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatButtonModule } from '@angular/material/button';
+import { MatInputModule } from '@angular/material/input';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+import { RuclibMultiSelectModule } from '@ruc-lib/multi-select';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatSelectModule } from '@angular/material/select';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+
+import { HttpClientModule } from '@angular/common/http';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatDialogModule } from '@angular/material/dialog';
+
+import { RucMetaInputsComponent } from '../../components/ruc-meta-inputs/ruc-meta-inputs.component';
+import { RucMetaRadioGroupComponent } from '../../components/ruc-meta-radio-group/ruc-meta-radio-group.component';
+import { RucTextAreaComponent } from '../../components/ruc-text-area/ruc-text-area.component';
+import { RucMetaCheckboxGroupComponent } from '../../components/ruc-meta-checkbox-group/ruc-meta-checkbox-group.component';
+import { RucMetaSelectComponent } from '../../components/ruc-meta-select/ruc-meta-select.component';
+import { RucMetaFormService } from '../../services/ruc-meta-form.service';
+
+export default {
+  title: 'Meta Form',
+  component: RuclibMetaformComponent,
+  decorators: [
+    moduleMetadata({
+      declarations: [RuclibMetaformComponent, RucMetaInputsComponent, RucMetaRadioGroupComponent,
+        RucMetaCheckboxGroupComponent, RucMetaSelectComponent, RucTextAreaComponent],
+      imports: [
+        CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatButtonModule,
+        MatDialogModule,
+        RuclibMultiSelectModule,
+        MatRadioModule,
+        MatCheckboxModule,
+        MatSelectModule,
+        MatAutocompleteModule,
+        MatTooltipModule,
+        BrowserAnimationsModule,
+        HttpClientModule
+      ],
+      providers: [HttpClientModule, RucMetaFormService]
+    }),
+  ]
+} as Meta<RuclibMetaformComponent>;
+
+export const Primary = {
+  render: (args: RuclibMetaformComponent) => ({
+    props: args,
+  }),
+  args: {
+    rucInputData: [
+      {
+        "formType": "simple",
+        "fieldType": "input",
+        "inputType": "text",
+        "id": "firstName",
+        "name": "firstName",
+        "error": false,
+        "label": "First Name",
+        "className": "firstName",
+        "value": "",
+        "alt": "na",
+        "appearance": "outline",
+        "min": "4",
+        "max": "20",
+        "width": "100",
+        "height": "20",
+        "checked": false,
+        "disabled": false,
+        "maxlength": "100",
+        "readonly": false,
+        "required": false,
+        "size": "100",
+        "step": 100,
+        "tooltip": "First Name",
+        "tooltipPosition": "right",
+        "pattern": "any",
+        "placeholder": "First Name",
+        "autofocus": true,
+        "autocomplete": ["amar", "bharat", "charan"],
+        "customComponentName": "none",
+        "rucDialogInput": {},
+        "hasDependentFields": false,
+        "dependentFieldParentId": "any",
+        "dependentFields": "any",
+        "toolTipDescription": "none",
+        "showErrorOnPopUp": true,
+        "groupOptions": []
+      },
+      {
+        "formType": "simple",
+        "fieldType": "input",
+        "inputType": "text",
+        "id": "lastName",
+        "error": false,
+        "name": "lastName",
+        "label": "Last Name",
+        "className": "lastName",
+        "value": "",
+        "alt": "na",
+        "appearance": "outline",
+        "min": "4",
+        "max": "20",
+        "width": "100",
+        "height": "20",
+        "checked": false,
+        "disabled": false,
+        "maxlength": "100",
+        "readonly": false,
+        "required": true,
+        "size": "100",
+        "step": 100,
+        "sameRow": true,
+        "sameRowColumnWidth": "50",
+        "tooltip": "Last Name",
+        "tooltipPosition": "below",
+        "pattern": "any",
+        "placeholder": "Last Name",
+        "autofocus": true,
+        "autocomplete": ["singh", "rai", "lal"],
+        "customComponentName": "none",
+        "rucDialogInput": {},
+        "hasDependentFields": false,
+        "dependentFieldParentId": "any",
+        "dependentFields": "any",
+        "toolTipDescription": "none",
+        "showErrorOnPopUp": true,
+        "groupOptions": []
+      },
+      {
+        "formType": "simple",
+        "fieldType": "input",
+        "inputType": "password",
+        "id": "password",
+        "error": false,
+        "name": "password",
+        "label": "Password",
+        "className": "password",
+        "value": "",
+        "alt": "na",
+        "appearance": "outline",
+        "min": "4",
+        "max": "20",
+        "width": "100",
+        "height": "20",
+        "checked": false,
+        "disabled": false,
+        "maxlength": "100",
+        "readonly": false,
+        "required": true,
+        "size": "100",
+        "step": 100,
+        "sameRow": true,
+        "sameRowColumnWidth": "25",
+        "tooltip": "Password",
+        "tooltipPosition": "right",
+        "pattern": "any",
+        "placeholder": "First Name",
+        "autofocus": true,
+        "autocomplete": false,
+        "customComponentName": "none",
+        "rucDialogInput": {},
+        "hasDependentFields": false,
+        "dependentFieldParentId": "any",
+        "dependentFields": "any",
+        "toolTipDescription": "none",
+        "showErrorOnPopUp": true,
+        "groupOptions": []
+      },
+      {
+        "formType": "simple",
+        "fieldType": "radio",
+        "inputType": "radio",
+        "id": "radio",
+        "name": "radio",
+        "error": false,
+        "label": "Pick your favorite season",
+        "className": "radio",
+        "value": "",
+        "alt": "na",
+        "appearance": "outline",
+        "min": "4",
+        "max": "20",
+        "width": "100",
+        "height": "20",
+        "checked": false,
+        "disabled": false,
+        "maxlength": "100",
+        "readonly": false,
+        "required": true,
+        "size": "100",
+        "step": 100,
+        "sameRow": false,
+        "sameRowColumnWidth": "100",
+        "tooltip": "Radio",
+        "tooltipPosition": "left",
+        "pattern": "any",
+        "placeholder": "",
+        "autofocus": true,
+        "autocomplete": false,
+        "customComponentName": "none",
+        "rucDialogInput": {},
+        "hasDependentFields": false,
+        "dependentFieldParentId": "any",
+        "dependentFields": "any",
+        "toolTipDescription": "none",
+        "showErrorOnPopUp": true,
+        "groupOptions": [
+          {
+            "id": "Winter",
+            "name": "Winter",
+            "value": ""
+          },
+          {
+            "id": "Spring",
+            "name": "Spring",
+            "value": ""
+          },
+          {
+            "id": "Summer",
+            "name": "Summer",
+            "value": ""
+          },
+          {
+            "id": "Autumn",
+            "name": "Autumn",
+            "value": ""
+          }
+        ]
+      },
+      {
+        "formType": "simple",
+        "fieldType": "checkbox",
+        "inputType": "checkbox",
+        "id": "radio",
+        "name": "radio",
+        "label": "Checkbox configuration",
+        "className": "checkbox",
+        "value": "",
+        "alt": "na",
+        "appearance": "outline",
+        "min": "4",
+        "max": "20",
+        "width": "100",
+        "height": "20",
+        "checked": false,
+        "disabled": false,
+        "maxlength": "100",
+        "readonly": false,
+        "required": true,
+        "size": "100",
+        "step": 100,
+        "sameRow": false,
+        "sameRowColumnWidth": "100",
+        "tooltip": "Checkpoint",
+        "tooltipPosition": "above",
+        "pattern": "any",
+        "placeholder": "",
+        "autofocus": true,
+        "autocomplete": false,
+        "customComponentName": "none",
+        "rucDialogInput": {},
+        "hasDependentFields": false,
+        "dependentFieldParentId": "any",
+        "dependentFields": "any",
+        "toolTipDescription": "none",
+        "error": false,
+        "customErrorMessage": "invalid selection",
+        "showErrorOnPopUp": true,
+        "groupOptions": [
+          {
+            "id": "Winter",
+            "name": "Winter",
+            "value": "Winter"
+          },
+          {
+            "id": "Spring",
+            "name": "Spring",
+            "value": "Spring"
+          },
+          {
+            "id": "Summer",
+            "name": "Summer",
+            "value": "Summer"
+          },
+          {
+            "id": "Autumn",
+            "name": "Autumn",
+            "value": "Autumn"
+          }
+        ]
+      },
+      {
+        "formType": "simple",
+        "fieldType": "select",
+        "inputType": "select",
+        "id": "select",
+        "name": "select",
+        "label": "select configuration",
+        "className": "select",
+        "value": "",
+        "alt": "na",
+        "appearance": "outline",
+        "min": "4",
+        "max": "20",
+        "width": "100",
+        "height": "20",
+        "checked": false,
+        "disabled": false,
+        "maxlength": "100",
+        "readonly": false,
+        "required": true,
+        "size": "100",
+        "step": 100,
+        "sameRow": true,
+        "tooltip": "select",
+        "tooltipPosition": "below",
+        "sameRowColumnWidth": "100",
+        "pattern": "any",
+        "placeholder": "",
+        "autofocus": true,
+        "autocomplete": false,
+        "customComponentName": "none",
+        "rucDialogInput": {},
+        "hasDependentFields": true,
+        "toolTipDescription": "none",
+        "error": false,
+        "customErrorMessage": "Invalid select option",
+        "showErrorOnPopUp": true,
+        "hasRadioGroup": false,
+        "hasCheckBoxGroup": false,
+        "hasSelectOptions": true,
+        "groupOptions": [
+          {
+            "id": "w11",
+            "name": "Winter",
+            "value": "Winter"
+          },
+          {
+            "id": "s1",
+            "name": "Spring",
+            "value": "Spring"
+          },
+          {
+            "id": "su1",
+            "name": "Summer",
+            "value": "Summer",
+            "disable": true
+          },
+          {
+            "id": "a1",
+            "name": "Autumn",
+            "value": "Autumn"
+          }
+        ],
+        "dependentFields":
+          [
+            {
+              "formType": "simple",
+              "fieldType": "input",
+              "inputType": "text",
+              "id": "w1",
+              "name": "w1",
+              "error": false,
+              "label": "Winter Name",
+              "className": "winter",
+              "value": "",
+              "alt": "na",
+              "appearance": "outline",
+              "min": "4",
+              "max": "20",
+              "width": "50%",
+              "height": "20",
+              "checked": false,
+              "disabled": false,
+              "maxlength": "100",
+              "readonly": false,
+              "required": false,
+              "size": "100",
+              "step": 100,
+              "pattern": "any",
+              "placeholder": "w1 Name",
+              "autofocus": false,
+              "autocomplete": "",
+              "customComponentName": "none",
+              "rucDialogInput": {},
+              "hasDependentFields": false,
+              "dependentFieldParentId": "w11",
+              "dependentFields": "any",
+              "toolTipDescription": "none",
+              "showErrorOnPopUp": true,
+              "groupOptions": []
+            },
+            {
+              "formType": "simple",
+              "fieldType": "input",
+              "inputType": "text",
+              "id": "a11",
+              "name": "a11",
+              "error": false,
+              "label": "Autumn Name",
+              "className": "Autumn",
+              "value": "",
+              "alt": "na",
+              "appearance": "outline",
+              "min": "4",
+              "max": "20",
+              "width": "50%",
+              "height": "20",
+              "checked": false,
+              "disabled": false,
+              "maxlength": "100",
+              "readonly": false,
+              "required": false,
+              "size": "100",
+              "step": 100,
+              "pattern": "any",
+              "placeholder": "Autumn Name",
+              "autofocus": false,
+              "autocomplete": "",
+              "customComponentName": "none",
+              "rucDialogInput": {},
+              "hasDependentFields": false,
+              "dependentFieldParentId": "a1",
+              "dependentFields": "any",
+              "toolTipDescription": "none",
+              "showErrorOnPopUp": true,
+              "groupOptions": []
+            }]
+
+      },
+      {
+        "formType": "simple",
+        "fieldType": "select",
+        "inputType": "select",
+        "id": "country",
+        "name": "select",
+        "label": "select Country",
+        "className": "select",
+        "value": "",
+        "alt": "na",
+        "min": "4",
+        "max": "20",
+        "width": "50%",
+        "size": "100",
+        "height": "20",
+        "appearance": "outline",
+        "autofocus": true,
+        "autocomplete": false,
+        "sameRow": false,
+        "sameRowColumnWidth": "100",
+        "tooltip": "select",
+        "tooltipPosition": "above",
+        "rucDialogInput": {},
+        "hasDependentFields": true,
+        "error": false,
+        "customErrorMessage": "Invalid select option",
+        "showErrorOnPopUp": true,
+        "hasSelectOptions": true,
+        "groupOptions": [
+          {
+            "id": "ind1",
+            "name": "India",
+            "value": "India"
+          },
+          {
+            "id": "usa1",
+            "name": "USA",
+            "value": "USA"
+          },
+          {
+            "id": "uk1",
+            "name": "UK",
+            "value": "UK"
+          },
+          {
+            "id": "ch1",
+            "name": "Chaina",
+            "value": "Chaina"
+          }
+        ],
+        "dependentFields": [
+          {
+            "formType": "simple",
+            "fieldType": "select",
+            "inputType": "select",
+            "id": "indianState",
+            "name": "select",
+            "label": "select State",
+            "className": "select",
+            "value": "",
+            "appearance": "outline",
+            "hasDependentFields": true,
+            "hasSelectOptions": true,
+            "dependentFieldParentId": "ind1",
+            "groupOptions": [
+              {
+                "id": "mp1",
+                "name": "MP",
+                "value": "MP"
+              },
+              {
+                "id": "up1",
+                "name": "UP",
+                "value": "UP"
+              },
+              {
+                "id": "pb1",
+                "name": "PB",
+                "value": "PB"
+              }
+            ],
+            "dependentFields": [
+              {
+                "formType": "simple",
+                "fieldType": "select",
+                "inputType": "select",
+                "id": "mpCity",
+                "name": "select",
+                "label": "select City",
+                "className": "select",
+                "appearance": "outline",
+                "value": "",
+                "hasDependentFields": false,
+                "hasSelectOptions": true,
+                "dependentFieldParentId": "mp1",
+                "groupOptions": [
+                  {
+                    "id": "indre1",
+                    "name": "INDORE",
+                    "value": "INDORE"
+                  },
+                  {
+                    "id": "bh1",
+                    "name": "bhopal",
+                    "value": "bhopal"
+                  }
+                ],
+                "dependentFields": [
+
+                ]
+              },
+              {
+                "formType": "simple",
+                "fieldType": "select",
+                "inputType": "select",
+                "id": "upcity",
+                "name": "select",
+                "appearance": "outline",
+                "label": "select City",
+                "className": "select",
+                "value": "",
+                "hasDependentFields": false,
+                "hasSelectOptions": true,
+                "dependentFieldParentId": "up1",
+                "groupOptions": [
+                  {
+                    "id": "m1",
+                    "name": "Mathura",
+                    "value": "Mathura"
+                  },
+                  {
+                    "id": "v1",
+                    "name": "Vrindavan",
+                    "value": "Vrindavan"
+                  }
+                ],
+                "dependentFields": [
+
+                ]
+              }
+            ]
+          },
+          {
+            "formType": "simple",
+            "fieldType": "select",
+            "inputType": "select",
+            "id": "usaState",
+            "name": "select",
+            "appearance": "outline",
+            "label": "select State",
+            "className": "select",
+            "value": "",
+            "hasDependentFields": true,
+            "hasSelectOptions": true,
+            "dependentFieldParentId": "usa1",
+            "groupOptions": [
+              {
+                "id": "p1",
+                "name": "Phenix",
+                "value": "Phenix"
+              },
+              {
+                "id": "v1",
+                "name": "Vasingtan",
+                "value": "Vasingtan"
+              }
+            ],
+            "dependentFields": [
+              {
+                "formType": "simple",
+                "fieldType": "select",
+                "inputType": "select",
+                "id": "phinexCity",
+                "name": "select",
+                "appearance": "outline",
+                "label": "select City",
+                "className": "select",
+                "value": "",
+                "hasDependentFields": false,
+                "hasSelectOptions": true,
+                "dependentFieldParentId": "p1",
+                "groupOptions": [
+                  {
+                    "id": "p11",
+                    "name": "p111",
+                    "value": "p111"
+                  },
+                  {
+                    "id": "p2",
+                    "name": "p222",
+                    "value": "p222"
+                  }
+                ],
+                "dependentFields": [
+
+                ]
+              },
+              {
+                "formType": "simple",
+                "fieldType": "select",
+                "inputType": "select",
+                "id": "vashigtonCity",
+                "name": "select",
+                "appearance": "outline",
+                "label": "select City",
+                "className": "select",
+                "value": "",
+                "hasDependentFields": false,
+                "hasSelectOptions": true,
+                "dependentFieldParentId": "v1",
+                "groupOptions": [
+                  {
+                    "id": "v11",
+                    "name": "v111",
+                    "value": "v111"
+                  },
+                  {
+                    "id": "v2",
+                    "name": "v222",
+                    "value": "v222"
+                  }
+                ],
+                "dependentFields": [
+
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    ],
+    customTheme: '',
+    isChild: false,
+  },
+};