@salesforcedevs/dx-components 0.78.3-alpha → 0.79.2

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 (5) hide show
  1. package/package.json +1 -1
  2. package/src/modules/dx/cardContent/cardContent.html +4 -1
  3. package/src/modules/dx/cardDocs/cardDocs.html +4 -1
  4. package/src/modules/dx/feature/feature.ts +3 -3
  5. package/src/modules/dx/tooltip/microtip.css +101 -105
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salesforcedevs/dx-components",
3
- "version": "0.78.3-alpha",
3
+ "version": "0.79.2",
4
4
  "description": "DX Lightning web components",
5
5
  "license": "MIT",
6
6
  "engines": {
package/src/modules/dx/cardContent/cardContent.html CHANGED
@@ -20,7 +20,10 @@
20
20
  />
21
21
  </a>
22
22
  <div
23
- class="dx-card-base_section-vertical dx-card-base_column card_section-text"
23
+ class="
24
+ dx-card-base_section-vertical dx-card-base_column
25
+ card_section-text
26
+ "
24
27
  >
25
28
  <span if:true={label} part="label" class="label dx-text-label-3">
26
29
  {label}
package/src/modules/dx/cardDocs/cardDocs.html CHANGED
@@ -7,7 +7,10 @@
7
7
  class="image dx-card-base_image"
8
8
  />
9
9
  <div
10
- class="dx-card-base_section-vertical dx-card-base_column card_section-text"
10
+ class="
11
+ dx-card-base_section-vertical dx-card-base_column
12
+ card_section-text
13
+ "
11
14
  >
12
15
  <span class="dx-text-label-3">{label}</span>
13
16
  <dx-card-title title={title} target={target}></dx-card-title>
package/src/modules/dx/feature/feature.ts CHANGED
@@ -25,10 +25,10 @@ export default class Feature extends LightningElement {
25
25
  }
26
26
 
27
27
  get target(): string {
28
- return this.isExternalLink ? '_blank' : '_self';
28
+ return this.isExternalLink ? "_blank" : "_self";
29
29
  }
30
30
 
31
31
  get iconSymbol(): string {
32
- return this.isExternalLink ? 'new_window' : '';
32
+ return this.isExternalLink ? "new_window" : "";
33
33
  }
34
- }
34
+ }
package/src/modules/dx/tooltip/microtip.css CHANGED
@@ -1,6 +1,5 @@
1
1
  /* Code generated by scripts/postinstall.js DO NOT EDIT*/
2
2
 
3
-
4
3
  /* -------------------------------------------------------------------
5
4
  Microtip
6
5
 
@@ -16,254 +15,251 @@
16
15
  3. Position Modifiers
17
16
  --------------------------------------------------------------------*/
18
17
 
19
-
20
18
  /* ------------------------------------------------
21
19
  [1] Base Styles
22
20
  -------------------------------------------------*/
23
21
 
24
22
  [aria-label][role~="tooltip"] {
25
- position: relative;
23
+ position: relative;
26
24
  }
27
25
 
28
26
  [aria-label][role~="tooltip"]::before,
29
27
  [aria-label][role~="tooltip"]::after {
30
- transform: translate3d(0, 0, 0);
31
- -webkit-backface-visibility: hidden;
32
- backface-visibility: hidden;
33
- will-change: transform;
34
- opacity: 0;
35
- pointer-events: none;
36
- transition: all var(--microtip-transition-duration, .18s) var(--microtip-transition-easing, ease-in-out) var(--microtip-transition-delay, 0s);
37
- position: absolute;
38
- box-sizing: border-box;
39
- z-index: 10;
40
- transform-origin: top;
28
+ transform: translate3d(0, 0, 0);
29
+ -webkit-backface-visibility: hidden;
30
+ backface-visibility: hidden;
31
+ will-change: transform;
32
+ opacity: 0;
33
+ pointer-events: none;
34
+ transition: all var(--microtip-transition-duration, 0.18s)
35
+ var(--microtip-transition-easing, ease-in-out)
36
+ var(--microtip-transition-delay, 0s);
37
+ position: absolute;
38
+ box-sizing: border-box;
39
+ z-index: 10;
40
+ transform-origin: top;
41
41
  }
