@salesforcedevs/dx-components 1.17.1 → 1.17.2
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
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@salesforcedevs/dx-components",
|
|
3
|
-
"version": "1.17.
|
|
3
|
+
"version": "1.17.2",
|
|
4
4
|
"description": "DX Lightning web components",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"engines": {
|
|
@@ -45,5 +45,5 @@
|
|
|
45
45
|
"volta": {
|
|
46
46
|
"node": "20.19.0"
|
|
47
47
|
},
|
|
48
|
-
"gitHead": "
|
|
48
|
+
"gitHead": "456b8ad8b3162df223f9809e66a454cb66b4add0"
|
|
49
49
|
}
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
@import "dxHelpers/reset";
|
|
2
|
+
@import "dxHelpers/text";
|
|
3
|
+
|
|
4
|
+
.error_container {
|
|
5
|
+
background-color: #3a49da;
|
|
6
|
+
background-image: url("https://a.sfdcstatic.com/developer-website/images/bottom-right.svg"),
|
|
7
|
+
url("https://a.sfdcstatic.com/developer-website/images/lower-left.svg"),
|
|
8
|
+
url("https://a.sfdcstatic.com/developer-website/images/top-right.svg");
|
|
9
|
+
background-position: right bottom, left 90%, right top;
|
|
10
|
+
background-repeat: no-repeat;
|
|
11
|
+
padding: var(--dx-g-spacing-3xl) calc(var(--dx-g-spacing-3xl) + 20px) 130px
|
|
12
|
+
var(--dx-g-spacing-3xl);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.error_content {
|
|
16
|
+
font-family: var(--dx-g-font-display);
|
|
17
|
+
display: flex;
|
|
18
|
+
align-items: center;
|
|
19
|
+
justify-content: center;
|
|
20
|
+
flex-direction: column;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.error_content > img {
|
|
24
|
+
max-width: unset;
|
|
25
|
+
width: 1276px;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.error_content > h1 {
|
|
29
|
+
color: white;
|
|
30
|
+
font-size: var(--dx-g-text-5xl);
|
|
31
|
+
line-height: var(--dx-g-text-5xl);
|
|
32
|
+
margin-top: -35px;
|
|
33
|
+
text-align: center;
|
|
34
|
+
margin-bottom: 0;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.error_content > p {
|
|
38
|
+
font-size: var(--dx-g-text-lg);
|
|
39
|
+
color: white;
|
|
40
|
+
margin-top: var(--dx-g-spacing-lg);
|
|
41
|
+
margin-bottom: var(--dx-g-spacing-xl);
|
|
42
|
+
text-align: center;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.error_content > dx-button {
|
|
46
|
+
background: white;
|
|
47
|
+
border-radius: var(--dx-g-spacing-xs);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.error_content > dx-button:hover {
|
|
51
|
+
background: var(--dx-g-gray-95);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
@media screen and (max-width: 1276px) {
|
|
55
|
+
.error_content > img {
|
|
56
|
+
max-width: 100%;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
@media screen and (max-width: 960px) {
|
|
61
|
+
.error_container {
|
|
62
|
+
overflow: hidden;
|
|
63
|
+
background-size: 320px, 90px, 90px;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.error_content > img {
|
|
67
|
+
max-width: 768px;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.error_content > h1 {
|
|
71
|
+
font-size: var(--dx-g-text-2xl);
|
|
72
|
+
line-height: var(--dx-g-text-3xl);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.error_content > p {
|
|
76
|
+
font-size: var(--dx-g-text-md);
|
|
77
|
+
margin-top: var(--dx-g-spacing-md);
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
@media screen and (max-width: 480px) {
|
|
82
|
+
.error_container {
|
|
83
|
+
padding-left: var(--dx-g-spacing-xl);
|
|
84
|
+
padding-right: var(--dx-g-spacing-xl);
|
|
85
|
+
padding-bottom: var(--dx-g-spacing-5xl);
|
|
86
|
+
background-size: 260px, 70px, 70px;
|
|
87
|
+
background-position: 80px bottom, left 80%, 105% -13px;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.error_content > img {
|
|
91
|
+
max-width: 558px;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.error_content > h1 {
|
|
95
|
+
font-size: var(--dx-g-text-2xl);
|
|
96
|
+
line-height: var(--dx-g-text-3xl);
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.error_content > p {
|
|
100
|
+
font-size: var(--dx-g-text-md);
|
|
101
|
+
margin-top: var(--dx-g-spacing-md);
|
|
102
|
+
}
|
|
103
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="error_container">
|
|
3
|
+
<div class="error_content">
|
|
4
|
+
<img lwc:if={image} src={image} alt={code} />
|
|
5
|
+
<h1>{header}</h1>
|
|
6
|
+
<p>{subtitle}</p>
|
|
7
|
+
<dx-button
|
|
8
|
+
lwc:if={cta}
|
|
9
|
+
href={contextPath}
|
|
10
|
+
size="large"
|
|
11
|
+
variant="secondary"
|
|
12
|
+
>
|
|
13
|
+
{cta}
|
|
14
|
+
</dx-button>
|
|
15
|
+
</div>
|
|
16
|
+
</div>
|
|
17
|
+
</template>
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
import { LightningElement, api } from "lwc";
|
|
2
|
+
|
|
3
|
+
export default class Error extends LightningElement {
|
|
4
|
+
@api track: boolean = false;
|
|
5
|
+
@api contextPath: string = "";
|
|
6
|
+
@api header: string = "";
|
|
7
|
+
@api subtitle: string = "";
|
|
8
|
+
@api cta?: string;
|
|
9
|
+
@api image!: string;
|
|
10
|
+
@api code!: string;
|
|
11
|
+
|
|
12
|
+
@api
|
|
13
|
+
get suggestions(): string[] {
|
|
14
|
+
return this._suggestions;
|
|
15
|
+
}
|
|
16
|
+
set suggestions(value: string) {
|
|
17
|
+
this._suggestions = JSON.parse(value);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
private _suggestions = [];
|
|
21
|
+
|
|
22
|
+
renderedCallback() {
|
|
23
|
+
// Hide the docs header from 404 pages when URL contains /docs
|
|
24
|
+
this.hideDocsHeader();
|
|
25
|
+
|
|
26
|
+
// Track error events if tracking is enabled
|
|
27
|
+
if (this.track) {
|
|
28
|
+
this.trackErrorEvent();
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
private hideDocsHeader() {
|
|
33
|
+
const docsHeader = document.querySelector("doc-header") as HTMLElement;
|
|
34
|
+
if (docsHeader) {
|
|
35
|
+
docsHeader.style.display = "none";
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
private trackErrorEvent() {
|
|
40
|
+
const notFoundPageEl = document.querySelector(
|
|
41
|
+
".error_container"
|
|
42
|
+
) as HTMLElement;
|
|
43
|
+
if (notFoundPageEl) {
|
|
44
|
+
this.trackEvent(notFoundPageEl, "custEv_error", {
|
|
45
|
+
error_code: this.code,
|
|
46
|
+
error_message: notFoundPageEl.innerText,
|
|
47
|
+
error_type: "page"
|
|
48
|
+
});
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
private trackEvent(element: Element, event: string, payload: any) {
|
|
53
|
+
const TRACKING_EVENT_NAME = "developerwebsite_track";
|
|
54
|
+
const LISTENER_QUEUE = "__DX_INSTRUMENTATION_QUEUE__";
|
|
55
|
+
const LISTENER_INDICATOR = "__DX_INSTRUMENTATION_IS_INITIALIZED__";
|
|
56
|
+
const detail = { event, payload };
|
|
57
|
+
|
|
58
|
+
if ((window as any)[LISTENER_INDICATOR] === undefined) {
|
|
59
|
+
(window as any)[LISTENER_QUEUE] =
|
|
60
|
+
(window as any)[LISTENER_QUEUE] || [];
|
|
61
|
+
(window as any)[LISTENER_QUEUE].push(detail);
|
|
62
|
+
} else {
|
|
63
|
+
const e = new CustomEvent(TRACKING_EVENT_NAME, {
|
|
64
|
+
bubbles: true,
|
|
65
|
+
composed: true,
|
|
66
|
+
detail
|
|
67
|
+
});
|
|
68
|
+
element.dispatchEvent(e);
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
}
|