@salesforcedevs/dx-components 1.3.254 → 1.3.255

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": "1.3.254",
3
+ "version": "1.3.255",
4
4
  "description": "DX Lightning web components",
5
5
  "license": "MIT",
6
6
  "engines": {
@@ -45,5 +45,5 @@
45
45
  "volta": {
46
46
  "node": "16.19.1"
47
47
  },
48
- "gitHead": "1b749ae7cd4066e332ed443c23309dddc30dc933"
48
+ "gitHead": "a57e98f490c60d3079a727d33d04fb0b555ae583"
49
49
  }
@@ -180,6 +180,24 @@ li.coveo-dynamic-facet-breadcrumb-value-list-item {
180
180
  margin-top: var(--dx-g-spacing-lg);
181
181
  }
182
182
 
183
+ .coveo-query-summary-cancel-last,
184
+ .coveo-query-summary-search-tips-info,
185
+ .CoveoQuerySummary ul {
186
+ display: none;
187
+ }
188
+
189
+ .CoveoSearchInterface .coveo-results-column.coveo-no-results {
190
+ max-width: 100%;
191
+ }
192
+
193
+ .CoveoQuerySummary div {
194
+ margin-bottom: var(--dx-g-spacing-md);
195
+ }
196
+
197
+ .coveo-query-summary-no-results-string {
198
+ color: var(--dx-g-text-heading-color);
199
+ }
200
+
183
201
  .CoveoSort {
184
202
  font-size: var(--dx-g-text-sm);
185
203
  color: var(--dx-g-blue-vibrant-20);
@@ -431,6 +449,10 @@ li.coveo-dynamic-facet-breadcrumb-value-list-item {
431
449
  font-size: var(--dx-g-text-xs);
432
450
  }
433
451
 
452
+ .no-results-info {
453
+ text-align: left;
454
+ }
455
+
434
456
  .no-results {
435
457
  display: flex;
436
458
  justify-content: center;
@@ -442,6 +464,15 @@ li.coveo-dynamic-facet-breadcrumb-value-list-item {
442
464
  font-size: var(--dx-g-text-sm);
443
465
  }
444
466
 
467
+ .tip-list {
468
+ padding-bottom: var(--dx-g-spacing-2xl);
469
+ }
470
+
471
+ .tbc-container {
472
+ padding-top: var(--dx-g-spacing-2xl);
473
+ border-top: 1px solid var(--dx-g-gray-80);
474
+ }
475
+
445
476
  .link {
446
477
  color: var(--dx-g-blue-vibrant-50);
447
478
  text-decoration: underline;
@@ -451,10 +482,6 @@ li.coveo-dynamic-facet-breadcrumb-value-list-item {
451
482
  color: var(--dx-g-blue-vibrant-20);
452
483
  }
453
484
 
454
- .no-results-info > p:first-of-type {
455
- margin-bottom: var(--dx-g-spacing-md);
456
- }
457
-
458
485
  .no-results-info > ul {
459
486
  list-style-type: disc;
460
487
  list-style-position: inside;
@@ -10,129 +10,94 @@
10
10
  <div class="dx-search-header-container">
11
11
  <p class="dx-search-header-title">
12
12
  <span class="dx-search-header-title-results">{title}</span>
13
- &nbsp;
14
- <strong lwc:if={hasNoResults}>0</strong>
15
13
  &nbsp;results for
16
14
  </p>
17
15
  <p class="dx-search-header-query">&ldquo;{query}&rdquo;</p>
18
16
  </div>
19
17
  </div>
20
18
  <div class="coveo-main-section">
21
- <div class="no-results" lwc:if={hasNoResults}>
22
- <img
23
- src="https://a.sfdcstatic.com/developer-website/images/binary-cloud-circle-small.svg"
24
- alt="purple cloud with floating binary numbers above"
25
- />
26
- <div class="no-results-info">
27
- <p class="dx-text-display-8">
28
- Sorry, no results were found for your search
29
- &ldquo;{query}&rdquo;
30
- </p>
31
- <p class="dx-text-display-8 tip">Search Tips:</p>
32
- <ul>
33
- <li>Please consider misspellings</li>
34
- <li>Try different search keywords</li>
35
- </ul>
36
- <dx-hr no-padding="true"></dx-hr>
37
- <p class="dx-text-display-8 tip">
38
- Still not finding what you're looking for? Consider
39
- asking in the&nbsp;
40
- <a
41
- class="link"
42
- href="https://trailhead.salesforce.com/trailblazer-community/feed"
43
- >
44
- Trailblazer Community
45
- </a>
46
- !
47
- </p>
19
+ <div class="coveo-facet-column">
20
+ <div class="dx-facet-column-header">
21
+ <span class="dx-facet-column-header-title">Filters</span>
22
+ <template if:true={hasFilters}>
23
+ <dx-button onclick={clearFilters} variant="inline">
24
+ Clear
25
+ </dx-button>
26
+ </template>
27
+ </div>
28
+ <div
29
+ class="CoveoDynamicFacetManager"
30
+ data-enable-reorder="false"
31
+ >
32
+ <div
33
+ class="CoveoDynamicFacet"
34
+ data-title="Content Type"
35
+ data-field="@commonsource"
36
+ data-tab="All"
37
+ data-enable-facet-search="false"
38
+ ></div>
39
+ <div
40
+ class="CoveoDynamicFacet"
41
+ data-title="Language"
42
+ data-field="@language"
43
+ data-tab="All"
44
+ data-enable-facet-search="false"
45
+ ></div>
46
+ </div>
47
+ <div class="dx-facet-column-footer">
48
+ <dx-button onclick={dismissFiltersOverlay}>
49
+ View {title} results
50
+ </dx-button>
48
51
  </div>
49
52
  </div>
50
- <template lwc:if={hasResults}>
51
- <div class="coveo-facet-column">
52
- <div class="dx-facet-column-header">
53
- <span class="dx-facet-column-header-title">
54
- Filters
55
- </span>
56
- <template if:true={hasFilters}>
57
- <dx-button onclick={clearFilters} variant="inline">
58
- Clear
59
- </dx-button>
60
- </template>
53
+ <div class="coveo-results-column">
54
+ <div class="CoveoShareQuery"></div>
55
+ <div class="CoveoExportToExcel"></div>
56
+ <div class="CoveoPreferencesPanel">
57
+ <div class="CoveoResultsPreferences"></div>
58
+ <div class="CoveoResultsFiltersPreferences"></div>
59
+ </div>
60
+ <div class="CoveoDidYouMean"></div>
61
+ <div class="coveo-results-header">
62
+ <div class="coveo-summary-section"></div>
63
+ <div class="coveo-sort-section" role="radiogroup">
64
+ <span
65
+ class="CoveoSort"
66
+ data-sort-criteria="relevancy"
67
+ data-caption="Sorted by Relevance"
68
+ ></span>
61
69
  </div>
62
- <div
63
- class="CoveoDynamicFacetManager"
64
- data-enable-reorder="false"
65
- >
66
- <div
67
- class="CoveoDynamicFacet"
68
- data-title="Content Type"
69
- data-field="@commonsource"
70
- data-tab="All"
71
- data-enable-facet-search="false"
72
- ></div>
70
+ <div>
73
71
  <div
74
- class="CoveoDynamicFacet"
75
- data-title="Language"
76
- data-field="@language"
77
- data-tab="All"
78
- data-enable-facet-search="false"
72
+ class="CoveoSearchbox"
73
+ data-enable-omnibox="false"
74
+ data-add-search-button="false"
75
+ aria-hidden="true"
79
76
  ></div>
80
77
  </div>
81
- <div class="dx-facet-column-footer">
82
- <dx-button onclick={dismissFiltersOverlay}>
83
- View {title} results
84
- </dx-button>
85
- </div>
86
78
  </div>
87
- <div class="coveo-results-column">
88
- <div class="CoveoShareQuery"></div>
89
- <div class="CoveoExportToExcel"></div>
90
- <div class="CoveoPreferencesPanel">
91
- <div class="CoveoResultsPreferences"></div>
92
- <div class="CoveoResultsFiltersPreferences"></div>
93
- </div>
94
- <div class="CoveoDidYouMean"></div>
95
- <div class="coveo-results-header">
96
- <div class="coveo-summary-section"></div>
97
- <div class="coveo-sort-section" role="radiogroup">
98
- <span
99
- class="CoveoSort"
100
- data-sort-criteria="relevancy"
101
- data-caption="Sorted by Relevance"
102
- ></span>
103
- </div>
104
- <div>
105
- <div
106
- class="CoveoSearchbox"
107
- data-enable-omnibox="false"
108
- data-add-search-button="false"
109
- aria-hidden="true"
110
- ></div>
111
- </div>
112
- </div>
113
- <div class="CoveoBreadcrumb"></div>
114
- <div class="CoveoHiddenQuery"></div>
115
- <div class="CoveoErrorReport"></div>
116
- <div
117
- class="CoveoResultList"
118
- data-layout="list"
119
- data-wait-animation="fade"
120
- data-auto-select-fields-to-include="true"
121
- lwc:dom="manual"
122
- ></div>
123
- <div class="coveo-results-footer" aria-hidden="true">
124
- <div class="CoveoPager"></div>
125
- </div>
126
- <div class="pagination-container">
127
- <dx-pagination
128
- current-page={currentPage}
129
- total-pages={totalPages}
130
- onpagechange={goToPage}
131
- pages-to-show="5"
132
- ></dx-pagination>
133
- </div>
79
+ <div class="CoveoBreadcrumb"></div>
80
+ <div class="CoveoHiddenQuery"></div>
81
+ <div class="CoveoErrorReport"></div>
82
+ <div
83
+ class="CoveoResultList"
84
+ data-layout="list"
85
+ data-wait-animation="fade"
86
+ data-auto-select-fields-to-include="true"
87
+ lwc:dom="manual"
88
+ ></div>
89
+ <div class="coveo-results-footer" aria-hidden="true">
90
+ <div class="CoveoPager"></div>
134
91
  </div>
135
- </template>
92
+ <div class="pagination-container">
93
+ <dx-pagination
94
+ current-page={currentPage}
95
+ total-pages={totalPages}
96
+ onpagechange={goToPage}
97
+ pages-to-show="5"
98
+ ></dx-pagination>
99
+ </div>
100
+ </div>
136
101
  </div>
137
102
  </div>
138
103
  </template>
@@ -42,55 +42,43 @@ function getPaginationState(event: CoveoSDK.IQuerySuccessEventArgs): {
42
42
  }
43
43
 
44
44
  const resultsTemplatesInnerHtml = `
45
- <script
46
- id="myDocumentResultTemplate"
47
- class="result-template"
48
- type="text/underscore"
49
- data-field-publicurl=""
50
- >
51
- <div class="dx-result">
52
- <div class="dx-result-info">
53
- <span class="CoveoFieldValue" data-field="@content_type" data-helper="badge" data-html-value="true"></span>
54
- <% if (!raw.breadcrumbs && !raw.metabreadcrumbs) { %>
55
- <span class="CoveoFieldValue" data-field="@uri" data-helper="uriBreadcrumbs" data-html-value="true"></span>
56
- <% } else { %>
57
- <% if (raw.uri.includes('/references/')) { %>
58
- <span class="CoveoFieldValue" data-field="@metabreadcrumbs" data-helper="metabreadcrumbs" data-html-value="true"></span>
59
- <% } else { %>
60
- <span class="CoveoFieldValue" data-field="@breadcrumbs" data-helper="breadcrumbs" data-html-value="true"></span>
61
- <% } %>
62
- <% } %>
45
+ <div class="coveo-show-if-no-results">
46
+ <div class="no-results">
47
+ <img
48
+ src="https://a.sfdcstatic.com/developer-website/images/binary-cloud-circle-small.svg"
49
+ alt="purple cloud with floating binary numbers above"
50
+ />
51
+ <div class="no-results-info">
52
+ <span class="CoveoQuerySummary dx-text-display-8"
53
+ data-enable-no-results-found-message="true"
54
+ data-no-results-found-message="Sorry, no results were found for your search &ldquo;\${query}&rdquo;">
55
+ </span>
56
+ <p class="dx-text-display-8 tip">Search Tips:</p>
57
+ <ul class="tip-list">
58
+ <li>Please consider misspellings</li>
59
+ <li>Try different search keywords</li>
60
+ </ul>
61
+ <p class="dx-text-display-8 tip tbc-container">
62
+ Still not finding what you're looking for? Consider
63
+ asking in the&nbsp;
64
+ <a
65
+ class="link"
66
+ href="https://trailhead.salesforce.com/trailblazer-community/feed"
67
+ >
68
+ Trailblazer Community
69
+ </a>
70
+ !
71
+ </p>
63
72
  </div>
64
- <a
65
- href="<%= raw.uri %>"
66
- class="dx-result-title CoveoResultLink"
67
- <% if (!raw.uri.includes('developer.salesforce.com') && !raw.uri.includes('developer-website-s.herokuapp.com')) { %>
68
- target="_blank"
69
- <% } %>
70
- >
71
- <%= title %>
72
- <% if (!raw.uri.includes('developer.salesforce.com') && !raw.uri.includes('developer-website-s.herokuapp.com')) { %>
73
- <svg xmlns="http://www.w3.org/2000/svg" style="display: inline; vertical-align: baseline;" fill="var(--dx-g-blue-vibrant-20)" width="20" height="20" part="svg" aria-hidden="true"><use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#new_window"></use></svg>
74
- <% } %>
75
- </a>
76
- <span class="CoveoFieldValue" data-field="@sflastmodifieddate" data-helper="postedDate" data-html-value="true"></span>
77
- <p class="dx-result-excerpt CoveoExcerpt"></p>
78
- <% if (raw.sfcommentcount || raw.sflikecount) { %>
79
- <div class="post-info-container">
80
- <span class="CoveoFieldValue" data-field="@sfcommentcount" data-helper="replies" data-html-value="true"></span>
81
- <% if (raw.sfcommentcount && raw.sflikecount) { %>
82
- <span>&bull;</span>
83
- <% } %>
84
- <span class="CoveoFieldValue" data-field="@sflikecount" data-helper="likes" data-html-value="true"></span>
85
- </div>
86
- <% } %>
87
- </div>
88
- </script>
89
- <script
90
- id="myDefaultResultTemplate"
91
- class="result-template"
92
- type="text/underscore"
93
- >
73
+ </div>
74
+ </div>
75
+ <div class="coveo-show-if-results">
76
+ <script
77
+ id="myDocumentResultTemplate"
78
+ class="result-template"
79
+ type="text/underscore"
80
+ data-field-publicurl=""
81
+ >
94
82
  <div class="dx-result">
95
83
  <div class="dx-result-info">
96
84
  <span class="CoveoFieldValue" data-field="@content_type" data-helper="badge" data-html-value="true"></span>
@@ -111,11 +99,7 @@ const resultsTemplatesInnerHtml = `
111
99
  target="_blank"
112
100
  <% } %>
113
101
  >
114
- <% if (title) { %>
115
- <%= title %>
116
- <% } else { %>
117
- <%= uri %>
118
- <% } %>
102
+ <%= title %>
119
103
  <% if (!raw.uri.includes('developer.salesforce.com') && !raw.uri.includes('developer-website-s.herokuapp.com')) { %>
120
104
  <svg xmlns="http://www.w3.org/2000/svg" style="display: inline; vertical-align: baseline;" fill="var(--dx-g-blue-vibrant-20)" width="20" height="20" part="svg" aria-hidden="true"><use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#new_window"></use></svg>
121
105
  <% } %>
@@ -132,7 +116,55 @@ const resultsTemplatesInnerHtml = `
132
116
  </div>
133
117
  <% } %>
134
118
  </div>
135
- </script>
119
+ </script>
120
+ <script
121
+ id="myDefaultResultTemplate"
122
+ class="result-template"
123
+ type="text/underscore"
124
+ >
125
+ <div class="dx-result">
126
+ <div class="dx-result-info">
127
+ <span class="CoveoFieldValue" data-field="@content_type" data-helper="badge" data-html-value="true"></span>
128
+ <% if (!raw.breadcrumbs && !raw.metabreadcrumbs) { %>
129
+ <span class="CoveoFieldValue" data-field="@uri" data-helper="uriBreadcrumbs" data-html-value="true"></span>
130
+ <% } else { %>
131
+ <% if (raw.uri.includes('/references/')) { %>
132
+ <span class="CoveoFieldValue" data-field="@metabreadcrumbs" data-helper="metabreadcrumbs" data-html-value="true"></span>
133
+ <% } else { %>
134
+ <span class="CoveoFieldValue" data-field="@breadcrumbs" data-helper="breadcrumbs" data-html-value="true"></span>
135
+ <% } %>
136
+ <% } %>
137
+ </div>
138
+ <a
139
+ href="<%= raw.uri %>"
140
+ class="dx-result-title CoveoResultLink"
141
+ <% if (!raw.uri.includes('developer.salesforce.com') && !raw.uri.includes('developer-website-s.herokuapp.com')) { %>
142
+ target="_blank"
143
+ <% } %>
144
+ >
145
+ <% if (title) { %>
146
+ <%= title %>
147
+ <% } else { %>
148
+ <%= uri %>
149
+ <% } %>
150
+ <% if (!raw.uri.includes('developer.salesforce.com') && !raw.uri.includes('developer-website-s.herokuapp.com')) { %>
151
+ <svg xmlns="http://www.w3.org/2000/svg" style="display: inline; vertical-align: baseline;" fill="var(--dx-g-blue-vibrant-20)" width="20" height="20" part="svg" aria-hidden="true"><use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#new_window"></use></svg>
152
+ <% } %>
153
+ </a>
154
+ <span class="CoveoFieldValue" data-field="@sflastmodifieddate" data-helper="postedDate" data-html-value="true"></span>
155
+ <p class="dx-result-excerpt CoveoExcerpt"></p>
156
+ <% if (raw.sfcommentcount || raw.sflikecount) { %>
157
+ <div class="post-info-container">
158
+ <span class="CoveoFieldValue" data-field="@sfcommentcount" data-helper="replies" data-html-value="true"></span>
159
+ <% if (raw.sfcommentcount && raw.sflikecount) { %>
160
+ <span>&bull;</span>
161
+ <% } %>
162
+ <span class="CoveoFieldValue" data-field="@sflikecount" data-helper="likes" data-html-value="true"></span>
163
+ </div>
164
+ <% } %>
165
+ </div>
166
+ </script>
167
+ </div>
136
168
  `;
137
169
 
138
170
  const isInternalDomain = (domain: string) =>
@@ -316,21 +348,16 @@ export default class SearchResults extends LightningElement {
316
348
  private totalResults: number | null = null;
317
349
 
318
350
  private get title() {
319
- return this.totalResults ? this.totalResults.toLocaleString() : "";
351
+ return this.totalResults ? this.totalResults.toLocaleString() : "0";
320
352
  }
321
353
 
322
354
  private query: string = "";
323
355
  private hasFilters: boolean = false;
324
- private hasResults: boolean = true;
325
356
 
326
357
  private get hasQuery(): boolean {
327
358
  return this.query !== "";
328
359
  }
329
360
 
330
- private get hasNoResults(): boolean {
331
- return this.hasQuery && !this.hasResults;
332
- }
333
-
334
361
  private updateSearchQuery() {
335
362
  Coveo.state(this.root!, "q", this._query);
336
363
  }
@@ -398,12 +425,8 @@ export default class SearchResults extends LightningElement {
398
425
  this.totalPages = numberOfPages;
399
426
  this.totalResults = event.detail.results.totalCount;
400
427
 
401
- if (!this.totalResults) {
402
- this.hasResults = false;
403
- }
404
-
405
428
  this.query = event.detail.query.q ?? "";
406
- this.hasFilters = event.detail.query.facets.some((f: any) => {
429
+ this.hasFilters = event.detail.query?.facets?.some((f: any) => {
407
430
  return f.currentValues.some((cv: any) => {
408
431
  return cv.state === "selected";
409
432
  });