@salesforcedevs/docs-components 1.3.209-lang5-alpha → 1.3.209-lang6-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
CHANGED
package/package.json
CHANGED
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
@import "dxHelpers/reset";
|
|
2
|
-
|
|
3
|
-
:host {
|
|
4
|
-
--button-primary-color: var(--dx-g-blue-vibrant-50);
|
|
5
|
-
--button-primary-color-hover: var(--dx-g-cloud-blue-vibrant-95);
|
|
6
|
-
--popover-container-open-transform: translateX(-4px) translateY(-8px);
|
|
7
|
-
--popover-transition: none;
|
|
8
|
-
--dx-c-dropdown-option-font-weight: normal;
|
|
9
|
-
--dx-c-dropdown-option-label-color: var(--dx-g-gray-10);
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
.footer-display {
|
|
13
|
-
display: flex;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
.footer_lang-dropdown {
|
|
17
|
-
--dx-c-button-primary-color: var(--button-primary-color);
|
|
18
|
-
--border-color: var(--button-primary-color);
|
|
19
|
-
|
|
20
|
-
display: flex;
|
|
21
|
-
padding: 0 var(--dx-g-spacing-md);
|
|
22
|
-
margin-left: var(--dx-g-spacing-sm);
|
|
23
|
-
height: var(--dx-g-spacing-xl);
|
|
24
|
-
border-radius: var(--dx-g-spacing-xs);
|
|
25
|
-
align-items: center;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
.footer_lang-dropdown[aria-expanded="true"] {
|
|
29
|
-
background-color: var(--dx-g-cloud-blue-vibrant-95);
|
|
30
|
-
|
|
31
|
-
--border-color: var(--dx-g-cloud-blue-vibrant-95);
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
.footer_lang-dropdown:hover,
|
|
35
|
-
.footer_lang-dropdown:active,
|
|
36
|
-
.footer_lang-dropdown:focus,
|
|
37
|
-
.pdf_bail-link:hover {
|
|
38
|
-
background-color: var(--button-primary-color-hover);
|
|
39
|
-
|
|
40
|
-
--border-color: var(--button-primary-color-hover);
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
.pdf_bail-link {
|
|
44
|
-
--dx-c-button-horizontal-spacing: var(--dx-g-spacing-sm);
|
|
45
|
-
--dx-c-button-priamry-color-hover: var(--dx-g-cloud-blue-vibrant-95);
|
|
46
|
-
|
|
47
|
-
padding: 0 var(--dx-g-spacing-md);
|
|
48
|
-
border-radius: var(--dx-g-spacing-xs);
|
|
49
|
-
display: flex;
|
|
50
|
-
height: var(--dx-g-spacing-xl);
|
|
51
|
-
align-items: center;
|
|
52
|
-
}
|
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div if:false={mobile} class="footer-display">
|
|
3
|
-
<dx-button
|
|
4
|
-
if:true={hasBailLink}
|
|
5
|
-
aria-label={bailLabel}
|
|
6
|
-
class="pdf_bail-link"
|
|
7
|
-
href={bailHref}
|
|
8
|
-
onclick={handleBailClick}
|
|
9
|
-
variant="inline"
|
|
10
|
-
icon-size="medium"
|
|
11
|
-
icon-symbol="new_window"
|
|
12
|
-
target="_blank"
|
|
13
|
-
>
|
|
14
|
-
{bailLabel}
|
|
15
|
-
</dx-button>
|
|
16
|
-
<dx-dropdown
|
|
17
|
-
if:true={hasLanguages}
|
|
18
|
-
options={languages}
|
|
19
|
-
small
|
|
20
|
-
value-path={langValuePath}
|
|
21
|
-
value={language}
|
|
22
|
-
onchange={onLangChange}
|
|
23
|
-
>
|
|
24
|
-
<dx-button
|
|
25
|
-
class="footer_lang-dropdown"
|
|
26
|
-
aria-label="Select Language"
|
|
27
|
-
variant="inline"
|
|
28
|
-
icon-size="medium"
|
|
29
|
-
icon-symbol="world"
|
|
30
|
-
>
|
|
31
|
-
{languageLabel}
|
|
32
|
-
</dx-button>
|
|
33
|
-
</dx-dropdown>
|
|
34
|
-
</div>
|
|
35
|
-
<div if:true={mobile} class="footer-display">
|
|
36
|
-
<dx-dropdown
|
|
37
|
-
if:true={hasLanguages}
|
|
38
|
-
options={languages}
|
|
39
|
-
small
|
|
40
|
-
value-path={langValuePath}
|
|
41
|
-
value={language}
|
|
42
|
-
onchange={onLangChange}
|
|
43
|
-
>
|
|
44
|
-
<dx-button
|
|
45
|
-
class="footer_lang-dropdown"
|
|
46
|
-
aria-label="Select Language"
|
|
47
|
-
variant="inline"
|
|
48
|
-
icon-size="small"
|
|
49
|
-
icon-symbol="world"
|
|
50
|
-
>
|
|
51
|
-
{languageLabel}
|
|
52
|
-
</dx-button>
|
|
53
|
-
</dx-dropdown>
|
|
54
|
-
</div>
|
|
55
|
-
</template>
|
|
@@ -1,106 +0,0 @@
|
|
|
1
|
-
/* eslint-disable @lwc/lwc/no-document-query */
|
|
2
|
-
import { LightningElement, api } from "lwc";
|
|
3
|
-
import type { OptionWithLink } from "typings/custom";
|
|
4
|
-
import { toJson } from "dxUtils/normalizers";
|
|
5
|
-
import get from "lodash.get";
|
|
6
|
-
import { track } from "dxUtils/analytics";
|
|
7
|
-
|
|
8
|
-
const MOBILE_SIZE_MATCH = "768px";
|
|
9
|
-
|
|
10
|
-
export default class SidebarFooterNav extends LightningElement {
|
|
11
|
-
@api langValuePath: string = "id";
|
|
12
|
-
@api bailHref?: string | null = null;
|
|
13
|
-
@api bailLabel?: string | null = null;
|
|
14
|
-
|
|
15
|
-
@api
|
|
16
|
-
get languages() {
|
|
17
|
-
return this._languages;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
set languages(value) {
|
|
21
|
-
this._languages = toJson(value);
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
@api
|
|
25
|
-
get language() {
|
|
26
|
-
return this._language;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
set language(value) {
|
|
30
|
-
this._language = value;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
private _languages!: OptionWithLink[];
|
|
34
|
-
private _language: string | null = null;
|
|
35
|
-
private mobile: boolean = false;
|
|
36
|
-
private matchMedia!: MediaQueryList;
|
|
37
|
-
|
|
38
|
-
private get hasLanguages(): boolean {
|
|
39
|
-
return this.languages?.length > 1;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
private get languageLabel(): string {
|
|
43
|
-
const matchingLanguageData = this.language
|
|
44
|
-
? this.languages.find(
|
|
45
|
-
(lang) => get(lang, this.langValuePath) === this.language
|
|
46
|
-
)
|
|
47
|
-
: null;
|
|
48
|
-
return matchingLanguageData?.label || this.languages[0].label;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
get hasBailLink(): boolean {
|
|
52
|
-
return !!(this.bailHref && this.bailLabel);
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
private onLangChange(event: CustomEvent<string>): void {
|
|
56
|
-
const { detail } = event;
|
|
57
|
-
this._language = detail;
|
|
58
|
-
|
|
59
|
-
this.dispatchEvent(
|
|
60
|
-
new CustomEvent("langchange", {
|
|
61
|
-
detail,
|
|
62
|
-
bubbles: true,
|
|
63
|
-
composed: true
|
|
64
|
-
})
|
|
65
|
-
);
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
private getFilename = function (path: string) {
|
|
69
|
-
return path.substring(path.lastIndexOf("/") + 1);
|
|
70
|
-
};
|
|
71
|
-
|
|
72
|
-
private handleBailClick(event: Event) {
|
|
73
|
-
const payload = {
|
|
74
|
-
click_text: "pdf",
|
|
75
|
-
click_url: this.bailHref,
|
|
76
|
-
element_title: "pdf",
|
|
77
|
-
element_type: "link",
|
|
78
|
-
content_category: "download"
|
|
79
|
-
};
|
|
80
|
-
track(event.target!, "custEv_pdfDownload", {
|
|
81
|
-
...payload,
|
|
82
|
-
file_name: this.getFilename(this.bailHref!),
|
|
83
|
-
file_extension: "pdf"
|
|
84
|
-
});
|
|
85
|
-
|
|
86
|
-
track(event.target!, "custEv_linkClick", {
|
|
87
|
-
...payload
|
|
88
|
-
});
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
connectedCallback() {
|
|
92
|
-
this.matchMedia = window.matchMedia(
|
|
93
|
-
`(max-width: ${MOBILE_SIZE_MATCH})`
|
|
94
|
-
);
|
|
95
|
-
this.onMediaChange(this.matchMedia);
|
|
96
|
-
this.matchMedia.addEventListener("change", this.onMediaChange);
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
disconnectedCallback() {
|
|
100
|
-
this.matchMedia.removeEventListener("change", this.onMediaChange);
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
private onMediaChange = (event: MediaQueryListEvent | MediaQueryList) => {
|
|
104
|
-
this.mobile = event.matches;
|
|
105
|
-
};
|
|
106
|
-
}
|