@genesislcap/foundation-forms 14.108.0 → 14.109.1-alpha-cf055218219.0

package/README.md

@@ -525,6 +525,181 @@ const groupUISchema = {
 };
 ```
 
+#### 7. Stepper Layout
+
+Stepper layout allows you to create more complex forms that can be divided into appropriate steps (for example, personal information and address), which will be in separate steps.
+
+It is more complicated when it comes to customisation because it needs proper `jsonSchema` and `uiSchema` so that validation and data saving work properly.
+
+:::info
+Remember to add `hide-submit-button` attribute to `foundation-forms` because in this case submit is built directly into stepper-layout
+:::
+
+```ts
+const uiSchemaStepper = {
+  type: 'Stepper',
+  elements: [
+    {
+      type: 'Step',
+      scope: '#/properties/person',
+      label: 'Entity',
+      options: {
+        childElements: [
+          {
+            type: 'HorizontalLayout',
+            elements: [
+              {
+                type: 'Control',
+                scope: '#/properties/person/properties/firstName',
+              },
+              {
+                type: 'Control',
+                scope: '#/properties/person/properties/secondName',
+              },
+            ],
+          },
+          {
+            type: 'HorizontalLayout',
+            elements: [
+              {
+                type: 'Control',
+                scope: '#/properties/person/properties/birthDate',
+              },
+              {
+                type: 'Control',
+                scope: '#/properties/person/properties/nationality',
+              },
+            ],
+          },
+        ],
+      },
+    },
+    {
+      type: 'Step',
+      label: 'Doc',
+      scope: '#/properties/address',
+      options: {
+        childElements: [
+          {
+            type: 'HorizontalLayout',
+            elements: [
+              {
+                type: 'Control',
+                scope: '#/properties/address/properties/street',
+              },
+              {
+                type: 'Control',
+                scope: '#/properties/address/properties/streetNumber',
+              },
+            ],
+          },
+          {
+            type: 'HorizontalLayout',
+            elements: [
+              {
+                type: 'Control',
+                scope: '#/properties/address/properties/city',
+              },
+              {
+                type: 'Control',
+                scope: '#/properties/address/properties/postalCode',
+              },
+            ],
+          },
+        ],
+      },
+    },
+    {
+      type: 'Step',
+      label: 'Primary doc',
+      scope: '#/properties/vegetarianOptions',
+      options: {
+        childElements: [
+          {
+            type: 'VerticalLayout',
+            elements: [
+              {
+                type: 'Control',
+                scope: '#/properties/vegetarianOptions/properties/favoriteVegetable',
+              },
+              {
+                type: 'Control',
+                scope: '#/properties/vegetarianOptions/properties/otherFavoriteVegetable',
+              },
+            ],
+          },
+        ],
+      },
+    },
+  ],
+};
+```
+
+```ts
+const jsonSchemaStepper = {
+  type: 'object',
+  properties: {
+    person: {
+      type: 'object',
+      properties: {
+        firstName: {
+          type: 'string',
+          minLength: 3,
+          description: 'Please enter your first name',
+        },
+        secondName: {
+          type: 'string',
+          minLength: 3,
+          description: 'Please enter your second name',
+        },
+        birthDate: {
+          type: 'string',
+          format: 'date',
+          description: 'Please enter your birth date.',
+        },
+        nationality: {
+          type: 'string',
+          description: 'Please enter your nationality.',
+        },
+      },
+      required: ['firstName', 'secondName'],
+    },
+    address: {
+      type: 'object',
+      properties: {
+        street: {
+          type: 'string',
+        },
+        streetNumber: {
+          type: 'string',
+        },
+        city: {
+          type: 'string',
+        },
+        postalCode: {
+          type: 'string',
+          maxLength: 5,
+        },
+      },
+      required: ['postalCode'],
+    },
+    vegetarianOptions: {
+      type: 'object',
+      properties: {
+        favoriteVegetable: {
+          type: 'string',
+          enum: ['Tomato', 'Potato', 'Salad', 'Aubergine', 'Cucumber', 'Other'],
+        },
+        otherFavoriteVegetable: {
+          type: 'string',
+        },
+      },
+      required: ['otherFavoriteVegetable'],
+    },
+  },
+};
+```
+
 ### Default control renderers and examples
 
 Most renderers are defined directly in the `jsonSchema` that comes from the server, but there are also those that you can add via `uiSchema`.

package/dist/custom-elements.json

@@ -24,7 +24,7 @@
           "type": {
             "text": "array"
           },
-          "default": "[\n  fallbackEntry,\n  stringEntry,\n  BooleanControlEntry,\n  LayoutArrayRendererEntry,\n  LayoutCategorizationRendererEntry,\n  LayoutGroupRendererEntry,\n  LayoutHorizontalEntry,\n  LayoutVertical2ColumnsEntry,\n  LayoutRendererEntry,\n  NumberControlRendererEntry,\n  ConnectedMultiselectControlRendererEntry,\n  EnumControlRendererEntry,\n  ConnectedSelectControlRendererEntry,\n  DateControlRendererEntry,\n  InvisibleControlEntry,\n]",
+          "default": "[\n  fallbackEntry,\n  stringEntry,\n  BooleanControlEntry,\n  LayoutArrayRendererEntry,\n  LayoutCategorizationRendererEntry,\n  LayoutGroupRendererEntry,\n  LayoutHorizontalEntry,\n  LayoutVertical2ColumnsEntry,\n  LayoutRendererEntry,\n  LayoutStepperRendererEntry,\n  NumberControlRendererEntry,\n  ConnectedMultiselectControlRendererEntry,\n  EnumControlRendererEntry,\n  ConnectedSelectControlRendererEntry,\n  DateControlRendererEntry,\n  InvisibleControlEntry,\n]",
           "privacy": "public"
         },
         {
@@ -66,7 +66,7 @@
               "type": {
                 "text": "RendererEntry[]"
               },
-              "default": "[\n  fallbackEntry,\n  stringEntry,\n  BooleanControlEntry,\n  LayoutArrayRendererEntry,\n  LayoutCategorizationRendererEntry,\n  LayoutGroupRendererEntry,\n  LayoutHorizontalEntry,\n  LayoutVertical2ColumnsEntry,\n  LayoutRendererEntry,\n  NumberControlRendererEntry,\n  ConnectedMultiselectControlRendererEntry,\n  EnumControlRendererEntry,\n  ConnectedSelectControlRendererEntry,\n  DateControlRendererEntry,\n  InvisibleControlEntry,\n]",
+              "default": "[\n  fallbackEntry,\n  stringEntry,\n  BooleanControlEntry,\n  LayoutArrayRendererEntry,\n  LayoutCategorizationRendererEntry,\n  LayoutGroupRendererEntry,\n  LayoutHorizontalEntry,\n  LayoutVertical2ColumnsEntry,\n  LayoutRendererEntry,\n  LayoutStepperRendererEntry,\n  NumberControlRendererEntry,\n  ConnectedMultiselectControlRendererEntry,\n  EnumControlRendererEntry,\n  ConnectedSelectControlRendererEntry,\n  DateControlRendererEntry,\n  InvisibleControlEntry,\n]",
               "description": "Allows to provide set of renderers used by the form. If not provided it will default to text-field inputs",
               "privacy": "public"
             },
@@ -113,9 +113,27 @@
                 "text": "boolean"
               }
             },
+            {
+              "kind": "field",
+              "name": "hideSubmit",
+              "type": {
+                "text": "boolean"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "isSubmitHidden",
+              "readonly": true
+            },
             {
               "kind": "method",
               "name": "reset",
+              "parameters": [
+                {
+                  "name": "clearData",
+                  "default": "true"
+                }
+              ],
               "description": "Reset the form state",
               "privacy": "public"
             },
@@ -245,6 +263,13 @@
                 "text": "boolean"
               },
               "fieldName": "readonly"
+            },
+            {
+              "name": "hide-submit-button",
+              "type": {
+                "text": "boolean"
+              },
+              "fieldName": "hideSubmit"
             }
           ],
           "superclass": {
@@ -1773,6 +1798,43 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/jsonforms/renderers/LayoutStepperRenderer.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "LayoutStepperRendererTemplate",
+          "default": "html`\n  <template>\n    <stepper-wrapper :form=${(x) => x} :control=${(x) => x.control}></stepper-wrapper>\n  </template>\n`"
+        },
+        {
+          "kind": "variable",
+          "name": "LayoutStepperRendererEntry",
+          "type": {
+            "text": "any"
+          },
+          "default": "{\n  renderer: LayoutStepperRendererTemplate,\n  tester: rankWith(LAYOUT_STEPPER_RANK, (uiSchema) => uiSchema.type === 'Stepper'),\n  mapper: mapStateToLayoutProps,\n}"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "LayoutStepperRendererTemplate",
+          "declaration": {
+            "name": "LayoutStepperRendererTemplate",
+            "module": "src/jsonforms/renderers/LayoutStepperRenderer.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "LayoutStepperRendererEntry",
+          "declaration": {
+            "name": "LayoutStepperRendererEntry",
+            "module": "src/jsonforms/renderers/LayoutStepperRenderer.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/jsonforms/renderers/LayoutVertical2ColumnsRenderer.ts",
@@ -1947,6 +2009,14 @@
           },
           "default": "2"
         },
+        {
+          "kind": "variable",
+          "name": "LAYOUT_STEPPER_RANK",
+          "type": {
+            "text": "number"
+          },
+          "default": "3"
+        },
         {
           "kind": "variable",
           "name": "LAYOUT2COLUMNS_RANK",
@@ -2053,6 +2123,14 @@
             "module": "src/jsonforms/renderers/RenderersRanks.ts"
           }
         },
+        {
+          "kind": "js",
+          "name": "LAYOUT_STEPPER_RANK",
+          "declaration": {
+            "name": "LAYOUT_STEPPER_RANK",
+            "module": "src/jsonforms/renderers/RenderersRanks.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "LAYOUT2COLUMNS_RANK",
@@ -2071,6 +2149,102 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/jsonforms/renderers/StepperWrapperRenderer.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "StepperWrapperRendererTemplate",
+          "parameters": [
+            {
+              "name": "prefix",
+              "default": "'zero'"
+            }
+          ]
+        },
+        {
+          "kind": "class",
+          "description": "",
+          "name": "StepperWrapper",
+          "members": [
+            {
+              "kind": "field",
+              "name": "form"
+            },
+            {
+              "kind": "field",
+              "name": "control"
+            },
+            {
+              "kind": "field",
+              "name": "validation",
+              "type": {
+                "text": "Validation[]"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "stepper",
+              "type": {
+                "text": "Stepper"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "propertyNames",
+              "type": {
+                "text": "Array<string>"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "submit"
+            },
+            {
+              "kind": "method",
+              "name": "nextStep"
+            },
+            {
+              "kind": "method",
+              "name": "resetValidation"
+            }
+          ],
+          "superclass": {
+            "name": "FASTElement",
+            "package": "@microsoft/fast-element"
+          },
+          "tagName": "stepper-wrapper",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "StepperWrapperRendererTemplate",
+          "declaration": {
+            "name": "StepperWrapperRendererTemplate",
+            "module": "src/jsonforms/renderers/StepperWrapperRenderer.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "StepperWrapper",
+          "declaration": {
+            "name": "StepperWrapper",
+            "module": "src/jsonforms/renderers/StepperWrapperRenderer.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "stepper-wrapper",
+          "declaration": {
+            "name": "StepperWrapper",
+            "module": "src/jsonforms/renderers/StepperWrapperRenderer.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/jsonforms/renderers/StringControlRenderer.ts",

package/dist/dts/form.d.ts

@@ -89,20 +89,25 @@ export declare class Form extends FoundationElement {
      */
     submitted: boolean;
     readonly: boolean;
+    hideSubmit: boolean;
     /**
      * @internal
      */
     _submit(): Promise<void>;
+    get isSubmitHidden(): boolean;
+    /**
+     * @internal
+     */
+    submitPart(event: CustomEvent): void;
     /**
      * @internal
      */
     onChange(event: CustomEvent): void;
-    connectedCallback(): void;
     disconnectedCallback(): void;
     /**
      * Reset the form state
      * @public
      */
-    reset(): void;
+    reset(clearData?: boolean): void;
 }
 //# sourceMappingURL=form.d.ts.map

package/dist/dts/form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../src/form.ts"],"names":[],"mappings":"AAEA,OAAO,EAKL,eAAe,EAChB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAE/D,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAkB1C,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAExC,gBAAgB;AAChB,eAAO,MAAM,MAAM,iDAAkC,CAAC;AActD,cAAc;AACd,eAAO,MAAM,SAAS,OAgBrB,CAAC;AACF;;;;;GAKG;AAEH,qBAKa,IAAK,SAAQ,iBAAiB;IACzC;;;;OAIG;IACG,YAAY,EAAE,MAAM,CAAC;YACb,mBAAmB;IAQjC,OAAO,CAAC,oBAAoB;IA0B5B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAqCG;IACS,QAAQ,EAAE,eAAe,CAAC;IACtC;;;OAGG;IACS,SAAS,EAAE,aAAa,EAAE,CAAa;IACnD;;;;;;OAMG;IACS,UAAU,EAAE,WAAW,CAAC;IAEpC,OAAO,CAAC,MAAM,CAAqB;IAC1B,OAAO,CAAC,OAAO,CAAW;IACnC;;;OAGG;IACS,IAAI,EAAE,GAAG,CAAM;IAE3B;;OAEG;IACS,UAAU,EAAE,OAAO,CAAC;IAChC;;OAEG;IACS,SAAS,EAAE,OAAO,CAAC;IAEJ,QAAQ,EAAE,OAAO,CAAC;IAE7C;;OAEG;IACG,OAAO;IA2Bb;;OAEG;IACH,QAAQ,CAAC,KAAK,EAAE,WAAW;IAQ3B,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB;IAMpB;;;OAGG;IACH,KAAK;CAIN"}
+{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../src/form.ts"],"names":[],"mappings":"AAEA,OAAO,EAKL,eAAe,EAChB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAE/D,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAmB1C,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAExC,gBAAgB;AAChB,eAAO,MAAM,MAAM,iDAAkC,CAAC;AActD,cAAc;AACd,eAAO,MAAM,SAAS,OAiBrB,CAAC;AACF;;;;;GAKG;AAEH,qBAKa,IAAK,SAAQ,iBAAiB;IACzC;;;;OAIG;IACG,YAAY,EAAE,MAAM,CAAC;YACb,mBAAmB;IAQjC,OAAO,CAAC,oBAAoB;IA0B5B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAqCG;IACS,QAAQ,EAAE,eAAe,CAAC;IACtC;;;OAGG;IACS,SAAS,EAAE,aAAa,EAAE,CAAa;IACnD;;;;;;OAMG;IACS,UAAU,EAAE,WAAW,CAAC;IAEpC,OAAO,CAAC,MAAM,CAAqB;IAC1B,OAAO,CAAC,OAAO,CAAW;IACnC;;;OAGG;IACS,IAAI,EAAE,GAAG,CAAM;IAE3B;;OAEG;IACS,UAAU,EAAE,OAAO,CAAC;IAChC;;OAEG;IACS,SAAS,EAAE,OAAO,CAAC;IAEJ,QAAQ,EAAE,OAAO,CAAC;IACe,UAAU,EAAE,OAAO,CAAC;IAEhF;;OAEG;IACG,OAAO;IA2Bb,IAAc,cAAc,YAM3B;IAED;;OAEG;IACH,UAAU,CAAC,KAAK,EAAE,WAAW;IAI7B;;OAEG;IACH,QAAQ,CAAC,KAAK,EAAE,WAAW;IAQ3B,oBAAoB;IAKpB;;;OAGG;IACH,KAAK,CAAC,SAAS,UAAO;CAMvB"}

package/dist/dts/form.template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form.template.d.ts","sourceRoot":"","sources":["../../src/form.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAanC,gBAAgB;AAChB,eAAO,MAAM,sBAAsB,2DA2BlC,CAAC"}
+{"version":3,"file":"form.template.d.ts","sourceRoot":"","sources":["../../src/form.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAenC,gBAAgB;AAChB,eAAO,MAAM,sBAAsB,2DA8BlC,CAAC"}

package/dist/dts/jsonforms/renderers/LayoutStepperRenderer.d.ts

@@ -0,0 +1,3 @@
+export declare const LayoutStepperRendererTemplate: import("@microsoft/fast-element").ViewTemplate<any, any>;
+export declare const LayoutStepperRendererEntry: any;
+//# sourceMappingURL=LayoutStepperRenderer.d.ts.map

package/dist/dts/jsonforms/renderers/LayoutStepperRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutStepperRenderer.d.ts","sourceRoot":"","sources":["../../../../src/jsonforms/renderers/LayoutStepperRenderer.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,6BAA6B,0DAIzC,CAAC;AAEF,eAAO,MAAM,0BAA0B,EAAE,GAIxC,CAAC"}

package/dist/dts/jsonforms/renderers/RenderersRanks.d.ts

@@ -9,6 +9,7 @@ export declare const LAYOUT_ARRAY_RANK = 2;
 export declare const LAYOUT_CATEGORIZATION_RANK = 2;
 export declare const LAYOUT_GROUP_RANK = 2;
 export declare const LAYOUT_HORIZONTAL_RANK = 2;
+export declare const LAYOUT_STEPPER_RANK = 3;
 export declare const LAYOUT2COLUMNS_RANK = 2;
 export declare const INVISIBLE_CONTROL_RANK = 5;
 //# sourceMappingURL=RenderersRanks.d.ts.map

package/dist/dts/jsonforms/renderers/RenderersRanks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RenderersRanks.d.ts","sourceRoot":"","sources":["../../../../src/jsonforms/renderers/RenderersRanks.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,mBAAmB,IAAI,CAAC;AACrC,eAAO,MAAM,oBAAoB,IAAI,CAAC;AACtC,eAAO,MAAM,wBAAwB,IAAI,CAAC;AAC1C,eAAO,MAAM,iBAAiB,IAAI,CAAC;AACnC,eAAO,MAAM,mBAAmB,IAAI,CAAC;AACrC,eAAO,MAAM,iBAAiB,IAAI,CAAC;AACnC,eAAO,MAAM,WAAW,IAAI,CAAC;AAC7B,eAAO,MAAM,iBAAiB,IAAI,CAAC;AACnC,eAAO,MAAM,0BAA0B,IAAI,CAAC;AAC5C,eAAO,MAAM,iBAAiB,IAAI,CAAC;AACnC,eAAO,MAAM,sBAAsB,IAAI,CAAC;AACxC,eAAO,MAAM,mBAAmB,IAAI,CAAC;AACrC,eAAO,MAAM,sBAAsB,IAAI,CAAC"}
+{"version":3,"file":"RenderersRanks.d.ts","sourceRoot":"","sources":["../../../../src/jsonforms/renderers/RenderersRanks.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,mBAAmB,IAAI,CAAC;AACrC,eAAO,MAAM,oBAAoB,IAAI,CAAC;AACtC,eAAO,MAAM,wBAAwB,IAAI,CAAC;AAC1C,eAAO,MAAM,iBAAiB,IAAI,CAAC;AACnC,eAAO,MAAM,mBAAmB,IAAI,CAAC;AACrC,eAAO,MAAM,iBAAiB,IAAI,CAAC;AACnC,eAAO,MAAM,WAAW,IAAI,CAAC;AAC7B,eAAO,MAAM,iBAAiB,IAAI,CAAC;AACnC,eAAO,MAAM,0BAA0B,IAAI,CAAC;AAC5C,eAAO,MAAM,iBAAiB,IAAI,CAAC;AACnC,eAAO,MAAM,sBAAsB,IAAI,CAAC;AACxC,eAAO,MAAM,mBAAmB,IAAI,CAAC;AACrC,eAAO,MAAM,mBAAmB,IAAI,CAAC;AACrC,eAAO,MAAM,sBAAsB,IAAI,CAAC"}

package/dist/dts/jsonforms/renderers/StepperWrapperRenderer.d.ts

@@ -0,0 +1,15 @@
+import { Stepper, Validation } from '@genesislcap/foundation-ui';
+import { FASTElement } from '@microsoft/fast-element';
+export declare const StepperWrapperRendererTemplate: (prefix?: string) => import("@microsoft/fast-element").ViewTemplate<StepperWrapper, any>;
+export declare class StepperWrapper extends FASTElement {
+    form: any;
+    control: any;
+    validation: Validation[];
+    stepper: Stepper;
+    propertyNames: Array<string>;
+    connectedCallback(): void;
+    submit(): void;
+    nextStep(): void;
+    resetValidation(): void;
+}
+//# sourceMappingURL=StepperWrapperRenderer.d.ts.map

package/dist/dts/jsonforms/renderers/StepperWrapperRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepperWrapperRenderer.d.ts","sourceRoot":"","sources":["../../../../src/jsonforms/renderers/StepperWrapperRenderer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAEjE,OAAO,EAKL,WAAW,EAGZ,MAAM,yBAAyB,CAAC;AAEjC,eAAO,MAAM,8BAA8B,0FA2C1C,CAAC;AAUF,qBAOa,cAAe,SAAQ,WAAW;IACjC,IAAI,MAAC;IACL,OAAO,MAAC;IACR,UAAU,EAAE,UAAU,EAAE,CAAC;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,aAAa,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAEzC,iBAAiB,IAAI,IAAI;IAezB,MAAM;IAIN,QAAQ;IAcR,eAAe;CAGhB"}

package/dist/esm/form.js

@@ -2,7 +2,7 @@ import { __awaiter, __decorate } from "tslib";
 import { Connect } from '@genesislcap/foundation-comms';
 import { createLogger } from '@genesislcap/foundation-logger';
 import { isControl, isStringControl, mapStateToControlProps, rankWith, } from '@jsonforms/core';
-import { attr, customElement, DOM, observable } from '@microsoft/fast-element';
+import { attr, customElement, DOM, observable, volatile } from '@microsoft/fast-element';
 import { FoundationElement } from '@microsoft/fast-foundation';
 import { foundationFormStyles as styles } from './form.styles';
 import { foundationFormTemplate as template } from './form.template';
@@ -17,6 +17,7 @@ import { LayoutCategorizationRendererEntry } from './jsonforms/renderers/LayoutC
 import { LayoutGroupRendererEntry } from './jsonforms/renderers/LayoutGroupRenderer';
 import { LayoutHorizontalEntry } from './jsonforms/renderers/LayoutHorizontalRenderer';
 import { LayoutRendererEntry } from './jsonforms/renderers/LayoutRenderer';
+import { LayoutStepperRendererEntry } from './jsonforms/renderers/LayoutStepperRenderer';
 import { LayoutVertical2ColumnsEntry } from './jsonforms/renderers/LayoutVertical2ColumnsRenderer';
 import { NumberControlRendererEntry } from './jsonforms/renderers/NumberControlRenderer';
 import { StringControlRendererTemplate } from './jsonforms/renderers/StringControlRenderer';
@@ -43,6 +44,7 @@ export const renderers = [
     LayoutHorizontalEntry,
     LayoutVertical2ColumnsEntry,
     LayoutRendererEntry,
+    LayoutStepperRendererEntry,
     NumberControlRendererEntry,
     ConnectedMultiselectControlRendererEntry,
     EnumControlRendererEntry,
@@ -129,6 +131,20 @@ let Form = class Form extends FoundationElement {
             }
         });
     }
+    get isSubmitHidden() {
+        if (this.readonly || this.hideSubmit) {
+            return false;
+        }
+        else {
+            return true;
+        }
+    }
+    /**
+     * @internal
+     */
+    submitPart(event) {
+        this.submitted = true;
+    }
     /**
      * @internal
      */
@@ -139,22 +155,19 @@ let Form = class Form extends FoundationElement {
             this.errors = event.detail.errors;
         }
     }
-    connectedCallback() {
-        super.connectedCallback();
-        this.addEventListener('submit-button-clicked', this._submit);
-    }
     disconnectedCallback() {
         super.disconnectedCallback();
-        this.removeEventListener('submit-button-clicked', this._submit);
         this.reset();
     }
     /**
      * Reset the form state
      * @public
      */
-    reset() {
+    reset(clearData = true) {
         this.submitted = false;
-        this.data = {};
+        if (clearData) {
+            this.data = {};
+        }
     }
 };
 __decorate([
@@ -184,6 +197,12 @@ __decorate([
 __decorate([
     attr({ mode: 'boolean' })
 ], Form.prototype, "readonly", void 0);
+__decorate([
+    attr({ attribute: 'hide-submit-button', mode: 'boolean' })
+], Form.prototype, "hideSubmit", void 0);
+__decorate([
+    volatile
+], Form.prototype, "isSubmitHidden", null);
 Form = __decorate([
     customElement({
         name: 'foundation-form',

package/dist/esm/form.template.js

@@ -4,15 +4,20 @@ import { ArrayListWrapper } from './jsonforms/renderers/ArrayListWrapperRenderer
 import { CategorizationWrapper } from './jsonforms/renderers/CategorizationWrapperRenderer';
 import { ControlWrapper } from './jsonforms/renderers/ControlWrapperRenderer';
 import { DispatchRenderer } from './jsonforms/renderers/dispatch-renderer';
+import { StepperWrapper } from './jsonforms/renderers/StepperWrapperRenderer';
 JSONForms;
 ArrayListWrapper;
 CategorizationWrapper;
 ControlWrapper;
 DispatchRenderer;
+StepperWrapper;
 /** @internal */
 export const foundationFormTemplate = html `
   <template>
     <json-forms
