@luftborn/custom-elements 2.13.10 → 2.15.0

package/demo/index.html

@@ -65,107 +65,104 @@
 								<div class="field-item custom-validation-target">
 									<span class="invalid-message" style="display: none">Select an department</span>
 									<div class="field-item">
-										<div class="field-label">Department: </div>
-										<div class="field-input">
-											<type-ahead-element>
-												<script type="application/json">
-													{
-														"label": "department label",
-														"name": "department name",
-														"type": "type-ahead-element",
-														"required": true,
-														"noValueDependency": null,
-														"hasValueDependency": null,
-														"optionsWithDescriptions": [{
-																"title": "HR",
-																"value": "Dept001",
-																"description": "HR department"
-															},
-															{
-																"title": "Finance",
-																"value": "Dept002",
-																"description": "Financial department"
-															},
-															{
-																"title": "Sales",
-																"value": "Dept003",
-																"description": "Sales department"
-															},
-															{
-																"title": "Marketing",
-																"value": "Dept004",
-																"description": "Marketing department"
-															},
-															{
-																"title": "IT",
-																"value": "Dept005",
-																"description": "Information Technology department"
-															},
-															{
-																"title": "Finance",
-																"value": "Dept002",
-																"description": "Financial department"
-															},
-															{
-																"title": "Sales",
-																"value": "Dept003",
-																"description": "Sales department"
-															},
-															{
-																"title": "Marketing",
-																"value": "Dept004",
-																"description": "Marketing department"
-															},
-															{
-																"title": "IT",
-																"value": "Dept005",
-																"description": "Information Technology department"
-															},
-															{
-																"title": "Finance",
-																"value": "Dept002",
-																"description": "Financial department"
-															},
-															{
-																"title": "Sales",
-																"value": "Dept003",
-																"description": "Sales department"
-															},
-															{
-																"title": "Marketing",
-																"value": "Dept004",
-																"description": "Marketing department"
-															},
-															{
-																"title": "IT",
-																"value": "Dept005",
-																"description": "Information Technology department"
-															},
-															{
-																"title": "Finance",
-																"value": "Dept002",
-																"description": "Financial department"
-															},
-															{
-																"title": "Sales",
-																"value": "Dept003",
-																"description": "Sales department"
-															},
-															{
-																"title": "Marketing",
-																"value": "Dept004",
-																"description": "Marketing department"
-															},
-															{
-																"title": "IT",
-																"value": "Dept005",
-																"description": "Information Technology department"
-															}
-														]
-													}
-												</script>
-											</type-ahead-element>
-										</div>
+										<type-ahead-element>
+											<script type="application/json">
+												{
+													"label": "Department",
+													"name": "department name",
+													"type": "type-ahead-element",
+													"required": true,
+													"noValueDependency": null,
+													"hasValueDependency": null,
+													"optionsWithDescriptions": [{
+															"title": "HR",
+															"value": "Dept001",
+															"description": "HR department"
+														},
+														{
+															"title": "Finance",
+															"value": "Dept002",
+															"description": "Financial department"
+														},
+														{
+															"title": "Sales",
+															"value": "Dept003",
+															"description": "Sales department"
+														},
+														{
+															"title": "Marketing",
+															"value": "Dept004",
+															"description": "Marketing department"
+														},
+														{
+															"title": "IT",
+															"value": "Dept005",
+															"description": "Information Technology department"
+														},
+														{
+															"title": "Finance",
+															"value": "Dept002",
+															"description": "Financial department"
+														},
+														{
+															"title": "Sales",
+															"value": "Dept003",
+															"description": "Sales department"
+														},
+														{
+															"title": "Marketing",
+															"value": "Dept004",
+															"description": "Marketing department"
+														},
+														{
+															"title": "IT",
+															"value": "Dept005",
+															"description": "Information Technology department"
+														},
+														{
+															"title": "Finance",
+															"value": "Dept002",
+															"description": "Financial department"
+														},
+														{
+															"title": "Sales",
+															"value": "Dept003",
+															"description": "Sales department"
+														},
+														{
+															"title": "Marketing",
+															"value": "Dept004",
+															"description": "Marketing department"
+														},
+														{
+															"title": "IT",
+															"value": "Dept005",
+															"description": "Information Technology department"
+														},
+														{
+															"title": "Finance",
+															"value": "Dept002",
+															"description": "Financial department"
+														},
+														{
+															"title": "Sales",
+															"value": "Dept003",
+															"description": "Sales department"
+														},
+														{
+															"title": "Marketing",
+															"value": "Dept004",
+															"description": "Marketing department"
+														},
+														{
+															"title": "IT",
+															"value": "Dept005",
+															"description": "Information Technology department"
+														}
+													]
+												}
+											</script>
+										</type-ahead-element>
 									</div>
 								</div>
 							</div>
