@luftborn/custom-elements 2.15.1 → 2.15.3

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 (54) hide show
  1. package/demo/index.html +2 -3
  2. package/demo/index.js +63 -47
  3. package/demo/index.min.js +62 -46
  4. package/demo/index.min.js.map +1 -1
  5. package/dist/elements/Address/AddressElement.js +6 -6
  6. package/dist/elements/Address/AddressElement.js.map +1 -1
  7. package/dist/elements/BankField/BankFieldElement.js +4 -4
  8. package/dist/elements/BankField/BankFieldElement.js.map +1 -1
  9. package/dist/elements/CPRElement/CPRElement.js +1 -1
  10. package/dist/elements/CVRElement/CVRElement.js +1 -1
  11. package/dist/elements/CheckBoxElement/CheckBoxElement.d.ts +1 -0
  12. package/dist/elements/CheckBoxElement/CheckBoxElement.js +15 -7
  13. package/dist/elements/CheckBoxElement/CheckBoxElement.js.map +1 -1
  14. package/dist/elements/CustomFormatDateFieldElement/CustomFormatDateFieldElement.js +1 -1
  15. package/dist/elements/CustomRegularExpression/CustomRegularExpressionElement.js +1 -1
  16. package/dist/elements/DateField/DateFieldElement.js +1 -1
  17. package/dist/elements/DropDownList/DropDownListElement.js +1 -1
  18. package/dist/elements/EmailField/EmailFieldElement.js +1 -1
  19. package/dist/elements/FileField/FileFieldElement.js +1 -1
  20. package/dist/elements/IdentificationElement/IdentificationElement.js +1 -1
  21. package/dist/elements/InternationaPhoneNumber/InternationaPhoneNumberElement.js +1 -1
  22. package/dist/elements/NumericField/NumericFieldElement.js +1 -1
  23. package/dist/elements/RadioButtonGroup/RadioButtonGroupElement.d.ts +1 -0
  24. package/dist/elements/RadioButtonGroup/RadioButtonGroupElement.js +15 -7
  25. package/dist/elements/RadioButtonGroup/RadioButtonGroupElement.js.map +1 -1
  26. package/dist/elements/ResidentIdentification/ResidentIdentificationElement.js +6 -6
  27. package/dist/elements/ResidentIdentification/ResidentIdentificationElement.js.map +1 -1
  28. package/dist/elements/SECompanyRegistrationElement/SECompanyRegistrationElement.js +1 -1
  29. package/dist/elements/SEPersonalNumberElement/SEPersonalNumberElement.js +1 -1
  30. package/dist/elements/TextAreaElement/TextAreaElement.js +1 -1
  31. package/dist/elements/TextField/TextFieldElement.js +1 -1
  32. package/dist/elements/TypeAhead/TypeAheadElement.js +1 -1
  33. package/package.json +1 -1
  34. package/src/elements/Address/AddressElement.ts +9 -9
  35. package/src/elements/BankField/BankFieldElement.ts +5 -5
  36. package/src/elements/CPRElement/CPRElement.ts +1 -1
  37. package/src/elements/CVRElement/CVRElement.ts +1 -1
  38. package/src/elements/CheckBoxElement/CheckBoxElement.ts +19 -12
  39. package/src/elements/CustomFormatDateFieldElement/CustomFormatDateFieldElement.ts +1 -1
  40. package/src/elements/CustomRegularExpression/CustomRegularExpressionElement.ts +1 -1
  41. package/src/elements/DateField/DateFieldElement.ts +1 -1
  42. package/src/elements/DropDownList/DropDownListElement.ts +1 -1
  43. package/src/elements/EmailField/EmailFieldElement.ts +1 -1
  44. package/src/elements/FileField/FileFieldElement.ts +1 -1
  45. package/src/elements/IdentificationElement/IdentificationElement.ts +1 -1
  46. package/src/elements/InternationaPhoneNumber/InternationaPhoneNumberElement.ts +1 -1
  47. package/src/elements/NumericField/NumericFieldElement.ts +1 -1
  48. package/src/elements/RadioButtonGroup/RadioButtonGroupElement.ts +19 -12
  49. package/src/elements/ResidentIdentification/ResidentIdentificationElement.ts +9 -9
  50. package/src/elements/SECompanyRegistrationElement/SECompanyRegistrationElement.ts +1 -1
  51. package/src/elements/SEPersonalNumberElement/SEPersonalNumberElement.ts +1 -1
  52. package/src/elements/TextAreaElement/TextAreaElement.ts +1 -1
  53. package/src/elements/TextField/TextFieldElement.ts +1 -1
  54. package/src/elements/TypeAhead/TypeAheadElement.ts +1 -1
