@luftborn/custom-elements 1.1.44 → 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 (247) 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 -146
  15. package/dist/custom-form.js.map +1 -1
  16. package/dist/elements/Address/AddressElement.d.ts +28 -28
  17. package/dist/elements/Address/AddressElement.js +206 -206
  18. package/dist/elements/BankField/BankFieldElement.d.ts +22 -22
  19. package/dist/elements/BankField/BankFieldElement.js +127 -127
  20. package/dist/elements/CPRElement/CPRElement.d.ts +14 -14
  21. package/dist/elements/CPRElement/CPRElement.js +82 -82
  22. package/dist/elements/CVRElement/CVRElement.d.ts +14 -14
  23. package/dist/elements/CVRElement/CVRElement.js +82 -82
  24. package/dist/elements/CheckBoxElement/CheckBoxElement.d.ts +14 -14
  25. package/dist/elements/CheckBoxElement/CheckBoxElement.js +96 -96
  26. package/dist/elements/CheckBoxElement/CheckBoxElement.js.map +1 -1
  27. package/dist/elements/CustomRegularExpression/CustomRegularExpressionElement.d.ts +12 -12
  28. package/dist/elements/CustomRegularExpression/CustomRegularExpressionElement.js +82 -82
  29. package/dist/elements/DateField/DateFieldElement.d.ts +12 -12
  30. package/dist/elements/DateField/DateFieldElement.js +85 -85
  31. package/dist/elements/DropDownList/DropDownListElement.d.ts +14 -14
  32. package/dist/elements/DropDownList/DropDownListElement.js +93 -93
  33. package/dist/elements/DropDownList/DropDownListElement.js.map +1 -1
  34. package/dist/elements/Elements.d.ts +18 -18
  35. package/dist/elements/Elements.js +37 -37
  36. package/dist/elements/EmailField/EmailFieldElement.d.ts +13 -13
  37. package/dist/elements/EmailField/EmailFieldElement.js +83 -83
  38. package/dist/elements/FileField/FileFieldElement.d.ts +15 -12
  39. package/dist/elements/FileField/FileFieldElement.js +103 -83
  40. package/dist/elements/FileField/FileFieldElement.js.map +1 -1
  41. package/dist/elements/IdentificationElement/IdentificationElement.d.ts +18 -18
  42. package/dist/elements/IdentificationElement/IdentificationElement.js +94 -94
  43. package/dist/elements/InternationaPhoneNumber/InternationaPhoneNumberElement.d.ts +16 -16
  44. package/dist/elements/InternationaPhoneNumber/InternationaPhoneNumberElement.js +114 -108
  45. package/dist/elements/InternationaPhoneNumber/InternationaPhoneNumberElement.js.map +1 -1
  46. package/dist/elements/NumericField/NumericFieldElement.d.ts +12 -12
  47. package/dist/elements/NumericField/NumericFieldElement.js +91 -91
  48. package/dist/elements/RadioButtonGroup/RadioButtonGroupElement.d.ts +14 -14
  49. package/dist/elements/RadioButtonGroup/RadioButtonGroupElement.js +99 -99
  50. package/dist/elements/RadioButtonGroup/RadioButtonGroupElement.js.map +1 -1
  51. package/dist/elements/TextAreaElement/TextAreaElement.d.ts +12 -12
  52. package/dist/elements/TextAreaElement/TextAreaElement.js +79 -79
  53. package/dist/elements/TextField/TextFieldElement.d.ts +12 -12
  54. package/dist/elements/TextField/TextFieldElement.js +79 -79
  55. package/dist/elements/TypeAhead/TypeAheadElement.d.ts +24 -24
  56. package/dist/elements/TypeAhead/TypeAheadElement.js +209 -209
  57. package/dist/framework/CustomEvents.d.ts +21 -21
  58. package/dist/framework/CustomEvents.js +47 -47
  59. package/dist/framework/CustomInputElement.d.ts +50 -50
  60. package/dist/framework/CustomInputElement.js +258 -257
  61. package/dist/framework/CustomInputElement.js.map +1 -1
  62. package/dist/framework/Language/Languages/Base/BaseDictionary.d.ts +4 -4
  63. package/dist/framework/Language/Languages/Base/BaseDictionary.js +20 -20
  64. package/dist/framework/Language/Languages/CzechDictionary.d.ts +4 -0
  65. package/dist/framework/Language/Languages/CzechDictionary.js +40 -0
  66. package/dist/framework/Language/Languages/CzechDictionary.js.map +1 -0
  67. package/dist/framework/Language/Languages/DanishDictionary.d.ts +4 -4
  68. package/dist/framework/Language/Languages/DanishDictionary.js +39 -39
  69. package/dist/framework/Language/Languages/DutchDictionary.d.ts +4 -0
  70. package/dist/framework/Language/Languages/DutchDictionary.js +40 -0
  71. package/dist/framework/Language/Languages/DutchDictionary.js.map +1 -0
  72. package/dist/framework/Language/Languages/EnglishDictionary.d.ts +4 -4
  73. package/dist/framework/Language/Languages/EnglishDictionary.js +39 -39
  74. package/dist/framework/Language/Languages/EstonianDictionary.d.ts +4 -0
  75. package/dist/framework/Language/Languages/EstonianDictionary.js +40 -0
  76. package/dist/framework/Language/Languages/EstonianDictionary.js.map +1 -0
  77. package/dist/framework/Language/Languages/FinnishDictionary.d.ts +4 -0
  78. package/dist/framework/Language/Languages/FinnishDictionary.js +40 -0
  79. package/dist/framework/Language/Languages/FinnishDictionary.js.map +1 -0
  80. package/dist/framework/Language/Languages/FrenchDictionary.d.ts +4 -0
  81. package/dist/framework/Language/Languages/FrenchDictionary.js +40 -0
  82. package/dist/framework/Language/Languages/FrenchDictionary.js.map +1 -0
  83. package/dist/framework/Language/Languages/GermanDictionary.d.ts +4 -0
  84. package/dist/framework/Language/Languages/GermanDictionary.js +40 -0
  85. package/dist/framework/Language/Languages/GermanDictionary.js.map +1 -0
  86. package/dist/framework/Language/Languages/GreekDictionary.d.ts +4 -0
  87. package/dist/framework/Language/Languages/GreekDictionary.js +40 -0
  88. package/dist/framework/Language/Languages/GreekDictionary.js.map +1 -0
  89. package/dist/framework/Language/Languages/HungarianDictionary.d.ts +4 -0
  90. package/dist/framework/Language/Languages/HungarianDictionary.js +40 -0
  91. package/dist/framework/Language/Languages/HungarianDictionary.js.map +1 -0
  92. package/dist/framework/Language/Languages/IcelandicDictionary.d.ts +4 -0
  93. package/dist/framework/Language/Languages/IcelandicDictionary.js +40 -0
  94. package/dist/framework/Language/Languages/IcelandicDictionary.js.map +1 -0
  95. package/dist/framework/Language/Languages/ItalianDictionary.d.ts +4 -0
  96. package/dist/framework/Language/Languages/ItalianDictionary.js +40 -0
  97. package/dist/framework/Language/Languages/ItalianDictionary.js.map +1 -0
  98. package/dist/framework/Language/Languages/LatvianDictionary.d.ts +4 -0
  99. package/dist/framework/Language/Languages/LatvianDictionary.js +40 -0
  100. package/dist/framework/Language/Languages/LatvianDictionary.js.map +1 -0
  101. package/dist/framework/Language/Languages/LituanianDictionary.d.ts +4 -0
  102. package/dist/framework/Language/Languages/LituanianDictionary.js +40 -0
  103. package/dist/framework/Language/Languages/LituanianDictionary.js.map +1 -0
  104. package/dist/framework/Language/Languages/NorwegianDictionary.d.ts +4 -0
  105. package/dist/framework/Language/Languages/NorwegianDictionary.js +40 -0
  106. package/dist/framework/Language/Languages/NorwegianDictionary.js.map +1 -0
  107. package/dist/framework/Language/Languages/PolishDictionary.d.ts +4 -0
  108. package/dist/framework/Language/Languages/PolishDictionary.js +40 -0
  109. package/dist/framework/Language/Languages/PolishDictionary.js.map +1 -0
  110. package/dist/framework/Language/Languages/PortugueseDictionary.d.ts +4 -0
  111. package/dist/framework/Language/Languages/PortugueseDictionary.js +40 -0
  112. package/dist/framework/Language/Languages/PortugueseDictionary.js.map +1 -0
  113. package/dist/framework/Language/Languages/SpanishDictionary.d.ts +4 -0
  114. package/dist/framework/Language/Languages/SpanishDictionary.js +40 -0
  115. package/dist/framework/Language/Languages/SpanishDictionary.js.map +1 -0
  116. package/dist/framework/Language/Languages/SwedishDictionary.d.ts +4 -0
  117. package/dist/framework/Language/Languages/SwedishDictionary.js +40 -0
  118. package/dist/framework/Language/Languages/SwedishDictionary.js.map +1 -0
  119. package/dist/framework/Language/Translator.d.ts +23 -6
  120. package/dist/framework/Language/Translator.js +115 -32
  121. package/dist/framework/Language/Translator.js.map +1 -1
  122. package/dist/framework/Models/OptionWithDescription.d.ts +6 -6
  123. package/dist/framework/Models/OptionWithDescription.js +9 -9
  124. package/dist/framework/Polyfills/getAttributeNamesPolyfill.d.ts +1 -1
  125. package/dist/framework/Polyfills/getAttributeNamesPolyfill.js +17 -17
  126. package/dist/framework/Translations/CaseConverter.d.ts +5 -5
  127. package/dist/framework/Translations/CaseConverter.js +50 -50
  128. package/dist/framework/Utilities/ArrayUtil.d.ts +6 -0
  129. package/dist/framework/Utilities/ArrayUtil.js +37 -0
  130. package/dist/framework/Utilities/ArrayUtil.js.map +1 -0
  131. package/dist/framework/Utilities/DomUtil.d.ts +21 -0
  132. package/dist/framework/Utilities/DomUtil.js +102 -0
  133. package/dist/framework/Utilities/DomUtil.js.map +1 -0
  134. package/dist/framework/Utilities/DomUtility.d.ts +3 -3
  135. package/dist/framework/Utilities/DomUtility.js +12 -12
  136. package/dist/framework/Utilities/MakeRequest.d.ts +8 -0
  137. package/dist/framework/Utilities/MakeRequest.js +49 -0
  138. package/dist/framework/Utilities/MakeRequest.js.map +1 -0
  139. package/dist/framework/Utilities/StringUtil.d.ts +4 -0
  140. package/dist/framework/Utilities/StringUtil.js +17 -0
  141. package/dist/framework/Utilities/StringUtil.js.map +1 -0
  142. package/dist/framework/Utilities/ViewportUtil.d.ts +8 -0
  143. package/dist/framework/Utilities/ViewportUtil.js +43 -0
  144. package/dist/framework/Utilities/ViewportUtil.js.map +1 -0
  145. package/dist/framework/Utilities/debouncer.d.ts +8 -8
  146. package/dist/framework/Utilities/debouncer.js +51 -51
  147. package/dist/framework/Validation/IValidator.interface.d.ts +3 -3
  148. package/dist/framework/Validation/IValidator.interface.js +2 -2
  149. package/dist/framework/Validation/Validators/BankAccount.d.ts +4 -4
  150. package/dist/framework/Validation/Validators/BankAccount.js +12 -12
  151. package/dist/framework/Validation/Validators/BankAccountRegistrationNumber.d.ts +4 -4
  152. package/dist/framework/Validation/Validators/BankAccountRegistrationNumber.js +12 -12
  153. package/dist/framework/Validation/Validators/BankIdNorway.d.ts +5 -5
  154. package/dist/framework/Validation/Validators/BankIdNorway.js +21 -21
  155. package/dist/framework/Validation/Validators/BankIdSweden.d.ts +5 -5
  156. package/dist/framework/Validation/Validators/BankIdSweden.js +21 -21
  157. package/dist/framework/Validation/Validators/CPR.d.ts +9 -9
  158. package/dist/framework/Validation/Validators/CPR.js +75 -75
  159. package/dist/framework/Validation/Validators/CVR.d.ts +5 -5
  160. package/dist/framework/Validation/Validators/CVR.js +30 -30
  161. package/dist/framework/custom-element.decorator.d.ts +9 -9
  162. package/dist/framework/custom-element.decorator.js +51 -51
  163. package/dist/index.d.ts +7 -7
  164. package/dist/index.js +14 -14
  165. package/node_modules/@webcomponents/webcomponentsjs/CHANGELOG.md +15 -0
  166. package/node_modules/@webcomponents/webcomponentsjs/README.md +13 -0
  167. package/node_modules/@webcomponents/webcomponentsjs/bundles/webcomponents-ce.js +31 -31
  168. package/node_modules/@webcomponents/webcomponentsjs/bundles/webcomponents-ce.js.map +1 -1
  169. package/node_modules/@webcomponents/webcomponentsjs/bundles/webcomponents-pf_dom.js +15 -13
  170. package/node_modules/@webcomponents/webcomponentsjs/bundles/webcomponents-pf_dom.js.map +1 -1
  171. package/node_modules/@webcomponents/webcomponentsjs/bundles/webcomponents-pf_js.js.map +1 -1
  172. package/node_modules/@webcomponents/webcomponentsjs/bundles/webcomponents-sd-ce-pf.js +237 -223
  173. package/node_modules/@webcomponents/webcomponentsjs/bundles/webcomponents-sd-ce-pf.js.map +1 -1
  174. package/node_modules/@webcomponents/webcomponentsjs/bundles/webcomponents-sd-ce.js +188 -176
  175. package/node_modules/@webcomponents/webcomponentsjs/bundles/webcomponents-sd-ce.js.map +1 -1
  176. package/node_modules/@webcomponents/webcomponentsjs/bundles/webcomponents-sd.js +155 -144
  177. package/node_modules/@webcomponents/webcomponentsjs/bundles/webcomponents-sd.js.map +1 -1
  178. package/node_modules/@webcomponents/webcomponentsjs/package.json +31 -64
  179. package/node_modules/@webcomponents/webcomponentsjs/src/entrypoints/webcomponents-pf_dom-index.js +2 -0
  180. package/node_modules/@webcomponents/webcomponentsjs/src/platform/event-listener-options.js +122 -0
  181. package/node_modules/@webcomponents/webcomponentsjs/src/platform/toggle-attribute.js +39 -0
  182. package/node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.d.ts +1 -0
  183. package/node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js +239 -225
  184. package/node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js.map +1 -1
  185. package/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js +35 -3
  186. package/package.json +38 -39
  187. package/src/custom-form.ts +140 -139
  188. package/src/elements/Address/AddressElement.ts +216 -216
  189. package/src/elements/BankField/BankFieldElement.ts +127 -127
  190. package/src/elements/CPRElement/CPRElement.ts +74 -74
  191. package/src/elements/CVRElement/CVRElement.ts +75 -75
  192. package/src/elements/CheckBoxElement/CheckBoxElement.ts +99 -99
  193. package/src/elements/CustomRegularExpression/CustomRegularExpressionElement.ts +75 -75
  194. package/src/elements/DateField/DateFieldElement.ts +78 -78
  195. package/src/elements/DropDownList/DropDownListElement.ts +100 -100
  196. package/src/elements/Elements.ts +37 -37
  197. package/src/elements/EmailField/EmailFieldElement.ts +78 -78
  198. package/src/elements/FileField/FileFieldElement.ts +96 -76
  199. package/src/elements/IdentificationElement/IdentificationElement.ts +104 -104
  200. package/src/elements/InternationaPhoneNumber/InternationaPhoneNumberElement.ts +116 -111
  201. package/src/elements/NumericField/NumericFieldElement.ts +84 -84
  202. package/src/elements/RadioButtonGroup/RadioButtonGroupElement.ts +103 -103
  203. package/src/elements/TextAreaElement/TextAreaElement.ts +72 -72
  204. package/src/elements/TextField/TextFieldElement.ts +72 -72
  205. package/src/elements/TypeAhead/TypeAheadElement.ts +248 -248
  206. package/src/framework/CustomEvents.ts +47 -47
  207. package/src/framework/CustomInputElement.ts +277 -276
  208. package/src/framework/Language/Languages/Base/BaseDictionary.ts +15 -15
  209. package/src/framework/Language/Languages/CzechDictionary.ts +18 -0
  210. package/src/framework/Language/Languages/DanishDictionary.ts +17 -17
  211. package/src/framework/Language/Languages/DutchDictionary.ts +18 -0
  212. package/src/framework/Language/Languages/EnglishDictionary.ts +18 -18
  213. package/src/framework/Language/Languages/EstonianDictionary.ts +18 -0
  214. package/src/framework/Language/Languages/FinnishDictionary.ts +18 -0
  215. package/src/framework/Language/Languages/FrenchDictionary.ts +18 -0
  216. package/src/framework/Language/Languages/GermanDictionary.ts +18 -0
  217. package/src/framework/Language/Languages/GreekDictionary.ts +18 -0
  218. package/src/framework/Language/Languages/HungarianDictionary.ts +18 -0
  219. package/src/framework/Language/Languages/IcelandicDictionary.ts +18 -0
  220. package/src/framework/Language/Languages/ItalianDictionary.ts +18 -0
  221. package/src/framework/Language/Languages/LatvianDictionary.ts +18 -0
  222. package/src/framework/Language/Languages/LituanianDictionary.ts +18 -0
  223. package/src/framework/Language/Languages/NorwegianDictionary.ts +18 -0
  224. package/src/framework/Language/Languages/PolishDictionary.ts +18 -0
  225. package/src/framework/Language/Languages/PortugueseDictionary.ts +18 -0
  226. package/src/framework/Language/Languages/SpanishDictionary.ts +18 -0
  227. package/src/framework/Language/Languages/SwedishDictionary.ts +18 -0
  228. package/src/framework/Language/Translator.ts +110 -26
  229. package/src/framework/Models/OptionWithDescription.ts +8 -8
  230. package/src/framework/Polyfills/getAttributeNamesPolyfill.ts +13 -13
  231. package/src/framework/Translations/CaseConverter.ts +43 -43
  232. package/src/framework/Utilities/ArrayUtil.ts +31 -0
  233. package/src/framework/Utilities/DomUtil.ts +117 -0
  234. package/src/framework/Utilities/DomUtility.ts +6 -6
  235. package/src/framework/Utilities/MakeRequest.ts +47 -0
  236. package/src/framework/Utilities/StringUtil.ts +9 -0
  237. package/src/framework/Utilities/ViewportUtil.ts +46 -0
  238. package/src/framework/Utilities/debouncer.ts +66 -66
  239. package/src/framework/Validation/IValidator.interface.ts +3 -3
  240. package/src/framework/Validation/Validators/BankAccount.ts +7 -7
  241. package/src/framework/Validation/Validators/BankAccountRegistrationNumber.ts +8 -8
  242. package/src/framework/Validation/Validators/BankIdNorway.ts +21 -21
  243. package/src/framework/Validation/Validators/BankIdSweden.ts +21 -21
  244. package/src/framework/Validation/Validators/CPR.ts +82 -82
  245. package/src/framework/Validation/Validators/CVR.ts +27 -27
  246. package/src/framework/custom-element.decorator.ts +57 -57
  247. 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>