globuswebcomponents 2.0.7 → 2.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (51) hide show
  1. package/dist/cjs/{gb-action-panel_30.cjs.entry.js → gb-action-panel_32.cjs.entry.js} +61 -2
  2. package/dist/cjs/gb-action-panel_32.cjs.entry.js.map +1 -0
  3. package/dist/cjs/gb-stepper-vertical-icons-with-text.cjs.entry.js +1 -2
  4. package/dist/cjs/gb-stepper-vertical-icons-with-text.cjs.entry.js.map +1 -1
  5. package/dist/cjs/gb-stepper-vertical-icons-with-text.entry.cjs.js.map +1 -1
  6. package/dist/cjs/globuscomponents.cjs.js +1 -1
  7. package/dist/cjs/loader.cjs.js +1 -1
  8. package/dist/collection/components/gb-stepper-vertical-icons-with-text/gb-stepper-vertical-icons-with-text.js +1 -2
  9. package/dist/collection/components/gb-stepper-vertical-icons-with-text/gb-stepper-vertical-icons-with-text.js.map +1 -1
  10. package/dist/collection/components/gb-toast/gb-toast.css +12 -12
  11. package/dist/collection/components/gb-toast/gb-toast.js +51 -46
  12. package/dist/collection/components/gb-toast/gb-toast.js.map +1 -1
  13. package/dist/components/gb-stepper-vertical-icons-with-text.js +1 -2
  14. package/dist/components/gb-stepper-vertical-icons-with-text.js.map +1 -1
  15. package/dist/components/gb-toast.js +14 -47
  16. package/dist/components/gb-toast.js.map +1 -1
  17. package/dist/docs.json +50 -2
  18. package/dist/esm/{gb-action-panel_30.entry.js → gb-action-panel_32.entry.js} +60 -3
  19. package/dist/esm/gb-action-panel_32.entry.js.map +1 -0
  20. package/dist/esm/gb-stepper-vertical-icons-with-text.entry.js +1 -2
  21. package/dist/esm/gb-stepper-vertical-icons-with-text.entry.js.map +1 -1
  22. package/dist/esm/globuscomponents.js +1 -1
  23. package/dist/esm/loader.js +1 -1
  24. package/dist/globuscomponents/gb-stepper-vertical-icons-with-text.entry.esm.js.map +1 -1
  25. package/dist/globuscomponents/globuscomponents.esm.js +1 -1
  26. package/dist/globuscomponents/{p-ca725644.entry.js → p-05419395.entry.js} +2 -2
  27. package/dist/globuscomponents/p-05419395.entry.js.map +1 -0
  28. package/dist/globuscomponents/{p-b215c99e.entry.js → p-29f61af5.entry.js} +2 -2
  29. package/dist/globuscomponents/{p-b215c99e.entry.js.map → p-29f61af5.entry.js.map} +1 -1
  30. package/dist/types/components/gb-toast/gb-toast.d.ts +4 -5
  31. package/dist/types/components.d.ts +4 -0
  32. package/package.json +1 -1
  33. package/dist/cjs/gb-action-panel_30.cjs.entry.js.map +0 -1
  34. package/dist/cjs/gb-toast-button.cjs.entry.js +0 -25
  35. package/dist/cjs/gb-toast-button.cjs.entry.js.map +0 -1
  36. package/dist/cjs/gb-toast-button.entry.cjs.js.map +0 -1
  37. package/dist/cjs/gb-toast.cjs.entry.js +0 -84
  38. package/dist/cjs/gb-toast.cjs.entry.js.map +0 -1
  39. package/dist/cjs/gb-toast.entry.cjs.js.map +0 -1
  40. package/dist/esm/gb-action-panel_30.entry.js.map +0 -1
  41. package/dist/esm/gb-toast-button.entry.js +0 -23
  42. package/dist/esm/gb-toast-button.entry.js.map +0 -1
  43. package/dist/esm/gb-toast.entry.js +0 -82
  44. package/dist/esm/gb-toast.entry.js.map +0 -1
  45. package/dist/globuscomponents/gb-toast-button.entry.esm.js.map +0 -1
  46. package/dist/globuscomponents/gb-toast.entry.esm.js.map +0 -1
  47. package/dist/globuscomponents/p-3dad4e91.entry.js +0 -2
  48. package/dist/globuscomponents/p-3dad4e91.entry.js.map +0 -1
  49. package/dist/globuscomponents/p-6270dcca.entry.js +0 -2
  50. package/dist/globuscomponents/p-6270dcca.entry.js.map +0 -1
  51. package/dist/globuscomponents/p-ca725644.entry.js.map +0 -1
