@salesforcedevs/dx-components 1.15.7 → 1.16.1
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 +2 -2
- package/src/modules/dx/cardTestimonial/cardTestimonial.html +2 -0
- package/src/modules/dx/cardTestimonial/cardTestimonial.ts +1 -0
- package/src/modules/dx/sidebar/sidebar.html +19 -1
- package/src/modules/dx/sidebarOld/sidebarOld.html +19 -1
- package/src/modules/dxBaseElements/sidebarBase/sidebarBase.ts +12 -0
- package/src/modules/dxHelpers/commonSidebar/commonSidebar.css +22 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@salesforcedevs/dx-components",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.16.1",
|
|
4
4
|
"description": "DX Lightning web components",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"engines": {
|
|
@@ -46,5 +46,5 @@
|
|
|
46
46
|
"volta": {
|
|
47
47
|
"node": "20.19.0"
|
|
48
48
|
},
|
|
49
|
-
"gitHead": "
|
|
49
|
+
"gitHead": "b7e30d7ee71f71ec967667e27b2c40c58ee8eec9"
|
|
50
50
|
}
|
|
@@ -24,7 +24,25 @@
|
|
|
24
24
|
</div>
|
|
25
25
|
<div class="sidebar-header" show-shadow={showBoxShadow}>
|
|
26
26
|
<div class="header padding-horizontal" lwc:if={isDesktop}>
|
|
27
|
-
<
|
|
27
|
+
<div class="header-wrapper">
|
|
28
|
+
<!-- To-Do: Move the devCenter as a new component and use it here, as devCenter is also used in Sidebar now -->
|
|
29
|
+
<div lwc:if={devCenter} class="link-row">
|
|
30
|
+
<a href={devCenter.link}>
|
|
31
|
+
<dx-icon symbol="back"></dx-icon>
|
|
32
|
+
<dx-icon
|
|
33
|
+
class="brand-icon"
|
|
34
|
+
lwc:if={devCenter.icon}
|
|
35
|
+
sprite="salesforcebrand"
|
|
36
|
+
symbol={brand}
|
|
37
|
+
size="large"
|
|
38
|
+
></dx-icon>
|
|
39
|
+
<span class="subtitle dx-text-body-4">
|
|
40
|
+
{devCenter.title}
|
|
41
|
+
</span>
|
|
42
|
+
</a>
|
|
43
|
+
</div>
|
|
44
|
+
<h2 class="dx-text-display-6 header-title">{header}</h2>
|
|
45
|
+
</div>
|
|
28
46
|
</div>
|
|
29
47
|
<div class="search padding-horizontal">
|
|
30
48
|
<dx-sidebar-search
|
|
@@ -26,7 +26,25 @@
|
|
|
26
26
|
<template lwc:if={expanded}>
|
|
27
27
|
<div class="sidebar-header" show-shadow={showBoxShadow}>
|
|
28
28
|
<div class="header padding-horizontal" lwc:if={isDesktop}>
|
|
29
|
-
|
|
29
|
+
<!-- To-Do: Move the devCenter as a new component and use it here, as devCenter is also used in Sidebar now -->
|
|
30
|
+
<div class="header-wrapper">
|
|
31
|
+
<div lwc:if={devCenter} class="link-row">
|
|
32
|
+
<a href={devCenter.link}>
|
|
33
|
+
<dx-icon symbol="back"></dx-icon>
|
|
34
|
+
<dx-icon
|
|
35
|
+
class="brand-icon"
|
|
36
|
+
lwc:if={devCenter.icon}
|
|
37
|
+
sprite="salesforcebrand"
|
|
38
|
+
symbol={brand}
|
|
39
|
+
size="large"
|
|
40
|
+
></dx-icon>
|
|
41
|
+
<span class="subtitle dx-text-body-4">
|
|
42
|
+
{devCenter.title}
|
|
43
|
+
</span>
|
|
44
|
+
</a>
|
|
45
|
+
</div>
|
|
46
|
+
<h2 class="dx-text-display-6 header-title">{header}</h2>
|
|
47
|
+
</div>
|
|
30
48
|
</div>
|
|
31
49
|
<div class="search padding-horizontal">
|
|
32
50
|
<dx-input
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { LightningElement, api } from "lwc";
|
|
2
2
|
import type { OptionWithLink } from "typings/custom";
|
|
3
3
|
import { toJson } from "dxUtils/normalizers";
|
|
4
|
+
import { Brand, DevCenterConfig } from "typings/custom";
|
|
4
5
|
|
|
5
6
|
export const HEIGHT_OF_SIDEBAR_ITEM = 32;
|
|
6
7
|
export const WAIT_TIME_BEFORE_SCROLL_IN_MS = 500;
|
|
@@ -16,11 +17,22 @@ export class SidebarBase extends LightningElement {
|
|
|
16
17
|
_value?: string = undefined;
|
|
17
18
|
showBoxShadow: boolean = false;
|
|
18
19
|
private scrolling: boolean = false;
|
|
20
|
+
_devCenter!: DevCenterConfig;
|
|
19
21
|
|
|
20
22
|
@api langValuePath: string = "id";
|
|
21
23
|
@api language!: string;
|
|
22
24
|
@api bailHref!: string;
|
|
23
25
|
@api bailLabel!: string;
|
|
26
|
+
@api brand: Brand | null = null;
|
|
27
|
+
|
|
28
|
+
@api
|
|
29
|
+
get devCenter(): DevCenterConfig {
|
|
30
|
+
return this._devCenter;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
set devCenter(value) {
|
|
34
|
+
this._devCenter = toJson(value);
|
|
35
|
+
}
|
|
24
36
|
|
|
25
37
|
@api
|
|
26
38
|
get languages() {
|
|
@@ -55,6 +55,28 @@
|
|
|
55
55
|
padding-left: var(--dx-g-global-header-padding-horizontal);
|
|
56
56
|
}
|
|
57
57
|
|
|
58
|
+
.header-wrapper {
|
|
59
|
+
--dx-c-icon-color: var(--dx-g-blue-vibrant-20);
|
|
60
|
+
|
|
61
|
+
display: flex;
|
|
62
|
+
flex-direction: column;
|
|
63
|
+
gap: var(--dx-g-spacing-xs);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.subtitle {
|
|
67
|
+
color: var(--dx-g-blue-vibrant-20);
|
|
68
|
+
font-weight: var(--dx-g-font-bold);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.link-row a {
|
|
72
|
+
display: flex;
|
|
73
|
+
align-items: center;
|
|
74
|
+
text-decoration: none;
|
|
75
|
+
font-weight: var(--dx-g-font-bold);
|
|
76
|
+
gap: var(--dx-g-spacing-xs);
|
|
77
|
+
color: var(--dx-g-blue-vibrant-20);
|
|
78
|
+
}
|
|
79
|
+
|
|
58
80
|
.container {
|
|
59
81
|
background-color: white;
|
|
60
82
|
display: flex;
|