@3t-transform/threeteeui 0.1.37 → 0.1.42

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 (155) hide show
  1. package/dist/cjs/app-globals-3a1e7e63.js +5 -0
  2. package/dist/cjs/css-shim-211819bc.js +6 -0
  3. package/dist/cjs/dom-9deb26c8.js +75 -0
  4. package/dist/cjs/domsanitiser.options-277161b9.js +1667 -0
  5. package/dist/cjs/domsanitiser.options-3f1501b5.js +1697 -0
  6. package/dist/cjs/index-39a867c5.js +3298 -0
  7. package/dist/cjs/{index-457ca775.js → index-76f14107.js} +2 -88
  8. package/dist/cjs/loader.cjs.js +18 -3
  9. package/dist/cjs/shadow-css-bf3843d2.js +389 -0
  10. package/dist/cjs/tttx-button.cjs.entry.js +25 -25
  11. package/dist/cjs/tttx-filter.cjs.entry.js +159 -159
  12. package/dist/cjs/tttx-form.cjs.entry.js +459 -373
  13. package/dist/cjs/tttx-icon.cjs.entry.js +11 -11
  14. package/dist/cjs/tttx-keyvalue-block.cjs.entry.js +59 -59
  15. package/dist/cjs/tttx-list.cjs.entry.js +32 -1694
  16. package/dist/cjs/tttx-loading-spinner.cjs.entry.js +16 -16
  17. package/dist/cjs/tttx-sorter.cjs.entry.js +102 -102
  18. package/dist/cjs/tttx-standalone-input.cjs.entry.js +79 -79
  19. package/dist/cjs/tttx-toolbar.cjs.entry.js +10 -10
  20. package/dist/cjs/tttx.cjs.js +116 -8
  21. package/dist/collection/collection-manifest.json +2 -2
  22. package/dist/collection/components/atoms/tttx-button/tttx-button.css +4 -4
  23. package/dist/collection/components/atoms/tttx-button/tttx-button.js +110 -110
  24. package/dist/collection/components/atoms/tttx-button/tttx-button.stories.js +14 -14
  25. package/dist/collection/components/atoms/tttx-icon/tttx-icon.js +62 -62
  26. package/dist/collection/components/atoms/tttx-icon/tttx-icon.stories.js +22 -22
  27. package/dist/collection/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.js +109 -109
  28. package/dist/collection/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.stories.js +38 -38
  29. package/dist/collection/components/atoms/tttx-loading-spinner/tttx-loading-spinner.js +67 -67
  30. package/dist/collection/components/atoms/tttx-loading-spinner/tttx-loading-spinner.stories.js +17 -17
  31. package/dist/collection/components/molecules/tttx-filter/tttx-filter.js +334 -334
  32. package/dist/collection/components/molecules/tttx-filter/tttx-filter.stories.js +62 -62
  33. package/dist/collection/components/molecules/tttx-form/lib/setErrorState.js +37 -37
  34. package/dist/collection/components/molecules/tttx-form/lib/validityCheck.js +61 -58
  35. package/dist/collection/components/molecules/tttx-form/tttx-form.css +98 -2
  36. package/dist/collection/components/molecules/tttx-form/tttx-form.js +479 -393
  37. package/dist/collection/components/molecules/tttx-form/tttx-form.stories.js +274 -218
  38. package/dist/collection/components/molecules/tttx-list/tttx-list.js +105 -105
  39. package/dist/collection/components/molecules/tttx-list/tttx-list.stories.js +43 -43
  40. package/dist/collection/components/molecules/tttx-sorter/tttx-sorter.js +224 -224
  41. package/dist/collection/components/molecules/tttx-sorter/tttx-sorter.stories.js +42 -42
  42. package/dist/collection/components/molecules/tttx-standalone-input/tttx-standalone-input.js +759 -759
  43. package/dist/collection/components/molecules/tttx-standalone-input/tttx-standalone-input.stories.js +172 -172
  44. package/dist/collection/components/molecules/tttx-toolbar/tttx-toolbar.js +44 -44
  45. package/dist/collection/components/molecules/tttx-toolbar/tttx-toolbar.stories.js +14 -14
  46. package/dist/collection/components/palette.stories.js +7 -7
  47. package/dist/collection/docs/gettingstarted-developer.stories.js +5 -5
  48. package/dist/collection/icons.js +2838 -2838
  49. package/dist/collection/index.js +1 -1
  50. package/dist/collection/shared/domsanitiser.options.js +14 -14
  51. package/dist/components/domsanitiser.options.js +1694 -0
  52. package/dist/components/index.d.ts +0 -9
  53. package/dist/components/index.js +5 -1
  54. package/dist/components/tttx-button.js +49 -49
  55. package/dist/components/tttx-filter.js +191 -191
  56. package/dist/components/tttx-form.js +477 -391
  57. package/dist/components/tttx-icon2.js +28 -28
  58. package/dist/components/tttx-keyvalue-block.js +76 -76
  59. package/dist/components/tttx-list.js +54 -1716
  60. package/dist/components/tttx-loading-spinner.js +33 -33
  61. package/dist/components/tttx-sorter.js +130 -130
  62. package/dist/components/tttx-standalone-input.js +130 -130
  63. package/dist/components/tttx-toolbar.js +26 -26
  64. package/dist/esm/app-globals-0f993ce5.js +3 -0
  65. package/dist/esm/css-shim-9d54a2f2.js +4 -0
  66. package/dist/esm/dom-6be6f662.js +73 -0
  67. package/dist/esm/domsanitiser.options-6f2878c8.js +1694 -0
  68. package/dist/esm/domsanitiser.options-cc420431.js +1664 -0
  69. package/dist/esm/{index-d784fb3e.js → index-9cde46a5.js} +3 -88
  70. package/dist/esm/index-e3e64631.js +3262 -0
  71. package/dist/esm/loader.js +18 -3
  72. package/dist/esm/polyfills/core-js.js +0 -0
  73. package/dist/esm/polyfills/css-shim.js +1 -1
  74. package/dist/esm/polyfills/dom.js +0 -0
  75. package/dist/esm/polyfills/es5-html-element.js +0 -0
  76. package/dist/esm/polyfills/index.js +0 -0
  77. package/dist/esm/polyfills/system.js +0 -0
  78. package/dist/esm/shadow-css-ed4599f8.js +387 -0
  79. package/dist/esm/tttx-button.entry.js +25 -25
  80. package/dist/esm/tttx-filter.entry.js +159 -159
  81. package/dist/esm/tttx-form.entry.js +459 -373
  82. package/dist/esm/tttx-icon.entry.js +11 -11
  83. package/dist/esm/tttx-keyvalue-block.entry.js +59 -59
  84. package/dist/esm/tttx-list.entry.js +32 -1694
  85. package/dist/esm/tttx-loading-spinner.entry.js +16 -16
  86. package/dist/esm/tttx-sorter.entry.js +102 -102
  87. package/dist/esm/tttx-standalone-input.entry.js +79 -79
  88. package/dist/esm/tttx-toolbar.entry.js +10 -10
  89. package/dist/esm/tttx.js +116 -5
  90. package/dist/tttx/app-globals-0f993ce5.js +3 -0
  91. package/dist/tttx/css-shim-9d54a2f2.js +4 -0
  92. package/dist/tttx/dom-6be6f662.js +73 -0
  93. package/dist/tttx/domsanitiser.options-6f2878c8.js +1694 -0
  94. package/dist/tttx/index-e3e64631.js +3262 -0
  95. package/dist/tttx/index.esm.js +1 -0
  96. package/dist/tttx/{p-400868f1.entry.js → p-3b1be372.entry.js} +1 -1
  97. package/dist/tttx/p-4e637d50.entry.js +1 -0
  98. package/dist/tttx/{p-563605b2.entry.js → p-561224f5.entry.js} +1 -1
  99. package/dist/tttx/{p-b720c4ad.entry.js → p-9f1e9cc1.entry.js} +1 -1
  100. package/dist/tttx/{p-798a098a.entry.js → p-aef96333.entry.js} +1 -1
  101. package/dist/tttx/p-b4290a5b.js +3 -0
  102. package/dist/tttx/p-bd1edaed.entry.js +1 -0
  103. package/dist/tttx/p-d0ff9ad0.entry.js +1 -0
  104. package/dist/tttx/{p-cac26a1b.entry.js → p-d2f1aa8e.entry.js} +1 -1
  105. package/dist/tttx/p-db059a69.js +2 -0
  106. package/dist/tttx/p-dc2a37b0.entry.js +1 -0
  107. package/dist/tttx/{p-ab6ce9f6.entry.js → p-e53c7f9d.entry.js} +1 -1
  108. package/dist/tttx/{p-92cade7f.entry.js → p-f885f17a.entry.js} +1 -1
  109. package/dist/tttx/shadow-css-ed4599f8.js +387 -0
  110. package/dist/tttx/tttx-button.entry.js +30 -0
  111. package/dist/tttx/tttx-filter.entry.js +165 -0
  112. package/dist/tttx/tttx-form.entry.js +468 -0
  113. package/dist/tttx/tttx-icon.entry.js +17 -0
  114. package/dist/tttx/tttx-keyvalue-block.entry.js +65 -0
  115. package/dist/tttx/tttx-list.entry.js +38 -0
  116. package/dist/tttx/tttx-loading-spinner.entry.js +22 -0
  117. package/dist/tttx/tttx-sorter.entry.js +108 -0
  118. package/dist/tttx/tttx-standalone-input.entry.js +85 -0
  119. package/dist/tttx/tttx-toolbar.entry.js +16 -0
  120. package/dist/tttx/tttx.esm.js +129 -1
  121. package/dist/types/components/atoms/tttx-button/tttx-button.d.ts +10 -10
  122. package/dist/types/components/atoms/tttx-button/tttx-button.stories.d.ts +10 -10
  123. package/dist/types/components/atoms/tttx-icon/tttx-icon.d.ts +5 -5
  124. package/dist/types/components/atoms/tttx-icon/tttx-icon.stories.d.ts +20 -20
  125. package/dist/types/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.d.ts +7 -7
  126. package/dist/types/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.stories.d.ts +9 -9
  127. package/dist/types/components/atoms/tttx-loading-spinner/tttx-loading-spinner.d.ts +6 -6
  128. package/dist/types/components/atoms/tttx-loading-spinner/tttx-loading-spinner.stories.d.ts +17 -17
  129. package/dist/types/components/molecules/tttx-filter/tttx-filter.d.ts +39 -39
  130. package/dist/types/components/molecules/tttx-filter/tttx-filter.stories.d.ts +68 -68
  131. package/dist/types/components/molecules/tttx-form/lib/setErrorState.d.ts +13 -13
  132. package/dist/types/components/molecules/tttx-form/lib/validityCheck.d.ts +17 -17
  133. package/dist/types/components/molecules/tttx-form/tttx-form.d.ts +133 -111
  134. package/dist/types/components/molecules/tttx-form/tttx-form.stories.d.ts +278 -13
  135. package/dist/types/components/molecules/tttx-list/tttx-list.d.ts +11 -11
  136. package/dist/types/components/molecules/tttx-list/tttx-list.stories.d.ts +14 -14
  137. package/dist/types/components/molecules/tttx-sorter/tttx-sorter.d.ts +19 -19
  138. package/dist/types/components/molecules/tttx-sorter/tttx-sorter.stories.d.ts +30 -30
  139. package/dist/types/components/molecules/tttx-standalone-input/tttx-standalone-input.d.ts +69 -69
  140. package/dist/types/components/molecules/tttx-standalone-input/tttx-standalone-input.stories.d.ts +143 -143
  141. package/dist/types/components/molecules/tttx-toolbar/tttx-toolbar.d.ts +4 -4
  142. package/dist/types/components/molecules/tttx-toolbar/tttx-toolbar.stories.d.ts +13 -13
  143. package/dist/types/components/palette.stories.d.ts +6 -6
  144. package/dist/types/components.d.ts +1 -1
  145. package/dist/types/docs/gettingstarted-developer.stories.d.ts +5 -5
  146. package/dist/types/icons.d.ts +2 -2
  147. package/dist/types/index.d.ts +1 -1
  148. package/dist/types/shared/domsanitiser.options.d.ts +10 -10
  149. package/dist/types/stencil-public-runtime.d.ts +3 -59
  150. package/loader/index.d.ts +0 -9
  151. package/package.json +1 -1
  152. package/dist/tttx/p-0ebffdfc.js +0 -2
  153. package/dist/tttx/p-72e7f7dd.entry.js +0 -3
  154. package/dist/tttx/p-c4162029.entry.js +0 -1
  155. package/dist/tttx/p-eb126fd0.entry.js +0 -1
