@everymatrix/general-input 1.49.1 → 1.50.0

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 (25) hide show
  1. package/dist/cjs/checkbox-group-input_10.cjs.entry.js +19 -12
  2. package/dist/cjs/toggle-checkbox-input.cjs.entry.js +1 -1
  3. package/dist/collection/components/checkbox-group-input/checkbox-group-input.css +8 -8
  4. package/dist/collection/components/checkbox-input/checkbox-input.css +7 -7
  5. package/dist/collection/components/date-input/date-input.css +12 -12
  6. package/dist/collection/components/email-input/email-input.css +13 -13
  7. package/dist/collection/components/number-input/number-input.css +11 -11
  8. package/dist/collection/components/password-input/password-input.css +25 -25
  9. package/dist/collection/components/radio-input/radio-input.css +4 -4
  10. package/dist/collection/components/select-input/select-input.css +16 -16
  11. package/dist/collection/components/select-input/select-input.js +9 -2
  12. package/dist/collection/components/tel-input/tel-input.css +19 -19
  13. package/dist/collection/components/text-input/text-input.css +14 -14
  14. package/dist/collection/components/toggle-checkbox-input/toggle-checkbox-input.css +7 -7
  15. package/dist/esm/checkbox-group-input_10.entry.js +19 -12
  16. package/dist/esm/toggle-checkbox-input.entry.js +1 -1
  17. package/dist/general-input/general-input.esm.js +1 -1
  18. package/dist/general-input/{p-f5ae5ebf.entry.js → p-be9966ea.entry.js} +1 -1
  19. package/dist/general-input/{p-77266677.entry.js → p-f0ec256d.entry.js} +4 -4
  20. package/dist/types/Users/maria.bumbar/Desktop/widgets-monorepo/packages/stencil/general-input/.stencil/packages/stencil/general-input/stencil.config.d.ts +2 -0
  21. package/dist/types/Users/maria.bumbar/Desktop/widgets-monorepo/packages/stencil/general-input/.stencil/packages/stencil/general-input/stencil.config.dev.d.ts +2 -0
  22. package/dist/types/components/select-input/select-input.d.ts +1 -0
  23. package/package.json +1 -1
  24. package/dist/types/Users/adrian.pripon/Documents/Work/widgets-monorepo/packages/stencil/general-input/.stencil/packages/stencil/general-input/stencil.config.d.ts +0 -2
  25. package/dist/types/Users/adrian.pripon/Documents/Work/widgets-monorepo/packages/stencil/general-input/.stencil/packages/stencil/general-input/stencil.config.dev.d.ts +0 -2
package/dist/collection/components/password-input/password-input.css CHANGED
@@ -21,10 +21,10 @@
21
21
  pointer-events: none;
22
22
  }
