Adapt atomic-facet-manager to acquire facets nested within atomic-popover

packages/atomic/src/components/common/facets/facet-common.spec.ts

@@ -156,6 +156,64 @@ describe('facet-common', () => {
       expect(result).toContain(facet2);
       expect(result).not.toContain(notFacet);
     });
+
+    it('should return facets nested within atomic-popover elements', () => {
+      const parent = document.createElement('div');
+      const facet1 = buildMockFacetElement({facetId: 'f1'});
+      const popover = document.createElement('atomic-popover');
+      const nestedFacet = buildMockFacetElement({facetId: 'f2'});
+
+      popover.appendChild(nestedFacet);
+      parent.appendChild(facet1);
+      parent.appendChild(popover);
+
+      const result = getFacetsInChildren(parent);
+
+      expect(result).toContain(facet1);
+      expect(result).toContain(nestedFacet);
+      expect(result).toHaveLength(2);
+    });
+
+    it('should not include atomic-popover element itself in results', () => {
+      const parent = document.createElement('div');
+      const popover = document.createElement('atomic-popover');
+      const nestedFacet = buildMockFacetElement({facetId: 'f1'});
+
+      popover.appendChild(nestedFacet);
+      parent.appendChild(popover);
+
+      const result = getFacetsInChildren(parent);
+
+      expect(result).not.toContain(popover);
+      expect(result).toContain(nestedFacet);
+    });
+
+    it('should handle empty atomic-popover elements', () => {
+      const parent = document.createElement('div');
+      const facet1 = buildMockFacetElement({facetId: 'f1'});
+      const emptyPopover = document.createElement('atomic-popover');
+
+      parent.appendChild(facet1);
+      parent.appendChild(emptyPopover);
+
+      const result = getFacetsInChildren(parent);
+
+      expect(result).toContain(facet1);
+      expect(result).toHaveLength(1);
+    });
+
+    it('should handle atomic-popover with non-facet children', () => {
+      const parent = document.createElement('div');
+      const popover = document.createElement('atomic-popover');
+      const notFacet = document.createElement('div');
+
+      popover.appendChild(notFacet);
+      parent.appendChild(popover);
+
+      const result = getFacetsInChildren(parent);
+
+      expect(result).toHaveLength(0);
+    });
   });
 
   describe('#getAutomaticFacetGenerator', () => {

packages/atomic/src/components/common/facets/facet-common.ts

@@ -92,10 +92,24 @@ function isPseudoFacet(el: Element): el is BaseFacetElement {
   return 'facetId' in el;
 }
 
+function isPopover(el: Element): el is HTMLAtomicPopoverElement {
+  return el.tagName === 'ATOMIC-POPOVER';
+}
+
 export function getFacetsInChildren(parent: HTMLElement): BaseFacetElement[] {
-  const facets = Array.from(parent.children).filter((child) =>
-    isPseudoFacet(child)
-  ) as BaseFacetElement[];
+  const facets: BaseFacetElement[] = [];
+
+  Array.from(parent.children).forEach((child) => {
+    if (isPseudoFacet(child)) {
+      facets.push(child);
+    } else if (isPopover(child)) {
+      // atomic-popover only allows a single child facet, so find() is sufficient
+      const nestedFacet = Array.from(child.children).find(isPseudoFacet);
+      if (nestedFacet) {
+        facets.push(nestedFacet);
+      }
+    }
+  });
 
   return facets;
 }

packages/atomic/src/components/common/facets/stencil-facet-common.tsx

@@ -91,10 +91,24 @@ function isPseudoFacet(el: Element): el is BaseFacetElement {
   return 'facetId' in el;
 }
 
+function isPopover(el: Element): el is HTMLAtomicPopoverElement {
+  return el.tagName === 'ATOMIC-POPOVER';
+}
+
 export function getFacetsInChildren(parent: HTMLElement): BaseFacetElement[] {
-  const facets = Array.from(parent.children).filter((child) =>
-    isPseudoFacet(child)
-  ) as BaseFacetElement[];
+  const facets: BaseFacetElement[] = [];
+
+  Array.from(parent.children).forEach((child) => {
+    if (isPseudoFacet(child)) {
+      facets.push(child);
+    } else if (isPopover(child)) {
+      // atomic-popover only allows a single child facet, so find() is sufficient
+      const nestedFacet = Array.from(child.children).find(isPseudoFacet);
+      if (nestedFacet) {
+        facets.push(nestedFacet);
+      }
+    }
+  });
 
   return facets;
 }

packages/atomic/src/components/search/atomic-facet-manager/atomic-facet-manager.new.stories.tsx

@@ -67,3 +67,43 @@ export const Default: Story = {
     `,
   },
 };
+
+export const WithPopover: Story = {
+  name: 'With facets inside atomic-popover',
+  decorators: [
+    (story) => html`
+      <style>
+        atomic-facet-manager {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 0.5rem;
+        }
+      </style>
+      ${story()}
+    `,
+  ],
+  args: {
+    'default-slot': `
+      <atomic-popover>
+        <atomic-facet field="author" label="Authors"></atomic-facet>
+      </atomic-popover>
+      <atomic-popover>
+        <atomic-facet field="language" label="Language"></atomic-facet>
+      </atomic-popover>
+      <atomic-popover>
+        <atomic-facet
+          field="objecttype"
+          label="Type"
+          display-values-as="link"
+        ></atomic-facet>
+      </atomic-popover>
+      <atomic-popover>
+        <atomic-facet
+          field="year"
+          label="Year"
+          display-values-as="box"
+        ></atomic-facet>
+      </atomic-popover>
+    `,
+  },
+};