globuswebcomponents 2.4.8 → 2.5.0

package/dist/globuscomponents/p-24a747ea.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["gbAvatarCss","GbAvatar","constructor","hostRef","this","placeholder","text","statusIcon","state","OnlineIndicatorStates","Online","icon","showBorder","weight","BorderWeights","Light","colorClasses","getInitialsSize","size","setWeight","Regular","VeryLight","applyColorToInitials","color","getRandomColorClass","randomIndex","Math","floor","random","length","componentDidLoad","slottedInitials","el","querySelector","classList","add","assignedColorClass","componentWillLoad","toLowerCase","render","classes","h","key","class","name","xmlns","width","height","viewBox","fill","d","gbAvatarContrastInnerBorderCss","GbAvatarContrastInnerBorder","Heavy","gbBtnCss","GbButton","destructive","iconLeading","iconTrailing","leadingIconSvg","trailingIconSvg","iconLeadingSwap","loadIcon","iconTrailingSwap","buttonSlot","getButtonTextClasses","iconName","type","iconPath","getAssetPath","response","fetch","svg","getButtonClasses","button","hierarchy","disabled","default","only","renderLeadingIcon","innerHTML","renderTrailingIcon","gbButtonCss","internalButtonState","internalIconLeadingState","internalIconTrailingState","updateButtonState","newValue","componentWillRender","oneicon","gbCheckboxCss","GbCheckbox","checked","indeterminate","supportingText","getMainTextClass","getSupportingTextClass","mainTextSlot","supportingTextSlot","onCheckboxClicked","event","checkboxClicked","emit","detail","bind","gbCheckboxBaseCss","GbCheckboxBase","renderSVG","renderCheckbox","renderCircle","renderRadio","stroke","x","y","rx","cx","cy","r","toggleCheckboxState","toggleCheckCircleState","toggleRadioButtonState","onClick","gbCheckboxGroupItemCss","GbCheckboxGroupItem","showCost","selected","showButton","buttonText","parser","DOMParser","svgDoc","parseFromString","svgElement","documentElement","elementsWithOpacity","querySelectorAll","forEach","modifiedSvg","outerHTML","onButtonClicked","buttonClicked","getLabelSizeClass","getCostSizeClass","getSupportingTextClasses","getLabelColorClasses","getCostColorClasses","componentDidUpdate","labelSlot","costSlot","renderIcon","src","slot","toggleSelection","groupItemClicked","breakpoint","checkboxType","gbStatusIndicatorCss","GbStatusIndicator","Offline","indicatorStateClass","id"],"sources":["src/components/gb-avatar/gb-avatar.css?tag=gb-avatar&encapsulation=shadow","src/components/gb-avatar/gb-avatar.tsx","src/components/gb-avatar-contrast-inner-border/gb-avatar-contrast-inner-border.css?tag=gb-avatar-contrast-inner-border&encapsulation=shadow","src/components/gb-avatar-contrast-inner-border/gb-avatar-contrast-inner-border.tsx","src/components/gb-btn/gb-btn.css?tag=gb-btn","src/components/gb-btn/gb-btn.tsx","src/components/gb-button/gb-button.css?tag=gb-button&encapsulation=shadow","src/components/gb-button/gb-button.tsx","src/components/gb-checkbox/gb-checkbox.css?tag=gb-checkbox&encapsulation=shadow","src/components/gb-checkbox/gb-checkbox.tsx","src/components/gb-checkbox-base/gb-checkbox-base.css?tag=gb-checkbox-base&encapsulation=shadow","src/components/gb-checkbox-base/gb-checkbox-base.tsx","src/components/gb-checkbox-group-item/gb-checkbox-group-item.css?tag=gb-checkbox-group-item&encapsulation=shadow","src/components/gb-checkbox-group-item/gb-checkbox-group-item.tsx","src/components/gb-status-indicator/gb-status-indicator.css?tag=gb-status-indicator&encapsulation=shadow","src/components/gb-status-indicator/gb-status-indicator.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n\r\n:host{\r\n    width: fit-content;\r\n}\r\n\r\n.avatar{\r\n    position: relative;\r\n    width: fit-content;\r\n    border-radius: var(--rounded-full);\r\n    cursor: pointer;\r\n}\r\n\r\n.inner_content.xxs{\r\n    width: 1.125rem;\r\n    height: 1.125rem;\r\n}\r\n\r\n.inner_content.xs{\r\n    width: 1.5rem;\r\n    height: 1.5rem;\r\n}\r\n\r\n.inner_content.sm{\r\n    width: 2rem;\r\n    height: 2rem;\r\n}\r\n\r\n.inner_content.md{\r\n    width: 2.5rem;\r\n    height: 2.5rem;\r\n}\r\n\r\n.inner_content.lg{\r\n    width: 3rem;\r\n    height: 3rem;\r\n}\r\n\r\n.inner_content.xl{\r\n    width: 3.5rem;\r\n    height: 3.5rem;\r\n}\r\n\r\n.inner_content.xl2{\r\n    width: 4rem;\r\n    height: 4rem;\r\n}\r\n\r\n.inner_content.profile_sm{\r\n    width: 4.5rem;\r\n    height: 4.5rem;\r\n}\r\n\r\n.inner_content.profile_md{\r\n    width: 6rem;\r\n    height: 6rem;\r\n}\r\n\r\n.inner_content.profile_lg{\r\n    width: 10rem;\r\n    height: 10rem;\r\n}\r\n\r\n::slotted(img){\r\n    width: 100%;\r\n    height: 100%;\r\n    border-radius: var(--rounded-full);\r\n}\r\n\r\n.placeholder,\r\n.initials{\r\n    width: 100%;\r\n    height: 100%;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    border-radius: var(--rounded-full);\r\n}\r\n\r\n.indicator{\r\n    position: absolute;\r\n    bottom: -0.1rem;\r\n    right: -0.03rem;\r\n}\r\n\r\n/* Size Styles */\r\n.user_avatar.xxs{\r\n    width: 0.75rem;\r\n    height: 0.75rem;\r\n}\r\n\r\n.user_avatar.xs{\r\n    width: var(--spacing-4);\r\n    height: var(--spacing-4);\r\n}\r\n\r\n.user_avatar.sm{\r\n    width: var(--spacing-5);\r\n    height: var(--spacing-5);\r\n}\r\n\r\n.user_avatar.md{\r\n    width: var(--spacing-6);\r\n    height: var(--spacing-6);\r\n}\r\n\r\n.user_avatar.lg{\r\n    width: 1.75rem;\r\n    height: 1.75rem;\r\n}\r\n\r\n.user_avatar.xl{\r\n    width: 2rem;\r\n    height: 2rem;\r\n}\r\n\r\n.user_avatar.xl2{\r\n    width: 2rem;\r\n    height: 2rem;\r\n}\r\n\r\n.user_avatar.profile_sm{\r\n    width: 2.25rem;\r\n    height: 2.25rem;\r\n}\r\n\r\n.user_avatar.profile_md{\r\n    width: 3rem;\r\n    height: 3rem;\r\n}\r\n\r\n.user_avatar.profile_lg{\r\n    width: 5rem;\r\n    height: 5rem;\r\n}\r\n\r\n/* Avatar Color Styles */\r\n.initials.gray,\r\n.placeholder.gray{\r\n    background-color: var(--color-background-gray-subtler, #EEF2F6);\r\n}\r\n\r\n.initials.gray:hover,\r\n.placeholder.gray:hover{\r\n    background-color: var(--color-background-gray-subtle, #E3E8EF);\r\n}\r\n\r\n.initials.gray:active,\r\n.placeholder.gray:active{\r\n    background-color: var(--color-background-gray-subtlest, #F6F8FA);\r\n}\r\n\r\n.initials.blue,\r\n.placeholder.blue{\r\n    background-color: var(--color-background-information-subtler, #C8E0F9);\r\n}\r\n\r\n.initials.blue:hover,\r\n.placeholder.blue:hover{\r\n    background-color: var(--color-background-information-subtle, #9AC7F4);\r\n}\r\n\r\n.initials.blue:active,\r\n.placeholder.blue:active{\r\n    background-color: var(--color-background-information-subtlest, #E4F0FC);\r\n}\r\n\r\n.initials.cyan,\r\n.placeholder.cyan{\r\n    background-color: var(--color-background-discovery-subtler, #E0F2FE);\r\n}\r\n\r\n.initials.cyan:hover,\r\n.placeholder.cyan:hover{\r\n    background-color: var(--color-background-discovery-subtle, #B9E6FE);\r\n}\r\n\r\n.initials.cyan:active,\r\n.placeholder.cyan:active{\r\n    background-color: var(--color-background-discovery-subtlest, #F0F9FF);\r\n}\r\n\r\n.initials.pink,\r\n.placeholder.pink{\r\n    background-color: var(--color-background-pink-subtler, #FCE7F6);\r\n}\r\n\r\n.initials.pink:hover,\r\n.placeholder.pink:hover{\r\n    background-color: var(--color-background-pink-subtle, #FCCEEE);\r\n}\r\n\r\n.initials.pink:active,\r\n.placeholder.pink:active{\r\n    background-color: var(--color-background-pink-subtlest, #FDF2FA);\r\n}\r\n\r\n.initials.purple,\r\n.placeholder.purple{\r\n    background-color: var(--color-background-purple-subtler, #EBE9FE);\r\n}\r\n\r\n.initials.purple:hover,\r\n.placeholder.purple:hover{\r\n    background-color: var(--color-background-purple-subtle, #D9D6FE);\r\n}\r\n\r\n.initials.purple:active,\r\n.placeholder.purple:active{\r\n    background-color: var(--color-background-purple-subtlest, #F4F3FF);\r\n}\r\n\r\n.initials.green,\r\n.placeholder.green{\r\n    background-color: var(--color-background-success-subtler, #DCFAE6);\r\n}\r\n\r\n.initials.green:hover,\r\n.placeholder.green:hover{\r\n    background-color: var(--color-background-success-subtle, #A9EFC5);\r\n}\r\n\r\n.initials.green:active,\r\n.placeholder.green:active{\r\n    background-color: var(--color-background-success-subtlest, #ECFDF3);\r\n}\r\n\r\n.initials.yellow,\r\n.placeholder.yellow{\r\n    background-color: var(--color-background-warning-subtler, #FEF0C7);\r\n}\r\n\r\n.initials.yellow:hover,\r\n.placeholder.yellow:hover{\r\n    background-color: var(--color-background-warning-subtle, #FEDF89);\r\n}\r\n\r\n.initials.yellow:active,\r\n.placeholder.yellow:active{\r\n    background-color: var(--color-background-warning-subtlest, #FFFAEB);\r\n}\r\n\r\n::slotted([slot=\"initials\"].gray){\r\n    color: var(--color-text, #4B5565);\r\n}\r\n\r\n::slotted([slot=\"initials\"].blue){\r\n    color: var(--color-text-information, #064E94);\r\n}\r\n\r\n::slotted([slot=\"initials\"].cyan){\r\n    color: var(--color-text-discovery, #0086C9);\r\n}\r\n\r\n::slotted([slot=\"initials\"].pink){\r\n    color: var(--color-text-pink, #DD2590);\r\n}\r\n\r\n::slotted([slot=\"initials\"].purple){\r\n    color: var(--color-text-purple, #6938EF);\r\n}\r\n\r\n::slotted([slot=\"initials\"].green){\r\n    color: var(--color-text-success, #079455);\r\n}\r\n\r\n::slotted([slot=\"initials\"].yellow){\r\n    color: var(--color-text-warning, #DC6803);\r\n}\r\n\r\n.user_avatar.gray path{\r\n    fill: var(--color-icon-subtle, #697586);\r\n}\r\n\r\n.user_avatar.blue path{\r\n    fill: var(--color-icon-information, #064E94);\r\n}\r\n\r\n.user_avatar.cyan path{\r\n    fill: var(--color-icon-discovery, #0086C9);\r\n}\r\n\r\n.user_avatar.pink path{\r\n    fill: var(--color-icon-pink, #DD2590);\r\n}\r\n\r\n.user_avatar.purple path{\r\n    fill: var(--color-icon-purple, #6938EF);\r\n}\r\n\r\n.user_avatar.green path{\r\n    fill: var(--color-icon-success, #079455);\r\n}\r\n\r\n.user_avatar.yellow path{\r\n    fill: var(--color-icon-warning, #DC6803);\r\n}","import { Component, Element, h, Prop, State } from \"@stencil/core\";\r\nimport { ColorTypes, BorderWeights, GeneralSizes, OnlineIndicatorStates } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-avatar',\r\n  styleUrl: 'gb-avatar.css',\r\n  shadow: true,\r\n})\r\nexport class GbAvatar {\r\n  @Prop() size: GeneralSizes;\r\n  @Prop() placeholder: boolean = false;\r\n  @Prop() text: boolean = true;\r\n  @Prop() statusIcon: string = '';\r\n  @Prop() state: OnlineIndicatorStates = OnlineIndicatorStates.Online;\r\n  @Prop() icon: 'user' = 'user';\r\n  @Prop() color: ColorTypes;\r\n  @Prop() showBorder: boolean = false;\r\n  @Element() el: HTMLElement;\r\n  @Prop() weight: BorderWeights = BorderWeights.Light;\r\n  @State() assignedColorClass: string;\r\n\r\n  private colorClasses = [\r\n    'gray', // Red\r\n    'blue', // Green\r\n    'cyan', // Blue\r\n    'green', // Pink\r\n    'purple', // Yellow\r\n    'pink', // Purple\r\n    'yellow', // Teal\r\n  ];\r\n\r\n  getInitialsSize() {\r\n    switch (this.size) {\r\n      case 'xl2':\r\n        return 'display-xs-semi-bold';\r\n      case 'xl':\r\n        return 'text-xl-semi-bold';\r\n      case 'lg':\r\n        return 'text-lg-semi-bold';\r\n      case 'md':\r\n        return 'text-md-semi-bold';\r\n      case 'sm':\r\n        return 'text-sm-semi-bold';\r\n      case 'xs':\r\n        return 'text-xs-semi-bold';\r\n      case 'xxs':\r\n        return 'text-xxs-semi-bold';\r\n    }\r\n  }\r\n\r\n  setWeight() {\r\n    if (this.showBorder) {\r\n      switch (this.size) {\r\n        case 'xl2':\r\n          return BorderWeights.Regular;\r\n        case 'xl':\r\n          return BorderWeights.Regular;\r\n        case 'lg':\r\n          return BorderWeights.Regular;\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        case 'xxs':\r\n          return BorderWeights.VeryLight;\r\n      }\r\n    }\r\n  }\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  private getRandomColorClass(): string {\r\n    const randomIndex = Math.floor(Math.random() * this.colorClasses.length);\r\n    return this.colorClasses[randomIndex];\r\n  }\r\n\r\n  componentDidLoad() {\r\n    const slottedInitials = this.el.querySelector('h1');\r\n\r\n    if (slottedInitials) {\r\n      slottedInitials.classList.add(this.getInitialsSize());\r\n      slottedInitials.classList.add(this.assignedColorClass);\r\n    }\r\n  }\r\n\r\n  componentWillLoad() {\r\n    if (!this.color) {\r\n      this.assignedColorClass = this.getRandomColorClass();\r\n    } else {\r\n      this.assignedColorClass = this.color.toLowerCase();\r\n    }\r\n  }\r\n\r\n  render() {\r\n    const classes = `${this.assignedColorClass}`;\r\n\r\n    return [\r\n      <div class=\"avatar\">\r\n        <gb-avatar-contrast-inner-border show-border={this.showBorder} size={this.size} weight={this.weight}>\r\n          <div class={`inner_content ${this.size}`}>\r\n            {this.text ? (\r\n              // ${!this.color ? 'gray' : this.color}\r\n              <div class={`initials ${classes}`}>\r\n                <slot name=\"initials\"></slot>\r\n              </div>\r\n            ) : (\r\n              <slot name=\"image\"></slot>\r\n            )}\r\n            {this.placeholder && (\r\n              <div class={`placeholder ${classes}`}>\r\n                {this.icon === 'user' && (\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" class={`user_avatar ${this.size} ${classes}`}>\r\n                    <path\r\n                      d=\"M11.8706 9.89137C11.9482 9.93754 12.044 9.99158 12.1524 10.0528C12.6276 10.3209 13.3459 10.7261 13.8381 11.2078C14.1458 11.5091 14.4383 11.9061 14.4914 12.3924C14.548 12.9097 14.3223 13.395 13.8697 13.8263C13.0887 14.5703 12.1515 15.1666 10.9393 15.1666H5.06045C3.84825 15.1666 2.91106 14.5703 2.13009 13.8263C1.67741 13.395 1.45177 12.9097 1.50831 12.3924C1.56147 11.9061 1.85391 11.5091 2.16169 11.2078C2.6538 10.7261 3.37214 10.3209 3.84735 10.0528C3.95578 9.99158 4.05158 9.93754 4.12912 9.89137C6.49848 8.48055 9.50126 8.48055 11.8706 9.89137Z\"\r\n                      fill=\"#697586\"\r\n                    />\r\n                    <path\r\n                      d=\"M4.49987 4.33325C4.49987 2.40026 6.06688 0.833252 7.99987 0.833252C9.93287 0.833252 11.4999 2.40026 11.4999 4.33325C11.4999 6.26625 9.93287 7.83325 7.99987 7.83325C6.06688 7.83325 4.49987 6.26625 4.49987 4.33325Z\"\r\n                      fill=\"#697586\"\r\n                    />\r\n                  </svg>\r\n                )}\r\n              </div>\r\n            )}\r\n          </div>\r\n        </gb-avatar-contrast-inner-border>\r\n        <gb-status-indicator class={`indicator ${this.size}`} status-icon={this.statusIcon} size={this.size} state={this.state}></gb-status-indicator>\r\n      </div>,\r\n    ];\r\n  }\r\n}","@import './../../global/global.css';\r\n\r\n.inner_border{\r\n    border-radius: var(--rounded-full);\r\n    width: fit-content;\r\n    height: fit-content;\r\n}\r\n\r\n.inner_border.very_light.no_border{\r\n    border: 0.3px solid transparent;\r\n}\r\n\r\n.inner_border.light.no_border{\r\n    border: 0.5px solid transparent;\r\n}\r\n\r\n.inner_border.regular.no_border{\r\n    border: 0.75px solid transparent;\r\n}\r\n\r\n.inner_border.heavy.no_border{\r\n    border: 1px solid transparent;\r\n}\r\n\r\n/* Weights */\r\n.inner_border.very_light{\r\n    border: 0.3px solid var(--color-blanket-subtler, rgba(33, 44, 101, 0.2));\r\n}\r\n\r\n.inner_border.light{\r\n    border: 0.5px solid var(--color-blanket-subtler, rgba(33, 44, 101, 0.2));\r\n}\r\n\r\n.inner_border.regular{\r\n    border: 0.75px solid var(--color-blanket-subtler, rgba(33, 44, 101, 0.2));\r\n}\r\n\r\n.inner_border.heavy{\r\n    border: 1px solid var(--color-blanket-subtler, rgba(33, 44, 101, 0.2));\r\n}","import { Component, h, Prop } from \"@stencil/core\";\r\nimport { BorderWeights, GeneralSizes } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n    tag: 'gb-avatar-contrast-inner-border',\r\n    styleUrl: 'gb-avatar-contrast-inner-border.css',\r\n    shadow: true\r\n})\r\n\r\nexport class GbAvatarContrastInnerBorder {\r\n    @Prop() weight: BorderWeights;\r\n    @Prop() size: GeneralSizes;\r\n    @Prop() showBorder: boolean = false;\r\n\r\n    setWeight() {\r\n        if(this.showBorder){\r\n          switch (this.size) {\r\n          case 'xl2':\r\n            return BorderWeights.Regular;\r\n          case 'xl':\r\n            return BorderWeights.Regular;\r\n          case 'lg':\r\n            return BorderWeights.Regular;\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          case 'xxs':\r\n            return BorderWeights.VeryLight;\r\n          case 'profile_lg':\r\n            return BorderWeights.Heavy;\r\n          case 'profile_md':\r\n            return BorderWeights.Heavy;\r\n          case 'profile_sm':\r\n            return BorderWeights.Regular;\r\n          }\r\n        }\r\n    }\r\n\r\n    render() {\r\n        return (\r\n          <div class={`inner_border ${this.size} ${this.weight} ${!this.showBorder ? 'no_border' : ''}`}>\r\n            <slot></slot>\r\n          </div>\r\n        );\r\n    }\r\n}","@import './../../global/global.css';\r\n\r\n/* *{box-sizing: border-box; margin: 0; padding: 0;} */\r\n:host {\r\n  --button-color: var(--primary-color);\r\n  --icon-color: var(--primary-color);\r\n}\r\n\r\nbutton {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border: none;\r\n  cursor: pointer;\r\n  border-radius: var(--rounded-sm);\r\n  width: 100%;\r\n}\r\n\r\nbutton.only{\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n\r\nbutton .icon {\r\n  display: inline-flex;\r\n  width: auto;\r\n  height: auto;\r\n}\r\n\r\nbutton .icon svg path[fill] {\r\n  fill: var(--icon-color);\r\n}\r\n\r\nbutton .icon svg path[stroke] {\r\n  stroke: var(--icon-color);\r\n}\r\n\r\nbutton .icon svg circle {\r\n  stroke: var(--icon-color);\r\n}\r\n\r\n/* Button Sizes Styles */\r\nbutton.xl2{\r\n  padding: var(--spacing-none) var(--spacing-6);\r\n  height: 3.5rem;\r\n  gap: var(--spacing-3);\r\n}\r\n\r\nbutton.xl{\r\n  padding: var(--spacing-none) var(--spacing-5);\r\n  height: 3rem;\r\n  gap: var(--spacing-2);\r\n}\r\n\r\nbutton.lg{\r\n  padding: 0.625rem 1.125rem;\r\n  height: 2.75rem;\r\n  gap: var(--spacing-2);\r\n}\r\n\r\nbutton.md{\r\n  padding: var(--spacing-none) var(--spacing-4);\r\n  height: 2.5rem;\r\n  gap: var(--spacing-2);\r\n}\r\n\r\nbutton.sm{\r\n  padding: var(--spacing-none) var(--spacing-3);\r\n  height: 2.25rem;\r\n  gap: var(--spacing-2);\r\n}\r\n\r\nbutton.only.xl2{\r\n  width: 3.5rem;\r\n  height: 3.5rem;\r\n}\r\n\r\nbutton.only.xl{\r\n  width: 3rem;\r\n  height: 3rem;\r\n}\r\n\r\nbutton.only.lg{\r\n  width: 2.75rem;\r\n  height: 2.75rem;\r\n}\r\n\r\nbutton.only.md{\r\n  width: 2.5rem;\r\n  height: 2.5rem;\r\n}\r\n\r\nbutton.only.sm{\r\n  width: 2.25rem;\r\n  height: 2.25rem;\r\n}\r\n\r\nbutton.xl2 .icon svg{\r\n  width: var(--spacing-6);\r\n  height: var(--spacing-6);\r\n}\r\n\r\nbutton.xl .icon svg,\r\nbutton.lg .icon svg,\r\nbutton.md .icon svg,\r\nbutton.sm .icon svg{\r\n  width: var(--spacing-5);\r\n  height: var(--spacing-5);\r\n}\r\n\r\n/* Hierarchy Styles */\r\nbutton.primary {\r\n  background-color: var(--color-background-brandRed, #E21B2E);\r\n  --icon-color: var(--color-icon-inverse, #FFFFFF);\r\n  color: var(--color-text-inverse, #FFFFFF);\r\n}\r\n\r\nbutton.secondary_gray {\r\n  background-color: transparent;\r\n  border: 1px solid var(--color-border, #9AA4B2);\r\n  --icon-color: var(--color-icon, #4B5565);\r\n  color: var(--color-text, #4B5565);\r\n}\r\n\r\nbutton.secondary_color {\r\n  background-color: transparent;\r\n  border: 1px solid var(--color-border-brandRed, #E21B2E);\r\n  --icon-color: var(--color-icon-brandRed, #E21B2E);\r\n  color: var(--color-text-brandRed, #E21B2E);\r\n}\r\n\r\nbutton.tertiary_gray {\r\n  background-color: transparent;\r\n  --icon-color: var(--color-icon, #4B5565);\r\n  color: var(--color-text, #4B5565);\r\n}\r\n\r\nbutton.tertiary_color {\r\n  background-color: transparent;\r\n  --icon-color: var(--color-icon-brandRed, #E21B2E);\r\n  color: var(--color-text-brandRed, #E21B2E);\r\n}\r\n\r\nbutton.link_gray {\r\n  background-color: transparent;\r\n  --icon-color: var(--color-icon, #4B5565);\r\n  color: var(--color-text, #4B5565);\r\n  height: fit-content;\r\n}\r\n\r\nbutton.link_color {\r\n  background-color: transparent;\r\n  --icon-color: var(--color-link, #075DB2);\r\n  color: var(--color-link, #075DB2);\r\n  padding: var(--spacing-none);\r\n  height: fit-content;\r\n}\r\n\r\n/* Button Destructive Styles */\r\nbutton.primary.destructive{\r\n  background-color: var(--color-background-danger, #B51726);\r\n  color: var(--color-text-inverse, #FFFFFF);\r\n  --icon-color: var(--color-icon-danger-inverse, #FFFFFF);\r\n}\r\n\r\nbutton.secondary_gray.destructive, button.secondary_color.destructive{\r\n  border: 1px solid var(--color-border-danger, #B51726);\r\n  color: var(--color-text-danger, #B51726);\r\n  --icon-color: var(--color-icon-danger, #B51726);\r\n}\r\n\r\nbutton.tertiary_gray.destructive,\r\nbutton.tertiary_color.destructive{\r\n  color: var(--color-text-danger, #B51726);\r\n  --icon-color: var(--color-icon-danger, #B51726);\r\n}\r\n\r\nbutton.link_gray.destructive, \r\nbutton.link_color.destructive{\r\n  color: var(--color-text-danger, #B51726);\r\n  --icon-color: var(--color-icon-danger, #B51726);\r\n}\r\n\r\n/* Button States Styles */\r\nbutton.primary:hover{\r\n  background-color: var(--color-background-brandRed-hover, #CC1A2A);\r\n}\r\n\r\nbutton.primary:active{\r\n  background-color: var(--color-background-brandRed-pressed, #B51726);\r\n}\r\n\r\nbutton.secondary_gray:hover{\r\n  background-color: var(--color-background-gray-subtler, #EEF2F6);\r\n}\r\n\r\nbutton.secondary_gray:active{\r\n  background-color: var(--color-background-gray-subtle, #E3E8EF);\r\n}\r\n\r\nbutton.secondary_color:hover{\r\n  background-color: var(--color-background-danger-subtlest, #FEF1F2);\r\n}\r\n\r\nbutton.secondary_color:active{\r\n  background-color: var(--color-background-danger-subtler, #FDE3E5);\r\n}\r\n\r\nbutton.tertiary_gray:hover{\r\n  background-color: var(--color-background-gray-subtler, #EEF2F6);\r\n}\r\n\r\nbutton.tertiary_gray:active{\r\n  background-color: var(--color-background-gray-subtle, #E3E8EF);\r\n}\r\n\r\nbutton.tertiary_color:hover{\r\n  background-color: var(--color-background-danger-subtlest, #FEF1F2);\r\n}\r\n\r\nbutton.tertiary_color:active{\r\n  background-color: var(--color-background-danger-subtler, #FDE3E5);\r\n}\r\n\r\nbutton.link_gray:hover,\r\nbutton.link_color:hover{\r\n  text-decoration: underline;\r\n}\r\n\r\nbutton.link_gray:active{\r\n  text-decoration: none;\r\n  color: var(--color-text-bold, #202939);\r\n}\r\n\r\nbutton.link_color:active{\r\n  text-decoration: none;\r\n  color: var(--color-link-pressed, #064E94);\r\n}\r\n\r\nbutton.primary.destructive:hover{\r\n  background-color: var(--color-background-danger-bold, #8C121D);\r\n}\r\n\r\nbutton.primary.destructive:active{\r\n  background-color: var(--color-background-brandRed-hover, #CC1A2A); /* ask Mr Gideon about this */\r\n}\r\n\r\nbutton.secondary_gray.destructive:hover, \r\nbutton.secondary_color.destructive:hover{\r\n  background-color: var(--color-background-danger-subtlest, #FEF1F2);\r\n}\r\n\r\nbutton.secondary_gray.destructive:active, \r\nbutton.secondary_color.destructive:active{\r\n  background-color: var(--color-background-danger-subtler, #FDE3E5);\r\n}\r\n\r\nbutton.tertiary_gray.destructive:hover, \r\nbutton.tertiary_color.destructive:hover{\r\n  background-color: var(--color-background-danger-subtlest, #FEF1F2);\r\n}\r\n\r\nbutton.tertiary_gray.destructive:active, \r\nbutton.tertiary_color.destructive:active{\r\n  background-color: var(--color-background-danger-subtler, #FDE3E5);\r\n}\r\n\r\nbutton.link_gray.destructive:active{\r\n  color: var(--color-text-danger-bold, #8C121D);\r\n}\r\n\r\nbutton.link_color.destructive:active{\r\n  color: var(--color-text-warning-bold, #93370D);\r\n}\r\n\r\n/* Button Disabled Styles */\r\nbutton.disabled{\r\n  cursor: not-allowed;\r\n  pointer-events: none;\r\n}\r\n\r\nbutton.primary.disabled {\r\n  background-color: var(--color-background-disabled, #F6F8FA);\r\n  --icon-color: var(--color-icon-disabled, #9aa4b2);\r\n  color: var(--color-text-disabled, #9aa4b2);\r\n}\r\n\r\nbutton.secondary_gray.disabled,\r\nbutton.secondary_color.disabled{\r\n  --icon-color: var(--color-icon-disabled, #9aa4b2);\r\n  color: var(--color-text-disabled, #9aa4b2);\r\n  border-color: var(--color-border-disabled, #E3E8EF);\r\n}\r\n\r\nbutton.tertiary_gray.disabled,\r\nbutton.tertiary_color.disabled,\r\nbutton.link_gray.disabled,\r\nbutton.link_color.disabled{\r\n  --icon-color: var(--color-icon-disabled, #9aa4b2);\r\n  color: var(--color-text-disabled, #9aa4b2);\r\n}\r\n\r\n.btn_text{\r\n  white-space: nowrap;\r\n  display: flex;\r\n  align-items: center;\r\n}","import { Component, Element, getAssetPath, h, Prop, State } from \"@stencil/core\";\r\nimport { GeneralHierarchies, GeneralSizes } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n  tag: 'gb-btn',\r\n  styleUrl: 'gb-btn.css',\r\n})\r\nexport class GbButton {\r\n  @Prop() size: GeneralSizes;\r\n  @Prop() hierarchy: GeneralHierarchies;\r\n  @Prop() icon: 'default' | 'only';\r\n  @Prop() destructive: boolean = false;\r\n  @Prop() state: 'default' | 'disabled';\r\n  @Prop() iconLeading: boolean = false;\r\n  @Prop() iconLeadingSwap: string;\r\n  @Prop() iconTrailing: boolean = false;\r\n  @Prop() iconTrailingSwap: string;\r\n  @Element() el: HTMLElement;\r\n  @State() leadingIconSvg: string = '';\r\n  @State() trailingIconSvg: string = '';\r\n\r\n  componentWillLoad() {\r\n    if (this.iconLeading && this.iconLeadingSwap) {\r\n      this.loadIcon(this.iconLeadingSwap, 'leading');\r\n    }\r\n    if (this.iconTrailing && this.iconTrailingSwap) {\r\n      this.loadIcon(this.iconTrailingSwap, 'trailing');\r\n    }\r\n\r\n    const buttonSlot = this.el.querySelector('p');\r\n\r\n    if (buttonSlot) {\r\n      buttonSlot.classList.add(this.getButtonTextClasses());\r\n      buttonSlot.classList.add('nowrap');\r\n    }\r\n  }\r\n\r\n  async loadIcon(iconName: string, type: 'leading' | 'trailing') {\r\n    const iconPath = getAssetPath(`${iconName}`);\r\n    const response = await fetch(iconPath);\r\n    const svg = await response.text();\r\n    if (type === 'leading') {\r\n      this.leadingIconSvg = svg;\r\n    } else {\r\n      this.trailingIconSvg = svg;\r\n    }\r\n  }\r\n\r\n  // Helper to apply color styles based on the button state\r\n  getButtonClasses() {\r\n    return {\r\n      button: true,\r\n      [this.size]: true,\r\n      [this.hierarchy]: true,\r\n      destructive: this.destructive,\r\n      disabled: this.state === 'disabled',\r\n      default: this.icon === 'default',\r\n      only: this.icon === 'only',\r\n      // leftandrighticon: this.iconLeading && this.iconTrailing\r\n    };\r\n  }\r\n\r\n  getButtonTextClasses() {\r\n    switch (this.size) {\r\n      case 'xl2':\r\n        return 'text-lg-semi-bold';\r\n      case 'xl':\r\n        return 'text-md-semi-bold';\r\n      case 'lg':\r\n        return 'text-md-semi-bold';\r\n      case 'md':\r\n        return 'text-sm-semi-bold';\r\n      case 'sm':\r\n        return 'text-sm-semi-bold';\r\n    }\r\n  }\r\n\r\n  renderLeadingIcon() {\r\n    return <div class={`icon left-icon ${this.size}`} innerHTML={this.leadingIconSvg}></div>;\r\n  }\r\n\r\n  renderTrailingIcon() {\r\n    return <div class=\"icon right-icon\" innerHTML={this.trailingIconSvg}></div>;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <button class={this.getButtonClasses()}>\r\n        {this.iconLeading && this.icon === 'default' && this.renderLeadingIcon()}\r\n        {this.icon === 'default' && (\r\n          <div class={`btn_text`}>\r\n            <slot></slot>\r\n          </div>\r\n        )}\r\n        {this.iconTrailing && this.renderTrailingIcon()}\r\n        {this.icon === 'only' && this.renderLeadingIcon()}\r\n      </button>\r\n    );\r\n  }\r\n}","@import './../../global/global.css';\r\n\r\n:host {\r\n  --button-color: var(--primary-color);\r\n  --icon-color: var(--primary-color);\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n\r\nbutton {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border: none;\r\n  cursor: pointer;\r\n  border-radius: var(--rounded-sm);\r\n  width: 100%;\r\n}\r\n\r\nbutton.only{\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n\r\nbutton .icon {\r\n  display: inline-flex;\r\n  width: auto;\r\n  height: auto;\r\n}\r\n\r\nbutton .icon svg path[fill] {\r\n  fill: var(--icon-color);\r\n}\r\n\r\nbutton .icon svg path[stroke] {\r\n  stroke: var(--icon-color);\r\n}\r\n\r\nbutton .icon svg circle {\r\n  stroke: var(--icon-color);\r\n}\r\n\r\n/* Button Sizes Styles */\r\nbutton.xl2{\r\n  padding: var(--spacing-none) var(--spacing-6);\r\n  height: 3.5rem;\r\n  gap: var(--spacing-3);\r\n}\r\n\r\nbutton.xl{\r\n  padding: var(--spacing-none) var(--spacing-5);\r\n  height: 3rem;\r\n  gap: var(--spacing-2);\r\n}\r\n\r\nbutton.lg{\r\n  padding: 0.625rem 1.125rem;\r\n  height: 2.75rem;\r\n  gap: var(--spacing-2);\r\n}\r\n\r\nbutton.md{\r\n  padding: var(--spacing-none) var(--spacing-4);\r\n  height: 2.5rem;\r\n  gap: var(--spacing-2);\r\n}\r\n\r\nbutton.sm{\r\n  padding: var(--spacing-none) var(--spacing-3);\r\n  height: 2.25rem;\r\n  gap: var(--spacing-2);\r\n}\r\n\r\nbutton.only.xl2{\r\n  width: 3.5rem;\r\n  height: 3.5rem;\r\n}\r\n\r\nbutton.only.xl{\r\n  width: 3rem;\r\n  height: 3rem;\r\n}\r\n\r\nbutton.only.lg{\r\n  width: 2.75rem;\r\n  height: 2.75rem;\r\n}\r\n\r\nbutton.only.md{\r\n  width: 2.5rem;\r\n  height: 2.5rem;\r\n}\r\n\r\nbutton.only.sm{\r\n  width: 2.25rem;\r\n  height: 2.25rem;\r\n}\r\n\r\nbutton.xl2 .icon svg{\r\n  width: var(--spacing-6);\r\n  height: var(--spacing-6);\r\n}\r\n\r\nbutton.xl .icon svg,\r\nbutton.lg .icon svg,\r\nbutton.md .icon svg,\r\nbutton.sm .icon svg{\r\n  width: var(--spacing-5);\r\n  height: var(--spacing-5);\r\n}\r\n\r\n/* Hierarchy Styles */\r\nbutton.primary {\r\n  background-color: var(--color-background-brandRed, #E21B2E);\r\n  --icon-color: var(--color-icon-inverse, #FFFFFF);\r\n  color: var(--color-text-inverse, #FFFFFF);\r\n}\r\n\r\nbutton.secondary_gray {\r\n  background-color: transparent;\r\n  border: 1px solid var(--color-border, #9AA4B2);\r\n  --icon-color: var(--color-icon, #4B5565);\r\n  color: var(--color-text, #4B5565);\r\n}\r\n\r\nbutton.secondary_color {\r\n  background-color: transparent;\r\n  border: 1px solid var(--color-border-brandRed, #E21B2E);\r\n  --icon-color: var(--color-icon-brandRed, #E21B2E);\r\n  color: var(--color-text-brandRed, #E21B2E);\r\n}\r\n\r\nbutton.tertiary_gray {\r\n  background-color: transparent;\r\n  --icon-color: var(--color-icon, #4B5565);\r\n  color: var(--color-text, #4B5565);\r\n}\r\n\r\nbutton.tertiary_color {\r\n  background-color: transparent;\r\n  --icon-color: var(--color-icon-brandRed, #E21B2E);\r\n  color: var(--color-text-brandRed, #E21B2E);\r\n}\r\n\r\nbutton.link_gray {\r\n  background-color: transparent;\r\n  --icon-color: var(--color-icon, #4B5565);\r\n  color: var(--color-text, #4B5565);\r\n  padding: var(--spacing-none);\r\n  height: fit-content;\r\n}\r\n\r\nbutton.link_color {\r\n  background-color: transparent;\r\n  --icon-color: var(--color-link, #075DB2);\r\n  color: var(--color-link, #075DB2);\r\n  padding: var(--spacing-none);\r\n  height: fit-content;\r\n  justify-content: flex-start;\r\n}\r\n\r\n/* Button Destructive Styles */\r\nbutton.primary.destructive{\r\n  background-color: var(--color-background-danger, #B51726);\r\n  color: var(--color-text-inverse, #FFFFFF);\r\n  --icon-color: var(--color-icon-danger-inverse, #FFFFFF);\r\n}\r\n\r\nbutton.secondary_gray.destructive, button.secondary_color.destructive{\r\n  border: 1px solid var(--color-border-danger, #B51726);\r\n  color: var(--color-text-danger, #B51726);\r\n  --icon-color: var(--color-icon-danger, #B51726);\r\n}\r\n\r\nbutton.tertiary_gray.destructive,\r\nbutton.tertiary_color.destructive{\r\n  color: var(--color-text-danger, #B51726);\r\n  --icon-color: var(--color-icon-danger, #B51726);\r\n}\r\n\r\nbutton.link_gray.destructive, \r\nbutton.link_color.destructive{\r\n  color: var(--color-text-danger, #B51726);\r\n  --icon-color: var(--color-icon-danger, #B51726);\r\n}\r\n\r\n/* Button States Styles */\r\nbutton.primary:hover{\r\n  background-color: var(--color-background-brandRed-hover, #CC1A2A);\r\n}\r\n\r\nbutton.primary:active{\r\n  background-color: var(--color-background-brandRed-pressed, #B51726);\r\n}\r\n\r\nbutton.secondary_gray:hover{\r\n  background-color: var(--color-background-gray-subtler, #EEF2F6);\r\n}\r\n\r\nbutton.secondary_gray:active{\r\n  background-color: var(--color-background-gray-subtle, #E3E8EF);\r\n}\r\n\r\nbutton.secondary_color:hover{\r\n  background-color: var(--color-background-danger-subtlest, #FEF1F2);\r\n}\r\n\r\nbutton.secondary_color:active{\r\n  background-color: var(--color-background-danger-subtler, #FDE3E5);\r\n}\r\n\r\nbutton.tertiary_gray:hover{\r\n  background-color: var(--color-background-gray-subtler, #EEF2F6);\r\n}\r\n\r\nbutton.tertiary_gray:active{\r\n  background-color: var(--color-background-gray-subtle, #E3E8EF);\r\n}\r\n\r\nbutton.tertiary_color:hover{\r\n  background-color: var(--color-background-danger-subtlest, #FEF1F2);\r\n}\r\n\r\nbutton.tertiary_color:active{\r\n  background-color: var(--color-background-danger-subtler, #FDE3E5);\r\n}\r\n\r\nbutton.link_gray:hover,\r\nbutton.link_color:hover{\r\n  text-decoration: underline;\r\n}\r\n\r\nbutton.link_gray:active{\r\n  text-decoration: none;\r\n  color: var(--color-text-bold, #202939);\r\n}\r\n\r\nbutton.link_color:active{\r\n  text-decoration: none;\r\n  color: var(--color-link-pressed, #064E94);\r\n}\r\n\r\nbutton.primary.destructive:hover{\r\n  background-color: var(--color-background-danger-bold, #8C121D);\r\n}\r\n\r\nbutton.primary.destructive:active{\r\n  background-color: var(--color-background-brandRed-hover, #CC1A2A); /* ask Mr Gideon about this */\r\n}\r\n\r\nbutton.secondary_gray.destructive:hover, \r\nbutton.secondary_color.destructive:hover{\r\n  background-color: var(--color-background-danger-subtlest, #FEF1F2);\r\n}\r\n\r\nbutton.secondary_gray.destructive:active, \r\nbutton.secondary_color.destructive:active{\r\n  background-color: var(--color-background-danger-subtler, #FDE3E5);\r\n}\r\n\r\nbutton.tertiary_gray.destructive:hover, \r\nbutton.tertiary_color.destructive:hover{\r\n  background-color: var(--color-background-danger-subtlest, #FEF1F2);\r\n}\r\n\r\nbutton.tertiary_gray.destructive:active, \r\nbutton.tertiary_color.destructive:active{\r\n  background-color: var(--color-background-danger-subtler, #FDE3E5);\r\n}\r\n\r\nbutton.link_gray.destructive:active{\r\n  color: var(--color-text-danger-bold, #8C121D);\r\n}\r\n\r\nbutton.link_color.destructive:active{\r\n  color: var(--color-text-warning-bold, #93370D);\r\n}\r\n\r\n/* Button Disabled Styles */\r\nbutton.disabled{\r\n  cursor: not-allowed;\r\n  pointer-events: none;\r\n}\r\n\r\nbutton.primary.disabled {\r\n  background-color: var(--color-background-btn-disabled, #eef2f6);\r\n  --icon-color: var(--color-icon-disabled, #9aa4b2);\r\n  color: var(--color-text-disabled, #9aa4b2);\r\n}\r\n\r\nbutton.secondary_gray.disabled,\r\nbutton.secondary_color.disabled{\r\n  --icon-color: var(--color-icon-disabled, #9aa4b2);\r\n  color: var(--color-text-disabled, #9aa4b2);\r\n  border-color: var(--color-border-disabled, #E3E8EF);\r\n}\r\n\r\nbutton.tertiary_gray.disabled,\r\nbutton.tertiary_color.disabled,\r\nbutton.link_gray.disabled,\r\nbutton.link_color.disabled{\r\n  --icon-color: var(--color-icon-disabled, #9aa4b2);\r\n  color: var(--color-text-disabled, #9aa4b2);\r\n}\r\n\r\n.btn_text{\r\n  white-space: nowrap;\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n\r\n.btn_text::first-letter{\r\n  text-transform: uppercase;\r\n}","import { Component, Element, getAssetPath, h, Prop, State, Watch } from '@stencil/core';\r\nimport { GeneralHierarchies, GeneralSizes, StateType } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-button',\r\n  styleUrl: 'gb-button.css',\r\n  shadow: true,\r\n  assetsDirs: [''],\r\n})\r\nexport class GbButton {\r\n  @Prop() size!: GeneralSizes;\r\n  @Prop() hierarchy!: GeneralHierarchies;\r\n  @Prop() icon!: 'default' | 'only';\r\n  @Prop() destructive: boolean = false;\r\n  @Prop() state: StateType;\r\n  @Prop() iconLeading: boolean = false;\r\n  @Prop() iconLeadingSwap: string;\r\n  @Prop() iconTrailing: boolean = false;\r\n  @Prop() iconTrailingSwap: string;\r\n  @Element() el: HTMLElement;\r\n  @State() leadingIconSvg: string = '';\r\n  @State() trailingIconSvg: string = '';\r\n  @State() internalButtonState: string = '';\r\n  @State() internalIconLeadingState: string = '';\r\n  @State() internalIconTrailingState: string = '';\r\n\r\n  componentWillLoad() {\r\n    if (this.iconLeading && this.iconLeadingSwap) {\r\n      this.loadIcon(this.iconLeadingSwap, 'leading');\r\n    }\r\n    if (this.iconTrailing && this.iconTrailingSwap) { \r\n      this.loadIcon(this.iconTrailingSwap, 'trailing');\r\n    }\r\n\r\n    const buttonSlot = this.el.querySelector('p');\r\n\r\n    if (buttonSlot) {\r\n      buttonSlot.classList.add(this.getButtonTextClasses());\r\n      buttonSlot.classList.add('nowrap');\r\n    }\r\n\r\n    // if (!this.iconLeading && !this.iconTrailing) {\r\n    //   buttonSlot.classList.add('center');\r\n    // }\r\n  }\r\n\r\n  @Watch('state')\r\n  updateButtonState(newValue: string) {\r\n    this.internalButtonState = newValue;\r\n  }\r\n\r\n  componentWillRender() {\r\n    this.internalButtonState = this.state;\r\n  }\r\n\r\n  async loadIcon(iconName: string, type: 'leading' | 'trailing') {\r\n    const iconPath = getAssetPath(`${iconName}`);\r\n    const response = await fetch(iconPath);\r\n    const svg = await response.text();\r\n    if (type === 'leading') {\r\n      this.leadingIconSvg = svg;\r\n    } else {\r\n      this.trailingIconSvg = svg;\r\n    }\r\n  }\r\n\r\n  // Helper to apply color styles based on the button state\r\n  getButtonClasses() {\r\n    return {\r\n      button: true,\r\n      [this.size]: true,\r\n      [this.hierarchy]: true,\r\n      destructive: this.destructive,\r\n      disabled: this.internalButtonState === 'disabled',\r\n      default: this.icon === 'default',\r\n      only: this.icon === 'only',\r\n      oneicon: this.iconLeading || this.iconTrailing,\r\n    };\r\n  }\r\n\r\n  getButtonTextClasses() {\r\n    switch (this.size) {\r\n      case 'xl2':\r\n        return 'text-lg-semi-bold';\r\n      case 'xl':\r\n        return 'text-md-semi-bold';\r\n      case 'lg':\r\n        return 'text-md-semi-bold';\r\n      case 'md':\r\n        return 'text-sm-semi-bold';\r\n      case 'sm':\r\n        return 'text-sm-semi-bold';\r\n    }\r\n  }\r\n\r\n  renderLeadingIcon() {\r\n    return <div class={`icon left-icon ${this.size}`} innerHTML={this.leadingIconSvg}></div>;\r\n  }\r\n\r\n  renderTrailingIcon() {\r\n    return <div class=\"icon right-icon\" innerHTML={this.trailingIconSvg}></div>;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <button disabled={this.internalButtonState === 'disabled'} class={this.getButtonClasses()}>\r\n        {this.iconLeading && this.icon === 'default' && this.renderLeadingIcon()}\r\n        {this.icon === 'default' && <slot></slot>}\r\n        {this.iconTrailing && this.renderTrailingIcon()}\r\n        {this.icon === 'only' && this.renderLeadingIcon()}\r\n      </button>\r\n    );\r\n  }\r\n}\r\n","@import './../../global/global.css';\r\n\r\n.checkbox_div{\r\n    display: flex;\r\n    justify-content: space-between;\r\n    width: fit-content;\r\n}\r\n\r\n.checkbox_div{\r\n    gap: var(--spacing-none);\r\n}\r\n\r\n.checkbox_div.text_class.sm{\r\n    gap: var(--spacing-2);\r\n}\r\n\r\n.checkbox_div.text_class.md{\r\n    gap: var(--spacing-3);\r\n}\r\n\r\n.checkbox_base.checkbox_no_supporting_text{\r\n    margin-top: 0.22rem;\r\n}\r\n\r\n.text{\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: var(--spacing-2);\r\n}\r\n\r\n.text.no_supporting_text{\r\n    justify-content: center;\r\n}\r\n\r\n::slotted(p){\r\n    color: var(--color-text, #4B5565);\r\n}","import { Component, Element, Event, EventEmitter, h, Prop } from \"@stencil/core\";\r\nimport { CheckBoxVariants, GeneralSizes, StateType } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n  tag: 'gb-checkbox',\r\n  styleUrl: 'gb-checkbox.css',\r\n  shadow: true,\r\n})\r\nexport class GbCheckbox {\r\n  @Prop() checked: boolean = false;\r\n  @Prop() indeterminate: boolean = false;\r\n  @Prop() size: GeneralSizes;\r\n  @Prop() type: CheckBoxVariants; \r\n  @Prop() state: StateType;\r\n  @Prop() text: boolean = false;\r\n  @Prop() supportingText: boolean = false;\r\n  @Element() el: HTMLElement;\r\n  @Event() checkboxClicked: EventEmitter<boolean>;\r\n\r\n  getMainTextClass() {\r\n    switch (this.size) {\r\n      case 'sm':\r\n        return `text-sm-medium`;\r\n      case 'md':\r\n        return `text-md-medium`;\r\n    }\r\n  }\r\n\r\n  getSupportingTextClass() {\r\n    switch (this.size) {\r\n      case 'sm':\r\n        return 'text-xs-regular';\r\n      case 'md':\r\n        return 'text-sm-regular';\r\n    }\r\n  }\r\n\r\n  componentDidLoad() {\r\n    const mainTextSlot = this.el.querySelector('[slot=\"label\"]');\r\n    const supportingTextSlot = this.el.querySelector('[slot=\"supporting_text\"]');\r\n\r\n    if (mainTextSlot) {\r\n      mainTextSlot.classList.add(this.getMainTextClass());\r\n    }\r\n\r\n    if (supportingTextSlot) {\r\n      supportingTextSlot.classList.add(this.getSupportingTextClass());\r\n    }\r\n  }\r\n\r\n  onCheckboxClicked(event) : void {\r\n    this.checkboxClicked.emit(event.detail);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class={`checkbox_div ${this.size} ${this.text ? 'text_class' : ''}`}>\r\n        <div class={`checkbox_base ${!this.supportingText ? 'checkbox_no_supporting_text' : ''}`}>\r\n          <gb-checkbox-base size={this.size} type={this.type} state={this.state} indeterminate={this.indeterminate} onCheckboxClicked={this.onCheckboxClicked.bind(this)} checked={this.checked}></gb-checkbox-base>\r\n        </div>\r\n        {this.text && (\r\n          <div class={`text ${!this.supportingText ? 'no_supporting_text' : ''}`}>\r\n            <slot name=\"label\"></slot>\r\n            {this.supportingText && <slot name=\"supporting_text\"></slot>}\r\n          </div>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}","@import './../../global/global.css';\r\n\r\n:host{\r\n    width: fit-content;\r\n}\r\n\r\n/* Checkbox Styles */\r\n.checkbox_container{\r\n    width: fit-content;\r\n    height: fit-content;\r\n    cursor: pointer;\r\n}\r\n\r\nsvg.sm{\r\n    width: var(--spacing-4);\r\n    height: var(--spacing-4);\r\n}\r\n\r\nsvg.md{\r\n    width: var(--spacing-5);\r\n    height: var(--spacing-5);\r\n}\r\n\r\n.checkbox_default_unchecked.hover:hover path{\r\n    stroke: var(--color-border-selected, #075DB2);\r\n}\r\n\r\n.checkbox_default_checked:hover path, .checkbox_default_indeterminate:hover path{\r\n    fill: var(--color-background-information, #064E94);\r\n}\r\n\r\n.checkbox_default_checked:hover .border, .checkbox_default_indeterminate:hover .border{\r\n    stroke: var(--color-border-information, #064E94);\r\n}\r\n\r\n/* Radio Styles */\r\n.radio_default_unchecked:hover rect{\r\n    stroke: var(--color-border-selected, #075DB2);\r\n}\r\n\r\n/* Check Circle Styles */\r\n.circle_default_unchecked:hover rect{\r\n    stroke: var(--color-border-selected, #075DB2);\r\n}\r\n\r\n.circle_default_checked:hover rect{\r\n    stroke: var(--color-border-information, #064E94);\r\n}\r\n\r\n.circle_default_checked:hover .background {\r\n    fill: var(--color-background-information, #064E94);\r\n}","import { Component, Event, EventEmitter, h, Prop } from \"@stencil/core\";\r\nimport { CheckBoxVariants, GeneralSizes, StateType } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-checkbox-base',\r\n  styleUrl: 'gb-checkbox-base.css',\r\n  shadow: true,\r\n})\r\nexport class GbCheckboxBase {\r\n  @Prop({ mutable: true }) state: StateType;\r\n  @Prop() size: GeneralSizes;\r\n  @Prop() type: CheckBoxVariants;\r\n  @Prop({ mutable: true }) checked: boolean = false;\r\n  @Prop({ mutable: true }) indeterminate: boolean = false;\r\n  @Event() checkboxClicked: EventEmitter<boolean>;\r\n\r\n  private renderSVG() {\r\n    switch (this.type) {\r\n      case 'checkbox':\r\n        return this.renderCheckbox();\r\n      case 'check_circle':\r\n        return this.renderCircle();\r\n      case 'radio':\r\n        return this.renderRadio();\r\n      default:\r\n        return null;\r\n    }\r\n  }\r\n\r\n  private renderCheckbox() {\r\n    if (this.state === \"default\" && this.checked) {\r\n      return (\r\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class={`checkbox_default_checked ${this.size}`}>\r\n          <path\r\n            d=\"M0.5 8C0.5 6.10025 0.501062 4.72573 0.641988 3.67754C0.78098 2.64373 1.04772 2.00253 1.52513 1.52513C2.00253 1.04772 2.64373 0.78098 3.67754 0.641988C4.72573 0.501062 6.10025 0.5 8 0.5C9.89975 0.5 11.2743 0.501062 12.3225 0.641988C13.3563 0.78098 13.9975 1.04772 14.4749 1.52513C14.9523 2.00253 15.219 2.64373 15.358 3.67754C15.4989 4.72573 15.5 6.10025 15.5 8C15.5 9.89975 15.4989 11.2743 15.358 12.3225C15.219 13.3563 14.9523 13.9975 14.4749 14.4749C13.9975 14.9523 13.3563 15.219 12.3225 15.358C11.2743 15.4989 9.89975 15.5 8 15.5C6.10025 15.5 4.72573 15.4989 3.67754 15.358C2.64373 15.219 2.00253 14.9523 1.52513 14.4749C1.04772 13.9975 0.78098 13.3563 0.641988 12.3225C0.501062 11.2743 0.5 9.89975 0.5 8Z\"\r\n            fill=\"#075DB2\"\r\n          />\r\n          <path\r\n            d=\"M0.5 8C0.5 6.10025 0.501062 4.72573 0.641988 3.67754C0.78098 2.64373 1.04772 2.00253 1.52513 1.52513C2.00253 1.04772 2.64373 0.78098 3.67754 0.641988C4.72573 0.501062 6.10025 0.5 8 0.5C9.89975 0.5 11.2743 0.501062 12.3225 0.641988C13.3563 0.78098 13.9975 1.04772 14.4749 1.52513C14.9523 2.00253 15.219 2.64373 15.358 3.67754C15.4989 4.72573 15.5 6.10025 15.5 8C15.5 9.89975 15.4989 11.2743 15.358 12.3225C15.219 13.3563 14.9523 13.9975 14.4749 14.4749C13.9975 14.9523 13.3563 15.219 12.3225 15.358C11.2743 15.4989 9.89975 15.5 8 15.5C6.10025 15.5 4.72573 15.4989 3.67754 15.358C2.64373 15.219 2.00253 14.9523 1.52513 14.4749C1.04772 13.9975 0.78098 13.3563 0.641988 12.3225C0.501062 11.2743 0.5 9.89975 0.5 8Z\"\r\n            stroke=\"#075DB2\"\r\n            class=\"border\"\r\n          />\r\n          <path d=\"M4.5 9.25C4.5 9.25 5.25 9.25 6.25 11C6.25 11 9.02941 6.41667 11.5 5.5\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n        </svg>\r\n      );\r\n    } else if (this.state === \"default\" && this.indeterminate) {\r\n      return (\r\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class={`checkbox_default_indeterminate ${this.size}`}>\r\n          <path\r\n            d=\"M0.5 8C0.5 6.10025 0.501062 4.72573 0.641988 3.67754C0.78098 2.64373 1.04772 2.00253 1.52513 1.52513C2.00253 1.04772 2.64373 0.78098 3.67754 0.641988C4.72573 0.501062 6.10025 0.5 8 0.5C9.89975 0.5 11.2743 0.501062 12.3225 0.641988C13.3563 0.78098 13.9975 1.04772 14.4749 1.52513C14.9523 2.00253 15.219 2.64373 15.358 3.67754C15.4989 4.72573 15.5 6.10025 15.5 8C15.5 9.89975 15.4989 11.2743 15.358 12.3225C15.219 13.3563 14.9523 13.9975 14.4749 14.4749C13.9975 14.9523 13.3563 15.219 12.3225 15.358C11.2743 15.4989 9.89975 15.5 8 15.5C6.10025 15.5 4.72573 15.4989 3.67754 15.358C2.64373 15.219 2.00253 14.9523 1.52513 14.4749C1.04772 13.9975 0.78098 13.3563 0.641988 12.3225C0.501062 11.2743 0.5 9.89975 0.5 8Z\"\r\n            fill=\"#075DB2\"\r\n          />\r\n          <path\r\n            d=\"M0.5 8C0.5 6.10025 0.501062 4.72573 0.641988 3.67754C0.78098 2.64373 1.04772 2.00253 1.52513 1.52513C2.00253 1.04772 2.64373 0.78098 3.67754 0.641988C4.72573 0.501062 6.10025 0.5 8 0.5C9.89975 0.5 11.2743 0.501062 12.3225 0.641988C13.3563 0.78098 13.9975 1.04772 14.4749 1.52513C14.9523 2.00253 15.219 2.64373 15.358 3.67754C15.4989 4.72573 15.5 6.10025 15.5 8C15.5 9.89975 15.4989 11.2743 15.358 12.3225C15.219 13.3563 14.9523 13.9975 14.4749 14.4749C13.9975 14.9523 13.3563 15.219 12.3225 15.358C11.2743 15.4989 9.89975 15.5 8 15.5C6.10025 15.5 4.72573 15.4989 3.67754 15.358C2.64373 15.219 2.00253 14.9523 1.52513 14.4749C1.04772 13.9975 0.78098 13.3563 0.641988 12.3225C0.501062 11.2743 0.5 9.89975 0.5 8Z\"\r\n            stroke=\"#075DB2\"\r\n            class=\"border\"\r\n          />\r\n          <path d=\"M12 8L4 8\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n        </svg>\r\n      );\r\n    } else if (this.state === \"disabled\" && !this.checked) {\r\n      return (\r\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class={`checkbox_disabled_unchecked ${this.size}`}>\r\n          <path\r\n            d=\"M0.5 8C0.5 6.10025 0.501062 4.72573 0.641988 3.67754C0.78098 2.64373 1.04772 2.00253 1.52513 1.52513C2.00253 1.04772 2.64373 0.78098 3.67754 0.641988C4.72573 0.501062 6.10025 0.5 8 0.5C9.89975 0.5 11.2743 0.501062 12.3225 0.641988C13.3563 0.78098 13.9975 1.04772 14.4749 1.52513C14.9523 2.00253 15.219 2.64373 15.358 3.67754C15.4989 4.72573 15.5 6.10025 15.5 8C15.5 9.89975 15.4989 11.2743 15.358 12.3225C15.219 13.3563 14.9523 13.9975 14.4749 14.4749C13.9975 14.9523 13.3563 15.219 12.3225 15.358C11.2743 15.4989 9.89975 15.5 8 15.5C6.10025 15.5 4.72573 15.4989 3.67754 15.358C2.64373 15.219 2.00253 14.9523 1.52513 14.4749C1.04772 13.9975 0.78098 13.3563 0.641988 12.3225C0.501062 11.2743 0.5 9.89975 0.5 8Z\"\r\n            fill=\"#F6F8FA\"\r\n          />\r\n          <path\r\n            d=\"M0.5 8C0.5 6.10025 0.501062 4.72573 0.641988 3.67754C0.78098 2.64373 1.04772 2.00253 1.52513 1.52513C2.00253 1.04772 2.64373 0.78098 3.67754 0.641988C4.72573 0.501062 6.10025 0.5 8 0.5C9.89975 0.5 11.2743 0.501062 12.3225 0.641988C13.3563 0.78098 13.9975 1.04772 14.4749 1.52513C14.9523 2.00253 15.219 2.64373 15.358 3.67754C15.4989 4.72573 15.5 6.10025 15.5 8C15.5 9.89975 15.4989 11.2743 15.358 12.3225C15.219 13.3563 14.9523 13.9975 14.4749 14.4749C13.9975 14.9523 13.3563 15.219 12.3225 15.358C11.2743 15.4989 9.89975 15.5 8 15.5C6.10025 15.5 4.72573 15.4989 3.67754 15.358C2.64373 15.219 2.00253 14.9523 1.52513 14.4749C1.04772 13.9975 0.78098 13.3563 0.641988 12.3225C0.501062 11.2743 0.5 9.89975 0.5 8Z\"\r\n            stroke=\"#E3E8EF\"\r\n          />\r\n        </svg>\r\n      );\r\n    } else if (this.state === \"disabled\" && this.checked) {\r\n      return (\r\n        <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class={`${this.size}`}>\r\n          <path\r\n            d=\"M0.5 8C0.5 6.10025 0.501062 4.72573 0.641988 3.67754C0.78098 2.64373 1.04772 2.00253 1.52513 1.52513C2.00253 1.04772 2.64373 0.78098 3.67754 0.641988C4.72573 0.501062 6.10025 0.5 8 0.5H12C13.8998 0.5 15.2743 0.501062 16.3225 0.641988C17.3563 0.78098 17.9975 1.04772 18.4749 1.52513C18.9523 2.00253 19.219 2.64373 19.358 3.67754C19.4989 4.72573 19.5 6.10025 19.5 8V12C19.5 13.8998 19.4989 15.2743 19.358 16.3225C19.219 17.3563 18.9523 17.9975 18.4749 18.4749C17.9975 18.9523 17.3563 19.219 16.3225 19.358C15.2743 19.4989 13.8998 19.5 12 19.5H8C6.10025 19.5 4.72573 19.4989 3.67754 19.358C2.64373 19.219 2.00253 18.9523 1.52513 18.4749C1.04772 17.9975 0.78098 17.3563 0.641988 16.3225C0.501062 15.2743 0.5 13.8998 0.5 12V8Z\"\r\n            fill=\"#9AA4B2\"\r\n          />\r\n          <path\r\n            d=\"M0.5 8C0.5 6.10025 0.501062 4.72573 0.641988 3.67754C0.78098 2.64373 1.04772 2.00253 1.52513 1.52513C2.00253 1.04772 2.64373 0.78098 3.67754 0.641988C4.72573 0.501062 6.10025 0.5 8 0.5H12C13.8998 0.5 15.2743 0.501062 16.3225 0.641988C17.3563 0.78098 17.9975 1.04772 18.4749 1.52513C18.9523 2.00253 19.219 2.64373 19.358 3.67754C19.4989 4.72573 19.5 6.10025 19.5 8V12C19.5 13.8998 19.4989 15.2743 19.358 16.3225C19.219 17.3563 18.9523 17.9975 18.4749 18.4749C17.9975 18.9523 17.3563 19.219 16.3225 19.358C15.2743 19.4989 13.8998 19.5 12 19.5H8C6.10025 19.5 4.72573 19.4989 3.67754 19.358C2.64373 19.219 2.00253 18.9523 1.52513 18.4749C1.04772 17.9975 0.78098 17.3563 0.641988 16.3225C0.501062 15.2743 0.5 13.8998 0.5 12V8Z\"\r\n            stroke=\"#9AA4B2\"\r\n          />\r\n          <path\r\n            d=\"M5.3335 11.6667C5.3335 11.6667 6.3335 11.6667 7.66683 14C7.66683 14 11.3727 7.88888 14.6668 6.66666\"\r\n            stroke=\"#E3E8EF\"\r\n            stroke-width=\"2\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n          />\r\n        </svg>\r\n      );\r\n    } else if (this.state === \"disabled\" && this.indeterminate) {\r\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class={`${this.size}`}>\r\n        <path\r\n          d=\"M0.5 8C0.5 6.10025 0.501062 4.72573 0.641988 3.67754C0.78098 2.64373 1.04772 2.00253 1.52513 1.52513C2.00253 1.04772 2.64373 0.78098 3.67754 0.641988C4.72573 0.501062 6.10025 0.5 8 0.5H12C13.8998 0.5 15.2743 0.501062 16.3225 0.641988C17.3563 0.78098 17.9975 1.04772 18.4749 1.52513C18.9523 2.00253 19.219 2.64373 19.358 3.67754C19.4989 4.72573 19.5 6.10025 19.5 8V12C19.5 13.8998 19.4989 15.2743 19.358 16.3225C19.219 17.3563 18.9523 17.9975 18.4749 18.4749C17.9975 18.9523 17.3563 19.219 16.3225 19.358C15.2743 19.4989 13.8998 19.5 12 19.5H8C6.10025 19.5 4.72573 19.4989 3.67754 19.358C2.64373 19.219 2.00253 18.9523 1.52513 18.4749C1.04772 17.9975 0.78098 17.3563 0.641988 16.3225C0.501062 15.2743 0.5 13.8998 0.5 12V8Z\"\r\n          fill=\"#9AA4B2\"\r\n        />\r\n        <path\r\n          d=\"M0.5 8C0.5 6.10025 0.501062 4.72573 0.641988 3.67754C0.78098 2.64373 1.04772 2.00253 1.52513 1.52513C2.00253 1.04772 2.64373 0.78098 3.67754 0.641988C4.72573 0.501062 6.10025 0.5 8 0.5H12C13.8998 0.5 15.2743 0.501062 16.3225 0.641988C17.3563 0.78098 17.9975 1.04772 18.4749 1.52513C18.9523 2.00253 19.219 2.64373 19.358 3.67754C19.4989 4.72573 19.5 6.10025 19.5 8V12C19.5 13.8998 19.4989 15.2743 19.358 16.3225C19.219 17.3563 18.9523 17.9975 18.4749 18.4749C17.9975 18.9523 17.3563 19.219 16.3225 19.358C15.2743 19.4989 13.8998 19.5 12 19.5H8C6.10025 19.5 4.72573 19.4989 3.67754 19.358C2.64373 19.219 2.00253 18.9523 1.52513 18.4749C1.04772 17.9975 0.78098 17.3563 0.641988 16.3225C0.501062 15.2743 0.5 13.8998 0.5 12V8Z\"\r\n          stroke=\"#9AA4B2\"\r\n        />\r\n        <path d=\"M15.3335 10L4.66683 10\" stroke=\"#E3E8EF\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n      </svg>;\r\n    } else {\r\n      return (\r\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class={`checkbox_default_unchecked ${this.size}`}>\r\n          <path\r\n            d=\"M0.5 8C0.5 6.10025 0.501062 4.72573 0.641988 3.67754C0.78098 2.64373 1.04772 2.00253 1.52513 1.52513C2.00253 1.04772 2.64373 0.78098 3.67754 0.641988C4.72573 0.501062 6.10025 0.5 8 0.5C9.89975 0.5 11.2743 0.501062 12.3225 0.641988C13.3563 0.78098 13.9975 1.04772 14.4749 1.52513C14.9523 2.00253 15.219 2.64373 15.358 3.67754C15.4989 4.72573 15.5 6.10025 15.5 8C15.5 9.89975 15.4989 11.2743 15.358 12.3225C15.219 13.3563 14.9523 13.9975 14.4749 14.4749C13.9975 14.9523 13.3563 15.219 12.3225 15.358C11.2743 15.4989 9.89975 15.5 8 15.5C6.10025 15.5 4.72573 15.4989 3.67754 15.358C2.64373 15.219 2.00253 14.9523 1.52513 14.4749C1.04772 13.9975 0.78098 13.3563 0.641988 12.3225C0.501062 11.2743 0.5 9.89975 0.5 8Z\"\r\n            stroke=\"#CDD5DF\"\r\n          />\r\n        </svg>\r\n      );\r\n    }\r\n  }\r\n\r\n  private renderCircle() {\r\n    if (this.checked && this.state === \"default\") {\r\n      return (\r\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class={`circle_default_checked ${this.size}`}>\r\n          <rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"15\" rx=\"7.5\" fill=\"#075DB2\" class=\"background\" />\r\n          <rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"15\" rx=\"7.5\" stroke=\"#075DB2\" />\r\n          <path\r\n            d=\"M5.0835 9.04166C5.0835 9.04166 5.7085 9.04166 6.54183 10.5C6.54183 10.5 8.85801 6.68055 10.9168 5.91666\"\r\n            stroke=\"white\"\r\n            stroke-width=\"1.66667\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n          />\r\n        </svg>\r\n      );\r\n    } else if (!this.checked && this.state === \"default\") {\r\n      return (\r\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class={`circle_default_unchecked ${this.size}`}>\r\n          <rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"15\" rx=\"7.5\" stroke=\"#CDD5DF\" />\r\n        </svg>\r\n      );\r\n    } else if (this.checked && this.state === \"disabled\") {\r\n      return (\r\n        <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class={`circle_disabled_checked ${this.size}`}>\r\n          <rect x=\"0.5\" y=\"0.5\" width=\"19\" height=\"19\" rx=\"9.5\" fill=\"#9AA4B2\" />\r\n          <rect x=\"0.5\" y=\"0.5\" width=\"19\" height=\"19\" rx=\"9.5\" stroke=\"#9AA4B2\" />\r\n          <path\r\n            d=\"M5.9165 11.4583C5.9165 11.4583 6.7915 11.4583 7.95817 13.5C7.95817 13.5 11.2008 8.15279 14.0832 7.08334\"\r\n            stroke=\"#E3E8EF\"\r\n            stroke-width=\"2\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n          />\r\n        </svg>\r\n      );\r\n    } else if (!this.checked && this.state === \"disabled\") {\r\n      return (\r\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class={`circle_disabled_unchecked ${this.size}`}>\r\n          <rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"15\" rx=\"7.5\" stroke=\"#E3E8EF\" />\r\n        </svg>\r\n      );\r\n    }\r\n  }\r\n\r\n  private renderRadio() {\r\n    if (this.state === \"default\" && this.checked) {\r\n      return (\r\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class={`radio_default_checked ${this.size}`}>\r\n          <rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"15\" rx=\"7.5\" stroke=\"#075DB2\" />\r\n          <circle cx=\"8\" cy=\"8\" r=\"3\" fill=\"#075DB2\" />\r\n        </svg>\r\n      );\r\n    } else if (this.state === \"disabled\" && !this.checked) {\r\n      return (\r\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class={`radio_disabled_unchecked ${this.size}`}>\r\n          <rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"15\" rx=\"7.5\" stroke=\"#E3E8EF\" />\r\n        </svg>\r\n      );\r\n    } else if (this.state === \"disabled\" && this.checked) {\r\n      return (\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" class={`radio_disabled_checked ${this.size}`}>\r\n          <rect x=\"0.5\" y=\"0.5\" width=\"19\" height=\"19\" rx=\"9.5\" stroke=\"#9AA4B2\" />\r\n          <circle cx=\"10\" cy=\"10\" r=\"4\" fill=\"#9AA4B2\" />\r\n        </svg>\r\n      );\r\n    } else {\r\n      return (\r\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class={`radio_default_unchecked ${this.size}`}>\r\n          <rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"15\" rx=\"7.5\" stroke=\"#CDD5DF\" />\r\n        </svg>\r\n      );\r\n    }\r\n  }\r\n\r\n  private toggleCheckboxState() {\r\n    if (this.state === \"default\" && !this.checked) {\r\n      this.checked = true;\r\n      // console.log(this.checked)\r\n      this.checkboxClicked.emit(this.checked);\r\n    } else if (this.state === \"default\" && this.checked) {\r\n      this.checked = false;\r\n      // console.log(this.checked);\r\n      this.checkboxClicked.emit(this.checked);\r\n    }\r\n  }\r\n\r\n  private toggleCheckCircleState() {\r\n    if ((this.state === \"disabled\" && this.checked) || (this.state === \"disabled\" && !this.checked)) {\r\n      return;\r\n    }\r\n\r\n    if (this.state === \"default\" && !this.checked) {\r\n      this.checked = true;\r\n      this.checkboxClicked.emit(this.checked);\r\n    } else if (this.state == \"default\" && this.checked) {\r\n      this.checked = false;\r\n      this.checkboxClicked.emit(this.checked);\r\n    }\r\n  }\r\n\r\n  private toggleRadioButtonState() {\r\n    if ((this.state === \"disabled\" && !this.checked) || (this.state === \"disabled\" && this.checked)) {\r\n      return;\r\n    }\r\n    if (this.state === \"default\" && !this.checked) {\r\n      this.checked = true;\r\n      this.checkboxClicked.emit(this.checked);\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div\r\n        class={`checkbox_container ${this.size}`}\r\n        onClick={() => {\r\n          if (this.type === 'checkbox') {\r\n            return this.toggleCheckboxState();\r\n          } else if (this.type === 'check_circle') {\r\n            return this.toggleCheckCircleState();\r\n          } else if (this.type === 'radio') {\r\n            return this.toggleRadioButtonState();\r\n          }\r\n        }}\r\n      >\r\n        {this.renderSVG()}\r\n      </div>\r\n    );\r\n  }\r\n}","@import './../../global/global.css';\r\n\r\n.checkbox_group_item {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  /* align-items: center; */\r\n  background-color: var(--color-background-card, #ffffff);\r\n  border: 1px solid var(--color-border-subtle, #cdd5df);\r\n  padding: 1rem;\r\n  margin-bottom: 0.5rem;\r\n  transition: all 0.1s ease-in-out;\r\n  cursor: pointer;\r\n  border-radius: var(--rounded-md);\r\n}\r\n\r\n.checkbox_group_item .avatar {\r\n  /* this is correct*/\r\n  flex: 1 0 0;\r\n  margin-top: 0.5rem;\r\n  border-radius: 12.5rem;\r\n  border: 0.5px solid var(--color-blanket-subtler);\r\n}\r\n\r\n.checkbox_group_item.selected {\r\n  border: 2px solid var(--color-border-selected, #075db2); /* Checked border color */\r\n  background: var(--color-background-information-subtlest, #e4f0fc); /* Checked background color */\r\n}\r\n\r\n/* i'm using this to apply the hover effect but its turning white on hover??? */\r\n.checkbox_group_item:hover {\r\n  background: var(--color-background-information-subtler, #c8e0f9);\r\n  border-color: var(--color-border-selected, #075db2);\r\n}\r\n\r\n/* i'm using this to change icon color on hover */\r\n.checkbox_group_item:hover .icon-md,\r\n.checkbox_group_item:hover .svg-icon {\r\n  fill: var(--color-icon-information, #064e94);\r\n}\r\n\r\n.item-content {\r\n  display: flex;\r\n  flex: 1 0 0;\r\n  align-self: stretch;\r\n}\r\n\r\n.text-container {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--spacing-3);\r\n  margin-left: 1rem;\r\n}\r\n\r\n/* Icon Styles */\r\n.icon {\r\n  width: 2rem;\r\n  height: 2rem;\r\n}\r\n\r\n.icon.default path[stroke] {\r\n  stroke: var(--color-icon-information, #064e94);\r\n}\r\n\r\n.icon.default path[fill] {\r\n  fill: var(--color-icon-information, #064e94);\r\n}\r\n\r\n.icon.disabled path[stroke] {\r\n  stroke: var(--color-icon-disabled, #808c9e);\r\n}\r\n\r\n.icon.disabled path[fill] {\r\n  fill: var(--color-icon-disabled, #808c9e);\r\n}\r\n\r\n.icon.default path.has_opacity,\r\n.icon.default g.has_opacity,\r\n.icon.default circle.has_opacity,\r\n.icon.default path.has_opacity,\r\n.icon.default g.has_opacity,\r\n.icon.default circle.has_opacity {\r\n  opacity: 0.5;\r\n}\r\n\r\n.label-cost {\r\n  display: flex;\r\n  align-items: center;\r\n  flex-direction: row;\r\n  gap: var(--spacing-3);\r\n}\r\n\r\n.label-cost.payment_icon {\r\n  flex-direction: column;\r\n  align-items: flex-start;\r\n  gap: var(--spacing-3);\r\n}\r\n\r\n.label-cost span {\r\n  font-size: 1rem;\r\n  line-height: 1.2;\r\n}\r\n\r\n.checkbox_container {\r\n  margin-left: 1rem;\r\n}\r\n\r\n.icon-md {\r\n  width: 2rem;\r\n  height: 2rem;\r\n}\r\n\r\n.svg-icon {\r\n  width: 2rem;\r\n  height: 2rem;\r\n}\r\n\r\n.button{\r\n  margin-top: var(--spacing-2);\r\n}\r\n\r\n.buttons {\r\n  display: flex;\r\n  gap: var(--spacing-3);\r\n}\r\n\r\n/* State Styles */\r\n.checkbox_group_item.default {\r\n  border: 1px solid var(--color-border-subtle, #cdd5df);\r\n  background: var(--color-background-card, #ffffff);\r\n}\r\n\r\n.checkbox_group_item.default:hover {\r\n  border: 1px solid var(--color-border-selected, #075db2);\r\n  background: var(--color-background-card, #ffffff);\r\n}\r\n\r\n.checkbox_group_item.selected {\r\n  border: 2px solid var(--color-border-selected, #075db2);\r\n  background: var(--color-background-information-subtlest, #e4f0fc);\r\n}\r\n\r\n.checkbox_group_item.selected:hover .cost,\r\n.checkbox_group_item.selected:hover .supporting_text {\r\n  color: var(--color-text-information, #064e94);\r\n}\r\n\r\n.checkbox_group_item.selected:hover {\r\n  border: 2px solid var(--color-border-selected, #075db2);\r\n  background: var(--color-background-information-subtler, #c8e0f9);\r\n}\r\n\r\n.checkbox_group_item.disabled {\r\n  border: 1px solid var(--color-border-disabled, #e3e8ef);\r\n  background: var(--color-background-disabled, #f6f8fa);\r\n  pointer-events: none;\r\n  cursor: not-allowed;\r\n}\r\n\r\n.checkbox_group_item.selected.disabled {\r\n  border: 2px solid var(--color-border-disabled, #e3e8ef);\r\n  background: var(--color-background-disabled, #f6f8fa);\r\n  pointer-events: none;\r\n  cursor: not-allowed;\r\n}\r\n\r\n.checkbox_group_item.selected ::slotted([slot='label']) {\r\n  color: var(--color-text-information-bold, #042f59);\r\n}\r\n\r\n.checkbox_group_item ::slotted([slot='cost']) {\r\n  color: var(--color-text, #4b5565);\r\n}\r\n\r\n.checkbox_group_item.selected ::slotted([slot='cost']) {\r\n  color: var(--color-text-information, #064e94);\r\n}\r\n\r\n.checkbox_group_item ::slotted([slot='supporting_text']) {\r\n  color: var(--color-text, #4b5565);\r\n}\r\n\r\n.checkbox_group_item.selected ::slotted([slot='supporting_text']) {\r\n  color: var(--color-text-information, #064e94);\r\n}\r\n\r\n.checkbox_group_item.disabled ::slotted([slot='cost']),\r\n.checkbox_group_item.disabled ::slotted([slot='label']),\r\n.checkbox_group_item.disabled ::slotted([slot='supporting_text']) {\r\n  color: var(--color-text-disabled, #cdd5df);\r\n}\r\n\r\n.icon_simple_svg.disabled path[stroke] {\r\n  stroke: var(--color-icon-disabled, #cdd5df);\r\n}\r\n\r\n.icon_simple_svg.disabled path[fill] {\r\n  fill: var(--color-icon-disabled, #cdd5df);\r\n}\r\n","import { Component, h, Prop, Element, Event, EventEmitter, State, getAssetPath } from '@stencil/core';\r\nimport { GeneralSizes, StateEnum, BreakPoints, CheckBoxVariants } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-checkbox-group-item',\r\n  styleUrl: 'gb-checkbox-group-item.css',\r\n  shadow: true,\r\n})\r\nexport class GbCheckboxGroupItem {\r\n  @Prop() size: GeneralSizes;\r\n  @Prop() type: 'icon_simple' | 'avatar' | 'payment_icon' | 'radio_button' | 'checkbox';\r\n  @Prop() state: StateEnum;\r\n  @Prop() breakpoint: BreakPoints;\r\n  @Prop() showCost: boolean = false; // to control cost visibility\r\n  @Element() el: HTMLElement;\r\n  @Prop({ mutable: true }) selected: boolean = false;\r\n  @Prop() showButton: boolean = true;\r\n  @Prop() buttonText: string = '';\r\n  @Prop() icon: string = '';\r\n  @Prop() checkboxType: CheckBoxVariants;\r\n  @State() leadingIconSvg: string = '';\r\n  @Event() buttonClicked: EventEmitter<void>;\r\n  @Event() groupItemClicked: EventEmitter<boolean>;\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  onButtonClicked() {\r\n    this.buttonClicked.emit();\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.loadIcon(this.icon);\r\n  }\r\n\r\n  private getLabelSizeClass() {\r\n    switch (this.size) {\r\n      case 'md':\r\n        return 'text-lg-semi-bold';\r\n      case 'sm':\r\n        return 'text-md-semi-bold';\r\n    }\r\n  }\r\n\r\n  private getCostSizeClass() {\r\n    switch (this.size) {\r\n      case 'xl':\r\n        return 'text-md-regular';\r\n      case 'lg':\r\n        return 'text-md-regular';\r\n      case 'md':\r\n        return 'text-sm-regular';\r\n      case 'sm':\r\n        return 'text-xs-regular';\r\n      default:\r\n        return 'text-xs-regular';\r\n    }\r\n  }\r\n\r\n  private getSupportingTextClasses() {\r\n    switch (this.size) {\r\n      case 'md':\r\n        return 'text-md-regular';\r\n      case 'sm':\r\n        return 'text-sm-regular';\r\n      default:\r\n        return 'text-sm-regular';\r\n    }\r\n  }\r\n\r\n  private getLabelColorClasses() {\r\n    switch (this.selected) {\r\n      case true:\r\n        return 'label_selected';\r\n      case false:\r\n        return 'label_not_selected';\r\n    }\r\n  }\r\n\r\n  private getCostColorClasses() {\r\n    switch (this.selected) {\r\n      case true:\r\n        return 'cost_selected';\r\n      case false:\r\n        return 'cost_not_selected';\r\n    }\r\n  }\r\n\r\n  componentDidUpdate() {\r\n    const labelSlot = this.el.querySelector('[slot=\"label\"]');\r\n    const costSlot = this.el.querySelector('[slot=\"cost\"]');\r\n\r\n    labelSlot.classList.add(this.getLabelColorClasses());\r\n    costSlot.classList.add(this.getCostColorClasses());\r\n  }\r\n\r\n  componentDidLoad() {\r\n    const labelSlot = this.el.querySelector('[slot=\"label\"]');\r\n    const costSlot = this.el.querySelector('[slot=\"cost\"]');\r\n    const supportingTextSlot = this.el.querySelector('[slot=\"supporting_text\"]');\r\n\r\n    if (labelSlot) {\r\n      labelSlot.classList.add(this.getLabelSizeClass());\r\n    }\r\n\r\n    if (costSlot) {\r\n      costSlot.classList.add(this.getCostSizeClass());\r\n      costSlot.classList.add(this.getCostColorClasses());\r\n    }\r\n\r\n    if (supportingTextSlot) {\r\n      supportingTextSlot.classList.add(this.getSupportingTextClasses());\r\n      supportingTextSlot.classList.add('supporting_text');\r\n    }\r\n  }\r\n\r\n  private renderIcon() {\r\n    switch (this.type) {\r\n      case 'avatar':\r\n        return (\r\n          <gb-avatar class=\"icon-md\" size=\"md\" placeholder={false} icon=\"user\">\r\n            <img src=\"build/assets/avatar_pic.jpg\" slot=\"image\"></img>\r\n          </gb-avatar>\r\n        );\r\n      case 'payment_icon':\r\n        return (\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"46\" height=\"32\" viewBox=\"0 0 46 32\" fill=\"none\">\r\n            <rect x=\"0.5\" y=\"0.5\" width=\"45\" height=\"31\" rx=\"5.5\" fill=\"white\" />\r\n            <rect x=\"0.5\" y=\"0.5\" width=\"45\" height=\"31\" rx=\"5.5\" stroke=\"#F8FAFC\" />\r\n            <path\r\n              fill-rule=\"evenodd\"\r\n              clip-rule=\"evenodd\"\r\n              d=\"M14.3336 21.1444H11.5872L9.52784 13.0565C9.43009 12.6845 9.22255 12.3556 8.91725 12.2006C8.15535 11.811 7.31579 11.501 6.3999 11.3446V11.0332H10.824C11.4346 11.0332 11.8925 11.501 11.9689 12.0442L13.0374 17.8782L15.7824 11.0332H18.4524L14.3336 21.1444ZM19.9789 21.1444H17.3852L19.5209 11.0332H22.1146L19.9789 21.1444ZM25.4702 13.8343C25.5465 13.2898 26.0044 12.9784 26.5387 12.9784C27.3783 12.9002 28.2928 13.0566 29.0561 13.4448L29.514 11.2678C28.7508 10.9564 27.9112 10.8 27.1493 10.8C24.6319 10.8 22.8002 12.2006 22.8002 14.1444C22.8002 15.6231 24.0977 16.3995 25.0136 16.8673C26.0044 17.3337 26.3861 17.6451 26.3097 18.1114C26.3097 18.811 25.5465 19.1224 24.7846 19.1224C23.8687 19.1224 22.9528 18.8892 22.1146 18.4997L21.6567 20.678C22.5725 21.0662 23.5634 21.2226 24.4793 21.2226C27.3019 21.2994 29.0561 19.9002 29.0561 17.8001C29.0561 15.1553 25.4702 15.0003 25.4702 13.8343ZM38.1332 21.1444L36.0738 11.0332H33.8618C33.4038 11.0332 32.9459 11.3446 32.7932 11.811L28.9797 21.1444H31.6497L32.1826 19.667H35.4632L35.7685 21.1444H38.1332ZM34.2434 13.7562L35.0053 17.5669H32.8696L34.2434 13.7562Z\"\r\n              fill=\"#172B85\"\r\n            />\r\n          </svg>\r\n        );\r\n      case 'icon_simple':\r\n        return <div class={`icon ${this.state}`} innerHTML={this.leadingIconSvg}></div>;\r\n      case 'radio_button':\r\n        return <gb-checkbox size={this.size} type=\"radio\" state={this.state} checked={this.selected}></gb-checkbox>;\r\n      case 'checkbox':\r\n        return <gb-checkbox size={this.size} type=\"checkbox\" state={this.state} checked={this.selected}></gb-checkbox>;\r\n    }\r\n  }\r\n\r\n  // Toggle selected state on checkbox click\r\n  private toggleSelection() {\r\n    if (this.state === 'default') {\r\n      this.selected = !this.selected;\r\n    }\r\n\r\n    this.groupItemClicked.emit(this.selected);\r\n  }\r\n\r\n  render() {\r\n    return [\r\n      <div class={`checkbox_group_item ${this.size} ${this.state} ${this.selected ? 'selected' : ''} ${this.breakpoint}`} onClick={() => this.toggleSelection()}>\r\n        <div class=\"item-content\">\r\n          {this.renderIcon()}\r\n          <div class=\"text-container\">\r\n            <div class={`label-cost ${this.type}`}>\r\n              <slot name=\"label\"></slot>\r\n              {this.showCost && <slot name=\"cost\"></slot>}\r\n            </div>\r\n            {this.type === 'payment_icon' ? (\r\n              <div class=\"buttons\">\r\n                <gb-button size={this.size} hierarchy=\"link_gray\" icon=\"default\" state={this.state}>\r\n                  <p>Set as default</p>\r\n                </gb-button>\r\n                <gb-button size={this.size} hierarchy=\"link_color\" icon=\"default\" state={this.state}>\r\n                  <p>Edit</p>\r\n                </gb-button>\r\n              </div>\r\n            ) : (\r\n              <slot name=\"supporting_text\"></slot>\r\n            )}\r\n            <gb-button class=\"button\" size=\"lg\" state={this.state} hierarchy=\"link_color\" icon=\"default\" onClick={() => this.onButtonClicked()}>\r\n              <p>{this.buttonText}</p>\r\n            </gb-button>\r\n          </div>\r\n        </div>\r\n        {this.type === 'icon_simple' || this.type === 'avatar' || this.type === 'payment_icon' ? (\r\n          <div class={`checkbox_container`}>\r\n            <gb-checkbox type={this.checkboxType} size={this.size} state={this.state} checked={this.selected}></gb-checkbox>\r\n          </div>\r\n        ) : null}\r\n      </div>,\r\n    ];\r\n  }\r\n}\r\n","@import './../../global/global.css';\r\n\r\n.online_icon{\r\n    border: 1.5px solid var(--color-boarder-inverse, #FFFFFF);\r\n    border-radius: var(--rounded-full);\r\n}\r\n\r\n/* Online Indicator States */\r\n.online_icon.offline{\r\n    background-color: var(--color-background-gray, #CDD5DF);\r\n}\r\n\r\n.online_icon.online{\r\n    background-color: var(--color-icon-success, #079455);\r\n}\r\n\r\n/* Online Indicator Sizes */\r\n.online_icon.xxs{\r\n    width: 0.25rem;\r\n    height: 0.25rem;\r\n}\r\n\r\n.online_icon.xs{\r\n    width: 0.375rem;\r\n    height: 0.375rem;\r\n}\r\n\r\n.online_icon.sm{\r\n    width: var(--spacing-2);\r\n    height: var(--spacing-2);\r\n}\r\n\r\n.online_icon.md{\r\n    width: 0.625rem;\r\n    height: 0.625rem;\r\n}\r\n\r\n.online_icon.lg{\r\n    width: var(--spacing-3);\r\n    height: var(--spacing-3);\r\n}\r\n\r\n.online_icon.xl{\r\n    width: 0.875rem;\r\n    height: 0.875rem;\r\n}\r\n\r\n.online_icon.xl2{\r\n    width: var(--spacing-4);\r\n    height: var(--spacing-4);\r\n}\r\n\r\n/* Verified Tick Sizes */\r\n.verified.xxs{\r\n    width: 0.375rem;\r\n    height: 0.375rem;\r\n}\r\n\r\n.verified.xs{\r\n    width: 0.625rem;\r\n    height: 0.625rem;\r\n}\r\n\r\n.verified.sm{\r\n    width: var(--spacing-3);\r\n    height: var(--spacing-3);\r\n}\r\n\r\n.verified.md{\r\n    width: 0.875rem;\r\n    height: 0.875rem;\r\n}\r\n\r\n.verified.lg{\r\n    width: var(--spacing-4);\r\n    height: var(--spacing-4);\r\n}\r\n\r\n.verified.xl{\r\n    width: 1.125rem;\r\n    height: 1.125rem;\r\n}\r\n\r\n.verified.xl2{\r\n    width: var(--spacing-5);\r\n    height: var(--spacing-5);\r\n}\r\n\r\n.verified.xl3{\r\n    width: var(--spacing-6);\r\n    height: var(--spacing-6);\r\n}\r\n\r\n.verified.xl4{\r\n    width: var(--spacing-7);\r\n    height: var(--spacing-7);\r\n}\r\n\r\n.verified.profile_sm{\r\n    width: var(--spacing-5);\r\n    height: var(--spacing-5);\r\n    position: absolute;\r\n    bottom: 0.15rem;\r\n    right: 0.01rem;\r\n}\r\n\r\n.verified.profile_md{\r\n    width: var(--spacing-6);\r\n    height: var(--spacing-6);\r\n    position: absolute;\r\n    bottom: 0.25rem;\r\n    right: 0.2rem;\r\n}\r\n\r\n.verified.profile_lg{\r\n    width: var(--spacing-7);\r\n    height: var(--spacing-7);\r\n    position: absolute;\r\n    bottom: 0.5rem;\r\n    right: 0.2rem;\r\n}\r\n\r\n/* Company Icon Sizes */\r\n.company.xs{\r\n    width: 0.25rem;\r\n    height: 0.25rem;\r\n}\r\n\r\n.company.xs{\r\n    width: 0.625rem;\r\n    height: 0.625rem;\r\n}\r\n\r\n.company.sm{\r\n    width: 0.75rem;\r\n    height: var(--spacing-3);\r\n}\r\n\r\n.company.md{\r\n    width: 0.875rem;\r\n    height: 0.875rem;\r\n}\r\n\r\n.company.lg{\r\n    width: 1rem;\r\n    height: var(--spacing-4);\r\n}\r\n\r\n.company.xl{\r\n    width: 1.125rem;\r\n    height: 1.125rem;\r\n}\r\n\r\n.company.xl2{\r\n    width: 1.25rem;\r\n    height: var(--spacing-5);\r\n}","import { Component, h, Prop } from \"@stencil/core\";\r\nimport { GeneralSizes, OnlineIndicatorStates } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n    tag: 'gb-status-indicator',\r\n    styleUrl: 'gb-status-indicator.css',\r\n    shadow: true\r\n})\r\n\r\nexport class GbStatusIndicator {\r\n    @Prop() statusIcon: string = '';\r\n    @Prop() size: GeneralSizes;\r\n    @Prop() state: OnlineIndicatorStates = OnlineIndicatorStates.Offline;\r\n    @Prop() indicatorStateClass: string = this.state;\r\n\r\n    render() {\r\n        return [\r\n          <div>\r\n            {this.statusIcon === 'online_indicator' && <div class={`online_icon ${this.size} ${this.indicatorStateClass}`}></div>}\r\n            {this.statusIcon === 'verified' && (\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" class={`verified ${this.size}`}>\r\n                <g clip-path=\"url(#clip0_0_21453)\">\r\n                  <path\r\n                    d=\"M24.7109 5.66715C25.0148 6.40217 25.5982 6.98642 26.3328 7.29145L28.9086 8.35837C29.6436 8.66285 30.2277 9.24688 30.5321 9.98196C30.8366 10.717 30.8366 11.543 30.5321 12.2781L29.466 14.852C29.1614 15.5874 29.1609 16.4142 29.467 17.1492L30.5313 19.7224C30.6822 20.0865 30.7599 20.4767 30.76 20.8708C30.7601 21.265 30.6825 21.6553 30.5316 22.0194C30.3808 22.3835 30.1597 22.7143 29.881 22.993C29.6022 23.2716 29.2713 23.4926 28.9072 23.6433L26.3332 24.7095C25.5982 25.0134 25.0139 25.5968 24.7089 26.3314L23.642 28.9071C23.3375 29.6422 22.7535 30.2262 22.0184 30.5307C21.2833 30.8352 20.4574 30.8352 19.7223 30.5307L17.1484 29.4646C16.4133 29.1608 15.5876 29.1614 14.853 29.4663L12.2772 30.5317C11.5425 30.8355 10.7173 30.8352 9.98284 30.531C9.24835 30.2267 8.66466 29.6434 8.35997 28.9091L7.29273 26.3326C6.98881 25.5975 6.40543 25.0133 5.67087 24.7083L3.09509 23.6413C2.36033 23.337 1.77648 22.7533 1.47188 22.0187C1.16729 21.284 1.16688 20.4585 1.47073 19.7235L2.53689 17.1496C2.84062 16.4145 2.84 15.5888 2.53517 14.8542L1.47054 12.2766C1.3196 11.9125 1.24188 11.5222 1.24181 11.1281C1.24175 10.734 1.31935 10.3437 1.47017 9.97956C1.621 9.61544 1.8421 9.2846 2.12083 9.00595C2.39957 8.72731 2.73047 8.50632 3.09465 8.35561L5.66858 7.28945C6.40297 6.98579 6.98687 6.40316 7.29212 5.66944L8.35904 3.09366C8.66352 2.35857 9.24754 1.77455 9.98263 1.47007C10.7177 1.16559 11.5436 1.16559 12.2787 1.47007L14.8527 2.53623C15.5878 2.83996 16.4134 2.83934 17.148 2.5345L19.7249 1.47172C20.4599 1.16741 21.2856 1.16748 22.0206 1.4719C22.7555 1.77632 23.3395 2.36017 23.644 3.09507L24.7112 5.67161L24.7109 5.66715Z\"\r\n                    fill=\"#0086C9\"\r\n                  />\r\n                  <path d=\"M10 18.1818C10 18.1818 11.2857 18.1818 13 22C13 22 17.7647 12 22 10\" stroke=\"white\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                </g>\r\n                <defs>\r\n                  <clipPath id=\"clip0_0_21453\">\r\n                    <rect width=\"32\" height=\"32\" fill=\"white\" />\r\n                  </clipPath>\r\n                </defs>\r\n              </svg>\r\n            )}\r\n            {this.statusIcon === 'company' && (\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" class={`company ${this.size}`}>\r\n                <path\r\n                  d=\"M18.8322 3.70039C16.9123 2.11995 14.5039 1.25399 12.0172 1.25001C10.6041 1.24776 9.20439 1.52413 7.89818 2.06333C6.59198 2.60252 5.4049 3.39397 4.40485 4.39237C2.64504 6.1493 1.54876 8.462 1.30275 10.9365C1.05674 13.411 1.67622 15.8943 3.05566 17.9633C4.43511 20.0323 6.48919 21.5591 8.86802 22.2836C11.2469 23.0081 13.8033 22.8855 16.1019 21.9367C18.4004 20.9878 20.299 19.2715 21.474 17.0799C22.6491 14.8884 23.0281 12.3572 22.5464 9.91759C22.0647 7.47798 20.7521 5.28082 18.8322 3.70039Z\"\r\n                  fill=\"#FF0033\"\r\n                  stroke=\"white\"\r\n                  stroke-width=\"1.5\"\r\n                />\r\n                <path\r\n                  fill-rule=\"evenodd\"\r\n                  clip-rule=\"evenodd\"\r\n                  d=\"M12.8942 13.7488V11.865L15.2835 11.8807C15.5231 11.8822 15.7598 11.9336 15.9785 12.0314C16.1973 12.1293 16.3933 12.2715 16.5541 12.449C16.715 12.6266 16.8373 12.8357 16.9131 13.063C16.989 13.2903 17.0168 13.5308 16.9948 13.7694C16.9948 16.4275 12.901 16.9969 12.8973 13.7488M12.8973 8.75316C17.3054 6.44066 17.6942 11.5213 15.0323 11.2788H12.886L12.8973 8.75316ZM16.7385 11.5113C19.8985 10.3013 17.2573 5.5894 12.0854 8.5044C11.5544 8.07132 10.9218 7.78073 10.2473 7.66004C8.96979 7.40066 7.25604 7.62628 6.29479 8.52378L6.75917 8.97941C7.2569 8.55053 7.86627 8.27194 8.51626 8.17611C9.16625 8.08028 9.83009 8.17117 10.4304 8.43816C10.6321 8.53335 10.8098 8.67262 10.9505 8.8457C11.0911 9.01879 11.191 9.22127 11.2429 9.43817L11.266 13.7669C11.0785 16.7738 7.20354 16.5413 7.20354 13.7669V11.8682H10.2492V11.295H5.59729V13.1644C5.60917 16.7175 9.93104 17.315 12.0717 15.5863C12.9471 16.2353 14.0184 16.5649 15.1073 16.52C18.9442 16.4938 19.7323 12.3563 16.7273 11.5144L16.7385 11.5113Z\"\r\n                  fill=\"white\"\r\n                />\r\n              </svg>\r\n            )}\r\n          </div>,\r\n        ];\r\n    }\r\n}"],"mappings":"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","ignoreList":[]}

