feat(quantic)!: Change names of DOM Events used, to add the 'quantic__' prefix

packages/quantic/cypress/e2e/default-2/recommendation-list/recommendation-list.cypress.ts

@@ -35,7 +35,7 @@ describe('quantic-recommendation-list', () => {
   const defaultHeadingLevel = 1;
 
   const registerRecommendationTemplatesEvent =
-    'registerrecommendationtemplates';
+    'quantic__registerrecommendationtemplates';
 
   const recommendationsAlias = '@recommendations';
 

packages/quantic/cypress/e2e/default-2/result-list/folded-result-list/folded-result-list.cypress.ts

@@ -38,7 +38,7 @@ describe('quantic-folded-result-list', () => {
   const defaultParentField = 'foldingchild';
   const defaultChildField = 'foldingparent';
   const defaultNumberOfFoldedResults = 2;
-  const registerResultTemplatesEvent = 'registerresulttemplates';
+  const registerResultTemplatesEvent = 'quantic__registerresulttemplates';
 
   function visitFoldedResultList(
     options: Partial<FoldedResultListOptions> = {},

packages/quantic/cypress/e2e/default-2/result-list/result-list.cypress.ts

@@ -25,7 +25,7 @@ describe('quantic-resultlist', () => {
 
   const defaultFieldsToInclude =
     'date,author,source,language,filetype,parents,sfknowledgearticleid';
-  const registerResultTemplatesEvent = 'registerresulttemplates';
+  const registerResultTemplatesEvent = 'quantic__registerresulttemplates';
 
   const indexResultsAlias = '@indexResults';
 

packages/quantic/cypress/e2e/default-2/result-quickview/result-quickview.cypress.ts

@@ -24,7 +24,7 @@ interface ResultQuickviewOptions {
 describe('quantic-result-quickview', () => {
   const pageUrl = 's/quantic-result-quickview';
 
-  const haspreview = 'haspreview';
+  const haspreview = 'quantic__haspreview';
   const resultActionRegister = 'quantic__resultactionregister';
 
   function visitResultQuickview(options: Partial<ResultQuickviewOptions> = {}) {

packages/quantic/force-app/examples/main/lwc/actionSendRating/actionSendRating.js

@@ -9,7 +9,7 @@ export default class ActionSendRating extends LightningElement {
     }, 0);
   }
   handleSendRating() {
-    const customEvent = new CustomEvent('rating', {
+    const customEvent = new CustomEvent('quantic__rating', {
       detail: {
         id: this._id,
         score: 1,

packages/quantic/force-app/examples/main/lwc/exampleInsightPanel/exampleInsightPanel.html

@@ -1,5 +1,5 @@
 <template>
-  <div onregisterresulttemplates={handleResultTemplateRegistration}>
+  <div onquantic__registerresulttemplates={handleResultTemplateRegistration}>
     <c-quantic-insight-interface engine-id={engineId} insight-id={insightId}>
       <c-quantic-aria-live></c-quantic-aria-live>
       <div

packages/quantic/force-app/examples/main/lwc/exampleQuanticFoldedResultList/exampleQuanticFoldedResultList.html

@@ -16,7 +16,7 @@
       use-case={config.useCase}
       engine-id={engineId}
     >
-      <div onregisterresulttemplates={handleResultTemplateRegistration}>
+      <div onquantic__registerresulttemplates={handleResultTemplateRegistration}>
         <div>
           <c-quantic-tab
           label="Thread"

packages/quantic/force-app/examples/main/lwc/exampleQuanticFoldedResultList/exampleQuanticFoldedResultList.js

@@ -57,7 +57,7 @@ export default class ExampleQuanticFoldedResultList extends LightningElement {
       defaultValue: 'search',
     },
   ];
-  expectedEvents = ['registerresulttemplates'];
+  expectedEvents = ['quantic__registerresulttemplates'];
 
   handleResultTemplateRegistration(event) {
     const resultTemplatesManager = event.detail;

packages/quantic/force-app/examples/main/lwc/exampleQuanticRecommendationList/exampleQuanticRecommendationList.js

@@ -57,7 +57,7 @@ export default class ExampleQuanticRecommendationtList extends LightningElement
       defaultValue: 'grid',
     },
   ];
-  expectedEvents = ['registerrecommendationtemplates'];
+  expectedEvents = ['quantic__registerrecommendationtemplates'];
 
   handleTryItNow(evt) {
     this.config = evt.detail;

packages/quantic/force-app/examples/main/lwc/exampleQuanticResultList/exampleQuanticResultList.js

@@ -25,7 +25,7 @@ export default class ExampleQuanticResultList extends LightningElement {
       defaultValue: 'search',
     },
   ];
-  expectedEvents = ['registerresulttemplates'];
+  expectedEvents = ['quantic__registerresulttemplates'];
 
   handleTryItNow(evt) {
     this.config = evt.detail;

packages/quantic/force-app/examples/main/lwc/exampleQuanticResultQuickview/exampleQuanticResultQuickview.js

@@ -55,7 +55,7 @@ export default class ExampleQuanticResultQuickview extends LightningElement {
     },
   ];
 
-  expectedEvents = ['haspreview', 'quantic__resultactionregister'];
+  expectedEvents = ['quantic__haspreview', 'quantic__resultactionregister'];
 
   handleTryItNow(evt) {
     this.config = evt.detail;

packages/quantic/force-app/examples/main/lwc/exampleSearch/exampleSearch.html

@@ -1,7 +1,7 @@
 <template>
   <div
     class="search__container slds-p-around_medium"
-    onregisterresulttemplates={handleResultTemplateRegistration}
+    onquantic__registerresulttemplates={handleResultTemplateRegistration}
   >
     <c-quantic-search-interface
       engine-id={engineId}

packages/quantic/force-app/main/default/lwc/quanticBreadcrumbManager/quanticBreadcrumbManager.html

@@ -14,7 +14,7 @@
                 <ul class="slds-col slds-truncate slds-list_horizontal slds-grid slds-wrap">
                   <template for:each={breadcrumb.values} for:item="breadcrumbValue">
                     <li key={breadcrumbValue.value.value} class="breadcrumb__container">
-                      <c-quantic-pill label={breadcrumbValue.formattedValue} ondeselect={breadcrumbValue.deselect} group-name={breadcrumb.label} action-name={labels.clearFilter}></c-quantic-pill>
+                      <c-quantic-pill label={breadcrumbValue.formattedValue} onquantic__deselect={breadcrumbValue.deselect} group-name={breadcrumb.label} action-name={labels.clearFilter}></c-quantic-pill>
                     </li>
                   </template>
                   <template if:true={breadcrumb.showMoreButton}>
@@ -31,7 +31,7 @@
                 <ul class="slds-col slds-truncate slds-list_horizontal slds-grid slds-wrap">
                   <template for:each={breadcrumb.values} for:item="breadcrumbValue">
                     <li key={breadcrumbValue.value} class="breadcrumb__container">
-                      <c-quantic-pill label={breadcrumbValue.formattedValue} ondeselect={breadcrumbValue.deselect} group-name={breadcrumb.label} action-name={labels.clearFilter}></c-quantic-pill>
+                      <c-quantic-pill label={breadcrumbValue.formattedValue} onquantic__deselect={breadcrumbValue.deselect} group-name={breadcrumb.label} action-name={labels.clearFilter}></c-quantic-pill>
                     </li>
                   </template>
                   <template if:true={breadcrumb.showMoreButton}>
@@ -47,7 +47,7 @@
                 <span class="slds-col breadcrumb-manager__field-name">{breadcrumbValue.label}{labels.colon} </span>
                 <ul class="slds-col slds-truncate slds-list_horizontal slds-grid slds-wrap">
                   <li class="breadcrumb__container">
-                    <c-quantic-pill label={breadcrumbValue.value} ondeselect={breadcrumbValue.deselect} group-name={breadcrumbValue.label} action-name={labels.clearFilter}></c-quantic-pill>
+                    <c-quantic-pill label={breadcrumbValue.value} onquantic__deselect={breadcrumbValue.deselect} group-name={breadcrumbValue.label} action-name={labels.clearFilter}></c-quantic-pill>
                   </li>
                 </ul>
               </li>
@@ -58,7 +58,7 @@
                 <ul class="slds-col slds-truncate slds-list_horizontal slds-grid slds-wrap">
                   <template for:each={breadcrumb.values} for:item="breadcrumbValue">
                     <li key={breadcrumbValue.value} class="breadcrumb__container">
-                      <c-quantic-pill label={breadcrumbValue.value} ondeselect={breadcrumbValue.deselect} group-name={breadcrumb.label} action-name={labels.clearFilter}></c-quantic-pill>
+                      <c-quantic-pill label={breadcrumbValue.value} onquantic__deselect={breadcrumbValue.deselect} group-name={breadcrumb.label} action-name={labels.clearFilter}></c-quantic-pill>
                     </li>
                   </template>
                   <template if:true={breadcrumb.showMoreButton}>

packages/quantic/force-app/main/default/lwc/quanticCardContainer/quanticCardContainer.js

@@ -3,6 +3,8 @@ import {LightningElement, api} from 'lwc';
 /**
  * The `QuanticCardContainer` component is used internally as a styling container.
  * @category Utility
+ * @fires CustomEvent#quantic__headerclick
+ * @fires CustomEvent#quantic__headerkeydown
  * @example
  * <c-quantic-card-container title="Card Example"></c-quantic-card-container>
  */
@@ -29,14 +31,14 @@ export default class QuanticCardContainer extends LightningElement {
 
   handleHeaderClick(evt) {
     evt.preventDefault();
-    const headerClickEvent = new CustomEvent('headerclick', {});
+    const headerClickEvent = new CustomEvent('quantic__headerclick', {});
     this.dispatchEvent(headerClickEvent);
   }
 
   handleHeaderKeyDown(evt) {
     if (evt.code === 'Enter' || evt.code === 'Space') {
       evt.preventDefault();
-      const headerKeyDownEvent = new CustomEvent('headerkeydown', {});
+      const headerKeyDownEvent = new CustomEvent('quantic__headerkeydown', {});
       this.dispatchEvent(headerKeyDownEvent);
     }
   }

packages/quantic/force-app/main/default/lwc/quanticCategoryFacet/quanticCategoryFacet.html

@@ -9,7 +9,7 @@
     </template>
     <template if:true={hasParentsOrValues}>
       <div class="slds-size_1-of-1 slds-var-m-bottom_large">
-        <c-quantic-card-container title={label} onheaderclick={toggleFacetVisibility} onheaderkeydown={toggleFacetVisibility}>
+        <c-quantic-card-container title={label} onquantic__headerclick={toggleFacetVisibility} onquantic__headerkeydown={toggleFacetVisibility}>
           <lightning-button-icon
             class={actionButtonCssClasses}
             slot="actions"
@@ -53,7 +53,7 @@
                 <template for:each={nonActiveParents} for:item="v">
                   <li class="slds-grid facet__non-active-parent" key={v.value}>
                     <c-quantic-category-facet-value
-                      onselectvalue={onSelectValue}
+                      onquantic__selectvalue={onSelectValue}
                       item={v}
                       non-active-parent="true"
                       formatting-function={remoteGetValueCaption}
@@ -83,7 +83,7 @@
                             item={v}
                             active-parent={activeParent}
                             formatting-function={remoteGetValueCaption}
-                            onselectvalue={onSelectValue}>
+                            onquantic__selectvalue={onSelectValue}>
                           </c-quantic-category-facet-value>
                         </li>
                       </template>
@@ -99,7 +99,7 @@
                       item={result}
                       is-search-result="true"
                       formatting-function={remoteGetValueCaption}
-                      onselectvalue={onSelectValue}>
+                      onquantic__selectvalue={onSelectValue}>
                     </c-quantic-category-facet-value>
                   </template>
                 </template>

packages/quantic/force-app/main/default/lwc/quanticCategoryFacet/quanticCategoryFacet.js

@@ -274,7 +274,7 @@ export default class QuanticCategoryFacet extends LightningElement {
       !this.searchStatus?.state?.hasError &&
       !this.searchStatus?.state?.firstSearchExecuted;
 
-    const renderFacetEvent = new CustomEvent('renderfacet', {
+    const renderFacetEvent = new CustomEvent('quantic__renderfacet', {
       detail: {
         id: this.facetId ?? this.field,
         shouldRenderFacet: !!this.hasParentsOrValues,

packages/quantic/force-app/main/default/lwc/quanticCategoryFacetValue/quanticCategoryFacetValue.js

@@ -10,11 +10,11 @@ import {api, LightningElement} from 'lwc';
 
 /**
  * The `QuanticCategoryFacetValue` component is used by a `QuanticCategoryFacet` component to display a formatted facet value, path to that value and the number of results with that value.
- * @fires CustomEvent#selectvalue
+ * @fires CustomEvent#quantic__selectvalue
  * @category Search
  * @category Insight Panel
  * @example
- * <c-quantic-category-facet-value onselectvalue={onSelect} item={result} is-search-result active-parent></c-quantic-category-facet-value>
+ * <c-quantic-category-facet-value onquantic__selectvalue={onSelect} item={result} is-search-result active-parent></c-quantic-category-facet-value>
  */
 export default class QuanticCategoryFacetValue extends LightningElement {
   /**
@@ -113,7 +113,7 @@ export default class QuanticCategoryFacetValue extends LightningElement {
   onSelect(evt) {
     evt.preventDefault();
     this.dispatchEvent(
-      new CustomEvent('selectvalue', {
+      new CustomEvent('quantic__selectvalue', {
         detail: {
           value: this.facetValue,
         },
@@ -128,7 +128,7 @@ export default class QuanticCategoryFacetValue extends LightningElement {
     if (evt.code === 'Enter' || evt.code === 'Space') {
       evt.preventDefault();
       this.dispatchEvent(
-        new CustomEvent('selectvalue', {
+        new CustomEvent('quantic__selectvalue', {
           detail: {
             value: this.facetValue,
           },

packages/quantic/force-app/main/default/lwc/quanticCitation/__tests__/quanticCitation.test.js

@@ -154,7 +154,7 @@ describe('c-quantic-citation', () => {
     it('should dispatch a citation hover event after hovering over the the citation for more than 1200ms, 200ms debounce duration before hover + 1000ms minimum hover duration', async () => {
       const element = createTestComponent();
       await flushPromises();
-      setupEventDispatchTest('citationhover');
+      setupEventDispatchTest('quantic__citationhover');
 
       const citationLink = element.shadowRoot.querySelector(
         selectors.citationLink
@@ -178,7 +178,7 @@ describe('c-quantic-citation', () => {
     it('should not dispatch a citation hover event after hovering over the the citation for more than 1200ms', async () => {
       const element = createTestComponent();
       await flushPromises();
-      setupEventDispatchTest('citationhover');
+      setupEventDispatchTest('quantic__citationhover');
 
       const citationLink = element.shadowRoot.querySelector(
         selectors.citationLink

packages/quantic/force-app/main/default/lwc/quanticCitation/quanticCitation.js

@@ -9,10 +9,10 @@ const debounceDurationBeforeHoverMs = 200;
 
 /**
  * The `QuanticCitation` component renders an individual citation.
- * @fires CustomEvent#citationhover
+ * @fires CustomEvent#quantic__citationhover
  * @category Internal
  * @example
- * <c-quantic-citation citation={citation} interactive-citation={interactiveCitation} onclick={handleClick} onhover={handleHover}></c-quantic-citation>
+ * <c-quantic-citation citation={citation} interactive-citation={interactiveCitation} onclick={handleClick} onquantic__citationhover={handleHover}></c-quantic-citation>
  */
 export default class QuanticCitation extends NavigationMixin(LightningElement) {
   /**
@@ -84,7 +84,7 @@ export default class QuanticCitation extends NavigationMixin(LightningElement) {
       const tooltipDisplayDuration = Date.now() - this.hoverStartTimestamp;
       if (tooltipDisplayDuration >= minimumTooltipDisplayDurationMs) {
         this.dispatchEvent(
-          new CustomEvent('citationhover', {
+          new CustomEvent('quantic__citationhover', {
             detail: {
               citationHoverTimeMs: Date.now() - this.hoverStartTimestamp,
             },

packages/quantic/force-app/main/default/lwc/quanticDateFacet/quanticDateFacet.html

@@ -9,7 +9,7 @@
     </template>
     <template if:true={hasValues}>
       <div class="slds-size_1-of-1">
-        <c-quantic-card-container title={label} onheaderclick={toggleFacetVisibility} onheaderkeydown={toggleFacetVisibility}>
+        <c-quantic-card-container title={label} onquantic__headerclick={toggleFacetVisibility} onquantic__headerkeydown={toggleFacetVisibility}>
           <lightning-button-icon
             class="actionButtonCssClasses"
             slot="actions"
@@ -44,7 +44,7 @@
                 <template for:each={values} for:item="v">
                   <li class="slds-grid" key={v.value}>
                     <c-quantic-facet-value
-                      onselectvalue={onSelectValue}
+                      onquantic__selectvalue={onSelectValue}
                       key={v.start}
                       item={v}
                       is-checked={v.checked}

packages/quantic/force-app/main/default/lwc/quanticDateFacet/quanticDateFacet.js

@@ -177,7 +177,7 @@ export default class QuanticDateFacet extends LightningElement {
       !this.searchStatus?.state?.hasError &&
       !this.searchStatus?.state?.firstSearchExecuted;
 
-    const renderFacetEvent = new CustomEvent('renderfacet', {
+    const renderFacetEvent = new CustomEvent('quantic__renderfacet', {
       detail: {
         id: this.facetId ?? this.field,
         shouldRenderFacet: this.hasValues,

packages/quantic/force-app/main/default/lwc/quanticDocumentSuggestion/quanticDocumentSuggestion.js

@@ -84,7 +84,7 @@ export default class QuanticDocumentSuggestion extends LightningElement {
     this.validateProps();
     if (!this.hasInitializationError) {
       registerComponentForInit(this, this.engineId);
-      this.template.addEventListener('rating', this.onRating);
+      this.template.addEventListener('quantic__rating', this.onRating);
     }
   }
 
@@ -118,7 +118,7 @@ export default class QuanticDocumentSuggestion extends LightningElement {
 
   disconnectedCallback() {
     this.unsubscribeDocumentSuggestion?.();
-    this.template.removeEventListener('rating', this.onRating);
+    this.template.removeEventListener('quantic__rating', this.onRating);
   }
 
   validateProps() {

packages/quantic/force-app/main/default/lwc/quanticFacet/quanticFacet.html

@@ -14,8 +14,8 @@
       <div class="slds-size_1-of-1 slds-var-m-bottom_large">
         <c-quantic-card-container
           title={label}
-          onheaderclick={toggleFacetVisibility}
-          onheaderkeydown={toggleFacetVisibility}
+          onquantic__headerclick={toggleFacetVisibility}
+          onquantic__headerkeydown={toggleFacetVisibility}
         >
           <lightning-button-icon
             class={actionButtonCssClasses}
@@ -68,7 +68,7 @@
                     <template for:each={values} for:item="v">
                       <li class="slds-grid" key={v.value}>
                         <c-quantic-facet-value
-                          onselectvalue={onSelectValue}
+                          onquantic__selectvalue={onSelectValue}
                           item={v}
                           key={v.value}
                           is-checked={v.checked}
@@ -117,7 +117,7 @@
                 <template if:true={hasSearchResults}>
                   <template for:each={facetSearchResults} for:item="result">
                     <c-quantic-facet-value
-                      onselectvalue={onSelectValue}
+                      onquantic__selectvalue={onSelectValue}
                       key={result.value}
                       item={result}
                       is-checked={result.checked}

packages/quantic/force-app/main/default/lwc/quanticFacet/quanticFacet.js

@@ -272,7 +272,7 @@ export default class QuanticFacet extends LightningElement {
       !this.searchStatus?.state?.hasError &&
       !this.searchStatus?.state?.firstSearchExecuted;
 
-    const renderFacetEvent = new CustomEvent('renderfacet', {
+    const renderFacetEvent = new CustomEvent('quantic__renderfacet', {
       detail: {
         id: this.facetId ?? this.field,
         shouldRenderFacet: this.hasValues,

packages/quantic/force-app/main/default/lwc/quanticFacetValue/quanticFacetValue.js

@@ -13,11 +13,11 @@ import {LightningElement, api} from 'lwc';
 
 /**
  * The `QuanticFacetValue` component is used by a facet component to display a formatted facet value and the number of results with that value.
- * @fires CustomEvent#selectvalue
+ * @fires CustomEvent#quantic__selectvalue
  * @category Search
  * @category Insight Panel
  * @example
- * <c-quantic-facet-value onselectvalue={onSelect} item={result} is-checked={result.checked} display-as-link={displayAsLink} formatting-function={formattingFunction}></c-quantic-facet-value>
+ * <c-quantic-facet-value onquantic__selectvalue={onSelect} item={result} is-checked={result.checked} display-as-link={displayAsLink} formatting-function={formattingFunction}></c-quantic-facet-value>
  */
 export default class QuanticFacetValue extends LightningElement {
   /**
@@ -113,7 +113,7 @@ export default class QuanticFacetValue extends LightningElement {
   onSelect(evt) {
     evt.preventDefault();
     this.dispatchEvent(
-      new CustomEvent('selectvalue', {
+      new CustomEvent('quantic__selectvalue', {
         detail: {
           value: this.formattedFacetValue,
         },
@@ -128,7 +128,7 @@ export default class QuanticFacetValue extends LightningElement {
     if (evt.code === 'Enter' || evt.code === 'Space') {
       evt.preventDefault();
       this.dispatchEvent(
-        new CustomEvent('selectvalue', {
+        new CustomEvent('quantic__selectvalue', {
           detail: {
             value: this.formattedFacetValue,
           },