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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (32) hide show
  1. package/README.md +665 -16
  2. package/dist/custom-elements.json +21 -1
  3. package/dist/dts/form.d.ts +1 -0
  4. package/dist/dts/form.d.ts.map +1 -1
  5. package/dist/dts/form.styles.d.ts +1 -0
  6. package/dist/dts/form.styles.d.ts.map +1 -1
  7. package/dist/dts/form.template.d.ts +1 -0
  8. package/dist/dts/form.template.d.ts.map +1 -1
  9. package/dist/dts/index.d.ts +2 -0
  10. package/dist/dts/index.d.ts.map +1 -1
  11. package/dist/dts/jsonforms/renderers/LayoutVertical2ColumnsRenderer.d.ts.map +1 -1
  12. package/dist/dts/jsonforms/renderers/NumberControlRenderer.d.ts.map +1 -1
  13. package/dist/dts/types.d.ts +1 -0
  14. package/dist/dts/types.d.ts.map +1 -1
  15. package/dist/esm/form.js +3 -0
  16. package/dist/esm/form.styles.js +1 -0
  17. package/dist/esm/form.template.js +1 -0
  18. package/dist/esm/index.js +2 -0
  19. package/dist/esm/jsonforms/renderers/ConnectedSelectControlRenderer.js +1 -1
  20. package/dist/esm/jsonforms/renderers/LayoutVertical2ColumnsRenderer.js +1 -2
  21. package/dist/esm/jsonforms/renderers/NumberControlRenderer.js +2 -1
  22. package/dist/esm/jsonforms/renderers/StringControlRenderer.js +1 -1
  23. package/dist/foundation-forms.api.json +101 -1
  24. package/dist/foundation-forms.d.ts +9 -0
  25. package/docs/api/foundation-forms.form.md +1 -0
  26. package/docs/api/foundation-forms.form.reset.md +18 -0
  27. package/docs/api/foundation-forms.foundationformstyles.md +15 -0
  28. package/docs/api/foundation-forms.foundationformtemplate.md +15 -0
  29. package/docs/api/foundation-forms.md +2 -0
  30. package/docs/api/foundation-forms.uischemaelement.md +1 -0
  31. package/docs/api-report.md +11 -1
  32. package/package.json +11 -36
package/README.md CHANGED
@@ -1,15 +1,38 @@
1
- # Genesis Foundation Forms
1
+ # Foundation Forms
2
2
 
3
3
  [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/)
