@salesforcedevs/dx-components 0.26.1-alpha0.6 → 0.27.0

package/src/modules/dx/searchResults/searchResults.css

@@ -0,0 +1,387 @@
+@import "helpers/reset";
+@import "./coveo.css";
+
+/* stylelint-disable selector-class-pattern */
+.CoveoSearchInterface {
+    font-family: var(--dx-g-font-sans);
+    background-color: #fafaf9;
+}
+
+.coveo-tab-section {
+    text-align: left;
+    background-color: transparent;
+    border: none;
+    padding-left: 10px;
+    margin-bottom: var(--dx-g-spacing-lg);
+}
+
+@media (max-width: 480px) {
+    .CoveoSearchInterface .coveo-tab-section {
+        background-color: transparent;
+    }
+}
+
+.CoveoSearchbox {
+    display: none;
+}
+
+.CoveoTab {
+    font-family: var(--dx-g-font-display);
+    height: auto;
+    padding: 0;
+}
+
+.CoveoTab.coveo-selected {
+    border-bottom-color: var(--dx-g-blue-vibrant-50);
+}
+
+.CoveoTab p {
+    color: var(--dx-g-blue-vibrant-50);
+    font-size: var(--dx-g-text-md);
+    line-height: var(--dx-g-text-md);
+    height: initial;
+    padding-bottom: var(--dx-g-spacing-sm);
+}
+
+.coveo-small-tabs .CoveoTab.coveo-selected p,
+.coveo-small-tabs .CoveoTab.coveo-selected:hover p {
+    border-bottom-color: var(--dx-g-blue-vibrant-50);
+}
+
+.CoveoSearchInterface.coveo-small-facets .coveo-facet-dropdown-header {
+    border: none;
+    background: none;
+}
+
+.CoveoSearchInterface.coveo-small-tabs .coveo-dropdown-header,
+.CoveoSearchInterface.coveo-small-facets .coveo-dropdown-header,
+.CoveoSearchInterface.coveo-small-recommendation .coveo-dropdown-header {
+    color: var(--dx-g-blue-vibrant-50);
+    font-size: var(--dx-g-text-sm);
+}
+
+.CoveoSearchInterface.coveo-small-facets
+    .coveo-facet-column.coveo-facet-dropdown-content {
+    background-color: white;
+    padding: var(--dx-g-spacing-md);
+    border-radius: var(--dx-g-spacing-xs);
+    overflow-y: auto;
+    border: 1px solid var(--dx-g-gray-90);
+    box-shadow: 0 5px 10px 1px rgb(0 0 0 / 7%);
+    z-index: 30;
+}
+
+.CoveoSearchInterface.coveo-small-tabs .coveo-dropdown-header-wrapper a,
+.CoveoSearchInterface.coveo-small-facets .coveo-dropdown-header-wrapper a {
+    margin-right: 0;
+    padding-bottom: 5px;
+    border-bottom: 2px solid transparent;
+    box-sizing: content-box;
+}
+
+.CoveoDynamicFacet {
+    background: none;
+    border-bottom: 1px solid #c9c9c9;
+    padding: 15px;
+    margin-bottom: 0;
+}
+
+.CoveoDynamicFacet:first-of-type {
+    border-top: 1px solid #c9c9c9;
+}
+
+.coveo-dynamic-facet-header {
+    border: none;
+}
+
+.coveo-dynamic-facet-header-title {
+    font-family: var(--dx-g-font-display);
+    font-size: var(--dx-g-text-sm);
+    color: var(--dx-g-gray-30);
+}
+
+.coveo-dynamic-facet-header-clear {
+    display: none !important; /* needs to override inline style */
+}
+
+.coveo-dynamic-facet-values {
+    padding-top: 10px;
+}
+
+.coveo-dynamic-facet-collapsed .coveo-dynamic-facet-values {
+    padding: 0;
+}
+
+.coveo-dynamic-facet-value {
+    font-size: var(--dx-g-text-xs);
+}
+
+.coveo-checkbox-button,
+input[type="checkbox"].coveo-checkbox + button {
+    border-color: #dddbda;
+}
+
+input[type="checkbox"].coveo-checkbox:checked + button::before {
+    border-color: var(--dx-g-blue-vibrant-50);
+}
+
+.coveo-dynamic-facet-value .coveo-checkbox-span-label-suffix {
+    display: none;
+}
+
+.coveo-dynamic-facet-value .coveo-checkbox-span-label {
+    color: #3e3e3c;
+}
+
+.coveo-dynamic-facet-value.coveo-selected .coveo-checkbox-span-label {
+    font-weight: normal;
+}
+
+li.coveo-dynamic-facet-breadcrumb-value-list-item {
+    margin-top: 10px;
+}
+
+.coveo-dynamic-facet-breadcrumb-title {
+    color: var(--dx-g-gray-30);
+    font-weight: var(--dx-g-font-demi);
+}
+
+.coveo-dynamic-facet-breadcrumb-value {
+    background-color: white;
+    color: var(--dx-g-blue-vibrant-50);
+    border: 1px solid var(--dx-g-blue-vibrant-50);
+    border-radius: 500px;
+    padding: 8px 12px;
+    font-size: var(--dx-g-text-base);
+    font-weight: bold;
+    margin-right: 10px;
+}
+
+.coveo-dynamic-facet-breadcrumb-value:hover {
+    background-color: var(--dx-g-blue-vibrant-95);
+    text-decoration: none;
+}
+
+.coveo-dynamic-facet-breadcrumb-value-clear {
+    color: var(--dx-g-blue-vibrant-50);
+}
+
+.coveo-dynamic-facet-breadcrumb-value-clear svg {
+    display: inline;
+}
+
+.coveo-dynamic-facet-collapse-toggle-svg {
+    color: var(--dx-g-blue-vibrant-50);
+}
+
+.CoveoResultList {
+    margin-top: var(--dx-g-spacing-lg);
+}
+
+.CoveoSort {
+    font-size: var(--dx-g-text-sm);
+    color: var(--dx-g-blue-vibrant-20);
+    border-bottom-color: transparent;
+    padding: 0;
+    padding-bottom: 5px;
+    margin-right: var(--dx-g-spacing-md);
+}
+
+.CoveoSort:last-of-type {
+    margin-right: 0;
+}
+
+.CoveoSort:hover {
+    border-bottom-color: var(--dx-g-blue-vibrant-20);
+}
+
+.CoveoSort.coveo-selected,
+.CoveoSort.coveo-selected:hover {
+    color: var(--dx-g-blue-vibrant-50);
+    border-bottom-color: var(--dx-g-blue-vibrant-50);
+}
+
+.CoveoBreadcrumb {
+    border-bottom: none;
+    padding: 0;
+}
+
+@media (max-width: 768px) {
+    .CoveoBreadcrumb {
+        margin-left: 10px;
+    }
+}
+
+.coveo-breadcrumb-clear-all {
+    display: none;
+}
+
+.coveo-list-layout.CoveoResult {
+    border-bottom: none;
+    padding: 0;
+    width: 100%;
+}
+
+.CoveoSearchInterface .coveo-results-footer {
+    display: none;
+}
+
+.coveo-pager-list-item {
+    border: none;
+    border-radius: 16px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 32px;
+    margin: 0 10px;
+    padding: 0;
+}
+
+.coveo-pager-list-item.coveo-active,
+.coveo-pager-list-item:hover {
+    background-color: var(--dx-g-blue-vibrant-50);
+    color: white;
+}
+
+.coveo-pager-previous-icon-svg,
+.coveo-pager-next-icon-svg {
+    color: var(--dx-g-blue-vibrant-50);
+}
+
+.coveo-pager-previous:hover .coveo-pager-previous-icon-svg,
+.coveo-pager-next:hover .coveo-pager-next-icon-svg {
+    color: white;
+}
+
+.coveo-results-header {
+    box-shadow: none;
+}
+
+.coveo-results-header > *:not(:first-child) {
+    border-right: none;
+}
+
+.dx-result {
+    background: white;
+    border-radius: 16px;
+    border: 1px solid rgba(24, 24, 24, 0.04);
+    box-shadow: 0 0 2px 0 rgba(24, 24, 24, 0.08),
+        0 2px 4px 1px rgba(24, 24, 24, 0.16);
+    padding: 20px;
+    margin-bottom: var(--dx-g-spacing-lg);
+}
+
+.dx-result-title {
+    font-family: var(--dx-g-font-display);
+    font-size: var(--dx-g-text-lg);
+    margin: 0;
+    margin-bottom: var(--dx-g-spacing-sm);
+}
+
+.CoveoResultLink,
+a.CoveoResultLink,
+.CoveoResult a.CoveoResultLink {
+    color: var(--dx-g-blue-vibrant-20);
+}
+
+.dx-result-excerpt {
+    color: var(--dx-g-gray-10);
+    font-size: 14px;
+    line-height: 20px;
+    margin: 0;
+}
+
+.dx-search-header {
+    padding: var(--dx-g-spacing-xl);
+    background: url("data:image/svg+xml,%3Csvg width='1440' height='170' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%2392DAFF' fill-rule='nonzero'%3E%3Cpath d='M841 141l-2 2-1 4-4 1-2 2 2 2 4 1 1 4 2 1 2-1 2-4 4-1 1-2-1-2-4-1-2-4-2-2zm0 2l2 4 1 1 4 2-4 1-1 1-2 4-1-4-2-1-4-1 4-2 2-1 1-4zM1224 42l-1 1-2 4-4 2-1 2 1 2 4 1 2 4 1 1 2-1 2-4 4-1 1-2-1-2-4-2-2-3-2-2zm0 2l2 4 1 1 4 2-4 1-1 1-2 4-1-4-1-1-4-1 4-2 1-1 1-4zM506 19l-2 1-2 4-4 2-1 1 1 2 4 2 2 4 2 1 2-1 1-4 4-2 2-2-2-1-4-2-1-4-2-1zm0 2l1 4h1l1 1 4 1-4 2-2 1-1 4-2-4-1-1-4-2 4-1 1-1 2-4zM1298 0l-5 5a85 85 0 00-4 120 1 1 0 11-1 1 87 87 0 017-126h3zM1440 112c-6 10-14 18-23 25a1 1 0 01-1-1 89 89 0 0024-28v4zM1339 79c13-3 26 4 31 16 5 11 0 25-11 31a1 1 0 11-1-1c10-7 14-19 10-30-4-10-16-17-28-14-12 2-21 12-21 23a1 1 0 11-2 0c0-12 9-23 22-25z'/%3E%3Cpath d='M1362 86h2c10 10 10 27 0 37-9 8-23 8-32 0-7-7-7-18 0-24 3-3 7-4 10-4 4 0 8 1 11 4 4 4 4 11 0 16a10 10 0 01-14 0 1 1 0 111-2l6 3c2 0 4-1 5-3 4-3 4-9 0-13-2-2-5-3-9-3-3 0-6 1-8 3-7 6-7 16 0 22 7 7 20 7 28 0 10-10 10-25 0-35v-1zM1387 115c10-5 23-1 28 8 6 10 2 22-8 28-10 5-22 3-29-7a1 1 0 012-1c6 9 17 11 26 6s12-16 7-25c-5-8-16-12-25-7a1 1 0 11-1-2z'/%3E%3Cpath d='M1371 103c4-1 8 0 12 2 3 3 5 6 5 11a1 1 0 01-2 0c0-4-1-7-4-9s-7-3-11-2a1 1 0 110-2zM1381 125c6-6 14-6 20 0 4 4 4 11 0 15-4 3-10 3-13 0a1 1 0 011-2c3 3 8 3 10 0 4-3 4-9 0-12-4-4-12-4-17 0-2 3-4 6-4 10s2 8 4 10a20 20 0 0027 0 1 1 0 012 2c-4 4-9 6-15 6s-11-2-15-6c-3-3-5-7-5-12 0-4 2-8 5-11z'/%3E%3Cpath d='M1378 143a1 1 0 112 1c-5 10-15 16-27 17-11 1-22-5-28-14a1 1 0 112-1c6 9 16 14 26 13 11-1 20-7 25-16z'/%3E%3Cpath d='M1285 144l1 1c4 7 11 11 19 12 8 0 16-4 20-11a1 1 0 011 1c-4 8-12 12-21 12-9-1-17-6-21-13l1-2z'/%3E%3Cpath d='M1300 121c4 0 8 2 11 5 2 2 4 5 4 8 0 4-2 7-4 9-4 4-11 4-15 0a1 1 0 112-1c3 3 8 3 12 0 2-2 3-5 3-8 0-2-1-5-3-7-3-2-6-4-10-4s-7 2-10 4c-3 3-5 8-5 12s2 8 5 11c4 4 10 7 16 7s11-3 15-7a1 1 0 112 2c-5 4-11 7-17 7-7 0-13-3-17-7s-6-8-6-13 2-10 6-13c3-3 7-5 11-5zM1296 101c8-2 16-1 22 2a1 1 0 11-1 2c-6-3-13-4-20-2s-12 6-15 13a1 1 0 11-2-1c3-7 9-12 16-14zM1270 96a1 1 0 010 2h-40c-5 0-9 4-9 8v1c0 5 4 9 9 9h17c6 0 12 5 12 11l-4 7c-2 2-5 3-7 3h-18a1 1 0 010-2h17l7-2 3-6c0-5-4-9-9-9h-18c-6 0-11-5-11-11s5-11 11-11h40zM1209 135a1 1 0 010 2h-43a1 1 0 010-2h43zM1217 155c7 0 12 5 12 11l-1 4h-2l1-4c0-5-4-9-9-9h-8a1 1 0 010-2h7z'/%3E%3Cpath d='M1306 156a1 1 0 010 2h-44c-4 0-8 4-8 9v3h-2v-3c0-6 4-10 10-11h44zM1166 135a1 1 0 110 2c-5 0-10 4-10 9s4 9 9 9h17a1 1 0 010 2h-16c-7 0-12-5-12-11s5-11 12-11zM1193 153a1 1 0 012 1h-1l-5 6a1 1 0 01-2-1v-1l6-5zM1201 153a1 1 0 012 1l-6 6a1 1 0 01-2-1l1-1 5-5zM1219 132h1v9a1 1 0 01-2 0v-8l1-1z'/%3E%3Cpath d='M1223 136a1 1 0 010 2h-8a1 1 0 01-1-2h9zM1422 38a1 1 0 110 2c-5 0-9 4-9 9s4 9 9 9h18v2h-18c-6 0-11-5-11-11s5-11 11-11zM1440 0v1h-43c-5 0-9 4-9 9s4 9 9 9h35c3 0 6 1 8 3v15c-2 2-5 3-8 3a1 1 0 010-2c3 0 6-2 8-4v-8c-1-3-4-5-8-5h-35c-6 0-11-5-11-11 0-5 3-8 7-10h47zM729 39c-27 0-51-16-62-39h2a67 67 0 00120 0h2a69 69 0 01-62 39zM279 5c-4 0-7-2-8-4V0h2a7 7 0 0012 0h2v1c-2 2-5 4-8 4z'/%3E%3Cg opacity='.3' transform='translate(258 74)'%3E%3Cpath d='M47 8a1 1 0 010 2h-6a7 7 0 000 14h4a1 1 0 011 2h-5a9 9 0 010-18h6z'/%3E%3Cpath d='M81 8a9 9 0 019 10c0 4-4 7-9 8h-2a7 7 0 000 13h29a9 9 0 011 17H61a7 7 0 00-1 13h8a9 9 0 019 9c0 5-4 8-9 8H28a9 9 0 01-9-9c1-4 4-8 9-8h3a7 7 0 001-13H9a9 9 0 01-1-17h42a7 7 0 100-13 1 1 0 010-2 9 9 0 010 17H9a7 7 0 00-1 13h23a9 9 0 011 17h-4c-3 0-6 3-7 6a7 7 0 007 7h40c4 0 7-2 7-6a7 7 0 00-6-7h-9a9 9 0 011-17h47a7 7 0 001-13H79a9 9 0 010-17h2c4 0 7-3 7-7a7 7 0 00-6-7H71a1 1 0 010-2h10z'/%3E%3Ccircle cx='7.3' cy='77.6' r='1.9'/%3E%3Cpath d='M26 28l1 1v6a1 1 0 01-2 0v-6l1-1z'/%3E%3Cpath d='M29 31a1 1 0 010 2h-6a1 1 0 010-2h6zM59 1a9 9 0 100 17 9 9 0 000-17zm0 2a7 7 0 110 13 7 7 0 010-13z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
+        linear-gradient(
+            45deg,
+            var(--dx-g-indigo-vibrant-20) 0%,
+            var(--dx-g-indigo-vibrant-30) 100%
+        );
+    background-repeat: no-repeat;
+    background-position: right;
+    background-size: auto 100%;
+    color: white;
+}
+
+.dx-search-header + .coveo-main-section {
+    margin-top: var(--dx-g-spacing-2xl);
+}
+
+.dx-search-header-container {
+    margin: 0 auto;
+    max-width: 1200px;
+}
+
+.dx-search-header-title {
+    font-size: var(--dx-g-text-lg);
+    line-height: var(--dx-g-text-lg);
+    font-weight: var(--dx-g-font-normal);
+    margin-bottom: var(--dx-g-spacing-md);
+}
+
+.dx-search-header-title-results {
+    font-weight: var(--dx-g-font-bold);
+}
+
+.dx-search-header-query {
+    font-family: var(--dx-g-font-display);
+    font-size: var(--dx-g-text-2xl);
+    line-height: var(--dx-g-text-2xl);
+    font-weight: var(--dx-g-font-demi);
+    margin-top: var(--dx-g-spacing-md);
+}
+
+@media (min-width: 768px) {
+    .dx-search-header {
+        padding: var(--dx-g-spacing-4xl);
+    }
+
+    .dx-search-header-title {
+        font-size: var(--dx-g-text-xl);
+        line-height: var(--dx-g-text-xl);
+    }
+
+    .dx-search-header-query {
+        font-size: var(--dx-g-text-4xl);
+        line-height: var(--dx-g-text-4xl);
+    }
+}
+
+.dx-facet-column-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: var(--dx-g-spacing-sm);
+}
+
+.dx-facet-column-header-title {
+    flex: 1;
+    font-family: var(--dx-g-font-display);
+    font-size: var(--dx-g-text-lg);
+}
+
+.dx-facet-column-footer {
+    display: none; /* hide by default */
+    align-items: center;
+    justify-content: center;
+    margin-top: var(--dx-g-spacing-md);
+}
+
+.coveo-small-facets .dx-facet-column-footer {
+    display: flex; /* show when Coveo uses the dropdown UI */
+}
+
+.coveo-dropdown-background {
+    background: #195594;
+}
+
+.coveo-dropdown-background-active {
+    opacity: 0.62 !important;
+}
+
+.pagination-container {
+    margin: 0 auto;
+    width: fit-content;
+}

