chore(atomic): migrate atomic-external to lit

packages/atomic-angular/projects/atomic-angular/src/lib/stencil-generated/atomic-angular.module.ts

@@ -33,6 +33,7 @@ AtomicCommerceSortDropdown,
 AtomicCommerceText,
 AtomicCommerceTimeframeFacet,
 AtomicComponentError,
+AtomicExternal,
 AtomicFacet,
 AtomicIcon,
 AtomicInsightInterface,
@@ -84,7 +85,6 @@ AtomicCategoryFacet,
 AtomicCitation,
 AtomicColorFacet,
 AtomicDidYouMean,
-AtomicExternal,
 AtomicFacetManager,
 AtomicFieldCondition,
 AtomicFoldedResultList,
@@ -178,6 +178,7 @@ AtomicCommerceSortDropdown,
 AtomicCommerceText,
 AtomicCommerceTimeframeFacet,
 AtomicComponentError,
+AtomicExternal,
 AtomicFacet,
 AtomicIcon,
 AtomicInsightInterface,
@@ -229,7 +230,6 @@ AtomicCategoryFacet,
 AtomicCitation,
 AtomicColorFacet,
 AtomicDidYouMean,
-AtomicExternal,
 AtomicFacetManager,
 AtomicFieldCondition,
 AtomicFoldedResultList,

packages/atomic-react/src/components/search/components.ts