@@ -173,141 +170,117 @@
 								<div class="field-item custom-validation-target">
 									<span class="invalid-message" style="display: none">Enter a valid Address</span>
 									<div class="field-item">
-										<div class="field-label">Address: </div>
-										<div class="field-input">
-											<address-element language="en" google-places-key="AIzaSyCR6bpBitIMQgHHd7Mm2-q_-0CoeeHvxbA" enable-auto-complete="true">
-												<script type="application/json">
-													{
-														"label": "Adress label",
-														"name": "Adress name",
-														"type": "address-element",
-														"required": true,
-														"noValueDependency": null,
-														"hasValueDependency": null
-													}
-												</script>
-											</address-element>
-										</div>
+										<address-element language="en" google-places-key="AIzaSyCR6bpBitIMQgHHd7Mm2-q_-0CoeeHvxbA" enable-auto-complete="true">
+											<script type="application/json">
+												{
+													"label": "Adress label",
+													"name": "Adress name",
+													"type": "address-element",
+													"required": true,
+													"noValueDependency": null,
+													"hasValueDependency": null
+												}
+											</script>
+										</address-element>
 									</div>
 									
 									<div class="field-item">
-										<div class="field-label">Address: </div>
-										<div class="field-input">
-											<address-element language="en" google-places-key="AIzaSyCR6bpBitIMQgHHd7Mm2-q_-0CoeeHvxbA" enable-auto-complete="false">
-												<script type="application/json">
-													{
-														"label": "Adress label",
-														"name": "Adress 1",
-														"type": "address-element",
-														"required": true,
-														"noValueDependency": null,
-														"hasValueDependency": null
-													}
-												</script>
-											</address-element>
-										</div>
+										<address-element language="en" google-places-key="AIzaSyCR6bpBitIMQgHHd7Mm2-q_-0CoeeHvxbA" enable-auto-complete="false">
+											<script type="application/json">
+												{
+													"label": "Adress label",
+													"name": "Adress 1",
+													"type": "address-element",
+													"required": true,
+													"noValueDependency": null,
+													"hasValueDependency": null
+												}
+											</script>
+										</address-element>
 									</div>
 									<div class="field-item">
-										<div class="field-label">Address: </div>
-										<div class="field-input">
-											<address-element language="en" google-places-key="AIzaSyCR6bpBitIMQgHHd7Mm2-q_-0CoeeHvxbA" enable-auto-complete="false">
-												<script type="application/json">
-													{
-														"label": "Adress label",
-														"name": "Adress 1",
-														"type": "address-element",
-														"required": true,
-														"noValueDependency": null,
-														"hasValueDependency": null
-													}
-												</script>
-											</address-element>
-										</div>
+										<address-element language="en" google-places-key="AIzaSyCR6bpBitIMQgHHd7Mm2-q_-0CoeeHvxbA" enable-auto-complete="false">
+											<script type="application/json">
+												{
+													"label": "Adress label",
+													"name": "Adress 1",
+													"type": "address-element",
+													"required": true,
+													"noValueDependency": null,
+													"hasValueDependency": null
+												}
+											</script>
+										</address-element>
 									</div>
 									<div class="field-item">
