@luftborn/custom-elements 1.4.0 → 1.4.1

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 (196) hide show
  1. package/README.md +2 -2
  2. package/assets/style.css +277 -277
  3. package/azure-pipeline.yml +54 -0
  4. package/demo/index.html +585 -585
  5. package/demo/index.js +6109 -0
  6. package/demo/index.min.js +6110 -0
  7. package/demo/index.min.js.map +1 -0
  8. package/demo/index.ts +11 -11
  9. package/demo/old/index.html +586 -586
  10. package/demo/old/index.js +10849 -10849
  11. package/demo/old/index.min.js +10850 -10850
  12. package/demo/old/index.ts +10 -10
  13. package/dist/custom-form.d.ts +20 -20
  14. package/dist/custom-form.js +147 -147
  15. package/dist/elements/Address/AddressElement.d.ts +28 -28
  16. package/dist/elements/Address/AddressElement.js +206 -206
  17. package/dist/elements/BankField/BankFieldElement.d.ts +22 -22
  18. package/dist/elements/BankField/BankFieldElement.js +127 -127
  19. package/dist/elements/CPRElement/CPRElement.d.ts +14 -14
  20. package/dist/elements/CPRElement/CPRElement.js +82 -82
  21. package/dist/elements/CVRElement/CVRElement.d.ts +14 -14
  22. package/dist/elements/CVRElement/CVRElement.js +82 -82
  23. package/dist/elements/CheckBoxElement/CheckBoxElement.d.ts +14 -14
  24. package/dist/elements/CheckBoxElement/CheckBoxElement.js +96 -96
  25. package/dist/elements/CustomRegularExpression/CustomRegularExpressionElement.d.ts +12 -12
  26. package/dist/elements/CustomRegularExpression/CustomRegularExpressionElement.js +82 -82
  27. package/dist/elements/DateField/DateFieldElement.d.ts +12 -12
  28. package/dist/elements/DateField/DateFieldElement.js +85 -85
  29. package/dist/elements/DropDownList/DropDownListElement.d.ts +14 -14
  30. package/dist/elements/DropDownList/DropDownListElement.js +93 -93
  31. package/dist/elements/Elements.d.ts +18 -18
  32. package/dist/elements/Elements.js +37 -37
  33. package/dist/elements/EmailField/EmailFieldElement.d.ts +13 -13
  34. package/dist/elements/EmailField/EmailFieldElement.js +83 -83
  35. package/dist/elements/FileField/FileFieldElement.d.ts +15 -15
  36. package/dist/elements/FileField/FileFieldElement.js +103 -103
  37. package/dist/elements/IdentificationElement/IdentificationElement.d.ts +18 -18
  38. package/dist/elements/IdentificationElement/IdentificationElement.js +94 -94
  39. package/dist/elements/InternationaPhoneNumber/InternationaPhoneNumberElement.d.ts +16 -16
  40. package/dist/elements/InternationaPhoneNumber/InternationaPhoneNumberElement.js +114 -114
  41. package/dist/elements/NumericField/NumericFieldElement.d.ts +12 -12
  42. package/dist/elements/NumericField/NumericFieldElement.js +91 -91
  43. package/dist/elements/RadioButtonGroup/RadioButtonGroupElement.d.ts +14 -14
  44. package/dist/elements/RadioButtonGroup/RadioButtonGroupElement.js +99 -99
  45. package/dist/elements/TextAreaElement/TextAreaElement.d.ts +12 -12
  46. package/dist/elements/TextAreaElement/TextAreaElement.js +79 -79
  47. package/dist/elements/TextField/TextFieldElement.d.ts +12 -12
  48. package/dist/elements/TextField/TextFieldElement.js +79 -79
  49. package/dist/elements/TypeAhead/TypeAheadElement.d.ts +24 -24
  50. package/dist/elements/TypeAhead/TypeAheadElement.js +209 -209
  51. package/dist/framework/CustomEvents.d.ts +21 -21
  52. package/dist/framework/CustomEvents.js +47 -47
  53. package/dist/framework/CustomInputElement.d.ts +50 -50
  54. package/dist/framework/CustomInputElement.js +258 -258
  55. package/dist/framework/Language/Languages/Base/BaseDictionary.d.ts +4 -4
  56. package/dist/framework/Language/Languages/Base/BaseDictionary.js +20 -20
  57. package/dist/framework/Language/Languages/CzechDictionary.d.ts +4 -4
  58. package/dist/framework/Language/Languages/CzechDictionary.js +39 -39
  59. package/dist/framework/Language/Languages/DanishDictionary.d.ts +4 -4
  60. package/dist/framework/Language/Languages/DanishDictionary.js +39 -39
  61. package/dist/framework/Language/Languages/DutchDictionary.d.ts +4 -4
  62. package/dist/framework/Language/Languages/DutchDictionary.js +39 -39
  63. package/dist/framework/Language/Languages/EnglishDictionary.d.ts +4 -4
  64. package/dist/framework/Language/Languages/EnglishDictionary.js +39 -39
  65. package/dist/framework/Language/Languages/EstonianDictionary.d.ts +4 -4
  66. package/dist/framework/Language/Languages/EstonianDictionary.js +39 -39
  67. package/dist/framework/Language/Languages/FinnishDictionary.d.ts +4 -4
  68. package/dist/framework/Language/Languages/FinnishDictionary.js +39 -39
  69. package/dist/framework/Language/Languages/FrenchDictionary.d.ts +4 -4
  70. package/dist/framework/Language/Languages/FrenchDictionary.js +39 -39
  71. package/dist/framework/Language/Languages/GermanDictionary.d.ts +4 -4
  72. package/dist/framework/Language/Languages/GermanDictionary.js +39 -39
  73. package/dist/framework/Language/Languages/GreekDictionary.d.ts +4 -4
  74. package/dist/framework/Language/Languages/GreekDictionary.js +39 -39
  75. package/dist/framework/Language/Languages/HungarianDictionary.d.ts +4 -4
  76. package/dist/framework/Language/Languages/HungarianDictionary.js +39 -39
  77. package/dist/framework/Language/Languages/IcelandicDictionary.d.ts +4 -4
  78. package/dist/framework/Language/Languages/IcelandicDictionary.js +39 -39
  79. package/dist/framework/Language/Languages/ItalianDictionary.d.ts +4 -4
  80. package/dist/framework/Language/Languages/ItalianDictionary.js +39 -39
  81. package/dist/framework/Language/Languages/LatvianDictionary.d.ts +4 -4
  82. package/dist/framework/Language/Languages/LatvianDictionary.js +39 -39
  83. package/dist/framework/Language/Languages/LituanianDictionary.d.ts +4 -4
  84. package/dist/framework/Language/Languages/LituanianDictionary.js +39 -39
  85. package/dist/framework/Language/Languages/NorwegianDictionary.d.ts +4 -4
  86. package/dist/framework/Language/Languages/NorwegianDictionary.js +39 -39
  87. package/dist/framework/Language/Languages/PolishDictionary.d.ts +4 -4
  88. package/dist/framework/Language/Languages/PolishDictionary.js +39 -39
  89. package/dist/framework/Language/Languages/PortugueseDictionary.d.ts +4 -4
  90. package/dist/framework/Language/Languages/PortugueseDictionary.js +39 -39
  91. package/dist/framework/Language/Languages/SpanishDictionary.d.ts +4 -4
  92. package/dist/framework/Language/Languages/SpanishDictionary.js +39 -39
  93. package/dist/framework/Language/Languages/SwedishDictionary.d.ts +4 -4
  94. package/dist/framework/Language/Languages/SwedishDictionary.js +39 -39
  95. package/dist/framework/Language/Translator.d.ts +23 -23
  96. package/dist/framework/Language/Translator.js +115 -115
  97. package/dist/framework/Models/OptionWithDescription.d.ts +6 -6
  98. package/dist/framework/Models/OptionWithDescription.js +9 -9
  99. package/dist/framework/Polyfills/getAttributeNamesPolyfill.d.ts +1 -1
  100. package/dist/framework/Polyfills/getAttributeNamesPolyfill.js +17 -17
  101. package/dist/framework/Translations/CaseConverter.d.ts +5 -5
  102. package/dist/framework/Translations/CaseConverter.js +50 -50
  103. package/dist/framework/Utilities/ArrayUtil.d.ts +6 -6
  104. package/dist/framework/Utilities/ArrayUtil.js +36 -36
  105. package/dist/framework/Utilities/DomUtil.d.ts +21 -21
  106. package/dist/framework/Utilities/DomUtil.js +101 -101
  107. package/dist/framework/Utilities/DomUtility.d.ts +3 -3
  108. package/dist/framework/Utilities/DomUtility.js +12 -12
  109. package/dist/framework/Utilities/MakeRequest.d.ts +8 -8
  110. package/dist/framework/Utilities/MakeRequest.js +48 -48
  111. package/dist/framework/Utilities/StringUtil.d.ts +4 -4
  112. package/dist/framework/Utilities/StringUtil.js +16 -16
  113. package/dist/framework/Utilities/ViewportUtil.d.ts +8 -8
  114. package/dist/framework/Utilities/ViewportUtil.js +42 -42
  115. package/dist/framework/Utilities/debouncer.d.ts +8 -8
  116. package/dist/framework/Utilities/debouncer.js +51 -51
  117. package/dist/framework/Validation/IValidator.interface.d.ts +3 -3
  118. package/dist/framework/Validation/IValidator.interface.js +2 -2
  119. package/dist/framework/Validation/Validators/BankAccount.d.ts +4 -4
  120. package/dist/framework/Validation/Validators/BankAccount.js +12 -12
  121. package/dist/framework/Validation/Validators/BankAccountRegistrationNumber.d.ts +4 -4
  122. package/dist/framework/Validation/Validators/BankAccountRegistrationNumber.js +12 -12
  123. package/dist/framework/Validation/Validators/BankIdNorway.d.ts +5 -5
  124. package/dist/framework/Validation/Validators/BankIdNorway.js +21 -21
  125. package/dist/framework/Validation/Validators/BankIdSweden.d.ts +5 -5
  126. package/dist/framework/Validation/Validators/BankIdSweden.js +21 -21
  127. package/dist/framework/Validation/Validators/CPR.d.ts +9 -9
  128. package/dist/framework/Validation/Validators/CPR.js +75 -75
  129. package/dist/framework/Validation/Validators/CVR.d.ts +5 -5
  130. package/dist/framework/Validation/Validators/CVR.js +30 -30
  131. package/dist/framework/custom-element.decorator.d.ts +9 -9
  132. package/dist/framework/custom-element.decorator.js +51 -51
  133. package/dist/index.d.ts +7 -7
  134. package/dist/index.js +14 -14
  135. package/package.json +38 -38
  136. package/src/custom-form.ts +140 -140
  137. package/src/elements/Address/AddressElement.ts +216 -216
  138. package/src/elements/BankField/BankFieldElement.ts +127 -127
  139. package/src/elements/CPRElement/CPRElement.ts +74 -74
  140. package/src/elements/CVRElement/CVRElement.ts +75 -75
  141. package/src/elements/CheckBoxElement/CheckBoxElement.ts +99 -99
  142. package/src/elements/CustomRegularExpression/CustomRegularExpressionElement.ts +75 -75
  143. package/src/elements/DateField/DateFieldElement.ts +78 -78
  144. package/src/elements/DropDownList/DropDownListElement.ts +100 -100
  145. package/src/elements/Elements.ts +37 -37
  146. package/src/elements/EmailField/EmailFieldElement.ts +78 -78
  147. package/src/elements/FileField/FileFieldElement.ts +96 -96
  148. package/src/elements/IdentificationElement/IdentificationElement.ts +104 -104
  149. package/src/elements/InternationaPhoneNumber/InternationaPhoneNumberElement.ts +116 -116
  150. package/src/elements/NumericField/NumericFieldElement.ts +84 -84
  151. package/src/elements/RadioButtonGroup/RadioButtonGroupElement.ts +103 -103
  152. package/src/elements/TextAreaElement/TextAreaElement.ts +72 -72
  153. package/src/elements/TextField/TextFieldElement.ts +72 -72
  154. package/src/elements/TypeAhead/TypeAheadElement.ts +248 -248
  155. package/src/framework/CustomEvents.ts +47 -47
  156. package/src/framework/CustomInputElement.ts +277 -277
  157. package/src/framework/Language/Languages/Base/BaseDictionary.ts +15 -15
  158. package/src/framework/Language/Languages/CzechDictionary.ts +18 -18
  159. package/src/framework/Language/Languages/DanishDictionary.ts +17 -17
  160. package/src/framework/Language/Languages/DutchDictionary.ts +17 -17
  161. package/src/framework/Language/Languages/EnglishDictionary.ts +18 -18
  162. package/src/framework/Language/Languages/EstonianDictionary.ts +17 -17
  163. package/src/framework/Language/Languages/FinnishDictionary.ts +17 -17
  164. package/src/framework/Language/Languages/FrenchDictionary.ts +17 -17
  165. package/src/framework/Language/Languages/GermanDictionary.ts +17 -17
  166. package/src/framework/Language/Languages/GreekDictionary.ts +17 -17
  167. package/src/framework/Language/Languages/HungarianDictionary.ts +17 -17
  168. package/src/framework/Language/Languages/IcelandicDictionary.ts +17 -17
  169. package/src/framework/Language/Languages/ItalianDictionary.ts +17 -17
  170. package/src/framework/Language/Languages/LatvianDictionary.ts +17 -17
  171. package/src/framework/Language/Languages/LituanianDictionary.ts +17 -17
  172. package/src/framework/Language/Languages/NorwegianDictionary.ts +17 -17
  173. package/src/framework/Language/Languages/PolishDictionary.ts +17 -17
  174. package/src/framework/Language/Languages/PortugueseDictionary.ts +17 -17
  175. package/src/framework/Language/Languages/SpanishDictionary.ts +17 -17
  176. package/src/framework/Language/Languages/SwedishDictionary.ts +17 -17
  177. package/src/framework/Language/Translator.ts +110 -110
  178. package/src/framework/Models/OptionWithDescription.ts +8 -8
  179. package/src/framework/Polyfills/getAttributeNamesPolyfill.ts +13 -13
  180. package/src/framework/Translations/CaseConverter.ts +43 -43
  181. package/src/framework/Utilities/ArrayUtil.ts +31 -31
  182. package/src/framework/Utilities/DomUtil.ts +117 -117
  183. package/src/framework/Utilities/DomUtility.ts +6 -6
  184. package/src/framework/Utilities/MakeRequest.ts +47 -47
  185. package/src/framework/Utilities/StringUtil.ts +8 -8
  186. package/src/framework/Utilities/ViewportUtil.ts +46 -46
  187. package/src/framework/Utilities/debouncer.ts +66 -66
  188. package/src/framework/Validation/IValidator.interface.ts +3 -3
  189. package/src/framework/Validation/Validators/BankAccount.ts +7 -7
  190. package/src/framework/Validation/Validators/BankAccountRegistrationNumber.ts +8 -8
  191. package/src/framework/Validation/Validators/BankIdNorway.ts +21 -21
  192. package/src/framework/Validation/Validators/BankIdSweden.ts +21 -21
  193. package/src/framework/Validation/Validators/CPR.ts +82 -82
  194. package/src/framework/Validation/Validators/CVR.ts +27 -27
  195. package/src/framework/custom-element.decorator.ts +57 -57
  196. package/src/index.ts +12 -12
