globuswebcomponents 0.4.8 → 0.4.9

package/dist/globuscomponents/p-5a5446cc.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["gbSidebarCss","GbSidebarStyle0","GbSidebar","loadIcon","iconName","iconPath","getAssetPath","response","fetch","svg","text","this","leadingIconSvg","collapseSideBar","state","expandSideBar","sideBarItemClicked","index","activeIndex","localStorage","setItem","toString","sidebarItemClicked","emit","componentDidLoad","applicationName","el","querySelector","classList","add","componentWillLoad","iconInstance","storedIndex","getItem","parseInt","render","textClass","category","patternSrc","logoSrc","blueLogoSrc","whiteLogoSrc","h","key","class","src","alt","Fragment","color","action","onClick","icon","firstItemIcon","type","label","firstItemLabel","secondItemIcon","secondItemLabel","thirdItemLabel","thirdItemIcon","fourthItemLabel","fourthItemIcon","fifthItemLabel","fifthItemIcon","showSecondCategory","sixthItemLabel","sixthItemIcon","seventhItemLabel","seventhItemIcon","eighthItemLabel","eighthItemIcon","ninthItemLabel","ninthItemIcon","tenthItemLabel","tenthItemIcon","innerHTML","name"],"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@import './../../global/spacing.css';\r\n@import './../../global/typography.css';\r\n\r\n.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.pattern img{\r\n    width: 100%;\r\n    height: auto;\r\n}\r\n\r\n.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.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.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: var(--Spacing-None, 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/* Sidebar Category Styles */\r\n.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.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}","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';\r\n  @Prop() category: GeneralBackgroundCategories;\r\n  @Prop() showSecondCategory: boolean = false;\r\n  @Prop() applicationName: 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() iconInstance: string = '';\r\n  @Prop() label: 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  @Element() el: HTMLElement;\r\n  @State() activeIndex: number = 0;\r\n  @State() leadingIconSvg: string = '';\r\n  @Event() sidebarItemClicked: EventEmitter<number>;\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  }\r\n\r\n  expandSideBar() {\r\n    if (this.state === 'collapsed') {\r\n      this.state = 'expanded';\r\n    }\r\n  }\r\n\r\n  @Method()\r\n  async sideBarItemClicked(index: number) {\r\n    this.activeIndex = index;\r\n    localStorage.setItem('activeIndex', index.toString());\r\n    this.sidebarItemClicked.emit(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    const storedIndex = localStorage.getItem('activeIndex');\r\n    if (storedIndex !== null) {\r\n      this.activeIndex = parseInt(storedIndex, 10); // Retrieve active index from localStorage\r\n    }\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      <div class={`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-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-side-bar-item>\r\n              <gb-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-side-bar-item>\r\n              {this.thirdItemLabel && (\r\n                <gb-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-side-bar-item>\r\n              )}\r\n              {this.fourthItemLabel && (\r\n                <gb-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-side-bar-item>\r\n              )}\r\n              {this.fifthItemLabel && (\r\n                <gb-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-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-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-side-bar-item>\r\n                )}\r\n                {this.seventhItemLabel && (\r\n                  <gb-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-side-bar-item>\r\n                )}\r\n                {this.eighthItemLabel && (\r\n                  <gb-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-side-bar-item>\r\n                )}\r\n                {this.ninthItemLabel && (\r\n                  <gb-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-side-bar-item>\r\n                )}\r\n                {this.tenthItemLabel && (\r\n                  <gb-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-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  }\r\n}"],"mappings":"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","ignoreList":[]}

