@salesforcedevs/docs-components 1.3.209-lang4-alpha → 1.3.209-tag1-alpha

package/lwc.config.json

@@ -18,7 +18,6 @@
         "doc/overview",
         "doc/phase",
         "doc/xmlContent",
-        "doc/sidebarFooterNav",
         "docUtils/utils"
     ]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.3.209-lang4-alpha",
+    "version": "1.3.209-tag1-alpha",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",

package/src/modules/doc/amfReference/amfReference.html

@@ -16,8 +16,6 @@
         toc-title={tocTitle}
         toc-options={tocOptions}
         enable-slot-change="true"
-        languages={languages}
-        language={language}
     >
         <doc-phase
             slot="doc-phase"

package/src/modules/doc/amfReference/amfReference.ts

@@ -4,7 +4,6 @@ import { sentenceCase } from "sentence-case";
 import qs from "query-string";
 import { AmfModelParser } from "doc/amfModelParser";
 import { normalizeBoolean } from "dxUtils/normalizers";
-import type { OptionWithLink } from "typings/custom";
 import type {
     AmfConfig,
     AmfMetadataTopic,
@@ -49,8 +48,6 @@ export default class AmfReference extends LightningElement {
     @api useOldSidebar: boolean = false;
     @api tocTitle?: string;
     @api tocOptions?: string;
-    @api languages!: OptionWithLink[];
-    @api language!: string;
     @track navigation = [] as NavigationItem[];
     @track versions: Array<ReferenceVersion> = [];
     @track showVersionBanner = false;
@@ -1346,19 +1343,15 @@ export default class AmfReference extends LightningElement {
          * New Title: E1 | Ref Spec2 | Project Name | Salesforce Developer
          *
          */
-        if (titleTag) {
-            let titleTagValue = titleTag.textContent;
-            const titleTagSectionValues: string[] =
-                titleTagValue?.split(TITLE_SEPARATOR);
-            if (titleTagSectionValues) {
-                if (titleTagSectionValues.length <= 3) {
-                    titleTagValue = navTitle + TITLE_SEPARATOR + titleTagValue;
-                } else {
-                    titleTagSectionValues[0] = navTitle;
-                    titleTagValue = titleTagSectionValues.join(TITLE_SEPARATOR);
-                }
-            }
-            titleTag.textContent = titleTagValue;
+        // eslint-disable-next-line @lwc/lwc/no-document-query
+        const coveoTitleMetaTag = document.querySelector(
+            'meta[name="coveo-search-title"]'
+        );
+        if (coveoTitleMetaTag && titleTag && navTitle) {
+            const titleTagValue = titleTag.textContent;
+            const coveoSerachTitle = navTitle + TITLE_SEPARATOR + titleTagValue;
+            coveoTitleMetaTag.setAttribute("content", coveoSerachTitle);
+            titleTag.textContent = coveoSerachTitle;
         }
     }
 

package/src/modules/doc/contentLayout/contentLayout.css

@@ -61,16 +61,12 @@ dx-toc {
     flex-direction: row;
     justify-content: center;
     max-width: var(--dx-g-doc-content-max-width);
-
-    /* Derived this manually by substracting (topHeader, doc header, banner and the content). */
-    min-height: 62vh;
     margin: auto;
     padding: 0 var(--dx-g-global-header-padding-horizontal);
-    margin-bottom: calc(2 * (var(--dx-g-spacing-5xl) + 4px));
 }
 
 .content-body {
-    margin: var(--dx-g-spacing-sm) 0 0;
+    margin: var(--dx-g-spacing-sm) 0 var(--dx-g-spacing-xl);
     max-width: 900px;
     flex: 1;
     width: 0;
@@ -110,7 +106,6 @@ dx-toc {
     .content-body-container {
         padding-right: 0;
         overflow-x: auto;
-        margin-bottom: calc(var(--dx-g-spacing-5xl) + 4px);
     }
 
     .left-nav-bar {

package/src/modules/doc/contentLayout/contentLayout.html

@@ -7,10 +7,6 @@
                 value={sidebarValue}
                 header={sidebarHeader}
                 ontogglesidebar={onToggleSidebar}
-                languages={languages}
-                language={language}
-                bail-href={bailHref}
-                bail-label={bailLabel}
             >
                 <slot name="sidebar-header" slot="header"></slot>
             </dx-sidebar-old>
@@ -26,10 +22,6 @@
                 coveo-search-hub={coveoSearchHub}
                 coveo-advanced-query-config={coveoAdvancedQueryConfig}
                 ontogglesidebar={onToggleSidebar}
-                languages={languages}
-                language={language}
-                bail-href={bailHref}
-                bail-label={bailLabel}
             >
                 <slot name="sidebar-header" slot="header"></slot>
             </dx-sidebar>
@@ -56,9 +48,6 @@
                     ></dx-toc>
                 </div>
             </div>
-            <div class="footer-container">
-                <dx-footer variant="no-signup"></dx-footer>
-            </div>
         </div>
     </div>
 </template>

package/src/modules/doc/contentLayout/contentLayout.ts

@@ -4,7 +4,6 @@ import { closest } from "kagekiri";
 import { toJson } from "dxUtils/normalizers";
 import { highlightTerms } from "dxUtils/highlight";
 import { SearchSyncer } from "docUtils/searchSyncer";
-import type { OptionWithLink } from "typings/custom";
 
 type AnchorMap = { [key: string]: { intersect: boolean; id: string } };
 
@@ -37,10 +36,6 @@ export default class ContentLayout extends LightningElement {
     @api coveoSearchHub!: string;
     @api coveoAdvancedQueryConfig!: string;
     @api useOldSidebar?: boolean = false;
-    @api languages!: OptionWithLink[];
-    @api language!: string;
-    @api bailHref!: string;
-    @api bailLabel!: string;
 
     @api
     get breadcrumbs() {

package/src/modules/doc/header/header.css

@@ -7,8 +7,6 @@ dx-logo {
 .header_l2 {
     justify-content: space-between;
     height: var(--dx-g-doc-header-main-nav-height);
-    padding-bottom: var(--dx-g-spacing-xs);
-    background: white;
 }
 
 .nav_menu-button {
@@ -18,32 +16,44 @@ dx-logo {
     );
 }
 
-.has-brand.has-scoped-nav-items {
-    border-bottom: 1px solid var(--dx-g-gray-90);
-    border-top: 1px solid var(--dx-g-gray-90);
-}
-
 .nav_menu-ctas {
     margin-right: var(--dx-g-spacing-sm);
 }
 
 header:not(.has-brand) > .header_l1 {
-    background: white;
-    border-bottom: 1px solid var(--dx-g-gray-90);
+    background: var(--dx-g-brand-current-color-background);
 }
 
 header:not(.has-brand) > .header_l2 {
-    border-bottom: 1px solid var(--dx-g-gray-90);
-    border-top: 1px solid var(--dx-g-gray-90);
-    padding-bottom: var(--dx-g-spacing-lg);
+    background: var(--dx-g-brand-current-color-background-2);
 }
 
 .header_l2_group.header_l2_group-right-ctas {
     align-items: baseline;
 }
 
-.has-brand .header_l2_group-title {
-    padding-bottom: calc(var(--dx-g-spacing-md) + 2px);
+.header_bail-link {
+    --dx-c-button-horizontal-spacing: var(--dx-g-spacing-sm);
+
+    margin-left: var(--dx-g-spacing-sm);
+}
+
+.header_lang-dropdown {
+    --button-primary-color: var(--dx-g-blue-vibrant-40);
+    --button-primary-color-hover: var(--dx-g-blue-vibrant-30);
+}
+
+.header_lang-dropdown > dx-button {
+    --dx-c-button-primary-color: var(--button-primary-color);
+    --dx-c-button-primary-color-hover: var(--button-primary-color-hover);
+    --dx-c-slot-empty-width: min-content;
+    --border-color: var(--button-primary-color);
+
+    border-bottom: 1px dashed var(--border-color);
+}
+
+.header_lang-dropdown > dx-button:hover {
+    --border-color: var(--button-primary-color-hover);
 }
 
 @media (max-width: 768px) {
@@ -72,10 +82,6 @@ header:not(.has-brand) > .header_l2 {
         margin-right: var(--dx-g-spacing-sm);
     }
 
-    .has-brand .header_l2_group-title {
-        padding-bottom: var(--dx-g-spacing-smd);
-    }
-
     .header_l2_group-title {
         margin-right: 0;
         padding: var(--dx-g-spacing-smd)
@@ -83,15 +89,19 @@ header:not(.has-brand) > .header_l2 {
         min-height: var(--dx-g-doc-header-main-nav-height);
     }
 
+    .header_l2_group-title .header_lang-dropdown {
+        margin-left: auto;
+    }
+
+    .header_lang-dropdown > dx-button {
+        padding: var(--dx-g-spacing-2xs) 0;
+    }
+
     .has-scoped-nav-items > .header_l2 {
         height: unset;
     }
 
     .has-scoped-nav-items .header_l2_group-title {
-        border-bottom: 1px solid var(--dx-g-gray-90);
-    }
-
-    header:not(.has-brand) > .header_l2 {
-        padding-bottom: 0;
+        border-bottom: 1px solid var(--dx-g-brand-current-color-border-2);
     }
 }

package/src/modules/doc/header/header.html

@@ -14,12 +14,28 @@
                                 if:true={isValidBrand}
                                 sprite="salesforcebrand"
                                 symbol={brand}
-                                size="large"
+                                size="xlarge"
                             ></dx-icon>
-                            <span class="subtitle dx-text-display-7">
+                            <span class="subtitle dx-text-display-6">
                                 {subtitle}
                             </span>
                         </a>
+                        <dx-dropdown
+                            if:true={showMobileLanguages}
+                            class="header_lang-dropdown"
+                            options={languages}
+                            small
+                            value={language}
+                            value-path={langValuePath}
+                            onchange={onLangChange}
+                        >
+                            <dx-button
+                                aria-label="Select Language"
+                                variant="inline"
+                                icon-size="large"
+                                icon-symbol="world"
+                            ></dx-button>
+                        </dx-dropdown>
                     </div>
                     <div
                         if:true={hasScopedNavItems}
@@ -36,6 +52,41 @@
                             ></dx-header-nav>
                         </div>
                     </div>
+                    <div
+                        if:false={smallMobile}
+                        class="header_l2_group header_l2_group-right-ctas"
+                    >
+                        <dx-dropdown
+                            if:true={hasLanguages}
+                            class="header_lang-dropdown"
+                            options={languages}
+                            small
+                            value-path={langValuePath}
+                            value={language}
+                            onchange={onLangChange}
+                        >
+                            <dx-button
+                                aria-label="Select Language"
+                                variant="inline"
+                                icon-size="small"
+                                icon-symbol="world"
+                            >
+                                {languageLabel}
+                            </dx-button>
+                        </dx-dropdown>
+                        <dx-button
+                            if:true={hasBailLink}
+                            aria-label={bailLabel}
+                            class="header_bail-link"
+                            href={bailHref}
+                            onclick={handleBailClick}
+                            variant="tertiary"
+                            icon-symbol="new_window"
+                            target="_blank"
+                        >
+                            {bailLabel}
+                        </dx-button>
+                    </div>
                 </div>
             </header>
         </dx-brand-theme-provider>

package/src/modules/doc/header/header.ts

@@ -1,11 +1,14 @@
 import { api } from "lwc";
 import cx from "classnames";
-import type { OptionWithNested } from "typings/custom";
+import type { OptionWithNested, OptionWithLink } from "typings/custom";
 import { HeaderBase } from "dxBaseElements/headerBase";
 import { toJson } from "dxUtils/normalizers";
+import get from "lodash.get";
+import { track } from "dxUtils/analytics";
 
 const TABLET_MATCH = "980px";
 const MOBILE_MATCH = "880px";
+const SMALL_MOBILE_MATCH = "768px";
 
 export default class Header extends HeaderBase {
     @api langValuePath: string = "id"; // allows to override how language property is interpreted, follows valuePath dropdown api.
@@ -20,7 +23,31 @@ export default class Header extends HeaderBase {
         this._scopedNavItems = toJson(value);
     }
 
+    @api
+    get languages() {
+        return this._languages;
+    }
+
+    set languages(value) {
+        this._languages = toJson(value);
+    }
+
+    @api
+    get language() {
+        return this._language;
+    }
+
+    set language(value) {
+        if (this._language !== value) {
+            this._language = value;
+        }
+    }
+
+    private _language: string | null = null;
+    private _languages!: OptionWithLink[];
     private _scopedNavItems!: OptionWithNested[];
+    private smallMobile = false;
+    private smallMobileMatchMedia!: MediaQueryList;
     private tablet = false;
     private tabletMatchMedia!: MediaQueryList;
     private shouldRender = false;
@@ -33,6 +60,24 @@ export default class Header extends HeaderBase {
         return this.scopedNavItems && this.scopedNavItems.length > 0;
     }
 
+    private get hasLanguages(): boolean {
+        return !!(this.languages && this.languages.length);
+    }
+
+    private get showMobileLanguages(): boolean {
+        return this.smallMobile && this.hasLanguages;
+    }
+
+    private get languageLabel(): string {
+        return (
+            (this.language &&
+                this.languages.find(
+                    (lang) => get(lang, this.langValuePath) === this.language
+                )?.label) ||
+            this.languages[0].label
+        );
+    }
+
     connectedCallback(): void {
         super.connectedCallback();
         this.tabletMatchMedia = window.matchMedia(
@@ -41,6 +86,14 @@ export default class Header extends HeaderBase {
         this.onTabletChange(this.tabletMatchMedia);
         this.tabletMatchMedia.addEventListener("change", this.onTabletChange);
 
+        this.smallMobileMatchMedia = window.matchMedia(
+            `(max-width: ${SMALL_MOBILE_MATCH})`
+        );
+        this.onSmallMobileChange(this.smallMobileMatchMedia);
+        this.smallMobileMatchMedia.addEventListener(
+            "change",
+            this.onSmallMobileChange
+        );
         if (
             (window.location.pathname.includes("/docs/") &&
                 window.location.pathname !== "/docs/apis") ||
@@ -57,15 +110,53 @@ export default class Header extends HeaderBase {
             "change",
             this.onTabletChange
         );
+
+        this.smallMobileMatchMedia.removeEventListener(
+            "change",
+            this.onSmallMobileChange
+        );
     }
 
     private onTabletChange = (e: MediaQueryListEvent | MediaQueryList) =>
         (this.tablet = e.matches);
 
+    private onSmallMobileChange = (e: MediaQueryListEvent | MediaQueryList) =>
+        (this.smallMobile = e.matches);
+
     protected additionalClasses(): string {
         return cx(
             this.brand && "has-brand",
             this.hasScopedNavItems && "has-scoped-nav-items"
         );
     }
+
+    private onLangChange(event: CustomEvent<string>): void {
+        const { detail } = event;
+        this._language = detail;
+
+        this.dispatchEvent(new CustomEvent("langchange", { detail }));
+    }
+
+    private handleBailClick(event: Event) {
+        const payload = {
+            click_text: "pdf",
+            click_url: this.bailHref,
+            element_title: "pdf",
+            element_type: "link",
+            content_category: "download"
+        };
+        track(event.target!, "custEv_pdfDownload", {
+            ...payload,
+            file_name: this.getFilename(this.bailHref!),
+            file_extension: "pdf"
+        });
+
+        track(event.target!, "custEv_linkClick", {
+            ...payload
+        });
+    }
+
+    private getFilename = function (path: string) {
+        return path.substring(path.lastIndexOf("/") + 1);
+    };
 }

package/src/modules/doc/xmlContent/types.ts

@@ -61,15 +61,12 @@ export type ApiDocLanguage = {
 
 export interface Header extends Element {
     subtitle: string;
-    headerHref: string;
-}
-
-export type SiderbarFooter = {
     bailHref: string;
     bailLabel: string;
     languages: Array<DocLanguage>;
     language?: string;
-};
+    headerHref: string;
+}
 
 export type ApiNavItem = {
     children: Array<ApiNavItem>;

package/src/modules/doc/xmlContent/xmlContent.html

@@ -11,11 +11,6 @@
         sidebar-value={sidebarValue}
         onselect={handleSelect}
         use-old-sidebar={useOldSidebar}
-        onlangchange={handleLanguageChange}
-        languages={sidebarFooterContent.languages}
-        language={sidebarFooterContent.language}
-        bail-href={sidebarFooterContent.bailHref}
-        bail-label={sidebarFooterContent.bailLabel}
     >
         <doc-phase
             slot="version-banner"

package/src/modules/doc/xmlContent/xmlContent.ts

@@ -8,7 +8,6 @@ import {
     DocVersion,
     TreeNode,
     Header,
-    SiderbarFooter,
     HistoryState,
     PageReference,
     TocMap
@@ -27,12 +26,6 @@ const PIXEL_PER_CHARACTER_MAP: { [key: string]: number } = {
     "ja-jp": 12.5
 };
 
-const defaultSidebarFooter: SiderbarFooter = {
-    bailHref: "",
-    bailLabel: "",
-    languages: [],
-    language: ""
-};
 export default class DocXmlContent extends LightningElementWithState<{
     isFetchingDocument: boolean;
     isFetchingContent: boolean;
@@ -71,16 +64,15 @@ export default class DocXmlContent extends LightningElementWithState<{
     private docContent = "";
     private language?: DocLanguage | null = null;
     private loaded = false;
-    private _pageHeader?: Header;
     private pdfUrl = "";
     private tocMap: TocMap = {};
     private sidebarContent: Array<TreeNode> | null = null;
     private version: DocVersion | null = null;
     private docTitle = "";
     private _pathName = "";
+    private _pageHeader?: Header;
     private listenerAttached = false;
     private _enableCoveo?: boolean = false;
-    private sidebarFooterContent: SiderbarFooter = { ...defaultSidebarFooter };
 
     private searchSyncer = new SearchSyncer({
         callbacks: {
@@ -222,6 +214,13 @@ export default class DocXmlContent extends LightningElementWithState<{
     disconnectedCallback(): void {
         window.removeEventListener("popstate", this.handlePopState);
         this.searchSyncer.dispose();
+        if (this.listenerAttached) {
+            this.pageHeader.removeEventListener(
+                "langchange",
+                this.handleLanguageChange
+            );
+            this.listenerAttached = false;
+        }
     }
 
     private get languageId(): string | undefined {
@@ -415,8 +414,12 @@ export default class DocXmlContent extends LightningElementWithState<{
     }
 
     getReferenceFromUrl(): PageReference {
-        const [page, docId, deliverable, contentDocumentId] =
-            window.location.pathname.substr(1).split("/");
+        const [
+            page,
+            docId,
+            deliverable,
+            contentDocumentId
+        ] = window.location.pathname.substr(1).split("/");
 
         const { origin: domain, hash, search } = window.location;
 
@@ -466,7 +469,7 @@ export default class DocXmlContent extends LightningElementWithState<{
         this.availableVersions = data.availableVersions;
         this.pdfUrl = data.pdfUrl;
 
-        this.updateHeaderAndSidebarFooter();
+        this.updateHeader();
 
         this.buildBreadcrumbs();
 
@@ -530,7 +533,7 @@ export default class DocXmlContent extends LightningElementWithState<{
         });
     }
 
-    updateHeaderAndSidebarFooter(): void {
+    updateHeader(): void {
         if (!this.pageHeader) {
             return;
         }
@@ -540,12 +543,20 @@ export default class DocXmlContent extends LightningElementWithState<{
         }
 
         if (this.pdfUrl) {
-            this.sidebarFooterContent.bailHref = this.pdfUrl;
-            this.sidebarFooterContent.bailLabel = "PDF";
+            this.pageHeader.bailHref = this.pdfUrl;
+            this.pageHeader.bailLabel = "PDF";
         }
 
-        this.sidebarFooterContent.languages = this.availableLanguages;
-        this.sidebarFooterContent.language = this.language?.id;
+        if (!this.listenerAttached) {
+            this.pageHeader.addEventListener(
+                "langchange",
+                this.handleLanguageChange
+            );
+            this.listenerAttached = true;
+        }
+
+        this.pageHeader.languages = this.availableLanguages;
+        this.pageHeader.language = this.language?.id;
 
         if (this.pageReference) {
             const { docId, deliverable, page } = this.pageReference;
@@ -570,14 +581,20 @@ export default class DocXmlContent extends LightningElementWithState<{
     }
 
     private updateSearchInput(searchParam: string): void {
-        (
-            this.template.querySelector("doc-content-layout") as any
-        )?.setSidebarInputValue(searchParam);
+        (this.template.querySelector(
+            "doc-content-layout"
+        ) as any)?.setSidebarInputValue(searchParam);
     }
 
     private pageReferenceToString(reference: PageReference): string {
-        const { page, docId, deliverable, contentDocumentId, hash, search } =
-            reference;
+        const {
+            page,
+            docId,
+            deliverable,
+            contentDocumentId,
+            hash,
+            search
+        } = reference;
         return `/${page}/${docId}/${deliverable}/${contentDocumentId}${this.normalizeSearch(
             search!
         )}${this.normalizeHash(hash)}`;

package/src/modules/doc/sidebarFooterNav/sidebarFooterNav.css

@@ -1,44 +0,0 @@
-@import "dxHelpers/reset";
-
-:host {
-    --button-primary-color: var(--dx-g-blue-vibrant-50);
-    --button-primary-color-hover: var(--dx-g-cloud-blue-vibrant-95);
-}
-
-.footer-display {
-    display: flex;
-}
-
-.footer_lang-dropdown {
-    display: flex;
-    padding: 0 var(--dx-g-spacing-md);
-    margin-left: var(--dx-g-spacing-sm);
-    height: var(--dx-g-spacing-xl);
-    border-radius: var(--dx-g-spacing-xs);
-    align-items: center;
-}
-
-.footer_lang-dropdown > dx-button {
-    --dx-c-button-primary-color: var(--button-primary-color);
-    --dx-c-slot-empty-width: min-content;
-    --border-color: var(--button-primary-color);
-}
-
-.footer_lang-dropdown:hover,
-.footer_lang-dropdown:active,
-.footer_lang-dropdown:focus,
-.pdf_bail-link:hover {
-    background-color: var(--button-primary-color-hover);
-
-    --border-color: var(--button-primary-color-hover);
-}
-
-.pdf_bail-link {
-    --dx-c-button-horizontal-spacing: var(--dx-g-spacing-sm);
-
-    padding: 0 var(--dx-g-spacing-md);
-    border-radius: var(--dx-g-spacing-xs);
-    display: flex;
-    height: var(--dx-g-spacing-xl);
-    align-items: center;
-}

package/src/modules/doc/sidebarFooterNav/sidebarFooterNav.html

@@ -1,59 +0,0 @@
-<template>
-    <div if:false={mobile} class="footer-display">
-        <dx-button
-            if:true={hasBailLink}
-            aria-label={bailLabel}
-            class="pdf_bail-link"
-            href={bailHref}
-            onclick={handleBailClick}
-            variant="inline"
-            icon-size="medium"
-            icon-symbol="new_window"
-            target="_blank"
-        >
-            {bailLabel}
-        </dx-button>
-        <dx-dropdown
-            if:true={hasLanguages}
-            class="footer_lang-dropdown"
-            options={languages}
-            small
-            value-path={langValuePath}
-            value={language}
-            onchange={onLangChange}
-            variant="docoption"
-            lang-picker="true"
-        >
-            <dx-button
-                aria-label="Select Language"
-                variant="inline"
-                icon-size="medium"
-                icon-symbol="world"
-            >
-                {languageLabel}
-            </dx-button>
-        </dx-dropdown>
-    </div>
-    <div if:true={mobile} class="footer-display">
-        <dx-dropdown
-            if:true={hasLanguages}
-            class="footer_lang-dropdown"
-            options={languages}
-            small
-            value-path={langValuePath}
-            value={language}
-            onchange={onLangChange}
-            variant="docoption"
-            lang-picker="true"
-        >
-            <dx-button
-                aria-label="Select Language"
-                variant="inline"
-                icon-size="small"
-                icon-symbol="world"
-            >
-                {languageLabel}
-            </dx-button>
-        </dx-dropdown>
-    </div>
-</template>

package/src/modules/doc/sidebarFooterNav/sidebarFooterNav.ts

@@ -1,109 +0,0 @@
-/* eslint-disable @lwc/lwc/no-document-query */
-import { LightningElement, api } from "lwc";
-import type { OptionWithLink } from "typings/custom";
-import { toJson } from "dxUtils/normalizers";
-import get from "lodash.get";
-import { track } from "dxUtils/analytics";
-
-const MOBILE_SIZE_MATCH = "768px";
-
-export default class SidebarFooterNav extends LightningElement {
-    @api langValuePath: string = "id";
-    @api bailHref?: string | null = null;
-    @api bailLabel?: string | null = null;
-
-    @api
-    get languages() {
-        return this._languages;
-    }
-
-    set languages(value) {
-        this._languages = toJson(value);
-    }
-
-    @api
-    get language() {
-        return this._language;
-    }
-
-    set language(value) {
-        if (this._language !== value) {
-            this._language = value;
-        }
-    }
-
-    private _languages!: OptionWithLink[];
-    private _language: string | null = null;
-    private mobile: boolean = false;
-    private matchMedia!: MediaQueryList;
-
-    private get hasLanguages(): boolean {
-        return !!(this.languages && this.languages.length > 1);
-    }
-
-    private get languageLabel(): string {
-        return (
-            (this.language &&
-                this.languages.find(
-                    (lang) => get(lang, this.langValuePath) === this.language
-                )?.label) ||
-            this.languages[0].label
-        );
-    }
-
-    get hasBailLink(): boolean {
-        return !!(this.bailHref && this.bailLabel);
-    }
-
-    private onLangChange(event: CustomEvent<string>): void {
-        const { detail } = event;
-        this._language = detail;
-
-        this.dispatchEvent(
-            new CustomEvent("langchange", {
-                detail,
-                bubbles: true,
-                composed: true
-            })
-        );
-    }
-
-    private getFilename = function (path: string) {
-        return path.substring(path.lastIndexOf("/") + 1);
-    };
-
-    private handleBailClick(event: Event) {
-        const payload = {
-            click_text: "pdf",
-            click_url: this.bailHref,
-            element_title: "pdf",
-            element_type: "link",
-            content_category: "download"
-        };
-        track(event.target!, "custEv_pdfDownload", {
-            ...payload,
-            file_name: this.getFilename(this.bailHref!),
-            file_extension: "pdf"
-        });
-
-        track(event.target!, "custEv_linkClick", {
-            ...payload
-        });
-    }
-
-    connectedCallback() {
-        this.matchMedia = window.matchMedia(
-            `(max-width: ${MOBILE_SIZE_MATCH})`
-        );
-        this.onMediaChange(this.matchMedia);
-        this.matchMedia.addEventListener("change", this.onMediaChange);
-    }
-
-    disconnectedCallback() {
-        this.matchMedia.removeEventListener("change", this.onMediaChange);
-    }
-
-    private onMediaChange = (event: MediaQueryListEvent | MediaQueryList) => {
-        this.mobile = event.matches;
-    };
-}