@govtechsg/sgds-web-component 0.0.3 → 0.0.5

package/{SideNav → Sidenav}/index.js

@@ -46,6 +46,15 @@ var t$1;const i$2=window,s$2=i$2.trustedTypes,e$5=s$2?s$2.createPolicy("lit-html
  * SPDX-License-Identifier: BSD-3-Clause
  */var l$1,o$2;class s$1 extends d$1{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0;}createRenderRoot(){var t,e;const i=super.createRenderRoot();return null!==(t=(e=this.renderOptions).renderBefore)&&void 0!==t||(e.renderBefore=i.firstChild),i}update(t){const i=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=A(i,this.renderRoot,this.renderOptions);}connectedCallback(){var t;super.connectedCallback(),null===(t=this._$Do)||void 0===t||t.setConnected(!0);}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this._$Do)||void 0===t||t.setConnected(!1);}render(){return x}}s$1.finalized=!0,s$1._$litElement$=!0,null===(l$1=globalThis.litElementHydrateSupport)||void 0===l$1||l$1.call(globalThis,{LitElement:s$1});const n$3=globalThis.litElementPolyfillSupport;null==n$3||n$3({LitElement:s$1});(null!==(o$2=globalThis.litElementVersions)&&void 0!==o$2?o$2:globalThis.litElementVersions=[]).push("3.2.2");
 
+class SgdsElement extends s$1 {
+    /** Emits a custom event with more convenient defaults. */
+    emit(name, options) {
+        const event = new CustomEvent(name, Object.assign({ bubbles: true, cancelable: false, composed: true, detail: {} }, options));
+        this.dispatchEvent(event);
+        return event;
+    }
+}
+
 /**
  * @license
  * Copyright 2017 Google LLC
@@ -79,7 +88,7 @@ var css_248z$2 = i$3`ul {
   list-style: none;
 }`;
 
-let SideNavElement = class SideNavElement extends s$1 {
+let SgdsSidenav = class SgdsSidenav extends SgdsElement {
     constructor() {
         super(...arguments);
         this.alwaysOpen = false;
@@ -87,8 +96,8 @@ let SideNavElement = class SideNavElement extends s$1 {
     render() {
         this.alwaysOpen
             ? null
-            : this.addEventListener("toggle-onclick", (e) => {
-                const children = this.querySelectorAll("sidenav-item");
+            : this.addEventListener("sgds-toggle", (e) => {
+                const children = this.shadowRoot.querySelector('slot').assignedElements({ flatten: true });
                 for (let i = 0; i < children.length; i++) {
                     if (e.detail.index != i) {
                         children[i].closeItem();
@@ -104,13 +113,13 @@ let SideNavElement = class SideNavElement extends s$1 {
     `;
     }
 };
-SideNavElement.styles = css_248z$2;
+SgdsSidenav.styles = css_248z$2;
 __decorate([
     e$3({ type: Boolean, attribute: true })
-], SideNavElement.prototype, "alwaysOpen", void 0);
-SideNavElement = __decorate([
-    e$4("sidenav-element")
-], SideNavElement);
+], SgdsSidenav.prototype, "alwaysOpen", void 0);
+SgdsSidenav = __decorate([
+    e$4("sgds-sidenav")
+], SgdsSidenav);
 
 var css_248z$1 = i$3`@charset "UTF-8";
 @import "~bootstrap-icons/font/fonts/bootstrap-icons.css";
@@ -12858,7 +12867,7 @@ function genId (componentName = '', elementName = '') {
     return `id-${Math.random().toString().substring(2, 6)}-sgds-${componentName}-${elementName}`;
 }
 
-let SideNavItem = class SideNavItem extends s$1 {
+let SgdsSidenavItem = class SgdsSidenavItem extends SgdsElement {
     constructor() {
         super(...arguments);
         this.myCollapse = e();
@@ -12873,12 +12882,7 @@ let SideNavItem = class SideNavItem extends s$1 {
         this.index = "-1";
     }
     _onClick() {
-        const event = new CustomEvent("toggle-onclick", {
-            bubbles: true,
-            composed: true,
-            detail: { index: this.index },
-        });
-        this.dispatchEvent(event);
+        this.emit('sgds-toggle', { detail: { index: this.index } });
     }
     _onClickButton() {
         this._onClick();
@@ -12972,22 +12976,22 @@ let SideNavItem = class SideNavItem extends s$1 {
     `;
     }
 };
-SideNavItem.styles = css_248z$1;
+SgdsSidenavItem.styles = css_248z$1;
 __decorate([
     e$3({ type: Boolean })
-], SideNavItem.prototype, "active", void 0);
+], SgdsSidenavItem.prototype, "active", void 0);
 __decorate([
     e$3({ type: String })
-], SideNavItem.prototype, "href", void 0);
+], SgdsSidenavItem.prototype, "href", void 0);
 __decorate([
     e$3({ type: String })
-], SideNavItem.prototype, "collapseId", void 0);
+], SgdsSidenavItem.prototype, "collapseId", void 0);
 __decorate([
     e$3({ type: String })
-], SideNavItem.prototype, "buttonId", void 0);
-SideNavItem = __decorate([
-    e$4("sidenav-item")
-], SideNavItem);
+], SgdsSidenavItem.prototype, "buttonId", void 0);
+SgdsSidenavItem = __decorate([
+    e$4("sgds-sidenav-item")
+], SgdsSidenavItem);
 
 var css_248z = i$3`@charset "UTF-8";
 :root {
@@ -18609,7 +18613,7 @@ a.nav-link.active, a.nav-link:hover {
   color: var(--sidenav-theme-color);
 }`;
 
-let SideNavLink = class SideNavLink extends s$1 {
+let SgdsSidenavLink = class SgdsSidenavLink extends SgdsElement {
     constructor() {
         super(...arguments);
         this.active = false;
@@ -18625,16 +18629,16 @@ let SideNavLink = class SideNavLink extends s$1 {
     `;
     }
 };
-SideNavLink.styles = css_248z;
+SgdsSidenavLink.styles = css_248z;
 __decorate([
     e$3({ type: Boolean })
-], SideNavLink.prototype, "active", void 0);
+], SgdsSidenavLink.prototype, "active", void 0);
 __decorate([
     e$3({ type: String })
-], SideNavLink.prototype, "href", void 0);
-SideNavLink = __decorate([
-    e$4("sidenav-link")
-], SideNavLink);
+], SgdsSidenavLink.prototype, "href", void 0);
+SgdsSidenavLink = __decorate([
+    e$4("sgds-sidenav-link")
+], SgdsSidenavLink);
 
-export { SideNavElement, SideNavItem, SideNavLink };
+export { SgdsSidenav, SgdsSidenavItem, SgdsSidenavLink };
 //# sourceMappingURL=index.js.map