globuswebcomponents 2.5.1 → 2.5.2

package/dist/collection/components/gb-nav-bar-sidemenu/gb-nav-bar-sidemenu.css

@@ -1,48 +1,48 @@
-.top_bar_sidemenu_div{
-    display: flex;
-width: 17.5rem;
-height: 100%;
-padding: var(--spacing-6) var(--spacing-7);
-flex-direction: column;
-justify-content: space-between;
-align-items: flex-start;
-border-right: 1px solid var(--color-border-subtler, #E3E8EF);
-background: var(--color-surface, #ffffff);
+.top_bar_sidemenu_div {
+  display: flex;
+  width: 17.5rem;
+  height: 100%;
+  padding: var(--spacing-6) var(--spacing-7);
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-start;
+  border-right: 1px solid var(--color-border-subtler, #e3e8ef);
+  background: var(--color-surface, #ffffff);
 }
 
-.vertical_tabs_div{
-    width: 100%;
+.vertical_tabs_div {
+  width: 100%;
 }
 
-.wrapper{
-    display: flex;
-padding: var(--spacing-4) var(--spacing-5) var(--spacing-5) var(--spacing-5);
-flex-direction: column;
-justify-content: center;
-align-items: flex-start;
-gap: var(--spacing-4);
-align-self: stretch;
-border-radius: var(--rounded-sm);
-border: 1px solid var(--color-border-subtler, #E3E8EF);
-background: var(--color-background-gray-subtlest, #F6F8FA);
-position: relative;
-    height: auto;
-    overflow: hidden;
+.wrapper {
+  display: flex;
+  padding: var(--spacing-4) var(--spacing-5) var(--spacing-5) var(--spacing-5);
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: var(--spacing-4);
+  align-self: stretch;
+  border-radius: var(--rounded-sm);
+  border: 1px solid var(--color-border-subtler, #e3e8ef);
+  background: var(--color-background-gray-subtlest, #f6f8fa);
+  position: relative;
+  height: auto;
+  overflow: hidden;
 }
 
-.wrapper_pattern{
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    mix-blend-mode: multiply;
+.wrapper_pattern {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  mix-blend-mode: multiply;
 }
 
-.wrapper_pattern img{
-    width: 100%;
-    height: 100%;
+.wrapper_pattern img {
+  width: 100%;
+  height: 100%;
 }
 
-::slotted([slot="application_name"]){
-    color: var(--color-text-information-bold, #042F59);
-}
+::slotted([slot='application_name']) {
+  color: var(--color-text-information-bold, #042f59);
+}

package/dist/collection/components/gb-nav-bar-sidemenu/gb-nav-bar-sidemenu.js

@@ -5,14 +5,14 @@ export class GbNavBarSidemenu {
         this.applicationIcon = '';
         this.activeIndex = 0;
         this.tabs = [
-            {
-                name: 'Hiiii',
-                index: 0,
-            },
-            {
-                name: 'There',
-                index: 1,
-            },
+        // {
+        //   name: 'Hiiii',
+        //   index: 0,
+        // },
+        // {
+        //   name: 'There',
+        //   index: 1,
+        // },
         ];
         this.leadingIconSvg = '';
     }
@@ -36,7 +36,7 @@ export class GbNavBarSidemenu {
     }
     render() {
         const patternSrc = getAssetPath(`assets/pattern_wrapper.svg`);
-        return (h("div", { key: 'bd1caaaf6566af15a502eb0803873db834417903', class: "top_bar_sidemenu_div" }, h("div", { key: 'd0a9c9e6263f3e0a3ed0abf98062a3ac707e816d', class: "vertical_tabs_div" }, h("gb-vertical-tabs", { key: 'f0db22a04076bcb5ef1abe4f9e56470a961b3a31', size: "md", tabs: this.tabs, type: "button_primary", "active-index": this.activeIndex, onTabItemClicked: this.onTabItemClicked.bind(this) })), h("div", { key: '9c310f9f97a0ab375840adc44cd0ac6c0878c8e1', class: "wrapper" }, h("div", { key: 'dd437de024e2160ef6781e430093fe39c5e8fe88', class: "wrapper_pattern" }, h("img", { key: '224e9871db8c868c23c86323dbe3af914f033fb7', src: patternSrc, alt: "" })), h("div", { key: '93d6db903b1279491b9e3e90714b065e99df484d', class: `application_icon`, innerHTML: this.leadingIconSvg }), h("div", { key: 'd45af07850ebde8c634d46cdf825dd01047bb87c', class: "application_name" }, h("slot", { key: '2e632b88c35a4adb998558c01c3a2f0f4c69829b', name: "application_name" })))));
+        return (h("div", { key: '5a14efbf87a2f11136d13745e63e0ec7766bb49c', class: "top_bar_sidemenu_div" }, h("div", { key: '68d5accc6ff1b89f620bc30b5eea7be1a360635e', class: "vertical_tabs_div" }, h("gb-vertical-tabs", { key: '6975d582f48fdc874d845fb2063947ae26706cc7', size: "md", tabs: this.tabs, type: "button_primary", "active-index": this.activeIndex, onTabItemClicked: this.onTabItemClicked.bind(this) })), h("div", { key: '112045ac6f786bcf15d6da524ff19c48e86ddba4', class: "wrapper" }, h("div", { key: '2f52c3b052b9094561e09433c4adc99e136614fa', class: "wrapper_pattern" }, h("img", { key: 'cb995dd803b7ff2fc06a3edb82565d271f475d1e', src: patternSrc, alt: "" })), h("div", { key: '5eb311fb7edbc3a9dcfff3c27f226f32f8b79963', class: `application_icon`, innerHTML: this.leadingIconSvg }), h("div", { key: 'e3c9d2f8bf63e87f72fb17946cf9feff556e7b9f', class: "application_name" }, h("slot", { key: '7011ea3b5fb0214c9a9c57f0142f674812e46ce4', name: "application_name" })))));
     }
     static get is() { return "gb-nav-bar-sidemenu"; }
     static get encapsulation() { return "shadow"; }
@@ -128,7 +128,7 @@ export class GbNavBarSidemenu {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "[\r\n    {\r\n      name: 'Hiiii',\r\n      index: 0,\r\n    },\r\n    {\r\n      name: 'There',\r\n      index: 1,\r\n    },\r\n  ]"
+                "defaultValue": "[\r\n    // {\r\n    //   name: 'Hiiii',\r\n    //   index: 0,\r\n    // },\r\n    // {\r\n    //   name: 'There',\r\n    //   index: 1,\r\n    // },\r\n  ]"
             }
         };
     }

package/dist/collection/components/gb-nav-bar-sidemenu/gb-nav-bar-sidemenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"gb-nav-bar-sidemenu.js","sourceRoot":"","sources":["../../../src/components/gb-nav-bar-sidemenu/gb-nav-bar-sidemenu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOtG,MAAM,OAAO,gBAAgB;IAL7B;QAMU,oBAAe,GAAW,EAAE,CAAC;QAC7B,oBAAe,GAAW,EAAE,CAAC;QAC7B,gBAAW,GAAW,CAAC,CAAC;QACxB,SAAI,GAAsC;YAChD;gBACE,IAAI,EAAE,OAAO;gBACb,KAAK,EAAE,CAAC;aACT;YACD;gBACE,IAAI,EAAE,OAAO;gBACb,KAAK,EAAE,CAAC;aACT;SACF,CAAC;QACO,mBAAc,GAAW,EAAE,CAAC;KAqDtC;IAjDC,KAAK,CAAC,QAAQ,CAAC,QAAgB;QAC7B,MAAM,QAAQ,GAAG,YAAY,CAAC,GAAG,QAAQ,EAAE,CAAC,CAAC;QAC7C,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,QAAQ,CAAC,CAAC;QACvC,MAAM,GAAG,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;QAClC,IAAI,CAAC,cAAc,GAAG,GAAG,CAAC;IAC5B,CAAC;IAED,gBAAgB,CAAC,KAAK;QACpB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAC5C,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IACtC,CAAC;IAED,gBAAgB;QACd,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,2BAA2B,CAAC,CAAC;QAE3E,IAAI,eAAe,EAAE,CAAC;YACpB,eAAe,CAAC,SAAS,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;QAChD,CAAC;IACH,CAAC;IAED,MAAM;QACJ,MAAM,UAAU,GAAG,YAAY,CAAC,4BAA4B,CAAC,CAAC;QAE9D,OAAO,CACL,4DAAK,KAAK,EAAC,sBAAsB;YAC/B,4DAAK,KAAK,EAAC,mBAAmB;gBAC5B,yEACE,IAAI,EAAC,IAAI,EACT,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAC,gBAAgB,kBACP,IAAI,CAAC,WAAW,EAC9B,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,GAChC,CAChB;YACN,4DAAK,KAAK,EAAC,SAAS;gBAClB,4DAAK,KAAK,EAAC,iBAAiB;oBAC1B,4DAAK,GAAG,EAAE,UAAU,EAAE,GAAG,EAAC,EAAE,GAAG,CAC3B;gBACN,4DAAK,KAAK,EAAE,kBAAkB,EAAE,SAAS,EAAE,IAAI,CAAC,cAAc,GAAQ;gBACtE,4DAAK,KAAK,EAAC,kBAAkB;oBAC3B,6DAAM,IAAI,EAAC,kBAAkB,GAAQ,CACjC,CACF,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, Prop, State, getAssetPath, h } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'gb-nav-bar-sidemenu',\r\n  styleUrl: 'gb-nav-bar-sidemenu.css',\r\n  shadow: true,\r\n})\r\nexport class GbNavBarSidemenu {\r\n  @Prop() applicationName: string = '';\r\n  @Prop() applicationIcon: string = '';\r\n  @Prop() activeIndex: number = 0;\r\n  @Prop() tabs: { name: string; index: number }[] = [\r\n    {\r\n      name: 'Hiiii',\r\n      index: 0,\r\n    },\r\n    {\r\n      name: 'There',\r\n      index: 1,\r\n    },\r\n  ];\r\n  @State() leadingIconSvg: string = '';\r\n  @Element() el: HTMLElement;\r\n  @Event() navBarItemClicked: EventEmitter<void>;\r\n\r\n  async loadIcon(iconName: string) {\r\n    const iconPath = getAssetPath(`${iconName}`);\r\n    const response = await fetch(iconPath);\r\n    const svg = await response.text();\r\n    this.leadingIconSvg = svg;\r\n  }\r\n\r\n  onTabItemClicked(event) {\r\n    this.navBarItemClicked.emit(event.detail);\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.loadIcon(this.applicationIcon);\r\n  }\r\n\r\n  componentDidLoad() {\r\n    const applicationName = this.el.querySelector('[slot=\"application_name\"]');\r\n\r\n    if (applicationName) {\r\n      applicationName.classList.add('text-lg-bold');\r\n    }\r\n  }\r\n\r\n  render() {\r\n    const patternSrc = getAssetPath(`assets/pattern_wrapper.svg`);\r\n\r\n    return (\r\n      <div class=\"top_bar_sidemenu_div\">\r\n        <div class=\"vertical_tabs_div\">\r\n          <gb-vertical-tabs\r\n            size=\"md\"\r\n            tabs={this.tabs}\r\n            type=\"button_primary\"\r\n            active-index={this.activeIndex}\r\n            onTabItemClicked={this.onTabItemClicked.bind(this)}\r\n          ></gb-vertical-tabs>\r\n        </div>\r\n        <div class=\"wrapper\">\r\n          <div class=\"wrapper_pattern\">\r\n            <img src={patternSrc} alt=\"\" />\r\n          </div>\r\n          <div class={`application_icon`} innerHTML={this.leadingIconSvg}></div>\r\n          <div class=\"application_name\">\r\n            <slot name=\"application_name\"></slot>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"gb-nav-bar-sidemenu.js","sourceRoot":"","sources":["../../../src/components/gb-nav-bar-sidemenu/gb-nav-bar-sidemenu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOtG,MAAM,OAAO,gBAAgB;IAL7B;QAMU,oBAAe,GAAW,EAAE,CAAC;QAC7B,oBAAe,GAAW,EAAE,CAAC;QAC7B,gBAAW,GAAW,CAAC,CAAC;QACxB,SAAI,GAAsC;QAChD,IAAI;QACJ,mBAAmB;QACnB,cAAc;QACd,KAAK;QACL,IAAI;QACJ,mBAAmB;QACnB,cAAc;QACd,KAAK;SACN,CAAC;QACO,mBAAc,GAAW,EAAE,CAAC;KAqDtC;IAjDC,KAAK,CAAC,QAAQ,CAAC,QAAgB;QAC7B,MAAM,QAAQ,GAAG,YAAY,CAAC,GAAG,QAAQ,EAAE,CAAC,CAAC;QAC7C,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,QAAQ,CAAC,CAAC;QACvC,MAAM,GAAG,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;QAClC,IAAI,CAAC,cAAc,GAAG,GAAG,CAAC;IAC5B,CAAC;IAED,gBAAgB,CAAC,KAAK;QACpB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAC5C,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IACtC,CAAC;IAED,gBAAgB;QACd,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,2BAA2B,CAAC,CAAC;QAE3E,IAAI,eAAe,EAAE,CAAC;YACpB,eAAe,CAAC,SAAS,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;QAChD,CAAC;IACH,CAAC;IAED,MAAM;QACJ,MAAM,UAAU,GAAG,YAAY,CAAC,4BAA4B,CAAC,CAAC;QAE9D,OAAO,CACL,4DAAK,KAAK,EAAC,sBAAsB;YAC/B,4DAAK,KAAK,EAAC,mBAAmB;gBAC5B,yEACE,IAAI,EAAC,IAAI,EACT,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAC,gBAAgB,kBACP,IAAI,CAAC,WAAW,EAC9B,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,GAChC,CAChB;YACN,4DAAK,KAAK,EAAC,SAAS;gBAClB,4DAAK,KAAK,EAAC,iBAAiB;oBAC1B,4DAAK,GAAG,EAAE,UAAU,EAAE,GAAG,EAAC,EAAE,GAAG,CAC3B;gBACN,4DAAK,KAAK,EAAE,kBAAkB,EAAE,SAAS,EAAE,IAAI,CAAC,cAAc,GAAQ;gBACtE,4DAAK,KAAK,EAAC,kBAAkB;oBAC3B,6DAAM,IAAI,EAAC,kBAAkB,GAAQ,CACjC,CACF,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, Prop, State, getAssetPath, h } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'gb-nav-bar-sidemenu',\r\n  styleUrl: 'gb-nav-bar-sidemenu.css',\r\n  shadow: true,\r\n})\r\nexport class GbNavBarSidemenu {\r\n  @Prop() applicationName: string = '';\r\n  @Prop() applicationIcon: string = '';\r\n  @Prop() activeIndex: number = 0;\r\n  @Prop() tabs: { name: string; index: number }[] = [\r\n    // {\r\n    //   name: 'Hiiii',\r\n    //   index: 0,\r\n    // },\r\n    // {\r\n    //   name: 'There',\r\n    //   index: 1,\r\n    // },\r\n  ];\r\n  @State() leadingIconSvg: string = '';\r\n  @Element() el: HTMLElement;\r\n  @Event() navBarItemClicked: EventEmitter<void>;\r\n\r\n  async loadIcon(iconName: string) {\r\n    const iconPath = getAssetPath(`${iconName}`);\r\n    const response = await fetch(iconPath);\r\n    const svg = await response.text();\r\n    this.leadingIconSvg = svg;\r\n  }\r\n\r\n  onTabItemClicked(event) {\r\n    this.navBarItemClicked.emit(event.detail);\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.loadIcon(this.applicationIcon);\r\n  }\r\n\r\n  componentDidLoad() {\r\n    const applicationName = this.el.querySelector('[slot=\"application_name\"]');\r\n\r\n    if (applicationName) {\r\n      applicationName.classList.add('text-lg-bold');\r\n    }\r\n  }\r\n\r\n  render() {\r\n    const patternSrc = getAssetPath(`assets/pattern_wrapper.svg`);\r\n\r\n    return (\r\n      <div class=\"top_bar_sidemenu_div\">\r\n        <div class=\"vertical_tabs_div\">\r\n          <gb-vertical-tabs\r\n            size=\"md\"\r\n            tabs={this.tabs}\r\n            type=\"button_primary\"\r\n            active-index={this.activeIndex}\r\n            onTabItemClicked={this.onTabItemClicked.bind(this)}\r\n          ></gb-vertical-tabs>\r\n        </div>\r\n        <div class=\"wrapper\">\r\n          <div class=\"wrapper_pattern\">\r\n            <img src={patternSrc} alt=\"\" />\r\n          </div>\r\n          <div class={`application_icon`} innerHTML={this.leadingIconSvg}></div>\r\n          <div class=\"application_name\">\r\n            <slot name=\"application_name\"></slot>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/gb-notification-content/gb-notification-content.js

@@ -7,7 +7,7 @@ export class GbNotificationContent {
     }
     render() {
         const iconSrc = getAssetPath(`${this.icon}`);
-        return (h("div", { key: '0e4971bdbd45550f2d0d1c25557c67a92e9a64ab', class: "notification_container" }, h("div", { key: 'ddd814ea177da9122483d7f103a7ee55b9430617', class: "notification_title" }, this.icon && (h("div", { key: '91fc0ee01c3a6e1ef1cff7fbe32a46e1a85d7f86', class: "icon" }, h("img", { key: '3d2321a1bcbc73d6a87ef443e171da5680e6b7ad', src: iconSrc, alt: "Icon" }))), h("label", { key: 'b40732bc9eee7a5ba583d783d25a056ee4e38a0b' }, this.label), h("span", { key: '4d3b5be45ee40e0ec353b2b140aafed617d00df1', class: "time" }, this.time)), h("div", { key: '7cc91b3f6629d7b58b99f1c4f0d8abd1fa904b72', class: "supporting_text" }, h("p", { key: 'de6a0c01290069fe9e67b4eba34f95ebcc6bf210', class: "text-sm-regular" }, this.supportingText))));
+        return (h("div", { key: 'a99ab3aa11d5f60b99adbc2c70d913eb16ff7b50', class: "notification_container" }, h("div", { key: 'b891e5c5fd3f9d5839f46aae2c92830702fa23a8', class: "notification_title" }, this.icon && (h("div", { key: 'a5e18800215e854f5a1e086df6dd9afe7a01d45a', class: "icon" }, h("img", { key: '95bd29343e2f8de7336956d870c87194b3a5d050', src: iconSrc, alt: "Icon" }))), h("label", { key: '411035edb9dc56bff91a4558e943147fc4cf345f' }, this.label), h("span", { key: '180fcf9ceb0a5bef52a52d2e88d40fef8b5a8957', class: "time" }, this.time)), h("div", { key: 'faa4b18a374fbe18f5ed47b555142d2c769624c5', class: "supporting_text" }, h("p", { key: '4a9e4fff80dabbe8eb9a654a16fea8a6fbbd67f6', class: "text-sm-regular" }, this.supportingText))));
     }
     static get is() { return "gb-notification-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-notification-pane/gb-notification-pane.js

@@ -6,36 +6,36 @@ export class GbNotificationPane {
         //   label: 'Flagged transaction',
         //   time: 'Just now',
         //   desc: 'Aisha, here is your weekly report',
-        //   icon: 'assets/arrow-right-02.svg'
+        //   icon: 'assets/arrow-right-02.svg',
         // },
         // {
         //   label: 'Flagged transaction',
         //   time: 'Just now',
         //   desc: 'Aisha, here is your weekly report',
+        //   icon: 'assets/arrow-right-02.svg',
         // },
         // {
         //   label: 'Flagged transaction',
         //   time: 'Just now',
         //   desc: 'Aisha, here is your weekly report',
+        //   icon: 'assets/arrow-right-02.svg',
         // },
         // {
         //   label: 'Flagged transaction',
         //   time: 'Just now',
         //   desc: 'Aisha, here is your weekly report',
+        //   icon: 'assets/arrow-right-02.svg',
         // },
         // {
         //   label: 'Flagged transaction',
         //   time: 'Just now',
         //   desc: 'Aisha, here is your weekly report',
+        //   icon: 'assets/arrow-right-02.svg',
         // },
         ];
-        this.icon = '';
-        this.label = '';
-        this.time = '';
-        this.supportingText = '';
     }
     markAllAsRead() {
-        this.notifications.forEach(notification => notification.remove());
+        this.notifications = [];
     }
     componentDidLoad() {
         const labelSlot = this.el.querySelector('[slot="label"]');
@@ -50,11 +50,13 @@ export class GbNotificationPane {
     render() {
         const patternSrc = getAssetPath(`assets/notification_background_pattern.svg`);
         const illustrationSrc = getAssetPath(`assets/notification_illustration.svg`);
-        return (h("div", { key: '4bfdeafaa7bf94f01dd1431cc2866cc9900f7e7b', class: "notification_pane_div" }, this.state === 'empty' && [
-            h("div", { key: 'dd85f02e421afd7a3a640de11b225963e9df25a1', class: `container` }, h("div", { key: '2bfa4288204a11f87e9bf205d820d8f425fda449', class: "frame" }, h("img", { key: '8f2e760c4adf12b238c44215ac34178b05f0ccc8', src: patternSrc, alt: "", class: "empty_state_pattern" }), h("div", { key: '87d4028451700cd80b34af6f45e952f57ea857fe', class: "empty_state" }, h("div", { key: '83d2291f005f0b315181a9a0970de9c266d3c175', class: "content" }, h("img", { key: '3237b19705d13b15ad0b1c2e9760862d1b4d19c1', src: illustrationSrc, alt: "bell-icon", class: "bell_icon" }), h("div", { key: '271e2a6d6e31e4af182b6c09ef3157d5c62cf99a', class: "text" }, h("slot", { key: '28f85740618a346d913de3b807879e6920ec5f0c', name: "label" }), h("slot", { key: '1fcb71bad5c8d8e0ff540bc1c3416eb894177924', name: "supporting_text" })))))),
-            h("div", { key: '4ccbb49bf7b98404d2b5bc1d02ecef3ef2bbdc3c', class: `button` }, h("gb-button", { key: '7a6c558f2b0adfcb0c7098278f6a252140665171', size: "sm", hierarchy: "tertiary_color", icon: "default", state: "disabled", "icon-leading": true, "icon-leading-swap": "assets/blush_brush.svg" }, h("p", { key: 'ff7ff04188c14d2ac24d5c6358d278da4e4a2e78' }, "Mark all as read"))),
-        ], this.state === 'notification_dropdown' && (h(Fragment, null, this.notifications.length > 0 ? (h("div", { class: "notification_dropdown" }, h("div", { class: `content_wrapper` }, this.notifications.map(notification => (h("gb-notification-content", { label: notification.label, time: notification.time, "supporting-text": notification.desc, icon: notification.icon })))), h("gb-button", { size: "sm", hierarchy: "tertiary_color", icon: "default", "icon-leading": true, "icon-leading-swap": "assets/blush_brush.svg" }, h("p", null, "Mark all as read")))) : [h("div", { class: `container` }, h("div", { class: "frame" }, h("img", { src: patternSrc, alt: "", class: "empty_state_pattern" }), h("div", { class: "empty_state" }, h("div", { class: "content" }, h("img", { src: illustrationSrc, alt: "bell-icon", class: "bell_icon" }), h("div", { class: "text" }, h("slot", { name: "label" }), h("slot", { name: "supporting_text" })))))), h("div", { class: `button` }, h("gb-button", { size: "sm", hierarchy: "tertiary_color", icon: "default", state: "disabled", "icon-leading": true, "icon-leading-swap": "assets/blush_brush.svg" }, h("p", null, "Mark all as read"))),
-        ]))));
+        return (h("div", { key: 'b906db345f176e71daebd46584f4549d7d0085e7', class: "notification_pane_div" }, this.state === 'empty' && [
+            h("div", { key: 'b962c1e122e0ef71ec7496340f82a1b332cabc8e', class: `container` }, h("div", { key: '5eaf77030f574bbe7907ee2e8d0174a369ea5358', class: "frame" }, h("img", { key: '59a13642e9a454904ee79547efbd6c715cdd33ee', src: patternSrc, alt: "", class: "empty_state_pattern" }), h("div", { key: '9f4d44c8b47c4ae190cbc679194dadc3f8ed5de0', class: "empty_state" }, h("div", { key: '16f254dd9ae880e127ca4245f2d7bc23a3ac006c', class: "content" }, h("img", { key: '0f20f5774e63909f1fd574c2d47245d7d246d477', src: illustrationSrc, alt: "bell-icon", class: "bell_icon" }), h("div", { key: '9289d143c0b2b9f267ff3230aa9b3db037c2201c', class: "text" }, h("slot", { key: '583cc95e3382c12ad94a74535a0d01eeca35ab70', name: "label" }), h("slot", { key: '618f0c1e0143e03cdfa1b8b8058b48a6fb105b45', name: "supporting_text" })))))),
+            h("div", { key: '29e7c7d72989c7e4bef1bb2bb98becd81e5de212', class: `button` }, h("gb-button", { key: '02ac448f57e9eba9c5146d5adc36aa3229ae80b6', size: "sm", hierarchy: "tertiary_color", icon: "default", state: "disabled", "icon-leading": true, "icon-leading-swap": "assets/blush_brush.svg" }, h("p", { key: '9e598a7e66e99c3250b8fdeb03142a1ef6705397' }, "Mark all as read"))),
+        ], this.state === 'notification_dropdown' && (h(Fragment, null, this.notifications.length > 0 ? (h("div", { class: "notification_dropdown" }, h("div", { class: `content_wrapper` }, this.notifications.map(notification => (h("gb-notification-content", { label: notification.label, time: notification.time, "supporting-text": notification.desc, icon: notification.icon })))), h("gb-button", { size: "sm", hierarchy: "tertiary_color", icon: "default", "icon-leading": true, "icon-leading-swap": "assets/blush_brush.svg", onClick: () => this.markAllAsRead() }, h("p", null, "Mark all as read")))) : ([
+            h("div", { class: `container` }, h("div", { class: "frame" }, h("img", { src: patternSrc, alt: "", class: "empty_state_pattern" }), h("div", { class: "empty_state" }, h("div", { class: "content" }, h("img", { src: illustrationSrc, alt: "bell-icon", class: "bell_icon" }), h("div", { class: "text" }, h("slot", { name: "label" }), h("slot", { name: "supporting_text" })))))),
+            h("div", { class: `button` }, h("gb-button", { size: "sm", hierarchy: "tertiary_color", icon: "default", state: "disabled", "icon-leading": true, "icon-leading-swap": "assets/blush_brush.svg" }, h("p", null, "Mark all as read"))),
+        ])))));
     }
     static get is() { return "gb-notification-pane"; }
     static get encapsulation() { return "shadow"; }
@@ -93,87 +95,15 @@ export class GbNotificationPane {
                 "type": "unknown",
                 "mutable": true,
                 "complexType": {
-                    "original": "any[]",
-                    "resolved": "any[]",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "defaultValue": "[\r\n    // {\r\n    //   label: 'Flagged transaction',\r\n    //   time: 'Just now',\r\n    //   desc: 'Aisha, here is your weekly report',\r\n    //   icon: 'assets/arrow-right-02.svg'\r\n    // },\r\n    // {\r\n    //   label: 'Flagged transaction',\r\n    //   time: 'Just now',\r\n    //   desc: 'Aisha, here is your weekly report',\r\n    // },\r\n    // {\r\n    //   label: 'Flagged transaction',\r\n    //   time: 'Just now',\r\n    //   desc: 'Aisha, here is your weekly report',\r\n    // },\r\n    // {\r\n    //   label: 'Flagged transaction',\r\n    //   time: 'Just now',\r\n    //   desc: 'Aisha, here is your weekly report',\r\n    // },\r\n    // {\r\n    //   label: 'Flagged transaction',\r\n    //   time: 'Just now',\r\n    //   desc: 'Aisha, here is your weekly report',\r\n    // },\r\n  ]"
-            },
-            "icon": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "icon",
-                "reflect": false,
-                "defaultValue": "''"
-            },
-            "label": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "label",
-                "reflect": false,
-                "defaultValue": "''"
-            },
-            "time": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "time",
-                "reflect": false,
-                "defaultValue": "''"
-            },
-            "supportingText": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
+                    "original": "Notification[]",
+                    "resolved": "Notification[]",
+                    "references": {
+                        "Notification": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::Notification"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
@@ -183,9 +113,7 @@ export class GbNotificationPane {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "supporting-text",
-                "reflect": false,
-                "defaultValue": "''"
+                "defaultValue": "[\r\n    // {\r\n    //   label: 'Flagged transaction',\r\n    //   time: 'Just now',\r\n    //   desc: 'Aisha, here is your weekly report',\r\n    //   icon: 'assets/arrow-right-02.svg',\r\n    // },\r\n    // {\r\n    //   label: 'Flagged transaction',\r\n    //   time: 'Just now',\r\n    //   desc: 'Aisha, here is your weekly report',\r\n    //   icon: 'assets/arrow-right-02.svg',\r\n    // },\r\n    // {\r\n    //   label: 'Flagged transaction',\r\n    //   time: 'Just now',\r\n    //   desc: 'Aisha, here is your weekly report',\r\n    //   icon: 'assets/arrow-right-02.svg',\r\n    // },\r\n    // {\r\n    //   label: 'Flagged transaction',\r\n    //   time: 'Just now',\r\n    //   desc: 'Aisha, here is your weekly report',\r\n    //   icon: 'assets/arrow-right-02.svg',\r\n    // },\r\n    // {\r\n    //   label: 'Flagged transaction',\r\n    //   time: 'Just now',\r\n    //   desc: 'Aisha, here is your weekly report',\r\n    //   icon: 'assets/arrow-right-02.svg',\r\n    // },\r\n  ]"
             }
         };
     }

package/dist/collection/components/gb-notification-pane/gb-notification-pane.js.map

@@ -1 +1 @@
-{"version":3,"file":"gb-notification-pane.js","sourceRoot":"","sources":["../../../src/components/gb-notification-pane/gb-notification-pane.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Prop, h, getAssetPath, Element, Fragment } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'gb-notification-pane',\r\n  styleUrl: 'gb-notification-pane.css',\r\n  shadow: true,\r\n})\r\nexport class GbNotificationPane {\r\n  @Prop() state: 'empty' | 'notification_dropdown';\r\n  @Prop({ mutable: true }) notifications: any[] = [\r\n    // {\r\n    //   label: 'Flagged transaction',\r\n    //   time: 'Just now',\r\n    //   desc: 'Aisha, here is your weekly report',\r\n    //   icon: 'assets/arrow-right-02.svg'\r\n    // },\r\n    // {\r\n    //   label: 'Flagged transaction',\r\n    //   time: 'Just now',\r\n    //   desc: 'Aisha, here is your weekly report',\r\n    // },\r\n    // {\r\n    //   label: 'Flagged transaction',\r\n    //   time: 'Just now',\r\n    //   desc: 'Aisha, here is your weekly report',\r\n    // },\r\n    // {\r\n    //   label: 'Flagged transaction',\r\n    //   time: 'Just now',\r\n    //   desc: 'Aisha, here is your weekly report',\r\n    // },\r\n    // {\r\n    //   label: 'Flagged transaction',\r\n    //   time: 'Just now',\r\n    //   desc: 'Aisha, here is your weekly report',\r\n    // },\r\n  ];\r\n  @Prop() icon: string = '';\r\n  @Prop() label: string = '';\r\n  @Prop() time: string = '';\r\n  @Prop() supportingText: string = '';\r\n  @Element() el: HTMLElement;\r\n\r\n  markAllAsRead() {\r\n    this.notifications.forEach(notification => notification.remove());\r\n  }\r\n\r\n  componentDidLoad() {\r\n    const labelSlot = this.el.querySelector('[slot=\"label\"]');\r\n    const supportingTextSlot = this.el.querySelector('[slot=\"supporting_text\"]');\r\n\r\n    if (labelSlot) {\r\n      labelSlot.classList.add('text-lg-semi-bold');\r\n    }\r\n\r\n    if (supportingTextSlot) {\r\n      supportingTextSlot.classList.add('text-sm-regular');\r\n    }\r\n  }\r\n\r\n  render() {\r\n    const patternSrc = getAssetPath(`assets/notification_background_pattern.svg`);\r\n    const illustrationSrc = getAssetPath(`assets/notification_illustration.svg`);\r\n\r\n    return (\r\n      <div class=\"notification_pane_div\">\r\n        {this.state === 'empty' && [\r\n          <div class={`container`}>\r\n            <div class=\"frame\">\r\n              <img src={patternSrc} alt=\"\" class=\"empty_state_pattern\" />\r\n              <div class=\"empty_state\">\r\n                <div class=\"content\">\r\n                  <img src={illustrationSrc} alt=\"bell-icon\" class=\"bell_icon\" />\r\n                  <div class=\"text\">\r\n                    <slot name=\"label\"></slot>\r\n                    <slot name=\"supporting_text\"></slot>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>,\r\n          <div class={`button`}>\r\n            <gb-button size=\"sm\" hierarchy=\"tertiary_color\" icon=\"default\" state=\"disabled\" icon-leading={true} icon-leading-swap=\"assets/blush_brush.svg\">\r\n              <p>Mark all as read</p>\r\n            </gb-button>\r\n          </div>,\r\n        ]}\r\n        {this.state === 'notification_dropdown' && (\r\n          <>\r\n          {this.notifications.length > 0 ? (<div class=\"notification_dropdown\">\r\n            <div class={`content_wrapper`}>\r\n              {this.notifications.map(notification => (\r\n                <gb-notification-content label={notification.label} time={notification.time} supporting-text={notification.desc} icon={notification.icon}></gb-notification-content>\r\n              ))}\r\n            </div>\r\n            <gb-button size=\"sm\" hierarchy=\"tertiary_color\" icon=\"default\" icon-leading={true} icon-leading-swap=\"assets/blush_brush.svg\">\r\n              <p>Mark all as read</p>\r\n            </gb-button>\r\n          </div>) : [<div class={`container`}>\r\n            <div class=\"frame\">\r\n              <img src={patternSrc} alt=\"\" class=\"empty_state_pattern\" />\r\n              <div class=\"empty_state\">\r\n                <div class=\"content\">\r\n                  <img src={illustrationSrc} alt=\"bell-icon\" class=\"bell_icon\" />\r\n                  <div class=\"text\">\r\n                    {/* <p class=\"label text-lg-semi-bold\">No notification</p>\r\n                    <p class=\"supporting_text text-sm-regular\">Your notification inbox is empty at the moment. Rest assured, you'll be promptly notified of any new events</p> */}\r\n                    <slot name=\"label\"></slot>\r\n                    <slot name=\"supporting_text\"></slot>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>,\r\n          <div class={`button`}>\r\n            <gb-button size=\"sm\" hierarchy=\"tertiary_color\" icon=\"default\" state=\"disabled\" icon-leading={true} icon-leading-swap=\"assets/blush_brush.svg\">\r\n              <p>Mark all as read</p>\r\n            </gb-button>\r\n          </div>,\r\n        ]}\r\n          </>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}"]}
+{"version":3,"file":"gb-notification-pane.js","sourceRoot":"","sources":["../../../src/components/gb-notification-pane/gb-notification-pane.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, getAssetPath, Element, Fragment } from '@stencil/core';\r\nimport { Notification } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-notification-pane',\r\n  styleUrl: 'gb-notification-pane.css',\r\n  shadow: true,\r\n})\r\nexport class GbNotificationPane {\r\n  @Prop() state: 'empty' | 'notification_dropdown';\r\n  @Prop({ mutable: true }) notifications: Notification[] = [\r\n    // {\r\n    //   label: 'Flagged transaction',\r\n    //   time: 'Just now',\r\n    //   desc: 'Aisha, here is your weekly report',\r\n    //   icon: 'assets/arrow-right-02.svg',\r\n    // },\r\n    // {\r\n    //   label: 'Flagged transaction',\r\n    //   time: 'Just now',\r\n    //   desc: 'Aisha, here is your weekly report',\r\n    //   icon: 'assets/arrow-right-02.svg',\r\n    // },\r\n    // {\r\n    //   label: 'Flagged transaction',\r\n    //   time: 'Just now',\r\n    //   desc: 'Aisha, here is your weekly report',\r\n    //   icon: 'assets/arrow-right-02.svg',\r\n    // },\r\n    // {\r\n    //   label: 'Flagged transaction',\r\n    //   time: 'Just now',\r\n    //   desc: 'Aisha, here is your weekly report',\r\n    //   icon: 'assets/arrow-right-02.svg',\r\n    // },\r\n    // {\r\n    //   label: 'Flagged transaction',\r\n    //   time: 'Just now',\r\n    //   desc: 'Aisha, here is your weekly report',\r\n    //   icon: 'assets/arrow-right-02.svg',\r\n    // },\r\n  ];\r\n  @Element() el: HTMLElement;\r\n\r\n  markAllAsRead() {\r\n    this.notifications = [];\r\n  }\r\n\r\n  componentDidLoad() {\r\n    const labelSlot = this.el.querySelector('[slot=\"label\"]');\r\n    const supportingTextSlot = this.el.querySelector('[slot=\"supporting_text\"]');\r\n\r\n    if (labelSlot) {\r\n      labelSlot.classList.add('text-lg-semi-bold');\r\n    }\r\n\r\n    if (supportingTextSlot) {\r\n      supportingTextSlot.classList.add('text-sm-regular');\r\n    }\r\n  }\r\n\r\n  render() {\r\n    const patternSrc = getAssetPath(`assets/notification_background_pattern.svg`);\r\n    const illustrationSrc = getAssetPath(`assets/notification_illustration.svg`);\r\n\r\n    return (\r\n      <div class=\"notification_pane_div\">\r\n        {this.state === 'empty' && [\r\n          <div class={`container`}>\r\n            <div class=\"frame\">\r\n              <img src={patternSrc} alt=\"\" class=\"empty_state_pattern\" />\r\n              <div class=\"empty_state\">\r\n                <div class=\"content\">\r\n                  <img src={illustrationSrc} alt=\"bell-icon\" class=\"bell_icon\" />\r\n                  <div class=\"text\">\r\n                    <slot name=\"label\"></slot>\r\n                    <slot name=\"supporting_text\"></slot>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>,\r\n          <div class={`button`}>\r\n            <gb-button size=\"sm\" hierarchy=\"tertiary_color\" icon=\"default\" state=\"disabled\" icon-leading={true} icon-leading-swap=\"assets/blush_brush.svg\">\r\n              <p>Mark all as read</p>\r\n            </gb-button>\r\n          </div>,\r\n        ]}\r\n        {this.state === 'notification_dropdown' && (\r\n          <>\r\n            {this.notifications.length > 0 ? (\r\n              <div class=\"notification_dropdown\">\r\n                <div class={`content_wrapper`}>\r\n                  {this.notifications.map(notification => (\r\n                    <gb-notification-content\r\n                      label={notification.label}\r\n                      time={notification.time}\r\n                      supporting-text={notification.desc}\r\n                      icon={notification.icon}\r\n                    ></gb-notification-content>\r\n                  ))}\r\n                </div>\r\n                <gb-button size=\"sm\" hierarchy=\"tertiary_color\" icon=\"default\" icon-leading={true} icon-leading-swap=\"assets/blush_brush.svg\" onClick={() => this.markAllAsRead()}>\r\n                  <p>Mark all as read</p>\r\n                </gb-button>\r\n              </div>\r\n            ) : (\r\n              [\r\n                <div class={`container`}>\r\n                  <div class=\"frame\">\r\n                    <img src={patternSrc} alt=\"\" class=\"empty_state_pattern\" />\r\n                    <div class=\"empty_state\">\r\n                      <div class=\"content\">\r\n                        <img src={illustrationSrc} alt=\"bell-icon\" class=\"bell_icon\" />\r\n                        <div class=\"text\">\r\n                          {/* <p class=\"label text-lg-semi-bold\">No notification</p>\r\n                    <p class=\"supporting_text text-sm-regular\">Your notification inbox is empty at the moment. Rest assured, you'll be promptly notified of any new events</p> */}\r\n                          <slot name=\"label\"></slot>\r\n                          <slot name=\"supporting_text\"></slot>\r\n                        </div>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </div>,\r\n                <div class={`button`}>\r\n                  <gb-button size=\"sm\" hierarchy=\"tertiary_color\" icon=\"default\" state=\"disabled\" icon-leading={true} icon-leading-swap=\"assets/blush_brush.svg\">\r\n                    <p>Mark all as read</p>\r\n                  </gb-button>\r\n                </div>,\r\n              ]\r\n            )}\r\n          </>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}