package/dist/globuscomponents/p-25d3db65.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as e,h as s,F as i,g as a}from"./p-Dlqa7tPI.js";const c=".toggle_div{display:flex;justify-content:space-between;width:fit-content}.toggle_div.sm{gap:var(--spacing-2)}.toggle_div.md{gap:var(--spacing-3)}.text{display:flex;flex-direction:column;justify-content:center;gap:var(--spacing-2)}.text.div_centered{padding-bottom:0.2rem}::slotted(p){color:var(--color-text, #4B5565)}";const d=class{constructor(s){t(this,s);this.toggleClicked=e(this,"toggleClicked");this.text=false;this.supportingText=false;this.pressed=false;this.position="right"}getMainTextClass(){switch(this.size){case"sm":return`text-sm-medium`;case"md":return`text-md-medium`}}getSupportingTextClass(){switch(this.size){case"sm":return"text-sm-regular";case"md":return"text-md-regular"}}onToggle(t){this.toggleClicked.emit(t.detail)}componentDidLoad(){const t=this.el.querySelector('[slot="main_text"]');const e=this.el.querySelector('[slot="supporting_text"]');const s=this.el.querySelector(".text");if(t){t.classList.add(this.getMainTextClass())}if(e){e.classList.add(this.getSupportingTextClass())}if(s){if(!this.supportingText){s.classList.add("div_centered")}}}render(){return s("div",{key:"34b582c3ebae06e4e0b5b3058c70ad409cdba578",class:`toggle_div ${this.size}`},this.position==="left"&&s(i,null,this.text&&s("div",{key:"b94f328b7595279871afaa85bc1ca82eb4d9feef",class:"text"},s("slot",{key:"ca1eb78d281999bd4654f9235e6628d9c9953f02",name:"main_text"}),this.supportingText&&s("slot",{key:"d55ab7651a5cb78365c452e37c886f453fc6344c",name:"supporting_text"}))),s("div",{key:"405f576d6669da6eb72c80ed7443ee27f51dddc5",class:"toggle_base"},s("gb-toggle-base",{key:"f5acbd4ba497ab5a50d6e36b5b1fbc29e90593f7",size:this.size,state:this.state,pressed:this.pressed,onToggleClicked:this.onToggle.bind(this)})),this.position==="right"&&s(i,null,this.text&&s("div",{key:"516ca6d6d32f234ba29b9d31ab7f6f255a2c6bb7",class:"text"},s("slot",{key:"47f0698e8739a8235ce5727662fbebe3c58e21ef",name:"main_text"}),this.supportingText&&s("slot",{key:"c558a70b72ef4aa727ab5494942fcb9b25044931",name:"supporting_text"}))))}get el(){return a(this)}};d.style=c;export{d as gb_toggle};
-//# sourceMappingURL=p-25d3db65.entry.js.map