@@ -1,68 +1,68 @@
1
- declare const _default: {
2
- title: string;
3
- component: string;
4
- argTypes: {
5
- filterOptions: {
6
- control: {
7
- type: string;
8
- };
9
- };
10
- filterButtonStyle: {
11
- table: {
12
- defaultValue: {
13
- summary: string;
14
- };
15
- };
16
- control: {
17
- type: string;
18
- };
19
- options: string[];
20
- };
21
- showSearchField: {
22
- table: {
23
- defaultValue: {
24
- summary: boolean;
25
- };
26
- };
27
- control: {
28
- type: string;
29
- };
30
- };
31
- showSelectAll: {
32
- table: {
33
- defaultValue: {
34
- summary: boolean;
35
- };
36
- };
37
- control: {
38
- type: string;
39
- };
40
- };
41
- showOptionIcons: {
42
- table: {
43
- defaultValue: {
44
- summary: boolean;
45
- };
46
- };
47
- control: {
48
- type: string;
49
- };
50
- };
51
- filterHeader: {
52
- control: {
53
- type: string;
54
- };
55
- };
56
- };
57
- parameters: {
58
- actions: {
59
- handles: string[];
60
- };
61
- };
62
- decorators: import("@storybook/types").Addon_DecoratorFunction<unknown>[];
63
- };
64
- export default _default;
65
- export declare const Default: any;
66
- export declare const CustomFilterOptions: any;
67
- export declare const ListFilterWithoutSearchField: any;
68
- export declare const TableIconWithoutOptionIconsOrSelectAll: any;
1
+ declare const _default: {
2
+ title: string;
3
+ component: string;
4
+ argTypes: {
5
+ filterOptions: {
6
+ control: {
7
+ type: string;
8
+ };
9
+ };
10
+ filterButtonStyle: {
11
+ table: {
12
+ defaultValue: {
13
+ summary: string;
14
+ };
15
+ };
16
+ control: {
17
+ type: string;
18
+ };
19
+ options: string[];
20
+ };
21
+ showSearchField: {
22
+ table: {
23
+ defaultValue: {
24
+ summary: boolean;
25
+ };
26
+ };
27
+ control: {
28
+ type: string;
29
+ };
30
+ };
31
+ showSelectAll: {
32
+ table: {
33
+ defaultValue: {
34
+ summary: boolean;
35
+ };
36
+ };
37
+ control: {
38
+ type: string;
39
+ };
40
+ };
41
+ showOptionIcons: {
42
+ table: {
43
+ defaultValue: {
44
+ summary: boolean;
45
+ };
46
+ };
47
+ control: {
48
+ type: string;
49
+ };
50
+ };
51
+ filterHeader: {
52
+ control: {
53
+ type: string;
54
+ };
55
+ };
56
+ };
57
+ parameters: {
58
+ actions: {
59
+ handles: string[];
60
+ };
61
+ };
62
+ decorators: import("@storybook/types").Addon_DecoratorFunction<unknown>[];
63
+ };
64
+ export default _default;
65
+ export declare const Default: any;
66
+ export declare const CustomFilterOptions: any;
67
+ export declare const ListFilterWithoutSearchField: any;
68
+ export declare const TableIconWithoutOptionIconsOrSelectAll: any;
@@ -1,13 +1,13 @@
1
- /**
2
- * Sets the error state of an input field by updating its class and error message.
3
- * If an error was detected, it sets the input field's class to "invalid" and
4
- * displays the error message in an error bubble. If no error was detected,
5
- * it removes the "invalid" class from the input field and clears the error bubble.
6
- *
7
- * @param {HTMLInputElement} target - The input field to update.
8
- * @param {boolean} hasError - Whether an error was detected in the field.
9
- * @param {string} errorMessage - The error message to display (if any).
10
- * @return {void}
11
- */
12
- declare function setErrorState(target: any, hasError: any, errorMessage: any): void;
13
- export default setErrorState;
1
+ /**
2
+ * Sets the error state of an input field by updating its class and error message.
3
+ * If an error was detected, it sets the input field's class to "invalid" and
4
+ * displays the error message in an error bubble. If no error was detected,
5
+ * it removes the "invalid" class from the input field and clears the error bubble.
6
+ *
7
+ * @param {HTMLInputElement} target - The input field to update.
8
+ * @param {boolean} hasError - Whether an error was detected in the field.
9
+ * @param {string} errorMessage - The error message to display (if any).
10
+ * @return {void}
11
+ */
12
+ declare function setErrorState(target: any, hasError: any, errorMessage: any): void;
13
+ export default setErrorState;
@@ -1,17 +1,17 @@
1
- /**
2
- * Validates the input field on focusout event by checking its validity state,
3
- * sets an error message if there's an issue, and emits a "dataChanged" event to
4
- * the parent component with the field name and its new value.
5
- *
6
- * @param {Event} event - The focusout event triggered by the input field.
7
- * @return {void}
8
- */
9
- declare function validityCheck(event: {
10
- target: any;
11
- preventDefault: Function;
12
- }): {
13
- target: any;
14
- hasError: boolean;
15
- errorMessage: string;
16
- };
17
- export default validityCheck;
1
+ /**
2
+ * Validates the input field on focusout event by checking its validity state,
3
+ * sets an error message if there's an issue, and emits a "dataChanged" event to
4
+ * the parent component with the field name and its new value.
5
+ *
6
+ * @param {Event} event - The focusout event triggered by the input field.
7
+ * @return {void}
8
+ */
9
+ declare function validityCheck(event: {
10
+ target: any;
11
+ preventDefault: Function;
12
+ }): {
13
+ target: any;
14
+ hasError: boolean;
15
+ errorMessage: string;
16
+ };
17
+ export default validityCheck;
@@ -1,111 +1,133 @@
1
- import { EventEmitter } from '../../../stencil-public-runtime';
2
- import { ChangeEvent } from 'react';
3
- export declare class TttxForm {
4
- private fieldset;
5
- private submitButton;
6
- private template;
7
- private _formSchema;
8
- private _data;
9
- formschema: any;
10
- data: any;
11
- dataSubmitted: EventEmitter<FormData>;
12
- dataChanged: EventEmitter<{
13
- name: string;
14
- value: any;
15
- }>;
16
- onFormSchemaChange(newValue: any): void;
17
- onDataChange(newValue: any): void;
18
- /**
19
- * Handles the focus event for a form field and emits a "dataChanged" event
20
- * to the parent component with the field name and its new value.
21
- *
22
- * @param {ChangeEvent} event - The focus event triggered by the field.
23
- * @return {void}
24
- */
25
- fieldChanged(event: ChangeEvent): void;
26
- submit(): Promise<void>;
27
- /**
28
- * Submits the form data to the server.
29
- *
30
- * @param {SubmitEvent} event - The event object for the form submission.
31
- * @returns {void}
32
- *
33
- * @example
34
- * const form = document.getElementById('myForm');
35
- * form.addEventListener('submit', (event) => {
36
- * doSubmit(event);
37
- * });
38
- */
39
- doSubmit(event: SubmitEvent): void;
40
- componentWillLoad(): void;
41
- componentWillRender(): void;
42
- /**
43
- * Creates a new HTMLInputElement with the specified name, type, and placeholder (if any),
44
- * and sets its autocomplete and autocapitalization properties to off.
45
- *
46
- * @param {string} formKey - The name of the input field, as specified in the form schema.
47
- * @param {Object} formProperties - An object containing additional properties for the input field, such as its type and placeholder value.
48
- * @param {string} formProperties.type - The type of the input field (e.g., "text", "email", "number", etc.).
49
- * @param {string} [formProperties.placeholder] - An optional placeholder value to display in the input field.
50
- * @return {HTMLInputElement} - The new input element.
51
- */
52
- createInput(formKey: any, formProperties: any): HTMLInputElement;
53
- /**
54
- * Applies validation attributes to an input element based on the specified validation object.
55
- * If a certain property is present in the object, it will set the corresponding attribute on
56
- * the input element (e.g., "required" will set the "required" and "data-required" attributes,
57
- * "pattern" will set the "pattern" and "data-pattern" attributes, etc.).
58
- *
59
- * @param {HTMLInputElement} input - The input element to apply validation attributes to.
60
- * @param {Object} validation - An object containing the validation rules for the input field.
61
- * @param {Object} [validation.required] - An object containing a "message" property to display if the field is required.
62
- * @param {Object} [validation.pattern] - An object containing a "pattern" property to match against the field value, and a "message" property to display if the pattern doesn't match.
63
- * @param {Object} [validation.badInput] - An object containing a "message" property to display if the field value is invalid.
64
- * @param {Object} [validation.minmax] - An object containing "min" and "max" properties to validate the field value against, and a "message" property to display if the value is out of range.
65
- * @param {string} [validation.maxlength] - The maximum length of the input field.
66
- * @return {void}
67
- */
68
- applyValidation(input: any, validation: any): void;
69
- createErrorBubble(): HTMLDivElement;
70
- /**
71
- * Creates a new <label> element with the "inputBlock" class and the specified label text,
72
- * and appends the input element and error bubble element to it. If the form property has
73
- * no validation object, it adds an "optional" span element to the label.
74
- *
75
- * @param {Object} formProperties - An object containing properties for the form field, including its label text and validation rules.
76
- * @param {HTMLInputElement} input - The input element to associate with the label.
77
- * @param {HTMLDivElement} errorBubble - The error bubble element to display error messages in.
78
- * @return {HTMLLabelElement} - The new label element.
79
- */
80
- createLabel(formProperties: any, input: any, errorBubble: any): HTMLLabelElement;
81
- /**
82
- * Populates the form template with input fields and labels based on the properties of the
83
- * current form schema. For each property in the schema, it creates an input element, applies
84
- * any validation rules to it, creates an error bubble and label element, and appends them
85
- * to the form template. Finally, it creates and appends a submit button element to the form.
86
- *
87
- * @return {void}
88
- */
89
- populateFormFromSchema(): void;
90
- /**
91
- * Clones the form template and binds event listeners to its input elements. First, it checks if
92
- * there is a form schema present. If so, it clones the template's content, binds events to form
93
- * input elements, and appends the cloned form elements to the fieldset. The event listeners include
94
- * "oninvalid" (to check input validity on submit), "onblur" (to check input validity on blur),
95
- * "onkeyup" (to handle changes in input fields), and "onchange" (to handle changes in select fields).
96
- *
97
- * @return {void}
98
- */
99
- componentDidRender(): void;
100
- validityCheckWrapper(event: any): void;
101
- /**
102
- * Renders the component's template as a form element with a fieldset container. The form's
103
- * "onSubmit" event is bound to the "doSubmit" function, which handles the form submission
104
- * and emits a "dataSubmitted" event with the form data. The fieldset element is assigned
105
- * to the "fieldset" instance variable using a ref, so it can be populated with form elements
106
- * later on.
107
- *
108
- * @return {JSX.Element} - The rendered form template as a JSX element.
109
- */
110
- render(): any;
111
- }
1
+ import { EventEmitter } from '../../../stencil-public-runtime';
2
+ import { ChangeEvent } from 'react';
3
+ export declare class TttxForm {
4
+ private form;
5
+ private fieldset;
6
+ private submitButton;
7
+ private template;
8
+ private _formSchema;
9
+ private _data;
10
+ formschema: any;
11
+ data: any;
12
+ dataSubmitted: EventEmitter<FormData>;
13
+ dataChanged: EventEmitter<{
14
+ name: string;
15
+ value: any;
16
+ }>;
17
+ onFormSchemaChange(newValue: any): void;
18
+ onDataChange(newValue: any): void;
19
+ /**
20
+ * Handles the focus event for a form field and emits a "dataChanged" event
21
+ * to the parent component with the field name and its new value.
22
+ *
23
+ * @param {ChangeEvent} event - The focus event triggered by the field.
24
+ * @return {void}
25
+ */
26
+ fieldChanged(event: ChangeEvent): void;
27
+ submit(): Promise<void>;
28
+ /**
29
+ * Submits the form data to the server.
30
+ *
31
+ * @param {SubmitEvent} event - The event object for the form submission.
32
+ * @returns {void}
33
+ *
34
+ * @example
35
+ * const form = document.getElementById('myForm');
36
+ * form.addEventListener('submit', (event) => {
37
+ * doSubmit(event);
38
+ * });
39
+ */
40
+ doSubmit(event: SubmitEvent): void;
41
+ componentWillLoad(): void;
42
+ componentWillRender(): void;
43
+ /**
44
+ * Creates a new HTMLSelectElement with a set of options.
45
+ *
46
+ * @param {string} formKey - The name of the dropdown field, as specified in the form schema.
47
+ * @param {Object} formProperties - An object containing additional properties, such as the field type and options properties.
48
+ * @param {'select'} formProperties.type - The type of form field. In this case, it will always be "select".
49
+ * @param {Object} formProperties.validation - A set of validation rules for the field.
50
+ * @param {Object[]} formProperties.options - A list of properties to pass to the select options.
51
+ * @param {string} formProperties.options.label - The visible value of the option.
52
+ * @param {string} formProperties.options.value - The actual value of the option.
53
+ */
54
+ createSelect(formKey: string, formProperties: any): HTMLSelectElement;
55
+ /**
56
+ * Appends an option to a select element
57
+ *
58
+ * @param {HTMLSelectElement} select - The select elements to attach the option to.
59
+ * @param {value} value - The value of the option.
60
+ * @param {label} label - The label which will be displayed on the form for the option.
61
+ */
62
+ appendOption(select: any, optionProperties: any): void;
63
+ /**
64
+ * Creates a new HTMLInputElement with the specified name, type, and placeholder (if any),
65
+ * and sets its autocomplete and autocapitalization properties to off.
66
+ *
67
+ * @param {string} formKey - The name of the input field, as specified in the form schema.
68
+ * @param {Object} formProperties - An object containing additional properties for the input field, such as its type and placeholder value.
69
+ * @param {string} formProperties.type - The type of the input field (e.g., "text", "email", "number", etc.).
70
+ * @param {string} [formProperties.placeholder] - An optional placeholder value to display in the input field.
71
+ * @return {HTMLInputElement} - The new input element.
72
+ */
73
+ createInput(formKey: any, formProperties: any): HTMLInputElement;
74
+ /**
75
+ * Applies validation attributes to an input element based on the specified validation object.
76
+ * If a certain property is present in the object, it will set the corresponding attribute on
77
+ * the input element (e.g., "required" will set the "required" and "data-required" attributes,
78
+ * "pattern" will set the "pattern" and "data-pattern" attributes, etc.).
79
+ *
80
+ * @param {HTMLInputElement} input - The input element to apply validation attributes to.
81
+ * @param {Object} validation - An object containing the validation rules for the input field.
82
+ * @param {Object} [validation.required] - An object containing a "message" property to display if the field is required.
83
+ * @param {Object} [validation.pattern] - An object containing a "pattern" property to match against the field value, and a "message" property to display if the pattern doesn't match.
84
+ * @param {Object} [validation.badInput] - An object containing a "message" property to display if the field value is invalid.
85
+ * @param {Object} [validation.minmax] - An object containing "min" and "max" properties to validate the field value against, and a "message" property to display if the value is out of range.
86
+ * @param {string} [validation.maxlength] - The maximum length of the input field.
87
+ * @return {void}
88
+ */
89
+ applyValidation(input: any, validation: any): void;
90
+ createErrorBubble(): HTMLDivElement;
91
+ appendCheckboxInput(formProperties: any, input: any, label: any): void;
92
+ /**
93
+ * Creates a new <label> element with the "inputBlock" class and the specified label text,
94
+ * and appends the input element and error bubble element to it. If the form property has
95
+ * no validation object, it adds an "optional" span element to the label.
96
+ *
97
+ * @param {Object} formProperties - An object containing properties for the form field, including its label text and validation rules.
98
+ * @param {HTMLInputElement} input - The input element to associate with the label.
99
+ * @param {HTMLDivElement} errorBubble - The error bubble element to display error messages in.
100
+ * @return {HTMLLabelElement} - The new label element.
101
+ */
102
+ createLabel(formProperties: any, input: any, errorBubble: any): HTMLLabelElement;
103
+ /**
104
+ * Populates the form template with input fields and labels based on the properties of the
105
+ * current form schema. For each property in the schema, it creates an input element, applies
106
+ * any validation rules to it, creates an error bubble and label element, and appends them
107
+ * to the form template. Finally, it creates and appends a submit button element to the form.
108
+ *
109
+ * @return {void}
110
+ */
111
+ populateFormFromSchema(): void;
112
+ /**
113
+ * Clones the form template and binds event listeners to its input elements. First, it checks if
114
+ * there is a form schema present. If so, it clones the template's content, binds events to form
115
+ * input elements, and appends the cloned form elements to the fieldset. The event listeners include
116
+ * "oninvalid" (to check input validity on submit), "onblur" (to check input validity on blur),
117
+ * "onkeyup" (to handle changes in input fields), and "onchange" (to handle changes in select fields).
118
+ *
119
+ * @return {void}
120
+ */
121
+ componentDidRender(): void;
122
+ validityCheckWrapper(event: any): void;
123
+ /**
124
+ * Renders the component's template as a form element with a fieldset container. The form's
125
+ * "onSubmit" event is bound to the "doSubmit" function, which handles the form submission
126
+ * and emits a "dataSubmitted" event with the form data. The fieldset element is assigned
127
+ * to the "fieldset" instance variable using a ref, so it can be populated with form elements
128
+ * later on.
129
+ *
130
+ * @return {JSX.Element} - The rendered form template as a JSX element.
131
+ */
132
+ render(): any;
133
+ }