4
4
  [![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](https://www.typescriptlang.org/)
5
5
 
6
- `foundation-forms` is a library for efficiently building complex forms at scale
7
-
8
6
  ### [API Docs](./docs/api/index.md)
9
7
 
10
- ## General usage
8
+ `foundation-forms` is a library for efficiently building complex forms and filters at scale.
9
+
10
+ Foundation forms is defined by using two schemata:
11
+
12
+ - `resourceName`/`jsonSchema` defines the underlying data to be shown in the UI (objects, properties, and their types).
13
+ - `uiSchema` defines how this data is rendered as a form, e.g. the order of controls, their visibility, and the layout.
14
+
15
+ ## Forms
16
+
17
+ ### Basic install
18
+
19
+ To enable this module in your application, follow the steps below.
20
+
21
+ 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.
22
+
23
+ ```javascript
24
+ {
25
+ ...
26
+ "dependencies": {
27
+ "@genesislcap/foundation-forms": "latest"
28
+ },
29
+ ...
30
+ }
31
+ ```
11
32
 
12
- 1. *Register components*
33
+ ### General usage
34
+
35
+ #### 1. Register components
13
36
 
14
37
  ```ts
15
38
  import { Form } from '@genesislcap/foundation-forms';
@@ -18,39 +41,665 @@ Form
18
41
  ...
19
42
  ```
20
43
 
21
- 2. *Add component to the template*
44
+ #### 2. Add component to the template
45
+
22
46
  ```html
23
47
  <foundation-form resourceName="EVENT_TRADE_INSERT"></foundation-form>
24
48
  ```
25
49
 
26
- This should generate working form based on the JSON schema for that endpoint.
27
- DevTools console will output autogenerated UI schema that you can use to configure the form
50
+ This should generate working form based on the `JSON schema` for that endpoint.
51
+ DevTools console will output autogenerated `UI schema` that you can use to configure the form
52
+
53
+ #### 3. Configure form using UI schema
28
54
 
29
- 3. *Configure form using UI schema*
30
55
  ```ts
31
56
  const sampleUISchema = {
57
+ type: "VerticalLayout",
58
+ elements: [
59
+ {
60
+ type: "Control",
61
+ scope: "#/properties/QUANTITY",
62
+ label: "Quantity",
63
+ },
64
+ {
65
+ type: "Control",
66
+ scope: "#/properties/SIDE",
67
+ label: "Side",
68
+ },
69
+ ],
70
+ };
71
+ ```
72
+
73
+ ```html
74
+ <foundation-form resourceName="EVENT_TRADE_INSERT" :uischema=${() => sampleUISchema}></foundation-form>
75
+ ```
76
+
77
+ #### 4. Configure form using JSON schema (optional)
78
+
79
+ Alternatively to providing `resourceName` you can hardcode the `JSON schema` on the client.
80
+
81
+ ```ts
82
+ const sampleJsonSchema = {
83
+ type: 'object',
84
+ properties: {
85
+ ISSUER_NAME: {
86
+ type: 'string',
87
+ minLength: 3,
88
+ description: 'kotlin.String',
89
+ },
90
+ PRICE: {
91
+ type: 'number',
92
+ description: 'kotlin.Double',
93
+ },
94
+ MAIN_CONTACT: {
95
+ type: 'string',
96
+ pattern: '^[\\+]?[(]?[0-9]{3}[)]?[-\\s\\.]?[0-9]{3}[-\\s\\.]?[0-9]{4,6}$',
97
+ description: 'kotlin.String',
98
+ },
99
+ PASSWORD: {
100
+ type: 'string',
101
+ description: 'kotlin.String',
102
+ },
103
+ },
104
+ additionalProperties: false,
105
+ required: ['ISSUER_NAME', 'MAIN_CONTACT'],
106
+ };
107
+ ```
108
+
109
+ ```ts
110
+ const sampleUiSchema = {
32
111
  type: 'VerticalLayout',
33
112
  elements: [
34
113
  {
35
114
  type: 'Control',
36
- scope: '#/properties/QUANTITY',
37
- label: 'Quantity',
115
+ label: 'Issuer Name',
116
+ scope: '#/properties/ISSUER_NAME',
117
+ },
118
+ {
119
+ type: 'Control',
120
+ label: 'Phone',
121
+ scope: '#/properties/MAIN_CONTACT',
122
+ },
123
+ {
124
+ type: 'Control',
125
+ label: 'Price',
126
+ scope: '#/properties/PRICE',
127
+ },
128
+ {
129
+ type: 'Control',
130
+ scope: '#/properties/COUNTERPARTY',
131
+ options: {
132
+ allOptionsResourceName: 'COUNTERPARTY',
133
+ valueField: 'COUNTERPARTY_ID',
134
+ labelField: 'COUNTERPARTY_ID',
135
+ datasourceConfig: {
136
+ request: {
137
+ COUNTERPARTY_ID: 'ACME',
138
+ },
139
+ },
140
+ },
38
141
  },
39
142
  {
40
143
  type: 'Control',
41
- scope: '#/properties/SIDE',
42
- label: 'Side',
144
+ label: 'Password',
145
+ scope: '#/properties/PASSWORD',
146
+ options: {
147
+ isPassword: true,
148
+ },
43
149
  },
44
150
  ],
45
151
  };
152
+ ```
153
+
154
+ ```html
155
+ <foundation-form :jsonSchema=${() => sampleJsonSchema} :uischema=${() => sampleUISchema}></foundation-form>
156
+ ```
157
+
158
+ :::info
159
+ 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.
160
+ :::
161
+
162
+ #### 5. Pre-fill forms with data (optional)
163
+
164
+ Use the `data` attribute, which allows you to pre-fill the form with ready-made information.
46
165
 
166
+ ```ts
167
+ const sampleData = {
168
+ ISSUER_NAME: 'Some Issuer',
169
+ INVIS: 'Invisible value!',
170
+ USER: 'JohnDoe',
171
+ };
47
172
  ```
173
+
48
174
  ```html
49
- <foundation-form resourceName="EVENT_TRADE_INSERT" :uischema=${() => sampleUISchema}></foundation-form>
175
+ <foundation-form resourceName="EVENT_TRADE_INSERT" :uischema=${() => sampleUISchema} :data=${() => sampleData}></foundation-form>
176
+ ```
177
+
178
+ ## Filters
179
+
180
+ ### Basic install
181
+
182
+ To enable this module in your application, follow the steps below.
183
+
184
+ 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.
185
+
186
+ ```javascript
187
+ {
188
+ ...
189
+ "dependencies": {
190
+ "@genesislcap/foundation-forms": "latest"
191
+ },
192
+ ...
193
+ }
194
+ ```
195
+
196
+ ### General usage
197
+
198
+ #### 1. Register components
199
+
200
+ ```ts
201
+ import { Filters } from '@genesislcap/foundation-forms';
202
+ ...
203
+ Filters
204
+ ...
50
205
  ```
51
-
52
206
 
207
+ #### 2. Add component to the template
208
+
209
+ ```html
210
+ <foundation-filters resourceName="ALL_TRADES"></foundation-filters>
211
+ ```
212
+
213
+ This should generate working form based on the `JSON schema` for that endpoint.
214
+ DevTools console will output autogenerated `UI schema` that you can use to configure the filters
215
+
216
+ #### 3. Configure form using UI schema
217
+
218
+ ```ts
219
+ const sampleUISchema = {
220
+ type: "VerticalLayout",
221
+ elements: [
222
+ {
223
+ type: "Control",
224
+ scope: "#/properties/QUANTITY",
225
+ label: "Quantity",
226
+ },
227
+ {
228
+ type: "Control",
229
+ scope: "#/properties/SIDE",
230
+ label: "Side",
231
+ },
232
+ ],
233
+ };
234
+ ```
235
+
236
+ ```html
237
+ <foundation-filters resourceName="ALL_TRADES" :uischema=${() => sampleUISchema}></foundation-filters>
238
+ ```
239
+
240
+ #### 4. Configure form using JSON schema (optional)
241
+
242
+ Alternatively to providing `resourceName` you can hardcode the `JSON schema` on the client.
243
+
244
+ ```ts
245
+ const sampleJsonSchema = {
246
+ type: 'object',
247
+ properties: {
248
+ INSTRUMENT_ID: {
249
+ type: 'string',
250
+ minLength: 3,
251
+ description: 'kotlin.String',
252
+ },
253
+ QUANTITY: {
254
+ type: 'number',
255
+ description: 'kotlin.Double',
256
+ },
257
+ },
258
+ };
259
+ ```
260
+
261
+ ```ts
262
+ const sampleUiSchema = {
263
+ type: 'VerticalLayout',
264
+ elements: [
265
+ {
266
+ type: 'Control',
267
+ label: 'Instrument ID',
268
+ scope: '#/properties/INSTRUMENT_ID',
269
+ },
270
+ {
271
+ type: 'Control',
272
+ label: 'Quantity',
273
+ scope: '#/properties/QUANTITY',
274
+ },
275
+ ],
276
+ };
277
+ ```
278
+
279
+ ```html
280
+ <foundation-filters :jsonSchema=${() => sampleJsonSchema} :uischema=${() => sampleUISchema}></foundation-filters>
281
+ ```
282
+
283
+ :::info
284
+ 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.
285
+ :::
286
+
287
+ #### 5. An example of synchronizing values with datasource criteria
288
+
289
+ ```html
290
+ <zero-card>
291
+ <foundation-filters
292
+ resourceName="ALL_USERS"
293
+ :value=${sync((x) => x.allUsersfilters)}>
294
+ </foundation-filters>
295
+ </zero-card>
296
+ <zero-grid-pro>
297
+ <grid-pro-genesis-datasource
298
+ resource-name="ALL_USERS"
299
+ criteria=${(x) => x.allUsersfilters}
300
+ ></grid-pro-genesis-datasource>
301
+ </zero-grid-pro>
302
+ ```
303
+
304
+
305
+ ## Advanced customization
306
+
307
+ ### Default layout renderers and examples
308
+
309
+ #### 1. Vertical Layout
310
+
311
+ This is the default layout that is defined if no `uiSchema` is specified. Arranges our control elements vertically.
312
+
313
+ ```ts
314
+ const VerticalUISchema = {
315
+ type: 'VerticalLayout',
316
+ elements: [
317
+ ...
318
+ ],
319
+ };
320
+ ```
321
+
322
+ #### 2. Vertical Layout - Two columns
323
+
324
+ Arranges our control elements in 2 columns vertically
325
+
326
+ ```ts
327
+ const VerticalColumnsUISchema = {
328
+ type: 'LayoutVertical2Columns',
329
+ elements: [
330
+ ...
331
+ ],
332
+ };
333
+ ```
334
+
335
+ #### 3. Horizontal Layout
336
+
337
+ Arranges our control elements horizontally
338
+
339
+ ```ts
340
+ const horizontalUISchema = {
341
+ type: 'HorizontalLayout',
342
+ elements: [
343
+ ...
344
+ ],
345
+ };
346
+ ```
347
+
348
+ #### 4. Array Layout
349
+
350
+ Array Layout allows you to create a dynamic form with the ability to add, for example, multiple users.
351
+
352
+ It is more complicated when it comes to customization because it needs proper `jsonSchema` and `uiSchema`.
353
+
354
+ ```ts
355
+ const arrayUISchema = {
356
+ type: "VerticalLayout",
357
+ elements: [
358
+ {
359
+ type: "array",
360
+ scope: "#/properties/users",
361
+ options: {
362
+ childUiSchema: {
363
+ type: "HorizontalLayout",
364
+ elements: [
365
+ {
366
+ type: "Control",
367
+ scope: "#/properties/firstname",
368
+ label: "First Name",
369
+ },
370
+ {
371
+ type: "Control",
372
+ scope: "#/properties/lastname",
373
+ label: "Last Name",
374
+ },
375
+ {
376
+ type: "Control",
377
+ scope: "#/properties/email",
378
+ label: "Email",
379
+ },
380
+ ],
381
+ },
382
+ },
383
+ },
384
+ ],
385
+ };
386
+ ```
387
+
388
+ ```ts
389
+ const arrayJsonSchema = {
390
+ type: "object",
391
+ properties: {
392
+ users: {
393
+ type: "array",
394
+ items: {
395
+ type: "object",
396
+ title: "Users",
397
+ properties: {
398
+ firstname: {
399
+ type: "string",
400
+ },
401
+ lastname: {
402
+ type: "string",
403
+ },
404
+ email: {
405
+ type: "string",
406
+ format: "email",
407
+ },
408
+ },
409
+ },
410
+ },
411
+ },
412
+ };
413
+ ```
414
+
415
+ #### 5. Categorization Layout
416
+
417
+ 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.
418
+
419
+ ```ts
420
+ const categoryUISchema = {
421
+ type: "Categorization",
422
+ elements: [
423
+ {
424
+ type: "Category",
425
+ scope: "#/properties/basic",
426
+ label: "Personal information",
427
+ options: {
428
+ childElements: [
429
+ {
430
+ type: "HorizontalLayout",
431
+ elements: [
432
+ {
433
+ type: "Control",
434
+ scope: "#/properties/firstName",
435
+ },
436
+ {
437
+ type: "Control",
438
+ scope: "#/properties/secondName",
439
+ },
440
+ ],
441
+ },
442
+ ],
443
+ },
444
+ },
445
+ {
446
+ type: "Category",
447
+ label: "Address",
448
+ scope: "#/properties/address",
449
+ options: {
450
+ childElements: [
451
+ {
452
+ type: "HorizontalLayout",
453
+ elements: [
454
+ {
455
+ type: "Control",
456
+ scope: "#/properties/address/properties/street",
457
+ },
458
+ {
459
+ type: "Control",
460
+ scope: "#/properties/address/properties/streetNumber",
461
+ },
462
+ ],
463
+ },
464
+ ],
465
+ },
466
+ },
467
+ ],
468
+ };
469
+ ```
470
+
471
+ #### 6. Group Layout
472
+
473
+ 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.
474
+
475
+ ```ts
476
+ const groupUISchema = {
477
+ type: "VerticalLayout",
478
+ elements: [
479
+ {
480
+ type: "Group",
481
+ label: "Person",
482
+ scope: "#/properties/person",
483
+ options: {
484
+ childElements: [
485
+ {
486
+ type: "LayoutVertical2Columns",
487
+ elements: [
488
+ {
489
+ type: "Control",
490
+ label: "First Name",
491
+ scope: "#/properties/person/properties/firstName",
492
+ },
493
+ {
494
+ type: "Control",
495
+ scope: "#/properties/person/properties/lastName",
496
+ },
497
+ ],
498
+ },
499
+ ],
500
+ },
501
+ },
502
+ {
503
+ type: "Group",
504
+ label: "Address",
505
+ scope: "#/properties/address/",
506
+ options: {
507
+ childElements: [
508
+ {
509
+ type: "VerticalLayout",
510
+ elements: [
511
+ {
512
+ type: "Control",
513
+ scope: "#/properties/person/properties/shippingAddress",
514
+ },
515
+ {
516
+ type: "Control",
517
+ scope: "#/properties/address/properties/street",
518
+ },
519
+ ],
520
+ },
521
+ ],
522
+ },
523
+ },
524
+ ],
525
+ };
526
+ ```
527
+
528
+ ### Default control renderers and examples
529
+
530
+ Most renderers are defined directly in the `jsonSchema` that comes from the server, but there are also those that we can add via `uiSchema`.
531
+
532
+ #### 1. String Renderer
533
+
534
+ The default renderer that will create a `text-field`.
535
+
536
+ ```ts
537
+ const stringJsonSchema = {
538
+ type: "object",
539
+ properties: {
540
+ ISSUER_NAME: {
541
+ type: "string",
542
+ minLength: 3,
543
+ description: "kotlin.String",
544
+ },
545
+ USER: {
546
+ type: "string",
547
+ description: "kotlin.String",
548
+ },
549
+ MAIN_CONTACT: {
550
+ type: "string",
551
+ pattern: "^[\\+]?[(]?[0-9]{3}[)]?[-\\s\\.]?[0-9]{3}[-\\s\\.]?[0-9]{4,6}$",
552
+ description: "kotlin.String",
553
+ },
554
+ },
555
+ };
556
+ ```
557
+
558
+ #### 2. Number Renderer
559
+
560
+ The number renderer that will create a `number-field`.
561
+
562
+ ```ts
563
+ const numberJsonSchema = {
564
+ type: "object",
565
+ properties: {
566
+ PRICE: {
567
+ type: "number",
568
+ description: "kotlin.Double",
569
+ },
570
+ },
571
+ };
572
+ ```
573
+
574
+ #### 3. Boolean Renderer
575
+
576
+ The boolean renderer that will create a `checkbox-field`.
577
+
578
+ ```ts
579
+ const booleanJsonSchema = {
580
+ type: "object",
581
+ properties: {
582
+ vegetarian: {
583
+ type: "boolean",
584
+ },
585
+ },
586
+ };
587
+ ```
588
+
589
+ #### 4. Connected Multiselect Renderer
590
+
591
+ The boolean renderer that will create a `multiselect` component with options from datasource.
592
+
593
+ ```ts
594
+ const connectedMultiselectUISchema = {
595
+ type: "HorizontalLayout",
596
+ elements: [
597
+ {
598
+ type: 'Control',
599
+ label: 'Rights',
600
+ scope: '#/properties/RIGHT_CODES',
601
+ options: {
602
+ allOptionsResourceName: 'RIGHT',
603
+ valueField: 'CODE',
604
+ labelField: 'CODE',
605
+ },
606
+ },
607
+ {
608
+ type: 'Control',
609
+ label: 'Users',
610
+ scope: '#/properties/USER_NAMES',
611
+ options: {
612
+ allOptionsResourceName: 'USER',
613
+ valueField: 'USER_NAME',
614
+ labelField: 'USER_NAME',
615
+ },
616
+ },
617
+ ],
618
+ };
619
+ ```
620
+
621
+ #### 5. Connected Select Renderer
622
+
623
+ The boolean renderer that will create a `select` component with options.
624
+
625
+ ```ts
626
+ const connectedSelectUISchema = {
627
+ type: "HorizontalLayout",
628
+ elements: [
629
+ {
630
+ type: "Control",
631
+ scope: "#/properties/COUNTERPARTY_ID",
632
+ options: {
633
+ data: CounterpartyOptions,
634
+ valueField: "value",
635
+ labelField: "name",
636
+ },
637
+ label: "Counterparty",
638
+ },
639
+ {
640
+ type: "Control",
641
+ scope: "#/properties/INSTRUMENT_ID",
642
+ options: {
643
+ data: InstrumentOptions,
644
+ valueField: "value",
645
+ labelField: "name",
646
+ },
647
+ label: "Instrument",
648
+ },
649
+ ],
650
+ };
651
+ ```
652
+
653
+ #### 6. Date Renderer
654
+
655
+ The date renderer that will create a `date-field`.
656
+
657
+ ```ts
658
+ const dateJsonSchema = {
659
+ type: "object",
660
+ properties: {
661
+ tradeDate: {
662
+ type: "string",
663
+ description: "org.joda.time.DateTime",
664
+ },
665
+ },
666
+ };
667
+ ```
668
+
669
+ ### Specific renderers for filters and examples
670
+
671
+ #### 1. Filter Date Renderer
672
+
673
+ The filter date renderer that will create a two `date-fields` with minimum and maximum value.
674
+
675
+ ```ts
676
+ const dateJsonSchema = {
677
+ type: "object",
678
+ properties: {
679
+ tradeDate: {
680
+ type: "string",
681
+ description: "org.joda.time.DateTime",
682
+ },
683
+ },
684
+ };
685
+ ```
686
+
687
+ #### 2. Filter Number Renderer
688
+
689
+ The filter number renderer that will create a two `number-fields` with minimum and maximum value.
690
+
691
+ ```ts
692
+ const numberJsonSchema = {
693
+ type: "object",
694
+ properties: {
695
+ PRICE: {
696
+ type: "number",
697
+ description: "kotlin.Double",
698
+ },
699
+ },
700
+ };
701
+ ```
53
702
 
54
703
  ## License
55
704
 
56
- 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.
705
+ 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.
@@ -142,6 +142,10 @@
142
142
  "text": "boolean"
143
143
  }
144
144
  },