23
23
  .password__wrapper--autofilled .password__label {
24
- color: var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));
24
+ color: var(--emw--registration-typography, var(--emw--color-black, #000000));
25
25
  }
26
26
  .password__wrapper--autofilled .password__input::part(input-field) {
27
- color: var(--emfe-w-color-black, #000000);
27
+ color: var(--emw--color-black, #000000);
28
28
  }
29
29
  .password__wrapper--flex {
30
30
  display: flex;
@@ -39,12 +39,12 @@
39
39
  font-weight: 500;
40
40
  font-size: 16px;
41
41
  line-height: 20px;
42
- color: var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));
42
+ color: var(--emw--registration-typography, var(--emw--color-black, #000000));
43
43
  }
44
44
  .password__label--required::after {
45
45
  content: "*";
46
46
  font-family: inherit;
47
- color: var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));
47
+ color: var(--emw--login-color-primary, var(--emw--color-primary, #D0046C));
48
48
  margin-left: 2px;
49
49
  }
50
50
  .password__input {
@@ -52,17 +52,17 @@
52
52
  border: none;
53
53
  }
54
54
  .password__input[focused]::part(input-field) {
55
- border-color: var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));
55
+ border-color: var(--emw--login-color-primary, var(--emw--color-primary, #D0046C));
56
56
  }
57
57
  .password__input[invalid]::part(input-field) {
58
- border: 1px solid var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909));
58
+ border: 1px solid var(--emw--color-error, var(--emw--color-red, #ed0909));
59
59
  }
60
60
  .password__input::part(input-field) {
61
61
  border-radius: 4px;
62
- background-color: var(--emfe-w-color-white, #FFFFFF);
63
- border: 1px solid var(--emfe-w-color-gray-100, #E6E6E6);
64
- color: var(--emfe-w-color-black, #000000);
65
- background-color: var(--emfe-w-color-white, #FFFFFF);
62
+ background-color: var(--emw--color-white, #FFFFFF);
63
+ border: 1px solid var(--emw--color-gray-100, #E6E6E6);
64
+ color: var(--emw--color-black, #000000);
65
+ background-color: var(--emw--color-white, #FFFFFF);
66
66
  font-family: inherit;
67
67
  font-style: normal;
68
68
  font-weight: 300;
@@ -79,19 +79,19 @@
79
79
  right: 10px;
80
80
  }
81
81
  .password__input::part(reveal-button)::before {
82
- color: var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));
82
+ color: var(--emw--registration-typography, var(--emw--color-black, #000000));
83
83
  }
84
84
  .password__input > input {
85
85
  padding: 5px 15px;
86
86
  }
87
87
  .password__input > input:placeholder-shown {
88
- color: var(--emfe-w-color-gray-150, #828282);
88
+ color: var(--emw--color-gray-150, #828282);
89
89
  }
90
90
  .password__error-message {
91
91
  position: absolute;
92
92
  top: calc(100% + 5px);
93
93
  left: 0;
94
- color: var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909));
94
+ color: var(--emw--color-error, var(--emw--color-red, #ed0909));
95
95
  }
96
96
  .password__complexity {
97
97
  position: relative;
@@ -102,7 +102,7 @@
102
102
  justify-content: center;
103
103
  margin-top: 20px;
104
104
  font-weight: 300;
105
- background: var(--emfe-w-color-white, #FFFFFF);
105
+ background: var(--emw--color-white, #FFFFFF);
106
106
  -webkit-border-radius: 5px;
107
107
  -moz-border-radius: 5px;
108
108
  border-radius: 5px;
@@ -114,16 +114,16 @@
114
114
  border-color: transparent; /* Needed for Safari */
115
115
  }
116
116
  .password__complexity meter[value="1"]::-moz-meter-bar {
117
- background-color: var(--emfe-w-color-valid, #48952a);
117
+ background-color: var(--emw--color-valid, #48952a);
118
118
  }
119
119
  .password__complexity meter[value="1"]::-webkit-meter-optimum-value {
120
- background-color: var(--emfe-w-color-valid, #48952a);
120
+ background-color: var(--emw--color-valid, #48952a);
121
121
  }
122
122
  .password__complexity meter:not([value="1"])::-moz-meter-bar {
123
- background-color: var(--emfe-w-color-error, #FD2839);
123
+ background-color: var(--emw--color-error, #FD2839);
124
124
  }
125
125
  .password__complexity meter:not([value="1"])::-webkit-meter-optimum-value {
126
- background-color: var(--emfe-w-color-error, #FD2839);
126
+ background-color: var(--emw--color-error, #FD2839);
127
127
  }
128
128
  .password__complexity--strength {
129
129
  display: flex;
@@ -147,16 +147,16 @@
147
147
  position: absolute;
148
148
  width: 25px;
149
149
  height: 25px;
150
- border-top: 1px solid var(--emfe-w-color-gray-150, #828282);
151
- border-right: 0 solid var(--emfe-w-color-gray-150, #828282);
152
- border-left: 1px solid var(--emfe-w-color-gray-150, #828282);
153
- border-bottom: 0 solid var(--emfe-w-color-gray-150, #828282);
150
+ border-top: 1px solid var(--emw--color-gray-150, #828282);
151
+ border-right: 0 solid var(--emw--color-gray-150, #828282);
152
+ border-left: 1px solid var(--emw--color-gray-150, #828282);
153
+ border-bottom: 0 solid var(--emw--color-gray-150, #828282);
154
154
  bottom: 92%;
155
155
  left: 50%;
156
156
  margin-left: -25px;
157
157
  transform: rotate(45deg);
158
158
  margin-top: -25px;
159
- background-color: var(--emfe-w-color-white, #FFFFFF);
159
+ background-color: var(--emw--color-white, #FFFFFF);
160
160
  }
161
161
  .password__tooltip-icon {
162
162
  width: 16px;
@@ -166,8 +166,8 @@
166
166
  position: absolute;
167
167
  top: 0;
168
168
  left: 20px;
169
- background-color: var(--emfe-w-color-white, #FFFFFF);
170
- border: 1px solid var(--emfe-w-color-gray-150, #828282);
169
+ background-color: var(--emw--color-white, #FFFFFF);
170
+ border: 1px solid var(--emw--color-gray-150, #828282);
171
171
  color: #2B2D3F;
172
172
  padding: 10px;
173
173
  border-radius: 5px;
package/dist/collection/components/radio-input/radio-input.css CHANGED
@@ -18,7 +18,7 @@
18
18
  position: absolute;
19
19
  top: calc(100% + 5px);
20
20
  left: 0;
21
- color: var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909));
21
+ color: var(--emw--color-error, var(--emw--color-red, #ed0909));
22
22
  }
23
23
  .radio__tooltip-icon {
24
24
  position: absolute;
@@ -29,9 +29,9 @@
29
29
  position: absolute;
30
30
  bottom: 35px;
31
31
  right: 10px;
32
- background-color: var(--emfe-w-color-white, #FFFFFF);
33
- border: 1px solid var(--emfe-w-color-gray-100, #E6E6E6);
34
- color: var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));
32
+ background-color: var(--emw--color-white, #FFFFFF);
33
+ border: 1px solid var(--emw--color-gray-100, #E6E6E6);
34
+ color: var(--emw--registration-typography, var(--emw--color-black, #000000));
35
35
  padding: 10px;
36
36
  border-radius: 5px;
37
37
  opacity: 0;
package/dist/collection/components/select-input/select-input.css CHANGED
@@ -11,8 +11,8 @@
11
11
  }
12
12
 
13
13
  vaadin-combo-box > input {
14
- background-color: var(--emfe-w-color-white, #FFFFFF);
15
- color: var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));
14
+ background-color: var(--emw--color-white, #FFFFFF);
15
+ color: var(--emw--registration-typography, var(--emw--color-black, #000000));
16
16
  font-weight: 300;
17
17
  font-size: 16px;
18
18
  -webkit-font-smoothing: initial; /* fucks up font-weight */
@@ -33,10 +33,10 @@ vaadin-combo-box > input {
33
33
  pointer-events: none;
34
34
  }
35
35
  .select__wrapper--autofilled .select__label {
36
- color: var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));
36
+ color: var(--emw--registration-typography, var(--emw--color-black, #000000));
37
37
  }
38
38
  .select__wrapper--autofilled .select__input::part(input-field) {
39
- color: var(--emfe-w-color-black, #000000);
39
+ color: var(--emw--color-black, #000000);
40
40
  }
41
41
  .select__wrapper--flex {
42
42
  display: flex;
@@ -51,12 +51,12 @@ vaadin-combo-box > input {
51
51
  font-weight: 500;
52
52
  font-size: 16px;
53
53
  line-height: 20px;
54
- color: var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));
54
+ color: var(--emw--registration-typography, var(--emw--color-black, #000000));
55
55
  }
56
56
  .select__label--required::after {
57
57
  content: "*";
58
58
  font-family: inherit;
59
- color: var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));
59
+ color: var(--emw--login-color-primary, var(--emw--color-primary, #D0046C));
60
60
  margin-left: 2px;
61
61
  }
62
62
  .select__input {
@@ -65,19 +65,19 @@ vaadin-combo-box > input {
65
65
  position: relative;
66
66
  }
67
67
  .select__input[focused]::part(input-field) {
68
- border-color: var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));
68
+ border-color: var(--emw--login-color-primary, var(--emw--color-primary, #D0046C));
69
69
  }
70
70
  .select__input[invalid]::part(input-field) {
71
- border: 1px solid var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909));
71
+ border: 1px solid var(--emw--color-error, var(--emw--color-red, #ed0909));
72
72
  }
73
73
  .select__input vaadin-date-picker-overlay-content > vaadin-button {
74
- color: var(--emfe-w-color-black, #000000);
74
+ color: var(--emw--color-black, #000000);
75
75
  }
76
76
  .select__input::part(input-field) {
77
77
  border-radius: 4px;
78
- background-color: var(--emfe-w-color-white, #FFFFFF);
79
- border: 1px solid var(--emfe-w-color-gray-100, #E6E6E6);
80
- color: var(--emfe-w-color-black, #000000);
78
+ background-color: var(--emw--color-white, #FFFFFF);
79
+ border: 1px solid var(--emw--color-gray-100, #E6E6E6);
80
+ color: var(--emw--color-black, #000000);
81
81
  font-family: inherit;
82
82
  font-style: normal;
83
83
  font-size: 16px;
@@ -97,7 +97,7 @@ vaadin-combo-box > input {
97
97
  position: absolute;
98
98
  top: calc(100% + 5px);
99
99
  left: 0;
100
- color: var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909));
100
+ color: var(--emw--color-error, var(--emw--color-red, #ed0909));
101
101
  }
102
102
  .select__tooltip-icon {
103
103
  width: 16px;
@@ -107,9 +107,9 @@ vaadin-combo-box > input {
107
107
  position: absolute;
108
108
  top: 0;
109
109
  left: 20px;
110
- background-color: var(--emfe-w-color-white, #FFFFFF);
111
- border: 1px solid var(--emfe-w-color-gray-100, #E6E6E6);
112
- color: var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));
110
+ background-color: var(--emw--color-white, #FFFFFF);
111
+ border: 1px solid var(--emw--color-gray-100, #E6E6E6);
112
+ color: var(--emw--registration-typography, var(--emw--color-black, #000000));
113
113
  padding: 10px;
114
114
  border-radius: 5px;
115
115
  opacity: 0;
package/dist/collection/components/select-input/select-input.js CHANGED
@@ -20,6 +20,13 @@ export class SelectInput {
20
20
  this.errorMessage = this.setErrorMessage();
21
21
  this.emitValueHandler(true);
22
22
  };
23
+ this.handleBlur = (event) => {
24
+ this.value = event.target.value;
25
+ this.touched = true;
26
+ this.isValid = this.setValidity();
27
+ this.errorMessage = this.setErrorMessage();
28
+ this.validityStateHandler({ valid: this.isValid, name: this.name });
29
+ };
23
30
  this.setClientStyling = () => {
24
31
  let sheet = document.createElement('style');
25
32
  sheet.innerHTML = this.clientStyling;
@@ -133,8 +140,8 @@ export class SelectInput {
133
140
  if (this.touched) {
134
141
  invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
135
142
  }
136
- return h("div", { key: 'c235991f572ea3f8659f66d660fd1fb41b0094ad', class: `select__wrapper ${this.autofilled ? 'select__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: '50931d2e1345bb8337820409a6aff2eee4d33cd5', class: 'select__wrapper--flex' }, h("label", { key: '28a05e2a88132fb8ad279ec0fbc0d49253d3ffbc', class: 'select__label', htmlFor: `${this.name}__input` }, `${this.displayName} ${this.validation.mandatory ? '*' : ''}`), h("div", { key: '1d53254871214080c3f1d25c73380a9b9df19aab', class: 'select__wrapper--relative' }, this.tooltip &&
137
- h("img", { key: '020465f83dd9a03a37b223521bfce37a66df818d', class: 'select__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("vaadin-combo-box", { key: 'bbf7aff9102f6c849c84ff7cb390ed57e5b992b2', name: this.name, id: `${this.name}__input`, class: `select__input ${invalidClass} ${this.autofilled ? 'select__input--autofilled' : ''}`, "item-label-path": "label", "item-value-path": "value", readOnly: this.autofilled, required: this.validation.mandatory, value: this.defaultValue, placeholder: `${this.placeholder}`, items: this.displayedOptions, onChange: this.handleChange }), h("small", { key: '4cda22e9fdccb3960107a661fa24649946d6bb14', class: 'select__error-message' }, this.errorMessage));
143
+ return h("div", { key: '3d298b9709617233adacd88b8acb7d6298d35627', class: `select__wrapper ${this.autofilled ? 'select__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: '9ba53148a200b925da11ad0dea5589e9634ffb03', class: 'select__wrapper--flex' }, h("label", { key: 'eb2fa2233926ada4da750e47304325d0d7ea3985', class: 'select__label', htmlFor: `${this.name}__input` }, `${this.displayName} ${this.validation.mandatory ? '*' : ''}`), h("div", { key: '3cbe968f9a7c612d0b8d0517621a933cccd1bd58', class: 'select__wrapper--relative' }, this.tooltip &&
144
+ h("img", { key: '9fa9be645ed72897a95705b0e17b3aee855eb6d4', class: 'select__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("vaadin-combo-box", { key: 'f596a5fa5b480791080dfa63359ed30eeabfaa02', name: this.name, id: `${this.name}__input`, class: `select__input ${invalidClass} ${this.autofilled ? 'select__input--autofilled' : ''}`, "item-label-path": "label", "item-value-path": "value", readOnly: this.autofilled, required: this.validation.mandatory, value: this.defaultValue, placeholder: `${this.placeholder}`, items: this.displayedOptions, onChange: this.handleChange, onBlur: this.handleBlur }), h("small", { key: 'a9c652406489ba1d23497c55aa14e7b67fa701bd', class: 'select__error-message' }, this.errorMessage));
138
145
  }
139
146
  static get is() { return "select-input"; }
140
147
  static get encapsulation() { return "shadow"; }
package/dist/collection/components/tel-input/tel-input.css CHANGED
@@ -21,25 +21,25 @@
21
21
  pointer-events: none;
22
22
  }
23
23
  .tel__wrapper--autofilled .tel__label {
24
- color: var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));
24
+ color: var(--emw--registration-typography, var(--emw--color-black, #000000));
25
25
  }
26
26
  .tel__wrapper--autofilled .tel__input::part(input-field) {
27
- color: var(--emfe-w-color-black, #000000);
27
+ color: var(--emw--color-black, #000000);
28
28
  }
29
29
  .tel__wrapper--flex {
30
30
  width: inherit;
31
31
  display: flex;
32
32
  align-items: center;
33
33
  border-radius: 4px;
34
- border: 1px solid var(--emfe-w-color-gray-100, #E6E6E6);
35
- background-color: var(--emfe-w-color-white, #FFFFFF);
34
+ border: 1px solid var(--emw--color-gray-100, #E6E6E6);
35
+ background-color: var(--emw--color-white, #FFFFFF);
36
36
  overflow: hidden;
37
37
  }
38
38
  .tel__wrapper--flex:focus-within {
39
- border-color: var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));
39
+ border-color: var(--emw--login-color-primary, var(--emw--color-primary, #D0046C));
40
40
  }
41
41
  .tel__wrapper--flex--invalid {
42
- border: 1px solid var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909));
42
+ border: 1px solid var(--emw--color-error, var(--emw--color-red, #ed0909));
43
43
  }
44
44
  .tel__wrapper--flex-label {
45
45
  display: flex;
@@ -54,12 +54,12 @@
54
54
  font-weight: 500;
55
55
  font-size: 16px;
56
56
  line-height: 20px;
57
- color: var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));
57
+ color: var(--emw--registration-typography, var(--emw--color-black, #000000));
58
58
  }
59
59
  .tel__label--required::after {
60
60
  content: "*";
61
61
  font-family: inherit;
62
- color: var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));
62
+ color: var(--emw--login-color-primary, var(--emw--color-primary, #D0046C));
63
63
  margin-left: 2px;
64
64
  }
65
65
  .tel__prefix {
@@ -70,8 +70,8 @@
70
70
  }
71
71
  .tel__prefix::part(input-field) {
72
72
  border-radius: 0 5px 5px 0;
73
- background-color: var(--emfe-w-color-white, #FFFFFF);
74
- color: var(--emfe-w-color-black, #000000);
73
+ background-color: var(--emw--color-white, #FFFFFF);
74
+ color: var(--emw--color-black, #000000);
75
75
  font-family: inherit;
76
76
  font-style: normal;
77
77
  font-weight: 300;
@@ -84,17 +84,17 @@
84
84
  border-image-repeat: round;
85
85
  }
86
86
  .tel__prefix::part(input-field):hover {
87
- background-color: var(--emfe-w-color-white, #FFFFFF);
87
+ background-color: var(--emw--color-white, #FFFFFF);
88
88
  }
89
89
  .tel__prefix::part(toggle-button) {
90
- color: var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));
90
+ color: var(--emw--registration-typography, var(--emw--color-black, #000000));
91
91
  }
92
92
  .tel__input {
93
93
  font-family: inherit;
94
94
  border-radius: 5px;
95
95
  width: 100%;
96
- color: var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));
97
- background-color: var(--emfe-w-color-white, #FFFFFF);
96
+ color: var(--emw--registration-typography, var(--emw--color-black, #000000));
97
+ background-color: var(--emw--color-white, #FFFFFF);
98
98
  border: none;
99
99
  width: inherit;
100
100
  position: relative;
@@ -115,13 +115,13 @@
115
115
  margin: 0;
116
116
  }
117
117
  .tel__input::placeholder {
118
- color: var(--emfe-w-color-gray-150, #979797);
118
+ color: var(--emw--color-gray-150, #979797);
119
119
  }
120
120
  .tel__error-message {
121
121
  position: absolute;
122
122
  top: calc(100% + 5px);
123
123
  left: 0;
124
- color: var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909));
124
+ color: var(--emw--color-error, var(--emw--color-red, #ed0909));
125
125
  }
126
126
  .tel__tooltip-icon {
127
127
  width: 16px;
@@ -131,9 +131,9 @@
131
131
  position: absolute;
132
132
  top: 0;
133
133
  left: 20px;
134
- background-color: var(--emfe-w-color-white, #FFFFFF);
135
- border: 1px solid var(--emfe-w-color-gray-100, #E6E6E6);
136
- color: var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));
134
+ background-color: var(--emw--color-white, #FFFFFF);
135
+ border: 1px solid var(--emw--color-gray-100, #E6E6E6);
136
+ color: var(--emw--registration-typography, var(--emw--color-black, #000000));
137
137
  padding: 10px;
138
138
  border-radius: 5px;
139
139
  opacity: 0;
package/dist/collection/components/text-input/text-input.css CHANGED
@@ -22,10 +22,10 @@
22
22
  pointer-events: none;
23
23
  }
24
24
  .text__wrapper--autofilled .text__label {
25
- color: var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));
25
+ color: var(--emw--registration-typography, var(--emw--color-black, #000000));
26
26
  }
27
27
  .text__wrapper--autofilled .text__input::part(input-field) {
28
- color: var(--emfe-w-color-black, #000000);
28
+ color: var(--emw--color-black, #000000);
29
29
  }
30
30
  .text__wrapper--flex {
31
31
  display: flex;
@@ -40,21 +40,21 @@
40
40
  font-weight: 500;
41
41
  font-size: 16px;
42
42
  line-height: 20px;
43
- color: var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));
43
+ color: var(--emw--registration-typography, var(--emw--color-black, #000000));
44
44
  }
45
45
  .text__label--required::after {
46
46
  content: "*";
47
47
  font-family: inherit;
48
- color: var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));
48
+ color: var(--emw--login-color-primary, var(--emw--color-primary, #D0046C));
49
49
  margin-left: 2px;
50
50
  }
51
51
  .text__input {
52
52
  font-family: inherit;
53
53
  width: 100%;
54
54
  height: 44px;
55
- border: 1px solid var(--emfe-w-color-gray-100, #E6E6E6);
56
- background-color: var(--emfe-w-color-white, #FFFFFF);
57
- color: var(--emfe-w-color-black, #000000);
55
+ border: 1px solid var(--emw--color-gray-100, #E6E6E6);
56
+ background-color: var(--emw--color-white, #FFFFFF);
57
+ color: var(--emw--color-black, #000000);
58
58
  border-radius: 5px;
59
59
  font-size: 16px;
60
60
  font-weight: 300;
@@ -62,19 +62,19 @@
62
62
  padding: 5px 15px;
63
63
  }
64
64
  .text__input:focus {
65
- border: 1px solid var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));
65
+ border: 1px solid var(--emw--login-color-primary, var(--emw--color-primary, #D0046C));
66
66
  }
67
67
  .text__input--invalid {
68
- border: 1px solid var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909));
68
+ border: 1px solid var(--emw--color-error, var(--emw--color-red, #ed0909));
69
69
  }
70
70
  .text__input::placeholder {
71
- color: var(--emfe-w-color-gray-150, #828282);
71
+ color: var(--emw--color-gray-150, #828282);
72
72
  }
73
73
  .text__error-message {
74
74
  position: absolute;
75
75
  top: calc(100% + 5px);
76
76
  left: 0;
77
- color: var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909));
77
+ color: var(--emw--color-error, var(--emw--color-red, #ed0909));
78
78
  }
79
79
  .text__tooltip-icon {
80
80
  width: 16px;
@@ -84,9 +84,9 @@
84
84
  position: absolute;
85
85
  top: 0;
86
86
  left: 20px;
87
- background-color: var(--emfe-w-color-white, #FFFFFF);
88
- border: 1px solid var(--emfe-w-color-gray-100, #E6E6E6);
89
- color: var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));
87
+ background-color: var(--emw--color-white, #FFFFFF);
88
+ border: 1px solid var(--emw--color-gray-100, #E6E6E6);
89
+ color: var(--emw--registration-typography, var(--emw--color-black, #000000));
90
90
  padding: 10px;
91
91
  border-radius: 5px;
92
92
  opacity: 0;
package/dist/collection/components/toggle-checkbox-input/toggle-checkbox-input.css CHANGED
@@ -26,14 +26,14 @@
26
26
  .togglecheckbox__input {
27
27
  transform: scale(1.307, 1.307);
28
28
  margin-left: 2px;
29
- accent-color: var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));
29
+ accent-color: var(--emw--login-color-primary, var(--emw--color-primary, #D0046C));
30
30
  }
31
31
  .togglecheckbox__label {
32
32
  font-style: inherit;
33
33
  font-family: inherit;
34
34
  font-weight: 400;
35
35
  font-size: 16px;
36
- color: var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));
36
+ color: var(--emw--registration-typography, var(--emw--color-black, #000000));
37
37
  line-height: 1.5;
38
38
  cursor: pointer;
39
39
  padding: 0;
@@ -42,13 +42,13 @@
42
42
  font-size: 16px;
43
43
  }
44
44
  .togglecheckbox__label a {
45
- color: var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));
45
+ color: var(--emw--login-color-primary, var(--emw--color-primary, #D0046C));
46
46
  }
47
47
  .togglecheckbox__error-message {
48
48
  position: absolute;
49
49
  top: calc(100% + 5px);
50
50
  left: 0;
51
- color: var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909));
51
+ color: var(--emw--color-error, var(--emw--color-red, #ed0909));
52
52
  }
53
53
  .togglecheckbox__tooltip-icon {
54
54
  width: 16px;
@@ -58,9 +58,9 @@
58
58
  position: absolute;
59
59
  top: 0;
60
60
  right: 0;
61
- background-color: var(--emfe-w-color-white, #FFFFFF);
62
- border: 1px solid var(--emfe-w-color-gray-100, #E6E6E6);
63
- color: var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));
61
+ background-color: var(--emw--color-white, #FFFFFF);
62
+ border: 1px solid var(--emw--color-gray-100, #E6E6E6);
63
+ color: var(--emw--registration-typography, var(--emw--color-black, #000000));
64
64
  padding: 10px;
65
65
  border-radius: 5px;
66
66
  opacity: 0;