42
42
 
43
43
  [aria-label][role~="tooltip"]::before {
44
- background-size: 100% auto !important;
45
- content: "";
44
+ background-size: 100% auto !important;
45
+ content: "";
46
46
  }
47
47
 
48
48
  [aria-label][role~="tooltip"]::after {
49
- background: rgba(17, 17, 17, .9);
50
- border-radius: 4px;
51
- color: #ffffff;
52
- content: attr(aria-label);
53
- font-size: var(--microtip-font-size, 13px);
54
- font-weight: var(--microtip-font-weight, normal);
55
- text-transform: var(--microtip-text-transform, none);
56
- padding: .5em 1em;
57
- white-space: nowrap;
58
- box-sizing: content-box;
49
+ background: rgba(17, 17, 17, 0.9);
50
+ border-radius: 4px;
51
+ color: #ffffff;
52
+ content: attr(aria-label);
53
+ font-size: var(--microtip-font-size, 13px);
54
+ font-weight: var(--microtip-font-weight, normal);
55
+ text-transform: var(--microtip-text-transform, none);
56
+ padding: 0.5em 1em;
57
+ white-space: nowrap;
58
+ box-sizing: content-box;
59
59
  }
60
60
 
61
61
  [aria-label][role~="tooltip"]:hover::before,
62
62
  [aria-label][role~="tooltip"]:hover::after,
63
63
  [aria-label][role~="tooltip"]:focus::before,
64
64
  [aria-label][role~="tooltip"]:focus::after {
65
- opacity: 1;
66
- pointer-events: auto;
65
+ opacity: 1;
66
+ pointer-events: auto;
67
67
  }
68
68
 
69
-
70
-
71
69
  /* ------------------------------------------------
72
70
  [2] Position Modifiers
73
71
  -------------------------------------------------*/
74
72
 
75
73
  [role~="tooltip"][data-microtip-position|="top"]::before {
76
- background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
77
- height: 6px;
78
- width: 18px;
79
- margin-bottom: 5px;
74
+ background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E")
75
+ no-repeat;
76
+ height: 6px;
77
+ width: 18px;
78
+ margin-bottom: 5px;
80
79
  }
81
80
 
82
81
  [role~="tooltip"][data-microtip-position|="top"]::after {
83
- margin-bottom: 11px;
82
+ margin-bottom: 11px;
84
83
  }
85
84
 
86
85
  [role~="tooltip"][data-microtip-position|="top"]::before {
87
- transform: translate3d(-50%, 0, 0);
88
- bottom: 100%;
89
- left: 50%;
86
+ transform: translate3d(-50%, 0, 0);
87
+ bottom: 100%;
88
+ left: 50%;
90
89
  }
91
90
 
92
91
  [role~="tooltip"][data-microtip-position|="top"]:hover::before {
93
- transform: translate3d(-50%, -5px, 0);
92
+ transform: translate3d(-50%, -5px, 0);
94
93
  }
95
94
 
96
95
  [role~="tooltip"][data-microtip-position|="top"]::after {
97
- transform: translate3d(-50%, 0, 0);
98
- bottom: 100%;
99
- left: 50%;
96
+ transform: translate3d(-50%, 0, 0);
97
+ bottom: 100%;
98
+ left: 50%;
100
99
  }
101
100
 
102
101
  [role~="tooltip"][data-microtip-position="top"]:hover::after {
103
- transform: translate3d(-50%, -5px, 0);
102
+ transform: translate3d(-50%, -5px, 0);
104
103
  }
105
104
 
106
105
  /* ------------------------------------------------
107
106
  [2.1] Top Left
108
107
  -------------------------------------------------*/
109
108
  [role~="tooltip"][data-microtip-position="top-left"]::after {
110
- transform: translate3d(calc(-100% + 16px), 0, 0);
111
- bottom: 100%;
109
+ transform: translate3d(calc(-100% + 16px), 0, 0);
110
+ bottom: 100%;
112
111
  }
113
112
 
