@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/old/index.html CHANGED
@@ -1,587 +1,587 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
-
4
- <head>
5
- <meta charset="UTF-8">
6
- <title>Custom Elements</title>
7
- <link rel="stylesheet" href="../assets/style.css">
8
- <style>
9
- .invalid .box {
10
- padding: 0;
11
- border: 1px solid red;
12
- }
13
- .invalid .field-label{
14
- margin-top: 0 !important;
15
- color: red !important;
16
- }
17
- .invalid .invalid-message{
18
- display: inline-block !important;
19
- background-color: red;
20
- color: #FFFFFF;
21
- font-size: 13px;
22
- line-height: 21px;
23
- border-radius: 4px 4px 0px 0px;
24
- padding: 3px 8px 0 8px;
25
- margin-top: 5px;
26
- margin-bottom: 0 !important;
27
- }
28
-
29
- </style>
30
- </head>
31
-
32
- <body class="A4">
33
- <!-- omar -->
34
- <!-- <div class="group-row">
35
- <div class="field-item custom-validation-target">
36
- <span class="invalid-message" style="display: none">Enter a valid Email</span>
37
- <div class="box">
38
- <div class="field-label">E-mail: </div>
39
- <div class="field-input">
40
- <email-element>
41
- <script type="text/json">
42
- {
43
- "label": "E-mail",
44
- "name": "email",
45
- "value": null,
46
- "type": "email",
47
- "required": false,
48
- "options": [],
49
- "noValueDependency": null,
50
- "hasValueDependency": null,
51
- "dependencies": [ {
52
- "value": "peter@luftborn.com",
53
- "criteria": "Exact",
54
- "items": ["address"]
55
- }]
56
- }
57
- </script>
58
- </email-element>
59
- </div>
60
- </div>
61
- </div>
62
- <div class="field-item custom-validation-target">
63
- <span class="invalid-message" style="display: none">Enter a valid Email</span>
64
- <div class="box">
65
- <div class="field-label">E-mail: </div>
66
- <div class="field-input">
67
- <email-element>
68
- <script type="text/json">
69
- {
70
- "label": "E-mail",
71
- "name": "email2",
72
- "value": null,
73
- "type": "email",
74
- "required": false,
75
- "options": [],
76
- "noValueDependency": null,
77
- "hasValueDependency": null,
78
- "dependencies": [ {
79
- "value": "peter@luftborn.com",
80
- "criteria": "Exact",
81
- "items": ["address"]
82
- }]
83
- }
84
- </script>
85
- </email-element>
86
- </div>
87
- </div>
88
- </div>
89
- </div>
90
- <div class="group-row">
91
- <div class="field-item custom-validation-target">
92
- <span class="invalid-message" style="display: none">Enter a valid checkbox</span>
93
- <div class="field-item">
94
- <div class="field-label">Checkbox: </div>
95
- <div class="field-input">
96
- <checkbox-element>
97
- <script type="application/json">
98
- {
99
- "label": "Checkbox",
100
- "name": "checkbox",
101
- "value": null,
102
- "type": "checkbox",
103
- "required": false,
104
- "options": ["Ja","Nej"],
105
- "noValueDependency": null,
106
- "hasValueDependency": null,
107
- "dependencies": [
108
- {
109
- "value": "Ja",
110
- "criteria": "Exact",
111
- "items": ["email2"]
112
- }
113
- ]
114
- }
115
- </script>
116
- </checkbox-element>
117
- </div>
118
- </div>
119
- </div>
120
- </div> -->
121
-
122
-
123
- <!-- peter -->
124
- <header class="header header-bgcolor-dark">
125
- <div class="container">
126
- <div class="head ">
127
- <h1 class="head-title head-title-white">Standart Blanket</h1>
128
- </div>
129
- </div>
130
- </header>
131
- <main>
132
- <section class="head-subtitles">
133
- <div class="container">
134
- <h6 class="head-subtitle text-bold">Standard blanket over esignaturs felter</h6>
135
- <h6 class="head-subtitle text-bold">Flette felter og ikke flette felter</h6>
136
- <h6 class="head-subtitle">Disse er de felter der kan flettes ind fra på pdf’en og felter der ikke
137
- kan
138
- flettes ind</h6>
139
- </div>
140
- </section>
141
- <section class="form">
142
- <div class="container">
143
- <form action="/" method="POST">
144
- <div class="field-group">
145
- <div class="field-group-title border-solid">
146
- Eksempel på personoplysninger:
147
- </div>
148
- <div class="field-group-content">
149
- <div class="group-row">
150
- <div class="field-item">
151
- <div class="field-label">Navn: </div>
152
- <div class="field-input">
153
- <text-element>
154
- <script type="application/json">
155
- {
156
- "label": "Name",
157
- "name": "name",
158
- "value": null,
159
- "type": "Text",
160
- "required": true,
161
- "options": [],
162
- "noValueDependency": null,
163
- "hasValueDependency": null,
164
- "dependencies": [
165
- {
166
- "value": "peter",
167
- "criteria": "Exact",
168
- "items": ["email"]
169
- }]
170
- }
171
- </script>
172
- </text-element>
173
- </div>
174
- </div>
175
- </div>
176
- <div class="group-row">
177
- <div class="field-item">
178
- <div class="field-label">E-mail: </div>
179
- <div class="field-input">
180
- <email-element>
181
- <script type="text/json">
182
- {
183
- "label": "E-mail",
184
- "name": "email",
185
- "value": null,
186
- "type": "email",
187
- "required": false,
188
- "options": [],
189
- "noValueDependency": null,
190
- "hasValueDependency": null,
191
- "dependencies": [ {
192
- "value": "peter@luftborn.com",
193
- "criteria": "Exact",
194
- "items": ["address"]
195
- }]
196
- }
197
- </script>
198
- </email-element>
199
- </div>
200
- </div>
201
-
202
- </div>
203
- </div>
204
- </div>
205
- <div class="field-group">
206
- <div class="field-group-title border-solid">
207
- Eksempel på forskellige formfelter:
208
- </div>
209
- <div class="field-group-content">
210
- <div class="group-row">
211
- <div class="field-item">
212
- <div class="field-label">address: </div>
213
- <div class="field-input">
214
- <address-element>
215
- <script type="application/json">
216
-
217
- {
218
- "label": "Address",
219
- "name": "address",
220
- "value": null,
221
- "type": "address",
222
- "required": false,
223
- "options": [],
224
- "noValueDependency": {
225
- "value": "",
226
- "criteria": "Exact",
227
- "items": []
228
- },
229
- "hasValueDependency": {
230
- "value": "",
231
- "criteria": "Exact",
232
- "items": []
233
- },
234
- "dependencies": [
235
- {
236
- "value": "Value1",
237
- "criteria": "Exact",
238
- "items": [
239
- "BankAccount",
240
- "FileUpload"
241
- ]
242
- },
243
- {
244
- "value": "Value2",
245
- "criteria": "Exact",
246
- "items": [
247
- "cvrn"
248
- ]
249
- }
250
- ]
251
- }
252
- </script>
253
- </address-element>
254
- </div>
255
- </div>
256
- </div>
257
- <div class="group-row">
258
- <div class="field-item">
259
- <div class="field-label">BankAccount: </div>
260
- <div class="field-input">
261
- <bank-element>
262
- <script type="application/json">
263
- {
264
- "label": "bank",
265
- "name": "bank",
266
- "value": null,
267
- "type": "bank",
268
- "required": true,
269
- "options": [],
270
- "noValueDependency": null,
271
- "hasValueDependency": null,
272
- "dependencies": []
273
- }
274
- </script>
275
- </bank-element>
276
- </div>
277
- </div>
278
- </div>
279
- <div class="group-row">
280
- <div class="field-item">
281
- <div class="field-label">CPR: </div>
282
- <div class="field-input">
283
- <cpr-element>
284
- <script type="application/json">
285
- {
286
- "label": "cpr",
287
- "name": "cpr",
288
- "value": null,
289
- "type": "cpr",
290
- "required": false,
291
- "options": [],
292
- "noValueDependency": null,
293
- "hasValueDependency": null,
294
- "dependencies": []
295
- }
296
- </script>
297
- </cpr-element>
298
- </div>
299
- </div>
300
- <div class="field-item">
301
- <div class="field-label">CVR: </div>
302
- <div class="field-input">
303
- <cvr-element>
304
- <script type="application/json">
305
- {
306
- "label": "cvr",
307
- "name": "cvr",
308
- "value": null,
309
- "type": "cvr",
310
- "required": false,
311
- "options": [],
312
- "noValueDependency": null,
313
- "hasValueDependency": null,
314
- "dependencies": []
315
- }
316
- </script>
317
- </cvr-element>
318
- </div>
319
- </div>
320
- </div>
321
- <div class="group-row">
322
- <div class="field-item">
323
- <div class="field-label">Checkbox: </div>
324
- <div class="field-input">
325
- <checkbox-element>
326
- <script type="application/json">
327
- {
328
- "label": "Checkbox",
329
- "name": "checkbox",
330
- "value": null,
331
- "type": "checkbox",
332
- "required": false,
333
- "options": ["Ja","Nej",1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
334
- "noValueDependency": null,
335
- "hasValueDependency": null,
336
- "dependencies": [
337
- {
338
- "value": "Ja",
339
- "criteria": "Exact",
340
- "items": ["BankAccount"]
341
- }
342
- ]
343
- }
344
- </script>
345
- </checkbox-element>
346
- </div>
347
- </div>
348
- </div>
349
- <div class="group-row">
350
- <div class="field-item">
351
- <div class="field-label">CustomRegularExpression (ord mellemrum ord):</div>
352
- <div class="field-input">
353
- <regex-element>
354
- <script type="application/json">
355
- {
356
- "label": "CustomRegular",
357
- "name": "regex",
358
- "value": "[a-z]*",
359
- "type": "regex",
360
- "required": false,
361
- "options": [],
362
- "noValueDependency": null,
363
- "hasValueDependency": null,
364
- "dependencies": []
365
- }
366
- </script>
367
- </regex-element>
368
- </div>
369
- </div>
370
- </div>
371
- <div class="group-row">
372
- <div class="field-item">
373
- <div class="field-label">DateField: </div>
374
- <div class="field-input">
375
- <date-element>
376
- <script type="application/json">
377
- {
378
- "label": "DateField",
379
- "name": "DateField",
380
- "value": null,
381
- "type": "Date",
382
- "required": false,
383
- "allDependenciesMustBeMet": false,
384
- "multi": false,
385
- "min": "2018-02-05",
386
- "max": "2019-02-05",
387
- "step": null,
388
- "options": [],
389
- "noValueDependency": null,
390
- "hasValueDependency": null,
391
- "dependencies": []
392
- }
393
- </script>
394
- </date-element>
395
- </div>
396
- </div>
397
- </div>
398
- <div class="group-row">
399
- <div class="field-item">
400
- <div class="field-label">DropdownList: </div>
401
- <div class="field-input">
402
- <drop-down-element>
403
- <script type="application/json">
404
- {
405
- "label": "DropdownList",
406
- "name": "dropdownList",
407
- "value": null,
408
- "type": "dropdownList",
409
- "required": true,
410
- "options": ["option1","option2","option3","option4","option5"],
411
- "noValueDependency": null,
412
- "hasValueDependency": null,
413
- "dependencies": []
414
- }
415
- </script>
416
- </drop-down-element>
417
- </div>
418
- </div>
419
- </div>
420
- <div class="group-row">
421
- <div class="field-item">
422
- <div class="field-label">Identification: </div>
423
- <div class="field-input">
424
- <id-element>
425
- <script type="application/json">
426
- {
427
- "label": "id",
428
- "name": "identification",
429
- "value": null,
430
- "type": "identification",
431
- "required": false,
432
- "options": [],
433
- "noValueDependency": null,
434
- "hasValueDependency": null,
435
- "dependencies": []
436
- }
437
- </script>
438
- </id-element>
439
- </div>
440
- </div>
441
- </div>
442
-
443
- <div class="group-row">
444
- <div class="field-item">
445
- <div class="field-label">PhoneNumber: </div>
446
- <div class="field-input">
447
- <int-phone-element>
448
- <script type="application/json">
449
- {
450
- "label": "Phone",
451
- "name": "Phone",
452
- "value": null,
453
- "type": "Phone",
454
- "required": false,
455
- "options": [],
456
- "noValueDependency": null,
457
- "hasValueDependency": null,
458
- "dependencies": []
459
- }
460
- </script>
461
- </int-phone-element>
462
- </div>
463
- </div>
464
- </div>
465
- <div class="group-row">
466
- <div class="field-item">
467
- <div class="field-label">RadioButtonGroup: </div>
468
- <div class="field-input">
469
- <radio-group-element>
470
- <script type="application/json">
471
- {
472
- "label": "Radio",
473
- "name": "radio",
474
- "value": null,
475
- "type": "radio",
476
- "required": false,
477
- "options": ["g1","g2"],
478
- "noValueDependency": null,
479
- "hasValueDependency": null,
480
- "dependencies": []
481
- }
482
- </script>
483
- </radio-group-element>
484
- </div>
485
- </div>
486
- </div>
487
-
488
- <div class="group-row">
489
- <div class="field-item">
490
- <div class="field-label">TextFieldArea: </div>
491
- <div class="field-input">
492
- <text-area-element>
493
- <script type="application/json">
494
- {
495
- "label": "text area",
496
- "name": "text_area",
497
- "value": null,
498
- "type": "Text",
499
- "required": false,
500
- "options": [],
501
- "noValueDependency": null,
502
- "hasValueDependency": null,
503
- "dependencies": [
504
- {
505
- "value": "hello",
506
- "criteria": "Exact",
507
- "items": ["radio"]
508
- }]
509
- }
510
- </script>
511
- </text-area-element>
512
- </div>
513
- </div>
514
- </div>
515
- <div class="group-row">
516
- <div class="field-item">
517
- <div class="field-label">NumericRange: </div>
518
- <div class="field-input">
519
- <numeric-element>
520
- <script type="application/json">
521
- {
522
- "label": "Numeric",
523
- "name": "numeric",
524
- "value": null,
525
- "type": "number",
526
- "required": false,
527
- "options": [],
528
- "max":"20",
529
- "min":"10",
530
- "step":"0.5",
531
- "noValueDependency": null,
532
- "hasValueDependency": null,
533
- "dependencies": [
534
- {
535
- "value": 20,
536
- "criteria": "LessThan",
537
- "items": ["files"]
538
- }]
539
- }
540
- </script>
541
- </numeric-element>
542
- </div>
543
- </div>
544
- </div>
545
- </div>
546
- </div>
547
- <div class="field-group">
548
- <div class="field-group-title border-solid">
549
- Ikke fletbare felter:
550
- </div>
551
- <div class="field-group-content">
552
- <div class="group-row">
553
- <div class="field-item">
554
- <div class="field-label">FileUpload (ikke fletbart): </div>
555
- <div class="field-input">
556
- <file-element>
557
- <script type="application/json">
558
- {
559
- "label": "FileUpload",
560
- "name": "files",
561
- "value": null,
562
- "type": "file",
563
- "multi": false,
564
- "required": false,
565
- "options": [],
566
- "noValueDependency": null,
567
- "hasValueDependency": null,
568
- "dependencies": []
569
- }
570
- </script>
571
- </file-element>
572
- </div>
573
- </div>
574
- </div>
575
-
576
- </div>
577
- </div>
578
- <input type="submit" value="send">
579
-
580
- </form>
581
- </div>
582
- </section>
583
- </main>
584
- </body>
585
- <script src="./index.js"></script>
586
-
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <title>Custom Elements</title>
7
+ <link rel="stylesheet" href="../assets/style.css">
8
+ <style>
9
+ .invalid .box {
10
+ padding: 0;
11
+ border: 1px solid red;
12
+ }
13
+ .invalid .field-label{
14
+ margin-top: 0 !important;
15
+ color: red !important;
16
+ }
17
+ .invalid .invalid-message{
18
+ display: inline-block !important;
19
+ background-color: red;
20
+ color: #FFFFFF;
21
+ font-size: 13px;
22
+ line-height: 21px;
23
+ border-radius: 4px 4px 0px 0px;
24
+ padding: 3px 8px 0 8px;
25
+ margin-top: 5px;
26
+ margin-bottom: 0 !important;
27
+ }
28
+
29
+ </style>
30
+ </head>
31
+
32
+ <body class="A4">
33
+ <!-- omar -->
34
+ <!-- <div class="group-row">
35
+ <div class="field-item custom-validation-target">
36
+ <span class="invalid-message" style="display: none">Enter a valid Email</span>
37
+ <div class="box">
38
+ <div class="field-label">E-mail: </div>
39
+ <div class="field-input">
40
+ <email-element>
41
+ <script type="text/json">
42
+ {
43
+ "label": "E-mail",
44
+ "name": "email",
45
+ "value": null,
46
+ "type": "email",
47
+ "required": false,
48
+ "options": [],
49
+ "noValueDependency": null,
50
+ "hasValueDependency": null,
51
+ "dependencies": [ {
52
+ "value": "peter@luftborn.com",
53
+ "criteria": "Exact",
54
+ "items": ["address"]
55
+ }]
56
+ }
57
+ </script>
58
+ </email-element>
59
+ </div>
60
+ </div>
61
+ </div>
62
+ <div class="field-item custom-validation-target">
63
+ <span class="invalid-message" style="display: none">Enter a valid Email</span>
64
+ <div class="box">
65
+ <div class="field-label">E-mail: </div>
66
+ <div class="field-input">
67
+ <email-element>
68
+ <script type="text/json">
69
+ {
70
+ "label": "E-mail",
71
+ "name": "email2",
72
+ "value": null,
73
+ "type": "email",
74
+ "required": false,
75
+ "options": [],
76
+ "noValueDependency": null,
77
+ "hasValueDependency": null,
78
+ "dependencies": [ {
79
+ "value": "peter@luftborn.com",
80
+ "criteria": "Exact",
81
+ "items": ["address"]
82
+ }]
83
+ }
84
+ </script>
85
+ </email-element>
86
+ </div>
87
+ </div>
88
+ </div>
89
+ </div>
90
+ <div class="group-row">
91
+ <div class="field-item custom-validation-target">
92
+ <span class="invalid-message" style="display: none">Enter a valid checkbox</span>
93
+ <div class="field-item">
94
+ <div class="field-label">Checkbox: </div>
95
+ <div class="field-input">
96
+ <checkbox-element>
97
+ <script type="application/json">
98
+ {
99
+ "label": "Checkbox",
100
+ "name": "checkbox",
101
+ "value": null,
102
+ "type": "checkbox",
103
+ "required": false,
104
+ "options": ["Ja","Nej"],
105
+ "noValueDependency": null,
106
+ "hasValueDependency": null,
107
+ "dependencies": [
108
+ {
109
+ "value": "Ja",
110
+ "criteria": "Exact",
111
+ "items": ["email2"]
112
+ }
113
+ ]
114
+ }
115
+ </script>
116
+ </checkbox-element>
117
+ </div>
118
+ </div>
119
+ </div>
120
+ </div> -->
121
+
122
+
123
+ <!-- peter -->
124
+ <header class="header header-bgcolor-dark">
125
+ <div class="container">
126
+ <div class="head ">
127
+ <h1 class="head-title head-title-white">Standart Blanket</h1>
128
+ </div>
129
+ </div>
130
+ </header>
131
+ <main>
132
+ <section class="head-subtitles">
133
+ <div class="container">
134
+ <h6 class="head-subtitle text-bold">Standard blanket over esignaturs felter</h6>
135
+ <h6 class="head-subtitle text-bold">Flette felter og ikke flette felter</h6>
136
+ <h6 class="head-subtitle">Disse er de felter der kan flettes ind fra på pdf’en og felter der ikke
137
+ kan
138
+ flettes ind</h6>
139
+ </div>
140
+ </section>
141
+ <section class="form">
142
+ <div class="container">
143
+ <form action="/" method="POST">
144
+ <div class="field-group">
145
+ <div class="field-group-title border-solid">
146
+ Eksempel på personoplysninger:
147
+ </div>
148
+ <div class="field-group-content">
149
+ <div class="group-row">
150
+ <div class="field-item">
151
+ <div class="field-label">Navn: </div>
152
+ <div class="field-input">
153
+ <text-element>
154
+ <script type="application/json">
155
+ {
156
+ "label": "Name",
157
+ "name": "name",
158
+ "value": null,
159
+ "type": "Text",
160
+ "required": true,
161
+ "options": [],
162
+ "noValueDependency": null,
163
+ "hasValueDependency": null,
164
+ "dependencies": [
165
+ {
166
+ "value": "peter",
167
+ "criteria": "Exact",
168
+ "items": ["email"]
169
+ }]
170
+ }
171
+ </script>
172
+ </text-element>
173
+ </div>
174
+ </div>
175
+ </div>
176
+ <div class="group-row">
177
+ <div class="field-item">
178
+ <div class="field-label">E-mail: </div>
179
+ <div class="field-input">
180
+ <email-element>
181
+ <script type="text/json">
182
+ {
183
+ "label": "E-mail",
184
+ "name": "email",
185
+ "value": null,
186
+ "type": "email",
187
+ "required": false,
188
+ "options": [],
189
+ "noValueDependency": null,
190
+ "hasValueDependency": null,
191
+ "dependencies": [ {
192
+ "value": "peter@luftborn.com",
193
+ "criteria": "Exact",
194
+ "items": ["address"]
195
+ }]
196
+ }
197
+ </script>
198
+ </email-element>
199
+ </div>
200
+ </div>
201
+
202
+ </div>
203
+ </div>
204
+ </div>
205
+ <div class="field-group">
206
+ <div class="field-group-title border-solid">
207
+ Eksempel på forskellige formfelter:
208
+ </div>
209
+ <div class="field-group-content">
210
+ <div class="group-row">
211
+ <div class="field-item">
212
+ <div class="field-label">address: </div>
213
+ <div class="field-input">
214
+ <address-element>
215
+ <script type="application/json">
216
+
217
+ {
218
+ "label": "Address",
219
+ "name": "address",
220
+ "value": null,
221
+ "type": "address",
222
+ "required": false,
223
+ "options": [],
224
+ "noValueDependency": {
225
+ "value": "",
226
+ "criteria": "Exact",
227
+ "items": []
228
+ },
229
+ "hasValueDependency": {
230
+ "value": "",
231
+ "criteria": "Exact",
232
+ "items": []
233
+ },
234
+ "dependencies": [
235
+ {
236
+ "value": "Value1",
237
+ "criteria": "Exact",
238
+ "items": [
239
+ "BankAccount",
240
+ "FileUpload"
241
+ ]
242
+ },
243
+ {
244
+ "value": "Value2",
245
+ "criteria": "Exact",
246
+ "items": [
247
+ "cvrn"
248
+ ]
249
+ }
250
+ ]
251
+ }
252
+ </script>
253
+ </address-element>
254
+ </div>
255
+ </div>
256
+ </div>
257
+ <div class="group-row">
258
+ <div class="field-item">
259
+ <div class="field-label">BankAccount: </div>
260
+ <div class="field-input">
261
+ <bank-element>
262
+ <script type="application/json">
263
+ {
264
+ "label": "bank",
265
+ "name": "bank",
266
+ "value": null,
267
+ "type": "bank",
268
+ "required": true,
269
+ "options": [],
270
+ "noValueDependency": null,
271
+ "hasValueDependency": null,
272
+ "dependencies": []
273
+ }
274
+ </script>
275
+ </bank-element>
276
+ </div>
277
+ </div>
278
+ </div>
279
+ <div class="group-row">
280
+ <div class="field-item">
281
+ <div class="field-label">CPR: </div>
282
+ <div class="field-input">
283
+ <cpr-element>
284
+ <script type="application/json">
285
+ {
286
+ "label": "cpr",
287
+ "name": "cpr",
288
+ "value": null,
289
+ "type": "cpr",
290
+ "required": false,
291
+ "options": [],
292
+ "noValueDependency": null,
293
+ "hasValueDependency": null,
294
+ "dependencies": []
295
+ }
296
+ </script>
297
+ </cpr-element>
298
+ </div>
299
+ </div>
300
+ <div class="field-item">
301
+ <div class="field-label">CVR: </div>
302
+ <div class="field-input">
303
+ <cvr-element>
304
+ <script type="application/json">
305
+ {
306
+ "label": "cvr",
307
+ "name": "cvr",
308
+ "value": null,
309
+ "type": "cvr",
310
+ "required": false,
311
+ "options": [],
312
+ "noValueDependency": null,
313
+ "hasValueDependency": null,
314
+ "dependencies": []
315
+ }
316
+ </script>
317
+ </cvr-element>
318
+ </div>
319
+ </div>
320
+ </div>
321
+ <div class="group-row">
322
+ <div class="field-item">
323
+ <div class="field-label">Checkbox: </div>
324
+ <div class="field-input">
325
+ <checkbox-element>
326
+ <script type="application/json">
327
+ {
328
+ "label": "Checkbox",
329
+ "name": "checkbox",
330
+ "value": null,
331
+ "type": "checkbox",
332
+ "required": false,
333
+ "options": ["Ja","Nej",1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
334
+ "noValueDependency": null,
335
+ "hasValueDependency": null,
336
+ "dependencies": [
337
+ {
338
+ "value": "Ja",
339
+ "criteria": "Exact",
340
+ "items": ["BankAccount"]
341
+ }
342
+ ]
343
+ }
344
+ </script>
345
+ </checkbox-element>
346
+ </div>
347
+ </div>
348
+ </div>
349
+ <div class="group-row">
350
+ <div class="field-item">
351
+ <div class="field-label">CustomRegularExpression (ord mellemrum ord):</div>
352
+ <div class="field-input">
353
+ <regex-element>
354
+ <script type="application/json">
355
+ {
356
+ "label": "CustomRegular",
357
+ "name": "regex",
358
+ "value": "[a-z]*",
359
+ "type": "regex",
360
+ "required": false,
361
+ "options": [],
362
+ "noValueDependency": null,
363
+ "hasValueDependency": null,
364
+ "dependencies": []
365
+ }
366
+ </script>
367
+ </regex-element>
368
+ </div>
369
+ </div>
370
+ </div>
371
+ <div class="group-row">
372
+ <div class="field-item">
373
+ <div class="field-label">DateField: </div>
374
+ <div class="field-input">
375
+ <date-element>
376
+ <script type="application/json">
377
+ {
378
+ "label": "DateField",
379
+ "name": "DateField",
380
+ "value": null,
381
+ "type": "Date",
382
+ "required": false,
383
+ "allDependenciesMustBeMet": false,
384
+ "multi": false,
385
+ "min": "2018-02-05",
386
+ "max": "2019-02-05",
387
+ "step": null,
388
+ "options": [],
389
+ "noValueDependency": null,
390
+ "hasValueDependency": null,
391
+ "dependencies": []
392
+ }
393
+ </script>
394
+ </date-element>
395
+ </div>
396
+ </div>
397
+ </div>
398
+ <div class="group-row">
399
+ <div class="field-item">
400
+ <div class="field-label">DropdownList: </div>
401
+ <div class="field-input">
402
+ <drop-down-element>
403
+ <script type="application/json">
404
+ {
405
+ "label": "DropdownList",
406
+ "name": "dropdownList",
407
+ "value": null,
408
+ "type": "dropdownList",
409
+ "required": true,
410
+ "options": ["option1","option2","option3","option4","option5"],
411
+ "noValueDependency": null,
412
+ "hasValueDependency": null,
413
+ "dependencies": []
414
+ }
415
+ </script>
416
+ </drop-down-element>
417
+ </div>
418
+ </div>
419
+ </div>
420
+ <div class="group-row">
421
+ <div class="field-item">
422
+ <div class="field-label">Identification: </div>
423
+ <div class="field-input">
424
+ <id-element>
425
+ <script type="application/json">
426
+ {
427
+ "label": "id",
428
+ "name": "identification",
429
+ "value": null,
430
+ "type": "identification",
431
+ "required": false,
432
+ "options": [],
433
+ "noValueDependency": null,
434
+ "hasValueDependency": null,
435
+ "dependencies": []
436
+ }
437
+ </script>
438
+ </id-element>
439
+ </div>
440
+ </div>
441
+ </div>
442
+
443
+ <div class="group-row">
444
+ <div class="field-item">
445
+ <div class="field-label">PhoneNumber: </div>
446
+ <div class="field-input">
447
+ <int-phone-element>
448
+ <script type="application/json">
449
+ {
450
+ "label": "Phone",
451
+ "name": "Phone",
452
+ "value": null,
453
+ "type": "Phone",
454
+ "required": false,
455
+ "options": [],
456
+ "noValueDependency": null,
457
+ "hasValueDependency": null,
458
+ "dependencies": []
459
+ }
460
+ </script>
461
+ </int-phone-element>
462
+ </div>
463
+ </div>
464
+ </div>
465
+ <div class="group-row">
466
+ <div class="field-item">
467
+ <div class="field-label">RadioButtonGroup: </div>
468
+ <div class="field-input">
469
+ <radio-group-element>
470
+ <script type="application/json">
471
+ {
472
+ "label": "Radio",
473
+ "name": "radio",
474
+ "value": null,
475
+ "type": "radio",
476
+ "required": false,
477
+ "options": ["g1","g2"],
478
+ "noValueDependency": null,
479
+ "hasValueDependency": null,
480
+ "dependencies": []
481
+ }
482
+ </script>
483
+ </radio-group-element>
484
+ </div>
485
+ </div>
486
+ </div>
487
+
488
+ <div class="group-row">
489
+ <div class="field-item">
490
+ <div class="field-label">TextFieldArea: </div>
491
+ <div class="field-input">
492
+ <text-area-element>
493
+ <script type="application/json">
494
+ {
495
+ "label": "text area",
496
+ "name": "text_area",
497
+ "value": null,
498
+ "type": "Text",
499
+ "required": false,
500
+ "options": [],
501
+ "noValueDependency": null,
502
+ "hasValueDependency": null,
503
+ "dependencies": [
504
+ {
505
+ "value": "hello",
506
+ "criteria": "Exact",
507
+ "items": ["radio"]
508
+ }]
509
+ }
510
+ </script>
511
+ </text-area-element>
512
+ </div>
513
+ </div>
514
+ </div>
515
+ <div class="group-row">
516
+ <div class="field-item">
517
+ <div class="field-label">NumericRange: </div>
518
+ <div class="field-input">
519
+ <numeric-element>
520
+ <script type="application/json">
521
+ {
522
+ "label": "Numeric",
523
+ "name": "numeric",
524
+ "value": null,
525
+ "type": "number",
526
+ "required": false,
527
+ "options": [],
528
+ "max":"20",
529
+ "min":"10",
530
+ "step":"0.5",
531
+ "noValueDependency": null,
532
+ "hasValueDependency": null,
533
+ "dependencies": [
534
+ {
535
+ "value": 20,
536
+ "criteria": "LessThan",
537
+ "items": ["files"]
538
+ }]
539
+ }
540
+ </script>
541
+ </numeric-element>
542
+ </div>
543
+ </div>
544
+ </div>
545
+ </div>
546
+ </div>
547
+ <div class="field-group">
548
+ <div class="field-group-title border-solid">
549
+ Ikke fletbare felter:
550
+ </div>
551
+ <div class="field-group-content">
552
+ <div class="group-row">
553
+ <div class="field-item">
554
+ <div class="field-label">FileUpload (ikke fletbart): </div>
555
+ <div class="field-input">
556
+ <file-element>
557
+ <script type="application/json">
558
+ {
559
+ "label": "FileUpload",
560
+ "name": "files",
561
+ "value": null,
562
+ "type": "file",
563
+ "multi": false,
564
+ "required": false,
565
+ "options": [],
566
+ "noValueDependency": null,
567
+ "hasValueDependency": null,
568
+ "dependencies": []
569
+ }
570
+ </script>
571
+ </file-element>
572
+ </div>
573
+ </div>
574
+ </div>
575
+
576
+ </div>
577
+ </div>
578
+ <input type="submit" value="send">
579
+
580
+ </form>
581
+ </div>
582
+ </section>
583
+ </main>
584
+ </body>
585
+ <script src="./index.js"></script>
586
+
587
587
  </html>