@coveo/atomic 3.32.4-pre.f33fb697dc → 3.32.4-pre.f345a65b79

package/dist/atomic/components/mixins/slots-for-no-shadow-dom-mixin.js

@@ -2,10 +2,7 @@
  * A mixin class that provides slot functionality for LitElement components
  * that render in the light DOM (no shadow DOM).
  *
- * This class manages child node mapping to named slots, similar to how
- * shadow DOM slots work, but operates in the light DOM. It provides
- * methods to adopt children, map them to slots based on their `slot`
- * attribute, and yield slot content during rendering.
+ * Provides the `renderDefaultSlotContent()` method, which returns the default slot’s content or a fallback if the slot is empty.
  *
  * @example
  * ```typescript
@@ -27,136 +24,83 @@ export const SlotsForNoShadowDOMMixin = (superClass) => {
             /**
              * @internal
              */
-            this.slots = {};
-            /**
-             * @internal
-             */
-            this.slotsInitialized = false;
+            this.slotContent = {};
             /**
              * @internal
              */
             this.slotPlaceholders = [];
-            /**
-             * @internal
-             */
-            this.pendingSlotRelocation = false;
         }
         createRenderRoot() {
             return this;
         }
-        connectedCallback() {
-            this._initializeSlotState();
-            super.connectedCallback?.();
-        }
+        /**
+         * We adopt the children here once, just before the first render.
+         */
         willUpdate(changedProperties) {
             super.willUpdate?.(changedProperties);
-            if (!this.hasUpdated && !this.slotsInitialized) {
+            if (!this.hasUpdated) {
                 this.adoptChildren();
             }
         }
+        /**
+         * After Lit has rendered, we find our placeholders and swap them
+         * with the actual nodes from the slots.
+         */
         updated(changedProperties) {
             super.updated?.(changedProperties);
-            // Relocate slot content after Lit has finished updating the DOM
-            if (!this.pendingSlotRelocation) {
-                return;
-            }
-            for (const placeholderInfo of this.slotPlaceholders) {
-                this._relocateSingleSlot(placeholderInfo);
+            for (const { placeholder, nodes } of this.slotPlaceholders) {
+                placeholder.replaceWith(...nodes);
             }
+            // Clear the list for the next render cycle.
             this.slotPlaceholders = [];
-            this.pendingSlotRelocation = false;
         }
+        /**
+         * Reads the initial child nodes, sorts them into the `slots` map,
+         * and removes them from the DOM temporarily.
+         */
         adoptChildren() {
-            this.slots = {};
-            this.slotPlaceholders = [];
-            this._mapChildrenToSlots();
-            this.slotsInitialized = true;
-        }
-        renderDefaultSlotContent(defaultContent) {
-            this._ensureSlotsInitialized();
-            if (this._hasDefaultSlotContent()) {
-                return this._createSlotPlaceholder('');
-            }
-            return defaultContent ? [defaultContent] : [];
-        }
-        getSlotNameForChild(child) {
-            if (child instanceof Comment && child.nextSibling instanceof Element) {
-                return this.getSlotNameForChild(child.nextSibling);
-            }
-            if (child instanceof Element) {
-                return child.getAttribute('slot') || '';
+            const children = Array.from(this.childNodes);
+            for (const child of children) {
+                const slotName = child instanceof Element ? child.getAttribute('slot') || '' : '';
+                if (!this.slotContent[slotName]) {
+                    this.slotContent[slotName] = [];
+                }
+                this.slotContent[slotName].push(child);
+                child.remove();
             }
-            return '';
         }
         isTextNodeEmpty(node) {
             return !node.textContent || !node.textContent.trim();
         }
         isSlotEmpty(slot) {
-            const content = this.slots[slot];
+            const content = this.slotContent[slot];
             return (!content ||
                 content.every((child) => {
                     return (child instanceof Comment ||
                         (child instanceof Text && this.isTextNodeEmpty(child)));
                 }));
         }
-        _initializeSlotState() {
-            this.slots = {};
-            this.slotsInitialized = false;
-            this.slotPlaceholders = [];
-            this.pendingSlotRelocation = false;
-        }
-        _ensureSlotsInitialized() {
-            if (!this.slotsInitialized) {
-                this.adoptChildren();
-            }
-        }
-        _hasDefaultSlotContent() {
-            return !this.isSlotEmpty('');
-        }
-        _mapChildrenToSlots() {
-            const children = Array.from(this.childNodes);
-            for (const child of children) {
-                const slotName = this.getSlotNameForChild(child);
-                this._addChildToSlot(child, slotName);
-            }
-        }
-        _addChildToSlot(child, slotName) {
-            if (!this.slots[slotName]) {
-                this.slots[slotName] = [];
+        /**
+         * Returns the content for the default slot.
+         * If no nodes are assigned to the default slot, returns the provided fallback content.
+         *
+         * @param defaultContent - Optional content to render if the default slot is empty.
+         * @returns A `TemplateResult` representing the slot placeholder if nodes exist, otherwise an array containing the default content or an empty array.
+         */
+        renderDefaultSlotContent(defaultContent) {
+            if (!this.isSlotEmpty('')) {
+                return this.createSlotPlaceholder(this.slotContent['']);
             }
-            this.slots[slotName].push(child);
+            return defaultContent ? [defaultContent] : [];
         }
-        _createSlotPlaceholder(slotName) {
-            const slotContent = this.slots[slotName];
-            if (!slotContent) {
-                return [];
-            }
-            const placeholder = document.createComment(`slot:${slotName || 'default'}`);
-            this.slotPlaceholders.push({
-                slotName,
-                placeholder,
-                originalNodes: slotContent,
-            });
-            this.pendingSlotRelocation = true;
+        /**
+         * Creates a placeholder comment that will be replaced in `updated`.
+         */
+        createSlotPlaceholder(nodes) {
+            const placeholder = document.createComment('slot');
+            this.slotPlaceholders.push({ placeholder, nodes });
             return [placeholder];
         }
-        _relocateSingleSlot(placeholderInfo) {
-            const { placeholder, originalNodes } = placeholderInfo;
-            const parent = placeholder.parentNode;
-            if (!parent) {
-                return;
-            }
-            for (const node of originalNodes) {
-                this._moveNodeIfNeeded(node, parent, placeholder);
-            }
-            placeholder.remove();
-        }
-        _moveNodeIfNeeded(node, parent, placeholder) {
-            const needsMove = node.parentNode !== parent || node.nextSibling !== placeholder;
-            if (needsMove) {
-                parent.insertBefore(node, placeholder);
-            }
-        }
     }
     return SlotsForNoShadowDOMClass;
 };

package/dist/atomic/components/slot-utils.js

@@ -1,4 +1,15 @@
+function hasLightDOMSlotContent(element) {
+    return ('slotContent' in element &&
+        typeof element.slotContent === 'object');
+}
 function getNamedSlotFromHost(host, slotName) {
+    if (hasLightDOMSlotContent(host)) {
+        const targetLightDomSlotContent = host.slotContent[slotName];
+        if (!targetLightDomSlotContent) {
+            return;
+        }
+        return targetLightDomSlotContent.find((node) => node instanceof Element);
+    }
     const children = Array.from(host.children);
     const targetSlot = children.filter((child) => child.getAttribute('slot') === slotName);
     if (!targetSlot.length) {

package/dist/atomic/components/slot-utils.js.map

@@ -1 +1 @@
-{"file":"slot-utils.js","mappings":"SAAgB,oBAAoB,CAAC,IAAiB,EAAE,QAAgB;IACtE,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC3C,MAAM,UAAU,GAAG,QAAQ,CAAC,MAAM,CAChC,CAAC,KAAK,KAAK,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,QAAQ,CACnD,CAAC;IAEF,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE;QACtB,OAAO;KACR;IAED,IAAI,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE;QACzB,OAAO,CAAC,IAAI,CAAC,0CAA0C,QAAQ,IAAI,EAAE,IAAI,CAAC,CAAC;KAC5E;IAED,OAAO,UAAU,CAAC,CAAC,CAAC,CAAC;AACvB,CAAC;SAEe,sBAAsB,CAAC,IAAiB;IACtD,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC3C,MAAM,WAAW,GAAG,QAAQ,CAAC,MAAM,CACjC,CAAC,KAAK,KAAK,CAAC,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,EAAE,CAC5E,CAAC;IAEF,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE;QACvB,OAAO;KACR;IAED,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC,EAAE;QAC1B,OAAO,CAAC,IAAI,CAAC,0CAA0C,EAAE,IAAI,CAAC,CAAC;KAChE;IAED,OAAO,WAAW,CAAC,CAAC,CAAC,CAAC;AACxB;;;;","names":[],"sources":["src/utils/slot-utils.ts"],"sourcesContent":["export function getNamedSlotFromHost(host: HTMLElement, slotName: string) {\n  const children = Array.from(host.children);\n  const targetSlot = children.filter(\n    (child) => child.getAttribute('slot') === slotName\n  );\n\n  if (!targetSlot.length) {\n    return;\n  }\n\n  if (targetSlot.length > 1) {\n    console.warn(`Element should only have 1 slot named \"${slotName}\".`, host);\n  }\n\n  return targetSlot[0];\n}\n\nexport function getDefaultSlotFromHost(host: HTMLElement) {\n  const children = Array.from(host.children);\n  const defaultSlot = children.filter(\n    (child) => !child.hasAttribute('slot') || child.getAttribute('slot') === ''\n  );\n\n  if (!defaultSlot.length) {\n    return;\n  }\n\n  if (defaultSlot.length > 1) {\n    console.warn('Element should only have 1 default slot.', host);\n  }\n\n  return defaultSlot[0];\n}\n"],"version":3}
+{"file":"slot-utils.js","mappings":"AAEA,SAAS,sBAAsB,CAC7B,OAAoB;IAEpB,QACE,aAAa,IAAI,OAAO;QACxB,OAAQ,OAA2C,CAAC,WAAW,KAAK,QAAQ,EAC5E;AACJ,CAAC;SAEe,oBAAoB,CAAC,IAAiB,EAAE,QAAgB;IACtE,IAAI,sBAAsB,CAAC,IAAI,CAAC,EAAE;QAChC,MAAM,yBAAyB,GAAG,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;QAE7D,IAAI,CAAC,yBAAyB,EAAE;YAC9B,OAAO;SACR;QAED,OAAO,yBAAyB,CAAC,IAAI,CACnC,CAAC,IAAe,KAAK,IAAI,YAAY,OAAO,CAC7C,CAAC;KACH;IAED,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC3C,MAAM,UAAU,GAAG,QAAQ,CAAC,MAAM,CAChC,CAAC,KAAK,KAAK,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,QAAQ,CACnD,CAAC;IAEF,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE;QACtB,OAAO;KACR;IAED,IAAI,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE;QACzB,OAAO,CAAC,IAAI,CAAC,0CAA0C,QAAQ,IAAI,EAAE,IAAI,CAAC,CAAC;KAC5E;IAED,OAAO,UAAU,CAAC,CAAC,CAAC,CAAC;AACvB,CAAC;SAEe,sBAAsB,CAAC,IAAiB;IACtD,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC3C,MAAM,WAAW,GAAG,QAAQ,CAAC,MAAM,CACjC,CAAC,KAAK,KAAK,CAAC,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,EAAE,CAC5E,CAAC;IAEF,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE;QACvB,OAAO;KACR;IAED,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC,EAAE;QAC1B,OAAO,CAAC,IAAI,CAAC,0CAA0C,EAAE,IAAI,CAAC,CAAC;KAChE;IAED,OAAO,WAAW,CAAC,CAAC,CAAC,CAAC;AACxB;;;;","names":[],"sources":["src/utils/slot-utils.ts"],"sourcesContent":["import type {LightDOMWithSlots} from '@/src/mixins/slots-for-no-shadow-dom-mixin';\n\nfunction hasLightDOMSlotContent(\n  element: HTMLElement\n): element is HTMLElement & LightDOMWithSlots {\n  return (\n    'slotContent' in element &&\n    typeof (element as HTMLElement & LightDOMWithSlots).slotContent === 'object'\n  );\n}\n\nexport function getNamedSlotFromHost(host: HTMLElement, slotName: string) {\n  if (hasLightDOMSlotContent(host)) {\n    const targetLightDomSlotContent = host.slotContent[slotName];\n\n    if (!targetLightDomSlotContent) {\n      return;\n    }\n\n    return targetLightDomSlotContent.find(\n      (node: ChildNode) => node instanceof Element\n    );\n  }\n\n  const children = Array.from(host.children);\n  const targetSlot = children.filter(\n    (child) => child.getAttribute('slot') === slotName\n  );\n\n  if (!targetSlot.length) {\n    return;\n  }\n\n  if (targetSlot.length > 1) {\n    console.warn(`Element should only have 1 slot named \"${slotName}\".`, host);\n  }\n\n  return targetSlot[0];\n}\n\nexport function getDefaultSlotFromHost(host: HTMLElement) {\n  const children = Array.from(host.children);\n  const defaultSlot = children.filter(\n    (child) => !child.hasAttribute('slot') || child.getAttribute('slot') === ''\n  );\n\n  if (!defaultSlot.length) {\n    return;\n  }\n\n  if (defaultSlot.length > 1) {\n    console.warn('Element should only have 1 default slot.', host);\n  }\n\n  return defaultSlot[0];\n}\n"],"version":3}

package/dist/atomic/components/utils/slot-utils.js

@@ -1,4 +1,15 @@
+function hasLightDOMSlotContent(element) {
+    return ('slotContent' in element &&
+        typeof element.slotContent === 'object');
+}
 export function getNamedSlotFromHost(host, slotName) {
+    if (hasLightDOMSlotContent(host)) {
+        const targetLightDomSlotContent = host.slotContent[slotName];
+        if (!targetLightDomSlotContent) {
+            return;
+        }
+        return targetLightDomSlotContent.find((node) => node instanceof Element);
+    }
     const children = Array.from(host.children);
     const targetSlot = children.filter((child) => child.getAttribute('slot') === slotName);
     if (!targetSlot.length) {