@@ -0,0 +1 @@
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","onCheckboxClicked","event","detail","checkboxClicked","emit","onFirstButtonClicked","firstButtonState","firstButtonClicked","onSecondButtonClicked","secondButtonState","secondButtonClicked","onThirdButtonClicked","thirdButtonState","thirdButtonClicked","onPreviousButtonClicked","previousButtonClicked","onSaveAsDraft","saveAsDraft","onSubmitClicked","submitButtonClicked","onNextButtonClicked","nextButtonClicked","render","h","key","class","type","size","color","name","state","StateEnum","Default","text","bind","slot","hierarchy","icon","onClick","previousButtonState","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","gbBadgeCss","GbBadges","closeButton","getDotColor","colorMap","gray","primary","error","warning","success","discovery","information","pink","purple","iconLeadingSwap","iconLeadingSrc","getAssetPath","leadingIconContent","fetchSvgContent","iconTrailingSwap","iconTrailingSrc","trailingIconContent","src","response","fetch","ok","console","getTextClass","slottedContent","badge","flagSwap","dotColor","cx","cy","r","innerHTML","alt","id","stroke","gbBadgeCloseCss","BadgeClose","gbBtnCss","GbButton","destructive","iconLeading","iconTrailing","leadingIconSvg","trailingIconSvg","loadIcon","buttonSlot","getButtonTextClasses","iconName","iconPath","svg","getButtonClasses","button","disabled","default","only","renderLeadingIcon","renderTrailingIcon","gbButtonCss","internalButtonState","updateButtonState","newValue","componentWillRender","oneicon","gbButtonCloseCss","GbButtonClose","gbButtonGroupCss","GbButtonGroup","items","internalItems","selectedValue","handleSelect","index","map","item","i","Object","assign","current","valueChange","gbButtonGroupBaseCss","GbButtonGroupBase","iconSrc","indeterminate","gbCheckboxCss","GbCheckbox","supportingText","getMainTextClass","getSupportingTextClass","mainTextSlot","supportingTextSlot","gbCheckboxBaseCss","GbCheckboxBase","renderSVG","renderCheckbox","renderCircle","renderRadio","x","y","rx","toggleCheckboxState","toggleCheckCircleState","toggleRadioButtonState","gbCommentCss","GbComment","heading","noCommentText","noCommentTextSub","comments","toggleComments","hasComments","patternSrc","illustrationSrc","opacity","comment","duty","role","timeStamp","connector","gbCommentItemCss","GbCommentItem","displayNameAndRole","nameAndRole","gbExportDropdownCss","GbExportDropdown","showEntireData","showFirstSubDropdown","showSecondSubDropdown","onExportClicked","exportType","dataType","exportClicked","log","Fragment","onMouseOver","onMouseOut","gbExportDropdownItemCss","GbExportDropdownItem","gbExportSubDropdownCss","GbExportSubDropdown","labelOneSlot","labelTwoSlot","labelThreeSlot","gbExportSubDropdownItemCss","GbExportSubDropdownItem","labelSlot","gbFilterButtonCss","GbFilterButton","iconOnly","countSlot","gbHelpTooltipCss","GbHelpTooltip","showHelpTooltip","showArrow","showSupportingText","onMouseEnter","onMouseLeave","arrow","gbInputDropdownMenuItemCss","GbInputDropdownMenuItem","selected","nameSlot","initialsSlot","handleClick","dropdownItemClicked","checkbox","gbInputFieldCss","GbInputField","inputType","showLabel","showHintText","hintText","errorText","showPlaceholder","showHelpIcon","showValidation","showCountryIcon","options","isReadOnly","results","value","required","inputValue","tags","isPasswordVisible","showDropdown","selectedItem","selectedItems","unselectedItems","paddingLeft","paddingTop","dropdownOpen","show","showSpinner","minWidth","formAssociatedCallback","internals","setValidity","formResetCallback","setFormValue","formDisabledCallback","runValidation","trim","valueMissing","shadowRoot","handleTagInput","target","inputValueChanged","setTimeout","updateInputWidth","selectDropdownItem","isObject","isSelected","some","objectName","filter","updateStyles","handleTagRemove","slice","resultsDisplayElement","resultsWidth","offsetWidth","inputWidth","inputElement","exportSelectedStaff","onButtonClicked","buttonClicked","handleClickOutside","contains","handleInput","option","clearInput","inputRef","togglePasswordVisibility","optionsChanged","newOptions","isItemSelected","isTagItemSelected","handleItemSelect","updateSelectedItems","Array","isArray","objectValues","val","primitiveValues","JSON","stringify","includes","iconSwap","textSlot","document","addEventListener","hiddenSpan","input","calculatedWidth","max","style","handleWrapperClick","focus","charAt","toUpperCase","minLength","maxLength","onInput","ref","menuPosition","dropdownRef","onBlur","inputGroupElement","action","split","part","idOfInput","readOnly","objectValue","gbPasswordButtonCss","GbPasswordButton","gbStatusIndicatorCss","GbStatusIndicator","Offline","indicatorStateClass","gbTableHeaderCss","GbTableHeader","showFilter","showColumnOptions","tableHeading","showSearch","showExport","showRefreshButton","tableHeadingLabel","showLayoutToggle","filterCount","window","innerWidth","showExportDropdown","handleResize","updateButtonIcon","toggleDropdown","buttonIcon","emitValue","onFilterButtonClicked","filterButtonClicked","emitSelection","selection","onRefreshButtonClicked","refreshButtonClicked","onLayoutButtonClicked","layout","layoutButtonClicked","onInputValueChanged","onValueChange","filterState","gbTagCss","GbTag","onTagClose","gbTagCheckboxCss","GbTagCheckbox","gbTagCloseCss","GbTagClose","gbTagCountCss","GbTagCount","gbToastCss","GbToast","mainText","xCloseButton","actions","onColorChange","_oldValue","internalColor","closeToast","close","breakpoint","gbToastButtonCss","GbToastButton","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-badge/gb-badge.css?tag=gb-badge&encapsulation=shadow","src/components/gb-badge/gb-badge.tsx","src/components/gb-badge-close/gb-badge-close.css?tag=gb-badge-close&encapsulation=shadow","src/components/gb-badge-close/gb-badge-close.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-comment/gb-comment.css?tag=gb-comment&encapsulation=shadow","src/components/gb-comment/gb-comment.tsx","src/components/gb-comment-item/gb-comment-item.css?tag=gb-comment-item&encapsulation=shadow","src/components/gb-comment-item/gb-comment-item.tsx","src/components/gb-export-dropdown/gb-export-dropdown.css?tag=gb-export-dropdown&encapsulation=shadow","src/components/gb-export-dropdown/gb-export-dropdown.tsx","src/components/gb-export-dropdown-item/gb-export-dropdown-item.css?tag=gb-export-dropdown-item&encapsulation=shadow","src/components/gb-export-dropdown-item/gb-export-dropdown-item.tsx","src/components/gb-export-sub-dropdown/gb-export-sub-dropdown.css?tag=gb-export-sub-dropdown&encapsulation=shadow","src/components/gb-export-sub-dropdown/gb-export-sub-dropdown.tsx","src/components/gb-export-sub-dropdown-item/gb-export-sub-dropdown-item.css?tag=gb-export-sub-dropdown-item&encapsulation=shadow","src/components/gb-export-sub-dropdown-item/gb-export-sub-dropdown-item.tsx","src/components/gb-filter-button/gb-filter-button.css?tag=gb-filter-button&encapsulation=shadow","src/components/gb-filter-button/gb-filter-button.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-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-table-header/gb-table-header.css?tag=gb-table-header&encapsulation=shadow","src/components/gb-table-header/gb-table-header.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-toast/gb-toast.css?tag=gb-toast&encapsulation=shadow","src/components/gb-toast/gb-toast.tsx","src/components/gb-toast-button/gb-toast-button.css?tag=gb-toast-button&encapsulation=shadow","src/components/gb-toast-button/gb-toast-button.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, 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() 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 @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<void>;\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 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 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();\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\" 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 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:host{\r\n display: flex;\r\n align-items: center;\r\n width: fit-content;\r\n}\r\n\r\ndiv{\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 0px;\r\n flex-shrink: 0;\r\n text-align: center;\r\n}\r\n\r\n.label {\r\n padding: 2px;\r\n}\r\n\r\n.icon {\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\ndiv.sm{\r\n height: 22px;\r\n min-height: 22px;\r\n gap: 0.25rem;\r\n padding: var(--spacing-none) var(--spacing-2);\r\n}\r\n\r\ndiv.md {\r\n height: var(--spacing-6);\r\n min-height: var(--spacing-6);\r\n padding: var(--spacing-none) var(--spacing-2);\r\n gap: 0.38rem;\r\n}\r\n\r\ndiv.lg {\r\n height: 28px;\r\n min-height: 28px;\r\n gap: 0.38rem;\r\n padding: var(--spacing-none) var(--spacing-2);\r\n}\r\n\r\ndiv.pill_color {\r\n border-radius: var(--rounded-full);\r\n}\r\n\r\ndiv.pill_color.gray,\r\n.badge_color.gray {\r\n border: 1px solid var(--color-border-subtler, #E3E8EF);\r\n background: var(--color-background-gray-subtler, #EEF2F6);\r\n color: var(--color-text, #4B5565);\r\n}\r\n\r\n.pill_color.primary,\r\n.badge_color.primary {\r\n border: 1px solid #C8E0F9 /*Color/Border/border-information-subtler*/;\r\n background: var(--color-background-information-subtlest, #E4F0FC); \r\n color: var(--color-text-brandDarkBlue, #212C65);\r\n}\r\n\r\n.pill_color.error,\r\n.badge_color.error {\r\n border: 1px solid var(--color-border-danger-subtler, #FDE3E5);\r\n background: var(--color-background-danger-subtlest, #FEF1F2 );\r\n color: var(--color-text-danger, #B51726);\r\n}\r\n\r\n.pill_color.warning,\r\n.badge_color.warning {\r\n border: 1px solid var(--color-border-warning-subtler, #FEF0C7);\r\n background: var(--color-background-warning-subtlest, #FFFAEB);\r\n color: var(--color-text-warning, #DC6803);\r\n}\r\n\r\n.pill_color.success,\r\n.badge_color.success {\r\n border: 1px solid var(--color-border-success-subtler, #DCFAE6);\r\n background: var(--color-background-success-subtlest, #ECFDF3);\r\n color: var(--color-text-success, #079455);\r\n}\r\n\r\n.pill_color.discovery,\r\n.badge_color.discovery {\r\n border: 1px solid var(--color-border-discovery-subtler, #E0F2FE);\r\n background: var(--color-background-discovery-subtlest,#F0F9FF);\r\n color: var(--color-text-discovery, #0086C9);\r\n}\r\n\r\n.pill_color.information,\r\n.badge_color.information {\r\n border: 1px solid var(--color-border-information-subtler, #C8E0F9);\r\n background: var(--color-background-information-subtlest, #E4F0FC);\r\n color: var(--color-text-information, #064E94);\r\n}\r\n\r\n.pill_color.pink,\r\n.badge_color.pink {\r\n border: 1px solid var(--color-border-pink-subtler, #FCE7F6);\r\n background: var(--color-background-pink-subtlest, #FDF2FA);\r\n color: var(--color-text-pink, #DD2590);\r\n}\r\n\r\n.pill_color.purple,\r\n.badge_color.purple {\r\n border: 1px solid var(--color-border-purple-subtler, #EBE9FE);\r\n background: var(--color-background-purple-subtlest, #F4F3FF);\r\n color: var(--color-text-purple, #6938EF);\r\n}\r\n\r\n.pill_color svg,\r\n.badge_color svg,\r\n.pill_outline svg,\r\n.badge_modern svg {\r\n width: var(--spacing-2);\r\n height: var(--spacing-2);\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.gray svg path[stroke] {\r\n stroke: var(--color-icon, #4B5565) /*var(--color-icon)*/;\r\n}\r\n\r\n.gray svg path[fill] {\r\n fill: var(--color-icon, #4B5565);\r\n}\r\n\r\n.primary svg path[stroke] {\r\n stroke: var(--color-icon-brandDarkBlue, #212C65);\r\n}\r\n\r\n.primary svg path[fill] {\r\n fill: var(--color-icon-brandDarkBlue, #212C65);\r\n}\r\n\r\n.error svg path[stroke] {\r\n stroke: var(--color-icon-danger, #B51726);\r\n}\r\n\r\n.error svg path[fill] {\r\n fill: var(--color-icon-danger, #B51726);\r\n}\r\n\r\n.warning svg path[stroke] {\r\n stroke: var(--color-icon-warning, #DC6803);\r\n}\r\n\r\n.warning svg path[fill] {\r\n fill: var(--color-icon-warning, #DC6803);\r\n}\r\n\r\n.icon.success svg path[stroke] {\r\n stroke: var(--color-icon-success, #079455);\r\n}\r\n\r\n.success svg path[fill] {\r\n fill: var(--color-icon-success, #079455);\r\n}\r\n\r\n.discovery svg path[stroke] {\r\n stroke: var(--color-icon-discovery, #0086C9);\r\n}\r\n\r\n.discovery svg path[fill] {\r\n fill: var(--color-icon-discovery, #0086C9);\r\n}\r\n\r\n.information svg path[stroke] {\r\n stroke: var(--color-icon-information, #064E94);\r\n}\r\n\r\n.information svg path[fill] {\r\n fill: var(--color-icon-information, #064E94);\r\n}\r\n\r\n.pink svg path[stroke] {\r\n stroke: var(--color-icon-pink, #DD2590);\r\n}\r\n\r\n.pink svg path[fill] {\r\n fill: var(--color-icon-pink, #DD2590);\r\n}\r\n\r\n.purple svg path[stroke] {\r\n stroke: var(--color-icon-purple, #6938EF);\r\n}\r\n\r\n.purple svg path[fill] {\r\n fill: var(--color-icon-purple, #6938EF);\r\n}\r\n\r\n.pill_outline {\r\n border-radius: var(--rounded-full);\r\n}\r\n\r\n.pill_outline.gray {\r\n border: 1.5px solid var(--color-text, #4B5565);\r\n color: var(--color-text, #4B5565);\r\n}\r\n\r\n.pill_outline.primary {\r\n border: 1.5px solid var(--color-text-brandDarkBlue, #212C65);\r\n color:var(--color-text-brandDarkBlue, #212C65);\r\n}\r\n\r\n.pill_outline.error {\r\n border: 1.5px solid var(--color-text-danger, #B51726);\r\n color:var(--color-text-danger, #B51726);\r\n}\r\n\r\n.pill_outline.warning {\r\n border: 1.5px solid var(--color-text-warning, #DC6803);\r\n color:var(--color-text-warning, #DC6803);\r\n}\r\n\r\n.pill_outline.success {\r\n border: 1.5px solid var(--color-text-success, #079455);\r\n color:var(--color-text-success, #079455);\r\n}\r\n\r\n.pill_outline.discovery {\r\n border: 1.5px solid var(--color-text-discovery, #0086C9);\r\n color: var(--color-text-discovery, #0086C9);\r\n}\r\n\r\n.pill_outline.information {\r\n border: 1.5px solid var(--color-text-information, #064E94);\r\n color: var(--color-text-information, #064E94);\r\n}\r\n\r\n.pill_outline.pink {\r\n border: 1.5px solid var(--color-text-pink, #DD2590);\r\n color: var(--color-text-pink, #DD2590);\r\n}\r\n\r\n.pill_outline.purple {\r\n border: 1.5px solid var(--color-text-purple, #6938EF);\r\n color: var(--color-text-purple, #6938EF);\r\n}\r\n\r\n.badge_color {\r\n border-radius: var(--rounded-xs);\r\n}\r\n\r\n.badge_modern {\r\n border-radius: var(--rounded-xs);\r\n border: 1px solid var(--color-boarder-subtler, #E3E8EF);\r\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\r\n color: var(--color-text, #4B5565);\r\n}\r\n\r\n.badge_modern svg path {\r\n stroke: inherit; /* Inherit color from the parent, but set in the component */\r\n fill: inherit;\r\n}\r\n\r\n.icon svg {\r\n width: var(--spacing-4);\r\n height: var(--spacing-4);\r\n margin-top: -2px;\r\n}\r\n\r\n.icon svg path[stroke] {\r\n stroke: currentColor;\r\n}\r\n\r\n.icon svg path[fill] {\r\n fill: currentColor;\r\n}\r\n\r\n#icon-only svg {\r\n width: var(--spacing-3);\r\n height: var(--spacing-3);\r\n}\r\n\r\ndiv.md #icon-only svg {\r\n padding: 2px;\r\n}\r\n\r\n#icon-only {\r\n display: flex;\r\n padding: var(--spacing-none);\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-full);\r\n}","import { Component, Prop, getAssetPath, h, State, Element } from '@stencil/core';\r\nimport { BadgeIconTypes, BadgeTypes, GeneralColors, GeneralSizes } from '../../models/reusableModels';\r\n\r\n@Component({\r\n tag: 'gb-badge',\r\n styleUrl: 'gb-badge.css',\r\n shadow: true,\r\n assetsDirs: ['assets'],\r\n})\r\nexport class GbBadges {\r\n @Prop() size!: GeneralSizes;\r\n @Prop() icon: BadgeIconTypes;\r\n @Prop() iconLeadingSwap?: string;\r\n @Prop() iconTrailingSwap?: string;\r\n @Prop() flagSwap: string;\r\n @Prop() color!: GeneralColors;\r\n @Prop() type!: BadgeTypes;\r\n @Prop() closeButton?: boolean = false;\r\n @State() leadingIconContent: string;\r\n @State() trailingIconContent: string;\r\n @Element() el: HTMLElement;\r\n\r\n private getDotColor(color: GeneralColors): string {\r\n const colorMap = {\r\n gray: '#4B5565',\r\n primary: '#212C65',\r\n error: '#B51726',\r\n warning: '#DC6803',\r\n success: '#079455',\r\n discovery: '#0BA5EC',\r\n information: '#064E94',\r\n pink: '#DD2590',\r\n purple: '#6938EF',\r\n };\r\n\r\n if (this.type === 'badge_modern') {\r\n return colorMap[color] || color;\r\n }\r\n\r\n return 'currentColor';\r\n }\r\n\r\n async componentWillLoad() {\r\n if (this.iconLeadingSwap) {\r\n const iconLeadingSrc = getAssetPath(`${this.iconLeadingSwap}`);\r\n this.leadingIconContent = await this.fetchSvgContent(iconLeadingSrc);\r\n }\r\n\r\n if (this.iconTrailingSwap) {\r\n const iconTrailingSrc = getAssetPath(`${this.iconTrailingSwap}`);\r\n this.trailingIconContent = await this.fetchSvgContent(iconTrailingSrc);\r\n }\r\n }\r\n\r\n private async fetchSvgContent(src: string): Promise<string> {\r\n try {\r\n const response = await fetch(src);\r\n if (response.ok) {\r\n return await response.text();\r\n }\r\n return '';\r\n } catch (error) {\r\n console.error('Error fetching SVG:', error);\r\n return '';\r\n }\r\n }\r\n\r\n getTextClass() {\r\n switch (this.size) {\r\n case 'sm':\r\n return 'text-xs-medium';\r\n case 'md':\r\n return 'text-sm-medium';\r\n case 'lg':\r\n return 'text-sm-medium';\r\n }\r\n }\r\n\r\n componentDidLoad() {\r\n const slottedContent = this.el.querySelector('p');\r\n\r\n if (slottedContent) {\r\n slottedContent.classList.add(this.getTextClass());\r\n }\r\n }\r\n\r\n render() {\r\n const classes = {\r\n badge: true,\r\n [this.type]: true,\r\n [this.color]: true,\r\n [this.size]: true,\r\n };\r\n\r\n const flagSwap = getAssetPath(`${this.flagSwap}`);\r\n const dotColor = this.type === 'badge_modern' ? this.getDotColor(this.color) : 'currentColor';\r\n\r\n return (\r\n <div class={classes}>\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={dotColor}>\r\n <circle cx=\"4\" cy=\"4\" r=\"3\" />\r\n </svg>\r\n )}\r\n {this.icon === 'icon_leading' && this.iconLeadingSwap && <div class={`icon left-icon`} innerHTML={this.leadingIconContent}></div>}\r\n {this.icon === 'country' && <img src={flagSwap} alt=\"Country Icon\" />}\r\n {this.icon === 'avatar' && (\r\n <gb-avatar class=\"avatar-icon\" size=\"xxs\" status-icon=\"false\">\r\n <slot name=\"image\" slot=\"image\"></slot>\r\n </gb-avatar>\r\n )}\r\n {this.icon !== 'only' && <slot></slot>}\r\n {this.icon === 'icon_trailing' && this.iconTrailingSwap && <div class={`icon right-icon`} innerHTML={this.trailingIconContent}></div>}\r\n {this.icon === 'only' && (\r\n <div id=\"icon-only\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" stroke={dotColor}>\r\n <path d=\"M6 2L6 10M10 6L2 6\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n )}\r\n {this.closeButton && this.icon !== 'only' && <gb-badge-close color={this.color} type=\"rounded\"></gb-badge-close>}\r\n </div>\r\n );\r\n }\r\n}\r\n","@import './../../global/global.css';\r\n\r\ndiv {\r\n display: flex;\r\n padding: var(--spacing-half);\r\n justify-content: center;\r\n align-items: center;\r\n gap: var(--spacing-none);\r\n height: fit-content;\r\n width: fit-content;\r\n cursor: pointer;\r\n}\r\n\r\ndiv svg{\r\n width: var(--spacing-3);\r\n height: var(--spacing-3);\r\n}\r\n\r\ndiv.square {\r\n border-radius: 3px;\r\n}\r\n\r\ndiv.rounded {\r\n border-radius: 8px;\r\n}\r\n\r\ndiv.gray, div.primary, div.error, div.warning, div.success, div.discovery, div.information, div.pink {\r\n background-color: transparent;\r\n}\r\n\r\ndiv.gray path{\r\n stroke: var(--color-icon, #4B5565); \r\n}\r\n\r\ndiv.primary path{\r\n stroke: var(--color-icon-brandDarkBlue, #212C65);\r\n}\r\n\r\ndiv.error path{\r\n stroke: var(--color-icon-danger, #B51726);\r\n}\r\n\r\ndiv.warning path{\r\n stroke: var(--color-icon-warning, #DC6803);\r\n}\r\n\r\ndiv.success path{\r\n stroke: var(--color-icon-success, #079455); \r\n}\r\n\r\ndiv.discovery path{\r\n stroke: var(--color-icon-discovery, #0086C9);\r\n}\r\n\r\ndiv.information path{\r\n stroke: var(--color-icon-information, #064E94);\r\n}\r\n\r\ndiv.pink path{\r\n stroke: var(--color-icon-pink, #DD2590); \r\n}\r\n\r\ndiv.gray:hover {\r\n background: var(--color-background-gray-subtler, #EEF2F6);\r\n}\r\n\r\ndiv.primary:hover {\r\n background: var(--color-background-information-subtler, #C8E0F9);\r\n}\r\n\r\ndiv.error:hover {\r\n background: var(--color-background-danger-subtler, #FDE3E5);\r\n}\r\n\r\ndiv.warning:hover {\r\n background: var(--color-background-warning-subtler, #FEF0C7);\r\n}\r\n\r\ndiv.success:hover {\r\n background: var(--color-background-success-subtler, #DCFAE6);\r\n}\r\n\r\ndiv.discovery:hover {\r\n background: var(--color-background-discovery-subtler, #E0F2FE);\r\n}\r\n\r\ndiv.information:hover {\r\n background: var(--color-background-information-subtler, #C8E0F9);\r\n}\r\n\r\ndiv.pink:hover {\r\n background: var(--color-background-pink-subtler, #FCE7F6);\r\n}","import { Component, Prop, h } from '@stencil/core';\r\nimport { GeneralColors } from '../../models/reusableModels';\r\n\r\n@Component ({\r\n tag: 'gb-badge-close',\r\n styleUrl: 'gb-badge-close.css',\r\n shadow: true\r\n})\r\n\r\nexport class BadgeClose {\r\n @Prop() color: GeneralColors;\r\n @Prop() type: 'square' | 'rounded';\r\n\r\n render() {\r\n return (\r\n <div class={`${this.color} ${this.type}`}>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9.50024 2.5L2.50024 9.5M2.50024 2.5L9.50024 9.5\" 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\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}\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() valueChange: 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.valueChange.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:host {\r\n display: block;\r\n\r\n}\r\n\r\n.alpha-mask {\r\n mask-type: alpha;\r\n}\r\n\r\n.comments-container {\r\n padding: var(--spacing-4);\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: flex-start;\r\n gap: var(--spacing-4);\r\n border-radius: 12px;\r\n border: 1px solid var(--color-border-infromation-subtle, #9AC7F4);\r\n background: var(--color-background-information-subtlest, #E4F0FC);\r\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\r\n /* transition: 1s ease-in-out; */\r\n}\r\n\r\n.header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n height: fit-content;\r\n padding: 0.5rem;\r\n gap: var(--spacing-2);\r\n}\r\n\r\n.header.expanded{\r\n margin-bottom: 1rem;\r\n}\r\n\r\n.header.collased{\r\n margin-bottom: 0;\r\n}\r\n\r\n.title-section {\r\n display: flex;\r\n align-items: center;\r\n gap: 1rem;\r\n}\r\n\r\n.info-icon {\r\n width: 24px;\r\n height: 24px;\r\n flex-shrink: 0;\r\n}\r\n\r\n.heading{\r\n color: var(--color-text-information, #064E94);\r\n}\r\n\r\n.comments-wrapper{\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: var(--spacing-none);\r\n align-self: stretch;\r\n\r\n}\r\n\r\n.no-comments-state-images{\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n \r\n}\r\n\r\n.comments-container.no-comments-state {\r\n height: fit-content;\r\n}\r\n\r\n.no-comment-text-wrapper span{\r\n display: flex;\r\n justify-content: center;\r\n}\r\n\r\n.empty_state_pattern{\r\n position: absolute;\r\n top: 0;\r\n width: 400px;\r\n height: 120px;\r\n mix-blend-mode: multiply;\r\n}\r\n\r\n.empty_state{\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n gap: var(--spacing-3);\r\n flex-shrink: 0;\r\n align-self: stretch;\r\n}\r\n\r\n.text{\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n text-align: center;\r\n gap: var(--spacing-3);\r\n}\r\n\r\n.content{\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: var(--spacing-5);\r\n align-self: stretch;\r\n}\r\n\r\n.frame{\r\n display: flex;\r\n justify-content: center;\r\n position: relative;\r\n}\r\n\r\n.container{\r\n position: relative;\r\n}\r\n\r\n.main-text{\r\n color: var(--color-text-bold, #202939);\r\n \r\n}\r\n\r\n.sub-text{\r\n color: var(--color-text, #4B5565);\r\n}\r\n\r\n@media (max-width: 468px) {\r\n .header{\r\n flex-wrap: wrap;\r\n }\r\n}","import { Component, Prop, h, getAssetPath } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'gb-comment',\r\n styleUrl: 'gb-comment.css',\r\n shadow: true,\r\n})\r\nexport class GbComment {\r\n @Prop() heading: string = '';\r\n @Prop({ mutable: true }) state: 'expanded' | 'collapsed';\r\n @Prop() noCommentText: string = 'No comment yet';\r\n @Prop() noCommentTextSub: string = 'No reviewer has left a comment yet, you will be notified when a comment drops';\r\n @Prop() comments: any[] = [\r\n // {\r\n // name: 'Prince Ogheneriere',\r\n // role: 'Authorizer',\r\n // comment: 'This is error and fraud free. I concur',\r\n // timestamp: '07-Oct-2024 6:00PM' ,\r\n // },\r\n // {\r\n // name: 'Prince Ogheneriere',\r\n // role: 'Authorizer',\r\n // comment: 'This is error and fraud free. I concur',\r\n // timestamp: '07-Oct-2024 6:00PM',\r\n // },\r\n // {\r\n // name: 'Prince Ogheneriere',\r\n // role: 'Authorizer',\r\n // comment: 'I concur to the transactions in this call-over',\r\n // timestamp: '07-Oct-2024 6:00PM',\r\n // },\r\n // {\r\n // name: 'Gideon',\r\n // role: 'Designer',\r\n // comment: 'I concur to the transactions in this call-over',\r\n // timestamp: '07-Nov-2024 6:00PM',\r\n // },\r\n ];\r\n\r\n toggleComments() {\r\n if (this.state === 'expanded') {\r\n this.state = 'collapsed';\r\n } else if (this.state === 'collapsed') {\r\n this.state = 'expanded';\r\n }\r\n }\r\n\r\n render() {\r\n const hasComments = this.comments && this.comments.length > 0;\r\n const patternSrc = getAssetPath(`assets/background_pattern.svg`);\r\n const illustrationSrc = getAssetPath(`assets/illustration.svg`);\r\n\r\n return (\r\n <div class={`comments-container ${!hasComments ? 'no-comments-state' : ''}`}>\r\n <div class={`header ${this.state}`}>\r\n <div class=\"title-section\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"info-icon\">\r\n <path\r\n opacity=\"0.4\"\r\n d=\"M12.0572 1.75C14.2479 1.74999 15.9686 1.74998 17.312 1.93059C18.6886 2.11568 19.7809 2.50271 20.6391 3.36091C21.4973 4.21911 21.8843 5.31137 22.0694 6.68802C22.25 8.03143 22.25 9.7521 22.25 11.9428V11.9428V12.0572V12.0572C22.25 14.2479 22.25 15.9686 22.0694 17.312C21.8843 18.6886 21.4973 19.7809 20.6391 20.6391C19.7809 21.4973 18.6886 21.8843 17.312 22.0694C15.9686 22.25 14.2479 22.25 12.0572 22.25H12.0572H11.9428H11.9428C9.7521 22.25 8.03143 22.25 6.68802 22.0694C5.31137 21.8843 4.21911 21.4973 3.36091 20.6391C2.50271 19.7809 2.11568 18.6886 1.93059 17.312C1.74998 15.9686 1.74999 14.2479 1.75 12.0572V11.9428C1.74999 9.75212 1.74998 8.03144 1.93059 6.68802C2.11568 5.31137 2.50272 4.21911 3.36091 3.36091C4.21911 2.50272 5.31137 2.11568 6.68802 1.93059C8.03144 1.74998 9.75212 1.74999 11.9428 1.75H12.0572Z\"\r\n fill=\"#064E94\"\r\n />\r\n <path\r\n fill-rule=\"evenodd\"\r\n clip-rule=\"evenodd\"\r\n d=\"M11.6819 10.5273C11.9289 10.5605 12.2707 10.6494 12.5607 10.9394C12.8507 11.2294 12.9396 11.5711 12.9728 11.8182C13.0003 12.0228 13.0001 12.2608 13 12.4606C13 12.474 13 12.4871 13 12.5V16.5C13 17.0523 12.5523 17.5 12 17.5C11.4477 17.5 11 17.0523 11 16.5V12.5C10.4477 12.5 10 12.0523 10 11.5C10 10.9477 10.4477 10.5 11 10.5C11.0129 10.5 11.0261 10.5 11.0394 10.5C11.2393 10.4999 11.4772 10.4997 11.6819 10.5273Z\"\r\n fill=\"#064E94\"\r\n />\r\n <path\r\n fill-rule=\"evenodd\"\r\n clip-rule=\"evenodd\"\r\n d=\"M10.9999 7.5C10.9999 6.94772 11.4456 6.5 11.9954 6.5H12.0044C12.5542 6.5 12.9999 6.94772 12.9999 7.5C12.9999 8.05228 12.5542 8.5 12.0044 8.5H11.9954C11.4456 8.5 10.9999 8.05228 10.9999 7.5Z\"\r\n fill=\"#064E94\"\r\n />\r\n </svg>\r\n <h2 class=\"text-md-semi-bold heading\">{this.heading}</h2>\r\n </div>\r\n\r\n <gb-button size=\"sm\" hierarchy=\"link_color\" icon=\"default\" onClick={() => this.toggleComments()}>\r\n {this.state === 'expanded' ? <p>Hide Comments</p> : <p>Show Comments</p>}\r\n </gb-button>\r\n </div>\r\n\r\n {this.state === 'expanded' &&\r\n (hasComments ? (\r\n <div class=\"comments-wrapper\">\r\n {this.comments.map((comment, index) => (\r\n <gb-comment-item\r\n key={index}\r\n name={comment.name}\r\n duty={comment.role}\r\n comment={comment.comment}\r\n time-stamp={comment.timeStamp}\r\n connector={this.comments.length > 1 && index < this.comments.length - 1 ? true : false}\r\n />\r\n ))}\r\n </div>\r\n ) : (\r\n <div class=\"container\">\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\">\r\n <img src={illustrationSrc} alt=\"bell-icon\" class=\"bell_icon\" />\r\n <div class=\"text\">\r\n <p class=\"main-text text-lg-semi-bold\">{this.noCommentText}</p>\r\n <p class=\"sub-text text-sm-regular\">{this.noCommentTextSub}</p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n ))}\r\n </div>\r\n );\r\n }\r\n}","@import './../../global/global.css';\r\n\r\n.comment-item {\r\n display: flex;\r\n gap: 12px;\r\n align-items: flex-start;\r\n color: red;\r\n position: relative; \r\n align-items: flex-start;\r\n padding-left: var(--spacing-12);\r\n margin-bottom: -1rem;\r\n}\r\n\r\n.comment-item:not(:last-child)::before {\r\n content: '';\r\n position: absolute;\r\n left: 10px;\r\n top: 16px;\r\n width: 2px;\r\n height: 100%;\r\n background-color: #064E94;\r\n}\r\n\r\n.comment-bullet {\r\n width: 12px;\r\n height: 12px;\r\n border-radius: var(--rounded-full);\r\n background: var(--color-icon-information, #064E94);\r\n margin: 5px;\r\n}\r\n\r\n.line{\r\n background-color: #064E94;\r\n width: 0.5px;\r\n height: 4.5rem;\r\n padding: 1px;\r\n border: none;\r\n margin-top: -5px;\r\n left: 10px;\r\n top: 16px;\r\n}\r\n\r\n.left{\r\n display: flex;\r\n align-items: center;\r\n flex-direction: column;\r\n\r\n}\r\n\r\n.comment-wrapper{\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: var(--spacing-none);\r\n align-self: stretch;\r\n}\r\n\r\n\r\n.comment-content {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: var(--spacing-1);\r\n padding-bottom: var(--spacing-6);\r\n}\r\n\r\n.comments-container {\r\n padding: 16px;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: flex-start;\r\n gap: var(--spacing-4);\r\n border-radius: 12px;\r\n border: 1px solid var(--color-border-infromation-subtle, #9AC7F4);\r\n background: var(--color-background-information-subtlest, #E4F0FC);\r\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\r\n /* transition: 1s ease-in-out; */\r\n}\r\n\r\n.comment-content {\r\n flex: 1;\r\n}\r\n\r\n.reviewer-info {\r\n color: var(--color-text-information, #064E94);\r\n}\r\n\r\n.comment-text {\r\n color: var(--color-text-information, #064E94);\r\n}\r\n\r\n.timestamp {\r\n color: var(--color-text-information, #064E94);\r\n margin-bottom: 10px;\r\n}\r\n\r\n@media (max-width: 468px) {\r\n .comment-item{\r\n padding-left: var(--spacing-4);\r\n }\r\n}","import { Component, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: 'gb-comment-item',\r\n styleUrl: 'gb-comment-item.css',\r\n shadow: true\r\n})\r\n\r\nexport class GbCommentItem {\r\n @Prop() name: string = '';\r\n @Prop() duty: string = '';\r\n @Prop() comment: string = '';\r\n @Prop() timeStamp: string = '';\r\n @Prop() connector: boolean = false;\r\n\r\n displayNameAndRole() {\r\n let nameAndRole = `${this.name} (${this.duty})`;\r\n return nameAndRole\r\n }\r\n\r\n render() {\r\n return (\r\n <div class=\"comment-item\">\r\n <div class=\"left\">\r\n <div class=\"comment-bullet\"></div>\r\n {this.connector && <hr class=\"line\" />}\r\n </div>\r\n <div class=\"comment-content\">\r\n <div class=\"reviewer-info\">\r\n <p class=\"text-sm-semi-bold\">{this.displayNameAndRole()}</p>\r\n </div>\r\n <div class=\"comment-text\">\r\n <p class=\"text-sm-regular\">{this.comment}</p>\r\n </div>\r\n <div class=\"timestamp\">\r\n <p class=\"text-xs-regular\">{this.timeStamp}</p>\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n }\r\n}","@import './../../global/global.css';\r\n\r\n.export_dropdown{\r\n display: inline-flex;\r\n width: fit-content;\r\n flex-direction: column;\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 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: relative;\r\n z-index: 999;\r\n}\r\n\r\n.first_dropdown{\r\n position: absolute;\r\n top: 2rem;\r\n left: -10rem;\r\n z-index: 999;\r\n}\r\n\r\n.second_dropdown{\r\n position: absolute;\r\n top: 4rem;\r\n left: -10rem;\r\n z-index: 999;\r\n}","import { Component, Event, EventEmitter, h, Prop, State, Fragment, Element } from \"@stencil/core\";\r\nimport { StateEnum } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n tag: 'gb-export-dropdown',\r\n styleUrl: 'gb-export-dropdown.css',\r\n shadow: true,\r\n})\r\nexport class GbExportDropdown {\r\n @Prop() state: StateEnum;\r\n @Prop() showEntireData: boolean = false;\r\n @State() showFirstSubDropdown: boolean = false;\r\n @State() showSecondSubDropdown: boolean = false;\r\n @Event() exportClicked: EventEmitter<{exportType: string, dataType: string}>;\r\n @Element() el: HTMLElement;\r\n\r\n async onExportClicked(exportType: string, dataType: string) {\r\n this.exportClicked.emit({exportType, dataType});\r\n console.log({ exportType, dataType });\r\n }\r\n\r\n render() {\r\n return (\r\n <>\r\n <div class={`export_dropdown`}>\r\n <gb-export-dropdown-item\r\n type=\"pdf\"\r\n state={StateEnum.Default}\r\n onMouseOver={() => (this.showFirstSubDropdown = true)}\r\n onMouseOut={() => (this.showFirstSubDropdown = false)}\r\n ></gb-export-dropdown-item>\r\n <gb-export-dropdown-item\r\n type=\"csv\"\r\n state={StateEnum.Default}\r\n onMouseOver={() => (this.showSecondSubDropdown = true)}\r\n onMouseOut={() => (this.showSecondSubDropdown = false)}\r\n ></gb-export-dropdown-item>\r\n </div>\r\n {this.showFirstSubDropdown && (\r\n <gb-export-sub-dropdown\r\n class={`first_dropdown`}\r\n show-entire-data={this.showEntireData}\r\n onMouseOver={() => (this.showFirstSubDropdown = true)}\r\n onMouseOut={() => (this.showFirstSubDropdown = false)}\r\n >\r\n <p slot=\"label_one\" onClick={() => this.onExportClicked('pdf', 'entire_data')}>\r\n Entire Data\r\n </p>\r\n <p slot=\"label_two\" onClick={() => this.onExportClicked('pdf', 'data_on_view')}>\r\n Data on view\r\n </p>\r\n <p slot=\"label_three\" onClick={() => this.onExportClicked('pdf', 'filtered_data')}>\r\n Filtered Data\r\n </p>\r\n </gb-export-sub-dropdown>\r\n )}\r\n {this.showSecondSubDropdown && (\r\n <gb-export-sub-dropdown\r\n class={`second_dropdown`}\r\n show-entire-data={this.showEntireData}\r\n onMouseOver={() => (this.showSecondSubDropdown = true)}\r\n onMouseOut={() => (this.showSecondSubDropdown = false)}\r\n >\r\n <p slot=\"label_one\" onClick={() => this.onExportClicked('csv', 'entire_data')}>\r\n Entire Data\r\n </p>\r\n <p slot=\"label_two\" onClick={() => this.onExportClicked('csv', 'data_on_view')}>\r\n Data on view\r\n </p>\r\n <p slot=\"label_three\" onClick={() => this.onExportClicked('csv', 'filtered_data')}>\r\n Filtered Data\r\n </p>\r\n </gb-export-sub-dropdown>\r\n )}\r\n </>\r\n );\r\n }\r\n}","@import './../../global/global.css';\r\n\r\n.export_container{\r\n display: flex;\r\n width: 11rem;\r\n padding: var(--spacing-1);\r\n justify-content: center;\r\n align-items: center;\r\n gap: var(--spacing-2);\r\n border-radius: var(--rounded-none);\r\n}\r\n\r\n.export_container.disabled{\r\n cursor: not-allowed;\r\n pointer-events: none;\r\n}\r\n\r\n.content{\r\n display: flex;\r\n min-height: 2.5rem;\r\n padding: var(--spacing-none) var(--spacing-2);\r\n justify-content: space-between;\r\n align-items: center;\r\n flex: 1 0 0;\r\n border-radius: var(--rounded-xs);\r\n cursor: pointer;\r\n}\r\n\r\n.content:hover{\r\n background-color: var(--color-background-gray-subtler, #EEF2F6);\r\n}\r\n\r\n.content:active{\r\n background-color: var(--color-background-gray-subtle, #E3E8EF);\r\n}\r\n\r\n.wrapper{\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n flex: 1 0 0;\r\n}\r\n\r\n.container{\r\n display: flex;\r\n align-items: center;\r\n gap: var(--spacing-2);\r\n}\r\n\r\n.icon,\r\n.arrow{\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.pdf_svg path[stroke]{\r\n stroke: var(--color-icon-brandRed, #E21B2E);\r\n}\r\n\r\n.csv_svg path[stroke]{\r\n stroke: var(--color-icon-success, #079455);\r\n}\r\n\r\n.pdf_svg path[fill]{\r\n fill: var(--color-icon-brandRed, #E21B2E);\r\n}\r\n\r\n.csv_svg path[fill]{\r\n fill: var(--color-icon-success, #079455);\r\n}\r\n\r\n.pdf_svg.disabled path[stroke]{\r\n stroke: var(--color-icon-disabled, #CDD5DF);\r\n}\r\n\r\n.csv_svg.disabled path[stroke]{\r\n stroke: var(--color-icon-disabled, #CDD5DF);\r\n}\r\n\r\n.pdf_svg.disabled path[fill]{\r\n fill: var(--color-icon-disabled, #CDD5DF);\r\n}\r\n\r\n.csv_svg.disabled path[fill]{\r\n fill: var(--color-icon-disabled, #CDD5DF);\r\n}\r\n\r\n.text{\r\n color: var(--color-text, #4B5565);\r\n}\r\n\r\n.text.disabled{\r\n color: var(--color-text-disabled, #CDD5DF);\r\n}\r\n\r\n.arrow_svg.disabled path{\r\n stroke: var(--color-icon-disabled, #CDD5DF);\r\n}","import { Component, Element, h, Prop } from \"@stencil/core\";\r\nimport { StateEnum } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n tag: 'gb-export-dropdown-item',\r\n styleUrl: 'gb-export-dropdown-item.css',\r\n shadow: true\r\n})\r\nexport class GbExportDropdownItem {\r\n @Prop() icon: boolean = false;\r\n @Prop() state: StateEnum;\r\n @Prop() type: 'pdf' | 'csv';\r\n @Element() el: HTMLElement;\r\n\r\n render() {\r\n return (\r\n <div class={`export_container ${this.state === 'disabled' ? 'disabled' : ''}`}>\r\n <div class={`content ${this.state === 'disabled' ? 'disabled' : ''}`}>\r\n <div class={`wrapper`}>\r\n <div class={`container`}>\r\n <div class={`icon`}>\r\n {this.type === 'pdf' ? (\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\"\r\n height=\"20\"\r\n viewBox=\"0 0 20 20\"\r\n fill=\"none\"\r\n class={`pdf_svg ${this.type} ${this.state === 'disabled' ? 'disabled' : ''}`}\r\n >\r\n <path\r\n opacity=\"0.4\"\r\n d=\"M2.50117 9.15797C2.78483 8.46126 4.09165 7.08156 7.08171 7.08156C7.33288 7.08156 7.99177 6.82886 7.95767 5.45969C7.94376 4.22219 8.39482 1.77401 10.2871 1.66843C10.662 1.66663 11.0697 1.66663 11.5152 1.66663C13.0144 1.66663 13.764 1.66663 14.3627 1.87679C15.3252 2.21467 16.0844 2.92921 16.4434 3.83508C16.6667 4.39856 16.6667 5.10408 16.6667 6.51511V14.1666C16.6667 14.9411 16.6667 15.3283 16.6026 15.6503C16.3396 16.9726 15.3059 18.0062 13.9836 18.2692C13.6616 18.3333 13.2744 18.3333 12.5 18.3333H8.93939C6.22172 18.3333 4.86289 18.3333 3.91922 17.6684C3.64885 17.4779 3.40882 17.252 3.20642 16.9976C2.5 16.1094 2.5 14.8305 2.5 12.2727V10.1515C2.5 9.79565 2.5 9.46547 2.50117 9.15797Z\"\r\n fill=\"#E21B2E\"\r\n />\r\n <path\r\n d=\"M5.83333 15V12.9166M5.83333 12.9166V11.6666C5.83333 11.2738 5.83333 11.0774 5.96147 10.9553C6.08961 10.8333 6.29585 10.8333 6.70833 10.8333H7.29167C7.89573 10.8333 8.38542 11.2997 8.38542 11.875C8.38542 12.4503 7.89573 12.9166 7.29167 12.9166H5.83333ZM17.5 10.8333H16.4062C15.7188 10.8333 15.3751 10.8333 15.1615 11.0367C14.9479 11.2401 14.9479 11.5675 14.9479 12.2222V12.9166M14.9479 15V12.9166M14.9479 12.9166H16.7708M12.5 18.3333H8.93939C6.22172 18.3333 4.86289 18.3333 3.91922 17.6684C3.64885 17.4779 3.40882 17.252 3.20642 16.9976C2.5 16.1094 2.5 14.8305 2.5 12.2727V10.1515C2.5 7.68217 2.5 6.44751 2.89078 5.46142C3.51901 3.87614 4.84761 2.6257 6.53197 2.03442C7.57969 1.66663 8.89151 1.66663 11.5152 1.66663C13.0144 1.66663 13.764 1.66663 14.3627 1.87679C15.3252 2.21467 16.0844 2.92921 16.4434 3.83508C16.6667 4.39856 16.6667 5.10408 16.6667 6.51511V8.33329M2.5 9.99996C2.5 8.46584 3.74365 7.22218 5.27778 7.22218C5.8326 7.22218 6.4867 7.3194 7.02614 7.17486C7.50543 7.04643 7.8798 6.67206 8.00823 6.19276C8.15277 5.65332 8.05556 4.99922 8.05556 4.4444C8.05556 2.91028 9.29921 1.66663 10.8333 1.66663M13.125 12.9166C13.125 14.0672 12.1456 15 10.9375 15C10.6649 15 10.5286 15 10.4271 14.9441C10.184 14.8105 10.2083 14.5399 10.2083 14.3055V11.5277C10.2083 11.2933 10.184 11.0228 10.4271 10.8891C10.5286 10.8333 10.6649 10.8333 10.9375 10.8333C12.1456 10.8333 13.125 11.766 13.125 12.9166Z\"\r\n stroke=\"#E21B2E\"\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\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\"\r\n height=\"20\"\r\n viewBox=\"0 0 20 20\"\r\n fill=\"none\"\r\n class={`csv_svg ${this.type} ${this.state === 'disabled' ? 'disabled' : ''}`}\r\n >\r\n <path\r\n opacity=\"0.4\"\r\n d=\"M2.50141 9.15797C2.78507 8.46126 4.0919 7.08156 7.08195 7.08156C7.33312 7.08156 7.99201 6.82886 7.95791 5.45969C7.94401 4.22219 8.39506 1.77401 10.2873 1.66843C10.6623 1.66663 11.0699 1.66663 11.5154 1.66663C13.0146 1.66663 13.7642 1.66663 14.3629 1.87679C15.3254 2.21467 16.0846 2.92921 16.4436 3.83508C16.6669 4.39856 16.6669 5.10408 16.6669 6.51511V14.1666C16.6669 14.9411 16.6669 15.3283 16.6029 15.6503C16.3398 16.9726 15.3062 18.0062 13.9839 18.2692C13.6619 18.3333 13.2747 18.3333 12.5002 18.3333H8.93964C6.22197 18.3333 4.86313 18.3333 3.91947 17.6684C3.64909 17.4779 3.40906 17.252 3.20666 16.9976C2.50024 16.1094 2.50024 14.8305 2.50024 12.2727V10.1515C2.50024 9.79565 2.50024 9.46547 2.50141 9.15797Z\"\r\n fill=\"#079455\"\r\n />\r\n <path\r\n d=\"M7.82922 11.7147C7.84826 12.1285 8.19913 12.4485 8.6129 12.4294C9.02668 12.4104 9.34668 12.0595 9.32764 11.6458L7.82922 11.7147ZM9.32764 14.1875C9.34668 13.7737 9.02668 13.4229 8.6129 13.4038C8.19913 13.3848 7.84826 13.7048 7.82922 14.1185L9.32764 14.1875ZM18.2025 11.0961C18.3476 10.7081 18.1507 10.276 17.7628 10.1308C17.3748 9.98571 16.9427 10.1826 16.7975 10.5705L18.2025 11.0961ZM16.2804 14.0935L15.5779 13.8307L16.2804 14.0935ZM15.2442 14.0935L15.9467 13.8307L15.9467 13.8307L15.2442 14.0935ZM14.7271 10.5705C14.582 10.1826 14.1498 9.98571 13.7619 10.1308C13.3739 10.276 13.1771 10.7081 13.3222 11.0961L14.7271 10.5705ZM12.2678 11.5833C12.682 11.5833 13.0178 11.2475 13.0178 10.8333C13.0178 10.4191 12.682 10.0833 12.2678 10.0833V11.5833ZM10.5747 14.25C10.1605 14.25 9.82472 14.5857 9.82472 15C9.82472 15.4142 10.1605 15.75 10.5747 15.75V14.25ZM12.0709 14.9471L11.7841 14.2541H11.7841L12.0709 14.9471ZM12.0709 12.9695L12.3577 12.2765V12.2765L12.0709 12.9695ZM10.8439 12.8638L10.5571 13.5568H10.5571L10.8439 12.8638ZM10.8439 10.8862L10.5571 10.1932L10.8439 10.8862ZM12.5 13.943L11.75 13.9428V13.943H12.5ZM12.5 13.9736H11.75V13.9738L12.5 13.9736ZM12.5 19.0833C12.9142 19.0833 13.25 18.7475 13.25 18.3333C13.25 17.9191 12.9142 17.5833 12.5 17.5833V19.0833ZM15.9167 8.33329C15.9167 8.74751 16.2525 9.08329 16.6667 9.08329C17.0809 9.08329 17.4167 8.74751 17.4167 8.33329H15.9167ZM14.3627 1.87679L14.6111 1.16913V1.16913L14.3627 1.87679ZM16.4434 3.83508L17.1406 3.55877L16.4434 3.83508ZM2.89078 5.46142L3.58803 5.73773L2.89078 5.46142ZM6.53197 2.03442L6.78039 2.74208L6.78039 2.74208L6.53197 2.03442ZM3.91922 17.6684L3.48726 18.2815H3.48726L3.91922 17.6684ZM3.20642 16.9976L3.79339 16.5307H3.79339L3.20642 16.9976ZM1.75 9.99996C1.75 10.4142 2.08579 10.75 2.5 10.75C2.91421 10.75 3.25 10.4142 3.25 9.99996H1.75ZM5.27778 7.22218V7.97218H5.27778L5.27778 7.22218ZM8.00823 6.19276L8.73267 6.38688L8.00823 6.19276ZM7.02614 7.17486L7.22025 7.8993L7.22025 7.8993L7.02614 7.17486ZM10.8333 2.41663C11.2475 2.41663 11.5833 2.08084 11.5833 1.66663C11.5833 1.25241 11.2475 0.916626 10.8333 0.916626V2.41663ZM6.58333 13.6111V12.2222H5.08333V13.6111H6.58333ZM7.20935 11.5833C7.40441 11.5833 7.55042 11.585 7.67255 11.5962C7.79576 11.6076 7.84664 11.6251 7.86008 11.6311C7.86341 11.6326 7.85512 11.6293 7.84214 11.6181C7.82841 11.6064 7.81787 11.5931 7.81162 11.5826C7.80017 11.5633 7.82342 11.5885 7.82922 11.7147L9.32764 11.6458C9.31443 11.3586 9.25281 11.0713 9.10081 10.8158C8.94191 10.5486 8.71717 10.3715 8.47384 10.2624C8.05559 10.0749 7.54278 10.0833 7.20935 10.0833V11.5833ZM7.20935 15.75C7.54278 15.75 8.05558 15.7584 8.47384 15.5708C8.71717 15.4617 8.9419 15.2847 9.10081 15.0175C9.25281 14.7619 9.31443 14.4746 9.32764 14.1875L7.82922 14.1185C7.82342 14.2447 7.80017 14.2699 7.81162 14.2507C7.81787 14.2402 7.82841 14.2269 7.84214 14.2151C7.85512 14.204 7.86341 14.2006 7.86008 14.2021C7.84663 14.2082 7.79576 14.2257 7.67255 14.237C7.55042 14.2482 7.40441 14.25 7.20935 14.25V15.75ZM7.20935 10.0833C6.64056 10.0833 5.97423 10.1291 5.53243 10.5988C5.30662 10.8388 5.20075 11.1246 5.1472 11.3897C5.09514 11.6474 5.08333 11.9334 5.08333 12.2222H6.58333C6.58333 11.9575 6.59599 11.7932 6.6175 11.6867C6.63753 11.5876 6.65436 11.5953 6.62501 11.6265C6.59327 11.6603 6.57962 11.6457 6.66952 11.6244C6.76921 11.6007 6.93438 11.5833 7.20935 11.5833V10.0833ZM7.20935 14.25C6.93438 14.25 6.76921 14.2325 6.66952 14.2089C6.57962 14.1875 6.59327 14.173 6.62501 14.2067C6.65436 14.2379 6.63753 14.2457 6.6175 14.1465C6.59599 14.0401 6.58333 13.8758 6.58333 13.6111H5.08333C5.08333 13.8998 5.09514 14.1859 5.1472 14.4436C5.20075 14.7086 5.30662 14.9944 5.53243 15.2345C5.97423 15.7042 6.64056 15.75 7.20935 15.75V14.25ZM16.7975 10.5705L15.5779 13.8307L16.9829 14.3563L18.2025 11.0961L16.7975 10.5705ZM15.9467 13.8307L14.7271 10.5705L13.3222 11.0961L14.5418 14.3563L15.9467 13.8307ZM15.5779 13.8307C15.5206 13.9841 15.4742 14.108 15.4326 14.2123C15.3904 14.3182 15.3606 14.3847 15.3389 14.4262C15.3135 14.4749 15.3201 14.4479 15.3673 14.4025C15.3951 14.3758 15.4436 14.3363 15.515 14.3036C15.5898 14.2694 15.6746 14.2499 15.7623 14.2499V15.7499C16.0474 15.7499 16.2654 15.6199 16.4067 15.4841C16.5325 15.3632 16.6151 15.2229 16.6685 15.1205C16.7742 14.918 16.8777 14.6374 16.9829 14.3563L15.5779 13.8307ZM14.5418 14.3563C14.6469 14.6374 14.7504 14.918 14.8561 15.1205C14.9096 15.2228 14.9922 15.3632 15.118 15.4841C15.2593 15.6199 15.4772 15.7499 15.7623 15.7499V14.2499C15.8501 14.2499 15.9348 14.2694 16.0097 14.3036C16.0811 14.3363 16.1296 14.3758 16.1573 14.4025C16.2045 14.4479 16.2112 14.4749 16.1858 14.4262C16.1641 14.3847 16.1343 14.3182 16.092 14.2123C16.0505 14.108 16.0041 13.9841 15.9467 13.8307L14.5418 14.3563ZM12.2678 10.0833H11.4574V11.5833H12.2678V10.0833ZM11.4574 14.25H10.5747V15.75H11.4574V14.25ZM11.4574 15.75C11.6091 15.75 11.7604 15.7504 11.8887 15.7416C12.0238 15.7324 12.1873 15.7106 12.3577 15.6401L11.7841 14.2541C11.8268 14.2364 11.8455 14.2411 11.7867 14.2451C11.7212 14.2496 11.6296 14.25 11.4574 14.25V15.75ZM11.4574 13.6666C11.6296 13.6666 11.7212 13.667 11.7867 13.6715C11.8455 13.6755 11.8268 13.6802 11.7841 13.6625L12.3577 12.2765C12.1873 12.206 12.0238 12.1842 11.8887 12.175C11.7604 12.1662 11.6091 12.1666 11.4574 12.1666V13.6666ZM11.4574 12.1666C11.2852 12.1666 11.1936 12.1662 11.1281 12.1618C11.0693 12.1578 11.088 12.1531 11.1307 12.1708L10.5571 13.5568C10.7275 13.6273 10.891 13.6491 11.0261 13.6583C11.1544 13.667 11.3057 13.6666 11.4574 13.6666V12.1666ZM11.4574 10.0833C11.3057 10.0833 11.1544 10.0829 11.0261 10.0917C10.891 10.1009 10.7275 10.1226 10.5571 10.1932L11.1307 11.5792C11.088 11.5968 11.0693 11.5922 11.1281 11.5882C11.1936 11.5837 11.2852 11.5833 11.4574 11.5833V10.0833ZM9.66479 11.875C9.66479 12.0361 9.65694 12.3587 9.74777 12.6618C9.85618 13.0235 10.1032 13.3689 10.5571 13.5568L11.1307 12.1708C11.1226 12.1674 11.1414 12.1745 11.1638 12.2006C11.1842 12.2246 11.1877 12.2414 11.1846 12.2312C11.1805 12.2172 11.1733 12.1841 11.1691 12.1185C11.1647 12.0509 11.1648 11.9785 11.1648 11.875H9.66479ZM11.1648 11.875C11.1648 11.7714 11.1647 11.699 11.1691 11.6314C11.1733 11.5658 11.1805 11.5327 11.1846 11.5188C11.1877 11.5085 11.1842 11.5254 11.1638 11.5493C11.1414 11.5754 11.1226 11.5825 11.1307 11.5792L10.5571 10.1932C10.1032 10.381 9.85618 10.7265 9.74777 11.0882C9.65694 11.3913 9.66479 11.7138 9.66479 11.875H11.1648ZM13.25 13.9431C13.25 13.779 13.2563 13.4602 13.163 13.1583C13.0522 12.7998 12.8045 12.4614 12.3577 12.2765L11.7841 13.6625C11.7923 13.6659 11.7739 13.659 11.7518 13.6335C11.7314 13.6099 11.7273 13.5928 11.7299 13.6013C11.7337 13.6135 11.7408 13.6446 11.7452 13.7075C11.7497 13.7719 11.75 13.8428 11.75 13.9428L13.25 13.9431ZM11.75 13.9738C11.75 14.0738 11.7497 14.1446 11.7452 14.2091C11.7408 14.272 11.7337 14.3031 11.7299 14.3153C11.7273 14.3238 11.7314 14.3067 11.7518 14.2831C11.7739 14.2575 11.7923 14.2507 11.7841 14.2541L12.3577 15.6401C12.8045 15.4552 13.0522 15.1167 13.163 14.7583C13.2563 14.4564 13.25 14.1376 13.25 13.9735L11.75 13.9738ZM12.5 17.5833H8.93939V19.0833H12.5V17.5833ZM3.25 12.2727V10.1515H1.75V12.2727H3.25ZM15.9167 6.51511V8.33329H17.4167V6.51511H15.9167ZM11.5152 2.41663C13.0778 2.41663 13.6667 2.42733 14.1143 2.58446L14.6111 1.16913C13.8613 0.905919 12.9509 0.916626 11.5152 0.916626V2.41663ZM17.4167 6.51511C17.4167 5.81948 17.417 5.2615 17.3871 4.8079C17.3568 4.34761 17.2929 3.94316 17.1406 3.55877L15.7461 4.11139C15.8171 4.29048 15.8649 4.52053 15.8904 4.90662C15.9163 5.29941 15.9167 5.79971 15.9167 6.51511H17.4167ZM14.1143 2.58446C14.8827 2.8542 15.4714 3.41808 15.7461 4.11139L17.1406 3.55877C16.6974 2.44033 15.7677 1.57513 14.6111 1.16913L14.1143 2.58446ZM3.25 10.1515C3.25 8.90693 3.25038 8.00979 3.29722 7.2996C3.34362 6.59611 3.43332 6.12813 3.58803 5.73773L2.19354 5.18511C1.95747 5.7808 1.85177 6.42319 1.80047 7.20088C1.74962 7.97187 1.75 8.92671 1.75 10.1515H3.25ZM11.5152 0.916626C8.95498 0.916626 7.48237 0.905919 6.28355 1.32676L6.78039 2.74208C7.67701 2.42733 8.82804 2.41663 11.5152 2.41663V0.916626ZM3.58803 5.73773C4.13202 4.36502 5.29011 3.26523 6.78039 2.74208L6.28355 1.32676C4.40512 1.98616 2.906 3.38727 2.19354 5.18511L3.58803 5.73773ZM8.93939 17.5833C7.56444 17.5833 6.59125 17.5823 5.8418 17.5042C5.10432 17.4274 4.674 17.2828 4.35119 17.0553L3.48726 18.2815C4.10811 18.719 4.82904 18.9068 5.68631 18.9961C6.53161 19.0842 7.59668 19.0833 8.93939 19.0833V17.5833ZM1.75 12.2727C1.75 13.5334 1.74879 14.5444 1.84344 15.3489C1.94017 16.171 2.1452 16.8682 2.61944 17.4644L3.79339 16.5307C3.56122 16.2388 3.41304 15.8525 3.33316 15.1736C3.25121 14.4771 3.25 13.5697 3.25 12.2727H1.75ZM4.35119 17.0553C4.13817 16.9052 3.95058 16.7283 3.79339 16.5307L2.61944 17.4644C2.86705 17.7757 3.15953 18.0506 3.48726 18.2815L4.35119 17.0553ZM3.25 9.99996C3.25 8.88005 4.15787 7.97218 5.27778 7.97218V6.47218C3.32944 6.47218 1.75 8.05162 1.75 9.99996H3.25ZM7.28379 5.99865C7.22471 6.21912 7.0525 6.39134 6.83202 6.45041L7.22025 7.8993C7.95836 7.70152 8.5349 7.12499 8.73267 6.38688L7.28379 5.99865ZM10.8333 0.916626C8.885 0.916626 7.30556 2.49607 7.30556 4.4444H8.80556C8.80556 3.32449 9.71342 2.41663 10.8333 2.41663V0.916626ZM7.30556 4.4444C7.30556 4.60242 7.31245 4.76305 7.31929 4.91055C7.32638 5.06331 7.33339 5.20186 7.33626 5.33992C7.34208 5.62051 7.32806 5.83341 7.28379 5.99865L8.73267 6.38688C8.83294 6.01267 8.84258 5.62881 8.83593 5.30878C8.83257 5.14654 8.82431 4.98381 8.81768 4.84103C8.81081 4.69299 8.80556 4.56379 8.80556 4.4444H7.30556ZM5.27778 7.97218C5.39717 7.97218 5.52637 7.97744 5.67441 7.98431C5.81719 7.99093 5.97991 7.99919 6.14215 8.00256C6.46219 8.00921 6.84605 7.99957 7.22025 7.8993L6.83202 6.45041C6.66679 6.49469 6.45388 6.50871 6.1733 6.50288C6.03523 6.50002 5.89669 6.49301 5.74392 6.48592C5.59642 6.47908 5.4358 6.47218 5.27778 6.47218L5.27778 7.97218ZM13.25 13.9736V13.943H11.75V13.9736H13.25Z\"\r\n fill=\"#079455\"\r\n />\r\n </svg>\r\n )}\r\n </div>\r\n <div class={`text ${this.state === 'disabled' ? 'disabled' : ''}`}>{this.type === 'pdf' ? <p class=\"text-sm-medium\">Export as PDF</p> : <p class=\"text-sm-medium\">Export as CSV</p>}</div>\r\n </div>\r\n <div class=\"arrow\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" class={`arrow_svg ${this.state === 'disabled' ? 'disabled' : ''}`}>\r\n <path\r\n d=\"M6.75004 4.5C6.75004 4.5 11.25 7.8142 11.25 9.00004C11.25 10.1859 6.75 13.5 6.75 13.5\"\r\n stroke=\"#4B5565\"\r\n stroke-width=\"1.5\"\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 </div>\r\n );\r\n }\r\n}","@import './../../global/global.css';\r\n\r\n.sub_dropdown_container{\r\n display: flex;\r\n padding: var(--spacing-half) var(--spacing-none);\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n width: 10.125rem;\r\n gap: var(--spacing-none);\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}\r\n\r\n::slotted([slot=\"label_one\"]),\r\n::slotted([slot=\"label_two\"]),\r\n::slotted([slot=\"label_three\"]) {\r\n color: var(--color-text, #4B5565);\r\n}\r\n\r\n::slotted([slot=\"label\"].disabled),\r\n::slotted([slot=\"label_two\"].disabled),\r\n::slotted([slot=\"label_three\"].disabled) {\r\n color: var(--color-text-disabled, #CDD5DF);\r\n}","import { Component, Element, h, Prop } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: 'gb-export-sub-dropdown',\r\n styleUrl: 'gb-export-sub-dropdown.css',\r\n shadow: true,\r\n})\r\nexport class GbExportSubDropdown {\r\n @Prop() showEntireData: boolean = false;\r\n @Element() el: HTMLElement;\r\n\r\n componentDidLoad() {\r\n const labelOneSlot = this.el.querySelector('[slot=\"label_one\"]');\r\n const labelTwoSlot = this.el.querySelector('[slot=\"label_two\"]');\r\n const labelThreeSlot = this.el.querySelector('[slot=\"label_three\"]');\r\n\r\n if (labelOneSlot) {\r\n labelOneSlot.classList.add('text-sm-medium');\r\n labelTwoSlot.classList.add('text-sm-medium');\r\n labelThreeSlot.classList.add('text-sm-medium');\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <div class={`sub_dropdown_container`}>\r\n {this.showEntireData && (\r\n <gb-export-sub-dropdown-item icon=\"assets/database.svg\">\r\n <slot name=\"label_one\" slot=\"label\"></slot>\r\n </gb-export-sub-dropdown-item>\r\n )}\r\n <gb-export-sub-dropdown-item icon=\"assets/laptop_gray.svg\">\r\n <slot name=\"label_two\" slot=\"label\"></slot>\r\n </gb-export-sub-dropdown-item>\r\n <gb-export-sub-dropdown-item icon=\"assets/filter-horizontal.svg\">\r\n <slot name=\"label_three\" slot=\"label\"></slot>\r\n </gb-export-sub-dropdown-item>\r\n </div>\r\n );\r\n }\r\n}","@import './../../global/global.css';\r\n\r\n:host{\r\n width: 100%;\r\n}\r\n\r\n.sub_dropdown_div{\r\n display: flex;\r\n padding: var(--spacing-1);\r\n align-items: center;\r\n}\r\n\r\n.sub_dropdown_div.disabled{\r\n cursor: not-allowed;\r\n pointer-events: none;\r\n}\r\n\r\n.content{\r\n display: flex;\r\n width: 100%;\r\n padding: var(--spacing-2);\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n gap: var(--spacing-2);\r\n flex: 1 0 0;\r\n border-radius: var(--rounded-xs);\r\n cursor: pointer;\r\n}\r\n\r\n.content:hover{\r\n background-color: var(--color-background-gray-subtler, #EEF2F6);\r\n}\r\n\r\n.content:active{\r\n background-color: var(--color-background-gray-subtle, #E3E8EF);\r\n}\r\n\r\n.icon{\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.text_and_suppporting_text{\r\n display: flex;\r\n align-items: center;\r\n gap: var(--spacing-2);\r\n align-self: stretch;\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\"].disabled) {\r\n color: var(--color-text-disabled, #CDD5DF);\r\n}","import { Component, Element, getAssetPath, h, Prop, State } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: 'gb-export-sub-dropdown-item',\r\n styleUrl: 'gb-export-sub-dropdown-item.css',\r\n shadow: true,\r\n})\r\nexport class GbExportSubDropdownItem {\r\n @Prop() icon: string = '';\r\n @Prop() state: 'default' | 'disabled';\r\n @State() leadingIconSvg: string = '';\r\n @Element() el: HTMLElement;\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 componentDidLoad() {\r\n const labelSlot = this.el.querySelector('[slot=\"label\"]');\r\n\r\n if (labelSlot) {\r\n if (this.state === 'disabled') {\r\n labelSlot.classList.add('disabled');\r\n }\r\n\r\n labelSlot.classList.add('text-sm-medium');\r\n }\r\n\r\n this.loadIcon(this.icon)\r\n }\r\n\r\n render() {\r\n return (\r\n <div class={`sub_dropdown_div ${this.state === 'disabled' ? 'disabled' : ''}`}>\r\n <div class={`content`}>\r\n <div class={`text_and_suppporting_text`}>\r\n <div class={`icon ${this.state}`} innerHTML={this.leadingIconSvg}></div>\r\n <div class={`text`}>\r\n <slot name=\"label\"></slot>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n }\r\n}","@import '../../global/global.css';\r\n\r\n.filter_button_div{\r\n width: fit-content;\r\n position: relative;\r\n}\r\n\r\n.badge.applied{\r\n position: absolute;\r\n top: 0.5rem;\r\n right: -0.8rem;\r\n}","import { Component, Element, Prop, h } from '@stencil/core';\r\nimport { StateType } from '../../models/reusableModels';\r\n\r\n@Component({\r\n tag: 'gb-filter-button',\r\n styleUrl: 'gb-filter-button.css',\r\n shadow: true,\r\n})\r\nexport class GbFilterButton {\r\n @Prop() state: StateType;\r\n @Prop() iconOnly: boolean = false;\r\n @Element() el: HTMLElement;\r\n\r\n componentDidLoad() {\r\n const countSlot = this.el.querySelector('[slot=\"filter_count\"]');\r\n\r\n if(countSlot) {\r\n countSlot.classList.add('text-xs-medium');\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <div class={`filter_button_div`}>\r\n <gb-button\r\n size=\"md\"\r\n state=\"default\"\r\n hierarchy=\"secondary_gray\"\r\n icon={this.iconOnly ? 'only' : 'default'}\r\n icon-leading={true}\r\n icon-leading-swap=\"assets/filter-horizontal-stroke.svg\"\r\n >\r\n <p>Filter</p>\r\n </gb-button>\r\n {this.state === 'applied' && (\r\n <gb-badge size=\"sm\" type=\"pill_color\" color=\"error\" icon=\"false\" class={`badge ${this.state}`}>\r\n <slot name=\"filter_count\"></slot>\r\n </gb-badge>\r\n )}\r\n </div>\r\n );\r\n }\r\n}\r\n","@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.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 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::slotted([slot='name']) {\r\n font-size: var(--Font-Size-T-md, 16px);\r\n font-weight: var(--Font-Weight-Medium, 500);\r\n line-height: var(--Font-Line-height-T-md, 24px); /* 150% */\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\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, .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, .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\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}","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 = true;\r\n @Prop() iconSwap?: string;\r\n @Prop({ mutable: true }) showCloseButton?: boolean = false;\r\n @Prop({ mutable: true }) options: string[] = [\r\n // 'USD', '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 @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 @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({ option: this.selectedItem, value: 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 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 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\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.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-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 ref={el => (this.inputRef = el as HTMLInputElement)}\r\n />\r\n <>\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-md-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-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 {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-md-regular\" style={{ color: 'var(--color-text, #4B5565)' }}>\r\n $\r\n </p>\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 onBlur={() => this.runValidation()}\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={`trailing_dropdown_dropdown`} onClick={() => (this.showDropdown = !this.showDropdown)}>\r\n <div class={`dropdown_text`}>\r\n <p class=\"text-md-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-md-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-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 onBlur={() => this.runValidation()}\r\n />\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-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.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-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 ref={el => (this.inputRef = el as HTMLInputElement)}\r\n value={this.value}\r\n onBlur={() => this.runValidation()}\r\n />\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 <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-md-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.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-md-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.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-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 {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-md-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.table_header_div {\r\n display: flex;\r\n width: 100%;\r\n height: fit-content;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: 1.25rem;\r\n flex-shrink: 0;\r\n background: var(--color-background-card, #ffffff);\r\n}\r\n\r\n.table_header_content {\r\n display: flex;\r\n padding: var(--spacing-5) var(--spacing-6);\r\n justify-content: space-between;\r\n align-items: center;\r\n gap: var(--spacing-5);\r\n align-self: stretch;\r\n border-bottom: 1px solid var(--color-border-subtle, #cdd5df);\r\n}\r\n\r\n.actions {\r\n display: flex;\r\n max-width: 50.25rem;\r\n justify-content: flex-end;\r\n align-items: center;\r\n gap: var(--spacing-4);\r\n flex: 1 0 0;\r\n}\r\n\r\n.input_field{\r\n flex-grow: 1;\r\n width: 100%;\r\n}\r\n\r\n.action {\r\n display: flex;\r\n padding: 0rem 0rem 0rem var(--spacing-none);\r\n justify-content: flex-end;\r\n align-items: center;\r\n gap: var(--spacing-4);\r\n}\r\n\r\n.export{\r\n position: relative;\r\n}\r\n\r\n.dropdown{\r\n position: absolute;\r\n top: 100%;\r\n right: 0;\r\n}\r\n\r\n.refresh_button{\r\n width: 2.5rem;\r\n}\r\n\r\n/* Breakpoints (Responsiveness) */\r\n/* Mobile */\r\n@media (max-width: 700px) {\r\n .table_header_content{\r\n flex-direction: column;\r\n align-items: flex-start;\r\n }\r\n\r\n .actions{\r\n flex-direction: column;\r\n width: 100%;\r\n align-items: flex-start;\r\n }\r\n}","import { Component, Event, EventEmitter, Prop, State, h } from '@stencil/core';\r\nimport { StateType } from '../../models/reusableModels';\r\n\r\n@Component({\r\n tag: 'gb-table-header',\r\n styleUrl: 'gb-table-header.css',\r\n shadow: true,\r\n})\r\nexport class GbTableHeader {\r\n @Prop() showFilter: boolean = false;\r\n @Prop() showColumnOptions: boolean = false;\r\n @Prop() tableHeading: boolean = true;\r\n @Prop() showSearch: boolean = false;\r\n @Prop() showExport: boolean = false;\r\n @Prop() showRefreshButton: boolean = false;\r\n @Prop() tableHeadingLabel: string = '';\r\n @Prop() showLayoutToggle: boolean = false;\r\n @Prop() filterState: StateType;\r\n @Prop() filterCount: number = 0;\r\n @Prop() showEntireData: boolean = false;\r\n @State() items = [\r\n { label: 'grid', current: false, icon: 'assets/grid-view.svg' },\r\n { label: 'list', current: true, icon: 'assets/left-to-right-list-dash.svg' },\r\n ];\r\n @State() width: number = window.innerWidth;\r\n @State() buttonIcon: 'default' | 'only';\r\n @State() showExportDropdown: boolean = false;\r\n @Event() inputValueChanged: EventEmitter<void>;\r\n @Event() filterButtonClicked: EventEmitter<void>;\r\n @Event() exportClicked: EventEmitter<void>;\r\n @Event() refreshButtonClicked: EventEmitter<void>;\r\n @Event() layoutButtonClicked: EventEmitter<string>;\r\n\r\n componentWillLoad() {\r\n this.updateButtonIcon(); // Set initial variant\r\n window.addEventListener('resize', this.handleResize);\r\n }\r\n\r\n toggleDropdown() {\r\n this.showExportDropdown = !this.showExportDropdown;\r\n }\r\n\r\n private handleResize = () => {\r\n this.width = window.innerWidth;\r\n this.updateButtonIcon();\r\n };\r\n\r\n private updateButtonIcon() {\r\n this.buttonIcon = this.width < 1007 ? 'only' : 'default';\r\n }\r\n\r\n emitValue(inputValue) {\r\n this.inputValueChanged.emit(inputValue);\r\n }\r\n\r\n onFilterButtonClicked() {\r\n this.filterButtonClicked.emit();\r\n }\r\n\r\n emitSelection(selection) {\r\n this.exportClicked.emit(selection);\r\n }\r\n\r\n onRefreshButtonClicked() {\r\n this.refreshButtonClicked.emit();\r\n }\r\n\r\n onLayoutButtonClicked(layout) {\r\n // console.log(layout.detail)\r\n this.layoutButtonClicked.emit(layout.detail);\r\n }\r\n\r\n render() {\r\n return (\r\n <div class=\"table_header_div\">\r\n <div class=\"table_header_content\">\r\n {this.tableHeading && <p class=\"text-lg-semi-bold\">{this.tableHeadingLabel}</p>}\r\n <div class=\"actions\">\r\n {this.showSearch && (\r\n <div class=\"input_field\">\r\n <gb-input-field\r\n size=\"sm\"\r\n type=\"icon_leading\"\r\n icon-swap=\"assets/search-01.svg\"\r\n placeholder=\"Search\"\r\n onInputValueChanged={this.emitValue.bind(this)}\r\n ></gb-input-field>\r\n </div>\r\n )}\r\n <div class=\"action\">\r\n {this.showLayoutToggle && <gb-button-group items={this.items} icon=\"only\" onValueChange={this.onLayoutButtonClicked.bind(this)}></gb-button-group>}\r\n {this.showColumnOptions && (\r\n <gb-button size=\"md\" hierarchy=\"secondary_gray\" icon={this.width <= 1007 ? 'only' : 'default'} icon-leading={true} icon-leading-swap=\"assets/column-insert.svg\">\r\n <p>Columns</p>\r\n </gb-button>\r\n )}\r\n {this.showFilter && (\r\n <gb-filter-button state={this.filterState} icon-only={this.width <= 1007 ? true : false} onClick={() => this.onFilterButtonClicked()}>\r\n <p slot=\"filter_count\">{this.filterCount}</p>\r\n </gb-filter-button>\r\n )}\r\n {this.showExport && (\r\n <div class=\"export\">\r\n <gb-button\r\n size=\"md\"\r\n hierarchy=\"secondary_gray\"\r\n icon={this.width <= 1007 ? 'only' : 'default'}\r\n icon-leading={true}\r\n icon-leading-swap=\"assets/file-export.svg\"\r\n icon-trailing={this.width <= 1007 ? false : true}\r\n icon-trailing-swap=\"assets/arrow-down-01.svg\"\r\n onClick={() => this.toggleDropdown()}\r\n >\r\n <p>Export</p>\r\n </gb-button>\r\n {this.showExportDropdown && (\r\n <gb-export-dropdown show-entire-data={this.showEntireData} onExportClicked={() => this.emitSelection.bind(this)} class=\"dropdown\"></gb-export-dropdown>\r\n )}\r\n </div>\r\n )}\r\n {this.showRefreshButton && (\r\n <div class=\"refresh_button\">\r\n <gb-button\r\n size=\"md\"\r\n hierarchy=\"secondary_gray\"\r\n icon={this.width <= 1007 ? 'only' : 'default'}\r\n icon-leading={true}\r\n icon-leading-swap=\"assets/refresh.svg\"\r\n onClick={() => this.onRefreshButtonClicked()}\r\n ></gb-button>\r\n </div>\r\n )}\r\n </div>\r\n </div>\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 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.toast_div{\r\n display: flex;\r\n align-items: center;\r\n gap: var(--spacing-4);\r\n position: relative;\r\n}\r\n\r\n/* Toast Size Styles */\r\n.toast_div.floating{\r\n border-radius: var(--rounded-md);\r\n box-shadow: var(--shadow-xs);\r\n padding: var(--spacing-3) var(--spacing-4);\r\n}\r\n\r\n.container.desktop{\r\n display: flex;\r\n padding: 0.75rem 2rem;\r\n}\r\n\r\n.container.mobile{\r\n display: flex;\r\n padding: var(--spacing-3) var(--spacing-4);\r\n align-items: center;\r\n gap: var(--spacing-3);\r\n}\r\n\r\n.full_width_content.desktop{\r\n display: flex;\r\n align-items: center;\r\n gap: 0.75rem;\r\n flex: 1 0 0;\r\n}\r\n\r\n.full_width_content.mobile{\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.75rem;\r\n}\r\n\r\n.inner_content.desktop{\r\n display: flex;\r\n align-items: center;\r\n gap: var(--spacing-4);\r\n flex-grow: 1;\r\n}\r\n\r\n.inner_content.mobile{\r\n display: flex;\r\n align-items: center;\r\n gap: var(--spacing-4);\r\n flex-grow: 1;\r\n}\r\n\r\n.icon_container{\r\n width: fit-content;\r\n display: flex;\r\n align-self: stretch;\r\n}\r\n\r\n.content{\r\n display: flex;\r\n flex-grow: 1;\r\n max-width: 43.75rem;\r\n flex-wrap: wrap;\r\n}\r\n\r\n.content.floating{\r\n flex-direction: column;\r\n gap: var(--spacing-3);\r\n}\r\n\r\n.content.full_width{\r\n flex-direction: row;\r\n justify-content: space-between;\r\n gap: var(--spacing-3);\r\n}\r\n\r\n.content.actions{\r\n flex-direction: row;\r\n justify-content: space-between;\r\n align-items: center;\r\n}\r\n\r\n.text.floating{\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--spacing-2);\r\n}\r\n\r\n.text.full_width{\r\n display: flex;\r\n gap: 0.38rem;\r\n align-items: center;\r\n}\r\n\r\n.text.mobile{\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n}\r\n\r\n.actions{\r\n display: flex;\r\n gap: var(--spacing-5);\r\n}\r\n\r\n.actions.floating{\r\n width: 100%;\r\n}\r\n\r\n.actions.full_width{\r\n width: fit-content;\r\n}\r\n\r\n.actions.only_actions{\r\n width: fit-content;\r\n}\r\n\r\n.actions.mobile{\r\n margin-left: 2.8rem;\r\n}\r\n\r\n.close_button.floating{\r\n position: absolute;\r\n top: 0.5rem;\r\n right: 0.5rem;\r\n}\r\n\r\n.close_button.mobile{\r\n position: absolute;\r\n top: 0.5rem;\r\n right: 0.5rem;\r\n}\r\n\r\n/* Toast Color Styles */\r\n.toast_div.floating.default{\r\n border: 1px solid var(--color-border-subtler, #E3E8EF);\r\n background: var(--color-background-card, #FFFFFF);\r\n}\r\n\r\n.toast_div.floating.gray{\r\n border: 1px solid var(--color-border-subtle, #CDD5DF);\r\n background: var(--color-background-gray-subtlest, #F6F8FA);\r\n}\r\n\r\n.toast_div.floating.information{\r\n border: 1px solid var(--color-border-infromation-subtle, #9AC7F4);\r\n background: var(--color-background-information-subtlest, #E4F0FC);\r\n}\r\n\r\n.toast_div.floating.error{\r\n border: 1px solid var(--color-border-danger-subtle, #F9B4BA);\r\n background: var(--color-background-danger-subtlest, #FEF1F2);\r\n}\r\n\r\n.toast_div.floating.warning{\r\n border: 1px solid var(--color-border-warning-subtle, #FEDF89);\r\n background: var(--color-background-warning-subtlest, #FFFAEB);\r\n}\r\n\r\n.toast_div.floating.success{\r\n border: 1px solid var(--color-border-success-subtle, #A9EFC5);\r\n background: var(--color-background-success-subtlest, #ECFDF3);\r\n}\r\n\r\n.toast_div.full_width.default{\r\n border-top: 1px solid var(--color-border-subtler, #E3E8EF);\r\n border-bottom: 1px solid var(--color-border-subtler, #E3E8EF);\r\n background: var(--color-background-card, #FFFFFF);\r\n}\r\n\r\n.toast_div.full_width.gray{\r\n border-top: 1px solid var(--color-border-subtle, #CDD5DF);\r\n border-bottom: 1px solid var(--color-border-subtle, #CDD5DF);\r\n background: var(--color-background-gray-subtlest, #F6F8FA);\r\n}\r\n\r\n.toast_div.full_width.information{\r\n border-top: 1px solid var(--color-border-infromation-subtle, #9AC7F4);\r\n border-bottom: 1px solid var(--color-border-infromation-subtle, #9AC7F4);\r\n background: var(--color-background-information-subtlest, #E4F0FC);\r\n}\r\n\r\n.toast_div.full_width.error{\r\n border-top: 1px solid var(--color-border-danger-subtle, #F9B4BA);\r\n border-bottom: 1px solid var(--color-border-danger-subtle, #F9B4BA);\r\n background: var(--color-background-danger-subtlest, #FEF1F2);\r\n}\r\n\r\n.toast_div.full_width.warning{\r\n border-top: 1px solid var(--color-border-warning-subtle, #FEDF89);\r\n border-bottom: 1px solid var(--color-border-warning-subtle, #FEDF89);\r\n background: var(--color-background-warning-subtlest, #FFFAEB);\r\n}\r\n\r\n.toast_div.full_width.success{\r\n border-top: 1px solid var(--color-border-success-subtle, #A9EFC5);\r\n border-bottom: 1px solid var(--color-border-success-subtle, #A9EFC5);\r\n background: var(--color-background-success-subtlest, #ECFDF3);\r\n}\r\n\r\n.svg_icon.default path,\r\n.svg_icon.gray path{\r\n fill: var(--color-icon, #4B5565);\r\n}\r\n\r\n.svg_icon.information path{\r\n fill: var(--color-icon-information, #064E94);\r\n}\r\n\r\n.svg_icon.error path{\r\n fill: var(--color-icon-danger, #B51726);\r\n}\r\n\r\n.svg_icon.warning path{\r\n fill: var(--color-icon-warning, #DC6803);\r\n}\r\n\r\n.svg_icon.success path{\r\n fill: var(--color-icon-success, #079455);\r\n}\r\n\r\n.main_text_default,\r\n.main_text_gray{\r\n color: var(--color-text, #4B5565);\r\n}\r\n\r\n.main_text_information{\r\n color: var(--color-text-information, #064E94);\r\n}\r\n\r\n.main_text_error{\r\n color: var(--color-text-danger, #B51726);\r\n}\r\n\r\n.main_text_warning{\r\n color: var(--color-text-warning, #DC6803);\r\n}\r\n\r\n.main_text_success{\r\n color: var(--color-text-success, #079455);\r\n}\r\n\r\n.supporting_text_default,\r\n.supporting_text_gray{\r\n color: var(--color-text-subtle, #697586);\r\n}\r\n\r\n.supporting_text_information{\r\n color: var(--color-text-information-subtle, #075DB2);\r\n}\r\n\r\n.supporting_text_error{\r\n color: var(--color-text-danger-subtle, #CC1A2A);\r\n}\r\n\r\n.supporting_text_warning{\r\n color: var(--color-text-warning-subtle, #F79009);\r\n}\r\n\r\n.supporting_text_success{\r\n color: var(--color-text-success-subtle, #17B26A);\r\n}\r\n\r\n.toast_div.full_width.desktop{\r\n display: flex;\r\n justify-content: center;\r\n}","import { Component, Prop, h, Fragment, Element, Event, EventEmitter, State, Watch } from '@stencil/core';\r\nimport { BreakPoints, GeneralColors, StateEnum } from '../../models/reusableModels';\r\n\r\n@Component({\r\n tag: 'gb-toast',\r\n styleUrl: 'gb-toast.css',\r\n shadow: true,\r\n})\r\nexport class GbToast {\r\n @Prop({ mutable: true }) color: GeneralColors;\r\n @Prop() mainText: string = '';\r\n @Prop() supportingText: string = '';\r\n @Prop() size: 'floating' | 'full_width';\r\n @Prop() breakpoint: BreakPoints;\r\n @Prop() icon: string = '';\r\n @Prop() xCloseButton: boolean = false;\r\n @Prop() actions: boolean = false;\r\n @Prop() showSupportingText: boolean = false;\r\n @State() internalColor: GeneralColors;\r\n @Element() el: HTMLElement;\r\n @Event() dismiss: EventEmitter<void>;\r\n @Event() viewChanges: EventEmitter<void>;\r\n @Event() close: EventEmitter<void>;\r\n\r\n @Watch('color')\r\n onColorChange(newValue: GeneralColors, _oldValue: GeneralColors) {\r\n this.internalColor = newValue;\r\n }\r\n\r\n componentWillLoad() {\r\n this.internalColor = this.color;\r\n }\r\n\r\n closeToast() {\r\n this.close.emit();\r\n }\r\n\r\n // componentDidLoad() {\r\n // setTimeout(() => {\r\n // // debugger\r\n // this.color = 'success';\r\n // }, 5000);\r\n // }\r\n\r\n render() {\r\n return (\r\n <div class={`toast_div ${this.internalColor} ${this.size} ${this.breakpoint}`}>\r\n {this.size === 'floating' && (\r\n <>\r\n <div class={`icon_container`}>\r\n {this.internalColor === 'success' ? (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"28\" height=\"29\" viewBox=\"0 0 28 29\" fill=\"none\" class={`svg_icon ${this.internalColor}`}>\r\n <path\r\n opacity=\"0.4\"\r\n d=\"M14.0666 2.24988H14.0665H13.9331H13.9331C11.3773 2.24986 9.36985 2.24985 7.80253 2.46057C6.19643 2.67651 4.92213 3.12805 3.9209 4.12928C2.91967 5.13051 2.46813 6.40481 2.2522 8.01091C2.04148 9.57822 2.04149 11.5857 2.0415 14.1415V14.1415V14.2749V14.2749C2.04149 16.8307 2.04148 18.8382 2.2522 20.4055C2.46813 22.0116 2.91967 23.2859 3.9209 24.2871C4.92213 25.2884 6.19643 25.7399 7.80253 25.9559C9.36985 26.1666 11.3773 26.1666 13.9331 26.1665H14.0665C16.6223 26.1666 18.6298 26.1666 20.1971 25.9559C21.8032 25.7399 23.0775 25.2884 24.0788 24.2871C25.08 23.2859 25.5315 22.0116 25.7475 20.4055C25.9582 18.8382 25.9582 16.8308 25.9582 14.2749V14.1415C25.9582 11.5857 25.9582 9.57822 25.7475 8.01091C25.5315 6.40481 25.08 5.13051 24.0788 4.12928C23.0775 3.12805 21.8032 2.67651 20.1971 2.46057C18.6298 2.24985 16.6224 2.24986 14.0666 2.24988Z\"\r\n fill=\"#079455\"\r\n />\r\n <path\r\n d=\"M19.2265 11.1487C19.7918 10.8396 19.9995 10.1307 19.6903 9.56536C19.3811 9.00004 18.6722 8.79238 18.1069 9.10154C15.9735 10.2683 14.2094 12.5199 13.0232 14.3362C12.5849 15.0074 12.2104 15.6429 11.9108 16.1812C11.6313 15.9101 11.3545 15.6747 11.1069 15.479C10.783 15.2228 10.4915 15.0208 10.2789 14.8816L9.91136 14.6534C9.35166 14.3342 8.63915 14.5291 8.31994 15.0888C8.0008 15.6484 8.19559 16.3607 8.75499 16.68L9.00033 16.8335C9.16695 16.9426 9.40042 17.1043 9.6598 17.3093C10.1936 17.7314 10.7696 18.2846 11.1321 18.8907C11.3546 19.2626 11.7649 19.4806 12.1977 19.4567C12.6303 19.4328 13.0142 19.1708 13.1944 18.7769L13.309 18.5372C13.388 18.3756 13.5063 18.1396 13.6603 17.8487C13.9689 17.2657 14.4176 16.4684 14.9769 15.612C16.1241 13.8554 17.6266 12.0237 19.2265 11.1487Z\"\r\n fill=\"#079455\"\r\n />\r\n </svg>\r\n ) : this.color === 'error' ? (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"28\" height=\"29\" viewBox=\"0 0 28 29\" fill=\"none\" class={`svg_icon ${this.internalColor}`}>\r\n <path\r\n opacity=\"0.4\"\r\n d=\"M14.0665 2.49945C16.6224 2.49944 18.6298 2.49942 20.1971 2.71014C21.8032 2.92608 23.0775 3.37762 24.0788 4.37885C25.08 5.38008 25.5315 6.65438 25.7475 8.26048C25.9582 9.82779 25.9582 11.8352 25.9582 14.391V14.3911V14.5245V14.5245C25.9582 17.0803 25.9582 19.0878 25.7475 20.6551C25.5315 22.2612 25.08 23.5355 24.0788 24.5367C23.0775 25.538 21.8032 25.9895 20.1971 26.2054C18.6298 26.4161 16.6224 26.4161 14.0666 26.4161H14.0665H13.9331H13.9331C11.3773 26.4161 9.36984 26.4161 7.80253 26.2054C6.19643 25.9895 4.92213 25.538 3.9209 24.5367C2.91967 23.5355 2.46813 22.2612 2.2522 20.6551C2.04148 19.0878 2.04149 17.0803 2.0415 14.5245V14.3911C2.04149 11.8353 2.04148 9.8278 2.2522 8.26048C2.46813 6.65438 2.91967 5.38008 3.9209 4.37885C4.92213 3.37762 6.19643 2.92608 7.80253 2.71014C9.36985 2.49942 11.3773 2.49944 13.9331 2.49945H14.0665Z\"\r\n fill=\"#B51726\"\r\n />\r\n <path\r\n fill-rule=\"evenodd\"\r\n clip-rule=\"evenodd\"\r\n d=\"M12.8335 19.7075C12.8335 19.0632 13.3535 18.5409 13.9949 18.5409H14.0054C14.6468 18.5409 15.1668 19.0632 15.1668 19.7075C15.1668 20.3519 14.6468 20.8742 14.0054 20.8742H13.9949C13.3535 20.8742 12.8335 20.3519 12.8335 19.7075Z\"\r\n fill=\"#B51726\"\r\n />\r\n <path\r\n fill-rule=\"evenodd\"\r\n clip-rule=\"evenodd\"\r\n d=\"M14.0003 16.2075C13.356 16.2075 12.8336 15.6852 12.8336 15.0409L12.8336 10.3742C12.8336 9.72985 13.356 9.20752 14.0003 9.20752C14.6446 9.20752 15.167 9.72985 15.167 10.3742L15.167 15.0409C15.167 15.6852 14.6446 16.2075 14.0003 16.2075Z\"\r\n fill=\"#B51726\"\r\n />\r\n </svg>\r\n ) : (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"28\" height=\"28\" viewBox=\"0 0 28 28\" fill=\"none\" class={`svg_icon ${this.internalColor}`}>\r\n <path\r\n opacity=\"0.4\"\r\n d=\"M14.0667 2.04163C16.6225 2.04161 18.63 2.0416 20.1973 2.25232C21.8034 2.46825 23.0777 2.91979 24.079 3.92102C25.0802 4.92226 25.5317 6.19655 25.7477 7.80265C25.9584 9.36996 25.9584 11.3774 25.9584 13.9332V13.9333V14.0667V14.0667C25.9584 16.6225 25.9584 18.63 25.7477 20.1973C25.5317 21.8034 25.0802 23.0777 24.079 24.0789C23.0777 25.0801 21.8034 25.5317 20.1973 25.7476C18.63 25.9583 16.6226 25.9583 14.0668 25.9583H14.0667H13.9333H13.9333C11.3775 25.9583 9.37003 25.9583 7.80271 25.7476C6.19661 25.5317 4.92232 25.0801 3.92109 24.0789C2.91985 23.0777 2.46831 21.8034 2.25238 20.1973C2.04166 18.6299 2.04167 16.6225 2.04169 14.0667V13.9333C2.04167 11.3774 2.04166 9.36997 2.25238 7.80265C2.46831 6.19655 2.91985 4.92226 3.92109 3.92102C4.92232 2.91979 6.19661 2.46825 7.80271 2.25232C9.37003 2.0416 11.3775 2.04161 13.9333 2.04163H14.0667Z\"\r\n fill=\"#4B5565\"\r\n />\r\n <path\r\n fill-rule=\"evenodd\"\r\n clip-rule=\"evenodd\"\r\n d=\"M13.6289 12.2818C13.9171 12.3206 14.3158 12.4243 14.6541 12.7626C14.9924 13.101 15.0962 13.4997 15.1349 13.7879C15.167 14.0266 15.1669 14.3043 15.1667 14.5375C15.1667 14.553 15.1667 14.5683 15.1667 14.5834V19.2501C15.1667 19.8944 14.6444 20.4167 14 20.4167C13.3557 20.4167 12.8334 19.8944 12.8334 19.2501V14.5834C12.189 14.5834 11.6667 14.0611 11.6667 13.4167C11.6667 12.7724 12.189 12.2501 12.8334 12.2501C12.8485 12.2501 12.8638 12.2501 12.8793 12.2501C13.1125 12.2499 13.3901 12.2497 13.6289 12.2818Z\"\r\n fill=\"#4B5565\"\r\n />\r\n <path\r\n fill-rule=\"evenodd\"\r\n clip-rule=\"evenodd\"\r\n d=\"M12.8333 8.75004C12.8333 8.10571 13.3533 7.58337 13.9947 7.58337H14.0051C14.6466 7.58337 15.1666 8.10571 15.1666 8.75004C15.1666 9.39437 14.6466 9.91671 14.0051 9.91671H13.9947C13.3533 9.91671 12.8333 9.39437 12.8333 8.75004Z\"\r\n fill=\"#4B5565\"\r\n />\r\n </svg>\r\n )}\r\n </div>\r\n <div class={`content ${this.size} ${this.actions ? ' actions' : ''}`}>\r\n <div class={`text ${this.size}`}>\r\n <p class={`text-sm-semi-bold main_text_${this.internalColor}`}>{this.mainText}</p>\r\n {this.showSupportingText && <p class={`text-xs-regular supporting_text_${this.internalColor}`}>{this.supportingText}</p>}\r\n </div>\r\n {this.actions && (\r\n <div class={`actions ${this.size} ${!this.showSupportingText ? 'only_actions' : ''}`}>\r\n {this.color === 'default' ? (\r\n <>\r\n <gb-button size=\"sm\" icon=\"default\" state=\"default\" hierarchy=\"link_gray\">\r\n <p>Dismiss</p>\r\n </gb-button>\r\n <gb-button size=\"sm\" icon=\"default\" state=\"default\" hierarchy=\"link_color\">\r\n <p>View changes</p>\r\n </gb-button>\r\n </>\r\n ) : (\r\n <>\r\n <gb-toast-button state={StateEnum.Default} color={this.internalColor}>\r\n <p>Dismiss</p>\r\n </gb-toast-button>\r\n <gb-toast-button state={StateEnum.Default} color={this.internalColor}>\r\n <p>View changes</p>\r\n </gb-toast-button>\r\n </>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n <gb-button-close\r\n size=\"sm\"\r\n color={this.internalColor === 'default' ? 'gray' : this.internalColor === 'gray' ? 'gray' : this.internalColor}\r\n class={`close_button ${this.size}`}\r\n onClick={() => this.closeToast()}\r\n ></gb-button-close>\r\n </>\r\n )}\r\n {this.size === 'full_width' && (\r\n <div class={`container ${this.breakpoint}`}>\r\n <div class={`full_width_content ${this.breakpoint}`}>\r\n <div class={`inner_content ${this.breakpoint}`}>\r\n <div class={`icon_container`}>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"28\" height=\"28\" viewBox=\"0 0 28 28\" fill=\"none\" class={`svg_icon ${this.internalColor}`}>\r\n <path\r\n opacity=\"0.4\"\r\n d=\"M14.0667 2.04163C16.6225 2.04161 18.63 2.0416 20.1973 2.25232C21.8034 2.46825 23.0777 2.91979 24.079 3.92102C25.0802 4.92226 25.5317 6.19655 25.7477 7.80265C25.9584 9.36996 25.9584 11.3774 25.9584 13.9332V13.9333V14.0667V14.0667C25.9584 16.6225 25.9584 18.63 25.7477 20.1973C25.5317 21.8034 25.0802 23.0777 24.079 24.0789C23.0777 25.0801 21.8034 25.5317 20.1973 25.7476C18.63 25.9583 16.6226 25.9583 14.0668 25.9583H14.0667H13.9333H13.9333C11.3775 25.9583 9.37003 25.9583 7.80271 25.7476C6.19661 25.5317 4.92232 25.0801 3.92109 24.0789C2.91985 23.0777 2.46831 21.8034 2.25238 20.1973C2.04166 18.6299 2.04167 16.6225 2.04169 14.0667V13.9333C2.04167 11.3774 2.04166 9.36997 2.25238 7.80265C2.46831 6.19655 2.91985 4.92226 3.92109 3.92102C4.92232 2.91979 6.19661 2.46825 7.80271 2.25232C9.37003 2.0416 11.3775 2.04161 13.9333 2.04163H14.0667Z\"\r\n fill=\"#4B5565\"\r\n />\r\n <path\r\n fill-rule=\"evenodd\"\r\n clip-rule=\"evenodd\"\r\n d=\"M13.6289 12.2818C13.9171 12.3206 14.3158 12.4243 14.6541 12.7626C14.9924 13.101 15.0962 13.4997 15.1349 13.7879C15.167 14.0266 15.1669 14.3043 15.1667 14.5375C15.1667 14.553 15.1667 14.5683 15.1667 14.5834V19.2501C15.1667 19.8944 14.6444 20.4167 14 20.4167C13.3557 20.4167 12.8334 19.8944 12.8334 19.2501V14.5834C12.189 14.5834 11.6667 14.0611 11.6667 13.4167C11.6667 12.7724 12.189 12.2501 12.8334 12.2501C12.8485 12.2501 12.8638 12.2501 12.8793 12.2501C13.1125 12.2499 13.3901 12.2497 13.6289 12.2818Z\"\r\n fill=\"#4B5565\"\r\n />\r\n <path\r\n fill-rule=\"evenodd\"\r\n clip-rule=\"evenodd\"\r\n d=\"M12.8333 8.75004C12.8333 8.10571 13.3533 7.58337 13.9947 7.58337H14.0051C14.6466 7.58337 15.1666 8.10571 15.1666 8.75004C15.1666 9.39437 14.6466 9.91671 14.0051 9.91671H13.9947C13.3533 9.91671 12.8333 9.39437 12.8333 8.75004Z\"\r\n fill=\"#4B5565\"\r\n />\r\n </svg>\r\n </div>\r\n <div class={`text ${this.size} ${this.breakpoint}`}>\r\n <p class={`text-sm-semi-bold main_text_${this.internalColor}`}>{this.mainText}</p>\r\n {this.showSupportingText && <p class={`text-xs-regular supporting_text_${this.internalColor}`}>{this.supportingText}</p>}\r\n </div>\r\n </div>\r\n {this.actions && (\r\n <div class={`actions ${this.size} ${this.breakpoint} ${!this.showSupportingText ? 'only_actions' : ''}`}>\r\n {this.color === 'default' ? (\r\n <>\r\n <gb-button size=\"sm\" icon=\"default\" state=\"default\" hierarchy=\"link_gray\">\r\n <p>Dismiss</p>\r\n </gb-button>\r\n <gb-button size=\"sm\" icon=\"default\" state=\"default\" hierarchy=\"link_color\">\r\n <p>View changes</p>\r\n </gb-button>\r\n </>\r\n ) : (\r\n <>\r\n <gb-toast-button state={StateEnum.Default} color={this.internalColor}>\r\n <p>Dismiss</p>\r\n </gb-toast-button>\r\n <gb-toast-button state={StateEnum.Default} color={this.internalColor}>\r\n <p>View changes</p>\r\n </gb-toast-button>\r\n </>\r\n )}\r\n </div>\r\n )}\r\n <gb-button-close\r\n size=\"sm\"\r\n color={this.internalColor === 'default' ? 'gray' : this.internalColor === 'gray' ? 'gray' : this.internalColor}\r\n class={`close_button ${this.breakpoint}`}\r\n onClick={() => this.closeToast()}\r\n ></gb-button-close>\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.toast_button{\r\n width: fit-content;\r\n cursor: pointer;\r\n}\r\n\r\n/* Toast Button Color Styles */\r\n.toast_button.gray{\r\n color: var(--color-text, #4B5565);\r\n}\r\n\r\n.toast_button.information{\r\n color: var(--color-text-information, #064E94);\r\n}\r\n\r\n.toast_button.error{\r\n color: var(--color-text-danger, #B51726);\r\n}\r\n\r\n.toast_button.success{\r\n color: var(--color-text-success, #079455);\r\n}\r\n\r\n.toast_button.warning{\r\n color: var(--color-text-warning, #DC6803);\r\n}\r\n\r\n/* Toast Button State Styles */\r\n.toast_button:hover ::slotted(p){\r\n text-decoration: underline;\r\n}\r\n\r\n.toast_button:active ::slotted(p){\r\n text-decoration: none;\r\n}\r\n\r\n.toast_button.gray:active ::slotted(p){\r\n color: var(--color-text-bold, #202939);\r\n}\r\n\r\n.toast_button.information:active ::slotted(p){\r\n color: var(--color-text-information-bold, #042F59);\r\n}\r\n\r\n.toast_button.error:active ::slotted(p){\r\n color: var(--color-text-danger-bold, #8C121D);\r\n}\r\n\r\n.toast_button.success:active ::slotted(p){\r\n color: var(--color-text-success-bold, #085D3A);\r\n}\r\n.toast_button.warning:active ::slotted(p){\r\n color: var(--color-text-warning-bold, #93370D);\r\n}\r\n\r\n.toast_button.disabled{\r\n cursor: not-allowed;\r\n pointer-events: none;\r\n}\r\n\r\n.toast_button.disabled ::slotted(p){\r\n color: var(--color-text-disabled, #CDD5DF);\r\n}","import { Component, Element, Prop, h } from \"@stencil/core\";\r\nimport { GeneralColors, StateEnum } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n tag: 'gb-toast-button',\r\n styleUrl: 'gb-toast-button.css',\r\n shadow: true\r\n})\r\n\r\nexport class GbToastButton {\r\n @Prop() state: StateEnum;\r\n @Prop() color: GeneralColors;\r\n @Element() el: HTMLElement;\r\n\r\n componentDidLoad() {\r\n const slottedContent = this.el.querySelector('p');\r\n\r\n slottedContent.classList.add('text-sm-semi-bold');\r\n }\r\n\r\n render() {\r\n return (\r\n <div class={`toast_button ${this.state} ${this.color}`}>\r\n <slot></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":[]}