114
113
  [role~="tooltip"][data-microtip-position="top-left"]:hover::after {
115
- transform: translate3d(calc(-100% + 16px), -5px, 0);
114
+ transform: translate3d(calc(-100% + 16px), -5px, 0);
116
115
  }
117
116
 
118
-
119
117
  /* ------------------------------------------------
120
118
  [2.2] Top Right
121
119
  -------------------------------------------------*/
122
120
  [role~="tooltip"][data-microtip-position="top-right"]::after {
123
- transform: translate3d(calc(0% + -16px), 0, 0);
124
- bottom: 100%;
121
+ transform: translate3d(calc(0% + -16px), 0, 0);
122
+ bottom: 100%;
125
123
  }
126
124
 
127
125
  [role~="tooltip"][data-microtip-position="top-right"]:hover::after {
128
- transform: translate3d(calc(0% + -16px), -5px, 0);
126
+ transform: translate3d(calc(0% + -16px), -5px, 0);
129
127
  }
130
128
 
131
-
132
129
  /* ------------------------------------------------
133
130
  [2.3] Bottom
134
131
  -------------------------------------------------*/
135
132
  [role~="tooltip"][data-microtip-position|="bottom"]::before {
136
- background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
137
- height: 6px;
138
- width: 18px;
139
- margin-top: 5px;
140
- margin-bottom: 0;
133
+ background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E")
134
+ no-repeat;
135
+ height: 6px;
136
+ width: 18px;
137
+ margin-top: 5px;
138
+ margin-bottom: 0;
141
139
  }
142
140
 
143
141
  [role~="tooltip"][data-microtip-position|="bottom"]::after {
144
- margin-top: 11px;
142
+ margin-top: 11px;
145
143
  }
146
144
 
147
145
  [role~="tooltip"][data-microtip-position|="bottom"]::before {
148
- transform: translate3d(-50%, -10px, 0);
149
- bottom: auto;
150
- left: 50%;
151
- top: 100%;
146
+ transform: translate3d(-50%, -10px, 0);
147
+ bottom: auto;
148
+ left: 50%;
149
+ top: 100%;
152
150
  }
153
151
 
154
152
  [role~="tooltip"][data-microtip-position|="bottom"]:hover::before {
155
- transform: translate3d(-50%, 0, 0);
153
+ transform: translate3d(-50%, 0, 0);
156
154
  }
157
155
 
158
156
  [role~="tooltip"][data-microtip-position|="bottom"]::after {
159
- transform: translate3d(-50%, -10px, 0);
160
- top: 100%;
161
- left: 50%;
157
+ transform: translate3d(-50%, -10px, 0);
158
+ top: 100%;
159
+ left: 50%;
162
160
  }
163
161
 
164
162
  [role~="tooltip"][data-microtip-position="bottom"]:hover::after {
165
- transform: translate3d(-50%, 0, 0);
163
+ transform: translate3d(-50%, 0, 0);
166
164
  }
167
165
 
168
-
169
166
  /* ------------------------------------------------
170
167
  [2.4] Bottom Left
171
168
  -------------------------------------------------*/
172
169
  [role~="tooltip"][data-microtip-position="bottom-left"]::after {
173
- transform: translate3d(calc(-100% + 16px), -10px, 0);
174
- top: 100%;
170
+ transform: translate3d(calc(-100% + 16px), -10px, 0);
171
+ top: 100%;
175
172
  }
176
173
 
177
174
  [role~="tooltip"][data-microtip-position="bottom-left"]:hover::after {
178
- transform: translate3d(calc(-100% + 16px), 0, 0);
175
+ transform: translate3d(calc(-100% + 16px), 0, 0);
179
176
  }
180
177
 
181
-
182
178
  /* ------------------------------------------------
183
179
  [2.5] Bottom Right
184
180
  -------------------------------------------------*/
185
181
  [role~="tooltip"][data-microtip-position="bottom-right"]::after {
186
- transform: translate3d(calc(0% + -16px), -10px, 0);
187
- top: 100%;
182
+ transform: translate3d(calc(0% + -16px), -10px, 0);
183
+ top: 100%;
188
184
  }
189
185
 
