globuswebcomponents 2.5.3 → 2.5.5

package/dist/globuscomponents/p-1c42bfb6.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["gbAvatarDropdownCss","GbAvatarDropdown","constructor","hostRef","this","type","text","showRoles","roles","listGroupOne","listGroupTwo","showBorder","applyColorToInitials","color","onItemClicked","item","itemClicked","emit","emitTheme","theme","themeTabClicked","componentDidLoad","slottedInitials","el","querySelector","nameInitials","supportingTextSlot","classList","add","render","h","class","size","name","slot","showThemeTab","currentTheme","onThemeTabClicked","bind","showProfile","icon","iconSrc","label","shortcut","shortcutIcon","onClick","showLogOut","map","role","badgeColor","badgeType","badgeLabel","length","replace","toLowerCase","gbHeaderIconCss","GbHeaderIcon","showIndicator","leadingIconSvg","loadIcon","iconName","iconPath","getAssetPath","response","fetch","svg","parser","DOMParser","svgDoc","parseFromString","svgElement","documentElement","elementsWithOpacity","querySelectorAll","forEach","modifiedSvg","outerHTML","componentWillLoad","key","state","StateEnum","Default","Disabled","innerHTML","Fragment","gbHelpDropdownCss","GbHelpDropdown","onHelpItemClicked","helpItemClicked","showLogError","gbNotificationPaneCss","GbNotificationPane","notifications","markAllAsRead","labelSlot","patternSrc","illustrationSrc","src","alt","hierarchy","notification","time","desc"],"sources":["src/components/gb-avatar-dropdown/gb-avatar-dropdown.css?tag=gb-avatar-dropdown&encapsulation=shadow","src/components/gb-avatar-dropdown/gb-avatar-dropdown.tsx","src/components/gb-header-icon/gb-header-icon.css?tag=gb-header-icon&encapsulation=shadow","src/components/gb-header-icon/gb-header-icon.tsx","src/components/gb-help-dropdown/gb-help-dropdown.css?tag=gb-help-dropdown&encapsulation=shadow","src/components/gb-help-dropdown/gb-help-dropdown.tsx","src/components/gb-notification-pane/gb-notification-pane.css?tag=gb-notification-pane&encapsulation=shadow","src/components/gb-notification-pane/gb-notification-pane.tsx"],"sourcesContent":["@import '../../global/global.css';\r\n\r\n.simple-dropdown {\r\n  display: flex;\r\n  width: 15rem;\r\n  padding: 0px;\r\n  flex-direction: column;\r\n  align-items: flex-start;\r\n  gap: 0px;\r\n  border-radius: var(--rounded-sm);\r\n  border: 1px solid var(--color-border-subtler, #e3e8ef);\r\n  background: var(--color-surface, #ffffff);\r\n  box-shadow: var(--shadow-lg);\r\n}\r\n\r\n.profile {\r\n  display: flex;\r\n  align-items: flex-start;\r\n  gap: var(--spacing-none);\r\n  border-radius: var(--rounded-none);\r\n  border-bottom: 1px solid var(--color-border-subtler, #e3e8ef); \r\n  padding: 0.5rem;\r\n  flex: 1;\r\n  width: 100%;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.complex-dropdown {\r\n  width: 15rem;\r\n  display: flex;\r\n  padding: 0px;\r\n  flex-direction: column;\r\n  align-items: flex-start;\r\n  gap: 0px;\r\n  border-radius: var(--rounded-sm);\r\n  border: 1px solid var(--color-border-subtler, #e3e8ef);\r\n  background: var(--color-surface, #ffffff);\r\n  box-shadow: var(--shadow-lg);\r\n}\r\n\r\n.menu-items {\r\n  display: flex;\r\n  width: 96.5%;\r\n  padding: var(--spacing-none);\r\n  flex-direction: column;\r\n  align-items: flex-start;\r\n  gap: var(--spacing-none);\r\n}\r\n\r\n.list {\r\n  padding: var(--spacing-1) var(--spacing-none);\r\n  align-self: stretch;\r\n  border-radius: var(--rounded-none);\r\n}\r\n\r\n.list-group-one,\r\n.list-group-two,\r\n.list-group-three {\r\n  width: 100%;\r\n  padding: var(--spacing-1) var(--spacing-none);\r\n}\r\n\r\n.list-group-one,\r\n.list-group-two {\r\n  border-bottom: 1px solid var(--color-border-subtler, #e3e8ef);\r\n}\r\n\r\n.item {\r\n  width: 96.5%;\r\n}\r\n\r\n.label_group {\r\n  display: flex;\r\n  padding: 0px;\r\n  align-items: center;\r\n  gap: 12px;\r\n  align-self: stretch;\r\n  border-radius: var(--rounded-none);\r\n}\r\n\r\n.theme_tab {\r\n  width: 100%;\r\n  box-sizing: border-box;\r\n  padding: var(--spacing-3);\r\n  border-bottom: 1px solid var(--color-border-subtler, #e3e8ef);\r\n}\r\n\r\n.roles {\r\n  width: 100%;\r\n  display: flex;\r\n  padding: var(--spacing-3);\r\n  gap: var(--spacing-2);\r\n  flex-direction: column;\r\n  align-items: flex-start;\r\n  border-bottom: 1px solid var(--color-border-subtler, #e3e8ef);\r\n  color: var(--color-text, #4b5565);\r\n  box-sizing: border-box;\r\n}\r\n\r\n.badges {\r\n  width: 90%;\r\n  display: flex;\r\n  align-items: center;\r\n  align-content: center;\r\n  gap: 0.5rem var(--spacing-2);\r\n  align-self: stretch;\r\n  flex-wrap: wrap;\r\n}","import { Component, Element, Event, EventEmitter, Prop, h } from '@stencil/core';\r\nimport { ColorTypes, DropdownListGroup, DropdownRoles, ThemeTypes } from '../../models/reusableModels';\r\n@Component({\r\n  tag: 'gb-avatar-dropdown',\r\n  styleUrl: 'gb-avatar-dropdown.css',\r\n  shadow: true,\r\n})\r\nexport class GbAvatarDropdown {\r\n  @Prop() type: 'simple' | 'complex' = 'simple';\r\n  @Prop() text: boolean = false;\r\n  @Prop() showProfile: boolean;\r\n\r\n  @Prop() showThemeTab: boolean;\r\n  @Prop() showRoles: boolean = false;\r\n  @Prop() roles: DropdownRoles[] = [\r\n    // {\r\n    //   badgeLabel: 'Initiator',\r\n    //   badgeColor: 'information',\r\n    //   badgeType: 'badge_color',\r\n    // },\r\n    // {\r\n    //   badgeLabel: 'Authorizer',\r\n    //   badgeColor: 'success',\r\n    //   badgeType: 'badge_color',\r\n    // },\r\n    // {\r\n    //   badgeLabel: 'Viewer',\r\n    //   badgeColor: 'gray',\r\n    //   badgeType: 'badge_color',\r\n    // },\r\n  ];\r\n  @Prop() showLogOut: boolean;\r\n  @Prop() listGroupOne: DropdownListGroup[] = [\r\n    // { label: 'View Profile', icon: 'assets/user.svg', shortcut: 'Ctrl K + P' },\r\n    // { label: 'Documentation', icon: 'assets/book-open-02.svg', shortcut: 'Ctrl + T' },\r\n    // { label: 'Support', icon: 'assets/customer-support.svg', shortcut: 'Ctrl + C' },\r\n  ];\r\n  @Prop() listGroupTwo: DropdownListGroup[] = [\r\n    // { label: 'Configuration', icon: 'assets/user.svg', shortcut: 'Ctrl + S' },\r\n    // { label: 'Team', icon: 'assets/book-open-02.svg', shortcut: 'Ctrl K + T' },\r\n    // { label: 'Invite members', icon: 'assets/customer-support.svg', shortcut: 'Ctrl + I' },\r\n  ];\r\n  @Prop() color: ColorTypes;\r\n  @Prop() showBorder: boolean = false;\r\n  @Prop() currentTheme: ThemeTypes;\r\n  @Element() el: HTMLElement;\r\n  @Event() itemClicked: EventEmitter<string>;\r\n  @Event() themeTabClicked: EventEmitter<string>;\r\n\r\n  applyColorToInitials() {\r\n    switch (this.color) {\r\n      case 'gray':\r\n        return 'gray';\r\n      case 'blue':\r\n        return 'blue';\r\n      case 'cyan':\r\n        return 'cyan';\r\n      case 'pink':\r\n        return 'pink';\r\n      case 'purple':\r\n        return 'purple';\r\n      case 'green':\r\n        return 'green';\r\n      case 'yellow':\r\n        return 'yellow';\r\n    }\r\n  }\r\n\r\n  onItemClicked(item: string) {\r\n    this.itemClicked.emit(item);\r\n  }\r\n\r\n  emitTheme(theme) {\r\n    this.themeTabClicked.emit(theme);\r\n  }\r\n\r\n  componentDidLoad() {\r\n    const slottedInitials = this.el.querySelector('[slot=\"initials\"]');\r\n    const nameInitials = this.el.querySelector('[slot=\"name\"');\r\n    const supportingTextSlot = this.el.querySelector('[slot=\"supporting_text\"');\r\n\r\n    if (slottedInitials) {\r\n      slottedInitials.classList.add('text-md-semi-bold');\r\n      slottedInitials.classList.add(this.applyColorToInitials() || 'gray');\r\n    }\r\n\r\n    if (nameInitials) {\r\n      nameInitials.classList.add('text-sm-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    if (this.type === 'simple') {\r\n      return (\r\n        <div class=\"simple-dropdown\">\r\n          <div class=\"profile\">\r\n            <gb-avatar-label-group size=\"md\" text={true} color={this.color} show-border={this.showBorder}>\r\n              <slot name=\"name\" slot=\"name\"></slot>\r\n              <slot name=\"initials\" slot=\"initials\"></slot>\r\n              <slot name=\"supporting_text\" slot=\"supporting_text\"></slot>\r\n            </gb-avatar-label-group>\r\n          </div>\r\n          <div class=\"menu-items\">\r\n            <div class=\"list\">\r\n              {this.showThemeTab && (\r\n                <div class=\"theme_tab\">\r\n                  <gb-theme-tab current-active-tab={this.currentTheme} onThemeTabClicked={this.emitTheme.bind(this)}></gb-theme-tab>\r\n                </div>\r\n              )}\r\n              {this.showProfile && (\r\n                <gb-dropdown-items-with-shortcut\r\n                  icon\r\n                  iconSrc=\"assets/user_profile.svg\"\r\n                  label=\"View Profile\"\r\n                  shortcut\r\n                  shortcutIcon=\"K + P\"\r\n                  onClick={() => this.onItemClicked('view_profile')}\r\n                ></gb-dropdown-items-with-shortcut>\r\n              )}\r\n              {this.showLogOut && (\r\n                <gb-dropdown-items-with-shortcut\r\n                  icon\r\n                  iconSrc=\"assets/logout_button.svg\"\r\n                  label=\"Log out\"\r\n                  shortcut\r\n                  shortcutIcon=\"L\"\r\n                  onClick={() => this.onItemClicked('log_out')}\r\n                ></gb-dropdown-items-with-shortcut>\r\n              )}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      );\r\n    }\r\n\r\n    if (this.type === 'complex') {\r\n      return (\r\n        <div class=\"complex-dropdown\">\r\n          <div class=\"profile\">\r\n            <gb-avatar-label-group size=\"md\" class=\"label_group\" text={true} color={this.color}>\r\n              <slot name=\"name\" slot=\"name\"></slot>\r\n              <slot name=\"initials\" slot=\"initials\"></slot>\r\n              <slot name=\"supporting_text\" slot=\"supporting_text\"></slot>\r\n            </gb-avatar-label-group>\r\n          </div>\r\n          {this.showRoles && (\r\n            <div class=\"roles\">\r\n              <p class=\"text-sm-medium\">Available roles</p>\r\n              <div class=\"badges\">\r\n                {this.roles.map(role => (\r\n                  <gb-badge size=\"md\" color={role.badgeColor} type={role.badgeType}>\r\n                    <p>{role.badgeLabel}</p>\r\n                  </gb-badge>\r\n                ))}\r\n              </div>\r\n            </div>\r\n          )}\r\n          {this.showThemeTab && (\r\n            <div class=\"theme_tab\">\r\n              <gb-theme-tab current-active-tab={this.currentTheme} onThemeTabClicked={this.emitTheme.bind(this)}></gb-theme-tab>\r\n            </div>\r\n          )}\r\n          {this.listGroupOne.length > 0 && (\r\n            <div class=\"list-group-one\">\r\n              {this.listGroupOne.map(item => (\r\n                <div class=\"item\">\r\n                  <gb-dropdown-items-with-shortcut\r\n                    icon\r\n                    iconSrc={item.icon}\r\n                    label={item.label}\r\n                    shortcut\r\n                    shortcutIcon={item.shortcut}\r\n                    onClick={() => this.onItemClicked(item.label.replace(/\\s+/g, '_').toLowerCase())}\r\n                  ></gb-dropdown-items-with-shortcut>\r\n                </div>\r\n              ))}\r\n            </div>\r\n          )}\r\n          {this.listGroupTwo.length > 0 && (\r\n            <div class=\"list-group-two\">\r\n              {this.listGroupTwo.map(item => (\r\n                <div class=\"item\">\r\n                  <gb-dropdown-items-with-shortcut\r\n                    icon\r\n                    iconSrc={item.icon}\r\n                    label={item.label}\r\n                    shortcut\r\n                    shortcutIcon={item.shortcut}\r\n                    onClick={() => this.onItemClicked(item.label.replace(/\\s+/g, '_').toLowerCase())}\r\n                  ></gb-dropdown-items-with-shortcut>\r\n                </div>\r\n              ))}\r\n            </div>\r\n          )}\r\n          {this.showLogOut && (\r\n            <div class=\"list-group-three\">\r\n              <div class=\"item\">\r\n                <gb-dropdown-items-with-shortcut\r\n                  icon\r\n                  iconSrc=\"assets/logout_button.svg\"\r\n                  label=\"Log out\"\r\n                  shortcut\r\n                  shortcutIcon=\"Ctrl + L\"\r\n                  onClick={() => this.onItemClicked('log_out')}\r\n                ></gb-dropdown-items-with-shortcut>\r\n              </div>\r\n            </div>\r\n          )}\r\n        </div>\r\n      );\r\n    }\r\n  }\r\n}\r\n","@import './../../global/global.css';\r\n\r\n:host {\r\n    position: relative;\r\n}\r\n\r\nsvg {\r\n    width: var(--spacing-5);\r\n    height: var(--spacing-5);\r\n}\r\n\r\n.background.default{\r\n    width: var(--spacing-8);\r\n    height: var(--spacing-8);\r\n    background-color: transparent;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    border-radius: var(--rounded-sm);\r\n}\r\n\r\n.background:hover {\r\n    background-color: var(--color-background-gray-subtler, #EEF2F6);\r\n    cursor: pointer;\r\n}\r\n\r\n.background:active {\r\n    background-color: var(--color-background-gray-subtle, #E3E8EF);\r\n}\r\n\r\n.background.disabled:hover{\r\n    cursor: not-allowed;\r\n    background: none;\r\n}\r\n\r\n.red_dot {\r\n    width: 0.52rem;\r\n    height: var(--spacing-2);\r\n    border-radius: var(--rounded-full);\r\n    background-color: var(--color-icon-brandRed, #E21B2E);\r\n    border: 2px solid var(--color-surface, #FFFFFF);\r\n    position: absolute;\r\n    top: 0.6rem;\r\n    left: 1.2rem;\r\n}\r\n\r\n.icon.default path[stroke] {\r\n    stroke: var(--color-icon, #4B5565);\r\n}\r\n\r\n.icon.default path[fill] {\r\n    fill: var(--color-icon, #4B5565);\r\n}","import { Component, h, Prop, Fragment, State, getAssetPath } from '@stencil/core';\r\nimport { StateEnum } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-header-icon',\r\n  styleUrl: 'gb-header-icon.css',\r\n  shadow: true,\r\n})\r\nexport class GbHeaderIcon {\r\n  @Prop() state: StateEnum;\r\n  @Prop() showIndicator: boolean = false;\r\n  @Prop() icon: string = '';\r\n  @State() leadingIconSvg: string = '';\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\r\n    const parser = new DOMParser();\r\n    const svgDoc = parser.parseFromString(svg, 'image/svg+xml');\r\n    const svgElement = svgDoc.documentElement;\r\n\r\n    // Add `has-opacity` class to all elements that have an opacity attribute\r\n    const elementsWithOpacity = svgElement.querySelectorAll('[opacity]');\r\n    elementsWithOpacity.forEach(el => {\r\n      el.classList.add('has_opacity');\r\n    });\r\n\r\n    // Serialize and store\r\n    const modifiedSvg = svgElement.outerHTML;\r\n    // console.log(modifiedSvg)\r\n    this.leadingIconSvg = modifiedSvg;\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.loadIcon(this.icon);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class={`background ${this.state}`}>\r\n        <div class={`icon ${this.state === StateEnum.Default ? 'default' : this.state === StateEnum.Disabled ? 'disabled' : ''}`} innerHTML={this.leadingIconSvg}></div>\r\n        <>{this.showIndicator && <div class=\"red_dot\"></div>}</>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n","@import '../../global/global.css';\r\n\r\n.dropdown-container {\r\n    display: flex;\r\n    width: 13.3125rem;\r\n    padding: var(--spacing-half) 0;\r\n    flex-direction: column;\r\n    justify-content: center;\r\n    gap: var(--spacing-half);\r\n    border-radius: var(--rounded-sm);\r\n    border: 1px solid var(--color-border-subtler, #E3E8EF);\r\n    background: var(--color-surface, #FFFFFF);\r\n    box-shadow: var(--shadow-sm);\r\n}\r\n\r\n.user_guide,\r\n.bug,\r\n.log_error{\r\n    width: 96.5%;\r\n}\r\n\r\ngb-dropdown-items-with-shortcut {\r\n    width: fit-content;\r\n    max-width: 100%;\r\n}\r\n\r\ngb-dropdown-items-with-shortcut.shortcut-container {\r\n    width: 205px;\r\n}","import {Component, Event, EventEmitter, Prop, h } from '@stencil/core';\r\n\r\n@Component({\r\n    tag: 'gb-help-dropdown',\r\n    styleUrl: 'gb-help-dropdown.css',\r\n    shadow: true\r\n})\r\n\r\nexport class GbHelpDropdown {\r\n    @Prop() showLogError: boolean;\r\n    @Event() helpItemClicked: EventEmitter<string>;\r\n\r\n    onHelpItemClicked(item: string) {\r\n      this.helpItemClicked.emit(item)\r\n    }\r\n\r\n    render(){\r\n        return (\r\n          <div class=\"dropdown-container\">\r\n            <div class=\"user_guide\">\r\n              <gb-dropdown-items-with-shortcut\r\n                icon\r\n                iconSrc=\"assets/book_open.svg\"\r\n                label=\"Download user guide\"\r\n                onClick={() => this.onHelpItemClicked('download_user_guide')}\r\n              ></gb-dropdown-items-with-shortcut>\r\n            </div>\r\n            <div class=\"bug\">\r\n              <gb-dropdown-items-with-shortcut\r\n                icon\r\n                iconSrc=\"assets/bug_02.svg\"\r\n                label=\"Report a bug\"\r\n                onClick={() => this.onHelpItemClicked('report_a_bug')}\r\n              ></gb-dropdown-items-with-shortcut>\r\n            </div>\r\n            {this.showLogError && (\r\n              <div class=\"log_error\">\r\n                <gb-dropdown-items-with-shortcut\r\n                  icon\r\n                  iconSrc=\"assets/alert_02.svg\"\r\n                  label=\"Log a profile error\"\r\n                  onClick={() => this.onHelpItemClicked('log_a_profile_error')}\r\n                ></gb-dropdown-items-with-shortcut>\r\n              </div>\r\n            )}\r\n          </div>\r\n        );\r\n    }\r\n}","@import '../../global/global.css';\r\n\r\n.notification_pane_div{\r\n    display: inline-flex;\r\n    padding: var(--spacing-2);\r\n    flex-direction: column;\r\n    align-items: flex-start;\r\n    gap: var(--spacing-2);\r\n    border-radius: var(--rounded-md);\r\n    border: 1px solid var(--color-border-subtler, #E3E8EF);\r\n    background: var(--color-surface, #FFFFFF);\r\n    box-shadow: var(--shadow-md);\r\n    cursor: pointer;\r\n}\r\n\r\n.content_wrapper{\r\n    display: flex;\r\n    flex-direction: column;\r\n    width: fit-content;\r\n    height: 24.5rem;\r\n    overflow-y: auto;\r\n}\r\n\r\n::-webkit-scrollbar{\r\n    right: 0rem;\r\n    bottom: -1.53125rem;\r\n    width: 0.8rem;\r\n    margin-top: 1rem;\r\n}\r\n\r\n::-webkit-scrollbar-track{\r\n    width: 0.5rem;\r\n    padding: var(--spacing-1);\r\n    border: none;\r\n}\r\n\r\n::-webkit-scrollbar-thumb{\r\n    width: 0.5rem;\r\n    height: 11.75rem;\r\n    border: 0.25rem solid var(--color-background-card, #FFFFFF);\r\n    border-radius: 0.5rem;\r\n    background: var(--color-border-subtle, #CDD5DF);\r\n}\r\n\r\n.container{\r\n    position: relative;\r\n    display: flex;\r\n    width: 24.3125rem;\r\n    height: 24.5rem;\r\n    flex-direction: column;\r\n    justify-content: center;\r\n    align-items: center;\r\n    border-bottom: 0.5px solid var(--color-border-subtler, #E3E8EF);\r\n}\r\n\r\n.frame{\r\n    display: flex;\r\n    /* width: 24.8125rem; */\r\n    height: 26.5rem;\r\n    padding: var(--spacing-Positive-spacing-None, 0rem) var(--spacing-7);\r\n    flex-direction: column;\r\n    justify-content: center;\r\n    align-items: center;\r\n    gap: var(--spacing-Positive-spacing-2, 0.5rem);\r\n    flex-shrink: 0;\r\n}\r\n\r\n.empty_state_pattern{\r\n    position: absolute;\r\n    top: 0;\r\n    right: 0;\r\n    mix-blend-mode: multiply;\r\n    /* z-index: -1; */\r\n}\r\n\r\n.empty_state{\r\n    display: flex;\r\n    height: 15rem;\r\n    flex-direction: column;\r\n    justify-content: center;\r\n    align-items: center;\r\n    gap: var(--spacing-3);\r\n    flex-shrink: 0;\r\n    align-self: stretch;\r\n}\r\n\r\n.content{\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    gap: var(--spacing-5);\r\n    align-self: stretch;\r\n}\r\n\r\n.text{\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    text-align: center;\r\n    gap: var(--spacing-3);\r\n}\r\n\r\n.bell_icon{\r\n    z-index: 9;\r\n}\r\n\r\n.button{\r\n    width: 100%;\r\n}\r\n\r\n::slotted([slot=\"label\"]) {\r\n    color: var(--color-text-bold, #202939);\r\n}\r\n\r\n::slotted([slot=\"supporting_text\"]) {\r\n    color: var(--color-text, #4B5565);\r\n}","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"],"mappings":"sGAAA,MAAMA,EAAsB,uvpE,MCOfC,EAAgB,MAL7B,WAAAC,CAAAC,G,gGAMUC,KAAIC,KAAyB,SAC7BD,KAAIE,KAAY,MAIhBF,KAASG,UAAY,MACrBH,KAAAI,MAAyB,GAkBzBJ,KAAAK,aAAoC,GAKpCL,KAAAM,aAAoC,GAMpCN,KAAUO,WAAY,KA6K/B,CAvKC,oBAAAC,GACE,OAAQR,KAAKS,OACX,IAAK,OACH,MAAO,OACT,IAAK,OACH,MAAO,OACT,IAAK,OACH,MAAO,OACT,IAAK,OACH,MAAO,OACT,IAAK,SACH,MAAO,SACT,IAAK,QACH,MAAO,QACT,IAAK,SACH,MAAO,S,CAIb,aAAAC,CAAcC,GACZX,KAAKY,YAAYC,KAAKF,E,CAGxB,SAAAG,CAAUC,GACRf,KAAKgB,gBAAgBH,KAAKE,E,CAG5B,gBAAAE,GACE,MAAMC,EAAkBlB,KAAKmB,GAAGC,cAAc,qBAC9C,MAAMC,EAAerB,KAAKmB,GAAGC,cAAc,gBAC3C,MAAME,EAAqBtB,KAAKmB,GAAGC,cAAc,2BAEjD,GAAIF,EAAiB,CACnBA,EAAgBK,UAAUC,IAAI,qBAC9BN,EAAgBK,UAAUC,IAAIxB,KAAKQ,wBAA0B,O,CAG/D,GAAIa,EAAc,CAChBA,EAAaE,UAAUC,IAAI,oB,CAG7B,GAAIF,EAAoB,CACtBA,EAAmBC,UAAUC,IAAI,kB,EAIrC,MAAAC,GACE,GAAIzB,KAAKC,OAAS,SAAU,CAC1B,OACEyB,EAAA,OAAKC,MAAM,mBACTD,EAAK,OAAAC,MAAM,WACTD,EAAA,yBAAuBE,KAAK,KAAK1B,KAAM,KAAMO,MAAOT,KAAKS,MAAoB,cAAAT,KAAKO,YAChFmB,EAAA,QAAMG,KAAK,OAAOC,KAAK,SACvBJ,EAAA,QAAMG,KAAK,WAAWC,KAAK,aAC3BJ,EAAM,QAAAG,KAAK,kBAAkBC,KAAK,sBAGtCJ,EAAK,OAAAC,MAAM,cACTD,EAAK,OAAAC,MAAM,QACR3B,KAAK+B,cACJL,EAAK,OAAAC,MAAM,aACTD,EAAA,qCAAkC1B,KAAKgC,aAAcC,kBAAmBjC,KAAKc,UAAUoB,KAAKlC,SAG/FA,KAAKmC,aACJT,EAAA,mCACEU,KAAI,KACJC,QAAQ,0BACRC,MAAM,eACNC,SACA,KAAAC,aAAa,QACbC,QAAS,IAAMzC,KAAKU,cAAc,kBAGrCV,KAAK0C,YACJhB,EAAA,mCACEU,KACA,KAAAC,QAAQ,2BACRC,MAAM,UACNC,SAAQ,KACRC,aAAa,IACbC,QAAS,IAAMzC,KAAKU,cAAc,e,CAShD,GAAIV,KAAKC,OAAS,UAAW,CAC3B,OACEyB,EAAA,OAAKC,MAAM,oBACTD,EAAK,OAAAC,MAAM,WACTD,EAAA,yBAAuBE,KAAK,KAAKD,MAAM,cAAczB,KAAM,KAAMO,MAAOT,KAAKS,OAC3EiB,EAAA,QAAMG,KAAK,OAAOC,KAAK,SACvBJ,EAAA,QAAMG,KAAK,WAAWC,KAAK,aAC3BJ,EAAM,QAAAG,KAAK,kBAAkBC,KAAK,sBAGrC9B,KAAKG,WACJuB,EAAK,OAAAC,MAAM,SACTD,EAAG,KAAAC,MAAM,kBAAoC,mBAC7CD,EAAA,OAAKC,MAAM,UACR3B,KAAKI,MAAMuC,KAAIC,GACdlB,EAAU,YAAAE,KAAK,KAAKnB,MAAOmC,EAAKC,WAAY5C,KAAM2C,EAAKE,WACrDpB,EAAI,SAAAkB,EAAKG,iBAMlB/C,KAAK+B,cACJL,EAAK,OAAAC,MAAM,aACTD,EAAA,qCAAkC1B,KAAKgC,aAAcC,kBAAmBjC,KAAKc,UAAUoB,KAAKlC,SAG/FA,KAAKK,aAAa2C,OAAS,GAC1BtB,EAAA,OAAKC,MAAM,kBACR3B,KAAKK,aAAasC,KAAIhC,GACrBe,EAAA,OAAKC,MAAM,QACTD,EACE,mCAAAU,KAAI,KACJC,QAAS1B,EAAKyB,KACdE,MAAO3B,EAAK2B,MACZC,SAAQ,KACRC,aAAc7B,EAAK4B,SACnBE,QAAS,IAAMzC,KAAKU,cAAcC,EAAK2B,MAAMW,QAAQ,OAAQ,KAAKC,qBAM3ElD,KAAKM,aAAa0C,OAAS,GAC1BtB,EAAA,OAAKC,MAAM,kBACR3B,KAAKM,aAAaqC,KAAIhC,GACrBe,EAAA,OAAKC,MAAM,QACTD,EACE,mCAAAU,KAAI,KACJC,QAAS1B,EAAKyB,KACdE,MAAO3B,EAAK2B,MACZC,SAAQ,KACRC,aAAc7B,EAAK4B,SACnBE,QAAS,IAAMzC,KAAKU,cAAcC,EAAK2B,MAAMW,QAAQ,OAAQ,KAAKC,qBAM3ElD,KAAK0C,YACJhB,EAAK,OAAAC,MAAM,oBACTD,EAAK,OAAAC,MAAM,QACTD,EAAA,mCACEU,KAAI,KACJC,QAAQ,2BACRC,MAAM,UACNC,SACA,KAAAC,aAAa,WACbC,QAAS,IAAMzC,KAAKU,cAAc,e,sCC/MpD,MAAMyC,EAAkB,6+mE,MCQXC,EAAY,MALzB,WAAAtD,CAAAC,G,UAOUC,KAAaqD,cAAY,MACzBrD,KAAIoC,KAAW,GACdpC,KAAcsD,eAAW,EAmCnC,CAjCC,cAAMC,CAASC,GACb,MAAMC,EAAWC,EAAa,GAAGF,KACjC,MAAMG,QAAiBC,MAAMH,GAC7B,MAAMI,QAAYF,EAASzD,OAE3B,MAAM4D,EAAS,IAAIC,UACnB,MAAMC,EAASF,EAAOG,gBAAgBJ,EAAK,iBAC3C,MAAMK,EAAaF,EAAOG,gBAG1B,MAAMC,EAAsBF,EAAWG,iBAAiB,aACxDD,EAAoBE,SAAQnD,IAC1BA,EAAGI,UAAUC,IAAI,cAAc,IAIjC,MAAM+C,EAAcL,EAAWM,UAE/BxE,KAAKsD,eAAiBiB,C,CAGxB,iBAAAE,GACEzE,KAAKuD,SAASvD,KAAKoC,K,CAGrB,MAAAX,GACE,OACEC,EAAA,OAAAgD,IAAA,2CAAK/C,MAAO,cAAc3B,KAAK2E,SAC7BjD,EAAA,OAAAgD,IAAA,2CAAK/C,MAAO,QAAQ3B,KAAK2E,QAAUC,EAAUC,QAAU,UAAY7E,KAAK2E,QAAUC,EAAUE,SAAW,WAAa,KAAMC,UAAW/E,KAAKsD,iBAC1I5B,EAAAsD,EAAA,KAAGhF,KAAKqD,eAAiB3B,EAAK,OAAAgD,IAAA,2CAAA/C,MAAM,a,aC3C5C,MAAMsD,EAAoB,g+lE,MCQbC,EAAc,M,wEAIvB,iBAAAC,CAAkBxE,GAChBX,KAAKoF,gBAAgBvE,KAAKF,E,CAG5B,MAAAc,GACI,OACEC,EAAA,OAAAgD,IAAA,2CAAK/C,MAAM,sBACTD,EAAK,OAAAgD,IAAA,2CAAA/C,MAAM,cACTD,EACE,mCAAAgD,IAAA,2CAAAtC,KAAI,KACJC,QAAQ,uBACRC,MAAM,sBACNG,QAAS,IAAMzC,KAAKmF,kBAAkB,0BAG1CzD,EAAK,OAAAgD,IAAA,2CAAA/C,MAAM,OACTD,EACE,mCAAAgD,IAAA,2CAAAtC,KAAI,KACJC,QAAQ,oBACRC,MAAM,eACNG,QAAS,IAAMzC,KAAKmF,kBAAkB,mBAGzCnF,KAAKqF,cACJ3D,EAAK,OAAAgD,IAAA,2CAAA/C,MAAM,aACTD,EACE,mCAAAgD,IAAA,2CAAAtC,KACA,KAAAC,QAAQ,sBACRC,MAAM,sBACNG,QAAS,IAAMzC,KAAKmF,kBAAkB,0B,aCzCxD,MAAMG,EAAwB,86pE,MCQjBC,EAAkB,MAL/B,WAAAzF,CAAAC,G,UAO2BC,KAAAwF,cAAgC,EA8H1D,CA5FC,aAAAC,GACEzF,KAAKwF,cAAgB,E,CAGvB,gBAAAvE,GACE,MAAMyE,EAAY1F,KAAKmB,GAAGC,cAAc,kBACxC,MAAME,EAAqBtB,KAAKmB,GAAGC,cAAc,4BAEjD,GAAIsE,EAAW,CACbA,EAAUnE,UAAUC,IAAI,oB,CAG1B,GAAIF,EAAoB,CACtBA,EAAmBC,UAAUC,IAAI,kB,EAIrC,MAAAC,GACE,MAAMkE,EAAajC,EAAa,8CAChC,MAAMkC,EAAkBlC,EAAa,wCAErC,OACEhC,EAAA,OAAAgD,IAAA,2CAAK/C,MAAM,yBACR3B,KAAK2E,QAAU,SAAW,CACzBjD,EAAK,OAAAgD,IAAA,2CAAA/C,MAAO,aACVD,EAAK,OAAAgD,IAAA,2CAAA/C,MAAM,SACTD,EAAK,OAAAgD,IAAA,2CAAAmB,IAAKF,EAAYG,IAAI,GAAGnE,MAAM,wBACnCD,EAAK,OAAAgD,IAAA,2CAAA/C,MAAM,eACTD,EAAK,OAAAgD,IAAA,2CAAA/C,MAAM,WACTD,EAAK,OAAAgD,IAAA,2CAAAmB,IAAKD,EAAiBE,IAAI,YAAYnE,MAAM,cACjDD,EAAK,OAAAgD,IAAA,2CAAA/C,MAAM,QACTD,EAAM,QAAAgD,IAAA,2CAAA7C,KAAK,UACXH,EAAM,QAAAgD,IAAA,2CAAA7C,KAAK,yBAMrBH,EAAK,OAAAgD,IAAA,2CAAA/C,MAAO,UACVD,EAAA,aAAAgD,IAAA,2CAAW9C,KAAK,KAAKmE,UAAU,iBAAiB3D,KAAK,UAAUuC,MAAM,WAAyB,oBAAI,oBAAoB,0BACpHjD,EAAA,KAAAgD,IAAA,mEAIL1E,KAAK2E,QAAU,yBACdjD,EAAAsD,EAAA,KACGhF,KAAKwF,cAAcxC,OAAS,EAC3BtB,EAAA,OAAKC,MAAM,yBACTD,EAAA,OAAKC,MAAO,mBACT3B,KAAKwF,cAAc7C,KAAIqD,GACtBtE,EACE,2BAAAY,MAAO0D,EAAa1D,MACpB2D,KAAMD,EAAaC,KAAI,kBACND,EAAaE,KAC9B9D,KAAM4D,EAAa5D,UAIzBV,EAAW,aAAAE,KAAK,KAAKmE,UAAU,iBAAiB3D,KAAK,UAAS,eAAe,KAAwB,6CAAyBK,QAAS,IAAMzC,KAAKyF,iBAChJ/D,EAAA,+BAEE,CAGJA,EAAK,OAAAC,MAAO,aACVD,EAAK,OAAAC,MAAM,SACTD,EAAK,OAAAmE,IAAKF,EAAYG,IAAI,GAAGnE,MAAM,wBACnCD,EAAK,OAAAC,MAAM,eACTD,EAAK,OAAAC,MAAM,WACTD,EAAK,OAAAmE,IAAKD,EAAiBE,IAAI,YAAYnE,MAAM,cACjDD,EAAK,OAAAC,MAAM,QAGTD,EAAM,QAAAG,KAAK,UACXH,EAAM,QAAAG,KAAK,yBAMrBH,EAAK,OAAAC,MAAO,UACVD,EAAA,aAAWE,KAAK,KAAKmE,UAAU,iBAAiB3D,KAAK,UAAUuC,MAAM,WAAyB,oBAAI,oBAAoB,0BACpHjD,EAAA,iC","ignoreList":[]}