@salesforcedevs/docs-components 0.53.3 → 0.54.0-alpha02

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 (39) hide show
  1. package/lwc.config.json +6 -2
  2. package/package.json +16 -2
  3. package/src/modules/doc/amfReference/amfReference.css +5 -0
  4. package/src/modules/doc/amfReference/amfReference.html +39 -0
  5. package/src/modules/doc/amfReference/amfReference.ts +874 -0
  6. package/src/modules/doc/amfReference/route-meta.ts +22 -0
  7. package/src/modules/doc/amfReference/types.ts +88 -0
  8. package/src/modules/doc/amfReference/utils.ts +669 -0
  9. package/src/modules/doc/amfTopic/amfTopic.css +1 -0
  10. package/src/modules/doc/amfTopic/amfTopic.html +3 -0
  11. package/src/modules/doc/amfTopic/amfTopic.ts +94 -0
  12. package/src/modules/doc/amfTopic/types.ts +54 -0
  13. package/src/modules/doc/amfTopic/utils.ts +117 -0
  14. package/src/modules/doc/breadcrumbItem/breadcrumbItem.css +2 -2
  15. package/src/modules/doc/breadcrumbs/breadcrumbs.css +2 -2
  16. package/src/modules/doc/breadcrumbs/breadcrumbs.ts +1 -1
  17. package/src/modules/doc/content/content.css +4 -4
  18. package/src/modules/doc/content/content.ts +1 -1
  19. package/src/modules/doc/contentCallout/contentCallout.css +3 -3
  20. package/src/modules/doc/contentLayout/contentLayout.css +100 -0
  21. package/src/modules/doc/contentLayout/contentLayout.html +55 -0
  22. package/src/modules/doc/contentLayout/contentLayout.ts +242 -0
  23. package/src/modules/doc/header/header.css +1 -1
  24. package/src/modules/doc/header/header.ts +2 -2
  25. package/src/modules/doc/headingAnchor/headingAnchor.css +1 -1
  26. package/src/modules/doc/headingContent/headingContent.css +1 -1
  27. package/src/modules/doc/phase/phase.css +3 -3
  28. package/src/modules/doc/phase/phase.ts +1 -1
  29. package/src/modules/doc/xmlContent/types.ts +119 -0
  30. package/src/modules/doc/xmlContent/utils.ts +163 -0
  31. package/src/modules/doc/xmlContent/xmlContent.css +25 -0
  32. package/src/modules/doc/xmlContent/xmlContent.html +34 -0
  33. package/src/modules/doc/xmlContent/xmlContent.ts +553 -0
  34. package/src/modules/docBaseElements/lightningElementWithState/lightningElementWithState.ts +93 -0
  35. package/src/modules/docHelpers/amfStyle/amfStyle.css +390 -0
  36. package/src/modules/docHelpers/phaseContentLayout/phaseContentLayout.css +37 -0
  37. package/src/modules/{helpers → docHelpers}/status/status.css +0 -0
  38. package/src/modules/docUtils/SearchSyncer/SearchSyncer.ts +80 -0
  39. package/LICENSE +0 -12
