@salesforcedevs/docs-components 1.3.49-mulesoft-lwc-2 → 1.3.50

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.3.49-mulesoft-lwc-2",
+    "version": "1.3.50",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",

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

@@ -22,6 +22,7 @@
         <div slot="sidebar-header" class="version-picker">
             <template if:true={isVersionEnabled}>
                 <dx-dropdown
+                    suppress-gtm-nav-headings
                     onchange={handleVersionChange}
                     data-type="version"
                     options={versions}
@@ -36,14 +37,9 @@
             <slot></slot>
         </template>
         <template if:true={showSpecBasedReference}>
-            <div class="container" if:true={topicModel}>
+            <div class="container">
                 <div class="api-documentation">
-                    <arc-api-documentation
-                        amf={topicModel.amf}
-                        selected={topicModel.id}
-                        selected-type={topicModel.type}
-                        no-try-it
-                    ></arc-api-documentation>
+                    <doc-amf-topic model={topicModel}></doc-amf-topic>
                 </div>
             </div>
         </template>

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

@@ -175,7 +175,7 @@ export default class AmfReference extends LightningElement {
 
     connectedCallback(): void {
         this.addEventListener(
-            "api_navigation_selection_changed",
+            "api-navigation-selection-changed",
             this._boundOnApiNavigationChanged
         );
         window.addEventListener(

package/src/modules/doc/amfTopic/amfTopic.ts

@@ -1,4 +1,12 @@
 import { LightningElement, api } from "lwc";
+import {
+    createDocumentationElement,
+    createEndpointElement,
+    createMethodElement,
+    createSecurityElement,
+    createSummaryElement,
+    createTypeElement
+} from "./utils";
 import type { TopicModel } from "./types";
 
 export default class AmfTopic extends LightningElement {
@@ -35,21 +43,43 @@ export default class AmfTopic extends LightningElement {
     update(): void {
         const container = this.template.querySelector("div.topic-container");
         const { id } = this.model;
+        const type = this.type;
+        const amf = this.amf;
+        const { parser } = this.model;
+        let element;
 
-        const element: any = document.createElement("arc-api-documentation");
-        element.amf = this.amf;
-        element.selected = id;
-        element.selectedType = this.type;
-        element.noTryIt = true;
-        element.inlineMethods = false;
-        element.noNavigation = true;
+        if (type === "summary") {
+            element = createSummaryElement(amf);
+        } else if (type === "endpoint") {
+            const endpointModel = parser.computeEndpointApiModel(amf, id);
+            element = createEndpointElement(amf, endpointModel, id);
+        } else if (type === "method") {
+            const endpointMethodModel = parser.computeEndpointApiMethodModel(
+                amf,
+                id
+            );
+            const methodModel = parser.computeMethodApiModel(amf, id);
+            element = createMethodElement(
+                amf,
+                endpointMethodModel,
+                methodModel
+            );
+        } else if (type === "security") {
+            const securityModel = parser.computeSecurityApiModel(amf, id);
+            element = createSecurityElement(amf, securityModel);
+        } else if (type === "type") {
+            const mediaTypes = parser.computeApiMediaTypes(amf);
+            const typeModel = parser.computeTypeApiModel(amf, id);
+            element = createTypeElement(amf, typeModel, mediaTypes);
+        } else if (type === "documentation") {
+            const docsModel = parser.computeDocsApiModel(amf, id);
+            element = createDocumentationElement(amf, docsModel);
+        }
 
-        if (container) {
-            if (container.firstChild) {
-                container.firstChild.remove();
-            }
-            container.appendChild(element);
+        if (container.firstChild) {
+            container.firstChild.remove();
         }
+        container.appendChild(element);
     }
 }
 

package/src/modules/doc/breadcrumbItem/breadcrumbItem.ts

@@ -1,6 +1,6 @@
 import { track } from "dxUtils/analytics";
 import { LightningElement, api } from "lwc";
-import { BreadcrumbItemVariant } from "typings/custom";
+import { AnalyticsPayload, BreadcrumbItemVariant } from "typings/custom";
 
 const BREADCRUMB_LONG = "breadcrumb_long";
 const BREADCRUMB_BACK_ARROW = "breadcrumb_back-arrow";
@@ -8,7 +8,8 @@ const BREADCRUMB_BACK_ARROW = "breadcrumb_back-arrow";
 const LONG_LABEL_NUMBER = 30;
 export default class BreadcrumbItem extends LightningElement {
     @api href?: string;
-    @api level?: string;
+    @api analyticsEvent!: string;
+    @api analyticsBasePayload!: AnalyticsPayload;
 
     @api
     get label() {
@@ -50,13 +51,14 @@ export default class BreadcrumbItem extends LightningElement {
     }
 
     private onLinkClick(event: Event): void {
-        track(event.target!, "custEv_breadcrumbClick", {
+        if (!this.analyticsEvent) {
+            return;
+        }
+
+        track(event.target!, this.analyticsEvent, {
+            ...this.analyticsBasePayload,
             clickText: this.label,
-            clickUrl: this.href,
-            elementType: "link",
-            navType: "breadcrumb",
-            navLevel: this.level ? this.level + 1 : 1,
-            navItem: this.label
+            clickUrl: this.href
         });
     }
 }

package/src/modules/doc/breadcrumbs/breadcrumbs.html

@@ -3,18 +3,21 @@
         <template if:true={displayCrumbs}>
             <template if:false={renderSmallVariant}>
                 <doc-breadcrumb-item
+                    analytics-event={analyticsEventName}
+                    analytics-base-payload={analyticsBasePayload}
                     href={firstCrumb.href}
                     label={firstCrumb.label}
                 ></doc-breadcrumb-item>
                 <span class="breadcrumb-item_slash">/</span>
                 <template if:true={renderDropdown}>
                     <dx-dropdown
-                        analytics-event="custEv_breadcrumbClick"
-                        analytics-payload={ANALYTICS_PAYLOAD}
                         if:true={renderDropdown}
+                        analytics-event={analyticsEventName}
+                        analytics-base-payload={analyticsBasePayload}
                         options={dropdownOptions}
                         open-on-hover
                         placement="bottom"
+                        suppress-gtm-nav-headings
                         variant="indented"
                         width="fit-content"
                     >
@@ -29,10 +32,11 @@
                 </template>
                 <template for:each={breadcrumbItems} for:item="breadcrumb">
                     <doc-breadcrumb-item
+                        analytics-event={analyticsEventName}
+                        analytics-base-payload={analyticsBasePayload}
                         href={breadcrumb.href}
                         key={breadcrumb.id}
                         label={breadcrumb.label}
-                        level={breadcrumb.level}
                     ></doc-breadcrumb-item>
                     <span class="breadcrumb-item_slash" key={breadcrumb.label}>
                         /
@@ -44,6 +48,8 @@
             </template>
             <template if:true={renderSmallVariant}>
                 <doc-breadcrumb-item
+                    analytics-event={analyticsEventName}
+                    analytics-base-payload={analyticsBasePayload}
                     href={lastLinkCrump.href}
                     label={lastLinkCrump.label}
                     variant="back-arrow"

package/src/modules/doc/breadcrumbs/breadcrumbs.ts

@@ -17,6 +17,11 @@ const CONSTANTS = {
     dropdownWidth: 32
 };
 
+export const ANALYTICS_EVENT_NAME = "custEv_breadcrumbNavClick";
+export const ANALYTICS_BASE_PAYLOAD = {
+    navType: "breadcrumb"
+};
+
 export default class Breadcrumbs extends LightningElement {
     @api ariaLabel: string = "Documentation Breadcrumbs";
 
@@ -97,12 +102,14 @@ export default class Breadcrumbs extends LightningElement {
         return this.breadcrumbs[this.breadcrumbs.length - 1];
     }
 
-    // this payload is only used for breadcrumb dropdown
-    private get ANALYTICS_PAYLOAD() {
+    private get analyticsEventName() {
+        return ANALYTICS_EVENT_NAME;
+    }
+
+    private get analyticsBasePayload() {
         return {
-            elementType: "link",
-            navType: "breadcrumb",
-            navLevel: 1
+            ...ANALYTICS_BASE_PAYLOAD,
+            navItem: this.breadcrumbs.map((crumb) => crumb.label).join("/")
         };
     }
 
@@ -130,13 +137,10 @@ export default class Breadcrumbs extends LightningElement {
             return;
         }
 
-        this._breadcrumbs = toJson(breadcrumbs).map(
-            (crumb: Breadcrumb, index: number) => ({
-                ...crumb,
-                id: crumb.id || crumb.href,
-                level: index
-            })
-        );
+        this._breadcrumbs = toJson(breadcrumbs).map((crumb: Breadcrumb) => ({
+            ...crumb,
+            id: crumb.id || crumb.href
+        }));
     }
 
     private updateDropdownOptionAmount(): void {

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

@@ -14,8 +14,8 @@
         <div slot="sidebar-header" class="document-pickers">
             <dx-dropdown
                 data-type="version"
-                analytics-event="custEv_ctaLinkClick"
-                analytics-payload={ANALYTICS_PAYLOAD}
+                suppress-gtm-nav-headings
+                analytics-event={analyticsEvent}
                 options={versionOptions}
                 value={version.id}
                 width="290px"

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

@@ -63,6 +63,7 @@ export default class DocXmlContent extends LightningElementWithState<{
     private sidebarContent: Array<TreeNode> = null;
     private version: DocVersion = null;
     private docTitle = "";
+    private analyticsEvent = "custEv_ctaLinkClick";
     private _pathName = "";
     private _pageHeader?: Header;
     private listenerAttached = false;
@@ -280,13 +281,6 @@ export default class DocXmlContent extends LightningElementWithState<{
         );
     }
 
-    private get ANALYTICS_PAYLOAD() {
-        return {
-            elementTitle: "version picker",
-            contentCategory: "cta"
-        };
-    }
-
     private handlePopState = (): void =>
         this.updatePageReference(this.getReferenceFromUrl());