@biggive/components 202401021213.0.0 → 202401021340.0.0

package/dist/esm/{index-3ced6448.js → index-3eee9238.js}

@@ -1,5 +1,4 @@
 const NAMESPACE = 'biggive';
-const BUILD = /* biggive */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: true, cmpWillUpdate: false, connectedCallback: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: false, element: false, event: true, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: true, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: false, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: true, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: false, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: false };
 
 /**
  * Virtual DOM patching algorithm based on Snabbdom by
@@ -928,14 +927,46 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
             if (oldVNode && oldVNode.$tag$ === newVNode.$tag$ && oldParentVNode.$elm$) {
                 {
                     // we've got an old slot vnode and the wrapper is being replaced
-                    // so let's move the old slot content back to its original location
-                    putBackInOriginalLocation(oldParentVNode.$elm$, false);
+                    // so let's move the old slot content to the root of the element currently being rendered
+                    relocateToHostRoot(oldParentVNode.$elm$);
                 }
             }
         }
     }
     return elm;
 };
+/**
+ * Relocates all child nodes of an element that were a part of a previous slot relocation
+ * to the root of the Stencil component currently being rendered. This happens when a parent
+ * element of a slot reference node dynamically changes and triggers a re-render. We cannot use
+ * `putBackInOriginalLocation()` because that may relocate nodes to elements that will not be re-rendered
+ * and so they will not be relocated again.
+ *
+ * @param parentElm The element potentially containing relocated nodes.
+ */
+const relocateToHostRoot = (parentElm) => {
+    plt.$flags$ |= 1 /* PLATFORM_FLAGS.isTmpDisconnected */;
+    const host = parentElm.closest(hostTagName.toLowerCase());
+    if (host != null) {
+        for (const childNode of Array.from(parentElm.childNodes)) {
+            // Only relocate nodes that were slotted in
+            if (childNode['s-sh'] != null) {
+                host.insertBefore(childNode, null);
+                // Reset so we can correctly move the node around again.
+                childNode['s-sh'] = undefined;
+                // When putting an element node back in its original location,
+                // we need to reset the `slot` attribute back to the value it originally had
+                // so we can correctly relocate it again in the future
+                if (childNode.nodeType === 1 /* NODE_TYPE.ElementNode */ && !!childNode['s-sn']) {
+                    childNode.setAttribute('slot', childNode['s-sn']);
+                }
+                // Need to tell the render pipeline to check to relocate slot content again
+                checkSlotRelocate = true;
+            }
+        }
+    }
+    plt.$flags$ &= ~1 /* PLATFORM_FLAGS.isTmpDisconnected */;
+};
 const putBackInOriginalLocation = (parentElm, recursive) => {
     var _a;
     plt.$flags$ |= 1 /* PLATFORM_FLAGS.isTmpDisconnected */;
@@ -1439,7 +1470,7 @@ const markSlotContentForRelocation = (elm) => {
                 if (!node['s-cn'] &&
                     !node['s-nr'] &&
                     node['s-hn'] !== childNode['s-hn'] &&
-                    (!BUILD.experimentalSlotFixes  )) {
+                    (!node['s-sh'] || node['s-sh'] !== childNode['s-hn'])) {
                     // if `node` is located in the slot that `childNode` refers to (via the
                     // `'s-sn'` property) then we need to relocate it from it's current spot
                     // (under the host element parent) to the right slot location
@@ -1548,7 +1579,7 @@ const nullifyVNodeRefs = (vNode) => {
  * @param isInitialLoad whether or not this is the first call after page load
  */
 const renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     const hostElm = hostRef.$hostElement$;
     const cmpMeta = hostRef.$cmpMeta$;
     const oldVNode = hostRef.$vnode$ || newVNode(null, null);
@@ -1630,7 +1661,7 @@ const renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
                     // to make sure they get inserted into their new how in the same order they were declared in their original location.
                     //
                     // TODO(STENCIL-914): Remove `experimentalSlotFixes` check
-                    {
+                    if ((insertBeforeNode && insertBeforeNode.nodeType === 1 /* NODE_TYPE.ElementNode */)) {
                         let orgLocationNode = (_a = nodeToRelocate['s-ol']) === null || _a === void 0 ? void 0 : _a.previousSibling;
                         while (orgLocationNode) {
                             let refNode = (_b = orgLocationNode['s-nr']) !== null && _b !== void 0 ? _b : null;
@@ -1650,9 +1681,22 @@ const renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
                         // since that the node to relocate
                         // has a different next sibling or parent relocated
                         if (nodeToRelocate !== insertBeforeNode) {
-                            if (!nodeToRelocate['s-hn'] && nodeToRelocate['s-ol']) {
-                                // probably a component in the index.html that doesn't have its hostname set
-                                nodeToRelocate['s-hn'] = nodeToRelocate['s-ol'].parentNode.nodeName;
+                            // Handle a use-case where we relocate a slot where
+                            // the slot name changes along the way (for instance, a default to a named slot).
+                            // In this case, we need to update the relocated node's slot attribute to match
+                            // the slot name it is being relocated into.
+                            //
+                            // There is a very niche use case where we may be relocating a text node. For now,
+                            // we ignore anything that is not an element node since non-element nodes cannot have
+                            // attributes to specify the slot. We'll deal with this if it becomes a problem... but super edge-case-y
+                            if (nodeToRelocate.nodeType === 1 /* NODE_TYPE.ElementNode */ &&
+                                slotRefNode['s-fs'] !== nodeToRelocate.getAttribute('slot')) {
+                                if (!slotRefNode['s-fs']) {
+                                    nodeToRelocate.removeAttribute('slot');
+                                }
+                                else {
+                                    nodeToRelocate.setAttribute('slot', slotRefNode['s-fs']);
+                                }
                             }
                             // Add it back to the dom but in its new home
                             // If we get to this point and `insertBeforeNode` is `null`, that means
@@ -1691,6 +1735,21 @@ const renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
         // always reset
         relocateNodes.length = 0;
     }
+    // Hide any elements that were projected through, but don't have a slot to go to.
+    // Only an issue if there were no "slots" rendered. Otherwise, nodes are hidden correctly.
+    // This _only_ happens for `scoped` components!
+    if (cmpMeta.$flags$ & 2 /* CMP_FLAGS.scopedCssEncapsulation */) {
+        for (const childNode of rootVnode.$elm$.childNodes) {
+            if (childNode['s-hn'] !== hostTagName && !childNode['s-sh']) {
+                // Store the initial value of `hidden` so we can reset it later when
+                // moving nodes around.
+                if (isInitialLoad && childNode['s-ih'] == null) {
+                    childNode['s-ih'] = (_e = childNode.hidden) !== null && _e !== void 0 ? _e : false;
+                }
+                childNode.hidden = true;
+            }
+        }
+    }
 };
 const attachToAncestor = (hostRef, ancestorComponent) => {
     if (ancestorComponent && !hostRef.$onRenderResolve$ && ancestorComponent['s-p']) {
@@ -2291,6 +2350,217 @@ const disconnectedCallback = async (elm) => {
         }
     }
 };
+const patchCloneNode = (HostElementPrototype) => {
+    const orgCloneNode = HostElementPrototype.cloneNode;
+    HostElementPrototype.cloneNode = function (deep) {
+        const srcNode = this;
+        const isShadowDom = srcNode.shadowRoot && supportsShadow ;
+        const clonedNode = orgCloneNode.call(srcNode, isShadowDom ? deep : false);
+        if (!isShadowDom && deep) {
+            let i = 0;
+            let slotted, nonStencilNode;
+            const stencilPrivates = [
+                's-id',
+                's-cr',
+                's-lr',
+                's-rc',
+                's-sc',
+                's-p',
+                's-cn',
+                's-sr',
+                's-sn',
+                's-hn',
+                's-ol',
+                's-nr',
+                's-si',
+            ];
+            for (; i < srcNode.childNodes.length; i++) {
+                slotted = srcNode.childNodes[i]['s-nr'];
+                nonStencilNode = stencilPrivates.every((privateField) => !srcNode.childNodes[i][privateField]);
+                if (slotted) {
+                    if (clonedNode.__appendChild) {
+                        clonedNode.__appendChild(slotted.cloneNode(true));
+                    }
+                    else {
+                        clonedNode.appendChild(slotted.cloneNode(true));
+                    }
+                }
+                if (nonStencilNode) {
+                    clonedNode.appendChild(srcNode.childNodes[i].cloneNode(true));
+                }
+            }
+        }
+        return clonedNode;
+    };
+};
+/**
+ * Patches the `appendChild` method on a `scoped` Stencil component.
+ * The patch will attempt to find a slot with the same name as the node being appended
+ * and insert it into the slot reference if found. Otherwise, it falls-back to the original
+ * `appendChild` method.
+ *
+ * @param HostElementPrototype The Stencil component to be patched
+ */
+const patchSlotAppendChild = (HostElementPrototype) => {
+    HostElementPrototype.__appendChild = HostElementPrototype.appendChild;
+    HostElementPrototype.appendChild = function (newChild) {
+        const slotName = (newChild['s-sn'] = getSlotName(newChild));
+        const slotNode = getHostSlotNode(this.childNodes, slotName);
+        if (slotNode) {
+            const slotChildNodes = getHostSlotChildNodes(slotNode, slotName);
+            const appendAfter = slotChildNodes[slotChildNodes.length - 1];
+            appendAfter.parentNode.insertBefore(newChild, appendAfter.nextSibling);
+            // Check if there is fallback content that should be hidden
+            updateFallbackSlotVisibility(this);
+            return;
+        }
+        return this.__appendChild(newChild);
+    };
+};
+/**
+ * Patches the text content of an unnamed slotted node inside a scoped component
+ * @param hostElementPrototype the `Element` to be patched
+ */
+const patchTextContent = (hostElementPrototype) => {
+    const descriptor = Object.getOwnPropertyDescriptor(Node.prototype, 'textContent');
+    Object.defineProperty(hostElementPrototype, '__textContent', descriptor);
+    {
+        // Patch `textContent` to mimic shadow root behavior
+        Object.defineProperty(hostElementPrototype, 'textContent', {
+            // To mimic shadow root behavior, we need to return the text content of all
+            // nodes in a slot reference node
+            get() {
+                const slotRefNodes = getAllChildSlotNodes(this.childNodes);
+                const textContent = slotRefNodes
+                    .map((node) => {
+                    var _a, _b;
+                    const text = [];
+                    // Need to get the text content of all nodes in the slot reference node
+                    let slotContent = node.nextSibling;
+                    while (slotContent && slotContent['s-sn'] === node['s-sn']) {
+                        if (slotContent.nodeType === 3 /* NODE_TYPES.TEXT_NODE */ || slotContent.nodeType === 1 /* NODE_TYPES.ELEMENT_NODE */) {
+                            text.push((_b = (_a = slotContent.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : '');
+                        }
+                        slotContent = slotContent.nextSibling;
+                    }
+                    return text.filter((ref) => ref !== '').join(' ');
+                })
+                    .filter((text) => text !== '')
+                    .join(' ');
+                // Pad the string to return
+                return ' ' + textContent + ' ';
+            },
+            // To mimic shadow root behavior, we need to overwrite all nodes in a slot
+            // reference node. If a default slot reference node exists, the text content will be
+            // placed there. Otherwise, the new text node will be hidden
+            set(value) {
+                const slotRefNodes = getAllChildSlotNodes(this.childNodes);
+                slotRefNodes.forEach((node) => {
+                    // Remove the existing content of the slot
+                    let slotContent = node.nextSibling;
+                    while (slotContent && slotContent['s-sn'] === node['s-sn']) {
+                        const tmp = slotContent;
+                        slotContent = slotContent.nextSibling;
+                        tmp.remove();
+                    }
+                    // If this is a default slot, add the text node in the slot location.
+                    // Otherwise, destroy the slot reference node
+                    if (node['s-sn'] === '') {
+                        const textNode = this.ownerDocument.createTextNode(value);
+                        textNode['s-sn'] = '';
+                        node.parentElement.insertBefore(textNode, node.nextSibling);
+                    }
+                    else {
+                        node.remove();
+                    }
+                });
+            },
+        });
+    }
+};
+const patchChildSlotNodes = (elm, cmpMeta) => {
+    class FakeNodeList extends Array {
+        item(n) {
+            return this[n];
+        }
+    }
+    // TODO(STENCIL-854): Remove code related to legacy shadowDomShim field
+    if (cmpMeta.$flags$ & 8 /* CMP_FLAGS.needsShadowDomShim */) {
+        const childNodesFn = elm.__lookupGetter__('childNodes');
+        Object.defineProperty(elm, 'children', {
+            get() {
+                return this.childNodes.map((n) => n.nodeType === 1);
+            },
+        });
+        Object.defineProperty(elm, 'childElementCount', {
+            get() {
+                return elm.children.length;
+            },
+        });
+        Object.defineProperty(elm, 'childNodes', {
+            get() {
+                const childNodes = childNodesFn.call(this);
+                if ((plt.$flags$ & 1 /* PLATFORM_FLAGS.isTmpDisconnected */) === 0 &&
+                    getHostRef(this).$flags$ & 2 /* HOST_FLAGS.hasRendered */) {
+                    const result = new FakeNodeList();
+                    for (let i = 0; i < childNodes.length; i++) {
+                        const slot = childNodes[i]['s-nr'];
+                        if (slot) {
+                            result.push(slot);
+                        }
+                    }
+                    return result;
+                }
+                return FakeNodeList.from(childNodes);
+            },
+        });
+    }
+};
+/**
+ * Recursively finds all slot reference nodes ('s-sr') in a series of child nodes.
+ *
+ * @param childNodes The set of child nodes to search for slot reference nodes.
+ * @returns An array of slot reference nodes.
+ */
+const getAllChildSlotNodes = (childNodes) => {
+    const slotRefNodes = [];
+    for (const childNode of Array.from(childNodes)) {
+        if (childNode['s-sr']) {
+            slotRefNodes.push(childNode);
+        }
+        slotRefNodes.push(...getAllChildSlotNodes(childNode.childNodes));
+    }
+    return slotRefNodes;
+};
+const getSlotName = (node) => node['s-sn'] || (node.nodeType === 1 && node.getAttribute('slot')) || '';
+/**
+ * Recursively searches a series of child nodes for a slot with the provided name.
+ * @param childNodes the nodes to search for a slot with a specific name.
+ * @param slotName the name of the slot to match on.
+ * @returns a reference to the slot node that matches the provided name, `null` otherwise
+ */
+const getHostSlotNode = (childNodes, slotName) => {
+    let i = 0;
+    let childNode;
+    for (; i < childNodes.length; i++) {
+        childNode = childNodes[i];
+        if (childNode['s-sr'] && childNode['s-sn'] === slotName) {
+            return childNode;
+        }
+        childNode = getHostSlotNode(childNode.childNodes, slotName);
+        if (childNode) {
+            return childNode;
+        }
+    }
+    return null;
+};
+const getHostSlotChildNodes = (n, slotName) => {
+    const childNodes = [n];
+    while ((n = n.nextSibling) && n['s-sn'] === slotName) {
+        childNodes.push(n);
+    }
+    return childNodes;
+};
 const bootstrapLazy = (lazyBundles, options = {}) => {
     var _a;
     const endBootstrap = createTime();
@@ -2374,6 +2644,21 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
                     return getHostRef(this).$onReadyPromise$;
                 }
             };
+            // TODO(STENCIL-914): this check and `else` block can go away and be replaced by just the `scoped` check
+            {
+                {
+                    patchChildSlotNodes(HostElement.prototype, cmpMeta);
+                }
+                {
+                    patchCloneNode(HostElement.prototype);
+                }
+                {
+                    patchSlotAppendChild(HostElement.prototype);
+                }
+                if (cmpMeta.$flags$ & 2 /* CMP_FLAGS.scopedCssEncapsulation */) {
+                    patchTextContent(HostElement.prototype);
+                }
+            }
             cmpMeta.$lazyBundleId$ = lazyBundle[0];
             if (!exclude.includes(tagName) && !customElements.get(tagName)) {
                 cmpTags.push(tagName);
@@ -2495,6 +2780,8 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
 const styles = /*@__PURE__*/ new Map();
 const win = typeof window !== 'undefined' ? window : {};
 const doc = win.document || { head: {} };
+const H = (win.HTMLElement || class {
+});
 const plt = {
     $flags$: 0,
     $resourcesUrl$: '',
@@ -2560,6 +2847,6 @@ const flush = () => {
 const nextTick = (cb) => promiseResolve().then(cb);
 const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
 
-export { Host as H, getAssetPath as a, bootstrapLazy as b, createEvent as c, getElement as g, h, promiseResolve as p, registerInstance as r, setNonce as s };
+export { H, getAssetPath as a, bootstrapLazy as b, createEvent as c, Host as d, getElement as g, h, promiseResolve as p, registerInstance as r, setNonce as s };
 
-//# sourceMappingURL=index-3ced6448.js.map
+//# sourceMappingURL=index-3eee9238.js.map