package/dist/globuscomponents/p-db6d90c3.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as a,g as t}from"./p-e8f2fe42.js";import{S as r,B as i}from"./p-47052b60.js";const s=":root{--spacing-none:0rem;--spacing-half:0.125rem;--spacing-1:0.25rem;--spacing-2:0.5rem;--spacing-3:0.75rem;--spacing-4:1rem;--spacing-5:1.25rem;--spacing-6:1.5rem;--spacing-7:2rem;--spacing-8:2.5rem;--spacing-12:3rem;--spacing-16:4rem;--spacing-20:5rem;--spacing-24:6rem;--spacing-32:8rem;--spacing-40:10rem;--spacing-48:12rem;--spacing-56:14rem;--spacing-64:16rem;--spacing-negative-half:-0.125rem;--spacing-negative-1:-0.25rem;--spacing-negative-2:-0.5rem;--spacing-negative-3:-0.75rem;--spacing-negative-4:-1rem;--spacing-negative-5:-1.25rem;--spacing-negative-6:-1.5rem;--spacing-negative-7:-2rem;--rounded-none:0rem;--rounded-xs:0.25rem;--rounded-sm:0.5rem;--rounded-md:0.75rem;--rounded-lg:1rem;--rounded-xl:1.5rem;--rounded-2xl:2rem;--rounded-full:62.438rem}.avatar_group{display:flex;justify-content:space-between;align-items:center;width:fit-content}.avatar_group.xs{width:18.5rem}.avatar_group.sm{width:21rem}.avatar_group.md{width:22rem}.avatar{width:fit-content;border-radius:var(--rounded-full);position:relative}.avatar.xs{padding:1.55px;background-color:#FFFFFF}.avatar.sm{padding:1px;background-color:#FFFFFF}.avatar.md{padding:1.5px;background-color:#FFFFFF}.avatar.xs:not(:first-child){margin-left:-0.5rem}.avatar.sm:not(:first-child),.avatar.md:not(:first-child){margin-left:-1.01rem}::slotted(p){color:#4B5565}.image{width:100%;height:100%;background-size:cover;border-radius:var(--rounded-full)}";const n=s;const c=class{constructor(a){e(this,a);this.size=undefined;this.moreUsers=undefined;this.addMoreButton=undefined;this.text=true;this.state=r.Default;this.images=undefined}getNumberSize(){switch(this.size){case"xs":return"text-xs-semi-bold";case"sm":return"text-sm-semi-bold";case"md":return"text-md-semi-bold"}}setWeight(){switch(this.size){case"md":return i.Regular;case"sm":return i.Light;case"xs":return i.Light}}componentDidLoad(){const e=this.el.querySelector("p");if(e){e.classList.add(this.getNumberSize())}}render(){console.log(this.images);return a("div",{key:"e0d714607c3ec4f10648cdbd230c82847cc37c7c",class:`avatar_group ${this.size}`},this.images.map(((e,t)=>a("div",{class:`avatar ${this.size}`,key:t},a("gb-avatar",{size:this.size,weight:this.setWeight()},a("img",{src:e,alt:"",slot:"image"}))))),this.moreUsers&&a("div",{key:"e3c563c2896d4541bf7946cb39a53e8444b54cf6",class:`avatar ${this.size}`},a("gb-avatar",{key:"567cbe59ab61dc8c07dd455382579155d3ae349a",text:this.text,size:this.size,weight:this.setWeight()},a("slot",{key:"a7eac9ec25435a88ea2c1d94b2c0a4e57a2965af",name:"initials",slot:"initials"}))),this.addMoreButton&&a("gb-avatar-add-button",{key:"82f47e21dd506e604e2e9543e0ffebcba9629ca9",state:this.state,size:this.size}))}get el(){return t(this)}};c.style=n;export{c as gb_avatar_group};
+//# sourceMappingURL=p-db6d90c3.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["gbAvatarGroupCss","GbAvatarGroupStyle0","GbAvatarGroup","StateEnum","Default","getNumberSize","this","size","setWeight","BorderWeights","Regular","Light","componentDidLoad","slottedNumber","el","querySelector","classList","add","render","console","log","images","h","key","class","map","image","index","weight","src","alt","slot","moreUsers","text","name","addMoreButton","state"],"sources":["src/components/gb-avatar-group/gb-avatar-group.css?tag=gb-avatar-group&encapsulation=shadow","src/components/gb-avatar-group/gb-avatar-group.tsx"],"sourcesContent":["@import './../../global/spacing.css';\r\n\r\n.avatar_group{\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    width: fit-content;\r\n}\r\n\r\n.avatar_group.xs{\r\n    width: 18.5rem;\r\n}\r\n\r\n.avatar_group.sm{\r\n    width: 21rem;\r\n}\r\n\r\n.avatar_group.md{\r\n    width: 22rem;\r\n}\r\n\r\n.avatar{\r\n    width: fit-content;\r\n    border-radius: var(--rounded-full);\r\n    position: relative;\r\n}\r\n\r\n.avatar.xs{\r\n    padding: 1.55px;\r\n    background-color: #FFFFFF;\r\n}\r\n\r\n.avatar.sm{\r\n    padding: 1px;\r\n    background-color: #FFFFFF;\r\n}\r\n\r\n.avatar.md{\r\n    padding: 1.5px;\r\n    background-color: #FFFFFF;\r\n}\r\n\r\n.avatar.xs:not(:first-child){\r\n    margin-left: -0.5rem;\r\n}\r\n\r\n.avatar.sm:not(:first-child), .avatar.md:not(:first-child){\r\n    margin-left: -1.01rem;\r\n}\r\n\r\n::slotted(p){\r\n    color: #4B5565;\r\n}\r\n\r\n.image{\r\n    width: 100%;\r\n    height: 100%;\r\n    background-size: cover;\r\n    border-radius: var(--rounded-full);\r\n}","import { Component, Element, h, Prop } from \"@stencil/core\";\r\nimport { BorderWeights, GeneralSizes, StateEnum } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n  tag: 'gb-avatar-group',\r\n  styleUrl: 'gb-avatar-group.css',\r\n  shadow: true,\r\n})\r\nexport class GbAvatarGroup {\r\n  @Prop() size: GeneralSizes;\r\n  @Prop() moreUsers: boolean;\r\n  @Prop() addMoreButton: boolean;\r\n  @Prop() text: boolean = true;\r\n  @Prop() state: StateEnum = StateEnum.Default;\r\n  @Prop() images: string[];\r\n  @Element() el: HTMLElement;\r\n\r\n  getNumberSize() {\r\n    switch (this.size) {\r\n      case 'xs':\r\n        return 'text-xs-semi-bold';\r\n      case 'sm':\r\n        return 'text-sm-semi-bold';\r\n      case 'md':\r\n        return 'text-md-semi-bold';\r\n    }\r\n  }\r\n\r\n  setWeight() {\r\n    switch (this.size) {\r\n      case 'md':\r\n        return BorderWeights.Regular;\r\n      case 'sm':\r\n        return BorderWeights.Light;\r\n      case 'xs':\r\n        return BorderWeights.Light;\r\n    }\r\n  }\r\n\r\n  componentDidLoad() {\r\n    const slottedNumber = this.el.querySelector('p');\r\n\r\n    if (slottedNumber) {\r\n      slottedNumber.classList.add(this.getNumberSize());\r\n    }\r\n  }\r\n\r\n  render() {\r\n    console.log(this.images);\r\n    return (\r\n      <div class={`avatar_group ${this.size}`}>\r\n        {this.images.map((image, index) => (\r\n          <div class={`avatar ${this.size}`} key={index}>\r\n            <gb-avatar size={this.size} weight={this.setWeight()}>\r\n              <img src={image} alt=\"\" slot=\"image\" />\r\n            </gb-avatar>\r\n          </div>\r\n        ))}\r\n        {this.moreUsers && (\r\n          <div class={`avatar ${this.size}`}>\r\n            <gb-avatar text={this.text} size={this.size} weight={this.setWeight()}>\r\n              <slot name=\"initials\" slot=\"initials\"></slot>\r\n            </gb-avatar>\r\n          </div>\r\n        )}\r\n        {this.addMoreButton && <gb-avatar-add-button state={this.state} size={this.size}></gb-avatar-add-button>}\r\n      </div>\r\n    );\r\n  }\r\n}"],"mappings":"6FAAA,MAAMA,EAAmB,64CACzB,MAAAC,EAAeD,E,MCOFE,EAAa,M,6GAIA,K,WACGC,EAAUC,Q,sBAIrC,aAAAC,GACE,OAAQC,KAAKC,MACX,IAAK,KACH,MAAO,oBACT,IAAK,KACH,MAAO,oBACT,IAAK,KACH,MAAO,oB,CAIb,SAAAC,GACE,OAAQF,KAAKC,MACX,IAAK,KACH,OAAOE,EAAcC,QACvB,IAAK,KACH,OAAOD,EAAcE,MACvB,IAAK,KACH,OAAOF,EAAcE,M,CAI3B,gBAAAC,GACE,MAAMC,EAAgBP,KAAKQ,GAAGC,cAAc,KAE5C,GAAIF,EAAe,CACjBA,EAAcG,UAAUC,IAAIX,KAAKD,gB,EAIrC,MAAAa,GACEC,QAAQC,IAAId,KAAKe,QACjB,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAO,gBAAgBlB,KAAKC,QAC9BD,KAAKe,OAAOI,KAAI,CAACC,EAAOC,IACvBL,EAAA,OAAKE,MAAO,UAAUlB,KAAKC,OAAQgB,IAAKI,GACtCL,EAAA,aAAWf,KAAMD,KAAKC,KAAMqB,OAAQtB,KAAKE,aACvCc,EAAA,OAAKO,IAAKH,EAAOI,IAAI,GAAGC,KAAK,cAIlCzB,KAAK0B,WACJV,EAAA,OAAAC,IAAA,2CAAKC,MAAO,UAAUlB,KAAKC,QACzBe,EAAA,aAAAC,IAAA,2CAAWU,KAAM3B,KAAK2B,KAAM1B,KAAMD,KAAKC,KAAMqB,OAAQtB,KAAKE,aACxDc,EAAA,QAAAC,IAAA,2CAAMW,KAAK,WAAWH,KAAK,eAIhCzB,KAAK6B,eAAiBb,EAAA,wBAAAC,IAAA,2CAAsBa,MAAO9B,KAAK8B,MAAO7B,KAAMD,KAAKC,O","ignoreList":[]}