@salesforcedevs/docs-components 0.17.0 → 0.17.12-search-alpha

package/src/modules/docHelpers/amfStyle/amfStyle.css

@@ -0,0 +1,355 @@
+:host {
+    --amf-sidebar-width: 275px;
+
+    /* h5 */
+    --amf-h5-font-family: var(--dx-g-font-display);
+    --amf-h5-font-size: 32px;
+    --amf-h5-font-weight: var(--dx-g-font-normal);
+    --amf-h5-font-color: var(--dx-g-blue-vibrant-20);
+    --amf-h5-line-height: var(--dx-g-spacing-2xl);
+    --amf-h5-margin: var(--dx-g-spacing-2xl) 0 var(--dx-g-spacing-lg) 0;
+    --amf-h5-padding: 0;
+
+    /* h6 */
+    --amf-h6-font-family: var(--dx-g-font-display);
+    --amf-h6-font-size: var(--dx-g-text-xl);
+    --amf-h6-font-weight: var(--dx-g-font-normal);
+    --amf-h6-font-color: var(--dx-g-blue-vibrant-20);
+    --amf-h6-line-height: var(--dx-g-spacing-xl);
+    --amf-h6-margin: 32px 0 0 0;
+    --amf-h6-padding: 0;
+
+    /* h7 */
+    --amf-h7-font-family: var(--dx-g-font-display);
+    --amf-h7-font-size: var(--dx-g-text-lg);
+    --amf-h7-font-weight: var(--dx-g-font-normal);
+    --amf-h7-font-color: var(--dx-g-blue-vibrant-20);
+    --amf-h7-line-height: 28px;
+    --amf-h7-margin: var(--dx-g-spacing-lg) 0 0 0;
+    --amf-h7-padding: 0;
+
+    /* h8 */
+    --amf-h8-font-family: var(--dx-g-font-display);
+    --amf-h8-font-size: var(--dx-g-text-base);
+    --amf-h8-font-weight: var(--dx-g-font-normal);
+    --amf-h8-font-color: var(--dx-g-blue-vibrant-20);
+    --amf-h8-line-height: 20px;
+    --amf-h8-margin: var(--dx-g-spacing-lg) 0 var(--dx-g-spacing-md) 0;
+    --amf-h8-padding: 0;
+
+    /* h8 mod */
+    --amf-h8-mod-font-family: var(--dx-g-font-sans);
+    --amf-h8-mod-font-size: var(--dx-g-text-base);
+    --amf-h8-mod-font-weight: var(--dx-g-font-bold);
+    --amf-h8-mod-font-color: var(--dx-g-blue-vibrant-20);
+    --amf-h8-mod-line-height: 20px;
+    --amf-h8-mod-margin: var(--dx-g-spacing-lg) 0 var(--dx-g-spacing-md) 0;
+    --amf-h8-mod-padding: 0;
+}
+
+api-summary,
+api-endpoint-documentation,
+api-method-documentation,
+api-documentation-document,
+api-type-documentation,
+api-security-documentation {
+    font-family: var(--dx-g-font-sans);
+
+    /* markdown styles */
+    --arc-font-body1-font-family: var(--dx-g-font-sans);
+    --arc-font-title-font-family: var(--amf-h6-font-family);
+    --arc-font-title-color: var(--amf-h6-font-color);
+    --markdown-styles-title-border-bottom-color: var(--dx-g-gray-90);
+
+    /* h2 */
+    --arc-font-title-font-size: var(--dx-g-text-xl);
+    --arc-font-title-line-height: var(--dx-g-spacing-xl);
+    --markdown-styles-h2-border-bottom: 0;
+    --markdown-styles-h2-border-top: 1px solid var(--dx-g-gray-90);
+    --arc-font-h2-margin: var(--dx-g-spacing-lg)
+        calc(-1 * var(--dx-g-spacing-2xl)) var(--dx-g-spacing-lg)
+        calc(-1 * var(--dx-g-spacing-2xl));
+    --arc-font-h2-padding: var(--dx-g-spacing-xl) var(--dx-g-spacing-2xl) 0
+        var(--dx-g-spacing-2xl);
+
+    /* h3 */
+    --arc-font-subhead-font-size: var(--amf-h8-font-size);
+    --arc-font-subhead-font-weight: var(--amf-h8-font-weight);
+    --arc-font-h3-margin: var(--amf-h8-margin);
+
+    /* p */
+    --arc-font-body1-font-size: var(--dx-g-text-sm);
+    --arc-font-body1-line-height: var(--dx-g-spacing-mlg);
+
+    /* code */
+    --arc-font-code-family: var(--dx-g-font-mono);
+
+    /* a */
+    --link-color: var(--dx-g-blue-vibrant-50);
+    --link-hover-color: var(--dx-g-blue-vibrant-50);
+
+    /* HTTP methods colors */
+    --method-display-selected-color: #fff;
+    --method-display-get-color: var(--dx-g-blue-vibrant-50);
+    --method-display-post-color: var(--dx-g-green-vibrant-40);
+    --method-display-put-color: var(--dx-g-yellow-vibrant-40);
+    --method-display-patch-color: var(--dx-g-teal-vibrant-40);
+    --method-display-delete-color: var(--dx-g-red-vibrant-40);
+
+    /* --method-display-options-color: var(--anypoint-color-teal3);
+    --method-display-head-color: var(--anypoint-color-futureGreen3);
+    HTTP methods colors in method documentation panel */
+    --http-method-label-border-radius: 4px;
+    --http-method-label-get-background-color: var(--dx-g-blue-vibrant-90);
+    --http-method-label-get-color: var(--dx-g-blue-vibrant-50);
+    --http-method-label-post-background-color: var(--dx-g-green-vibrant-90);
+    --http-method-label-post-color: var(--dx-g-green-vibrant-40);
+    --http-method-label-put-background-color: var(--dx-g-yellow-vibrant-90);
+    --http-method-label-put-color: var(--dx-g-yellow-vibrant-40);
+    --http-method-label-patch-background-color: var(--dx-g-teal-vibrant-90);
+    --http-method-label-patch-color: var(--dx-g-teal-vibrant-40);
+    --http-method-label-delete-background-color: var(
+        --dx-g-hot-orange-vibrant-90
+    );
+    --http-method-label-delete-color: var(--dx-g-red-vibrant-40);
+
+    /* --http-method-label-options-background-color: var(--method-display-options-color);
+    --http-method-label-options-color: #fff;
+    --http-method-label-head-background-color: var(--method-display-head-color);
+    --http-method-label-head-color: #fff; */
+    --http-method-label-padding: 2px 6px;
+    --http-method-label-font-size: 12px;
+    --http-method-label-font-weigth: var(--dx-g-font-bold);
+    --http-method-label-margin: 0 8px 0 0;
+
+    /* arc */
+    --arc-font-headline-font-family: var(--amf-h6-font-family);
+    --arc-font-headline-color: var(--amf-h6-font-color);
+    --arc-font-headline-font-size: var(--amf-h6-font-size);
+    --arc-font-headline-font-weight: var(--dx-g-font-bold);
+    --arc-font-headline-letter-spacing: -0.2px;
+    --arc-font-headline-line-height: var(--amf-h6-line-height);
+
+    /* api */
+    --api-parameters-document-title-border: 0;
+    --api-body-document-title-border: 0;
+    --api-type-document-trait-font-family: var(--dx-g-font-sans);
+    --api-type-document-union-button-active-background-color: transparent;
+    --api-type-document-union-button-active-color: var(--dx-g-blue-vibrant-20);
+    --api-type-document-union-button-background-color: transparent;
+    --api-type-document-union-button-color: var(--dx-g-blue-vibrant-50);
+    --api-type-document-media-button-border-color: transparent;
+    --property-shape-document-padding: 24px 0;
+    --property-shape-document-title-font-family: var(--dx-g-font-mono);
+    --property-shape-document-object-color: var(--dx-g-blue-vibrant-90);
+    --property-shape-document-array-color: var(--dx-g-blue-vibrant-90);
+    --property-shape-document-union-color: var(--dx-g-blue-vibrant-90);
+
+    /* anypoint button */
+    --anypoint-button-font-size: var(--dx-g-text-sm);
+    --anypoint-button-color: var(--dx-g-blue-vibrant-50);
+    --anypoint-button-text-transform: capitalize;
+    --anypoint-button-background-color: transparent;
+    --anypoint-button-hover-background-color: transparent;
+    --anypoint-button-active-background-color: transparent;
+    --anypoint-button-emphasis-low-focus-color: var(--dx-g-blue-vibrant-20);
+    --anypoint-button-emphasis-low-hover-background-color: transparent;
+    --anypoint-button-emphasis-low-focus-background-color: transparent;
+    --anypoint-button-emphasis-low-active-background-color: transparent;
+    --anypoint-button-emphasis-medium-focus-background-color: transparent;
+    --anypoint-button-emphasis-medium-focus-border-color: transparent;
+    --anypoint-button-emphasis-medium-hover-background-color: transparent;
+    --anypoint-button-emphasis-medium-active-background-color: transparent;
+    --anypoint-button-emphasis-high-background-color: transparent;
+    --anypoint-button-emphasis-high-hover-background-color: transparent;
+    --anypoint-button-emphasis-high-focus-background-color: transparent;
+    --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-title-background-color: transparent;
+
+    /* code snippets */
+    --http-code-snippet-container-background-color: rgb(250 250 250);
+    --http-code-snippet-container-padding: var(--dx-g-spacing-md);
+
+    /* prism */
+
+    /* --code-operator-value-background-color */
+}
+
+api-endpoint-documentation {
+    --api-endpoint-documentation-h2-font-family: var(--amf-h8-font-family);
+    --api-endpoint-documentation-h2-font-color: var(--amf-h8-font-color);
+    --api-endpoint-documentation-h2-font-size: var(--amf-h8-font-size);
+    --api-endpoint-documentation-h2-font-weight: var(--amf-h8-font-weight);
+    --api-endpoint-documentation-h2-line-height: var(--amf-h8-line-height);
+    --api-endpoint-documentation-h2-margin: var(--amf-h8-margin);
+
+    /* url */
+    --api-method-documentation-url-font-family: var(--amf-h5-font-family);
+    --api-method-documentation-url-font-size: var(--amf-h5-font-size);
+    --api-method-documentation-url-font-weight: var(--amf-h5-font-weight);
+    --api-method-documentation-url-font-color: var(--amf-h5-font-color);
+    --api-method-documentation-url-line-height: var(--amf-h5-line-height);
+    --api-method-documentation-url-margin: var(--amf-h5-margin);
+    --api-method-documentation-url-padding: var(--amf-h5-padding);
+    --api-method-documentation-url-value-margin: 0;
+    --api-method-documentation-url-background-color: transparent;
+
+    /* method */
+    --api-endpoint-documentation-method-label-font-family: var(
+        --dx-g-font-display
+    );
+    --api-endpoint-documentation-method-label-font-size: var(--dx-g-text-xs);
+    --api-endpoint-documentation-method-label-font-weight: var(
+        --dx-g-font-bold
+    );
+
+    /* description */
+    --api-endpoint-documentation-description-color: rgb(24 24 24);
+}
+
+api-endpoint-documentation,
+api-method-documentation {
+    --api-endpoint-documentation-method-value-font-family: var(
+        --dx-g-font-display
+    );
+    --api-endpoint-documentation-method-value-font-color: var(
+        --dx-g-blue-vibrant-20
+    );
+    --api-endpoint-documentation-method-value-font-size: var(--dx-g-text-base);
+    --api-endpoint-documentation-method-value-font-weight: var(
+        --dx-g-font-bold
+    );
+    --api-endpoint-documentation-method-value-line-height: 20px;
+    --api-method-documentation-summary-p-margin-bottom: var(--dx-g-spacing-md);
+}
+
+api-method-documentation {
+    --api-method-documentation-h2-font-family: var(--amf-h6-font-family);
+    --api-method-documentation-h2-font-size: var(--amf-h6-font-size);
+    --api-method-documentation-h2-font-weight: var(--amf-h6-font-weight);
+    --api-method-documentation-h2-line-height: var(--amf-h6-line-height);
+    --api-method-documentation-h2-font-color: var(--amf-h6-font-color);
+
+    /* method h3 */
+    --api-method-documentation-h3-font-family: var(--amf-h7-font-family);
+    --api-method-documentation-h3-font-size: var(--amf-h7-font-size);
+    --api-method-documentation-h3-font-weight: var(--amf-h7-font-weight);
+    --api-method-documentation-h3-line-height: var(--amf-h7-line-height);
+    --api-method-documentation-h3-font-color: var(--amf-h7-font-color);
+    --api-method-documentation-title-text-transform: none;
+
+    /* body h3 */
+    --api-body-document-h3-font-family: var(--amf-h7-font-family);
+    --api-body-document-h3-font-size: var(--amf-h7-font-size);
+    --api-body-document-h3-font-weight: var(--amf-h7-font-weight);
+    --api-body-document-h3-line-height: var(--amf-h7-line-height);
+    --api-body-document-h3-font-color: var(--amf-h7-font-color);
+
+    /* params h3 */
+    --api-parameters-document-h3-font-family: var(--amf-h7-font-family);
+    --api-parameters-document-h3-font-size: var(--amf-h7-font-size);
+    --api-parameters-document-h3-font-weight: var(--amf-h7-font-weight);
+    --api-parameters-document-h3-line-height: var(--amf-h7-line-height);
+    --api-parameters-document-h3-font-color: var(--amf-h7-font-color);
+
+    /* anypoint button */
+    --anypoint-button-font-family: var(--dx-g-font-display);
+    --anypoint-button-font-size: var(--dx-g-text-base);
+    --anypoint-button-background-color: transparent;
+    --anypoint-button-color: var(--dx-g-blue-vibrant-50);
+    --anypoint-button-text-transform: uppercase;
+
+    /* method documentation */
+    --api-method-documentation-http-method-label-font-size: var(--dx-g-text-xs);
+    --api-method-documentation-http-method-label-font-family: var(
+        --dx-g-font-display
+    );
+    --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-operation-id-color: var(--dx-g-gray-50);
+
+    /* body */
+    --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
+    );
+    --api-body-document-media-type-selector-font-weight: var(
+        --amf-h8-mod-font-weight
+    );
+    --api-body-document-toggle-view-color: var(--dx-g-blue-vibrant-50);
+    --api-body-document-toggle-view-font-size: var(--amf-h8-mod-font-size);
+    --api-body-document-toggle-view-font-weight: var(--amf-h8-mod-font-weight);
+    --api-body-document-media-button-color: var(--dx-g-blue-vibrant-20);
+    --api-body-document-media-button-background-color: transparent;
+    --api-body-document-media-button-text-decoration: underline 2px;
+    --api-body-document-media-button-text-underline-offset: 4px;
+
+    /* resource */
+    --api-resource-example-document-button-color: var(--dx-g-blue-vibrant-50);
+    --api-resource-example-document-button-font-size: var(--dx-g-text-sm);
+    --api-resource-example-document-button-font-weight: var(--dx-g-font-normal);
+    --api-resource-example-document-button-active-outline: none;
+    --api-resource-example-document-button-active-text-decoration: underline 1px;
+    --api-resource-example-document-button-active-text-underline-offset: 3px;
+    --api-resource-example-document-button-active-background-color: transparent;
+    --api-resource-example-document-button-active-color: var(
+        --dx-g-blue-vibrant-20
+    );
+}
+
+api-summary::part(api-title) {
+    font-family: var(--dx-g-font-display);
+    font-size: var(--dx-g-text-3xl);
+    color: var(--dx-g-blue-vibrant-20);
+    line-height: var(--dx-g-text-4xl);
+    letter-spacing: -0.85px;
+    margin: var(--dx-g-spacing-sm) 0;
+}
+
+api-summary::part(api-title-label) {
+    display: none;
+}
+
+api-summary::part(api-version) {
+    font-family: var(--dx-g-font-display);
+    font-size: var(--dx-g-text-sm);
+    color: var(--dx-g-blue-vibrant-50);
+}
+
+api-summary::part(marked-description) {
+    margin: var(--dx-g-spacing-sm) 0;
+}
+
+api-summary::part(info-section) {
+    margin: 0;
+}
+
+api-summary::part(license-section) {
+    margin: 0;
+}
+
+api-summary::part(info-inline-desc) {
+    margin-bottom: var(--dx-g-spacing-md);
+}
+
+api-type-documentation::part(type-title) {
+    margin-top: var(--dx-g-spacing-lg);
+    margin-bottom: var(--dx-g-spacing-md);
+}
+
+api-security-documentation::part(security-title) {
+    font-family: var(--amf-h6-font-family);
+    font-size: var(--amf-h6-font-size);
+    font-weight: var(--amf-h6-font-weight);
+    color: var(--amf-h6-font-color);
+    line-height: var(--amf-h6-line-height);
+    margin: var(--amf-h6-margin);
+    padding: var(--amf-h6-padding);
+}