package/demo/index.html CHANGED
@@ -1,586 +1,586 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
-
4
- <head>
5
- <meta charset="UTF-8">
6
- <title>Custom Elements</title>
7
-
8
-
9
- <link rel="stylesheet" href="../assets/style.css">
10
- <style>
11
- .invalid .box {
12
- padding: 0;
13
- border: 1px solid red;
14
- }
15
-
16
- .invalid .field-label {
17
- margin-top: 0 !important;
18
- color: red !important;
19
- }
20
-
21
- .invalid .invalid-message {
22
- display: inline-block !important;
23
- background-color: red;
24
- color: #FFFFFF;
25
- font-size: 13px;
26
- line-height: 21px;
27
- border-radius: 4px 4px 0px 0px;
28
- padding: 3px 8px 0 8px;
29
- margin-top: 5px;
30
- margin-bottom: 0 !important;
31
- }
32
- </style>
33
- </head>
34
-
35
- <body class="A4">
36
- <header class="header header-bgcolor-dark">
37
- <div class="container">
38
- <div class="head ">
39
- <h1 class="head-title head-title-white">Standart Blanket</h1>
40
- </div>
41
- </div>
42
- </header>
43
- <main>
44
- <section class="head-subtitles">
45
- <div class="container">
46
- <h6 class="head-subtitle text-bold">Standard blanket over esignaturs felter</h6>
47
- <h6 class="head-subtitle text-bold">Flette felter og ikke flette felter</h6>
48
- <h6 class="head-subtitle">Disse er de felter der kan flettes ind fra på pdf’en og felter der ikke kan flettes
49
- ind</h6>
50
- </div>
51
- </section>
52
- <section class="form">
53
- <div class="container">
54
- <form action="/" method="POST">
55
- <div class="field-group group-container" data-depends-on='' data-dependent-value=''>
56
- <div class="field-group-title border-solid">
57
- Group1:
58
- </div>
59
- <div class="field-group-content">
60
- <div class="group-row">
61
- <div class="field-item custom-validation-target">
62
- <span class="invalid-message" style="display: none">Select an department</span>
63
- <div class="field-item">
64
- <div class="field-label">Department: </div>
65
- <div class="field-input">
66
- <type-ahead-element>
67
- <script type="application/json">
68
- {
69
- "label": "department label",
70
- "name": "department name",
71
- "type": "type-ahead-element",
72
- "required": true,
73
- "noValueDependency": null,
74
- "hasValueDependency": null,
75
- "optionsWithDescriptions": [{
76
- "title": "HR",
77
- "value": "Dept001",
78
- "description": "HR department"
79
- },
80
- {
81
- "title": "Finance",
82
- "value": "Dept002",
83
- "description": "Financial department"
84
- },
85
- {
86
- "title": "Sales",
87
- "value": "Dept003",
88
- "description": "Sales department"
89
- },
90
- {
91
- "title": "Marketing",
92
- "value": "Dept004",
93
- "description": "Marketing department"
94
- },
95
- {
96
- "title": "IT",
97
- "value": "Dept005",
98
- "description": "Information Technology department"
99
- },
100
- {
101
- "title": "Finance",
102
- "value": "Dept002",
103
- "description": "Financial department"
104
- },
105
- {
106
- "title": "Sales",
107
- "value": "Dept003",
108
- "description": "Sales department"
109
- },
110
- {
111
- "title": "Marketing",
112
- "value": "Dept004",
113
- "description": "Marketing department"
114
- },
115
- {
116
- "title": "IT",
117
- "value": "Dept005",
118
- "description": "Information Technology department"
119
- },
120
- {
121
- "title": "Finance",
122
- "value": "Dept002",
123
- "description": "Financial department"
124
- },
125
- {
126
- "title": "Sales",
127
- "value": "Dept003",
128
- "description": "Sales department"
129
- },
130
- {
131
- "title": "Marketing",
132
- "value": "Dept004",
133
- "description": "Marketing department"
134
- },
135
- {
136
- "title": "IT",
137
- "value": "Dept005",
138
- "description": "Information Technology department"
139
- },
140
- {
141
- "title": "Finance",
142
- "value": "Dept002",
143
- "description": "Financial department"
144
- },
145
- {
146
- "title": "Sales",
147
- "value": "Dept003",
148
- "description": "Sales department"
149
- },
150
- {
151
- "title": "Marketing",
152
- "value": "Dept004",
153
- "description": "Marketing department"
154
- },
155
- {
156
- "title": "IT",
157
- "value": "Dept005",
158
- "description": "Information Technology department"
159
- }
160
- ]
161
- }
162
- </script>
163
- </type-ahead-element>
164
- </div>
165
- </div>
166
- </div>
167
- </div>
168
- <div class="group-row">
169
- <div class="field-item custom-validation-target">
170
- <span class="invalid-message" style="display: none">Enter a valid Address</span>
171
- <div class="field-item">
172
- <div class="field-label">Address: </div>
173
- <div class="field-input">
174
- <address-element language="en" google-places-key="AIzaSyCR6bpBitIMQgHHd7Mm2-q_-0CoeeHvxbA" enable-auto-complete="true">
175
- <script type="application/json">
176
- {
177
- "label": "Adress label",
178
- "name": "Adress name",
179
- "type": "address-element",
180
- "required": true,
181
- "noValueDependency": null,
182
- "hasValueDependency": null
183
- }
184
- </script>
185
- </address-element>
186
- </div>
187
- </div>
188
-
189
- <div class="field-item">
190
- <div class="field-label">Address: </div>
191
- <div class="field-input">
192
- <address-element language="en" google-places-key="AIzaSyCR6bpBitIMQgHHd7Mm2-q_-0CoeeHvxbA" enable-auto-complete="false">
193
- <script type="application/json">
194
- {
195
- "label": "Adress label",
196
- "name": "Adress 1",
197
- "type": "address-element",
198
- "required": true,
199
- "noValueDependency": null,
200
- "hasValueDependency": null
201
- }
202
- </script>
203
- </address-element>
204
- </div>
205
- </div>
206
- <div class="field-item">
207
- <div class="field-label">Address: </div>
208
- <div class="field-input">
209
- <address-element language="en" google-places-key="AIzaSyCR6bpBitIMQgHHd7Mm2-q_-0CoeeHvxbA" enable-auto-complete="false">
210
- <script type="application/json">
211
- {
212
- "label": "Adress label",
213
- "name": "Adress 1",
214
- "type": "address-element",
215
- "required": true,
216
- "noValueDependency": null,
217
- "hasValueDependency": null
218
- }
219
- </script>
220
- </address-element>
221
- </div>
222
- </div>
223
- <div class="field-item">
224
- <div class="field-label">Address: </div>
225
- <div class="field-input">
226
- <address-element language="en" google-places-key="AIzaSyCR6bpBitIMQgHHd7Mm2-q_-0CoeeHvxbA" enable-auto-complete="false">
227
- <script type="application/json">
228
- {
229
- "label": "Adress label",
230
- "name": "Adress 2",
231
- "type": "address-element",
232
- "required": true,
233
- "noValueDependency": null,
234
- "hasValueDependency": null
235
- }
236
- </script>
237
- </address-element>
238
- </div>
239
- </div>
240
- <div class="field-item">
241
- <div class="field-label">Address: </div>
242
- <div class="field-input">
243
- <address-element language="en" google-places-key="AIzaSyCR6bpBitIMQgHHd7Mm2-q_-0CoeeHvxbA" enable-auto-complete="false">
244
- <script type="application/json">
245
- {
246
- "label": "Adress label",
247
- "name": "Adress 3",
248
- "type": "address-element",
249
- "required": true,
250
- "noValueDependency": null,
251
- "hasValueDependency": null
252
- }
253
- </script>
254
- </address-element>
255
- </div>
256
- </div>
257
- <div class="field-item">
258
- <div class="field-label">Address: </div>
259
- <div class="field-input">
260
- <address-element language="en" google-places-key="AIzaSyCR6bpBitIMQgHHd7Mm2-q_-0CoeeHvxbA" enable-auto-complete="false">
261
- <script type="application/json">
262
- {
263
- "label": "Adress label",
264
- "name": "Adress 4",
265
- "type": "address-element",
266
- "required": true,
267
- "noValueDependency": null,
268
- "hasValueDependency": null
269
- }
270
- </script>
271
- </address-element>
272
- </div>
273
- </div>
274
- <div class="field-item">
275
- <div class="field-label">Address: </div>
276
- <div class="field-input">
277
- <address-element language="en" google-places-key="AIzaSyCR6bpBitIMQgHHd7Mm2-q_-0CoeeHvxbA" enable-auto-complete="false">
278
- <script type="application/json">
279
- {
280
- "label": "Adress label",
281
- "name": "Adress 5",
282
- "type": "address-element",
283
- "required": true,
284
- "noValueDependency": null,
285
- "hasValueDependency": null
286
- }
287
- </script>
288
- </address-element>
289
- </div>
290
- </div>
291
- <div class="field-item">
292
- <div class="field-label">Bank: </div>
293
- <div class="field-input">
294
- <bank-element language="da">
295
- <script type="application/json">
296
- {
297
- "label": "Bank label",
298
- "name": "Bank name",
299
- "type": "bank-element",
300
- "required": true,
301
- "noValueDependency": null,
302
- "hasValueDependency": null
303
- }
304
- </script>
305
- </bank-element>
306
- </div>
307
- </div>
308
- <div class="field-item">
309
- <div class="field-label">CVR: </div>
310
- <div class="field-input">
311
- <cvr-element>
312
- <script type="application/json">
313
- {
314
- "label": "CVR label",
315
- "name": "CVR name",
316
- "type": "cvr-element",
317
- "required": true,
318
- "noValueDependency": null,
319
- "hasValueDependency": null
320
- }
321
- </script>
322
- </bank-element>
323
- </div>
324
- </div>
325
- </div>
326
- </div>
327
- <div class="group-row">
328
- <div class="field-item">
329
- <div class="field-label">Navn: </div>
330
- <div class="field-input">
331
- <text-element>
332
- <script type="application/json">
333
- {
334
- "label": "Name",
335
- "name": "name",
336
- "value": null,
337
- "type": "Text",
338
- "required": true,
339
- "options": [],
340
- "noValueDependency": null,
341
- "hasValueDependency": null,
342
- "dependencies": [{
343
- "value": "peter",
344
- "criteria": "Exact",
345
- "items": ["email"]
346
- }]
347
- }
348
- </script>
349
- </text-element>
350
- </div>
351
- </div>
352
- <div class="field-item custom-validation-target">
353
- <span class="invalid-message" style="display: none">Enter a valid checkbox</span>
354
- <div class="field-item">
355
- <div class="field-label">Display G2: </div>
356
- <div class="field-input">
357
- <checkbox-element>
358
- <script type="application/json">
359
- {
360
- "label": "Checkbox",
361
- "name": "checkbox1",
362
- "value": null,
363
- "type": "checkbox",
364
- "required": false,
365
- "options": ["Ja", "Nej"],
366
- "noValueDependency": null,
367
- "hasValueDependency": null,
368
- "dependencies": [{
369
- "value": "Ja",
370
- "criteria": "Exact",
371
- "items": ["email2"]
372
- }]
373
- }
374
- </script>
375
- </checkbox-element>
376
- </div>
377
- </div>
378
- </div>
379
- <div class="field-item custom-validation-target">
380
- <span class="invalid-message" style="display: none">Enter a valid phone</span>
381
- <div class="field-item">
382
- <div class="field-label">Phone: </div>
383
- <div class="field-input">
384
- <int-phone-element>
385
- <script type="application/json">
386
- {
387
- "label": "Int Phone",
388
- "name": "int-phone-element1",
389
- "value": null,
390
- "type": "int-phone-element",
391
- "required": true,
392
- "noValueDependency": null,
393
- "hasValueDependency": null
394
- }
395
- </script>
396
- </int-phone-element>
397
- </div>
398
- </div>
399
- </div>
400
- </div>
401
- <div class="group-row">
402
- <div class="field-item">
403
- <div class="field-label">Number of Abas: </div>
404
- <div class="field-input">
405
- <radio-group-element>
406
- <script type="application/json">
407
- {
408
- "label": "Radio Test",
409
- "name": "radio1",
410
- "value": null,
411
- "type": "radio",
412
- "required": false,
413
- "options": ["One", "Two", "Three"],
414
- "noValueDependency": null,
415
- "hasValueDependency": null,
416
- "dependencies": []
417
- }
418
- </script>
419
- </radio-group-element>
420
- </div>
421
- </div>
422
- </div>
423
- <div class="group-row">
424
- <div class="field-item">
425
- <div class="field-label">E-mail: </div>
426
- <div class="field-input">
427
- <email-element>
428
- <script type="text/json">
429
- {
430
- "label": "E-mail",
431
- "name": "email",
432
- "value": null,
433
- "type": "email",
434
- "required": false,
435
- "options": [],
436
- "noValueDependency": null,
437
- "hasValueDependency": null,
438
- "dependencies": [{
439
- "value": "peter@luftborn.com",
440
- "criteria": "Exact",
441
- "items": ["address"]
442
- }]
443
- }
444
- </script>
445
- </email-element>
446
- </div>
447
- </div>
448
-
449
- </div>
450
- </div>
451
- </div>
452
- <div class="field-group group-container" data-depends-on="checkbox1" data-dependent-value="Ja">
453
- <div class="field-group-title border-solid">
454
- Group2:
455
- </div>
456
- <div class="field-group-content">
457
- <div class="group-row">
458
- <div class="field-item custom-validation-target">
459
- <div class="field-item">
460
- <div class="field-label">Display G3: </div>
461
- <div class="field-input">
462
- <checkbox-element>
463
- <script type="application/json">
464
- {
465
- "label": "Checkbox",
466
- "name": "checkbox2",
467
- "value": null,
468
- "type": "checkbox",
469
- "required": false,
470
- "options": ["Ja", "Nej"],
471
- "noValueDependency": null,
472
- "hasValueDependency": null,
473
- "dependencies": [{
474
- "value": "Ja",
475
- "criteria": "Exact",
476
- "items": ["email2"]
477
- }]
478
- }
479
- </script>
480
- </checkbox-element>
481
- </div>
482
- </div>
483
- </div>
484
- </div>
485
-
486
- </div>
487
- </div>
488
- <div class="field-group group-container" data-depends-on="checkbox2" data-dependent-value="Ja">
489
- <div class="field-group-title border-solid">
490
- Group 3:
491
- </div>
492
- <div class="field-group-content">
493
- <div class="group-row">
494
- <div class="field-item">
495
- <div class="field-label">FileUpload (ikke fletbart): </div>
496
- <div class="field-input">
497
- <file-element>
498
- <script type="application/json">
499
- {
500
- "label": "FileUpload",
501
- "name": "files2",
502
- "value": null,
503
- "type": "file",
504
- "multi": false,
505
- "required": false,
506
- "options": [],
507
- "noValueDependency": null,
508
- "hasValueDependency": null,
509
- "dependencies": []
510
- }
511
- </script>
512
- </file-element>
513
- </div>
514
- </div>
515
- </div>
516
- <div class="group-row">
517
- <div class="custom-validation-target">
518
- <span class="invalid-message">
519
- EnterValid Checkbox
520
- </span>
521
- <div class="field-item">
522
- <div class="field-label">Checkbox:</div>
523
- <div class="field-input">
524
- <checkbox-element custom-input="" name="Checkbox0" style="width: 100%;">
525
- <script type="application/json">
526
- {"label":"Checkbox","name":"Checkbox0","tempId":null,"value":null,"type":7,"required":false,"allDependenciesMustBeMet":false,"multi":false,"min":null,"max":null,"step":null,"options":["1","2"],"optionsWithDescriptions":[],"addressAutoComplete":true,"noValueDependency":{"value":"","criteria":"Exact","items":["File7"]},"hasValueDependency":{"value":"","criteria":"Exact","items":["CVR6"]},"dependencies":[{"value":"1","criteria":"Exact","items":["Date1"]},{"value":"2","criteria":"Exact","items":["Date1","Tel2"]}]}
527
- </script>
528
- </checkbox-element>
529
-
530
- </div>
531
- </div>
532
- </div>
533
- </div>
534
- <div class="group-row">
535
- <div class="custom-validation-target">
536
- <span class="invalid-message">
537
- EnterValid Date
538
- </span>
539
- <div class="field-item">
540
- <div class="field-label">Date:</div>
541
- <div class="field-input">
542
-
543
-
544
-
545
- <date-element custom-input="" name="Date1" style="width: 100%;">
546
- <script type="application/json">
547
- {"label":"Date","name":"Date1","tempId":null,"value":null,"type":3,"required":false,"allDependenciesMustBeMet":false,"multi":false,"min":null,"max":null,"step":null,"options":[],"optionsWithDescriptions":[],"addressAutoComplete":true,"noValueDependency":{"value":"","criteria":"Exact","items":[]},"hasValueDependency":{"value":"","criteria":"Exact","items":[]},"dependencies":[]}
548
- </script>
549
- </date-element>
550
-
551
- </div>
552
- </div>
553
- </div>
554
- </div>
555
- <div class="group-row">
556
- <div class="custom-validation-target">
557
- <span class="invalid-message">
558
- EnterValid Tel
559
- </span>
560
- <div class="field-item">
561
- <div class="field-label">Tel:</div>
562
- <div class="field-input">
563
-
564
-
565
-
566
- <int-phone-element custom-input="" name="Tel2" style="width: 100%;">
567
- <script type="application/json">
568
- {"label":"Tel","name":"Tel2","tempId":null,"value":null,"type":5,"required":false,"allDependenciesMustBeMet":false,"multi":false,"min":null,"max":null,"step":null,"options":[],"optionsWithDescriptions":[],"addressAutoComplete":true,"noValueDependency":{"value":"","criteria":"Exact","items":[]},"hasValueDependency":{"value":"","criteria":"Exact","items":[]},"dependencies":[]}
569
- </script>
570
- </int-phone-element>
571
-
572
- </div>
573
- </div>
574
- </div>
575
- </div>
576
- </div>
577
- </div>
578
- <input type="submit" value="send">
579
- </form>
580
- </div>
581
- </section>
582
- </main>
583
- <script src="/demo/index.js"></script>
584
- </body>
585
-
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <title>Custom Elements</title>
7
+
8
+
9
+ <link rel="stylesheet" href="../assets/style.css">
10
+ <style>
11
+ .invalid .box {
12
+ padding: 0;
13
+ border: 1px solid red;
14
+ }
15
+
16
+ .invalid .field-label {
17
+ margin-top: 0 !important;
18
+ color: red !important;
19
+ }
20
+
21
+ .invalid .invalid-message {
22
+ display: inline-block !important;
23
+ background-color: red;
24
+ color: #FFFFFF;
25
+ font-size: 13px;
26
+ line-height: 21px;
27
+ border-radius: 4px 4px 0px 0px;
28
+ padding: 3px 8px 0 8px;
29
+ margin-top: 5px;
30
+ margin-bottom: 0 !important;
31
+ }
32
+ </style>
33
+ </head>
34
+
35
+ <body class="A4">
36
+ <header class="header header-bgcolor-dark">
37
+ <div class="container">
38
+ <div class="head ">
39
+ <h1 class="head-title head-title-white">Standart Blanket</h1>
40
+ </div>
41
+ </div>
42
+ </header>
43
+ <main>
44
+ <section class="head-subtitles">
45
+ <div class="container">
46
+ <h6 class="head-subtitle text-bold">Standard blanket over esignaturs felter</h6>
47
+ <h6 class="head-subtitle text-bold">Flette felter og ikke flette felter</h6>
48
+ <h6 class="head-subtitle">Disse er de felter der kan flettes ind fra på pdf’en og felter der ikke kan flettes
49
+ ind</h6>
50
+ </div>
51
+ </section>
52
+ <section class="form">
53
+ <div class="container">
54
+ <form action="/" method="POST">
55
+ <div class="field-group group-container" data-depends-on='' data-dependent-value=''>
56
+ <div class="field-group-title border-solid">
57
+ Group1:
58
+ </div>
59
+ <div class="field-group-content">
60
+ <div class="group-row">
61
+ <div class="field-item custom-validation-target">
62
+ <span class="invalid-message" style="display: none">Select an department</span>
63
+ <div class="field-item">
64
+ <div class="field-label">Department: </div>
65
+ <div class="field-input">
66
+ <type-ahead-element>
67
+ <script type="application/json">
68
+ {
69
+ "label": "department label",
70
+ "name": "department name",
71
+ "type": "type-ahead-element",
72
+ "required": true,
73
+ "noValueDependency": null,
74
+ "hasValueDependency": null,
75
+ "optionsWithDescriptions": [{
76
+ "title": "HR",
77
+ "value": "Dept001",
78
+ "description": "HR department"
79
+ },
80
+ {
81
+ "title": "Finance",
82
+ "value": "Dept002",
83
+ "description": "Financial department"
84
+ },
85
+ {
86
+ "title": "Sales",
87
+ "value": "Dept003",
88
+ "description": "Sales department"
89
+ },
90
+ {
91
+ "title": "Marketing",
92
+ "value": "Dept004",
93
+ "description": "Marketing department"
94
+ },
95
+ {
96
+ "title": "IT",
97
+ "value": "Dept005",
98
+ "description": "Information Technology department"
99
+ },
100
+ {
101
+ "title": "Finance",
102
+ "value": "Dept002",
103
+ "description": "Financial department"
104
+ },
105
+ {
106
+ "title": "Sales",
107
+ "value": "Dept003",
108
+ "description": "Sales department"
109
+ },
110
+ {
111
+ "title": "Marketing",
112
+ "value": "Dept004",
113
+ "description": "Marketing department"
114
+ },
115
+ {
116
+ "title": "IT",
117
+ "value": "Dept005",
118
+ "description": "Information Technology department"
119
+ },
120
+ {
121
+ "title": "Finance",
122
+ "value": "Dept002",
123
+ "description": "Financial department"
124
+ },
125
+ {
126
+ "title": "Sales",
127
+ "value": "Dept003",
128
+ "description": "Sales department"
129
+ },
130
+ {
131
+ "title": "Marketing",
132
+ "value": "Dept004",
133
+ "description": "Marketing department"
134
+ },
135
+ {
136
+ "title": "IT",
137
+ "value": "Dept005",
138
+ "description": "Information Technology department"
139
+ },
140
+ {
141
+ "title": "Finance",
142
+ "value": "Dept002",
143
+ "description": "Financial department"
144
+ },
145
+ {
146
+ "title": "Sales",
147
+ "value": "Dept003",
148
+ "description": "Sales department"
149
+ },
150
+ {
151
+ "title": "Marketing",
152
+ "value": "Dept004",
153
+ "description": "Marketing department"
154
+ },
155
+ {
156
+ "title": "IT",
157
+ "value": "Dept005",
158
+ "description": "Information Technology department"
159
+ }
160
+ ]
161
+ }
162
+ </script>
163
+ </type-ahead-element>
164
+ </div>
165
+ </div>
166
+ </div>
167
+ </div>
168
+ <div class="group-row">
169
+ <div class="field-item custom-validation-target">
170
+ <span class="invalid-message" style="display: none">Enter a valid Address</span>
171
+ <div class="field-item">
172
+ <div class="field-label">Address: </div>
173
+ <div class="field-input">
174
+ <address-element language="en" google-places-key="AIzaSyCR6bpBitIMQgHHd7Mm2-q_-0CoeeHvxbA" enable-auto-complete="true">
175
+ <script type="application/json">
176
+ {
177
+ "label": "Adress label",
178
+ "name": "Adress name",
179
+ "type": "address-element",
180
+ "required": true,
181
+ "noValueDependency": null,
182
+ "hasValueDependency": null
183
+ }
184
+ </script>
185
+ </address-element>
186
+ </div>
187
+ </div>
188
+
189
+ <div class="field-item">
190
+ <div class="field-label">Address: </div>
191
+ <div class="field-input">
192
+ <address-element language="en" google-places-key="AIzaSyCR6bpBitIMQgHHd7Mm2-q_-0CoeeHvxbA" enable-auto-complete="false">
193
+ <script type="application/json">
194
+ {
195
+ "label": "Adress label",
196
+ "name": "Adress 1",
197
+ "type": "address-element",
198
+ "required": true,
199
+ "noValueDependency": null,
200
+ "hasValueDependency": null
201
+ }
202
+ </script>
203
+ </address-element>
204
+ </div>
205
+ </div>
206
+ <div class="field-item">
207
+ <div class="field-label">Address: </div>
208
+ <div class="field-input">
209
+ <address-element language="en" google-places-key="AIzaSyCR6bpBitIMQgHHd7Mm2-q_-0CoeeHvxbA" enable-auto-complete="false">
210
+ <script type="application/json">
211
+ {
212
+ "label": "Adress label",
213
+ "name": "Adress 1",
214
+ "type": "address-element",
215
+ "required": true,
216
+ "noValueDependency": null,
217
+ "hasValueDependency": null
218
+ }
219
+ </script>
220
+ </address-element>
221
+ </div>
222
+ </div>
223
+ <div class="field-item">
224
+ <div class="field-label">Address: </div>
225
+ <div class="field-input">
226
+ <address-element language="en" google-places-key="AIzaSyCR6bpBitIMQgHHd7Mm2-q_-0CoeeHvxbA" enable-auto-complete="false">
227
+ <script type="application/json">
228
+ {
229
+ "label": "Adress label",
230
+ "name": "Adress 2",
231
+ "type": "address-element",
232
+ "required": true,
233
+ "noValueDependency": null,
234
+ "hasValueDependency": null
235
+ }
236
+ </script>
237
+ </address-element>
238
+ </div>
239
+ </div>
240
+ <div class="field-item">
241
+ <div class="field-label">Address: </div>
242
+ <div class="field-input">
243
+ <address-element language="en" google-places-key="AIzaSyCR6bpBitIMQgHHd7Mm2-q_-0CoeeHvxbA" enable-auto-complete="false">
244
+ <script type="application/json">
245
+ {
246
+ "label": "Adress label",
247
+ "name": "Adress 3",
248
+ "type": "address-element",
249
+ "required": true,
250
+ "noValueDependency": null,
251
+ "hasValueDependency": null
252
+ }
253
+ </script>
254
+ </address-element>
255
+ </div>
256
+ </div>
257
+ <div class="field-item">
258
+ <div class="field-label">Address: </div>
259
+ <div class="field-input">
260
+ <address-element language="en" google-places-key="AIzaSyCR6bpBitIMQgHHd7Mm2-q_-0CoeeHvxbA" enable-auto-complete="false">
261
+ <script type="application/json">
262
+ {
263
+ "label": "Adress label",
264
+ "name": "Adress 4",
265
+ "type": "address-element",
266
+ "required": true,
267
+ "noValueDependency": null,
268
+ "hasValueDependency": null
269
+ }
270
+ </script>
271
+ </address-element>
272
+ </div>
273
+ </div>
274
+ <div class="field-item">
275
+ <div class="field-label">Address: </div>
276
+ <div class="field-input">
277
+ <address-element language="en" google-places-key="AIzaSyCR6bpBitIMQgHHd7Mm2-q_-0CoeeHvxbA" enable-auto-complete="false">
278
+ <script type="application/json">
279
+ {
280
+ "label": "Adress label",
281
+ "name": "Adress 5",
282
+ "type": "address-element",
283
+ "required": true,
284
+ "noValueDependency": null,
285
+ "hasValueDependency": null
286
+ }
287
+ </script>
288
+ </address-element>
289
+ </div>
290
+ </div>
291
+ <div class="field-item">
292
+ <div class="field-label">Bank: </div>
293
+ <div class="field-input">
294
+ <bank-element language="da">
295
+ <script type="application/json">
296
+ {
297
+ "label": "Bank label",
298
+ "name": "Bank name",
299
+ "type": "bank-element",
300
+ "required": true,
301
+ "noValueDependency": null,
302
+ "hasValueDependency": null
303
+ }
304
+ </script>
305
+ </bank-element>
306
+ </div>
307
+ </div>
308
+ <div class="field-item">
309
+ <div class="field-label">CVR: </div>
310
+ <div class="field-input">
311
+ <cvr-element>
312
+ <script type="application/json">
313
+ {
314
+ "label": "CVR label",
315
+ "name": "CVR name",
316
+ "type": "cvr-element",
317
+ "required": true,
318
+ "noValueDependency": null,
319
+ "hasValueDependency": null
320
+ }
321
+ </script>
322
+ </bank-element>
323
+ </div>
324
+ </div>
325
+ </div>
326
+ </div>
327
+ <div class="group-row">
328
+ <div class="field-item">
329
+ <div class="field-label">Navn: </div>
330
+ <div class="field-input">
331
+ <text-element>
332
+ <script type="application/json">
333
+ {
334
+ "label": "Name",
335
+ "name": "name",
336
+ "value": null,
337
+ "type": "Text",
338
+ "required": true,
339
+ "options": [],
340
+ "noValueDependency": null,
341
+ "hasValueDependency": null,
342
+ "dependencies": [{
343
+ "value": "peter",
344
+ "criteria": "Exact",
345
+ "items": ["email"]
346
+ }]
347
+ }
348
+ </script>
349
+ </text-element>
350
+ </div>
351
+ </div>
352
+ <div class="field-item custom-validation-target">
353
+ <span class="invalid-message" style="display: none">Enter a valid checkbox</span>
354
+ <div class="field-item">
355
+ <div class="field-label">Display G2: </div>
356
+ <div class="field-input">
357
+ <checkbox-element>
358
+ <script type="application/json">
359
+ {
360
+ "label": "Checkbox",
361
+ "name": "checkbox1",
362
+ "value": null,
363
+ "type": "checkbox",
364
+ "required": false,
365
+ "options": ["Ja", "Nej"],
366
+ "noValueDependency": null,
367
+ "hasValueDependency": null,
368
+ "dependencies": [{
369
+ "value": "Ja",
370
+ "criteria": "Exact",
371
+ "items": ["email2"]
372
+ }]
373
+ }
374
+ </script>
375
+ </checkbox-element>
376
+ </div>
377
+ </div>
378
+ </div>
379
+ <div class="field-item custom-validation-target">
380
+ <span class="invalid-message" style="display: none">Enter a valid phone</span>
381
+ <div class="field-item">
382
+ <div class="field-label">Phone: </div>
383
+ <div class="field-input">
384
+ <int-phone-element>
385
+ <script type="application/json">
386
+ {
387
+ "label": "Int Phone",
388
+ "name": "int-phone-element1",
389
+ "value": null,
390
+ "type": "int-phone-element",
391
+ "required": true,
392
+ "noValueDependency": null,
393
+ "hasValueDependency": null
394
+ }
395
+ </script>
396
+ </int-phone-element>
397
+ </div>
398
+ </div>
399
+ </div>
400
+ </div>
401
+ <div class="group-row">
402
+ <div class="field-item">
403
+ <div class="field-label">Number of Abas: </div>
404
+ <div class="field-input">
405
+ <radio-group-element>
406
+ <script type="application/json">
407
+ {
408
+ "label": "Radio Test",
409
+ "name": "radio1",
410
+ "value": null,
411
+ "type": "radio",
412
+ "required": false,
413
+ "options": ["One", "Two", "Three"],
414
+ "noValueDependency": null,
415
+ "hasValueDependency": null,
416
+ "dependencies": []
417
+ }
418
+ </script>
419
+ </radio-group-element>
420
+ </div>
421
+ </div>
422
+ </div>
423
+ <div class="group-row">
424
+ <div class="field-item">
425
+ <div class="field-label">E-mail: </div>
426
+ <div class="field-input">
427
+ <email-element>
428
+ <script type="text/json">
429
+ {
430
+ "label": "E-mail",
431
+ "name": "email",
432
+ "value": null,
433
+ "type": "email",
434
+ "required": false,
435
+ "options": [],
436
+ "noValueDependency": null,
437
+ "hasValueDependency": null,
438
+ "dependencies": [{
439
+ "value": "peter@luftborn.com",
440
+ "criteria": "Exact",
441
+ "items": ["address"]
442
+ }]
443
+ }
444
+ </script>
445
+ </email-element>
446
+ </div>
447
+ </div>
448
+
449
+ </div>
450
+ </div>
451
+ </div>
452
+ <div class="field-group group-container" data-depends-on="checkbox1" data-dependent-value="Ja">
453
+ <div class="field-group-title border-solid">
454
+ Group2:
455
+ </div>
456
+ <div class="field-group-content">
457
+ <div class="group-row">
458
+ <div class="field-item custom-validation-target">
459
+ <div class="field-item">
460
+ <div class="field-label">Display G3: </div>
461
+ <div class="field-input">
462
+ <checkbox-element>
463
+ <script type="application/json">
464
+ {
465
+ "label": "Checkbox",
466
+ "name": "checkbox2",
467
+ "value": null,
468
+ "type": "checkbox",
469
+ "required": false,
470
+ "options": ["Ja", "Nej"],
471
+ "noValueDependency": null,
472
+ "hasValueDependency": null,
473
+ "dependencies": [{
474
+ "value": "Ja",
475
+ "criteria": "Exact",
476
+ "items": ["email2"]
477
+ }]
478
+ }
479
+ </script>
480
+ </checkbox-element>
481
+ </div>
482
+ </div>
483
+ </div>
484
+ </div>
485
+
486
+ </div>
487
+ </div>
488
+ <div class="field-group group-container" data-depends-on="checkbox2" data-dependent-value="Ja">
489
+ <div class="field-group-title border-solid">
490
+ Group 3:
491
+ </div>
492
+ <div class="field-group-content">
493
+ <div class="group-row">
494
+ <div class="field-item">
495
+ <div class="field-label">FileUpload (ikke fletbart): </div>
496
+ <div class="field-input">
497
+ <file-element>
498
+ <script type="application/json">
499
+ {
500
+ "label": "FileUpload",
501
+ "name": "files2",
502
+ "value": null,
503
+ "type": "file",
504
+ "multi": false,
505
+ "required": false,
506
+ "options": [],
507
+ "noValueDependency": null,
508
+ "hasValueDependency": null,
509
+ "dependencies": []
510
+ }
511
+ </script>
512
+ </file-element>
513
+ </div>
514
+ </div>
515
+ </div>
516
+ <div class="group-row">
517
+ <div class="custom-validation-target">
518
+ <span class="invalid-message">
519
+ EnterValid Checkbox
520
+ </span>
521
+ <div class="field-item">
522
+ <div class="field-label">Checkbox:</div>
523
+ <div class="field-input">
524
+ <checkbox-element custom-input="" name="Checkbox0" style="width: 100%;">
525
+ <script type="application/json">
526
+ {"label":"Checkbox","name":"Checkbox0","tempId":null,"value":null,"type":7,"required":false,"allDependenciesMustBeMet":false,"multi":false,"min":null,"max":null,"step":null,"options":["1","2"],"optionsWithDescriptions":[],"addressAutoComplete":true,"noValueDependency":{"value":"","criteria":"Exact","items":["File7"]},"hasValueDependency":{"value":"","criteria":"Exact","items":["CVR6"]},"dependencies":[{"value":"1","criteria":"Exact","items":["Date1"]},{"value":"2","criteria":"Exact","items":["Date1","Tel2"]}]}
527
+ </script>
528
+ </checkbox-element>
529
+
530
+ </div>
531
+ </div>
532
+ </div>
533
+ </div>
534
+ <div class="group-row">
535
+ <div class="custom-validation-target">
536
+ <span class="invalid-message">
537
+ EnterValid Date
538
+ </span>
539
+ <div class="field-item">
540
+ <div class="field-label">Date:</div>
541
+ <div class="field-input">
542
+
543
+
544
+
545
+ <date-element custom-input="" name="Date1" style="width: 100%;">
546
+ <script type="application/json">
547
+ {"label":"Date","name":"Date1","tempId":null,"value":null,"type":3,"required":false,"allDependenciesMustBeMet":false,"multi":false,"min":null,"max":null,"step":null,"options":[],"optionsWithDescriptions":[],"addressAutoComplete":true,"noValueDependency":{"value":"","criteria":"Exact","items":[]},"hasValueDependency":{"value":"","criteria":"Exact","items":[]},"dependencies":[]}
548
+ </script>
549
+ </date-element>
550
+
551
+ </div>
552
+ </div>
553
+ </div>
554
+ </div>
555
+ <div class="group-row">
556
+ <div class="custom-validation-target">
557
+ <span class="invalid-message">
558
+ EnterValid Tel
559
+ </span>
560
+ <div class="field-item">
561
+ <div class="field-label">Tel:</div>
562
+ <div class="field-input">
563
+
564
+
565
+
566
+ <int-phone-element custom-input="" name="Tel2" style="width: 100%;">
567
+ <script type="application/json">
568
+ {"label":"Tel","name":"Tel2","tempId":null,"value":null,"type":5,"required":false,"allDependenciesMustBeMet":false,"multi":false,"min":null,"max":null,"step":null,"options":[],"optionsWithDescriptions":[],"addressAutoComplete":true,"noValueDependency":{"value":"","criteria":"Exact","items":[]},"hasValueDependency":{"value":"","criteria":"Exact","items":[]},"dependencies":[]}
569
+ </script>
570
+ </int-phone-element>
571
+
572
+ </div>
573
+ </div>
574
+ </div>
575
+ </div>
576
+ </div>
577
+ </div>
578
+ <input type="submit" value="send">
579
+ </form>
580
+ </div>
581
+ </section>
582
+ </main>
583
+ <script src="/demo/index.js"></script>
584
+ </body>
585
+
586
586
  </html>