@govtechsg/sgds-web-component 0.0.6 → 0.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@govtechsg/sgds-web-component",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "description": "",
   "main": "./umd/index.js",
   "module": "./index.js",

package/umd/index.js

@@ -27073,8 +27073,10 @@ a[target=_blank]:after {
   display: flex;
   align-self: center;
   gap: 1rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
   height: 100%;
-  margin-left: 1rem;
+  width: 100%;
 }
 
 .navbar-toggler {
@@ -27089,6 +27091,17 @@ slot[name=non-collapsible] {
   display: flex;
   gap: 1rem;
   align-items: center;
+}
+
+.slot-end {
+  display: flex;
+  margin-left: auto;
+  align-items: stretch;
+  gap: 1rem;
+}
+
+.slot-end::slotted(:not([name$=-mainnav-item])) {
+  align-self: center;
 }`;
 
     var top = 'top';
@@ -34201,6 +34214,11 @@ slot[name=non-collapsible] {
                 });
             }
         }
+        // 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";
@@ -34248,6 +34266,7 @@ slot[name=non-collapsible] {
         >
           <ul class="navbar-nav">
             <slot></slot>
+            <slot name="end" class=${o$2({ "slot-end": !this.breakpointReached })} @slotchange=${this._handleSlotChange}></slot>
           </ul>
         </div>
       </nav>