145
+ {
146
+ "kind": "method",
147
+ "name": "reset"
148
+ },
145
149
  {
146
150
  "kind": "field",
147
151
  "name": "_presentation",
@@ -332,6 +336,22 @@
332
336
  "package": "./form"
333
337
  }
334
338
  },
339
+ {
340
+ "kind": "js",
341
+ "name": "*",
342
+ "declaration": {
343
+ "name": "*",
344
+ "package": "./form.styles"
345
+ }
346
+ },
347
+ {
348
+ "kind": "js",
349
+ "name": "*",
350
+ "declaration": {
351
+ "name": "*",
352
+ "package": "./form.template"
353
+ }
354
+ },
335
355
  {
336
356
  "kind": "js",
337
357
  "name": "*",
@@ -1787,7 +1807,7 @@
1787
1807
  {
1788
1808
  "kind": "variable",
1789
1809
  "name": "LayoutVertical2ColumnsRendererTemplate",
1790
- "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`"
1810
+ "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`"
1791
1811
  },
1792
1812
  {
1793
1813
  "kind": "variable",
@@ -98,5 +98,6 @@ export declare class Form extends FoundationElement {
98
98
  */
99
99
  onChange(event: CustomEvent): void;
100
100
  disconnectedCallback(): void;
101
+ reset(): void;
101
102
  }
102
103
  //# sourceMappingURL=form.d.ts.map
@@ -1 +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"}
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;IAMpB,KAAK;CAIN"}
@@ -1,2 +1,3 @@
1
+ /** @beta */
1
2
  export declare const foundationFormStyles: import("@microsoft/fast-element").ElementStyles;
2
3
  //# sourceMappingURL=form.styles.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"form.styles.d.ts","sourceRoot":"","sources":["../../src/form.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,oBAAoB,iDAoDhC,CAAC"}
1
+ {"version":3,"file":"form.styles.d.ts","sourceRoot":"","sources":["../../src/form.styles.ts"],"names":[],"mappings":"AAKA,YAAY;AACZ,eAAO,MAAM,oBAAoB,iDAoDhC,CAAC"}
@@ -1,3 +1,4 @@
1
1
  import type { Form } from './form';
2
+ /** @beta */
2
3
  export declare const foundationFormTemplate: import("@microsoft/fast-element").ViewTemplate<Form, any>;
3
4
  //# sourceMappingURL=form.template.d.ts.map
@@ -1 +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,eAAO,MAAM,sBAAsB,2DA2BlC,CAAC"}
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,YAAY;AACZ,eAAO,MAAM,sBAAsB,2DA2BlC,CAAC"}
@@ -1,5 +1,7 @@
1
1
  export * from './filters';
2
2
  export * from './form';
3
+ export * from './form.styles';
4
+ export * from './form.template';
3
5
  export * from './types';
4
6
  export * from './utils';
5
7
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}
@@ -1 +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"}
1
+ {"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"}
@@ -1 +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"}
1
+ {"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"}
@@ -27,6 +27,7 @@ export type UiSchemaElement = {
27
27
  type: UiSchemaElementType;
28
28
  scope: string;
29
29
  label?: string;
30
+ placeholder?: string;
30
31
  options?: UiSchemaElementOptions;
31
32
  };
32
33
  /** @public */
@@ -1 +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"}
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,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 CHANGED
@@ -138,6 +138,9 @@ let Form = class Form extends FoundationElement {
138
138
  }
139
139
  disconnectedCallback() {
140
140
  super.disconnectedCallback();
141
+ this.reset();
142
+ }
143
+ reset() {
141
144
  this.submitted = false;
142
145
  this.data = {};
143
146
  }
@@ -2,6 +2,7 @@ import { controlCornerRadius, designUnit, strokeWidth } from '@microsoft/fast-co
2
2
  import { css } from '@microsoft/fast-element';
3
3
  import { forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
4
4
  import { SystemColors } from '@microsoft/fast-web-utilities';
5
+ /** @beta */
5
6
  export const foundationFormStyles = css `
6
7
  :host {
7
8
  border: calc(${strokeWidth} * 1px) solid transparent;
@@ -9,6 +9,7 @@ ArrayListWrapper;
9
9
  CategorizationWrapper;
10
10
  ControlWrapper;
11
11
  DispatchRenderer;
12
+ /** @beta */
12
13
  export const foundationFormTemplate = html `
13
14
  <template>
14
15
  <json-forms
package/dist/esm/index.js CHANGED
@@ -1,4 +1,6 @@
1
1
  export * from './filters';
2
2
  export * from './form';
3
+ export * from './form.styles';
4
+ export * from './form.template';
3
5
  export * from './types';
4
6
  export * from './utils';
@@ -11,7 +11,7 @@ export const ConnectedSelectControlRendererTemplate = (prefix = 'zero') => html
11
11
  >
12
12
  <${prefix}-combobox
13
13
  style="width: 100%"
14
- placeholder=${(x) => x.control.label}
14
+ placeholder=${(x) => x.control.uischema.placeholder || x.control.label}
15
15
  ?disabled=${(x) => !x.control.enabled}
16
16
  @value-change=${(x, c) => {
17
17
  var _a;
@@ -4,8 +4,7 @@ import { LAYOUT2COLUMNS_RANK } from './RenderersRanks';
4
4
  export const LayoutVertical2ColumnsRendererTemplate = html `
5
5
  <template>
6
6
  <div
7
- style="max-width:600px;
8
- display: flex;
7
+ style="display: flex;
9
8
  flex-direction: row;
10
9
  flex-wrap: wrap;
11
10
  justify-content: space-between;"
@@ -10,12 +10,13 @@ export const NumberControlRendererTemplate = (prefix = 'zero') => html `
10
10
  ?submitted=${(x) => x.submitted}
11
11
  >
12
12
  <${prefix}-number-field
13
+ :options=${(x) => { var _a; return (_a = x.control.uischema.options) === null || _a === void 0 ? void 0 : _a.formatOptions; }}
13
14
  :value=${(x) => (x.control.data === undefined ? '' : String(x.control.data))}
14
15
  @change=${(x, c) => {
15
16
  const value = parseFloat(c.event.target.value.replace(/,/g, ''));
16
17
  return x.control.handleChange(x.control.path, !isNaN(value) ? value : undefined);
17
18
  }}
18
- placeholder=${(x) => x.control.label}
19
+ placeholder=${(x) => x.control.uischema.placeholder || x.control.label}
19
20
  id=${(x) => x.control.path}
20
21
  data-test-id=${(x) => x.control.path}
21
22
  ?required=${(x) => x.control.required}
@@ -11,7 +11,7 @@ export const getStringControlRendererTemplate = (prefix = 'zero') => html `
11
11
  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'); }}
12
12
  :value=${(x) => x.control.data || ''}
13
13
  @change=${(x, c) => x.control.handleChange(x.control.path, c.event.target.value)}
14
- placeholder=${(x) => x.control.label}
14
+ placeholder=${(x) => x.control.uischema.placeholder || x.control.label}
15
15
  id=${(x) => x.control.path}
16
16
  data-test-id=${(x) => x.control.path}
17
17
  ?required=${(x) => x.control.required}
@@ -717,6 +717,37 @@
717
717
  "isProtected": false,
718
718
  "isAbstract": false
719
719
  },
720
+ {
721
+ "kind": "Method",
722
+ "canonicalReference": "@genesislcap/foundation-forms!Form#reset:member(1)",
723
+ "docComment": "",
724
+ "excerptTokens": [
725
+ {
726
+ "kind": "Content",
727
+ "text": "reset(): "
728
+ },
729
+ {
730
+ "kind": "Content",
731
+ "text": "void"
732
+ },
733
+ {
734
+ "kind": "Content",
735
+ "text": ";"
736
+ }
737
+ ],
738
+ "isStatic": false,
739
+ "returnTypeTokenRange": {
740
+ "startIndex": 1,
741
+ "endIndex": 2
742
+ },
743
+ "releaseTag": "Beta",
744
+ "isProtected": false,
745
+ "overloadIndex": 1,
746
+ "parameters": [],
747
+ "isOptional": false,
748
+ "isAbstract": false,
749
+ "name": "reset"
750
+ },
720
751
  {
721
752
  "kind": "Property",
722
753
  "canonicalReference": "@genesislcap/foundation-forms!Form#resourceName:member",
@@ -785,6 +816,75 @@
785
816
  },
786
817
  "implementsTokenRanges": []
787
818
  },
819
+ {
820
+ "kind": "Variable",
821
+ "canonicalReference": "@genesislcap/foundation-forms!foundationFormStyles:var",
822
+ "docComment": "/**\n * @beta\n */\n",
823
+ "excerptTokens": [
824
+ {
825
+ "kind": "Content",
826
+ "text": "foundationFormStyles: "
827
+ },
828
+ {
829
+ "kind": "Content",
830
+ "text": "import(\"@microsoft/fast-element\")."
831
+ },
832
+ {
833
+ "kind": "Reference",
834
+ "text": "ElementStyles",
835
+ "canonicalReference": "@microsoft/fast-element!ElementStyles:class"
836
+ }
837
+ ],
838
+ "fileUrlPath": "src/form.styles.ts",
839
+ "isReadonly": true,
840
+ "releaseTag": "Beta",
841
+ "name": "foundationFormStyles",
842
+ "variableTypeTokenRange": {
843
+ "startIndex": 1,
844
+ "endIndex": 3
845
+ }
846
+ },
847
+ {
848
+ "kind": "Variable",
849
+ "canonicalReference": "@genesislcap/foundation-forms!foundationFormTemplate:var",
850
+ "docComment": "/**\n * @beta\n */\n",
851
+ "excerptTokens": [
852
+ {
853
+ "kind": "Content",
854
+ "text": "foundationFormTemplate: "
855
+ },
856
+ {
857
+ "kind": "Content",
858
+ "text": "import(\"@microsoft/fast-element\")."
859
+ },
860
+ {
861
+ "kind": "Reference",
862
+ "text": "ViewTemplate",
863
+ "canonicalReference": "@microsoft/fast-element!ViewTemplate:class"
864
+ },
865
+ {
866
+ "kind": "Content",
867
+ "text": "<"
868
+ },
869
+ {
870
+ "kind": "Reference",
871
+ "text": "Form",
872
+ "canonicalReference": "@genesislcap/foundation-forms!Form:class"
873
+ },
874
+ {
875
+ "kind": "Content",
876
+ "text": ", any>"
877
+ }
878
+ ],
879
+ "fileUrlPath": "src/form.template.ts",
880
+ "isReadonly": true,
881
+ "releaseTag": "Beta",
882
+ "name": "foundationFormTemplate",
883
+ "variableTypeTokenRange": {
884
+ "startIndex": 1,
885
+ "endIndex": 6
886
+ }
887
+ },
788
888
  {
789
889
  "kind": "Variable",
790
890
  "canonicalReference": "@genesislcap/foundation-forms!genesisErrorTranslator:var",
@@ -999,7 +1099,7 @@
999
1099
  },
1000
1100
  {
1001
1101
  "kind": "Content",
1002
- "text": ";\n scope: string;\n label?: string;\n options?: "
1102
+ "text": ";\n scope: string;\n label?: string;\n placeholder?: string;\n options?: "
1003
1103
  },
1004
1104
  {
1005
1105
  "kind": "Reference",
@@ -1,4 +1,5 @@
1
1
  import { DatasourceOptions } from '@genesislcap/foundation-comms';
2
+ import { ElementStyles } from '@microsoft/fast-element';
2
3
  import { ErrorObject } from 'ajv';
3
4
  import { ErrorTranslator } from '@jsonforms/core';
4
5
  import { Expression } from '@genesislcap/foundation-criteria';
@@ -231,8 +232,15 @@ export declare class Form extends FoundationElement {
231
232
  */
232
233
  onChange(event: CustomEvent): void;
233
234
  disconnectedCallback(): void;
235
+ reset(): void;
234
236
  }
235
237
 
238
+ /** @beta */
239
+ export declare const foundationFormStyles: ElementStyles;
240
+
241
+ /** @beta */
242
+ export declare const foundationFormTemplate: ViewTemplate<Form, any>;
243
+
236
244
  /** @public */
237
245
  export declare const genesisErrorTranslator: ErrorTranslator;
238
246
 
@@ -275,6 +283,7 @@ export declare type UiSchemaElement = {
275
283
  type: UiSchemaElementType;
276
284
  scope: string;
277
285
  label?: string;
286
+ placeholder?: string;
278
287
  options?: UiSchemaElementOptions;
279
288
  };
280
289
 
@@ -32,4 +32,5 @@ export declare class Form extends FoundationElement
32
32
  | Method | Modifiers | Description |
33
33
  | --- | --- | --- |
34
34
  | [disconnectedCallback()](./foundation-forms.form.disconnectedcallback.md) | | **_(BETA)_** |
35
+ | [reset()](./foundation-forms.form.reset.md) | | **_(BETA)_** |
35
36
 
@@ -0,0 +1,18 @@
1
+ <!-- Do not edit this file. It is automatically generated by API Documenter. -->
2
+
3
+ [Home](./index.md) &gt; [@genesislcap/foundation-forms](./foundation-forms.md) &gt; [Form](./foundation-forms.form.md) &gt; [reset](./foundation-forms.form.reset.md)
4
+
5
+ ## Form.reset() method
6
+
7
+ > 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.
8
+ >
9
+
10
+ **Signature:**
11
+
12
+ ```typescript
13
+ reset(): void;
14
+ ```
15
+ **Returns:**
16
+
17
+ void
18
+
@@ -0,0 +1,15 @@
1
+ <!-- Do not edit this file. It is automatically generated by API Documenter. -->
2
+
3
+ [Home](./index.md) &gt; [@genesislcap/foundation-forms](./foundation-forms.md) &gt; [foundationFormStyles](./foundation-forms.foundationformstyles.md)
4
+
5
+ ## foundationFormStyles variable
6
+
7
+ > 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.
8
+ >
9
+
10
+
11
+ **Signature:**
12
+
13
+ ```typescript
14
+ foundationFormStyles: import("@microsoft/fast-element").ElementStyles
15
+ ```
@@ -0,0 +1,15 @@
1
+ <!-- Do not edit this file. It is automatically generated by API Documenter. -->
2
+
3
+ [Home](./index.md) &gt; [@genesislcap/foundation-forms](./foundation-forms.md) &gt; [foundationFormTemplate](./foundation-forms.foundationformtemplate.md)
4
+
5
+ ## foundationFormTemplate variable
6
+
7
+ > 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.
8
+ >
9
+
10
+
11
+ **Signature:**
12
+
13
+ ```typescript
14
+ foundationFormTemplate: import("@microsoft/fast-element").ViewTemplate<Form, any>
15
+ ```
@@ -17,6 +17,8 @@
17
17
  | --- | --- |
18
18
  | [createExpressions](./foundation-forms.createexpressions.md) | Creates a expressions/criteria from given payload |
19
19
  | [filtersRenderers](./foundation-forms.filtersrenderers.md) | |
20
+ | [foundationFormStyles](./foundation-forms.foundationformstyles.md) | **_(BETA)_** |
21
+ | [foundationFormTemplate](./foundation-forms.foundationformtemplate.md) | **_(BETA)_** |
20
22
  | [genesisErrorTranslator](./foundation-forms.genesiserrortranslator.md) | |
21
23
  | [mustMatch](./foundation-forms.mustmatch.md) | Ensures the value of the current field (the one the validator is on) matches the one of the target field. |
22
24
  | [renderers](./foundation-forms.renderers.md) | |
@@ -12,6 +12,7 @@ export type UiSchemaElement = {
12
12
  type: UiSchemaElementType;
13
13
  scope: string;
14
14
  label?: string;
15
+ placeholder?: string;
15
16
  options?: UiSchemaElementOptions;
16
17
  };
17
18
  ```
@@ -5,6 +5,7 @@
5
5
  ```ts
6
6
 
7
7
  import { DatasourceOptions } from '@genesislcap/foundation-comms';
8
+ import { ElementStyles } from '@microsoft/fast-element';
8
9
  import { ErrorObject } from 'ajv';
9
10
  import { ErrorTranslator } from '@jsonforms/core';
10
11
  import { Expression } from '@genesislcap/foundation-criteria';
@@ -72,6 +73,8 @@ export class Form extends FoundationElement {
72
73
  readonly: boolean;
73
74
  // @public
74
75
  renderers: RendererEntry[];
76
+ // (undocumented)
77
+ reset(): void;
75
78
  // @public
76
79
  resourceName: string;
77
80
  // @internal (undocumented)
@@ -84,6 +87,12 @@ export class Form extends FoundationElement {
84
87
  uischema: UISchemaElement;
85
88
  }
86
89
 
90
+ // @beta (undocumented)
91
+ export const foundationFormStyles: ElementStyles;
92
+
93
+ // @beta (undocumented)
94
+ export const foundationFormTemplate: ViewTemplate<Form, any>;
95
+
87
96
  // @public (undocumented)
88
97
  export const genesisErrorTranslator: ErrorTranslator;
89
98
 
@@ -123,6 +132,7 @@ export type UiSchemaElement = {
123
132
  type: UiSchemaElementType;
124
133
  scope: string;
125
134
  label?: string;
135
+ placeholder?: string;
126
136
  options?: UiSchemaElementOptions;
127
137
  };
128
138
 
@@ -149,7 +159,7 @@ export type UiSchemaElementType = 'Control' | 'VerticalLayout' | any;
149
159
 
150
160
  // Warnings were encountered during analysis:
151
161
  //
152
- // src/types.ts:50:3 - (ae-forgotten-export) The symbol "DispatchRenderer" needs to be exported by the entry point index.d.ts
162
+ // src/types.ts:51:3 - (ae-forgotten-export) The symbol "DispatchRenderer" needs to be exported by the entry point index.d.ts
153
163
 
154
164
  // (No @packageDocumentation comment for this package)
155
165
 
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@genesislcap/foundation-forms",
3
3
  "description": "Genesis Foundation Forms",
4
- "version": "14.24.4",
4
+ "version": "14.25.0-bny.2",
5
5
  "sideEffects": false,
6
6
  "license": "SEE LICENSE IN license.txt",
7
7
  "main": "dist/esm/index.js",
@@ -23,13 +23,13 @@
23
23
  "build": "genx build",
24
24
  "build:rollup": "genx build -b rollup",
25
25
  "build:rollup:stats": "genx analyze -b rollup",
26
- "build:webpack": "cross-env NODE_ENV=production webpack",
27
- "build:webpack:stats": "cross-env ANALYZE=1 npm run build:webpack",
26
+ "build:webpack": "genx build -b webpack",
27
+ "build:webpack:stats": "genx analyze -b webpack",
28
28
  "clean": "genx clean",
29
29
  "dev": "npm run dev:tsc",
30
30
  "dev:rollup": "genx dev -b rollup",
31
31
  "dev:tsc": "genx dev",
32
- "dev:webpack": "cross-env NODE_ENV=development webpack serve",
32
+ "dev:webpack": "genx dev -b webpack",
33
33
  "serve": "genx serve",
34
34
  "test": "npm run test:unit",
35
35
  "test:coverage": "c8 --include=src npm run test:unit",
@@ -43,50 +43,25 @@
43
43
  "test:unit:watch": "watchlist src test -- npm run test:unit"
44
44
  },
45
45
  "devDependencies": {
46
- "@genesislcap/foundation-testing": "^14.24.4",
47
- "@genesislcap/genx": "^14.24.4",
48
- "@module-federation/dashboard-plugin": "2.3.0",
46
+ "@genesislcap/foundation-testing": "14.25.0-bny.2",
47
+ "@genesislcap/genx": "14.25.0-bny.2",
49
48
  "@playwright/test": "^1.18.1",
50
49
  "@types/json-schema": "^7.0.11",
51
50
  "@types/ua-parser-js": "^0.7.36",
52
51
  "analytics": "^0.8.0",
53
52
  "c8": "^7.11.0",
54
- "camel-case": "^4.1.2",
55
- "clean-webpack-plugin": "^4.0.0",
56
- "copyfiles": "^2.4.1",
57
- "cross-env": "^7.0.3",
58
- "csp-html-webpack-plugin": "^5.1.0",
59
- "css-loader": "^6.6.0",
60
- "cssnano": "^5.0.17",
61
53
  "esm": "^3.2.25",
62
- "file-loader": "^6.2.0",
63
- "html-webpack-plugin": "^5.3.1",
64
54
  "jsdom": "^19.0.0",
65
- "mini-css-extract-plugin": "^2.5.3",
66
55
  "playwright-test": "^7.2.1",
67
- "portfinder-sync": "^0.0.2",
68
- "postcss": "^8.2.8",
69
- "postcss-import": "^14.0.0",
70
- "postcss-loader": "^6.2.1",
71
- "postcss-preset-env": "^7.0.1",
72
- "terser-webpack-plugin": "^5.3.1",
73
- "to-string-loader": "^1.2.0",
74
- "ts-loader": "9.3.1",
75
- "tsconfig-paths-webpack-plugin": "^3.5.1",
76
56
  "tsm": "^2.2.1",
77
57
  "typescript": "^4.5.5",
78
58
  "uvu": "0.5.4",
79
- "watchlist": "^0.3.1",
80
- "webpack": "^5.45.1",
81
- "webpack-bundle-analyzer": "^4.5.0",
82
- "webpack-cli": "^4.5.0",
83
- "webpack-dev-server": "^4.0.0-beta.3",
84
- "webpack-merge": "^5.7.3"
59
+ "watchlist": "^0.3.1"
85
60
  },
86
61
  "dependencies": {
87
- "@genesislcap/foundation-comms": "^14.24.4",
88
- "@genesislcap/foundation-criteria": "^14.24.4",
89
- "@genesislcap/foundation-utils": "^14.24.4",
62
+ "@genesislcap/foundation-comms": "14.25.0-bny.2",
63
+ "@genesislcap/foundation-criteria": "14.25.0-bny.2",
64
+ "@genesislcap/foundation-utils": "14.25.0-bny.2",
90
65
  "@jsonforms/core": "^3.0.0",
91
66
  "@microsoft/fast-components": "^2.21.3",
92
67
  "@microsoft/fast-element": "^1.7.0",
@@ -107,5 +82,5 @@
107
82
  "access": "public"
108
83
  },
109
84
  "customElements": "dist/custom-elements.json",
110
- "gitHead": "f10d551ef1457c744c75d1a21f711b1930242f05"
85
+ "gitHead": "7b641c5cd4607901def78b3bf4b0448edf20e591"
111
86
  }