@govtechsg/sgds-web-component 0.0.7 → 0.0.8

package/Mainnav/sgds-mainnav.d.ts

@@ -15,6 +15,7 @@ export declare class SgdsMainnav extends SgdsElement {
     breakpointReached: Boolean;
     expanded: Boolean;
     firstUpdated(): void;
+    _handleSlotChange(e: Event): void;
     render(): import("lit-html").TemplateResult<1>;
     _expandClass(): string;
 }

package/index.js

@@ -27095,7 +27095,7 @@ slot[name=non-collapsible] {
   gap: 1rem;
 }
 
-.slot-end::slotted(:not(sgds-mainnav-item)) {
+.slot-end::slotted(:not([name$=-mainnav-item])) {
   align-self: center;
 }`;
 
@@ -34209,6 +34209,11 @@ let SgdsMainnav = class SgdsMainnav extends SgdsElement {
             });
         }
     }
+    // assigning name attribute to elements added in slot="end", to use wildcard css selector to assign styles only to *-mainnav-item
+    _handleSlotChange(e) {
+        const childElements = e.target.assignedElements({ flatten: true });
+        childElements.forEach(e => e.setAttribute('name', e.tagName.toLowerCase()));
+    }
     render() {
         this.breakpointReached = window.innerWidth < SIZES[this.expand.toString()];
         const collapseClass = "collapse navbar-collapse order-4";
@@ -34256,7 +34261,7 @@ let SgdsMainnav = class SgdsMainnav extends SgdsElement {
         >
           <ul class="navbar-nav">
             <slot></slot>
-            <slot name="end" class=${o$2({ "slot-end": !this.breakpointReached })}></slot>
+            <slot name="end" class=${o$2({ "slot-end": !this.breakpointReached })} @slotchange=${this._handleSlotChange}></slot>
           </ul>
         </div>
       </nav>