jb-select 3.1.0 → 3.2.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 (9) hide show
  1. package/README.md +1 -0
  2. package/dist/JBSelect.js +38 -328
  3. package/dist/JBSelect.js.map +1 -1
  4. package/dist/JBSelect.umd.js +468 -0
  5. package/dist/JBSelect.umd.js.map +1 -0
  6. package/lib/JBSelect.html +12 -4
  7. package/lib/JBSelect.scss +91 -70
  8. package/lib/JBSelect.ts +5 -3
  9. package/package.json +1 -1
package/lib/JBSelect.scss CHANGED
@@ -1,64 +1,88 @@
1
- @import '../../../common/scss/Medias.scss';
1
+ @import "../../../common/scss/Medias.scss";
2
2
 
3
3
  .jb-select-web-component {
4
- width: var(--jb-select-width, 100%) ;
5
- margin: var(--jb-select-margin , 12px 0) ;
4
+ width: var(--jb-select-width, 100%);
5
+ margin: var(--jb-select-margin, 12px 0);
6
6
  position: relative;
7
7
  box-sizing: border-box;
8
- &.--focused{
9
- @include mobile-tablet{
8
+ &.--focused {
9
+ @include mobile-tablet {
10
10
  position: absolute;
11
- top:0;
11
+ top: 0;
12
12
  left: 0;
13
- background-color: #0008;
13
+ background-color: var(--jb-select-overlay-bgcolor, #0008);
14
14
  width: 100vw;
15
15
  height: 100vh;
16
16
  margin: 0;
17
17
  padding: 16px 8px;
18
18
  z-index: 900;
19
19
  }
20
- .select-list-wrapper{
21
- @include mobile-tablet{
20
+ .select-list-wrapper {
21
+ @include mobile-tablet {
22
22
  position: initial;
23
23
  margin: 16px 0;
24
- border-radius: var(--jb-select-border-radius , 16px);
24
+ border-radius: var(--jb-select-border-radius, 16px);
25
25
  }
26
26
  }
27
- label{
28
- @include mobile-tablet{
29
- color:#fff;
30
- font-size: 1.5em;
27
+ .label-wrapper {
28
+ @include mobile-tablet {
29
+ display: flex;
30
+ }
31
+ label {
32
+ @include mobile-tablet {
33
+ color: #fff;
34
+ font-size: 1.5em;
35
+ display: flex;
36
+ align-items: center;
37
+ }
38
+ }
39
+ .close-button {
40
+ display: none;
41
+ @include mobile-tablet {
42
+ display: flex;
43
+ width: 48px;
44
+ height: 48px;
45
+ justify-content: center;
46
+ align-items: center;
47
+ color:#fff;
48
+ .close-btn-svg-path{
49
+ stroke: #fff;
50
+ }
51
+ }
31
52
  }
32
53
  }
33
-
34
54
  }
35
- &.--has-value{
55
+ &.--has-value {
36
56
  //if user select a option and value is setted and not null
37
- .select-box{
38
- border-color: var(--jb-select-border-color-selected , #c3ff14);
39
- background-color: var(--jb-select-bgcolor-selected , #f7f6f6);
57
+ .select-box {
58
+ border-color: var(--jb-select-border-color-selected, #c3ff14);
59
+ background-color: var(--jb-select-bgcolor-selected, #f7f6f6);
40
60
  }
41
61
  }
42
- label {
43
- width: 100%;
44
- margin: 4px 0px;
45
- display: block;
46
- font-size: var(--jb-input-label-font-size, 0.8em);
47
- font-weight: var(--jb-input-label-font-weight, normal);
48
- color: var(--jb-select-label-color, #1f1735);
49
- &.--hide{
62
+ .label-wrapper {
63
+ label {
64
+ width: 100%;
65
+ margin: 4px 0px;
66
+ display: block;
67
+ font-size: var(--jb-input-label-font-size, 0.8em);
68
+ font-weight: var(--jb-input-label-font-weight, normal);
69
+ color: var(--jb-select-label-color, #1f1735);
70
+ &.--hide {
71
+ display: none;
72
+ }
73
+ }
74
+ .close-button {
50
75
  display: none;
51
76
  }
52
77
  }
53
-
54
78
  .select-box {
55
79
  width: 100%;
56
80
  box-sizing: border-box;
57
81
  height: var(--jb-select-height, 40px);
58
- border: solid var(--jb-select-border-width , 1px) var(--jb-select-border-color , #f7f6f6);
59
- background-color: var(--jb-select-bgcolor , #f7f6f6) ;
60
- border-bottom: solid var(--jb-select-border-bottom-width , 3px) var(--jb-select-border-color , #f7f6f6);
61
- border-radius: var(--jb-select-border-radius , 16px);
82
+ border: solid var(--jb-select-border-width, 1px) var(--jb-select-border-color, #f7f6f6);
83
+ background-color: var(--jb-select-bgcolor, #f7f6f6);
84
+ border-bottom: solid var(--jb-select-border-bottom-width, 3px) var(--jb-select-border-color, #f7f6f6);
85
+ border-radius: var(--jb-select-border-radius, 16px);
62
86
  margin: 4px 0px;
63
87
  overflow: hidden;
64
88
  display: flex;
@@ -67,25 +91,25 @@
67
91
  gap: 8px;
68
92
  position: relative;
69
93
  &:focus-within {
70
- border-color: var(--jb-select-border-color , #1e2832);
71
- border-bottom-color: var(--jb-select-border-color , #f7f6f6);;
72
- border-radius: var(--jb-select-border-radius , 16px) var(--jb-select-border-radius , 16px) 0 0;
73
- @include mobile-tablet{
74
- border-radius: var(--jb-select-border-radius , 16px);
75
- border-bottom-color: var(--jb-select-border-color , #1e2832);
94
+ border-color: var(--jb-select-border-color, #1e2832);
95
+ border-bottom-color: var(--jb-select-border-color, #f7f6f6);
96
+ border-radius: var(--jb-select-border-radius, 16px) var(--jb-select-border-radius, 16px) 0 0;
97
+ @include mobile-tablet {
98
+ border-radius: var(--jb-select-border-radius, 16px);
99
+ border-bottom-color: var(--jb-select-border-color, #1e2832);
76
100
  }
77
101
  }
78
- .selected-value-wrapper{
102
+ .selected-value-wrapper {
79
103
  position: absolute;
80
104
  width: 100%;
81
105
  height: 100%;
82
106
  border-radius: inherit;
83
107
  overflow: hidden;
84
108
  z-index: 1;
85
- &.--search-typed{
109
+ &.--search-typed {
86
110
  opacity: 0;
87
111
  }
88
- .selected-value{
112
+ .selected-value {
89
113
  width: 100%;
90
114
  box-sizing: border-box;
91
115
  height: 100%;
@@ -94,27 +118,25 @@
94
118
  display: block;
95
119
  font-family: inherit;
96
120
  font-size: 1.1em;
97
- color:var(--jb-select-selected-value-color, #1f1735);
121
+ color: var(--jb-select-selected-value-color, #1f1735);
98
122
  margin: 0;
99
123
  border-radius: 0;
100
124
  display: flex;
101
125
  align-items: center;
102
-
103
126
  }
104
-
105
127
  }
106
- &:focus-within .selected-value{
128
+ &:focus-within .selected-value {
107
129
  opacity: 0.7;
108
130
  transition: all 0.3s ease;
109
131
  }
110
- .front-box{
132
+ .front-box {
111
133
  position: absolute;
112
134
  width: 100%;
113
135
  height: 100%;
114
136
  border-radius: inherit;
115
137
  overflow: hidden;
116
138
  z-index: 2;
117
-
139
+
118
140
  input {
119
141
  border: none;
120
142
  width: 100%;
@@ -128,7 +150,7 @@
128
150
  color: var(--jb-select-input-color, #1f1735);
129
151
  margin: 0;
130
152
  border-radius: 0;
131
-
153
+
132
154
  &:focus {
133
155
  outline: none;
134
156
  }
@@ -137,7 +159,7 @@
137
159
  font-size: var(--jb-select-placeholder-font-size, 1.1em);
138
160
  }
139
161
  }
140
- .arrow-icon{
162
+ .arrow-icon {
141
163
  width: 8px;
142
164
  height: 100%;
143
165
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' id='Layer_1' x='0px' y='0px' viewBox='0 0 494.1 371.1' style='enable-background:new 0 0 494.1 371.1;' xml:space='preserve'><path d='M293,343.8L480.9,69.3c8.7-12.7,13.3-25.4,13.3-36.1c0-20.5-16.5-33.2-44-33.2H44C16.4,0,0,12.7,0,33.2 c0,10.6,4.6,23.2,13.3,35.9l187.9,274.6c12.1,17.7,28.4,27.4,45.9,27.4C264.6,371.1,280.9,361.4,293,343.8z'/></svg>");
@@ -147,73 +169,72 @@
147
169
  background-position-y: center;
148
170
  }
149
171
  }
150
-
151
172
  }
152
- .message-box{
173
+ .message-box {
153
174
  font-size: var(--jb-select-message-font-size, 0.7em);
154
175
  font-weight: var(--jb-select-message-font-weight, normal);
155
176
  padding: 2px 8px;
156
177
  color: var(--jb-select-message-color, #929292);
157
- &:empty{
178
+ &:empty {
158
179
  padding: 0;
159
180
  }
160
- &.--error{
181
+ &.--error {
161
182
  color: red;
162
183
  }
163
184
  }
164
- .select-list-wrapper{
185
+ .select-list-wrapper {
165
186
  display: none;
166
187
  position: absolute;
167
188
  margin: -6px 0;
168
189
  height: auto;
169
190
  overflow: hidden;
170
191
  width: 100%;
171
- background-color: var(--jb-select-bgcolor , #f7f6f6) ;
172
- border-radius: 0 0 var(--jb-select-border-radius , 16px) var(--jb-select-border-radius , 16px);
173
- border:solid 1px var(--jb-select-border-color , #1e2832);
192
+ background-color: var(--jb-select-bgcolor, #f7f6f6);
193
+ border-radius: 0 0 var(--jb-select-border-radius, 16px) var(--jb-select-border-radius, 16px);
194
+ border: solid 1px var(--jb-select-border-color, #1e2832);
174
195
  border-top: none;
175
- border-bottom:solid 3px var(--jb-select-border-color , #1e2832) ;
196
+ border-bottom: solid 3px var(--jb-select-border-color, #1e2832);
176
197
  box-shadow: var(--jb-select-list-box-shadow);
177
198
  box-sizing: border-box;
178
199
  z-index: 999;
179
- &.--show{
200
+ &.--show {
180
201
  display: block;
181
202
  }
182
- .select-list{
203
+ .select-list {
183
204
  width: 100%;
184
- max-height: var(--jb-select-list-max-height , 400px);
205
+ max-height: var(--jb-select-list-max-height, 400px);
185
206
  overflow-y: auto;
186
207
  padding: 16px 0;
187
- &:empty{
208
+ &:empty {
188
209
  padding: 0;
189
210
  }
190
- @include mobile-tablet{
211
+ @include mobile-tablet {
191
212
  max-height: calc(100vh - 240px);
192
213
  }
193
- .select-option{
214
+ .select-option {
194
215
  min-height: 36px;
195
216
  padding: 4px 16px;
196
217
  display: flex;
197
218
  align-items: center;
198
219
  font-size: 0.9em;
199
- color: var( --jb-select-option-color, inherit);
220
+ color: var(--jb-select-option-color, inherit);
200
221
  background-color: var(--jb-select-option-background-color, #fff);
201
- &:hover{
222
+ &:hover {
202
223
  background-color: var(--jb-select-option-background-color-hover, #1073db);
203
- color:var( --jb-select-option-color-hover, #fff);
224
+ color: var(--jb-select-option-color-hover, #fff);
204
225
  cursor: pointer;
205
226
  }
206
227
  }
207
228
  }
208
- .empty-list-placeholder{
229
+ .empty-list-placeholder {
209
230
  display: none;
210
231
  text-align: center;
211
232
  color: #838383;
212
233
  font-style: italic;
213
234
  padding: 8px 0;
214
- &.--show{
235
+ &.--show {
215
236
  display: block;
216
237
  }
217
238
  }
218
239
  }
219
- }
240
+ }
package/lib/JBSelect.ts CHANGED
@@ -80,6 +80,7 @@ export class JBSelectWebComponent extends HTMLElement {
80
80
 
81
81
 
82
82
  constructor() {
83
+
83
84
  super();
84
85
  this.initWebComponent();
85
86
  this.initProp();
@@ -225,10 +226,11 @@ export class JBSelectWebComponent extends HTMLElement {
225
226
  }
226
227
  onInputBeforeInput(e:InputEvent) {
227
228
  const inputedText = e.data || '';
228
- this.handleSelectedValueDisplay(inputedText);
229
229
  }
230
230
  onInputInput(e:InputEvent) {
231
- this.textValue = (e.target as HTMLInputElement).value;
231
+ const inputedText = (e.target as HTMLInputElement).value;
232
+ this.textValue = inputedText;
233
+ this.handleSelectedValueDisplay(inputedText);
232
234
  }
233
235
  onInputKeyup(e:KeyboardEvent) {
234
236
  const inputText = (e.target as HTMLInputElement).value;
@@ -279,7 +281,7 @@ export class JBSelectWebComponent extends HTMLElement {
279
281
  }
280
282
  onInputBlur(e: FocusEvent) {
281
283
  const focusedElement = e.relatedTarget;
282
- if (focusedElement === this.elements.optionListWrapper) {
284
+ if (this.elements.optionListWrapper.contains(<Node>(focusedElement))) {
283
285
  //user click on a menu item
284
286
  } else {
285
287
  this.blur();
package/package.json CHANGED
@@ -12,7 +12,7 @@
12
12
  "select",
13
13
  "web component"
14
14
  ],
15
- "version": "3.1.0",
15
+ "version": "3.2.0",
16
16
  "bugs": "https://github.com/javadbat/jb-select/issues",
17
17
  "license": "MIT",
18
18
  "files": [