globuswebcomponents 1.8.4 → 1.8.6

package/dist/globuscomponents/p-d42708b8.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["gbFilterButtonCss","GbFilterButton","constructor","hostRef","this","iconOnly","componentDidLoad","countSlot","el","querySelector","classList","add","render","h","key","class","size","state","hierarchy","icon","type","color","name"],"sources":["src/components/gb-filter-button/gb-filter-button.css?tag=gb-filter-button&encapsulation=shadow","src/components/gb-filter-button/gb-filter-button.tsx"],"sourcesContent":["@import '../../global/global.css';\r\n\r\n.filter_button_div{\r\n    width: fit-content;\r\n    position: relative;\r\n}\r\n\r\n.badge.applied{\r\n    position: absolute;\r\n    top: 0.5rem;\r\n    right: -0.8rem;\r\n}","import { Component, Element, Prop, h } from '@stencil/core';\r\nimport { StateType } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-filter-button',\r\n  styleUrl: 'gb-filter-button.css',\r\n  shadow: true,\r\n})\r\nexport class GbFilterButton {\r\n  @Prop() state: StateType;\r\n  @Prop() iconOnly: boolean = false;\r\n  @Element() el: HTMLElement;\r\n\r\n  componentDidLoad() {\r\n    const countSlot = this.el.querySelector('[slot=\"filter_count\"]');\r\n\r\n    if(countSlot) {\r\n        countSlot.classList.add('text-xs-medium');\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class={`filter_button_div`}>\r\n        <gb-button\r\n          size=\"md\"\r\n          state=\"default\"\r\n          hierarchy=\"secondary_gray\"\r\n          icon={this.iconOnly ? 'only' : 'default'}\r\n          icon-leading={true}\r\n          icon-leading-swap=\"assets/filter-horizontal-stroke.svg\"\r\n        >\r\n          <p>Filter</p>\r\n        </gb-button>\r\n        {this.state === 'applied' && (\r\n          <gb-badge size=\"sm\" type=\"pill_color\" color=\"error\" icon=\"false\" class={`badge ${this.state}`}>\r\n            <slot name=\"filter_count\"></slot>\r\n          </gb-badge>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"6CAAA,MAAMA,EAAoB,2hoE,MCQbC,EAAc,MAL3B,WAAAC,CAAAC,G,UAOUC,KAAQC,SAAY,KAgC7B,CA7BC,gBAAAC,GACE,MAAMC,EAAYH,KAAKI,GAAGC,cAAc,yBAExC,GAAGF,EAAW,CACVA,EAAUG,UAAUC,IAAI,iB,EAI9B,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAO,qBACVF,EAAA,aAAAC,IAAA,2CACEE,KAAK,KACLC,MAAM,UACNC,UAAU,iBACVC,KAAMf,KAAKC,SAAW,OAAS,UAAS,eAC1B,KAAI,oBACA,uCAElBQ,EAAA,KAAAC,IAAA,uDAEDV,KAAKa,QAAU,WACdJ,EAAU,YAAAC,IAAA,2CAAAE,KAAK,KAAKI,KAAK,aAAaC,MAAM,QAAQF,KAAK,QAAQJ,MAAO,SAASX,KAAKa,SACpFJ,EAAM,QAAAC,IAAA,2CAAAQ,KAAK,kB","ignoreList":[]}

package/dist/globuscomponents/p-f23244d8.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["gbSidebarCss","GbSidebar","constructor","hostRef","this","state","showSecondCategory","iconInstance","firstItemIcon","secondItemIcon","thirdItemIcon","fourthItemIcon","fifthItemIcon","sixthItemIcon","seventhItemIcon","eighthItemIcon","ninthItemIcon","tenthItemIcon","firstItemLabel","secondItemLabel","thirdItemLabel","fourthItemLabel","fifthItemLabel","sixthItemLabel","seventhItemLabel","eighthItemLabel","ninthItemLabel","tenthItemLabel","complexSidebarData","Recruitment","icon","items","label","Staff","activePrimaryItem","activeSecondaryItem","leadingIconSvg","loadIcon","iconName","iconPath","getAssetPath","response","fetch","svg","text","collapseSideBar","sidebarState","emit","expandSideBar","sideBarItemClicked","index","activeIndex","simpleSidebarItemClicked","handlePrimaryClick","item","console","log","handleSecondaryClick","componentDidLoad","applicationName","el","querySelector","classList","add","componentWillLoad","render","textClass","category","patternSrc","logoSrc","blueLogoSrc","whiteLogoSrc","h","Fragment","type","key","class","src","alt","color","action","onClick","innerHTML","name","navItemStyle","Object","keys","map","primaryItem","secondaryItem"],"sources":["src/components/gb-sidebar/gb-sidebar.css?tag=gb-sidebar&encapsulation=shadow","src/components/gb-sidebar/gb-sidebar.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n\r\n/* Simple Sidebar Styles */\r\n.simple_sidebar_div{\r\n    transition: all 0.3s ease-in-out;\r\n    position: relative;\r\n    height: 100vh;\r\n}\r\n\r\n.pattern{\r\n    position: absolute;\r\n    top: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    overflow: hidden;\r\n    mix-blend-mode: multiply;\r\n}\r\n\r\n.simple_sidebar_div .pattern img\r\n.primary_side_menu .pattern img{\r\n    width: 100%;\r\n    height: auto;\r\n}\r\n\r\n.simple_sidebar_div.expanded{\r\n    display: inline-flex;\r\n    flex-direction: column;\r\n    justify-content: space-between;\r\n    width: 16.75rem;\r\n}\r\n\r\n.simple_sidebar_div.collapsed{\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    width: 5rem;\r\n}\r\n\r\n.nav{\r\n    display: flex;\r\n    width: 100%;\r\n    flex-direction: column;\r\n    gap: var(--spacing-6);\r\n}\r\n\r\n.sidebar_header.expanded{\r\n    display: flex;\r\n    padding: var(--spacing-none) var(--spacing-4) var(--spacing-none) var(--spacing-6);\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    margin-top: 1rem;\r\n}\r\n\r\n.sidebar_header.collapsed{\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: center;\r\n    margin-top: 1rem;\r\n    gap: 1.5rem;\r\n}\r\n\r\n.logo_and_name.expanded{\r\n    display: flex;\r\n    justify-content: flex-start;\r\n    align-items: center;\r\n}\r\n\r\n.logo_and_name.collapsed{\r\n    display: flex;\r\n    justify-content: center;\r\n}\r\n\r\n.collapse_button.collapsed{\r\n    display: flex;\r\n    justify-content: center;\r\n}\r\n\r\n.application_name{\r\n    display: flex;\r\n    padding: var(--spacing-6);\r\n}\r\n\r\n.wrapper{\r\n    display: flex;\r\n    padding: var(--spacing-4) var(--spacing-5) var(--spacing-5) var(--spacing-5);\r\n    flex-direction: column;\r\n    justify-content: center;\r\n    align-items: flex-start;\r\n    gap: var(--spacing-4);\r\n    align-self: stretch;\r\n    border-radius: var(--rounded-sm);\r\n    position: relative;\r\n    width: 13.75rem;\r\n    height: auto;\r\n    overflow: hidden;\r\n}\r\n\r\n.application_icon svg{\r\n    width: 2.5rem;\r\n    height: 2.5rem;\r\n}\r\n\r\n.application_icon.plain_background path[stroke] {\r\n    stroke: var(--color-icon-information-bold, #042F59);\r\n}\r\n\r\n.application_icon.plain_background path[fill] {\r\n    fill: var(--color-icon-information-bold, #042F59);\r\n}\r\n\r\n.application_icon.colored_background path[stroke] {\r\n    stroke: var(--color-icon-inverse, #FFFFFF);\r\n}\r\n\r\n.application_icon.colored_background path[fill] {\r\n    fill: var(--color-icon-inverse, #FFFFFF);\r\n}\r\n\r\n.application_name_pattern{\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    mix-blend-mode: multiply;\r\n}\r\n\r\n.application_name_pattern img{\r\n    width: 100%;\r\n}\r\n\r\n.wrapper{\r\n    width: 100%;\r\n}\r\n\r\n.wrapper.colored_background{\r\n    border: 1px solid rgba(255, 255, 255, 0.10);\r\n    background: rgba(0, 0, 0, 0.10);\r\n}\r\n\r\n.wrapper.plain_background{\r\n    background: var(--color-background-gray-subtlest, #F6F8FA);\r\n    border: 1px solid var(--color-border-subtler, #E3E8EF);\r\n}\r\n\r\n.plain_background_color{\r\n    color: var(--color-text-information-bold, #042F59);\r\n}\r\n\r\n.colored_background_color{\r\n    color: var(--color-text-inverse, #FFFFFF);\r\n}\r\n\r\n/* Simple Sidebar Category Styles */\r\n.simple_sidebar_div.plain_background{\r\n    border-right: 0.7px solid var(--color-border-subtle, #CDD5DF);\r\n    background: var(--color-surface, #FFFFFF);\r\n}\r\n\r\n.simple_sidebar_div.colored_background{\r\n    background-image: linear-gradient(180deg, #064E94 0%, #02182E 100%);\r\n    background-size: cover;\r\n}\r\n\r\n.item{\r\n    display: flex;\r\n    flex-direction: column;\r\n    width: 100%;\r\n    gap: var(--spacing-1);\r\n}\r\n\r\n/* Complex Sidebar Styles */\r\n.sidebar_and_nav{\r\n    width: fit-content;\r\n    transition: all 0.3s ease-in-out;\r\n}\r\n\r\n.complex_sidebar_div{\r\n    display: flex;\r\n    gap: 0;\r\n    width: fit-content;\r\n    height: 100vh;\r\n}\r\n\r\n.primary_side_menu{\r\n    position: relative;\r\n    width: 6rem;\r\n}\r\n\r\n.primary_side_menu.standard{\r\n    padding: var(--spacing-4) var(--spacing-none) 0.5rem var(--spacing-none);\r\n}\r\n\r\n.primary_side_menu.compact{\r\n    padding: var(--spacing-2) var(--spacing-none) 0.5rem var(--spacing-none);\r\n}\r\n\r\n.primary_side_menu_container{\r\n    width: 100%;\r\n}\r\n\r\n.nav_div{\r\n    display: flex;\r\n    height: 4.5rem;\r\n    padding: 0.5rem var(--spacing-5) 0.5rem var(--spacing-7);\r\n    align-items: center;\r\n    gap: 1.5rem;\r\n    flex: 1 0 0;\r\n    border-bottom: 1px solid var(--color-border-subtler, #E3E8EF);\r\n    background: var(--color-surface, #FFFFFF);\r\n}\r\n\r\n.logo_and_button{\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    flex: 1 0 0;\r\n}\r\n\r\n/* Complex Sidebar Category Styles */\r\n.primary_side_menu.plain_background{\r\n    border-right: 0.7px solid var(--color-border-subtle, #CDD5DF);\r\n    background: var(--color-surface, #FFFFFF);\r\n}\r\n\r\n.primary_side_menu.colored_background{\r\n    background-image: linear-gradient(180deg, #064E94 0%, #02182E 100%);\r\n    background-size: cover;\r\n}\r\n\r\n/* Complex Sidebar State Styles */\r\n.secondary_side_menu{\r\n    width: fit-content;\r\n}\r\n\r\n.secondary_side_menu.colored_background{\r\n    background: var(--color-background-information-subtlest, #E4F0FC);\r\n}\r\n\r\n.secondary_side_menu.plain_background{\r\n    background: var(--color-surface, #FFFFFF);\r\n    border-right: 0.7px solid var(--color-border-subtle, #CDD5DF);\r\n}\r\n\r\n.sside_menu{\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: var(--spacing-2);\r\n    height: 100vh;\r\n    padding: var(--spacing-4) var(--spacing-none);\r\n}","import { Component, Element, h, Prop, Fragment, State, getAssetPath, Method, Event, EventEmitter } from \"@stencil/core\";\r\nimport { GeneralBackgroundCategories } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n  tag: 'gb-sidebar',\r\n  styleUrl: 'gb-sidebar.css',\r\n  shadow: true,\r\n})\r\nexport class GbSidebar {\r\n  @Prop({ mutable: true }) state: 'expanded' | 'collapsed' = 'expanded';\r\n  @Prop() category: GeneralBackgroundCategories;\r\n  @Prop() navItemStyle: 'standard' | 'compact';\r\n  @Prop() type: 'simple' | 'complex';\r\n  @Prop() showSecondCategory: boolean = false;\r\n  @Prop() iconInstance: string = '';\r\n  @Prop() firstItemIcon: string = '';\r\n  @Prop() secondItemIcon: string = '';\r\n  @Prop() thirdItemIcon: string = '';\r\n  @Prop() fourthItemIcon: string = '';\r\n  @Prop() fifthItemIcon: string = '';\r\n  @Prop() sixthItemIcon: string = '';\r\n  @Prop() seventhItemIcon: string = '';\r\n  @Prop() eighthItemIcon: string = '';\r\n  @Prop() ninthItemIcon: string = '';\r\n  @Prop() tenthItemIcon: string = '';\r\n  @Prop() firstItemLabel: string = '';\r\n  @Prop() secondItemLabel: string = '';\r\n  @Prop() thirdItemLabel: string = '';\r\n  @Prop() fourthItemLabel: string = '';\r\n  @Prop() fifthItemLabel: string = '';\r\n  @Prop() sixthItemLabel: string = '';\r\n  @Prop() seventhItemLabel: string = '';\r\n  @Prop() eighthItemLabel: string = '';\r\n  @Prop() ninthItemLabel: string = '';\r\n  @Prop() tenthItemLabel: string = '';\r\n  @Prop() complexSidebarData: any = {\r\n    Recruitment: {\r\n      icon: 'assets/user-search-01.svg', // Icon class or path for Recruitment\r\n      items: [\r\n        { label: 'Overview', icon: 'assets/star.svg' },\r\n        { label: 'My Profile', icon: 'assets/star.svg' },\r\n        { label: 'Appraisal', icon: 'assets/star.svg' },\r\n        { label: 'Staff Management', icon: 'assets/star.svg' },\r\n        { label: 'Leave Management', icon: 'assets/star.svg' },\r\n        { label: 'Resignation Portal', icon: 'assets/star.svg' },\r\n      ],\r\n    },\r\n    Staff: {\r\n      icon: 'assets/user-account.svg',\r\n      items: [\r\n        { label: 'Staff Overview', icon: 'assets/star.svg' },\r\n        { label: 'Payroll Management', icon: 'assets/dashboard-square-03.svg' },\r\n        { label: 'Attendance', icon: 'assets/dashboard-square-03.svg' },\r\n        { label: 'New', icon: 'assets/dashboard-square-03.svg' },\r\n      ],\r\n    },\r\n  };\r\n  @Prop({ mutable: true }) activeIndex: number;\r\n  @Prop({ mutable: true }) activePrimaryItem: string = 'Staff';\r\n  @Prop({ mutable: true }) activeSecondaryItem: string = 'Attendance Tracking';\r\n  @Element() el: HTMLElement;\r\n  @State() leadingIconSvg: string = '';\r\n  @Event() simpleSidebarItemClicked: EventEmitter<number>;\r\n  @Event() secondaryItemClicked: EventEmitter<number>;\r\n  @Event() primaryItemClicked: EventEmitter<{primary: number, secondary: number}>;\r\n  @Event() sidebarState: EventEmitter<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    this.leadingIconSvg = svg;\r\n  }\r\n\r\n  collapseSideBar() {\r\n    if (this.state === 'expanded') {\r\n      this.state = 'collapsed';\r\n    }\r\n    this.sidebarState.emit('collapsed');\r\n  }\r\n\r\n  expandSideBar() {\r\n    if (this.state === 'collapsed') {\r\n      this.state = 'expanded';\r\n    }\r\n    this.sidebarState.emit('expanded');\r\n  }\r\n\r\n  @Method()\r\n  async sideBarItemClicked(index: number) {\r\n    this.activeIndex = index;\r\n    // console.log(index);\r\n    this.simpleSidebarItemClicked.emit(index);\r\n  }\r\n\r\n  handlePrimaryClick(item: string, index: number) {\r\n    this.activePrimaryItem = item;\r\n    this.activeSecondaryItem = this.complexSidebarData[item].items[0].label; // Reset to the first secondary item\r\n    console.log(index)\r\n  }\r\n\r\n  handleSecondaryClick(item: string, index: number) {\r\n    this.activeSecondaryItem = item;\r\n    console.log(index);\r\n  }\r\n\r\n  componentDidLoad() {\r\n    const applicationName = this.el.querySelector('[slot=\"application_name\"]');\r\n\r\n    applicationName.classList.add('text-lg-bold');\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.loadIcon(this.iconInstance);\r\n  }\r\n\r\n  render() {\r\n    const textClass = this.category === 'plain_background' ? 'plain_background_color' : 'colored_background_color';\r\n    const patternSrc = getAssetPath(`assets/pattern_wrapper.svg`);\r\n    const logoSrc = getAssetPath(`assets/globus_bank_logo.svg`);\r\n    const blueLogoSrc = getAssetPath(`assets/globus_bank_logo_blue.svg`);\r\n    const whiteLogoSrc = getAssetPath(`assets/globus_bank_logo_white.svg`);\r\n\r\n    return (\r\n      <>\r\n        {this.type === 'simple' && (\r\n          <div class={`simple_sidebar_div ${this.state} ${this.category}`}>\r\n            {this.category === 'colored_background' && (\r\n              <div class=\"pattern\">\r\n                <img src={patternSrc} alt=\"\" />\r\n              </div>\r\n            )}\r\n            <div class=\"nav\">\r\n              <div class={`sidebar_header ${this.state}`}>\r\n                <div class={`logo_and_name ${this.state}`}>\r\n                  {this.state === 'expanded' && <>{this.category === 'plain_background' ? <img src={blueLogoSrc} /> : <img src={whiteLogoSrc} />}</>}\r\n                  {this.state === 'collapsed' && <img src={logoSrc} alt=\"\" />}\r\n                </div>\r\n                <div class={`collapse_button ${this.state}`}>\r\n                  <gb-collapse-button\r\n                    color={this.category === 'plain_background' ? 'gray' : 'white'}\r\n                    action={this.state === 'collapsed' ? 'expand' : 'collapse'}\r\n                    onClick={() => (this.state === 'collapsed' ? this.expandSideBar() : this.collapseSideBar())}\r\n                  ></gb-collapse-button>\r\n                </div>\r\n              </div>\r\n              <div class=\"navigation\">\r\n                <div class=\"item\">\r\n                  <gb-simple-side-bar-item\r\n                    state={this.activeIndex === 0 ? 'active' : 'default'}\r\n                    icon={this.firstItemIcon}\r\n                    category={this.category}\r\n                    type={this.state === 'collapsed' ? 'icon_only' : 'full_with_label'}\r\n                    onClick={() => this.sideBarItemClicked(0)}\r\n                    label={this.firstItemLabel}\r\n                  ></gb-simple-side-bar-item>\r\n                  <gb-simple-side-bar-item\r\n                    state={this.activeIndex === 1 ? 'active' : 'default'}\r\n                    icon={this.secondItemIcon}\r\n                    category={this.category}\r\n                    type={this.state === 'collapsed' ? 'icon_only' : 'full_with_label'}\r\n                    onClick={() => this.sideBarItemClicked(1)}\r\n                    label={this.secondItemLabel}\r\n                  ></gb-simple-side-bar-item>\r\n                  {this.thirdItemLabel && (\r\n                    <gb-simple-side-bar-item\r\n                      state={this.activeIndex === 2 ? 'active' : 'default'}\r\n                      icon={this.thirdItemIcon}\r\n                      category={this.category}\r\n                      type={this.state === 'collapsed' ? 'icon_only' : 'full_with_label'}\r\n                      onClick={() => this.sideBarItemClicked(2)}\r\n                      label={this.thirdItemLabel}\r\n                    ></gb-simple-side-bar-item>\r\n                  )}\r\n                  {this.fourthItemLabel && (\r\n                    <gb-simple-side-bar-item\r\n                      state={this.activeIndex === 3 ? 'active' : 'default'}\r\n                      icon={this.fourthItemIcon}\r\n                      category={this.category}\r\n                      type={this.state === 'collapsed' ? 'icon_only' : 'full_with_label'}\r\n                      onClick={() => this.sideBarItemClicked(3)}\r\n                      label={this.fourthItemLabel}\r\n                    ></gb-simple-side-bar-item>\r\n                  )}\r\n                  {this.fifthItemLabel && (\r\n                    <gb-simple-side-bar-item\r\n                      state={this.activeIndex === 4 ? 'active' : 'default'}\r\n                      icon={this.fifthItemIcon}\r\n                      category={this.category}\r\n                      type={this.state === 'collapsed' ? 'icon_only' : 'full_with_label'}\r\n                      onClick={() => this.sideBarItemClicked(4)}\r\n                      label={this.fifthItemLabel}\r\n                    ></gb-simple-side-bar-item>\r\n                  )}\r\n                </div>\r\n              </div>\r\n              {this.showSecondCategory && (\r\n                <div class=\"navigation\">\r\n                  <div class=\"item\">\r\n                    {this.sixthItemLabel && (\r\n                      <gb-simple-side-bar-item\r\n                        state={this.activeIndex === 5 ? 'active' : 'default'}\r\n                        icon={this.sixthItemIcon}\r\n                        category={this.category}\r\n                        type={this.state === 'collapsed' ? 'icon_only' : 'full_with_label'}\r\n                        onClick={() => this.sideBarItemClicked(5)}\r\n                        label={this.sixthItemLabel}\r\n                      ></gb-simple-side-bar-item>\r\n                    )}\r\n                    {this.seventhItemLabel && (\r\n                      <gb-simple-side-bar-item\r\n                        state={this.activeIndex === 6 ? 'active' : 'default'}\r\n                        icon={this.seventhItemIcon}\r\n                        category={this.category}\r\n                        type={this.state === 'collapsed' ? 'icon_only' : 'full_with_label'}\r\n                        onClick={() => this.sideBarItemClicked(6)}\r\n                        label={this.seventhItemLabel}\r\n                      ></gb-simple-side-bar-item>\r\n                    )}\r\n                    {this.eighthItemLabel && (\r\n                      <gb-simple-side-bar-item\r\n                        state={this.activeIndex === 7 ? 'active' : 'default'}\r\n                        icon={this.eighthItemIcon}\r\n                        category={this.category}\r\n                        type={this.state === 'collapsed' ? 'icon_only' : 'full_with_label'}\r\n                        onClick={() => this.sideBarItemClicked(7)}\r\n                        label={this.eighthItemLabel}\r\n                      ></gb-simple-side-bar-item>\r\n                    )}\r\n                    {this.ninthItemLabel && (\r\n                      <gb-simple-side-bar-item\r\n                        state={this.activeIndex === 8 ? 'active' : 'default'}\r\n                        icon={this.ninthItemIcon}\r\n                        category={this.category}\r\n                        type={this.state === 'collapsed' ? 'icon_only' : 'full_with_label'}\r\n                        onClick={() => this.sideBarItemClicked(8)}\r\n                        label={this.ninthItemLabel}\r\n                      ></gb-simple-side-bar-item>\r\n                    )}\r\n                    {this.tenthItemLabel && (\r\n                      <gb-simple-side-bar-item\r\n                        state={this.activeIndex === 9 ? 'active' : 'default'}\r\n                        icon={this.tenthItemIcon}\r\n                        category={this.category}\r\n                        type={this.state === 'collapsed' ? 'icon_only' : 'full_with_label'}\r\n                        onClick={() => this.sideBarItemClicked(9)}\r\n                        label={this.tenthItemLabel}\r\n                      ></gb-simple-side-bar-item>\r\n                    )}\r\n                  </div>\r\n                </div>\r\n              )}\r\n            </div>\r\n            {this.state === 'expanded' && (\r\n              <div class=\"application_name\">\r\n                <div class={`wrapper ${this.category}`}>\r\n                  {this.category === 'plain_background' && (\r\n                    <div class=\"application_name_pattern\">\r\n                      <img src={patternSrc} alt=\"\" />\r\n                    </div>\r\n                  )}\r\n                  <div class={`application_icon ${this.category}`} innerHTML={this.leadingIconSvg}></div>\r\n                  <span class={textClass}>\r\n                    <slot name=\"application_name\"></slot>\r\n                  </span>\r\n                </div>\r\n              </div>\r\n            )}\r\n          </div>\r\n        )}\r\n        {this.type === 'complex' && (\r\n          <div class={`sidebar_and_nav ${this.state}`}>\r\n            <div class=\"nav_div\">\r\n              <div class=\"logo_and_button\">\r\n                {this.state === 'expanded' && <img src={blueLogoSrc} />}\r\n                {this.state === 'collapsed' && <img src={logoSrc} alt=\"\" />}\r\n                <gb-collapse-button\r\n                  color=\"gray\"\r\n                  action={this.state === 'collapsed' ? 'expand' : 'collapse'}\r\n                  onClick={() => (this.state === 'collapsed' ? this.expandSideBar() : this.collapseSideBar())}\r\n                ></gb-collapse-button>\r\n              </div>\r\n            </div>\r\n            <div class=\"complex_sidebar_div\">\r\n              <div class={`primary_side_menu ${this.category} ${this.navItemStyle}`}>\r\n                {this.category === 'colored_background' && (\r\n                  <div class=\"pattern\">\r\n                    <img src={patternSrc} alt=\"\" />\r\n                  </div>\r\n                )}\r\n                <div class=\"primary_side_menu_container\">\r\n                  {Object.keys(this.complexSidebarData).map((primaryItem, index) => (\r\n                    <gb-complex-primary-side-bar-item\r\n                      key={`${index}`} // Unique key\r\n                      label={primaryItem}\r\n                      category={this.category}\r\n                      item-style={this.navItemStyle}\r\n                      icon={this.complexSidebarData[primaryItem].icon}\r\n                      state={this.activePrimaryItem === primaryItem ? 'active' : 'default'}\r\n                      onClick={() => this.handlePrimaryClick(primaryItem, index)}\r\n                    ></gb-complex-primary-side-bar-item>\r\n                  ))}\r\n                </div>\r\n              </div>\r\n              <div class={`secondary_side_menu ${this.category} ${this.state}`}>\r\n                <div class=\"sside_menu\">\r\n                  {this.complexSidebarData[this.activePrimaryItem].items.map((secondaryItem, index) => (\r\n                    <gb-complex-secondary-side-bar-item\r\n                      key={`${this.activePrimaryItem}-${index}`} // Unique key\r\n                      type={this.state === 'expanded' ? 'full_with_label' : 'icon_only'}\r\n                      label={secondaryItem.label}\r\n                      category={this.category}\r\n                      icon={secondaryItem.icon}\r\n                      state={this.activeSecondaryItem === secondaryItem.label ? 'active' : 'default'}\r\n                      onClick={() => this.handleSecondaryClick(secondaryItem.label, index)}\r\n                    ></gb-complex-secondary-side-bar-item>\r\n                  ))}\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        )}\r\n      </>\r\n    );\r\n  }\r\n}"],"mappings":"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","ignoreList":[]}