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

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.classList;
+                const classList = (codeBlockEl.firstChild as any).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() === "";
+                    flag &= (detailEls[i].innerHTML.trim() === "") as any; // Dark Magic TM
                 }
 
                 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) => {
+            anchorEls.forEach((anchorEl: any) => {
                 if (
-                    anchorEl.textContent.includes("Next →") ||
-                    anchorEl.textContent.includes("← Previous")
+                    anchorEl.textContent!.includes("Next →") ||
+                    anchorEl.textContent!.includes("← Previous")
                 ) {
                     if (this.showPaginationButtons) {
                         this.renderPaginationButton(anchorEl);
@@ -326,8 +326,7 @@ export default class Content extends LightningElement {
 
     handleNavClick(event: InputEvent) {
         event.preventDefault();
-        // eslint-disable-next-line no-use-before-define
-        const target = event.currentTarget.dataset.id;
+        const target = (event.currentTarget! as any).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) {
+    set sidebarContent(value: any) {
         this._sidebarContent = toJson(value);
     }
 
@@ -67,7 +67,9 @@ export default class ContentLayout extends LightningElement {
 
     @api
     setSidebarInputValue(searchTerm: string): void {
-        this.template.querySelector("dx-sidebar")?.setInputValue(searchTerm);
+        (this.template.querySelector("dx-sidebar") as any)?.setInputValue(
+            searchTerm
+        );
     }
 
     @track
@@ -76,11 +78,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;
@@ -105,7 +107,8 @@ export default class ContentLayout extends LightningElement {
         target: window
     });
     private tocValue?: string = undefined;
-    private observerTimerId = null;
+    // eslint-disable-next-line no-undef
+    private observerTimerId?: NodeJS.Timeout;
     private didScrollToSelectedHash = false;
     private _scrollInterval = 0;
 
@@ -203,9 +206,9 @@ export default class ContentLayout extends LightningElement {
             ".sticky-doc-header"
         ) as HTMLElement;
 
-        const docPhaseEl = this.template
-            .querySelector("[name=doc-phase]")!
-            .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.");
@@ -247,7 +250,7 @@ export default class ContentLayout extends LightningElement {
                     document.querySelectorAll("doc-heading")
                 );
                 docHeadingEls.forEach((docHeadingEl) => {
-                    docHeadingEl.style.scrollMarginTop = `${
+                    (docHeadingEl as any).style.scrollMarginTop = `${
                         globalNavHeight +
                         docHeaderHeight +
                         docPhaseEl.getBoundingClientRect().height
@@ -255,9 +258,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 = `${
@@ -291,7 +293,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();
@@ -303,10 +305,9 @@ 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) {
+        for (const headingElement of headingElements as any) {
             // 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
@@ -320,23 +321,26 @@ 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) {
+            for (const headingElement of headingElements as any) {
                 // 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) {
+            for (const headingElement of headingElements as any) {
                 headingElement.id = headingElement.hash;
 
                 // Update tocOptions from anchorTags only for H2, consider default as 2 as per component
@@ -362,7 +366,7 @@ export default class ContentLayout extends LightningElement {
     private disconnectObserver(): void {
         if (this.observer) {
             this.observer.disconnect();
-            this.observer = null;
+            this.observer = undefined;
         }
     }
 
@@ -387,15 +391,15 @@ export default class ContentLayout extends LightningElement {
                 globalNavEl.offsetHeight +
                 contextNavEl.offsetHeight;
 
-            const docPhaseEl = this.template
-                .querySelector("[name=doc-phase]")!
-                .assignedElements()[0] as HTMLSlotElement;
+            const docPhaseEl = (
+                this.template.querySelector("[name=doc-phase]")! as any
+            ).assignedElements()[0] as HTMLSlotElement;
 
             const offset = docPhaseEl
                 ? headerHeight + docPhaseEl.offsetHeight
                 : headerHeight;
 
-            for (const headingElement of headingElements) {
+            for (const headingElement of headingElements as any) {
                 if (headingElement.getAttribute("id") === hash) {
                     this.scrollIntoViewWithOffset(headingElement, offset);
                     break;
@@ -432,14 +436,14 @@ export default class ContentLayout extends LightningElement {
         this.lastScrollPosition = currentScrollPosition;
     }
 
-    private calculatePreviousElementId(): string {
+    private calculatePreviousElementId(): string | undefined {
         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): void {
+    private assignElementId(id: string | undefined): void {
         // Change toc(RNB) highlight only for H2
         if (this.tocOptionIdsSet.has(id)) {
             this.tocValue = id;

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

@@ -11,12 +11,14 @@ 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.dataset.id.split("-");
+        const target = (event.currentTarget as any).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): void => console.log(error);
+const handleContentError = (error: any): void => console.log(error);
 
 const PIXEL_PER_CHARACTER_MAP: { [key: string]: number } = {
     default: 7.7,
@@ -31,6 +31,7 @@ export default class DocXmlContent extends LightningElementWithState<{
     isFetchingDocument: boolean;
     isFetchingContent: boolean;
     lastHighlightedSearch: string;
+    internalLinkClicked: boolean;
 }> {
     @api apiDomain = "https://developer.salesforce.com";
     @api coveoOrganizationId!: string;
@@ -60,14 +61,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;
+    private language?: DocLanguage | null = null;
     private loaded = false;
     private pdfUrl = "";
     private tocMap: TocMap = {};
-    private sidebarContent: Array<TreeNode> = null;
-    private version: DocVersion = null;
+    private sidebarContent: Array<TreeNode> | null = null;
+    private version: DocVersion | null = null;
     private docTitle = "";
     private _pathName = "";
     private _pageHeader?: Header;
@@ -174,8 +175,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");
@@ -223,15 +224,15 @@ export default class DocXmlContent extends LightningElementWithState<{
         }
     }
 
-    private get languageId(): string {
-        return this.language.id.replace("-", "_");
+    private get languageId(): string | undefined {
+        return this.language?.id.replace("-", "_");
     }
 
-    private get releaseVersionId(): string {
-        return this.version.id;
+    private get releaseVersionId(): string | undefined {
+        return this.version?.id;
     }
 
-    private get deliverable(): string {
+    private get deliverable(): string | undefined {
         return this.pageReference.deliverable;
     }
 
@@ -252,10 +253,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;
@@ -266,7 +268,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;
@@ -309,7 +311,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
         );
     }
@@ -358,7 +360,7 @@ export default class DocXmlContent extends LightningElementWithState<{
         this.updateUrl();
     }
 
-    handleLanguageChange = (event: CustomEvent<string>): Promise<void> => {
+    handleLanguageChange = (event: any) => {
         if (this.language && this.language.id === event.detail) {
             return;
         }
@@ -366,7 +368,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,
@@ -453,8 +455,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.
@@ -517,12 +519,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
             }
         );
 
@@ -586,23 +588,26 @@ export default class DocXmlContent extends LightningElementWithState<{
     }
 
     private updateSearchInput(searchParam: string): void {
-        this.template
-            .querySelector("doc-content-layout")
-            ?.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;
         return `/${page}/${docId}/${deliverable}/${contentDocumentId}${this.normalizeSearch(
-            search
+            search!
         )}${this.normalizeHash(hash)}`;
     }
 
-    private normalizeUrlPart(part: string, sentinel: string): string {
+    private normalizeUrlPart(
+        part: string | undefined,
+        sentinel: string
+    ): string {
         return (
             (part &&
-                (part.startsWith(sentinel) ? part : `${sentinel}${part}`)) ||
+                (part.startsWith(sentinel!) ? part : `${sentinel}${part}`)) ||
             ""
         );
     }
@@ -611,16 +616,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 | undefined,
+        topicTitle: string | null | undefined,
         docTitle: string | undefined
     ): string {
         // map to avoid duplicates
-        const titleMap = {};
+        const titleMap: { [key: string]: any } = {};
         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
@@ -757,7 +762,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/LICENSE

@@ -1,12 +0,0 @@
-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/src/modules/docUtils/SearchSyncer/SearchSyncer.ts

@@ -1,85 +0,0 @@
-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);
-        }
-    };
-}