@salesforcedevs/docs-components 1.3.171-alpha.0 → 1.3.172

package/src/modules/doc/content/content.ts

@@ -1,11 +1,11 @@
 /* eslint-disable @lwc/lwc/no-inner-html */
 import { createElement, LightningElement, api, track } from "lwc";
 import { DocContent, PageReference } from "typings/custom";
+import ContentCallout from "doc/contentCallout";
 import CodeBlock from "dx/codeBlock";
+import ContentMedia from "doc/contentMedia";
 import Button from "dx/button";
 import { highlightTerms } from "dxUtils/highlight";
-import ContentCallout from "doc/contentCallout";
-import ContentMedia from "doc/contentMedia";
 
 const HIGHLIGHTABLE_SELECTOR = [
     "p",
@@ -86,7 +86,7 @@ export default class Content extends LightningElement {
     }
 
     renderPaginationButton(anchorEl: HTMLElement) {
-        const isNext = anchorEl.textContent!.includes("Next →");
+        const isNext = anchorEl.textContent.includes("Next →");
         anchorEl.innerHTML = "";
         const buttonEl = createElement("dx-button", { is: Button });
         const params = isNext
@@ -116,7 +116,7 @@ export default class Content extends LightningElement {
             const codeBlockEls = divEl.querySelectorAll(".codeSection");
             codeBlockEls.forEach((codeBlockEl) => {
                 codeBlockEl.setAttribute("lwc:dom", "manual");
-                const classList = (codeBlockEl.firstChild as any).classList;
+                const classList = codeBlockEl.firstChild.classList;
                 let language = "";
                 for (const key in classList) {
                     if (typeof classList[key] === "string") {
@@ -160,7 +160,7 @@ export default class Content extends LightningElement {
 
                 let flag = 1;
                 for (let i: number = 0; i < detailEls.length; i++) {
-                    flag &= (detailEls[i].innerHTML.trim() === "") as any; // Dark Magic TM
+                    flag &= detailEls[i].innerHTML.trim() === "";
                 }
 
                 if (flag) {
@@ -170,7 +170,7 @@ export default class Content extends LightningElement {
                     });
                 }
 
-                const type = calloutEl.querySelector("h4")!.textContent!;
+                const type = calloutEl.querySelector("h4").textContent;
                 const typeLower = type.toLowerCase();
                 Object.assign(calloutCompEl, {
                     title: type,
@@ -184,10 +184,10 @@ export default class Content extends LightningElement {
             // Modify links to work with any domain, links that start with "#" are excluded
             const anchorEls = divEl.querySelectorAll("a:not([href^='#'])");
 
-            anchorEls.forEach((anchorEl: any) => {
+            anchorEls.forEach((anchorEl) => {
                 if (
-                    anchorEl.textContent!.includes("Next →") ||
-                    anchorEl.textContent!.includes("← Previous")
+                    anchorEl.textContent.includes("Next →") ||
+                    anchorEl.textContent.includes("← Previous")
                 ) {
                     if (this.showPaginationButtons) {
                         this.renderPaginationButton(anchorEl);
@@ -326,7 +326,8 @@ export default class Content extends LightningElement {
 
     handleNavClick(event: InputEvent) {
         event.preventDefault();
-        const target = (event.currentTarget! as any).dataset.id;
+        // eslint-disable-next-line no-use-before-define
+        const target = event.currentTarget.dataset.id;
         const [page, docId, deliverable, tempContentDocumentId] =
             target.split("/");
         const [contentDocumentId, hash] = tempContentDocumentId.split("#");

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

@@ -3,7 +3,7 @@ import { LightningElement, api, track } from "lwc";
 import { closest } from "kagekiri";
 import { toJson } from "dxUtils/normalizers";
 import { highlightTerms } from "dxUtils/highlight";
-import { SearchSyncer } from "docUtils/searchSyncer";
+import { SearchSyncer } from "docUtils/SearchSyncer";
 
 type AnchorMap = { [key: string]: { intersect: boolean; id: string } };
 
@@ -26,9 +26,9 @@ const HIGHLIGHTABLE_SELECTOR = [
 export const OBSERVER_ATTACH_WAIT_TIME = 500;
 
 export default class ContentLayout extends LightningElement {
-    @api sidebarValue!: string;
-    @api sidebarHeader!: string;
-    @api tocTitle!: string;
+    @api sidebarValue: string;
+    @api sidebarHeader: string;
+    @api tocTitle: string;
     @api enableSlotChange = false;
     @api coveoOrganizationId!: string;
     @api coveoPublicAccessToken!: string;
@@ -41,7 +41,7 @@ export default class ContentLayout extends LightningElement {
         return this._breadcrumbs;
     }
 
-    set breadcrumbs(value) {
+    set breadcrumbs(value): [] {
         if (value) {
             this._breadcrumbs = toJson(value);
         }
@@ -52,7 +52,7 @@ export default class ContentLayout extends LightningElement {
         return this._sidebarContent;
     }
 
-    set sidebarContent(value: any) {
+    set sidebarContent(value) {
         this._sidebarContent = toJson(value);
     }
 
@@ -67,9 +67,7 @@ export default class ContentLayout extends LightningElement {
 
     @api
     setSidebarInputValue(searchTerm: string): void {
-        (this.template.querySelector("dx-sidebar") as any)?.setInputValue(
-            searchTerm
-        );
+        this.template.querySelector("dx-sidebar")?.setInputValue(searchTerm);
     }
 
     @track
@@ -78,11 +76,11 @@ export default class ContentLayout extends LightningElement {
     private _breadcrumbs = null;
 
     @track
-    private _tocOptions!: Array<unknown>;
+    private _tocOptions: Array<unknown>;
 
     private tocOptionIdsSet = new Set();
     private anchoredElements: AnchorMap = {};
-    private lastScrollPosition!: number;
+    private lastScrollPosition: number;
     private observer?: IntersectionObserver;
     private hasRendered: boolean = false;
     private contentLoaded: boolean = false;
@@ -107,8 +105,7 @@ export default class ContentLayout extends LightningElement {
         target: window
     });
     private tocValue?: string = undefined;
-    // eslint-disable-next-line no-undef
-    private observerTimerId?: NodeJS.Timeout;
+    private observerTimerId = null;
     private didScrollToSelectedHash = false;
     private _scrollInterval = 0;
 
@@ -206,9 +203,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]")!
+            .assignedElements()[0] as HTMLSlotElement;
 
         if (!sidebarEl || !globalNavEl || !contextNavEl || !docHeaderEl) {
             console.warn("One or more required elements are missing.");
@@ -250,7 +247,7 @@ export default class ContentLayout extends LightningElement {
                     document.querySelectorAll("doc-heading")
                 );
                 docHeadingEls.forEach((docHeadingEl) => {
-                    (docHeadingEl as any).style.scrollMarginTop = `${
+                    docHeadingEl.style.scrollMarginTop = `${
                         globalNavHeight +
                         docHeaderHeight +
                         docPhaseEl.getBoundingClientRect().height
@@ -258,8 +255,9 @@ 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 = `${
@@ -293,7 +291,7 @@ export default class ContentLayout extends LightningElement {
                 entries.forEach(
                     (entry) =>
                         (this.anchoredElements[
-                            entry.target.getAttribute("id")!
+                            entry.target.getAttribute("id")
                         ].intersect = entry.isIntersecting)
                 );
                 this.calculateActualSection();
@@ -305,9 +303,10 @@ export default class ContentLayout extends LightningElement {
 
         // Note: We are doing document.querySelectorAll as a quick fix as we are not getting heading elements reference this.querySelectorAll
         const headingElements = document.querySelectorAll(TOC_HEADER_TAG);
-        for (const headingElement of headingElements as any) {
+
+        for (const headingElement of headingElements) {
             // Add headingElements to intersectionObserver for highlighting respective RNB item when user scroll
-            const id = headingElement.getAttribute("id")!;
+            const id = headingElement.getAttribute("id");
             this.anchoredElements[id] = {
                 id,
                 intersect: false
@@ -321,26 +320,23 @@ 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) {
+            for (const headingElement of headingElements) {
                 // Sometimes elements hash is not being set when slot content is wrapped with div
                 headingElement.hash = headingElement.attributes.hash?.nodeValue;
             }
 
             const tocOptions = [];
 
-            for (const headingElement of headingElements as any) {
+            for (const headingElement of headingElements) {
                 headingElement.id = headingElement.hash;
 
                 // Update tocOptions from anchorTags only for H2, consider default as 2 as per component
@@ -366,7 +362,7 @@ export default class ContentLayout extends LightningElement {
     private disconnectObserver(): void {
         if (this.observer) {
             this.observer.disconnect();
-            this.observer = undefined;
+            this.observer = null;
         }
     }
 
@@ -391,15 +387,15 @@ 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]")!
+                .assignedElements()[0] as HTMLSlotElement;
 
             const offset = docPhaseEl
                 ? headerHeight + docPhaseEl.offsetHeight
                 : headerHeight;
 
-            for (const headingElement of headingElements as any) {
+            for (const headingElement of headingElements) {
                 if (headingElement.getAttribute("id") === hash) {
                     this.scrollIntoViewWithOffset(headingElement, offset);
                     break;
@@ -436,14 +432,14 @@ export default class ContentLayout extends LightningElement {
         this.lastScrollPosition = currentScrollPosition;
     }
 
-    private calculatePreviousElementId(): string | undefined {
+    private calculatePreviousElementId(): string {
         const keys = Object.keys(this.anchoredElements);
         const currentIndex = keys.findIndex((id) => this.tocValue === id);
 
         return currentIndex > 0 ? keys[currentIndex - 1] : undefined;
     }
 
-    private assignElementId(id: string | undefined): void {
+    private assignElementId(id: string): void {
         // Change toc(RNB) highlight only for H2
         if (this.tocOptionIdsSet.has(id)) {
             this.tocValue = id;

package/src/modules/doc/heading/heading.ts

@@ -11,14 +11,12 @@ export const ariaLevels = Object.keys(ariaDisplayLevels);
 
 export const displayLevels = Object.values(ariaDisplayLevels);
 
-// @ts-ignore: Really Dark Magic (TM) to do with ariaLevel needing explicit getter/setters
 export default class Heading extends LightningElement {
     @api title: string = "";
     @api hash: string | null = null;
 
     @api
     private get ariaLevel(): string {
-        // Really Dark Magic (TM)
         return this._ariaLevel || "2";
     }
     private set ariaLevel(value: string | null) {

package/src/modules/doc/toc/toc.ts

@@ -11,7 +11,7 @@ export default class Toc extends LightningElement {
         const newPageReference = { ...this.pageReference };
         // When moving to the new navigation component
         //const target = event.detail.name.split('-')
-        const target = (event.currentTarget as any).dataset.id.split("-");
+        const target = event.currentTarget.dataset.id.split("-");
         newPageReference.contentDocumentId = target[0] + ".htm";
         newPageReference.hash = target[1];
         this.dispatchEvent(

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

@@ -64,7 +64,7 @@ export interface Header extends Element {
     bailHref: string;
     bailLabel: string;
     languages: Array<DocLanguage>;
-    language?: string;
+    language: string;
     headerHref: string;
 }
 

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

@@ -12,15 +12,15 @@ import {
     PageReference,
     TocMap
 } from "./types";
+import { SearchSyncer } from "docUtils/SearchSyncer";
 import { LightningElementWithState } from "docBaseElements/lightningElementWithState";
 import { oldVersionDocInfo } from "docUtils/utils";
 import { Breadcrumb, DocPhaseInfo, Language } from "typings/custom";
 import { track as trackGTM } from "dxUtils/analytics";
 import { CoveoAnalyticsClient } from "coveo.analytics";
-import { SearchSyncer } from "docUtils/searchSyncer";
 
 // TODO: Imitating from actual implementation as doc-content use it like this. We should refactor it later.
-const handleContentError = (error: any): void => console.log(error);
+const handleContentError = (error): void => console.log(error);
 
 const PIXEL_PER_CHARACTER_MAP: { [key: string]: number } = {
     default: 7.7,
@@ -31,7 +31,6 @@ export default class DocXmlContent extends LightningElementWithState<{
     isFetchingDocument: boolean;
     isFetchingContent: boolean;
     lastHighlightedSearch: string;
-    internalLinkClicked: boolean;
 }> {
     @api apiDomain = "https://developer.salesforce.com";
     @api coveoOrganizationId!: string;
@@ -61,14 +60,14 @@ export default class DocXmlContent extends LightningElementWithState<{
 
     private availableLanguages: Array<DocLanguage> = [];
     private availableVersions: Array<DocVersion> = [];
-    private contentProvider?: FetchContent;
+    private contentProvider: FetchContent;
     private docContent = "";
-    private language?: DocLanguage | null = null;
+    private language: DocLanguage = null;
     private loaded = false;
     private pdfUrl = "";
     private tocMap: TocMap = {};
-    private sidebarContent: Array<TreeNode> | null = null;
-    private version: DocVersion | null = null;
+    private sidebarContent: Array<TreeNode> = null;
+    private version: DocVersion = null;
     private docTitle = "";
     private _pathName = "";
     private _pageHeader?: Header;
@@ -175,8 +174,8 @@ export default class DocXmlContent extends LightningElementWithState<{
     renderedCallback(): void {
         this.setState({ internalLinkClicked: true });
         const urlSectionLink =
-            this.pageReference?.hash?.split("#").length! > 1
-                ? this.pageReference.hash!.split("#")[1]
+            this.pageReference?.hash?.split("#").length > 1
+                ? this.pageReference.hash.split("#")[1]
                 : this.pageReference?.hash;
 
         const contentEl = this.template.querySelector("doc-content");
@@ -224,15 +223,15 @@ export default class DocXmlContent extends LightningElementWithState<{
         }
     }
 
-    private get languageId(): string | undefined {
-        return this.language?.id.replace("-", "_");
+    private get languageId(): string {
+        return this.language.id.replace("-", "_");
     }
 
-    private get releaseVersionId(): string | undefined {
-        return this.version?.id;
+    private get releaseVersionId(): string {
+        return this.version.id;
     }
 
-    private get deliverable(): string | undefined {
+    private get deliverable(): string {
         return this.pageReference.deliverable;
     }
 
@@ -253,11 +252,10 @@ 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;
@@ -268,7 +266,7 @@ export default class DocXmlContent extends LightningElementWithState<{
 
     private get pageHeader(): Header {
         if (!this._pageHeader) {
-            this._pageHeader = document.querySelector("doc-header")!;
+            this._pageHeader = document.querySelector("doc-header");
         }
 
         return this._pageHeader;
@@ -311,7 +309,7 @@ export default class DocXmlContent extends LightningElementWithState<{
 
     private get breadcrumbPixelPerCharacter() {
         return (
-            PIXEL_PER_CHARACTER_MAP[this.language!.id] ||
+            PIXEL_PER_CHARACTER_MAP[this.language.id] ||
             PIXEL_PER_CHARACTER_MAP.default
         );
     }
@@ -360,7 +358,7 @@ export default class DocXmlContent extends LightningElementWithState<{
         this.updateUrl();
     }
 
-    handleLanguageChange = (event: any) => {
+    handleLanguageChange = (event: CustomEvent<string>): Promise<void> => {
         if (this.language && this.language.id === event.detail) {
             return;
         }
@@ -368,7 +366,7 @@ export default class DocXmlContent extends LightningElementWithState<{
         this.language = this.availableLanguages.find(
             ({ id }) => id === event.detail
         );
-        this.pageReference.docId = this.language!.url;
+        this.pageReference.docId = this.language.url;
 
         trackGTM(event.target!, "custEv_ctaLinkClick", {
             click_text: event.detail,
@@ -455,8 +453,8 @@ export default class DocXmlContent extends LightningElementWithState<{
         this.setState({
             isFetchingDocument: true
         });
-        const data = await this.contentProvider!.fetchDocumentData(
-            this.pageReference.docId!
+        const data = await this.contentProvider.fetchDocumentData(
+            this.pageReference.docId
         );
 
         // This could be a 404 scenario.
@@ -519,12 +517,12 @@ export default class DocXmlContent extends LightningElementWithState<{
         this.setState({
             isFetchingContent: true
         });
-        const data = await this.contentProvider!.fetchContent(
-            this.pageReference.deliverable!,
-            this.pageReference.contentDocumentId!,
+        const data = await this.contentProvider.fetchContent(
+            this.pageReference.deliverable,
+            this.pageReference.contentDocumentId,
             {
-                language: this.language!.id,
-                version: this.version!.id
+                language: this.language.id,
+                version: this.version.id
             }
         );
 
@@ -588,26 +586,23 @@ 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")
+            ?.setSidebarInputValue(searchParam);
     }
 
     private pageReferenceToString(reference: PageReference): string {
         const { page, docId, deliverable, contentDocumentId, hash, search } =
             reference;
         return `/${page}/${docId}/${deliverable}/${contentDocumentId}${this.normalizeSearch(
-            search!
+            search
         )}${this.normalizeHash(hash)}`;
     }
 
-    private normalizeUrlPart(
-        part: string | undefined,
-        sentinel: string
-    ): string {
+    private normalizeUrlPart(part: string, sentinel: string): string {
         return (
             (part &&
-                (part.startsWith(sentinel!) ? part : `${sentinel}${part}`)) ||
+                (part.startsWith(sentinel) ? part : `${sentinel}${part}`)) ||
             ""
         );
     }
@@ -616,16 +611,16 @@ export default class DocXmlContent extends LightningElementWithState<{
         return this.normalizeUrlPart(search, "?");
     }
 
-    private normalizeHash(hash?: string): string {
+    private normalizeHash(hash: string): string {
         return this.normalizeUrlPart(hash, "#");
     }
 
     private getComposedTitle(
-        topicTitle: string | null | undefined,
+        topicTitle: string | undefined,
         docTitle: string | undefined
     ): string {
         // map to avoid duplicates
-        const titleMap: { [key: string]: any } = {};
+        const titleMap = {};
         if (topicTitle) {
             // sometimes the h1 tag text (which is docSubTitle) contains text with new line character. For e.g, "Bulk API 2.0 Older\n  Documentation",
             // here it contains \n in the text context which needs to be removed
@@ -762,7 +757,7 @@ export default class DocXmlContent extends LightningElementWithState<{
         const headTag = document.getElementsByTagName("head");
         // this checks if the selected version is not the latest version,
         // then it adds the noindex, follow meta tag to the older version pages.
-        const versionId = this.version!.id;
+        const versionId = this.version.id;
         const docId = this.pageReference.docId;
 
         // SEO fix:

package/src/modules/docHelpers/imgStyle/imgStyle.css

@@ -3,61 +3,57 @@ img.content-image {
     display: unset;
 }
 
-.content-image.image-framed {
+.image-framed {
     border: 1px solid black;
 }
 
-.content-image.image-framed-light {
-    border: 1px solid var(--dx-g-gray-90);
-}
-
-.content-image.image-xxl,
-.content-image.image-full {
+.image-xxl,
+.image-full {
     max-width: 1000px;
     width: 100%;
 }
 
-.content-image.image-xl {
+.image-xl {
     max-width: 750px;
     width: 100%;
 }
 
-.content-image.image-lg {
+.image-lg {
     max-width: 660px;
     width: 100%;
 }
 
-.content-image.image-md {
+.image-md {
     max-width: 500px;
     width: 100%;
 }
 
-.content-image.image-sm {
+.image-sm {
     max-width: 330px;
     width: 100%;
 }
 
-.content-image.image-xs {
+.image-xs {
     max-width: 250px;
     width: 100%;
 }
 
-.content-image.image-xxs {
+.image-xxs {
     max-width: 125px;
     width: 100%;
 }
 
-.content-image.image-icon-lg {
+.image-icon-lg {
     max-width: 32px;
     width: 100%;
 }
 
-.content-image.image-icon-md {
+.image-icon-md {
     max-width: 20px;
     width: 100%;
 }
 
-.content-image.image-icon-sm {
+.image-icon-sm {
     max-width: 16px;
     width: 100%;
 }