package/src/elements/BankField/BankFieldElement.ts CHANGED
@@ -12,8 +12,8 @@ import Translator from '../../framework/Language/Translator';
12
12
  </div>
13
13
  <div class="field-input">
14
14
  <div class="wrapper">
15
- <input type="text" id='reg-number-field' placeholder='Bank Account Registration Number'/>
16
- <input type="text" id='account-field' placeholder='Bank Account'/>
15
+ <input type="text" class='reg-number-field' id='reg-number-field' placeholder='Bank Account Registration Number'/>
16
+ <input type="text" class='account-field' id='account-field' placeholder='Bank Account'/>
17
17
  </div>
18
18
  </div>`,
19
19
  style: `
@@ -26,7 +26,7 @@ import Translator from '../../framework/Language/Translator';
26
26
  input{
27
27
  box-sizing: border-box;
28
28
  width: 100% !important;
29
- border: .1rem solid #27282D;
29
+ border: .1rem solid #5A616D;
30
30
  border-radius: .25rem;
31
31
  margin: 0.125rem;
32
32
  resize: none;
@@ -106,8 +106,8 @@ export class BankFieldElement extends CustomInputElement {
106
106
  }
107
107
 
108
108
  initChildInputs() {
109
- this.account = super.getChildInput('#account-field');
110
- this.regNumber = super.getChildInput('#reg-number-field');
109
+ this.account = super.getChildInput('.account-field');
110
+ this.regNumber = super.getChildInput('.reg-number-field');
111
111
  this.account.addEventListener('change', this.change.bind(this));
112
112
  this.regNumber.addEventListener('change', this.change.bind(this));
113
113
  if (this.required) {
package/src/elements/CPRElement/CPRElement.ts CHANGED
@@ -23,7 +23,7 @@ import CprValidator from '../../framework/Validation/Validators/CPR';
23
23
  input{
24
24
  box-sizing: border-box;
25
25
  width: 100% !important;
26
- border: .1rem solid #27282D;
26
+ border: .1rem solid #5A616D;
27
27
  border-radius: .25rem;
28
28
  margin: 0.125rem;
29
29
  resize: none;
package/src/elements/CVRElement/CVRElement.ts CHANGED
@@ -24,7 +24,7 @@ import CvrValidator from '../../framework/Validation/Validators/CVR';
24
24
  input{
25
25
  box-sizing: border-box;
26
26
  width: 100% !important;
27
- border: .1rem solid #27282D;
27
+ border: .1rem solid #5A616D;
28
28
  border-radius: .25rem;
29
29
  margin: 0.125rem;
30
30
  resize: none;
package/src/elements/CheckBoxElement/CheckBoxElement.ts CHANGED
@@ -6,11 +6,7 @@ import { StringUtil } from '../../framework/Utilities/StringUtil';
6
6
  @CustomElement({
7
7
  selector: 'checkbox-element',
8
8
  template: `
9
- <div class="field-label">
10
- </div>
11
- <div class="field-input">
12
- <div class="wrapper">
13
- </div>
9
+ <div class="wrapper">
14
10
  </div>`,
15
11
  style: `
16
12
  :host{
@@ -19,7 +15,7 @@ import { StringUtil } from '../../framework/Utilities/StringUtil';
19
15
  .checkbox {
20
16
  width: auto;
21
17
  margin: auto 0.188rem;
22
- color: rgba(72, 72, 72, 0.75);
18
+ color: #27282D;
23
19
  font-size: 0.813rem;
24
20
  margin-top: 0.25rem;
25
21
  }
@@ -29,7 +25,7 @@ import { StringUtil } from '../../framework/Utilities/StringUtil';
29
25
  input[type='checkbox']{
30
26
  box-sizing: border-box;
31
27
  width: auto !important;
32
- border: .1rem solid #27282D;
28
+ border: .1rem solid #5A616D;
33
29
  border-radius: .25rem;
34
30
  margin: 0.125rem;
35
31
  resize: none;
@@ -84,8 +80,7 @@ export class CheckBoxElement extends CustomInputElement {
84
80
 
85
81
  connectedCallback(): void {
86
82
  super.connectedCallback();
87
- const firstCheckbox = super.getChildElement('input[type="checkbox"]') as HTMLInputElement;
88
- super.addLabel(firstCheckbox);
83
+ this.addLegend();
89
84
  }
90
85
 
91
86
  initChildInputs() {
@@ -102,9 +97,7 @@ export class CheckBoxElement extends CustomInputElement {
102
97
  if (!fieldset) {
103
98
  fieldset = document.createElement('fieldset');
104
99
  wrapper.appendChild(fieldset);
105
- if (this.label) {
106
- fieldset.setAttribute('aria-label', this.label);
107
- }
100
+
108
101
  this.options.forEach((element, index) => {
109
102
  fieldset.insertAdjacentHTML(
110
103
  'beforeend',
@@ -118,6 +111,20 @@ export class CheckBoxElement extends CustomInputElement {
118
111
  });
119
112
  }
120
113
  }
114
+
115
+ private addLegend() {
116
+ const fieldset = this.shadowRoot.querySelector('fieldset');
117
+ if (this.label) {
118
+ fieldset.setAttribute('aria-label', this.label);
119
+ if (!this.hideLabel) {
120
+ const legend = document.createElement('legend');
121
+ legend.textContent = this.label;
122
+ legend.classList.add('field-label');
123
+ fieldset.insertAdjacentElement('afterbegin', legend);
124
+ }
125
+ }
126
+ }
127
+
121
128
  // events
122
129
  public change($event): void {
123
130
  this.touched = true;
package/src/elements/CustomFormatDateFieldElement/CustomFormatDateFieldElement.ts CHANGED
@@ -31,7 +31,7 @@ import { defaultDateFormat, supportedDateFormats, validateDateString } from './C
31
31
  input{
32
32
  box-sizing: border-box;
33
33
  width: 100% !important;
34
- border: .1rem solid #27282D;
34
+ border: .1rem solid #5A616D;
35
35
  border-radius: .25rem;
36
36
  margin: 0.125rem;
37
37
  resize: none;
package/src/elements/CustomRegularExpression/CustomRegularExpressionElement.ts CHANGED
@@ -22,7 +22,7 @@ import { CustomElementEventArgs } from '../../framework/CustomEvents';
22
22
  input{
23
23
  box-sizing: border-box;
24
24
  width: 100% !important;
25
- border: .1rem solid #27282D;
25
+ border: .1rem solid #5A616D;
26
26
  border-radius: .25rem;
27
27
  margin: 0.125rem;
28
28
  resize: none;
package/src/elements/DateField/DateFieldElement.ts CHANGED
@@ -22,7 +22,7 @@ import { CustomElementEventArgs } from '../../framework/CustomEvents';
22
22
  input{
23
23
  box-sizing: border-box;
24
24
  width: 100% !important;
25
- border: .1rem solid #27282D;
25
+ border: .1rem solid #5A616D;
26
26
  border-radius: .25rem;
27
27
  margin: 0.125rem;
28
28
  resize: none;
package/src/elements/DropDownList/DropDownListElement.ts CHANGED
@@ -33,7 +33,7 @@ import { StringUtil } from '../../framework/Utilities/StringUtil';
33
33
  select{
34
34
  box-sizing: border-box;
35
35
  width: 100% !important;
36
- border: .1rem solid #27282D;
36
+ border: .1rem solid #5A616D;
37
37
  border-radius: .25rem;
38
38
  margin: 0.125rem;
39
39
  resize: none;
package/src/elements/EmailField/EmailFieldElement.ts CHANGED
@@ -22,7 +22,7 @@ import { CustomElementEventArgs } from '../../framework/CustomEvents';
22
22
  input{
23
23
  box-sizing: border-box;
24
24
  width: 100% !important;
25
- border: .1rem solid #27282D;
25
+ border: .1rem solid #5A616D;
26
26
  border-radius: .25rem;
27
27
  margin: 0.125rem;
28
28
  resize: none;
package/src/elements/FileField/FileFieldElement.ts CHANGED
@@ -24,7 +24,7 @@ import EXIF = require('exif-js');
24
24
  input{
25
25
  box-sizing: border-box;
26
26
  width: 100% !important;
27
- border: .1rem solid #27282D;
27
+ border: .1rem solid #5A616D;
28
28
  border-radius: .25rem;
29
29
  margin: 0.125rem;
30
30
  resize: none;
package/src/elements/IdentificationElement/IdentificationElement.ts CHANGED
@@ -32,7 +32,7 @@ import BankIdNorwayValidator from '../../framework/Validation/Validators/BankIdN
32
32
  }
33
33
  input, select{
34
34
  box-sizing: border-box;
35
- border: .1rem solid #27282D;
35
+ border: .1rem solid #5A616D;
36
36
  border-radius: .25rem;
37
37
  margin: 0.125rem;
38
38
  resize: none;
package/src/elements/InternationaPhoneNumber/InternationaPhoneNumberElement.ts CHANGED
@@ -31,7 +31,7 @@ import GetFlags2XUrl from './Flags2x';
31
31
  input{
32
32
  box-sizing: border-box;
33
33
  width: 100% !important;
34
- border: .1rem solid #27282D;
34
+ border: .1rem solid #5A616D;
35
35
  border-radius: .25rem;
36
36
  margin: 0.125rem;
37
37
  resize: none;
package/src/elements/NumericField/NumericFieldElement.ts CHANGED
@@ -22,7 +22,7 @@ import { CustomElementEventArgs } from '../../framework/CustomEvents';
22
22
  input{
23
23
  box-sizing: border-box;
24
24
  width: 100% !important;
25
- border: .1rem solid #27282D;
25
+ border: .1rem solid #5A616D;
26
26
  border-radius: .25rem;
27
27
  margin: 0.125rem;
28
28
  resize: none;
package/src/elements/RadioButtonGroup/RadioButtonGroupElement.ts CHANGED
@@ -6,11 +6,7 @@ import { StringUtil } from '../../framework/Utilities/StringUtil';
6
6
  @CustomElement({
7
7
  selector: 'radio-group-element',
8
8
  template: `
9
- <div class="field-label">
10
- </div>
11
- <div class="field-input">
12
- <div class="wrapper">
13
- </div>
9
+ <div class="wrapper">
14
10
  </div>`,
15
11
  style: `
16
12
  :host{
@@ -19,7 +15,7 @@ import { StringUtil } from '../../framework/Utilities/StringUtil';
19
15
  .radio-button {
20
16
  width: auto;
21
17
  margin: auto 0.188rem;
22
- color: rgba(72, 72, 72, 0.75);
18
+ color: #27282D;
23
19
  font-size: 0.813rem;
24
20
  margin-top: 0.25rem;
25
21
  }
@@ -29,7 +25,7 @@ import { StringUtil } from '../../framework/Utilities/StringUtil';
29
25
  input{
30
26
  box-sizing: border-box;
31
27
  width: auto !important;
32
- border: .1rem solid #27282D;
28
+ border: .1rem solid #5A616D;
33
29
  border-radius: .25rem;
34
30
  margin: 0.2rem;
35
31
  resize: none;
@@ -87,8 +83,7 @@ export class RadioButtonGroupElement extends CustomInputElement {
87
83
 
88
84
  connectedCallback(): void {
89
85
  super.connectedCallback();
90
- const firstRadioButton = super.getChildElement('input[type="radio"]') as HTMLInputElement;
91
- super.addLabel(firstRadioButton);
86
+ this.addLegend();
92
87
  }
93
88
 
94
89
  initChildInputs() {
@@ -108,9 +103,7 @@ export class RadioButtonGroupElement extends CustomInputElement {
108
103
  if (!fieldset) {
109
104
  fieldset = document.createElement('fieldset');
110
105
  wrapper.appendChild(fieldset);
111
- if (this.label) {
112
- fieldset.setAttribute('aria-label', this.label);
113
- }
106
+
114
107
  this.options.forEach((element, index) => {
115
108
  fieldset.insertAdjacentHTML(
116
109
  'beforeend',
@@ -125,6 +118,20 @@ export class RadioButtonGroupElement extends CustomInputElement {
125
118
  });
126
119
  }
127
120
  }
121
+
122
+ private addLegend() {
123
+ const fieldset = this.shadowRoot.querySelector('fieldset');
124
+ if (this.label) {
125
+ fieldset.setAttribute('aria-label', this.label);
126
+ if (!this.hideLabel) {
127
+ const legend = document.createElement('legend');
128
+ legend.textContent = this.label;
129
+ legend.classList.add('field-label');
130
+ fieldset.insertAdjacentElement('afterbegin', legend);
131
+ }
132
+ }
133
+ }
134
+
128
135
  // events
129
136
  public change($event): void {
130
137
  this.touched = true;
package/src/elements/ResidentIdentification/ResidentIdentificationElement.ts CHANGED
@@ -12,10 +12,10 @@ import ResidentIdentificationValidator from '../../framework/Validation/Validato
12
12
  </div>
13
13
  <div class="field-input">
14
14
  <div class="field-wrapper">
15
- <input class='field-part' id='company' type="text" placeholder='Company'/>
16
- <input class='field-part' id='property' type="text" placeholder='Property'/>
17
- <input class='field-part' id='tenancy' type="text" placeholder='Tenancy'/>
18
- <input class='field-part' id='tenant' type="text" placeholder='Tenant'/>
15
+ <input class='field-part company' id='company' type="text" placeholder='Company'/>
16
+ <input class='field-part property' id='property' type="text" placeholder='Property'/>
17
+ <input class='field-part tenancy' id='tenancy' type="text" placeholder='Tenancy'/>
18
+ <input class='field-part tenant' id='tenant' type="text" placeholder='Tenant'/>
19
19
  </div>
20
20
  </div>`,
21
21
  style: `
@@ -25,7 +25,7 @@ import ResidentIdentificationValidator from '../../framework/Validation/Validato
25
25
  }
26
26
  input.field-part{
27
27
  box-sizing: border-box;
28
- border: .1rem solid #27282D;
28
+ border: .1rem solid #5A616D;
29
29
  border-radius: .25rem;
30
30
  margin: 0.125rem;
31
31
  resize: none;
@@ -94,10 +94,10 @@ export class ResidentIdentificationElement extends CustomInputElement {
94
94
  }
95
95
 
96
96
  initChildInputs() {
97
- this.company = super.getChildInput('#company');
98
- this.property = super.getChildInput('#property');
99
- this.tenancy = super.getChildInput('#tenancy');
100
- this.tenant = super.getChildInput('#tenant');
97
+ this.company = super.getChildInput('.company');
98
+ this.property = super.getChildInput('.property');
99
+ this.tenancy = super.getChildInput('.tenancy');
100
+ this.tenant = super.getChildInput('.tenant');
101
101
  this.company.addEventListener('change', this.change.bind(this));
102
102
  this.property.addEventListener('change', this.change.bind(this));
103
103
  this.tenancy.addEventListener('change', this.change.bind(this));
package/src/elements/SECompanyRegistrationElement/SECompanyRegistrationElement.ts CHANGED
@@ -23,7 +23,7 @@ import SECompanyRegistrationValidator from '../../framework/Validation/Validator
23
23
  input{
24
24
  box-sizing: border-box;
25
25
  width: 100% !important;
26
- border: .1rem solid #27282D;
26
+ border: .1rem solid #5A616D;
27
27
  border-radius: .25rem;
28
28
  margin: 0.125rem;
29
29
  resize: none;
package/src/elements/SEPersonalNumberElement/SEPersonalNumberElement.ts CHANGED
@@ -23,7 +23,7 @@ import SEPersonalNumberValidator from '../../framework/Validation/Validators/SEP
23
23
  input{
24
24
  box-sizing: border-box;
25
25
  width: 100% !important;
26
- border: .1rem solid #27282D;
26
+ border: .1rem solid #5A616D;
27
27
  border-radius: .25rem;
28
28
  margin: 0.125rem;
29
29
  resize: none;
package/src/elements/TextAreaElement/TextAreaElement.ts CHANGED
@@ -22,7 +22,7 @@ import { CustomElementEventArgs } from '../../framework/CustomEvents';
22
22
  textarea{
23
23
  box-sizing: border-box;
24
24
  width: 100% !important;
25
- border: .1rem solid #27282D;
25
+ border: .1rem solid #5A616D;
26
26
  border-radius: .25rem;
27
27
  margin: 0.125rem;
28
28
  resize: none;
package/src/elements/TextField/TextFieldElement.ts CHANGED
@@ -23,7 +23,7 @@ import { CustomElementEventArgs } from '../../framework/CustomEvents';
23
23
  input{
24
24
  box-sizing: border-box;
25
25
  width: 100% !important;
26
- border: .1rem solid #27282D;
26
+ border: .1rem solid #5A616D;
27
27
  border-radius: .25rem;
28
28
  margin: 0.125rem;
29
29
  resize: none;
package/src/elements/TypeAhead/TypeAheadElement.ts CHANGED
@@ -32,7 +32,7 @@ import DomUtility from '../../framework/Utilities/DomUtility';
32
32
  .text-input {
33
33
  box-sizing: border-box;
34
34
  width: 100% !important;
35
- border: .1rem solid #27282D;
35
+ border: .1rem solid #5A616D;
36
36
  border-radius: .25rem;
37
37
  margin: 0.125rem;
38
38
  resize: none;