@salesforcedevs/dx-components 0.70.0 → 0.71.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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salesforcedevs/dx-components",
3
- "version": "0.70.0",
3
+ "version": "0.71.0",
4
4
  "description": "DX Lightning web components",
5
5
  "license": "MIT",
6
6
  "engines": {
@@ -26,5 +26,5 @@
26
26
  "@types/lodash.get": "^4.4.6",
27
27
  "@types/vimeo__player": "^2.16.2"
28
28
  },
29
- "gitHead": "d32440fddef6bfd9f99abb0fe905d2c9cb8ee74e"
29
+ "gitHead": "4a5210f6d819521bdad4cd5a21ffc38051c7bd75"
30
30
  }
@@ -39,6 +39,7 @@
39
39
 
40
40
  .title-group {
41
41
  display: flex;
42
+ justify-content: space-between;
42
43
  }
43
44
 
44
45
  .title-group-main {
@@ -59,7 +60,8 @@
59
60
  height: 100%;
60
61
  overflow-y: auto;
61
62
  margin-top: 12px;
62
- padding: 0 var(--horizontal-padding);
63
+ padding: 0 9px 0 var(--horizontal-padding);
64
+ scrollbar-gutter: stable;
63
65
  }
64
66
 
65
67
  dx-checkbox:not(:first-of-type) {
@@ -83,13 +85,9 @@ label {
83
85
  margin-top: 5px;
84
86
  }
85
87
 
86
- svg {
87
- background: transparent;
88
- stroke: var(--dx-g-blue-vibrant-50);
89
- }
90
-
91
88
  svg,
92
89
  .filter-menu-title {
90
+ background: transparent;
93
91
  cursor: pointer;
94
92
  -webkit-user-select: none; /* Safari 3.1+ */
95
93
  -moz-user-select: none; /* Firefox 2+ */
@@ -97,8 +95,12 @@ svg,
97
95
  user-select: none;
98
96
  }
99
97
 
100
- .year-svg {
101
- right: 50px;
98
+ .header-caret {
99
+ stroke: var(--dx-g-blue-vibrant-50);
100
+ }
101
+
102
+ .year-caret {
103
+ stroke: var(--dx-g-gray-50);
102
104
  }
103
105
 
104
106
  .checkbox-month,
@@ -118,3 +120,19 @@ svg,
118
120
  font-size: 14px;
119
121
  font-family: var(--dx-g-font-sans);
120
122
  }
123
+
124
+ @keyframes loading-dots {
125
+ 50% {
126
+ content: "(..\00a0)";
127
+ }
128
+
129
+ 100% {
130
+ content: "(...)";
131
+ }
132
+ }
133
+
134
+ .filters-dates-loading::after {
135
+ animation: loading-dots 1s linear infinite;
136
+ display: inline-block;
137
+ content: "(.\00a0\00a0)";
138
+ }
@@ -4,14 +4,14 @@
4
4
  <p class="filter-menu-title">{title}</p>
5
5
  <svg
6
6
  xmlns="http://www.w3.org/2000/svg"
7
- width="24"
8
- height="24"
7
+ width="28"
8
+ height="28"
9
9
  viewBox="0 0 24 24"
10
10
  fill="none"
11
11
  stroke-width="2"
12
12
  stroke-linecap="round"
13
13
  stroke-linejoin="round"
14
- class="feather feather-chevron-down"
14
+ class="feather feather-chevron-down header-caret"
15
15
  >
16
16
  <polyline points="6 9 12 15 18 9"></polyline>
17
17
  </svg>
@@ -43,8 +43,14 @@
43
43
  value={option}
44
44
  onchange={onChange}
45
45
  >
46
- {option.name}
47
- ({option.totalNumberOfPosts})
46
+ {option.name}&nbsp;
47
+ <span
48
+ if:true={filtersDatesLoading}
49
+ class="filters-dates-loading"
50
+ ></span>
51
+ <span if:false={filtersDatesLoading}>
52
+ ({option.totalNumberOfPosts})
53
+ </span>
48
54
  </dx-checkbox-native>
49
55
  <span onclick={dropdownToggle}>
50
56
  <svg
@@ -58,7 +64,7 @@
58
64
  stroke-linejoin="round"
59
65
  class="
60
66
  feather feather-chevron-down
61
- year-svg
67
+ year-caret
62
68
  "
63
69
  >
64
70
  <polyline
@@ -79,8 +85,18 @@
79
85
  value={month}
80
86
  onchange={onChange}
81
87
  >
82
- {month.id}
83
- ({month.numberOfPosts})
88
+ {month.id}&nbsp;
89
+ <span
90
+ if:true={filtersDatesLoading}
91
+ class="
92
+ filters-dates-loading
93
+ "
94
+ ></span>
95
+ <span
96
+ if:false={filtersDatesLoading}
97
+ >
98
+ ({month.numberOfPosts})
99
+ </span>
84
100
  </dx-checkbox-native>
85
101
  </li>
86
102
  </template>
@@ -10,6 +10,7 @@ export default class FilterMenu extends LightningElement {
10
10
  @api name: string = "";
11
11
  @api title: string = "Filter Menu";
12
12
  @api variant: string = "base";
13
+ @api filtersDatesLoading?: boolean;
13
14
 
14
15
  @api
15
16
  get options(): Option[] {