@salesforcedevs/docs-components 1.3.166-alpha → 1.3.169

package/LICENSE

@@ -0,0 +1,12 @@
+Copyright (c) 2020, Salesforce.com, Inc.
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
+
+* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
+
+* Neither the name of Salesforce.com nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.3.166-alpha",
+    "version": "1.3.169",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",
@@ -24,5 +24,5 @@
         "@types/lodash.orderby": "^4.6.7",
         "@types/lodash.uniqby": "^4.7.7"
     },
-    "gitHead": "4629fdd9ca18a13480044ad43515b91945d16aad"
+    "gitHead": "e819e60b958af0fa567045741481fd7a4e8417b3"
 }

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

@@ -30,14 +30,6 @@ import { restoreScroll } from "dx/scrollManager";
 import { DocPhaseInfo } from "typings/custom";
 import { oldVersionDocInfo } from "docUtils/utils";
 
-type NavigationItem = {
-    label: string;
-    name: string;
-    isExpanded: boolean;
-    children: ParsedMarkdownTopic[];
-    isChildrenLoading: boolean;
-};
-
 export default class AmfReference extends LightningElement {
     @api breadcrumbs?: string | null | undefined = null;
     @api sidebarHeader!: string;
@@ -49,7 +41,7 @@ export default class AmfReference extends LightningElement {
     @api useOldSidebar?: boolean = false;
     @api tocTitle?: string;
     @api tocOptions?: string;
-    @track navigation = [] as NavigationItem[];
+    @track navigation = [];
     @track versions: Array<ReferenceVersion> = [];
     @track showVersionBanner = false;
 
@@ -133,8 +125,8 @@ export default class AmfReference extends LightningElement {
     }
 
     @api
-    get docPhaseInfo(): string | null {
-        return this.selectedReferenceDocPhase || null;
+    get docPhaseInfo() {
+        return this.selectedReferenceDocPhase;
     }
 
     set docPhaseInfo(value: string) {
@@ -159,9 +151,9 @@ export default class AmfReference extends LightningElement {
     protected _referenceSetConfig!: ReferenceSetConfig;
     protected _currentReferenceId = "";
 
-    protected parentReferenceUrls = [] as string[];
+    protected parentReferenceUrls = [];
     protected amfMap: Record<string, AmfModelRecord> = {};
-    protected amfFetchPromiseMap = {} as any;
+    protected amfFetchPromiseMap = {};
     protected metadata: { [key: string]: AmfMetadataTopic } = {};
     protected selectedTopic?: AmfMetaTopicType = undefined;
     protected selectedSidebarValue = undefined;
@@ -355,13 +347,13 @@ export default class AmfReference extends LightningElement {
     /**
      * Returns the selected version or the first available version.
      */
-    private getSelectedVersion(): ReferenceVersion | null {
+    private getSelectedVersion(): ReferenceVersion {
         const versions = this._referenceSetConfig?.versions || [];
         const selectedVersion = versions.find(
             (v: ReferenceVersion) => v.selected
         );
         // return a selected version if there is one, else return the first one.
-        return selectedVersion || (versions.length && versions[0]) || null;
+        return selectedVersion || (versions.length && versions[0]);
     }
 
     private updateAmfConfigInView(): void {
@@ -375,11 +367,9 @@ export default class AmfReference extends LightningElement {
         }
     }
 
-    private async fetchAmf(
-        amfConfig: AmfConfig
-    ): Promise<AmfModel | AmfModel[]> {
+    private async fetchAmf(amfConfig): Promise<AmfModel | AmfModel[]> {
         const { amf } = amfConfig;
-        const response = await fetch(amf!, {
+        const response = await fetch(amf, {
             headers: {
                 "Cache-Control": `max-age=86400`
             }
@@ -429,9 +419,9 @@ export default class AmfReference extends LightningElement {
      * Populates reference Items from amfConfigList and assigns it to navigation for sidebar
      */
     private populateReferenceItems(): void {
-        const navAmfOrder = [] as NavigationItem[];
+        const navAmfOrder = [];
         for (const [index, amfConfig] of this._amfConfigList.entries()) {
-            let navItemChildren = [] as ParsedMarkdownTopic[];
+            let navItemChildren = [];
             let isChildrenLoading = false;
             if (amfConfig.referenceType !== REFERENCE_TYPES.markdown) {
                 if (amfConfig.isSelected) {
@@ -451,10 +441,10 @@ export default class AmfReference extends LightningElement {
                 // check whether we should expand all the child nodes, this is required for Coveo to crawl.
                 if (isExpandChildrenEnabled) {
                     this.expandChildrenForMarkdownReferences(
-                        amfConfig.topic!.children
+                        amfConfig.topic.children
                     );
                 }
-                navItemChildren = amfConfig.topic!.children;
+                navItemChildren = amfConfig.topic.children;
             }
             // store nav items for each spec in order
             navAmfOrder[index] = {
@@ -475,9 +465,7 @@ export default class AmfReference extends LightningElement {
      * Returns a boolean indicating whether the children should be expanded or not.
      */
     private isExpandChildrenEnabled(referenceId: string): boolean {
-        return (
-            !!this.expandChildren && this._currentReferenceId === referenceId
-        );
+        return this.expandChildren && this._currentReferenceId === referenceId;
     }
 
     /**
@@ -521,12 +509,12 @@ export default class AmfReference extends LightningElement {
         referenceId: string,
         items: ParsedTopicModel[]
     ): NavItem[] {
-        const methodList = [] as NavItem[];
+        const methodList = [];
 
         items.forEach((item) => {
             item.methods?.forEach((method) => {
                 const title =
-                    this.getTitleForLabel(method.label!) || method.method;
+                    this.getTitleForLabel(method.label) || method.method;
                 const meta = this.addToMetadata(
                     parentReferencePath,
                     referenceId,

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

@@ -1,8 +1,4 @@
-import {
-    AmfHelperMixin,
-    EndPoint,
-    Operation
-} from "@api-components/amf-helper-mixin";
+import { AmfHelperMixin } from "@api-components/amf-helper-mixin";
 import { normalizeDomId } from "dxUtils/normalizers";
 
 const ID_PROPERTY = "@id";
@@ -521,7 +517,7 @@ export class AmfModelParser extends AmfHelperMixin(Object) {
      * @param {string} selected Currently selected `@id`.
      * @return {any|undefined} Model definition for an endpoint fragment.
      */
-    computeEndpointApiModel(model, selectedId): EndPoint {
+    computeEndpointApiModel(model, selectedId) {
         const webApi = this._computeApi(model);
         return this._computeEndpointModel(webApi, selectedId);
     }
@@ -533,7 +529,7 @@ export class AmfModelParser extends AmfHelperMixin(Object) {
      * @param {string} selected Currently selected `@id`.
      * @return {any|undefined} Model definition for an endpoint fragment.
      */
-    computeMethodApiModel(model, selected): Operation | undefined {
+    computeMethodApiModel(model, selected) {
         const webApi = this._computeApi(model);
         return this._computeMethodModel(webApi, selected);
     }
@@ -545,7 +541,7 @@ export class AmfModelParser extends AmfHelperMixin(Object) {
      * @param {string} selected Currently selected `@id`.
      * @return {any|undefined} Model definition for an endpoint fragment.
      */
-    computeEndpointApiMethodModel(model, selected): EndPoint | undefined {
+    computeEndpointApiMethodModel(model, selected) {
         const webApi = this._computeApi(model);
         return this._computeMethodEndpoint(webApi, selected);
     }

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

@@ -8,15 +8,14 @@ import {
     createTypeElement
 } from "./utils";
 import type { TopicModel } from "./types";
-import { Json } from "typings/custom";
 
 export default class AmfTopic extends LightningElement {
-    private _model: TopicModel | undefined;
-    private amf: Json;
-    private type: string | undefined;
+    private _model;
+    private amf;
+    private type;
 
     @api
-    get model(): TopicModel | undefined {
+    get model(): TopicModel {
         return this._model;
     }
 
@@ -42,11 +41,7 @@ export default class AmfTopic extends LightningElement {
     }
 
     update(): void {
-        if (!this.model) {
-            throw new Error("Amf TopicModel undefined when trying to update");
-        }
-
-        const container = this.template.querySelector("div.topic-container")!;
+        const container = this.template.querySelector("div.topic-container");
         const { id } = this.model;
         const type = this.type;
         const amf = this.amf;
@@ -84,7 +79,7 @@ export default class AmfTopic extends LightningElement {
         if (container.firstChild) {
             container.firstChild.remove();
         }
-        container.appendChild(element as Node);
+        container.appendChild(element);
     }
 }
 
@@ -94,6 +89,6 @@ export default class AmfTopic extends LightningElement {
  * @param value JSON Serializable object to clone.
  * @returns A copy of Value. One that has been serialized and parsed via JSON. (Functions, Regex, etc are not preserved.)
  */
-function clone(value: any): any {
+function clone(value): object {
     return JSON.parse(JSON.stringify(value));
 }

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

@@ -1,11 +1,4 @@
 import { Json } from "typings/custom";
-import { AmfModelParser } from "../amfReference/utils";
-import {
-    DomainElement,
-    EndPoint,
-    Operation,
-    Shape
-} from "@api-components/amf-helper-mixin";
 
 export type ApiSummaryElement = HTMLElement & {
     amf: Json;
@@ -18,39 +11,44 @@ export type ApiEndpointElement = HTMLElement & {
     inlineMethods: boolean;
     noNavigation: boolean;
     selected: string;
-    endpoint: EndPoint;
+    endpoint: Json;
     noTryIt: boolean;
 };
 
 export type ApiMethodElement = HTMLElement & {
     amf: Json;
     noNavigation: boolean;
-    endpoint: EndPoint | undefined;
-    method: Operation | undefined;
+    endpoint: Json;
+    method: Json;
     noTryIt: boolean;
 };
 
 export type ApiSecurityElement = HTMLElement & {
     amf: Json;
-    security: DomainElement | undefined;
+    security: Json;
 };
 
 export type ApiTypeElement = HTMLElement & {
     amf: Json;
-    type?: Shape;
+    type: Json;
     mediaTypes: Json;
 };
 
 export type ApiDocElement = HTMLElement & {
     amf: Json;
-    shape: DomainElement | undefined;
+    shape: Json;
 };
 
 export type AmfModel = Json;
 
+export interface AmfParser {
+    parse(): void;
+    parsedModel: any;
+}
+
 export interface TopicModel {
     id: string;
     type: string;
     amf: AmfModel;
-    parser: AmfModelParser;
+    parser: AmfParser;
 }

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

@@ -1,9 +1,3 @@
-import {
-    DomainElement,
-    EndPoint,
-    Operation,
-    Shape
-} from "@api-components/amf-helper-mixin";
 import type {
     ApiDocElement,
     ApiEndpointElement,
@@ -43,7 +37,7 @@ export function createSummaryElement(amf: Json): HTMLElement {
  */
 export function createEndpointElement(
     amf: Json,
-    endpointModel: EndPoint,
+    endpointModel: Json,
     selected: string
 ): HTMLElement {
     const el: ApiEndpointElement = document.createElement(
@@ -63,8 +57,8 @@ export function createEndpointElement(
  */
 export function createMethodElement(
     amf: Json,
-    endpointMethodModel: EndPoint | undefined,
-    methodModel: Operation | undefined
+    endpointMethodModel: Json,
+    methodModel: Json
 ): HTMLElement {
     const el: ApiMethodElement = document.createElement(
         "api-method-documentation"
@@ -85,7 +79,7 @@ export function createMethodElement(
  */
 export function createSecurityElement(
     amf: Json,
-    securityModel: DomainElement | undefined
+    securityModel: Json
 ): HTMLElement {
     const el: ApiSecurityElement = document.createElement(
         "api-security-documentation"
@@ -104,7 +98,7 @@ export function createSecurityElement(
  */
 export function createTypeElement(
     amf: Json,
-    typeModel: Shape | undefined,
+    typeModel: Json,
     mediaTypes: Json
 ): HTMLElement {
     const el: ApiTypeElement = document.createElement(
@@ -125,7 +119,7 @@ export function createTypeElement(
  */
 export function createDocumentationElement(
     amf: Json,
-    docsModel: DomainElement | undefined
+    docsModel: Json
 ): HTMLElement {
     const el: ApiDocElement = document.createElement(
         "api-documentation-document"

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 "../contentCallout/contentCallout";
-import ContentMedia from "../contentMedia/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,13 +3,13 @@ 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/SearchSyncer";
+import { SearchSyncer } from "docUtils/SearchSyncer";
 
 type AnchorMap = { [key: string]: { intersect: boolean; id: string } };
 
 declare const Sprig: (eventType: string, eventNme: string) => void;
 
-const TOC_HEADER_TAG = "DOC-HEADING";
+const TOC_HEADER_TAG = "doc-heading";
 const HIGHLIGHTABLE_SELECTOR = [
     "p",
     "h1",
@@ -23,12 +23,12 @@ const HIGHLIGHTABLE_SELECTOR = [
     "th",
     "td"
 ].join(",");
-const OBSERVER_ATTACH_WAIT_TIME = 500;
+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,7 +303,8 @@ 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");
             this.anchoredElements[id] = {
@@ -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/docUtils/SearchSyncer/SearchSyncer.ts

@@ -4,12 +4,12 @@ export interface SearchSyncerConstructorArgs {
         onUrlChange?: (nextSearchString: string) => unknown;
     };
     eventName: string;
-    historyMethod:
+    historyMethod?:
         | typeof window.history.pushState
         | typeof window.history.replaceState;
     searchParam: string;
     shouldStopPropagation?: boolean;
-    target: EventTarget | undefined;
+    target: EventTarget;
 }
 
 export class SearchSyncer {
@@ -37,16 +37,16 @@ export class SearchSyncer {
     }
 
     public init = (): void => {
-        this.target!.addEventListener(this.eventName, this.handleSearchChange);
-        this.target!.addEventListener("popstate", this.handlePopState);
+        this.target.addEventListener(this.eventName, this.handleSearchChange);
+        this.target.addEventListener("popstate", this.handlePopState);
     };
 
     public dispose = (): void => {
-        this.target!.removeEventListener(
+        this.target.removeEventListener(
             this.eventName,
             this.handleSearchChange
         );
-        this.target!.removeEventListener("popstate", this.handlePopState);
+        this.target.removeEventListener("popstate", this.handlePopState);
         this.target = undefined;
         this.callbacks.onSearchChange = undefined;
         this.callbacks.onUrlChange = undefined;

package/src/modules/docUtils/searchSyncer/SearchSyncer.ts

@@ -0,0 +1,85 @@
+export interface SearchSyncerConstructorArgs {
+    callbacks: {
+        onSearchChange?: (nextSearchString: string) => unknown;
+        onUrlChange?: (nextSearchString: string) => unknown;
+    };
+    eventName: string;
+    historyMethod?:
+        | typeof window.history.pushState
+        | typeof window.history.replaceState;
+    searchParam: string;
+    shouldStopPropagation?: boolean;
+    target: EventTarget;
+}
+
+export class SearchSyncer {
+    private callbacks: SearchSyncerConstructorArgs["callbacks"];
+    private eventName: SearchSyncerConstructorArgs["eventName"];
+    private historyMethod: SearchSyncerConstructorArgs["historyMethod"];
+    private searchParam: SearchSyncerConstructorArgs["searchParam"];
+    private shouldStopPropagation: SearchSyncerConstructorArgs["shouldStopPropagation"];
+    private target: SearchSyncerConstructorArgs["target"];
+
+    constructor({
+        callbacks = {},
+        eventName,
+        historyMethod = window.history.pushState,
+        searchParam,
+        shouldStopPropagation = true,
+        target
+    }: SearchSyncerConstructorArgs) {
+        this.callbacks = callbacks;
+        this.eventName = eventName;
+        this.historyMethod = historyMethod.bind(window.history);
+        this.searchParam = searchParam;
+        this.shouldStopPropagation = shouldStopPropagation;
+        this.target = target;
+    }
+
+    public init = (): void => {
+        this.target.addEventListener(this.eventName, this.handleSearchChange);
+        this.target.addEventListener("popstate", this.handlePopState);
+    };
+
+    public dispose = (): void => {
+        this.target.removeEventListener(
+            this.eventName,
+            this.handleSearchChange
+        );
+        this.target.removeEventListener("popstate", this.handlePopState);
+        this.target = undefined;
+        this.callbacks.onSearchChange = undefined;
+        this.callbacks.onUrlChange = undefined;
+    };
+
+    private handleSearchChange = (event: Event): void => {
+        if (this.shouldStopPropagation) {
+            event.stopPropagation();
+        }
+
+        const { detail: searchTerm } = event as CustomEvent<string>;
+        const fullUrl = new URL(window.location.href);
+        const { searchParams } = fullUrl;
+
+        if (searchTerm) {
+            searchParams.set(this.searchParam, searchTerm);
+        } else {
+            searchParams.delete(this.searchParam);
+        }
+
+        const nextSearchString = searchParams.toString();
+
+        if (this.callbacks.onSearchChange) {
+            this.callbacks.onSearchChange(nextSearchString);
+        }
+
+        fullUrl.search = nextSearchString;
+        this.historyMethod({}, "", fullUrl.toString());
+    };
+
+    private handlePopState = (): void => {
+        if (this.callbacks.onUrlChange) {
+            this.callbacks.onUrlChange(window.location.search);
+        }
+    };
+}