@salesforcedevs/dx-components 1.3.228 → 1.3.229-docheader1-alpha
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/lwc.config.json +1 -1
- package/package.json +2 -3
- package/src/modules/dx/dropdownOption/dropdownOption.css +5 -3
- package/src/modules/dx/headerNav/headerNav.css +9 -0
- package/src/modules/dx/popover/popover.css +2 -2
- package/src/modules/dx/sidebar/sidebar.css +8 -5
- package/src/modules/dx/sidebar/sidebar.html +30 -4
- package/src/modules/dx/sidebar/sidebar.ts +2 -42
- package/src/modules/dx/sidebarFooterNav/sidebarFooterNav.css +52 -0
- package/src/modules/dx/sidebarFooterNav/sidebarFooterNav.html +55 -0
- package/src/modules/dx/sidebarFooterNav/sidebarFooterNav.ts +106 -0
- package/src/modules/dx/sidebarOld/sidebarOld.css +1 -0
- package/src/modules/dx/sidebarOld/sidebarOld.html +24 -3
- package/src/modules/dx/sidebarOld/sidebarOld.ts +0 -38
- package/src/modules/dx/sidebarSearchResult/sidebarSearchResult.css +26 -4
- package/src/modules/dx/tab/tab.css +48 -19
- package/src/modules/dx/trafficLabeler/trafficLabeler.html +1 -6
- package/src/modules/dx/trafficLabeler/trafficLabeler.ts +3 -0
- package/src/modules/dx/treeItem/treeItem.css +2 -2
- package/src/modules/dx/treeTile/treeTile.css +37 -28
- package/src/modules/dx/treeTile/treeTile.html +6 -6
- package/src/modules/dx/treeTile/treeTile.ts +2 -1
- package/src/modules/dxBaseElements/sidebarBase/sidebarBase.ts +96 -1
- package/src/modules/dxHelpers/commonHeader/commonHeader.css +6 -2
- package/src/modules/dxHelpers/commonSidebar/commonSidebar.css +36 -13
- package/src/modules/dxHelpers/commonTreeItem/commonTreeItem.css +45 -3
- package/LICENSE +0 -12
- package/src/modules/dx/coveoLabeler/coveoLabeler.html +0 -1
- package/src/modules/dx/coveoLabeler/coveoLabeler.ts +0 -11
|
@@ -11,22 +11,31 @@ a {
|
|
|
11
11
|
);
|
|
12
12
|
|
|
13
13
|
position: relative;
|
|
14
|
+
height: var(--dx-g-spacing-3xl);
|
|
15
|
+
border-radius: var(--dx-g-spacing-sm) var(--dx-g-spacing-sm) 0 0;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.nav-list-item_default {
|
|
19
|
+
padding: var(--dx-g-spacing-smd) var(--dx-g-spacing-lg);
|
|
20
|
+
justify-content: center;
|
|
14
21
|
display: flex;
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
22
|
+
font-family: var(--dx-g-font-sans);
|
|
23
|
+
font-size: var(--dx-g-text-base);
|
|
24
|
+
line-height: var(--dx-g-spacing-lg);
|
|
25
|
+
font-weight: var(--dx-g-font-normal);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.nav-list-item_default:hover {
|
|
29
|
+
border-radius: var(--dx-g-spacing-sm) var(--dx-g-spacing-sm) 0 0;
|
|
30
|
+
background: var(--dx-g-cloud-blue-vibrant-95);
|
|
19
31
|
color: var(--dx-g-blue-vibrant-20);
|
|
20
|
-
transition: var(--dx-g-transition-hue-1x);
|
|
21
|
-
cursor: pointer;
|
|
22
|
-
outline-offset: -1px;
|
|
23
32
|
}
|
|
24
33
|
|
|
25
|
-
.nav-list-item_default {
|
|
26
|
-
border: 0;
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
34
|
+
.nav-list-item_default:focus-visible {
|
|
35
|
+
border-radius: var(--dx-g-spacing-sm) var(--dx-g-spacing-sm) 0 0;
|
|
36
|
+
background: var(--dx-g-cloud-blue-vibrant-95);
|
|
37
|
+
color: var(--dx-g-blue-vibrant-20);
|
|
38
|
+
outline: 2px solid var(--dx-g-blue-vibrant-60);
|
|
30
39
|
}
|
|
31
40
|
|
|
32
41
|
.nav-list-item_small {
|
|
@@ -46,8 +55,6 @@ button.nav-list-item_small > dx-icon {
|
|
|
46
55
|
margin-left: var(--dx-g-spacing-xs);
|
|
47
56
|
}
|
|
48
57
|
|
|
49
|
-
.nav-list-item_default:hover,
|
|
50
|
-
.nav-list-item_default:active,
|
|
51
58
|
:host([aria-expanded="true"]) button.nav-list-item_default {
|
|
52
59
|
background: var(
|
|
53
60
|
--dx-g-brand-current-button-color-background-inactive,
|
|
@@ -76,11 +83,26 @@ button.nav-list-item:active > dx-icon,
|
|
|
76
83
|
}
|
|
77
84
|
|
|
78
85
|
.nav-list-item_default.state-active {
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
86
|
+
color: var(--dx-g-blue-vibrant-50);
|
|
87
|
+
font-weight: var(--dx-g-font-bold);
|
|
88
|
+
padding: var(--dx-g-spacing-smd) var(--dx-g-spacing-lg)
|
|
89
|
+
var(--dx-g-spacing-sm) var(--dx-g-spacing-lg);
|
|
90
|
+
border-bottom: var(--dx-g-spacing-xs) solid var(--dx-g-blue-vibrant-50);
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.nav-list-item_default.state-active:hover {
|
|
94
|
+
border-radius: var(--dx-g-spacing-sm) var(--dx-g-spacing-sm) 0 0;
|
|
95
|
+
background: var(--dx-g-cloud-blue-vibrant-95);
|
|
96
|
+
border-bottom: var(--dx-g-spacing-xs) solid var(--dx-g-blue-vibrant-20);
|
|
97
|
+
color: var(--dx-g-blue-vibrant-20);
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.nav-list-item_default.state-active:focus-visible {
|
|
101
|
+
border-radius: var(--dx-g-spacing-sm) var(--dx-g-spacing-sm) 0 0;
|
|
102
|
+
background: var(--dx-g-cloud-blue-vibrant-95);
|
|
103
|
+
border-bottom: var(--dx-g-spacing-xs) solid var(--dx-g-blue-vibrant-20);
|
|
104
|
+
outline: 2px solid var(--dx-g-blue-vibrant-60);
|
|
105
|
+
color: var(--dx-g-blue-vibrant-20);
|
|
84
106
|
}
|
|
85
107
|
|
|
86
108
|
@media (max-width: 1160px) {
|
|
@@ -100,3 +122,10 @@ button.nav-list-item:active > dx-icon,
|
|
|
100
122
|
);
|
|
101
123
|
}
|
|
102
124
|
}
|
|
125
|
+
|
|
126
|
+
@media (max-width: 768px) {
|
|
127
|
+
.nav-list-item {
|
|
128
|
+
height: var(--dx-g-spacing-3xl);
|
|
129
|
+
display: flex;
|
|
130
|
+
}
|
|
131
|
+
}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { logCoveoPageView } from "docUtils/utils";
|
|
1
2
|
import { LightningElement, api } from "lwc";
|
|
2
3
|
|
|
3
4
|
const REDUNDANT_INSTANCE_ERROR_MESSAGE =
|
|
@@ -25,6 +26,8 @@ export default class TrafficLabeler extends LightningElement {
|
|
|
25
26
|
} else {
|
|
26
27
|
console.error(REDUNDANT_INSTANCE_ERROR_MESSAGE);
|
|
27
28
|
}
|
|
29
|
+
|
|
30
|
+
logCoveoPageView(this.coveoOrganizationId, this.coveoAnalyticsToken);
|
|
28
31
|
}
|
|
29
32
|
|
|
30
33
|
async loadClearBitData() {
|
|
@@ -14,8 +14,8 @@ button:focus {
|
|
|
14
14
|
}
|
|
15
15
|
|
|
16
16
|
.tree-children-loading {
|
|
17
|
-
margin: var(--dx-g-spacing-sm) var(--dx-g-spacing-
|
|
18
|
-
var(--dx-g-spacing-
|
|
17
|
+
margin: var(--dx-g-spacing-sm) var(--dx-g-spacing-lg) var(--dx-g-spacing-md)
|
|
18
|
+
var(--dx-g-spacing-2xl);
|
|
19
19
|
}
|
|
20
20
|
|
|
21
21
|
@media (max-width: 768px) {
|
|
@@ -23,21 +23,23 @@
|
|
|
23
23
|
--tile-height: 20px;
|
|
24
24
|
|
|
25
25
|
font-family: var(--dx-g-font-sans);
|
|
26
|
-
font-size:
|
|
26
|
+
font-size: 14px;
|
|
27
27
|
line-height: var(--tile-height);
|
|
28
|
+
font-weight: var(--dx-g-font-normal);
|
|
28
29
|
}
|
|
29
30
|
|
|
30
31
|
.tile-root {
|
|
31
|
-
font-family: var(--dx-g-font-
|
|
32
|
+
font-family: var(--dx-g-font-sans);
|
|
32
33
|
font-size: var(--dx-g-text-sm);
|
|
33
|
-
font-weight: var(--dx-g-font-
|
|
34
|
-
color: var(--dx-g-blue-vibrant-
|
|
34
|
+
font-weight: var(--dx-g-font-bold);
|
|
35
|
+
color: var(--dx-g-blue-vibrant-20);
|
|
35
36
|
display: block;
|
|
36
37
|
}
|
|
37
38
|
|
|
38
39
|
.tile-icon {
|
|
39
40
|
align-items: center;
|
|
40
41
|
height: var(--tile-height);
|
|
42
|
+
padding-right: calc(var(--dx-g-spacing-xs) + 2px);
|
|
41
43
|
}
|
|
42
44
|
|
|
43
45
|
.tile-label {
|
|
@@ -54,95 +56,102 @@
|
|
|
54
56
|
|
|
55
57
|
.tile-with-children .tile-expand-icon {
|
|
56
58
|
order: 1;
|
|
57
|
-
padding-right: var(--dx-g-spacing-xs);
|
|
58
59
|
}
|
|
59
60
|
|
|
60
61
|
.indentation {
|
|
61
|
-
padding-left: var(--indentation);
|
|
62
|
+
padding-left: calc(var(--indentation) + var(--dx-g-spacing-2xs));
|
|
62
63
|
}
|
|
63
64
|
|
|
64
65
|
.tile-with-children .indentation {
|
|
65
66
|
padding-left: calc(var(--indentation) - var(--base-indentation));
|
|
66
67
|
}
|
|
67
68
|
|
|
69
|
+
.tile-root-with-child .indentation {
|
|
70
|
+
padding-left: 0;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
[aria-level="2"] {
|
|
74
|
+
--indentation: var(--dx-g-spacing-md);
|
|
75
|
+
}
|
|
76
|
+
|
|
68
77
|
[aria-level="3"] {
|
|
69
|
-
--indentation: var(--base-indentation);
|
|
78
|
+
--indentation: calc(2 * var(--base-indentation));
|
|
70
79
|
}
|
|
71
80
|
|
|
72
81
|
[aria-level="4"] {
|
|
73
|
-
--indentation: calc(
|
|
82
|
+
--indentation: calc(3 * var(--base-indentation));
|
|
74
83
|
}
|
|
75
84
|
|
|
76
85
|
[aria-level="5"] {
|
|
77
|
-
--indentation: calc(
|
|
86
|
+
--indentation: calc(4 * var(--base-indentation));
|
|
78
87
|
}
|
|
79
88
|
|
|
80
89
|
[aria-level="6"] {
|
|
81
|
-
--indentation: calc(
|
|
90
|
+
--indentation: calc(5 * var(--base-indentation));
|
|
82
91
|
}
|
|
83
92
|
|
|
84
93
|
[aria-level="7"] {
|
|
85
|
-
--indentation: calc(
|
|
94
|
+
--indentation: calc(6 * var(--base-indentation));
|
|
86
95
|
}
|
|
87
96
|
|
|
88
97
|
[aria-level="8"] {
|
|
89
|
-
--indentation: calc(
|
|
98
|
+
--indentation: calc(7 * var(--base-indentation));
|
|
90
99
|
}
|
|
91
100
|
|
|
92
101
|
[aria-level="9"] {
|
|
93
|
-
--indentation: calc(
|
|
102
|
+
--indentation: calc(8 * var(--base-indentation));
|
|
94
103
|
}
|
|
95
104
|
|
|
96
105
|
[aria-level="10"] {
|
|
97
|
-
--indentation: calc(
|
|
106
|
+
--indentation: calc(9 * var(--base-indentation));
|
|
98
107
|
}
|
|
99
108
|
|
|
100
109
|
[aria-level="11"] {
|
|
101
|
-
--indentation: calc(
|
|
110
|
+
--indentation: calc(10 * var(--base-indentation));
|
|
102
111
|
}
|
|
103
112
|
|
|
104
113
|
[aria-level="12"] {
|
|
105
|
-
--indentation: calc(
|
|
114
|
+
--indentation: calc(11 * var(--base-indentation));
|
|
106
115
|
}
|
|
107
116
|
|
|
108
117
|
[aria-level="13"] {
|
|
109
|
-
--indentation: calc(
|
|
118
|
+
--indentation: calc(12 * var(--base-indentation));
|
|
110
119
|
}
|
|
111
120
|
|
|
112
121
|
[aria-level="14"] {
|
|
113
|
-
--indentation: calc(
|
|
122
|
+
--indentation: calc(13 * var(--base-indentation));
|
|
114
123
|
}
|
|
115
124
|
|
|
116
125
|
[aria-level="15"] {
|
|
117
|
-
--indentation: calc(
|
|
126
|
+
--indentation: calc(14 * var(--base-indentation));
|
|
118
127
|
}
|
|
119
128
|
|
|
120
129
|
[aria-level="16"] {
|
|
121
|
-
--indentation: calc(
|
|
130
|
+
--indentation: calc(15 * var(--base-indentation));
|
|
122
131
|
}
|
|
123
132
|
|
|
124
133
|
[aria-level="17"] {
|
|
125
|
-
--indentation: calc(
|
|
134
|
+
--indentation: calc(16 * var(--base-indentation));
|
|
126
135
|
}
|
|
127
136
|
|
|
128
137
|
[aria-level="18"] {
|
|
129
|
-
--indentation: calc(
|
|
138
|
+
--indentation: calc(17 * var(--base-indentation));
|
|
130
139
|
}
|
|
131
140
|
|
|
132
141
|
[aria-level="19"] {
|
|
133
|
-
--indentation: calc(
|
|
142
|
+
--indentation: calc(18 * var(--base-indentation));
|
|
134
143
|
}
|
|
135
144
|
|
|
136
145
|
[aria-level="20"] {
|
|
137
|
-
--indentation: calc(
|
|
146
|
+
--indentation: calc(19 * var(--base-indentation));
|
|
138
147
|
}
|
|
139
148
|
|
|
140
149
|
[aria-level="21"] {
|
|
141
|
-
--indentation: calc(
|
|
150
|
+
--indentation: calc(20 * var(--base-indentation));
|
|
142
151
|
}
|
|
143
152
|
|
|
144
153
|
[aria-level="22"] {
|
|
145
|
-
--indentation: calc(
|
|
154
|
+
--indentation: calc(21 * var(--base-indentation));
|
|
146
155
|
}
|
|
147
156
|
|
|
148
157
|
dx-metadata-badge {
|
|
@@ -181,10 +190,10 @@ a {
|
|
|
181
190
|
|
|
182
191
|
a:link,
|
|
183
192
|
a:visited {
|
|
184
|
-
color: var(--dx-g-
|
|
193
|
+
color: var(--dx-g-blue-vibrant-20);
|
|
185
194
|
}
|
|
186
195
|
|
|
187
196
|
a:visited.tile-root,
|
|
188
197
|
a:link.tile-root {
|
|
189
|
-
color: var(--dx-g-blue-vibrant-
|
|
198
|
+
color: var(--dx-g-blue-vibrant-20);
|
|
190
199
|
}
|
|
@@ -1,12 +1,6 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<a href={href} class={tileClass} target={target}>
|
|
3
3
|
<div class="flex indentation" role="heading" aria-level={tileAriaLevel}>
|
|
4
|
-
<span
|
|
5
|
-
class="tile-label sidebar-item-truncate-text"
|
|
6
|
-
title={treeNode.label}
|
|
7
|
-
>
|
|
8
|
-
{treeNode.label}
|
|
9
|
-
</span>
|
|
10
4
|
<div class="flex tile-expand-icon tile-icon" if:true={showArrow}>
|
|
11
5
|
<dx-icon
|
|
12
6
|
aria-expanded={isExpanded}
|
|
@@ -16,6 +10,12 @@
|
|
|
16
10
|
onclick={onClickIcon}
|
|
17
11
|
></dx-icon>
|
|
18
12
|
</div>
|
|
13
|
+
<span
|
|
14
|
+
class="tile-label sidebar-item-truncate-text"
|
|
15
|
+
title={treeNode.label}
|
|
16
|
+
>
|
|
17
|
+
{treeNode.label}
|
|
18
|
+
</span>
|
|
19
19
|
<dx-metadata-badge
|
|
20
20
|
if:true={showMethod}
|
|
21
21
|
class="flex tile-icon"
|
|
@@ -37,7 +37,7 @@ export default class TreeTile extends LightningElement {
|
|
|
37
37
|
}
|
|
38
38
|
|
|
39
39
|
private get iconSize() {
|
|
40
|
-
return
|
|
40
|
+
return "xsmall";
|
|
41
41
|
}
|
|
42
42
|
|
|
43
43
|
private get metadataBadgeColor(): string | undefined {
|
|
@@ -62,6 +62,7 @@ export default class TreeTile extends LightningElement {
|
|
|
62
62
|
return cx("tile", "sidebar-item", {
|
|
63
63
|
"tile-root": this.isRoot,
|
|
64
64
|
"tile-with-children": !this.isRoot && this.hasChildren,
|
|
65
|
+
"tile-root-with-child": this.isRoot && this.showArrow,
|
|
65
66
|
"sidebar-item-selected": this.isSelected
|
|
66
67
|
});
|
|
67
68
|
}
|
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
import { LightningElement } from "lwc";
|
|
1
|
+
import { LightningElement, api } from "lwc";
|
|
2
|
+
import type { OptionWithLink } from "typings/custom";
|
|
3
|
+
import { toJson } from "dxUtils/normalizers";
|
|
2
4
|
|
|
3
5
|
export const HEIGHT_OF_SIDEBAR_ITEM = 32;
|
|
4
6
|
export const WAIT_TIME_BEFORE_SCROLL_IN_MS = 500;
|
|
@@ -8,6 +10,35 @@ export class SidebarBase extends LightningElement {
|
|
|
8
10
|
|
|
9
11
|
selectedElement: HTMLElement | null = null;
|
|
10
12
|
timerId: ReturnType<typeof setTimeout> | null = null;
|
|
13
|
+
_languages!: OptionWithLink[];
|
|
14
|
+
mobile: boolean = true;
|
|
15
|
+
expanded: boolean = true;
|
|
16
|
+
_value?: string = undefined;
|
|
17
|
+
showBoxShadow: boolean = false;
|
|
18
|
+
private scrolling: boolean = false;
|
|
19
|
+
|
|
20
|
+
@api langValuePath: string = "id";
|
|
21
|
+
@api language!: string;
|
|
22
|
+
@api bailHref!: string;
|
|
23
|
+
@api bailLabel!: string;
|
|
24
|
+
|
|
25
|
+
@api
|
|
26
|
+
get languages() {
|
|
27
|
+
return this._languages;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
set languages(value) {
|
|
31
|
+
this._languages = toJson(value);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
@api
|
|
35
|
+
get value() {
|
|
36
|
+
return this._value;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
set value(value) {
|
|
40
|
+
this._value = value;
|
|
41
|
+
}
|
|
11
42
|
|
|
12
43
|
get sidebarContent() {
|
|
13
44
|
if (!this._sidebarContent) {
|
|
@@ -18,6 +49,29 @@ export class SidebarBase extends LightningElement {
|
|
|
18
49
|
return this._sidebarContent;
|
|
19
50
|
}
|
|
20
51
|
|
|
52
|
+
/**
|
|
53
|
+
* This method is to handle the scroll event for LNB and show box shadow
|
|
54
|
+
* @param scrollEvent
|
|
55
|
+
*/
|
|
56
|
+
handleScroll(scrollEvent: any) {
|
|
57
|
+
const lnb = scrollEvent.target;
|
|
58
|
+
|
|
59
|
+
if (!this.scrolling) {
|
|
60
|
+
this.scrolling = true;
|
|
61
|
+
// Set a timeout to handle scroll event after a delay
|
|
62
|
+
setTimeout(() => {
|
|
63
|
+
// Check if lnb is scrolled
|
|
64
|
+
if (lnb.scrollTop > 0 && lnb.scrollHeight > lnb.clientHeight) {
|
|
65
|
+
this.showBoxShadow = true;
|
|
66
|
+
} else {
|
|
67
|
+
this.showBoxShadow = false;
|
|
68
|
+
}
|
|
69
|
+
// Reset scrolling back to false after handling the scroll
|
|
70
|
+
this.scrolling = false;
|
|
71
|
+
}, 200);
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
21
75
|
renderedCallback(): void {
|
|
22
76
|
/**
|
|
23
77
|
* Implementing debouncing kind of logic here to scroll to selected element once tree rendering is done
|
|
@@ -62,4 +116,45 @@ export class SidebarBase extends LightningElement {
|
|
|
62
116
|
this.selectedElement = null;
|
|
63
117
|
}
|
|
64
118
|
}
|
|
119
|
+
|
|
120
|
+
onMediaChange = (event: MediaQueryListEvent | MediaQueryList) => {
|
|
121
|
+
this.mobile = event.matches;
|
|
122
|
+
this.expanded = !this.mobile;
|
|
123
|
+
};
|
|
124
|
+
|
|
125
|
+
onSelect(event: CustomEvent) {
|
|
126
|
+
this._value = event.detail.name;
|
|
127
|
+
|
|
128
|
+
if (this.mobile) {
|
|
129
|
+
this.onToggleClick();
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
onToggleClick() {
|
|
134
|
+
this.expanded = !this.expanded;
|
|
135
|
+
this.dispatchEvent(
|
|
136
|
+
new CustomEvent("togglesidebar", {
|
|
137
|
+
detail: {
|
|
138
|
+
open: this.expanded,
|
|
139
|
+
bubbles: true,
|
|
140
|
+
composed: true
|
|
141
|
+
}
|
|
142
|
+
})
|
|
143
|
+
);
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
private get hasMobileSidebarFooter(): boolean {
|
|
147
|
+
return this.mobile && this.languages?.length > 1 && this.expanded;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
private get hasSidebarFooter(): boolean {
|
|
151
|
+
return this.languages?.length > 1 || Boolean(this.bailHref);
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
private get sidebarContentClass(): string {
|
|
155
|
+
const sidebarConterCss = "sidebar-content sidebar-content-tree";
|
|
156
|
+
return this.hasSidebarFooter || this.hasMobileSidebarFooter
|
|
157
|
+
? sidebarConterCss + " sidebar-content-hasfooter"
|
|
158
|
+
: sidebarConterCss;
|
|
159
|
+
}
|
|
65
160
|
}
|
|
@@ -3,6 +3,8 @@
|
|
|
3
3
|
|
|
4
4
|
:host {
|
|
5
5
|
z-index: var(--dx-g-z-index-500);
|
|
6
|
+
|
|
7
|
+
--dx-g-doc-header-main-nav-height: 51px;
|
|
6
8
|
}
|
|
7
9
|
|
|
8
10
|
.header_l2_group-nav_overflow {
|
|
@@ -58,8 +60,9 @@ header.state-show-mobile-nav .header_l2_group-nav_overflow {
|
|
|
58
60
|
/* Second row */
|
|
59
61
|
|
|
60
62
|
.header_l2 {
|
|
61
|
-
background:
|
|
62
|
-
padding: var(--dx-g-spacing-
|
|
63
|
+
background: white;
|
|
64
|
+
padding: var(--dx-g-spacing-smd) var(--dx-g-spacing-lg)
|
|
65
|
+
var(--dx-g-spacing-smd) var(--dx-g-spacing-2xl);
|
|
63
66
|
}
|
|
64
67
|
|
|
65
68
|
.header_l2_group {
|
|
@@ -70,6 +73,7 @@ header.state-show-mobile-nav .header_l2_group-nav_overflow {
|
|
|
70
73
|
|
|
71
74
|
.header_l2_group-title {
|
|
72
75
|
flex-shrink: 0;
|
|
76
|
+
padding: var(--dx-g-spacing-smd) 0 calc(var(--dx-g-spacing-smd) - 1px) 0;
|
|
73
77
|
}
|
|
74
78
|
|
|
75
79
|
.header_l2_group-title
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
@import "dxHelpers/text";
|
|
3
3
|
|
|
4
4
|
:host {
|
|
5
|
-
--dx-c-sidebar-width:
|
|
5
|
+
--dx-c-sidebar-width: 337px;
|
|
6
6
|
--dx-c-sidebar-button-color: var(--dx-g-blue-vibrant-50);
|
|
7
7
|
--dx-c-sidebar-button-background: white;
|
|
8
8
|
--dx-c-sidebar-button-border: white;
|
|
@@ -13,10 +13,6 @@
|
|
|
13
13
|
--dx-c-sidebar-vertical-padding: var(--dx-g-spacing-md);
|
|
14
14
|
}
|
|
15
15
|
|
|
16
|
-
dx-tree:not(:last-child) {
|
|
17
|
-
margin-bottom: var(--dx-g-spacing-sm);
|
|
18
|
-
}
|
|
19
|
-
|
|
20
16
|
.header {
|
|
21
17
|
box-sizing: content-box;
|
|
22
18
|
display: flex;
|
|
@@ -31,8 +27,11 @@ dx-tree:not(:last-child) {
|
|
|
31
27
|
}
|
|
32
28
|
|
|
33
29
|
.padding-horizontal {
|
|
34
|
-
padding
|
|
35
|
-
|
|
30
|
+
padding: 0 var(--dx-g-spacing-lg) 0 var(--dx-g-spacing-2xl);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.padding-horizontal[show-shadow="true"] {
|
|
34
|
+
box-shadow: 0 4px 4px -2px var(--dx-g-gray-90);
|
|
36
35
|
}
|
|
37
36
|
|
|
38
37
|
.header-title {
|
|
@@ -53,7 +52,7 @@ dx-tree:not(:last-child) {
|
|
|
53
52
|
}
|
|
54
53
|
|
|
55
54
|
.container {
|
|
56
|
-
background-color:
|
|
55
|
+
background-color: white;
|
|
57
56
|
display: flex;
|
|
58
57
|
flex-direction: column;
|
|
59
58
|
height: var(--dx-c-sidebar-height);
|
|
@@ -66,10 +65,10 @@ dx-tree:not(:last-child) {
|
|
|
66
65
|
var(--dx-c-sidebar-left-padding) - var(--dx-g-spacing-md)
|
|
67
66
|
);
|
|
68
67
|
|
|
68
|
+
border-right: 1px solid var(--dx-g-gray-90);
|
|
69
69
|
box-shadow: 2px 0 0 0 var(--border-color);
|
|
70
70
|
min-height: var(--dx-c-sidebar-min-height);
|
|
71
|
-
padding: var(--dx-c-sidebar-vertical-padding) 0
|
|
72
|
-
var(--dx-c-sidebar-vertical-padding) var(--left-spacing);
|
|
71
|
+
padding: var(--dx-c-sidebar-vertical-padding) 0 var(--dx-g-spacing-2xs) 0;
|
|
73
72
|
position: relative;
|
|
74
73
|
}
|
|
75
74
|
|
|
@@ -114,7 +113,7 @@ dx-tree:not(:last-child) {
|
|
|
114
113
|
}
|
|
115
114
|
|
|
116
115
|
.search {
|
|
117
|
-
padding-bottom: var(--dx-g-spacing-
|
|
116
|
+
padding-bottom: var(--dx-g-spacing-smd);
|
|
118
117
|
}
|
|
119
118
|
|
|
120
119
|
.search-box {
|
|
@@ -127,9 +126,33 @@ dx-tree:not(:last-child) {
|
|
|
127
126
|
white-space: nowrap;
|
|
128
127
|
}
|
|
129
128
|
|
|
130
|
-
|
|
129
|
+
.footer-nav {
|
|
130
|
+
display: flex;
|
|
131
|
+
padding: var(--dx-g-spacing-xs) var(--dx-g-spacing-sm)
|
|
132
|
+
var(--dx-g-spacing-xs) var(--dx-g-spacing-xl);
|
|
133
|
+
position: fixed;
|
|
134
|
+
bottom: 0;
|
|
135
|
+
left: 0;
|
|
136
|
+
width: inherit;
|
|
137
|
+
background: white;
|
|
138
|
+
border-top: 1px solid var(--dx-g-gray-90);
|
|
139
|
+
border-right: 1px solid var(--dx-g-gray-90);
|
|
140
|
+
height: var(--dx-g-spacing-2xl);
|
|
141
|
+
align-items: center;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.sidebar-content-hasfooter {
|
|
145
|
+
margin-bottom: var(--dx-g-spacing-2xl);
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
@media screen and (max-width: 1279px) {
|
|
149
|
+
.padding-horizontal {
|
|
150
|
+
padding-left: var(--dx-g-spacing-xl);
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
@media screen and (max-width: 767px) {
|
|
131
155
|
.padding-horizontal {
|
|
132
156
|
padding-left: var(--dx-g-spacing-lg);
|
|
133
|
-
padding-right: var(--dx-g-spacing-md);
|
|
134
157
|
}
|
|
135
158
|
}
|
|
@@ -8,14 +8,56 @@
|
|
|
8
8
|
|
|
9
9
|
.sidebar-item-selected {
|
|
10
10
|
background: var(--dx-g-cloud-blue-vibrant-95);
|
|
11
|
-
box-shadow: inset var(--dx-g-spacing-xs) 0 0 0 var(--dx-g-blue-vibrant-
|
|
11
|
+
box-shadow: inset var(--dx-g-spacing-xs) 0 0 0 var(--dx-g-blue-vibrant-40);
|
|
12
12
|
border-radius: 0;
|
|
13
|
+
color: var(--dx-g-blue-vibrant-40) !important;
|
|
13
14
|
}
|
|
14
15
|
|
|
15
16
|
.sidebar-item {
|
|
16
|
-
padding: 6px var(--dx-g-spacing-
|
|
17
|
+
padding: 6px var(--dx-g-spacing-lg) 6px var(--dx-g-spacing-2xl);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.sidebar-item:not(.sidebar-item-selected):focus-visible {
|
|
21
|
+
padding: calc(var(--dx-g-spacing-sm) - var(--dx-g-spacing-2xs)) 0;
|
|
22
|
+
margin: 0 var(--dx-g-spacing-lg) 0 var(--dx-g-spacing-2xl);
|
|
23
|
+
outline: var(--dx-g-spacing-2xs) solid var(--dx-g-blue-vibrant-40);
|
|
24
|
+
border-radius: var(--dx-g-spacing-2xs);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.sidebar-item-selected:focus-visible {
|
|
28
|
+
padding-top: 0;
|
|
29
|
+
padding-bottom: 0;
|
|
30
|
+
outline: none;
|
|
31
|
+
|
|
32
|
+
.indentation {
|
|
33
|
+
outline: var(--dx-g-spacing-2xs) solid var(--dx-g-blue-vibrant-40);
|
|
34
|
+
border-radius: var(--dx-g-spacing-2xs);
|
|
35
|
+
padding: calc(var(--dx-g-spacing-sm) - var(--dx-g-spacing-2xs)) 0;
|
|
36
|
+
}
|
|
17
37
|
}
|
|
18
38
|
|
|
19
39
|
.sidebar-item:not(.sidebar-item-selected):hover {
|
|
20
|
-
|
|
40
|
+
color: var(--dx-g-blue-vibrant-50);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
@media (max-width: 1279px) {
|
|
44
|
+
.sidebar-item {
|
|
45
|
+
padding: 6px var(--dx-g-spacing-lg) 6px var(--dx-g-spacing-xl);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.sidebar-item:not(.sidebar-item-selected):focus-visible {
|
|
49
|
+
padding-left: 0;
|
|
50
|
+
margin-left: var(--dx-g-spacing-xl);
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
@media (max-width: 767px) {
|
|
55
|
+
.sidebar-item {
|
|
56
|
+
padding: 6px var(--dx-g-spacing-lg) 6px var(--dx-g-spacing-lg);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.sidebar-item:not(.sidebar-item-selected):focus-visible {
|
|
60
|
+
padding-left: 0;
|
|
61
|
+
margin-left: var(--dx-g-spacing-lg);
|
|
62
|
+
}
|
|
21
63
|
}
|
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.
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<template></template>
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { logCoveoPageView } from "docUtils/utils";
|
|
2
|
-
import { LightningElement, api } from "lwc";
|
|
3
|
-
|
|
4
|
-
export default class CoveoLabeler extends LightningElement {
|
|
5
|
-
@api coveoOrganizationId!: string;
|
|
6
|
-
@api coveoAnalyticsToken!: string;
|
|
7
|
-
|
|
8
|
-
connectedCallback(): void {
|
|
9
|
-
logCoveoPageView(this.coveoOrganizationId, this.coveoAnalyticsToken);
|
|
10
|
-
}
|
|
11
|
-
}
|