-										<div class="field-label">Address: </div>
-										<div class="field-input">
-											<address-element language="en" google-places-key="AIzaSyCR6bpBitIMQgHHd7Mm2-q_-0CoeeHvxbA" enable-auto-complete="false">
-												<script type="application/json">
-													{
-														"label": "Adress label",
-														"name": "Adress 2",
-														"type": "address-element",
-														"required": true,
-														"noValueDependency": null,
-														"hasValueDependency": null
-													}
-												</script>
-											</address-element>
-										</div>
+										<address-element language="en" google-places-key="AIzaSyCR6bpBitIMQgHHd7Mm2-q_-0CoeeHvxbA" enable-auto-complete="false">
+											<script type="application/json">
+												{
+													"label": "Adress label",
+													"name": "Adress 2",
+													"type": "address-element",
+													"required": true,
+													"noValueDependency": null,
+													"hasValueDependency": null
+												}
+											</script>
+										</address-element>
 									</div>
 									<div class="field-item">
-										<div class="field-label">Address: </div>
-										<div class="field-input">
-											<address-element language="en" google-places-key="AIzaSyCR6bpBitIMQgHHd7Mm2-q_-0CoeeHvxbA" enable-auto-complete="false">
-												<script type="application/json">
-													{
-														"label": "Adress label",
-														"name": "Adress 3",
-														"type": "address-element",
-														"required": true,
-														"noValueDependency": null,
-														"hasValueDependency": null
-													}
-												</script>
-											</address-element>
-										</div>
+										<address-element language="en" google-places-key="AIzaSyCR6bpBitIMQgHHd7Mm2-q_-0CoeeHvxbA" enable-auto-complete="false">
+											<script type="application/json">
+												{
+													"label": "Adress label",
+													"name": "Adress 3",
+													"type": "address-element",
+													"required": true,
+													"noValueDependency": null,
+													"hasValueDependency": null
+												}
+											</script>
+										</address-element>
 									</div>
 									<div class="field-item">
-										<div class="field-label">Address: </div>
-										<div class="field-input">
-											<address-element language="en" google-places-key="AIzaSyCR6bpBitIMQgHHd7Mm2-q_-0CoeeHvxbA" enable-auto-complete="false">
-												<script type="application/json">
-													{
-														"label": "Adress label",
-														"name": "Adress 4",
-														"type": "address-element",
-														"required": true,
-														"noValueDependency": null,
-														"hasValueDependency": null
-													}
-												</script>
-											</address-element>
-										</div>
+										<address-element language="en" google-places-key="AIzaSyCR6bpBitIMQgHHd7Mm2-q_-0CoeeHvxbA" enable-auto-complete="false">
+											<script type="application/json">
+												{
+													"label": "Adress label",
+													"name": "Adress 4",
+													"type": "address-element",
+													"required": true,
+													"noValueDependency": null,
+													"hasValueDependency": null
+												}
+											</script>
+										</address-element>
 									</div>
 									<div class="field-item">
-										<div class="field-label">Address: </div>
-										<div class="field-input">
-											<address-element language="en" google-places-key="AIzaSyCR6bpBitIMQgHHd7Mm2-q_-0CoeeHvxbA" enable-auto-complete="false">
-												<script type="application/json">
-													{
-														"label": "Adress label",
-														"name": "Adress 5",
-														"type": "address-element",
-														"required": true,
-														"noValueDependency": null,
-														"hasValueDependency": null
-													}
-												</script>
-											</address-element>
-										</div>
+										<address-element language="en" google-places-key="AIzaSyCR6bpBitIMQgHHd7Mm2-q_-0CoeeHvxbA" enable-auto-complete="false">
+											<script type="application/json">
+												{
+													"label": "Adress label",
+													"name": "Adress 5",
+													"type": "address-element",
+													"required": true,
+													"noValueDependency": null,
+													"hasValueDependency": null
+												}
+											</script>
+										</address-element>
 									</div>
 									<div class="field-item">
-										<div class="field-label">Bank: </div>
-										<div class="field-input">
-											<bank-element language="da">
-												<script type="application/json">
-													{
-														"label": "Bank label",
-														"name": "Bank name",
-														"type": "bank-element",
-														"required": true,
-														"noValueDependency": null,
-														"hasValueDependency": null
-													}
-												</script>
-											</bank-element>
-										</div>
+										<bank-element language="da">
+											<script type="application/json">
+												{
+													"label": "Bank label",
+													"name": "Bank name",
+													"type": "bank-element",
+													"required": true,
+													"noValueDependency": null,
+													"hasValueDependency": null
+												}
+											</script>
+										</bank-element>
 									</div>
 									<div class="field-item">
 										<div class="field-label">CVR: </div>
