gd-bs 6.6.38 → 6.6.40

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/build/bs.js +1 -1
  2. package/build/components/dropdown/index.js +15 -13
  3. package/dist/gd-bs-icons.js +1 -1
  4. package/dist/gd-bs-icons.min.js +1 -1
  5. package/dist/gd-bs.js +1 -1
  6. package/dist/gd-bs.min.js +1 -1
  7. package/package.json +1 -1
  8. package/src/components/dropdown/index.ts +16 -15
  9. package/src/styles/_tippy.scss +63 -11
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "gd-bs",
3
- "version": "6.6.38",
3
+ "version": "6.6.40",
4
4
  "description": "Bootstrap JavaScript, TypeScript and Web Components library.",
5
5
  "main": "build/index.js",
6
6
  "typings": "src/index.d.ts",
package/src/components/dropdown/index.ts CHANGED
@@ -332,17 +332,12 @@ class _Dropdown extends Base<IDropdownProps> implements IDropdown {
332
332
 
333
333
  // See if we are updating the label
334
334
  if (this.props.updateLabel) {
335
- let selectedItems = this.getValue() as IDropdownItem[];
336
- let selectedValues = [];
337
- for (let i = 0; i < selectedItems.length; i++) {
338
- // Append the value
339
- selectedValues.push(selectedItems[i].text);
340
- }
335
+ let selectedItem = this.getValue() as IDropdownItem;
341
336
 
342
337
  // Set the label
343
338
  let toggle = this.el.querySelector(".dropdown-toggle");
344
339
  if (toggle) {
345
- toggle.innerHTML = selectedValues.length > 0 ? selectedValues.join(', ') : this.props.label;
340
+ toggle.innerHTML = selectedItem ? selectedItem.text : this.props.label;
346
341
  }
347
342
  }
348
343
  });
@@ -358,20 +353,26 @@ class _Dropdown extends Base<IDropdownProps> implements IDropdown {
358
353
  // Toggle the menu if it's visible
359
354
  this.isVisible ? this.toggle() : null;
360
355
  }
361
-
362
- // Execute the event
363
- this.props.onChange ? this.props.onChange(this.getValue(), ev) : null;
364
-
365
- // See if we are updating the label
366
- if (this.props.updateLabel) {
367
- let selectedItem = this.getValue() as IDropdownItem;
356
+ // Else, see if we are updating the label for a multi-dropdown
357
+ else if (this.props.updateLabel) {
358
+ // Set the selected values
359
+ let selectedItems: IDropdownItem[] = this.getValue();
360
+ let selectedValues = [];
361
+ for (let i = 0; i < selectedItems.length; i++) {
362
+ // Append the value
363
+ selectedValues.push(selectedItems[i].text);
364
+ }
368
365
 
369
366
  // Set the label
370
367
  let toggle = this.el.querySelector(".dropdown-toggle");
371
368
  if (toggle) {
372
- toggle.innerHTML = selectedItem ? selectedItem.text : this.props.label;
369
+ // Set the label
370
+ toggle.innerHTML = selectedValues.length == 0 ? this.props.label : selectedValues.join(', ');
373
371
  }
374
372
  }
373
+
374
+ // Execute the event
375
+ this.props.onChange ? this.props.onChange(this.getValue(), ev) : null;
375
376
  });
376
377
  }
377
378
 
package/src/styles/_tippy.scss CHANGED
@@ -4,188 +4,240 @@
4
4
  }
5
5
 
6
6
  /* Tippy Tooltip primary theme color */