package/src/modules/docHelpers/contentLayoutStyle/contentLayoutStyle.css

@@ -0,0 +1,131 @@
+:host {
+    --dx-c-content-vertical-spacing: var(--dx-g-spacing-lg);
+    --dx-c-content-sidebar-sticky-top: calc(
+        var(--dx-g-global-header-height) + var(--dx-g-doc-header-height)
+    );
+    --dx-c-sidebar-height: calc(
+        100vh -
+            calc(
+                var(--dx-g-global-header-height) + var(--dx-g-doc-header-height)
+            )
+    );
+    --dx-c-content-scroll-margin-top: calc(
+        var(--dx-g-global-header-height) + var(--dx-g-doc-header-height) +
+            var(--dx-g-spacing-2xl)
+    );
+
+    display: block;
+}
+
+doc-breadcrumbs {
+    --dx-c-popover-z-index: 5;
+
+    display: block;
+    margin-bottom: var(--dx-g-spacing-2xl);
+}
+
+dx-sidebar,
+dx-sidebar-old {
+    --dx-c-sidebar-vertical-padding: var(--dx-g-spacing-md);
+
+    z-index: calc(var(--dx-g-z-index-100) + 5);
+}
+
+dx-toc {
+    --dx-c-toc-width: unset;
+
+    height: calc(100% - var(--dx-c-content-vertical-spacing) * 2);
+    margin: var(--dx-c-content-vertical-spacing) 0;
+    overflow-y: auto;
+}
+
+dx-sidebar,
+dx-toc {
+    display: block;
+}
+
+/* offset page jump link due to fixed header */
+::slotted(doc-heading) {
+    scroll-margin-top: var(--dx-c-content-scroll-margin-top);
+}
+
+.content {
+    display: flex;
+    position: relative;
+}
+
+.content-body-doc-phase-container {
+    flex: 1;
+    border-left: 1px solid var(--dx-g-gray-90);
+}
+
+.content-body-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    max-width: var(--dx-g-doc-content-max-width);
+
+    /* Derived this manually by substracting (topHeader, doc header, banner and the content). */
+    min-height: 62vh;
+    margin: auto;
+    padding: 0 var(--dx-g-global-header-padding-horizontal);
+    margin-bottom: calc(2 * (var(--dx-g-spacing-5xl) + 4px));
+}
+
+.content-body {
+    margin: var(--dx-g-spacing-md) 0 0;
+    max-width: 900px;
+    flex: 1;
+    width: 0;
+}
+
+.is-sticky {
+    align-self: flex-start;
+    position: sticky;
+    top: var(--dx-c-content-sidebar-sticky-top);
+}
+
+.right-nav-bar {
+    margin-left: var(--dx-g-spacing-2xl);
+}
+
+@media screen and (max-width: 1024px) {
+    .right-nav-bar {
+        display: none;
+    }
+}
+
+@media screen and (max-width: 800px) {
+    .content-body {
+        margin-top: var(--dx-c-content-vertical-spacing);
+    }
+
+    .content-body-doc-phase-container {
+        border-left: 0;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .is-sticky {
+        width: 100%;
+    }
+
+    .content {
+        flex-direction: column;
+    }
+
+    .content-body-container {
+        padding-right: 0;
+        overflow-x: auto;
+        margin-bottom: calc(var(--dx-g-spacing-5xl) + 4px);
+    }
+
+    .left-nav-bar {
+        height: unset;
+    }
+
+    .content-body {
+        margin-left: var(--dx-g-spacing-mlg, 20px);
+        margin-right: var(--dx-g-spacing-mlg, 20px);
+    }
+}

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

@@ -0,0 +1,59 @@
+img.content-image {
+    height: auto;
+    display: unset;
+}
+
+.image-framed {
+    border: 1px solid black;
+}
+
+.image-xxl,
+.image-full {
+    max-width: 1000px;
+    width: 100%;
+}
+
+.image-xl {
+    max-width: 750px;
+    width: 100%;
+}
+
+.image-lg {
+    max-width: 660px;
+    width: 100%;
+}
+
+.image-md {
+    max-width: 500px;
+    width: 100%;
+}
+
+.image-sm {
+    max-width: 330px;
+    width: 100%;
+}
+
+.image-xs {
+    max-width: 250px;
+    width: 100%;
+}
+
+.image-xxs {
+    max-width: 125px;
+    width: 100%;
+}
+
+.image-icon-lg {
+    max-width: 32px;
+    width: 100%;
+}
+
+.image-icon-md {
+    max-width: 20px;
+    width: 100%;
+}
+
+.image-icon-sm {
+    max-width: 16px;
+    width: 100%;
+}

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

@@ -0,0 +1,22 @@
+:host {
+    --dx-status-icon-color: var(--dx-g-gray-10);
+    --doc-status-vertical-padding: var(--dx-g-spacing-md);
+}
+
+.doc-status-base {
+    border-left: 4px solid;
+    padding: var(--doc-status-vertical-padding);
+}
+
+.doc-status-container {
+    background-color: rgb(253 252 247);
+    border-color: var(--dx-g-yellow-vibrant-80);
+}
+
+.doc-status-title {
+    font-weight: var(--dx-g-font-bold);
+}
+
+.doc-status-icon {
+    margin-right: var(--dx-g-spacing-md);
+}

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

@@ -0,0 +1,86 @@
+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);
+        // @ts-ignore
+        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);
+        }
+    };
+}

package/src/modules/docUtils/utils/__mocks__/coveo.analytics.ts

@@ -0,0 +1,16 @@
+export class CoveoAnalyticsClient {
+    private config: { token: string; endpoint: string };
+
+    constructor(config: { token: string; endpoint: string }) {
+        this.config = config;
+    }
+
+    sendViewEvent(event: {
+        contentIdKey: string;
+        contentType?: string;
+        contentIdValue: string;
+    }): void {
+        // Mock implementation
+        console.log("Mock Coveo Analytics event:", event);
+    }
+}

package/src/modules/docUtils/utils/coveo.analytics.d.ts

@@ -0,0 +1,10 @@
+declare module "coveo.analytics/dist/browser.mjs" {
+    export class CoveoAnalyticsClient {
+        constructor(config: { token: string; endpoint: string });
+        sendViewEvent(event: {
+            contentIdKey: string;
+            contentType?: string;
+            contentIdValue: string;
+        }): void;
+    }
+}