@genesislcap/foundation-forms 14.24.4 → 14.25.0-bny.1

package/README.md

@@ -1,15 +1,38 @@
-# Genesis Foundation Forms
+# Foundation Forms
 
 [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/)
 [![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](https://www.typescriptlang.org/)
 
-`foundation-forms` is a library for efficiently building complex forms at scale
-
 ### [API Docs](./docs/api/index.md)
 
-## General usage
+`foundation-forms` is a library for efficiently building complex forms and filters at scale.
+
+Foundation forms is defined by using two schemata:
+
+- `resourceName`/`jsonSchema` defines the underlying data to be shown in the UI (objects, properties, and their types).
+- `uiSchema` defines how this data is rendered as a form, e.g. the order of controls, their visibility, and the layout.
+
+## Forms
+
+### Basic install
+
+To enable this module in your application, follow the steps below.
+
+1. Add `@genesislcap/foundation-forms` as a dependency in your **package.json** file. Whenever you change the dependencies of your project, ensure you run the `$ npm run bootstrap` command again. You can find more information in the [package.json basics](../../../web/basics/package-json-basics/) page.
+
+```javascript
+{
+  ...
+  "dependencies": {
+    "@genesislcap/foundation-forms": "latest"
+  },
+  ...
+}
+```
 
-1. *Register components*
+### General usage
+
+#### 1. Register components
 
 ```ts
 import { Form } from '@genesislcap/foundation-forms';
@@ -18,39 +41,665 @@ Form
 ...
 ```
 
-2. *Add component to the template*
+#### 2. Add component to the template
+
 ```html
 <foundation-form resourceName="EVENT_TRADE_INSERT"></foundation-form>
 ```
 
-This should generate working form based on the JSON schema for that endpoint. 
-DevTools console will output autogenerated UI schema that you can use to configure the form
+This should generate working form based on the `JSON schema` for that endpoint.
+DevTools console will output autogenerated `UI schema` that you can use to configure the form
+
+#### 3. Configure form using UI schema
 
-3. *Configure form using UI schema*
 ```ts
 const sampleUISchema = {
+  type: "VerticalLayout",
+  elements: [
+    {
+      type: "Control",
+      scope: "#/properties/QUANTITY",
+      label: "Quantity",
+    },
+    {
+      type: "Control",
+      scope: "#/properties/SIDE",
+      label: "Side",
+    },
+  ],
+};
+```
+
+```html
+<foundation-form resourceName="EVENT_TRADE_INSERT" :uischema=${() => sampleUISchema}></foundation-form>
+```
+
+#### 4. Configure form using JSON schema (optional)
+
+Alternatively to providing `resourceName` you can hardcode the `JSON schema` on the client.
+
+```ts
+const sampleJsonSchema = {
+  type: 'object',
+  properties: {
+    ISSUER_NAME: {
+      type: 'string',
+      minLength: 3,
+      description: 'kotlin.String',
+    },
+    PRICE: {
+      type: 'number',
+      description: 'kotlin.Double',
+    },
+    MAIN_CONTACT: {
+      type: 'string',
+      pattern: '^[\\+]?[(]?[0-9]{3}[)]?[-\\s\\.]?[0-9]{3}[-\\s\\.]?[0-9]{4,6}$',
+      description: 'kotlin.String',
+    },
+    PASSWORD: {
+      type: 'string',
+      description: 'kotlin.String',
+    },
+  },
+  additionalProperties: false,
+  required: ['ISSUER_NAME', 'MAIN_CONTACT'],
+};
+```
+
+```ts 
+const sampleUiSchema = {
   type: 'VerticalLayout',
   elements: [
     {
       type: 'Control',
-      scope: '#/properties/QUANTITY',
-      label: 'Quantity',
+      label: 'Issuer Name',
+      scope: '#/properties/ISSUER_NAME',
+    },
+    {
+      type: 'Control',
+      label: 'Phone',
+      scope: '#/properties/MAIN_CONTACT',
+    },
+    {
+      type: 'Control',
+      label: 'Price',
+      scope: '#/properties/PRICE',
+    },
+    {
+      type: 'Control',
+      scope: '#/properties/COUNTERPARTY',
+      options: {
+        allOptionsResourceName: 'COUNTERPARTY',
+        valueField: 'COUNTERPARTY_ID',
+        labelField: 'COUNTERPARTY_ID',
+        datasourceConfig: {
+          request: {
+            COUNTERPARTY_ID: 'ACME',
+          },
+        },
+      },
     },
     {
       type: 'Control',
-      scope: '#/properties/SIDE',
-      label: 'Side',
+      label: 'Password',
+      scope: '#/properties/PASSWORD',
+      options: {
+        isPassword: true,
+      },
     },
   ],
 };
+```
+
+```html
+<foundation-form :jsonSchema=${() => sampleJsonSchema} :uischema=${() => sampleUISchema}></foundation-form>
+```
+
+:::info
+Use this when you want to avoid fetching metadata from the server but be aware that it could get out of sync if metadata changes on the server.
+:::
+
+#### 5. Pre-fill forms with data (optional)
+
+Use the `data` attribute, which allows you to pre-fill the form with ready-made information.
 
+```ts
+const sampleData = {
+    ISSUER_NAME: 'Some Issuer',
+    INVIS: 'Invisible value!',
+    USER: 'JohnDoe',
+  };
 ```
+
 ```html
-<foundation-form resourceName="EVENT_TRADE_INSERT" :uischema=${() => sampleUISchema}></foundation-form>
+<foundation-form resourceName="EVENT_TRADE_INSERT" :uischema=${() => sampleUISchema} :data=${() => sampleData}></foundation-form>
+```
+
+## Filters
+
+### Basic install
+
+To enable this module in your application, follow the steps below.
+
+1. Add `@genesislcap/foundation-forms` as a dependency in your **package.json** file. Whenever you change the dependencies of your project, ensure you run the `$ npm run bootstrap` command again. You can find more information in the [package.json basics](../../../web/basics/package-json-basics/) page.
+
+```javascript
+{
+  ...
+  "dependencies": {
+    "@genesislcap/foundation-forms": "latest"
+  },
+  ...
+}
+```
+
+### General usage
+
+#### 1. Register components
+
+```ts
+import { Filters } from '@genesislcap/foundation-forms';
+...
+Filters
+...
 ```
-       
 
+#### 2. Add component to the template
+
+```html
+<foundation-filters resourceName="ALL_TRADES"></foundation-filters>
+```
+
+This should generate working form based on the `JSON schema` for that endpoint.
+DevTools console will output autogenerated `UI schema` that you can use to configure the filters
+
+#### 3. Configure form using UI schema
+
+```ts
+const sampleUISchema = {
+  type: "VerticalLayout",
+  elements: [
+    {
+      type: "Control",
+      scope: "#/properties/QUANTITY",
+      label: "Quantity",
+    },
+    {
+      type: "Control",
+      scope: "#/properties/SIDE",
+      label: "Side",
+    },
+  ],
+};
+```
+
+```html
+<foundation-filters resourceName="ALL_TRADES" :uischema=${() => sampleUISchema}></foundation-filters>
+```
+
+#### 4. Configure form using JSON schema (optional)
+
+Alternatively to providing `resourceName` you can hardcode the `JSON schema` on the client.
+
+```ts
+const sampleJsonSchema = {
+  type: 'object',
+  properties: {
+    INSTRUMENT_ID: {
+      type: 'string',
+      minLength: 3,
+      description: 'kotlin.String',
+    },
+    QUANTITY: {
+      type: 'number',
+      description: 'kotlin.Double',
+    },
+  },
+};
+```
+
+```ts 
+const sampleUiSchema = {
+  type: 'VerticalLayout',
+  elements: [
+    {
+      type: 'Control',
+      label: 'Instrument ID',
+      scope: '#/properties/INSTRUMENT_ID',
+    },
+    {
+      type: 'Control',
+      label: 'Quantity',
+      scope: '#/properties/QUANTITY',
+    },
+  ],
+};
+```
+
+```html
+<foundation-filters :jsonSchema=${() => sampleJsonSchema} :uischema=${() => sampleUISchema}></foundation-filters>
+```
+
+:::info
+Use this when you want to avoid fetching metadata from the server but be aware that it could get out of sync if metadata changes on the server.
+:::
+
+#### 5. An example of synchronizing values with datasource criteria
+
+```html
+  <zero-card>
+    <foundation-filters 
+      resourceName="ALL_USERS"
+      :value=${sync((x) => x.allUsersfilters)}>
+    </foundation-filters>
+  </zero-card>
+  <zero-grid-pro>
+    <grid-pro-genesis-datasource
+      resource-name="ALL_USERS"
+      criteria=${(x) => x.allUsersfilters}
+    ></grid-pro-genesis-datasource>
+  </zero-grid-pro>
+```
+
+
+## Advanced customization
+
+### Default layout renderers and examples
+
+#### 1. Vertical Layout
+
+This is the default layout that is defined if no `uiSchema` is specified. Arranges our control elements vertically.
+
+```ts
+const VerticalUISchema = {
+  type: 'VerticalLayout',
+  elements: [
+    ...
+  ],
+};
+```
+
+#### 2. Vertical Layout - Two columns
+
+Arranges our control elements in 2 columns vertically
+
+```ts
+const VerticalColumnsUISchema = {
+  type: 'LayoutVertical2Columns',
+  elements: [
+    ...
+  ],
+};
+```
+
+#### 3. Horizontal Layout
+
+Arranges our control elements horizontally
+
+```ts
+const horizontalUISchema = {
+  type: 'HorizontalLayout',
+  elements: [
+    ...
+  ],
+};
+```
+
+#### 4. Array Layout
+
+Array Layout allows you to create a dynamic form with the ability to add, for example, multiple users.
+
+It is more complicated when it comes to customization because it needs proper `jsonSchema` and `uiSchema`.
+
+```ts
+const arrayUISchema = {
+  type: "VerticalLayout",
+  elements: [
+    {
+      type: "array",
+      scope: "#/properties/users",
+      options: {
+        childUiSchema: {
+          type: "HorizontalLayout",
+          elements: [
+            {
+              type: "Control",
+              scope: "#/properties/firstname",
+              label: "First Name",
+            },
+            {
+              type: "Control",
+              scope: "#/properties/lastname",
+              label: "Last Name",
+            },
+            {
+              type: "Control",
+              scope: "#/properties/email",
+              label: "Email",
+            },
+          ],
+        },
+      },
+    },
+  ],
+};
+```
+
+```ts
+const arrayJsonSchema = {
+  type: "object",
+  properties: {
+    users: {
+      type: "array",
+      items: {
+        type: "object",
+        title: "Users",
+        properties: {
+          firstname: {
+            type: "string",
+          },
+          lastname: {
+            type: "string",
+          },
+          email: {
+            type: "string",
+            format: "email",
+          },
+        },
+      },
+    },
+  },
+};
+```
+
+#### 5. Categorization Layout
+
+Categorization layout allows you to create more complex forms that can be divided into appropriate categories, for example: personal information and address - which will be in separate tabs.
+
+```ts
+const categoryUISchema = {
+  type: "Categorization",
+  elements: [
+    {
+      type: "Category",
+      scope: "#/properties/basic",
+      label: "Personal information",
+      options: {
+        childElements: [
+          {
+            type: "HorizontalLayout",
+            elements: [
+              {
+                type: "Control",
+                scope: "#/properties/firstName",
+              },
+              {
+                type: "Control",
+                scope: "#/properties/secondName",
+              },
+            ],
+          },
+        ],
+      },
+    },
+    {
+      type: "Category",
+      label: "Address",
+      scope: "#/properties/address",
+      options: {
+        childElements: [
+          {
+            type: "HorizontalLayout",
+            elements: [
+              {
+                type: "Control",
+                scope: "#/properties/address/properties/street",
+              },
+              {
+                type: "Control",
+                scope: "#/properties/address/properties/streetNumber",
+              },
+            ],
+          },
+        ],
+      },
+    },
+  ],
+};
+```
+
+#### 6. Group Layout
+
+Group layout similarly to categorization layout divides forms, but this time into groups. They are visible on the same tab, but they are separated from each other by their own labels.
+
+```ts
+const groupUISchema = {
+  type: "VerticalLayout",
+  elements: [
+    {
+      type: "Group",
+      label: "Person",
+      scope: "#/properties/person",
+      options: {
+        childElements: [
+          {
+            type: "LayoutVertical2Columns",
+            elements: [
+              {
+                type: "Control",
+                label: "First Name",
+                scope: "#/properties/person/properties/firstName",
+              },
+              {
+                type: "Control",
+                scope: "#/properties/person/properties/lastName",
+              },
+            ],
+          },
+        ],
+      },
+    },
+    {
+      type: "Group",
+      label: "Address",
+      scope: "#/properties/address/",
+      options: {
+        childElements: [
+          {
+            type: "VerticalLayout",
+            elements: [
+              {
+                type: "Control",
+                scope: "#/properties/person/properties/shippingAddress",
+              },
+              {
+                type: "Control",
+                scope: "#/properties/address/properties/street",
+              },
+            ],
+          },
+        ],
+      },
+    },
+  ],
+};
+```
+
+### Default control renderers and examples
+
+Most renderers are defined directly in the `jsonSchema` that comes from the server, but there are also those that we can add via `uiSchema`.
+
+#### 1. String Renderer
+
+The default renderer that will create a `text-field`.
+
+```ts
+const stringJsonSchema = {
+  type: "object",
+  properties: {
+    ISSUER_NAME: {
+      type: "string",
+      minLength: 3,
+      description: "kotlin.String",
+    },
+    USER: {
+      type: "string",
+      description: "kotlin.String",
+    },
+    MAIN_CONTACT: {
+      type: "string",
+      pattern: "^[\\+]?[(]?[0-9]{3}[)]?[-\\s\\.]?[0-9]{3}[-\\s\\.]?[0-9]{4,6}$",
+      description: "kotlin.String",
+    },
+  },
+};
+```
+
+#### 2. Number Renderer
+
+The number renderer that will create a `number-field`.
+
+```ts
+const numberJsonSchema = {
+  type: "object",
+  properties: {
+    PRICE: {
+      type: "number",
+      description: "kotlin.Double",
+    },
+  },
+};
+```
+
+#### 3. Boolean Renderer
+
+The boolean renderer that will create a `checkbox-field`.
+
+```ts
+const booleanJsonSchema = {
+  type: "object",
+  properties: {
+    vegetarian: {
+      type: "boolean",
+    },
+  },
+};
+```
+
+#### 4. Connected Multiselect Renderer
+
+The boolean renderer that will create a `multiselect` component with options from datasource.
+
+```ts
+const connectedMultiselectUISchema = {
+  type: "HorizontalLayout",
+  elements: [
+    {
+      type: 'Control',
+      label: 'Rights',
+      scope: '#/properties/RIGHT_CODES',
+      options: {
+        allOptionsResourceName: 'RIGHT',
+        valueField: 'CODE',
+        labelField: 'CODE',
+      },
+    },
+    {
+      type: 'Control',
+      label: 'Users',
+      scope: '#/properties/USER_NAMES',
+      options: {
+        allOptionsResourceName: 'USER',
+        valueField: 'USER_NAME',
+        labelField: 'USER_NAME',
+      },
+    },
+  ],
+};
+```
+
+#### 5. Connected Select Renderer
+
+The boolean renderer that will create a `select` component with options.
+
+```ts
+const connectedSelectUISchema = {
+  type: "HorizontalLayout",
+  elements: [
+    {
+      type: "Control",
+      scope: "#/properties/COUNTERPARTY_ID",
+      options: {
+        data: CounterpartyOptions,
+        valueField: "value",
+        labelField: "name",
+      },
+      label: "Counterparty",
+    },
+    {
+      type: "Control",
+      scope: "#/properties/INSTRUMENT_ID",
+      options: {
+        data: InstrumentOptions,
+        valueField: "value",
+        labelField: "name",
+      },
+      label: "Instrument",
+    },
+  ],
+};
+```
+
+#### 6. Date Renderer
+
+The date renderer that will create a `date-field`.
+
+```ts
+const dateJsonSchema = {
+  type: "object",
+  properties: {
+    tradeDate: {
+      type: "string",
+      description: "org.joda.time.DateTime",
+    },
+  },
+};
+```
+
+### Specific renderers for filters and examples
+
+#### 1. Filter Date Renderer
+
+The filter date renderer that will create a two `date-fields` with minimum and maximum value.
+
+```ts
+const dateJsonSchema = {
+  type: "object",
+  properties: {
+    tradeDate: {
+      type: "string",
+      description: "org.joda.time.DateTime",
+    },
+  },
+};
+```
+
+#### 2. Filter Number Renderer
+
+The filter number renderer that will create a two `number-fields` with minimum and maximum value.
+
+```ts
+const numberJsonSchema = {
+  type: "object",
+  properties: {
+    PRICE: {
+      type: "number",
+      description: "kotlin.Double",
+    },
+  },
+};
+```
 
 ## License
 
-Note: this project provides front end dependencies and uses licensed components listed in the next section, thus licenses for those components are required during development. Contact [Genesis Global](https://genesis.global/contact-us/) for more details.
+Note: this project provides front end dependencies and uses licensed components listed in the next section, thus licenses for those components are required during development. Contact [Genesis Global](https://genesis.global/contact-us/) for more details.

package/dist/custom-elements.json

@@ -142,6 +142,10 @@
                 "text": "boolean"
               }
             },
+            {
+              "kind": "method",
+              "name": "reset"
+            },
             {
               "kind": "field",
               "name": "_presentation",
@@ -1787,7 +1791,7 @@
         {
           "kind": "variable",
           "name": "LayoutVertical2ColumnsRendererTemplate",
-          "default": "html`\n  <template>\n    <div\n      style=\"max-width:600px;\n      display: flex;\n      flex-direction: row;\n      flex-wrap: wrap;\n      justify-content: space-between;\"\n    >\n      ${repeat(\n        (x) => x.control.uischema.elements,\n        html`\n          <div style=\"width: 49%\">\n            <dispatch-renderer\n              ?submitted=${(x, ctx) => ctx.parent.submitted}\n              :dispatch=${(x, ctx) => ctx.parent.dispatch}\n              :jsonforms=${(x, ctx) => ctx.parent.jsonforms}\n              :props=${(x, ctx) => ({\n                uischema: x,\n                schema: ctx.parent.control.schema,\n                renderers: ctx.parent.control.renderers,\n                path: ctx.parent.control.path,\n                enabled: ctx.parent.control.enabled,\n              })}\n            ></dispatch-renderer>\n          </div>\n        `\n      )}\n    </div>\n  </template>\n`"
+          "default": "html`\n  <template>\n    <div\n      style=\"display: flex;\n      flex-direction: row;\n      flex-wrap: wrap;\n      justify-content: space-between;\"\n    >\n      ${repeat(\n        (x) => x.control.uischema.elements,\n        html`\n          <div style=\"width: 49%\">\n            <dispatch-renderer\n              ?submitted=${(x, ctx) => ctx.parent.submitted}\n              :dispatch=${(x, ctx) => ctx.parent.dispatch}\n              :jsonforms=${(x, ctx) => ctx.parent.jsonforms}\n              :props=${(x, ctx) => ({\n                uischema: x,\n                schema: ctx.parent.control.schema,\n                renderers: ctx.parent.control.renderers,\n                path: ctx.parent.control.path,\n                enabled: ctx.parent.control.enabled,\n              })}\n            ></dispatch-renderer>\n          </div>\n        `\n      )}\n    </div>\n  </template>\n`"
         },
         {
           "kind": "variable",

package/dist/dts/form.d.ts

@@ -98,5 +98,6 @@ export declare class Form extends FoundationElement {
      */
     onChange(event: CustomEvent): void;
     disconnectedCallback(): void;
+    reset(): 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,gDAAkC,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;IAwBb;;OAEG;IACH,QAAQ,CAAC,KAAK,EAAE,WAAW;IAQ3B,oBAAoB;CAMrB"}
+{"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,gDAAkC,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;IAwBb;;OAEG;IACH,QAAQ,CAAC,KAAK,EAAE,WAAW;IAQ3B,oBAAoB;IAMpB,KAAK;CAIN"}

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

@@ -1 +1 @@
-{"version":3,"file":"LayoutVertical2ColumnsRenderer.d.ts","sourceRoot":"","sources":["../../../../src/jsonforms/renderers/LayoutVertical2ColumnsRenderer.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,sCAAsC,0DA8BlD,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,GAIzC,CAAC"}
+{"version":3,"file":"LayoutVertical2ColumnsRenderer.d.ts","sourceRoot":"","sources":["../../../../src/jsonforms/renderers/LayoutVertical2ColumnsRenderer.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,sCAAsC,0DA6BlD,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,GAIzC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"NumberControlRenderer.d.ts","sourceRoot":"","sources":["../../../../src/jsonforms/renderers/NumberControlRenderer.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,6BAA6B,YAAY,MAAM,6DAyB3D,CAAC;AAEF,eAAO,MAAM,0BAA0B,EAAE,GAMxC,CAAC"}
+{"version":3,"file":"NumberControlRenderer.d.ts","sourceRoot":"","sources":["../../../../src/jsonforms/renderers/NumberControlRenderer.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,6BAA6B,YAAY,MAAM,6DA0B3D,CAAC;AAEF,eAAO,MAAM,0BAA0B,EAAE,GAMxC,CAAC"}

package/dist/dts/types.d.ts

@@ -27,6 +27,7 @@ export type UiSchemaElement = {
     type: UiSchemaElementType;
     scope: string;
     label?: string;
+    placeholder?: string;
     options?: UiSchemaElementOptions;
 };
 /** @public */

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAClE,OAAO,EACL,cAAc,EACd,iBAAiB,EACjB,YAAY,EACZ,mBAAmB,EACpB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,KAAK,CAAC;AAClC,OAAO,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAC;AAE3E,cAAc;AACd,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,gBAAgB,GAAG,GAAG,CAAC;AAErE,cAAc;AACd,MAAM,MAAM,sBAAsB,GAAG;IACnC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,gBAAgB,CAAC,EAAE,iBAAiB,CAAC;IACrC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,WAAW,EAAE,CAAC;IACvE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;IACb,aAAa,CAAC,EAAE,QAAQ,CAAC;IACzB,aAAa,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC3B,IAAI,CAAC,EAAE;QACL,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;KACpB,CAAC;CACH,CAAC;AAEF,cAAc;AACd,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,mBAAmB,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,sBAAsB,CAAC;CAClC,CAAC;AAEF,cAAc;AACd,MAAM,MAAM,QAAQ,GAAG;IACrB,IAAI,EAAE,mBAAmB,CAAC;IAC1B,QAAQ,EAAE,eAAe,EAAE,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,cAAc;AACd,MAAM,MAAM,aAAa,GAAG;IAC1B,QAAQ,EAAE,YAAY,CAAC,gBAAgB,EAAE,GAAG,CAAC,CAAC;IAC9C,MAAM,EAAE,YAAY,CAAC;IACrB,MAAM,EAAE,CAAC,KAAK,EAAE,cAAc,EAAE,QAAQ,EAAE,iBAAiB,KAAK,mBAAmB,CAAC;CACrF,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAClE,OAAO,EACL,cAAc,EACd,iBAAiB,EACjB,YAAY,EACZ,mBAAmB,EACpB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,KAAK,CAAC;AAClC,OAAO,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAC;AAE3E,cAAc;AACd,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,gBAAgB,GAAG,GAAG,CAAC;AAErE,cAAc;AACd,MAAM,MAAM,sBAAsB,GAAG;IACnC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,gBAAgB,CAAC,EAAE,iBAAiB,CAAC;IACrC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,WAAW,EAAE,CAAC;IACvE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;IACb,aAAa,CAAC,EAAE,QAAQ,CAAC;IACzB,aAAa,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC3B,IAAI,CAAC,EAAE;QACL,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;KACpB,CAAC;CACH,CAAC;AAEF,cAAc;AACd,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,mBAAmB,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,sBAAsB,CAAC;CAClC,CAAC;AAEF,cAAc;AACd,MAAM,MAAM,QAAQ,GAAG;IACrB,IAAI,EAAE,mBAAmB,CAAC;IAC1B,QAAQ,EAAE,eAAe,EAAE,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,cAAc;AACd,MAAM,MAAM,aAAa,GAAG;IAC1B,QAAQ,EAAE,YAAY,CAAC,gBAAgB,EAAE,GAAG,CAAC,CAAC;IAC9C,MAAM,EAAE,YAAY,CAAC;IACrB,MAAM,EAAE,CAAC,KAAK,EAAE,cAAc,EAAE,QAAQ,EAAE,iBAAiB,KAAK,mBAAmB,CAAC;CACrF,CAAC"}

package/dist/esm/form.js

@@ -138,6 +138,9 @@ let Form = class Form extends FoundationElement {
     }
     disconnectedCallback() {
         super.disconnectedCallback();
+        this.reset();
+    }
+    reset() {
         this.submitted = false;
         this.data = {};
     }

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

@@ -11,7 +11,7 @@ export const ConnectedSelectControlRendererTemplate = (prefix = 'zero') => html
     >
       <${prefix}-combobox
         style="width: 100%"
-        placeholder=${(x) => x.control.label}
+        placeholder=${(x) => x.control.uischema.placeholder || x.control.label}
         ?disabled=${(x) => !x.control.enabled}
         @value-change=${(x, c) => {
     var _a;

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

@@ -4,8 +4,7 @@ import { LAYOUT2COLUMNS_RANK } from './RenderersRanks';
 export const LayoutVertical2ColumnsRendererTemplate = html `
   <template>
     <div
-      style="max-width:600px;
-      display: flex;
+      style="display: flex;
       flex-direction: row;
       flex-wrap: wrap;
       justify-content: space-between;"

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

@@ -10,12 +10,13 @@ export const NumberControlRendererTemplate = (prefix = 'zero') => html `
       ?submitted=${(x) => x.submitted}
     >
       <${prefix}-number-field
+        :options=${(x) => { var _a; return (_a = x.control.uischema.options) === null || _a === void 0 ? void 0 : _a.formatOptions; }}
         :value=${(x) => (x.control.data === undefined ? '' : String(x.control.data))}
         @change=${(x, c) => {
     const value = parseFloat(c.event.target.value.replace(/,/g, ''));
     return x.control.handleChange(x.control.path, !isNaN(value) ? value : undefined);
 }}
-        placeholder=${(x) => x.control.label}
+        placeholder=${(x) => x.control.uischema.placeholder || x.control.label}
         id=${(x) => x.control.path}
         data-test-id=${(x) => x.control.path}
         ?required=${(x) => x.control.required}

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

@@ -11,7 +11,7 @@ export const getStringControlRendererTemplate = (prefix = 'zero') => html `
         type=${(x) => { var _a, _b; return (((_b = (_a = x.control.uischema) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.isPassword) ? 'password' : 'text'); }}
         :value=${(x) => x.control.data || ''}
         @change=${(x, c) => x.control.handleChange(x.control.path, c.event.target.value)}
-        placeholder=${(x) => x.control.label}
+        placeholder=${(x) => x.control.uischema.placeholder || x.control.label}
         id=${(x) => x.control.path}
         data-test-id=${(x) => x.control.path}
         ?required=${(x) => x.control.required}

package/dist/foundation-forms.api.json

@@ -717,6 +717,37 @@
               "isProtected": false,
               "isAbstract": false
             },
+            {
+              "kind": "Method",
+              "canonicalReference": "@genesislcap/foundation-forms!Form#reset:member(1)",
+              "docComment": "",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "reset(): "
+                },
+                {
+                  "kind": "Content",
+                  "text": "void"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isStatic": false,
+              "returnTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              },
+              "releaseTag": "Beta",
+              "isProtected": false,
+              "overloadIndex": 1,
+              "parameters": [],
+              "isOptional": false,
+              "isAbstract": false,
+              "name": "reset"
+            },
             {
               "kind": "Property",
               "canonicalReference": "@genesislcap/foundation-forms!Form#resourceName:member",
@@ -999,7 +1030,7 @@
             },
             {
               "kind": "Content",
-              "text": ";\n    scope: string;\n    label?: string;\n    options?: "
+              "text": ";\n    scope: string;\n    label?: string;\n    placeholder?: string;\n    options?: "
             },
             {
               "kind": "Reference",

package/dist/foundation-forms.d.ts

@@ -231,6 +231,7 @@ export declare class Form extends FoundationElement {
      */
     onChange(event: CustomEvent): void;
     disconnectedCallback(): void;
+    reset(): void;
 }
 
 /** @public */
@@ -275,6 +276,7 @@ export declare type UiSchemaElement = {
     type: UiSchemaElementType;
     scope: string;
     label?: string;
+    placeholder?: string;
     options?: UiSchemaElementOptions;
 };
 

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

@@ -32,4 +32,5 @@ export declare class Form extends FoundationElement
 |  Method | Modifiers | Description |
 |  --- | --- | --- |
 |  [disconnectedCallback()](./foundation-forms.form.disconnectedcallback.md) |  | **_(BETA)_** |
+|  [reset()](./foundation-forms.form.reset.md) |  | **_(BETA)_** |
 

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

@@ -0,0 +1,18 @@
+<!-- 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; [reset](./foundation-forms.form.reset.md)
+
+## Form.reset() method
+
+> This API is provided as a preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
+> 
+
+**Signature:**
+
+```typescript
+reset(): void;
+```
+**Returns:**
+
+void
+

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

@@ -12,6 +12,7 @@ export type UiSchemaElement = {
     type: UiSchemaElementType;
     scope: string;
     label?: string;
+    placeholder?: string;
     options?: UiSchemaElementOptions;
 };
 ```

package/docs/api-report.md

@@ -72,6 +72,8 @@ export class Form extends FoundationElement {
     readonly: boolean;
     // @public
     renderers: RendererEntry[];
+    // (undocumented)
+    reset(): void;
     // @public
     resourceName: string;
     // @internal (undocumented)
@@ -123,6 +125,7 @@ export type UiSchemaElement = {
     type: UiSchemaElementType;
     scope: string;
     label?: string;
+    placeholder?: string;
     options?: UiSchemaElementOptions;
 };
 
@@ -149,7 +152,7 @@ export type UiSchemaElementType = 'Control' | 'VerticalLayout' | any;
 
 // Warnings were encountered during analysis:
 //
-// src/types.ts:50:3 - (ae-forgotten-export) The symbol "DispatchRenderer" needs to be exported by the entry point index.d.ts
+// src/types.ts:51:3 - (ae-forgotten-export) The symbol "DispatchRenderer" needs to be exported by the entry point index.d.ts
 
 // (No @packageDocumentation comment for this package)
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/foundation-forms",
   "description": "Genesis Foundation Forms",
-  "version": "14.24.4",
+  "version": "14.25.0-bny.1",
   "sideEffects": false,
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/esm/index.js",
@@ -23,13 +23,13 @@
     "build": "genx build",
     "build:rollup": "genx build -b rollup",
     "build:rollup:stats": "genx analyze -b rollup",
-    "build:webpack": "cross-env NODE_ENV=production webpack",
-    "build:webpack:stats": "cross-env ANALYZE=1 npm run build:webpack",
+    "build:webpack": "genx build -b webpack",
+    "build:webpack:stats": "genx analyze -b webpack",
     "clean": "genx clean",
     "dev": "npm run dev:tsc",
     "dev:rollup": "genx dev -b rollup",
     "dev:tsc": "genx dev",
-    "dev:webpack": "cross-env NODE_ENV=development webpack serve",
+    "dev:webpack": "genx dev -b webpack",
     "serve": "genx serve",
     "test": "npm run test:unit",
     "test:coverage": "c8 --include=src npm run test:unit",
@@ -43,50 +43,25 @@
     "test:unit:watch": "watchlist src test -- npm run test:unit"
   },
   "devDependencies": {
-    "@genesislcap/foundation-testing": "^14.24.4",
-    "@genesislcap/genx": "^14.24.4",
-    "@module-federation/dashboard-plugin": "2.3.0",
+    "@genesislcap/foundation-testing": "14.25.0-bny.1",
+    "@genesislcap/genx": "14.25.0-bny.1",
     "@playwright/test": "^1.18.1",
     "@types/json-schema": "^7.0.11",
     "@types/ua-parser-js": "^0.7.36",
     "analytics": "^0.8.0",
     "c8": "^7.11.0",
-    "camel-case": "^4.1.2",
-    "clean-webpack-plugin": "^4.0.0",
-    "copyfiles": "^2.4.1",
-    "cross-env": "^7.0.3",
-    "csp-html-webpack-plugin": "^5.1.0",
-    "css-loader": "^6.6.0",
-    "cssnano": "^5.0.17",
     "esm": "^3.2.25",
-    "file-loader": "^6.2.0",
-    "html-webpack-plugin": "^5.3.1",
     "jsdom": "^19.0.0",
-    "mini-css-extract-plugin": "^2.5.3",
     "playwright-test": "^7.2.1",
-    "portfinder-sync": "^0.0.2",
-    "postcss": "^8.2.8",
-    "postcss-import": "^14.0.0",
-    "postcss-loader": "^6.2.1",
-    "postcss-preset-env": "^7.0.1",
-    "terser-webpack-plugin": "^5.3.1",
-    "to-string-loader": "^1.2.0",
-    "ts-loader": "9.3.1",
-    "tsconfig-paths-webpack-plugin": "^3.5.1",
     "tsm": "^2.2.1",
     "typescript": "^4.5.5",
     "uvu": "0.5.4",
-    "watchlist": "^0.3.1",
-    "webpack": "^5.45.1",
-    "webpack-bundle-analyzer": "^4.5.0",
-    "webpack-cli": "^4.5.0",
-    "webpack-dev-server": "^4.0.0-beta.3",
-    "webpack-merge": "^5.7.3"
+    "watchlist": "^0.3.1"
   },
   "dependencies": {
-    "@genesislcap/foundation-comms": "^14.24.4",
-    "@genesislcap/foundation-criteria": "^14.24.4",
-    "@genesislcap/foundation-utils": "^14.24.4",
+    "@genesislcap/foundation-comms": "14.25.0-bny.1",
+    "@genesislcap/foundation-criteria": "14.25.0-bny.1",
+    "@genesislcap/foundation-utils": "14.25.0-bny.1",
     "@jsonforms/core": "^3.0.0",
     "@microsoft/fast-components": "^2.21.3",
     "@microsoft/fast-element": "^1.7.0",
@@ -107,5 +82,5 @@
     "access": "public"
   },
   "customElements": "dist/custom-elements.json",
-  "gitHead": "f10d551ef1457c744c75d1a21f711b1930242f05"
+  "gitHead": "c7f39e366136f5fbf2276855d9468052cca04536"
 }