@salesforcedevs/dx-components 1.40.11 → 1.42.0-final-test

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 (43) hide show
  1. package/lwc.config.json +4 -2
  2. package/package.json +46 -47
  3. package/src/modules/dx/button/button.css +2 -2
  4. package/src/modules/dx/dropdown/dropdown.css +29 -1
  5. package/src/modules/dx/dropdown/dropdown.html +1 -1
  6. package/src/modules/dx/dropdown/dropdown.ts +16 -1
  7. package/src/modules/dx/dropdownOption/dropdownOption.css +30 -6
  8. package/src/modules/dx/filterMenu/filterMenu.css +19 -0
  9. package/src/modules/dx/filterMenu/filterMenu.html +17 -2
  10. package/src/modules/dx/filterMenu/filterMenu.ts +43 -0
  11. package/src/modules/dx/popover/popover.ts +119 -7
  12. package/src/modules/dx/searchHybrid/searchHybrid.css +56 -61
  13. package/src/modules/dx/searchHybrid/searchHybrid.html +133 -112
  14. package/src/modules/dx/searchHybrid/searchHybrid.mock.ts +244 -0
  15. package/src/modules/dx/searchHybrid/searchHybrid.ts +81 -26
  16. package/src/modules/dx/searchResults/searchResults.css +119 -6
  17. package/src/modules/dx/searchResults/searchResults.html +89 -91
  18. package/src/modules/dx/searchResults/searchResults.ts +200 -473
  19. package/src/modules/dx/sidebar/sidebar.css +1 -0
  20. package/src/modules/dx/sidebar/sidebar.html +2 -5
  21. package/src/modules/dx/sidebar/sidebar.ts +44 -29
  22. package/src/modules/dx/sidebarOld/sidebarOld.html +1 -0
  23. package/src/modules/dx/sidebarSearch/sidebarSearch.ts +163 -342
  24. package/src/modules/dx/sidebarSearchResult/sidebarSearchResult.css +61 -23
  25. package/src/modules/dx/sidebarSearchResult/sidebarSearchResult.ts +12 -4
  26. package/src/modules/dx/tree/tree.html +1 -0
  27. package/src/modules/dx/tree/tree.ts +5 -1
  28. package/src/modules/dx/tree/treeHandler.ts +92 -13
  29. package/src/modules/dx/treeItem/treeItem.css +41 -0
  30. package/src/modules/dx/treeItem/treeItem.html +17 -2
  31. package/src/modules/dx/treeItem/treeItem.ts +109 -11
  32. package/src/modules/dx/treeTile/treeTile.css +57 -0
  33. package/src/modules/dx/treeTile/treeTile.ts +12 -3
  34. package/src/modules/dx/typeBadge/typeBadge.ts +23 -2
  35. package/src/modules/dx/versionPicker/versionPicker.css +248 -0
  36. package/src/modules/dx/versionPicker/versionPicker.html +73 -0
  37. package/src/modules/dx/versionPicker/versionPicker.ts +157 -0
  38. package/src/modules/dxHelpers/commonSidebar/commonSidebar.css +3 -3
  39. package/src/modules/dxHelpers/commonTreeItem/commonTreeItem.css +4 -0
  40. package/src/modules/dxHelpers/typeBadge/typeBadge.css +22 -0
  41. package/src/modules/dxUtils/openSearch/openSearch.ts +343 -0
  42. package/src/modules/dxUtils/topicVersion/topicVersion.ts +758 -0
  43. package/LICENSE +0 -12
package/src/modules/dx/searchHybrid/searchHybrid.css CHANGED
@@ -1,3 +1,5 @@
1
+ @import "dxHelpers/text";
2
+
1
3
  :host {
2
4
  display: block;
3
5
  font-family: var(--dx-g-font-sans);
@@ -42,56 +44,68 @@
42
44
  margin-top: var(--dx-g-spacing-md);
43
45
  }
44
46
 
45
- /* Body + toolbar ------------------------------------------------------- */
47
+ /* Body --------------------------------------------------------------- */
46
48
  .dx-search-body {
47
49
  margin: 0 auto;
48
50
  max-width: 1200px;
49
51
  padding: var(--dx-g-spacing-xl);
50
52
  }
51
53
 
