@salesforcedevs/docs-components 1.3.194-alpha.0 → 1.3.194-search-alpha

package/package.json

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

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

@@ -185,12 +185,10 @@ export default class AmfReference extends LightningElement {
     constructor() {
         super();
 
-        this._boundOnApiNavigationChanged = this.onApiNavigationChanged.bind(
-            this
-        );
-        this._boundUpdateSelectedItemFromUrlQuery = this.updateSelectedItemFromUrlQuery.bind(
-            this
-        );
+        this._boundOnApiNavigationChanged =
+            this.onApiNavigationChanged.bind(this);
+        this._boundUpdateSelectedItemFromUrlQuery =
+            this.updateSelectedItemFromUrlQuery.bind(this);
     }
 
     connectedCallback(): void {
@@ -246,9 +244,8 @@ export default class AmfReference extends LightningElement {
                 const updatedReferenceId =
                     oldReferenceIdNewReferenceIdMap[referenceId];
                 const newReferenceId = updatedReferenceId || referenceId;
-                const referenceItemConfig = this.getAmfConfigWithId(
-                    newReferenceId
-                );
+                const referenceItemConfig =
+                    this.getAmfConfigWithId(newReferenceId);
                 if (referenceItemConfig) {
                     hashBasedRedirectUrl = `${referenceItemConfig.href}?meta=${encodedMeta}`;
                 }
@@ -328,9 +325,8 @@ export default class AmfReference extends LightningElement {
                 for (let i = 0; i < allVersions.length; i++) {
                     const versionItem = allVersions[i];
                     const referenceLink = versionItem.link.href;
-                    const referenceId = this.getReferenceIdFromUrl(
-                        referenceLink
-                    );
+                    const referenceId =
+                        this.getReferenceIdFromUrl(referenceLink);
                     if (this._currentReferenceId === referenceId) {
                         // This is to navigate to respective topic in the changed version
                         versionItem.link.href = `${referenceLink}/${currentRefMeta}`;
@@ -844,9 +840,8 @@ export default class AmfReference extends LightningElement {
             this._currentReferenceId
         );
         if (specBasedReference) {
-            const currentMeta:
-                | RouteMeta
-                | undefined = this.getReferenceMetaInfo(window.location.href);
+            const currentMeta: RouteMeta | undefined =
+                this.getReferenceMetaInfo(window.location.href);
             const metadata =
                 currentMeta && this.getMetadataByUrlQuery(currentMeta);
             if (metadata) {
@@ -1166,7 +1161,7 @@ export default class AmfReference extends LightningElement {
                         selectedItemMetaData.parentReferencePath,
                         selectedItemMetaData.meta
                     );
-                    this.updateNavTitleMetaTag(selectedItemMetaData.navTitle);
+                    this.updateTags(selectedItemMetaData.navTitle);
                 }
             });
         } else {
@@ -1272,18 +1267,16 @@ export default class AmfReference extends LightningElement {
         }
         if (!isRedirecting) {
             const currentReferenceUrl = window.location.href;
-            const referenceMeta = this.getMarkdownReferenceMeta(
-                currentReferenceUrl
-            );
-            const selectedItemRefId = this.getReferenceIdFromUrl(
-                currentReferenceUrl
-            );
+            const referenceMeta =
+                this.getMarkdownReferenceMeta(currentReferenceUrl);
+            const selectedItemRefId =
+                this.getReferenceIdFromUrl(currentReferenceUrl);
             const referenceDetails = this.getRefDetailsForGivenTopicMeta(
                 selectedItemRefId,
                 referenceMeta
             );
             if (referenceDetails) {
-                this.updateNavTitleMetaTag(referenceDetails.topicTitle);
+                this.updateTags(referenceDetails.topicTitle);
             }
 
             this.versions = this.getVersions();
@@ -1311,22 +1304,41 @@ export default class AmfReference extends LightningElement {
         this.showVersionBanner = false;
     }
 
-    private updateNavTitleMetaTag(navTitle = ""): void {
+    private updateTags(navTitle = ""): void {
+        if (!navTitle) {
+            return;
+        }
+
         // this is required to update the nav title meta tag.
         // eslint-disable-next-line @lwc/lwc/no-document-query
         const metaNavTitle = document.querySelector('meta[name="nav-title"]');
-        if (metaNavTitle && navTitle) {
+        // eslint-disable-next-line @lwc/lwc/no-document-query
+        const titleTag = document.querySelector("title");
+        if (metaNavTitle) {
             metaNavTitle.setAttribute("content", navTitle);
         }
+
+        if (titleTag) {
+            let titleTagValue = titleTag.textContent;
+            const tagValues: string[] = titleTagValue?.split(" | ");
+            if (tagValues) {
+                if (tagValues.length <= 3) {
+                    titleTagValue = navTitle + " | " + titleTagValue;
+                } else {
+                    tagValues[0] = navTitle;
+                    titleTagValue = tagValues.join(" | ");
+                }
+            }
+            titleTag.textContent = titleTagValue;
+        }
     }
 
     onNavSelect(event: CustomEvent): void {
         const name = event.detail.name;
         if (name) {
             const urlReferenceId = this.getReferenceIdFromUrl(name);
-            const specBasedReference = this.isSpecBasedReference(
-                urlReferenceId
-            );
+            const specBasedReference =
+                this.isSpecBasedReference(urlReferenceId);
             if (specBasedReference) {
                 const metaVal = this.getMetaFromUrl(name);
                 const currentSelectedMeta = this.selectedTopic
@@ -1361,7 +1373,7 @@ export default class AmfReference extends LightningElement {
                         this.coveoAnalyticsToken
                     );
                     this.updateUrlWithSelected(parentReferencePath, metaVal);
-                    this.updateNavTitleMetaTag(metadata.navTitle);
+                    this.updateTags(metadata.navTitle);
                 } else {
                     if (this.isParentReferencePath(name)) {
                         this.loadNewReferenceItem(name);
@@ -1381,9 +1393,8 @@ export default class AmfReference extends LightningElement {
             const currentReferenceId = this.getReferenceIdFromUrl(currentUrl);
             //No need to do anything if user is expanding currently selected reference
             if (referenceId !== currentReferenceId) {
-                const isSpecBasedReference = this.isSpecBasedReference(
-                    referenceId
-                );
+                const isSpecBasedReference =
+                    this.isSpecBasedReference(referenceId);
                 if (isSpecBasedReference) {
                     // Perform functionality same as item selection
                     this.onNavSelect(event);

package/src/modules/doc/content/content.css

@@ -106,7 +106,7 @@ h6 {
 }
 
 img {
-    image-rendering: optimize-contrast;
+    image-rendering: -webkit-optimize-contrast;
 }
 
 p,

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

@@ -207,9 +207,9 @@ export default class ContentLayout extends LightningElement {
             ".sticky-doc-header"
         ) as HTMLElement;
 
-        const docPhaseEl = (this.template.querySelector(
-            "[name=doc-phase]"
-        )! as any).assignedElements()[0] as HTMLSlotElement;
+        const docPhaseEl = (
+            this.template.querySelector("[name=doc-phase]")! as any
+        ).assignedElements()[0] as HTMLSlotElement;
 
         if (!sidebarEl || !globalNavEl || !contextNavEl || !docHeaderEl) {
             console.warn("One or more required elements are missing.");
@@ -259,9 +259,8 @@ export default class ContentLayout extends LightningElement {
                 });
 
                 // Adjust right nav bar position when doc phase is present
-                const rightNavBarEl = this.template.querySelector(
-                    ".right-nav-bar"
-                );
+                const rightNavBarEl =
+                    this.template.querySelector(".right-nav-bar");
 
                 if (rightNavBarEl) {
                     rightNavBarEl.style.top = `${
@@ -323,14 +322,17 @@ export default class ContentLayout extends LightningElement {
     };
 
     onSlotChange(event: Event): void {
-        const slotElements = (event.target as HTMLSlotElement).assignedElements();
+        const slotElements = (
+            event.target as HTMLSlotElement
+        ).assignedElements();
 
         if (slotElements.length) {
             this.contentLoaded = true;
             const slotContentElement = slotElements[0];
-            const headingElements = slotContentElement.ownerDocument?.getElementsByTagName(
-                TOC_HEADER_TAG
-            );
+            const headingElements =
+                slotContentElement.ownerDocument?.getElementsByTagName(
+                    TOC_HEADER_TAG
+                );
 
             for (const headingElement of headingElements as any) {
                 // Sometimes elements hash is not being set when slot content is wrapped with div
@@ -390,9 +392,9 @@ export default class ContentLayout extends LightningElement {
                 globalNavEl?.offsetHeight +
                 contextNavEl?.offsetHeight;
 
-            const docPhaseEl = (this.template.querySelector(
-                "[name=doc-phase]"
-            )! as any).assignedElements()[0] as HTMLSlotElement;
+            const docPhaseEl = (
+                this.template.querySelector("[name=doc-phase]")! as any
+            ).assignedElements()[0] as HTMLSlotElement;
 
             const offset = docPhaseEl
                 ? headerHeight + docPhaseEl.offsetHeight

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

@@ -2,6 +2,7 @@
 
 dx-logo {
     min-width: fit-content;
+    min-width: -moz-fit-content;
 }
 
 .header_l2 {

package/src/modules/doc/headingAnchor/headingAnchor.css

@@ -2,7 +2,7 @@
 
 button {
     opacity: 0;
-    color: rgb(11 92 171);
+    color: rgb(11, 92, 171);
 }
 
 button:hover {
@@ -17,7 +17,7 @@ button:focus {
 
 button:focus-visible {
     border-radius: 4px;
-    border: 2px solid rgb(11 92 171);
+    border: 2px solid rgb(11, 92, 171);
 }
 
 .icon-wrapper {

package/src/modules/doc/headingContent/headingContent.css

@@ -23,7 +23,7 @@ button {
     bottom: var(--doc-c-heading-anchor-button-bottom);
     left: 0;
     opacity: 0;
-    color: rgb(11 92 171);
+    color: rgb(11, 92, 171);
     display: flex;
     justify-content: center;
     align-items: center;

package/src/modules/doc/sprigSurvey/sprigSurvey.scoped.css

@@ -4,7 +4,7 @@
     width: 100%;
     display: flex;
     flex-direction: row;
-    margin: 20px 0;
+    margin: 20px 0 20px 0;
 }
 
 dx-hr:first-of-type::part(hr) {

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

@@ -252,14 +252,11 @@ export default class DocXmlContent extends LightningElementWithState<{
     }
 
     private get coveoAdvancedQueryConfig(): CoveoAdvancedQueryXMLConfig {
-        const config: {
-            locale?: string;
-            topicid?: string;
-            version?: string;
-        } = {
-            locale: this.languageId,
-            topicid: this.deliverable
-        };
+        const config: { locale?: string; topicid?: string; version?: string } =
+            {
+                locale: this.languageId,
+                topicid: this.deliverable
+            };
 
         if (this.releaseVersionId && this.releaseVersionId !== "noversion") {
             config.version = this.releaseVersionId;
@@ -414,12 +411,8 @@ 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;
 
@@ -581,20 +574,14 @@ 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/docHelpers/amfStyle/amfStyle.css

@@ -166,12 +166,12 @@ api-security-documentation {
     --anypoint-button-emphasis-high-active-background-color: transparent;
 
     /* api example */
-    --api-example-accent-color: rgb(250 250 250);
-    --api-example-background-color: rgb(250 250 250);
+    --api-example-accent-color: rgb(250, 250, 250);
+    --api-example-background-color: rgb(250, 250, 250);
     --api-example-title-background-color: transparent;
 
     /* code snippets */
-    --http-code-snippet-container-background-color: rgb(250 250 250);
+    --http-code-snippet-container-background-color: rgb(250, 250, 250);
     --http-code-snippet-container-padding: var(--dx-g-spacing-md);
 
     /* prism */
@@ -208,7 +208,7 @@ api-endpoint-documentation {
     );
 
     /* description */
-    --api-endpoint-documentation-description-color: rgb(24 24 24);
+    --api-endpoint-documentation-description-color: rgb(24, 24, 24);
 }
 
 api-endpoint-documentation,
@@ -271,11 +271,11 @@ api-method-documentation {
     --api-method-documentation-http-method-label-font-weight: var(
         --dx-g-font-bold
     );
-    --api-method-documentation-description-color: rgb(24 24 24);
+    --api-method-documentation-description-color: rgb(24, 24, 24);
     --api-method-documentation-operation-id-color: var(--dx-g-gray-50);
 
     /* body */
-    --api-body-document-description-color: rgb(24 24 24);
+    --api-body-document-description-color: rgb(24, 24, 24);
     --api-body-document-media-type-selector-color: var(--dx-g-blue-vibrant-20);
     --api-body-document-media-type-selector-font-size: var(
         --amf-h8-mod-font-size

package/src/modules/docHelpers/status/status.css

@@ -9,7 +9,7 @@
 }
 
 .doc-status-container {
-    background-color: rgb(254 243 217);
+    background-color: rgb(254, 243, 217);
     border-color: var(--dx-g-yellow-vibrant-80);
 }