@@ -1,6 +1,7 @@
 import {
   AtomicAriaLive as LitAtomicAriaLive,
   AtomicComponentError as LitAtomicComponentError,
+  AtomicExternal as LitAtomicExternal,
   AtomicFacet as LitAtomicFacet,
   AtomicIcon as LitAtomicIcon,
   AtomicInsightInterface as LitAtomicInsightInterface,
@@ -38,6 +39,12 @@ export const AtomicComponentError = createComponent({
   elementClass: LitAtomicComponentError,
 });
 
+export const AtomicExternal = createComponent({
+  tagName: 'atomic-external',
+  react: React,
+  elementClass: LitAtomicExternal,
+});
+
 export const AtomicFacet = createComponent({
   tagName: 'atomic-facet',
   react: React,

packages/atomic-react/src/components/stencil-generated/search/index.ts

@@ -15,7 +15,6 @@ export const AtomicCategoryFacet = /*@__PURE__*/createReactComponent<JSX.AtomicC
 export const AtomicCitation = /*@__PURE__*/createReactComponent<JSX.AtomicCitation, HTMLAtomicCitationElement>('atomic-citation');
 export const AtomicColorFacet = /*@__PURE__*/createReactComponent<JSX.AtomicColorFacet, HTMLAtomicColorFacetElement>('atomic-color-facet');
 export const AtomicDidYouMean = /*@__PURE__*/createReactComponent<JSX.AtomicDidYouMean, HTMLAtomicDidYouMeanElement>('atomic-did-you-mean');
-export const AtomicExternal = /*@__PURE__*/createReactComponent<JSX.AtomicExternal, HTMLAtomicExternalElement>('atomic-external');
 export const AtomicFacetManager = /*@__PURE__*/createReactComponent<JSX.AtomicFacetManager, HTMLAtomicFacetManagerElement>('atomic-facet-manager');
 export const AtomicFoldedResultList = /*@__PURE__*/createReactComponent<JSX.AtomicFoldedResultList, HTMLAtomicFoldedResultListElement>('atomic-folded-result-list');
 export const AtomicFormatCurrency = /*@__PURE__*/createReactComponent<JSX.AtomicFormatCurrency, HTMLAtomicFormatCurrencyElement>('atomic-format-currency');

packages/atomic/src/components.d.ts

@@ -6,7 +6,6 @@
  */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
 import { AutomaticFacet, CategoryFacetSortCriterion, DateFilterRange, DateRangeRequest, FacetResultsMustMatch, FacetSortCriterion, FoldedResult, GeneratedAnswer, GeneratedAnswerCitation, InlineLink, InteractiveCitation, InteractiveResult, NumericFilter, NumericFilterState, RangeFacetRangeAlgorithm, RangeFacetSortCriterion, RelativeDateUnit, Result, ResultTemplate, ResultTemplateCondition, SearchStatus } from "@coveo/headless";
-import { AtomicInterface } from "./utils/initialization-utils";
 import { AnyBindings } from "./components/common/interface/bindings";
 import { NumberInputType } from "./components/common/facets/facet-number-input/number-input-type";
 import { ItemDisplayBasicLayout, ItemDisplayDensity, ItemDisplayImageSize, ItemDisplayLayout } from "./components/common/layout/display-options";
@@ -23,7 +22,6 @@ import { SearchStore } from "./components/search/atomic-search-interface/store";
 import { RedirectionPayload } from "./components/common/search-box/redirection-payload";
 import { SearchBoxSuggestionElement } from "./components/common/suggestions/suggestions-types";
 export { AutomaticFacet, CategoryFacetSortCriterion, DateFilterRange, DateRangeRequest, FacetResultsMustMatch, FacetSortCriterion, FoldedResult, GeneratedAnswer, GeneratedAnswerCitation, InlineLink, InteractiveCitation, InteractiveResult, NumericFilter, NumericFilterState, RangeFacetRangeAlgorithm, RangeFacetSortCriterion, RelativeDateUnit, Result, ResultTemplate, ResultTemplateCondition, SearchStatus } from "@coveo/headless";
-export { AtomicInterface } from "./utils/initialization-utils";
 export { AnyBindings } from "./components/common/interface/bindings";
 export { NumberInputType } from "./components/common/facets/facet-number-input/number-input-type";
 export { ItemDisplayBasicLayout, ItemDisplayDensity, ItemDisplayImageSize, ItemDisplayLayout } from "./components/common/layout/display-options";
@@ -269,19 +267,6 @@ export namespace Components {
          */
         "queryCorrectionMode": 'legacy' | 'next';
     }
-    /**
-     * The `atomic-external` component allows components defined outside of the `atomic-search-interface` to initialize.
-     */
-    interface AtomicExternal {
-        /**
-          * Represents the bound interface for the AtomicExternal component.
-         */
-        "boundInterface"?: AtomicInterface;
-        /**
-          * The CSS selector that identifies the `atomic-search-interface` component with which to initialize the external components.
-         */
-        "selector": string;
-    }
     /**
      * The `atomic-facet-manager` helps reorder facets and their values to match the most recent search response with the most relevant results.
      */
@@ -2608,15 +2593,6 @@ declare global {
         prototype: HTMLAtomicDidYouMeanElement;
         new (): HTMLAtomicDidYouMeanElement;
     };
-    /**
-     * The `atomic-external` component allows components defined outside of the `atomic-search-interface` to initialize.
-     */
-    interface HTMLAtomicExternalElement extends Components.AtomicExternal, HTMLStencilElement {
-    }
-    var HTMLAtomicExternalElement: {
-        prototype: HTMLAtomicExternalElement;
-        new (): HTMLAtomicExternalElement;
-    };
     /**
      * The `atomic-facet-manager` helps reorder facets and their values to match the most recent search response with the most relevant results.
      */
@@ -3830,7 +3806,6 @@ declare global {
         "atomic-citation": HTMLAtomicCitationElement;
         "atomic-color-facet": HTMLAtomicColorFacetElement;
         "atomic-did-you-mean": HTMLAtomicDidYouMeanElement;
-        "atomic-external": HTMLAtomicExternalElement;
         "atomic-facet-manager": HTMLAtomicFacetManagerElement;
         "atomic-facet-number-input": HTMLAtomicFacetNumberInputElement;
         "atomic-field-condition": HTMLAtomicFieldConditionElement;
@@ -4179,19 +4154,6 @@ declare namespace LocalJSX {
          */
         "queryCorrectionMode"?: 'legacy' | 'next';
     }
-    /**
-     * The `atomic-external` component allows components defined outside of the `atomic-search-interface` to initialize.
-     */
-    interface AtomicExternal {
-        /**
-          * Represents the bound interface for the AtomicExternal component.
-         */
-        "boundInterface"?: AtomicInterface;
-        /**
-          * The CSS selector that identifies the `atomic-search-interface` component with which to initialize the external components.
-         */
-        "selector"?: string;
-    }
     /**
      * The `atomic-facet-manager` helps reorder facets and their values to match the most recent search response with the most relevant results.
      */
@@ -6331,7 +6293,6 @@ declare namespace LocalJSX {
         "atomic-citation": AtomicCitation;
         "atomic-color-facet": AtomicColorFacet;
         "atomic-did-you-mean": AtomicDidYouMean;
-        "atomic-external": AtomicExternal;
         "atomic-facet-manager": AtomicFacetManager;
         "atomic-facet-number-input": AtomicFacetNumberInput;
         "atomic-field-condition": AtomicFieldCondition;
@@ -6495,10 +6456,6 @@ declare module "@stencil/core" {
              * The `atomic-did-you-mean` component is responsible for handling query corrections. When a query returns no result but finds a possible query correction, the component either suggests the correction or automatically triggers a new query with the suggested term.
              */
             "atomic-did-you-mean": LocalJSX.AtomicDidYouMean & JSXBase.HTMLAttributes<HTMLAtomicDidYouMeanElement>;
-            /**
-             * The `atomic-external` component allows components defined outside of the `atomic-search-interface` to initialize.
-             */
-            "atomic-external": LocalJSX.AtomicExternal & JSXBase.HTMLAttributes<HTMLAtomicExternalElement>;
             /**
              * The `atomic-facet-manager` helps reorder facets and their values to match the most recent search response with the most relevant results.
              */

packages/atomic/src/components/search/atomic-external/atomic-external.mdx

@@ -0,0 +1,31 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+import * as AtomicExternalStories from './atomic-external.new.stories';
+import { AtomicDocTemplate } from '../../../../storybook-utils/documentation/atomic-doc-template';
+
+<Meta of={ AtomicExternalStories } />
+
+<AtomicDocTemplate
+  stories={ AtomicExternalStories }
+  githubPath="search/atomic-external/atomic-external.ts"
+  tagName="atomic-external"
+  className="AtomicExternal"
+>
+
+The atomic-external component allows components defined outside of an Atomic search interface to initialize with it.
+
+```html
+
+<atomic-external>
+  <atomic-search-box></atomic-search-box>
+</atomic-external>
+
+<!-- ... -->
+
+<atomic-search-interface>
+  <atomic-result-list>
+    <!-- ... -->
+  </atomic-result-list>
+</atomic-search-interface>
+```
+
+</AtomicDocTemplate>