@salesforcedevs/dx-components 1.3.204-alpha.3 → 1.3.206-alpha.10

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 (8) hide show
  1. package/package.json +1 -1
  2. package/src/modules/dx/emptyState/emptyState.css +2 -67
  3. package/src/modules/dx/emptyState/emptyState.html +4 -16
  4. package/src/modules/dx/emptyState/emptyState.ts +6 -56
  5. package/src/modules/dx/hr/hr.css +2 -4
  6. package/src/modules/dx/searchResults/searchResults.css +10 -86
  7. package/src/modules/dx/searchResults/searchResults.html +73 -109
  8. package/src/modules/dx/searchResults/searchResults.ts +190 -15
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salesforcedevs/dx-components",
3
- "version": "1.3.204-alpha.3",
3
+ "version": "1.3.206-alpha.10",
4
4
  "description": "DX Lightning web components",
5
5
  "license": "MIT",
6
6
  "engines": {
package/src/modules/dx/emptyState/emptyState.css CHANGED
@@ -3,7 +3,6 @@
3
3
 
4
4
  :host {
5
5
  --dx-c-empty-state-background: var(--dx-g-gray-95);
6
- --dx-c-empty-state-background-alt: var(--dx-g-indigo-vibrant-90);
7
6
  --dx-c-empty-state-image-width: 600px;
8
7
 
9
8
  width: 100%;
@@ -20,40 +19,12 @@
20
19
  overflow: hidden;
21
20
  }
22
21
 
23
- .container-alt {
24
- background: var(--dx-c-empty-state-background-alt);
25
- padding: var(--dx-g-spacing-4xl) var(--dx-g-spacing-3xl);
26
- border-radius: var(--dx-g-spacing-md);
27
- display: flex;
28
- flex-direction: column;
29
- justify-content: center;
30
- align-items: center;
31
- }
32
-
33
- .image {
22
+ img {
34
23
  width: var(--dx-c-empty-state-image-width);
35
24
  min-width: var(--dx-c-empty-state-image-width);
36
25
  }
37
26
 
38
- .image-alt {
39
- display: block;
40
- }
41
-
42
- .image-alt-small {
43
- display: none;
44
- }
45
-
46
- @media screen and (max-width: 375px) {
47
- .image-alt {
48
- display: none;
49
- }
50
-
51
- .image-alt-small {
52
- display: block;
53
- }
54
- }
55
-
56
- .size-small .image {
27
+ .size-small img {
57
28
  max-width: 250px;
58
29
  min-width: unset;
59
30
  width: calc(100% - 40px);
@@ -73,50 +44,14 @@
73
44
  padding: 0 var(--dx-g-spacing-xl);
74
45
  }
75
46
 
76
- .text-alt {
77
- text-align: center;
78
- }
79
-
80
47
  .size-small .text {
81
48
  top: 40%;
82
49
  }
83
50
 
84
- .dx-text-display-4 {
85
- line-height: var(--dx-g-spacing-2xl);
86
- }
87
-
88
51
  .title {
89
52
  font-size: var(--dx-g-text-2xl);
90
53
  }
91
54
 
92
- .title-alt {
93
- font-size: var(--dx-g-text-2xl);
94
- margin-top: 42px;
95
- }
96
-
97
- .body {
98
- font-size: var(--dx-g-text-sm);
99
- margin-top: var(--dx-g-spacing-lg);
100
- }
101
-
102
- ul {
103
- list-style-type: disc;
104
- list-style-position: inside;
105
- text-align: left;
106
- width: fit-content;
107
- margin: 0 auto;
108
- }
109
-
110
- .suggestion {
111
- font-size: var(--dx-g-text-xs);
112
- font-family: var(--dx-g-font-sans);
113
- color: var(--dx-g-blue-vibrant-20);
114
- }
115
-
116
- .suggestion:not(:first-of-type) {
117
- margin-top: var(--dx-g-spacing-xs);
118
- }
119
-
120
55
  .size-small .title {
121
56
  font-size: var(--dx-g-text-base);
122
57
  white-space: nowrap;
package/src/modules/dx/emptyState/emptyState.html CHANGED
@@ -1,21 +1,9 @@
1
1
  <template>
2
2
  <div class={containerClassName} part="container">
3
- <img class={imageClassName} src={imageAssetPath} alt={imageAlt} />
4
- <img
5
- class="image-alt-small"
6
- src="https://a.sfdcstatic.com/developer-website/images/binary-cloud-circle-small.svg"
7
- alt="Cloud with binary code floating above"
8
- lwc:if={altVariant}
9
- />
10
- <div class={textClassName}>
11
- <h3 class={titleClassName}>{title}</h3>
12
- <p class={subtitleClassName} if:true={subtitle}>{subtitle}</p>
13
- <p class="body dx-text-display-8" if:true={body}>{body}</p>
14
- <ul if:true={suggestions}>
15
- <template for:each={suggestions} for:item="suggestion">
16
- <li class="suggestion" key={suggestion}>{suggestion}</li>
17
- </template>
18
- </ul>
3
+ <img src={imageAssetPath} alt="Mountains" />
4
+ <div class="text">
5
+ <h3 class="title dx-text-display-4">{title}</h3>
6
+ <p class="subtitle dx-text-body-2" if:true={subtitle}>{subtitle}</p>
19
7
  </div>
20
8
  </div>
21
9
  </template>
package/src/modules/dx/emptyState/emptyState.ts CHANGED
@@ -4,67 +4,17 @@ import { EmptyStateSize } from "typings/custom";
4
4
  export default class EmptyState extends LightningElement {
5
5
  @api title: string = "";
6
6
  @api subtitle?: string | null = null;
7
- @api body?: string | null = null;
8
7
  @api size?: EmptyStateSize = "large";
9
- @api variant?: "base" | "alt" = "base";
10
-
11
- @api
12
- get suggestions(): string[] {
13
- return this._suggestions;
14
- }
15
- set suggestions(value: string) {
16
- this._suggestions = JSON.parse(value);
17
- }
18
-
19
- private _suggestions = [];
20
-
21
- get altVariant() {
22
- return this.variant === "alt";
23
- }
24
8
 
25
9
  get containerClassName() {
26
- return this.variant === "base"
27
- ? `container ${
28
- !this.size || this.size === "large"
29
- ? "size-large"
30
- : "size-small"
31
- }`
32
- : `container-alt`;
33
- }
34
-
35
- get textClassName() {
36
- return this.variant === "base" ? "text" : "text-alt";
37
- }
38
-
39
- get titleClassName() {
40
- return this.variant === "base"
41
- ? "title dx-text-display-4"
42
- : "title-alt dx-text-display-4";
43
- }
44
-
45
- get subtitleClassName() {
46
- return this.variant === "base"
47
- ? "subtitle dx-text-body-2"
48
- : "subtitle-alt dx-text-display-8";
49
- }
50
-
51
- get imageClassName() {
52
- return this.variant === "base" ? "image" : "image-alt";
53
- }
54
-
55
- get imageAlt() {
56
- return this.variant === "base"
57
- ? "Mountains"
58
- : "Clouds with binary code floating above";
10
+ return `container ${
11
+ !this.size || this.size === "large" ? "size-large" : "size-small"
12
+ }`;
59
13
  }
60
14
 
61
15
  get imageAssetPath() {
62
- return this.variant === "base"
63
- ? `https://a.sfdcstatic.com/developer-website/images/docs-empty-state${
64
- this.size === "small" ? "-small" : ""
65
- }.svg`
66
- : `https://a.sfdcstatic.com/developer-website/images/binary-cloud-circle${
67
- this.size === "small" ? "-small" : ""
68
- }.svg`;
16
+ return `https://a.sfdcstatic.com/developer-website/images/docs-empty-state${
17
+ this.size === "small" ? "-small" : ""
18
+ }.svg`;
69
19
  }
70
20
  }
package/src/modules/dx/hr/hr.css CHANGED
@@ -3,8 +3,6 @@
3
3
 
4
4
  :host {
5
5
  --dx-c-hr-padding-horizontal: var(--dx-g-page-padding-horizontal);
6
- --dx-c-hr-color: var(--dx-g-gray-95);
7
- --dx-c-stroke-width: 2px;
8
6
  }
9
7
 
10
8
  p,
@@ -25,7 +23,7 @@ p::after,
25
23
  h2::after {
26
24
  content: "";
27
25
  flex: 1 1;
28
- border-bottom: var(--dx-c-stroke-width) solid var(--dx-c-hr-color);
26
+ border-bottom: 2px solid var(--dx-g-gray-95);
29
27
  margin: auto;
30
28
  margin-right: 0;
31
29
  margin-left: 0;
@@ -47,7 +45,7 @@ dx-button {
47
45
 
48
46
  dx-button::before {
49
47
  content: "";
50
- border-bottom: var(--dx-c-stoke-width) solid var(--dx-c-hr-color);
48
+ border-bottom: 2px solid var(--dx-g-gray-95);
51
49
  flex: 1 1;
52
50
  margin: auto;
53
51
  margin-right: var(--dx-g-spacing-md);
package/src/modules/dx/searchResults/searchResults.css CHANGED
@@ -1,4 +1,3 @@
1
- @import "dxHelpers/text";
2
1
  @import "dxHelpers/reset";
3
2
  @import "dxHelpers/typeBadge";
4
3
  @import "./coveo.css";
@@ -295,14 +294,15 @@ a.CoveoResultLink,
295
294
 
296
295
  .dx-search-header {
297
296
  padding: var(--dx-g-spacing-xl);
298
- background: url("https://a.sfdcstatic.com/developer-website/images/binary-cloud-trees.svg")
299
- no-repeat 100% 0,
297
+ background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='1440px' height='171px' viewBox='0 0 1440 171' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3EGroup 9%3C/title%3E%3Cdefs%3E%3Crect id='path-1' x='0' y='0' width='1439.0069' height='171'%3E%3C/rect%3E%3C/defs%3E%3Cg id='Search-results-page' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Group-9'%3E%3Cmask id='mask-2' fill='white'%3E%3Cuse xlink:href='%23path-1'%3E%3C/use%3E%3C/mask%3E%3Cg id='Mask' fill-rule='nonzero'%3E%3C/g%3E%3Cg mask='url(%23mask-2)'%3E%3Cg transform='translate(259.000000, -95.000000)'%3E%3Cg id='Background' transform='translate(239.000000, 75.000000)' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M342.092966,166.018873 L340.583448,169.887811 C340.473544,170.161615 340.245948,170.377876 339.957793,170.482307 L335.886069,171.916645 C335.473897,172.065727 335.20148,172.441229 335.20148,172.860288 C335.20148,173.279347 335.473897,173.65485 335.886069,173.803932 L339.957793,175.23827 C340.248122,175.339491 340.476922,175.556896 340.583448,175.832765 L342.092966,179.701704 C342.249862,180.093348 342.645045,180.352198 343.086069,180.352198 C343.527092,180.352198 343.922276,180.093348 344.079172,179.701704 L345.578759,175.832765 C345.686247,175.554165 345.919486,175.336005 346.214345,175.23827 L350.286069,173.803932 C350.69824,173.65485 350.970658,173.279347 350.970658,172.860288 C350.970658,172.441229 350.69824,172.065727 350.286069,171.916645 L346.214345,170.482307 C345.921708,170.381203 345.689757,170.164248 345.578759,169.887811 L344.079172,166.018873 C343.922276,165.627229 343.527092,165.368379 343.086069,165.368379 C342.645045,165.368379 342.249862,165.627229 342.092966,166.018873 L342.092966,166.018873 Z' id='Path' stroke='%2392DAFF' stroke-width='2'%3E%3C/path%3E%3Cpath d='M724.437793,66.8655308 L722.928276,70.7344692 C722.818372,71.0082734 722.590776,71.2245342 722.302621,71.3289646 L718.230897,72.7633028 C717.818725,72.9123849 717.546308,73.2878873 717.546308,73.7069463 C717.546308,74.1260053 717.818725,74.5015076 718.230897,74.6505898 L722.302621,76.0849279 C722.592949,76.1861487 722.82175,76.4035542 722.928276,76.6794233 L724.437793,80.5483617 C724.594689,80.9400057 724.989873,81.1988555 725.430897,81.1988555 C725.87192,81.1988555 726.267104,80.9400057 726.424,80.5483617 L727.923586,76.6794233 C728.031075,76.400823 728.264313,76.1826632 728.559172,76.0849279 L732.630897,74.6505898 C733.043068,74.5015076 733.315485,74.1260053 733.315485,73.7069463 C733.315485,73.2878873 733.043068,72.9123849 732.630897,72.7633028 L728.559172,71.3289646 C728.266535,71.2278606 728.034584,71.0109055 727.923586,70.7344692 L726.424,66.8655308 C726.267104,66.4738869 725.87192,66.2150371 725.430897,66.2150371 C724.989873,66.2150371 724.594689,66.4738869 724.437793,66.8655308 L724.437793,66.8655308 Z' id='Path' stroke='%2392DAFF' stroke-width='2'%3E%3C/path%3E%3Cpath d='M6.89148514,43.6504937 L5.3819679,47.5194321 C5.27556467,47.797495 5.04723805,48.0178939 4.75631272,48.123364 L0.684588586,49.5482657 C0.272417118,49.6973478 1.15463195e-14,50.0728502 1.15463195e-14,50.4919092 C1.15463195e-14,50.9109682 0.272417118,51.2864706 0.684588586,51.4355527 L4.75631272,52.8698909 C5.04446799,52.9743213 5.27206385,53.1905821 5.3819679,53.4643863 L6.89148514,57.3333247 C7.04838123,57.7249686 7.44356511,57.9838184 7.88458859,57.9838184 C8.32561206,57.9838184 8.72079595,57.7249686 8.87769203,57.3333247 L10.3772782,53.4643863 C10.4882765,53.18795 10.7202273,52.9709948 11.0128644,52.8698909 L15.0845886,51.4355527 C15.4967601,51.2864706 15.7691772,50.9109682 15.7691772,50.4919092 C15.7691772,50.0728502 15.4967601,49.6973478 15.0845886,49.5482657 L11.0128644,48.123364 C10.7174158,48.0212988 10.4846931,47.8001664 10.3772782,47.5194321 L8.87769203,43.6504937 C8.72079595,43.2588498 8.32561206,43 7.88458859,43 C7.44356511,43 7.04838123,43.2588498 6.89148514,43.6504937 L6.89148514,43.6504937 Z' id='Path' stroke='%2392DAFF' stroke-width='2'%3E%3C/path%3E%3Cpath d='M789.724414,148.796855 C756.861804,113.783423 758.338501,60.5191727 793.095608,27.1983465 C827.852714,-6.12247966 883.893413,-7.99881322 921.032552,22.91481' id='Path' stroke='%2392DAFF' stroke-width='2'%3E%3C/path%3E%3Cpath d='M952.504,81.5528178 C952.762207,84.2327654 952.891342,86.9441678 952.891342,89.6870249 C952.914753,116.858921 939.822043,142.540147 917.368,159.365662' id='Path' stroke='%2392DAFF' stroke-width='2'%3E%3C/path%3E%3Cpath d='M818.97131,127.281782 C818.976941,115.234656 827.992473,104.891619 840.44814,102.64257 C852.903806,100.39352 865.283709,106.873303 869.939584,118.078728 C874.595459,129.284153 870.213077,142.052234 859.499862,148.494889' id='Path' stroke='%2392DAFF' stroke-width='2'%3E%3C/path%3E%3Cpath d='M863.939034,109.569594 C874.334568,119.452191 874.334568,135.469959 863.939034,145.352556 C855.618346,153.248943 842.138895,153.248943 833.818207,145.352556 C827.16712,139.026443 827.16712,128.77644 833.818207,122.450328 C836.373743,120.020316 839.840899,118.655002 843.456276,118.655002 C847.071652,118.655002 850.538809,120.020316 853.094345,122.450328 C857.343071,126.50114 857.343071,133.054299 853.094345,137.105111 C851.459002,138.659811 849.240494,139.5333 846.927172,139.5333 C844.613851,139.5333 842.395343,138.659811 840.76,137.105111' id='Path' stroke='%2392DAFF' stroke-width='2'%3E%3C/path%3E%3Cpath d='M888.220414,138.662123 C898.060973,134.091507 909.944315,137.692285 915.183516,146.832229 C920.422716,155.972172 917.160614,167.411406 907.78186,172.787656 C898.403107,178.163907 886.232229,175.571431 880.166345,166.905374' id='Path' stroke='%2392DAFF' stroke-width='2'%3E%3C/path%3E%3Cpath d='M872.042759,126.998689 C875.88449,125.912654 880.040267,126.611906 883.255912,128.885416 C886.471556,131.158927 888.370371,134.740366 888.37931,138.548886' id='Path' stroke='%2392DAFF' stroke-width='2'%3E%3C/path%3E%3Cpath d='M911.409379,170.03827 C907.613009,173.65016 902.461124,175.679686 897.088828,175.679686 C891.716531,175.679686 886.564646,173.65016 882.768276,170.03827 C879.729383,167.15177 878.022059,163.236209 878.022059,159.153342 C878.022059,155.070475 879.729383,151.154914 882.768276,148.268414 C887.834515,143.466849 896.034726,143.466849 901.100966,148.268414 C905.142689,152.120628 905.142689,158.353815 901.100966,162.206029 C897.856757,165.279846 892.606692,165.279846 889.362483,162.206029' id='Path' stroke='%2392DAFF' stroke-width='2'%3E%3C/path%3E%3Cpath d='M879.818759,166.575098 C875.060163,175.973555 865.339039,182.204607 854.385669,182.877217 C843.432298,183.549826 832.947982,178.559523 826.955862,169.821232' id='Path' stroke='%2392DAFF' stroke-width='2'%3E%3C/path%3E%3Cpath d='M826.54869,169.840105 C822.311164,176.78252 814.374948,180.923101 805.935815,180.594509 C797.496683,180.265917 789.943603,175.522233 786.318069,168.273657' id='Path' stroke='%2392DAFF' stroke-width='2'%3E%3C/path%3E%3Cpath d='M822.923862,174.190301 C818.624972,178.277584 812.792852,180.574005 806.711448,180.574005 C800.630045,180.574005 794.797925,178.277584 790.499034,174.190301 C787.05685,170.922961 785.122749,166.489448 785.122749,161.866317 C785.122749,157.243187 787.05685,152.809674 790.499034,149.542333 C793.249927,146.927927 796.981265,145.459125 800.872,145.459125 C804.762735,145.459125 808.494073,146.927927 811.244966,149.542333 C813.447572,151.634242 814.685072,154.472079 814.685072,157.431193 C814.685072,160.390306 813.447572,163.228144 811.244966,165.320052 C807.577047,168.800892 801.635091,168.800892 797.967172,165.320052' id='Path' stroke='%2392DAFF' stroke-width='2'%3E%3C/path%3E%3Cpath d='M781.759724,138.24692 C784.729085,131.776427 790.503743,126.846161 797.591097,124.730469 C804.67845,122.614777 812.382922,123.521301 818.713103,127.215727' id='Path' stroke='%2392DAFF' stroke-width='2'%3E%3C/path%3E%3Cpath d='M731.190897,159.384535 L748.232552,159.384535 C750.965601,159.384535 753.586566,158.352263 755.518192,156.515068 C757.449818,154.677874 758.53367,152.186448 758.531034,149.589515 L758.531034,149.589515 C758.531034,144.185087 753.920247,139.803932 748.232552,139.803932 L731.210759,139.803932 C725.523064,139.803932 720.912276,135.422777 720.912276,130.018349 L720.912276,129.678637 C720.912276,124.274209 725.523064,119.893054 731.210759,119.893054 L770.934897,119.893054' id='Path' stroke='%2392DAFF' stroke-width='2'%3E%3C/path%3E%3Cline x1='666.857655' y1='159.384535' x2='709.62069' y2='159.384535' id='Path' stroke='%2392DAFF' stroke-width='2'%3E%3C/line%3E%3Cpath d='M699.352,198.998689 L718.399724,198.998689 C724.154845,198.998689 728.821829,194.568363 728.82731,189.099869 L728.82731,189.099869 C728.82731,183.62769 724.158721,179.191612 718.399724,179.191612 L710.68331,179.191612' id='Path' stroke='%2392DAFF' stroke-width='2'%3E%3C/path%3E%3Cpath d='M730.108414,218.815203 L780.051586,218.815203 C782.832045,218.815203 785.498478,217.765035 787.463628,215.895987 C789.428778,214.026939 790.531463,211.492309 790.528828,208.850328 L790.528828,208.850328 C790.531463,206.208346 789.428778,203.673717 787.463628,201.804668 C785.498478,199.93562 782.832045,198.885451 780.051586,198.885452 L763.327724,198.885452 C757.969115,198.885452 753.625103,194.757787 753.625103,189.666055 L753.625103,189.666055 C753.625103,184.574323 757.969115,180.446658 763.327724,180.446658 L806.825655,180.446658' id='Path' stroke='%2392DAFF' stroke-width='2'%3E%3C/path%3E%3Cpath d='M666.738483,159.384535 C660.983362,159.384535 656.316378,163.814862 656.310897,169.283355 L656.310897,169.283355 C656.310897,174.755534 660.979486,179.191612 666.738483,179.191612 L683.184276,179.191612' id='Path' stroke='%2392DAFF' stroke-width='2'%3E%3C/path%3E%3Cline x1='694.793655' y1='176.719266' x2='688.874759' y2='182.154653' id='Path' stroke='%2392DAFF' stroke-width='2'%3E%3C/line%3E%3Cline x1='703.096' y1='176.719266' x2='697.177103' y2='182.154653' id='Path' stroke='%2392DAFF' stroke-width='2'%3E%3C/line%3E%3Cline x1='719.909241' y1='163.725295' x2='719.909241' y2='155.525033' id='Path' stroke='%2392DAFF' stroke-width='2'%3E%3C/line%3E%3Cline x1='724.21931' y1='159.629882' x2='715.57931' y2='159.629882' id='Path' stroke='%2392DAFF' stroke-width='2'%3E%3C/line%3E%3Cpath d='M965.702345,23.3394495 L981.731034,23.3394495 C987.40776,23.3394495 992.009655,27.7121547 992.009655,33.1061599 L992.009655,33.1061599 C992.009655,38.5001651 987.40776,42.8728702 981.731034,42.8728702 L966.049931,42.8728702 C960.373206,42.8728702 955.77131,47.2455754 955.77131,52.6395806 L955.77131,52.6395806 C955.77131,58.0335858 960.373206,62.406291 966.049931,62.406291 L1014.16579,62.406291 C1019.83864,62.411499 1024.43448,66.7826791 1024.43448,72.1730013 L1024.43448,72.1730013 C1024.43448,77.5670065 1019.83259,81.9397117 1014.15586,81.9397117 L922.959172,81.9397117 C917.282447,81.9397117 912.680552,77.5670065 912.680552,72.1730013 L912.680552,72.1730013 C912.680552,66.7789961 917.282447,62.406291 922.959172,62.406291' id='Path' stroke='%2392DAFF' stroke-width='2'%3E%3C/path%3E%3Cpath d='M932.741241,62.406291 C938.410209,62.395882 943.000011,58.0262241 943,52.6395806 L943,52.6395806 C943,47.2455754 938.398105,42.8728702 932.721379,42.8728702 L898.111724,42.8728702 C892.437268,42.8676683 887.838578,38.4980089 887.833103,33.1061599 L887.833103,33.1061599 C887.833103,27.7121547 892.434999,23.3394495 898.111724,23.3394495 L945.333793,23.3394495' id='Path' stroke='%2392DAFF' stroke-width='2'%3E%3C/path%3E%3C/g%3E%3Cg id='Art'%3E%3Ccircle id='Oval' stroke='%2392DAFF' stroke-width='2' fill-rule='nonzero' cx='469.965662' cy='68.2773263' r='68.2773263'%3E%3C/circle%3E%3Ccircle id='Oval' stroke='%2392DAFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' cx='19.7397117' cy='93.9892529' r='8.10327654'%3E%3C/circle%3E%3Cg id='Group' opacity='0.25' transform='translate(0.000000, 172.595020)'%3E%3Cpath d='M46.1491481,8.36173001 L39.7790301,8.36173001 C35.5807974,8.36173001 32.1774574,11.7650701 32.1774574,15.9633028 C32.1774574,20.1615355 35.5807974,23.5648755 39.7790301,23.5648755 L44.3931848,23.5648755' id='Path' stroke='%2392DAFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3Cpath d='M48.7108781,23.5648755 C52.9091108,23.5648755 56.3124509,26.9682155 56.3124509,31.1664482 L56.3124509,31.1664482 C56.3124509,35.3646809 52.9091108,38.768021 48.7108781,38.768021 L7.60157274,38.768021 C3.40334004,38.768021 0,42.171361 0,46.3695937 L0,46.3695937 C0,50.5678264 3.40334004,53.9711664 7.60157274,53.9711664 L30.3150721,53.9711664 C32.3311345,53.9711664 34.2646243,54.7720441 35.6901957,56.1976156 C37.1157671,57.623187 37.9166448,59.5566767 37.9166448,61.5727392 L37.9166448,61.5727392 C37.9166448,65.7709719 34.5133048,69.1743119 30.3150721,69.1743119 L27.1072084,69.1743119 C23.0411993,69.1264808 19.6234638,72.2163521 19.2623853,76.2665793 C19.1211779,78.3693376 19.859273,80.4363473 21.3004353,81.9740675 C22.7415975,83.5117876 24.7564692,84.3821934 26.8639581,84.3780052 L67.0686763,84.3780052 C71.1346854,84.4252885 74.5524209,81.3354172 74.9134993,77.28519 C75.0547068,75.1824318 74.3166117,73.115422 72.8754494,71.5777019 C71.4342871,70.0399817 69.4194155,69.169576 67.3119266,69.1743119 L59.5051114,69.1743119 C55.3068789,68.9182195 52.1111428,65.3072758 52.367235,61.1090433 C52.6233271,56.9108107 56.2342707,53.7150745 60.4325033,53.9711664 L107.463434,53.9711664 C111.661667,53.9711664 115.065007,50.5678264 115.065007,46.3695937 L115.065007,46.3695937 C115.065007,42.171361 111.661667,38.768021 107.463434,38.768021 L78.2429882,38.768021 C74.0447555,38.768021 70.6414155,35.3646809 70.6414155,31.1664482 L70.6414155,31.1664482 C70.6414155,26.9682155 74.0447555,23.5648755 78.2429882,23.5648755 L80.0825688,23.5648755 C84.1514851,23.6167109 87.5737011,20.525784 87.9349934,16.4726081 C88.0762009,14.3698499 87.3381058,12.3028401 85.8969435,10.7651199 C84.4557812,9.22739981 82.4409096,8.35699406 80.3334207,8.36171079 L69.6228047,8.36171079' id='Path' stroke='%2392DAFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3Ccircle id='Oval' fill='%2392DAFF' fill-rule='nonzero' cx='6.33971166' cy='76.6390564' r='1.90039318'%3E%3C/circle%3E%3Cline x1='25.2676278' y1='34.0246396' x2='25.2676278' y2='27.9585845' id='Path' stroke='%2392DAFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3C/line%3E%3Cline x1='28.3006553' y1='30.9916121' x2='22.2346003' y2='30.9916121' id='Path' stroke='%2392DAFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3C/line%3E%3Ccircle id='Oval' stroke='%2392DAFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' cx='58.4104849' cy='8.35412844' r='7.60157274'%3E%3C/circle%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
300
298
  linear-gradient(
301
- 77deg,
302
- var(--dx-g-indigo-vibrant-30) 40.1%,
303
- var(--dx-g-indigo-vibrant-40) 99.07%
299
+ 45deg,
300
+ var(--dx-g-indigo-vibrant-20) 0%,
301
+ var(--dx-g-indigo-vibrant-30) 100%
304
302
  );
305
- background-size: auto;
303
+ background-repeat: no-repeat;
304
+ background-position: right;
305
+ background-size: auto 100%;
306
306
  color: white;
307
307
  }
308
308
 
@@ -334,18 +334,6 @@ a.CoveoResultLink,
334
334
  margin-top: var(--dx-g-spacing-md);
335
335
  }
336
336
 
337
- @media (min-width: 928px) and (max-width: 1024px) {
338
- .dx-search-header {
339
- background: url("https://a.sfdcstatic.com/developer-website/images/binary-cloud-trees.svg")
340
- no-repeat 200% 0,
341
- linear-gradient(
342
- 77deg,
343
- var(--dx-g-indigo-vibrant-30) 40.1%,
344
- var(--dx-g-indigo-vibrant-40) 99.07%
345
- );
346
- }
347
- }
348
-
349
337
  @media (min-width: 768px) {
350
338
  .dx-search-header {
351
339
  padding: var(--dx-g-spacing-4xl);
@@ -362,30 +350,6 @@ a.CoveoResultLink,
362
350
  }
363
351
  }
364
352
 
365
- @media (min-width: 768px) and (max-width: 928px) {
366
- .dx-search-header {
367
- background: url("https://a.sfdcstatic.com/developer-website/images/binary-trees.svg")
368
- no-repeat 90% 50%,
369
- linear-gradient(
370
- 77deg,
371
- var(--dx-g-indigo-vibrant-30) 40.1%,
372
- var(--dx-g-indigo-vibrant-40) 99.07%
373
- );
374
- }
375
- }
376
-
377
- @media (max-width: 768px) {
378
- .dx-search-header {
379
- background: url("https://a.sfdcstatic.com/developer-website/images/binary.svg")
380
- no-repeat 90% 50%,
381
- linear-gradient(
382
- 77deg,
383
- var(--dx-g-indigo-vibrant-30) 40.1%,
384
- var(--dx-g-indigo-vibrant-40) 99.07%
385
- );
386
- }
387
- }
388
-
389
353
  .dx-facet-column-header {
390
354
  display: flex;
391
355
  align-items: center;
@@ -422,48 +386,8 @@ a.CoveoResultLink,
422
386
  width: fit-content;
423
387
  }
424
388
 
425
- .dx-badge {
426
- display: block;
427
- margin-bottom: var(--dx-g-spacing-smd);
428
- }
429
-
430
- .no-results {
389
+ .dx-result-info {
431
390
  display: flex;
432
- justify-content: center;
433
- gap: 90px;
434
- margin: 50px 34px 90px;
435
- }
436
-
437
- .tip {
438
- font-size: var(--dx-g-text-sm);
439
- }
440
-
441
- .link {
442
- color: var(--dx-g-blue-vibrant-50);
443
- text-decoration: underline;
444
- }
445
-
446
- .link:hover {
447
- color: var(--dx-g-blue-vibrant-20);
448
- }
449
-
450
- .no-results-info > p:first-of-type {
451
- margin-bottom: var(--dx-g-spacing-md);
452
- }
453
-
454
- .no-results-info > ul {
455
- list-style-type: disc;
456
- list-style-position: inside;
457
- font-size: var(--dx-g-text-xs);
458
- }
459
-
460
- .no-results-info > dx-hr {
461
- --dx-c-hr-color: var(--dx-g-gray-80);
462
- --dx-c-stroke-width: 1px;
463
- }
464
-
465
- @media screen and (max-width: 768px) {
466
- .no-results > img {
467
- display: none;
468
- }
391
+ gap: 12px;
392
+ margin-bottom: var(--dx-g-spacing-smd);
469
393
  }
package/src/modules/dx/searchResults/searchResults.html CHANGED
@@ -11,129 +11,93 @@
11
11
  <div class="dx-search-header-container">
12
12
  <p class="dx-search-header-title">
13
13
  <span class="dx-search-header-title-results">{title}</span>
14
- &nbsp;
15
- <strong lwc:if={hasNoResults}>0</strong>
16
14
  &nbsp;results for
17
15
  </p>
18
16
  <p class="dx-search-header-query">&ldquo;{query}&rdquo;</p>
19
17
  </div>
20
18
  </div>
21
19
  <div class="coveo-main-section">
22
- <div class="no-results" lwc:if={hasNoResults}>
23
- <img
24
- src="https://a.sfdcstatic.com/developer-website/images/binary-cloud-circle-small.svg"
25
- alt="purple cloud with floating binary numbers above"
26
- />
27
- <div class="no-results-info">
28
- <p class="dx-text-display-8">
29
- Sorry, no results were found for your search
30
- &ldquo;{query}&rdquo;
31
- </p>
32
- <p class="dx-text-display-8 tip">Search Tips:</p>
33
- <ul>
34
- <li>Please consider misspellings</li>
35
- <li>Try different search keywords</li>
36
- </ul>
37
- <dx-hr no-padding="true"></dx-hr>
38
- <p class="dx-text-display-8 tip">
39
- Still not finding what you're looking for? Consider
40
- asking in the&nbsp;
41
- <a
42
- class="link"
43
- href="https://trailhead.salesforce.com/trailblazer-community/feed"
44
- >
45
- Trailblazer Community
46
- </a>
47
- !
48
- </p>
20
+ <div class="coveo-facet-column">
21
+ <div class="dx-facet-column-header">
22
+ <span class="dx-facet-column-header-title">Filters</span>
23
+ <template if:true={hasFilters}>
24
+ <dx-button onclick={clearFilters} variant="inline">
25
+ Clear
26
+ </dx-button>
27
+ </template>
28
+ </div>
29
+ <div
30
+ class="CoveoDynamicFacetManager"
31
+ data-enable-reorder="false"
32
+ >
33
+ <div
34
+ class="CoveoDynamicFacet"
35
+ data-title="Content Type"
36
+ data-field="@commonsource"
37
+ data-tab="All"
38
+ data-enable-facet-search="false"
39
+ ></div>
40
+ <div
41
+ class="CoveoDynamicFacet"
42
+ data-title="Language"
43
+ data-field="@language"
44
+ data-tab="All"
45
+ data-enable-facet-search="false"
46
+ ></div>
47
+ </div>
48
+ <div class="dx-facet-column-footer">
49
+ <dx-button onclick={dismissFiltersOverlay}>
50
+ View {title} results
51
+ </dx-button>
49
52
  </div>
50
53
  </div>
51
- <template lwc:if={hasResults}>
52
- <div class="coveo-facet-column">
53
- <div class="dx-facet-column-header">
54
- <span class="dx-facet-column-header-title">
55
- Filters
56
- </span>
57
- <template if:true={hasFilters}>
58
- <dx-button onclick={clearFilters} variant="inline">
59
- Clear
60
- </dx-button>
61
- </template>
54
+ <div class="coveo-results-column">
55
+ <div class="CoveoShareQuery"></div>
56
+ <div class="CoveoExportToExcel"></div>
57
+ <div class="CoveoPreferencesPanel">
58
+ <div class="CoveoResultsPreferences"></div>
59
+ <div class="CoveoResultsFiltersPreferences"></div>
60
+ </div>
61
+ <div class="CoveoDidYouMean"></div>
62
+ <div class="coveo-results-header">
63
+ <div class="coveo-summary-section"></div>
64
+ <div class="coveo-sort-section" role="radiogroup">
65
+ <span
66
+ class="CoveoSort"
67
+ data-sort-criteria="relevancy"
68
+ data-caption="Sorted by Relevance"
69
+ ></span>
62
70
  </div>
63
- <div
64
- class="CoveoDynamicFacetManager"
65
- data-enable-reorder="false"
66
- >
67
- <div
68
- class="CoveoDynamicFacet"
69
- data-title="Content Type"
70
- data-field="@commonsource"
71
- data-tab="All"
72
- data-enable-facet-search="false"
73
- ></div>
71
+ <div>
74
72
  <div
75
- class="CoveoDynamicFacet"
76
- data-title="Language"
77
- data-field="@language"
78
- data-tab="All"
79
- data-enable-facet-search="false"
73
+ class="CoveoSearchbox"
74
+ data-enable-omnibox="false"
75
+ data-add-search-button="false"
76
+ aria-hidden="true"
80
77
  ></div>
81
78
  </div>
82
- <div class="dx-facet-column-footer">
83
- <dx-button onclick={dismissFiltersOverlay}>
84
- View {title} results
85
- </dx-button>
86
- </div>
87
79
  </div>
88
- <div class="coveo-results-column">
89
- <div class="CoveoShareQuery"></div>
90
- <div class="CoveoExportToExcel"></div>
91
- <div class="CoveoPreferencesPanel">
92
- <div class="CoveoResultsPreferences"></div>
93
- <div class="CoveoResultsFiltersPreferences"></div>
94
- </div>
95
- <div class="CoveoDidYouMean"></div>
96
- <div class="coveo-results-header">
97
- <div class="coveo-summary-section"></div>
98
- <div class="coveo-sort-section" role="radiogroup">
99
- <span
100
- class="CoveoSort"
101
- data-sort-criteria="relevancy"
102
- data-caption="Sorted by Relevance"
103
- ></span>
104
- </div>
105
- <div>
106
- <div
107
- class="CoveoSearchbox"
108
- data-enable-omnibox="false"
109
- data-add-search-button="false"
110
- aria-hidden="true"
111
- ></div>
112
- </div>
113
- </div>
114
- <div class="CoveoBreadcrumb"></div>
115
- <div class="CoveoHiddenQuery"></div>
116
- <div class="CoveoErrorReport"></div>
117
- <div
118
- class="CoveoResultList"
119
- data-layout="list"
120
- data-wait-animation="fade"
121
- data-auto-select-fields-to-include="true"
122
- lwc:dom="manual"
123
- ></div>
124
- <div class="coveo-results-footer" aria-hidden="true">
125
- <div class="CoveoPager"></div>
126
- </div>
127
- <div class="pagination-container">
128
- <dx-pagination
129
- current-page={currentPage}
130
- total-pages={totalPages}
131
- onpagechange={goToPage}
132
- pages-to-show="5"
133
- ></dx-pagination>
134
- </div>
80
+ <div class="CoveoBreadcrumb"></div>
81
+ <div class="CoveoHiddenQuery"></div>
82
+ <div class="CoveoErrorReport"></div>
83
+ <div
84
+ class="CoveoResultList"
85
+ data-layout="list"
86
+ data-wait-animation="fade"
87
+ lwc:dom="manual"
88
+ ></div>
89
+ <div class="coveo-results-footer" aria-hidden="true">
90
+ <div class="CoveoPager"></div>
135
91
  </div>
136
- </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>
137
101
  </div>
138
102
  </div>
139
103
  </template>
package/src/modules/dx/searchResults/searchResults.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import { LightningElement, api, track } from "lwc";
2
2
  import type * as CoveoSDK from "coveo-search-ui";
3
+ import debounce from "debounce";
3
4
  import { track as trackGTM } from "dxUtils/analytics";
4
5
  import {
5
6
  CONTENT_TYPE_LABELS,
@@ -44,7 +45,11 @@ const resultsTemplatesInnerHtml = `
44
45
  data-field-publicurl=""
45
46
  >
46
47
  <div class="dx-result">
47
- <span class="CoveoFieldValue" data-field="@content_type" data-helper="badge" data-html-value="true"></span>
48
+ <div class="dx-result-info">
49
+ <span class="CoveoFieldValue" data-field="@content_type" data-helper="badge" data-html-value="true"></span>
50
+ <span class="CoveoFieldValue" data-field="@uri" data-helper="uriBreadcrumbs" data-html-value="true"></span>
51
+ <span class="CoveoFieldValue" data-field="@breadcrumbs" data-helper="breadcrumbs" data-html-value="true"></span>
52
+ </div>
48
53
  <p class="dx-result-title">
49
54
  <a
50
55
  class="CoveoResultLink"
@@ -60,7 +65,11 @@ const resultsTemplatesInnerHtml = `
60
65
  type="text/html"
61
66
  >
62
67
  <div class="dx-result">
63
- <span class="CoveoFieldValue" data-field="@content_type" data-helper="badge" data-html-value="true"></span>
68
+ <div class="dx-result-info">
69
+ <span class="CoveoFieldValue" data-field="@content_type" data-helper="badge" data-html-value="true"></span>
70
+ <span class="CoveoFieldValue" data-field="@uri" data-helper="breadcrumbs" data-html-value="true"></span>
71
+ <span class="CoveoFieldValue" data-field="@breadcrumbs" data-helper="breadcrumbs" data-html-value="true"></span>
72
+ </div>
64
73
  <p class="dx-result-title">
65
74
  <a class="CoveoResultLink"></a>
66
75
  </p>
@@ -88,6 +97,76 @@ const buildTemplateHelperBadge = (value: keyof typeof CONTENT_TYPE_LABELS) => {
88
97
  `;
89
98
  };
90
99
 
100
+ const processParts = (parts: string[]) => {
101
+ return parts.map((part) => {
102
+ // Remove special characters & .htm/.xml extension
103
+ part = part
104
+ .replace(/_/g, " ")
105
+ .replace(/-/g, " ")
106
+ .replace(/.htm/g, " ")
107
+ .replace(/.xml/g, " ");
108
+
109
+ // Capitalize first letter of each word
110
+ part = part.replace(/\w\S*/g, (w) => {
111
+ return w.replace(/^\w/, (c) => c.toUpperCase());
112
+ });
113
+
114
+ return `<span class="breadcrumb-item">${decodeURI(part)}</span>`;
115
+ });
116
+ };
117
+
118
+ const buildTemplateHelperUriBreadcrumbs = (value: string) => {
119
+ const url = new URL(value);
120
+
121
+ // Only generate breadcrumbs for external links using the URL
122
+ if (
123
+ url.hostname === "developer.salesforce.com" ||
124
+ url.hostname === "developer-website-s.herokuapp.com"
125
+ ) {
126
+ return "";
127
+ }
128
+
129
+ let parts = url.pathname.split("/").filter((part) => part !== "");
130
+
131
+ // Remove language prefix from trailhead URLs
132
+ if (url.hostname === "trailhead.salesforce.com") {
133
+ parts = parts.slice(1);
134
+ }
135
+
136
+ const breadcrumbs = processParts(parts);
137
+
138
+ breadcrumbs.unshift(`<span class="breadcrumb-item">${url.hostname}</span>`);
139
+
140
+ return `
141
+ <span class="breadcrumb">
142
+ ${breadcrumbs.join(" / ")}
143
+ </span>
144
+ `;
145
+ };
146
+
147
+ const buildTemplateHelperBreadcrumbs = (value: string) => {
148
+ let parts: string[] = [];
149
+
150
+ if (value.includes("developer.salesforce.com")) {
151
+ const url = new URL(value);
152
+ parts = url.pathname.split("/").filter((part) => part !== "");
153
+ } else {
154
+ parts = value.split("/").filter((part) => part !== "");
155
+ }
156
+
157
+ if (parts.length === 1) {
158
+ return "";
159
+ }
160
+
161
+ const breadcrumbs = processParts(parts);
162
+
163
+ return `
164
+ <span class="breadcrumb">
165
+ ${breadcrumbs.join(" / ")}
166
+ </span>
167
+ `;
168
+ };
169
+
91
170
  // @ts-ignore Dark Magic (TM) we are overriding the 'title' field with a custom getter. We should really stop doing this.
92
171
  export default class SearchResults extends LightningElement {
93
172
  @api coveoOrganizationId!: string;
@@ -118,16 +197,11 @@ export default class SearchResults extends LightningElement {
118
197
 
119
198
  private query: string = "";
120
199
  private hasFilters: boolean = false;
121
- private hasResults: boolean = true;
122
200
 
123
201
  private get hasQuery(): boolean {
124
202
  return this.query !== "";
125
203
  }
126
204
 
127
- private get hasNoResults(): boolean {
128
- return this.hasQuery && !this.hasResults;
129
- }
130
-
131
205
  private updateSearchQuery() {
132
206
  Coveo.state(this.root!, "q", this._query);
133
207
  }
@@ -139,9 +213,12 @@ export default class SearchResults extends LightningElement {
139
213
  BreadcrumbManager.clearBreadcrumbs();
140
214
  }
141
215
 
142
- private currentPage: number = 1;
216
+ private currentPage: number = 25;
143
217
  private totalPages: number = 1;
144
218
 
219
+ private originalBreadcrumbs: string[] = [];
220
+ private windowWidth = window.innerWidth;
221
+
145
222
  private goToPage(e: CustomEvent) {
146
223
  const page = e.detail;
147
224
  const Pager = Coveo.get(
@@ -179,6 +256,7 @@ export default class SearchResults extends LightningElement {
179
256
  if (Coveo.state(this.root!, "q") === "") {
180
257
  Coveo.state(this.root!, "sort", "date descending");
181
258
  }
259
+
182
260
  this.isInitialized = true;
183
261
  }
184
262
  );
@@ -190,28 +268,114 @@ export default class SearchResults extends LightningElement {
190
268
  this.currentPage = currentPage;
191
269
  this.totalPages = numberOfPages;
192
270
  this.totalResults = event.detail.results.totalCount;
193
-
194
- if (!this.totalResults) {
195
- this.hasResults = false;
196
- }
197
-
198
271
  this.query = event.detail.query.q ?? "";
199
272
  this.hasFilters = event.detail.query.facets.some((f: any) => {
200
273
  return f.currentValues.some((cv: any) => {
201
274
  return cv.state === "selected";
202
275
  });
203
276
  });
204
-
205
277
  this.trackSearchResults(event, this.query, this.totalResults);
206
278
  });
279
+
280
+ Coveo.$$(root).on(Coveo.QueryEvents.deferredQuerySuccess, () => {
281
+ this.processBreadcrumbs(root);
282
+
283
+ window.onresize = debounce(() => {
284
+ this.processBreadcrumbs(root);
285
+ }, 25);
286
+ });
287
+ }
288
+
289
+ // Checks if text is wrapping by comparing it with an element's text that doesn't wrap
290
+ private isTextWrapping = (
291
+ elementOne: HTMLElement,
292
+ elementTwo: HTMLElement
293
+ ) => elementOne.offsetHeight > elementTwo.offsetHeight;
294
+
295
+ private truncateBreadcrumbText = (breadcrumbItems: HTMLElement[]) => {
296
+ breadcrumbItems.forEach((breadcrumbItem: HTMLElement) => {
297
+ const breadcrumbItemText = breadcrumbItem.textContent!;
298
+ if (breadcrumbItemText.length > 30) {
299
+ breadcrumbItem.textContent = `${breadcrumbItemText.substring(
300
+ 0,
301
+ 30
302
+ )}...`;
303
+ }
304
+ });
305
+ };
306
+
307
+ private addBreadcrumbEllipsis = (
308
+ breadcrumbItems: HTMLElement[],
309
+ breadcrumb: HTMLElement
310
+ ) => {
311
+ for (let i = 1; i < breadcrumbItems.length; i++) {
312
+ if (this.isTextWrapping(breadcrumb, breadcrumbItems[0])) {
313
+ breadcrumbItems[i].textContent = "...";
314
+ } else {
315
+ break; // Exit the loop if the breadcrumb is no longer overflowing
316
+ }
317
+ }
318
+ };
319
+
320
+ private formatBreadcrumbs = (breadcrumbs: HTMLElement[]) => {
321
+ breadcrumbs?.forEach((breadcrumb: HTMLElement) => {
322
+ // Get all breadcrumb items that are separated by '/'
323
+ const breadcrumbItems: any =
324
+ breadcrumb.querySelectorAll(".breadcrumb-item");
325
+
326
+ // Check if the breadcrumb is overflowing by comparing it's height to the height of the first breadcrumb item
327
+ if (this.isTextWrapping(breadcrumb, breadcrumbItems[0])) {
328
+ // it is overflowing, so we need to truncate long titles to 30 characters
329
+ this.truncateBreadcrumbText(breadcrumbItems);
330
+
331
+ // Iteratively check if the breadcrumb is still overflowing and replace text with '...' starting from the second breadcrumb item
332
+ this.addBreadcrumbEllipsis(breadcrumbItems, breadcrumb);
333
+
334
+ // After processing all breadcrumb items, if it's still overflowing, hide the breadcrumb element
335
+ if (this.isTextWrapping(breadcrumb, breadcrumbItems[0])) {
336
+ breadcrumb.style.display = "none";
337
+ }
338
+ }
339
+ });
340
+ };
341
+
342
+ private restoreBreadcrumbs = (breadcrumbs: HTMLElement[]) => {
343
+ breadcrumbs.forEach((breadcrumb: HTMLElement, index: number) => {
344
+ // eslint-disable-next-line @lwc/lwc/no-inner-html
345
+ breadcrumb.innerHTML = this.originalBreadcrumbs[index];
346
+ });
347
+ };
348
+
349
+ private windowSizeIncreased = () => window.innerWidth > this.windowWidth;
350
+
351
+ private processBreadcrumbs(root: HTMLElement) {
352
+ // Get all breadcrumbs from search results
353
+ const breadcrumbs = root.querySelectorAll(
354
+ ".breadcrumb"
355
+ // eslint-disable-next-line no-undef
356
+ ) as NodeListOf<HTMLElement>;
357
+
358
+ if (this.originalBreadcrumbs.length === 0) {
359
+ this.originalBreadcrumbs = Array.from(breadcrumbs).map(
360
+ // eslint-disable-next-line @lwc/lwc/no-inner-html
361
+ (breadcrumb) => breadcrumb.innerHTML
362
+ );
363
+ }
364
+
365
+ if (this.windowSizeIncreased()) {
366
+ // reset the breadcrumbs to their original state
367
+ this.restoreBreadcrumbs(Array.from(breadcrumbs));
368
+ }
369
+
370
+ this.formatBreadcrumbs(Array.from(breadcrumbs));
207
371
  }
208
372
 
209
373
  private initializeCoveo() {
210
374
  this.root = this.template.querySelector(".CoveoSearchInterface")!;
211
375
 
212
376
  const resultsList = this.template.querySelector(".CoveoResultList");
213
-
214
377
  if (resultsList) {
378
+ // eslint-disable-next-line @lwc/lwc/no-inner-html
215
379
  resultsList.innerHTML = resultsTemplatesInnerHtml;
216
380
  }
217
381
 
@@ -227,6 +391,16 @@ export default class SearchResults extends LightningElement {
227
391
  buildTemplateHelperBadge
228
392
  );
229
393
 
394
+ Coveo.TemplateHelpers.registerTemplateHelper(
395
+ "uriBreadcrumbs",
396
+ buildTemplateHelperUriBreadcrumbs
397
+ );
398
+
399
+ Coveo.TemplateHelpers.registerTemplateHelper(
400
+ "breadcrumbs",
401
+ buildTemplateHelperBreadcrumbs
402
+ );
403
+
230
404
  Coveo.init(this.root);
231
405
  }
232
406
 
@@ -235,6 +409,7 @@ export default class SearchResults extends LightningElement {
235
409
  if (Object.prototype.hasOwnProperty.call(window, "Coveo")) {
236
410
  this.initializeCoveo();
237
411
  } else {
412
+ // eslint-disable-next-line @lwc/lwc/no-document-query
238
413
  const script = document.querySelector("script.coveo-script");
239
414
  script?.addEventListener("load", () => {
240
415
  this.initializeCoveo();