@@ -326,58 +299,75 @@
 											</bank-element>
 										</div>
 									</div>
+									<div class="field-item custom-validation-target">
+										<span class="invalid-message" style="display: none">Enter a valid checkbox</span>
+										<div class="field-item">
+											<div class="field-label">Resident Identification element:</div>
+											<div class="field-input">
+												<resident-identification-element language="lt">
+													<script type="application/json">
+														{
+															"label": "Resident Identification",
+															"name": "resident-identification",
+															"value": null,
+															"type": "resident-identification",
+															"required": true,
+															"options": [],
+															"noValueDependency": null,
+															"hasValueDependency": null,
+															"dependencies": []
+														}
+													</script>
+												</resident-identification-element>
+											</div>
+										</div>
+									</div>
 								</div>
 							</div>
 							<div class="group-row">
 								<div class="field-item">
-									<div class="field-label">Navn: </div>
-									<div class="field-input">
-										<text-element>
+									<text-element>
+										<script type="application/json">
+											{
+												"label": "Name",
+												"name": "name",
+												"value": null,
+												"type": "Text",
+												"required": true,
+												"options": [],
+												"noValueDependency": null,
+												"hasValueDependency": null,
+												"dependencies": [{
+													"value": "peter",
+													"criteria": "Exact",
+													"items": ["email"]
+												}]
+											}
+										</script>
+									</text-element>
+								</div>
+								<div class="field-item custom-validation-target">
+									<span class="invalid-message" style="display: none">Enter a valid checkbox</span>
+									<div class="field-item">
+										<checkbox-element>
 											<script type="application/json">
 												{
-													"label": "Name",
-													"name": "name",
+													"label": "My dummy Checkbox",
+													"name": "checkbox1",
 													"value": null,
-													"type": "Text",
-													"required": true,
-													"options": [],
+													"type": "checkbox",
+													"required": false,
+													"options": ["Ja", "Nej"],
 													"noValueDependency": null,
 													"hasValueDependency": null,
 													"dependencies": [{
-														"value": "peter",
+														"value": "Ja",
 														"criteria": "Exact",
-														"items": ["email"]
+														"items": ["email2"]
 													}]
 												}
 											</script>
-										</text-element>
-									</div>
-								</div>
-								<div class="field-item custom-validation-target">
-									<span class="invalid-message" style="display: none">Enter a valid checkbox</span>
-									<div class="field-item">
-										<div class="field-label">Display G2: </div>
-										<div class="field-input">
-											<checkbox-element>
-												<script type="application/json">
-													{
-														"label": "Checkbox",
-														"name": "checkbox1",
-														"value": null,
-														"type": "checkbox",
-														"required": false,
-														"options": ["Ja", "Nej"],
-														"noValueDependency": null,
-														"hasValueDependency": null,
-														"dependencies": [{
-															"value": "Ja",
-															"criteria": "Exact",
-															"items": ["email2"]
-														}]
-													}
-												</script>
-											</checkbox-element>
-										</div>
+										</checkbox-element>
 									</div>
 								</div>
 								<div class="field-item custom-validation-target">
@@ -424,6 +414,26 @@
 									</div>
 								</div>
 							</div>
+							<div class="group-row">
+								<div class="field-item">
+									<div class="field-label">Select: </div>
+									<div class="field-input">
+										<drop-down-element>
+											<script type="application/json">
+												{
+													"label": "Select",
+													"name": "select1",
+													"value": null,
+													"type": "select",
+													"required": false,
+													"options": ["Option 1", "Option 2", "Option 3"],
+													"noValueDependency": null,
+													"hasValueDependency": null,
+													"dependencies": []
+												}
+											</script>
+										</drop-down-element>
+									</div>
 							<div class="group-row">
 								<div class="field-item">
 									<div class="field-label">E-mail: </div>