52
- .dx-search-toolbar {
54
+ .dx-search-layout {
53
55
  display: flex;
54
- flex-wrap: wrap;
55
- align-items: flex-end;
56
- justify-content: space-between;
56
+ align-items: flex-start;
57
+ gap: var(--dx-g-spacing-2xl);
58
+ }
59
+
60
+ .dx-search-filters {
61
+ flex: 0 0 280px;
62
+ display: flex;
63
+ flex-direction: column;
57
64
  gap: var(--dx-g-spacing-md);
58
- margin-bottom: var(--dx-g-spacing-lg);
59
65
  }
60
66
 
61
- .dx-facet-row {
67
+ .dx-filter-header {
62
68
  display: flex;
63
- flex-wrap: wrap;
64
- gap: var(--dx-g-spacing-sm);
69
+ justify-content: space-between;
70
+ align-items: baseline;
65
71
  }
66
72
 
67
- .dx-facet-chip {
68
- background-color: white;
69
- color: var(--dx-g-blue-vibrant-20);
70
- border: 1px solid var(--dx-g-blue-vibrant-50);
71
- border-radius: 500px;
72
- padding: 6px 14px;
73
+ .dx-filter-title {
74
+ margin: 0;
75
+ color: var(--dx-g-text-heading-color);
76
+ font-family: var(--dx-g-font-display);
77
+ font-size: var(--dx-g-text-lg);
78
+ }
79
+
80
+ .dx-filter-clear {
81
+ color: var(--dx-g-blue-vibrant-50);
82
+ font-family: var(--dx-g-font-display);
73
83
  font-size: var(--dx-g-text-sm);
74
- cursor: pointer;
75
84
  }
76
85
 
77
- .dx-facet-chip:hover {
78
- background-color: var(--dx-g-blue-vibrant-95);
86
+ .dx-filter-clear:disabled {
87
+ opacity: 0.4;
88
+ cursor: default;
79
89
  }
80
90
 
81
- .dx-facet-chip_active {
82
- background-color: var(--dx-g-blue-vibrant-50);
83
- color: white;
84
- font-weight: var(--dx-g-font-demi);
91
+ .dx-search-range {
92
+ margin: 0 0 var(--dx-g-spacing-lg);
85
93
  }
86
94
 
87
- .dx-facet-chip-count {
88
- margin-left: 6px;
89
- opacity: 0.75;
95
+ .dx-search-main {
96
+ flex: 1 1 0;
97
+ min-width: 0;
90
98
  }
91
99
 
92
- .dx-search-controls {
93
- display: flex;
94
- gap: var(--dx-g-spacing-md);
100
+ @media (max-width: 768px) {
101
+ .dx-search-layout {
102
+ flex-direction: column;
103
+ }
104
+
105
+ .dx-search-filters {
106
+ flex-basis: auto;
107
+ width: 100%;
108
+ }
95
109
  }
96
110
 
97
111
  /* Status states -------------------------------------------------------- */
@@ -113,49 +127,30 @@
113
127
  }
114
128
 
115
129
  .dx-result {
116
- background: white;
117
- border-radius: 16px;
118
- border: 1px solid rgb(24 24 24 / 4%);
119
- box-shadow: 0 0 2px 0 rgb(24 24 24 / 8%), 0 2px 4px 1px rgb(24 24 24 / 16%);
120
- padding: 20px;
121
- margin-bottom: var(--dx-g-spacing-lg);
122
- }
123
-
124
- .dx-result-info {
125
130
  display: flex;
126
- gap: 12px;
127
- margin-bottom: var(--dx-g-spacing-smd);
131
+ flex-direction: column;
132
+ align-items: flex-start;
133
+ gap: var(--dx-g-spacing-smd);
134
+ border-bottom: 1px solid var(--sds-g-gray-4);
135
+ padding-bottom: var(--dx-g-spacing-xl);
136
+ margin-bottom: var(--dx-g-spacing-xl);
128
137
  }
129
138
 
130
- .dx-badge {
131
- display: inline-flex;
132
- align-items: center;
133
- border-radius: 4px;
134
- padding: 2px 8px;
135
- font-size: var(--dx-g-text-xs);
136
- background-color: var(--dx-g-blue-vibrant-95);
137
- color: var(--dx-g-blue-vibrant-20);
138
- }
139
-
140
- .dx-result-title {
141
- color: var(--dx-g-blue-vibrant-20);
142
- display: block;
143
- font-family: var(--dx-g-font-display);
144
- font-size: var(--dx-g-text-lg);
145
- margin: 0 0 var(--dx-g-spacing-sm);
139
+ .dx-result-title:hover {
140
+ --dx-c-card-title-color: var(--dx-g-blue-vibrant-40);
146
141
  }
147
142
 
148
143
  .dx-result-date {
149
- color: #555;
150
- font-size: var(--dx-g-text-xs);
151
- margin: 0 0 var(--dx-g-spacing-xs);
144
+ margin: 0;
145
+ text-align: start;
152
146
  }
153
147
 
154
148
  .dx-result-excerpt {
155
- color: var(--dx-g-gray-10);
156
- font-size: 14px;
157
- line-height: 20px;
158
149
  margin: 0;
150
+ display: box;
151
+ -webkit-line-clamp: 3;
152
+ -webkit-box-orient: vertical;
153
+ overflow: hidden;
159
154
  }
160
155
 
161
156
  /* Pagination ----------------------------------------------------------- */
package/src/modules/dx/searchHybrid/searchHybrid.html CHANGED
@@ -12,133 +12,154 @@
12
12
  </div>
13
13
 
14
14
  <div class="dx-search-body">
15
- <!-- Toolbar: content-type facets + sort + locale selector -->
16
- <div class="dx-search-toolbar">
17
- <div
18
- if:true={hasFacets}
19
- class="dx-facet-row"
20
- role="group"
21
- aria-label="Filter by content type"
22
- >
23
- <template for:each={facetChips} for:item="chip">
15
+ <div class="dx-search-layout">
16
+ <!-- Sidebar: content-type filter + language (like content archive) -->
17
+ <aside class="dx-search-filters" aria-label="Search filters">
18
+ <div class="dx-filter-header">
19
+ <p class="dx-filter-title">Filters</p>
24
20
  <button
25
- key={chip.value}
26
21
  type="button"
27
- class={chip.cssClass}
28
- data-value={chip.value}
29
- aria-pressed={chip.active}
30
- onclick={handleFacetClick}
22
+ class="dx-filter-clear"
23
+ disabled={noActiveFilters}
24
+ onclick={handleClearFilters}
31
25
  >
32
- {chip.label}
33
- <span class="dx-facet-chip-count">
34
- {chip.count}
35
- </span>
26
+ Clear all
36
27
  </button>
37
- </template>
38
- </div>
39
-
40
- <div class="dx-search-controls">
41
- <div if:true={showLocaleSelector} class="dx-search-locale">
42
- <dx-select
43
- label="Language"
44
- options={localeSelectOptions}
45
- value={localeValue}
46
- onchange={handleLocaleChange}
47
- ></dx-select>
48
28
  </div>
49
- <div class="dx-search-sort">
50
- <dx-select
51
- label="Sort by"
52
- options={sortOptions}
53
- value={sortValue}
54
- onchange={handleSortChange}
55
- ></dx-select>
56
- </div>
57
- </div>
58
- </div>
29
+ <dx-filter-menu
30
+ if:true={hasFacets}
31
+ class="dx-filter-type"
32
+ name="contentType"
33
+ header="Content Type"
34
+ single-select
35
+ options={typeFilterOptions}
36
+ value={selectedTypeValue}
37
+ onchange={handleTypeFilterChange}
38
+ ></dx-filter-menu>
39
+ <dx-filter-menu
40
+ if:true={showLocaleSelector}
41
+ class="dx-filter-locale"
42
+ name="language"
43
+ header="Language"
44
+ single-select
45
+ options={localeFilterOptions}
46
+ value={localeValue}
47
+ onchange={handleLocaleChange}
48
+ ></dx-filter-menu>
49
+ </aside>
59
50
 
60
- <!-- Loading -->
61
- <template if:true={isLoading}>
62
- <div class="dx-search-status" aria-live="polite">
63
- <dx-spinner size="medium" variant="base"></dx-spinner>
64
- </div>
65
- </template>
51
+ <div class="dx-search-main">
52
+ <p
53
+ if:true={showRange}
54
+ class="dx-search-range dx-text-body-2"
55
+ aria-live="polite"
56
+ >
57
+ Showing {rangeStart} - {rangeEnd} of {total}
58
+ </p>
59
+ <!-- Loading -->
60
+ <template if:true={isLoading}>
61
+ <div class="dx-search-status" aria-live="polite">
62
+ <dx-spinner
63
+ size="medium"
64
+ variant="base"
65
+ ></dx-spinner>
66
+ </div>
67
+ </template>
66
68
 
67
- <!-- Idle prompt (no query yet) -->
68
- <template if:true={isIdle}>
69
- <div class="dx-search-status" aria-live="polite">
70
- <dx-empty-state
71
- header="Search the developer site"
72
- subtitle="Enter a search term to get started."
73
- variant="alt"
74
- ></dx-empty-state>
75
- </div>
76
- </template>
69
+ <!-- Idle prompt (no query yet) -->
70
+ <template if:true={isIdle}>
71
+ <div class="dx-search-status" aria-live="polite">
72
+ <dx-empty-state
73
+ header="Search the developer site"
74
+ subtitle="Enter a search term to get started."
75
+ variant="alt"
76
+ ></dx-empty-state>
77
+ </div>
78
+ </template>
77
79
 
78
- <!-- Empty (query ran, no results) -->
79
- <template if:true={isEmpty}>
80
- <div class="dx-search-status" aria-live="polite">
81
- <dx-empty-state
82
- header="No results found"
83
- subtitle="Try different keywords or check your spelling."
84
- variant="alt"
85
- ></dx-empty-state>
86
- </div>
87
- </template>
80
+ <!-- Empty (query ran, no results) -->
81
+ <template if:true={isEmpty}>
82
+ <div class="dx-search-status" aria-live="polite">
83
+ <dx-empty-state
84
+ header="No results found"
85
+ subtitle="Try different keywords or check your spelling."
86
+ variant="alt"
87
+ ></dx-empty-state>
88
+ </div>
89
+ </template>
88
90
 
89
- <!-- Error -->
90
- <template if:true={isError}>
91
- <div class="dx-search-status dx-search-error" role="alert">
92
- <p>{errorMessage}</p>
93
- </div>
94
- </template>
91
+ <!-- Error -->
92
+ <template if:true={isError}>
93
+ <div
94
+ class="dx-search-status dx-search-error"
95
+ role="alert"
96
+ >
97
+ <p>{errorMessage}</p>
98
+ </div>
99
+ </template>
95
100
 
96
- <!-- Results -->
97
- <template if:true={hasResults}>
98
- <ul class="dx-result-list">
99
- <template for:each={displayResults} for:item="result">
100
- <li key={result.key} class="dx-result">
101
- <div
102
- if:true={result.hasBadge}
103
- class="dx-result-info"
101
+ <!-- Results -->
102
+ <template if:true={hasResults}>
103
+ <ul class="dx-result-list">
104
+ <template
105
+ for:each={displayResults}
106
+ for:item="result"
104
107
  >
105
- <span class="dx-badge">
106
- {result.contentTypeLabel}
107
- </span>
108
- </div>
109
- <a href={result.href} class="dx-result-title">
110
- {result.title}
111
- </a>
112
- <p if:true={result.hasDate} class="dx-result-date">
113
- {result.displayDate}
114
- </p>
115
- <!-- Highlighted snippet (P4.5): innerHTML set in
108
+ <li key={result.key} class="dx-result">
109
+ <dx-type-badge
110
+ if:true={result.hasBadge}
111
+ class="dx-result-badge"
112
+ variant={result.contentType}
113
+ value={result.contentTypeLabel}
114
+ size="small"
115
+ ></dx-type-badge>
116
+ <dx-card-title
117
+ class="dx-result-title"
118
+ href={result.href}
119
+ header={result.title}
120
+ ></dx-card-title>
121
+ <p
122
+ if:true={result.hasDate}
123
+ class="dx-result-date dx-text-label-1-dark"
124
+ >
125
+ {result.displayDate}
126
+ </p>
127
+ <!-- Highlighted snippet (P4.5): innerHTML set in
116
128
  renderedCallback, keyed by data-snippet-key. -->
117
- <template lwc:if={result.hasSnippetHtml}>
118
- <p
119
- class="dx-result-excerpt"
120
- data-snippet-key={result.key}
121
- lwc:dom="manual"
122
- ></p>
129
+ <template lwc:if={result.hasSnippetHtml}>
130
+ <p
131
+ class="dx-result-excerpt dx-text-body-2"
132
+ data-snippet-key={result.key}
133
+ lwc:dom="manual"
134
+ ></p>
135
+ </template>
136
+ <template
137
+ lwc:elseif={result.hasDescription}
138
+ >
139
+ <p
140
+ class="dx-result-excerpt dx-text-body-2"
141
+ >
142
+ {result.description}
143
+ </p>
144
+ </template>
145
+ </li>
123
146
  </template>
124
- <template lwc:elseif={result.hasDescription}>
125
- <p class="dx-result-excerpt">
126
- {result.description}
127
- </p>
128
- </template>
129
- </li>
130
- </template>
131
- </ul>
147
+ </ul>
132
148
 
133
- <div if:true={showPagination} class="dx-pagination-container">
134
- <dx-pagination
135
- current-page={currentPage}
136
- total-pages={totalPages}
137
- pages-to-show="5"
138
- onpagechange={handlePageChange}
139
- ></dx-pagination>
149
+ <div
150
+ if:true={showPagination}
151
+ class="dx-pagination-container"
152
+ >
153
+ <dx-pagination
154
+ current-page={currentPage}
155
+ total-pages={totalPages}
156
+ pages-to-show="5"
157
+ onpagechange={handlePageChange}
158
+ ></dx-pagination>
159
+ </div>
160
+ </template>
140
161
  </div>
141
- </template>
162
+ </div>
142
163
  </div>
143
164
  </div>
144
165
  </template>