package/src/modules/dx/searchResults/searchResults.html

@@ -0,0 +1,104 @@
+<template>
+    <div
+        id="search"
+        class="CoveoSearchInterface"
+        data-enable-history="true"
+        data-pipeline={coveoSearchPipeline}
+    >
+        <div class="CoveoAnalytics" data-search-hub="salesforcedevdoc"></div>
+        <div class="CoveoFolding"></div>
+        <div if:true={hasQuery} class="dx-search-header">
+            <div class="dx-search-header-container">
+                <p class="dx-search-header-title">
+                    <span class="dx-search-header-title-results">{title}</span>
+                    &nbsp;results for
+                </p>
+                <p class="dx-search-header-query">&ldquo;{query}&rdquo;</p>
+            </div>
+        </div>
+        <div class="coveo-main-section">
+            <div class="coveo-facet-column">
+                <div class="dx-facet-column-header">
+                    <span class="dx-facet-column-header-title">Filters</span>
+                    <template if:true={hasFilters}>
+                        <dx-button onclick={clearFilters} variant="inline">
+                            Clear
+                        </dx-button>
+                    </template>
+                </div>
+                <div
+                    class="CoveoDynamicFacetManager"
+                    data-enable-reorder="false"
+                >
+                    <div
+                        class="CoveoDynamicFacet"
+                        data-title="Content Type"
+                        data-field="@commonsource"
+                        data-tab="All"
+                        data-enable-facet-search="false"
+                    ></div>
+                    <div
+                        class="CoveoDynamicFacet"
+                        data-title="Language"
+                        data-field="@language"
+                        data-tab="All"
+                        data-enable-facet-search="false"
+                    ></div>
+                </div>
+                <div class="dx-facet-column-footer">
+                    <dx-button onclick={dismissFiltersOverlay}>
+                        View {title} results
+                    </dx-button>
+                </div>
+            </div>
+            <div class="coveo-results-column">
+                <div class="CoveoShareQuery"></div>
+                <div class="CoveoExportToExcel"></div>
+                <div class="CoveoPreferencesPanel">
+                    <div class="CoveoResultsPreferences"></div>
+                    <div class="CoveoResultsFiltersPreferences"></div>
+                </div>
+                <div class="CoveoDidYouMean"></div>
+                <div class="coveo-results-header">
+                    <div class="coveo-summary-section"></div>
+                    <div class="coveo-sort-section" role="radiogroup">
+                        <span
+                            class="CoveoSort"
+                            data-sort-criteria="relevancy"
+                            data-caption="Sorted by Relevance"
+                        ></span>
+                    </div>
+                    <div>
+                        <div
+                            class="CoveoSearchbox"
+                            data-enable-omnibox="false"
+                            data-add-search-button="false"
+                            aria-hidden="true"
+                        ></div>
+                    </div>
+                </div>
+                <div class="CoveoBreadcrumb"></div>
+                <div class="CoveoHiddenQuery"></div>
+                <div class="CoveoErrorReport"></div>
+                <div
+                    class="CoveoResultList"
+                    data-layout="list"
+                    data-wait-animation="fade"
+                    data-auto-select-fields-to-include="true"
+                    lwc:dom="manual"
+                ></div>
+                <div class="coveo-results-footer" aria-hidden="true">
+                    <div class="CoveoPager"></div>
+                </div>
+                <div class="pagination-container">
+                    <dx-pagination
+                        current-page={currentPage}
+                        total-pages={totalPages}
+                        onpagechange={goToPage}
+                        pages-to-show="5"
+                    ></dx-pagination>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>

