globuswebcomponents 0.3.0 → 0.3.1

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

@@ -1 +0,0 @@
-{"version":3,"names":["gbBtnCss","GbBtnStyle0","GbButton","componentWillLoad","buttonSlot","this","el","querySelector","classList","add","getButtonTextClasses","getButtonClasses","button","size","hierarchy","destructive","disabled","state","default","icon","only","renderLeadingIcon","leadingIconSvg","h","class","innerHTML","iconLeadingSwap","renderTrailingIcon","trailingIconSvg","iconTrailingSwap","render","key","iconLeading","iconTrailing","gbButtonCss","GbButtonStyle0","MyButton","testTooltipCss","TestTooltipStyle0","TestTooltip","componentDidLoad","mainTextSlot","supportingTextSlot","toggleTooltip","visible","getArrowClass","showArrow","arrowPosition","name"],"sources":["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/test-tooltip/test-tooltip.css?tag=test-tooltip&encapsulation=shadow","src/components/test-tooltip/test-tooltip.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n@import './../../global/spacing.css';\r\n@import './../../global/typography.css';\r\n\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: space-between;\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_gray: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, #CDD5DF);\r\n  color: var(--color-text-disabled, #CDD5DF);\r\n}\r\n\r\nbutton.secondary_gray.disabled,\r\nbutton.secondary_color.disabled{\r\n  --icon-color: var(--color-icon-disabled, #CDD5DF);\r\n  color: var(--color-text-disabled, #CDD5DF);\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, #CDD5DF);\r\n  color: var(--color-text-disabled, #CDD5DF);\r\n}\r\n","import { Component, Element, 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' | 'hover' | 'disabled' | 'pressed';\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    }\r\n  }\r\n\r\n  // async loadIcon(iconName: string, type: 'leading' | 'trailing') {\r\n  //   const iconPath = getAssetPath(`./assets/${iconName}.svg`);\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    };\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 this.leadingIconSvg ? <div class={`icon left-icon ${this.size}`} innerHTML={this.iconLeadingSwap}></div> : null;\r\n  }\r\n\r\n  renderTrailingIcon() {\r\n    return this.trailingIconSvg ? <div class=\"icon right-icon\" innerHTML={this.iconTrailingSwap}></div> : null;\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' && <slot></slot>}\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@import './../../global/spacing.css';\r\n@import './../../global/typography.css';\r\n\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: space-between;\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_gray: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, #CDD5DF);\r\n  color: var(--color-text-disabled, #CDD5DF);\r\n}\r\n\r\nbutton.secondary_gray.disabled,\r\nbutton.secondary_color.disabled{\r\n  --icon-color: var(--color-icon-disabled, #CDD5DF);\r\n  color: var(--color-text-disabled, #CDD5DF);\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, #CDD5DF);\r\n  color: var(--color-text-disabled, #CDD5DF);\r\n}\r\n","import { Component, Element, h, Prop, State } from '@stencil/core';\r\nimport { GeneralHierarchies, GeneralSizes } 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: ['assets'],\r\n})\r\nexport class MyButton {\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' | 'hover' | 'disabled' | 'pressed';\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    }\r\n  }\r\n\r\n  // async loadIcon(iconName: string, type: 'leading' | 'trailing') {\r\n  //   const iconPath = getAssetPath(`./assets/${iconName}.svg`);\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    };\r\n  }\r\n\r\n  getButtonTextClasses() {\r\n    switch (this.size) {\r\n        case 'xl2' : return 'text-lg-semi-bold';\r\n        case 'xl' : return 'text-md-semi-bold';\r\n        case 'lg' : return 'text-md-semi-bold';\r\n        case 'md' : return 'text-sm-semi-bold';\r\n        case 'sm' : return 'text-sm-semi-bold';\r\n    }\r\n  }\r\n\r\n  renderLeadingIcon() {\r\n    return this.leadingIconSvg ? <div class={`icon left-icon ${this.size}`} innerHTML={this.iconLeadingSwap}></div> : null;\r\n  }\r\n\r\n  renderTrailingIcon() {\r\n    return this.trailingIconSvg ? <div class=\"icon right-icon\" innerHTML={this.iconTrailingSwap}></div> : null;\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' && <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@import './../../global/spacing.css';\r\n@import './../../global/typography.css';\r\n\r\n.tooltip-container {\r\n  position: relative;\r\n  display: inline-block;\r\n}\r\n \r\n.tooltip {\r\n  position: absolute;\r\n  background-color: var(--color-surface-bold, #FCFCFC);\r\n    border: 0.5px solid var(--color-border-subtler, #E3E8EF);\r\n    border-radius: var(--rounded-sm);\r\n    box-shadow: var(--shadow-sm);\r\n  color: #333;\r\n  padding: 8px;\r\n  white-space: nowrap;\r\n  z-index: 10;\r\n}\r\n \r\n.tooltip-content {\r\n  font-size: 14px;\r\n  color: #333;\r\n}\r\n \r\n.arrow {\r\n  width: 0;\r\n  height: 0;\r\n  border-style: solid;\r\n  position: absolute;\r\n}\r\n\r\n.arrow::before {\r\n  content: '';\r\n  position: absolute;\r\n  width: 0;\r\n  height: 0;\r\n  border-style: solid;\r\n}\r\n \r\n.arrow.bottom-center {\r\n  top: 100%;\r\n  left: 50%;\r\n  border-width: 8px 8px 0 8px;\r\n  border-color: #fff transparent transparent transparent;\r\n  transform: translateX(-50%);\r\n}\r\n \r\n.arrow.left {\r\n  top: 50%;\r\n  right: 100%;\r\n  border-width: 6px 0 6px 6px;\r\n  border-color: transparent transparent transparent #E3E8EF;\r\n  transform: translateY(-50%) rotate(180deg);\r\n}\r\n\r\n.arrow.left::before {\r\n  left: -8px;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n  border-width: 7.5px 0 7.5px 7.5px;\r\n  border-color: transparent transparent transparent #fff;\r\n}\r\n \r\n.arrow.right {\r\n  top: 50%;\r\n  left: 100%;\r\n  border-width: 8px 8px 8px 0;\r\n  border-color: transparent #fff transparent transparent;\r\n  transform: translateY(-50%);\r\n}\r\n \r\n.arrow-right::before {\r\n  right: -8px;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n  border-width: 8px 8px 8px 0;\r\n  border-color: transparent #d3d3d3 transparent transparent;\r\n}\r\n\r\n.arrow.top-left {\r\n  bottom: 100%;\r\n  left: 0;\r\n  border-width: 0 8px 8px 8px;\r\n  border-color: transparent transparent #fff transparent;\r\n}\r\n \r\n.arrow.top-right {\r\n  bottom: 100%;\r\n  right: 0;\r\n  border-width: 0 8px 8px 8px;\r\n  border-color: transparent transparent #fff transparent;\r\n}","import { Component, Element, Prop, State, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: 'test-tooltip',\r\n  styleUrl: 'test-tooltip.css',\r\n  shadow: true,\r\n})\r\nexport class TestTooltip {\r\n  @Prop() showArrow: boolean = true;\r\n  @Prop() arrowPosition: 'bottom-center' | 'left' | 'right' | 'top-left' | 'top-right' = 'bottom-center';\r\n\r\n  @State() visible: boolean = true;\r\n  @Element() el: HTMLElement;\r\n\r\n  componentDidLoad() {\r\n    const mainTextSlot = this.el.querySelector('[slot=\"tooltip-content\"]');\r\n    const supportingTextSlot = this.el.querySelector('[slot=\"supporting_text\"]');\r\n\r\n    if (mainTextSlot) {\r\n      mainTextSlot.classList.add('text-xs-semi-bold');\r\n    }\r\n\r\n    if (supportingTextSlot) {\r\n      supportingTextSlot.classList.add('text-xs-regular');\r\n    }\r\n  }\r\n\r\n  toggleTooltip() {\r\n    this.visible = !this.visible;\r\n  }\r\n\r\n  getArrowClass() {\r\n    return this.showArrow ? `arrow ${this.arrowPosition}` : '';\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"tooltip-container\">\r\n        <slot />\r\n        {this.visible && (\r\n          <div class=\"tooltip\">\r\n            <div class={this.getArrowClass()}></div>\r\n            <div class=\"tooltip-content\">\r\n              <slot name=\"tooltip-content\" />\r\n            </div>\r\n          </div>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}"],"mappings":"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","ignoreList":[]}