@@ -0,0 +1,390 @@
1
+ :host {
2
+ --amf-sidebar-width: 275px;
3
+
4
+ /* h5 */
5
+ --amf-h5-font-family: var(--dx-g-font-display);
6
+ --amf-h5-font-size: 32px;
7
+ --amf-h5-font-weight: var(--dx-g-font-normal);
8
+ --amf-h5-font-color: var(--dx-g-blue-vibrant-20);
9
+ --amf-h5-line-height: var(--dx-g-spacing-2xl);
10
+ --amf-h5-margin: var(--dx-g-spacing-2xl) 0 var(--dx-g-spacing-lg) 0;
11
+ --amf-h5-padding: 0;
12
+
13
+ /* h6 */
14
+ --amf-h6-font-family: var(--dx-g-font-display);
15
+ --amf-h6-font-size: var(--dx-g-text-xl);
16
+ --amf-h6-font-weight: var(--dx-g-font-normal);
17
+ --amf-h6-font-color: var(--dx-g-blue-vibrant-20);
18
+ --amf-h6-line-height: var(--dx-g-spacing-xl);
19
+ --amf-h6-margin: 32px 0 0 0;
20
+ --amf-h6-padding: 0;
21
+
22
+ /* h7 */
23
+ --amf-h7-font-family: var(--dx-g-font-display);
24
+ --amf-h7-font-size: var(--dx-g-text-lg);
25
+ --amf-h7-font-weight: var(--dx-g-font-normal);
26
+ --amf-h7-font-color: var(--dx-g-blue-vibrant-20);
27
+ --amf-h7-line-height: 28px;
28
+ --amf-h7-margin: var(--dx-g-spacing-lg) 0 0 0;
29
+ --amf-h7-padding: 0;
30
+
31
+ /* h8 */
32
+ --amf-h8-font-family: var(--dx-g-font-display);
33
+ --amf-h8-font-size: var(--dx-g-text-base);
34
+ --amf-h8-font-weight: var(--dx-g-font-normal);
35
+ --amf-h8-font-color: var(--dx-g-blue-vibrant-20);
36
+ --amf-h8-line-height: 20px;
37
+ --amf-h8-margin: var(--dx-g-spacing-lg) 0 var(--dx-g-spacing-md) 0;
38
+ --amf-h8-padding: 0;
39
+
40
+ /* h8 mod */
41
+ --amf-h8-mod-font-family: var(--dx-g-font-sans);
42
+ --amf-h8-mod-font-size: var(--dx-g-text-base);
43
+ --amf-h8-mod-font-weight: var(--dx-g-font-bold);
44
+ --amf-h8-mod-font-color: var(--dx-g-blue-vibrant-20);
45
+ --amf-h8-mod-line-height: 20px;
46
+ --amf-h8-mod-margin: var(--dx-g-spacing-lg) 0 var(--dx-g-spacing-md) 0;
47
+ --amf-h8-mod-padding: 0;
48
+ }
49
+
50
+ api-summary,
51
+ api-endpoint-documentation,
52
+ api-method-documentation,
53
+ api-documentation-document,
54
+ api-type-documentation,
55
+ api-security-documentation {
56
+ font-family: var(--dx-g-font-sans);
57
+
58
+ /* markdown styles */
59
+ --arc-font-body1-font-family: var(--dx-g-font-sans);
60
+ --arc-font-title-font-family: var(--amf-h6-font-family);
61
+ --arc-font-title-color: var(--amf-h6-font-color);
62
+ --markdown-styles-title-border-bottom-color: var(--dx-g-gray-90);
63
+
64
+ /* h2 */
65
+ --arc-font-title-font-size: var(--dx-g-text-xl);
66
+ --arc-font-title-line-height: var(--dx-g-spacing-xl);
67
+ --markdown-styles-h2-border-bottom: 0;
68
+ --markdown-styles-h2-border-top: 1px solid var(--dx-g-gray-90);
69
+ --arc-font-h2-margin: var(--dx-g-spacing-lg)
70
+ calc(-1 * var(--dx-g-spacing-2xl)) var(--dx-g-spacing-lg)
71
+ calc(-1 * var(--dx-g-spacing-2xl));
72
+ --arc-font-h2-padding: var(--dx-g-spacing-xl) var(--dx-g-spacing-2xl) 0
73
+ var(--dx-g-spacing-2xl);
74
+
75
+ /* h3 */
76
+ --arc-font-subhead-font-size: var(--amf-h8-font-size);
77
+ --arc-font-subhead-font-weight: var(--amf-h8-font-weight);
78
+ --arc-font-h3-margin: var(--amf-h8-margin);
79
+
80
+ /* p */
81
+ --arc-font-body1-font-size: var(--dx-g-text-base);
82
+ --arc-font-body1-line-height: var(--dx-g-spacing-lg);
83
+
84
+ /* code */
85
+ --arc-font-code-family: var(--dx-g-font-mono);
86
+
87
+ /* a */
88
+ --link-color: var(--dx-g-blue-vibrant-50);
89
+ --link-hover-color: var(--dx-g-blue-vibrant-50);
90
+
91
+ /* HTTP methods colors */
92
+ --method-display-selected-color: #fff;
93
+ --method-display-get-color: var(--dx-g-blue-vibrant-50);
94
+ --method-display-post-color: var(--dx-g-green-vibrant-40);
95
+ --method-display-put-color: var(--dx-g-yellow-vibrant-40);
96
+ --method-display-patch-color: var(--dx-g-teal-vibrant-40);
97
+ --method-display-delete-color: var(--dx-g-red-vibrant-40);
98
+
99
+ /* --method-display-options-color: var(--anypoint-color-teal3);
100
+ --method-display-head-color: var(--anypoint-color-futureGreen3);
101
+ HTTP methods colors in method documentation panel */
102
+ --http-method-label-border-radius: 4px;
103
+ --http-method-label-get-background-color: var(--dx-g-blue-vibrant-90);
104
+ --http-method-label-get-color: var(--dx-g-blue-vibrant-50);
105
+ --http-method-label-post-background-color: var(--dx-g-green-vibrant-90);
106
+ --http-method-label-post-color: var(--dx-g-green-vibrant-40);
107
+ --http-method-label-put-background-color: var(--dx-g-yellow-vibrant-90);
108
+ --http-method-label-put-color: var(--dx-g-yellow-vibrant-40);
109
+ --http-method-label-patch-background-color: var(--dx-g-teal-vibrant-90);
110
+ --http-method-label-patch-color: var(--dx-g-teal-vibrant-40);
111
+ --http-method-label-delete-background-color: var(
112
+ --dx-g-hot-orange-vibrant-90
113
+ );
114
+ --http-method-label-delete-color: var(--dx-g-red-vibrant-40);
115
+
116
+ /* --http-method-label-options-background-color: var(--method-display-options-color);
117
+ --http-method-label-options-color: #fff;
118
+ --http-method-label-head-background-color: var(--method-display-head-color);
119
+ --http-method-label-head-color: #fff; */
120
+ --http-method-label-padding: 2px 6px;
121
+ --http-method-label-font-size: 12px;
122
+ --http-method-label-font-weigth: var(--dx-g-font-bold);
123
+ --http-method-label-margin: 0 8px 0 0;
124
+
125
+ /* arc */
126
+ --arc-font-headline-font-family: var(--amf-h6-font-family);
127
+ --arc-font-headline-color: var(--amf-h6-font-color);
128
+ --arc-font-headline-font-size: var(--amf-h6-font-size);
129
+ --arc-font-headline-font-weight: var(--dx-g-font-bold);
130
+ --arc-font-headline-letter-spacing: -0.2px;
131
+ --arc-font-headline-line-height: var(--amf-h6-line-height);
132
+
133
+ /* api */
134
+ --api-parameters-document-title-border: 0;
135
+ --api-body-document-title-border: 0;
136
+ --api-type-document-property-parent-color: rgb(112, 110, 107);
137
+ --api-type-document-property-title-font-family: var(--dx-g-font-sans);
138
+ --api-type-document-property-title-font-size: var(--dx-g-text-base);
139
+ --api-type-document-property-title-font-weight: var(--dx-g-font-bold);
140
+ --api-type-document-property-title-color: var(--dx-g-blue-vibrant-20);
141
+ --api-type-document-type-font-family: var(--dx-g-font-mono);
142
+ --api-type-document-type-background-color: var(--dx-g-gray-95);
143
+ --api-type-document-type-color: rgb(24, 24, 24);
144
+ --api-type-document-type-attribute-color: rgb(24, 24, 24);
145
+ --api-type-document-trait-font-family: var(--dx-g-font-mono);
146
+ --api-type-document-trait-color: rgb(24, 24, 24);
147
+ --api-type-document-trait-padding: 0 var(--dx-g-spacing-xs);
148
+ --api-type-document-trait-data-type-padding: 0 var(--dx-g-spacing-xs);
149
+ --api-type-document-trait-font-size: var(--dx-g-text-sm);
150
+ --api-type-document-trait-border-radius: var(--dx-g-spacing-xs);
151
+ --api-type-document-trait-background-color: var(--dx-g-gray-95);
152
+ --api-type-document-union-button-active-background-color: transparent;
153
+ --api-type-document-union-button-active-color: var(--dx-g-blue-vibrant-20);
154
+ --api-type-document-union-button-background-color: transparent;
155
+ --api-type-document-union-button-color: var(--dx-g-blue-vibrant-50);
156
+ --api-type-document-media-button-border-color: transparent;
157
+ --property-shape-document-padding: 24px 0;
158
+ --property-shape-document-title-font-family: var(--dx-g-font-sans);
159
+ --property-shape-document-title-font-size: var(--dx-g-text-base);
160
+ --property-shape-document-title-font-weight: var(--dx-g-font-bold);
161
+ --property-shape-document-title-line-height: 20px;
162
+ --property-shape-document-title-margin: 8px 0 8px 0;
163
+ --property-shape-document-object-color: var(--dx-g-blue-vibrant-90);
164
+ --property-shape-document-array-color: var(--dx-g-blue-vibrant-90);
165
+ --property-shape-document-union-color: var(--dx-g-blue-vibrant-90);
166
+
167
+ /* anypoint button */
168
+ --anypoint-button-font-size: var(--dx-g-text-sm);
169
+ --anypoint-button-color: var(--dx-g-blue-vibrant-50);
170
+ --anypoint-button-text-transform: capitalize;
171
+ --anypoint-button-background-color: transparent;
172
+ --anypoint-button-hover-background-color: transparent;
173
+ --anypoint-button-active-background-color: transparent;
174
+ --anypoint-button-emphasis-low-focus-color: var(--dx-g-blue-vibrant-20);
175
+ --anypoint-button-emphasis-low-hover-background-color: transparent;
176
+ --anypoint-button-emphasis-low-focus-background-color: transparent;
177
+ --anypoint-button-emphasis-low-active-background-color: transparent;
178
+ --anypoint-button-emphasis-medium-focus-background-color: transparent;
179
+ --anypoint-button-emphasis-medium-focus-border-color: transparent;
180
+ --anypoint-button-emphasis-medium-hover-background-color: transparent;
181
+ --anypoint-button-emphasis-medium-active-background-color: transparent;
182
+ --anypoint-button-emphasis-high-background-color: transparent;
183
+ --anypoint-button-emphasis-high-hover-background-color: transparent;
184
+ --anypoint-button-emphasis-high-focus-background-color: transparent;
185
+ --anypoint-button-emphasis-high-active-background-color: transparent;
186
+
187
+ /* api example */
188
+ --api-example-accent-color: rgb(250, 250, 250);
189
+ --api-example-background-color: rgb(250, 250, 250);
190
+ --api-example-title-background-color: transparent;
191
+
192
+ /* code snippets */
193
+ --http-code-snippet-container-background-color: rgb(250, 250, 250);
194
+ --http-code-snippet-code-function-color: rgb(24, 24, 24);
195
+ --http-code-snippet-code-keyword-color: rgb(24, 24, 24);
196
+ --http-code-snippet-code-cdata-color: rgb(24, 24, 24);
197
+ --http-code-snippet-variable-color: rgb(24, 24, 24);
198
+ --http-code-snippet-container-padding: var(--dx-g-spacing-md);
199
+
200
+ /* prism */
201
+ --code-background-color: rgb(250, 250, 250);
202
+ --code-color: rgb(24, 24, 24);
203
+ --code-token-comment-value-color: rgb(24, 24, 24);
204
+ --code-punctuation-value-color: rgb(24, 24, 24);
205
+ --code-property-value-color: rgb(24, 24, 24);
206
+ --code-type-number-value-color: rgb(24, 24, 24);
207
+ --code-type-boolean-value-color: rgb(24, 24, 24);
208
+ --code-type-text-value-color: rgb(24, 24, 24);
209
+ --code-operator-value-color: rgb(24, 24, 24);
210
+ --code-keyword-value-color: rgb(24, 24, 24);
211
+ --code-function-value-color: rgb(24, 24, 24);
212
+ --code-variable-value-color: rgb(24, 24, 24);
213
+
214
+ /* --code-operator-value-background-color */
215
+ }
216
+
217
+ api-endpoint-documentation {
218
+ --api-endpoint-documentation-h2-font-family: var(--amf-h8-font-family);
219
+ --api-endpoint-documentation-h2-font-color: var(--amf-h8-font-color);
220
+ --api-endpoint-documentation-h2-font-size: var(--amf-h8-font-size);
221
+ --api-endpoint-documentation-h2-font-weight: var(--amf-h8-font-weight);
222
+ --api-endpoint-documentation-h2-line-height: var(--amf-h8-line-height);
223
+ --api-endpoint-documentation-h2-margin: var(--amf-h8-margin);
224
+
225
+ /* url */
226
+ --api-method-documentation-url-font-family: var(--amf-h5-font-family);
227
+ --api-method-documentation-url-font-size: var(--amf-h5-font-size);
228
+ --api-method-documentation-url-font-weight: var(--amf-h5-font-weight);
229
+ --api-method-documentation-url-font-color: var(--amf-h5-font-color);
230
+ --api-method-documentation-url-line-height: var(--amf-h5-line-height);
231
+ --api-method-documentation-url-margin: var(--amf-h5-margin);
232
+ --api-method-documentation-url-padding: var(--amf-h5-padding);
233
+ --api-method-documentation-url-value-margin: 0;
234
+ --api-method-documentation-url-background-color: transparent;
235
+
236
+ /* method */
237
+ --api-endpoint-documentation-method-label-font-family: var(
238
+ --dx-g-font-display
239
+ );
240
+ --api-endpoint-documentation-method-label-font-size: var(--dx-g-text-xs);
241
+ --api-endpoint-documentation-method-label-font-weight: var(
242
+ --dx-g-font-bold
243
+ );
244
+
245
+ /* description */
246
+ --api-endpoint-documentation-description-color: rgb(24, 24, 24);
247
+ }
248
+
249
+ api-endpoint-documentation,
250
+ api-method-documentation {
251
+ --api-endpoint-documentation-method-value-font-family: var(
252
+ --dx-g-font-display
253
+ );
254
+ --api-endpoint-documentation-method-value-font-color: var(
255
+ --dx-g-blue-vibrant-20
256
+ );
257
+ --api-endpoint-documentation-method-value-font-size: var(--dx-g-text-base);
258
+ --api-endpoint-documentation-method-value-font-weight: var(
259
+ --dx-g-font-bold
260
+ );
261
+ --api-endpoint-documentation-method-value-line-height: 20px;
262
+ --api-method-documentation-summary-p-margin-bottom: var(--dx-g-spacing-md);
263
+ }
264
+
265
+ api-method-documentation {
266
+ --api-method-documentation-h2-font-family: var(--amf-h6-font-family);
267
+ --api-method-documentation-h2-font-size: var(--amf-h6-font-size);
268
+ --api-method-documentation-h2-font-weight: var(--amf-h6-font-weight);
269
+ --api-method-documentation-h2-line-height: var(--amf-h6-line-height);
270
+ --api-method-documentation-h2-font-color: var(--amf-h6-font-color);
271
+
272
+ /* method h3 */
273
+ --api-method-documentation-h3-font-family: var(--amf-h7-font-family);
274
+ --api-method-documentation-h3-font-size: var(--amf-h7-font-size);
275
+ --api-method-documentation-h3-font-weight: var(--amf-h7-font-weight);
276
+ --api-method-documentation-h3-line-height: var(--amf-h7-line-height);
277
+ --api-method-documentation-h3-font-color: var(--amf-h7-font-color);
278
+ --api-method-documentation-title-text-transform: none;
279
+
280
+ /* body h3 */
281
+ --api-body-document-h3-font-family: var(--amf-h7-font-family);
282
+ --api-body-document-h3-font-size: var(--amf-h7-font-size);
283
+ --api-body-document-h3-font-weight: var(--amf-h7-font-weight);
284
+ --api-body-document-h3-line-height: var(--amf-h7-line-height);
285
+ --api-body-document-h3-font-color: var(--amf-h7-font-color);
286
+
287
+ /* params h3 */
288
+ --api-parameters-document-h3-font-family: var(--amf-h7-font-family);
289
+ --api-parameters-document-h3-font-size: var(--amf-h7-font-size);
290
+ --api-parameters-document-h3-font-weight: var(--amf-h7-font-weight);
291
+ --api-parameters-document-h3-line-height: var(--amf-h7-line-height);
292
+ --api-parameters-document-h3-font-color: var(--amf-h7-font-color);
293
+
294
+ /* anypoint button */
295
+ --anypoint-button-font-family: var(--dx-g-font-display);
296
+ --anypoint-button-font-size: var(--dx-g-text-base);
297
+ --anypoint-button-background-color: transparent;
298
+ --anypoint-button-color: var(--dx-g-blue-vibrant-50);
299
+ --anypoint-button-text-transform: uppercase;
300
+
301
+ /* method documentation */
302
+ --api-method-documentation-http-method-label-font-size: var(--dx-g-text-xs);
303
+ --api-method-documentation-http-method-label-font-family: var(
304
+ --dx-g-font-display
305
+ );
306
+ --api-method-documentation-http-method-label-font-weight: var(
307
+ --dx-g-font-bold
308
+ );
309
+ --api-method-documentation-description-color: rgb(24, 24, 24);
310
+ --api-method-documentation-operation-id-color: var(--dx-g-gray-50);
311
+
312
+ /* body */
313
+ --api-body-document-description-color: rgb(24, 24, 24);
314
+ --api-body-document-media-type-selector-color: var(--dx-g-blue-vibrant-20);
315
+ --api-body-document-media-type-selector-font-size: var(
316
+ --amf-h8-mod-font-size
317
+ );
318
+ --api-body-document-media-type-selector-font-weight: var(
319
+ --amf-h8-mod-font-weight
320
+ );
321
+ --api-body-document-toggle-view-color: var(--dx-g-blue-vibrant-50);
322
+ --api-body-document-toggle-view-font-size: var(--amf-h8-mod-font-size);
323
+ --api-body-document-toggle-view-font-weight: var(--amf-h8-mod-font-weight);
324
+ --api-body-document-media-button-color: var(--dx-g-blue-vibrant-20);
325
+ --api-body-document-media-button-background-color: transparent;
326
+ --api-body-document-media-button-text-decoration: underline 2px;
327
+ --api-body-document-media-button-text-underline-offset: 4px;
328
+
329
+ /* resource */
330
+ --api-resource-example-document-button-color: var(--dx-g-blue-vibrant-50);
331
+ --api-resource-example-document-button-font-size: var(--dx-g-text-sm);
332
+ --api-resource-example-document-button-font-weight: var(--dx-g-font-normal);
333
+ --api-resource-example-document-button-active-outline: none;
334
+ --api-resource-example-document-button-active-text-decoration: underline 1px;
335
+ --api-resource-example-document-button-active-text-underline-offset: 3px;
336
+ --api-resource-example-document-button-active-background-color: transparent;
337
+ --api-resource-example-document-button-active-color: var(
338
+ --dx-g-blue-vibrant-20
339
+ );
340
+ }
341
+
342
+ api-summary::part(api-title) {
343
+ font-family: var(--dx-g-font-display);
344
+ font-size: var(--dx-g-text-3xl);
345
+ color: var(--dx-g-blue-vibrant-20);
346
+ line-height: var(--dx-g-text-4xl);
347
+ letter-spacing: -0.85px;
348
+ margin: var(--dx-g-spacing-sm) 0;
349
+ }
350
+
351
+ api-summary::part(api-title-label) {
352
+ display: none;
353
+ }
354
+
355
+ api-summary::part(api-version) {
356
+ font-family: var(--dx-g-font-display);
357
+ font-size: var(--dx-g-text-sm);
358
+ color: var(--dx-g-blue-vibrant-50);
359
+ }
360
+
361
+ api-summary::part(marked-description) {
362
+ margin: var(--dx-g-spacing-sm) 0;
363
+ }
364
+
365
+ api-summary::part(info-section) {
366
+ margin: 0;
367
+ }
368
+
369
+ api-summary::part(license-section) {
370
+ margin: 0;
371
+ }
372
+
373
+ api-summary::part(info-inline-desc) {
374
+ margin-bottom: var(--dx-g-spacing-md);
375
+ }
376
+
377
+ api-type-documentation::part(type-title) {
378
+ margin-top: var(--dx-g-spacing-lg);
379
+ margin-bottom: var(--dx-g-spacing-md);
380
+ }
381
+
382
+ api-security-documentation::part(security-title) {
383
+ font-family: var(--amf-h6-font-family);
384
+ font-size: var(--amf-h6-font-size);
385
+ font-weight: var(--amf-h6-font-weight);
386
+ color: var(--amf-h6-font-color);
387
+ line-height: var(--amf-h6-line-height);
388
+ margin: var(--amf-h6-margin);
389
+ padding: var(--amf-h6-padding);
390
+ }
@@ -0,0 +1,37 @@
1
+ doc-phase::part(container) {
2
+ margin-bottom: var(--dx-g-spacing-sm);
3
+ padding-left: var(--dx-g-spacing-mlg);
4
+ padding-right: var(--dx-g-spacing-lg);
5
+ width: auto;
6
+ }
7
+
8
+ .doc-phase-wrapper {
9
+ position: sticky;
10
+ top: 0;
11
+ z-index: 4;
12
+ }
13
+
14
+ @media screen and (max-width: 800px) {
15
+ doc-phase::part(container) {
16
+ margin-bottom: 0;
17
+ }
18
+ }
19
+
20
+ @media screen and (min-width: 1024px) and (max-width: 1496px) {
21
+ doc-phase::part(container) {
22
+ padding-right: var(--dx-g-spacing-3xl);
23
+ }
24
+ }
25
+
26
+ @media screen and (min-width: 1496px) {
27
+ doc-phase::part(container) {
28
+ margin-right: calc(var(--dx-g-page-padding-horizontal) - var(--dx-g-spacing-lg));
29
+ }
30
+ }
31
+
32
+ @media screen and (max-width: 768px) {
33
+ /* We are giving top value because there is one more sticky item(lnb) with height 40px */
34
+ .doc-phase-wrapper {
35
+ top: 40px;
36
+ }
37
+ }
@@ -0,0 +1,80 @@
1
+ export interface SearchSyncerConstructorArgs {
2
+ callbacks: {
3
+ onSearchChange?: (nextSearchString: string) => unknown;
4
+ onUrlChange?: (nextSearchString: string) => unknown;
5
+ };
6
+ eventName: string;
7
+ historyMethod?: typeof window.history.pushState | typeof window.history.replaceState;
8
+ searchParam: string;
9
+ shouldStopPropagation?: boolean;
10
+ target: EventTarget;
11
+ }
12
+
13
+ export class SearchSyncer {
14
+ private callbacks: SearchSyncerConstructorArgs["callbacks"];
15
+ private eventName: SearchSyncerConstructorArgs["eventName"];
16
+ private historyMethod: SearchSyncerConstructorArgs["historyMethod"];
17
+ private searchParam: SearchSyncerConstructorArgs["searchParam"];
18
+ private shouldStopPropagation: SearchSyncerConstructorArgs["shouldStopPropagation"];
19
+ private target: SearchSyncerConstructorArgs["target"];
20
+
21
+ constructor({
22
+ callbacks = {},
23
+ eventName,
24
+ historyMethod = window.history.pushState,
25
+ searchParam,
26
+ shouldStopPropagation = true,
27
+ target
28
+ }: SearchSyncerConstructorArgs) {
29
+ this.callbacks = callbacks;
30
+ this.eventName = eventName;
31
+ this.historyMethod = historyMethod.bind(window.history);
32
+ this.searchParam = searchParam;
33
+ this.shouldStopPropagation = shouldStopPropagation;
34
+ this.target = target;
35
+ }
36
+
37
+ public init = (): void => {
38
+ this.target.addEventListener(this.eventName, this.handleSearchChange);
39
+ this.target.addEventListener("popstate", this.handlePopState);
40
+ };
41
+
42
+ public dispose = (): void => {
43
+ this.target.removeEventListener(this.eventName, this.handleSearchChange);
44
+ this.target.removeEventListener("popstate", this.handlePopState);
45
+ this.target = undefined;
46
+ this.callbacks.onSearchChange = undefined;
47
+ this.callbacks.onUrlChange = undefined;
48
+ };
49
+
50
+ private handleSearchChange = (event: Event): void => {
51
+ if (this.shouldStopPropagation) {
52
+ event.stopPropagation();
53
+ }
54
+
55
+ const { detail: searchTerm } = event as CustomEvent<string>;
56
+ const fullUrl = new URL(window.location.href);
57
+ const { searchParams } = fullUrl;
58
+
59
+ if (searchTerm) {
60
+ searchParams.set(this.searchParam, searchTerm);
61
+ } else {
62
+ searchParams.delete(this.searchParam);
63
+ }
64
+
65
+ const nextSearchString = searchParams.toString();
66
+
67
+ if (this.callbacks.onSearchChange) {
68
+ this.callbacks.onSearchChange(nextSearchString);
69
+ }
70
+
71
+ fullUrl.search = nextSearchString;
72
+ this.historyMethod({}, "", fullUrl.toString());
73
+ };
74
+
75
+ private handlePopState = (): void => {
76
+ if (this.callbacks.onUrlChange) {
77
+ this.callbacks.onUrlChange(window.location.search);
78
+ }
79
+ };
80
+ }
package/LICENSE DELETED
@@ -1,12 +0,0 @@
1
- Copyright (c) 2020, Salesforce.com, Inc.
2
- All rights reserved.
3
-
4
- Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
5
-
6
- * Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
7
-
8
- * Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
9
-
10
- * Neither the name of Salesforce.com nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
11
-
12
- THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.