globuswebcomponents 2.2.0 → 2.2.2

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

@@ -0,0 +1 @@
+{"version":3,"names":["gbActionPanelCss","GbActionPanel","constructor","hostRef","this","showCloseButton","showSelectedRows","showCheckbox","firstButton","firstButtonIconLeading","firstButtonIconTrailing","secondButton","secondButtonIconLeading","secondButtonIconTrailing","thirdButton","thirdButtonIconLeading","thirdButtonIconTrailing","showSubmitButton","firstButtonText","secondButtonText","thirdButtonText","showDraftButton","submitButtonText","showAmount","showFee","amount","fee","checked","componentDidLoad","selectedRows","el","querySelector","label","classList","add","updateButtonState","newValue","internalNextButtonState","componentWillRender","nextButtonState","onCheckboxClicked","event","detail","checkboxClicked","emit","onFirstButtonClicked","firstButtonState","firstButtonClicked","onSecondButtonClicked","secondButtonState","secondButtonClicked","onThirdButtonClicked","thirdButtonState","thirdButtonClicked","onPreviousButtonClicked","previousButtonClicked","onSaveAsDraft","saveAsDraft","draftButton","onSubmitClicked","submitButtonClicked","onNextButtonClicked","nextButtonClicked","render","h","key","class","type","size","color","name","state","StateEnum","Default","text","bind","slot","hierarchy","icon","onClick","previousButtonState","ref","gbAvatarCss","GbAvatar","placeholder","statusIcon","OnlineIndicatorStates","Online","showBorder","weight","BorderWeights","Light","colorClasses","getInitialsSize","setWeight","Regular","VeryLight","applyColorToInitials","getRandomColorClass","randomIndex","Math","floor","random","length","slottedInitials","assignedColorClass","componentWillLoad","toLowerCase","classes","xmlns","width","height","viewBox","fill","d","gbAvatarContrastInnerBorderCss","GbAvatarContrastInnerBorder","Heavy","gbBtnCss","GbButton","destructive","iconLeading","iconTrailing","leadingIconSvg","trailingIconSvg","iconLeadingSwap","loadIcon","iconTrailingSwap","buttonSlot","getButtonTextClasses","iconName","iconPath","getAssetPath","response","fetch","svg","getButtonClasses","button","disabled","default","only","renderLeadingIcon","innerHTML","renderTrailingIcon","gbButtonCss","internalButtonState","oneicon","gbButtonCloseCss","GbButtonClose","gbButtonGroupCss","GbButtonGroup","items","internalItems","selectedValue","handleSelect","index","map","item","i","Object","assign","current","optionChange","gbButtonGroupBaseCss","GbButtonGroupBase","iconSrc","indeterminate","gbCheckboxCss","GbCheckbox","supportingText","getMainTextClass","getSupportingTextClass","mainTextSlot","supportingTextSlot","gbCheckboxBaseCss","GbCheckboxBase","renderSVG","renderCheckbox","renderCircle","renderRadio","stroke","x","y","rx","cx","cy","r","toggleCheckboxState","toggleCheckCircleState","toggleRadioButtonState","gbEmptyStateCss","GbEmptyState","message","description","cta","window","innerWidth","handleResize","updateButtonSize","addEventListener","patternSrc","illustrationSrc","src","alt","ctaButtonClicked","gbFeaturedIconCss","GbFeaturedIcon","gbHelpTooltipCss","GbHelpTooltip","showHelpTooltip","showArrow","showSupportingText","onMouseEnter","onMouseLeave","arrow","gbInputDropdownCss","GbInputDropdown","showLabel","hintText","showLeadingIcon","iconSwap","leadingIcon","value","showSearchInput","errorText","loading","dropdownOpen","selectedItems","unselectedItems","internalLoading","clearSelection","selectedItem","clearInput","inputRef","inputValue","inputValueChanged","updateResultsAndShowInDropdown","newItems","onLoadingChanged","newLoading","emitInputValueToUseForSearch","searchItemsInDropdownMenu","searchItem","searchResults","filter","includes","toString","watchDestructive","disconnectedCallback","document","removeEventListener","handleClickOutside","contains","target","toggleDropdown","stopPropagation","isItemSelected","isObject","some","getAvatarSize","sortDropdownItems","menuItems","sort","a","b","selected","handleItemSelect","selectMultipleItems","singleItemSelect","dropdownItemSelected","isSelected","handleTagRemove","Array","isArray","objectValues","val","primitiveValues","emptyStateBackground","illustration","style","charAt","toUpperCase","slice","e","Fragment","split","part","onInput","action","join","_a","username","showHelpIcon","menuPosition","dropdownRef","labelText","idOfInput","onInputValueChanged","showHintText","gbInputDropdownMenuItemCss","GbInputDropdownMenuItem","nameSlot","initialsSlot","handleClick","dropdownItemClicked","checkbox","role","id","gbInputFieldCss","GbInputField","inputType","showPlaceholder","showValidation","showCountryIcon","options","isReadOnly","results","required","tags","isPasswordVisible","showDropdown","paddingLeft","paddingTop","show","showSpinner","minWidth","formAssociatedCallback","internals","setValidity","formResetCallback","setFormValue","formDisabledCallback","runValidation","trim","valueMissing","shadowRoot","handleTagInput","setTimeout","updateInputWidth","selectDropdownItem","objectName","console","log","updateStyles","resultsDisplayElement","resultsWidth","offsetWidth","inputWidth","inputElement","exportSelectedStaff","onButtonClicked","buttonClicked","handleInput","togglePasswordVisibility","optionsChanged","newOptions","option","isTagItemSelected","updateSelectedItems","JSON","stringify","textSlot","hiddenSpan","input","calculatedWidth","max","handleWrapperClick","focus","minLength","maxLength","onBlur","inputGroupElement","readOnly","objectValue","gbPasswordButtonCss","GbPasswordButton","gbStatusIndicatorCss","GbStatusIndicator","Offline","indicatorStateClass","gbStepBaseCss","GbStepBase","connector","showContent","featuredIconLeftLabelClasses","featuredIconLeftTextClasses","internalState","internalStatus","status","onStatusChange","_oldValue","onStateChange","gbStepperHorizontalIconsCenteredCss","GbStepperHorizontalIconsCentered","steps","breakpoint","step","gbTagCss","GbTag","onTagClose","labelSlot","flagSwap","gbTagCheckboxCss","GbTagCheckbox","gbTagCloseCss","GbTagClose","gbTagCountCss","GbTagCount","gbTooltipCss","GbTooltip","noWrap","getArrowClass"],"sources":["src/components/gb-action-panel/gb-action-panel.css?tag=gb-action-panel&encapsulation=shadow","src/components/gb-action-panel/gb-action-panel.tsx","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-button-close/gb-button-close.css?tag=gb-button-close&encapsulation=shadow","src/components/gb-button-close/gb-button-close.tsx","src/components/gb-button-group/gb-button-group.css?tag=gb-button-group&encapsulation=shadow","src/components/gb-button-group/gb-button-group.tsx","src/components/gb-button-group-base/gb-button-group-base.css?tag=gb-button-group-base&encapsulation=shadow","src/components/gb-button-group-base/gb-button-group-base.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-empty-state/gb-empty-state.css?tag=gb-empty-state&encapsulation=shadow","src/components/gb-empty-state/gb-empty-state.tsx","src/components/gb-featured-icon/gb-featured-icon.css?tag=gb-featured-icon&encapsulation=shadow","src/components/gb-featured-icon/gb-featured-icon.tsx","src/components/gb-help-tooltip/gb-help-tooltip.css?tag=gb-help-tooltip&encapsulation=shadow","src/components/gb-help-tooltip/gb-help-tooltip.tsx","src/components/gb-input-dropdown/gb-input-dropdown.css?tag=gb-input-dropdown&encapsulation=shadow","src/components/gb-input-dropdown/gb-input-dropdown.tsx","src/components/gb-input-dropdown-menu-item/gb-input-dropdown-menu-item.css?tag=gb-input-dropdown-menu-item&encapsulation=shadow","src/components/gb-input-dropdown-menu-item/gb-input-dropdown-menu-item.tsx","src/components/gb-input-field/gb-input-field.css?tag=gb-input-field&encapsulation=shadow","src/components/gb-input-field/gb-input-field.tsx","src/components/gb-password-button/gb-password-button.css?tag=gb-password-button&encapsulation=shadow","src/components/gb-password-button/gb-password-button.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","src/components/gb-step-base/gb-step-base.css?tag=gb-step-base&encapsulation=shadow","src/components/gb-step-base/gb-step-base.tsx","src/components/gb-stepper-horizontal-icons-centered/gb-stepper-horizontal-icons-centered.css?tag=gb-stepper-horizontal-icons-centered&encapsulation=shadow","src/components/gb-stepper-horizontal-icons-centered/gb-stepper-horizontal-icons-centered.tsx","src/components/gb-tag/gb-tag.css?tag=gb-tag&encapsulation=shadow","src/components/gb-tag/gb-tag.tsx","src/components/gb-tag-checkbox/gb-tag-checkbox.css?tag=gb-tag-checkbox&encapsulation=shadow","src/components/gb-tag-checkbox/gb-tag-checkbox.tsx","src/components/gb-tag-close/gb-tag-close.css?tag=gb-tag-close&encapsulation=shadow","src/components/gb-tag-close/gb-tag-close.tsx","src/components/gb-tag-count/gb-tag-count.css?tag=gb-tag-count&encapsulation=shadow","src/components/gb-tag-count/gb-tag-count.tsx","src/components/gb-tooltip/gb-tooltip.css?tag=gb-tooltip&encapsulation=shadow","src/components/gb-tooltip/gb-tooltip.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n\r\n.action_panel_div{\r\n    display: flex;\r\n    width: 100%;\r\n    padding: var(--spacing-none) 0rem 0rem 0rem;\r\n    flex-direction: column;\r\n    justify-content: center;\r\n    align-items: flex-start;\r\n    border-top: 1px solid var(--color-border-subtler, #E3E8EF);\r\n    background: #FFFFFF;\r\n}\r\n\r\n.panel_content{\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    padding: var(--spacing-4) var(--spacing-7);\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    gap:  var(--spacing-5);\r\n    align-self: stretch;\r\n}\r\n\r\n.left_action{\r\n    display: flex;\r\n    gap: var(--spacing-5);\r\n    align-items: center;\r\n    flex-wrap: wrap;\r\n}\r\n\r\n.rows_and_close_button{\r\n    display: flex;\r\n    align-items: center;\r\n    gap: var(--spacing-5)\r\n}\r\n\r\n.amount{\r\n    display: flex;\r\n    gap: var(--spacing-2);\r\n}\r\n\r\n.amount_heading{\r\n    color: var(--color-text-subtle, #697586);\r\n}\r\n\r\n.amount_text{\r\n    color: var(--color-text, #4B5565);\r\n}\r\n\r\n.right_action{\r\n    display: flex;\r\n    flex-direction: row-reverse;\r\n    /* justify-content: flex-end; */\r\n    align-items: center;\r\n    gap: var(--spacing-5);\r\n    width: 100%;\r\n    flex: 1 0 0;\r\n}\r\n\r\n::slotted([slot=\"selected_rows\"]) {\r\n    color: var(--color-text, #4B5565);\r\n}\r\n\r\n/**/\r\n.actions{\r\n    display: flex;\r\njustify-content: space-between;\r\nalign-items: center;\r\nflex: 1 0 0;\r\n}\r\n\r\n.right{\r\n    display: flex;\r\njustify-content: flex-end;\r\nalign-items: center;\r\ngap: var(--spacing-6);\r\n}\r\n\r\n@media (max-width: 940px) {\r\n    .right_action{\r\n        flex-wrap: wrap;\r\n    }\r\n}\r\n\r\n@media (max-width: 468px) {\r\n    .panel_content{\r\n        padding: var(--spacing-4) var(--spacing-5);\r\n    }\r\n    \r\n    .three_buttons .button_divs{\r\n        width: 100%;\r\n    }\r\n\r\n    .actions{\r\n        flex-direction: column;\r\n        gap: var(--spacing-4);\r\n    }\r\n\r\n    .actions .button_divs{\r\n        width: 100%;\r\n    }\r\n\r\n    .right{\r\n        width: 100%;\r\n        gap: var(--spacing-4);\r\n    }\r\n\r\n    .actions .right .button_divs{\r\n        width: 100%;\r\n    }\r\n\r\n    .right{\r\n        flex-direction: column;\r\n    }\r\n}\r\n\r\n@media (max-width: 420px) {\r\n\r\n    .right_action{\r\n        justify-content: space-between;\r\n    }\r\n\r\n    .right_action .button_divs{\r\n        flex: 1 0 0;\r\n    }\r\n}","import { Component, Element, Event, EventEmitter, Prop, State, Watch, h } from '@stencil/core';\r\nimport { StateEnum, StateType } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-action-panel',\r\n  styleUrl: 'gb-action-panel.css',\r\n  shadow: true,\r\n})\r\nexport class GbActionPanel {\r\n  @Prop() type!: 'decision_panel' | 'form_control';\r\n  @Prop() showCloseButton: boolean = false;\r\n  @Prop() showSelectedRows: boolean = false;\r\n  @Prop() showCheckbox: boolean = false;\r\n  @Prop() firstButton: boolean = false;\r\n  @Prop() firstButtonIconLeading: string = '';\r\n  @Prop() firstButtonIconTrailing: string = '';\r\n  @Prop() secondButton: boolean = false;\r\n  @Prop() secondButtonIconLeading: string = '';\r\n  @Prop() secondButtonIconTrailing: string = '';\r\n  @Prop() thirdButton: boolean = false;\r\n  @Prop() thirdButtonIconLeading: string = '';\r\n  @Prop() thirdButtonIconTrailing: string = '';\r\n  @Prop() showSubmitButton: boolean = false;\r\n  @Prop() firstButtonText: string = '';\r\n  @Prop() secondButtonText: string = '';\r\n  @Prop() thirdButtonText: string = '';\r\n  @Prop() firstButtonState: StateType;\r\n  @Prop() secondButtonState: StateType;\r\n  @Prop() thirdButtonState: StateType;\r\n  @Prop() previousButtonState: StateType;\r\n  @Prop() nextButtonState: StateType;\r\n  @Prop() showDraftButton: boolean = false;\r\n  @Prop() submitButtonText: string = '';\r\n  @Prop() showAmount: boolean = false;\r\n  @Prop() showFee: boolean = false;\r\n  @Prop() amount: string = '';\r\n  @Prop() fee: string = '';\r\n  @State() checked: any = false;\r\n  @State() internalNextButtonState: StateType;\r\n  @Event() firstButtonClicked: EventEmitter<void>;\r\n  @Event() secondButtonClicked: EventEmitter<void>;\r\n  @Event() thirdButtonClicked: EventEmitter<void>;\r\n  @Event() previousButtonClicked: EventEmitter<void>;\r\n  @Event() saveAsDraft: EventEmitter<HTMLElement>;\r\n  @Event() submitButtonClicked: EventEmitter<void>;\r\n  @Event() nextButtonClicked: EventEmitter<void>;\r\n  @Event() checkboxClicked: EventEmitter<void>;\r\n  @Element() el: HTMLElement;\r\n\r\n  draftButton: HTMLElement;\r\n\r\n  componentDidLoad() {\r\n    const selectedRows = this.el.querySelector('[slot=\"selected_rows\"]');\r\n    const label = this.el.querySelector('[slot=\"label\"]');\r\n\r\n    if (selectedRows) {\r\n      selectedRows.classList.add('text-md-medium');\r\n    }\r\n\r\n    if (label) {\r\n      label.classList.add('text-md-medium');\r\n    }\r\n  }\r\n\r\n  @Watch('state')\r\n  updateButtonState(newValue: StateType) {\r\n    this.internalNextButtonState = newValue;\r\n  }\r\n\r\n  componentWillRender() {\r\n    this.internalNextButtonState = this.nextButtonState;\r\n  }\r\n\r\n  onCheckboxClicked(event) {\r\n    this.checked = event.detail;\r\n    this.checkboxClicked.emit(this.checked);\r\n  }\r\n\r\n  onFirstButtonClicked() {\r\n    if (this.firstButtonState === 'default') {\r\n      if (this.showCheckbox) {\r\n        this.firstButtonClicked.emit(this.checked);\r\n      } else {\r\n        this.firstButtonClicked.emit();\r\n      }\r\n    } else {\r\n      return;\r\n    }\r\n  }\r\n\r\n  onSecondButtonClicked() {\r\n    if (this.secondButtonState === 'default') {\r\n      if (this.showCheckbox) {\r\n        this.secondButtonClicked.emit(this.checked);\r\n      } else {\r\n        this.secondButtonClicked.emit();\r\n      }\r\n    }\r\n  }\r\n\r\n  onThirdButtonClicked() {\r\n    if (this.thirdButtonState === 'default') {\r\n      if (this.showCheckbox) {\r\n        this.thirdButtonClicked.emit(this.checked);\r\n      } else {\r\n        this.thirdButtonClicked.emit();\r\n      }\r\n    }\r\n  }\r\n\r\n  onPreviousButtonClicked() {\r\n    this.previousButtonClicked.emit();\r\n  }\r\n\r\n  onSaveAsDraft() {\r\n    this.saveAsDraft.emit(this.draftButton);\r\n  }\r\n\r\n  onSubmitClicked() {\r\n    this.submitButtonClicked.emit();\r\n  }\r\n\r\n  onNextButtonClicked() {\r\n    this.nextButtonClicked.emit();\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"action_panel_div\">\r\n        {this.type === 'decision_panel' && (\r\n          <div class=\"panel_content\">\r\n            <div class=\"left_action\">\r\n              <div class=\"rows_and_close_button\">\r\n                {this.showCloseButton && <gb-button-close size=\"md\" color=\"primary\"></gb-button-close>}\r\n                {this.showSelectedRows && <slot name=\"selected_rows\"></slot>}\r\n              </div>\r\n              {this.showCheckbox && (\r\n                <gb-checkbox size=\"md\" state={StateEnum.Default} type=\"checkbox\" text={true} supporting-text={false} onCheckboxClicked={this.onCheckboxClicked.bind(this)}>\r\n                  <slot name=\"label\" slot=\"label\"></slot>\r\n                </gb-checkbox>\r\n              )}\r\n              {this.showAmount && (\r\n                <div class=\"amount\">\r\n                  <p class=\"amount_heading text-sm-medium\">Total amount:</p>\r\n                  <p class=\"amount_text text-lg-semi-bold\">{this.amount}</p>\r\n                </div>\r\n              )}\r\n              {this.showFee && (\r\n                <div class=\"amount\">\r\n                  <p class=\"amount_heading text-sm-medium\">Total fee:</p>\r\n                  <p class=\"amount_text text-lg-semi-bold\">{this.fee}</p>\r\n                </div>\r\n              )}\r\n            </div>\r\n            <div class={`right_action ${this.firstButton && this.secondButton && this.thirdButton && 'three_buttons'}`}>\r\n              {this.firstButton && (\r\n                <div class=\"button_divs\">\r\n                  <gb-button\r\n                    size=\"xl\"\r\n                    state={this.firstButtonState}\r\n                    hierarchy=\"primary\"\r\n                    icon=\"default\"\r\n                    icon-leading={this.firstButtonIconLeading ? true : false}\r\n                    icon-trailing={this.firstButtonIconTrailing ? true : false}\r\n                    icon-leading-swap={this.firstButtonIconLeading}\r\n                    icon-trailing-swap={this.firstButtonIconTrailing}\r\n                    onClick={() => this.onFirstButtonClicked()}\r\n                  >\r\n                    <p>{this.firstButtonText}</p>\r\n                  </gb-button>\r\n                </div>\r\n              )}\r\n              {this.secondButton && (\r\n                <div class=\"button_divs\">\r\n                  <gb-button\r\n                    size=\"xl\"\r\n                    state={this.secondButtonState}\r\n                    hierarchy=\"secondary_color\"\r\n                    icon=\"default\"\r\n                    icon-leading={this.secondButtonIconLeading ? true : false}\r\n                    icon-trailing={this.secondButtonIconTrailing ? true : false}\r\n                    icon-leading-swap={this.secondButtonIconLeading}\r\n                    icon-trailing-swap={this.secondButtonIconTrailing}\r\n                    onClick={() => this.onSecondButtonClicked()}\r\n                  >\r\n                    <p>{this.secondButtonText}</p>\r\n                  </gb-button>\r\n                </div>\r\n              )}\r\n              {this.thirdButton && (\r\n                <div class=\"button_divs\">\r\n                  <gb-button\r\n                    size=\"xl\"\r\n                    state={this.thirdButtonState}\r\n                    hierarchy=\"secondary_gray\"\r\n                    icon=\"default\"\r\n                    icon-leading={this.thirdButtonIconLeading ? true : false}\r\n                    icon-trailing={this.thirdButtonIconTrailing ? true : false}\r\n                    icon-leading-swap={this.thirdButtonIconLeading}\r\n                    icon-trailing-swap={this.thirdButtonIconTrailing}\r\n                    onClick={() => this.onThirdButtonClicked()}\r\n                  >\r\n                    <p>{this.thirdButtonText}</p>\r\n                  </gb-button>\r\n                </div>\r\n              )}\r\n            </div>\r\n          </div>\r\n        )}\r\n        {this.type === 'form_control' && (\r\n          <div class=\"panel_content\">\r\n            <div class={`actions ${this.showDraftButton ? 'draft_shown' : ''}`}>\r\n              <div class=\"button_divs\">\r\n                <gb-button\r\n                  size=\"xl\"\r\n                  state={this.previousButtonState}\r\n                  hierarchy=\"secondary_gray\"\r\n                  icon=\"default\"\r\n                  icon-leading={true}\r\n                  icon-leading-swap=\"assets/arrow-left-02.svg\"\r\n                  onClick={() => this.onPreviousButtonClicked()}\r\n                >\r\n                  <p>Previous</p>\r\n                </gb-button>\r\n              </div>\r\n              <div class=\"right\">\r\n                {this.showDraftButton && (\r\n                  <div class=\"button_divs\">\r\n                    <gb-button size=\"xl\" hierarchy=\"secondary_color\" icon=\"default\" ref={el => (this.draftButton = el)} onClick={() => this.onSaveAsDraft()}>\r\n                      <p>Save as draft</p>\r\n                    </gb-button>\r\n                  </div>\r\n                )}\r\n                {this.showSubmitButton ? (\r\n                  <div class=\"button_divs\">\r\n                    <gb-button size=\"xl\" hierarchy=\"primary\" icon=\"default\" onClick={() => this.onSubmitClicked()}>\r\n                      <p>{this.submitButtonText}</p>\r\n                    </gb-button>\r\n                  </div>\r\n                ) : (\r\n                  <div class=\"button_divs\">\r\n                    <gb-button\r\n                      size=\"xl\"\r\n                      state={this.internalNextButtonState}\r\n                      hierarchy=\"primary\"\r\n                      icon=\"default\"\r\n                      icon-trailing={true}\r\n                      icon-trailing-swap=\"assets/arrow-right-02.svg\"\r\n                      onClick={() => this.onNextButtonClicked()}\r\n                    >\r\n                      <p>Next</p>\r\n                    </gb-button>\r\n                  </div>\r\n                )}\r\n              </div>\r\n            </div>\r\n          </div>\r\n        )}\r\n      </div>\r\n    );\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.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, #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\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-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\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\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\ndiv {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: var(--spacing-none);\r\n  border-radius: var(--rounded-sm);\r\n  height: fit-content;\r\n  width: fit-content;\r\n  cursor: pointer;\r\n}\r\n\r\n/* Sizes */\r\ndiv.lg {\r\n  padding: 0.625rem;\r\n}\r\n\r\ndiv.lg svg {\r\n  width: var(--spacing-6);\r\n  height: var(--spacing-6);\r\n}\r\n\r\ndiv.md svg {\r\n  width: var(--spacing-5);\r\n  height: var(--spacing-5);\r\n}\r\n\r\ndiv.sm {\r\n  padding: var(--spacing-2);\r\n}\r\n\r\ndiv.md {\r\n  padding: 0.625rem;\r\n}\r\n\r\n/* Colors */\r\ndiv.primary,\r\ndiv.information,\r\ndiv.success,\r\ndiv.gray,\r\ndiv.warning,\r\ndiv.error,\r\ndiv.white {\r\n  background-color: transparent;\r\n}\r\n\r\ndiv.white path {\r\n  stroke: var(--color-icon-inverse, #FFFFFF);\r\n}\r\n\r\ndiv.primary path {\r\n  stroke: var(--color-icon-brandDarkBlue, #212C65);\r\n}\r\n\r\ndiv.success path {\r\n  stroke: var(--color-icon-success, #079455);\r\n}\r\n\r\ndiv.information path {\r\n  stroke: var(--color-icon-information, #064E94);\r\n}\r\n\r\ndiv.gray path {\r\n  stroke: var(--color-icon, #4b5565);\r\n}\r\n\r\ndiv.warning path {\r\n  stroke: var(--color-icon-warning, #DC6803);\r\n}\r\n\r\ndiv.error path {\r\n  stroke: var(--color-icon-danger, #B51726);\r\n}\r\n\r\n/* States */\r\ndiv.white:hover {\r\n  background-color: var(--color-background-gray-bold, #9AA4B2);\r\n}\r\n\r\ndiv.primary:hover {\r\n  background-color: var(--color-background-discovery-subtler, #E0F2FE);\r\n}\r\n\r\ndiv.primary:hover path {\r\n  stroke: var(--color-icon-brandRed, #E21B2E);\r\n}\r\n\r\ndiv.white:active {\r\n  background-color: var(--color-background-gray, #CDD5DF);\r\n}\r\n\r\ndiv.primary:active {\r\n  background-color: var(--color-background-discovery-subtlest, #F0F9FF);\r\n}\r\n\r\ndiv.information:hover {\r\n  background-color: var(--color-background-information-subtler, #C8E0F9);\r\n}\r\n\r\ndiv.information:hover path {\r\n  stroke: var(--color-icon-information-bold, #042F59);\r\n}\r\n\r\ndiv.information:active {\r\n  background-color: var(--color-background-information-subtlest, #E4F0FC);\r\n}\r\n\r\ndiv.success:hover {\r\n  background-color: var(--color-background-success-subtler, #DCFAE6);\r\n}\r\n\r\ndiv.success:hover path {\r\n  stroke: var(--color-icon-success-bold, #085D3A);\r\n}\r\n\r\ndiv.success:active {\r\n  background-color: var(--color-background-success-subtlest, #ECFDF3);\r\n}\r\n\r\ndiv.gray:hover {\r\n  background-color: var(--color-background-gray-subtler, #eef2f6);\r\n}\r\n\r\ndiv.gray:hover path {\r\n  stroke: var(--color-icon-brandRed, #e21b2e);\r\n}\r\n\r\ndiv.gray:active {\r\n  background-color: var(--color-background-gray-subtlest, #f6f8fa);\r\n}\r\n\r\ndiv.warning:hover {\r\n  background-color: var(--color-background-warning-subtler, #FEF0C7);\r\n}\r\n\r\ndiv.warning:hover path {\r\n  stroke: var(--color-icon-warning-bold, #93370D);\r\n}\r\n\r\ndiv.warning:active {\r\n  background-color: var(--color-background-warning-subtlest, #FFFAEB);\r\n}\r\n\r\ndiv.error:hover {\r\n  background-color: var(--color-background-danger-subtler, #FDE3E5);\r\n}\r\n\r\ndiv.error:hover path {\r\n  stroke: var(--color-icon-danger-bold, #8C121D);\r\n}\r\n\r\ndiv.error:active {\r\n  background-color: var(--color-background-danger-subtlest, #FEF1F2);\r\n}\r\n","import { Component, h, Prop } from '@stencil/core';\r\nimport { GeneralColors, GeneralSizes } from '../../models/reusableModels';\r\n@Component({\r\n    tag: 'gb-button-close',\r\n    styleUrl: 'gb-button-close.css',\r\n    shadow: true\r\n})\r\n\r\nexport class GbButtonClose {\r\n    @Prop() size!: GeneralSizes;\r\n    @Prop() color!: GeneralColors;\r\n\r\n    render() {\r\n        return (\r\n            <div class={`${this.size} ${this.color}`}>\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" class={`${this.size}`}>\r\n                    <path d=\"M19.0005 4.99988L5.00049 18.9999M5.00049 4.99988L19.0005 18.9999\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                </svg>\r\n            </div>\r\n        )\r\n    }\r\n}","@import './../../global/global.css';\r\n\r\n.button_group_wrapper {\r\n  display: inline-flex;\r\n  align-items: flex-start;\r\n  width: fit-content;\r\n  height: fit-content;\r\n  border-radius: 0.5rem;\r\n  border: 1px solid var(--color-border-subtle, #cdd5df);\r\n  box-shadow: var(--shadow-xs);\r\n  overflow: hidden;\r\n}\r\n","import { AttachInternals, Component, Event, EventEmitter, Prop, State, h } from '@stencil/core';\r\nimport { ButtonGroupTypes } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-button-group',\r\n  styleUrl: 'gb-button-group.css',\r\n  shadow: true,\r\n  formAssociated: true,\r\n})\r\nexport class GbButtonGroup {\r\n  @AttachInternals() internals: ElementInternals;\r\n  @Prop() items: { label: string; current?: boolean; icon?: string }[] = [\r\n    // { label: 'Male', current: true, icon: 'assets/calendar-02.svg' },\r\n    // { label: 'Female', current: false, icon: 'assets/calendar-02.svg' },\r\n    // { label: 'Hi', current: false, icon: 'assets/calendar-02.svg' },\r\n    // { label: 'Gideon', current: false, icon: 'assets/calendar-02.svg' },\r\n    // { label: 'Emmanuel', current: false, icon: 'assets/calendar-02.svg' },\r\n  ];\r\n  @Prop() icon: ButtonGroupTypes;\r\n  // @Prop() label: string = '';\r\n  @State() internalItems: { label: string; current?: boolean; icon?: string }[] = [];\r\n  @State() selectedValue: string = '';\r\n  // @Event() valueChange: EventEmitter<{ value: string; current: boolean }>;\r\n  @Event() optionChange: EventEmitter<string>;\r\n\r\n  componentWillLoad() {\r\n    this.internalItems = [...this.items];\r\n  }\r\n\r\n  handleSelect(index: number) {\r\n    const selectedValue = this.internalItems[index].label;\r\n\r\n    this.internalItems = this.internalItems.map((item, i) => ({\r\n      ...item,\r\n      current: i === index,\r\n    }));\r\n\r\n    this.selectedValue = selectedValue;\r\n\r\n    this.optionChange.emit(this.selectedValue);\r\n    // console.log(this.selectedValue)\r\n\r\n    // console.log({ value: this.selectedValue, current: this.internalItems[index].current });\r\n    // this.valueChange.emit({ value: this.selectedValue, current: this.internalItems[index].current });\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"button_group_wrapper\">\r\n        {this.internalItems.map((item, index) => (\r\n          <gb-button-group-base\r\n            key={index}\r\n            state=\"default\"\r\n            icon={this.icon}\r\n            label={item.label}\r\n            current={item.current}\r\n            onClick={() => this.handleSelect(index)}\r\n            icon-src={item.icon}\r\n          ></gb-button-group-base>\r\n        ))}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n","@import './../../global/global.css';\r\n\r\n.button_group_base_div {\r\n  display: flex;\r\n  height: 1.875rem;\r\n  padding: var(--spacing-none) var(--spacing-4);\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 0.5rem;\r\n  flex-shrink: 0;\r\n  border-right: 1px solid var(--color-border-subtle, #cdd5df);\r\n  cursor: pointer;\r\n}\r\n\r\n.button_group_base_div.leading {\r\n  height: 2.5rem;\r\n}\r\n\r\n.button_group_base_div.dot,\r\n.button_group_base_div.checkbox {\r\n  gap: 0.5rem;\r\n}\r\n\r\n.button_group_base_div.only {\r\n  width: 2.5rem;\r\n  height: 2.5rem;\r\n  padding: var(--spacing-none);\r\n}\r\n\r\n.icon {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n\r\n.icon svg {\r\n  width: 1.25rem;\r\n  height: 1.25rem;\r\n}\r\n\r\n.dott {\r\n  width: 0.625rem;\r\n  height: 0.625rem;\r\n  border-radius: var(--rounded-full);\r\n}\r\n\r\n.dott.default {\r\n  background-color: var(--color-icon-success, #079455);\r\n}\r\n\r\n.dott.disabled {\r\n  background-color: var(--color-icon-disabled, #cdd5df);\r\n}\r\n\r\n.button_group_base_div.default.false,\r\n.button_group_base_div.default.leading,\r\n.button_group_base_div.default.checkbox,\r\n.button_group_base_div.default.dot,\r\n.button_group_base_div.default.only {\r\n  background: var(--color-background-card, #ffffff);\r\n  color: var(--color-text, #4b5565);\r\n}\r\n\r\n.button_group_base_div.default.false.current,\r\n.button_group_base_div.default.leading.current,\r\n.button_group_base_div.default.checkbox.current,\r\n.button_group_base_div.default.dot.current,\r\n.button_group_base_div.default.only.current {\r\n  background-color: var(--color-background-information-subtlest, #e4f0fc);\r\n  color: var(--color-text-information, #064e94);\r\n}\r\n\r\n.button_group_base_div.default.false:hover,\r\n.button_group_base_div.default.leading:hover,\r\n.button_group_base_div.default.checkbox:hover,\r\n.button_group_base_div.default.dot:hover,\r\n.button_group_base_div.default.only:hover {\r\n  background: var(--color-background-gray-subtler, #eef2f6);\r\n  color: var(--color-text-bold, #202939);\r\n}\r\n\r\n.button_group_base_div.default.false.current:hover,\r\n.button_group_base_div.default.leading.current:hover,\r\n.button_group_base_div.default.checkbox.current:hover,\r\n.button_group_base_div.default.dot.current:hover,\r\n.button_group_base_div.default.only.current:hover {\r\n  background-color: var(--color-background-information-subtler, #c8e0f9);\r\n  color: var(--color-text-information-bold, #042f59);\r\n}\r\n\r\n.button_group_base_div.default.false:active,\r\n.button_group_base_div.default.leading:active,\r\n.button_group_base_div.default.checkbox:active,\r\n.button_group_base_div.default.dot:active,\r\n.button_group_base_div.default.only:active {\r\n  background: var(--color-background-gray-subtle, #e3e8ef);\r\n  color: var(--color-text-bold, #202939);\r\n}\r\n\r\n.button_group_base_div.default.false.current:active,\r\n.button_group_base_div.default.leading.current:active,\r\n.button_group_base_div.default.checkbox.current:active,\r\n.button_group_base_div.default.dot.current:active,\r\n.button_group_base_div.default.only.current:active {\r\n  background-color: var(--color-background-information-subtle, #9ac7f4);\r\n  color: var(--color-text-information-bold, #042f59);\r\n}\r\n\r\n.button_group_base_div.disabled,\r\n.button_group_base_div.current.disabled {\r\n  color: var(--color-text-disabled, #cdd5df);\r\n  background-color: var(--color-background-card, #ffffff);\r\n  cursor: not-allowed;\r\n  pointer-events: none;\r\n}\r\n\r\n.icon.default svg path[stroke] {\r\n  stroke: var(--color-icon, #4b5565);\r\n}\r\n\r\n.button_group_base_div:hover .icon.default svg path[stroke],\r\n.button_group_base_div:active .icon.default svg path[stroke] {\r\n  stroke: var(--color-icon-bold, #202939);\r\n}\r\n\r\n.icon.default.current svg path[stroke] {\r\n  stroke: var(--color-icon-information, #064e94);\r\n}\r\n\r\n.button_group_base_div:hover .icon.default.current svg path[stroke] {\r\n  stroke: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.icon.default svg path[fill] {\r\n  fill: var(--color-icon, #4b5565);\r\n}\r\n\r\n.button_group_base_div:hover .icon.default svg path[fill],\r\n.button_group_base_div:active .icon.default svg path[fill] {\r\n  fill: var(--color-icon-bold, #202939);\r\n}\r\n\r\n.icon.default.current svg path[fill] {\r\n  fill: var(--color-icon-information, #064e94);\r\n}\r\n\r\n.button_group_base_div:hover .icon.default.current svg path[fill],\r\n.button_group_base_div:active .icon.default.current svg path[fill] {\r\n  fill: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.icon.disabled svg path[stroke] {\r\n  stroke: var(--color-icon-disabled, #cdd5df);\r\n}\r\n\r\n.icon.disabled svg path[fill] {\r\n  fill: var(--color-icon-disabled, #cdd5df);\r\n}\r\n","import { Component, Prop, State, getAssetPath, h } from '@stencil/core';\r\nimport { ButtonGroupTypes, StateType } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-button-group-base',\r\n  styleUrl: 'gb-button-group-base.css',\r\n  shadow: true\r\n})\r\n\r\nexport class GbButtonGroupBase {\r\n  @Prop() current: boolean = false;\r\n  @Prop() icon: ButtonGroupTypes;\r\n  @Prop() state: StateType;\r\n  @Prop() label: string = '';\r\n  @Prop() iconSrc: string = '';\r\n  @State() leadingIconSvg: string = '';\r\n\r\n  async loadIcon(iconName: string) {\r\n    const iconPath = getAssetPath(`${iconName}`);\r\n    const response = await fetch(iconPath);\r\n    const svg = await response.text();\r\n    this.leadingIconSvg = svg;\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.loadIcon(this.iconSrc);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class={`button_group_base_div ${this.current ? 'current' : ''} ${this.icon} ${this.state}`}>\r\n        {this.icon === 'leading' && <div class={`icon ${this.current ? 'current' : ''} ${this.state}`} innerHTML={this.leadingIconSvg}></div>}\r\n        {this.icon === 'only' && <div class={`icon ${this.current ? 'current' : ''} ${this.state}`} innerHTML={this.leadingIconSvg}></div>}\r\n        {this.icon === 'checkbox' && (\r\n          <gb-checkbox checked={this.current} indeterminate={false} size=\"sm\" type=\"radio\" state={this.state} text={true} supporting-text={false}>\r\n            <p slot=\"label\">{this.label}</p>\r\n          </gb-checkbox>\r\n        )}\r\n        {this.icon === 'dot' && (\r\n          <div class=\"dot_div\">\r\n            <div class={`dott ${this.state}`}></div>\r\n          </div>\r\n        )}\r\n        {this.icon !== 'only' && this.icon !== 'checkbox' && <p class=\"text-sm-semi-bold\">{this.label}</p>}\r\n      </div>\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.overall_div{\r\n    width: 100%;\r\n    height: 100%;\r\n    display: flex;\r\n    justify-content: center;\r\n}\r\n\r\n.empty_state_div{\r\n    position: relative;\r\n    display: flex;\r\n    gap: var(--spacing-7);\r\n    flex-direction: column;\r\n    align-items: center;\r\n    max-width: 50rem;\r\n}\r\n\r\n.empty_state_pattern{\r\n    width: 100%;\r\n    height: 100%;\r\n}\r\n\r\n.content{\r\n    width: 100%;\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    gap: var(--spacing-5);\r\n    position: absolute;\r\n    /* left: 35%; */\r\n}\r\n\r\n.content.sm{\r\n    top: 37%;\r\n}\r\n\r\n.content.md{\r\n    top: 45%;\r\n}\r\n\r\n.illustration{\r\n    width: 40%;\r\n}\r\n\r\n.text{\r\n    display: flex;\r\n    flex-direction: column;\r\n    text-align: center;\r\n    align-items: center;\r\n    gap: var(--spacing-3);\r\n}\r\n\r\n.message{\r\n    color: var(--color-text-bold, #202939);\r\n}\r\n\r\n.description{\r\n    color: var(--color-text, #4B5565);\r\n}\r\n\r\n.button{\r\n    width: 50%;\r\n}","import { Component, Element, Event, EventEmitter, Prop, State, getAssetPath, h } from '@stencil/core';\r\nimport { GeneralSizes } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-empty-state',\r\n  styleUrl: 'gb-empty-state.css',\r\n  shadow: true,\r\n})\r\nexport class GbEmptyState {\r\n  @Prop() size: GeneralSizes;\r\n  @Prop() icon: string = '';\r\n  @Prop() message: string = '';\r\n  @Prop() description: string = '';\r\n  @Prop() cta: boolean = false;\r\n  @State() width: number = window.innerWidth;\r\n  @Element() el: HTMLElement;\r\n  @Event() ctaButtonClicked: EventEmitter<void>;\r\n\r\n  componentWillLoad() {\r\n    this.updateButtonSize();\r\n    window.addEventListener('resize', this.handleResize);\r\n  }\r\n\r\n  // componentDidLoad() {\r\n  //   const overallDiv = this.el.querySelector('.overall_div') as HTMLElement;\r\n  //   const content = this.el.querySelector('.content') as HTMLElement;\r\n\r\n  //   const observer = new ResizeObserver(([entry]) => {\r\n  //     const width = entry.contentRect.width;\r\n  //     if (width < 272) {\r\n  //       content.style.top = '37%';\r\n  //     }\r\n  //   })\r\n\r\n  //   if (overallDiv) observer.observe(overallDiv);\r\n  // }\r\n\r\n  private handleResize = () => {\r\n    this.width = window.innerWidth;\r\n    this.updateButtonSize();\r\n  };\r\n\r\n  updateButtonSize() {}\r\n\r\n  render() {\r\n    const patternSrc = getAssetPath(`assets/notification_background_pattern.svg`);\r\n    const illustrationSrc = getAssetPath(`${this.icon}`);\r\n\r\n    return (\r\n      <div class=\"overall_div\">\r\n        <div class={`empty_state_div`}>\r\n          <div class=\"frame\">\r\n            <img src={patternSrc} alt=\"\" class=\"empty_state_pattern\" />\r\n            <div class=\"empty_state\">\r\n              <div class={`content ${this.size}`}>\r\n                <img src={illustrationSrc} alt=\"bell-icon\" class=\"illustration\" />\r\n                <div class=\"text\">\r\n                  <p class=\"text-lg-semi-bold\">{this.message}</p>\r\n                  <p class=\"description text-sm-regular\">{this.description}</p>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          {this.cta && (\r\n            <div class=\"button\">\r\n              <gb-button size=\"sm\" hierarchy=\"primary\" icon=\"default\" onClick={() => this.ctaButtonClicked.emit()}>\r\n                <p>Button CTA</p>\r\n              </gb-button>\r\n            </div>\r\n          )}\r\n        </div>\r\n      </div>\r\n    );\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.featured_icon_div {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  flex-shrink: 0;\r\n  border: 1px solid var(--color-border-subtler, #e3e8ef);\r\n  background: var(--color-background-card, #ffffff);\r\n  box-shadow: var(--shadow-xs);\r\n}\r\n\r\n.featured_icon_div.sm {\r\n  width: 2rem;\r\n  height: 2rem;\r\n  padding: var(--spacing-2);\r\n  border-radius: 0.375rem;\r\n}\r\n\r\n.featured_icon_div.md {\r\n  width: 2.5rem;\r\n  height: 2.5rem;\r\n  padding: 0.625rem;\r\n  border-radius: var(--rounded-sm);\r\n}\r\n\r\n.featured_icon_div.lg {\r\n  width: 3rem;\r\n  height: 3rem;\r\n  padding: 0.75rem;\r\n  border-radius: 0.625rem;\r\n}\r\n\r\n.featured_icon_div.xl {\r\n  width: 3.5rem;\r\n  height: 3.5rem;\r\n  padding: 0.875rem;\r\n  border-radius: var(--rounded-md);\r\n}\r\n\r\n.icon{\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n\r\n.icon.sm svg {\r\n  width: 1rem;\r\n  height: 1rem;\r\n}\r\n\r\n.icon.md svg {\r\n  width: 1.25rem;\r\n  height: 1.25rem;\r\n}\r\n\r\n.icon.lg svg {\r\n  width: 1.5rem;\r\n  height: 1.5rem;\r\n}\r\n\r\n.icon.xl svg {\r\n  width: 1.75rem;\r\n  height: 1.75rem;\r\n}\r\n\r\n.icon path[stroke] {\r\n    stroke: var(--color-icon-subtle, #697586);\r\n}\r\n\r\n.icon.destructive path[stroke] {\r\n    stroke: var(--color-icon-danger, #B51726);\r\n}\r\n\r\n.icon path[fill] {\r\n    fill: var(--color-icon-subtle, #697586);\r\n}\r\n\r\n.icon.destructive path[fill] {\r\n    fill: var(--color-icon-danger, #B51726);\r\n}\r\n\r\n.featured_icon_div.destructive{\r\n  border: 1px solid var(--color-border-danger, #B51726);\r\n  background: var(--color-background-danger-subtlest, #FEF1F2);\r\n}","import { Component, Prop, State, getAssetPath, h } from \"@stencil/core\";\r\nimport { GeneralSizes } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n  tag: 'gb-featured-icon',\r\n  styleUrl: 'gb-featured-icon.css',\r\n  shadow: true,\r\n})\r\nexport class GbFeaturedIcon {\r\n  @Prop() size: GeneralSizes;\r\n  @Prop() destructive: boolean = false;\r\n  @Prop() icon: string = '';\r\n  @State() leadingIconSvg: string = '';\r\n\r\n  async loadIcon(iconName: string) {\r\n    const iconPath = getAssetPath(`${iconName}`);\r\n    const response = await fetch(iconPath);\r\n    const svg = await response.text();\r\n    this.leadingIconSvg = svg;\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.loadIcon(this.icon);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class={`featured_icon_div ${this.size} ${this.destructive ? 'destructive' : ''}`}>\r\n        <div class={`icon ${this.size} ${this.destructive ? 'destructive' : ''}`} innerHTML={this.leadingIconSvg}></div>\r\n      </div>\r\n    );\r\n  }\r\n}","@import './../../global/global.css';\r\n\r\n.help_tooltip{\r\n    display: flex;\r\n    position: relative;\r\n    width: fit-content;\r\n    height: fit-content;\r\n}\r\n\r\n.tooltip{\r\n    position: absolute;\r\n    top: -7rem;\r\n    right: 5.75rem;\r\n}","import { Component, Prop, h, State, Element } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: 'gb-help-tooltip',\r\n  styleUrl: 'gb-help-tooltip.css',\r\n  shadow: true,\r\n})\r\nexport class GbHelpTooltip {\r\n  @State() showHelpTooltip: boolean = false;\r\n  @Prop() showArrow: boolean = false;\r\n  @Prop() showSupportingText: boolean = false;\r\n  @Element() el: HTMLElement;\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('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  render() {\r\n    return (\r\n      <div class={`help_tooltip`}>\r\n        <svg\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          width=\"16\"\r\n          height=\"16\"\r\n          viewBox=\"0 0 16 16\"\r\n          fill=\"none\"\r\n          onMouseEnter={() => (this.showHelpTooltip = true)}\r\n          onMouseLeave={() => (this.showHelpTooltip = false)}\r\n          class=\"help_circle\"\r\n        >\r\n          <path\r\n            d=\"M6.66659 6C6.66659 5.26362 7.26354 4.66666 7.99992 4.66666C8.7363 4.66666 9.33325 5.26362 9.33325 6C9.33325 6.26543 9.25569 6.51275 9.12199 6.72052C8.72352 7.33978 7.99992 7.93028 7.99992 8.66666V9M7.99458 11.3333H8.00057M14.6666 8C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8C1.33325 4.3181 4.31802 1.33333 7.99992 1.33333C11.6818 1.33333 14.6666 4.3181 14.6666 8Z\"\r\n            stroke=\"#697586\"\r\n            stroke-width=\"1.5\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n          />\r\n        </svg>\r\n        {this.showHelpTooltip && (\r\n          <gb-tooltip show-arrow={true} arrow=\"bottom_right\" show-supporting-text={this.showSupportingText} class=\"tooltip\">\r\n            <slot name=\"label\" slot=\"label\"></slot>\r\n            <slot name=\"supporting_text\" slot=\"supporting_text\"></slot>\r\n          </gb-tooltip>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}","@import './../../global/global.css';\r\n\r\n.input_dropdown_div {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  border-radius: 0.5rem;\r\n  gap: var(--spacing-3);\r\n  border: 1px solid var(--color-border-input, #cdd5df);\r\n  background-color: var(--color-background-card, #ffffff);\r\n  padding: var(--spacing-none) var(--spacing-3);\r\n  cursor: pointer;\r\n  position: relative;\r\n}\r\n\r\n.input_dropdown_container {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--spacing-2);\r\n}\r\n\r\n.input_dropdown_container.tag {\r\n  min-height: 3rem;\r\n}\r\n\r\n.icon {\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n\r\n.input_with_label {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--spacing-2);\r\n}\r\n\r\n.hint_text {\r\n  color: var(--color-text-subtle, #697586);\r\n}\r\n\r\n.error_text {\r\n  color: var(--color-text-danger, #b51726);\r\n}\r\n\r\n/* Size Styles */\r\n.input_dropdown_div.sm {\r\n  height: 2.5rem;\r\n}\r\n\r\n.input_dropdown_div.md {\r\n  height: 3rem;\r\n}\r\n\r\n.dot.sm {\r\n  width: var(--spacing-2);\r\n  height: var(--spacing-2);\r\n}\r\n\r\n.dot.md {\r\n  width: 0.625rem;\r\n  height: 0.625rem;\r\n}\r\n\r\n/* State Styles */\r\n.input_dropdown_div.focused {\r\n  border-color: var(--color-border-selected, #075db2);\r\n}\r\n\r\n.input_dropdown_div.destructive {\r\n  border-color: var(--color-border-danger, #b51726);\r\n}\r\n\r\n.input_dropdown_div.disabled {\r\n  background-color: var(--color-background-disabled, #f6f8fa);\r\n  pointer-events: none;\r\n  cursor: not-allowed;\r\n}\r\n\r\n.placeholder {\r\n  display: flex;\r\n  justify-content: stretch;\r\n  width: 100%;\r\n  white-space: nowrap;\r\n}\r\n\r\n.content {\r\n  display: flex;\r\n  gap: var(--spacing-2);\r\n  overflow: hidden; /* Clip overflowing content */\r\n  /* width: 50px; */\r\n  flex: 1 0 0;\r\n}\r\n\r\n.text.tag {\r\n  display: flex;\r\n  justify-content: flex-start;\r\n  align-items: stretch;\r\n  flex-wrap: wrap;\r\n  gap: 0.38rem;\r\n  padding: 0.4rem 0;\r\n}\r\n\r\n.supporting_text {\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n\r\n.added_tag {\r\n  width: fit-content;\r\n}\r\n\r\n.help_icon {\r\n  display: flex;\r\n  align-items: center;\r\n  height: fit-content;\r\n}\r\n\r\n.dropdown_icon {\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n\r\nsvg.disabled path {\r\n  stroke: var(--color-icon-disabled, #cdd5df);\r\n}\r\n\r\n.dropdown_menu {\r\n  display: flex;\r\n  width: 100%;\r\n  max-height: 300px;\r\n  padding: var(--spacing-none);\r\n  flex-direction: column;\r\n  align-items: flex-start;\r\n  align-items: stretch;\r\n  border-radius: var(--rounded-sm);\r\n  border: 1px solid var(--color-border-subtler, #e3e8ef);\r\n  background: var(--color-surface, #ffffff);\r\n  box-shadow: var(--shadow-sm);\r\n  position: absolute;\r\n  gap: var(--spacing-none);\r\n  transition: 1s ease-in-out;\r\n  overflow-y: auto;\r\n}\r\n\r\n.dropdown_menu.top {\r\n  bottom: 105%;\r\n  left: 0;\r\n  z-index: 999;\r\n}\r\n\r\n.dropdown_menu.bottom {\r\n  top: 105%;\r\n  left: 0;\r\n  z-index: 999;\r\n}\r\n\r\n/* .input_dropdown_div.sm.tag{\r\n    min-height: 2.5rem;\r\n} */\r\n\r\n.input_dropdown_div.tag {\r\n  min-height: 3rem;\r\n  height: fit-content;\r\n}\r\n\r\n.input_dropdown_div.md.tag {\r\n  min-height: 2.5rem;\r\n}\r\n\r\n.input_dropdown_div.md.tag {\r\n  min-height: 3rem;\r\n}\r\n\r\n.opened {\r\n  transform: rotate(180deg);\r\n  transition: 0.2s ease-in-out;\r\n}\r\n\r\n::slotted([slot='tooltip_label']) {\r\n  white-space: nowrap;\r\n  color: var(--color-text, #4b5565);\r\n}\r\n\r\n::slotted([slot='tooltip_supporting_text']) {\r\n  min-width: fit-content;\r\n  max-width: 18.5rem;\r\n  color: var(--color-text-subtle, #697586);\r\n  margin-top: 5rem;\r\n}\r\n\r\n::slotted([slot='initials'].gray) {\r\n  color: #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.dropdown_search_field {\r\n  background: var(--color-surface, #ffffff);\r\n  padding: var(--spacing-2) var(--spacing-2) var(--spacing-none) var(--spacing-2);\r\n  position: sticky;\r\n  top: 0;\r\n  z-index: 999;\r\n}\r\n\r\n.empty_state {\r\n  margin: auto;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n\r\n.background {\r\n  position: relative;\r\n  width: 80%;\r\n}\r\n\r\n.message_background {\r\n  position: absolute;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  gap: var(--spacing-1);\r\n}\r\n\r\n.illustration {\r\n  width: 100px;\r\n  height: 100px;\r\n}\r\n\r\n.message {\r\n  color: var(--color-text-bold, #202939);\r\n}\r\n\r\n.text {\r\n  display: flex;\r\n  align-items: center;\r\n  /* flex: 1 1 auto; */\r\n  overflow: hidden; /* Prevent content from overflowing */\r\n}\r\n\r\n.selected_text {\r\n  overflow: hidden; /* Hide overflowing text */\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap; /* Prevent wrapping */\r\n  flex: 1 1 auto; /* Take up available space and adjust dynamically */\r\n  min-width: 0; /* Ensures it respects parent width in flexbox */\r\n}\r\n\r\n.search_input {\r\n  display: flex;\r\n  flex: 1 0 0;\r\n  width: 100%;\r\n}\r\n\r\ninput {\r\n  border: none;\r\n  color: var(--color-text, #4b5565);\r\n}\r\n\r\ninput:focus {\r\n  outline: none;\r\n}\r\n\r\ninput::placeholder {\r\n  color: var(--color-text-disabled, #cdd5df);\r\n}\r\n\r\n.close_button {\r\n  position: absolute;\r\n}\r\n\r\n.close_button.sm {\r\n  right: 0.2rem;\r\n  top: 0.15rem;\r\n}\r\n\r\n.close_button.md {\r\n  right: 0.3rem;\r\n  top: 0.25rem;\r\n}\r\n\r\n.loader_div{\r\n  width: 100%;\r\n  height: 10rem;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n\r\n.loader {\r\n  border: 4px solid var(--color-background-gray, #cdd5df); /* Light grey */\r\n  border-top: 4px solid var(--color-background-selected, #075db2); /* Blue */\r\n  border-radius: 50%;\r\n  width: 30px;\r\n  height: 30px;\r\n  animation: spin 2s linear infinite;\r\n}\r\n\r\n@keyframes spin {\r\n  0% {\r\n    transform: rotate(0deg);\r\n  }\r\n  100% {\r\n    transform: rotate(360deg);\r\n  }\r\n}","import { Component, Prop, h, Fragment, Element, State, getAssetPath, Listen, Event, EventEmitter, Watch, Method } from '@stencil/core';\r\nimport { ColorTypes, DropdownTypes, GeneralSizes, StateEnum } from '../../models/reusableModels';\r\n@Component({\r\n  tag: 'gb-input-dropdown',\r\n  styleUrl: 'gb-input-dropdown.css',\r\n  shadow: true,\r\n})\r\nexport class GbInputDropdown {\r\n  @Prop() type: DropdownTypes;\r\n  @Prop({ mutable: true }) state: 'default' | 'focused' | 'disabled' | 'filled';\r\n  @Prop() size: GeneralSizes;\r\n  @Prop() showLabel: boolean = false;\r\n  @Prop() label: string = '';\r\n  @Prop() placeholder: string = '';\r\n  @Prop() showHintText: boolean;\r\n  @Prop() hintText: string = '';\r\n  @Prop() showHelpIcon: boolean;\r\n  @Prop() showLeadingIcon: boolean = false;\r\n  @Prop() iconSwap: string = '';\r\n  @Prop() text: boolean = false;\r\n  @Prop() leadingIcon: string = '';\r\n  @Prop() icon: 'country' | 'avatar' | 'dot' | 'false';\r\n  @Prop({ mutable: true }) items: any[] = [\r\n    // { name: 'Mock Item A iusbrviubw vwiuhvw vwiurhvwr vwoiuh', username: 1 },\r\n    // { name: 'Mock Item B', username: 3 },\r\n    // { name: 'Mock Item C', username: 3 },\r\n    // { name: 'Mock Item D', username: 3 },\r\n    // { name: 'Mock Item E', username: 3 },\r\n    // 45,\r\n    // 50,\r\n    // 20,\r\n    // 25,\r\n    // 90,\r\n    // 92,\r\n    // 53,\r\n    // 'Activated',\r\n    // 'Deactivated',\r\n    // 'John Doe',\r\n    // 'John smith',\r\n    // 'Jane leo'\r\n  ];\r\n  @Prop({ mutable: true }) value: any[] = [\r\n    // { name: 'Mock Item A', username: 1, selected: false },\r\n    // { name: 'Mock Item B', username: 2, selected: false },\r\n    // { name: 'Mock Item C', username: 3, selected: false },\r\n    // 45,\r\n    // 50,\r\n    // 20,\r\n    // 25,\r\n    // 90,\r\n    // 'Activated',\r\n    // 'Deactivated',\r\n    // 'Transaction Status'\r\n  ];\r\n  @Prop() supportingText: boolean = false;\r\n  @Prop() color: ColorTypes;\r\n  @Prop() showBorder: boolean = false;\r\n  @Prop() menuPosition: 'top' | ' bottom';\r\n  @Prop() showSearchInput: boolean = false;\r\n  @Prop() inputValue: string;\r\n  @Prop({ mutable: true }) destructive: boolean = false;\r\n  @Prop() errorText: string = '';\r\n  @Prop({ mutable: true }) loading: boolean = false;\r\n  @State() leadingIconSvg: string = '';\r\n  @State() dropdownOpen: boolean = false;\r\n  @State() selectedItem: any;\r\n  @State() selectedItems: any[] = [];\r\n  @State() unselectedItems: any[] = [];\r\n  @State() searchItem: any;\r\n  @State() searchResults: any;\r\n  @State() internalItems: any[] = [...this.items];\r\n  @State() showCloseButton: boolean = false;\r\n  @State() internalLoading: boolean = this.loading;\r\n  @Element() el: HTMLElement;\r\n  // @Event() dropdownValue: EventEmitter<any>;\r\n  @Event() dropdownItemSelected: EventEmitter<any>;\r\n  @Event() inputValueChanged: EventEmitter<string>;\r\n\r\n  dropdownRef!: HTMLElement;\r\n  inputRef: HTMLInputElement;\r\n\r\n  @Method()\r\n  async clearSelection() {\r\n    if (this.selectedItem && this.selectedItem.length > 0) {\r\n      this.selectedItem = [];\r\n    }\r\n\r\n    if (this.selectedItems && this.selectedItems.length > 0) {\r\n      this.selectedItems = [];\r\n    }\r\n\r\n    if (this.value && this.value.length > 0) {\r\n      this.value = [];\r\n      this.selectedItems = [];\r\n      this.selectedItem = [];\r\n    }\r\n\r\n    this.unselectedItems = [...this.items];\r\n    this.state = 'default';\r\n  }\r\n\r\n  clearInput() {\r\n    if (this.inputRef) {\r\n      this.inputRef.value = '';\r\n      this.inputValue = this.inputRef.value;\r\n      this.showCloseButton = false;\r\n      this.inputValueChanged.emit(this.inputValue);\r\n    }\r\n  }\r\n\r\n  @Watch('items')\r\n  updateResultsAndShowInDropdown(newItems: any[]) {\r\n    this.internalItems = [...newItems];\r\n  }\r\n\r\n  @Watch('loading')\r\n  onLoadingChanged(newLoading: boolean) {\r\n    this.internalLoading = newLoading;\r\n\r\n    if (newLoading) this.dropdownOpen = true;\r\n  }\r\n\r\n  emitInputValueToUseForSearch() {\r\n    if (this.inputRef.value.length > 0 && this.internalItems.length === 0) {\r\n      this.loading = true;\r\n    } else if (this.inputRef.value.length > 0 && this.internalItems.length > 0) {\r\n      this.showCloseButton = true;\r\n      this.inputValueChanged.emit(this.inputRef.value);\r\n    } else {\r\n      this.showCloseButton = false;\r\n      this.dropdownOpen = false;\r\n      this.loading = false;\r\n    }\r\n  }\r\n\r\n  searchItemsInDropdownMenu(event: CustomEvent<any>) {\r\n    this.searchItem = event.detail;\r\n    this.searchResults = this.items.filter(item => {\r\n      if (typeof item === 'string') return item.toLowerCase().includes(this.searchItem.toLowerCase());\r\n\r\n      if (typeof item === 'number') return item.toString().includes(this.searchItem.toString());\r\n\r\n      if (typeof item === 'object') return item.name.toLowerCase().includes(this.searchItem.toLowerCase());\r\n    });\r\n  }\r\n\r\n  @Watch('destructive')\r\n  watchDestructive() {\r\n    this.destructive = this.destructive;\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    document.removeEventListener('click', this.handleClickOutside);\r\n  }\r\n\r\n  @Listen('click', { target: 'document' })\r\n  handleClickOutside(event: MouseEvent) {\r\n    if (this.dropdownOpen && !this.el.contains(event.target as Node)) {\r\n      this.dropdownOpen = false;\r\n    }\r\n  }\r\n\r\n  toggleDropdown(event: MouseEvent) {\r\n    if (this.state !== 'disabled') {\r\n      this.dropdownOpen = !this.dropdownOpen;\r\n    }\r\n\r\n    event.stopPropagation();\r\n  }\r\n\r\n  isItemSelected(item) {\r\n    const isObject = typeof item === 'object';\r\n    if (this.value.length === 0) {\r\n      return this.selectedItems.some(i => (isObject ? i.name === item.name : i === item));\r\n    } else if (this.value.length > 0) {\r\n      return this.value.some(i => (isObject ? i.name === item.name : i === item));\r\n    }\r\n  }\r\n\r\n  async loadIcon(iconName: string) {\r\n    const iconPath = getAssetPath(`${iconName}`);\r\n    const response = await fetch(iconPath);\r\n    const svg = await response.text();\r\n    this.leadingIconSvg = svg;\r\n  }\r\n\r\n  getAvatarSize() {\r\n    switch (this.size) {\r\n      case 'sm':\r\n        return 'xs';\r\n      case 'md':\r\n        return 'xs';\r\n    }\r\n  }\r\n\r\n  sortDropdownItems(menuItems: any[]): any[] {\r\n    return menuItems.sort((a, b) => {\r\n      if (a.selected && !b.selected) {\r\n        return -1; // Move selected items up\r\n      } else if (!a.selected && b.selected) {\r\n        return 1; // Keep unselected items down\r\n      }\r\n      return 0; // Keep order if both are selected or unselected\r\n    });\r\n  }\r\n\r\n  handleItemSelect(item) {\r\n    this.destructive = false;\r\n\r\n    if (this.type === 'tags') {\r\n      if (this.state === 'default') {\r\n        this.selectMultipleItems(item);\r\n        // console.log(this.state);\r\n      } else if (this.state === 'filled' && this.value.length > 0) {\r\n        this.state = 'default';\r\n        this.value.length = 0;\r\n        // console.log(this.state);\r\n        this.selectMultipleItems(item);\r\n      } else if (this.state === 'filled' && this.value.length === 0) {\r\n        this.selectMultipleItems(item);\r\n        // console.log(this.state);\r\n      }\r\n    } else {\r\n      if (this.state === 'default') {\r\n        this.singleItemSelect(item);\r\n        // console.log(this.state);\r\n      } else if (this.state === 'filled' && this.value.length > 0) {\r\n        this.state = 'default';\r\n        this.value.length = 0;\r\n        this.singleItemSelect(item);\r\n        // console.log(this.state);\r\n      } else if (this.state === 'filled' && this.value.length === 0) {\r\n        this.singleItemSelect(item);\r\n        // console.log(this.state);\r\n      }\r\n    }\r\n\r\n    this.state = this.selectedItems.length > 0 ? 'filled' : 'default';\r\n    // console.log(this.state)\r\n  }\r\n\r\n  singleItemSelect(item) {\r\n    // Handle single selection for other types\r\n    this.selectedItem = item; // Store single selected item\r\n    this.selectedItems = [item]; // Ensure only one item in selectedItems\r\n\r\n    // Close the dropdown after selection for single selection types\r\n    this.dropdownOpen = false;\r\n    // console.log(this.selectedItems);\r\n    this.dropdownItemSelected.emit(this.selectedItem);\r\n  }\r\n\r\n  selectMultipleItems(item) {\r\n    const isObject = typeof item === 'object';\r\n\r\n    const isSelected = this.selectedItems.some(i => (isObject ? i.name === item.name : i === item));\r\n\r\n    if (isSelected) {\r\n      // Unselect item: Move it from selectedItems to unselectedItems\r\n      this.selectedItems = this.selectedItems.filter(i => (isObject ? i.name !== item.name : i !== item));\r\n      if (!this.unselectedItems.some(i => (isObject ? i.name === item.name : i === item))) {\r\n        this.unselectedItems = [...this.unselectedItems, item];\r\n      }\r\n    } else {\r\n      // Select item: Move it from unselectedItems to selectedItems\r\n      this.selectedItems = [...this.selectedItems, item];\r\n      this.unselectedItems = this.unselectedItems.filter(i => (isObject ? i.name !== item.name : i !== item));\r\n      // console.log(this.selectedItems);\r\n\r\n      this.dropdownItemSelected.emit(this.selectedItems);\r\n    }\r\n  }\r\n\r\n  handleTagRemove(item) {\r\n    if (this.value.length === 0) {\r\n      const isObject = typeof item === 'object';\r\n\r\n      // Remove item from selectedItems\r\n      this.selectedItems = this.selectedItems.filter(i => (isObject ? i.name !== item.name : i !== item));\r\n\r\n      // Add item back to unselectedItems if not already present\r\n      if (!this.unselectedItems.some(i => (isObject ? i.name === item.name : i === item))) {\r\n        this.unselectedItems = [...this.unselectedItems, item];\r\n      }\r\n\r\n      // Optionally update state or emit event\r\n      this.state = this.selectedItems.length > 0 ? 'filled' : 'default';\r\n    } else if (this.value.length > 0) {\r\n      const isObject = typeof item === 'object';\r\n\r\n      // Remove item from selectedItems\r\n      this.value = this.value.filter(i => (isObject ? i.name !== item.name : i !== item));\r\n      this.selectedItems = this.value;\r\n\r\n      // Add item back to unselectedItems if not already present\r\n      if (!this.unselectedItems.some(i => (isObject ? i.name === item.name : i === item))) {\r\n        this.unselectedItems = [...this.unselectedItems, item];\r\n      }\r\n\r\n      // Optionally update state or emit event\r\n      this.state = this.selectedItems.length > 0 ? 'filled' : 'default';\r\n    }\r\n  }\r\n\r\n  componentWillRender() {\r\n    if (this.value.length > 0 && this.state === 'default') {\r\n      this.state = 'filled';\r\n    }\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.loadIcon(this.leadingIcon);\r\n\r\n    // setTimeout(() => {\r\n    //   this.loading = true;\r\n      \r\n    //   setTimeout(() => {\r\n    //     this.items = ['Hi', '8', 'Omo', 98];\r\n    //   }, 5000);\r\n    // }, 2000);\r\n\r\n    if (this.type !== 'tags') {\r\n      this.selectedItem = null; // For single selection types\r\n    }\r\n\r\n    if (this.value.length > 0) {\r\n      if (Array.isArray(this.items)) {\r\n        this.selectedItems = [];\r\n        this.unselectedItems = [];\r\n\r\n        // Separate objects from primitive values\r\n        const objectValues = this.value.filter(val => typeof val === 'object' && val !== null);\r\n        const primitiveValues = this.value.filter(val => typeof val !== 'object');\r\n\r\n        // Find selected items\r\n        this.selectedItems = this.items.filter(item => {\r\n          if (typeof item === 'object' && item !== null) {\r\n            return objectValues.some(val => val.name === item.name);\r\n          } else {\r\n            return primitiveValues.includes(item);\r\n          }\r\n        });\r\n\r\n        // Find unselected items\r\n        this.unselectedItems = this.items.filter(item => {\r\n          if (typeof item === 'object' && item !== null) {\r\n            return !objectValues.some(val => val.name === item.name);\r\n          } else {\r\n            return !primitiveValues.includes(item);\r\n          }\r\n        });\r\n      }\r\n    } else {\r\n      // If value array is empty, all items are unselected\r\n      this.selectedItems = [];\r\n      this.unselectedItems = [...this.items];\r\n    }\r\n\r\n    // console.log('Selected Items:', this.selectedItems);\r\n    // console.log('Unselected Items:', this.unselectedItems);\r\n  }\r\n\r\n  componentDidLoad() {\r\n    if (this.type !== 'tags') {\r\n      document.addEventListener('click', this.handleClickOutside);\r\n    }\r\n\r\n    const slottedInitials = this.el.querySelector('[slot=\"initials\"]');\r\n\r\n    const mainTextSlot = this.el.querySelector('[slot=\"tooltip_label\"]');\r\n    const supportingTextSlot = this.el.querySelector('[slot=\"tooltip_supporting_text\"]');\r\n\r\n    if (slottedInitials) {\r\n      slottedInitials.classList.add('text-xxs-semi-bold');\r\n    }\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  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  render() {\r\n    const emptyStateBackground = getAssetPath('assets/empty-state-background.svg');\r\n    const illustration = getAssetPath('assets/empty-state-no-data.svg');\r\n\r\n    return [\r\n      <div class={`input_dropdown_container ${this.type === 'tags' ? 'tag' : ''}`}>\r\n        <div class={`input_with_label`}>\r\n          {this.showLabel && (\r\n            <p class=\"text-sm-regular\" style={{ color: '#4B5565' }}>\r\n              {this.label.charAt(0).toUpperCase() + this.label.slice(1).toLowerCase()}\r\n            </p>\r\n          )}\r\n          <div\r\n            class={`input_dropdown_div ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''} ${this.type === 'tags' ? 'tag' : ''} ${\r\n              this.dropdownOpen ? 'focused' : ''\r\n            }`}\r\n            onClick={e => this.toggleDropdown(e)}\r\n          >\r\n            {this.type === 'icon_leading' && (\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                <path\r\n                  d=\"M5.48131 12.9013C4.30234 13.6033 1.21114 15.0368 3.09388 16.8305C4.01359 17.7067 5.03791 18.3333 6.32572 18.3333H13.6743C14.9621 18.3333 15.9864 17.7067 16.9061 16.8305C18.7889 15.0368 15.6977 13.6033 14.5187 12.9013C11.754 11.2551 8.24599 11.2551 5.48131 12.9013Z\"\r\n                  stroke=\"#697586\"\r\n                  stroke-width=\"1.66667\"\r\n                />\r\n                <path\r\n                  d=\"M13.75 5.41667C13.75 7.48774 12.0711 9.16667 10 9.16667C7.92893 9.16667 6.25 7.48774 6.25 5.41667C6.25 3.3456 7.92893 1.66667 10 1.66667C12.0711 1.66667 13.75 3.3456 13.75 5.41667Z\"\r\n                  stroke=\"#697586\"\r\n                  stroke-width=\"1.66667\"\r\n                />\r\n              </svg>\r\n            )}\r\n            {this.type === 'avatar_leading' && (\r\n              <>\r\n                {this.state === 'default' && (\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                    <path\r\n                      d=\"M5.48131 12.9013C4.30234 13.6033 1.21114 15.0368 3.09388 16.8305C4.01359 17.7067 5.03791 18.3333 6.32572 18.3333H13.6743C14.9621 18.3333 15.9864 17.7067 16.9061 16.8305C18.7889 15.0368 15.6977 13.6033 14.5187 12.9013C11.754 11.2551 8.24599 11.2551 5.48131 12.9013Z\"\r\n                      stroke=\"#4B5565\"\r\n                      stroke-width=\"1.66667\"\r\n                    />\r\n                    <path\r\n                      d=\"M13.75 5.41666C13.75 7.48772 12.0711 9.16666 10 9.16666C7.92893 9.16666 6.25 7.48772 6.25 5.41666C6.25 3.34559 7.92893 1.66666 10 1.66666C12.0711 1.66666 13.75 3.34559 13.75 5.41666Z\"\r\n                      stroke=\"#4B5565\"\r\n                      stroke-width=\"1.66667\"\r\n                    />\r\n                  </svg>\r\n                )}\r\n                {this.state === 'filled' && (\r\n                  <gb-avatar size=\"xs\" text={this.text} color={this.color} show-border={this.showBorder}>\r\n                    {this.selectedItems.map(item => (\r\n                      <>\r\n                        {typeof item === 'object' ? (\r\n                          <h1 slot=\"initials\">{item.name.split(' ').map(part => part.charAt(0).toUpperCase())}</h1>\r\n                        ) : (\r\n                          <h1 slot=\"initials\">{item.split(' ').map(part => part.charAt(0).toUpperCase())}</h1>\r\n                        )}\r\n                      </>\r\n                    ))}\r\n                  </gb-avatar>\r\n                )}\r\n              </>\r\n            )}\r\n            {this.showLeadingIcon && <>{this.type === 'search' || this.type === 'tags' ? <div class={`icon`} innerHTML={this.leadingIconSvg}></div> : null}</>}\r\n            {this.type === 'dot_leading' && (\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" class={`dot ${this.size}`}>\r\n                <circle cx=\"5\" cy=\"5\" r=\"4\" fill=\"#079455\" />\r\n              </svg>\r\n            )}\r\n            <>\r\n              {this.state === 'default' && this.type !== 'search' && (\r\n                <>\r\n                  {this.placeholder && (\r\n                    <div class=\"placeholder\">\r\n                      <p class={`text-${this.size}-regular`} style={{ color: '#CDD5DF' }}>\r\n                        {this.placeholder}\r\n                      </p>\r\n                    </div>\r\n                  )}\r\n                </>\r\n              )}\r\n              {this.state === 'default' && this.type === 'search' && (\r\n                <div class=\"search_input\">\r\n                  <input\r\n                    type=\"text\"\r\n                    placeholder={this.placeholder}\r\n                    class={`text-${this.size}-regular`}\r\n                    ref={el => (this.inputRef = el)}\r\n                    onInput={this.emitInputValueToUseForSearch.bind(this)}\r\n                  />\r\n                  {this.showCloseButton && (\r\n                    <gb-button\r\n                      class={`close_button ${this.size}`}\r\n                      size={this.size}\r\n                      hierarchy=\"tertiary_gray\"\r\n                      icon=\"only\"\r\n                      state=\"default\"\r\n                      icon-leading={true}\r\n                      icon-leading-swap=\"assets/cancel-01.svg\"\r\n                      onClick={() => this.clearInput()}\r\n                    ></gb-button>\r\n                  )}\r\n                </div>\r\n              )}\r\n              {this.state === 'filled' && (\r\n                <>\r\n                  <div class={`content`}>\r\n                    <div class={`text text-${this.size}-regular ${this.type === 'tags' ? 'tag' : ''}`} style={{ color: '#4B5565' }}>\r\n                      {this.type === 'tags' ? (\r\n                        <>\r\n                          {this.value.length === 0 ? (\r\n                            <>\r\n                              {this.selectedItems.map((item, index) =>\r\n                                typeof item === 'object' ? (\r\n                                  <div class=\"added_tag\" key={index}>\r\n                                    <gb-tag size=\"sm\" icon={this.icon ? this.icon : 'avatar'} action=\"X_close\" onClick={() => this.handleTagRemove(item)}>\r\n                                      <p class=\"text-xs-medium\">{item.name.split(' ')[0]}</p>\r\n                                      <h1 slot=\"initials\" class=\"text-xxs-semi-bold\">\r\n                                        {item.name\r\n                                          .split(' ')\r\n                                          .map(part => part.charAt(0).toUpperCase())\r\n                                          .join('')}\r\n                                      </h1>\r\n                                    </gb-tag>\r\n                                  </div>\r\n                                ) : (\r\n                                  <div class=\"added_tag\" key={index}>\r\n                                    <gb-tag size=\"sm\" icon={this.icon ? this.icon : 'avatar'} action=\"X_close\" onClick={() => this.handleTagRemove(item)}>\r\n                                      <p class=\"text-xs-medium\">{item}</p>\r\n                                    </gb-tag>\r\n                                  </div>\r\n                                ),\r\n                              )}\r\n                            </>\r\n                          ) : (\r\n                            <>\r\n                              {this.value.map((item, index) =>\r\n                                typeof item === 'object' ? (\r\n                                  <div class=\"added_tag\" key={index}>\r\n                                    <gb-tag size=\"sm\" icon={this.icon ? this.icon : 'avatar'} action=\"X_close\" onClick={() => this.handleTagRemove(item)}>\r\n                                      <p class=\"text-xs-medium\">{item.name.split(' ')[0]}</p>\r\n                                      <h1 slot=\"initials\" class=\"text-xxs-semi-bold\">\r\n                                        {item.name\r\n                                          .split(' ')\r\n                                          .map(part => part.charAt(0).toUpperCase())\r\n                                          .join('')}\r\n                                      </h1>\r\n                                    </gb-tag>\r\n                                  </div>\r\n                                ) : (\r\n                                  <div class=\"added_tag\" key={index}>\r\n                                    <gb-tag size=\"sm\" icon={this.icon ? this.icon : 'avatar'} action=\"X_close\" onClick={() => this.handleTagRemove(item)}>\r\n                                      <p class=\"text-xs-medium\">{item}</p>\r\n                                    </gb-tag>\r\n                                  </div>\r\n                                ),\r\n                              )}\r\n                            </>\r\n                          )}\r\n                        </>\r\n                      ) : (\r\n                        <p class={`selected_text text-${this.size}-regular`}>\r\n                          {this.value.length === 0 ? this.selectedItem?.name || this.selectedItem : <>{this.value.map(item => (typeof item === 'object' ? item.name : item))}</>}\r\n                        </p>\r\n                      )}\r\n                    </div>\r\n                    {this.supportingText && (\r\n                      <div class={`supporting_text text-${this.size}-regular`} style={{ color: '#697586' }}>\r\n                        {this.type !== 'tags' && (\r\n                          <>{this.value.length === 0 ? <>{this.selectedItem.username}</> : <>{this.value.map(item => typeof item === 'object' && item.username)}</>}</>\r\n                        )}\r\n                      </div>\r\n                    )}\r\n                  </div>\r\n                </>\r\n              )}\r\n              {this.state === 'disabled' && (\r\n                <>\r\n                  <div class={`content`}>\r\n                    <div class={`text text-md-regular ${this.type === 'tags' ? 'tag' : ''}`} style={{ color: '#4B5565' }}>\r\n                      {this.type === 'tags' ? (\r\n                        <>\r\n                          {this.value.map((item, index) =>\r\n                            typeof item === 'object' ? (\r\n                              <div class=\"added_tag\" key={index}>\r\n                                <gb-tag size=\"sm\" icon={this.icon ? this.icon : 'avatar'} action=\"X_close\">\r\n                                  <p class=\"text-xs-medium\">{item.name.split(' ')[0]}</p>\r\n                                  <h1 slot=\"initials\" class=\"text-xxs-semi-bold\">\r\n                                    {item.name\r\n                                      .split(' ')\r\n                                      .map(part => part.charAt(0).toUpperCase())\r\n                                      .join('')}\r\n                                  </h1>\r\n                                </gb-tag>\r\n                              </div>\r\n                            ) : (\r\n                              <div class=\"added_tag\" key={index}>\r\n                                <gb-tag size=\"sm\" icon={this.icon ? this.icon : 'avatar'} action=\"X_close\">\r\n                                  <p class=\"text-xs-medium\">{item}</p>\r\n                                </gb-tag>\r\n                              </div>\r\n                            ),\r\n                          )}\r\n                        </>\r\n                      ) : (\r\n                        <>{<>{this.value.map(item => (typeof item === 'object' ? item.name : item))}</>}</>\r\n                      )}\r\n                    </div>\r\n                    {this.supportingText && (\r\n                      <div class=\"supporting_text text-sm-regular\" style={{ color: '#697586' }}>\r\n                        {this.type !== 'tags' && (\r\n                          <>{this.value.length === 0 ? <>{this.selectedItem.username}</> : <>{this.value.map(item => typeof item === 'object' && <>{item.username}</>)}</>}</>\r\n                        )}\r\n                      </div>\r\n                    )}\r\n                  </div>\r\n                </>\r\n              )}\r\n            </>\r\n            {this.showHelpIcon && (\r\n              <div class={`help_icon`}>\r\n                <gb-help-tooltip show-supporting-text={true}>\r\n                  <slot name=\"tooltip_label\" slot=\"label\"></slot>\r\n                  <slot name=\"tooltip_supporting_text\" slot=\"supporting_text\"></slot>\r\n                </gb-help-tooltip>\r\n              </div>\r\n            )}\r\n            {this.type !== 'search' && (\r\n              <div class={`dropdown_icon ${this.dropdownOpen ? 'opened' : ''}`}>\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" class={`${this.state}`}>\r\n                  <path\r\n                    d=\"M15 7.50004C15 7.50004 11.3176 12.5 9.99996 12.5C8.68237 12.5 5 7.5 5 7.5\"\r\n                    stroke=\"#697586\"\r\n                    stroke-width=\"1.66667\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  />\r\n                </svg>\r\n              </div>\r\n            )}\r\n            <>\r\n              {this.dropdownOpen && (\r\n                <div class={`dropdown_menu ${this.menuPosition}`} ref={el => (this.dropdownRef = el)} onClick={e => e.stopPropagation()}>\r\n                  {this.showSearchInput && (\r\n                    <div class=\"dropdown_search_field\">\r\n                      <gb-input-field\r\n                        size=\"sm\"\r\n                        value={this.inputValue}\r\n                        show-close-button={this.inputValue ? true : false}\r\n                        icon-swap=\"assets/search-01.svg\"\r\n                        placeholder={this.placeholder}\r\n                        type=\"icon_leading\"\r\n                        labelText=\"label\"\r\n                        idOfInput=\"3\"\r\n                        onInputValueChanged={this.searchItemsInDropdownMenu.bind(this)}\r\n                      ></gb-input-field>\r\n                    </div>\r\n                  )}\r\n                  {this.loading && (\r\n                    <div class=\"loader_div\">\r\n                      <div class=\"loader\"></div>\r\n                    </div>\r\n                  )}\r\n                  {this.searchItem ? (\r\n                    <>\r\n                      {this.searchItem !== '' && this.searchResults.length > 0 ? (\r\n                        <>\r\n                          {this.searchResults.map(item => (\r\n                            <gb-input-dropdown-menu-item\r\n                              type={this.type === 'tags' ? 'checkbox' : this.type}\r\n                              state={StateEnum.Default}\r\n                              supporting-text={this.supportingText}\r\n                              selected={this.isItemSelected(item)}\r\n                              onClick={() => this.handleItemSelect(item)}\r\n                            >\r\n                              {typeof item === 'object' ? (\r\n                                <>\r\n                                  <p slot=\"name\">{item.name}</p>\r\n                                  <p slot=\"supporting_text\">{item.username}</p>\r\n                                </>\r\n                              ) : (\r\n                                <p slot=\"name\">{item}</p>\r\n                              )}\r\n                            </gb-input-dropdown-menu-item>\r\n                          ))}\r\n                        </>\r\n                      ) : this.searchItem !== '' && this.searchResults.length === 0 ? (\r\n                        //Empty state for when there are no search results\r\n                        <div class=\"empty_state\">\r\n                          <img src={emptyStateBackground} class=\"background\" alt=\"\" />\r\n                          <div class=\"message_background\">\r\n                            <img src={illustration} alt=\"\" class=\"illustration\" />\r\n                            <p class=\"message text-md-semi-bold\">No results available</p>\r\n                          </div>\r\n                        </div>\r\n                      ) : null}\r\n                    </>\r\n                  ) : (\r\n                    <>\r\n                      {this.type === 'tags' ? (\r\n                        <>\r\n                          {this.selectedItems.map(item => (\r\n                            <gb-input-dropdown-menu-item\r\n                              type={this.type === 'search' ? 'checkbox' : this.type === 'tags' ? 'checkbox' : this.type}\r\n                              state={StateEnum.Default}\r\n                              supporting-text={this.supportingText}\r\n                              selected={true}\r\n                              onClick={() => this.handleItemSelect(item)}\r\n                            >\r\n                              {typeof item === 'object' ? (\r\n                                <>\r\n                                  <p slot=\"name\">{item.name}</p>\r\n                                  <p slot=\"supporting_text\">{item.username}</p>\r\n                                  <h1 slot=\"initials\">{item.name.split(' ').map(part => part.charAt(0).toUpperCase())}</h1>\r\n                                </>\r\n                              ) : (\r\n                                <>\r\n                                  <p slot=\"name\">{item}</p>\r\n                                  <h1 slot=\"initials\">{item.split(' ').map(part => part.charAt(0).toUpperCase())}</h1>\r\n                                </>\r\n                              )}\r\n                            </gb-input-dropdown-menu-item>\r\n                          ))}\r\n                          {this.unselectedItems.map(item => (\r\n                            <gb-input-dropdown-menu-item\r\n                              type={this.type === 'search' ? 'checkbox' : this.type === 'tags' ? 'checkbox' : this.type}\r\n                              state={StateEnum.Default}\r\n                              supporting-text={this.supportingText}\r\n                              selected={false}\r\n                              onClick={() => this.handleItemSelect(item)}\r\n                            >\r\n                              {typeof item === 'object' ? (\r\n                                <>\r\n                                  <p slot=\"name\">{item.name}</p>\r\n                                  <p slot=\"supporting_text\">{item.username}</p>\r\n                                </>\r\n                              ) : (\r\n                                <p slot=\"name\">{item}</p>\r\n                              )}\r\n                            </gb-input-dropdown-menu-item>\r\n                          ))}\r\n                        </>\r\n                      ) : (\r\n                        <>\r\n                          {this.items.map(item => (\r\n                            <gb-input-dropdown-menu-item\r\n                              type={this.type === 'tags' ? 'checkbox' : this.type}\r\n                              state={StateEnum.Default}\r\n                              supporting-text={this.supportingText}\r\n                              selected={this.isItemSelected(item)}\r\n                              color={this.color}\r\n                              onClick={() => this.handleItemSelect(item)}\r\n                            >\r\n                              {typeof item === 'object' ? (\r\n                                <>\r\n                                  <p slot=\"name\">{item.name}</p>\r\n                                  <h1 slot=\"initials\">\r\n                                    {item.name\r\n                                      .split(' ')\r\n                                      .map(part => part.charAt(0).toUpperCase())\r\n                                      .join('')}\r\n                                  </h1>\r\n                                  <p slot=\"supporting_text\">{item.username}</p>\r\n                                </>\r\n                              ) : typeof item === 'string' ? (\r\n                                <>\r\n                                  <p slot=\"name\">{item}</p>\r\n                                  <h1 slot=\"initials\">\r\n                                    {item\r\n                                      .split(' ')\r\n                                      .map(part => part.charAt(0).toUpperCase())\r\n                                      .join('')}\r\n                                  </h1>\r\n                                </>\r\n                              ) : (\r\n                                <>\r\n                                  <p slot=\"name\">{item}</p>\r\n                                  <h1 slot=\"initials\">{item}</h1>\r\n                                </>\r\n                              )}\r\n                            </gb-input-dropdown-menu-item>\r\n                          ))}\r\n                        </>\r\n                      )}\r\n                    </>\r\n                  )}\r\n                </div>\r\n              )}\r\n            </>\r\n          </div>\r\n        </div>\r\n        {/* <button onClick={() => this.clearValue()}>Clear</button> */}\r\n        {this.showHintText && <>{!this.destructive ? <p class=\"hint_text text-sm-regular\">{this.hintText}</p> : <p class=\"error_text text-sm-regular\">{this.errorText}</p>}</>}\r\n      </div>,\r\n    ];\r\n  }\r\n}\r\n","@import './../../global/global.css';\r\n\r\n.dropdown-container {\r\n    display: flex;\r\n    padding: var(--spacing-1);\r\n    align-items: center;\r\n    gap: var(--spacing-none);\r\n    border-radius: var(--rounded-none);\r\n    cursor: pointer;\r\n}\r\n\r\n.dropdown-item {\r\n    display: flex;\r\n    justify-content: flex-start;\r\n    align-items: center;\r\n    gap: var(--spacing-2);\r\n    flex: 1 0 0;\r\n    min-width: 0;\r\n    border-radius: var(--rounded-xs);\r\n    cursor: pointer;\r\n    color: var(--color-text, #4B5565);\r\n    font-family: var(--Font-Family-Body, Sora);\r\n    font-style: normal;\r\n    letter-spacing: var(--Font-Letter-spacing-T-md, 0px);\r\n}\r\n\r\n/* .name_text{\r\n    max-width: 5rem;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n} */\r\n\r\n.content{\r\n    display: flex;\r\n  align-items: center;\r\n  gap: 0.5rem; /* if needed */\r\n  min-width: 0; /* ❗ critical for ellipsis to work */\r\n}\r\n\r\n::slotted([slot='name']) {\r\n    width: 100%;\r\n    /* max-width: 15rem; */\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n    flex: 1 1 auto;\r\n    white-space: nowrap;\r\n}\r\n\r\n::slotted([slot='name'].no_wrap) {\r\n    white-space: nowrap;\r\n}\r\n\r\n::slotted([slot=\"supporting_text\"]) {\r\n    font-size: var(--Font-Size-T-sm, 14px);\r\n    font-weight: var(--Font-Weight-Regular, 400);\r\n    line-height: var(--Font-Line-height-T-sm, 20px); /* 142.857% */\r\n    overflow: hidden;\r\n    white-space: nowrap;\r\n    text-overflow: ellipsis;\r\n}\r\n\r\n/* State Styles */\r\n.dropdown-item:hover{\r\n    background-color: var(--color-background-gray-subtler, #EEF2F6);\r\n}\r\n\r\n.dropdown-item:active{\r\n    background-color: var(--color-background-gray-subtle, #E3E8EF);\r\n}\r\n\r\n.dropdown-item.default.selected,\r\n.dropdown-item.icon_leading.selected,\r\n.dropdown-item.avatar_leading.selected,\r\n.dropdown-item.dot_leading.selected{\r\n    background-color: var(--color-background-information-subtlest, #E4F0FC);\r\n}\r\n\r\n.dropdown-item.default.selected:hover,\r\n.dropdown-item.icon_leading.selected:hover,\r\n.dropdown-item.avatar_leading.selected:hover,\r\n.dropdown-item.dot_leading.selected:hover{\r\n    background-color: var(--color-background-discovery-subtlest, #F0F9FF);\r\n}\r\n\r\n.dropdown-item.default.selected:active,\r\n.dropdown-item.icon_leading.selected:active,\r\n.dropdown-item.avatar_leading.selected:active,\r\n.dropdown-item.dot_leading.selected:active{\r\n    background-color: var(--color-background-information-subtler, #C8E0F9);\r\n}\r\n\r\n.dropdown-item.default.selected.disabled,\r\n.dropdown-item.icon_leading.selected.disabled,\r\n.dropdown-item.avatar_leading.selected.disabled,\r\n.dropdown-item.dot_leading.selected.disabled,\r\n.dropdown-item.checkbox.selected.disabled{\r\n    background-color: transparent;\r\n    color: var(--color-text-disabled, #CDD5DF);\r\n}\r\n\r\n.content {\r\n    display: flex;\r\n    min-height: 2.5rem;\r\n    padding: 0 var(--spacing-2);\r\n    justify-content: flex-start;\r\n    align-items: center;\r\n    gap: var(--spacing-2);\r\n    flex: 1 0 0;\r\n}\r\n\r\n.dropdown-item--selected slot {\r\n    flex-grow: 1;\r\n    margin-right: 8px;\r\n}\r\n\r\n.dropdown-item--selected svg:last-of-type {\r\n    display: flex;\r\n    align-items: center;\r\n}\r\n\r\n.tick{\r\n    display: flex;\r\n    align-items: center;\r\n    padding-right: var(--spacing-2);\r\n}","import { Component, Element, Prop, h, Fragment, Event, EventEmitter } from \"@stencil/core\";\r\nimport { ColorTypes, DropdownTypes, StateEnum } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-input-dropdown-menu-item',\r\n  styleUrl: 'gb-input-dropdown-menu-item.css',\r\n  shadow: true,\r\n})\r\nexport class GbInputDropdownMenuItem {\r\n  @Prop() type: DropdownTypes;\r\n  @Prop() supportingText: boolean = false;\r\n  @Prop({ mutable: true }) selected: boolean = false;\r\n  @Prop() state: StateEnum;\r\n  @Prop() color: ColorTypes;\r\n  @Element() el: HTMLElement;\r\n  @Event() dropdownItemClicked: EventEmitter<void>;\r\n\r\n  componentDidLoad() {\r\n    const nameSlot = this.el.querySelector('[slot=\"name\"]');\r\n    const supportingTextSlot = this.el.querySelector('[slot=\"supporting_text\"]');\r\n    const initialsSlot = this.el.querySelector('[slot=\"initials\"]');\r\n\r\n    if (nameSlot) {\r\n      nameSlot.classList.add('text-md-medium');\r\n      nameSlot.classList.add('no_wrap');\r\n    }\r\n\r\n    if (initialsSlot) {\r\n      initialsSlot.classList.add('text-xs-semi-bold');\r\n    }\r\n\r\n    if (supportingTextSlot) {\r\n      supportingTextSlot.classList.add('text-sm-regular');\r\n    }\r\n  }\r\n\r\n  async handleClick() {\r\n    this.dropdownItemClicked.emit()\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      // <div class=\"dropdown-container\" onClick={() => (this.selected = !this.selected)}>\r\n      <div class=\"dropdown-container\" onClick={() => this.handleClick()}>\r\n        <div\r\n          class={{\r\n            'dropdown-item': true,\r\n            'selected': this.selected,\r\n            'disabled': this.state === 'disabled',\r\n            'checkbox': this.type === 'checkbox',\r\n            [this.type]: true,\r\n          }}\r\n          role=\"option\"\r\n          aria-selected={this.selected ? 'true' : 'false'}\r\n          aria-disabled={this.state === 'disabled' ? 'true' : 'false'}\r\n        >\r\n          <div class=\"content\">\r\n            {this.type === 'icon_leading' && (\r\n              <svg id=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                <path\r\n                  d=\"M5.48131 12.9013C4.30234 13.6034 1.21114 15.0368 3.09388 16.8305C4.01359 17.7067 5.03791 18.3334 6.32572 18.3334H13.6743C14.9621 18.3334 15.9864 17.7067 16.9061 16.8305C18.7889 15.0368 15.6977 13.6034 14.5187 12.9013C11.754 11.2551 8.24599 11.2551 5.48131 12.9013Z\"\r\n                  stroke=\"#4B5565\"\r\n                  stroke-width=\"1.5\"\r\n                />\r\n                <path\r\n                  d=\"M13.75 5.41669C13.75 7.48776 12.0711 9.16669 10 9.16669C7.92893 9.16669 6.25 7.48776 6.25 5.41669C6.25 3.34562 7.92893 1.66669 10 1.66669C12.0711 1.66669 13.75 3.34562 13.75 5.41669Z\"\r\n                  stroke=\"#4B5565\"\r\n                  stroke-width=\"1.5\"\r\n                />\r\n              </svg>\r\n            )}\r\n            {this.type === 'avatar_leading' && (\r\n              <gb-avatar class=\"avatar-icon\" size=\"xs\" color={this.color} text={true}>\r\n                <slot name=\"initials\" slot=\"initials\"></slot>\r\n              </gb-avatar>\r\n            )}\r\n            {this.type === 'dot_leading' && (\r\n              <>\r\n                {this.state === 'default' ? (\r\n                  <svg id=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 10 10\" fill=\"none\">\r\n                    <circle cx=\"5\" cy=\"5\" r=\"4\" fill=\"#17B26A\" />\r\n                  </svg>\r\n                ) : (\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\r\n                    <circle cx=\"5\" cy=\"5\" r=\"4\" fill=\"#EEF2F6\" />\r\n                  </svg>\r\n                )}\r\n              </>\r\n            )}\r\n            {this.type === 'checkbox' && <gb-checkbox class=\"checkbox\" size=\"md\" type=\"checkbox\" state={this.state} checked={this.selected}></gb-checkbox>}\r\n              <slot name=\"name\"></slot>\r\n            {this.supportingText && (\r\n              <span>\r\n                <slot name=\"supporting_text\"></slot>\r\n              </span>\r\n            )}\r\n          </div>\r\n          {this.selected && this.type !== 'checkbox' && (\r\n            <div class={`tick`}>\r\n              {this.state !== 'disabled' ? (\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" class={`${this.state}`}>\r\n                  <path\r\n                    d=\"M4.16669 12.0834C4.16669 12.0834 5.41669 12.0834 7.08335 15C7.08335 15 11.7157 7.36115 15.8334 5.83337\"\r\n                    stroke=\"#075DB2\"\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                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                  <path\r\n                    d=\"M4.16669 12.0834C4.16669 12.0834 5.41669 12.0834 7.08335 15C7.08335 15 11.7157 7.36115 15.8334 5.83337\"\r\n                    stroke=\"#CDD5DF\"\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            </div>\r\n          )}\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}","@import './../../global/global.css';\r\n:host {\r\n  position: relative;\r\n}\r\n\r\n.input_container,\r\n.input_with_label {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--spacing-2);\r\n}\r\n\r\n.label {\r\n  color: var(--color-text, #4b5565);\r\n}\r\n\r\n.hint_text {\r\n  color: var(--color-text-subtle, #697586);\r\n}\r\n\r\n.error_text {\r\n  color: var(--color-text-danger, #b51726);\r\n}\r\n\r\n.content {\r\n  width: 100%;\r\n  height: 100%;\r\n  border: none;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  color: var(--color-text, #4b5565);\r\n}\r\n\r\n.content::placeholder,\r\n.input_like::placeholder {\r\n  color: var(--color-text-disabled, #cdd5df);\r\n}\r\n\r\n.content:focus,\r\n.input_like:focus {\r\n  outline: none;\r\n}\r\n\r\n.icon {\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n\r\n.input {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--spacing-2);\r\n  align-self: stretch;\r\n  border-radius: var(--rounded-sm);\r\n}\r\n\r\n.input,\r\n.input.icon_leading,\r\n.password_input {\r\n  border: 1px solid var(--color-border-input, #cdd5df);\r\n  background: var(--color-background-card, #ffffff);\r\n}\r\n\r\n.input.leading_text {\r\n  flex-grow: 1;\r\n  border-radius: var(--rounded-none, 0rem) 0.5rem 0.5rem var(--rounded-none, 0rem);\r\n}\r\n\r\n.leading_text_input {\r\n  display: flex;\r\n  gap: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n}\r\n\r\n.add_on {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  border: 1px solid var(--color-border-input, #cdd5df);\r\n  border-right: none;\r\n  padding: var(--spacing-2) var(--spacing-3);\r\n  border-radius: 0.5rem var(--rounded-none) var(--rounded-none) 0.5rem;\r\n}\r\n\r\n.text_input {\r\n  flex-grow: 1;\r\n  height: 100%;\r\n}\r\n\r\n.trailing_button_text_input,\r\n.leading_dropdown_text_input {\r\n  display: flex;\r\n  flex-grow: 1;\r\n  gap: var(--spacing-2);\r\n}\r\n\r\n.trailing_button_text_input.sm,\r\n.trailing_button_text_input.md {\r\n  padding: var(--spacing-none) 0 0 var(--spacing-3);\r\n}\r\n\r\n.input.trailing_button.sm.default,\r\n.input.trailing_button.md.default {\r\n  padding: 0;\r\n}\r\n\r\n.leading_dropdown_dropdown,\r\n.trailing_dropdown_dropdown {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--spacing-1);\r\n  cursor: pointer;\r\n}\r\n\r\n.dropdown_arrow {\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n\r\n.tick {\r\n  width: 1.25rem;\r\n  height: 1.25rem;\r\n}\r\n\r\n.help_circle {\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n\r\n/* .input.tags{\r\n  position: relative;\r\n} */\r\n\r\n/* Size Styles */\r\n.input.sm {\r\n  min-height: 2.5rem;\r\n}\r\n\r\n.input.md {\r\n  min-height: 3rem;\r\n}\r\n\r\n.input.sm.default,\r\n.input.sm.password_icon_leading {\r\n  padding: var(--spacing-none) var(--spacing-3);\r\n}\r\n\r\n.input.sm.icon_leading {\r\n  position: relative;\r\n  padding: var(--spacing-none) var(--spacing-2) var(--spacing-none) var(--spacing-3);\r\n}\r\n\r\n.input.sm.payment_input {\r\n  padding: var(--spacing-none) var(--spacing-3);\r\n}\r\n\r\n.input.md.default {\r\n  padding: var(--spacing-none) 0.875rem var(--spacing-none) var(--spacing-3);\r\n}\r\n\r\n.input.md.icon_leading {\r\n  position: relative;\r\n  padding: var(--spacing-none) var(--spacing-2) var(--spacing-none) var(--spacing-3);\r\n}\r\n\r\n.input.md.password_icon_leading {\r\n  padding: var(--spacing-none) var(--spacing-2) var(--spacing-none) var(--spacing-3);\r\n}\r\n\r\n.input.md.payment_input {\r\n  padding: 0 0.875rem 0 var(--spacing-3);\r\n}\r\n\r\n/* State Styles */\r\n.input:focus-within,\r\n.password_input:focus-within,\r\n.count_text_input:focus-within,\r\n.input_like_parent:focus-within {\r\n  border: 1.3px solid var(--color-border-selected, #075db2);\r\n}\r\n\r\n.input.disabled,\r\n.password_input.disabled,\r\n.count_text_input.disabled,\r\n.action.disabled,\r\n.input_like_parent.disabled {\r\n  border: 1px solid var(--color-border-disabled, #e3e8ef);\r\n}\r\n\r\n.input.disabled,\r\n.content.disabled,\r\n.password_input.disabled,\r\n.count_text_input.disabled,\r\n.input_like_parent.disabled,\r\n.input_like.disabled {\r\n  background: var(--color-background-disabled, #f6f8fa);\r\n  color: var(--color-text-subtle, #697586);\r\n  cursor: not-allowed;\r\n  pointer-events: none;\r\n}\r\n\r\n.input_group.disabled {\r\n  cursor: not-allowed;\r\n  pointer-events: none;\r\n}\r\n\r\n.icon.disabled path[stroke] {\r\n  stroke: var(--color-icon-disabled, #cdd5df);\r\n}\r\n\r\n.input.destructive,\r\n.input.icon_leading.destructive,\r\n.count_text_input.destructive,\r\n.input_like_parent.destructive {\r\n  border: 1px solid var(--color-border-danger, #b51726);\r\n}\r\n\r\n::slotted([slot='tooltip_label']) {\r\n  white-space: nowrap;\r\n  color: var(--color-text, #4b5565);\r\n}\r\n\r\n::slotted([slot='tooltip_supporting_text']) {\r\n  min-width: fit-content;\r\n  max-width: 18.5rem;\r\n  color: var(--color-text-subtle, #697586);\r\n  margin-top: 5rem;\r\n}\r\n\r\n::slotted([slot='text'].text_slot) {\r\n  color: var(--color-text, #4b5565);\r\n}\r\n\r\n::slotted([slot='text'].text_slot.disabled) {\r\n  color: var(--color-text-disabled, #cdd5df);\r\n}\r\n\r\n/* Type Styles */\r\n.password_input {\r\n  display: flex;\r\n  gap: var(--spacing-3);\r\n  align-items: center;\r\n  align-self: stretch;\r\n  border-radius: var(--rounded-sm);\r\n}\r\n\r\n.password_content {\r\n  display: flex;\r\n  gap: var(--spacing-2);\r\n  padding: 0.625rem var(--spacing-none) 0.625rem 0.875rem;\r\n  flex-grow: 1;\r\n}\r\n\r\n.dropdown {\r\n  padding-right: var(--spacing-half);\r\n  padding-left: var(--spacing-3);\r\n}\r\n\r\n.password_icon_leading_content {\r\n  display: flex;\r\n  align-items: center;\r\n  flex-grow: 1;\r\n  gap: var(--spacing-2);\r\n}\r\n\r\n.count_input {\r\n  display: flex;\r\n  gap: var(--spacing-none);\r\n}\r\n\r\n.count_text_input {\r\n  display: flex;\r\n  padding: var(--spacing-none) var(--spacing-3);\r\n  align-items: center;\r\n  gap: var(--spacing-2);\r\n  flex: 1 0 0;\r\n  align-self: stretch;\r\n  border: 1px solid var(--color-border-input, #cdd5df);\r\n  border-radius: 0.5rem var(--rounded-none) var(--rounded-none) 0.5rem;\r\n}\r\n\r\n.action {\r\n  border: 1px solid var(--color-border-input, #cdd5df);\r\n  border-left: none;\r\n  display: flex;\r\n  /* padding-right: var(--spacing-1); */\r\n  align-items: center;\r\n  gap: var(--spacing-none);\r\n  align-self: stretch;\r\n  border-radius: var(--rounded-none) 0.5rem 0.5rem var(--rounded-none);\r\n}\r\n\r\n/* hr{\r\n  height: 100%;\r\n  border-right: 0.5px solid var(--color-border-input, #CDD5DF);\r\n} */\r\n\r\n.vertical_line {\r\n  width: 1px;\r\n  height: 100%;\r\n  background-color: var(--color-border-input, #cdd5df);\r\n  /* border-right: 1px solid var(--color-border-input, #CDD5DF); */\r\n}\r\n\r\n.trailing_dropdown_content {\r\n  display: flex;\r\n  align-items: center;\r\n  flex-grow: 1;\r\n  gap: var(--spacing-2);\r\n}\r\n\r\n.country_icon {\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n\r\n.dropdown_menu {\r\n  display: flex;\r\n  width: fit-content;\r\n  padding: var(--spacing-none);\r\n  flex-direction: column;\r\n  align-items: flex-start;\r\n  align-items: stretch;\r\n  border-radius: var(--rounded-sm);\r\n  border: 1px solid var(--color-border-subtler, #e3e8ef);\r\n  background: var(--color-surface, #ffffff);\r\n  box-shadow: var(--shadow-sm);\r\n  position: absolute;\r\n  z-index: 10;\r\n  gap: var(--spacing-none);\r\n}\r\n\r\n.dropdown_menu.leading_dropdown.top.sm {\r\n  bottom: 3rem;\r\n  left: 0;\r\n}\r\n\r\n.dropdown_menu.leading_dropdown.top.md {\r\n  bottom: 3.5rem;\r\n  left: 0;\r\n}\r\n\r\n.dropdown_menu.leading_dropdown.bottom.sm {\r\n  top: 4rem;\r\n  left: 0;\r\n}\r\n\r\n.dropdown_menu.leading_dropdown.bottom.md {\r\n  top: 4.5rem;\r\n  left: 0;\r\n}\r\n\r\n.dropdown_menu.trailing_dropdown.top.sm {\r\n  bottom: 3rem;\r\n  right: 0;\r\n}\r\n\r\n.dropdown_menu.trailing_dropdown.top.md {\r\n  bottom: 3.5rem;\r\n  right: 0;\r\n}\r\n\r\n.dropdown_menu.trailing_dropdown.bottom.sm {\r\n  top: 4rem;\r\n  right: 0;\r\n}\r\n\r\n.dropdown_menu.trailing_dropdown.bottom.md {\r\n  top: 4.5rem;\r\n  right: 0;\r\n}\r\n\r\n/* Input Tags Styles */\r\n.input_group {\r\n  --height: auto;\r\n  --inputheight: 4.5rem;\r\n  --weight: 100%;\r\n  /* flex-direction: row-reverse; */\r\n  display: flex;\r\n  flex-direction: column;\r\n  position: relative;\r\n}\r\n\r\n.input_like_parent {\r\n  border: 1px solid var(--color-border-input, #cdd5df);\r\n  border-radius: var(--rounded-sm);\r\n  display: flex;\r\n  cursor: pointer;\r\n  /* flex-wrap: wrap; */\r\n}\r\n\r\n.input_like_parent.sm {\r\n  padding: 0.5rem 0.75rem 0.5rem var(--spacing-3);\r\n}\r\n\r\n.input_like_parent.md {\r\n  padding: 0.625rem 0.875rem 0.625rem var(--spacing-3);\r\n}\r\n\r\n.input_field {\r\n  display: flex;\r\n  gap: var(--spacing-2);\r\n  align-items: center;\r\n}\r\n\r\n.hidden-span {\r\n  visibility: hidden;\r\n  position: absolute;\r\n  max-width: 100%;\r\n  white-space: pre; /* Preserves spaces */\r\n}\r\n\r\n.input_like {\r\n  border: none;\r\n  color: var(--color-text, #4b5565);\r\n}\r\n\r\n.results_display {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  position: relative;\r\n  gap: 0.5rem;\r\n  background-color: var(--color-surface, #ffffff);\r\n}\r\n\r\n.results_display.disabled {\r\n  background: var(--color-background-disabled, #f6f8fa);\r\n}\r\n\r\n.tags {\r\n  padding-top: 1rem;\r\n}\r\n\r\n.dropdown_list.show {\r\n  display: block;\r\n}\r\n\r\n.tags_dropdown_menu {\r\n  display: flex;\r\n  min-width: 100%;\r\n  width: fit-content;\r\n  max-height: 15rem;\r\n  padding: var(--spacing-none);\r\n  flex-direction: column;\r\n  align-items: stretch;\r\n  border-radius: var(--rounded-sm);\r\n  border: 1px solid var(--color-border-subtler, #e3e8ef);\r\n  background: var(--color-surface, #ffffff);\r\n  box-shadow: var(--shadow-sm);\r\n  position: absolute;\r\n  z-index: 99999;\r\n  gap: var(--spacing-none);\r\n  transition: 1s ease-in-out;\r\n  overflow-y: auto;\r\n}\r\n\r\n.tags_dropdown_menu.top {\r\n  bottom: 105%;\r\n}\r\n\r\n.tags_dropdown_menu.bottom {\r\n  top: 105%;\r\n}\r\n\r\n.input_close_button {\r\n  position: absolute;\r\n  z-index: 9999;\r\n}\r\n\r\n.input_close_button.sm {\r\n  right: 0.2rem;\r\n  top: 0.15rem;\r\n}\r\n\r\n.input_close_button.md {\r\n  right: 0.3rem;\r\n  top: 0.25rem;\r\n}\r\n\r\n.loader {\r\n  border: 3px solid var(--color-background-gray, #cdd5df); /* Light grey */\r\n  border-top: 3px solid var(--color-background-selected, #075db2); /* Blue */\r\n  border-radius: 50%;\r\n  width: 10px;\r\n  height: 10px;\r\n  animation: spin 2s linear infinite;\r\n}\r\n\r\n@keyframes spin {\r\n  0% {\r\n    transform: rotate(0deg);\r\n  }\r\n  100% {\r\n    transform: rotate(360deg);\r\n  }\r\n}\r\n","import { Component, Prop, h, State, Event, EventEmitter, Fragment, Element, getAssetPath, Watch, Listen, AttachInternals } from '@stencil/core';\r\nimport { GeneralSizes, InputFieldTypes, StateEnum } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-input-field',\r\n  styleUrl: 'gb-input-field.css',\r\n  shadow: true,\r\n  formAssociated: true,\r\n})\r\nexport class GbInputField {\r\n  @AttachInternals() internals: ElementInternals;\r\n  @Prop() size: GeneralSizes;\r\n  @Prop() type: InputFieldTypes;\r\n  @Prop() inputType: string = 'text';\r\n  @Prop() minLength: number;\r\n  @Prop() maxLength: number;\r\n  @Prop({ mutable: true }) destructive: boolean = false;\r\n  @Prop() state: 'default' | 'filled' | 'active' | 'disabled';\r\n  @Prop() showLabel: boolean = false;\r\n  @Prop() label: string = '';\r\n  @Prop() showHintText: boolean = false;\r\n  @Prop() hintText: string = '';\r\n  @Prop() errorText: string = '';\r\n  @Prop() showPlaceholder: boolean = false;\r\n  @Prop() placeholder: string = '';\r\n  @Prop() showHelpIcon: boolean = false;\r\n  @Prop() showValidation: boolean = false;\r\n  @Prop() showCountryIcon: boolean = false;\r\n  @Prop() iconSwap?: string;\r\n  @Prop({ mutable: true }) showCloseButton?: boolean = false;\r\n  @Prop({ mutable: true }) options: string[] = [\r\n    // '+234', 'NGN', 'CAD'\r\n  ];\r\n  @Prop({ reflect: true }) idOfInput: string;\r\n  @Prop({ reflect: true }) labelText: string;\r\n  @Prop({ reflect: true }) isReadOnly: boolean = false;\r\n  @Prop({ mutable: true }) results: any[] = [\r\n    // { objectName: 'John Doe', objectValue: 'john.doe@example.com' },\r\n    // { objectName: 'Jane Smith', objectValue: 'jane.smith@example.com' },\r\n    // { objectName: 'Alice Johnson', objectValue: 'alice.johnson@example.com' },\r\n    // { objectName: 'Emmanuel Kadiri', objectValue: 'kadiri2047@gmail.com' },\r\n    // { objectName: 'Gideon Ogunkola', objectValue: 'gideon@example.com' },\r\n    // 10,\r\n    // 20,\r\n    // 30,\r\n    // 40,\r\n    // 50,\r\n  ];\r\n  @Prop() menuPosition: 'top' | 'bottom';\r\n  @Prop() icon: 'country' | 'avatar' | 'dot' | 'false';\r\n  @Prop({ mutable: true }) value: any = [\r\n    // { objectName: 'John Doe', objectValue: 'john.doe@example.com' },\r\n    // { objectName: 'Jane Smith', objectValue: 'jane.smith@example.com' },\r\n    // { objectName: 'Alice Johnson', objectValue: 'alice.johnson@example.com' },\r\n    // { objectName: 'Emmanuel Kadiri', objectValue: 'kadiri2047@gmail.com' },\r\n    // 10,\r\n  ];\r\n  @Prop({ reflect: true }) required: boolean = false;\r\n  @Prop({ mutable: true }) loading: boolean = false;\r\n  @State() inputValue: string = '';\r\n  @State() tags: string[] = [];\r\n  @State() leadingIconSvg: string = '';\r\n  @State() isPasswordVisible: boolean = false;\r\n  @State() showDropdown: boolean = false;\r\n  @State() selectedItem: string = '';\r\n  @State() selectedItems: any[] = [];\r\n  @State() unselectedItems: any[] = [];\r\n  @State() paddingLeft: string = '1rem';\r\n  @State() paddingTop: string = '0rem';\r\n  @State() dropdownOpen: boolean = false;\r\n  @State() show: boolean = false;\r\n  @State() showSpinner: boolean = false;\r\n  @State() internalLoading: boolean = this.loading;\r\n  @Event() inputValueChanged: EventEmitter<any>;\r\n  @Event() buttonClicked: EventEmitter<void>;\r\n  @Element() el: HTMLElement;\r\n\r\n  private hiddenSpan: HTMLElement;\r\n  private minWidth: number = 10;\r\n\r\n  inputRef: HTMLInputElement;\r\n  dropdownRef!: HTMLElement;\r\n  inputElement!: HTMLInputElement;\r\n  resultsDisplayElement!: HTMLDivElement;\r\n  inputGroupElement!: HTMLDivElement;\r\n\r\n  formAssociatedCallback() {\r\n    // console.log('✅ formAssociatedCallback triggered');\r\n\r\n    this.internals.setValidity({});\r\n\r\n    // Optional: store reference to form\r\n    // const form = this.internals?.form;\r\n    // if (form) {\r\n    //   console.log('🔗 Associated form:', form);\r\n    // }\r\n  }\r\n\r\n  formResetCallback() {\r\n    this.inputValue = '';\r\n    this.value = '';\r\n    this.internals.setValidity({});\r\n    this.internals.setFormValue('');\r\n  }\r\n\r\n  formDisabledCallback(disabled: boolean) {\r\n    if (disabled) {\r\n      this.state = 'disabled';\r\n    }\r\n  }\r\n\r\n  private runValidation() {\r\n    if (this.required && !this.inputValue.trim()) {\r\n      this.internals.setValidity({ valueMissing: true }, 'This field is required.', this.el.shadowRoot.querySelector('input'));\r\n      this.destructive = true;\r\n    } else {\r\n      this.internals.setValidity({});\r\n      this.destructive = false;\r\n    }\r\n  }\r\n\r\n  async loadIcon(iconName: string) {\r\n    const iconPath = getAssetPath(`${iconName}`);\r\n    const response = await fetch(iconPath);\r\n    const svg = await response.text();\r\n    this.leadingIconSvg = svg;\r\n  }\r\n\r\n  handleTagInput(event: Event) {\r\n    const target = event.target as HTMLInputElement;\r\n    this.inputValue = target.value; // Update the value`\r\n    this.internals.setFormValue(this.inputValue);\r\n    this.runValidation();\r\n    this.inputValueChanged.emit(this.inputValue);\r\n\r\n    if (this.inputValue.trim() === '') {\r\n      this.showDropdown = false;\r\n      // this.results = [];\r\n      return;\r\n    }\r\n\r\n    this.showSpinner = true;\r\n\r\n    // Simulate API call\r\n    setTimeout(() => {\r\n      // this.results = this.mockStaffSearch(this.inputValue);\r\n      this.showDropdown = this.results.length > 0;\r\n    }, 1000);\r\n\r\n    this.updateInputWidth();\r\n  }\r\n\r\n  // mockStaffSearch(query: string) {\r\n  //   const mockData = this.results;\r\n\r\n  //   return mockData.filter(staff => staff.name.toLowerCase().includes(query.toLowerCase()));\r\n  // }\r\n\r\n  selectDropdownItem(item: any) {\r\n    if (this.value.length === 0) {\r\n      const isObject = typeof item === 'object';\r\n      const isSelected = this.selectedItems.some(i => (isObject ? i.objectName === item.objectName : i === item));\r\n      if (isSelected) {\r\n        // Unselect item: Move it from selectedItems to unselectedItems\r\n        this.selectedItems = this.selectedItems.filter(i => (isObject ? i.objectName !== item.objectName : i !== item));\r\n        if (!this.unselectedItems.some(i => (isObject ? i.objectName === item.objectName : i === item))) {\r\n          this.unselectedItems = [...this.unselectedItems, item];\r\n        }\r\n        console.log(this.selectedItems);\r\n        this.inputValueChanged.emit(this.selectedItems);\r\n      } else {\r\n        // Select item: Move it from unselectedItems to selectedItems\r\n        this.selectedItems = [...this.selectedItems, item];\r\n        this.unselectedItems = this.unselectedItems.filter(i => (isObject ? i.objectName !== item.objectName : i !== item));\r\n        console.log(this.selectedItems);\r\n        this.inputValueChanged.emit(this.selectedItems);\r\n      }\r\n    } else {\r\n      const isObject = typeof item === 'object';\r\n      const isSelected = this.selectedItems.some(i => (isObject ? i.objectName === item.objectName : i === item));\r\n\r\n      if (isSelected) {\r\n        this.value = this.value.filter(i => (isObject ? i.objectName !== item.objectName : i !== item));\r\n        console.log(this.value);\r\n        this.inputValueChanged.emit(this.value);\r\n      } else {\r\n        this.value = [...this.value, item]; // Add item to array\r\n        console.log(this.value);\r\n        this.inputValueChanged.emit(this.value);\r\n      }\r\n    }\r\n\r\n    this.updateStyles();\r\n  }\r\n\r\n  handleTagRemove(index: number) {\r\n    if (this.value.length > 0) {\r\n      this.value = [...this.value.slice(0, index), ...this.value.slice(index + 1)];\r\n      console.log(this.value);\r\n      // this.updateStyles();\r\n    } else {\r\n      this.selectedItems = [...this.selectedItems.slice(0, index), ...this.selectedItems.slice(index + 1)];\r\n      this.updateStyles();\r\n    }\r\n  }\r\n\r\n  updateStyles() {\r\n    setTimeout(() => {\r\n      if (this.resultsDisplayElement) {\r\n        const resultsWidth = this.resultsDisplayElement.offsetWidth;\r\n        const inputWidth = this.inputElement.offsetWidth;\r\n\r\n        this.paddingLeft = this.selectedItems.length === 0 ? '1rem' : `${resultsWidth + 10}px`;\r\n\r\n        this.paddingTop = this.selectedItems.length > 2 ? '1rem' : `${inputWidth + 10}px`;\r\n      }\r\n    });\r\n\r\n    if (this.destructive) {\r\n      this.destructive = false;\r\n    }\r\n    this.inputValue = '';\r\n  }\r\n\r\n  exportSelectedStaff() {\r\n    this.inputValueChanged.emit(this.selectedItems);\r\n  }\r\n\r\n  // private copyToClipboard = () => {\r\n  //   if (this.inputRef) {\r\n  //     this.inputRef.select();\r\n  //     document.execCommand('copy'); // Deprecated but works in most browsers\r\n  //     // For modern browsers:\r\n  //     navigator.clipboard.writeText(this.inputRef.value);\r\n  //   }\r\n  // };\r\n\r\n  onButtonClicked() {\r\n    this.buttonClicked.emit();\r\n  }\r\n\r\n  @Listen('click', { target: 'document' })\r\n  handleClickOutside(event: MouseEvent) {\r\n    if (this.showDropdown && !this.el.contains(event.target as Node)) {\r\n      this.showDropdown = false;\r\n    }\r\n  }\r\n\r\n  /* Function to handle and emit the inputted values */\r\n  handleInput(event: Event) {\r\n    const target = event.target as HTMLInputElement;\r\n    this.inputValue = target.value;\r\n    this.internals.setFormValue(this.inputValue);\r\n    this.runValidation();\r\n    if (this.inputValue) {\r\n      this.showCloseButton = true;\r\n    } else {\r\n      this.showCloseButton = false;\r\n    }\r\n    if (this.type === 'leading_dropdown') {\r\n      this.inputValueChanged.emit(`${this.selectedItem}${this.inputValue}`);\r\n    } else {\r\n      this.inputValueChanged.emit(this.inputValue);\r\n    }\r\n  }\r\n\r\n  clearInput() {\r\n    if (this.inputRef) {\r\n      this.inputRef.value = '';\r\n      this.inputValue = this.inputRef.value;\r\n      this.showCloseButton = false;\r\n      this.inputValueChanged.emit(this.inputValue);\r\n    }\r\n  }\r\n\r\n  /* Function to handle and emit the inputted values */\r\n  togglePasswordVisibility() {\r\n    this.isPasswordVisible = !this.isPasswordVisible;\r\n  }\r\n\r\n  @Watch('options')\r\n  optionsChanged(newOptions: string[]) {\r\n    // Update selectedItem when options are loaded or changed\r\n    if (newOptions.length > 0 && !this.selectedItem) {\r\n      this.selectedItem = newOptions[0];\r\n    }\r\n  }\r\n\r\n  @Watch('loading')\r\n  onLoadingChanged(newLoading: boolean) {\r\n    this.internalLoading = newLoading;\r\n  }\r\n\r\n  isItemSelected(option) {\r\n    return this.selectedItem === option;\r\n  }\r\n\r\n  isTagItemSelected(item) {\r\n    // return this.selectedStaff.some(i => i.name === item.name);\r\n\r\n    const isObject = typeof item === 'object';\r\n    return this.selectedItems.some(i => (isObject ? i.objectName === item.objectName : i === item));\r\n  }\r\n\r\n  handleItemSelect(option) {\r\n    // For other types, allow only one selection\r\n    this.selectedItem = option;\r\n    this.showDropdown = false; // Close the dropdown\r\n  }\r\n\r\n  @Watch('value')\r\n  updateSelectedItems(newValue: any[]) {\r\n    if (Array.isArray(newValue) && newValue.length > 0) {\r\n      this.selectedItems = [];\r\n      this.unselectedItems = [];\r\n\r\n      const objectValues = newValue.filter(val => typeof val === 'object' && val !== null);\r\n      const primitiveValues = newValue.filter(val => typeof val !== 'object');\r\n\r\n      this.selectedItems = this.results.filter(item =>\r\n        typeof item === 'object' && item !== null\r\n          ? objectValues.some(val => JSON.stringify(val) === JSON.stringify(item)) // Avoid object reference issues\r\n          : primitiveValues.includes(item),\r\n      );\r\n\r\n      this.unselectedItems = this.results.filter(item =>\r\n        typeof item === 'object' && item !== null ? !objectValues.some(val => JSON.stringify(val) === JSON.stringify(item)) : !primitiveValues.includes(item),\r\n      );\r\n    } else {\r\n      this.selectedItems = [];\r\n      this.unselectedItems = [...this.results];\r\n    }\r\n  }\r\n\r\n  componentWillLoad() {\r\n    // setTimeout(() => {\r\n    //   this.loading = true;\r\n    // }, 3000);\r\n\r\n    this.selectedItem = this.options[0];\r\n\r\n    this.loadIcon(this.iconSwap);\r\n\r\n    if (this.type !== 'tags') {\r\n      this.selectedItem = null; // For single selection types\r\n    }\r\n\r\n    this.updateSelectedItems(this.value);\r\n\r\n    // console.log('Selected Items:', this.selectedItems);\r\n    // console.log('Unselected Items:', this.unselectedItems);\r\n  }\r\n\r\n  componentDidLoad() {\r\n    if (this.options && this.options.length > 0) {\r\n      this.selectedItem = this.options[0]; // Set the first item as default\r\n    }\r\n\r\n    const mainTextSlot = this.el.querySelector('[slot=\"tooltip_label\"]');\r\n    const supportingTextSlot = this.el.querySelector('[slot=\"tooltip_supporting_text\"]');\r\n    const textSlot = this.el.querySelector('[slot=\"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    if (textSlot) {\r\n      textSlot.classList.add('text_slot');\r\n\r\n      if (this.state === 'disabled') {\r\n        textSlot.classList.add('disabled');\r\n      }\r\n\r\n      textSlot.classList.add('text-md-regular');\r\n    }\r\n\r\n    if (this.type === 'tags') {\r\n      document.addEventListener('click', this.handleClickOutside);\r\n    }\r\n    // this.inputElement.addEventListener('input', this.handleTagInput.bind(this));\r\n    this.updateInputWidth();\r\n  }\r\n\r\n  updateInputWidth() {\r\n    if (this.hiddenSpan) {\r\n      const input = this.el.shadowRoot.querySelector('input') as HTMLInputElement;\r\n\r\n      // Update input width based on span's width or use minimum width\r\n      const calculatedWidth = Math.max(this.hiddenSpan.offsetWidth + 10, this.minWidth);\r\n      input.style.width = `${calculatedWidth}px`;\r\n    }\r\n  }\r\n\r\n  handleWrapperClick() {\r\n    this.inputElement.focus(); // Focus the input field\r\n  }\r\n\r\n  // disconnectedCallback() {\r\n  //   document.removeEventListener('click', this.handleClickOutside);\r\n  //   this.inputElement.removeEventListener('input', this.handleTagInput.bind(this));\r\n  // }\r\n\r\n  render() {\r\n    return (\r\n      <div class={`input_container`}>\r\n        <div class={`input_with_label`}>\r\n          {this.showLabel && <p class=\"label text-sm-medium\">{this.label.charAt(0).toUpperCase() + this.label.slice(1).toLowerCase()}</p>}\r\n          {this.type === 'default' && [\r\n            <div class={`input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}`}>\r\n              <input\r\n                class={`content text-md-regular ${this.type} ${this.state}`}\r\n                type={this.inputType}\r\n                minLength={this.minLength}\r\n                maxLength={this.maxLength}\r\n                placeholder={this.placeholder ? this.placeholder : ''}\r\n                onInput={event => this.handleInput(event)}\r\n                value={this.value}\r\n              />\r\n              <>\r\n                {this.loading && <div class=\"loader\"></div>}\r\n                {this.showValidation && (\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                    <path\r\n                      d=\"M7.03831 9.9735C6.6785 9.76829 6.22047 9.89362 6.01526 10.2534C5.81005 10.6132 5.93538 11.0713 6.29518 11.2765L7.03831 9.9735ZM8.66675 12.5L8.0231 12.885C8.16612 13.1241 8.42989 13.2642 8.70808 13.2489C8.98627 13.2335 9.23302 13.0652 9.34885 12.8118L8.66675 12.5ZM13.6933 7.32469C14.0567 7.12594 14.1902 6.67022 13.9914 6.3068C13.7927 5.94338 13.337 5.80988 12.9736 6.00863L13.6933 7.32469ZM19.0834 9.99999C19.0834 4.9834 15.0167 0.916656 10.0001 0.916656V2.41666C14.1882 2.41666 17.5834 5.81183 17.5834 9.99999H19.0834ZM10.0001 0.916656C4.98349 0.916656 0.916748 4.9834 0.916748 9.99999H2.41675C2.41675 5.81183 5.81192 2.41666 10.0001 2.41666V0.916656ZM0.916748 9.99999C0.916748 15.0166 4.98349 19.0833 10.0001 19.0833V17.5833C5.81192 17.5833 2.41675 14.1881 2.41675 9.99999H0.916748ZM10.0001 19.0833C15.0167 19.0833 19.0834 15.0166 19.0834 9.99999H17.5834C17.5834 14.1881 14.1882 17.5833 10.0001 17.5833V19.0833ZM6.66675 10.625C6.29518 11.2765 6.29506 11.2764 6.29494 11.2763C6.2949 11.2763 6.29478 11.2763 6.29472 11.2762C6.29458 11.2761 6.29446 11.2761 6.29437 11.276C6.29417 11.2759 6.29406 11.2758 6.29402 11.2758C6.29394 11.2758 6.29418 11.2759 6.29472 11.2762C6.2958 11.2768 6.2981 11.2782 6.30155 11.2802C6.30845 11.2843 6.31994 11.2911 6.33556 11.3006C6.36683 11.3196 6.41441 11.3492 6.47453 11.3886C6.59518 11.4676 6.76402 11.5846 6.9516 11.7329C7.33643 12.0371 7.75673 12.4397 8.0231 12.885L9.31039 12.115C8.9101 11.4458 8.3304 10.9108 7.8819 10.5562C7.65281 10.3751 7.44665 10.2322 7.29647 10.1338C7.22117 10.0845 7.15938 10.046 7.11512 10.0191C7.09298 10.0056 7.07518 9.99502 7.06222 9.98739C7.05574 9.98358 7.05047 9.98051 7.04646 9.97819C7.04446 9.97703 7.04278 9.97606 7.04142 9.97528C7.04073 9.97489 7.04013 9.97454 7.03962 9.97425C7.03936 9.9741 7.03912 9.97396 7.0389 9.97384C7.03879 9.97377 7.03865 9.97369 7.03859 9.97366C7.03845 9.97358 7.03831 9.9735 6.66675 10.625ZM8.66675 12.5C9.34885 12.8118 9.3488 12.8119 9.34876 12.812C9.34876 12.812 9.34872 12.8121 9.34871 12.8121C9.3487 12.8122 9.34871 12.8121 9.34876 12.812C9.34884 12.8118 9.34905 12.8114 9.34938 12.8107C9.35003 12.8092 9.35117 12.8068 9.35277 12.8033C9.35599 12.7964 9.36109 12.7855 9.36805 12.7708C9.38196 12.7413 9.40327 12.6967 9.43164 12.6386C9.48841 12.5226 9.57333 12.3531 9.68378 12.1445C9.90507 11.7264 10.2268 11.1546 10.628 10.5403C11.4489 9.28341 12.5314 7.96007 13.6933 7.32469L12.9736 6.00863C11.4687 6.83158 10.218 8.4249 9.37213 9.72011C8.93998 10.3818 8.59509 10.9949 8.35805 11.4427C8.23933 11.667 8.14717 11.8508 8.08415 11.9797C8.05262 12.0441 8.02836 12.0949 8.01167 12.1303C8.00333 12.1479 7.99688 12.1617 7.99236 12.1715C7.9901 12.1763 7.98833 12.1802 7.98704 12.183C7.98639 12.1844 7.98587 12.1855 7.98547 12.1864C7.98527 12.1868 7.9851 12.1872 7.98496 12.1875C7.9849 12.1876 7.98482 12.1878 7.98478 12.1879C7.98471 12.188 7.98464 12.1882 8.66675 12.5Z\"\r\n                      fill=\"#079455\"\r\n                    />\r\n                  </svg>\r\n                )}\r\n                {this.showHelpIcon && (\r\n                  <div class={`help_circle`}>\r\n                    {!this.destructive ? (\r\n                      <gb-help-tooltip show-supporting-text={true}>\r\n                        <slot name=\"tooltip_label\" slot=\"label\"></slot>\r\n                        <slot name=\"tooltip_supporting_text\" slot=\"supporting_text\"></slot>\r\n                      </gb-help-tooltip>\r\n                    ) : (\r\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                        <path\r\n                          d=\"M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z\"\r\n                          stroke=\"#B51726\"\r\n                          stroke-width=\"1.33333\"\r\n                          stroke-linecap=\"round\"\r\n                          stroke-linejoin=\"round\"\r\n                        />\r\n                      </svg>\r\n                    )}\r\n                  </div>\r\n                )}\r\n              </>\r\n            </div>,\r\n          ]}\r\n          {this.type === 'icon_leading' && [\r\n            <div class={`input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}`}>\r\n              <div class={`icon ${this.size} ${this.state}`} innerHTML={this.leadingIconSvg}></div>\r\n              <input\r\n                class={`content text-${this.size}-regular ${this.type} ${this.state}`}\r\n                type={this.inputType}\r\n                minLength={this.minLength}\r\n                maxLength={this.maxLength}\r\n                placeholder={this.placeholder ? this.placeholder : ''}\r\n                onInput={event => this.handleInput(event)}\r\n                value={this.value}\r\n                ref={el => (this.inputRef = el as HTMLInputElement)}\r\n              />\r\n              <>\r\n                {this.loading && <div class=\"loader\"></div>}\r\n                {this.showValidation && !this.destructive && (\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                    <path\r\n                      d=\"M7.03831 9.9735C6.6785 9.76829 6.22047 9.89362 6.01526 10.2534C5.81005 10.6132 5.93538 11.0713 6.29518 11.2765L7.03831 9.9735ZM8.66675 12.5L8.0231 12.885C8.16612 13.1241 8.42989 13.2642 8.70808 13.2489C8.98627 13.2335 9.23302 13.0652 9.34885 12.8118L8.66675 12.5ZM13.6933 7.32469C14.0567 7.12594 14.1902 6.67022 13.9914 6.3068C13.7927 5.94338 13.337 5.80988 12.9736 6.00863L13.6933 7.32469ZM19.0834 9.99999C19.0834 4.9834 15.0167 0.916656 10.0001 0.916656V2.41666C14.1882 2.41666 17.5834 5.81183 17.5834 9.99999H19.0834ZM10.0001 0.916656C4.98349 0.916656 0.916748 4.9834 0.916748 9.99999H2.41675C2.41675 5.81183 5.81192 2.41666 10.0001 2.41666V0.916656ZM0.916748 9.99999C0.916748 15.0166 4.98349 19.0833 10.0001 19.0833V17.5833C5.81192 17.5833 2.41675 14.1881 2.41675 9.99999H0.916748ZM10.0001 19.0833C15.0167 19.0833 19.0834 15.0166 19.0834 9.99999H17.5834C17.5834 14.1881 14.1882 17.5833 10.0001 17.5833V19.0833ZM6.66675 10.625C6.29518 11.2765 6.29506 11.2764 6.29494 11.2763C6.2949 11.2763 6.29478 11.2763 6.29472 11.2762C6.29458 11.2761 6.29446 11.2761 6.29437 11.276C6.29417 11.2759 6.29406 11.2758 6.29402 11.2758C6.29394 11.2758 6.29418 11.2759 6.29472 11.2762C6.2958 11.2768 6.2981 11.2782 6.30155 11.2802C6.30845 11.2843 6.31994 11.2911 6.33556 11.3006C6.36683 11.3196 6.41441 11.3492 6.47453 11.3886C6.59518 11.4676 6.76402 11.5846 6.9516 11.7329C7.33643 12.0371 7.75673 12.4397 8.0231 12.885L9.31039 12.115C8.9101 11.4458 8.3304 10.9108 7.8819 10.5562C7.65281 10.3751 7.44665 10.2322 7.29647 10.1338C7.22117 10.0845 7.15938 10.046 7.11512 10.0191C7.09298 10.0056 7.07518 9.99502 7.06222 9.98739C7.05574 9.98358 7.05047 9.98051 7.04646 9.97819C7.04446 9.97703 7.04278 9.97606 7.04142 9.97528C7.04073 9.97489 7.04013 9.97454 7.03962 9.97425C7.03936 9.9741 7.03912 9.97396 7.0389 9.97384C7.03879 9.97377 7.03865 9.97369 7.03859 9.97366C7.03845 9.97358 7.03831 9.9735 6.66675 10.625ZM8.66675 12.5C9.34885 12.8118 9.3488 12.8119 9.34876 12.812C9.34876 12.812 9.34872 12.8121 9.34871 12.8121C9.3487 12.8122 9.34871 12.8121 9.34876 12.812C9.34884 12.8118 9.34905 12.8114 9.34938 12.8107C9.35003 12.8092 9.35117 12.8068 9.35277 12.8033C9.35599 12.7964 9.36109 12.7855 9.36805 12.7708C9.38196 12.7413 9.40327 12.6967 9.43164 12.6386C9.48841 12.5226 9.57333 12.3531 9.68378 12.1445C9.90507 11.7264 10.2268 11.1546 10.628 10.5403C11.4489 9.28341 12.5314 7.96007 13.6933 7.32469L12.9736 6.00863C11.4687 6.83158 10.218 8.4249 9.37213 9.72011C8.93998 10.3818 8.59509 10.9949 8.35805 11.4427C8.23933 11.667 8.14717 11.8508 8.08415 11.9797C8.05262 12.0441 8.02836 12.0949 8.01167 12.1303C8.00333 12.1479 7.99688 12.1617 7.99236 12.1715C7.9901 12.1763 7.98833 12.1802 7.98704 12.183C7.98639 12.1844 7.98587 12.1855 7.98547 12.1864C7.98527 12.1868 7.9851 12.1872 7.98496 12.1875C7.9849 12.1876 7.98482 12.1878 7.98478 12.1879C7.98471 12.188 7.98464 12.1882 8.66675 12.5Z\"\r\n                      fill=\"#079455\"\r\n                    />\r\n                  </svg>\r\n                )}\r\n                {this.showHelpIcon && (\r\n                  <div class={`help_circle`}>\r\n                    {!this.destructive ? (\r\n                      <gb-help-tooltip show-supporting-text={true}>\r\n                        <slot name=\"tooltip_label\" slot=\"label\"></slot>\r\n                        <slot name=\"tooltip_supporting_text\" slot=\"supporting_text\"></slot>\r\n                      </gb-help-tooltip>\r\n                    ) : (\r\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                        <path\r\n                          d=\"M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z\"\r\n                          stroke=\"#B51726\"\r\n                          stroke-width=\"1.33333\"\r\n                          stroke-linecap=\"round\"\r\n                          stroke-linejoin=\"round\"\r\n                        />\r\n                      </svg>\r\n                    )}\r\n                  </div>\r\n                )}\r\n                {this.showCloseButton && !this.destructive && (\r\n                  <gb-button\r\n                    size={this.size}\r\n                    hierarchy=\"tertiary_gray\"\r\n                    icon=\"only\"\r\n                    state=\"default\"\r\n                    icon-leading={true}\r\n                    icon-leading-swap=\"assets/cancel-01.svg\"\r\n                    onClick={() => this.clearInput()}\r\n                    class={`input_close_button ${this.size}`}\r\n                  ></gb-button>\r\n                )}\r\n              </>\r\n            </div>,\r\n          ]}\r\n          {this.type === 'leading_dropdown' && [\r\n            <div class={`input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}`}>\r\n              <div class={`leading_dropdown_dropdown`} onClick={() => (this.showDropdown = !this.showDropdown)}>\r\n                {this.showCountryIcon && (\r\n                  <div class={`country_icon`}>\r\n                    <img src=\"build/assets/NG.svg\" alt=\"\" />\r\n                  </div>\r\n                )}\r\n                <div class={`dropdown_text`}>\r\n                  <p class={`text-${this.size}-regular`} style={{ color: 'var(--color-text, #4B5565)' }}>\r\n                    {this.selectedItem}\r\n                  </p>\r\n                </div>\r\n                <div class={`dropdown_arrow`}>\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                    <path\r\n                      d=\"M15 7.50004C15 7.50004 11.3176 12.5 9.99996 12.5C8.68237 12.5 5 7.5 5 7.5\"\r\n                      stroke=\"#4B5565\"\r\n                      stroke-width=\"1.66667\"\r\n                      stroke-linecap=\"round\"\r\n                      stroke-linejoin=\"round\"\r\n                    />\r\n                  </svg>\r\n                </div>\r\n              </div>\r\n              <div class={`leading_dropdown_text_input`}>\r\n                <input\r\n                  class={`content text-${this.size}-regular ${this.type} ${this.state}`}\r\n                  type={this.inputType}\r\n                  minLength={this.minLength}\r\n                  maxLength={this.maxLength}\r\n                  placeholder={this.placeholder ? this.placeholder : ''}\r\n                  onInput={event => this.handleInput(event)}\r\n                  value={this.value}\r\n                />\r\n                {this.loading && <div class=\"loader\"></div>}\r\n                {this.showValidation && !this.destructive && (\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                    <path\r\n                      d=\"M7.03831 9.9735C6.6785 9.76829 6.22047 9.89362 6.01526 10.2534C5.81005 10.6132 5.93538 11.0713 6.29518 11.2765L7.03831 9.9735ZM8.66675 12.5L8.0231 12.885C8.16612 13.1241 8.42989 13.2642 8.70808 13.2489C8.98627 13.2335 9.23302 13.0652 9.34885 12.8118L8.66675 12.5ZM13.6933 7.32469C14.0567 7.12594 14.1902 6.67022 13.9914 6.3068C13.7927 5.94338 13.337 5.80988 12.9736 6.00863L13.6933 7.32469ZM19.0834 9.99999C19.0834 4.9834 15.0167 0.916656 10.0001 0.916656V2.41666C14.1882 2.41666 17.5834 5.81183 17.5834 9.99999H19.0834ZM10.0001 0.916656C4.98349 0.916656 0.916748 4.9834 0.916748 9.99999H2.41675C2.41675 5.81183 5.81192 2.41666 10.0001 2.41666V0.916656ZM0.916748 9.99999C0.916748 15.0166 4.98349 19.0833 10.0001 19.0833V17.5833C5.81192 17.5833 2.41675 14.1881 2.41675 9.99999H0.916748ZM10.0001 19.0833C15.0167 19.0833 19.0834 15.0166 19.0834 9.99999H17.5834C17.5834 14.1881 14.1882 17.5833 10.0001 17.5833V19.0833ZM6.66675 10.625C6.29518 11.2765 6.29506 11.2764 6.29494 11.2763C6.2949 11.2763 6.29478 11.2763 6.29472 11.2762C6.29458 11.2761 6.29446 11.2761 6.29437 11.276C6.29417 11.2759 6.29406 11.2758 6.29402 11.2758C6.29394 11.2758 6.29418 11.2759 6.29472 11.2762C6.2958 11.2768 6.2981 11.2782 6.30155 11.2802C6.30845 11.2843 6.31994 11.2911 6.33556 11.3006C6.36683 11.3196 6.41441 11.3492 6.47453 11.3886C6.59518 11.4676 6.76402 11.5846 6.9516 11.7329C7.33643 12.0371 7.75673 12.4397 8.0231 12.885L9.31039 12.115C8.9101 11.4458 8.3304 10.9108 7.8819 10.5562C7.65281 10.3751 7.44665 10.2322 7.29647 10.1338C7.22117 10.0845 7.15938 10.046 7.11512 10.0191C7.09298 10.0056 7.07518 9.99502 7.06222 9.98739C7.05574 9.98358 7.05047 9.98051 7.04646 9.97819C7.04446 9.97703 7.04278 9.97606 7.04142 9.97528C7.04073 9.97489 7.04013 9.97454 7.03962 9.97425C7.03936 9.9741 7.03912 9.97396 7.0389 9.97384C7.03879 9.97377 7.03865 9.97369 7.03859 9.97366C7.03845 9.97358 7.03831 9.9735 6.66675 10.625ZM8.66675 12.5C9.34885 12.8118 9.3488 12.8119 9.34876 12.812C9.34876 12.812 9.34872 12.8121 9.34871 12.8121C9.3487 12.8122 9.34871 12.8121 9.34876 12.812C9.34884 12.8118 9.34905 12.8114 9.34938 12.8107C9.35003 12.8092 9.35117 12.8068 9.35277 12.8033C9.35599 12.7964 9.36109 12.7855 9.36805 12.7708C9.38196 12.7413 9.40327 12.6967 9.43164 12.6386C9.48841 12.5226 9.57333 12.3531 9.68378 12.1445C9.90507 11.7264 10.2268 11.1546 10.628 10.5403C11.4489 9.28341 12.5314 7.96007 13.6933 7.32469L12.9736 6.00863C11.4687 6.83158 10.218 8.4249 9.37213 9.72011C8.93998 10.3818 8.59509 10.9949 8.35805 11.4427C8.23933 11.667 8.14717 11.8508 8.08415 11.9797C8.05262 12.0441 8.02836 12.0949 8.01167 12.1303C8.00333 12.1479 7.99688 12.1617 7.99236 12.1715C7.9901 12.1763 7.98833 12.1802 7.98704 12.183C7.98639 12.1844 7.98587 12.1855 7.98547 12.1864C7.98527 12.1868 7.9851 12.1872 7.98496 12.1875C7.9849 12.1876 7.98482 12.1878 7.98478 12.1879C7.98471 12.188 7.98464 12.1882 8.66675 12.5Z\"\r\n                      fill=\"#079455\"\r\n                    />\r\n                  </svg>\r\n                )}\r\n                {this.showHelpIcon && (\r\n                  <div class={`help_circle`}>\r\n                    {!this.destructive ? (\r\n                      <gb-help-tooltip show-supporting-text={true}>\r\n                        <slot name=\"tooltip_label\" slot=\"label\"></slot>\r\n                        <slot name=\"tooltip_supporting_text\" slot=\"supporting_text\"></slot>\r\n                      </gb-help-tooltip>\r\n                    ) : (\r\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                        <path\r\n                          d=\"M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z\"\r\n                          stroke=\"#B51726\"\r\n                          stroke-width=\"1.33333\"\r\n                          stroke-linecap=\"round\"\r\n                          stroke-linejoin=\"round\"\r\n                        />\r\n                      </svg>\r\n                    )}\r\n                  </div>\r\n                )}\r\n              </div>\r\n            </div>,\r\n            <>\r\n              {this.showDropdown && (\r\n                <div class={`dropdown_menu ${this.type} ${this.size} ${this.menuPosition}`} ref={el => (this.dropdownRef = el)}>\r\n                  {this.options.map(option => (\r\n                    <gb-input-dropdown-menu-item type=\"default\" state={StateEnum.Default} selected={this.isItemSelected(option)} onClick={() => this.handleItemSelect(option)}>\r\n                      <p slot=\"name\">{option}</p>\r\n                    </gb-input-dropdown-menu-item>\r\n                  ))}\r\n                </div>\r\n              )}\r\n            </>,\r\n          ]}\r\n          {this.type === 'trailing_dropdown' && [\r\n            <div class={`input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}`}>\r\n              <div class={`trailing_dropdown_content`}>\r\n                <p class={`text-${this.size}-regular`} style={{ color: 'var(--color-text, #4B5565)' }}>\r\n                  $\r\n                </p>\r\n                <input\r\n                  class={`content text-${this.size}-regular ${this.type} ${this.state}`}\r\n                  type={this.inputType}\r\n                  minLength={this.minLength}\r\n                  maxLength={this.maxLength}\r\n                  placeholder={this.placeholder ? this.placeholder : ''}\r\n                  onInput={event => this.handleInput(event)}\r\n                  value={this.value}\r\n                  onBlur={() => this.runValidation()}\r\n                />\r\n                {this.loading && <div class=\"loader\"></div>}\r\n                {this.showHelpIcon && (\r\n                  <div class={`help_circle`}>\r\n                    {!this.destructive ? (\r\n                      <gb-help-tooltip show-supporting-text={true}>\r\n                        <slot name=\"tooltip_label\" slot=\"label\"></slot>\r\n                        <slot name=\"tooltip_supporting_text\" slot=\"supporting_text\"></slot>\r\n                      </gb-help-tooltip>\r\n                    ) : (\r\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                        <path\r\n                          d=\"M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z\"\r\n                          stroke=\"#B51726\"\r\n                          stroke-width=\"1.33333\"\r\n                          stroke-linecap=\"round\"\r\n                          stroke-linejoin=\"round\"\r\n                        />\r\n                      </svg>\r\n                    )}\r\n                  </div>\r\n                )}\r\n              </div>\r\n              <div class={`trailing_dropdown_dropdown`} onClick={() => (this.showDropdown = !this.showDropdown)}>\r\n                <div class={`dropdown_text`}>\r\n                  <p class={`text-${this.size}-regular`} style={{ color: 'var(--color-text, #4B5565)' }}>\r\n                    {this.selectedItem}\r\n                  </p>\r\n                </div>\r\n                <div class={`dropdown_arrow`}>\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                    <path\r\n                      d=\"M15 7.50004C15 7.50004 11.3176 12.5 9.99996 12.5C8.68237 12.5 5 7.5 5 7.5\"\r\n                      stroke=\"#4B5565\"\r\n                      stroke-width=\"1.66667\"\r\n                      stroke-linecap=\"round\"\r\n                      stroke-linejoin=\"round\"\r\n                    />\r\n                  </svg>\r\n                </div>\r\n              </div>\r\n            </div>,\r\n            <>\r\n              {this.showDropdown && (\r\n                <div class={`dropdown_menu ${this.type} ${this.size} ${this.menuPosition}`} ref={el => (this.dropdownRef = el)}>\r\n                  {this.options.map(option => (\r\n                    <gb-input-dropdown-menu-item type=\"default\" state={StateEnum.Default} selected={this.isItemSelected(option)} onClick={() => this.handleItemSelect(option)}>\r\n                      <p slot=\"name\">{option}</p>\r\n                    </gb-input-dropdown-menu-item>\r\n                  ))}\r\n                </div>\r\n              )}\r\n            </>,\r\n          ]}\r\n          {this.type === 'leading_text' && [\r\n            <div class=\"leading_text_input\">\r\n              <div class={`add_on`}>\r\n                {/* <p class={`text-${this.size}-regular`} style={{ color: this.state === 'disabled' ? 'var(--color-text-disabled, #CDD5DF)' : 'var(--color-text, #4B5565)' }}>\r\n                  http://\r\n                </p> */}\r\n                <slot name=\"text\"></slot>\r\n              </div>\r\n              <div class={`input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}`}>\r\n                <input\r\n                  class={`content text-${this.size}-regular ${this.type} ${this.state}`}\r\n                  type={this.inputType}\r\n                  minLength={this.minLength}\r\n                  maxLength={this.maxLength}\r\n                  placeholder={this.placeholder ? this.placeholder : ''}\r\n                  onInput={event => this.handleInput(event)}\r\n                  value={this.value}\r\n                  onBlur={() => this.runValidation()}\r\n                />\r\n                {this.loading && <div class=\"loader\"></div>}\r\n                {this.showValidation && !this.destructive && (\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                    <path\r\n                      d=\"M7.03831 9.9735C6.6785 9.76829 6.22047 9.89362 6.01526 10.2534C5.81005 10.6132 5.93538 11.0713 6.29518 11.2765L7.03831 9.9735ZM8.66675 12.5L8.0231 12.885C8.16612 13.1241 8.42989 13.2642 8.70808 13.2489C8.98627 13.2335 9.23302 13.0652 9.34885 12.8118L8.66675 12.5ZM13.6933 7.32469C14.0567 7.12594 14.1902 6.67022 13.9914 6.3068C13.7927 5.94338 13.337 5.80988 12.9736 6.00863L13.6933 7.32469ZM19.0834 9.99999C19.0834 4.9834 15.0167 0.916656 10.0001 0.916656V2.41666C14.1882 2.41666 17.5834 5.81183 17.5834 9.99999H19.0834ZM10.0001 0.916656C4.98349 0.916656 0.916748 4.9834 0.916748 9.99999H2.41675C2.41675 5.81183 5.81192 2.41666 10.0001 2.41666V0.916656ZM0.916748 9.99999C0.916748 15.0166 4.98349 19.0833 10.0001 19.0833V17.5833C5.81192 17.5833 2.41675 14.1881 2.41675 9.99999H0.916748ZM10.0001 19.0833C15.0167 19.0833 19.0834 15.0166 19.0834 9.99999H17.5834C17.5834 14.1881 14.1882 17.5833 10.0001 17.5833V19.0833ZM6.66675 10.625C6.29518 11.2765 6.29506 11.2764 6.29494 11.2763C6.2949 11.2763 6.29478 11.2763 6.29472 11.2762C6.29458 11.2761 6.29446 11.2761 6.29437 11.276C6.29417 11.2759 6.29406 11.2758 6.29402 11.2758C6.29394 11.2758 6.29418 11.2759 6.29472 11.2762C6.2958 11.2768 6.2981 11.2782 6.30155 11.2802C6.30845 11.2843 6.31994 11.2911 6.33556 11.3006C6.36683 11.3196 6.41441 11.3492 6.47453 11.3886C6.59518 11.4676 6.76402 11.5846 6.9516 11.7329C7.33643 12.0371 7.75673 12.4397 8.0231 12.885L9.31039 12.115C8.9101 11.4458 8.3304 10.9108 7.8819 10.5562C7.65281 10.3751 7.44665 10.2322 7.29647 10.1338C7.22117 10.0845 7.15938 10.046 7.11512 10.0191C7.09298 10.0056 7.07518 9.99502 7.06222 9.98739C7.05574 9.98358 7.05047 9.98051 7.04646 9.97819C7.04446 9.97703 7.04278 9.97606 7.04142 9.97528C7.04073 9.97489 7.04013 9.97454 7.03962 9.97425C7.03936 9.9741 7.03912 9.97396 7.0389 9.97384C7.03879 9.97377 7.03865 9.97369 7.03859 9.97366C7.03845 9.97358 7.03831 9.9735 6.66675 10.625ZM8.66675 12.5C9.34885 12.8118 9.3488 12.8119 9.34876 12.812C9.34876 12.812 9.34872 12.8121 9.34871 12.8121C9.3487 12.8122 9.34871 12.8121 9.34876 12.812C9.34884 12.8118 9.34905 12.8114 9.34938 12.8107C9.35003 12.8092 9.35117 12.8068 9.35277 12.8033C9.35599 12.7964 9.36109 12.7855 9.36805 12.7708C9.38196 12.7413 9.40327 12.6967 9.43164 12.6386C9.48841 12.5226 9.57333 12.3531 9.68378 12.1445C9.90507 11.7264 10.2268 11.1546 10.628 10.5403C11.4489 9.28341 12.5314 7.96007 13.6933 7.32469L12.9736 6.00863C11.4687 6.83158 10.218 8.4249 9.37213 9.72011C8.93998 10.3818 8.59509 10.9949 8.35805 11.4427C8.23933 11.667 8.14717 11.8508 8.08415 11.9797C8.05262 12.0441 8.02836 12.0949 8.01167 12.1303C8.00333 12.1479 7.99688 12.1617 7.99236 12.1715C7.9901 12.1763 7.98833 12.1802 7.98704 12.183C7.98639 12.1844 7.98587 12.1855 7.98547 12.1864C7.98527 12.1868 7.9851 12.1872 7.98496 12.1875C7.9849 12.1876 7.98482 12.1878 7.98478 12.1879C7.98471 12.188 7.98464 12.1882 8.66675 12.5Z\"\r\n                      fill=\"#079455\"\r\n                    />\r\n                  </svg>\r\n                )}\r\n                {this.showHelpIcon && (\r\n                  <div class={`help_circle`}>\r\n                    {!this.destructive ? (\r\n                      <gb-help-tooltip show-supporting-text={true}>\r\n                        <slot name=\"tooltip_label\" slot=\"label\"></slot>\r\n                        <slot name=\"tooltip_supporting_text\" slot=\"supporting_text\"></slot>\r\n                      </gb-help-tooltip>\r\n                    ) : (\r\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                        <path\r\n                          d=\"M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z\"\r\n                          stroke=\"#B51726\"\r\n                          stroke-width=\"1.33333\"\r\n                          stroke-linecap=\"round\"\r\n                          stroke-linejoin=\"round\"\r\n                        />\r\n                      </svg>\r\n                    )}\r\n                  </div>\r\n                )}\r\n              </div>\r\n            </div>,\r\n          ]}\r\n          {this.type === 'payment_input' && (\r\n            <div class={`input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}`}>\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"23\" height=\"14\" viewBox=\"0 0 23 14\" fill=\"none\">\r\n                <path\r\n                  fill-rule=\"evenodd\"\r\n                  clip-rule=\"evenodd\"\r\n                  d=\"M11.179 11.8294C9.99493 12.8275 8.45902 13.43 6.78069 13.43C3.03582 13.43 0 10.4303 0 6.72997C0 3.02966 3.03582 0.0299683 6.78069 0.0299683C8.45902 0.0299683 9.99493 0.632466 11.179 1.63051C12.363 0.632466 13.8989 0.0299683 15.5773 0.0299683C19.3221 0.0299683 22.358 3.02966 22.358 6.72997C22.358 10.4303 19.3221 13.43 15.5773 13.43C13.8989 13.43 12.363 12.8275 11.179 11.8294Z\"\r\n                  fill=\"#ED0006\"\r\n                />\r\n                <path\r\n                  fill-rule=\"evenodd\"\r\n                  clip-rule=\"evenodd\"\r\n                  d=\"M11.179 11.8294C12.6369 10.6005 13.5614 8.77192 13.5614 6.72997C13.5614 4.68801 12.6369 2.85941 11.179 1.63051C12.363 0.632465 13.8989 0.0299683 15.5772 0.0299683C19.3221 0.0299683 22.3579 3.02966 22.3579 6.72997C22.3579 10.4303 19.3221 13.43 15.5772 13.43C13.8989 13.43 12.363 12.8275 11.179 11.8294Z\"\r\n                  fill=\"#F9A000\"\r\n                />\r\n                <path\r\n                  fill-rule=\"evenodd\"\r\n                  clip-rule=\"evenodd\"\r\n                  d=\"M11.179 11.8294C12.6369 10.6005 13.5614 8.77193 13.5614 6.72999C13.5614 4.68805 12.6369 2.85946 11.179 1.63055C9.72109 2.85946 8.79663 4.68805 8.79663 6.72999C8.79663 8.77193 9.72109 10.6005 11.179 11.8294Z\"\r\n                  fill=\"#FF5E00\"\r\n                />\r\n              </svg>\r\n              <input\r\n                class={`content text-${this.size}-regular ${this.type} ${this.state}`}\r\n                type={this.inputType}\r\n                minLength={this.minLength}\r\n                maxLength={this.maxLength}\r\n                placeholder={this.placeholder ? this.placeholder : ''}\r\n                onInput={event => this.handleInput(event)}\r\n                value={this.value}\r\n              />\r\n              <>\r\n                {this.loading && <div class=\"loader\"></div>}\r\n                {this.showValidation && !this.destructive && (\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                    <path\r\n                      d=\"M7.03831 9.9735C6.6785 9.76829 6.22047 9.89362 6.01526 10.2534C5.81005 10.6132 5.93538 11.0713 6.29518 11.2765L7.03831 9.9735ZM8.66675 12.5L8.0231 12.885C8.16612 13.1241 8.42989 13.2642 8.70808 13.2489C8.98627 13.2335 9.23302 13.0652 9.34885 12.8118L8.66675 12.5ZM13.6933 7.32469C14.0567 7.12594 14.1902 6.67022 13.9914 6.3068C13.7927 5.94338 13.337 5.80988 12.9736 6.00863L13.6933 7.32469ZM19.0834 9.99999C19.0834 4.9834 15.0167 0.916656 10.0001 0.916656V2.41666C14.1882 2.41666 17.5834 5.81183 17.5834 9.99999H19.0834ZM10.0001 0.916656C4.98349 0.916656 0.916748 4.9834 0.916748 9.99999H2.41675C2.41675 5.81183 5.81192 2.41666 10.0001 2.41666V0.916656ZM0.916748 9.99999C0.916748 15.0166 4.98349 19.0833 10.0001 19.0833V17.5833C5.81192 17.5833 2.41675 14.1881 2.41675 9.99999H0.916748ZM10.0001 19.0833C15.0167 19.0833 19.0834 15.0166 19.0834 9.99999H17.5834C17.5834 14.1881 14.1882 17.5833 10.0001 17.5833V19.0833ZM6.66675 10.625C6.29518 11.2765 6.29506 11.2764 6.29494 11.2763C6.2949 11.2763 6.29478 11.2763 6.29472 11.2762C6.29458 11.2761 6.29446 11.2761 6.29437 11.276C6.29417 11.2759 6.29406 11.2758 6.29402 11.2758C6.29394 11.2758 6.29418 11.2759 6.29472 11.2762C6.2958 11.2768 6.2981 11.2782 6.30155 11.2802C6.30845 11.2843 6.31994 11.2911 6.33556 11.3006C6.36683 11.3196 6.41441 11.3492 6.47453 11.3886C6.59518 11.4676 6.76402 11.5846 6.9516 11.7329C7.33643 12.0371 7.75673 12.4397 8.0231 12.885L9.31039 12.115C8.9101 11.4458 8.3304 10.9108 7.8819 10.5562C7.65281 10.3751 7.44665 10.2322 7.29647 10.1338C7.22117 10.0845 7.15938 10.046 7.11512 10.0191C7.09298 10.0056 7.07518 9.99502 7.06222 9.98739C7.05574 9.98358 7.05047 9.98051 7.04646 9.97819C7.04446 9.97703 7.04278 9.97606 7.04142 9.97528C7.04073 9.97489 7.04013 9.97454 7.03962 9.97425C7.03936 9.9741 7.03912 9.97396 7.0389 9.97384C7.03879 9.97377 7.03865 9.97369 7.03859 9.97366C7.03845 9.97358 7.03831 9.9735 6.66675 10.625ZM8.66675 12.5C9.34885 12.8118 9.3488 12.8119 9.34876 12.812C9.34876 12.812 9.34872 12.8121 9.34871 12.8121C9.3487 12.8122 9.34871 12.8121 9.34876 12.812C9.34884 12.8118 9.34905 12.8114 9.34938 12.8107C9.35003 12.8092 9.35117 12.8068 9.35277 12.8033C9.35599 12.7964 9.36109 12.7855 9.36805 12.7708C9.38196 12.7413 9.40327 12.6967 9.43164 12.6386C9.48841 12.5226 9.57333 12.3531 9.68378 12.1445C9.90507 11.7264 10.2268 11.1546 10.628 10.5403C11.4489 9.28341 12.5314 7.96007 13.6933 7.32469L12.9736 6.00863C11.4687 6.83158 10.218 8.4249 9.37213 9.72011C8.93998 10.3818 8.59509 10.9949 8.35805 11.4427C8.23933 11.667 8.14717 11.8508 8.08415 11.9797C8.05262 12.0441 8.02836 12.0949 8.01167 12.1303C8.00333 12.1479 7.99688 12.1617 7.99236 12.1715C7.9901 12.1763 7.98833 12.1802 7.98704 12.183C7.98639 12.1844 7.98587 12.1855 7.98547 12.1864C7.98527 12.1868 7.9851 12.1872 7.98496 12.1875C7.9849 12.1876 7.98482 12.1878 7.98478 12.1879C7.98471 12.188 7.98464 12.1882 8.66675 12.5Z\"\r\n                      fill=\"#079455\"\r\n                    />\r\n                  </svg>\r\n                )}\r\n                {this.showHelpIcon && (\r\n                  <div class={`help_circle`}>\r\n                    {!this.destructive ? (\r\n                      <gb-help-tooltip show-supporting-text={true}>\r\n                        <slot name=\"tooltip_label\" slot=\"label\"></slot>\r\n                        <slot name=\"tooltip_supporting_text\" slot=\"supporting_text\"></slot>\r\n                      </gb-help-tooltip>\r\n                    ) : (\r\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                        <path\r\n                          d=\"M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z\"\r\n                          stroke=\"#B51726\"\r\n                          stroke-width=\"1.33333\"\r\n                          stroke-linecap=\"round\"\r\n                          stroke-linejoin=\"round\"\r\n                        />\r\n                      </svg>\r\n                    )}\r\n                  </div>\r\n                )}\r\n              </>\r\n            </div>\r\n          )}\r\n          {this.type === 'trailing_button' && (\r\n            <div class={`input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}`}>\r\n              <div class={`trailing_button_text_input ${this.size}`}>\r\n                <input\r\n                  class={`content text-${this.size}-regular ${this.type} ${this.state}`}\r\n                  type={this.inputType}\r\n                  minLength={this.minLength}\r\n                  maxLength={this.maxLength}\r\n                  placeholder={this.placeholder ? this.placeholder : ''}\r\n                  onInput={event => this.handleInput(event)}\r\n                  ref={el => (this.inputRef = el as HTMLInputElement)}\r\n                  value={this.value}\r\n                  onBlur={() => this.runValidation()}\r\n                />\r\n                {this.loading && <div class=\"loader\"></div>}\r\n                {this.showValidation && !this.destructive && (\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                    <path\r\n                      d=\"M7.03831 9.9735C6.6785 9.76829 6.22047 9.89362 6.01526 10.2534C5.81005 10.6132 5.93538 11.0713 6.29518 11.2765L7.03831 9.9735ZM8.66675 12.5L8.0231 12.885C8.16612 13.1241 8.42989 13.2642 8.70808 13.2489C8.98627 13.2335 9.23302 13.0652 9.34885 12.8118L8.66675 12.5ZM13.6933 7.32469C14.0567 7.12594 14.1902 6.67022 13.9914 6.3068C13.7927 5.94338 13.337 5.80988 12.9736 6.00863L13.6933 7.32469ZM19.0834 9.99999C19.0834 4.9834 15.0167 0.916656 10.0001 0.916656V2.41666C14.1882 2.41666 17.5834 5.81183 17.5834 9.99999H19.0834ZM10.0001 0.916656C4.98349 0.916656 0.916748 4.9834 0.916748 9.99999H2.41675C2.41675 5.81183 5.81192 2.41666 10.0001 2.41666V0.916656ZM0.916748 9.99999C0.916748 15.0166 4.98349 19.0833 10.0001 19.0833V17.5833C5.81192 17.5833 2.41675 14.1881 2.41675 9.99999H0.916748ZM10.0001 19.0833C15.0167 19.0833 19.0834 15.0166 19.0834 9.99999H17.5834C17.5834 14.1881 14.1882 17.5833 10.0001 17.5833V19.0833ZM6.66675 10.625C6.29518 11.2765 6.29506 11.2764 6.29494 11.2763C6.2949 11.2763 6.29478 11.2763 6.29472 11.2762C6.29458 11.2761 6.29446 11.2761 6.29437 11.276C6.29417 11.2759 6.29406 11.2758 6.29402 11.2758C6.29394 11.2758 6.29418 11.2759 6.29472 11.2762C6.2958 11.2768 6.2981 11.2782 6.30155 11.2802C6.30845 11.2843 6.31994 11.2911 6.33556 11.3006C6.36683 11.3196 6.41441 11.3492 6.47453 11.3886C6.59518 11.4676 6.76402 11.5846 6.9516 11.7329C7.33643 12.0371 7.75673 12.4397 8.0231 12.885L9.31039 12.115C8.9101 11.4458 8.3304 10.9108 7.8819 10.5562C7.65281 10.3751 7.44665 10.2322 7.29647 10.1338C7.22117 10.0845 7.15938 10.046 7.11512 10.0191C7.09298 10.0056 7.07518 9.99502 7.06222 9.98739C7.05574 9.98358 7.05047 9.98051 7.04646 9.97819C7.04446 9.97703 7.04278 9.97606 7.04142 9.97528C7.04073 9.97489 7.04013 9.97454 7.03962 9.97425C7.03936 9.9741 7.03912 9.97396 7.0389 9.97384C7.03879 9.97377 7.03865 9.97369 7.03859 9.97366C7.03845 9.97358 7.03831 9.9735 6.66675 10.625ZM8.66675 12.5C9.34885 12.8118 9.3488 12.8119 9.34876 12.812C9.34876 12.812 9.34872 12.8121 9.34871 12.8121C9.3487 12.8122 9.34871 12.8121 9.34876 12.812C9.34884 12.8118 9.34905 12.8114 9.34938 12.8107C9.35003 12.8092 9.35117 12.8068 9.35277 12.8033C9.35599 12.7964 9.36109 12.7855 9.36805 12.7708C9.38196 12.7413 9.40327 12.6967 9.43164 12.6386C9.48841 12.5226 9.57333 12.3531 9.68378 12.1445C9.90507 11.7264 10.2268 11.1546 10.628 10.5403C11.4489 9.28341 12.5314 7.96007 13.6933 7.32469L12.9736 6.00863C11.4687 6.83158 10.218 8.4249 9.37213 9.72011C8.93998 10.3818 8.59509 10.9949 8.35805 11.4427C8.23933 11.667 8.14717 11.8508 8.08415 11.9797C8.05262 12.0441 8.02836 12.0949 8.01167 12.1303C8.00333 12.1479 7.99688 12.1617 7.99236 12.1715C7.9901 12.1763 7.98833 12.1802 7.98704 12.183C7.98639 12.1844 7.98587 12.1855 7.98547 12.1864C7.98527 12.1868 7.9851 12.1872 7.98496 12.1875C7.9849 12.1876 7.98482 12.1878 7.98478 12.1879C7.98471 12.188 7.98464 12.1882 8.66675 12.5Z\"\r\n                      fill=\"#079455\"\r\n                    />\r\n                  </svg>\r\n                )}\r\n                {this.showHelpIcon && (\r\n                  <div class={`help_circle`}>\r\n                    {!this.destructive ? (\r\n                      <gb-help-tooltip show-supporting-text={true}>\r\n                        <slot name=\"tooltip_label\" slot=\"label\"></slot>\r\n                        <slot name=\"tooltip_supporting_text\" slot=\"supporting_text\"></slot>\r\n                      </gb-help-tooltip>\r\n                    ) : (\r\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                        <path\r\n                          d=\"M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z\"\r\n                          stroke=\"#B51726\"\r\n                          stroke-width=\"1.33333\"\r\n                          stroke-linecap=\"round\"\r\n                          stroke-linejoin=\"round\"\r\n                        />\r\n                      </svg>\r\n                    )}\r\n                  </div>\r\n                )}\r\n              </div>\r\n              {this.loading && <div class=\"loader\"></div>}\r\n              <gb-button\r\n                size=\"lg\"\r\n                hierarchy=\"tertiary_gray\"\r\n                icon=\"only\"\r\n                state={this.state === 'disabled' ? 'disabled' : 'default'}\r\n                icon-leading={true}\r\n                icon-leading-swap={this.iconSwap}\r\n                onClick={() => this.onButtonClicked()}\r\n              ></gb-button>\r\n            </div>\r\n          )}\r\n          {this.type === 'password' && (\r\n            <div class={`password_input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}`}>\r\n              <div class={`password_content`}>\r\n                <input\r\n                  class={`content text-${this.size}-regular ${this.type} ${this.state}`}\r\n                  type={this.isPasswordVisible ? 'text' : 'password'}\r\n                  placeholder={this.placeholder ? this.placeholder : ''}\r\n                  onInput={event => this.handleInput(event)}\r\n                />\r\n                {this.loading && <div class=\"loader\"></div>}\r\n                {this.showValidation && !this.destructive && (\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                    <path\r\n                      d=\"M7.03831 9.9735C6.6785 9.76829 6.22047 9.89362 6.01526 10.2534C5.81005 10.6132 5.93538 11.0713 6.29518 11.2765L7.03831 9.9735ZM8.66675 12.5L8.0231 12.885C8.16612 13.1241 8.42989 13.2642 8.70808 13.2489C8.98627 13.2335 9.23302 13.0652 9.34885 12.8118L8.66675 12.5ZM13.6933 7.32469C14.0567 7.12594 14.1902 6.67022 13.9914 6.3068C13.7927 5.94338 13.337 5.80988 12.9736 6.00863L13.6933 7.32469ZM19.0834 9.99999C19.0834 4.9834 15.0167 0.916656 10.0001 0.916656V2.41666C14.1882 2.41666 17.5834 5.81183 17.5834 9.99999H19.0834ZM10.0001 0.916656C4.98349 0.916656 0.916748 4.9834 0.916748 9.99999H2.41675C2.41675 5.81183 5.81192 2.41666 10.0001 2.41666V0.916656ZM0.916748 9.99999C0.916748 15.0166 4.98349 19.0833 10.0001 19.0833V17.5833C5.81192 17.5833 2.41675 14.1881 2.41675 9.99999H0.916748ZM10.0001 19.0833C15.0167 19.0833 19.0834 15.0166 19.0834 9.99999H17.5834C17.5834 14.1881 14.1882 17.5833 10.0001 17.5833V19.0833ZM6.66675 10.625C6.29518 11.2765 6.29506 11.2764 6.29494 11.2763C6.2949 11.2763 6.29478 11.2763 6.29472 11.2762C6.29458 11.2761 6.29446 11.2761 6.29437 11.276C6.29417 11.2759 6.29406 11.2758 6.29402 11.2758C6.29394 11.2758 6.29418 11.2759 6.29472 11.2762C6.2958 11.2768 6.2981 11.2782 6.30155 11.2802C6.30845 11.2843 6.31994 11.2911 6.33556 11.3006C6.36683 11.3196 6.41441 11.3492 6.47453 11.3886C6.59518 11.4676 6.76402 11.5846 6.9516 11.7329C7.33643 12.0371 7.75673 12.4397 8.0231 12.885L9.31039 12.115C8.9101 11.4458 8.3304 10.9108 7.8819 10.5562C7.65281 10.3751 7.44665 10.2322 7.29647 10.1338C7.22117 10.0845 7.15938 10.046 7.11512 10.0191C7.09298 10.0056 7.07518 9.99502 7.06222 9.98739C7.05574 9.98358 7.05047 9.98051 7.04646 9.97819C7.04446 9.97703 7.04278 9.97606 7.04142 9.97528C7.04073 9.97489 7.04013 9.97454 7.03962 9.97425C7.03936 9.9741 7.03912 9.97396 7.0389 9.97384C7.03879 9.97377 7.03865 9.97369 7.03859 9.97366C7.03845 9.97358 7.03831 9.9735 6.66675 10.625ZM8.66675 12.5C9.34885 12.8118 9.3488 12.8119 9.34876 12.812C9.34876 12.812 9.34872 12.8121 9.34871 12.8121C9.3487 12.8122 9.34871 12.8121 9.34876 12.812C9.34884 12.8118 9.34905 12.8114 9.34938 12.8107C9.35003 12.8092 9.35117 12.8068 9.35277 12.8033C9.35599 12.7964 9.36109 12.7855 9.36805 12.7708C9.38196 12.7413 9.40327 12.6967 9.43164 12.6386C9.48841 12.5226 9.57333 12.3531 9.68378 12.1445C9.90507 11.7264 10.2268 11.1546 10.628 10.5403C11.4489 9.28341 12.5314 7.96007 13.6933 7.32469L12.9736 6.00863C11.4687 6.83158 10.218 8.4249 9.37213 9.72011C8.93998 10.3818 8.59509 10.9949 8.35805 11.4427C8.23933 11.667 8.14717 11.8508 8.08415 11.9797C8.05262 12.0441 8.02836 12.0949 8.01167 12.1303C8.00333 12.1479 7.99688 12.1617 7.99236 12.1715C7.9901 12.1763 7.98833 12.1802 7.98704 12.183C7.98639 12.1844 7.98587 12.1855 7.98547 12.1864C7.98527 12.1868 7.9851 12.1872 7.98496 12.1875C7.9849 12.1876 7.98482 12.1878 7.98478 12.1879C7.98471 12.188 7.98464 12.1882 8.66675 12.5Z\"\r\n                      fill=\"#079455\"\r\n                    />\r\n                  </svg>\r\n                )}\r\n                {this.showHelpIcon && (\r\n                  <div class={`help_circle`}>\r\n                    {!this.destructive ? (\r\n                      <gb-help-tooltip show-supporting-text={true}>\r\n                        <slot name=\"tooltip_label\" slot=\"label\"></slot>\r\n                        <slot name=\"tooltip_supporting_text\" slot=\"supporting_text\"></slot>\r\n                      </gb-help-tooltip>\r\n                    ) : (\r\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                        <path\r\n                          d=\"M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z\"\r\n                          stroke=\"#B51726\"\r\n                          stroke-width=\"1.33333\"\r\n                          stroke-linecap=\"round\"\r\n                          stroke-linejoin=\"round\"\r\n                        />\r\n                      </svg>\r\n                    )}\r\n                  </div>\r\n                )}\r\n              </div>\r\n              <div class={`dropdown`}>\r\n                <gb-password-button onClick={() => this.togglePasswordVisibility()}></gb-password-button>\r\n              </div>\r\n            </div>\r\n          )}\r\n          {this.type === 'password_icon_leading' && (\r\n            <div class={`password_icon_leading_input input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}`}>\r\n              <div class={`password_icon_leading_content`}>\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                  <path\r\n                    d=\"M12.0759 12.1667C11.6617 12.1667 11.3259 12.5025 11.3259 12.9167C11.3259 13.3309 11.6617 13.6667 12.0759 13.6667V12.1667ZM12.0833 13.6667C12.4976 13.6667 12.8333 13.3309 12.8333 12.9167C12.8333 12.5025 12.4976 12.1667 12.0833 12.1667V13.6667ZM7.91668 12.1667C7.50246 12.1667 7.16668 12.5025 7.16668 12.9167C7.16668 13.3309 7.50246 13.6667 7.91668 13.6667V12.1667ZM7.92415 13.6667C8.33836 13.6667 8.67415 13.3309 8.67415 12.9167C8.67415 12.5025 8.33836 12.1667 7.92415 12.1667V13.6667ZM16.4435 10.1294L17.1868 10.0293L16.4435 10.1294ZM13.7003 7.58258L13.7347 6.83337L13.7003 7.58258ZM13.7003 18.2508L13.7347 19L13.7003 18.2508ZM16.4435 15.704L15.7002 15.6039L16.4435 15.704ZM6.29973 7.58258L6.33417 8.33179L6.29973 7.58258ZM3.55652 10.1294L2.81323 10.0293L3.55652 10.1294ZM6.29973 18.2508L6.33417 17.5015L6.29973 18.2508ZM3.55652 15.704L4.29981 15.6039L3.55652 15.704ZM5.50001 7.5C5.50001 7.91422 5.8358 8.25 6.25001 8.25C6.66422 8.25 7.00001 7.91422 7.00001 7.5H5.50001ZM13 7.5C13 7.91422 13.3358 8.25 13.75 8.25C14.1642 8.25 14.5 7.91422 14.5 7.5H13ZM12.0759 13.6667H12.0833V12.1667H12.0759V13.6667ZM7.91668 13.6667H7.92415V12.1667H7.91668V13.6667ZM10 17.5833C8.69057 17.5833 7.50287 17.5553 6.33417 17.5015L6.26528 19C7.45761 19.0548 8.66829 19.0833 10 19.0833V17.5833ZM13.6659 17.5015C12.4972 17.5553 11.3094 17.5833 10 17.5833V19.0833C11.3317 19.0833 12.5424 19.0548 13.7347 19L13.6659 17.5015ZM17.1868 15.804C17.3105 14.8853 17.4167 13.9152 17.4167 12.9167H15.9167C15.9167 13.8142 15.8211 14.7058 15.7002 15.6039L17.1868 15.804ZM17.4167 12.9167C17.4167 11.9181 17.3105 10.948 17.1868 10.0293L15.7002 10.2295C15.8211 11.1275 15.9167 12.0192 15.9167 12.9167H17.4167ZM10 8.25C11.3095 8.25 12.4972 8.27806 13.6659 8.33179L13.7347 6.83337C12.5424 6.77856 11.3317 6.75 10 6.75V8.25ZM6.33417 8.33179C7.50287 8.27806 8.69057 8.25 10 8.25V6.75C8.66829 6.75 7.45761 6.77856 6.26528 6.83337L6.33417 8.33179ZM2.81323 10.0293C2.68953 10.948 2.58334 11.9181 2.58334 12.9167H4.08334C4.08334 12.0192 4.1789 11.1275 4.29981 10.2295L2.81323 10.0293ZM2.58334 12.9167C2.58334 13.9152 2.68953 14.8853 2.81323 15.804L4.29981 15.6039C4.1789 14.7058 4.08334 13.8142 4.08334 12.9167H2.58334ZM17.1868 10.0293C16.9527 8.29067 15.5122 6.91509 13.7347 6.83337L13.6659 8.33179C14.6943 8.37907 15.5595 9.18437 15.7002 10.2295L17.1868 10.0293ZM13.7347 19C15.5122 18.9183 16.9527 17.5427 17.1868 15.804L15.7002 15.6039C15.5595 16.649 14.6943 17.4543 13.6659 17.5015L13.7347 19ZM6.26528 6.83337C4.48781 6.91508 3.04732 8.29067 2.81323 10.0293L4.29981 10.2295C4.44052 9.18437 5.30576 8.37907 6.33417 8.33179L6.26528 6.83337ZM6.33417 17.5015C5.30576 17.4543 4.44052 16.649 4.29981 15.6039L2.81323 15.804C3.04732 17.5427 4.48782 18.9183 6.26528 19L6.33417 17.5015ZM7.00001 7.5V5.41667H5.50001V7.5H7.00001ZM13 5.41667V7.5H14.5V5.41667H13ZM10 2.41667C11.6569 2.41667 13 3.75981 13 5.41667H14.5C14.5 2.93139 12.4853 0.916668 10 0.916668V2.41667ZM7.00001 5.41667C7.00001 3.75981 8.34316 2.41667 10 2.41667V0.916668C7.51473 0.916668 5.50001 2.93139 5.50001 5.41667H7.00001Z\"\r\n                    fill=\"#4B5565\"\r\n                  />\r\n                </svg>\r\n                <input\r\n                  class={`content text-${this.size}-regular ${this.type} ${this.state}`}\r\n                  type={this.isPasswordVisible ? 'text' : 'password'}\r\n                  placeholder={this.placeholder ? this.placeholder : ''}\r\n                  onInput={event => this.handleInput(event)}\r\n                />\r\n              </div>\r\n              {this.loading && <div class=\"loader\"></div>}\r\n              {this.showValidation && !this.destructive && (\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                  <path\r\n                    d=\"M7.03831 9.9735C6.6785 9.76829 6.22047 9.89362 6.01526 10.2534C5.81005 10.6132 5.93538 11.0713 6.29518 11.2765L7.03831 9.9735ZM8.66675 12.5L8.0231 12.885C8.16612 13.1241 8.42989 13.2642 8.70808 13.2489C8.98627 13.2335 9.23302 13.0652 9.34885 12.8118L8.66675 12.5ZM13.6933 7.32469C14.0567 7.12594 14.1902 6.67022 13.9914 6.3068C13.7927 5.94338 13.337 5.80988 12.9736 6.00863L13.6933 7.32469ZM19.0834 9.99999C19.0834 4.9834 15.0167 0.916656 10.0001 0.916656V2.41666C14.1882 2.41666 17.5834 5.81183 17.5834 9.99999H19.0834ZM10.0001 0.916656C4.98349 0.916656 0.916748 4.9834 0.916748 9.99999H2.41675C2.41675 5.81183 5.81192 2.41666 10.0001 2.41666V0.916656ZM0.916748 9.99999C0.916748 15.0166 4.98349 19.0833 10.0001 19.0833V17.5833C5.81192 17.5833 2.41675 14.1881 2.41675 9.99999H0.916748ZM10.0001 19.0833C15.0167 19.0833 19.0834 15.0166 19.0834 9.99999H17.5834C17.5834 14.1881 14.1882 17.5833 10.0001 17.5833V19.0833ZM6.66675 10.625C6.29518 11.2765 6.29506 11.2764 6.29494 11.2763C6.2949 11.2763 6.29478 11.2763 6.29472 11.2762C6.29458 11.2761 6.29446 11.2761 6.29437 11.276C6.29417 11.2759 6.29406 11.2758 6.29402 11.2758C6.29394 11.2758 6.29418 11.2759 6.29472 11.2762C6.2958 11.2768 6.2981 11.2782 6.30155 11.2802C6.30845 11.2843 6.31994 11.2911 6.33556 11.3006C6.36683 11.3196 6.41441 11.3492 6.47453 11.3886C6.59518 11.4676 6.76402 11.5846 6.9516 11.7329C7.33643 12.0371 7.75673 12.4397 8.0231 12.885L9.31039 12.115C8.9101 11.4458 8.3304 10.9108 7.8819 10.5562C7.65281 10.3751 7.44665 10.2322 7.29647 10.1338C7.22117 10.0845 7.15938 10.046 7.11512 10.0191C7.09298 10.0056 7.07518 9.99502 7.06222 9.98739C7.05574 9.98358 7.05047 9.98051 7.04646 9.97819C7.04446 9.97703 7.04278 9.97606 7.04142 9.97528C7.04073 9.97489 7.04013 9.97454 7.03962 9.97425C7.03936 9.9741 7.03912 9.97396 7.0389 9.97384C7.03879 9.97377 7.03865 9.97369 7.03859 9.97366C7.03845 9.97358 7.03831 9.9735 6.66675 10.625ZM8.66675 12.5C9.34885 12.8118 9.3488 12.8119 9.34876 12.812C9.34876 12.812 9.34872 12.8121 9.34871 12.8121C9.3487 12.8122 9.34871 12.8121 9.34876 12.812C9.34884 12.8118 9.34905 12.8114 9.34938 12.8107C9.35003 12.8092 9.35117 12.8068 9.35277 12.8033C9.35599 12.7964 9.36109 12.7855 9.36805 12.7708C9.38196 12.7413 9.40327 12.6967 9.43164 12.6386C9.48841 12.5226 9.57333 12.3531 9.68378 12.1445C9.90507 11.7264 10.2268 11.1546 10.628 10.5403C11.4489 9.28341 12.5314 7.96007 13.6933 7.32469L12.9736 6.00863C11.4687 6.83158 10.218 8.4249 9.37213 9.72011C8.93998 10.3818 8.59509 10.9949 8.35805 11.4427C8.23933 11.667 8.14717 11.8508 8.08415 11.9797C8.05262 12.0441 8.02836 12.0949 8.01167 12.1303C8.00333 12.1479 7.99688 12.1617 7.99236 12.1715C7.9901 12.1763 7.98833 12.1802 7.98704 12.183C7.98639 12.1844 7.98587 12.1855 7.98547 12.1864C7.98527 12.1868 7.9851 12.1872 7.98496 12.1875C7.9849 12.1876 7.98482 12.1878 7.98478 12.1879C7.98471 12.188 7.98464 12.1882 8.66675 12.5Z\"\r\n                    fill=\"#079455\"\r\n                  />\r\n                </svg>\r\n              )}\r\n              {this.showHelpIcon && (\r\n                <div class={`help_circle`}>\r\n                  {!this.destructive ? (\r\n                    <gb-help-tooltip show-supporting-text={true}>\r\n                      <slot name=\"tooltip_label\" slot=\"label\"></slot>\r\n                      <slot name=\"tooltip_supporting_text\" slot=\"supporting_text\"></slot>\r\n                    </gb-help-tooltip>\r\n                  ) : (\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                      <path\r\n                        d=\"M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z\"\r\n                        stroke=\"#B51726\"\r\n                        stroke-width=\"1.33333\"\r\n                        stroke-linecap=\"round\"\r\n                        stroke-linejoin=\"round\"\r\n                      />\r\n                    </svg>\r\n                  )}\r\n                </div>\r\n              )}\r\n              <gb-password-button onClick={() => this.togglePasswordVisibility()}></gb-password-button>\r\n            </div>\r\n          )}\r\n          {this.type === 'count' && [\r\n            <div class={`count_input`}>\r\n              <div class={`count_text_input ${this.destructive ? 'destructive' : ''} ${this.state}`}>\r\n                <input\r\n                  class={`content text-${this.size}-regular ${this.type} ${this.state}`}\r\n                  type={this.inputType}\r\n                  minLength={this.minLength}\r\n                  maxLength={this.maxLength}\r\n                  placeholder={this.placeholder ? this.placeholder : ''}\r\n                  onInput={event => this.handleInput(event)}\r\n                  value={this.value}\r\n                />\r\n                {this.loading && <div class=\"loader\"></div>}\r\n                {this.showHelpIcon && (\r\n                  <div class={`help_circle`}>\r\n                    {!this.destructive ? (\r\n                      <gb-help-tooltip show-supporting-text={true}>\r\n                        <slot name=\"tooltip_label\" slot=\"label\"></slot>\r\n                        <slot name=\"tooltip_supporting_text\" slot=\"supporting_text\"></slot>\r\n                      </gb-help-tooltip>\r\n                    ) : (\r\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                        <path\r\n                          d=\"M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z\"\r\n                          stroke=\"#B51726\"\r\n                          stroke-width=\"1.33333\"\r\n                          stroke-linecap=\"round\"\r\n                          stroke-linejoin=\"round\"\r\n                        />\r\n                      </svg>\r\n                    )}\r\n                  </div>\r\n                )}\r\n              </div>\r\n              <div class={`action ${this.state}`}>\r\n                <gb-button\r\n                  size=\"xl\"\r\n                  state={this.state === 'disabled' ? 'disabled' : 'default'}\r\n                  hierarchy=\"tertiary_gray\"\r\n                  icon=\"only\"\r\n                  icon-leading=\"true\"\r\n                  icon-leading-swap=\"assets/minus_sign.svg\"\r\n                ></gb-button>\r\n                {/* <hr /> */}\r\n                <div class=\"vertical_line\"></div>\r\n                <gb-button\r\n                  size=\"xl\"\r\n                  state={this.state === 'disabled' ? 'disabled' : 'default'}\r\n                  hierarchy=\"tertiary_gray\"\r\n                  icon=\"only\"\r\n                  icon-leading=\"true\"\r\n                  icon-leading-swap=\"assets/plus_sign.svg\"\r\n                ></gb-button>\r\n              </div>\r\n            </div>,\r\n          ]}\r\n          {this.type === 'tags' && (\r\n            <div class={`input_group ${this.state}`} ref={el => (this.inputGroupElement = el as HTMLDivElement)} onClick={() => this.handleWrapperClick()}>\r\n              <div class={`input_like_parent ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}`} onClick={() => (this.dropdownOpen = !this.dropdownOpen)}>\r\n                {/* ${this.selectedStaff.length >= 1 ? 'show_results' : ''} */}\r\n                <div class={`results_display ${this.state === 'disabled' ? 'disabled' : ''}`} ref={el => (this.resultsDisplayElement = el as HTMLDivElement)}>\r\n                  {this.value.length === 0 ? (\r\n                    <>\r\n                      {this.selectedItems.map((item, index) => (\r\n                        <>\r\n                          {typeof item === 'object' ? (\r\n                            <gb-tag size=\"sm\" action=\"X_close\" icon={this.icon ? this.icon : 'avatar'} onClick={() => this.handleTagRemove(index)}>\r\n                              <h1 class=\"text-xxs-semi-bold\" slot=\"initials\">\r\n                                {item.objectName.split(' ').map(part => part.charAt(0).toUpperCase())}\r\n                              </h1>\r\n                              <p>{item.objectName.split(' ')[0]}</p>\r\n                            </gb-tag>\r\n                          ) : (\r\n                            <gb-tag size=\"sm\" action=\"X_close\" icon={this.icon ? this.icon : 'avatar'} onClick={() => this.handleTagRemove(index)}>\r\n                              <p>{item}</p>\r\n                            </gb-tag>\r\n                          )}\r\n                        </>\r\n                      ))}\r\n                    </>\r\n                  ) : (\r\n                    <>\r\n                      {this.value.map((val, index) => (\r\n                        <>\r\n                          {typeof val === 'object' ? (\r\n                            <gb-tag size=\"sm\" action=\"X_close\" icon={this.icon ? this.icon : 'avatar'} onClick={() => this.handleTagRemove(index)}>\r\n                              <h1 class=\"text-xxs-semi-bold\" slot=\"initials\">\r\n                                {val.objectName.split(' ').map(part => part.charAt(0).toUpperCase())}\r\n                              </h1>\r\n                              <p>{val.objectName.split(' ')[0]}</p>\r\n                            </gb-tag>\r\n                          ) : (\r\n                            <gb-tag size=\"sm\" action=\"X_close\" icon={this.icon ? this.icon : 'avatar'} onClick={() => this.handleTagRemove(index)}>\r\n                              <p>{val}</p>\r\n                            </gb-tag>\r\n                          )}\r\n                        </>\r\n                      ))}\r\n                    </>\r\n                  )}\r\n                  <span class=\"hidden-span\" ref={el => (this.hiddenSpan = el as HTMLElement)}>\r\n                    {this.inputValue || '  '}\r\n                  </span>\r\n                  <div class=\"input_field\">\r\n                    <input\r\n                      id={this.idOfInput}\r\n                      class={`input_like text-${this.size}-regular ${this.state}`}\r\n                      type=\"text\"\r\n                      // placeholder={this.placeholder && this.selectedStaff.length === 0 ? this.placeholder : ''}\r\n                      value={this.inputValue}\r\n                      readOnly={this.isReadOnly}\r\n                      ref={el => (this.inputElement = el as HTMLInputElement)}\r\n                      onBlur={() => this.exportSelectedStaff()}\r\n                      onInput={event => this.handleTagInput(event)}\r\n                    />\r\n                  </div>\r\n                </div>\r\n                {/* {this.showValidation && !this.destructive && (\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                      <path\r\n                        d=\"M4.16675 12.0833C4.16675 12.0833 5.41675 12.0833 7.08341 15C7.08341 15 11.7158 7.36112 15.8334 5.83334\"\r\n                        stroke=\"#079455\"\r\n                        stroke-width=\"1.5\"\r\n                        stroke-linecap=\"round\"\r\n                        stroke-linejoin=\"round\"\r\n                      />\r\n                    </svg>\r\n                  )}\r\n                {this.showHelpIcon && (\r\n                  <div class={`help_circle`}>\r\n                    {!this.destructive ? (\r\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                        <path\r\n                          d=\"M6.66668 5.99998C6.66668 5.2636 7.26363 4.66665 8.00001 4.66665C8.73639 4.66665 9.33334 5.2636 9.33334 5.99998C9.33334 6.26541 9.25578 6.51273 9.12209 6.72051C8.72361 7.33976 8.00001 7.93027 8.00001 8.66665V8.99998M7.99467 11.3333H8.00066M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00001 14.6666C4.31811 14.6666 1.33334 11.6819 1.33334 7.99998C1.33334 4.31808 4.31811 1.33331 8.00001 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z\"\r\n                          stroke=\"#697586\"\r\n                          stroke-width=\"1.5\"\r\n                          stroke-linecap=\"round\"\r\n                          stroke-linejoin=\"round\"\r\n                        />\r\n                      </svg>\r\n                    ) : (\r\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                        <path\r\n                          d=\"M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z\"\r\n                          stroke=\"#B51726\"\r\n                          stroke-width=\"1.33333\"\r\n                          stroke-linecap=\"round\"\r\n                          stroke-linejoin=\"round\"\r\n                        />\r\n                      </svg>\r\n                    )}\r\n                  </div>\r\n                )} */}\r\n              </div>\r\n              {this.showDropdown && (\r\n                <div class={`tags_dropdown_menu ${this.show ? 'show' : ''} ${this.menuPosition}`}>\r\n                  {this.results.map(item => (\r\n                    <gb-input-dropdown-menu-item\r\n                      type=\"checkbox\"\r\n                      supporting-text={true}\r\n                      state={StateEnum.Default}\r\n                      onClick={() => this.selectDropdownItem(item)}\r\n                      selected={this.isTagItemSelected(item)}\r\n                    >\r\n                      {typeof item === 'object'\r\n                        ? [<p slot=\"name\">{item.objectName}</p>, <p slot=\"supporting_text\">{item.objectValue}</p>]\r\n                        : typeof item !== 'object' && <p slot=\"name\">{item}</p>}\r\n                    </gb-input-dropdown-menu-item>\r\n                  ))}\r\n                </div>\r\n              )}\r\n            </div>\r\n          )}\r\n        </div>\r\n        {this.showHintText && <>{!this.destructive ? <p class=\"hint_text text-sm-regular\">{this.hintText}</p> : <p class=\"error_text text-sm-regular\">{this.errorText}</p>}</>}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n","@import './../../global/global.css';\r\n\r\n:host{\r\n    display: flex;\r\n    align-items: center;\r\n    height: 100%;\r\n}\r\n\r\ndiv {\r\n    display: inline-flex;\r\n    align-items: flex-start;\r\n}","import { Component, h, Prop, State } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'gb-password-button',\r\n  styleUrl: 'gb-password-button.css',\r\n  shadow: true\r\n})\r\nexport class GbPasswordButton {\r\n  @State() isPasswordVisible: boolean = false;\r\n  @Prop() state: 'default' | 'disabled';\r\n\r\n  togglePasswordVisibility() {\r\n    this.isPasswordVisible = !this.isPasswordVisible;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div>\r\n        <gb-btn size=\"sm\" hierarchy=\"link_gray\" state=\"default\" onClick={() => this.togglePasswordVisibility()}>\r\n          {this.isPasswordVisible ? (\r\n            <gb-button size=\"sm\" hierarchy=\"tertiary_gray\" icon=\"default\" state={this.state}>\r\n              <p>HIDE</p>\r\n            </gb-button>\r\n          ) : (\r\n            <gb-button size=\"sm\" hierarchy=\"tertiary_gray\" icon=\"default\" state={this.state}>\r\n              <p>SHOW</p>\r\n            </gb-button>\r\n          )}\r\n        </gb-btn>\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}","@import './../../global/global.css';\r\n\r\n/* :host{\r\n    display: inline-block;\r\n} */\r\n\r\n/* Text Line Styles */\r\n.text_line_div {\r\n  display: flex;\r\n  width: 100%;\r\n  flex-direction: column;\r\n  align-items: flex-start;\r\n}\r\n\r\n.text_line_div.sm {\r\n  padding-top: var(--spacing-3);\r\n}\r\n\r\n.text_line_div.md {\r\n  padding-top: var(--spacing-4);\r\n}\r\n\r\n.text_line_div.lg {\r\n  padding-top: var(--spacing-5);\r\n}\r\n\r\n.bar {\r\n  height: 0.25rem;\r\n}\r\n\r\n.bar.incomplete.default {\r\n  background-color: var(--color-border-subtler, #e3e8ef);\r\n}\r\n\r\n.bar.current.default,\r\n.bar.complete.default {\r\n  background-color: var(--color-border-selected, #075db2);\r\n}\r\n\r\n.bar.incomplete.destructive,\r\n.bar.current.destructive,\r\n.bar.complete.destructive {\r\n  background-color: var(--color-border-danger, #b51726);\r\n}\r\n\r\n.text_line_div_content {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--spacing-3);\r\n}\r\n\r\n.text_line_label.default.incomplete,\r\n.text_line_label.default.complete {\r\n  color: var(--color-text, #4b5565);\r\n}\r\n\r\n.text_line_label.default.current,\r\n.text_line_text.default.current {\r\n  color: var(--color-text-selected, #075db2);\r\n}\r\n\r\n.text_line_text.default.incomplete,\r\n.text_line_text.default.complete {\r\n  color: var(--color-text-subtle, #697586);\r\n}\r\n\r\n.text_line_label.incomplete.destructive,\r\n.text_line_label.current.destructive,\r\n.text_line_label.complete.destructive {\r\n  color: var(--color-text-danger, #b51726);\r\n}\r\n\r\n.text_line_text.incomplete.destructive,\r\n.text_line_text.current.destructive,\r\n.text_line_text.complete.destructive {\r\n  color: var(--color-text-danger-subtle, #cc1a2a);\r\n}\r\n\r\n/* Icon Only Styles */\r\n.icon_only_div {\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.icon_only_div.sm {\r\n  width: 1.5rem;\r\n  height: 1.5rem;\r\n}\r\n\r\n.icon_only_div.md {\r\n  width: 2rem;\r\n  height: 2rem;\r\n}\r\n\r\n.icon_only_div.lg {\r\n  width: 2.5rem;\r\n  height: 2.5rem;\r\n}\r\n\r\n.icon_only_div.default.incomplete {\r\n  background: var(--color-background-card, #ffffff);\r\n  border: 2px solid #cdd5df;\r\n}\r\n\r\n.icon_only_div.default.current,\r\n.icon_only_div.default.complete {\r\n  background: var(--color-background-information-subtlest, #e4f0fc);\r\n  border: 2.5px solid var(--color-icon-selected, #075db2);\r\n}\r\n\r\n.icon_only_div.incomplete.destructive,\r\n.icon_only_div.current.destructive,\r\n.icon_only_div.complete.destructive {\r\n  background: var(--color-background-danger-subtlest, #fef1f2);\r\n  border: 2.5px solid var(--color-icon-danger, #b51726);\r\n}\r\n\r\n.dot {\r\n  border-radius: var(--rounded-full);\r\n}\r\n\r\n.dot.sm {\r\n  width: 0.6rem;\r\n  height: 0.6rem;\r\n}\r\n\r\n.dot.md {\r\n  width: 0.8rem;\r\n  height: 0.8rem;\r\n}\r\n\r\n.dot.lg {\r\n  width: 0.9rem;\r\n  height: 0.9rem;\r\n}\r\n\r\n.dot.default.incomplete {\r\n  background: #cdd5df;\r\n}\r\n\r\n.dot.default.current {\r\n  background: var(--color-icon-selected, #075db2);\r\n}\r\n\r\n.dot.incomplete.destructive,\r\n.dot.current.destructive {\r\n  background: var(--color-icon-danger, #b51726);\r\n}\r\n\r\n.tick.sm {\r\n  width: 0.8rem;\r\n  height: 0.8rem;\r\n}\r\n\r\n.tick.md {\r\n  width: 1rem;\r\n  height: 1rem;\r\n}\r\n\r\n.tick.lg {\r\n  width: 1.2rem;\r\n  height: 1.2rem;\r\n}\r\n\r\n.tick.destructive path {\r\n  stroke: var(--color-icon-danger, #b51726);\r\n}\r\n\r\n/* Icon Left Styles */\r\n.icon_left_div {\r\n  display: flex;\r\n  align-items: flex-start;\r\n}\r\n\r\n.icon_left_div.sm {\r\n  gap: var(--spacing-3);\r\n}\r\n\r\n.icon_left_div.md,\r\n.icon_left_div.lg {\r\n  gap: var(--spacing-4);\r\n}\r\n\r\n.icon_left_text {\r\n  display: flex;\r\n  padding: var(--spacing-2) var(--spacing-none) var(--spacing-7) var(--spacing-none);\r\n  flex-direction: column;\r\n  align-items: flex-start;\r\n  gap: var(--spacing-3);\r\n  flex: 1 0 0;\r\n}\r\n\r\n.connector_wrap {\r\n  display: flex;\r\n  padding-bottom: 0.25rem;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  gap: 0.25rem;\r\n  align-self: stretch;\r\n}\r\n\r\n.connector_div {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  flex-grow: 1;\r\n}\r\n\r\n.icon_left_connector {\r\n  width: var(--spacing-half); /* Adjust the width as needed */\r\n  height: 100%; /* Adjust the height as needed */\r\n  border-radius: 5px; /* Half of the width to make it fully rounded */\r\n}\r\n\r\n.icon_left_connector.default.incomplete,\r\n.icon_left_connector.default.current {\r\n  background-color: var(--color-border-subtler, #e3e8ef); /* Change the color as needed */\r\n}\r\n\r\n.icon_left_connector.default.complete {\r\n  background-color: var(--color-border-selected, #075db2);\r\n}\r\n\r\n.icon_left_connector.incomplete.destructive,\r\n.icon_left_connector.current.destructive,\r\n.icon_left_connector.complete.destructive {\r\n  background-color: var(--color-border-danger, #b51726);\r\n}\r\n\r\n/* Icon Top Styles */\r\n.step_icon {\r\n  display: flex;\r\n  gap: 0;\r\n}\r\n\r\n.icon_top_div,\r\n.icon_top_content {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n}\r\n\r\n.icon_top_div.sm,\r\n.icon_top_content {\r\n  gap: var(--spacing-3);\r\n}\r\n\r\n.icon_top_div.md,\r\n.icon_top_div.lg {\r\n  gap: var(--spacing-4);\r\n}\r\n\r\n.icon_top_connector {\r\n  width: 21rem;\r\n  height: 0.13rem;\r\n  border-radius: 5px; /* Half of the width to make it fully rounded */\r\n}\r\n\r\n.icon_top_connector.default.incomplete,\r\n.icon_top_connector.default.current {\r\n  background-color: var(--color-border-subtler, #e3e8ef); /* Change the color as needed */\r\n}\r\n\r\n.icon_top_connector.default.complete {\r\n  background-color: var(--color-border-selected, #075db2);\r\n}\r\n\r\n.icon_top_connector.incomplete.destructive,\r\n.icon_top_connector.current.destructive,\r\n.icon_top_connector.complete.destructive {\r\n  background-color: var(--color-border-danger, #b51726);\r\n}\r\n\r\n/* Featured Icon Left Styles */\r\n.featured_icon_left_div {\r\n  width: fit-content;\r\n  display: flex;\r\n  gap: var(--spacing-3);\r\n}\r\n\r\n.featured_icon_left_connector {\r\n  width: 0.125rem; /* Adjust the width as needed */\r\n  min-height: 2rem;\r\n  height: 100%; /* Adjust the height as needed */\r\n  border-radius: 5px; /* Half of the width to make it fully rounded */\r\n  background-color: var(--color-border-subtler, #e3e8ef); /* Change the color as needed */\r\n}\r\n\r\n.featured_icon_left_connector.incomplete.destructive,\r\n.featured_icon_left_connector.current.destructive,\r\n.featured_icon_left_connector.complete.destructive {\r\n  background-color: var(--color-border-danger, #b51726);\r\n}\r\n\r\n.featured_icon_left_content {\r\n  display: flex;\r\n  padding: var(--spacing-2) var(--spacing-none) 1.5rem var(--spacing-none);\r\n  flex-direction: column;\r\n  align-items: flex-start;\r\n  gap: var(--spacing-3);\r\n  flex: 1 0 0;\r\n}\r\n\r\n.featured_icon_left_label.default.incomplete,\r\n.featured_icon_left_label.default.current,\r\n.featured_icon_left_label.default.complete,\r\n.featured_icon_left_text.default.incomplete{\r\n    color: var(--color-text, #4B5565);\r\n}\r\n\r\n.featured_icon_left_text.default.current,\r\n.featured_icon_left_text.default.complete{\r\n    color: var(--color-text-subtle, #697586);\r\n}\r\n\r\n.featured_icon_left_label.destructive.incomplete,\r\n.featured_icon_left_label.destructive.current,\r\n.featured_icon_left_label.destructive.complete{\r\n    color: var(--color-text-danger, #B51726);\r\n}\r\n\r\n.featured_icon_left_text.destructive.incomplete,\r\n.featured_icon_left_text.destructive.current,\r\n.featured_icon_left_text.destructive.complete{\r\n    color: var(--color-text-danger-subtle, #CC1A2A);\r\n}","import { Component, Prop, h, Fragment, Watch, State } from \"@stencil/core\";\r\nimport { GeneralSizes, ProgressStepStates, ProgressStepStatus, ProgressStepTypes } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n  tag: 'gb-step-base',\r\n  styleUrl: 'gb-step-base.css',\r\n  shadow: true,\r\n})\r\nexport class GbStepBase {\r\n  @Prop() status: ProgressStepStatus;\r\n  @Prop() size: GeneralSizes;\r\n  @Prop() type: ProgressStepTypes;\r\n  @Prop() state: ProgressStepStates;\r\n  @Prop() connector: boolean = false;\r\n  @Prop() showContent: boolean = false;\r\n  @Prop() showSupportingText: boolean = false;\r\n  @Prop() label: string = '';\r\n  @Prop() supportingText: string = '';\r\n  @State() internalState: ProgressStepStates;\r\n  @State() internalStatus: ProgressStepStatus;\r\n\r\n  featuredIconLeftLabelClasses() {\r\n    switch (this.size) {\r\n      case 'sm':\r\n        return 'text-sm-semi-bold';\r\n      case 'md':\r\n        return 'text-md-semi-bold';\r\n      case 'lg':\r\n        return 'text-md-semi-bold';\r\n    }\r\n  }\r\n\r\n  featuredIconLeftTextClasses() {\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      case 'lg':\r\n        return 'text-md-regular';\r\n    }\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.internalState = this.state;\r\n    this.internalStatus = this.status;\r\n  }\r\n\r\n  @Watch('status')\r\n  onStatusChange(newValue: ProgressStepStatus, _oldValue: ProgressStepStatus) {\r\n    // console.log('state changed from', oldValue, 'to', newValue);\r\n    this.internalStatus = newValue;\r\n  }\r\n\r\n  @Watch('state')\r\n  onStateChange(newValue: ProgressStepStates, _oldValue: ProgressStepStates) {\r\n    // console.log('state changed from', oldValue, 'to', newValue);\r\n    this.internalState = newValue;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        {this.type === 'text_line' && (\r\n          <>\r\n            <div class={`bar ${this.size} ${this.status} ${this.internalState}`}></div>\r\n            {this.showContent && (\r\n              <div class={`text_line_div ${this.size} ${this.status} ${this.internalState}`}>\r\n                <div class={`text_line_div_content`}>\r\n                  <p class={`text_line_label text-sm-semi-bold ${this.status} ${this.internalState}`}>{this.label}</p>\r\n                  {this.showSupportingText && <p class={`text_line_text text-xs-regular ${this.status} ${this.internalState}`}>{this.supportingText}</p>}\r\n                </div>\r\n              </div>\r\n            )}\r\n          </>\r\n        )}\r\n        {this.type === 'icon_only' && (\r\n          <div class={`icon_only_div ${this.status} ${this.internalState} ${this.size}`}>\r\n            {this.status !== 'complete' && <div class={`dot ${this.status} ${this.internalState} ${this.size}`}></div>}\r\n            {this.status === 'complete' && (\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"10\" viewBox=\"0 0 12 10\" fill=\"none\" class={`tick ${this.status} ${this.internalState} ${this.size}`}>\r\n                <path d=\"M1 6.45455C1 6.45455 2.07143 6.45455 3.5 9C3.5 9 7.47059 2.33333 11 1\" stroke=\"#075DB2\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n              </svg>\r\n            )}\r\n          </div>\r\n        )}\r\n        {this.type === 'icon_left' && (\r\n          <div class={`icon_left_div ${this.size}`}>\r\n            <div class=\"connector_wrap\">\r\n              <div class={`icon_only_div ${this.status} ${this.internalState} ${this.size}`}>\r\n                {this.status !== 'complete' && <div class={`dot ${this.status} ${this.internalState} ${this.size}`}></div>}\r\n                {this.status === 'complete' && (\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"10\" viewBox=\"0 0 12 10\" fill=\"none\" class={`tick ${this.status} ${this.internalState} ${this.size}`}>\r\n                    <path\r\n                      d=\"M1 6.45455C1 6.45455 2.07143 6.45455 3.5 9C3.5 9 7.47059 2.33333 11 1\"\r\n                      stroke=\"#075DB2\"\r\n                      stroke-width=\"2\"\r\n                      stroke-linecap=\"round\"\r\n                      stroke-linejoin=\"round\"\r\n                    />\r\n                  </svg>\r\n                )}\r\n              </div>\r\n              {this.connector && (\r\n                <div class=\"connector_div\">\r\n                  <div class={`icon_left_connector ${this.internalState} ${this.status}`}></div>\r\n                </div>\r\n              )}\r\n            </div>\r\n            <div class=\"icon_left_text\">\r\n              <p class={`text_line_label text-sm-semi-bold ${this.status} ${this.internalState}`}>{this.label}</p>\r\n              <p class={`text_line_text text-xs-regular ${this.status} ${this.internalState}`}>{this.supportingText}</p>\r\n            </div>\r\n          </div>\r\n        )}\r\n        {this.type === 'icon_top' && (\r\n          <div class={`icon_top_div ${this.size}`}>\r\n            <div class=\"step_icon_div\">\r\n              <div class=\"step_icon\">\r\n                <div class={`icon_only_div ${this.status} ${this.internalState} ${this.size}`}>\r\n                  {this.status !== 'complete' && <div class={`dot ${this.status} ${this.internalState} ${this.size}`}></div>}\r\n                  {this.status === 'complete' && (\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"10\" viewBox=\"0 0 12 10\" fill=\"none\" class={`tick ${this.status} ${this.internalState} ${this.size}`}>\r\n                      <path\r\n                        d=\"M1 6.45455C1 6.45455 2.07143 6.45455 3.5 9C3.5 9 7.47059 2.33333 11 1\"\r\n                        stroke=\"#075DB2\"\r\n                        stroke-width=\"2\"\r\n                        stroke-linecap=\"round\"\r\n                        stroke-linejoin=\"round\"\r\n                      />\r\n                    </svg>\r\n                  )}\r\n                </div>\r\n                {this.connector && (\r\n                  <div class=\"connector_div\">\r\n                    <div class={`icon_top_connector ${this.internalState} ${this.status}`}></div>\r\n                  </div>\r\n                )}\r\n              </div>\r\n            </div>\r\n            <div class=\"icon_top_content\">\r\n              <p class={`text_line_label text-sm-semi-bold ${this.status} ${this.internalState}`}>{this.label}</p>\r\n              <p class={`text_line_text text-xs-regular ${this.status} ${this.internalState}`}>{this.supportingText}</p>\r\n            </div>\r\n          </div>\r\n        )}\r\n        {this.type === 'featured_icon_left' && (\r\n          <div class=\"featured_icon_left_div\">\r\n            <div class=\"connector_wrap\">\r\n              <gb-featured-icon size={this.size} icon=\"assets/user.svg\" destructive={this.internalState === 'destructive' ? true : false}></gb-featured-icon>\r\n              <div class=\"connector_div\">\r\n                <div class={`featured_icon_left_connector ${this.size} ${this.internalState} ${this.status}`}></div>\r\n              </div>\r\n            </div>\r\n            <div class=\"featured_icon_left_content\">\r\n              <p class={`featured_icon_left_label ${this.featuredIconLeftLabelClasses()} ${this.status} ${this.internalState}`}>{this.label}</p>\r\n              <p class={`featured_icon_left_text ${this.featuredIconLeftTextClasses()} ${this.status} ${this.internalState}`}>{this.supportingText}</p>\r\n            </div>\r\n          </div>\r\n        )}\r\n      </>\r\n    );\r\n  }\r\n}",".step_div{\r\n    display: flex;\r\n}","import { Component, Prop, h, Fragment, State } from '@stencil/core';\r\nimport { BreakPoints, GeneralSizes, StepperType } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-stepper-horizontal-icons-centered',\r\n  styleUrl: 'gb-stepper-horizontal-icons-centered.css',\r\n  shadow: true,\r\n})\r\nexport class GbStepperHorizontalIconsCentered {\r\n  @Prop() size: GeneralSizes;\r\n  @Prop() steps: StepperType[] = [\r\n    {\r\n      state: 'default',\r\n      status: 'complete',\r\n      label: 'First Step',\r\n      supportingText: 'Hiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii',\r\n    },\r\n    {\r\n      state: 'default',\r\n      status: 'current',\r\n      label: 'Second Step',\r\n      supportingText: 'Hiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii',\r\n    },\r\n  ];\r\n  @Prop() type: 'icon' | 'featured_icon';\r\n  @Prop() breakpoint: BreakPoints;\r\n  @State() connector: boolean = false;\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        {this.type === 'icon' && (\r\n          <div class=\"icons_centered_div\">\r\n            {this.breakpoint === 'desktop' && (\r\n              <div class=\"step_div\">\r\n                {this.steps.map((step, index) => (\r\n                  <>\r\n                    <gb-step-base\r\n                      size={this.size}\r\n                      type=\"icon_top\"\r\n                      state={step.state}\r\n                      status={step.status}\r\n                      connector={index === this.steps.length - 1 ? false : true}\r\n                      label={step.label}\r\n                      supporting-text={step.supportingText}\r\n                    ></gb-step-base>\r\n                  </>\r\n                ))}\r\n              </div>\r\n            )}\r\n            {this.breakpoint === 'mobile' && (\r\n              <>\r\n                {this.steps.map((step, index) => (\r\n                  <>\r\n                    <gb-step-base\r\n                      size={this.size}\r\n                      type=\"icon_left\"\r\n                      state={step.state}\r\n                      status={step.status}\r\n                      connector={index === this.steps.length - 1 ? false : true}\r\n                      label={step.label}\r\n                      supporting-text={step.supportingText}\r\n                    ></gb-step-base>\r\n                  </>\r\n                ))}\r\n              </>\r\n            )}\r\n          </div>\r\n        )}\r\n      </>\r\n    );\r\n  }\r\n}\r\n","@import './../../global/global.css';\r\n\r\n:host{\r\n    display: flex;\r\n    align-items: center;\r\n    width: fit-content;\r\n}\r\n\r\n.container {\r\n    display: inline-flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    gap: var(--spacing-1);\r\n    flex-shrink: 0;\r\n    border-radius: var(--rounded-xs);\r\n    border: 1px solid var(--color-boarder-subtle, #CDD5DF);\r\n    background: var(--color-background-card, #FFFFFF);  \r\n}\r\n\r\n.content {\r\n    display: flex;\r\n    padding: var(--spacing-none);\r\n    text-align: center;\r\n    align-items: center;\r\n    border-radius: var(--rounded-none);\r\n    color: var(--color-text, #4B5565);\r\n    font-family: var(--Font-Family-Body, Sora);\r\n    font-style: normal;\r\n    font-weight: var(--Font-Weight-Medium, 500);\r\n    letter-spacing: var(--Font-Letter-spacing-T-sm, 0rem);\r\n}\r\n\r\n.icon {\r\n    border: none;\r\n}\r\n\r\n.container.sm {\r\n    height: var(--spacing-6);\r\n    padding: var(--spacing-none) var(--spacing-1) var(--spacing-none) var(--spacing-2);\r\n}\r\n\r\n.container.md {\r\n    height: 1.75rem;\r\n    padding: var(--spacing-none) var(--spacing-1) var(--spacing-none) var(--spacing-2);\r\n}\r\n\r\n.container.lg {\r\n    height: var(--spacing-7);\r\n    padding: var(--spacing-none) var(--spacing-1) var(--spacing-none) var(--spacing-2);\r\n}\r\n\r\n.content.sm {\r\n    gap: var(--spacing-1);\r\n    font-size: var(--Font-Size-T-xs, 0.75rem);\r\n    line-height: var(--Font-Line-height-T-xs, 1.125rem);\r\n}\r\n\r\n.content.md {\r\n    gap: 0.3125rem;\r\n    font-size: var(--Font-Size-T-sm, 0.875rem);   \r\n    line-height: var(--Font-Line-height-T-sm, 1.25rem); \r\n}\r\n\r\n.content.lg {\r\n    gap: 0.375rem;\r\n    font-size: var(--Font-Size-T-sm, 0.875rem);\r\n    line-height: var(--Font-Line-height-T-sm, 1.25rem); /* 142.857% */\r\n}\r\n\r\n.label{\r\n    display: flex;\r\n    align-items: center;\r\n}","import { Component, Method, Prop, getAssetPath, h, Fragment, Event, EventEmitter, Element } from '@stencil/core';\r\nimport { GeneralSizes } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-tag',\r\n  styleUrl: 'gb-tag.css',\r\n  shadow: true,\r\n})\r\nexport class GbTag {\r\n  @Prop() size: GeneralSizes;\r\n  @Prop() icon?: 'country' | 'avatar' | 'dot' | 'false';\r\n  @Prop() action: 'X_close' | 'text_only' | 'count';\r\n  @Prop() flagSwap: string;\r\n  @Prop() checkbox?: boolean;\r\n  @Event() checkboxClicked: EventEmitter<void>;\r\n  @Element() el: HTMLElement;\r\n\r\n  @Method()\r\n  async onTagClose() {\r\n    // console.log('close tag clicked');\r\n  }\r\n\r\n  async onCheckboxClicked() {\r\n    // this.checkboxClicked.emit()\r\n  }\r\n\r\n  componentDidLoad() {\r\n    const labelSlot = this.el.querySelector('p');\r\n\r\n    if(labelSlot) {\r\n      if(this.size === 'sm') {\r\n        labelSlot.classList.add('text-xs-medium');\r\n      } else if(this.size === 'md') {\r\n        labelSlot.classList.add('text-sm-medium');\r\n      } else if(this.size === 'lg') {\r\n        labelSlot.classList.add('text-sm-medium');\r\n      }\r\n    }\r\n  }\r\n\r\n  render() {\r\n    const flagSwap = getAssetPath(`${this.flagSwap}`);\r\n\r\n    return (\r\n      <div class={`container ${this.size}`}>\r\n        <div class={`content ${this.size}`}>\r\n          {this.checkbox && <gb-tag-checkbox size={this.size}></gb-tag-checkbox>}\r\n          {this.icon === 'false' && <></>}\r\n          {this.icon === 'country' && (\r\n            <div class=\"icon left-icon\">\r\n              <img src={flagSwap} alt=\"Country Icon\" />\r\n            </div>\r\n          )}\r\n          {this.icon === 'avatar' && (\r\n            <gb-avatar class=\"avatar-icon\" size=\"xxs\" status-icon=\"false\" text={true} color=\"gray\">\r\n              <slot name=\"initials\" slot=\"initials\"></slot>\r\n            </gb-avatar>\r\n          )}\r\n          {this.icon === 'dot' && (\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\">\r\n              <circle cx=\"4\" cy=\"4\" r=\"3\" fill=\"#17B26A\" />\r\n            </svg>\r\n          )}\r\n          <div class=\"label\">\r\n            <slot></slot>\r\n          </div>\r\n          {this.action === 'count' && (\r\n            <gb-tag-count size={this.size}>\r\n              <slot slot=\"count\" name=\"count\"></slot>\r\n            </gb-tag-count>\r\n          )}\r\n        </div>\r\n        {this.action === 'X_close' && <gb-tag-close size={this.size} onClick={() => this.onTagClose()}></gb-tag-close>}\r\n      </div>\r\n    );\r\n  }\r\n}","@import './../../global/global.css';\r\n\r\n.checkbox-container {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  position: relative;\r\n  cursor: pointer;\r\n}\r\n\r\ninput[type=\"checkbox\"] {\r\n  opacity: 0;\r\n  position: absolute;\r\n  width: 100%;\r\n  height: 100%;\r\n  cursor: pointer;\r\n}\r\n\r\n.custom-checkbox {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border-radius: var(--rounded-xs);\r\n  border: 1px solid var(--color-border-input, #CDD5DF);\r\n  background: transparent;\r\n  transition: background 0.2s, border 0.2s;\r\n  margin-top: 10px;\r\n}\r\n\r\n.sm {\r\n  width: 14px;\r\n  height: 14px;\r\n}\r\n\r\n.md {\r\n  width: var(--spacing-4);\r\n  height: var(--spacing-4);\r\n  flex-shrink: 0;\r\n}\r\n\r\n.lg {\r\n  width: 18px;\r\n  height: 18px;\r\n}\r\n\r\ninput[type=\"checkbox\"]:checked + .custom-checkbox {\r\n  background: var(--color-background-selected, #075DB2);\r\n  border: 1px solid var(--color-border-selected, #075DB2);\r\n}\r\n\r\ninput[type=\"checkbox\"]:checked + .custom-checkbox .checkmark {\r\n  display: block;\r\n}\r\n\r\n.checkmark {\r\n  display: none;\r\n  width: var(--spacing-3);\r\n  height: var(--spacing-3);\r\n}\r\n\r\n.checkbox-container:hover .custom-checkbox {\r\n  border: 1px solid var(--color-border-selected, #075DB2);\r\n}\r\n\r\n.checkbox-container.disabled .custom-checkbox {\r\n  background: var(--color-background-disabled, #F6F8FA);\r\n  border: 1px solid var(--color-border-disabled, #E3E8EF);\r\n}\r\n\r\n.checkbox-container.disabled .checkmark {\r\n  fill: var(--color-icon-disabled, #CDD5DF);\r\n}\r\n\r\n","import { Component, Prop, h} from \"@stencil/core\";\r\nimport { GeneralSizes } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n  tag: 'gb-tag-checkbox',\r\n  styleUrl: 'gb-tag-checkbox.css',\r\n  shadow: true\r\n})\r\n\r\nexport class GbTagCheckbox {\r\n    @Prop() checked: boolean = false;\r\n    @Prop() size: GeneralSizes = 'md';\r\n    @Prop() disabled: boolean = false;\r\n  \r\n    render() {\r\n      return (\r\n        <label class={`checkbox-container ${this.size} ${this.disabled ? 'disabled' : ''}`}>\r\n          <input \r\n            type=\"checkbox\" \r\n            checked={this.checked} \r\n            disabled={this.disabled} \r\n          />\r\n          <span class={`custom-checkbox ${this.size}`}>\r\n            <svg class=\"checkmark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n              <path d=\"M2.5 7.25C2.5 7.25 3.25 7.25 4.25 9C4.25 9 7.02941 4.41667 9.5 3.5\" stroke=\"white\" stroke-width=\"1.71429\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n            </svg>\r\n          </span>\r\n        </label>\r\n      );\r\n    }\r\n}\r\n","@import './../../global/global.css';\r\n\r\ndiv {\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: flex-start;\r\n    gap: var(--spacing-none);\r\n    border-radius: 3px;\r\n    cursor: pointer;\r\n}\r\n\r\ndiv:hover {\r\n    background: var(--color-background-gray-subtlest, #F6F8FA);\r\n}\r\n\r\ndiv:hover svg path {\r\n    stroke: var(--color-icon-bold, #202939);\r\n}\r\n\r\ndiv.sm,\r\ndiv.md {\r\n    padding: var(--spacing-half);\r\n}\r\n\r\ndiv.lg {\r\n    padding: 3px;\r\n}\r\n\r\ndiv.sm svg{\r\n    width: 10px;\r\n    height: 10px;\r\n}\r\n\r\ndiv.md svg{\r\n    width: var(--spacing-3);\r\n    height: var(--spacing-3);\r\n}\r\n\r\ndiv.lg svg{\r\n    width: 14px;\r\n    height: 14px;\r\n}","import {Component, Prop, h} from '@stencil/core'\r\nimport { GeneralSizes } from '../../models/reusableModels';\r\n\r\n@Component({\r\n    tag: 'gb-tag-close',\r\n    styleUrl: 'gb-tag-close.css',\r\n    shadow: true\r\n})\r\n\r\nexport class GbTagClose{\r\n    @Prop() size: GeneralSizes;\r\n\r\n    render() {\r\n        return (\r\n            <div class={this.size}>\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\r\n                    <path d=\"M7.91683 2.08328L2.0835 7.91662M2.0835 2.08328L7.91683 7.91662\" stroke=\"#4B5565\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                </svg>\r\n            </div>\r\n        )\r\n    }\r\n}","@import './../../global/global.css';\r\n\r\ndiv {\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: center;\r\n    align-items: center;\r\n    gap: var(--spacing-none);\r\n    flex-shrink: 0;\r\n    border-radius: 3px;\r\n    background-color: var(--color-background-gray-subtler, #EEF2F6);\r\n}  \r\n\r\ndiv.sm {\r\n    width: 16px;\r\n    height: 16px;\r\n    padding: var(--spacing-none) var(--spacing-1);\r\n}\r\n\r\n.sm p{\r\n    width: 8px;\r\n    height: 16px; \r\n    font-size: var(--Font-Size-T-xs, 0.75rem);\r\n    line-height: var(--Font-Line-height-T-xs, 1.125rem);\r\n}\r\n\r\ndiv.md {\r\n    width: 1.125rem;\r\n    height: 1.125rem;\r\n    padding: var(--spacing-none) 5px;\r\n}\r\n\r\n.md p{\r\n    width: 0.5625rem;\r\n    height: 1.125rem;\r\n    font-size: var(--Font-Size-T-xs, 0.75rem);\r\n    line-height: var(--Font-Line-height-T-xs, 1.125rem); \r\n}\r\n\r\ndiv.lg {\r\n    width: 1.25rem;\r\n    height: 1.25rem;\r\n}\r\n\r\n.lg p{\r\n    font-size: var(--Font-Size-T-sm, 0.875rem);\r\n    line-height: var(--Font-Line-height-T-sm, 1.25rem);\r\n}\r\n\r\np{\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: center;\r\n    flex-shrink: 0;\r\n    color: var(--color-text, #4B5565);\r\n    text-align: center;\r\n    font-family: var(--Font-Family-Body, Sora);\r\n    font-style: normal;\r\n    font-weight: var(--Font-Weight-Medium, 500);\r\n    letter-spacing: var(--Font-Letter-spacing-T-sm, 0px);\r\n}\r\n\r\n\r\n","import {Component, Prop, h} from '@stencil/core';\r\nimport { GeneralSizes } from '../../models/reusableModels';\r\n\r\n@Component({\r\n    tag: 'gb-tag-count',\r\n    styleUrl: 'gb-tag-count.css',\r\n    shadow: true\r\n})\r\n\r\nexport class GbTagCount{\r\n    @Prop() size: GeneralSizes;\r\n\r\n    render() {\r\n        return (\r\n            <div class={this.size}>\r\n                <slot name=\"count\"></slot>\r\n            </div>\r\n        )\r\n    }\r\n}","@import './../../global/global.css';\r\n\r\n:host{\r\n  display: block;\r\n}\r\n\r\n.tooltip_container {\r\n  position: relative;\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  padding: var(--spacing-3);\r\n  z-index: 100;\r\n}\r\n\r\n.tooltip_content{\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--spacing-3);\r\n  \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: 7.5px 7.5px 0 7.5px;\r\n  border-color: var(--color-border-subtler, #E3E8EF) transparent transparent transparent;\r\n  transform: translateX(-50%);\r\n}\r\n\r\n.arrow.bottom_center::before {\r\n  left: -0.39rem;\r\n  bottom: 0.1rem;\r\n  border-width: 0 9.6px 9.6px 9.6px;\r\n  transform: translateY(-50%) rotate(135deg);\r\n  border-color: transparent var(--color-surface-bold, #FCFCFC) transparent transparent;\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 var(--color-border-subtler, #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 var(--color-surface-bold, #FCFCFC);\r\n}\r\n\r\n.arrow.bottom_left {\r\n  top: 100%;\r\n  left: 20%;\r\n  border-width: 7.5px 7.5px 0 7.5px;\r\n  border-color: var(--color-border-subtler, #E3E8EF) transparent transparent transparent;\r\n  transform: translateX(-50%);\r\n}\r\n\r\n.arrow.bottom_left::before {\r\n  left: -0.39rem;\r\n  bottom: 0.1rem;\r\n  border-width: 0 9.6px 9.6px 9.6px;\r\n  transform: translateY(-50%) rotate(135deg);\r\n  border-color: transparent var(--color-surface-bold, #FCFCFC) transparent transparent;\r\n}\r\n \r\n.arrow.right {\r\n  top: 50%;\r\n  left: 100%;\r\n  border-width: 7px 7px 7px 0;\r\n  border-color: transparent var(--color-border-subtler, #E3E8EF) transparent transparent;\r\n  transform: translateY(-50%) rotate(-180deg);\r\n}\r\n\r\n.arrow.right::before {\r\n  left: 0.5px;\r\n  top: 50%;\r\n  border-width: 6.5px 6.5px 6.5px 0;\r\n  transform: translateY(-50%) rotate(0deg);\r\n  border-color: transparent var(--color-surface-bold, #FCFCFC) transparent transparent;\r\n}\r\n\r\n.arrow.bottom_right {\r\n  top: 100%;\r\n  right: 5%;\r\n  border-width: 7.5px 7.5px 0 7.5px;\r\n  border-color: var(--color-border-subtler, #E3E8EF) transparent transparent transparent;\r\n  transform: translateX(-50%);\r\n}\r\n\r\n.arrow.bottom_right::before {\r\n  left: -0.39rem;\r\n  bottom: 0.1rem;\r\n  border-width: 0 9.6px 9.6px 9.6px;\r\n  transform: translateY(-50%) rotate(135deg);\r\n  border-color: transparent var(--color-surface-bold, #FCFCFC) transparent transparent;\r\n}\r\n \r\n.arrow.top_center {\r\n  bottom: 100%;\r\n  right: 45%;\r\n  border-width: 0 7.5px 7.5px 7.5px;\r\n  border-color: transparent transparent var(--color-border-subtler, #E3E8EF) transparent;\r\n}\r\n\r\n.arrow.top_center::before {\r\n  left: -12.8px;\r\n  bottom: -20.25px;\r\n  border-width: 0 9.5px 9.5px 9.5px;\r\n  transform: translateY(-50%) rotate(-45deg);\r\n  border-color: transparent var(--color-surface-bold, #FCFCFC) transparent transparent;\r\n}\r\n\r\n::slotted([slot=\"label\"]){\r\n  color: var(--color-text, #4B5565);\r\n}\r\n\r\n::slotted([slot=\"label\"].nowrap){\r\n  white-space: nowrap;\r\n}\r\n\r\n::slotted([slot=\"label\"].wrap_label){\r\n  white-space: wrap;\r\n  max-width: 10rem;\r\n}\r\n\r\n::slotted([slot=\"supporting_text\"]){\r\n  white-space: wrap;\r\n  color: var(--color-text-subtle, #697586);\r\n  margin-top: 5rem;\r\n  min-width: fit-content;\r\n  max-width: 18.5rem;\r\n}","import { Component, Element, Prop, h } from '@stencil/core';\r\nimport { ArrowPositions } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-tooltip',\r\n  styleUrl: 'gb-tooltip.css',\r\n  shadow: true,\r\n})\r\nexport class GbTooltip {\r\n  @Prop() showArrow: boolean = false;\r\n  @Prop() arrow: ArrowPositions = 'bottom_center';\r\n  @Prop() showSupportingText: boolean = false;\r\n  @Prop() noWrap: boolean = true;\r\n  @Element() el: HTMLElement;\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('text-xs-semi-bold');\r\n    }\r\n\r\n    if (mainTextSlot && this.noWrap) {\r\n      mainTextSlot.classList.add('nowrap');\r\n    }\r\n\r\n    if (mainTextSlot && !this.showSupportingText && !this.noWrap) {\r\n      mainTextSlot.classList.add('wrap_label');\r\n    }\r\n\r\n    if (supportingTextSlot) {\r\n      supportingTextSlot.classList.add('text-xs-regular');\r\n    }\r\n  }\r\n\r\n  getArrowClass() {\r\n    return this.showArrow ? `arrow ${this.arrow}` : '';\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"tooltip_container\">\r\n        <div class=\"tooltip\">\r\n          {this.showArrow && <div class={this.getArrowClass()}></div>}\r\n          <div class=\"tooltip_content\">\r\n            <slot name=\"label\" />\r\n            {this.showSupportingText && <slot name=\"supporting_text\" />}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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","ignoreList":[]}