7
- .tippy-box[data-theme~='primary'] {
7
+ .tippy-box[data-theme~='primary'],
8
+ .tippy-box[data-theme~='primary']>.tippy-content {
8
9
  background-color: var(--sp-theme-primary, #0078d4);
9
10
  color: var(--sp-white, #ffffff);
10
11
  }
12
+
11
13
  .tippy-box[data-theme~='primary'][data-placement^='top']>.tippy-arrow::before {
12
14
  border-top-color: var(--sp-theme-primary, #0078d4);
13
15
  }
16
+
14
17
  .tippy-box[data-theme~='primary'][data-placement^='bottom']>.tippy-arrow::before {
15
18
  border-bottom-color: var(--sp-theme-primary, #0078d4);
16
19
  }
20
+
17
21
  .tippy-box[data-theme~='primary'][data-placement^='left']>.tippy-arrow::before {
18
22
  border-left-color: var(--sp-theme-primary, #0078d4);
19
23
  }
24
+
20
25
  .tippy-box[data-theme~='primary'][data-placement^='right']>.tippy-arrow::before {
21
26
  border-right-color: var(--sp-theme-primary, #0078d4);
22
27
  }
23
28
 
24
29
  /* Tippy Tooltip secondary theme color */
25
- .tippy-box[data-theme~='secondary'] {
30
+ .tippy-box[data-theme~='secondary'],
31
+ .tippy-box[data-theme~='secondary']>.tippy-content {
26
32
  background-color: var(--sp-info-icon, #605e5c);
27
33
  color: var(--sp-white, #ffffff);
28
34
  }
35
+
29
36
  .tippy-box[data-theme~='secondary'][data-placement^='top']>.tippy-arrow::before {
30
37
  border-top-color: var(--sp-info-icon, #605e5c);
31
38
  }
39
+
32
40
  .tippy-box[data-theme~='secondary'][data-placement^='bottom']>.tippy-arrow::before {
33
41
  border-bottom-color: var(--sp-info-icon, #605e5c);
34
42
  }
43
+
35
44
  .tippy-box[data-theme~='secondary'][data-placement^='left']>.tippy-arrow::before {
36
45
  border-left-color: var(--sp-info-icon, #605e5c);
37
46
  }
47
+
38
48
  .tippy-box[data-theme~='secondary'][data-placement^='right']>.tippy-arrow::before {
39
49
  border-right-color: var(--sp-info-icon, #605e5c);
40
50
  }
41
51
 
42
52
  /* Tippy Tooltip success theme color */
43
- .tippy-box[data-theme~='success'] {
53
+ .tippy-box[data-theme~='success'],
54
+ .tippy-box[data-theme~='success']>.tippy-content {
44
55
  background-color: var(--sp-success-icon, #107c10);
45
56
  color: var(--sp-white, #ffffff);
46
57
  }
58
+
47
59
  .tippy-box[data-theme~='success'][data-placement^='top']>.tippy-arrow::before {
48
60
  border-top-color: var(--sp-success-icon, #107c10);
49
61
  }
62
+
50
63
  .tippy-box[data-theme~='success'][data-placement^='bottom']>.tippy-arrow::before {
51
64
  border-bottom-color: var(--sp-success-icon, #107c10);
52
65
  }
66
+
53
67
  .tippy-box[data-theme~='success'][data-placement^='left']>.tippy-arrow::before {
54
68
  border-left-color: var(--sp-success-icon, #107c10);
55
69
  }
70
+
56
71
  .tippy-box[data-theme~='success'][data-placement^='right']>.tippy-arrow::before {
57
72
  border-right-color: var(--sp-success-icon, #107c10);
58
73
  }
59
74
 
60
75
  /* Tippy Tooltip info theme color */
61
- .tippy-box[data-theme~='info'] {
76
+ .tippy-box[data-theme~='info'],
77
+ .tippy-box[data-theme~='info']>.tippy-content {
62
78
  background-color: var(--sp-accent, #8764b8);
63
79
  color: var(--sp-black, #000000);
64
80
  }
81
+
65
82
  .tippy-box[data-theme~='info'][data-placement^='top']>.tippy-arrow::before {
66
83
  border-top-color: var(--sp-accent, #8764b8);
67
84
  }
85
+
68
86
  .tippy-box[data-theme~='info'][data-placement^='bottom']>.tippy-arrow::before {
69
87
  border-bottom-color: var(--sp-accent, #8764b8);
70
88
  }
89
+
71
90
  .tippy-box[data-theme~='info'][data-placement^='left']>.tippy-arrow::before {
72
91
  border-left-color: var(--sp-accent, #8764b8);
73
92
  }
93
+
74
94
  .tippy-box[data-theme~='info'][data-placement^='right']>.tippy-arrow::before {
75
95
  border-right-color: var(--sp-accent, #8764b8);
76
96
  }
77
97
 
78
98
  /* Tippy Tooltip warning theme color */
79
- .tippy-box[data-theme~='warning'] {
99
+ .tippy-box[data-theme~='warning'],
100
+ .tippy-box[data-theme~='warning']>.tippy-content {
80
101
  background-color: var(--sp-severe-warning-icon, #d83b01);
81
102
  color: var(--sp-white, #ffffff);
82
103
  }
104
+
83
105
  .tippy-box[data-theme~='warning'][data-placement^='top']>.tippy-arrow::before {
84
106
  border-top-color: var(--sp-severe-warning-icon, #d83b01);
85
107
  }
108
+
86
109
  .tippy-box[data-theme~='warning'][data-placement^='bottom']>.tippy-arrow::before {
87
110
  border-bottom-color: var(--sp-severe-warning-icon, #d83b01);
88
111
  }
112
+
89
113
  .tippy-box[data-theme~='warning'][data-placement^='left']>.tippy-arrow::before {
90
114
  border-left-color: var(--sp-severe-warning-icon, #d83b01);
91
115
  }
116
+
92
117
  .tippy-box[data-theme~='warning'][data-placement^='right']>.tippy-arrow::before {
93
118
  border-right-color: var(--sp-severe-warning-icon, #d83b01);
94
119
  }
95
120
 
96
121
  /* Tippy Tooltip danger theme color */
97
- .tippy-box[data-theme~='danger'] {
122
+ .tippy-box[data-theme~='danger'],
123
+ .tippy-box[data-theme~='danger']>.tippy-content {
98
124
  background-color: var(--sp-error-icon, #a80000);
99
125
  color: var(--sp-white, #ffffff);
100
126
  }
127
+
101
128
  .tippy-box[data-theme~='danger'][data-placement^='top']>.tippy-arrow::before {
102
129
  border-top-color: var(--sp-error-icon, #a80000);
103
130
  }
131
+
104
132
  .tippy-box[data-theme~='danger'][data-placement^='bottom']>.tippy-arrow::before {
105
133
  border-bottom-color: var(--sp-error-icon, #a80000);
106
134
  }
135
+
107
136
  .tippy-box[data-theme~='danger'][data-placement^='left']>.tippy-arrow::before {
108
137
  border-left-color: var(--sp-error-icon, #a80000);
109
138
  }
139
+
110
140
  .tippy-box[data-theme~='danger'][data-placement^='right']>.tippy-arrow::before {
111
141
  border-right-color: var(--sp-error-icon, #a80000);
112
142
  }
113
143
 
114
144
  /* Tippy Tooltip light theme color - override Tippy default to match Bootstrap */
115
- .tippy-box[data-theme~='light'] {
145
+ .tippy-box[data-theme~='light'],
146
+ .tippy-box[data-theme~='light']>.tippy-content {
116
147
  background-color: var(--sp-neutral-lighter, #f3f2f1) !important;
117
148
  color: var(--sp-black, #000000) !important;
118
149
  }
150
+
119
151
  .tippy-box[data-theme~='light'][data-placement^='top']>.tippy-arrow::before {
120
152
  border-top-color: var(--sp-neutral-lighter, #f3f2f1) !important;
121
153
  }
154
+
122
155
  .tippy-box[data-theme~='light'][data-placement^='bottom']>.tippy-arrow::before {
123
156
  border-bottom-color: var(--sp-neutral-lighter, #f3f2f1) !important;
124
157
  }
158
+
125
159
  .tippy-box[data-theme~='light'][data-placement^='left']>.tippy-arrow::before {
126
160
  border-left-color: var(--sp-neutral-lighter, #f3f2f1) !important;
127
161
  }
162
+
128
163
  .tippy-box[data-theme~='light'][data-placement^='right']>.tippy-arrow::before {
129
164
  border-right-color: var(--sp-neutral-lighter, #f3f2f1) !important;
130
165
  }
131
166
 
132
167
  /* Tippy Tooltip light-border theme color - override Tippy default to match Bootstrap */
133
- .tippy-box[data-theme~='light-border'] {
168
+ .tippy-box[data-theme~='light-border'],
169
+ .tippy-box[data-theme~='light-border']>.tippy-content {
134
170
  background-color: var(--sp-white, #ffffff) !important;
135
171
  border-color: var(--sp-neutral-quaternary, #d2d0ce) !important;
136
172
  color: var(--sp-primary-text, #333333) !important;
137
173
  }
174
+
138
175
  .tippy-box[data-theme~='light-border'][data-placement^='top']>.tippy-arrow::before {
139
176
  border-top-color: var(--sp-white, #ffffff) !important;
140
177
  }
178
+
141
179
  .tippy-box[data-theme~='light-border'][data-placement^='bottom']>.tippy-arrow::before {
142
180
  border-bottom-color: var(--sp-white, #ffffff) !important;
143
181
  }
182
+
144
183
  .tippy-box[data-theme~='light-border'][data-placement^='left']>.tippy-arrow::before {
145
184
  border-left-color: var(--sp-white, #ffffff) !important;
146
185
  }
186
+
147
187
  .tippy-box[data-theme~='light-border'][data-placement^='right']>.tippy-arrow::before {
148
188
  border-right-color: var(--sp-white, #ffffff) !important;
149
189
  }
190
+
150
191
  .tippy-box[data-theme~='light-border'][data-placement^='bottom']>.tippy-arrow::after {
151
192
  border-bottom-color: var(--sp-neutral-quaternary, #d2d0ce) !important;
152
193
  }
194
+
153
195
  .tippy-box[data-theme~='light-border'][data-placement^='top']>.tippy-arrow::after {
154
196
  border-top-color: var(--sp-neutral-quaternary, #d2d0ce) !important;
155
197
  }
156
198
 
157
199
  /* Tippy Tooltip dark theme color */
158
- .tippy-box[data-theme~='dark'] {
200
+ .tippy-box[data-theme~='dark'],
201
+ .tippy-box[data-theme~='dark']>.tippy-content {
159
202
  background-color: var(--sp-neutral-dark, #201f1e);
160
203
  color: var(--sp-white, #ffffff);
161
204
  }
205
+
162
206
  .tippy-box[data-theme~='dark'][data-placement^='top']>.tippy-arrow::before {
163
207
  border-top-color: var(--sp-neutral-dark, #201f1e);
164
208
  }
209
+
165
210
  .tippy-box[data-theme~='dark'][data-placement^='bottom']>.tippy-arrow::before {
166
211
  border-bottom-color: var(--sp-neutral-dark, #201f1e);
167
212
  }
213
+
168
214
  .tippy-box[data-theme~='dark'][data-placement^='left']>.tippy-arrow::before {
169
215
  border-left-color: var(--sp-neutral-dark, #201f1e);
170
216
  }
217
+
171
218
  .tippy-box[data-theme~='dark'][data-placement^='right']>.tippy-arrow::before {
172
219
  border-right-color: var(--sp-neutral-dark, #201f1e);
173
220
  }
174
221
 
175
222
  /* Tippy Tooltip SharePoint theme color */
176
- .tippy-box[data-theme~='sharepoint'] {
223
+ .tippy-box[data-theme~='sharepoint'],
224
+ .tippy-box[data-theme~='sharepoint']>.tippy-content {
177
225
  background-color: var(--sp-theme-dark, #005a9e);
178
226
  color: var(--sp-white, #ffffff);
179
227
  }
228
+
180
229
  .tippy-box[data-theme~='sharepoint'][data-placement^='top']>.tippy-arrow::before {
181
230
  border-top-color: var(--sp-theme-dark, #005a9e);
182
231
  }
232
+
183
233
  .tippy-box[data-theme~='sharepoint'][data-placement^='bottom']>.tippy-arrow::before {
184
234
  border-bottom-color: var(--sp-theme-dark, #005a9e);
185
235
  }
236
+
186
237
  .tippy-box[data-theme~='sharepoint'][data-placement^='left']>.tippy-arrow::before {
187
238
  border-left-color: var(--sp-theme-dark, #005a9e);
188
239
  }
240
+
189
241
  .tippy-box[data-theme~='sharepoint'][data-placement^='right']>.tippy-arrow::before {
190
242
  border-right-color: var(--sp-theme-dark, #005a9e);
191
243
  }
@@ -194,4 +246,4 @@
194
246
  .tippy-content:has(>.dropdown-menu) {
195
247
  padding-top: 0.5rem !important;
196
248
  padding-bottom: 0.5rem !important;
197
- }
249
+ }