190
186
  [role~="tooltip"][data-microtip-position="bottom-right"]:hover::after {
191
- transform: translate3d(calc(0% + -16px), 0, 0);
187
+ transform: translate3d(calc(0% + -16px), 0, 0);
192
188
  }
193
189
 
194
-
195
190
  /* ------------------------------------------------
196
191
  [2.6] Left
197
192
  -------------------------------------------------*/
198
193
  [role~="tooltip"][data-microtip-position="left"]::before,
199
194
  [role~="tooltip"][data-microtip-position="left"]::after {
200
- bottom: auto;
201
- left: auto;
202
- right: 100%;
203
- top: 50%;
204
- transform: translate3d(10px, -50%, 0);
195
+ bottom: auto;
196
+ left: auto;
197
+ right: 100%;
198
+ top: 50%;
199
+ transform: translate3d(10px, -50%, 0);
205
200
  }
206
201
 
207
202
  [role~="tooltip"][data-microtip-position="left"]::before {
208
- background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
209
- height: 18px;
210
- width: 6px;
211
- margin-right: 5px;
212
- margin-bottom: 0;
203
+ background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E")
204
+ no-repeat;
205
+ height: 18px;
206
+ width: 6px;
207
+ margin-right: 5px;
208
+ margin-bottom: 0;
213
209
  }
214
210
 
215
211
  [role~="tooltip"][data-microtip-position="left"]::after {
216
- margin-right: 11px;
212
+ margin-right: 11px;
217
213
  }
218
214
 
219
215
  [role~="tooltip"][data-microtip-position="left"]:hover::before,
220
216
  [role~="tooltip"][data-microtip-position="left"]:hover::after {
221
- transform: translate3d(0, -50%, 0);
217
+ transform: translate3d(0, -50%, 0);
222
218
  }
223
219
 
224
-
225
220
  /* ------------------------------------------------
226
221
  [2.7] Right
227
222
  -------------------------------------------------*/
228
223
  [role~="tooltip"][data-microtip-position="right"]::before,
229
224
  [role~="tooltip"][data-microtip-position="right"]::after {
230
- bottom: auto;
231
- left: 100%;
232
- top: 50%;
233
- transform: translate3d(-10px, -50%, 0);
225
+ bottom: auto;
226
+ left: 100%;
227
+ top: 50%;
228
+ transform: translate3d(-10px, -50%, 0);
234
229
  }
235
230
 
236
231
  [role~="tooltip"][data-microtip-position="right"]::before {
237
- background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%2890%206%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
238
- height: 18px;
239
- width: 6px;
240
- margin-bottom: 0;
241
- margin-left: 5px;
232
+ background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%2890%206%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E")
233
+ no-repeat;
234
+ height: 18px;
235
+ width: 6px;
236
+ margin-bottom: 0;
237
+ margin-left: 5px;
242
238
  }
243
239
 
244
240
  [role~="tooltip"][data-microtip-position="right"]::after {
245
- margin-left: 11px;
241
+ margin-left: 11px;
246
242
  }
247
243
 
248
244
  [role~="tooltip"][data-microtip-position="right"]:hover::before,
249
245
  [role~="tooltip"][data-microtip-position="right"]:hover::after {
250
- transform: translate3d(0, -50%, 0);
246
+ transform: translate3d(0, -50%, 0);
251
247
  }
252
248
 
253
249
  /* ------------------------------------------------
254
250
  [3] Size
255
251
  -------------------------------------------------*/
256
252
  [role~="tooltip"][data-microtip-size="small"]::after {
257
- white-space: initial;
258
- width: 80px;
253
+ white-space: initial;
254
+ width: 80px;
259
255
  }
260
256
 
261
257
  [role~="tooltip"][data-microtip-size="medium"]::after {
262
- white-space: initial;
263
- width: 150px;
258
+ white-space: initial;
259
+ width: 150px;
264
260
  }
265
261
 
266
262
  [role~="tooltip"][data-microtip-size="large"]::after {
267
- white-space: initial;
268
- width: 260px;
263
+ white-space: initial;
264
+ width: 260px;
269
265
  }