package/src/modules/dx/searchResults/searchResults.ts

@@ -0,0 +1,186 @@
+import { LightningElement, api, track } from "lwc";
+import type * as CoveoSDK from "coveo-search-ui";
+
+interface CoveoSearch {
+    state: typeof CoveoSDK.state;
+    get: typeof CoveoSDK.get;
+    $$: typeof CoveoSDK.$$;
+    InitializationEvents: typeof CoveoSDK.InitializationEvents;
+    QueryEvents: typeof CoveoSDK.QueryEvents;
+    SearchEndpoint: typeof CoveoSDK.SearchEndpoint;
+    TemplateCache: typeof CoveoSDK.TemplateCache;
+    UnderscoreTemplate: typeof CoveoSDK.UnderscoreTemplate;
+    init: typeof CoveoSDK.init;
+    IQuerySuccessEventArgs: CoveoSDK.IQuerySuccessEventArgs;
+}
+
+declare const Coveo: CoveoSearch;
+
+function getPaginationState(
+    event: CoveoSDK.IQuerySuccessEventArgs
+): { numberOfPages: number; currentPage: number } {
+    const pageSize = event.query.numberOfResults!;
+    const totalResults = event.results.totalCount!;
+    const numberOfPages = Math.ceil(totalResults / pageSize);
+
+    const currentPage = event.query.firstResult! / pageSize + 1;
+
+    return { numberOfPages, currentPage };
+}
+
+const resultsTemplatesInnerHtml = `
+    <script
+        id="myDocumentResultTemplate"
+        class="result-template"
+        type="text/html"
+        data-field-publicurl=""
+    >
+        <div class="dx-result">
+            <p class="dx-result-title">
+                <a
+                    class="CoveoResultLink"
+                    data-field="@publicurl"
+                ></a>
+            </p>
+            <p class="dx-result-excerpt CoveoExcerpt"></p>
+        </div>
+    </script>
+    <script
+        id="myDefaultResultTemplate"
+        class="result-template"
+        type="text/html"
+    >
+            <div class="dx-result">
+                <p class="dx-result-title">
+                    <a class="CoveoResultLink"></a>
+                </p>
+                <p class="dx-result-excerpt CoveoExcerpt"></p>
+            </div>
+    </script>
+`;
+
+export default class SearchResults extends LightningElement {
+    @api coveoOrganizationId!: string;
+    @api coveoPublicAccessToken!: string;
+    @api coveoSearchPipeline!: string;
+
+    private root: HTMLElement | null = null;
+    private isInitialized = false;
+
+    @track _query: string = "";
+
+    @api
+    get searchQuery() {
+        return this._query;
+    }
+    set searchQuery(q: string) {
+        this._query = q;
+        if (this.isInitialized && this._query !== "") {
+            this.updateSearchQuery();
+        }
+    }
+
+    private totalResults: number | null = null;
+
+    private get title() {
+        return this.totalResults ? this.totalResults.toLocaleString() : "";
+    }
+
+    private query: string = "";
+    private hasFilters: boolean = false;
+
+    private get hasQuery(): boolean {
+        return this.query !== "";
+    }
+
+    private updateSearchQuery() {
+        Coveo.state(this.root!, "q", this._query);
+    }
+
+    private clearFilters() {
+        const BreadcrumbManager = Coveo.get(
+            this.root!.querySelector(".CoveoBreadcrumb") as HTMLElement
+        ) as any;
+        BreadcrumbManager.clearBreadcrumbs();
+    }
+
+    private currentPage: number = 1;
+    private totalPages: number = 1;
+
+    private goToPage(e: CustomEvent) {
+        const page = e.detail;
+        const Pager = Coveo.get(
+            this.root!.querySelector(".CoveoPager") as HTMLElement
+        ) as any;
+        Pager.setPage(page);
+        this.currentPage = page;
+    }
+
+    private dismissFiltersOverlay = () => {
+        const overlay = this.root!.querySelector(
+            ".coveo-dropdown-background-active"
+        ) as HTMLElement | null;
+        overlay?.click();
+    };
+
+    private attachListeners(root: HTMLElement) {
+        Coveo.$$(root).on(
+            Coveo.InitializationEvents.afterInitialization,
+            () => {
+                if (this._query !== "") {
+                    Coveo.state(this.root!, "q", this.searchQuery);
+                }
+                if (Coveo.state(this.root!, "q") === "") {
+                    Coveo.state(this.root!, "sort", "date descending");
+                }
+                this.isInitialized = true;
+            }
+        );
+
+        Coveo.$$(root).on(Coveo.QueryEvents.querySuccess, (event: any) => {
+            const { currentPage, numberOfPages } = getPaginationState(
+                event.detail
+            );
+            this.currentPage = currentPage;
+            this.totalPages = numberOfPages;
+            this.totalResults = event.detail.results.totalCount;
+            this.query = event.detail.query.q ?? "";
+            this.hasFilters = event.detail.query.facets.some((f: any) => {
+                return f.currentValues.some((cv: any) => {
+                    return cv.state === "selected";
+                });
+            });
+        });
+    }
+
+    private initializeCoveo() {
+        this.root = this.template.querySelector(".CoveoSearchInterface")!;
+
+        const resultsList = this.template.querySelector(".CoveoResultList");
+        if (resultsList) {
+            resultsList.innerHTML = resultsTemplatesInnerHtml;
+        }
+
+        Coveo.SearchEndpoint.configureCloudV2Endpoint(
+            this.coveoOrganizationId,
+            this.coveoPublicAccessToken
+        );
+
+        this.attachListeners(this.root);
+
+        Coveo.init(this.root);
+    }
+
+    renderedCallback() {
+        if (!this.isInitialized) {
+            if (Object.prototype.hasOwnProperty.call(window, "Coveo")) {
+                this.initializeCoveo();
+            } else {
+                const script = document.querySelector("script.coveo-script");
+                script?.addEventListener("load", () => {
+                    this.initializeCoveo();
+                });
+            }
+        }
+    }
+}