@govtechsg/sgds-web-component 3.2.0-rc.3 → 3.2.0-rc.4

package/index.umd.js

@@ -26866,51 +26866,45 @@
            * 	href link for terms of use
            */
           this.termsOfUseHref = "#";
-      }
-      firstUpdated() {
-          const socialMediaSlot = this.shadowRoot.querySelector("slot[name='social-media']");
-          const footerTitleSlot = this.shadowRoot.querySelector("slot[name='title']");
-          const footerDescriptionSlot = this.shadowRoot.querySelector("slot[name='description']");
-          const footerItemsSlot = this.shadowRoot.querySelector("slot[name='items']");
-          const socialMediaChildNodes = socialMediaSlot.assignedNodes({ flatten: true });
-          const footerTitleChildNodes = footerTitleSlot.assignedNodes({ flatten: true });
-          const footerDescriptionChildNodes = footerDescriptionSlot.assignedNodes({ flatten: true });
-          const footerItemsChildNodes = footerItemsSlot.assignedNodes({ flatten: true });
-          if (socialMediaChildNodes.length === 0) {
-              const socialMediaContainer = this.shadowRoot.querySelector(".social-media");
-              socialMediaContainer.style.display = "none";
-          }
-          if (footerTitleChildNodes.length === 0 && footerDescriptionChildNodes.length === 0) {
-              const footerHeaderContainer = this.shadowRoot.querySelector(".footer-header");
-              footerHeaderContainer.style.display = "none";
-          }
-          if (footerItemsChildNodes.length === 0) {
-              const footerItemsContainer = this.shadowRoot.querySelector(".footer-items");
-              footerItemsContainer.style.display = "none";
-          }
-          if (footerTitleChildNodes.length === 0 &&
-              footerDescriptionChildNodes.length === 0 &&
-              footerItemsChildNodes.length === 0) {
-              const footerTopContainer = this.shadowRoot.querySelector(".footer-top");
-              footerTopContainer.style.display = "none";
-          }
+          this.hasSlotController = new HasSlotController(this, "social-media", "title", "description", "items");
       }
       render() {
+          const hasSocialMediaSlot = this.hasSlotController.test("social-media");
+          const hasTitleSlot = this.hasSlotController.test("title");
+          const hasDescriptionSlot = this.hasSlotController.test("description");
+          const hasItemsSlot = this.hasSlotController.test("items");
+          const displayFooterHeader = hasTitleSlot || hasDescriptionSlot;
+          const displayFooterItems = hasItemsSlot;
+          const displaySocialMedia = hasSocialMediaSlot;
+          const displayFooterTop = displayFooterHeader || displayFooterItems;
           return html$1 `
       <footer class="footer">
-        <section class="footer-top">
-          <div class="footer-header">
-            <slot name="title"></slot>
-            <slot name="description"></slot>
-          </div>
-          <div class="footer-items">
-            <slot name="items"></slot>
-          </div>
-        </section>
+        ${displayFooterTop
+            ? html$1 ` <section class="footer-top">
+              ${displayFooterHeader
+                ? html$1 `
+                    <div class="footer-header">
+                      <slot name="title"></slot>
+                      <slot name="description"></slot>
+                    </div>
+                  `
+                : nothing}
+              ${displayFooterItems
+                ? html$1 ` <div class="footer-items">
+                    <slot name="items"></slot>
+                  </div>`
+                : nothing}
+            </section>`
+            : nothing}
+
         <section class="footer-bottom">
-          <div class="social-media">
-            <slot name="social-media"></slot>
-          </div>
+          ${displaySocialMedia
+            ? html$1 `
+                <div class="social-media">
+                  <slot name="social-media"></slot>
+                </div>
+              `
+            : nothing}
           <div class="footer-mandatory-links">
             <ul>
               <li><a href=${this.contactHref}>Contact</a></li>