+      @submit-button-clicked=${(x) => x._submit()}
+      @submit-part=${(x, c) => x.submitPart(c.event)}
+      @reset-form=${(x) => x.reset(false)}
       ?readonly=${(x) => x.readonly}
       ?submitted=${(x) => x.submitted}
       :renderers=${(x) => x.renderers}
@@ -21,7 +26,7 @@ export const foundationFormTemplate = html `
       :data=${(x) => x.data}
       @data-change=${(x, c) => x.onChange(c.event)}
     ></json-forms>
-    ${when((x) => !x.readonly, html `
+    ${when((x) => x.isSubmitHidden, html `
         <slot name="userActions" part="userActions" class="actions">
           <fast-button
             @click="${(x) => x._submit()}"

package/dist/esm/jsonforms/renderers/LayoutStepperRenderer.js

@@ -0,0 +1,13 @@
+import { mapStateToLayoutProps, rankWith } from '@jsonforms/core';
+import { html } from '@microsoft/fast-element';
+import { LAYOUT_STEPPER_RANK } from './RenderersRanks';
+export const LayoutStepperRendererTemplate = html `
+  <template>
+    <stepper-wrapper :form=${(x) => x} :control=${(x) => x.control}></stepper-wrapper>
+  </template>
+`;
+export const LayoutStepperRendererEntry = {
+    renderer: LayoutStepperRendererTemplate,
+    tester: rankWith(LAYOUT_STEPPER_RANK, (uiSchema) => uiSchema.type === 'Stepper'),
+    mapper: mapStateToLayoutProps,
+};

package/dist/esm/jsonforms/renderers/RenderersRanks.js

@@ -9,5 +9,6 @@ export const LAYOUT_ARRAY_RANK = 2;
 export const LAYOUT_CATEGORIZATION_RANK = 2;
 export const LAYOUT_GROUP_RANK = 2;
 export const LAYOUT_HORIZONTAL_RANK = 2;
+export const LAYOUT_STEPPER_RANK = 3;
 export const LAYOUT2COLUMNS_RANK = 2;
 export const INVISIBLE_CONTROL_RANK = 5;

package/dist/esm/jsonforms/renderers/StepperWrapperRenderer.js

@@ -0,0 +1,96 @@
+import { __decorate } from "tslib";
+import { getSubErrorsAt } from '@jsonforms/core';
+import { html, css, observable, customElement, FASTElement, repeat, ref, } from '@microsoft/fast-element';
+export const StepperWrapperRendererTemplate = (prefix = 'zero') => html `
+  <template>
+    <${prefix}-stepper 
+      class="tabs-container" 
+      ${ref('stepper')} 
+      @next-step=${(x) => x.nextStep()}
+      @validation-success=${(x) => x.resetValidation()} 
+      @submit=${(x) => x.submit()} 
+      :validation=${(x) => x.validation}>
+      ${repeat((x) => x.control.uischema.elements, html `
+          <${prefix}-stepper-tab class="tab-control">${(x, ctx) => { var _a; return (_a = x.label) !== null && _a !== void 0 ? _a : `Step ${ctx.index + 1}`; }}</${prefix}-stepper-tab>
+        `, { positioning: true })}
+      ${repeat((x) => x.control.uischema.elements, html `
+          <${prefix}-stepper-tab-panel class="tab-panel-control">
+            ${repeat((x) => x.options.childElements, html `
+                <dispatch-renderer
+                  ?submitted=${(x, ctx) => ctx.parentContext.parent.form.submitted}
+                  :dispatch=${(x, ctx) => ctx.parentContext.parent.form.dispatch}
+                  :jsonforms=${(x, ctx) => ctx.parentContext.parent.form.jsonforms}
+                  :props=${(x, ctx) => ({
+    uischema: x,
+    schema: ctx.parentContext.parent.control.schema,
+    renderers: ctx.parentContext.parent.control.renderers,
+    path: ctx.parentContext.parent.control.path,
+    enabled: ctx.parentContext.parent.control.enabled,
+})}
+                ></dispatch-renderer>
+              `)}
+          </${prefix}-stepper-tab-panel>
+        `)}
+    </${prefix}-stepper>
+  </template>
+`;
+const styles = css `
+  .tabs-container::part(stepper-panel-container) {
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+  }
+`;
+let StepperWrapper = class StepperWrapper extends FASTElement {
+    connectedCallback() {
+        super.connectedCallback();
+        this.propertyNames = this.control.uischema.elements.map((element) => {
+            const splitedScope = element.scope.split('/');
+            return splitedScope.pop();
+        });
+        this.validation = this.propertyNames.map((propertyName, index) => ({
+            isValid: () => getSubErrorsAt(propertyName, this.control.schema)(this.form).length === 0 &&
+                Object.keys(this.control.data)[index] === propertyName,
+        }));
+    }
+    submit() {
+        this.$emit('submit-button-clicked');
+    }
+    nextStep() {
+        this.$emit('submit-part');
+        const currentProperty = this.propertyNames[this.stepper.activeTabIndex];
+        if (!this.control.data[currentProperty]) {
+            this.$emit('data-change', {
+                data: Object.assign(Object.assign({}, this.control.data), { [currentProperty]: {} }),
+            });
+        }
+    }
+    resetValidation() {
+        this.$emit('reset-form');
+    }
+};
+__decorate([
+    observable
+], StepperWrapper.prototype, "form", void 0);
+__decorate([
+    observable
+], StepperWrapper.prototype, "control", void 0);
+__decorate([
+    observable
+], StepperWrapper.prototype, "validation", void 0);
+__decorate([
+    observable
+], StepperWrapper.prototype, "stepper", void 0);
+__decorate([
+    observable
+], StepperWrapper.prototype, "propertyNames", void 0);
+StepperWrapper = __decorate([
+    customElement({
+        name: 'stepper-wrapper',
+        styles,
+        template: html `
+    ${(x) => StepperWrapperRendererTemplate(x.form.prefix)}
+  `,
+    })
+], StepperWrapper);
+export { StepperWrapper };

package/dist/foundation-forms.api.json

@@ -560,14 +560,44 @@
           "name": "Form",
           "preserveMemberOrder": false,
           "members": [
+            {
+              "kind": "Property",
+              "canonicalReference": "@genesislcap/foundation-forms!Form#data:member",
+              "docComment": "/**\n * Initial data for the form\n *\n * @public\n */\n",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "data: "
+                },
+                {
+                  "kind": "Content",
+                  "text": "any"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isReadonly": false,
+              "isOptional": false,
+              "releaseTag": "Public",
+              "name": "data",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              },
+              "isStatic": false,
+              "isProtected": false,
+              "isAbstract": false
+            },
             {
               "kind": "Method",
-              "canonicalReference": "@genesislcap/foundation-forms!Form#connectedCallback:member(1)",
+              "canonicalReference": "@genesislcap/foundation-forms!Form#disconnectedCallback:member(1)",
               "docComment": "",
               "excerptTokens": [
                 {
                   "kind": "Content",
-                  "text": "connectedCallback(): "
+                  "text": "disconnectedCallback(): "
                 },
                 {
                   "kind": "Content",
@@ -589,20 +619,20 @@
               "parameters": [],
               "isOptional": false,
               "isAbstract": false,
-              "name": "connectedCallback"
+              "name": "disconnectedCallback"
             },
             {
               "kind": "Property",
-              "canonicalReference": "@genesislcap/foundation-forms!Form#data:member",
-              "docComment": "/**\n * Initial data for the form\n *\n * @public\n */\n",
+              "canonicalReference": "@genesislcap/foundation-forms!Form#hideSubmit:member",
+              "docComment": "",
               "excerptTokens": [
                 {
                   "kind": "Content",
-                  "text": "data: "
+                  "text": "hideSubmit: "
                 },
                 {
                   "kind": "Content",
-                  "text": "any"
+                  "text": "boolean"
                 },
                 {
                   "kind": "Content",
@@ -611,8 +641,8 @@
               ],
               "isReadonly": false,
               "isOptional": false,
-              "releaseTag": "Public",
-              "name": "data",
+              "releaseTag": "Beta",
+              "name": "hideSubmit",
               "propertyTypeTokenRange": {
                 "startIndex": 1,
                 "endIndex": 2
@@ -622,35 +652,34 @@
               "isAbstract": false
             },
             {
-              "kind": "Method",
-              "canonicalReference": "@genesislcap/foundation-forms!Form#disconnectedCallback:member(1)",
+              "kind": "Property",
+              "canonicalReference": "@genesislcap/foundation-forms!Form#isSubmitHidden:member",
               "docComment": "",
               "excerptTokens": [
                 {
                   "kind": "Content",
-                  "text": "disconnectedCallback(): "
+                  "text": "get isSubmitHidden(): "
                 },
                 {
                   "kind": "Content",
-                  "text": "void"
+                  "text": "boolean"
                 },
                 {
                   "kind": "Content",
                   "text": ";"
                 }
               ],
-              "isStatic": false,
-              "returnTypeTokenRange": {
+              "isReadonly": true,
+              "isOptional": false,
+              "releaseTag": "Beta",
+              "name": "isSubmitHidden",
+              "propertyTypeTokenRange": {
                 "startIndex": 1,
                 "endIndex": 2
               },
-              "releaseTag": "Beta",
+              "isStatic": false,
               "isProtected": false,
-              "overloadIndex": 1,
-              "parameters": [],
-              "isOptional": false,
-              "isAbstract": false,
-              "name": "disconnectedCallback"
+              "isAbstract": false
             },
             {
               "kind": "Property",
@@ -755,7 +784,15 @@
               "excerptTokens": [
                 {
                   "kind": "Content",
-                  "text": "reset(): "
+                  "text": "reset(clearData?: "
+                },
+                {
+                  "kind": "Content",
+                  "text": "boolean"
+                },
+                {
+                  "kind": "Content",
+                  "text": "): "
                 },
                 {
                   "kind": "Content",
@@ -768,13 +805,22 @@
               ],
               "isStatic": false,
               "returnTypeTokenRange": {
-                "startIndex": 1,
-                "endIndex": 2
+                "startIndex": 3,
+                "endIndex": 4
               },
               "releaseTag": "Public",
               "isProtected": false,
               "overloadIndex": 1,
-              "parameters": [],
+              "parameters": [
+                {
+                  "parameterName": "clearData",
+                  "parameterTypeTokenRange": {
+                    "startIndex": 1,
+                    "endIndex": 2
+                  },
+                  "isOptional": true
+                }
+              ],
               "isOptional": false,
               "isAbstract": false,
               "name": "reset"

package/dist/foundation-forms.d.ts

@@ -223,21 +223,26 @@ export declare class Form extends FoundationElement {
      */
     submitted: boolean;
     readonly: boolean;
+    hideSubmit: boolean;
     /**
      * @internal
      */
     _submit(): Promise<void>;
+    get isSubmitHidden(): boolean;
+    /**
+     * @internal
+     */
+    submitPart(event: CustomEvent): void;
     /**
      * @internal
      */
     onChange(event: CustomEvent): void;
-    connectedCallback(): void;
     disconnectedCallback(): void;
     /**
      * Reset the form state
      * @public
      */
-    reset(): void;
+    reset(clearData?: boolean): void;
 }
 
 /** @internal */

package/docs/api/{foundation-forms.form.connectedcallback.md → foundation-forms.form.hidesubmit.md}

@@ -1,8 +1,8 @@
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-[Home](./index.md) &gt; [@genesislcap/foundation-forms](./foundation-forms.md) &gt; [Form](./foundation-forms.form.md) &gt; [connectedCallback](./foundation-forms.form.connectedcallback.md)
+[Home](./index.md) &gt; [@genesislcap/foundation-forms](./foundation-forms.md) &gt; [Form](./foundation-forms.form.md) &gt; [hideSubmit](./foundation-forms.form.hidesubmit.md)
 
-## Form.connectedCallback() method
+## Form.hideSubmit property
 
 > This API is provided as a beta preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
 > 
@@ -10,9 +10,5 @@
 **Signature:**
 
 ```typescript
-connectedCallback(): void;
+hideSubmit: boolean;
 ```
-**Returns:**
-
-void
-

package/docs/api/foundation-forms.form.issubmithidden.md

@@ -0,0 +1,14 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@genesislcap/foundation-forms](./foundation-forms.md) &gt; [Form](./foundation-forms.form.md) &gt; [isSubmitHidden](./foundation-forms.form.issubmithidden.md)
+
+## Form.isSubmitHidden property
+
+> This API is provided as a beta preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
+> 
+
+**Signature:**
+
+```typescript
+get isSubmitHidden(): boolean;
+```

package/docs/api/foundation-forms.form.md

@@ -21,6 +21,8 @@ export declare class Form extends FoundationElement
 |  Property | Modifiers | Type | Description |
 |  --- | --- | --- | --- |
 |  [data](./foundation-forms.form.data.md) |  | any | Initial data for the form |
+|  [hideSubmit](./foundation-forms.form.hidesubmit.md) |  | boolean | **_(BETA)_** |
+|  [isSubmitHidden](./foundation-forms.form.issubmithidden.md) | <code>readonly</code> | boolean | **_(BETA)_** |
 |  [jsonSchema](./foundation-forms.form.jsonschema.md) |  | JSONSchema7 | Alternatively to providing [Form.resourceName](./foundation-forms.form.resourcename.md) you can hardcode the JSON schema on the client. |
 |  [readonly](./foundation-forms.form.readonly.md) |  | boolean | **_(BETA)_** |
 |  [renderers](./foundation-forms.form.renderers.md) |  | [RendererEntry](./foundation-forms.rendererentry.md)<!-- -->\[\] | Allows to provide set of renderers used by the form. If not provided it will default to text-field inputs |
@@ -31,7 +33,6 @@ export declare class Form extends FoundationElement
 
 |  Method | Modifiers | Description |
 |  --- | --- | --- |
-|  [connectedCallback()](./foundation-forms.form.connectedcallback.md) |  | **_(BETA)_** |
 |  [disconnectedCallback()](./foundation-forms.form.disconnectedcallback.md) |  | **_(BETA)_** |
-|  [reset()](./foundation-forms.form.reset.md) |  | Reset the form state |
+|  [reset(clearData)](./foundation-forms.form.reset.md) |  | Reset the form state |
 

package/docs/api/foundation-forms.form.reset.md

@@ -9,8 +9,15 @@ Reset the form state
 **Signature:**
 
 ```typescript
-reset(): void;
+reset(clearData?: boolean): void;
 ```
+
+## Parameters
+
+|  Parameter | Type | Description |
+|  --- | --- | --- |
+|  clearData | boolean | _(Optional)_ |
+
 **Returns:**
 
 void

package/docs/api-report.md

@@ -61,12 +61,14 @@ export const filtersRenderers: any[];
 
 // @beta
 export class Form extends FoundationElement {
-    // (undocumented)
-    connectedCallback(): void;
     // @public
     data: any;
     // (undocumented)
     disconnectedCallback(): void;
+    // (undocumented)
+    hideSubmit: boolean;
+    // (undocumented)
+    get isSubmitHidden(): boolean;
     // @public
     jsonSchema: JSONSchema7;
     // @internal (undocumented)
@@ -76,12 +78,14 @@ export class Form extends FoundationElement {
     // @public
     renderers: RendererEntry[];
     // @public
-    reset(): void;
+    reset(clearData?: boolean): void;
     // @public
     resourceName: string;
     // @internal (undocumented)
     _submit(): Promise<void>;
     // @internal (undocumented)
+    submitPart(event: CustomEvent): void;
+    // @internal (undocumented)
     submitted: boolean;
     // @internal (undocumented)
     submitting: boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/foundation-forms",
   "description": "Genesis Foundation Forms",
-  "version": "14.108.0",
+  "version": "14.109.1-alpha-cf055218219.0",
   "sideEffects": false,
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/esm/index.js",
@@ -40,16 +40,16 @@
     "test:debug": "genx test --debug"
   },
   "devDependencies": {
-    "@genesislcap/foundation-testing": "14.108.0",
-    "@genesislcap/genx": "14.108.0",
+    "@genesislcap/foundation-testing": "14.109.1-alpha-cf055218219.0",
+    "@genesislcap/genx": "14.109.1-alpha-cf055218219.0",
     "@types/json-schema": "^7.0.11",
     "rimraf": "^3.0.2"
   },
   "dependencies": {
-    "@genesislcap/foundation-comms": "14.108.0",
-    "@genesislcap/foundation-criteria": "14.108.0",
-    "@genesislcap/foundation-logger": "14.108.0",
-    "@genesislcap/foundation-ui": "14.108.0",
+    "@genesislcap/foundation-comms": "14.109.1-alpha-cf055218219.0",
+    "@genesislcap/foundation-criteria": "14.109.1-alpha-cf055218219.0",
+    "@genesislcap/foundation-logger": "14.109.1-alpha-cf055218219.0",
+    "@genesislcap/foundation-ui": "14.109.1-alpha-cf055218219.0",
     "@jsonforms/core": "^3.0.0",
     "@microsoft/fast-components": "^2.21.3",
     "@microsoft/fast-element": "^1.7.0",
@@ -69,5 +69,5 @@
     "access": "public"
   },
   "customElements": "dist/custom-elements.json",
-  "gitHead": "37e4aa6b9f3b1ba8fd0e88156693232fd139fe2e"
+  "gitHead": "2aca46b6e2d2e0df7aae4314ce806468e43e8c57"
 }