@salesforcedevs/docs-components 1.3.228-version-picker3 → 1.3.242-newdocux-alpha5
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 +1 -1
- package/src/modules/doc/amfReference/amfReference.html +9 -9
- package/src/modules/doc/contentLayout/contentLayout.css +7 -3
- package/src/modules/doc/contentLayout/contentLayout.html +5 -5
- package/src/modules/doc/header/header.css +22 -15
- package/src/modules/doc/header/header.html +7 -4
- package/src/modules/doc/header/header.ts +10 -2
- package/src/modules/doc/versionPicker/versionPicker.html +4 -4
- package/src/modules/doc/versionPicker/versionPicker.ts +4 -0
- package/src/modules/doc/xmlContent/xmlContent.css +21 -14
- package/src/modules/doc/xmlContent/xmlContent.html +7 -5
- package/src/modules/doc/xmlContent/xmlContent.ts +5 -3
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<doc-content-layout
|
|
3
|
-
if
|
|
3
|
+
lwc:if={isVersionFetched}
|
|
4
4
|
use-old-sidebar={useOldSidebar}
|
|
5
5
|
class="content-type content-type-reference"
|
|
6
6
|
coveo-organization-id={coveoOrganizationId}
|
|
@@ -22,18 +22,18 @@
|
|
|
22
22
|
>
|
|
23
23
|
<doc-phase
|
|
24
24
|
slot="doc-phase"
|
|
25
|
-
if
|
|
25
|
+
lwc:if={docPhaseInfo}
|
|
26
26
|
doc-phase-info={docPhaseInfo}
|
|
27
27
|
></doc-phase>
|
|
28
28
|
<doc-phase
|
|
29
29
|
slot="version-banner"
|
|
30
|
-
if
|
|
30
|
+
lwc:if={showVersionBanner}
|
|
31
31
|
doc-phase-info={oldVersionInfo}
|
|
32
32
|
icon-name="warning"
|
|
33
33
|
dismissible="true"
|
|
34
34
|
ondismissphase={handleDismissVersionBanner}
|
|
35
35
|
></doc-phase>
|
|
36
|
-
<div if
|
|
36
|
+
<div lwc:if={isVersionEnabled} slot="sidebar-header">
|
|
37
37
|
<doc-version-picker
|
|
38
38
|
onchange={handleVersionChange}
|
|
39
39
|
data-type="version"
|
|
@@ -42,18 +42,18 @@
|
|
|
42
42
|
latest-version={latestVersion}
|
|
43
43
|
></doc-version-picker>
|
|
44
44
|
</div>
|
|
45
|
-
<template if
|
|
46
|
-
<slot></slot>
|
|
47
|
-
</template>
|
|
48
|
-
<template if:true={showSpecBasedReference}>
|
|
45
|
+
<template lwc:if={showSpecBasedReference}>
|
|
49
46
|
<div class="container">
|
|
50
47
|
<div class="api-documentation">
|
|
51
48
|
<doc-amf-topic
|
|
52
|
-
if
|
|
49
|
+
lwc:if={topicModel}
|
|
53
50
|
model={topicModel}
|
|
54
51
|
></doc-amf-topic>
|
|
55
52
|
</div>
|
|
56
53
|
</div>
|
|
57
54
|
</template>
|
|
55
|
+
<template lwc:else>
|
|
56
|
+
<slot></slot>
|
|
57
|
+
</template>
|
|
58
58
|
</doc-content-layout>
|
|
59
59
|
</template>
|
|
@@ -22,7 +22,7 @@ doc-breadcrumbs {
|
|
|
22
22
|
|
|
23
23
|
dx-sidebar,
|
|
24
24
|
dx-sidebar-old {
|
|
25
|
-
--dx-c-sidebar-vertical-padding: var(--dx-
|
|
25
|
+
--dx-c-sidebar-vertical-padding: var(--dx-g-spacing-md);
|
|
26
26
|
|
|
27
27
|
z-index: calc(var(--dx-g-z-index-100) + 5);
|
|
28
28
|
}
|
|
@@ -54,6 +54,7 @@ dx-toc {
|
|
|
54
54
|
|
|
55
55
|
.content-body-doc-phase-container {
|
|
56
56
|
flex: 1;
|
|
57
|
+
border-left: 1px solid var(--dx-g-gray-90);
|
|
57
58
|
}
|
|
58
59
|
|
|
59
60
|
.content-body-container {
|
|
@@ -70,7 +71,7 @@ dx-toc {
|
|
|
70
71
|
}
|
|
71
72
|
|
|
72
73
|
.content-body {
|
|
73
|
-
margin: var(--dx-g-spacing-
|
|
74
|
+
margin: var(--dx-g-spacing-md) 0 0;
|
|
74
75
|
max-width: 900px;
|
|
75
76
|
flex: 1;
|
|
76
77
|
width: 0;
|
|
@@ -96,6 +97,10 @@ dx-toc {
|
|
|
96
97
|
.content-body {
|
|
97
98
|
margin-top: var(--dx-c-content-vertical-spacing);
|
|
98
99
|
}
|
|
100
|
+
|
|
101
|
+
.content-body-doc-phase-container {
|
|
102
|
+
border-left: 0;
|
|
103
|
+
}
|
|
99
104
|
}
|
|
100
105
|
|
|
101
106
|
@media screen and (max-width: 768px) {
|
|
@@ -115,7 +120,6 @@ dx-toc {
|
|
|
115
120
|
|
|
116
121
|
.left-nav-bar {
|
|
117
122
|
height: unset;
|
|
118
|
-
z-index: 10;
|
|
119
123
|
}
|
|
120
124
|
|
|
121
125
|
.content-body {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="content">
|
|
3
|
-
<template if
|
|
3
|
+
<template lwc:if={useOldSidebar}>
|
|
4
4
|
<dx-sidebar-old
|
|
5
5
|
class="is-sticky left-nav-bar"
|
|
6
6
|
trees={sidebarContent}
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
<slot name="sidebar-header" slot="version-picker"></slot>
|
|
16
16
|
</dx-sidebar-old>
|
|
17
17
|
</template>
|
|
18
|
-
<template
|
|
18
|
+
<template lwc:else>
|
|
19
19
|
<dx-sidebar
|
|
20
20
|
class="is-sticky left-nav-bar"
|
|
21
21
|
trees={sidebarContent}
|
|
@@ -40,15 +40,15 @@
|
|
|
40
40
|
<div class="content-body-container">
|
|
41
41
|
<div class="content-body">
|
|
42
42
|
<doc-breadcrumbs
|
|
43
|
-
if
|
|
43
|
+
lwc:if={showBreadcrumbs}
|
|
44
44
|
breadcrumbs={breadcrumbs}
|
|
45
45
|
></doc-breadcrumbs>
|
|
46
46
|
<slot onslotchange={onSlotChange}></slot>
|
|
47
47
|
<doc-sprig-survey
|
|
48
|
-
if
|
|
48
|
+
lwc:if={shouldDisplayFeedback}
|
|
49
49
|
></doc-sprig-survey>
|
|
50
50
|
</div>
|
|
51
|
-
<div if
|
|
51
|
+
<div lwc:if={showToc} class="right-nav-bar is-sticky">
|
|
52
52
|
<dx-toc
|
|
53
53
|
title={tocTitle}
|
|
54
54
|
options={tocOptions}
|
|
@@ -7,8 +7,6 @@ dx-logo {
|
|
|
7
7
|
.header_l2 {
|
|
8
8
|
justify-content: space-between;
|
|
9
9
|
height: var(--dx-g-doc-header-main-nav-height);
|
|
10
|
-
padding-bottom: var(--dx-g-spacing-xs);
|
|
11
|
-
background: white;
|
|
12
10
|
}
|
|
13
11
|
|
|
14
12
|
.nav_menu-button {
|
|
@@ -35,7 +33,6 @@ header:not(.has-brand) > .header_l1 {
|
|
|
35
33
|
header:not(.has-brand) > .header_l2 {
|
|
36
34
|
border-bottom: 1px solid var(--dx-g-gray-90);
|
|
37
35
|
border-top: 1px solid var(--dx-g-gray-90);
|
|
38
|
-
padding-bottom: var(--dx-g-spacing-lg);
|
|
39
36
|
}
|
|
40
37
|
|
|
41
38
|
.header_l2_group.header_l2_group-right-ctas {
|
|
@@ -43,7 +40,13 @@ header:not(.has-brand) > .header_l2 {
|
|
|
43
40
|
}
|
|
44
41
|
|
|
45
42
|
.has-brand .header_l2_group-title {
|
|
46
|
-
padding
|
|
43
|
+
padding: var(--dx-g-spacing-smd) var(--dx-g-spacing-xl)
|
|
44
|
+
calc(var(--dx-g-spacing-smd) - 1px) 0;
|
|
45
|
+
min-width: 320px;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.no-header-content {
|
|
49
|
+
border-top: 1px solid var(--dx-g-gray-90);
|
|
47
50
|
}
|
|
48
51
|
|
|
49
52
|
@media (max-width: 768px) {
|
|
@@ -61,37 +64,41 @@ header:not(.has-brand) > .header_l2 {
|
|
|
61
64
|
width: 100%;
|
|
62
65
|
}
|
|
63
66
|
|
|
67
|
+
.header_l2_group-title {
|
|
68
|
+
margin-right: 0;
|
|
69
|
+
padding: var(--dx-g-spacing-sm) 0 2px
|
|
70
|
+
var(--dx-g-global-header-padding-horizontal);
|
|
71
|
+
min-height: var(--dx-g-doc-header-main-nav-height);
|
|
72
|
+
}
|
|
73
|
+
|
|
64
74
|
.header_l2_group-nav {
|
|
65
75
|
height: var(--dx-g-spacing-3xl);
|
|
66
76
|
padding: 0;
|
|
67
|
-
|
|
77
|
+
margin-top: calc(var(--dx-g-spacing-2xs) + 1px);
|
|
68
78
|
}
|
|
69
79
|
|
|
70
80
|
.header_l2_group-nav_overflow {
|
|
71
|
-
height:
|
|
81
|
+
height: var(--dx-g-spacing-3xl);
|
|
72
82
|
margin-right: var(--dx-g-spacing-sm);
|
|
73
83
|
}
|
|
74
84
|
|
|
75
|
-
.
|
|
76
|
-
|
|
85
|
+
.subtitle {
|
|
86
|
+
font-weight: var(--dx-g-font-demi);
|
|
87
|
+
letter-spacing: -0.08px;
|
|
77
88
|
}
|
|
78
89
|
|
|
79
|
-
.header_l2_group-title {
|
|
90
|
+
.has-brand .header_l2_group-title {
|
|
80
91
|
margin-right: 0;
|
|
81
|
-
padding: var(--dx-g-spacing-
|
|
92
|
+
padding: var(--dx-g-spacing-sm) 0 var(--dx-g-spacing-2xs)
|
|
82
93
|
var(--dx-g-global-header-padding-horizontal);
|
|
83
|
-
min-height: var(--dx-g-doc-header-main-nav-height);
|
|
84
94
|
}
|
|
85
95
|
|
|
86
96
|
.has-scoped-nav-items > .header_l2 {
|
|
87
97
|
height: unset;
|
|
88
98
|
}
|
|
89
99
|
|
|
90
|
-
.has-scoped-nav-items .header_l2_group-title {
|
|
91
|
-
border-bottom: 1px solid var(--dx-g-gray-90);
|
|
92
|
-
}
|
|
93
|
-
|
|
94
100
|
header:not(.has-brand) > .header_l2 {
|
|
95
101
|
padding-bottom: 0;
|
|
102
|
+
border: 0;
|
|
96
103
|
}
|
|
97
104
|
}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<template if
|
|
2
|
+
<template lwc:if={shouldRender}>
|
|
3
3
|
<dx-brand-theme-provider brand={brand}>
|
|
4
4
|
<header class={className}>
|
|
5
5
|
<dx-banner
|
|
6
|
-
if
|
|
6
|
+
lwc:if={showBanner}
|
|
7
7
|
banner-markup={bannerMarkup}
|
|
8
8
|
></dx-banner>
|
|
9
9
|
<div class="header_l2">
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
<a href={headerHref} class="home-link">
|
|
12
12
|
<dx-icon
|
|
13
13
|
class="brand-icon"
|
|
14
|
-
if
|
|
14
|
+
lwc:if={isValidBrand}
|
|
15
15
|
sprite="salesforcebrand"
|
|
16
16
|
symbol={brand}
|
|
17
17
|
size="large"
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
</a>
|
|
23
23
|
</div>
|
|
24
24
|
<div
|
|
25
|
-
if
|
|
25
|
+
lwc:if={hasScopedNavItems}
|
|
26
26
|
class="header_l2_group header_l2_group-nav"
|
|
27
27
|
>
|
|
28
28
|
<div
|
|
@@ -40,4 +40,7 @@
|
|
|
40
40
|
</header>
|
|
41
41
|
</dx-brand-theme-provider>
|
|
42
42
|
</template>
|
|
43
|
+
<template lwc:if={showDocDivider}>
|
|
44
|
+
<div class="no-header-content"></div>
|
|
45
|
+
</template>
|
|
43
46
|
</template>
|
|
@@ -5,7 +5,7 @@ import { HeaderBase } from "dxBaseElements/headerBase";
|
|
|
5
5
|
import { toJson } from "dxUtils/normalizers";
|
|
6
6
|
|
|
7
7
|
const TABLET_MATCH = "980px";
|
|
8
|
-
const MOBILE_MATCH = "
|
|
8
|
+
const MOBILE_MATCH = "768px";
|
|
9
9
|
|
|
10
10
|
export default class Header extends HeaderBase {
|
|
11
11
|
@api langValuePath: string = "id"; // allows to override how language property is interpreted, follows valuePath dropdown api.
|
|
@@ -23,7 +23,8 @@ export default class Header extends HeaderBase {
|
|
|
23
23
|
private _scopedNavItems!: OptionWithNested[];
|
|
24
24
|
private tablet = false;
|
|
25
25
|
private tabletMatchMedia!: MediaQueryList;
|
|
26
|
-
private shouldRender = false;
|
|
26
|
+
private shouldRender: boolean = false;
|
|
27
|
+
private showDocDivider: boolean = false;
|
|
27
28
|
|
|
28
29
|
protected mobileBreakpoint(): string {
|
|
29
30
|
return MOBILE_MATCH;
|
|
@@ -51,6 +52,13 @@ export default class Header extends HeaderBase {
|
|
|
51
52
|
) {
|
|
52
53
|
this.shouldRender = true;
|
|
53
54
|
}
|
|
55
|
+
|
|
56
|
+
if (this.shouldRender && window.location.pathname.includes("/docs/")) {
|
|
57
|
+
if (!this.brand && !this.mobile) {
|
|
58
|
+
this.shouldRender = false;
|
|
59
|
+
this.showDocDivider = true;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
54
62
|
}
|
|
55
63
|
|
|
56
64
|
disconnectedCallback(): void {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div if
|
|
2
|
+
<div lwc:if={showVersionPicker} class="version-picker-container">
|
|
3
3
|
<dx-dropdown
|
|
4
4
|
options={versions}
|
|
5
5
|
value={selectedVersion.id}
|
|
@@ -16,16 +16,16 @@
|
|
|
16
16
|
<p class="selected-version-label">
|
|
17
17
|
{selectedVersion.label}
|
|
18
18
|
</p>
|
|
19
|
-
<template if
|
|
19
|
+
<template lwc:if={showLatestTag}>
|
|
20
20
|
<dx-type-badge
|
|
21
21
|
class="latest-badge"
|
|
22
|
-
if
|
|
22
|
+
lwc:if={latestVersion}
|
|
23
23
|
value="Latest"
|
|
24
24
|
size="small"
|
|
25
25
|
></dx-type-badge>
|
|
26
26
|
<dx-type-badge
|
|
27
27
|
class="not-latest-badge"
|
|
28
|
-
|
|
28
|
+
lwc:else
|
|
29
29
|
value="Not Latest"
|
|
30
30
|
size="small"
|
|
31
31
|
></dx-type-badge>
|
|
@@ -4,17 +4,8 @@
|
|
|
4
4
|
}
|
|
5
5
|
|
|
6
6
|
doc-content-layout {
|
|
7
|
-
--dx-c-content-sidebar-sticky-top:
|
|
8
|
-
|
|
9
|
-
var(--dx-g-doc-header-main-nav-height)
|
|
10
|
-
);
|
|
11
|
-
--dx-c-sidebar-height: calc(
|
|
12
|
-
100vh -
|
|
13
|
-
calc(
|
|
14
|
-
var(--dx-g-global-header-height) +
|
|
15
|
-
var(--dx-g-doc-header-main-nav-height)
|
|
16
|
-
)
|
|
17
|
-
);
|
|
7
|
+
--dx-c-content-sidebar-sticky-top: var(--dx-g-global-header-height);
|
|
8
|
+
--dx-c-sidebar-height: calc(100vh - var(--dx-g-global-header-height));
|
|
18
9
|
}
|
|
19
10
|
|
|
20
11
|
doc-breadcrumbs {
|
|
@@ -41,7 +32,23 @@ dx-dropdown > dx-button:hover {
|
|
|
41
32
|
}
|
|
42
33
|
|
|
43
34
|
doc-phase {
|
|
44
|
-
--doc-c-phase-top:
|
|
45
|
-
|
|
46
|
-
|
|
35
|
+
--doc-c-phase-top: var(--dx-g-global-header-height);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
@media screen and (max-width: 768px) {
|
|
39
|
+
doc-content-layout {
|
|
40
|
+
--dx-g-doc-header-main-nav-height: 41px;
|
|
41
|
+
--dx-g-doc-header-height: calc(
|
|
42
|
+
var(--dx-g-doc-header-main-nav-height) + 40px
|
|
43
|
+
);
|
|
44
|
+
--dx-c-content-sidebar-sticky-top: calc(
|
|
45
|
+
var(--dx-g-global-header-height) + var(--dx-g-doc-header-height)
|
|
46
|
+
);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
doc-phase {
|
|
50
|
+
--doc-c-phase-top: calc(
|
|
51
|
+
var(--dx-g-global-header-height) + var(--dx-g-doc-header-height)
|
|
52
|
+
);
|
|
53
|
+
}
|
|
47
54
|
}
|
|
@@ -1,16 +1,18 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<doc-content-layout
|
|
3
|
-
if
|
|
3
|
+
lwc:if={loaded}
|
|
4
|
+
lwc:ref="docContentLayout"
|
|
4
5
|
coveo-organization-id={coveoOrganizationId}
|
|
5
6
|
coveo-public-access-token={coveoPublicAccessToken}
|
|
6
7
|
coveo-analytics-token={coveoAnalyticsToken}
|
|
7
8
|
coveo-search-hub={coveoSearchHub}
|
|
8
9
|
coveo-advanced-query-config={coveoAdvancedQueryConfig}
|
|
9
|
-
sidebar-header=
|
|
10
|
+
sidebar-header={docTitle}
|
|
10
11
|
sidebar-content={sidebarContent}
|
|
11
12
|
sidebar-value={sidebarValue}
|
|
12
13
|
onselect={handleSelect}
|
|
13
14
|
use-old-sidebar={useOldSidebar}
|
|
15
|
+
onlangchange={handleLanguageChange}
|
|
14
16
|
languages={sidebarFooterContent.languages}
|
|
15
17
|
language={sidebarFooterContent.language}
|
|
16
18
|
bail-href={sidebarFooterContent.bailHref}
|
|
@@ -18,13 +20,13 @@
|
|
|
18
20
|
>
|
|
19
21
|
<doc-phase
|
|
20
22
|
slot="version-banner"
|
|
21
|
-
if
|
|
23
|
+
lwc:if={showVersionBanner}
|
|
22
24
|
doc-phase-info={oldVersionInfo}
|
|
23
25
|
icon-name="warning"
|
|
24
26
|
dismissible="true"
|
|
25
27
|
ondismissphase={handleDismissVersionBanner}
|
|
26
28
|
></doc-phase>
|
|
27
|
-
<div if
|
|
29
|
+
<div lwc:if={showVersionPicker} slot="sidebar-header">
|
|
28
30
|
<doc-version-picker
|
|
29
31
|
data-type="version"
|
|
30
32
|
analytics-event="custEv_ctaLinkClick"
|
|
@@ -36,7 +38,7 @@
|
|
|
36
38
|
></doc-version-picker>
|
|
37
39
|
</div>
|
|
38
40
|
<doc-breadcrumbs
|
|
39
|
-
if
|
|
41
|
+
lwc:if={showBreadcrumbs}
|
|
40
42
|
breadcrumbs={breadcrumbs}
|
|
41
43
|
pixel-per-character={breadcrumbPixelPerCharacter}
|
|
42
44
|
></doc-breadcrumbs>
|
|
@@ -578,9 +578,7 @@ export default class DocXmlContent extends LightningElementWithState<{
|
|
|
578
578
|
}
|
|
579
579
|
|
|
580
580
|
private updateSearchInput(searchParam: string): void {
|
|
581
|
-
(
|
|
582
|
-
this.template.querySelector("doc-content-layout") as any
|
|
583
|
-
)?.setSidebarInputValue(searchParam);
|
|
581
|
+
(this.refs.docContentLayout as any)?.setSidebarInputValue(searchParam);
|
|
584
582
|
}
|
|
585
583
|
|
|
586
584
|
private pageReferenceToString(reference: PageReference): string {
|
|
@@ -770,4 +768,8 @@ export default class DocXmlContent extends LightningElementWithState<{
|
|
|
770
768
|
headTag[0].appendChild(robotsMeta);
|
|
771
769
|
}
|
|
772
770
|
}
|
|
771
|
+
|
|
772
|
+
private get showVersionPicker(): boolean {
|
|
773
|
+
return !this.disableVersion;
|
|
774
|
+
}
|
|
773
775
|
}
|