npm - globuswebcomponents - Versions diffs - 2.5.0 → 2.5.1 - Mend

globuswebcomponents 2.5.0 → 2.5.1

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 (56) hide show

package/dist/globuscomponents/p-c3debf40.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["gbAvatarCss","GbAvatar","constructor","hostRef","this","placeholder","text","statusIcon","state","OnlineIndicatorStates","Online","icon","showBorder","weight","BorderWeights","Light","colorClasses","getInitialsSize","size","setWeight","Regular","VeryLight","applyColorToInitials","color","getRandomColorClass","randomIndex","Math","floor","random","length","componentDidLoad","slottedInitials","el","querySelector","classList","add","assignedColorClass","componentWillLoad","toLowerCase","render","classes","h","key","class","name","xmlns","width","height","viewBox","fill","d","gbAvatarContrastInnerBorderCss","GbAvatarContrastInnerBorder","Heavy","gbBadgeCss","GbBadges","closeButton","getDotColor","colorMap","gray","primary","error","warning","success","discovery","information","pink","purple","type","iconLeadingSwap","iconLeadingSrc","getAssetPath","leadingIconContent","fetchSvgContent","iconTrailingSwap","iconTrailingSrc","trailingIconContent","src","response","fetch","ok","console","getTextClass","slottedContent","badge","flagSwap","dotColor","cx","cy","r","innerHTML","alt","slot","id","stroke","gbBadgeCloseCss","BadgeClose","gbBtnCss","GbButton","destructive","iconLeading","iconTrailing","leadingIconSvg","trailingIconSvg","loadIcon","buttonSlot","getButtonTextClasses","iconName","iconPath","svg","getButtonClasses","button","hierarchy","disabled","default","only","renderLeadingIcon","renderTrailingIcon","gbButtonCss","internalButtonState","internalIconLeadingState","internalIconTrailingState","internalSize","updateButtonState","newValue","updateSize","componentWillRender","oneicon","gbCheckboxCss","GbCheckbox","checked","indeterminate","supportingText","getMainTextClass","getSupportingTextClass","mainTextSlot","supportingTextSlot","onCheckboxClicked","event","checkboxClicked","emit","detail","bind","gbCheckboxBaseCss","GbCheckboxBase","renderSVG","renderCheckbox","renderCircle","renderRadio","x","y","rx","toggleCheckboxState","toggleCheckCircleState","toggleRadioButtonState","onClick","gbCollapseButtonCss","GbCollapseButton","isCollapsed","action","isHovered","toggleIcon","collapseSidebar","expandSidebar","onMouseOver","onMouseOut","arrow","gbComplexPrimarySideBarItemCss","GbComplexPrimarySideBarItem","label","showTooltip","redBarSrc","whiteBarSrc","redCompactBarSrc","whiteCompactBarSrc","Fragment","itemStyle","category","onMouseEnter","onMouseLeave","gbComplexSecondarySideBarItemCss","GbComplexSecondarySideBarItem","gbHelpTooltipCss","GbHelpTooltip","showHelpTooltip","showArrow","showSupportingText","gbInputDropdownMenuItemCss","GbInputDropdownMenuItem","selected","parser","DOMParser","svgDoc","parseFromString","svgElement","documentElement","elementsWithOpacity","querySelectorAll","forEach","modifiedSvg","outerHTML","nameSlot","initialsSlot","handleClick","dropdownItemClicked","checkbox","role","gbInputFieldCss","GbInputField","inputType","showLabel","showHintText","hintText","errorText","showPlaceholder","showHelpIcon","showValidation","showCountryIcon","showCloseButton","options","isReadOnly","results","value","required","loading","formatLabel","inputValue","tags","isPasswordVisible","showDropdown","selectedItem","selectedItems","unselectedItems","paddingLeft","paddingTop","dropdownOpen","show","showSpinner","internalLoading","minWidth","isDestructive","isNotDestructive","formResetCallback","internals","setValidity","setFormValue","handleTagInput","target","inputValueChanged","trim","setTimeout","updateInputWidth","selectDropdownItem","item","isObject","isSelected","some","i","objectName","filter","log","updateStyles","handleTagRemove","index","slice","resultsDisplayElement","resultsWidth","offsetWidth","inputWidth","inputElement","exportSelectedStaff","onButtonClicked","buttonClicked","onPlusButtonClicked","plusButtonClicked","onMinusButtonClicked","minusButtonClicked","handleClickOutside","contains","handleInput","combined","prefix","handleInputFocus","clearInput","inputRef","togglePasswordVisibility","optionsChanged","newOptions","onLoadingChanged","newLoading","isItemSelected","option","isTagItemSelected","handleItemSelect","updateSelectedItems","Array","isArray","objectValues","val","primitiveValues","JSON","stringify","includes","iconSwap","textSlot","document","addEventListener","hiddenSpan","input","shadowRoot","calculatedWidth","max","style","handleWrapperClick","focus","charAt","toUpperCase","minLength","maxLength","onInput","onFocus","ref","menuPosition","dropdownRef","map","StateEnum","Default","inputGroupElement","split","part","idOfInput","readOnly","onBlur","objectValue","gbMetricCardCss","GbMetricCard","showBadge","percentage","radius","featuredIconStyle","featuredIconColor","metric","gbMetricFeaturedIconCss","GbMetricFeaturedIcon","gbPasswordButtonCss","GbPasswordButton","gbSidebarCss","GbSidebar","showSecondCategory","iconInstance","firstItemIcon","secondItemIcon","thirdItemIcon","fourthItemIcon","fifthItemIcon","sixthItemIcon","seventhItemIcon","eighthItemIcon","ninthItemIcon","tenthItemIcon","firstItemLabel","secondItemLabel","thirdItemLabel","fourthItemLabel","fifthItemLabel","sixthItemLabel","seventhItemLabel","eighthItemLabel","ninthItemLabel","tenthItemLabel","complexSidebarData","Recruitment","items","Staff","activePrimaryItem","activeSecondaryItem","hasInfo","email","phoneNumber","theme","isDarkTheme","collapseSideBar","sidebarState","expandSideBar","sideBarItemClicked","activeIndex","simpleSidebarItemClicked","handlePrimaryClick","_index","handleSecondaryClick","applicationName","changeTheme","window","matchMedia","matches","textClass","patternSrc","logoSrc","blueLogoSrc","whiteLogoSrc","opacity","navItemStyle","Object","keys","primaryItem","secondaryItem","gbSimpleSideBarItemCss","GbSimpleSideBarItem","internalIcon","gWithOpacity","g","updateSidebarIcon","_oldValue","onSideBarItemClicked","gbStatusIndicatorCss","GbStatusIndicator","Offline","indicatorStateClass","gbTagCss","GbTag","onTagClose","labelSlot","gbTagCheckboxCss","GbTagCheckbox","gbTagCloseCss","GbTagClose","gbTagCountCss","GbTagCount","gbTooltipCss","GbTooltip","noWrap","getArrowClass"],"sources":["src/components/gb-avatar/gb-avatar.css?tag=gb-avatar&encapsulation=shadow","src/components/gb-avatar/gb-avatar.tsx","src/components/gb-avatar-contrast-inner-border/gb-avatar-contrast-inner-border.css?tag=gb-avatar-contrast-inner-border&encapsulation=shadow","src/components/gb-avatar-contrast-inner-border/gb-avatar-contrast-inner-border.tsx","src/components/gb-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-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-collapse-button/gb-collapse-button.css?tag=gb-collapse-button&encapsulation=shadow","src/components/gb-collapse-button/gb-collapse-button.tsx","src/components/gb-complex-primary-side-bar-item/gb-complex-primary-side-bar-item.css?tag=gb-complex-primary-side-bar-item&encapsulation=shadow","src/components/gb-complex-primary-side-bar-item/gb-complex-primary-side-bar-item.tsx","src/components/gb-complex-secondary-side-bar-item/gb-complex-secondary-side-bar-item.css?tag=gb-complex-secondary-side-bar-item&encapsulation=shadow","src/components/gb-complex-secondary-side-bar-item/gb-complex-secondary-side-bar-item.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-metric-card/gb-metric-card.css?tag=gb-metric-card&encapsulation=shadow","src/components/gb-metric-card/gb-metric-card.tsx","src/components/gb-metric-featured-icon/gb-metric-featured-icon.css?tag=gb-metric-featured-icon&encapsulation=shadow","src/components/gb-metric-featured-icon/gb-metric-featured-icon.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-sidebar/gb-sidebar.css?tag=gb-sidebar&encapsulation=shadow","src/components/gb-sidebar/gb-sidebar.tsx","src/components/gb-simple-side-bar-item/gb-simple-side-bar-item.css?tag=gb-simple-side-bar-item&encapsulation=shadow","src/components/gb-simple-side-bar-item/gb-simple-side-bar-item.tsx","src/components/gb-status-indicator/gb-status-indicator.css?tag=gb-status-indicator&encapsulation=shadow","src/components/gb-status-indicator/gb-status-indicator.tsx","src/components/gb-tag/gb-tag.css?tag=gb-tag&encapsulation=shadow","src/components/gb-tag/gb-tag.tsx","src/components/gb-tag-checkbox/gb-tag-checkbox.css?tag=gb-tag-checkbox&encapsulation=shadow","src/components/gb-tag-checkbox/gb-tag-checkbox.tsx","src/components/gb-tag-close/gb-tag-close.css?tag=gb-tag-close&encapsulation=shadow","src/components/gb-tag-close/gb-tag-close.tsx","src/components/gb-tag-count/gb-tag-count.css?tag=gb-tag-count&encapsulation=shadow","src/components/gb-tag-count/gb-tag-count.tsx","src/components/gb-tooltip/gb-tooltip.css?tag=gb-tooltip&encapsulation=shadow","src/components/gb-tooltip/gb-tooltip.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n\r\n: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-border-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, #9aa4b2);\r\n color: var(--color-text-disabled, #9aa4b2);\r\n}\r\n\r\nbutton.secondary_gray.disabled,\r\nbutton.secondary_color.disabled{\r\n --icon-color: var(--color-icon-disabled, #9aa4b2);\r\n color: var(--color-text-disabled, #9aa4b2);\r\n border-color: var(--color-border-disabled, #E3E8EF);\r\n}\r\n\r\nbutton.tertiary_gray.disabled,\r\nbutton.tertiary_color.disabled,\r\nbutton.link_gray.disabled,\r\nbutton.link_color.disabled{\r\n --icon-color: var(--color-icon-disabled, #9aa4b2);\r\n color: var(--color-text-disabled, #9aa4b2);\r\n}\r\n\r\n.btn_text{\r\n white-space: nowrap;\r\n display: flex;\r\n align-items: center;\r\n}","import { Component, Element, getAssetPath, h, Prop, State } from \"@stencil/core\";\r\nimport { GeneralHierarchies, GeneralSizes } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n tag: 'gb-btn',\r\n styleUrl: 'gb-btn.css',\r\n})\r\nexport class GbButton {\r\n @Prop() size: GeneralSizes;\r\n @Prop() hierarchy: GeneralHierarchies;\r\n @Prop() icon: 'default' | 'only';\r\n @Prop() destructive: boolean = false;\r\n @Prop() state: 'default' | 'disabled';\r\n @Prop() iconLeading: boolean = false;\r\n @Prop() iconLeadingSwap: string;\r\n @Prop() iconTrailing: boolean = false;\r\n @Prop() iconTrailingSwap: string;\r\n @Element() el: HTMLElement;\r\n @State() leadingIconSvg: string = '';\r\n @State() trailingIconSvg: string = '';\r\n\r\n componentWillLoad() {\r\n if (this.iconLeading && this.iconLeadingSwap) {\r\n this.loadIcon(this.iconLeadingSwap, 'leading');\r\n }\r\n if (this.iconTrailing && this.iconTrailingSwap) {\r\n this.loadIcon(this.iconTrailingSwap, 'trailing');\r\n }\r\n\r\n const buttonSlot = this.el.querySelector('p');\r\n\r\n if (buttonSlot) {\r\n buttonSlot.classList.add(this.getButtonTextClasses());\r\n buttonSlot.classList.add('nowrap');\r\n }\r\n }\r\n\r\n async loadIcon(iconName: string, type: 'leading' | 'trailing') {\r\n const iconPath = getAssetPath(`${iconName}`);\r\n const response = await fetch(iconPath);\r\n const svg = await response.text();\r\n if (type === 'leading') {\r\n this.leadingIconSvg = svg;\r\n } else {\r\n this.trailingIconSvg = svg;\r\n }\r\n }\r\n\r\n // Helper to apply color styles based on the button state\r\n getButtonClasses() {\r\n return {\r\n button: true,\r\n [this.size]: true,\r\n [this.hierarchy]: true,\r\n destructive: this.destructive,\r\n disabled: this.state === 'disabled',\r\n default: this.icon === 'default',\r\n only: this.icon === 'only',\r\n // leftandrighticon: this.iconLeading && this.iconTrailing\r\n };\r\n }\r\n\r\n getButtonTextClasses() {\r\n switch (this.size) {\r\n case 'xl2':\r\n return 'text-lg-semi-bold';\r\n case 'xl':\r\n return 'text-md-semi-bold';\r\n case 'lg':\r\n return 'text-md-semi-bold';\r\n case 'md':\r\n return 'text-sm-semi-bold';\r\n case 'sm':\r\n return 'text-sm-semi-bold';\r\n }\r\n }\r\n\r\n renderLeadingIcon() {\r\n return <div class={`icon left-icon ${this.size}`} innerHTML={this.leadingIconSvg}></div>;\r\n }\r\n\r\n renderTrailingIcon() {\r\n return <div class=\"icon right-icon\" innerHTML={this.trailingIconSvg}></div>;\r\n }\r\n\r\n render() {\r\n return (\r\n <button class={this.getButtonClasses()}>\r\n {this.iconLeading && this.icon === 'default' && this.renderLeadingIcon()}\r\n {this.icon === 'default' && (\r\n <div class={`btn_text`}>\r\n <slot></slot>\r\n </div>\r\n )}\r\n {this.iconTrailing && this.renderTrailingIcon()}\r\n {this.icon === 'only' && this.renderLeadingIcon()}\r\n </button>\r\n );\r\n }\r\n}","@import './../../global/global.css';\r\n\r\n:host {\r\n --button-color: var(--primary-color);\r\n --icon-color: var(--primary-color);\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\nbutton {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n border: none;\r\n cursor: pointer;\r\n border-radius: var(--rounded-sm);\r\n width: 100%;\r\n}\r\n\r\nbutton.only{\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n\r\nbutton .icon {\r\n display: inline-flex;\r\n width: auto;\r\n height: auto;\r\n}\r\n\r\nbutton .icon svg path[fill] {\r\n fill: var(--icon-color);\r\n}\r\n\r\nbutton .icon svg path[stroke] {\r\n stroke: var(--icon-color);\r\n}\r\n\r\nbutton .icon svg circle {\r\n stroke: var(--icon-color);\r\n}\r\n\r\n/* Button Sizes Styles */\r\nbutton.xl2{\r\n padding: var(--spacing-none) var(--spacing-6);\r\n height: 3.5rem;\r\n gap: var(--spacing-3);\r\n}\r\n\r\nbutton.xl{\r\n padding: var(--spacing-none) var(--spacing-5);\r\n height: 3rem;\r\n gap: var(--spacing-2);\r\n}\r\n\r\nbutton.lg{\r\n padding: 0.625rem 1.125rem;\r\n height: 2.75rem;\r\n gap: var(--spacing-2);\r\n}\r\n\r\nbutton.md{\r\n padding: var(--spacing-none) var(--spacing-4);\r\n height: 2.5rem;\r\n gap: var(--spacing-2);\r\n}\r\n\r\nbutton.sm{\r\n padding: var(--spacing-none) var(--spacing-3);\r\n height: 2.25rem;\r\n gap: var(--spacing-2);\r\n}\r\n\r\nbutton.only.xl2{\r\n width: 3.5rem;\r\n height: 3.5rem;\r\n}\r\n\r\nbutton.only.xl{\r\n width: 3rem;\r\n height: 3rem;\r\n}\r\n\r\nbutton.only.lg{\r\n width: 2.75rem;\r\n height: 2.75rem;\r\n}\r\n\r\nbutton.only.md{\r\n width: 2.5rem;\r\n height: 2.5rem;\r\n}\r\n\r\nbutton.only.sm{\r\n width: 2.25rem;\r\n height: 2.25rem;\r\n}\r\n\r\nbutton.xl2 .icon svg{\r\n width: var(--spacing-6);\r\n height: var(--spacing-6);\r\n}\r\n\r\nbutton.xl .icon svg,\r\nbutton.lg .icon svg,\r\nbutton.md .icon svg,\r\nbutton.sm .icon svg{\r\n width: var(--spacing-5);\r\n height: var(--spacing-5);\r\n}\r\n\r\n/* Hierarchy Styles */\r\nbutton.primary {\r\n background-color: var(--color-background-brandRed, #E21B2E);\r\n --icon-color: var(--color-icon-inverse, #FFFFFF);\r\n color: var(--color-text-inverse, #FFFFFF);\r\n}\r\n\r\nbutton.secondary_gray {\r\n background-color: transparent;\r\n border: 1px solid var(--color-border, #9AA4B2);\r\n --icon-color: var(--color-icon, #4B5565);\r\n color: var(--color-text, #4B5565);\r\n}\r\n\r\nbutton.secondary_color {\r\n background-color: transparent;\r\n border: 1px solid var(--color-border-brandRed, #E21B2E);\r\n --icon-color: var(--color-icon-brandRed, #E21B2E);\r\n color: var(--color-text-brandRed, #E21B2E);\r\n}\r\n\r\nbutton.tertiary_gray {\r\n background-color: transparent;\r\n --icon-color: var(--color-icon, #4B5565);\r\n color: var(--color-text, #4B5565);\r\n}\r\n\r\nbutton.tertiary_color {\r\n background-color: transparent;\r\n --icon-color: var(--color-icon-brandRed, #E21B2E);\r\n color: var(--color-text-brandRed, #E21B2E);\r\n}\r\n\r\nbutton.link_gray {\r\n background-color: transparent;\r\n --icon-color: var(--color-icon, #4B5565);\r\n color: var(--color-text, #4B5565);\r\n padding: var(--spacing-none);\r\n height: fit-content;\r\n justify-content: flex-start;\r\n}\r\n\r\nbutton.link_color {\r\n background-color: transparent;\r\n --icon-color: var(--color-link, #075DB2);\r\n color: var(--color-link, #075DB2);\r\n padding: var(--spacing-none);\r\n height: fit-content;\r\n justify-content: flex-start;\r\n}\r\n\r\n/* Button Destructive Styles */\r\nbutton.primary.destructive{\r\n background-color: var(--color-background-danger, #B51726);\r\n color: var(--color-text-inverse, #FFFFFF);\r\n --icon-color: var(--color-icon-danger-inverse, #FFFFFF);\r\n}\r\n\r\nbutton.secondary_gray.destructive, button.secondary_color.destructive{\r\n border: 1px solid var(--color-border-danger, #B51726);\r\n color: var(--color-text-danger, #B51726);\r\n --icon-color: var(--color-icon-danger, #B51726);\r\n}\r\n\r\nbutton.tertiary_gray.destructive,\r\nbutton.tertiary_color.destructive{\r\n color: var(--color-text-danger, #B51726);\r\n --icon-color: var(--color-icon-danger, #B51726);\r\n}\r\n\r\nbutton.link_gray.destructive, \r\nbutton.link_color.destructive{\r\n color: var(--color-text-danger, #B51726);\r\n --icon-color: var(--color-icon-danger, #B51726);\r\n}\r\n\r\n/* Button States Styles */\r\nbutton.primary:hover{\r\n background-color: var(--color-background-brandRed-hover, #CC1A2A);\r\n}\r\n\r\nbutton.primary:active{\r\n background-color: var(--color-background-brandRed-pressed, #B51726);\r\n}\r\n\r\nbutton.secondary_gray:hover{\r\n background-color: var(--color-background-gray-subtler, #EEF2F6);\r\n}\r\n\r\nbutton.secondary_gray:active{\r\n background-color: var(--color-background-gray-subtle, #E3E8EF);\r\n}\r\n\r\nbutton.secondary_color:hover{\r\n background-color: var(--color-background-danger-subtlest, #FEF1F2);\r\n}\r\n\r\nbutton.secondary_color:active{\r\n background-color: var(--color-background-danger-subtler, #FDE3E5);\r\n}\r\n\r\nbutton.tertiary_gray:hover{\r\n background-color: var(--color-background-gray-subtler, #EEF2F6);\r\n}\r\n\r\nbutton.tertiary_gray:active{\r\n background-color: var(--color-background-gray-subtle, #E3E8EF);\r\n}\r\n\r\nbutton.tertiary_color:hover{\r\n background-color: var(--color-background-danger-subtlest, #FEF1F2);\r\n}\r\n\r\nbutton.tertiary_color:active{\r\n background-color: var(--color-background-danger-subtler, #FDE3E5);\r\n}\r\n\r\nbutton.link_gray:hover,\r\nbutton.link_color:hover{\r\n text-decoration: underline;\r\n}\r\n\r\nbutton.link_gray:active{\r\n text-decoration: none;\r\n color: var(--color-text-bold, #202939);\r\n}\r\n\r\nbutton.link_color:active{\r\n text-decoration: none;\r\n color: var(--color-link-pressed, #064E94);\r\n}\r\n\r\nbutton.primary.destructive:hover{\r\n background-color: var(--color-background-danger-bold, #8C121D);\r\n}\r\n\r\nbutton.primary.destructive:active{\r\n background-color: var(--color-background-brandRed-hover, #CC1A2A); /* ask Mr Gideon about this */\r\n}\r\n\r\nbutton.secondary_gray.destructive:hover, \r\nbutton.secondary_color.destructive:hover{\r\n background-color: var(--color-background-danger-subtlest, #FEF1F2);\r\n}\r\n\r\nbutton.secondary_gray.destructive:active, \r\nbutton.secondary_color.destructive:active{\r\n background-color: var(--color-background-danger-subtler, #FDE3E5);\r\n}\r\n\r\nbutton.tertiary_gray.destructive:hover, \r\nbutton.tertiary_color.destructive:hover{\r\n background-color: var(--color-background-danger-subtlest, #FEF1F2);\r\n}\r\n\r\nbutton.tertiary_gray.destructive:active, \r\nbutton.tertiary_color.destructive:active{\r\n background-color: var(--color-background-danger-subtler, #FDE3E5);\r\n}\r\n\r\nbutton.link_gray.destructive:active{\r\n color: var(--color-text-danger-bold, #8C121D);\r\n}\r\n\r\nbutton.link_color.destructive:active{\r\n color: var(--color-text-warning-bold, #93370D);\r\n}\r\n\r\n/* Button Disabled Styles */\r\nbutton.disabled{\r\n cursor: not-allowed;\r\n pointer-events: none;\r\n}\r\n\r\nbutton.primary.disabled {\r\n background-color: var(--color-background-btn-disabled, #eef2f6);\r\n --icon-color: var(--color-icon-disabled, #9aa4b2);\r\n color: var(--color-text-disabled, #9aa4b2);\r\n}\r\n\r\nbutton.secondary_gray.disabled,\r\nbutton.secondary_color.disabled{\r\n --icon-color: var(--color-icon-disabled, #9aa4b2);\r\n color: var(--color-text-disabled, #9aa4b2);\r\n border-color: var(--color-border-disabled, #E3E8EF);\r\n}\r\n\r\nbutton.tertiary_gray.disabled,\r\nbutton.tertiary_color.disabled,\r\nbutton.link_gray.disabled,\r\nbutton.link_color.disabled{\r\n --icon-color: var(--color-icon-disabled, #9aa4b2);\r\n color: var(--color-text-disabled, #9aa4b2);\r\n}\r\n\r\n.btn_text{\r\n white-space: nowrap;\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.btn_text::first-letter{\r\n text-transform: uppercase;\r\n}","import { Component, Element, getAssetPath, h, Prop, State, Watch } from '@stencil/core';\r\nimport { GeneralHierarchies, GeneralSizes, StateType } from '../../models/reusableModels';\r\n\r\n@Component({\r\n tag: 'gb-button',\r\n styleUrl: 'gb-button.css',\r\n shadow: true,\r\n assetsDirs: [''],\r\n})\r\nexport class GbButton {\r\n @Prop() size!: GeneralSizes;\r\n @Prop() hierarchy!: GeneralHierarchies;\r\n @Prop() icon!: 'default' | 'only';\r\n @Prop() destructive: boolean = false;\r\n @Prop() state: StateType;\r\n @Prop() iconLeading: boolean = false;\r\n @Prop() iconLeadingSwap: string;\r\n @Prop() iconTrailing: boolean = false;\r\n @Prop() iconTrailingSwap: string;\r\n @Element() el: HTMLElement;\r\n @State() leadingIconSvg: string = '';\r\n @State() trailingIconSvg: string = '';\r\n @State() internalButtonState: string = '';\r\n @State() internalIconLeadingState: string = '';\r\n @State() internalIconTrailingState: string = '';\r\n @State() internalSize: 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 @Watch('size')\r\n updateSize(newValue: GeneralSizes) {\r\n this.internalSize = 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.internalSize]: 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.internalSize) {\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.internalSize}`} innerHTML={this.leadingIconSvg}></div>;\r\n }\r\n\r\n renderTrailingIcon() {\r\n return <div class=\"icon right-icon\" innerHTML={this.trailingIconSvg}></div>;\r\n }\r\n\r\n render() {\r\n return (\r\n <button disabled={this.internalButtonState === 'disabled'} class={this.getButtonClasses()}>\r\n {this.iconLeading && this.icon === 'default' && this.renderLeadingIcon()}\r\n {this.icon === 'default' && <slot></slot>}\r\n {this.iconTrailing && this.renderTrailingIcon()}\r\n {this.icon === 'only' && this.renderLeadingIcon()}\r\n </button>\r\n );\r\n }\r\n}\r\n","@import './../../global/global.css';\r\n\r\n.checkbox_div{\r\n display: flex;\r\n justify-content: space-between;\r\n width: fit-content;\r\n}\r\n\r\n.checkbox_div{\r\n gap: var(--spacing-none);\r\n}\r\n\r\n.checkbox_div.text_class.sm{\r\n gap: var(--spacing-2);\r\n}\r\n\r\n.checkbox_div.text_class.md{\r\n gap: var(--spacing-3);\r\n}\r\n\r\n.checkbox_base.checkbox_no_supporting_text{\r\n margin-top: 0.22rem;\r\n}\r\n\r\n.text{\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--spacing-2);\r\n}\r\n\r\n.text.no_supporting_text{\r\n justify-content: center;\r\n}\r\n\r\n::slotted(p){\r\n color: var(--color-text, #4B5565);\r\n}","import { Component, Element, Event, EventEmitter, h, Prop } from \"@stencil/core\";\r\nimport { CheckBoxVariants, GeneralSizes, StateType } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n tag: 'gb-checkbox',\r\n styleUrl: 'gb-checkbox.css',\r\n shadow: true,\r\n})\r\nexport class GbCheckbox {\r\n @Prop() checked: boolean = false;\r\n @Prop() indeterminate: boolean = false;\r\n @Prop() size: GeneralSizes;\r\n @Prop() type: CheckBoxVariants; \r\n @Prop() state: StateType;\r\n @Prop() text: boolean = false;\r\n @Prop() supportingText: boolean = false;\r\n @Element() el: HTMLElement;\r\n @Event() checkboxClicked: EventEmitter<boolean>;\r\n\r\n getMainTextClass() {\r\n switch (this.size) {\r\n case 'sm':\r\n return `text-sm-medium`;\r\n case 'md':\r\n return `text-md-medium`;\r\n }\r\n }\r\n\r\n getSupportingTextClass() {\r\n switch (this.size) {\r\n case 'sm':\r\n return 'text-xs-regular';\r\n case 'md':\r\n return 'text-sm-regular';\r\n }\r\n }\r\n\r\n componentDidLoad() {\r\n const mainTextSlot = this.el.querySelector('[slot=\"label\"]');\r\n const supportingTextSlot = this.el.querySelector('[slot=\"supporting_text\"]');\r\n\r\n if (mainTextSlot) {\r\n mainTextSlot.classList.add(this.getMainTextClass());\r\n }\r\n\r\n if (supportingTextSlot) {\r\n supportingTextSlot.classList.add(this.getSupportingTextClass());\r\n }\r\n }\r\n\r\n onCheckboxClicked(event) : void {\r\n this.checkboxClicked.emit(event.detail);\r\n }\r\n\r\n render() {\r\n return (\r\n <div class={`checkbox_div ${this.size} ${this.text ? 'text_class' : ''}`}>\r\n <div class={`checkbox_base ${!this.supportingText ? 'checkbox_no_supporting_text' : ''}`}>\r\n <gb-checkbox-base size={this.size} type={this.type} state={this.state} indeterminate={this.indeterminate} onCheckboxClicked={this.onCheckboxClicked.bind(this)} checked={this.checked}></gb-checkbox-base>\r\n </div>\r\n {this.text && (\r\n <div class={`text ${!this.supportingText ? 'no_supporting_text' : ''}`}>\r\n <slot name=\"label\"></slot>\r\n {this.supportingText && <slot name=\"supporting_text\"></slot>}\r\n </div>\r\n )}\r\n </div>\r\n );\r\n }\r\n}","@import './../../global/global.css';\r\n\r\n:host{\r\n width: fit-content;\r\n}\r\n\r\n/* Checkbox Styles */\r\n.checkbox_container{\r\n width: fit-content;\r\n height: fit-content;\r\n cursor: pointer;\r\n}\r\n\r\nsvg.sm{\r\n width: var(--spacing-4);\r\n height: var(--spacing-4);\r\n}\r\n\r\nsvg.md{\r\n width: var(--spacing-5);\r\n height: var(--spacing-5);\r\n}\r\n\r\n.checkbox_default_unchecked.hover:hover path{\r\n stroke: var(--color-border-selected, #075DB2);\r\n}\r\n\r\n.checkbox_default_checked:hover path, .checkbox_default_indeterminate:hover path{\r\n fill: var(--color-background-information, #064E94);\r\n}\r\n\r\n.checkbox_default_checked:hover .border, .checkbox_default_indeterminate:hover .border{\r\n stroke: var(--color-border-information, #064E94);\r\n}\r\n\r\n/* Radio Styles */\r\n.radio_default_unchecked:hover rect{\r\n stroke: var(--color-border-selected, #075DB2);\r\n}\r\n\r\n/* Check Circle Styles */\r\n.circle_default_unchecked:hover rect{\r\n stroke: var(--color-border-selected, #075DB2);\r\n}\r\n\r\n.circle_default_checked:hover rect{\r\n stroke: var(--color-border-information, #064E94);\r\n}\r\n\r\n.circle_default_checked:hover .background {\r\n fill: var(--color-background-information, #064E94);\r\n}","import { Component, Event, EventEmitter, h, Prop } from \"@stencil/core\";\r\nimport { CheckBoxVariants, GeneralSizes, StateType } from '../../models/reusableModels';\r\n\r\n@Component({\r\n tag: 'gb-checkbox-base',\r\n styleUrl: 'gb-checkbox-base.css',\r\n shadow: true,\r\n})\r\nexport class GbCheckboxBase {\r\n @Prop({ mutable: true }) state: StateType;\r\n @Prop() size: GeneralSizes;\r\n @Prop() type: CheckBoxVariants;\r\n @Prop({ mutable: true }) checked: boolean = false;\r\n @Prop({ mutable: true }) indeterminate: boolean = false;\r\n @Event() checkboxClicked: EventEmitter<boolean>;\r\n\r\n private renderSVG() {\r\n switch (this.type) {\r\n case 'checkbox':\r\n return this.renderCheckbox();\r\n case 'check_circle':\r\n return this.renderCircle();\r\n case 'radio':\r\n return this.renderRadio();\r\n default:\r\n return null;\r\n }\r\n }\r\n\r\n private renderCheckbox() {\r\n if (this.state === \"default\" && this.checked) {\r\n return (\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class={`checkbox_default_checked ${this.size}`}>\r\n <path\r\n d=\"M0.5 8C0.5 6.10025 0.501062 4.72573 0.641988 3.67754C0.78098 2.64373 1.04772 2.00253 1.52513 1.52513C2.00253 1.04772 2.64373 0.78098 3.67754 0.641988C4.72573 0.501062 6.10025 0.5 8 0.5C9.89975 0.5 11.2743 0.501062 12.3225 0.641988C13.3563 0.78098 13.9975 1.04772 14.4749 1.52513C14.9523 2.00253 15.219 2.64373 15.358 3.67754C15.4989 4.72573 15.5 6.10025 15.5 8C15.5 9.89975 15.4989 11.2743 15.358 12.3225C15.219 13.3563 14.9523 13.9975 14.4749 14.4749C13.9975 14.9523 13.3563 15.219 12.3225 15.358C11.2743 15.4989 9.89975 15.5 8 15.5C6.10025 15.5 4.72573 15.4989 3.67754 15.358C2.64373 15.219 2.00253 14.9523 1.52513 14.4749C1.04772 13.9975 0.78098 13.3563 0.641988 12.3225C0.501062 11.2743 0.5 9.89975 0.5 8Z\"\r\n fill=\"#075DB2\"\r\n />\r\n <path\r\n d=\"M0.5 8C0.5 6.10025 0.501062 4.72573 0.641988 3.67754C0.78098 2.64373 1.04772 2.00253 1.52513 1.52513C2.00253 1.04772 2.64373 0.78098 3.67754 0.641988C4.72573 0.501062 6.10025 0.5 8 0.5C9.89975 0.5 11.2743 0.501062 12.3225 0.641988C13.3563 0.78098 13.9975 1.04772 14.4749 1.52513C14.9523 2.00253 15.219 2.64373 15.358 3.67754C15.4989 4.72573 15.5 6.10025 15.5 8C15.5 9.89975 15.4989 11.2743 15.358 12.3225C15.219 13.3563 14.9523 13.9975 14.4749 14.4749C13.9975 14.9523 13.3563 15.219 12.3225 15.358C11.2743 15.4989 9.89975 15.5 8 15.5C6.10025 15.5 4.72573 15.4989 3.67754 15.358C2.64373 15.219 2.00253 14.9523 1.52513 14.4749C1.04772 13.9975 0.78098 13.3563 0.641988 12.3225C0.501062 11.2743 0.5 9.89975 0.5 8Z\"\r\n stroke=\"#075DB2\"\r\n class=\"border\"\r\n />\r\n <path d=\"M4.5 9.25C4.5 9.25 5.25 9.25 6.25 11C6.25 11 9.02941 6.41667 11.5 5.5\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n );\r\n } else if (this.state === \"default\" && this.indeterminate) {\r\n return (\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class={`checkbox_default_indeterminate ${this.size}`}>\r\n <path\r\n d=\"M0.5 8C0.5 6.10025 0.501062 4.72573 0.641988 3.67754C0.78098 2.64373 1.04772 2.00253 1.52513 1.52513C2.00253 1.04772 2.64373 0.78098 3.67754 0.641988C4.72573 0.501062 6.10025 0.5 8 0.5C9.89975 0.5 11.2743 0.501062 12.3225 0.641988C13.3563 0.78098 13.9975 1.04772 14.4749 1.52513C14.9523 2.00253 15.219 2.64373 15.358 3.67754C15.4989 4.72573 15.5 6.10025 15.5 8C15.5 9.89975 15.4989 11.2743 15.358 12.3225C15.219 13.3563 14.9523 13.9975 14.4749 14.4749C13.9975 14.9523 13.3563 15.219 12.3225 15.358C11.2743 15.4989 9.89975 15.5 8 15.5C6.10025 15.5 4.72573 15.4989 3.67754 15.358C2.64373 15.219 2.00253 14.9523 1.52513 14.4749C1.04772 13.9975 0.78098 13.3563 0.641988 12.3225C0.501062 11.2743 0.5 9.89975 0.5 8Z\"\r\n fill=\"#075DB2\"\r\n />\r\n <path\r\n d=\"M0.5 8C0.5 6.10025 0.501062 4.72573 0.641988 3.67754C0.78098 2.64373 1.04772 2.00253 1.52513 1.52513C2.00253 1.04772 2.64373 0.78098 3.67754 0.641988C4.72573 0.501062 6.10025 0.5 8 0.5C9.89975 0.5 11.2743 0.501062 12.3225 0.641988C13.3563 0.78098 13.9975 1.04772 14.4749 1.52513C14.9523 2.00253 15.219 2.64373 15.358 3.67754C15.4989 4.72573 15.5 6.10025 15.5 8C15.5 9.89975 15.4989 11.2743 15.358 12.3225C15.219 13.3563 14.9523 13.9975 14.4749 14.4749C13.9975 14.9523 13.3563 15.219 12.3225 15.358C11.2743 15.4989 9.89975 15.5 8 15.5C6.10025 15.5 4.72573 15.4989 3.67754 15.358C2.64373 15.219 2.00253 14.9523 1.52513 14.4749C1.04772 13.9975 0.78098 13.3563 0.641988 12.3225C0.501062 11.2743 0.5 9.89975 0.5 8Z\"\r\n stroke=\"#075DB2\"\r\n class=\"border\"\r\n />\r\n <path d=\"M12 8L4 8\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n );\r\n } else if (this.state === \"disabled\" && !this.checked) {\r\n return (\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class={`checkbox_disabled_unchecked ${this.size}`}>\r\n <path\r\n d=\"M0.5 8C0.5 6.10025 0.501062 4.72573 0.641988 3.67754C0.78098 2.64373 1.04772 2.00253 1.52513 1.52513C2.00253 1.04772 2.64373 0.78098 3.67754 0.641988C4.72573 0.501062 6.10025 0.5 8 0.5C9.89975 0.5 11.2743 0.501062 12.3225 0.641988C13.3563 0.78098 13.9975 1.04772 14.4749 1.52513C14.9523 2.00253 15.219 2.64373 15.358 3.67754C15.4989 4.72573 15.5 6.10025 15.5 8C15.5 9.89975 15.4989 11.2743 15.358 12.3225C15.219 13.3563 14.9523 13.9975 14.4749 14.4749C13.9975 14.9523 13.3563 15.219 12.3225 15.358C11.2743 15.4989 9.89975 15.5 8 15.5C6.10025 15.5 4.72573 15.4989 3.67754 15.358C2.64373 15.219 2.00253 14.9523 1.52513 14.4749C1.04772 13.9975 0.78098 13.3563 0.641988 12.3225C0.501062 11.2743 0.5 9.89975 0.5 8Z\"\r\n fill=\"#F6F8FA\"\r\n />\r\n <path\r\n d=\"M0.5 8C0.5 6.10025 0.501062 4.72573 0.641988 3.67754C0.78098 2.64373 1.04772 2.00253 1.52513 1.52513C2.00253 1.04772 2.64373 0.78098 3.67754 0.641988C4.72573 0.501062 6.10025 0.5 8 0.5C9.89975 0.5 11.2743 0.501062 12.3225 0.641988C13.3563 0.78098 13.9975 1.04772 14.4749 1.52513C14.9523 2.00253 15.219 2.64373 15.358 3.67754C15.4989 4.72573 15.5 6.10025 15.5 8C15.5 9.89975 15.4989 11.2743 15.358 12.3225C15.219 13.3563 14.9523 13.9975 14.4749 14.4749C13.9975 14.9523 13.3563 15.219 12.3225 15.358C11.2743 15.4989 9.89975 15.5 8 15.5C6.10025 15.5 4.72573 15.4989 3.67754 15.358C2.64373 15.219 2.00253 14.9523 1.52513 14.4749C1.04772 13.9975 0.78098 13.3563 0.641988 12.3225C0.501062 11.2743 0.5 9.89975 0.5 8Z\"\r\n stroke=\"#E3E8EF\"\r\n />\r\n </svg>\r\n );\r\n } else if (this.state === \"disabled\" && this.checked) {\r\n return (\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class={`${this.size}`}>\r\n <path\r\n d=\"M0.5 8C0.5 6.10025 0.501062 4.72573 0.641988 3.67754C0.78098 2.64373 1.04772 2.00253 1.52513 1.52513C2.00253 1.04772 2.64373 0.78098 3.67754 0.641988C4.72573 0.501062 6.10025 0.5 8 0.5H12C13.8998 0.5 15.2743 0.501062 16.3225 0.641988C17.3563 0.78098 17.9975 1.04772 18.4749 1.52513C18.9523 2.00253 19.219 2.64373 19.358 3.67754C19.4989 4.72573 19.5 6.10025 19.5 8V12C19.5 13.8998 19.4989 15.2743 19.358 16.3225C19.219 17.3563 18.9523 17.9975 18.4749 18.4749C17.9975 18.9523 17.3563 19.219 16.3225 19.358C15.2743 19.4989 13.8998 19.5 12 19.5H8C6.10025 19.5 4.72573 19.4989 3.67754 19.358C2.64373 19.219 2.00253 18.9523 1.52513 18.4749C1.04772 17.9975 0.78098 17.3563 0.641988 16.3225C0.501062 15.2743 0.5 13.8998 0.5 12V8Z\"\r\n fill=\"#9AA4B2\"\r\n />\r\n <path\r\n d=\"M0.5 8C0.5 6.10025 0.501062 4.72573 0.641988 3.67754C0.78098 2.64373 1.04772 2.00253 1.52513 1.52513C2.00253 1.04772 2.64373 0.78098 3.67754 0.641988C4.72573 0.501062 6.10025 0.5 8 0.5H12C13.8998 0.5 15.2743 0.501062 16.3225 0.641988C17.3563 0.78098 17.9975 1.04772 18.4749 1.52513C18.9523 2.00253 19.219 2.64373 19.358 3.67754C19.4989 4.72573 19.5 6.10025 19.5 8V12C19.5 13.8998 19.4989 15.2743 19.358 16.3225C19.219 17.3563 18.9523 17.9975 18.4749 18.4749C17.9975 18.9523 17.3563 19.219 16.3225 19.358C15.2743 19.4989 13.8998 19.5 12 19.5H8C6.10025 19.5 4.72573 19.4989 3.67754 19.358C2.64373 19.219 2.00253 18.9523 1.52513 18.4749C1.04772 17.9975 0.78098 17.3563 0.641988 16.3225C0.501062 15.2743 0.5 13.8998 0.5 12V8Z\"\r\n stroke=\"#9AA4B2\"\r\n />\r\n <path\r\n d=\"M5.3335 11.6667C5.3335 11.6667 6.3335 11.6667 7.66683 14C7.66683 14 11.3727 7.88888 14.6668 6.66666\"\r\n stroke=\"#E3E8EF\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n );\r\n } else if (this.state === \"disabled\" && this.indeterminate) {\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class={`${this.size}`}>\r\n <path\r\n d=\"M0.5 8C0.5 6.10025 0.501062 4.72573 0.641988 3.67754C0.78098 2.64373 1.04772 2.00253 1.52513 1.52513C2.00253 1.04772 2.64373 0.78098 3.67754 0.641988C4.72573 0.501062 6.10025 0.5 8 0.5H12C13.8998 0.5 15.2743 0.501062 16.3225 0.641988C17.3563 0.78098 17.9975 1.04772 18.4749 1.52513C18.9523 2.00253 19.219 2.64373 19.358 3.67754C19.4989 4.72573 19.5 6.10025 19.5 8V12C19.5 13.8998 19.4989 15.2743 19.358 16.3225C19.219 17.3563 18.9523 17.9975 18.4749 18.4749C17.9975 18.9523 17.3563 19.219 16.3225 19.358C15.2743 19.4989 13.8998 19.5 12 19.5H8C6.10025 19.5 4.72573 19.4989 3.67754 19.358C2.64373 19.219 2.00253 18.9523 1.52513 18.4749C1.04772 17.9975 0.78098 17.3563 0.641988 16.3225C0.501062 15.2743 0.5 13.8998 0.5 12V8Z\"\r\n fill=\"#9AA4B2\"\r\n />\r\n <path\r\n d=\"M0.5 8C0.5 6.10025 0.501062 4.72573 0.641988 3.67754C0.78098 2.64373 1.04772 2.00253 1.52513 1.52513C2.00253 1.04772 2.64373 0.78098 3.67754 0.641988C4.72573 0.501062 6.10025 0.5 8 0.5H12C13.8998 0.5 15.2743 0.501062 16.3225 0.641988C17.3563 0.78098 17.9975 1.04772 18.4749 1.52513C18.9523 2.00253 19.219 2.64373 19.358 3.67754C19.4989 4.72573 19.5 6.10025 19.5 8V12C19.5 13.8998 19.4989 15.2743 19.358 16.3225C19.219 17.3563 18.9523 17.9975 18.4749 18.4749C17.9975 18.9523 17.3563 19.219 16.3225 19.358C15.2743 19.4989 13.8998 19.5 12 19.5H8C6.10025 19.5 4.72573 19.4989 3.67754 19.358C2.64373 19.219 2.00253 18.9523 1.52513 18.4749C1.04772 17.9975 0.78098 17.3563 0.641988 16.3225C0.501062 15.2743 0.5 13.8998 0.5 12V8Z\"\r\n stroke=\"#9AA4B2\"\r\n />\r\n <path d=\"M15.3335 10L4.66683 10\" stroke=\"#E3E8EF\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>;\r\n } else {\r\n return (\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class={`checkbox_default_unchecked ${this.size}`}>\r\n <path\r\n d=\"M0.5 8C0.5 6.10025 0.501062 4.72573 0.641988 3.67754C0.78098 2.64373 1.04772 2.00253 1.52513 1.52513C2.00253 1.04772 2.64373 0.78098 3.67754 0.641988C4.72573 0.501062 6.10025 0.5 8 0.5C9.89975 0.5 11.2743 0.501062 12.3225 0.641988C13.3563 0.78098 13.9975 1.04772 14.4749 1.52513C14.9523 2.00253 15.219 2.64373 15.358 3.67754C15.4989 4.72573 15.5 6.10025 15.5 8C15.5 9.89975 15.4989 11.2743 15.358 12.3225C15.219 13.3563 14.9523 13.9975 14.4749 14.4749C13.9975 14.9523 13.3563 15.219 12.3225 15.358C11.2743 15.4989 9.89975 15.5 8 15.5C6.10025 15.5 4.72573 15.4989 3.67754 15.358C2.64373 15.219 2.00253 14.9523 1.52513 14.4749C1.04772 13.9975 0.78098 13.3563 0.641988 12.3225C0.501062 11.2743 0.5 9.89975 0.5 8Z\"\r\n stroke=\"#CDD5DF\"\r\n />\r\n </svg>\r\n );\r\n }\r\n }\r\n\r\n private renderCircle() {\r\n if (this.checked && this.state === \"default\") {\r\n return (\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class={`circle_default_checked ${this.size}`}>\r\n <rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"15\" rx=\"7.5\" fill=\"#075DB2\" class=\"background\" />\r\n <rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"15\" rx=\"7.5\" stroke=\"#075DB2\" />\r\n <path\r\n d=\"M5.0835 9.04166C5.0835 9.04166 5.7085 9.04166 6.54183 10.5C6.54183 10.5 8.85801 6.68055 10.9168 5.91666\"\r\n stroke=\"white\"\r\n stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n );\r\n } else if (!this.checked && this.state === \"default\") {\r\n return (\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class={`circle_default_unchecked ${this.size}`}>\r\n <rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"15\" rx=\"7.5\" stroke=\"#CDD5DF\" />\r\n </svg>\r\n );\r\n } else if (this.checked && this.state === \"disabled\") {\r\n return (\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class={`circle_disabled_checked ${this.size}`}>\r\n <rect x=\"0.5\" y=\"0.5\" width=\"19\" height=\"19\" rx=\"9.5\" fill=\"#9AA4B2\" />\r\n <rect x=\"0.5\" y=\"0.5\" width=\"19\" height=\"19\" rx=\"9.5\" stroke=\"#9AA4B2\" />\r\n <path\r\n d=\"M5.9165 11.4583C5.9165 11.4583 6.7915 11.4583 7.95817 13.5C7.95817 13.5 11.2008 8.15279 14.0832 7.08334\"\r\n stroke=\"#E3E8EF\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n );\r\n } else if (!this.checked && this.state === \"disabled\") {\r\n return (\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class={`circle_disabled_unchecked ${this.size}`}>\r\n <rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"15\" rx=\"7.5\" stroke=\"#E3E8EF\" />\r\n </svg>\r\n );\r\n }\r\n }\r\n\r\n private renderRadio() {\r\n if (this.state === \"default\" && this.checked) {\r\n return (\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class={`radio_default_checked ${this.size}`}>\r\n <rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"15\" rx=\"7.5\" stroke=\"#075DB2\" />\r\n <circle cx=\"8\" cy=\"8\" r=\"3\" fill=\"#075DB2\" />\r\n </svg>\r\n );\r\n } else if (this.state === \"disabled\" && !this.checked) {\r\n return (\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class={`radio_disabled_unchecked ${this.size}`}>\r\n <rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"15\" rx=\"7.5\" stroke=\"#E3E8EF\" />\r\n </svg>\r\n );\r\n } else if (this.state === \"disabled\" && this.checked) {\r\n return (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" class={`radio_disabled_checked ${this.size}`}>\r\n <rect x=\"0.5\" y=\"0.5\" width=\"19\" height=\"19\" rx=\"9.5\" stroke=\"#9AA4B2\" />\r\n <circle cx=\"10\" cy=\"10\" r=\"4\" fill=\"#9AA4B2\" />\r\n </svg>\r\n );\r\n } else {\r\n return (\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class={`radio_default_unchecked ${this.size}`}>\r\n <rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"15\" rx=\"7.5\" stroke=\"#CDD5DF\" />\r\n </svg>\r\n );\r\n }\r\n }\r\n\r\n private toggleCheckboxState() {\r\n if (this.state === \"default\" && !this.checked) {\r\n this.checked = true;\r\n // console.log(this.checked)\r\n this.checkboxClicked.emit(this.checked);\r\n } else if (this.state === \"default\" && this.checked) {\r\n this.checked = false;\r\n // console.log(this.checked);\r\n this.checkboxClicked.emit(this.checked);\r\n }\r\n }\r\n\r\n private toggleCheckCircleState() {\r\n if ((this.state === \"disabled\" && this.checked) || (this.state === \"disabled\" && !this.checked)) {\r\n return;\r\n }\r\n\r\n if (this.state === \"default\" && !this.checked) {\r\n this.checked = true;\r\n this.checkboxClicked.emit(this.checked);\r\n } else if (this.state == \"default\" && this.checked) {\r\n this.checked = false;\r\n this.checkboxClicked.emit(this.checked);\r\n }\r\n }\r\n\r\n private toggleRadioButtonState() {\r\n if ((this.state === \"disabled\" && !this.checked) || (this.state === \"disabled\" && this.checked)) {\r\n return;\r\n }\r\n if (this.state === \"default\" && !this.checked) {\r\n this.checked = true;\r\n this.checkboxClicked.emit(this.checked);\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <div\r\n class={`checkbox_container ${this.size}`}\r\n onClick={() => {\r\n if (this.type === 'checkbox') {\r\n return this.toggleCheckboxState();\r\n } else if (this.type === 'check_circle') {\r\n return this.toggleCheckCircleState();\r\n } else if (this.type === 'radio') {\r\n return this.toggleRadioButtonState();\r\n }\r\n }}\r\n >\r\n {this.renderSVG()}\r\n </div>\r\n );\r\n }\r\n}","@import './../../global/global.css';\r\n\r\n:host{\r\n position: relative;\r\n}\r\n\r\n.collapse_btn{\r\n background-color: transparent;\r\n border-radius: var(--rounded-full);\r\n display: flex;\r\n width: var(--spacing-7);\r\n height: var(--spacing-7);\r\n padding: var(--spacing-2);\r\n justify-content: center;\r\n align-items: center;\r\n gap: var(--spacing-2);\r\n cursor: pointer;\r\n}\r\n\r\n.collapse_btn.gray:hover{\r\n background-color: var(--color-background-gray-subtler, #EEF2F6);\r\n cursor: pointer;\r\n}\r\n\r\n.collapse_btn.gray:active{\r\n background-color: var(--color-background-gray-subtle, #E3E8EF);\r\n}\r\n\r\n.collapse_btn.white:hover{\r\n background-color: var(--color-blanket-subtle, rgba(33, 44, 101, 0.3));\r\n cursor: pointer;\r\n}\r\n\r\n.collapse_btn.white:active{\r\n background-color: var(--color-blanket, rgba(33, 44, 101, 0.4));\r\n}\r\n\r\n.icon.gray path{\r\n stroke: var(--color-icon, #4B5565);\r\n}\r\n\r\n.icon.white path{\r\n stroke: var(--base-white, #FFFFFF);\r\n}\r\n\r\n.tooltip{\r\n position: absolute;\r\n left: 3.5rem;\r\n bottom: 2.7rem;\r\n}\r\n\r\n.text-xs-semi-bold{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xs);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-t-xs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xs-semi-bold::before,\r\n.text-xs-semi-bold::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.text-xs-semi-bold::before{\r\n margin-bottom: -0.321em;\r\n}\r\n\r\n.text-xs-semi-bold::after{\r\n margin-top: -0.416em;\r\n}","import { Component, Method, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: 'gb-collapse-button',\r\n styleUrl: 'gb-collapse-button.css',\r\n shadow: true,\r\n})\r\nexport class GbCollapseButton {\r\n @Prop() color: 'gray' | 'white';\r\n @Prop({ mutable: true }) isCollapsed: boolean = false;\r\n @Prop({ mutable: true }) action: string = 'collapse';\r\n @Prop({ mutable: true }) isHovered: boolean = false;\r\n\r\n toggleIcon() {\r\n if (this.action === 'collapse') {\r\n this.action = 'expand';\r\n this.isHovered = false;\r\n } else if (this.action === 'expand') {\r\n this.action = 'collapse';\r\n this.isHovered = false;\r\n }\r\n }\r\n\r\n @Method()\r\n async collapseSidebar() {\r\n this.isCollapsed = true;\r\n }\r\n\r\n @Method()\r\n async expandSidebar() {\r\n this.isCollapsed = false;\r\n }\r\n\r\n render() {\r\n return [\r\n <div>\r\n <div class={`collapse_btn ${this.color}`} onClick={this.toggleIcon.bind(this)} onMouseOver={() => (this.isHovered = true)} onMouseOut={() => (this.isHovered = false)}>\r\n {this.action === 'collapse' && [\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" class={`icon ${this.color}`}>\r\n <path\r\n d=\"M9.58321 15C9.58321 15 4.58326 11.3176 4.58325 9.99996C4.58324 8.68237 9.58325 5 9.58325 5M15.4165 15C15.4165 15 10.4166 11.3176 10.4166 9.99996C10.4166 8.68237 15.4166 5 15.4166 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 ]}\r\n {this.action === 'expand' && (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" class={`icon ${this.color}`}>\r\n <path\r\n d=\"M10.4166 15C10.4166 15 15.4166 11.3176 15.4166 9.99996C15.4166 8.68237 10.4166 5 10.4166 5M4.58329 15C4.58329 15 9.58324 11.3176 9.58325 9.99996C9.58326 8.68237 4.58325 5 4.58325 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 )}\r\n </div>\r\n {this.isHovered && this.action === 'collapse' ? (\r\n <gb-tooltip class=\"tooltip\" show-arrow={true} arrow=\"left\">\r\n <p slot=\"label\" class=\"text-xs-semi-bold\">\r\n Collapse\r\n </p>\r\n </gb-tooltip>\r\n ) : this.isHovered && this.action === 'expand' ? (\r\n <gb-tooltip class=\"tooltip\" show-arrow={true} arrow=\"left\">\r\n <p slot=\"label\" class=\"text-xs-semi-bold\">\r\n Expand\r\n </p>\r\n </gb-tooltip>\r\n ) : null}\r\n </div>,\r\n ];\r\n }\r\n}","@import './../../global/global.css';\r\n\r\n.container{\r\n display: flex;\r\n width: 6rem;\r\n padding: var(--spacing-2) var(--spacing-none);\r\n flex-direction: column;\r\n align-items: center;\r\n gap: var(--spacing-1);\r\n cursor: pointer;\r\n}\r\n\r\n.wrapper{\r\n display: flex;\r\n height: 3rem;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 0.25rem;\r\n}\r\n\r\n.bar{\r\n position: absolute;\r\n left: 0;\r\n top: 0;\r\n height: 100%;\r\n}\r\n\r\n.icon{\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.icon svg{\r\n width: 1.5rem;\r\n height: 1.5rem;\r\n}\r\n\r\n.container{\r\n position: relative;\r\n}\r\n\r\n/* State Styles*/\r\n.container.default.colored_background:hover{\r\n background: var(--color-blanket, rgba(33, 44, 101, 0.2));\r\n}\r\n\r\n.container.colored_background.active{\r\n background: var(--color-background-information-bold, #042F59);\r\n}\r\n\r\n.container.default.plain_background:hover{\r\n background: var(--color-background-gray-subtler, #EEF2F6);\r\n}\r\n\r\n.container.plain_background.active{\r\n background: var(--color-background-information-subtler, #C8E0F9);\r\n}\r\n\r\n/* Icon Color Styles */\r\n.icon.plain_background path[stroke] {\r\n stroke: var(--color-icon, #4B5565);\r\n}\r\n\r\n.icon.plain_background.active path[stroke] {\r\n stroke: var(--color-icon-information-bold, #042F59);\r\n}\r\n\r\n.icon.plain_background.active path[fill] {\r\n fill: var(--color-icon-information-bold, #042F59);\r\n}\r\n\r\n.icon.plain_background path#Icon[fill] {\r\n fill: var(--color-icon, #4B5565);\r\n}\r\n\r\n.icon.plain_background.active path#Icon[fill] {\r\n fill: var(--color-icon-information-bold, #042F59);\r\n}\r\n\r\n.icon.plain_background.active path#Accent[fill] {\r\n fill: var(--color-icon-information-bold, #042F59);\r\n}\r\n\r\n.icon.plain_background circle[stroke] {\r\n stroke: var(--color-icon, #4B5565);\r\n}\r\n\r\n.icon.plain_background.active circle[fill] {\r\n fill: var(--color-icon-information-bold, #042F59);\r\n}\r\n\r\n.icon.colored_background path[stroke] {\r\n stroke: var(--color-icon-inverse, #FFFFFF);\r\n}\r\n\r\n.icon.colored_background.active path[fill] {\r\n fill: var(--color-icon-inverse, #FFFFFF);\r\n}\r\n\r\n.icon.colored_background path#Icon[fill] {\r\n fill: var(--color-icon-inverse, #FFFFFF);\r\n}\r\n\r\n.icon.colored_background.active path#Accent[fill] {\r\n fill: var(--color-icon-inverse, #FFFFFF);\r\n}\r\n\r\n.icon.colored_background circle[stroke] {\r\n stroke: var(--color-icon-inverse, #FFFFFF);\r\n}\r\n\r\n.icon.colored_background.active circle[fill] {\r\n fill: var(--color-icon-inverse, #FFFFFF);\r\n}\r\n\r\n.icon.plain_background.default path[fill],\r\n.icon.colored_background.default path[fill],\r\n.icon.plain_background.default circle[fill],\r\n.icon.colored_background.default circle[fill] {\r\n fill: transparent;\r\n}\r\n\r\n/* Text Styles */\r\n.label_text.colored_background {\r\n color: #FFFFFF; /**/\r\n}\r\n\r\n.label_text.plain_background {\r\n color: var(--color-text, #4B5565); \r\n} \r\n\r\n.label_text.plain_background.active {\r\n color: var(--color-text-information-bold, #042F59);\r\n}\r\n\r\n/* Compact Item Styles */\r\n.compact_container{\r\n display: flex;\r\n width: 6rem;\r\n padding: var(--spacing-2) 0rem;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n gap: var(--spacing-1);\r\n}\r\n\r\n.compact_wrapper{\r\n display: flex;\r\n width: 3rem;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 0.5rem;\r\n border-radius: var(--rounded-sm);\r\n position: relative;\r\n cursor: pointer;\r\n}\r\n\r\n.compact_bar{\r\n position: absolute;\r\n top: 0.72rem;\r\n left: 0;\r\n}\r\n\r\n.compact_wrapper.colored_background:hover{\r\n background: var(--color-blanket, rgba(33, 44, 101, 0.2));\r\n}\r\n\r\n.compact_wrapper.colored_background.active{\r\n background: #042F59;\r\n}\r\n\r\n.compact_wrapper.plain_background:hover{\r\n background: var(--color-background-gray-subtler, #EEF2F6);\r\n}\r\n\r\n.compact_wrapper.plain_background.active{\r\n background: var(--color-background-information-subtler, #C8E0F9);\r\n}\r\n\r\n.compact_icon_container{\r\n display: flex;\r\n height: 3rem;\r\n padding: var(--spacing-none) var(--spacing-5);\r\n justify-content: center;\r\n align-items: center;\r\n flex: 1 0 0;\r\n border-radius: 62.4375rem;\r\n}\r\n\r\n.tooltip{\r\n position: absolute;\r\n top: 0.4rem;\r\n left: 3.3rem;\r\n}","import { Component, Element, Prop, State, getAssetPath, h, Fragment } from \"@stencil/core\";\r\nimport { GeneralBackgroundCategories } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n tag: 'gb-complex-primary-side-bar-item',\r\n styleUrl: 'gb-complex-primary-side-bar-item.css',\r\n shadow: true\r\n})\r\n\r\nexport class GbComplexPrimarySideBarItem {\r\n @Prop() category: GeneralBackgroundCategories;\r\n @Prop() itemStyle: 'standard' | 'compact';\r\n @Prop() state: 'default' | 'active';\r\n @Prop() icon: string = '';\r\n @Prop() label: string = 'Recruitment';\r\n @Prop({ mutable: true }) showTooltip: boolean = false;\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 componentWillLoad() {\r\n this.loadIcon(this.icon);\r\n }\r\n\r\n // componentDidLoad() {\r\n \r\n // }\r\n\r\n render() {\r\n const redBarSrc = getAssetPath(`assets/complex_bar_red.svg`);\r\n const whiteBarSrc = getAssetPath(`assets/complex_bar_white.svg`);\r\n const redCompactBarSrc = getAssetPath(`assets/compact_bar_red.svg`);\r\n const whiteCompactBarSrc = getAssetPath(`assets/compact_bar_white.svg`);\r\n\r\n return (\r\n <>\r\n {this.itemStyle === 'standard' && (\r\n <div class={`container ${this.state} ${this.category}`}>\r\n <div class={`wrapper ${this.state} ${this.category}`}>\r\n {this.state === 'active' && this.category === 'plain_background' && <img src={redBarSrc} alt=\"\" class=\"bar\" />}\r\n {this.state === 'active' && this.category === 'colored_background' && <img src={whiteBarSrc} alt=\"\" class=\"bar\" />}\r\n <div class=\"icon_container\">\r\n <div class={`icon ${this.state} ${this.category}`} innerHTML={this.leadingIconSvg}></div>\r\n </div>\r\n <p class={`label_text ${this.state} ${this.category} ${this.state === 'active' ? 'text-xs-semi-bold' : 'text-xs-regular'}`}>{this.label}</p>\r\n </div>\r\n </div>\r\n )}\r\n {this.itemStyle === 'compact' && (\r\n <div class=\"compact_container\">\r\n <div class={`compact_wrapper ${this.state} ${this.category}`} onMouseEnter={() => (this.showTooltip = true)} onMouseLeave={() => (this.showTooltip = false)}>\r\n {this.state === 'active' && this.category === 'plain_background' && <img src={redCompactBarSrc} alt=\"\" class=\"compact_bar\" />}\r\n {this.state === 'active' && this.category === 'colored_background' && <img src={whiteCompactBarSrc} alt=\"\" class=\"compact_bar\" />}\r\n <div class=\"compact_icon_container\">\r\n <div class={`icon ${this.state} ${this.category}`} innerHTML={this.leadingIconSvg}></div>\r\n </div>\r\n {this.itemStyle === 'compact' && this.showTooltip && (\r\n <gb-tooltip show-arrow={true} arrow=\"left\" class=\"tooltip\">\r\n <p slot=\"label\">{this.label}</p>\r\n </gb-tooltip>\r\n )}\r\n </div>\r\n </div>\r\n )}\r\n </>\r\n );\r\n }\r\n}","@import './../../global/global.css';\r\n\r\n:host {\r\n position: relative;\r\n}\r\n\r\n.container {\r\n display: flex;\r\n padding: var(--spacing-none) var(--spacing-4);\r\n flex-direction: column;\r\n gap: 0.5rem;\r\n}\r\n\r\n.icon{\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.container.full_with_label {\r\n width: 14.875rem;\r\n}\r\n\r\n.container.icon_only {\r\n width: fit-content;\r\n}\r\n\r\n.secondary_side_bar_item_div {\r\n display: flex;\r\n align-items: center;\r\n gap: var(--spacing-3);\r\n border-radius: var(--rounded-sm);\r\n padding: var(--spacing-2) var(--spacing-4);\r\n cursor: pointer;\r\n}\r\n\r\n.secondary_side_bar_item_div.icon_only {\r\n width: fit-content;\r\n}\r\n\r\n/* Category Styles */\r\n.secondary_side_bar_item_div.colored_background.default,\r\n.secondary_side_bar_item_div.plain_background.default {\r\n background: transparent;\r\n}\r\n\r\n.secondary_side_bar_item_div.colored_background.default:hover {\r\n background: var(--color-background-information-subtler, #c8e0f9);\r\n}\r\n\r\n.secondary_side_bar_item_div.colored_background.active {\r\n background: var(--color-background-information-subtle, #9ac7f4);\r\n}\r\n\r\n.secondary_side_bar_item_div.plain_background.default:hover {\r\n background: var(--color-background-gray-subtler, #eef2f6);\r\n}\r\n\r\n.secondary_side_bar_item_div.plain_background.active {\r\n background: var(--color-background-information-subtler, #c8e0f9);\r\n}\r\n\r\n/* Icon Color Styles */\r\n.icon.plain_background path[stroke] {\r\n stroke: var(--color-icon, #4b5565);\r\n}\r\n\r\n.icon.plain_background.active path[stroke] {\r\n stroke: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.icon.plain_background.active path[fill] {\r\n fill: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.icon.plain_background path#Icon[fill] {\r\n fill: var(--color-icon, #4b5565);\r\n}\r\n\r\n.icon.plain_background.active path#Icon[fill] {\r\n fill: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.icon.plain_background.active path#Accent[fill] {\r\n fill: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.icon.plain_background circle[stroke] {\r\n stroke: var(--color-icon, #4b5565);\r\n}\r\n\r\n.icon.plain_background.active circle[fill] {\r\n fill: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.icon.colored_background path[stroke] {\r\n stroke: var(--color-icon, #4B5565);\r\n}\r\n\r\n.icon.colored_background.active path[stroke] {\r\n stroke: var(--color-icon-information-bold, #042F59);\r\n}\r\n\r\n.icon.colored_background.active path[fill] {\r\n fill: var(--color-icon-information-bold, #042F59);\r\n}\r\n\r\n.icon.colored_background path#Icon[fill] {\r\n fill: var(--color-icon, #4B5565);\r\n}\r\n\r\n.icon.colored_background.active path#Icon[fill] {\r\n fill: var(--color-icon-information-bold, #042F59);\r\n}\r\n\r\n.icon.colored_background.active path#Accent[fill] {\r\n fill: var(--color-icon-information-bold, #042F59);\r\n}\r\n\r\n.icon.colored_background circle[stroke] {\r\n stroke: var(--color-icon, #4B5565);\r\n}\r\n\r\n.icon.colored_background.active circle[fill] {\r\n fill: var(--color-icon-information-bold, #042F59);\r\n}\r\n\r\n.icon.plain_background.default path[fill],\r\n.icon.colored_background.default path[fill],\r\n.icon.plain_background.default circle[fill],\r\n.icon.colored_background.default circle[fill] {\r\n fill: transparent;\r\n}\r\n\r\n/* Text Styles */\r\n.label_text.colored_background,\r\n.label_text.plain_background {\r\n color: var(--color-text, #4b5565); /**/\r\n}\r\n\r\n.label_text.colored_background.active,\r\n.label_text.plain_background.active {\r\n color: var(--color-text-information-bold, #042f59);\r\n}\r\n\r\n.tooltip {\r\n position: absolute;\r\n top: 0.3rem;\r\n left: 4.8rem;\r\n}\r\n","import { Component, Element, Prop, State, getAssetPath, h } from \"@stencil/core\";\r\nimport { GeneralBackgroundCategories } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n tag: 'gb-complex-secondary-side-bar-item',\r\n styleUrl: 'gb-complex-secondary-side-bar-item.css',\r\n shadow: true\r\n})\r\n\r\nexport class GbComplexSecondarySideBarItem {\r\n @Prop() state: 'default' | 'active';\r\n @Prop() type: 'full_with_label' | 'icon_only';\r\n @Prop() category: GeneralBackgroundCategories;\r\n @Prop() label: string = 'Appraisal';\r\n @Prop() icon: string = '';\r\n @Prop({ mutable: true }) showTooltip: boolean = false;\r\n @Element() el: HTMLElement;\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 componentDidLoad() {\r\n this.loadIcon(this.icon);\r\n }\r\n\r\n render() {\r\n return (\r\n <div class={`container ${this.type}`}>\r\n <div\r\n class={`secondary_side_bar_item_div ${this.state} ${this.type} ${this.category}`}\r\n onMouseEnter={() => (this.showTooltip = true)}\r\n onMouseLeave={() => (this.showTooltip = false)}\r\n >\r\n <div class=\"icon\">\r\n <div class=\"icon_container\">\r\n <div class={`icon ${this.state} ${this.category}`} innerHTML={this.leadingIconSvg}></div>\r\n </div>\r\n </div>\r\n {this.type === 'full_with_label' && (\r\n <div class=\"text\">\r\n <p class={`label_text ${this.state} ${this.category} ${this.state !== 'active' ? 'text-md-medium' : 'text-md-semi-bold'}`}>{this.label}</p>\r\n </div>\r\n )}\r\n {this.type === 'icon_only' && this.showTooltip && (\r\n <gb-tooltip show-arrow={true} arrow=\"left\" class=\"tooltip\">\r\n <p slot=\"label\">{this.label}</p>\r\n </gb-tooltip>\r\n )}\r\n </div>\r\n </div>\r\n );\r\n }\r\n}","@import './../../global/global.css';\r\n\r\n.help_tooltip{\r\n display: flex;\r\n position: relative;\r\n width: fit-content;\r\n height: fit-content;\r\n}\r\n\r\n.tooltip{\r\n position: absolute;\r\n top: -7rem;\r\n right: 5.75rem;\r\n}","import { Component, Prop, h, State, Element } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: 'gb-help-tooltip',\r\n styleUrl: 'gb-help-tooltip.css',\r\n shadow: true,\r\n})\r\nexport class GbHelpTooltip {\r\n @State() showHelpTooltip: boolean = false;\r\n @Prop() showArrow: boolean = false;\r\n @Prop() showSupportingText: boolean = false;\r\n @Element() el: HTMLElement;\r\n\r\n componentDidLoad() {\r\n const mainTextSlot = this.el.querySelector('[slot=\"label\"]');\r\n const supportingTextSlot = this.el.querySelector('[slot=\"supporting_text\"]');\r\n\r\n if (mainTextSlot) {\r\n mainTextSlot.classList.add('text-xs-semi-bold');\r\n }\r\n\r\n if (supportingTextSlot) {\r\n supportingTextSlot.classList.add('text-xs-regular');\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <div class={`help_tooltip`}>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 16 16\"\r\n fill=\"none\"\r\n onMouseEnter={() => (this.showHelpTooltip = true)}\r\n onMouseLeave={() => (this.showHelpTooltip = false)}\r\n class=\"help_circle\"\r\n >\r\n <path\r\n d=\"M6.66659 6C6.66659 5.26362 7.26354 4.66666 7.99992 4.66666C8.7363 4.66666 9.33325 5.26362 9.33325 6C9.33325 6.26543 9.25569 6.51275 9.12199 6.72052C8.72352 7.33978 7.99992 7.93028 7.99992 8.66666V9M7.99458 11.3333H8.00057M14.6666 8C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8C1.33325 4.3181 4.31802 1.33333 7.99992 1.33333C11.6818 1.33333 14.6666 4.3181 14.6666 8Z\"\r\n stroke=\"#697586\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n {this.showHelpTooltip && (\r\n <gb-tooltip show-arrow={true} arrow=\"bottom_right\" show-supporting-text={this.showSupportingText} class=\"tooltip\">\r\n <slot name=\"label\" slot=\"label\"></slot>\r\n <slot name=\"supporting_text\" slot=\"supporting_text\"></slot>\r\n </gb-tooltip>\r\n )}\r\n </div>\r\n );\r\n }\r\n}","@import './../../global/global.css';\r\n\r\n.dropdown-container {\r\n display: flex;\r\n padding: var(--spacing-1);\r\n align-items: center;\r\n gap: var(--spacing-none);\r\n border-radius: var(--rounded-none);\r\n cursor: pointer;\r\n}\r\n\r\n.dropdown-item {\r\n display: flex;\r\n justify-content: flex-start;\r\n align-items: center;\r\n gap: var(--spacing-2);\r\n flex: 1 0 0;\r\n min-width: 0;\r\n border-radius: var(--rounded-xs);\r\n cursor: pointer;\r\n color: var(--color-text, #4b5565);\r\n font-family: var(--Font-Family-Body, Sora);\r\n font-style: normal;\r\n letter-spacing: var(--Font-Letter-spacing-T-md, 0px);\r\n}\r\n\r\n/* .name_text{\r\n max-width: 5rem;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n} */\r\n\r\n.content {\r\n display: flex;\r\n align-items: center;\r\n gap: 0.5rem; /* if needed */\r\n min-width: 0; /* ❗ critical for ellipsis to work */\r\n}\r\n\r\n::slotted([slot='name']) {\r\n width: 100%;\r\n /* max-width: 15rem; */\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n flex: 1 1 auto;\r\n white-space: nowrap;\r\n}\r\n\r\n::slotted([slot='name'].no_wrap) {\r\n white-space: nowrap;\r\n}\r\n\r\n::slotted([slot='supporting_text']) {\r\n font-size: var(--Font-Size-T-sm, 14px);\r\n font-weight: var(--Font-Weight-Regular, 400);\r\n line-height: var(--Font-Line-height-T-sm, 20px); /* 142.857% */\r\n overflow: hidden;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n}\r\n\r\n/* Icon Styles */\r\n.icon_leading {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n\r\n.icon_leading svg {\r\n width: 1.25rem;\r\n height: 1.25rem;\r\n}\r\n\r\n.icon_leading path[fill] {\r\n fill: var(--color-icon, #4B5565);\r\n}\r\n\r\n.icon_leading path[stroke] {\r\n stroke: var(--color-icon, #4B5565);\r\n}\r\n\r\n.icon_leading path#Icon[fill] {\r\n fill: var(--color-icon, #4B5565);\r\n}\r\n\r\n.icon_leading path#Icon[stroke] {\r\n stroke: var(--color-icon, #4B5565);\r\n}\r\n\r\n.icon_leading path#Accent[fill] {\r\n fill: var(--color-Accent, #4B5565);\r\n}\r\n\r\n.icon_leading path#Icon[stroke] {\r\n stroke: var(--color-icon, #4B5565);\r\n}\r\n\r\n.icon_leading circle[fill] {\r\n fill: var(--color-icon, #4B5565);\r\n}\r\n\r\n.icon_leading circle[stroke] {\r\n stroke: var(--color-icon, #4B5565);\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}\r\n","import { Component, Element, Prop, h, Fragment, Event, EventEmitter, State, getAssetPath } 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 @Prop() iconLeading: boolean = false;\r\n @Prop() iconLeadingSwap: string = '';\r\n @State() leadingIconSvg: string = '';\r\n @Event() dropdownItemClicked: EventEmitter<void>;\r\n\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\r\n const parser = new DOMParser();\r\n const svgDoc = parser.parseFromString(svg, 'image/svg+xml');\r\n const svgElement = svgDoc.documentElement;\r\n\r\n // Add `has-opacity` class to all elements that have an opacity attribute\r\n const elementsWithOpacity = svgElement.querySelectorAll('[opacity]');\r\n elementsWithOpacity.forEach(el => {\r\n el.classList.add('has_opacity');\r\n });\r\n\r\n // Serialize and store\r\n const modifiedSvg = svgElement.outerHTML;\r\n // console.log(modifiedSvg)\r\n this.leadingIconSvg = modifiedSvg;\r\n }\r\n\r\n componentWillLoad() {\r\n this.loadIcon(this.iconLeadingSwap);\r\n }\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' && this.iconLeading && <div class={`icon_leading ${this.state}`} innerHTML={this.leadingIconSvg}></div>}\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}\r\n","@import './../../global/global.css';\r\n:host {\r\n position: relative;\r\n}\r\n\r\ninput {\r\n background: transparent;\r\n border: none;\r\n outline: none;\r\n}\r\n\r\n/* Target Chrome/Edge/Safari autofill */\r\ninput:-webkit-autofill,\r\ninput:-webkit-autofill:hover,\r\ninput:-webkit-autofill:focus,\r\ninput:-webkit-autofill:active {\r\n /* Make the text use your normal color */ \r\n -webkit-text-fill-color: var(--color-text, #4b5565);\r\n\r\n /* Remove the yellow background Chrome applies by covering it */\r\n transition: background-color 9999s ease-in-out 0s;\r\n\r\n /* Or explicitly paint your own background */\r\n box-shadow: 0 0 0 1000px transparent inset !important;\r\n}\r\n\r\n/* Firefox */\r\ninput:autofill {\r\n background-color: transparent !important;\r\n color: var(--color-text, #4b5565);\r\n}\r\n\r\n\r\n.input_container,\r\n.input_with_label {\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--spacing-2);\r\n}\r\n\r\n.label {\r\n color: var(--color-text, #4b5565);\r\n}\r\n\r\n.hint_text {\r\n color: var(--color-text-subtle, #697586);\r\n}\r\n\r\n.error_text {\r\n color: var(--color-text-danger, #b51726);\r\n}\r\n\r\n.content {\r\n width: 100%;\r\n height: 100%;\r\n border: none;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n color: var(--color-text, #4b5565);\r\n}\r\n\r\n.content::placeholder,\r\n.input_like::placeholder {\r\n color: var(--color-text-disabled, #cdd5df);\r\n}\r\n\r\n.content:focus,\r\n.input_like:focus {\r\n outline: none;\r\n}\r\n\r\n.icon {\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.input {\r\n display: flex;\r\n align-items: center;\r\n gap: var(--spacing-2);\r\n align-self: stretch;\r\n border-radius: var(--rounded-sm);\r\n}\r\n\r\n.input,\r\n.input.icon_leading,\r\n.password_input {\r\n border: 1px solid var(--color-border-input, #CDD5DF);\r\n background: var(--color-background-card, #ffffff);\r\n}\r\n\r\n.input.leading_text {\r\n flex-grow: 1;\r\n border-radius: var(--rounded-none, 0rem) 0.5rem 0.5rem var(--rounded-none, 0rem);\r\n}\r\n\r\n.leading_text_input {\r\n display: flex;\r\n gap: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n}\r\n\r\n.add_on {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n border: 1px solid var(--color-border-input, #CDD5DF);\r\n border-right: none;\r\n padding: var(--spacing-2) var(--spacing-3);\r\n border-radius: 0.5rem var(--rounded-none) var(--rounded-none) 0.5rem;\r\n}\r\n\r\n.text_input {\r\n flex-grow: 1;\r\n height: 100%;\r\n}\r\n\r\n.trailing_button_text_input,\r\n.leading_dropdown_text_input {\r\n display: flex;\r\n flex-grow: 1;\r\n gap: var(--spacing-2);\r\n}\r\n\r\n.trailing_button_text_input.sm,\r\n.trailing_button_text_input.md {\r\n padding: var(--spacing-none) 0 0 var(--spacing-3);\r\n}\r\n\r\n.input.trailing_button.sm.default,\r\n.input.trailing_button.md.default {\r\n padding: 0;\r\n}\r\n\r\n.leading_dropdown_dropdown,\r\n.trailing_dropdown_dropdown {\r\n display: flex;\r\n align-items: center;\r\n gap: var(--spacing-1);\r\n cursor: pointer;\r\n}\r\n\r\n.dropdown_arrow {\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.tick {\r\n width: 1.25rem;\r\n height: 1.25rem;\r\n}\r\n\r\n.help_circle {\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n/* .input.tags{\r\n position: relative;\r\n} */\r\n\r\n/* Size Styles */\r\n.input.sm {\r\n min-height: 2.5rem;\r\n}\r\n\r\n.input.md {\r\n min-height: 3rem;\r\n}\r\n\r\n.input.sm.default,\r\n.input.sm.password_icon_leading {\r\n padding: var(--spacing-none) var(--spacing-3);\r\n}\r\n\r\n.input.sm.icon_leading {\r\n position: relative;\r\n padding: var(--spacing-none) var(--spacing-2) var(--spacing-none) var(--spacing-3);\r\n}\r\n\r\n.input.sm.payment_input {\r\n padding: var(--spacing-none) var(--spacing-3);\r\n}\r\n\r\n.input.md.default {\r\n padding: var(--spacing-none) 0.875rem var(--spacing-none) var(--spacing-3);\r\n}\r\n\r\n.input.md.icon_leading {\r\n position: relative;\r\n padding: var(--spacing-none) var(--spacing-2) var(--spacing-none) var(--spacing-3);\r\n}\r\n\r\n.input.md.password_icon_leading {\r\n padding: var(--spacing-none) var(--spacing-2) var(--spacing-none) var(--spacing-3);\r\n}\r\n\r\n.input.md.payment_input {\r\n padding: 0 0.875rem 0 var(--spacing-3);\r\n}\r\n\r\n/* State Styles */\r\n.input:focus-within,\r\n.password_input:focus-within,\r\n.count_text_input:focus-within,\r\n.input_like_parent:focus-within {\r\n border: 1.3px solid var(--color-border-selected, #075db2);\r\n}\r\n\r\n.input.disabled,\r\n.password_input.disabled,\r\n.count_text_input.disabled,\r\n.action.disabled,\r\n.input_like_parent.disabled {\r\n border: 1px solid var(--color-border-disabled, #e3e8ef);\r\n}\r\n\r\n.input.disabled,\r\n.content.disabled,\r\n.password_input.disabled,\r\n.count_text_input.disabled,\r\n.input_like_parent.disabled,\r\n.input_like.disabled {\r\n background: var(--color-background-disabled, #f6f8fa);\r\n color: var(--color-text-subtle, #697586);\r\n cursor: not-allowed;\r\n pointer-events: none;\r\n}\r\n\r\n.input_group.disabled {\r\n cursor: not-allowed;\r\n pointer-events: none;\r\n}\r\n\r\n.icon path[fill] {\r\n fill: var(--color-icon, #4b5565);\r\n}\r\n\r\n.icon path[stroke] {\r\n stroke: var(--color-icon, #4b5565);\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,\r\n.dropdown_menu.trailing_dropdown{\r\n height: 10rem;\r\n overflow-y: auto;\r\n}\r\n\r\n.dropdown_menu.leading_dropdown.top.sm {\r\n bottom: 4rem;\r\n left: 0;\r\n}\r\n\r\n.dropdown_menu.leading_dropdown.top.md {\r\n bottom: 4.5rem;\r\n left: 0;\r\n}\r\n\r\n.dropdown_menu.leading_dropdown.bottom.sm {\r\n top: 4rem;\r\n left: 0;\r\n}\r\n\r\n.dropdown_menu.leading_dropdown.bottom.md {\r\n top: 4.5rem;\r\n left: 0;\r\n}\r\n\r\n.dropdown_menu.trailing_dropdown.top.sm {\r\n bottom: 3rem;\r\n right: 0;\r\n}\r\n\r\n.dropdown_menu.trailing_dropdown.top.md {\r\n bottom: 3.5rem;\r\n right: 0;\r\n}\r\n\r\n.dropdown_menu.trailing_dropdown.bottom.sm {\r\n top: 4rem;\r\n right: 0;\r\n}\r\n\r\n.dropdown_menu.trailing_dropdown.bottom.md {\r\n top: 4.5rem;\r\n right: 0;\r\n}\r\n\r\n/* Input Tags Styles */\r\n.input_group {\r\n --height: auto;\r\n --inputheight: 4.5rem;\r\n --weight: 100%;\r\n /* flex-direction: row-reverse; */\r\n display: flex;\r\n flex-direction: column;\r\n position: relative;\r\n}\r\n\r\n.input_like_parent {\r\n border: 1px solid var(--color-border-input, #CDD5DF);\r\n border-radius: var(--rounded-sm);\r\n display: flex;\r\n cursor: pointer;\r\n /* flex-wrap: wrap; */\r\n}\r\n\r\n.input_like_parent.sm {\r\n padding: 0.5rem 0.75rem 0.5rem var(--spacing-3);\r\n}\r\n\r\n.input_like_parent.md {\r\n padding: 0.625rem 0.875rem 0.625rem var(--spacing-3);\r\n}\r\n\r\n.input_field {\r\n display: flex;\r\n gap: var(--spacing-2);\r\n align-items: center;\r\n}\r\n\r\n.hidden-span {\r\n visibility: hidden;\r\n position: absolute;\r\n max-width: 100%;\r\n white-space: pre; /* Preserves spaces */\r\n}\r\n\r\n.input_like {\r\n border: none;\r\n color: var(--color-text, #4b5565);\r\n}\r\n\r\n.results_display {\r\n display: flex;\r\n flex-wrap: wrap;\r\n position: relative;\r\n gap: 0.5rem;\r\n background-color: var(--color-surface, #ffffff);\r\n}\r\n\r\n.results_display.disabled {\r\n background: var(--color-background-disabled, #f6f8fa);\r\n}\r\n\r\n.tags {\r\n padding-top: 1rem;\r\n}\r\n\r\n.dropdown_list.show {\r\n display: block;\r\n}\r\n\r\n.tags_dropdown_menu {\r\n display: flex;\r\n min-width: 100%;\r\n width: fit-content;\r\n max-height: 15rem;\r\n padding: var(--spacing-none);\r\n flex-direction: column;\r\n align-items: stretch;\r\n border-radius: var(--rounded-sm);\r\n border: 1px solid var(--color-border-subtler, #e3e8ef);\r\n background: var(--color-surface, #ffffff);\r\n box-shadow: var(--shadow-sm);\r\n position: absolute;\r\n z-index: 99999;\r\n gap: var(--spacing-none);\r\n transition: 1s ease-in-out;\r\n overflow-y: auto;\r\n}\r\n\r\n.tags_dropdown_menu.top {\r\n bottom: 105%;\r\n}\r\n\r\n.tags_dropdown_menu.bottom {\r\n top: 105%;\r\n}\r\n\r\n.input_close_button {\r\n position: absolute;\r\n z-index: 9999;\r\n}\r\n\r\n.input_close_button.sm {\r\n right: 0.2rem;\r\n top: 0.15rem;\r\n}\r\n\r\n.input_close_button.md {\r\n right: 0.3rem;\r\n top: 0.25rem;\r\n}\r\n\r\n.loader {\r\n border: 3px solid var(--color-background-gray, #cdd5df); /* Light grey */\r\n border-top: 3px solid var(--color-background-selected, #075db2); /* Blue */\r\n border-radius: 50%;\r\n width: 10px;\r\n height: 10px;\r\n animation: spin 2s linear infinite;\r\n}\r\n\r\n@keyframes spin {\r\n 0% {\r\n transform: rotate(0deg);\r\n }\r\n 100% {\r\n transform: rotate(360deg);\r\n }\r\n}\r\n","import { Component, Prop, h, State, Event, EventEmitter, Fragment, Element, getAssetPath, Watch, Listen, AttachInternals, Method } from '@stencil/core';\r\nimport { GeneralSizes, InputFieldTypes, StateEnum } from '../../models/reusableModels';\r\n\r\n@Component({\r\n tag: 'gb-input-field',\r\n styleUrl: 'gb-input-field.css',\r\n shadow: true,\r\n formAssociated: true,\r\n})\r\nexport class GbInputField {\r\n @AttachInternals() internals: ElementInternals;\r\n @Prop() size: GeneralSizes;\r\n @Prop() type: InputFieldTypes;\r\n @Prop() inputType: string = 'text';\r\n @Prop() minLength: number;\r\n @Prop() maxLength: number;\r\n @Prop({ mutable: true }) destructive: boolean = false;\r\n @Prop() state: 'default' | 'filled' | 'active' | 'disabled';\r\n @Prop() showLabel: boolean = false;\r\n @Prop() label: string = '';\r\n @Prop() showHintText: boolean = false;\r\n @Prop() hintText: string = '';\r\n @Prop() errorText: string = '';\r\n @Prop() showPlaceholder: boolean = false;\r\n @Prop() placeholder: string = '';\r\n @Prop() showHelpIcon: boolean = false;\r\n @Prop() showValidation: boolean = false;\r\n @Prop() showCountryIcon: boolean = false;\r\n @Prop() iconSwap?: string;\r\n @Prop({ mutable: true }) showCloseButton?: boolean = false;\r\n @Prop({ mutable: true }) options: string[] = [\r\n // '+234', 'NGN', 'CAD', '+234', 'NGN', 'CAD', '+234', 'NGN', 'CAD', '+234', 'NGN', 'CAD', '+234', 'NGN', 'CAD'\r\n ];\r\n @Prop({ reflect: true }) idOfInput: string;\r\n @Prop({ reflect: true }) labelText: string;\r\n @Prop({ reflect: true }) isReadOnly: boolean = false;\r\n @Prop({ mutable: true }) results: any[] = [\r\n // { objectName: 'John Doe', objectValue: 'john.doe@example.com' },\r\n // { objectName: 'Jane Smith', objectValue: 'jane.smith@example.com' },\r\n // { objectName: 'Alice Johnson', objectValue: 'alice.johnson@example.com' },\r\n // { objectName: 'Emmanuel Kadiri', objectValue: 'kadiri2047@gmail.com' },\r\n // { objectName: 'Gideon Ogunkola', objectValue: 'gideon@example.com' },\r\n // 10,\r\n // 20,\r\n // 30,\r\n // 40,\r\n // 50,\r\n ];\r\n @Prop() menuPosition: 'top' | 'bottom';\r\n @Prop() icon: 'country' | 'avatar' | 'dot' | 'false';\r\n @Prop({ mutable: true }) value: any = [\r\n // { objectName: 'John Doe', objectValue: 'john.doe@example.com' },\r\n // { objectName: 'Jane Smith', objectValue: 'jane.smith@example.com' },\r\n // { objectName: 'Alice Johnson', objectValue: 'alice.johnson@example.com' },\r\n // { objectName: 'Emmanuel Kadiri', objectValue: 'kadiri2047@gmail.com' },\r\n // 10,\r\n ];\r\n @Prop({ reflect: true }) required: boolean = false;\r\n @Prop({ mutable: true }) loading: boolean = false;\r\n @Prop() formatLabel: boolean = true;\r\n @State() inputValue: string = '';\r\n @State() tags: string[] = [];\r\n @State() leadingIconSvg: string = '';\r\n @State() isPasswordVisible: boolean = false;\r\n @State() showDropdown: boolean = false;\r\n @State() selectedItem: string = '';\r\n @State() selectedItems: any[] = [];\r\n @State() unselectedItems: any[] = [];\r\n @State() paddingLeft: string = '1rem';\r\n @State() paddingTop: string = '0rem';\r\n @State() dropdownOpen: boolean = false;\r\n @State() show: boolean = false;\r\n @State() showSpinner: boolean = false;\r\n @State() internalLoading: boolean = this.loading;\r\n @Event() inputValueChanged: EventEmitter<any>;\r\n @Event() buttonClicked: EventEmitter<void>;\r\n @Event() plusButtonClicked: EventEmitter<void>;\r\n @Event() minusButtonClicked: 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 @Method()\r\n async isDestructive() {\r\n this.destructive = true;\r\n }\r\n\r\n @Method()\r\n async isNotDestructive() {\r\n this.destructive = false;\r\n }\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 onPlusButtonClicked() {\r\n this.plusButtonClicked.emit();\r\n }\r\n\r\n onMinusButtonClicked() {\r\n this.minusButtonClicked.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\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({ combined: `${this.selectedItem}${this.inputValue}`, prefix: this.selectedItem, value: this.inputValue });\r\n } else {\r\n this.inputValueChanged.emit(this.inputValue);\r\n }\r\n }\r\n\r\n handleInputFocus() {\r\n if (this.destructive) {\r\n this.destructive = false;\r\n }\r\n }\r\n\r\n clearInput() {\r\n if (this.inputRef) {\r\n this.inputRef.value = '';\r\n this.inputValue = this.inputRef.value;\r\n this.showCloseButton = false;\r\n this.inputValueChanged.emit(this.inputValue);\r\n }\r\n }\r\n\r\n /* Function to handle and emit the inputted values */\r\n togglePasswordVisibility() {\r\n this.isPasswordVisible = !this.isPasswordVisible;\r\n }\r\n\r\n @Watch('options')\r\n optionsChanged(newOptions: string[]) {\r\n // Update selectedItem when options are loaded or changed\r\n if (newOptions.length > 0 && !this.selectedItem) {\r\n this.selectedItem = newOptions[0];\r\n }\r\n }\r\n\r\n @Watch('loading')\r\n onLoadingChanged(newLoading: boolean) {\r\n this.internalLoading = newLoading;\r\n }\r\n\r\n isItemSelected(option) {\r\n return this.selectedItem === option;\r\n }\r\n\r\n isTagItemSelected(item) {\r\n // return this.selectedStaff.some(i => i.name === item.name);\r\n\r\n const isObject = typeof item === 'object';\r\n return this.selectedItems.some(i => (isObject ? i.objectName === item.objectName : i === item));\r\n }\r\n\r\n handleItemSelect(option) {\r\n // For other types, allow only one selection\r\n this.selectedItem = option;\r\n this.showDropdown = false; // Close the dropdown\r\n }\r\n\r\n @Watch('value')\r\n updateSelectedItems(newValue: any[]) {\r\n if (Array.isArray(newValue) && newValue.length > 0) {\r\n this.selectedItems = [];\r\n this.unselectedItems = [];\r\n\r\n const objectValues = newValue.filter(val => typeof val === 'object' && val !== null);\r\n const primitiveValues = newValue.filter(val => typeof val !== 'object');\r\n\r\n this.selectedItems = this.results.filter(item =>\r\n typeof item === 'object' && item !== null\r\n ? objectValues.some(val => JSON.stringify(val) === JSON.stringify(item)) // Avoid object reference issues\r\n : primitiveValues.includes(item),\r\n );\r\n\r\n this.unselectedItems = this.results.filter(item =>\r\n typeof item === 'object' && item !== null ? !objectValues.some(val => JSON.stringify(val) === JSON.stringify(item)) : !primitiveValues.includes(item),\r\n );\r\n } else {\r\n this.selectedItems = [];\r\n this.unselectedItems = [...this.results];\r\n }\r\n }\r\n\r\n componentWillLoad() {\r\n // setTimeout(() => {\r\n // this.loading = true;\r\n // }, 3000);\r\n\r\n this.selectedItem = this.options[0];\r\n\r\n this.loadIcon(this.iconSwap);\r\n\r\n if (this.type !== 'tags') {\r\n this.selectedItem = null; // For single selection types\r\n }\r\n\r\n this.updateSelectedItems(this.value);\r\n\r\n // console.log('Selected Items:', this.selectedItems);\r\n // console.log('Unselected Items:', this.unselectedItems);\r\n }\r\n\r\n componentDidLoad() {\r\n if (this.options && this.options.length > 0) {\r\n this.selectedItem = this.options[0]; // Set the first item as default\r\n }\r\n\r\n const mainTextSlot = this.el.querySelector('[slot=\"tooltip_label\"]');\r\n const supportingTextSlot = this.el.querySelector('[slot=\"tooltip_supporting_text\"]');\r\n const textSlot = this.el.querySelector('[slot=\"text\"]');\r\n\r\n if (mainTextSlot) {\r\n mainTextSlot.classList.add('text-xs-semi-bold');\r\n }\r\n\r\n if (supportingTextSlot) {\r\n supportingTextSlot.classList.add('text-xs-regular');\r\n }\r\n\r\n if (textSlot) {\r\n textSlot.classList.add('text_slot');\r\n\r\n if (this.state === 'disabled') {\r\n textSlot.classList.add('disabled');\r\n }\r\n\r\n textSlot.classList.add('text-md-regular');\r\n }\r\n\r\n if (this.type === 'tags') {\r\n document.addEventListener('click', this.handleClickOutside);\r\n }\r\n // this.inputElement.addEventListener('input', this.handleTagInput.bind(this));\r\n this.updateInputWidth();\r\n }\r\n\r\n updateInputWidth() {\r\n if (this.hiddenSpan) {\r\n const input = this.el.shadowRoot.querySelector('input') as HTMLInputElement;\r\n\r\n // Update input width based on span's width or use minimum width\r\n const calculatedWidth = Math.max(this.hiddenSpan.offsetWidth + 10, this.minWidth);\r\n input.style.width = `${calculatedWidth}px`;\r\n }\r\n }\r\n\r\n handleWrapperClick() {\r\n this.inputElement.focus(); // Focus the input field\r\n }\r\n\r\n // disconnectedCallback() {\r\n // document.removeEventListener('click', this.handleClickOutside);\r\n // this.inputElement.removeEventListener('input', this.handleTagInput.bind(this));\r\n // }\r\n\r\n render() {\r\n return (\r\n <div class={`input_container`}>\r\n <div class={`input_with_label`}>\r\n {this.showLabel && (\r\n <>\r\n {this.formatLabel ? (\r\n <p class=\"label text-sm-medium\">{this.label.charAt(0).toUpperCase() + this.label.slice(1).toLowerCase()}</p>\r\n ) : (\r\n <p class=\"label text-sm-medium\">{this.label}</p>\r\n )}\r\n </>\r\n )}\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 onFocus={() => this.handleInputFocus()}\r\n value={this.value}\r\n />\r\n <>\r\n {this.loading && <div class=\"loader\"></div>}\r\n {this.showValidation && (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M7.03831 9.9735C6.6785 9.76829 6.22047 9.89362 6.01526 10.2534C5.81005 10.6132 5.93538 11.0713 6.29518 11.2765L7.03831 9.9735ZM8.66675 12.5L8.0231 12.885C8.16612 13.1241 8.42989 13.2642 8.70808 13.2489C8.98627 13.2335 9.23302 13.0652 9.34885 12.8118L8.66675 12.5ZM13.6933 7.32469C14.0567 7.12594 14.1902 6.67022 13.9914 6.3068C13.7927 5.94338 13.337 5.80988 12.9736 6.00863L13.6933 7.32469ZM19.0834 9.99999C19.0834 4.9834 15.0167 0.916656 10.0001 0.916656V2.41666C14.1882 2.41666 17.5834 5.81183 17.5834 9.99999H19.0834ZM10.0001 0.916656C4.98349 0.916656 0.916748 4.9834 0.916748 9.99999H2.41675C2.41675 5.81183 5.81192 2.41666 10.0001 2.41666V0.916656ZM0.916748 9.99999C0.916748 15.0166 4.98349 19.0833 10.0001 19.0833V17.5833C5.81192 17.5833 2.41675 14.1881 2.41675 9.99999H0.916748ZM10.0001 19.0833C15.0167 19.0833 19.0834 15.0166 19.0834 9.99999H17.5834C17.5834 14.1881 14.1882 17.5833 10.0001 17.5833V19.0833ZM6.66675 10.625C6.29518 11.2765 6.29506 11.2764 6.29494 11.2763C6.2949 11.2763 6.29478 11.2763 6.29472 11.2762C6.29458 11.2761 6.29446 11.2761 6.29437 11.276C6.29417 11.2759 6.29406 11.2758 6.29402 11.2758C6.29394 11.2758 6.29418 11.2759 6.29472 11.2762C6.2958 11.2768 6.2981 11.2782 6.30155 11.2802C6.30845 11.2843 6.31994 11.2911 6.33556 11.3006C6.36683 11.3196 6.41441 11.3492 6.47453 11.3886C6.59518 11.4676 6.76402 11.5846 6.9516 11.7329C7.33643 12.0371 7.75673 12.4397 8.0231 12.885L9.31039 12.115C8.9101 11.4458 8.3304 10.9108 7.8819 10.5562C7.65281 10.3751 7.44665 10.2322 7.29647 10.1338C7.22117 10.0845 7.15938 10.046 7.11512 10.0191C7.09298 10.0056 7.07518 9.99502 7.06222 9.98739C7.05574 9.98358 7.05047 9.98051 7.04646 9.97819C7.04446 9.97703 7.04278 9.97606 7.04142 9.97528C7.04073 9.97489 7.04013 9.97454 7.03962 9.97425C7.03936 9.9741 7.03912 9.97396 7.0389 9.97384C7.03879 9.97377 7.03865 9.97369 7.03859 9.97366C7.03845 9.97358 7.03831 9.9735 6.66675 10.625ZM8.66675 12.5C9.34885 12.8118 9.3488 12.8119 9.34876 12.812C9.34876 12.812 9.34872 12.8121 9.34871 12.8121C9.3487 12.8122 9.34871 12.8121 9.34876 12.812C9.34884 12.8118 9.34905 12.8114 9.34938 12.8107C9.35003 12.8092 9.35117 12.8068 9.35277 12.8033C9.35599 12.7964 9.36109 12.7855 9.36805 12.7708C9.38196 12.7413 9.40327 12.6967 9.43164 12.6386C9.48841 12.5226 9.57333 12.3531 9.68378 12.1445C9.90507 11.7264 10.2268 11.1546 10.628 10.5403C11.4489 9.28341 12.5314 7.96007 13.6933 7.32469L12.9736 6.00863C11.4687 6.83158 10.218 8.4249 9.37213 9.72011C8.93998 10.3818 8.59509 10.9949 8.35805 11.4427C8.23933 11.667 8.14717 11.8508 8.08415 11.9797C8.05262 12.0441 8.02836 12.0949 8.01167 12.1303C8.00333 12.1479 7.99688 12.1617 7.99236 12.1715C7.9901 12.1763 7.98833 12.1802 7.98704 12.183C7.98639 12.1844 7.98587 12.1855 7.98547 12.1864C7.98527 12.1868 7.9851 12.1872 7.98496 12.1875C7.9849 12.1876 7.98482 12.1878 7.98478 12.1879C7.98471 12.188 7.98464 12.1882 8.66675 12.5Z\"\r\n fill=\"#079455\"\r\n />\r\n </svg>\r\n )}\r\n {this.showHelpIcon && (\r\n <div class={`help_circle`}>\r\n {!this.destructive ? (\r\n <gb-help-tooltip show-supporting-text={true}>\r\n <slot name=\"tooltip_label\" slot=\"label\"></slot>\r\n <slot name=\"tooltip_supporting_text\" slot=\"supporting_text\"></slot>\r\n </gb-help-tooltip>\r\n ) : (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z\"\r\n stroke=\"#B51726\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n )}\r\n </div>\r\n )}\r\n </>\r\n </div>,\r\n ]}\r\n {this.type === 'icon_leading' && [\r\n <div class={`input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}`}>\r\n <div class={`icon ${this.size} ${this.state}`} innerHTML={this.leadingIconSvg}></div>\r\n <input\r\n class={`content text-${this.size}-regular ${this.type} ${this.state}`}\r\n type={this.inputType}\r\n minLength={this.minLength}\r\n maxLength={this.maxLength}\r\n placeholder={this.placeholder ? this.placeholder : ''}\r\n onInput={event => this.handleInput(event)}\r\n value={this.value}\r\n ref={el => (this.inputRef = el as HTMLInputElement)}\r\n onFocus={() => this.handleInputFocus()}\r\n />\r\n <>\r\n {this.loading && <div class=\"loader\"></div>}\r\n {this.showValidation && !this.destructive && (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M7.03831 9.9735C6.6785 9.76829 6.22047 9.89362 6.01526 10.2534C5.81005 10.6132 5.93538 11.0713 6.29518 11.2765L7.03831 9.9735ZM8.66675 12.5L8.0231 12.885C8.16612 13.1241 8.42989 13.2642 8.70808 13.2489C8.98627 13.2335 9.23302 13.0652 9.34885 12.8118L8.66675 12.5ZM13.6933 7.32469C14.0567 7.12594 14.1902 6.67022 13.9914 6.3068C13.7927 5.94338 13.337 5.80988 12.9736 6.00863L13.6933 7.32469ZM19.0834 9.99999C19.0834 4.9834 15.0167 0.916656 10.0001 0.916656V2.41666C14.1882 2.41666 17.5834 5.81183 17.5834 9.99999H19.0834ZM10.0001 0.916656C4.98349 0.916656 0.916748 4.9834 0.916748 9.99999H2.41675C2.41675 5.81183 5.81192 2.41666 10.0001 2.41666V0.916656ZM0.916748 9.99999C0.916748 15.0166 4.98349 19.0833 10.0001 19.0833V17.5833C5.81192 17.5833 2.41675 14.1881 2.41675 9.99999H0.916748ZM10.0001 19.0833C15.0167 19.0833 19.0834 15.0166 19.0834 9.99999H17.5834C17.5834 14.1881 14.1882 17.5833 10.0001 17.5833V19.0833ZM6.66675 10.625C6.29518 11.2765 6.29506 11.2764 6.29494 11.2763C6.2949 11.2763 6.29478 11.2763 6.29472 11.2762C6.29458 11.2761 6.29446 11.2761 6.29437 11.276C6.29417 11.2759 6.29406 11.2758 6.29402 11.2758C6.29394 11.2758 6.29418 11.2759 6.29472 11.2762C6.2958 11.2768 6.2981 11.2782 6.30155 11.2802C6.30845 11.2843 6.31994 11.2911 6.33556 11.3006C6.36683 11.3196 6.41441 11.3492 6.47453 11.3886C6.59518 11.4676 6.76402 11.5846 6.9516 11.7329C7.33643 12.0371 7.75673 12.4397 8.0231 12.885L9.31039 12.115C8.9101 11.4458 8.3304 10.9108 7.8819 10.5562C7.65281 10.3751 7.44665 10.2322 7.29647 10.1338C7.22117 10.0845 7.15938 10.046 7.11512 10.0191C7.09298 10.0056 7.07518 9.99502 7.06222 9.98739C7.05574 9.98358 7.05047 9.98051 7.04646 9.97819C7.04446 9.97703 7.04278 9.97606 7.04142 9.97528C7.04073 9.97489 7.04013 9.97454 7.03962 9.97425C7.03936 9.9741 7.03912 9.97396 7.0389 9.97384C7.03879 9.97377 7.03865 9.97369 7.03859 9.97366C7.03845 9.97358 7.03831 9.9735 6.66675 10.625ZM8.66675 12.5C9.34885 12.8118 9.3488 12.8119 9.34876 12.812C9.34876 12.812 9.34872 12.8121 9.34871 12.8121C9.3487 12.8122 9.34871 12.8121 9.34876 12.812C9.34884 12.8118 9.34905 12.8114 9.34938 12.8107C9.35003 12.8092 9.35117 12.8068 9.35277 12.8033C9.35599 12.7964 9.36109 12.7855 9.36805 12.7708C9.38196 12.7413 9.40327 12.6967 9.43164 12.6386C9.48841 12.5226 9.57333 12.3531 9.68378 12.1445C9.90507 11.7264 10.2268 11.1546 10.628 10.5403C11.4489 9.28341 12.5314 7.96007 13.6933 7.32469L12.9736 6.00863C11.4687 6.83158 10.218 8.4249 9.37213 9.72011C8.93998 10.3818 8.59509 10.9949 8.35805 11.4427C8.23933 11.667 8.14717 11.8508 8.08415 11.9797C8.05262 12.0441 8.02836 12.0949 8.01167 12.1303C8.00333 12.1479 7.99688 12.1617 7.99236 12.1715C7.9901 12.1763 7.98833 12.1802 7.98704 12.183C7.98639 12.1844 7.98587 12.1855 7.98547 12.1864C7.98527 12.1868 7.9851 12.1872 7.98496 12.1875C7.9849 12.1876 7.98482 12.1878 7.98478 12.1879C7.98471 12.188 7.98464 12.1882 8.66675 12.5Z\"\r\n fill=\"#079455\"\r\n />\r\n </svg>\r\n )}\r\n {this.showHelpIcon && (\r\n <div class={`help_circle`}>\r\n {!this.destructive ? (\r\n <gb-help-tooltip show-supporting-text={true}>\r\n <slot name=\"tooltip_label\" slot=\"label\"></slot>\r\n <slot name=\"tooltip_supporting_text\" slot=\"supporting_text\"></slot>\r\n </gb-help-tooltip>\r\n ) : (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z\"\r\n stroke=\"#B51726\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n )}\r\n </div>\r\n )}\r\n {this.showCloseButton && !this.destructive && (\r\n <gb-button\r\n size={this.size}\r\n hierarchy=\"tertiary_gray\"\r\n icon=\"only\"\r\n state=\"default\"\r\n icon-leading={true}\r\n icon-leading-swap=\"assets/cancel-01.svg\"\r\n onClick={() => this.clearInput()}\r\n class={`input_close_button ${this.size}`}\r\n ></gb-button>\r\n )}\r\n </>\r\n </div>,\r\n ]}\r\n {this.type === 'leading_dropdown' && [\r\n <div class={`input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}`}>\r\n <div class={`leading_dropdown_dropdown`} onClick={() => (this.showDropdown = !this.showDropdown)}>\r\n {this.showCountryIcon && (\r\n <div class={`country_icon`}>\r\n <img src=\"build/assets/NG.svg\" alt=\"\" />\r\n </div>\r\n )}\r\n <div class={`dropdown_text`}>\r\n <p class={`text-${this.size}-regular`} style={{ color: 'var(--color-text, #4B5565)' }}>\r\n {this.selectedItem}\r\n </p>\r\n </div>\r\n <div class={`dropdown_arrow`}>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M15 7.50004C15 7.50004 11.3176 12.5 9.99996 12.5C8.68237 12.5 5 7.5 5 7.5\"\r\n stroke=\"#4B5565\"\r\n stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n </div>\r\n <div class={`leading_dropdown_text_input`}>\r\n <input\r\n class={`content text-${this.size}-regular ${this.type} ${this.state}`}\r\n type={this.inputType}\r\n minLength={this.minLength}\r\n maxLength={this.maxLength}\r\n placeholder={this.placeholder ? this.placeholder : ''}\r\n onInput={event => this.handleInput(event)}\r\n value={this.value}\r\n onFocus={() => this.handleInputFocus()}\r\n />\r\n {this.loading && <div class=\"loader\"></div>}\r\n {this.showValidation && !this.destructive && (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M7.03831 9.9735C6.6785 9.76829 6.22047 9.89362 6.01526 10.2534C5.81005 10.6132 5.93538 11.0713 6.29518 11.2765L7.03831 9.9735ZM8.66675 12.5L8.0231 12.885C8.16612 13.1241 8.42989 13.2642 8.70808 13.2489C8.98627 13.2335 9.23302 13.0652 9.34885 12.8118L8.66675 12.5ZM13.6933 7.32469C14.0567 7.12594 14.1902 6.67022 13.9914 6.3068C13.7927 5.94338 13.337 5.80988 12.9736 6.00863L13.6933 7.32469ZM19.0834 9.99999C19.0834 4.9834 15.0167 0.916656 10.0001 0.916656V2.41666C14.1882 2.41666 17.5834 5.81183 17.5834 9.99999H19.0834ZM10.0001 0.916656C4.98349 0.916656 0.916748 4.9834 0.916748 9.99999H2.41675C2.41675 5.81183 5.81192 2.41666 10.0001 2.41666V0.916656ZM0.916748 9.99999C0.916748 15.0166 4.98349 19.0833 10.0001 19.0833V17.5833C5.81192 17.5833 2.41675 14.1881 2.41675 9.99999H0.916748ZM10.0001 19.0833C15.0167 19.0833 19.0834 15.0166 19.0834 9.99999H17.5834C17.5834 14.1881 14.1882 17.5833 10.0001 17.5833V19.0833ZM6.66675 10.625C6.29518 11.2765 6.29506 11.2764 6.29494 11.2763C6.2949 11.2763 6.29478 11.2763 6.29472 11.2762C6.29458 11.2761 6.29446 11.2761 6.29437 11.276C6.29417 11.2759 6.29406 11.2758 6.29402 11.2758C6.29394 11.2758 6.29418 11.2759 6.29472 11.2762C6.2958 11.2768 6.2981 11.2782 6.30155 11.2802C6.30845 11.2843 6.31994 11.2911 6.33556 11.3006C6.36683 11.3196 6.41441 11.3492 6.47453 11.3886C6.59518 11.4676 6.76402 11.5846 6.9516 11.7329C7.33643 12.0371 7.75673 12.4397 8.0231 12.885L9.31039 12.115C8.9101 11.4458 8.3304 10.9108 7.8819 10.5562C7.65281 10.3751 7.44665 10.2322 7.29647 10.1338C7.22117 10.0845 7.15938 10.046 7.11512 10.0191C7.09298 10.0056 7.07518 9.99502 7.06222 9.98739C7.05574 9.98358 7.05047 9.98051 7.04646 9.97819C7.04446 9.97703 7.04278 9.97606 7.04142 9.97528C7.04073 9.97489 7.04013 9.97454 7.03962 9.97425C7.03936 9.9741 7.03912 9.97396 7.0389 9.97384C7.03879 9.97377 7.03865 9.97369 7.03859 9.97366C7.03845 9.97358 7.03831 9.9735 6.66675 10.625ZM8.66675 12.5C9.34885 12.8118 9.3488 12.8119 9.34876 12.812C9.34876 12.812 9.34872 12.8121 9.34871 12.8121C9.3487 12.8122 9.34871 12.8121 9.34876 12.812C9.34884 12.8118 9.34905 12.8114 9.34938 12.8107C9.35003 12.8092 9.35117 12.8068 9.35277 12.8033C9.35599 12.7964 9.36109 12.7855 9.36805 12.7708C9.38196 12.7413 9.40327 12.6967 9.43164 12.6386C9.48841 12.5226 9.57333 12.3531 9.68378 12.1445C9.90507 11.7264 10.2268 11.1546 10.628 10.5403C11.4489 9.28341 12.5314 7.96007 13.6933 7.32469L12.9736 6.00863C11.4687 6.83158 10.218 8.4249 9.37213 9.72011C8.93998 10.3818 8.59509 10.9949 8.35805 11.4427C8.23933 11.667 8.14717 11.8508 8.08415 11.9797C8.05262 12.0441 8.02836 12.0949 8.01167 12.1303C8.00333 12.1479 7.99688 12.1617 7.99236 12.1715C7.9901 12.1763 7.98833 12.1802 7.98704 12.183C7.98639 12.1844 7.98587 12.1855 7.98547 12.1864C7.98527 12.1868 7.9851 12.1872 7.98496 12.1875C7.9849 12.1876 7.98482 12.1878 7.98478 12.1879C7.98471 12.188 7.98464 12.1882 8.66675 12.5Z\"\r\n fill=\"#079455\"\r\n />\r\n </svg>\r\n )}\r\n {this.showHelpIcon && (\r\n <div class={`help_circle`}>\r\n {!this.destructive ? (\r\n <gb-help-tooltip show-supporting-text={true}>\r\n <slot name=\"tooltip_label\" slot=\"label\"></slot>\r\n <slot name=\"tooltip_supporting_text\" slot=\"supporting_text\"></slot>\r\n </gb-help-tooltip>\r\n ) : (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z\"\r\n stroke=\"#B51726\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n </div>,\r\n <>\r\n {this.showDropdown && (\r\n <div class={`dropdown_menu ${this.type} ${this.size} ${this.menuPosition}`} ref={el => (this.dropdownRef = el)}>\r\n {this.options.map(option => (\r\n <gb-input-dropdown-menu-item type=\"default\" state={StateEnum.Default} selected={this.isItemSelected(option)} onClick={() => this.handleItemSelect(option)}>\r\n <p slot=\"name\">{option}</p>\r\n </gb-input-dropdown-menu-item>\r\n ))}\r\n </div>\r\n )}\r\n </>,\r\n ]}\r\n {this.type === 'trailing_dropdown' && [\r\n <div class={`input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}`}>\r\n <div class={`trailing_dropdown_content`}>\r\n <p class={`text-${this.size}-regular`} style={{ color: 'var(--color-text, #4B5565)' }}>\r\n $\r\n </p>\r\n <input\r\n class={`content text-${this.size}-regular ${this.type} ${this.state}`}\r\n type={this.inputType}\r\n minLength={this.minLength}\r\n maxLength={this.maxLength}\r\n placeholder={this.placeholder ? this.placeholder : ''}\r\n onInput={event => this.handleInput(event)}\r\n value={this.value}\r\n onFocus={() => this.handleInputFocus()}\r\n // onBlur={() => this.runValidation()}\r\n />\r\n {this.loading && <div class=\"loader\"></div>}\r\n {this.showHelpIcon && (\r\n <div class={`help_circle`}>\r\n {!this.destructive ? (\r\n <gb-help-tooltip show-supporting-text={true}>\r\n <slot name=\"tooltip_label\" slot=\"label\"></slot>\r\n <slot name=\"tooltip_supporting_text\" slot=\"supporting_text\"></slot>\r\n </gb-help-tooltip>\r\n ) : (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z\"\r\n stroke=\"#B51726\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n <div class={`trailing_dropdown_dropdown`} onClick={() => (this.showDropdown = !this.showDropdown)}>\r\n <div class={`dropdown_text`}>\r\n <p class={`text-${this.size}-regular`} style={{ color: 'var(--color-text, #4B5565)' }}>\r\n {this.selectedItem}\r\n </p>\r\n </div>\r\n <div class={`dropdown_arrow`}>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M15 7.50004C15 7.50004 11.3176 12.5 9.99996 12.5C8.68237 12.5 5 7.5 5 7.5\"\r\n stroke=\"#4B5565\"\r\n stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>,\r\n <>\r\n {this.showDropdown && (\r\n <div class={`dropdown_menu ${this.type} ${this.size} ${this.menuPosition}`} ref={el => (this.dropdownRef = el)}>\r\n {this.options.map(option => (\r\n <gb-input-dropdown-menu-item type=\"default\" state={StateEnum.Default} selected={this.isItemSelected(option)} onClick={() => this.handleItemSelect(option)}>\r\n <p slot=\"name\">{option}</p>\r\n </gb-input-dropdown-menu-item>\r\n ))}\r\n </div>\r\n )}\r\n </>,\r\n ]}\r\n {this.type === 'leading_text' && [\r\n <div class=\"leading_text_input\">\r\n <div class={`add_on`}>\r\n {/* <p class={`text-${this.size}-regular`} style={{ color: this.state === 'disabled' ? 'var(--color-text-disabled, #CDD5DF)' : 'var(--color-text, #4B5565)' }}>\r\n http://\r\n </p> */}\r\n <slot name=\"text\"></slot>\r\n </div>\r\n <div class={`input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}`}>\r\n <input\r\n class={`content text-${this.size}-regular ${this.type} ${this.state}`}\r\n type={this.inputType}\r\n minLength={this.minLength}\r\n maxLength={this.maxLength}\r\n placeholder={this.placeholder ? this.placeholder : ''}\r\n onInput={event => this.handleInput(event)}\r\n value={this.value}\r\n onFocus={() => this.handleInputFocus()}\r\n // onBlur={() => this.runValidation()}\r\n />\r\n {this.loading && <div class=\"loader\"></div>}\r\n {this.showValidation && !this.destructive && (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M7.03831 9.9735C6.6785 9.76829 6.22047 9.89362 6.01526 10.2534C5.81005 10.6132 5.93538 11.0713 6.29518 11.2765L7.03831 9.9735ZM8.66675 12.5L8.0231 12.885C8.16612 13.1241 8.42989 13.2642 8.70808 13.2489C8.98627 13.2335 9.23302 13.0652 9.34885 12.8118L8.66675 12.5ZM13.6933 7.32469C14.0567 7.12594 14.1902 6.67022 13.9914 6.3068C13.7927 5.94338 13.337 5.80988 12.9736 6.00863L13.6933 7.32469ZM19.0834 9.99999C19.0834 4.9834 15.0167 0.916656 10.0001 0.916656V2.41666C14.1882 2.41666 17.5834 5.81183 17.5834 9.99999H19.0834ZM10.0001 0.916656C4.98349 0.916656 0.916748 4.9834 0.916748 9.99999H2.41675C2.41675 5.81183 5.81192 2.41666 10.0001 2.41666V0.916656ZM0.916748 9.99999C0.916748 15.0166 4.98349 19.0833 10.0001 19.0833V17.5833C5.81192 17.5833 2.41675 14.1881 2.41675 9.99999H0.916748ZM10.0001 19.0833C15.0167 19.0833 19.0834 15.0166 19.0834 9.99999H17.5834C17.5834 14.1881 14.1882 17.5833 10.0001 17.5833V19.0833ZM6.66675 10.625C6.29518 11.2765 6.29506 11.2764 6.29494 11.2763C6.2949 11.2763 6.29478 11.2763 6.29472 11.2762C6.29458 11.2761 6.29446 11.2761 6.29437 11.276C6.29417 11.2759 6.29406 11.2758 6.29402 11.2758C6.29394 11.2758 6.29418 11.2759 6.29472 11.2762C6.2958 11.2768 6.2981 11.2782 6.30155 11.2802C6.30845 11.2843 6.31994 11.2911 6.33556 11.3006C6.36683 11.3196 6.41441 11.3492 6.47453 11.3886C6.59518 11.4676 6.76402 11.5846 6.9516 11.7329C7.33643 12.0371 7.75673 12.4397 8.0231 12.885L9.31039 12.115C8.9101 11.4458 8.3304 10.9108 7.8819 10.5562C7.65281 10.3751 7.44665 10.2322 7.29647 10.1338C7.22117 10.0845 7.15938 10.046 7.11512 10.0191C7.09298 10.0056 7.07518 9.99502 7.06222 9.98739C7.05574 9.98358 7.05047 9.98051 7.04646 9.97819C7.04446 9.97703 7.04278 9.97606 7.04142 9.97528C7.04073 9.97489 7.04013 9.97454 7.03962 9.97425C7.03936 9.9741 7.03912 9.97396 7.0389 9.97384C7.03879 9.97377 7.03865 9.97369 7.03859 9.97366C7.03845 9.97358 7.03831 9.9735 6.66675 10.625ZM8.66675 12.5C9.34885 12.8118 9.3488 12.8119 9.34876 12.812C9.34876 12.812 9.34872 12.8121 9.34871 12.8121C9.3487 12.8122 9.34871 12.8121 9.34876 12.812C9.34884 12.8118 9.34905 12.8114 9.34938 12.8107C9.35003 12.8092 9.35117 12.8068 9.35277 12.8033C9.35599 12.7964 9.36109 12.7855 9.36805 12.7708C9.38196 12.7413 9.40327 12.6967 9.43164 12.6386C9.48841 12.5226 9.57333 12.3531 9.68378 12.1445C9.90507 11.7264 10.2268 11.1546 10.628 10.5403C11.4489 9.28341 12.5314 7.96007 13.6933 7.32469L12.9736 6.00863C11.4687 6.83158 10.218 8.4249 9.37213 9.72011C8.93998 10.3818 8.59509 10.9949 8.35805 11.4427C8.23933 11.667 8.14717 11.8508 8.08415 11.9797C8.05262 12.0441 8.02836 12.0949 8.01167 12.1303C8.00333 12.1479 7.99688 12.1617 7.99236 12.1715C7.9901 12.1763 7.98833 12.1802 7.98704 12.183C7.98639 12.1844 7.98587 12.1855 7.98547 12.1864C7.98527 12.1868 7.9851 12.1872 7.98496 12.1875C7.9849 12.1876 7.98482 12.1878 7.98478 12.1879C7.98471 12.188 7.98464 12.1882 8.66675 12.5Z\"\r\n fill=\"#079455\"\r\n />\r\n </svg>\r\n )}\r\n {this.showHelpIcon && (\r\n <div class={`help_circle`}>\r\n {!this.destructive ? (\r\n <gb-help-tooltip show-supporting-text={true}>\r\n <slot name=\"tooltip_label\" slot=\"label\"></slot>\r\n <slot name=\"tooltip_supporting_text\" slot=\"supporting_text\"></slot>\r\n </gb-help-tooltip>\r\n ) : (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z\"\r\n stroke=\"#B51726\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n </div>,\r\n ]}\r\n {this.type === 'payment_input' && (\r\n <div class={`input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}`}>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"23\" height=\"14\" viewBox=\"0 0 23 14\" fill=\"none\">\r\n <path\r\n fill-rule=\"evenodd\"\r\n clip-rule=\"evenodd\"\r\n d=\"M11.179 11.8294C9.99493 12.8275 8.45902 13.43 6.78069 13.43C3.03582 13.43 0 10.4303 0 6.72997C0 3.02966 3.03582 0.0299683 6.78069 0.0299683C8.45902 0.0299683 9.99493 0.632466 11.179 1.63051C12.363 0.632466 13.8989 0.0299683 15.5773 0.0299683C19.3221 0.0299683 22.358 3.02966 22.358 6.72997C22.358 10.4303 19.3221 13.43 15.5773 13.43C13.8989 13.43 12.363 12.8275 11.179 11.8294Z\"\r\n fill=\"#ED0006\"\r\n />\r\n <path\r\n fill-rule=\"evenodd\"\r\n clip-rule=\"evenodd\"\r\n d=\"M11.179 11.8294C12.6369 10.6005 13.5614 8.77192 13.5614 6.72997C13.5614 4.68801 12.6369 2.85941 11.179 1.63051C12.363 0.632465 13.8989 0.0299683 15.5772 0.0299683C19.3221 0.0299683 22.3579 3.02966 22.3579 6.72997C22.3579 10.4303 19.3221 13.43 15.5772 13.43C13.8989 13.43 12.363 12.8275 11.179 11.8294Z\"\r\n fill=\"#F9A000\"\r\n />\r\n <path\r\n fill-rule=\"evenodd\"\r\n clip-rule=\"evenodd\"\r\n d=\"M11.179 11.8294C12.6369 10.6005 13.5614 8.77193 13.5614 6.72999C13.5614 4.68805 12.6369 2.85946 11.179 1.63055C9.72109 2.85946 8.79663 4.68805 8.79663 6.72999C8.79663 8.77193 9.72109 10.6005 11.179 11.8294Z\"\r\n fill=\"#FF5E00\"\r\n />\r\n </svg>\r\n <input\r\n class={`content text-${this.size}-regular ${this.type} ${this.state}`}\r\n type={this.inputType}\r\n minLength={this.minLength}\r\n maxLength={this.maxLength}\r\n placeholder={this.placeholder ? this.placeholder : ''}\r\n onInput={event => this.handleInput(event)}\r\n value={this.value}\r\n onFocus={() => this.handleInputFocus()}\r\n />\r\n <>\r\n {this.loading && <div class=\"loader\"></div>}\r\n {this.showValidation && !this.destructive && (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M7.03831 9.9735C6.6785 9.76829 6.22047 9.89362 6.01526 10.2534C5.81005 10.6132 5.93538 11.0713 6.29518 11.2765L7.03831 9.9735ZM8.66675 12.5L8.0231 12.885C8.16612 13.1241 8.42989 13.2642 8.70808 13.2489C8.98627 13.2335 9.23302 13.0652 9.34885 12.8118L8.66675 12.5ZM13.6933 7.32469C14.0567 7.12594 14.1902 6.67022 13.9914 6.3068C13.7927 5.94338 13.337 5.80988 12.9736 6.00863L13.6933 7.32469ZM19.0834 9.99999C19.0834 4.9834 15.0167 0.916656 10.0001 0.916656V2.41666C14.1882 2.41666 17.5834 5.81183 17.5834 9.99999H19.0834ZM10.0001 0.916656C4.98349 0.916656 0.916748 4.9834 0.916748 9.99999H2.41675C2.41675 5.81183 5.81192 2.41666 10.0001 2.41666V0.916656ZM0.916748 9.99999C0.916748 15.0166 4.98349 19.0833 10.0001 19.0833V17.5833C5.81192 17.5833 2.41675 14.1881 2.41675 9.99999H0.916748ZM10.0001 19.0833C15.0167 19.0833 19.0834 15.0166 19.0834 9.99999H17.5834C17.5834 14.1881 14.1882 17.5833 10.0001 17.5833V19.0833ZM6.66675 10.625C6.29518 11.2765 6.29506 11.2764 6.29494 11.2763C6.2949 11.2763 6.29478 11.2763 6.29472 11.2762C6.29458 11.2761 6.29446 11.2761 6.29437 11.276C6.29417 11.2759 6.29406 11.2758 6.29402 11.2758C6.29394 11.2758 6.29418 11.2759 6.29472 11.2762C6.2958 11.2768 6.2981 11.2782 6.30155 11.2802C6.30845 11.2843 6.31994 11.2911 6.33556 11.3006C6.36683 11.3196 6.41441 11.3492 6.47453 11.3886C6.59518 11.4676 6.76402 11.5846 6.9516 11.7329C7.33643 12.0371 7.75673 12.4397 8.0231 12.885L9.31039 12.115C8.9101 11.4458 8.3304 10.9108 7.8819 10.5562C7.65281 10.3751 7.44665 10.2322 7.29647 10.1338C7.22117 10.0845 7.15938 10.046 7.11512 10.0191C7.09298 10.0056 7.07518 9.99502 7.06222 9.98739C7.05574 9.98358 7.05047 9.98051 7.04646 9.97819C7.04446 9.97703 7.04278 9.97606 7.04142 9.97528C7.04073 9.97489 7.04013 9.97454 7.03962 9.97425C7.03936 9.9741 7.03912 9.97396 7.0389 9.97384C7.03879 9.97377 7.03865 9.97369 7.03859 9.97366C7.03845 9.97358 7.03831 9.9735 6.66675 10.625ZM8.66675 12.5C9.34885 12.8118 9.3488 12.8119 9.34876 12.812C9.34876 12.812 9.34872 12.8121 9.34871 12.8121C9.3487 12.8122 9.34871 12.8121 9.34876 12.812C9.34884 12.8118 9.34905 12.8114 9.34938 12.8107C9.35003 12.8092 9.35117 12.8068 9.35277 12.8033C9.35599 12.7964 9.36109 12.7855 9.36805 12.7708C9.38196 12.7413 9.40327 12.6967 9.43164 12.6386C9.48841 12.5226 9.57333 12.3531 9.68378 12.1445C9.90507 11.7264 10.2268 11.1546 10.628 10.5403C11.4489 9.28341 12.5314 7.96007 13.6933 7.32469L12.9736 6.00863C11.4687 6.83158 10.218 8.4249 9.37213 9.72011C8.93998 10.3818 8.59509 10.9949 8.35805 11.4427C8.23933 11.667 8.14717 11.8508 8.08415 11.9797C8.05262 12.0441 8.02836 12.0949 8.01167 12.1303C8.00333 12.1479 7.99688 12.1617 7.99236 12.1715C7.9901 12.1763 7.98833 12.1802 7.98704 12.183C7.98639 12.1844 7.98587 12.1855 7.98547 12.1864C7.98527 12.1868 7.9851 12.1872 7.98496 12.1875C7.9849 12.1876 7.98482 12.1878 7.98478 12.1879C7.98471 12.188 7.98464 12.1882 8.66675 12.5Z\"\r\n fill=\"#079455\"\r\n />\r\n </svg>\r\n )}\r\n {this.showHelpIcon && (\r\n <div class={`help_circle`}>\r\n {!this.destructive ? (\r\n <gb-help-tooltip show-supporting-text={true}>\r\n <slot name=\"tooltip_label\" slot=\"label\"></slot>\r\n <slot name=\"tooltip_supporting_text\" slot=\"supporting_text\"></slot>\r\n </gb-help-tooltip>\r\n ) : (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z\"\r\n stroke=\"#B51726\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n )}\r\n </div>\r\n )}\r\n </>\r\n </div>\r\n )}\r\n {this.type === 'trailing_button' && (\r\n <div class={`input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}`}>\r\n <div class={`trailing_button_text_input ${this.size}`}>\r\n <input\r\n class={`content text-${this.size}-regular ${this.type} ${this.state}`}\r\n type={this.inputType}\r\n minLength={this.minLength}\r\n maxLength={this.maxLength}\r\n placeholder={this.placeholder ? this.placeholder : ''}\r\n onInput={event => this.handleInput(event)}\r\n ref={el => (this.inputRef = el as HTMLInputElement)}\r\n value={this.value}\r\n onFocus={() => this.handleInputFocus()}\r\n // onBlur={() => this.runValidation()}\r\n />\r\n {this.loading && <div class=\"loader\"></div>}\r\n {this.showValidation && !this.destructive && (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M7.03831 9.9735C6.6785 9.76829 6.22047 9.89362 6.01526 10.2534C5.81005 10.6132 5.93538 11.0713 6.29518 11.2765L7.03831 9.9735ZM8.66675 12.5L8.0231 12.885C8.16612 13.1241 8.42989 13.2642 8.70808 13.2489C8.98627 13.2335 9.23302 13.0652 9.34885 12.8118L8.66675 12.5ZM13.6933 7.32469C14.0567 7.12594 14.1902 6.67022 13.9914 6.3068C13.7927 5.94338 13.337 5.80988 12.9736 6.00863L13.6933 7.32469ZM19.0834 9.99999C19.0834 4.9834 15.0167 0.916656 10.0001 0.916656V2.41666C14.1882 2.41666 17.5834 5.81183 17.5834 9.99999H19.0834ZM10.0001 0.916656C4.98349 0.916656 0.916748 4.9834 0.916748 9.99999H2.41675C2.41675 5.81183 5.81192 2.41666 10.0001 2.41666V0.916656ZM0.916748 9.99999C0.916748 15.0166 4.98349 19.0833 10.0001 19.0833V17.5833C5.81192 17.5833 2.41675 14.1881 2.41675 9.99999H0.916748ZM10.0001 19.0833C15.0167 19.0833 19.0834 15.0166 19.0834 9.99999H17.5834C17.5834 14.1881 14.1882 17.5833 10.0001 17.5833V19.0833ZM6.66675 10.625C6.29518 11.2765 6.29506 11.2764 6.29494 11.2763C6.2949 11.2763 6.29478 11.2763 6.29472 11.2762C6.29458 11.2761 6.29446 11.2761 6.29437 11.276C6.29417 11.2759 6.29406 11.2758 6.29402 11.2758C6.29394 11.2758 6.29418 11.2759 6.29472 11.2762C6.2958 11.2768 6.2981 11.2782 6.30155 11.2802C6.30845 11.2843 6.31994 11.2911 6.33556 11.3006C6.36683 11.3196 6.41441 11.3492 6.47453 11.3886C6.59518 11.4676 6.76402 11.5846 6.9516 11.7329C7.33643 12.0371 7.75673 12.4397 8.0231 12.885L9.31039 12.115C8.9101 11.4458 8.3304 10.9108 7.8819 10.5562C7.65281 10.3751 7.44665 10.2322 7.29647 10.1338C7.22117 10.0845 7.15938 10.046 7.11512 10.0191C7.09298 10.0056 7.07518 9.99502 7.06222 9.98739C7.05574 9.98358 7.05047 9.98051 7.04646 9.97819C7.04446 9.97703 7.04278 9.97606 7.04142 9.97528C7.04073 9.97489 7.04013 9.97454 7.03962 9.97425C7.03936 9.9741 7.03912 9.97396 7.0389 9.97384C7.03879 9.97377 7.03865 9.97369 7.03859 9.97366C7.03845 9.97358 7.03831 9.9735 6.66675 10.625ZM8.66675 12.5C9.34885 12.8118 9.3488 12.8119 9.34876 12.812C9.34876 12.812 9.34872 12.8121 9.34871 12.8121C9.3487 12.8122 9.34871 12.8121 9.34876 12.812C9.34884 12.8118 9.34905 12.8114 9.34938 12.8107C9.35003 12.8092 9.35117 12.8068 9.35277 12.8033C9.35599 12.7964 9.36109 12.7855 9.36805 12.7708C9.38196 12.7413 9.40327 12.6967 9.43164 12.6386C9.48841 12.5226 9.57333 12.3531 9.68378 12.1445C9.90507 11.7264 10.2268 11.1546 10.628 10.5403C11.4489 9.28341 12.5314 7.96007 13.6933 7.32469L12.9736 6.00863C11.4687 6.83158 10.218 8.4249 9.37213 9.72011C8.93998 10.3818 8.59509 10.9949 8.35805 11.4427C8.23933 11.667 8.14717 11.8508 8.08415 11.9797C8.05262 12.0441 8.02836 12.0949 8.01167 12.1303C8.00333 12.1479 7.99688 12.1617 7.99236 12.1715C7.9901 12.1763 7.98833 12.1802 7.98704 12.183C7.98639 12.1844 7.98587 12.1855 7.98547 12.1864C7.98527 12.1868 7.9851 12.1872 7.98496 12.1875C7.9849 12.1876 7.98482 12.1878 7.98478 12.1879C7.98471 12.188 7.98464 12.1882 8.66675 12.5Z\"\r\n fill=\"#079455\"\r\n />\r\n </svg>\r\n )}\r\n {this.showHelpIcon && (\r\n <div class={`help_circle`}>\r\n {!this.destructive ? (\r\n <gb-help-tooltip show-supporting-text={true}>\r\n <slot name=\"tooltip_label\" slot=\"label\"></slot>\r\n <slot name=\"tooltip_supporting_text\" slot=\"supporting_text\"></slot>\r\n </gb-help-tooltip>\r\n ) : (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z\"\r\n stroke=\"#B51726\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n {this.loading && <div class=\"loader\"></div>}\r\n <gb-button\r\n size=\"lg\"\r\n hierarchy=\"tertiary_gray\"\r\n icon=\"only\"\r\n state={this.state === 'disabled' ? 'disabled' : 'default'}\r\n icon-leading={true}\r\n icon-leading-swap={this.iconSwap}\r\n onClick={() => this.onButtonClicked()}\r\n ></gb-button>\r\n </div>\r\n )}\r\n {this.type === 'password' && (\r\n <div class={`password_input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}`}>\r\n <div class={`password_content`}>\r\n <input\r\n class={`content text-${this.size}-regular ${this.type} ${this.state}`}\r\n type={this.isPasswordVisible ? 'text' : 'password'}\r\n placeholder={this.placeholder ? this.placeholder : ''}\r\n onInput={event => this.handleInput(event)}\r\n onFocus={() => this.handleInputFocus()}\r\n />\r\n {this.loading && <div class=\"loader\"></div>}\r\n {this.showValidation && !this.destructive && (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M7.03831 9.9735C6.6785 9.76829 6.22047 9.89362 6.01526 10.2534C5.81005 10.6132 5.93538 11.0713 6.29518 11.2765L7.03831 9.9735ZM8.66675 12.5L8.0231 12.885C8.16612 13.1241 8.42989 13.2642 8.70808 13.2489C8.98627 13.2335 9.23302 13.0652 9.34885 12.8118L8.66675 12.5ZM13.6933 7.32469C14.0567 7.12594 14.1902 6.67022 13.9914 6.3068C13.7927 5.94338 13.337 5.80988 12.9736 6.00863L13.6933 7.32469ZM19.0834 9.99999C19.0834 4.9834 15.0167 0.916656 10.0001 0.916656V2.41666C14.1882 2.41666 17.5834 5.81183 17.5834 9.99999H19.0834ZM10.0001 0.916656C4.98349 0.916656 0.916748 4.9834 0.916748 9.99999H2.41675C2.41675 5.81183 5.81192 2.41666 10.0001 2.41666V0.916656ZM0.916748 9.99999C0.916748 15.0166 4.98349 19.0833 10.0001 19.0833V17.5833C5.81192 17.5833 2.41675 14.1881 2.41675 9.99999H0.916748ZM10.0001 19.0833C15.0167 19.0833 19.0834 15.0166 19.0834 9.99999H17.5834C17.5834 14.1881 14.1882 17.5833 10.0001 17.5833V19.0833ZM6.66675 10.625C6.29518 11.2765 6.29506 11.2764 6.29494 11.2763C6.2949 11.2763 6.29478 11.2763 6.29472 11.2762C6.29458 11.2761 6.29446 11.2761 6.29437 11.276C6.29417 11.2759 6.29406 11.2758 6.29402 11.2758C6.29394 11.2758 6.29418 11.2759 6.29472 11.2762C6.2958 11.2768 6.2981 11.2782 6.30155 11.2802C6.30845 11.2843 6.31994 11.2911 6.33556 11.3006C6.36683 11.3196 6.41441 11.3492 6.47453 11.3886C6.59518 11.4676 6.76402 11.5846 6.9516 11.7329C7.33643 12.0371 7.75673 12.4397 8.0231 12.885L9.31039 12.115C8.9101 11.4458 8.3304 10.9108 7.8819 10.5562C7.65281 10.3751 7.44665 10.2322 7.29647 10.1338C7.22117 10.0845 7.15938 10.046 7.11512 10.0191C7.09298 10.0056 7.07518 9.99502 7.06222 9.98739C7.05574 9.98358 7.05047 9.98051 7.04646 9.97819C7.04446 9.97703 7.04278 9.97606 7.04142 9.97528C7.04073 9.97489 7.04013 9.97454 7.03962 9.97425C7.03936 9.9741 7.03912 9.97396 7.0389 9.97384C7.03879 9.97377 7.03865 9.97369 7.03859 9.97366C7.03845 9.97358 7.03831 9.9735 6.66675 10.625ZM8.66675 12.5C9.34885 12.8118 9.3488 12.8119 9.34876 12.812C9.34876 12.812 9.34872 12.8121 9.34871 12.8121C9.3487 12.8122 9.34871 12.8121 9.34876 12.812C9.34884 12.8118 9.34905 12.8114 9.34938 12.8107C9.35003 12.8092 9.35117 12.8068 9.35277 12.8033C9.35599 12.7964 9.36109 12.7855 9.36805 12.7708C9.38196 12.7413 9.40327 12.6967 9.43164 12.6386C9.48841 12.5226 9.57333 12.3531 9.68378 12.1445C9.90507 11.7264 10.2268 11.1546 10.628 10.5403C11.4489 9.28341 12.5314 7.96007 13.6933 7.32469L12.9736 6.00863C11.4687 6.83158 10.218 8.4249 9.37213 9.72011C8.93998 10.3818 8.59509 10.9949 8.35805 11.4427C8.23933 11.667 8.14717 11.8508 8.08415 11.9797C8.05262 12.0441 8.02836 12.0949 8.01167 12.1303C8.00333 12.1479 7.99688 12.1617 7.99236 12.1715C7.9901 12.1763 7.98833 12.1802 7.98704 12.183C7.98639 12.1844 7.98587 12.1855 7.98547 12.1864C7.98527 12.1868 7.9851 12.1872 7.98496 12.1875C7.9849 12.1876 7.98482 12.1878 7.98478 12.1879C7.98471 12.188 7.98464 12.1882 8.66675 12.5Z\"\r\n fill=\"#079455\"\r\n />\r\n </svg>\r\n )}\r\n {this.showHelpIcon && (\r\n <div class={`help_circle`}>\r\n {!this.destructive ? (\r\n <gb-help-tooltip show-supporting-text={true}>\r\n <slot name=\"tooltip_label\" slot=\"label\"></slot>\r\n <slot name=\"tooltip_supporting_text\" slot=\"supporting_text\"></slot>\r\n </gb-help-tooltip>\r\n ) : (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z\"\r\n stroke=\"#B51726\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n <div class={`dropdown`}>\r\n <gb-password-button onClick={() => this.togglePasswordVisibility()}></gb-password-button>\r\n </div>\r\n </div>\r\n )}\r\n {this.type === 'password_icon_leading' && (\r\n <div class={`password_icon_leading_input input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}`}>\r\n <div class={`password_icon_leading_content`}>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M12.0759 12.1667C11.6617 12.1667 11.3259 12.5025 11.3259 12.9167C11.3259 13.3309 11.6617 13.6667 12.0759 13.6667V12.1667ZM12.0833 13.6667C12.4976 13.6667 12.8333 13.3309 12.8333 12.9167C12.8333 12.5025 12.4976 12.1667 12.0833 12.1667V13.6667ZM7.91668 12.1667C7.50246 12.1667 7.16668 12.5025 7.16668 12.9167C7.16668 13.3309 7.50246 13.6667 7.91668 13.6667V12.1667ZM7.92415 13.6667C8.33836 13.6667 8.67415 13.3309 8.67415 12.9167C8.67415 12.5025 8.33836 12.1667 7.92415 12.1667V13.6667ZM16.4435 10.1294L17.1868 10.0293L16.4435 10.1294ZM13.7003 7.58258L13.7347 6.83337L13.7003 7.58258ZM13.7003 18.2508L13.7347 19L13.7003 18.2508ZM16.4435 15.704L15.7002 15.6039L16.4435 15.704ZM6.29973 7.58258L6.33417 8.33179L6.29973 7.58258ZM3.55652 10.1294L2.81323 10.0293L3.55652 10.1294ZM6.29973 18.2508L6.33417 17.5015L6.29973 18.2508ZM3.55652 15.704L4.29981 15.6039L3.55652 15.704ZM5.50001 7.5C5.50001 7.91422 5.8358 8.25 6.25001 8.25C6.66422 8.25 7.00001 7.91422 7.00001 7.5H5.50001ZM13 7.5C13 7.91422 13.3358 8.25 13.75 8.25C14.1642 8.25 14.5 7.91422 14.5 7.5H13ZM12.0759 13.6667H12.0833V12.1667H12.0759V13.6667ZM7.91668 13.6667H7.92415V12.1667H7.91668V13.6667ZM10 17.5833C8.69057 17.5833 7.50287 17.5553 6.33417 17.5015L6.26528 19C7.45761 19.0548 8.66829 19.0833 10 19.0833V17.5833ZM13.6659 17.5015C12.4972 17.5553 11.3094 17.5833 10 17.5833V19.0833C11.3317 19.0833 12.5424 19.0548 13.7347 19L13.6659 17.5015ZM17.1868 15.804C17.3105 14.8853 17.4167 13.9152 17.4167 12.9167H15.9167C15.9167 13.8142 15.8211 14.7058 15.7002 15.6039L17.1868 15.804ZM17.4167 12.9167C17.4167 11.9181 17.3105 10.948 17.1868 10.0293L15.7002 10.2295C15.8211 11.1275 15.9167 12.0192 15.9167 12.9167H17.4167ZM10 8.25C11.3095 8.25 12.4972 8.27806 13.6659 8.33179L13.7347 6.83337C12.5424 6.77856 11.3317 6.75 10 6.75V8.25ZM6.33417 8.33179C7.50287 8.27806 8.69057 8.25 10 8.25V6.75C8.66829 6.75 7.45761 6.77856 6.26528 6.83337L6.33417 8.33179ZM2.81323 10.0293C2.68953 10.948 2.58334 11.9181 2.58334 12.9167H4.08334C4.08334 12.0192 4.1789 11.1275 4.29981 10.2295L2.81323 10.0293ZM2.58334 12.9167C2.58334 13.9152 2.68953 14.8853 2.81323 15.804L4.29981 15.6039C4.1789 14.7058 4.08334 13.8142 4.08334 12.9167H2.58334ZM17.1868 10.0293C16.9527 8.29067 15.5122 6.91509 13.7347 6.83337L13.6659 8.33179C14.6943 8.37907 15.5595 9.18437 15.7002 10.2295L17.1868 10.0293ZM13.7347 19C15.5122 18.9183 16.9527 17.5427 17.1868 15.804L15.7002 15.6039C15.5595 16.649 14.6943 17.4543 13.6659 17.5015L13.7347 19ZM6.26528 6.83337C4.48781 6.91508 3.04732 8.29067 2.81323 10.0293L4.29981 10.2295C4.44052 9.18437 5.30576 8.37907 6.33417 8.33179L6.26528 6.83337ZM6.33417 17.5015C5.30576 17.4543 4.44052 16.649 4.29981 15.6039L2.81323 15.804C3.04732 17.5427 4.48782 18.9183 6.26528 19L6.33417 17.5015ZM7.00001 7.5V5.41667H5.50001V7.5H7.00001ZM13 5.41667V7.5H14.5V5.41667H13ZM10 2.41667C11.6569 2.41667 13 3.75981 13 5.41667H14.5C14.5 2.93139 12.4853 0.916668 10 0.916668V2.41667ZM7.00001 5.41667C7.00001 3.75981 8.34316 2.41667 10 2.41667V0.916668C7.51473 0.916668 5.50001 2.93139 5.50001 5.41667H7.00001Z\"\r\n fill=\"#4B5565\"\r\n />\r\n </svg>\r\n <input\r\n class={`content text-${this.size}-regular ${this.type} ${this.state}`}\r\n type={this.isPasswordVisible ? 'text' : 'password'}\r\n placeholder={this.placeholder ? this.placeholder : ''}\r\n onInput={event => this.handleInput(event)}\r\n />\r\n </div>\r\n {this.loading && <div class=\"loader\"></div>}\r\n {this.showValidation && !this.destructive && (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M7.03831 9.9735C6.6785 9.76829 6.22047 9.89362 6.01526 10.2534C5.81005 10.6132 5.93538 11.0713 6.29518 11.2765L7.03831 9.9735ZM8.66675 12.5L8.0231 12.885C8.16612 13.1241 8.42989 13.2642 8.70808 13.2489C8.98627 13.2335 9.23302 13.0652 9.34885 12.8118L8.66675 12.5ZM13.6933 7.32469C14.0567 7.12594 14.1902 6.67022 13.9914 6.3068C13.7927 5.94338 13.337 5.80988 12.9736 6.00863L13.6933 7.32469ZM19.0834 9.99999C19.0834 4.9834 15.0167 0.916656 10.0001 0.916656V2.41666C14.1882 2.41666 17.5834 5.81183 17.5834 9.99999H19.0834ZM10.0001 0.916656C4.98349 0.916656 0.916748 4.9834 0.916748 9.99999H2.41675C2.41675 5.81183 5.81192 2.41666 10.0001 2.41666V0.916656ZM0.916748 9.99999C0.916748 15.0166 4.98349 19.0833 10.0001 19.0833V17.5833C5.81192 17.5833 2.41675 14.1881 2.41675 9.99999H0.916748ZM10.0001 19.0833C15.0167 19.0833 19.0834 15.0166 19.0834 9.99999H17.5834C17.5834 14.1881 14.1882 17.5833 10.0001 17.5833V19.0833ZM6.66675 10.625C6.29518 11.2765 6.29506 11.2764 6.29494 11.2763C6.2949 11.2763 6.29478 11.2763 6.29472 11.2762C6.29458 11.2761 6.29446 11.2761 6.29437 11.276C6.29417 11.2759 6.29406 11.2758 6.29402 11.2758C6.29394 11.2758 6.29418 11.2759 6.29472 11.2762C6.2958 11.2768 6.2981 11.2782 6.30155 11.2802C6.30845 11.2843 6.31994 11.2911 6.33556 11.3006C6.36683 11.3196 6.41441 11.3492 6.47453 11.3886C6.59518 11.4676 6.76402 11.5846 6.9516 11.7329C7.33643 12.0371 7.75673 12.4397 8.0231 12.885L9.31039 12.115C8.9101 11.4458 8.3304 10.9108 7.8819 10.5562C7.65281 10.3751 7.44665 10.2322 7.29647 10.1338C7.22117 10.0845 7.15938 10.046 7.11512 10.0191C7.09298 10.0056 7.07518 9.99502 7.06222 9.98739C7.05574 9.98358 7.05047 9.98051 7.04646 9.97819C7.04446 9.97703 7.04278 9.97606 7.04142 9.97528C7.04073 9.97489 7.04013 9.97454 7.03962 9.97425C7.03936 9.9741 7.03912 9.97396 7.0389 9.97384C7.03879 9.97377 7.03865 9.97369 7.03859 9.97366C7.03845 9.97358 7.03831 9.9735 6.66675 10.625ZM8.66675 12.5C9.34885 12.8118 9.3488 12.8119 9.34876 12.812C9.34876 12.812 9.34872 12.8121 9.34871 12.8121C9.3487 12.8122 9.34871 12.8121 9.34876 12.812C9.34884 12.8118 9.34905 12.8114 9.34938 12.8107C9.35003 12.8092 9.35117 12.8068 9.35277 12.8033C9.35599 12.7964 9.36109 12.7855 9.36805 12.7708C9.38196 12.7413 9.40327 12.6967 9.43164 12.6386C9.48841 12.5226 9.57333 12.3531 9.68378 12.1445C9.90507 11.7264 10.2268 11.1546 10.628 10.5403C11.4489 9.28341 12.5314 7.96007 13.6933 7.32469L12.9736 6.00863C11.4687 6.83158 10.218 8.4249 9.37213 9.72011C8.93998 10.3818 8.59509 10.9949 8.35805 11.4427C8.23933 11.667 8.14717 11.8508 8.08415 11.9797C8.05262 12.0441 8.02836 12.0949 8.01167 12.1303C8.00333 12.1479 7.99688 12.1617 7.99236 12.1715C7.9901 12.1763 7.98833 12.1802 7.98704 12.183C7.98639 12.1844 7.98587 12.1855 7.98547 12.1864C7.98527 12.1868 7.9851 12.1872 7.98496 12.1875C7.9849 12.1876 7.98482 12.1878 7.98478 12.1879C7.98471 12.188 7.98464 12.1882 8.66675 12.5Z\"\r\n fill=\"#079455\"\r\n />\r\n </svg>\r\n )}\r\n {this.showHelpIcon && (\r\n <div class={`help_circle`}>\r\n {!this.destructive ? (\r\n <gb-help-tooltip show-supporting-text={true}>\r\n <slot name=\"tooltip_label\" slot=\"label\"></slot>\r\n <slot name=\"tooltip_supporting_text\" slot=\"supporting_text\"></slot>\r\n </gb-help-tooltip>\r\n ) : (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z\"\r\n stroke=\"#B51726\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n )}\r\n </div>\r\n )}\r\n <gb-password-button onClick={() => this.togglePasswordVisibility()}></gb-password-button>\r\n </div>\r\n )}\r\n {this.type === 'count' && [\r\n <div class={`count_input`}>\r\n <div class={`count_text_input ${this.destructive ? 'destructive' : ''} ${this.state}`}>\r\n <input\r\n class={`content text-${this.size}-regular ${this.type} ${this.state}`}\r\n type={this.inputType}\r\n minLength={this.minLength}\r\n maxLength={this.maxLength}\r\n placeholder={this.placeholder ? this.placeholder : ''}\r\n onInput={event => this.handleInput(event)}\r\n value={this.value}\r\n onFocus={() => this.handleInputFocus()}\r\n />\r\n {this.loading && <div class=\"loader\"></div>}\r\n {this.showHelpIcon && (\r\n <div class={`help_circle`}>\r\n {!this.destructive ? (\r\n <gb-help-tooltip show-supporting-text={true}>\r\n <slot name=\"tooltip_label\" slot=\"label\"></slot>\r\n <slot name=\"tooltip_supporting_text\" slot=\"supporting_text\"></slot>\r\n </gb-help-tooltip>\r\n ) : (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z\"\r\n stroke=\"#B51726\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n <div class={`action ${this.state}`}>\r\n <gb-button\r\n size=\"xl\"\r\n state={this.state === 'disabled' ? 'disabled' : 'default'}\r\n hierarchy=\"tertiary_gray\"\r\n icon=\"only\"\r\n icon-leading=\"true\"\r\n icon-leading-swap=\"assets/minus_sign.svg\"\r\n onClick={() => this.onMinusButtonClicked()}\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 onClick={() => this.onPlusButtonClicked()}\r\n ></gb-button>\r\n </div>\r\n </div>,\r\n ]}\r\n {this.type === 'tags' && (\r\n <div class={`input_group ${this.state}`} ref={el => (this.inputGroupElement = el as HTMLDivElement)} onClick={() => this.handleWrapperClick()}>\r\n <div class={`input_like_parent ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}`} onClick={() => (this.dropdownOpen = !this.dropdownOpen)}>\r\n {/* ${this.selectedStaff.length >= 1 ? 'show_results' : ''} */}\r\n <div class={`results_display ${this.state === 'disabled' ? 'disabled' : ''}`} ref={el => (this.resultsDisplayElement = el as HTMLDivElement)}>\r\n {this.value.length === 0 ? (\r\n <>\r\n {this.selectedItems.map((item, index) => (\r\n <>\r\n {typeof item === 'object' ? (\r\n <gb-tag size=\"sm\" action=\"X_close\" icon={this.icon ? this.icon : 'avatar'} onClick={() => this.handleTagRemove(index)}>\r\n <h1 class=\"text-xxs-semi-bold\" slot=\"initials\">\r\n {item.objectName.split(' ').map(part => part.charAt(0).toUpperCase())}\r\n </h1>\r\n <p>{item.objectName.split(' ')[0]}</p>\r\n </gb-tag>\r\n ) : (\r\n <gb-tag size=\"sm\" action=\"X_close\" icon={this.icon ? this.icon : 'avatar'} onClick={() => this.handleTagRemove(index)}>\r\n <p>{item}</p>\r\n </gb-tag>\r\n )}\r\n </>\r\n ))}\r\n </>\r\n ) : (\r\n <>\r\n {this.value.map((val, index) => (\r\n <>\r\n {typeof val === 'object' ? (\r\n <gb-tag size=\"sm\" action=\"X_close\" icon={this.icon ? this.icon : 'avatar'} onClick={() => this.handleTagRemove(index)}>\r\n <h1 class=\"text-xxs-semi-bold\" slot=\"initials\">\r\n {val.objectName.split(' ').map(part => part.charAt(0).toUpperCase())}\r\n </h1>\r\n <p>{val.objectName.split(' ')[0]}</p>\r\n </gb-tag>\r\n ) : (\r\n <gb-tag size=\"sm\" action=\"X_close\" icon={this.icon ? this.icon : 'avatar'} onClick={() => this.handleTagRemove(index)}>\r\n <p>{val}</p>\r\n </gb-tag>\r\n )}\r\n </>\r\n ))}\r\n </>\r\n )}\r\n <span class=\"hidden-span\" ref={el => (this.hiddenSpan = el as HTMLElement)}>\r\n {this.inputValue || ' '}\r\n </span>\r\n <div class=\"input_field\">\r\n <input\r\n id={this.idOfInput}\r\n class={`input_like text-${this.size}-regular ${this.state}`}\r\n type=\"text\"\r\n // placeholder={this.placeholder && this.selectedStaff.length === 0 ? this.placeholder : ''}\r\n value={this.inputValue}\r\n readOnly={this.isReadOnly}\r\n ref={el => (this.inputElement = el as HTMLInputElement)}\r\n onBlur={() => this.exportSelectedStaff()}\r\n onInput={event => this.handleTagInput(event)}\r\n onFocus={() => this.handleInputFocus()}\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.metric_card_wrapper {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n border: 1px solid var(--color-border-subtler, #e3e8ef);\r\n background: var(--color-background-card, #ffffff);\r\n}\r\n\r\n.metric_card_wrapper.sm {\r\n width: 13.0625rem;\r\n gap: var(--spacing-4);\r\n padding: var(--spacing-4);\r\n}\r\n\r\n.metric_card_wrapper.md {\r\n width: 18.75rem;\r\n min-width: 18.75rem;\r\n gap: var(--spacing-7);\r\n box-shadow: var(--shadow-xs);\r\n padding: var(--spacing-6);\r\n}\r\n\r\n.metric_card_wrapper.radius_xs {\r\n border-radius: var(--rounded-xs);\r\n}\r\n\r\n.metric_card_wrapper.radius_md {\r\n border-radius: var(--rounded-md);\r\n}\r\n\r\n.icon_and_label.md {\r\n display: flex;\r\n align-items: center;\r\n gap: 1rem;\r\n align-self: stretch;\r\n}\r\n\r\n.featured_icon{\r\n width: 3rem;\r\n}\r\n\r\n.heading_and_number {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: var(--spacing-5);\r\n align-self: stretch;\r\n}\r\n\r\n.heading {\r\n color: var(--color-text, #4b5565);\r\n}\r\n\r\n.number_and_badge {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-end;\r\n gap: 1rem;\r\n align-self: stretch;\r\n}\r\n\r\n.number {\r\n color: var(--color-text-bold);\r\n}\r\n","import { Component, Prop, h } from '@stencil/core';\r\nimport { ColorTypes, GeneralSizes, MetricFeaturedIconTypes } from '../../models/reusableModels';\r\n\r\n@Component({\r\n tag: 'gb-metric-card',\r\n styleUrl: 'gb-metric-card.css',\r\n shadow: true,\r\n})\r\nexport class GbMetricCard {\r\n @Prop() size: GeneralSizes;\r\n @Prop() radius: GeneralSizes;\r\n @Prop() label: string;\r\n @Prop() metric: string;\r\n @Prop() showBadge: boolean = false;\r\n @Prop() featuredIconStyle: MetricFeaturedIconTypes;\r\n @Prop() featuredIconColor: ColorTypes;\r\n @Prop() icon: string = '';\r\n @Prop() percentage: string = '';\r\n\r\n render() {\r\n return (\r\n <div class={`metric_card_wrapper ${this.size} ${'radius_' + this.radius}`}>\r\n <div class={`icon_and_label ${this.size}`}>\r\n <div class=\"featured_icon\">\r\n <gb-metric-featured-icon\r\n size={this.size}\r\n featured-icon-style={this.featuredIconStyle}\r\n icon={this.icon}\r\n color={this.featuredIconColor}\r\n ></gb-metric-featured-icon>\r\n </div>\r\n {this.size === 'md' && <p class=\"heading text-sm-medium\">{this.label}</p>}\r\n </div>\r\n <div class=\"heading_and_number\">\r\n {this.size === 'sm' && <p class=\"heading text-sm-medium\">{this.label}</p>}\r\n <div class=\"number_and_badge\">\r\n <p class=\"number display-md-semi-bold\">{this.metric}</p>\r\n {this.showBadge && (\r\n <gb-badge size=\"lg\" type=\"pill_color\" color=\"gray\">\r\n <p>{this.percentage}</p>\r\n </gb-badge>\r\n )}\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 width: fit-content;\r\n position: relative;\r\n}\r\n\r\n.metric_featured_icon_wrapper {\r\n width: 2.5rem;\r\n height: 2.5rem;\r\n flex-shrink: 0;\r\n /* aspect-ratio: 1/1; */\r\n display: block;\r\n}\r\n\r\n.icon_glass {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n flex-shrink: 0;\r\n /* aspect-ratio: 1/1; */\r\n border-radius: var(--rounded-sm);\r\n border: 1px solid var(--color-surface-transparent50, rgba(255, 255, 255, 0.5));\r\n background: var(--color-surface-transparent50, rgba(255, 255, 255, 0.5));\r\n /* Backgroun Blur/Bg blur md */\r\n backdrop-filter: blur(8px);\r\n position: relative;\r\n z-index: 1;\r\n}\r\n\r\n.icon_glass.sm {\r\n /* width: 2.05131rem;\r\n height: 2.05131rem; */\r\n padding: 0.4375rem 0.48881rem 0.48881rem 0.4375rem;\r\n}\r\n\r\n.icon_glass.md {\r\n /* width: 2.46156rem;\r\n height: 2.46156rem; */\r\n padding: 0.50644rem 0.46156rem 0.45513rem 0.5rem;\r\n}\r\n\r\n.icon_background {\r\n transform: rotate(15deg);\r\n flex-shrink: 0;\r\n border-radius: var(--rounded-sm);\r\n position: absolute;\r\n}\r\n\r\n.icon_background.sm {\r\n width: 2.05131rem;\r\n height: 2.05131rem;\r\n left: 0.9rem;\r\n bottom: 0.8rem;\r\n}\r\n\r\n.icon_background.md {\r\n width: 2.46156rem;\r\n height: 2.46156rem;\r\n left: 0.7rem;\r\n bottom: 0.5rem;\r\n}\r\n\r\n.icon_background.yellow {\r\n background: var(--color-background-warning, #dc6803);\r\n}\r\n\r\n.icon_background.purple {\r\n background: var(--color-background-purple, #6938ef);\r\n}\r\n\r\n.icon_background.red {\r\n background: var(--color-background-danger, #b51726);\r\n}\r\n\r\n.icon_background.green {\r\n background: var(--color-background-success, #079455);\r\n}\r\n\r\n.icon_background.gray {\r\n background: var(--color-background-gray-bold, #808c9e);\r\n}\r\n\r\n.icon_background.blue {\r\n background: var(--color-background-information, #064e94);\r\n}\r\n\r\n/* Icon Styles */\r\n.icon {\r\n display: flex;\r\n /* padding: 0.09375rem 0.1875rem; */\r\n justify-content: center;\r\n align-items: center;\r\n flex-shrink: 0;\r\n /* aspect-ratio: 1/1; */\r\n}\r\n\r\n.icon.sm svg {\r\n width: 1.125rem;\r\n height: 1.125rem;\r\n}\r\n\r\n.icon.md svg {\r\n width: 1.5rem;\r\n height: 1.5rem;\r\n}\r\n\r\n.icon.yellow path[fill] {\r\n fill: var(--color-icon-warning-bold, #93370d);\r\n}\r\n\r\n.icon.yellow path[stroke] {\r\n stroke: var(--color-icon-warning-bold, #93370d);\r\n}\r\n\r\n.icon.purple path[fill] {\r\n fill: var(--color-icon-purple-bold, #4a1fb8);\r\n}\r\n\r\n.icon.purple path[stroke] {\r\n stroke: var(--color-icon-purple-bold, #4a1fb8);\r\n}\r\n\r\n.icon.red path[fill] {\r\n fill: var(--color-icon-danger-bold, #8c121d);\r\n}\r\n\r\n.icon.red path[stroke] {\r\n stroke: var(--color-icon-danger-bold, #8c121d);\r\n}\r\n\r\n.icon.green path[fill] {\r\n fill: var(--color-icon-success-bold, #085d3a);\r\n}\r\n\r\n.icon.green path[stroke] {\r\n stroke: var(--color-icon-success-bold, #085d3a);\r\n}\r\n\r\n.icon.gray path[fill] {\r\n fill: var(--color-icon-bold, #202939);\r\n}\r\n\r\n.icon.gray path[stroke] {\r\n stroke: var(--color-icon-bold, #202939);\r\n}\r\n\r\n.icon.blue path[fill] {\r\n fill: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.icon.blue path[stroke] {\r\n stroke: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n/* Circular Filled Styles */\r\n.circular_filled_outer {\r\n display: inline-flex;\r\n padding: var(--spacing-1);\r\n align-items: center;\r\n gap: 0.5rem;\r\n border-radius: var(--rounded-full);\r\n}\r\n\r\n.circular_filled_outer.yellow {\r\n background-color: var(--color-background-warning-subtler, #FEF0C7);\r\n}\r\n\r\n.circular_filled_outer.purple {\r\n background-color: var(--color-background-purple-subtler, #EBE9FE);\r\n}\r\n\r\n.circular_filled_outer.red {\r\n background-color: var(--color-background-danger-subtler, #EBE9FE);\r\n}\r\n\r\n.circular_filled_outer.green {\r\n background-color: var(--color-background-success-subtler, #dcfae6);\r\n}\r\n\r\n.circular_filled_outer.gray {\r\n background-color: var(--color-background-gray-subtler, #EEF2F6);\r\n}\r\n\r\n.circular_filled_outer.blue {\r\n background-color: var(--color-background-information-subtler, #C8E0F9);\r\n}\r\n\r\n.circular_filled_icon {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 0.5rem;\r\n border-radius: var(--rounded-full);\r\n}\r\n\r\n.circular_filled_icon.yellow{\r\n background: var(--color-background-warning-subtle, #FEDF89);\r\n}\r\n\r\n.circular_filled_icon.purple{\r\n background: var(--color-background-purple-subtle, #D9D6FE);\r\n}\r\n\r\n.circular_filled_icon.red{\r\n background: var(--color-background-danger-subtle, #F9B4BA);\r\n}\r\n\r\n.circular_filled_icon.green{\r\n background: var(--color-background-success-subtle, #A9EFC5);\r\n}\r\n\r\n.circular_filled_icon.gray{\r\n background: var(--color-background-gray, #CDD5DF);\r\n}\r\n\r\n.circular_filled_icon.blue{\r\n background: var(--color-background-information-subtle, #9AC7F4);\r\n}\r\n\r\n.circular_filled_icon.sm {\r\n width: 2rem;\r\n height: 2rem;\r\n}\r\n\r\n.circular_filled_icon.md {\r\n width: 2.5rem;\r\n height: 2.5rem;\r\n}\r\n","import { Component, Prop, State, getAssetPath, h, Fragment } from '@stencil/core';\r\nimport { ColorTypes, GeneralSizes, MetricFeaturedIconTypes } from '../../models/reusableModels';\r\n\r\n@Component({\r\n tag: 'gb-metric-featured-icon',\r\n styleUrl: 'gb-metric-featured-icon.css',\r\n shadow: true,\r\n})\r\nexport class GbMetricFeaturedIcon {\r\n @Prop() size: GeneralSizes;\r\n @Prop() color: ColorTypes;\r\n @Prop() featuredIconStyle: MetricFeaturedIconTypes;\r\n @Prop() icon: string;\r\n @State() leadingIconSvg: string = '';\r\n\r\n async loadIcon(iconName: string) {\r\n const iconPath = getAssetPath(`${iconName}`);\r\n const response = await fetch(iconPath);\r\n const svg = await response.text();\r\n this.leadingIconSvg = svg;\r\n }\r\n\r\n componentWillLoad() {\r\n this.loadIcon(this.icon);\r\n }\r\n\r\n render() {\r\n return (\r\n <>\r\n {this.featuredIconStyle === 'glassmorphism' && (\r\n <div class={`metric_featured_icon_wrapper ${this.size}`}>\r\n <div class={`icon_glass ${this.size}`}>\r\n <div class={`icon ${this.size} ${this.color}`} innerHTML={this.leadingIconSvg}></div>\r\n </div>\r\n <div class={`icon_background ${this.color} ${this.size}`}></div>\r\n </div>\r\n )}\r\n {this.featuredIconStyle === 'circular_filled' && (\r\n <div class={`circular_filled_outer ${this.color} ${this.size}`}>\r\n <div class={`circular_filled_icon icon ${this.size} ${this.color}`} innerHTML={this.leadingIconSvg}></div>\r\n </div>\r\n )}\r\n </>\r\n );\r\n }\r\n}\r\n","@import './../../global/global.css';\r\n\r\n:host{\r\n display: flex;\r\n align-items: center;\r\n 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/* Simple Sidebar Styles */\r\n.simple_sidebar_div{\r\n transition: all 0.3s ease-in-out;\r\n position: relative;\r\n height: 100vh;\r\n}\r\n\r\n.pattern{\r\n position: absolute;\r\n top: 0;\r\n width: 100%;\r\n height: 100%;\r\n overflow: hidden;\r\n mix-blend-mode: multiply;\r\n}\r\n\r\n.simple_sidebar_div .pattern img\r\n.primary_side_menu .pattern img{\r\n width: 100%;\r\n height: auto;\r\n}\r\n\r\n.simple_sidebar_div.expanded{\r\n display: inline-flex;\r\n flex-direction: column;\r\n justify-content: space-between;\r\n width: 16.75rem;\r\n}\r\n\r\n.simple_sidebar_div.collapsed{\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n width: 5rem;\r\n}\r\n\r\n.nav{\r\n display: flex;\r\n width: 100%;\r\n flex-direction: column;\r\n gap: var(--spacing-6);\r\n}\r\n\r\n.sidebar_header.expanded{\r\n display: flex;\r\n padding: var(--spacing-none) var(--spacing-4) var(--spacing-none) var(--spacing-6);\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-top: 1rem;\r\n}\r\n\r\n.sidebar_header.collapsed{\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n margin-top: 1rem;\r\n gap: 1.5rem;\r\n}\r\n\r\n.logo_and_name.expanded{\r\n display: flex;\r\n justify-content: flex-start;\r\n align-items: center;\r\n}\r\n\r\n.logo_and_name.collapsed{\r\n display: flex;\r\n justify-content: center;\r\n}\r\n\r\n.collapse_button.collapsed{\r\n display: flex;\r\n justify-content: center;\r\n}\r\n\r\n.application_name{\r\n display: flex;\r\n padding: var(--spacing-6);\r\n}\r\n\r\n.wrapper{\r\n display: flex;\r\n padding: var(--spacing-4) var(--spacing-5) var(--spacing-5) var(--spacing-5);\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: flex-start;\r\n gap: var(--spacing-4);\r\n align-self: stretch;\r\n border-radius: var(--rounded-sm);\r\n position: relative;\r\n width: 13.75rem;\r\n height: auto;\r\n overflow: hidden;\r\n}\r\n\r\n.application_icon svg{\r\n width: 2.5rem;\r\n height: 2.5rem;\r\n}\r\n\r\n.application_icon.plain_background path[stroke] {\r\n stroke: var(--color-icon-information-bold, #042F59);\r\n}\r\n\r\n.application_icon.plain_background path[fill] {\r\n fill: var(--color-icon-information-bold, #042F59);\r\n}\r\n\r\n.application_icon.colored_background path[stroke] {\r\n stroke: var(--base-white, #FFFFFF);\r\n}\r\n\r\n.application_icon.colored_background path[fill] {\r\n fill: var(--base-white, #FFFFFF);\r\n}\r\n\r\n.application_name_pattern{\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n mix-blend-mode: multiply;\r\n}\r\n\r\n.application_name_pattern img{\r\n width: 100%;\r\n}\r\n\r\n.wrapper{\r\n width: 100%;\r\n}\r\n\r\n.wrapper.colored_background{\r\n border: 1px solid rgba(255, 255, 255, 0.10);\r\n background: rgba(0, 0, 0, 0.10);\r\n}\r\n\r\n.wrapper.plain_background{\r\n background: var(--color-background-gray-subtlest, #F6F8FA);\r\n border: 1px solid var(--color-border-subtler, #E3E8EF);\r\n}\r\n\r\n.plain_background_color{\r\n color: var(--color-text-information-bold, #042F59);\r\n}\r\n\r\n.colored_background_color{\r\n color: var(--base-white, #FFFFFF);\r\n}\r\n\r\n/* Simple Sidebar Category Styles */\r\n.simple_sidebar_div.plain_background{\r\n border-right: 0.7px solid var(--color-border-subtle, #CDD5DF);\r\n background: var(--color-surface, #FFFFFF);\r\n}\r\n\r\n.simple_sidebar_div.colored_background{\r\n background-image: linear-gradient(180deg, #064E94 0%, #02182E 100%);\r\n background-size: cover;\r\n}\r\n\r\n.item{\r\n display: flex;\r\n flex-direction: column;\r\n width: 100%;\r\n gap: var(--spacing-1);\r\n}\r\n\r\n/* Complex Sidebar Styles */\r\n.sidebar_and_nav{\r\n width: fit-content;\r\n transition: all 0.3s ease-in-out;\r\n}\r\n\r\n.complex_sidebar_div{\r\n display: flex;\r\n gap: 0;\r\n width: fit-content;\r\n height: 100vh;\r\n}\r\n\r\n.primary_side_menu{\r\n position: relative;\r\n width: 6rem;\r\n}\r\n\r\n.primary_side_menu.standard{\r\n padding: var(--spacing-4) var(--spacing-none) 0.5rem var(--spacing-none);\r\n}\r\n\r\n.primary_side_menu.compact{\r\n padding: var(--spacing-2) var(--spacing-none) 0.5rem var(--spacing-none);\r\n}\r\n\r\n.primary_side_menu_container{\r\n width: 100%;\r\n}\r\n\r\n.nav_div{\r\n display: flex;\r\n height: 4.5rem;\r\n padding: 0.5rem var(--spacing-5) 0.5rem var(--spacing-7);\r\n align-items: center;\r\n gap: 1.5rem;\r\n flex: 1 0 0;\r\n border-bottom: 1px solid var(--color-border-subtler, #E3E8EF);\r\n background: var(--color-surface, #FFFFFF);\r\n}\r\n\r\n.logo_and_button{\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/* Complex Sidebar Category Styles */\r\n.primary_side_menu.plain_background{\r\n border-right: 0.7px solid var(--color-border-subtle, #CDD5DF);\r\n background: var(--color-surface, #FFFFFF);\r\n}\r\n\r\n.primary_side_menu.colored_background{\r\n background-image: linear-gradient(180deg, #064E94 0%, #02182E 100%);\r\n background-size: cover;\r\n}\r\n\r\n/* Complex Sidebar State Styles */\r\n.secondary_side_menu{\r\n width: fit-content;\r\n}\r\n\r\n.secondary_side_menu.colored_background{\r\n background: var(--color-background-information-subtlest, #E4F0FC);\r\n}\r\n\r\n.secondary_side_menu.plain_background{\r\n background: var(--color-surface, #FFFFFF);\r\n border-right: 0.7px solid var(--color-border-subtle, #CDD5DF);\r\n}\r\n\r\n.sside_menu{\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--spacing-2);\r\n height: 100vh;\r\n padding: var(--spacing-4) var(--spacing-none);\r\n}\r\n\r\n.information_header{\r\n display: flex;\r\nalign-items: center;\r\ngap: var(--spacing-2);\r\nalign-self: stretch;\r\n}\r\n\r\n.help_icon.plain_background path[stroke]{\r\n stroke: var(--color-text-brandDarkBlue, #212C65)\r\n}\r\n\r\n.help_icon.plain_background path[fill]{\r\n fill: var(--color-text-brandDarkBlue, #212C65)\r\n}\r\n\r\n.help_icon.colored_background path[stroke]{\r\n stroke: var(--base-white, #FFFFFF)\r\n}\r\n\r\n.help_icon.colored_background path[fill]{\r\n fill: var(--base-white, #FFFFFF)\r\n}\r\n\r\n\r\n.need_help.plain_background{\r\n color: var(--color-text-brandDarkBlue, #212C65);\r\n}\r\n\r\n.need_help.colored_background{\r\n color: var(--base-white, #FFFFFF);\r\n}\r\n\r\n.info.colored_background {\r\n color: var(--base-white, #FFFFFF);\r\n}\r\n\r\n.info.plain_background{\r\n color: var(--color-text-bold, #202939);\r\n}\r\n\r\n.phone_no{\r\n width: 100%;\r\n word-wrap: break-word;\r\n}","import { Component, Element, h, Prop, Fragment, State, getAssetPath, Method, Event, EventEmitter } from '@stencil/core';\r\nimport { GeneralBackgroundCategories } from '../../models/reusableModels';\r\n\r\n@Component({\r\n tag: 'gb-sidebar',\r\n styleUrl: 'gb-sidebar.css',\r\n shadow: true,\r\n})\r\nexport class GbSidebar {\r\n @Prop({ mutable: true }) state: 'expanded' | 'collapsed' = 'expanded';\r\n @Prop() category: GeneralBackgroundCategories;\r\n @Prop() navItemStyle: 'standard' | 'compact';\r\n @Prop() type: 'simple' | 'complex';\r\n @Prop() showSecondCategory: boolean = false;\r\n @Prop() iconInstance: string = '';\r\n @Prop() firstItemIcon: string = '';\r\n @Prop() secondItemIcon: string = '';\r\n @Prop() thirdItemIcon: string = '';\r\n @Prop() fourthItemIcon: string = '';\r\n @Prop() fifthItemIcon: string = '';\r\n @Prop() sixthItemIcon: string = '';\r\n @Prop() seventhItemIcon: string = '';\r\n @Prop() eighthItemIcon: string = '';\r\n @Prop() ninthItemIcon: string = '';\r\n @Prop() tenthItemIcon: string = '';\r\n @Prop() firstItemLabel: string = '';\r\n @Prop() secondItemLabel: string = '';\r\n @Prop() thirdItemLabel: string = '';\r\n @Prop() fourthItemLabel: string = '';\r\n @Prop() fifthItemLabel: string = '';\r\n @Prop() sixthItemLabel: string = '';\r\n @Prop() seventhItemLabel: string = '';\r\n @Prop() eighthItemLabel: string = '';\r\n @Prop() ninthItemLabel: string = '';\r\n @Prop() tenthItemLabel: string = '';\r\n @Prop() complexSidebarData: any = {\r\n Recruitment: {\r\n icon: 'assets/user-search-01.svg', // Icon class or path for Recruitment\r\n items: [\r\n { label: 'Overview', icon: 'assets/star.svg' },\r\n { label: 'My Profile', icon: 'assets/star.svg' },\r\n { label: 'Appraisal', icon: 'assets/star.svg' },\r\n { label: 'Staff Management', icon: 'assets/star.svg' },\r\n { label: 'Leave Management', icon: 'assets/star.svg' },\r\n { label: 'Resignation Portal', icon: 'assets/star.svg' },\r\n ],\r\n },\r\n Staff: {\r\n icon: 'assets/user-account.svg',\r\n items: [\r\n { label: 'Staff Overview', icon: 'assets/star.svg' },\r\n { label: 'Payroll Management', icon: 'assets/dashboard-square-03.svg' },\r\n { label: 'Attendance', icon: 'assets/dashboard-square-03.svg' },\r\n { label: 'New', icon: 'assets/dashboard-square-03.svg' },\r\n ],\r\n },\r\n };\r\n @Prop({ mutable: true }) activeIndex: number;\r\n @Prop({ mutable: true }) activePrimaryItem: string = 'Staff';\r\n @Prop({ mutable: true }) activeSecondaryItem: string = 'Attendance Tracking';\r\n @Prop() hasInfo: boolean = false;\r\n @Prop() email: string = '';\r\n @Prop() phoneNumber: string = '';\r\n @Prop() theme: 'system' | 'light' | 'dark' = 'system';\r\n @State() isDarkTheme: boolean = false;\r\n @Element() el: HTMLElement;\r\n @State() leadingIconSvg: string = '';\r\n @Event() simpleSidebarItemClicked: EventEmitter<number>;\r\n @Event() secondaryItemClicked: EventEmitter<number>;\r\n @Event() primaryItemClicked: EventEmitter<{ primary: number; secondary: number }>;\r\n @Event() sidebarState: EventEmitter<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 collapseSideBar() {\r\n if (this.state === 'expanded') {\r\n this.state = 'collapsed';\r\n }\r\n this.sidebarState.emit('collapsed');\r\n }\r\n\r\n expandSideBar() {\r\n if (this.state === 'collapsed') {\r\n this.state = 'expanded';\r\n }\r\n this.sidebarState.emit('expanded');\r\n }\r\n\r\n @Method()\r\n async sideBarItemClicked(index: number) {\r\n this.activeIndex = index;\r\n // console.log(index);\r\n this.simpleSidebarItemClicked.emit(index);\r\n }\r\n\r\n handlePrimaryClick(item: string, _index: number) {\r\n this.activePrimaryItem = item;\r\n this.activeSecondaryItem = this.complexSidebarData[item].items[0].label; // Reset to the first secondary item\r\n // console.log(index)\r\n }\r\n\r\n handleSecondaryClick(item: string, _index: number) {\r\n this.activeSecondaryItem = item;\r\n // console.log(index);\r\n }\r\n\r\n componentDidLoad() {\r\n const applicationName = this.el.querySelector('[slot=\"application_name\"]');\r\n\r\n if (applicationName) {\r\n applicationName.classList.add('text-lg-bold');\r\n applicationName.classList.add('application_name');\r\n }\r\n }\r\n\r\n changeTheme() {\r\n if (this.theme === 'system') {\r\n if(window.matchMedia('(prefers-color-scheme: dark)').matches) {\r\n this.isDarkTheme = true;\r\n } else {\r\n this.isDarkTheme = false;\r\n }\r\n } else if (this.theme === 'light') {\r\n this.isDarkTheme = false;\r\n } else if (this.theme === 'dark') {\r\n this.isDarkTheme = true;\r\n }\r\n }\r\n\r\n componentWillLoad() {\r\n this.loadIcon(this.iconInstance);\r\n\r\n this.changeTheme();\r\n }\r\n\r\n render() {\r\n const textClass = this.category === 'plain_background' ? 'plain_background_color' : 'colored_background_color';\r\n const patternSrc = getAssetPath(`assets/pattern_wrapper.svg`);\r\n const logoSrc = getAssetPath(`assets/globus_bank_logo.svg`);\r\n const blueLogoSrc = getAssetPath(`assets/globus_bank_logo_blue.svg`);\r\n const whiteLogoSrc = getAssetPath(`assets/globus_bank_logo_white.svg`);\r\n\r\n return (\r\n <>\r\n {this.type === 'simple' && (\r\n <div class={`simple_sidebar_div ${this.state} ${this.category}`}>\r\n {this.category === 'colored_background' && (\r\n <div class=\"pattern\">\r\n <img src={patternSrc} alt=\"\" />\r\n </div>\r\n )}\r\n <div class=\"nav\">\r\n <div class={`sidebar_header ${this.state}`}>\r\n <div class={`logo_and_name ${this.state}`}>\r\n {this.state === 'expanded' && (\r\n <>\r\n {this.category === 'plain_background' && this.isDarkTheme ? (\r\n <img src={whiteLogoSrc} />\r\n ) : this.category === 'plain_background' && !this.isDarkTheme ? (\r\n <img src={blueLogoSrc} />\r\n ) : (\r\n <img src={whiteLogoSrc} />\r\n )}\r\n </>\r\n )}\r\n {this.state === 'collapsed' && <img src={logoSrc} alt=\"\" />}\r\n </div>\r\n <div class={`collapse_button ${this.state}`}>\r\n <gb-collapse-button\r\n color={this.category === 'plain_background' ? 'gray' : 'white'}\r\n action={this.state === 'collapsed' ? 'expand' : 'collapse'}\r\n onClick={() => (this.state === 'collapsed' ? this.expandSideBar() : this.collapseSideBar())}\r\n ></gb-collapse-button>\r\n </div>\r\n </div>\r\n <div class=\"navigation\">\r\n <div class=\"item\">\r\n <gb-simple-side-bar-item\r\n state={this.activeIndex === 0 ? 'active' : 'default'}\r\n icon={this.firstItemIcon}\r\n category={this.category}\r\n type={this.state === 'collapsed' ? 'icon_only' : 'full_with_label'}\r\n onClick={() => this.sideBarItemClicked(0)}\r\n label={this.firstItemLabel}\r\n ></gb-simple-side-bar-item>\r\n <gb-simple-side-bar-item\r\n state={this.activeIndex === 1 ? 'active' : 'default'}\r\n icon={this.secondItemIcon}\r\n category={this.category}\r\n type={this.state === 'collapsed' ? 'icon_only' : 'full_with_label'}\r\n onClick={() => this.sideBarItemClicked(1)}\r\n label={this.secondItemLabel}\r\n ></gb-simple-side-bar-item>\r\n {this.thirdItemLabel && (\r\n <gb-simple-side-bar-item\r\n state={this.activeIndex === 2 ? 'active' : 'default'}\r\n icon={this.thirdItemIcon}\r\n category={this.category}\r\n type={this.state === 'collapsed' ? 'icon_only' : 'full_with_label'}\r\n onClick={() => this.sideBarItemClicked(2)}\r\n label={this.thirdItemLabel}\r\n ></gb-simple-side-bar-item>\r\n )}\r\n {this.fourthItemLabel && (\r\n <gb-simple-side-bar-item\r\n state={this.activeIndex === 3 ? 'active' : 'default'}\r\n icon={this.fourthItemIcon}\r\n category={this.category}\r\n type={this.state === 'collapsed' ? 'icon_only' : 'full_with_label'}\r\n onClick={() => this.sideBarItemClicked(3)}\r\n label={this.fourthItemLabel}\r\n ></gb-simple-side-bar-item>\r\n )}\r\n {this.fifthItemLabel && (\r\n <gb-simple-side-bar-item\r\n state={this.activeIndex === 4 ? 'active' : 'default'}\r\n icon={this.fifthItemIcon}\r\n category={this.category}\r\n type={this.state === 'collapsed' ? 'icon_only' : 'full_with_label'}\r\n onClick={() => this.sideBarItemClicked(4)}\r\n label={this.fifthItemLabel}\r\n ></gb-simple-side-bar-item>\r\n )}\r\n </div>\r\n </div>\r\n {this.showSecondCategory && (\r\n <div class=\"navigation\">\r\n <div class=\"item\">\r\n {this.sixthItemLabel && (\r\n <gb-simple-side-bar-item\r\n state={this.activeIndex === 5 ? 'active' : 'default'}\r\n icon={this.sixthItemIcon}\r\n category={this.category}\r\n type={this.state === 'collapsed' ? 'icon_only' : 'full_with_label'}\r\n onClick={() => this.sideBarItemClicked(5)}\r\n label={this.sixthItemLabel}\r\n ></gb-simple-side-bar-item>\r\n )}\r\n {this.seventhItemLabel && (\r\n <gb-simple-side-bar-item\r\n state={this.activeIndex === 6 ? 'active' : 'default'}\r\n icon={this.seventhItemIcon}\r\n category={this.category}\r\n type={this.state === 'collapsed' ? 'icon_only' : 'full_with_label'}\r\n onClick={() => this.sideBarItemClicked(6)}\r\n label={this.seventhItemLabel}\r\n ></gb-simple-side-bar-item>\r\n )}\r\n {this.eighthItemLabel && (\r\n <gb-simple-side-bar-item\r\n state={this.activeIndex === 7 ? 'active' : 'default'}\r\n icon={this.eighthItemIcon}\r\n category={this.category}\r\n type={this.state === 'collapsed' ? 'icon_only' : 'full_with_label'}\r\n onClick={() => this.sideBarItemClicked(7)}\r\n label={this.eighthItemLabel}\r\n ></gb-simple-side-bar-item>\r\n )}\r\n {this.ninthItemLabel && (\r\n <gb-simple-side-bar-item\r\n state={this.activeIndex === 8 ? 'active' : 'default'}\r\n icon={this.ninthItemIcon}\r\n category={this.category}\r\n type={this.state === 'collapsed' ? 'icon_only' : 'full_with_label'}\r\n onClick={() => this.sideBarItemClicked(8)}\r\n label={this.ninthItemLabel}\r\n ></gb-simple-side-bar-item>\r\n )}\r\n {this.tenthItemLabel && (\r\n <gb-simple-side-bar-item\r\n state={this.activeIndex === 9 ? 'active' : 'default'}\r\n icon={this.tenthItemIcon}\r\n category={this.category}\r\n type={this.state === 'collapsed' ? 'icon_only' : 'full_with_label'}\r\n onClick={() => this.sideBarItemClicked(9)}\r\n label={this.tenthItemLabel}\r\n ></gb-simple-side-bar-item>\r\n )}\r\n </div>\r\n </div>\r\n )}\r\n </div>\r\n {this.state === 'expanded' && (\r\n <div class=\"application_name\">\r\n <div class={`wrapper ${this.category}`}>\r\n {this.category === 'plain_background' && (\r\n <div class=\"application_name_pattern\">\r\n <img src={patternSrc} alt=\"\" />\r\n </div>\r\n )}\r\n {this.hasInfo ? (\r\n <>\r\n <div class=\"information_header\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" class={`help_icon ${this.category}`}>\r\n <path\r\n opacity=\"0.4\"\r\n d=\"M22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12Z\"\r\n fill=\"var(--color-text-brandDarkBlue, #212C65)\"\r\n />\r\n <path\r\n d=\"M11.2422 17C11.2422 17.5523 11.6899 18 12.2422 18C12.7945 18 13.2422 17.5523 13.2422 17H11.2422ZM11.2422 10C10.6899 10 10.2422 10.4477 10.2422 11C10.2422 11.5523 10.6899 12 11.2422 12V10ZM12.0957 11.1464L12.8028 10.4393L12.0957 11.1464ZM11.992 7C11.4397 7 10.992 7.44772 10.992 8C10.992 8.55228 11.4397 9 11.992 9V7ZM12.001 9C12.5533 9 13.001 8.55228 13.001 8C13.001 7.44772 12.5533 7 12.001 7V9ZM23 12C23 5.92487 18.0751 1 12 1V3C16.9706 3 21 7.02944 21 12H23ZM12 1C5.92487 1 1 5.92487 1 12H3C3 7.02944 7.02944 3 12 3V1ZM1 12C1 18.0751 5.92487 23 12 23V21C7.02944 21 3 16.9706 3 12H1ZM12 23C18.0751 23 23 18.0751 23 12H21C21 16.9706 16.9706 21 12 21V23ZM11.2422 12V17H13.2422V12H11.2422ZM11.2422 12C11.3638 12 11.4531 12.0001 11.5286 12.002C11.6046 12.0039 11.6417 12.0072 11.6576 12.0094C11.6729 12.0114 11.6408 12.009 11.5864 11.9866C11.524 11.9609 11.4526 11.9176 11.3886 11.8536L12.8028 10.4393C12.5129 10.1493 12.1711 10.0604 11.9241 10.0272C11.7058 9.99788 11.4496 10 11.2422 10V12ZM13.2422 12C13.2422 11.7926 13.2443 11.5364 13.215 11.3181C13.1818 11.0711 13.0928 10.7293 12.8028 10.4393L11.3886 11.8536C11.3246 11.7896 11.2813 11.7181 11.2556 11.6558C11.2332 11.6014 11.2307 11.5693 11.2328 11.5846C11.2349 11.6005 11.2383 11.6376 11.2402 11.7136C11.2421 11.789 11.2422 11.8784 11.2422 12H13.2422ZM11.992 9H12.001V7H11.992V9Z\"\r\n fill=\"var(--color-text-brandDarkBlue, #212C65)\"\r\n />\r\n </svg>\r\n <p class={`need_help ${this.category} text-lg-bold`}>Need help?</p>\r\n </div>\r\n {/* <p class={`info ${this.category} text-sm-medium`}>Info@globusbank.com</p> */}\r\n {/* <p class={`info ${this.category} text-sm-medium`}>(+234) 123 4324 122</p> */}\r\n <p class={`info phone_no ${this.category} text-sm-medium`}>{this.email}</p>\r\n <p class={`info ${this.category} text-sm-medium`}>{this.phoneNumber}</p>\r\n </>\r\n ) : (\r\n <>\r\n <div class={`application_icon ${this.category}`} innerHTML={this.leadingIconSvg}></div>\r\n <span class={textClass}>\r\n <slot name=\"application_name\"></slot>\r\n </span>\r\n </>\r\n )}\r\n </div>\r\n </div>\r\n )}\r\n </div>\r\n )}\r\n {this.type === 'complex' && (\r\n <div class={`sidebar_and_nav ${this.state}`}>\r\n <div class=\"nav_div\">\r\n <div class=\"logo_and_button\">\r\n {this.state === 'expanded' && <img src={blueLogoSrc} />}\r\n {this.state === 'collapsed' && <img src={logoSrc} alt=\"\" />}\r\n <gb-collapse-button\r\n color=\"gray\"\r\n action={this.state === 'collapsed' ? 'expand' : 'collapse'}\r\n onClick={() => (this.state === 'collapsed' ? this.expandSideBar() : this.collapseSideBar())}\r\n ></gb-collapse-button>\r\n </div>\r\n </div>\r\n <div class=\"complex_sidebar_div\">\r\n <div class={`primary_side_menu ${this.category} ${this.navItemStyle}`}>\r\n {this.category === 'colored_background' && (\r\n <div class=\"pattern\">\r\n <img src={patternSrc} alt=\"\" />\r\n </div>\r\n )}\r\n <div class=\"primary_side_menu_container\">\r\n {Object.keys(this.complexSidebarData).map((primaryItem, index) => (\r\n <gb-complex-primary-side-bar-item\r\n key={`${index}`} // Unique key\r\n label={primaryItem}\r\n category={this.category}\r\n item-style={this.navItemStyle}\r\n icon={this.complexSidebarData[primaryItem].icon}\r\n state={this.activePrimaryItem === primaryItem ? 'active' : 'default'}\r\n onClick={() => this.handlePrimaryClick(primaryItem, index)}\r\n ></gb-complex-primary-side-bar-item>\r\n ))}\r\n </div>\r\n </div>\r\n <div class={`secondary_side_menu ${this.category} ${this.state}`}>\r\n <div class=\"sside_menu\">\r\n {this.complexSidebarData[this.activePrimaryItem].items.map((secondaryItem, index) => (\r\n <gb-complex-secondary-side-bar-item\r\n key={`${this.activePrimaryItem}-${index}`} // Unique key\r\n type={this.state === 'expanded' ? 'full_with_label' : 'icon_only'}\r\n label={secondaryItem.label}\r\n category={this.category}\r\n icon={secondaryItem.icon}\r\n state={this.activeSecondaryItem === secondaryItem.label ? 'active' : 'default'}\r\n onClick={() => this.handleSecondaryClick(secondaryItem.label, index)}\r\n ></gb-complex-secondary-side-bar-item>\r\n ))}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n )}\r\n </>\r\n );\r\n }\r\n}\r\n","@import './../../global/global.css';\r\n\r\n:host {\r\n position: relative;\r\n}\r\n\r\n.side_bar_item_container {\r\n padding: 0 var(--spacing-4);\r\n}\r\n\r\n.nav_item_base.icon_only {\r\n width: fit-content;\r\n}\r\n\r\n.nav_item_base {\r\n display: flex;\r\n padding: var(--spacing-2) var(--spacing-3);\r\n justify-content: space-between;\r\n align-items: center;\r\n gap: 0.5rem;\r\n align-self: stretch;\r\n border-radius: var(--rounded-sm);\r\n cursor: pointer;\r\n position: relative;\r\n flex-grow: 1;\r\n}\r\n\r\n.content {\r\n display: flex;\r\n align-items: center;\r\n gap: 0.75rem;\r\n flex-grow: 1;\r\n max-width: 100%;\r\n}\r\n\r\n.bar {\r\n position: absolute;\r\n left: 0rem;\r\n width: 0.25rem;\r\n height: 1.25rem;\r\n}\r\n\r\n.bar.plain_background {\r\n border-radius: var(--rounded-full);\r\n background: var(--color-border-brandRed, #E21B2E);\r\n}\r\n\r\n.bar.colored_background {\r\n border-radius: var(--rounded-full);\r\n background: var(--base-white, #FFFFFF);\r\n}\r\n\r\n.icon {\r\n display: flex;\r\n align-items: center;\r\n width: 1.5rem;\r\n height: 1.5rem;\r\n}\r\n\r\n.label_text {\r\n max-width: 100%;\r\n overflow-x: hidden;\r\n overflow-y: none;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n scrollbar-width: none;\r\n}\r\n\r\n.label_text::-webkit-scrollbar {\r\n display: none;\r\n}\r\n\r\n/* State and Category Styles */\r\n.nav_item_base.plain_background.default,\r\n.nav_item_base.colored_background.default {\r\n background: transparent;\r\n}\r\n\r\n.nav_item_base.plain_background.active {\r\n background: var(--color-background-information-subtler, #c8e0f9);\r\n}\r\n\r\n.nav_item_base.default.plain_background:hover {\r\n background: var(--color-background-gray-subtler, #eef2f6);\r\n}\r\n\r\n.nav_item_base.colored_background.active {\r\n background: var(--blue-800, #042f59);\r\n}\r\n\r\n.nav_item_base.default.colored_background:hover {\r\n background: rgba(33, 44, 101, 0.4);\r\n}\r\n\r\n.label_text.plain_background.default {\r\n color: var(--color-text, #4b5565);\r\n}\r\n\r\n.label_text.plain_background.active {\r\n color: var(--color-text-information-bold, #042f59);\r\n}\r\n\r\n.label_text.colored_background {\r\n color: var(--base-white, #ffffff);\r\n}\r\n\r\n/* Icon Color Styles */\r\n.icon.plain_background.default path[stroke] {\r\n stroke: var(--color-icon, #4b5565);\r\n}\r\n\r\n.icon.plain_background.default path[fill] {\r\n fill: var(--color-icon, #4b5565);\r\n}\r\n\r\n.icon.plain_background.active path[stroke] {\r\n stroke: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.icon.plain_background.active path[fill] {\r\n fill: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.icon.plain_background.default path#Icon[stroke] {\r\n stroke: var(--color-icon, #4b5565);\r\n}\r\n\r\n.icon.plain_background.default path#Icon[fill] {\r\n fill: var(--color-icon, #4b5565);\r\n}\r\n\r\n.icon.plain_background.active path#Icon[stroke] {\r\n stroke: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.icon.plain_background.active path#Icon[fill] {\r\n fill: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.icon.plain_background.active path#Accent[stroke] {\r\n stroke: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.icon.plain_background.active path#Accent[fill] {\r\n fill: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.icon.plain_background.default circle[stroke] {\r\n stroke: var(--color-icon, #4b5565);\r\n}\r\n\r\n.icon.plain_background.active circle[fill] {\r\n fill: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.icon.colored_background.default path[stroke] {\r\n stroke: var(--base-white, #ffffff);\r\n}\r\n\r\n.icon.colored_background.default path[fill] {\r\n fill: var(--base-white, #ffffff);\r\n}\r\n\r\n.icon.colored_background.active path[stroke] {\r\n stroke: var(--base-white, #ffffff);\r\n}\r\n\r\n.icon.colored_background.active path[fill] {\r\n fill: var(--base-white, #ffffff);\r\n}\r\n\r\n.icon.colored_background path#Icon[stroke] {\r\n stroke: var(--base-white, #ffffff);\r\n}\r\n\r\n.icon.colored_background path#Icon[fill] {\r\n fill: var(--base-white, #ffffff);\r\n}\r\n\r\n.icon.colored_background.active path#Accent[stroke] {\r\n stroke: var(--base-white, #ffffff);\r\n}\r\n\r\n.icon.colored_background.active path#Accent[fill] {\r\n fill: var(--base-white, #ffffff);\r\n}\r\n\r\n.icon.colored_background circle[stroke] {\r\n stroke: var(--base-white, #ffffff);\r\n}\r\n\r\n.icon.colored_background circle[fill] {\r\n fill: var(--base-white, #ffffff);\r\n}\r\n\r\n.icon.colored_background.active circle[stroke] {\r\n stroke: var(--base-white, #ffffff);\r\n}\r\n\r\n.icon.colored_background.active circle[fill] {\r\n fill: var(--base-white, #ffffff);\r\n}\r\n\r\n/* .icon.plain_background.default path[fill],\r\n.icon.colored_background.default path[fill],\r\n.icon.plain_background.default circle[fill],\r\n.icon.colored_background.default circle[fill] {\r\n fill: transparent;\r\n} */\r\n\r\n.icon.plain_background.default path.has_opacity,\r\n.icon.plain_background.default g.has_opacity,\r\n.icon.plain_background.default circle.has_opacity,\r\n.icon.colored_background.default path.has_opacity,\r\n.icon.colored_background.default g.has_opacity,\r\n.icon.colored_background.default circle.has_opacity {\r\n opacity: 0;\r\n}\r\n\r\n.icon.plain_background.active path.has_opacity,\r\n.icon.plain_background.active g.has_opacity,\r\n.icon.plain_background.active circle.has_opacity,\r\n.icon.colored_background.active path.has_opacity,\r\n.icon.colored_background.active g.has_opacity,\r\n.icon.colored_background.active circle.has_opacity {\r\n opacity: 0.5;\r\n}\r\n\r\n/* .icon.plain_background.default path[fill].has_opacity,\r\n.icon.plain_background.default g.has_opacity,\r\n.icon.colored_background.default path[fill].has_opacity,\r\n.icon.colored_background.default g.has_opacity{\r\n fill: transparent;\r\n} */\r\n\r\n/* Arrow Color Styles */\r\n.arrow.default.plain_background path {\r\n stroke: var(--color-icon, #4b5565);\r\n}\r\n\r\n.arrow.active.plain_background path {\r\n stroke: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.arrow.default.colored_background path {\r\n stroke: var(--color-icon-inverse, #ffffff);\r\n}\r\n\r\n.arrow.active.colored_background path {\r\n stroke: var(--color-icon-inverse, #ffffff);\r\n}\r\n\r\n.tooltip {\r\n position: absolute;\r\n top: 0.2rem;\r\n left: 4.3rem;\r\n}\r\n","import { Component, h, Prop, Fragment, getAssetPath, State, Event, EventEmitter, Element, Watch } from \"@stencil/core\";\r\nimport { GeneralBackgroundCategories } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n tag: 'gb-simple-side-bar-item',\r\n styleUrl: 'gb-simple-side-bar-item.css',\r\n shadow: true,\r\n})\r\nexport class GbSimpleSideBarItem {\r\n @Prop() state: 'default' | 'active';\r\n @Prop() type: 'full_with_label' | 'icon_only';\r\n @Prop() label: string = '';\r\n @Prop() icon: string = '';\r\n @Prop() category: GeneralBackgroundCategories;\r\n @Prop() showArrow: boolean = false;\r\n @Prop() showBadge: boolean = false;\r\n @Prop({ mutable: true }) showTooltip: boolean = false;\r\n @State() leadingIconSvg: string = '';\r\n @State() internalIcon: string = '';\r\n @Event() sideBarItemClicked: EventEmitter<void>;\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\r\n const parser = new DOMParser();\r\n const svgDoc = parser.parseFromString(svg, 'image/svg+xml');\r\n const svgElement = svgDoc.documentElement;\r\n\r\n // Add `has-opacity` class to all elements that have an opacity attribute\r\n const elementsWithOpacity = svgElement.querySelectorAll('[opacity]');\r\n elementsWithOpacity.forEach(el => {\r\n el.classList.add('has_opacity');\r\n });\r\n\r\n const gWithOpacity = svgElement.querySelectorAll('g[opacity]');\r\n\r\n gWithOpacity.forEach(g => {\r\n g.classList.add('has_opacity');\r\n });\r\n\r\n // Serialize and store\r\n const modifiedSvg = svgElement.outerHTML;\r\n // console.log(modifiedSvg)\r\n this.leadingIconSvg = modifiedSvg;\r\n }\r\n\r\n @Watch('icon')\r\n updateSidebarIcon(newValue: string, _oldValue: string) {\r\n this.internalIcon = newValue;\r\n }\r\n\r\n componentWillLoad() {\r\n this.loadIcon(this.icon);\r\n\r\n this.internalIcon = this.icon;\r\n }\r\n\r\n onSideBarItemClicked() {\r\n this.sideBarItemClicked.emit();\r\n }\r\n\r\n render() {\r\n return (\r\n <div class={`side_bar_item_container`} onMouseEnter={() => (this.showTooltip = true)} onMouseLeave={() => (this.showTooltip = false)}>\r\n <div class={`nav_item_base ${this.state} ${this.type} ${this.category}`}>\r\n {this.state === 'active' && <div class={`bar ${this.category}`}></div>}\r\n <div class=\"content\">\r\n <div class={`icon ${this.state} ${this.category}`} innerHTML={this.leadingIconSvg}></div>\r\n {this.type === 'full_with_label' && (\r\n <p class={`label_text ${this.category} ${this.state} ${this.state === 'active' ? 'text-md-semi-bold' : 'text-md-medium'}`}>{this.label}</p>\r\n )}\r\n </div>\r\n {this.type === 'full_with_label' && (\r\n <>\r\n {this.showBadge && (\r\n <gb-badge size=\"sm\" type=\"pill_outline\" color={this.state === 'active' ? 'information' : 'gray'}>\r\n <p>10</p>\r\n </gb-badge>\r\n )}\r\n {this.showArrow && (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" class={`arrow ${this.state} ${this.category}`}>\r\n <path\r\n d=\"M6.00003 4C6.00003 4 9.99999 6.94596 10 8.00003C10 9.05411 6 12 6 12\"\r\n stroke=\"#212C65\"\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 </>\r\n )}\r\n </div>\r\n {this.type === 'icon_only' && this.showTooltip && (\r\n <gb-tooltip show-arrow={true} arrow=\"left\" class=\"tooltip\">\r\n <p slot=\"label\">{this.label}</p>\r\n </gb-tooltip>\r\n )}\r\n </div>\r\n );\r\n }\r\n}","@import './../../global/global.css';\r\n\r\n.online_icon{\r\n border: 1.5px solid var(--color-boarder-inverse, #FFFFFF);\r\n border-radius: var(--rounded-full);\r\n}\r\n\r\n/* Online Indicator States */\r\n.online_icon.offline{\r\n background-color: var(--color-background-gray, #CDD5DF);\r\n}\r\n\r\n.online_icon.online{\r\n background-color: var(--color-icon-success, #079455);\r\n}\r\n\r\n/* Online Indicator Sizes */\r\n.online_icon.xxs{\r\n width: 0.25rem;\r\n height: 0.25rem;\r\n}\r\n\r\n.online_icon.xs{\r\n width: 0.375rem;\r\n height: 0.375rem;\r\n}\r\n\r\n.online_icon.sm{\r\n width: var(--spacing-2);\r\n height: var(--spacing-2);\r\n}\r\n\r\n.online_icon.md{\r\n width: 0.625rem;\r\n height: 0.625rem;\r\n}\r\n\r\n.online_icon.lg{\r\n width: var(--spacing-3);\r\n height: var(--spacing-3);\r\n}\r\n\r\n.online_icon.xl{\r\n width: 0.875rem;\r\n height: 0.875rem;\r\n}\r\n\r\n.online_icon.xl2{\r\n width: var(--spacing-4);\r\n height: var(--spacing-4);\r\n}\r\n\r\n/* Verified Tick Sizes */\r\n.verified.xxs{\r\n width: 0.375rem;\r\n height: 0.375rem;\r\n}\r\n\r\n.verified.xs{\r\n width: 0.625rem;\r\n height: 0.625rem;\r\n}\r\n\r\n.verified.sm{\r\n width: var(--spacing-3);\r\n height: var(--spacing-3);\r\n}\r\n\r\n.verified.md{\r\n width: 0.875rem;\r\n height: 0.875rem;\r\n}\r\n\r\n.verified.lg{\r\n width: var(--spacing-4);\r\n height: var(--spacing-4);\r\n}\r\n\r\n.verified.xl{\r\n width: 1.125rem;\r\n height: 1.125rem;\r\n}\r\n\r\n.verified.xl2{\r\n width: var(--spacing-5);\r\n height: var(--spacing-5);\r\n}\r\n\r\n.verified.xl3{\r\n width: var(--spacing-6);\r\n height: var(--spacing-6);\r\n}\r\n\r\n.verified.xl4{\r\n width: var(--spacing-7);\r\n height: var(--spacing-7);\r\n}\r\n\r\n.verified.profile_sm{\r\n width: var(--spacing-5);\r\n height: var(--spacing-5);\r\n position: absolute;\r\n bottom: 0.15rem;\r\n right: 0.01rem;\r\n}\r\n\r\n.verified.profile_md{\r\n width: var(--spacing-6);\r\n height: var(--spacing-6);\r\n position: absolute;\r\n bottom: 0.25rem;\r\n right: 0.2rem;\r\n}\r\n\r\n.verified.profile_lg{\r\n width: var(--spacing-7);\r\n height: var(--spacing-7);\r\n position: absolute;\r\n bottom: 0.5rem;\r\n right: 0.2rem;\r\n}\r\n\r\n/* Company Icon Sizes */\r\n.company.xs{\r\n width: 0.25rem;\r\n height: 0.25rem;\r\n}\r\n\r\n.company.xs{\r\n width: 0.625rem;\r\n height: 0.625rem;\r\n}\r\n\r\n.company.sm{\r\n width: 0.75rem;\r\n height: var(--spacing-3);\r\n}\r\n\r\n.company.md{\r\n width: 0.875rem;\r\n height: 0.875rem;\r\n}\r\n\r\n.company.lg{\r\n width: 1rem;\r\n height: var(--spacing-4);\r\n}\r\n\r\n.company.xl{\r\n width: 1.125rem;\r\n height: 1.125rem;\r\n}\r\n\r\n.company.xl2{\r\n width: 1.25rem;\r\n height: var(--spacing-5);\r\n}","import { Component, h, Prop } from \"@stencil/core\";\r\nimport { GeneralSizes, OnlineIndicatorStates } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n tag: 'gb-status-indicator',\r\n styleUrl: 'gb-status-indicator.css',\r\n shadow: true\r\n})\r\n\r\nexport class GbStatusIndicator {\r\n @Prop() statusIcon: string = '';\r\n @Prop() size: GeneralSizes;\r\n @Prop() state: OnlineIndicatorStates = OnlineIndicatorStates.Offline;\r\n @Prop() indicatorStateClass: string = this.state;\r\n\r\n render() {\r\n return [\r\n <div>\r\n {this.statusIcon === 'online_indicator' && <div class={`online_icon ${this.size} ${this.indicatorStateClass}`}></div>}\r\n {this.statusIcon === 'verified' && (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" class={`verified ${this.size}`}>\r\n <g clip-path=\"url(#clip0_0_21453)\">\r\n <path\r\n d=\"M24.7109 5.66715C25.0148 6.40217 25.5982 6.98642 26.3328 7.29145L28.9086 8.35837C29.6436 8.66285 30.2277 9.24688 30.5321 9.98196C30.8366 10.717 30.8366 11.543 30.5321 12.2781L29.466 14.852C29.1614 15.5874 29.1609 16.4142 29.467 17.1492L30.5313 19.7224C30.6822 20.0865 30.7599 20.4767 30.76 20.8708C30.7601 21.265 30.6825 21.6553 30.5316 22.0194C30.3808 22.3835 30.1597 22.7143 29.881 22.993C29.6022 23.2716 29.2713 23.4926 28.9072 23.6433L26.3332 24.7095C25.5982 25.0134 25.0139 25.5968 24.7089 26.3314L23.642 28.9071C23.3375 29.6422 22.7535 30.2262 22.0184 30.5307C21.2833 30.8352 20.4574 30.8352 19.7223 30.5307L17.1484 29.4646C16.4133 29.1608 15.5876 29.1614 14.853 29.4663L12.2772 30.5317C11.5425 30.8355 10.7173 30.8352 9.98284 30.531C9.24835 30.2267 8.66466 29.6434 8.35997 28.9091L7.29273 26.3326C6.98881 25.5975 6.40543 25.0133 5.67087 24.7083L3.09509 23.6413C2.36033 23.337 1.77648 22.7533 1.47188 22.0187C1.16729 21.284 1.16688 20.4585 1.47073 19.7235L2.53689 17.1496C2.84062 16.4145 2.84 15.5888 2.53517 14.8542L1.47054 12.2766C1.3196 11.9125 1.24188 11.5222 1.24181 11.1281C1.24175 10.734 1.31935 10.3437 1.47017 9.97956C1.621 9.61544 1.8421 9.2846 2.12083 9.00595C2.39957 8.72731 2.73047 8.50632 3.09465 8.35561L5.66858 7.28945C6.40297 6.98579 6.98687 6.40316 7.29212 5.66944L8.35904 3.09366C8.66352 2.35857 9.24754 1.77455 9.98263 1.47007C10.7177 1.16559 11.5436 1.16559 12.2787 1.47007L14.8527 2.53623C15.5878 2.83996 16.4134 2.83934 17.148 2.5345L19.7249 1.47172C20.4599 1.16741 21.2856 1.16748 22.0206 1.4719C22.7555 1.77632 23.3395 2.36017 23.644 3.09507L24.7112 5.67161L24.7109 5.66715Z\"\r\n fill=\"#0086C9\"\r\n />\r\n <path d=\"M10 18.1818C10 18.1818 11.2857 18.1818 13 22C13 22 17.7647 12 22 10\" stroke=\"white\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_0_21453\">\r\n <rect width=\"32\" height=\"32\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n )}\r\n {this.statusIcon === 'company' && (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" class={`company ${this.size}`}>\r\n <path\r\n d=\"M18.8322 3.70039C16.9123 2.11995 14.5039 1.25399 12.0172 1.25001C10.6041 1.24776 9.20439 1.52413 7.89818 2.06333C6.59198 2.60252 5.4049 3.39397 4.40485 4.39237C2.64504 6.1493 1.54876 8.462 1.30275 10.9365C1.05674 13.411 1.67622 15.8943 3.05566 17.9633C4.43511 20.0323 6.48919 21.5591 8.86802 22.2836C11.2469 23.0081 13.8033 22.8855 16.1019 21.9367C18.4004 20.9878 20.299 19.2715 21.474 17.0799C22.6491 14.8884 23.0281 12.3572 22.5464 9.91759C22.0647 7.47798 20.7521 5.28082 18.8322 3.70039Z\"\r\n fill=\"#FF0033\"\r\n stroke=\"white\"\r\n stroke-width=\"1.5\"\r\n />\r\n <path\r\n fill-rule=\"evenodd\"\r\n clip-rule=\"evenodd\"\r\n d=\"M12.8942 13.7488V11.865L15.2835 11.8807C15.5231 11.8822 15.7598 11.9336 15.9785 12.0314C16.1973 12.1293 16.3933 12.2715 16.5541 12.449C16.715 12.6266 16.8373 12.8357 16.9131 13.063C16.989 13.2903 17.0168 13.5308 16.9948 13.7694C16.9948 16.4275 12.901 16.9969 12.8973 13.7488M12.8973 8.75316C17.3054 6.44066 17.6942 11.5213 15.0323 11.2788H12.886L12.8973 8.75316ZM16.7385 11.5113C19.8985 10.3013 17.2573 5.5894 12.0854 8.5044C11.5544 8.07132 10.9218 7.78073 10.2473 7.66004C8.96979 7.40066 7.25604 7.62628 6.29479 8.52378L6.75917 8.97941C7.2569 8.55053 7.86627 8.27194 8.51626 8.17611C9.16625 8.08028 9.83009 8.17117 10.4304 8.43816C10.6321 8.53335 10.8098 8.67262 10.9505 8.8457C11.0911 9.01879 11.191 9.22127 11.2429 9.43817L11.266 13.7669C11.0785 16.7738 7.20354 16.5413 7.20354 13.7669V11.8682H10.2492V11.295H5.59729V13.1644C5.60917 16.7175 9.93104 17.315 12.0717 15.5863C12.9471 16.2353 14.0184 16.5649 15.1073 16.52C18.9442 16.4938 19.7323 12.3563 16.7273 11.5144L16.7385 11.5113Z\"\r\n fill=\"white\"\r\n />\r\n </svg>\r\n )}\r\n </div>,\r\n ];\r\n }\r\n}","@import './../../global/global.css';\r\n\r\n:host{\r\n display: flex;\r\n align-items: center;\r\n width: fit-content;\r\n}\r\n\r\n.container {\r\n display: inline-flex;\r\n justify-content: center;\r\n align-items: center;\r\n gap: var(--spacing-1);\r\n flex-shrink: 0;\r\n border-radius: var(--rounded-xs);\r\n border: 1px solid var(--color-boarder-subtle, #CDD5DF);\r\n background: var(--color-background-card, #FFFFFF); \r\n}\r\n\r\n.content {\r\n display: flex;\r\n padding: var(--spacing-none);\r\n text-align: center;\r\n align-items: center;\r\n border-radius: var(--rounded-none);\r\n color: var(--color-text, #4B5565);\r\n font-family: var(--Font-Family-Body, Sora);\r\n font-style: normal;\r\n font-weight: var(--Font-Weight-Medium, 500);\r\n letter-spacing: var(--Font-Letter-spacing-T-sm, 0rem);\r\n}\r\n\r\n.icon {\r\n border: none;\r\n}\r\n\r\n.container.sm {\r\n height: var(--spacing-6);\r\n padding: var(--spacing-none) var(--spacing-1) var(--spacing-none) var(--spacing-2);\r\n}\r\n\r\n.container.md {\r\n height: 1.75rem;\r\n padding: var(--spacing-none) var(--spacing-1) var(--spacing-none) var(--spacing-2);\r\n}\r\n\r\n.container.lg {\r\n height: var(--spacing-7);\r\n padding: var(--spacing-none) var(--spacing-1) var(--spacing-none) var(--spacing-2);\r\n}\r\n\r\n.content.sm {\r\n gap: var(--spacing-1);\r\n font-size: var(--Font-Size-T-xs, 0.75rem);\r\n line-height: var(--Font-Line-height-T-xs, 1.125rem);\r\n}\r\n\r\n.content.md {\r\n gap: 0.3125rem;\r\n font-size: var(--Font-Size-T-sm, 0.875rem); \r\n line-height: var(--Font-Line-height-T-sm, 1.25rem); \r\n}\r\n\r\n.content.lg {\r\n gap: 0.375rem;\r\n font-size: var(--Font-Size-T-sm, 0.875rem);\r\n line-height: var(--Font-Line-height-T-sm, 1.25rem); /* 142.857% */\r\n}\r\n\r\n.label{\r\n display: flex;\r\n align-items: center;\r\n}","import { Component, Method, Prop, getAssetPath, h, Fragment, Event, EventEmitter, Element } from '@stencil/core';\r\nimport { GeneralSizes } from '../../models/reusableModels';\r\n\r\n@Component({\r\n tag: 'gb-tag',\r\n styleUrl: 'gb-tag.css',\r\n shadow: true,\r\n})\r\nexport class GbTag {\r\n @Prop() size: GeneralSizes;\r\n @Prop() icon?: 'country' | 'avatar' | 'dot' | 'false';\r\n @Prop() action: 'X_close' | 'text_only' | 'count';\r\n @Prop() flagSwap: string;\r\n @Prop() checkbox?: boolean;\r\n @Event() checkboxClicked: EventEmitter<void>;\r\n @Element() el: HTMLElement;\r\n\r\n @Method()\r\n async onTagClose() {\r\n // console.log('close tag clicked');\r\n }\r\n\r\n async onCheckboxClicked() {\r\n // this.checkboxClicked.emit()\r\n }\r\n\r\n componentDidLoad() {\r\n const labelSlot = this.el.querySelector('p');\r\n\r\n if(labelSlot) {\r\n if(this.size === 'sm') {\r\n labelSlot.classList.add('text-xs-medium');\r\n } else if(this.size === 'md') {\r\n labelSlot.classList.add('text-sm-medium');\r\n } else if(this.size === 'lg') {\r\n labelSlot.classList.add('text-sm-medium');\r\n }\r\n }\r\n }\r\n\r\n render() {\r\n const flagSwap = getAssetPath(`${this.flagSwap}`);\r\n\r\n return (\r\n <div class={`container ${this.size}`}>\r\n <div class={`content ${this.size}`}>\r\n {this.checkbox && <gb-tag-checkbox size={this.size}></gb-tag-checkbox>}\r\n {this.icon === 'false' && <></>}\r\n {this.icon === 'country' && (\r\n <div class=\"icon left-icon\">\r\n <img src={flagSwap} alt=\"Country Icon\" />\r\n </div>\r\n )}\r\n {this.icon === 'avatar' && (\r\n <gb-avatar class=\"avatar-icon\" size=\"xxs\" status-icon=\"false\" text={true} color=\"gray\">\r\n <slot name=\"initials\" slot=\"initials\"></slot>\r\n </gb-avatar>\r\n )}\r\n {this.icon === 'dot' && (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\">\r\n <circle cx=\"4\" cy=\"4\" r=\"3\" fill=\"#17B26A\" />\r\n </svg>\r\n )}\r\n <div class=\"label\">\r\n <slot></slot>\r\n </div>\r\n {this.action === 'count' && (\r\n <gb-tag-count size={this.size}>\r\n <slot slot=\"count\" name=\"count\"></slot>\r\n </gb-tag-count>\r\n )}\r\n </div>\r\n {this.action === 'X_close' && <gb-tag-close size={this.size} onClick={() => this.onTagClose()}></gb-tag-close>}\r\n </div>\r\n );\r\n }\r\n}","@import './../../global/global.css';\r\n\r\n.checkbox-container {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n position: relative;\r\n cursor: pointer;\r\n}\r\n\r\ninput[type=\"checkbox\"] {\r\n opacity: 0;\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n cursor: pointer;\r\n}\r\n\r\n.custom-checkbox {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n border-radius: var(--rounded-xs);\r\n border: 1px solid var(--color-border-input, #CDD5DF);\r\n background: transparent;\r\n transition: background 0.2s, border 0.2s;\r\n margin-top: 10px;\r\n}\r\n\r\n.sm {\r\n width: 14px;\r\n height: 14px;\r\n}\r\n\r\n.md {\r\n width: var(--spacing-4);\r\n height: var(--spacing-4);\r\n flex-shrink: 0;\r\n}\r\n\r\n.lg {\r\n width: 18px;\r\n height: 18px;\r\n}\r\n\r\ninput[type=\"checkbox\"]:checked + .custom-checkbox {\r\n background: var(--color-background-selected, #075DB2);\r\n border: 1px solid var(--color-border-selected, #075DB2);\r\n}\r\n\r\ninput[type=\"checkbox\"]:checked + .custom-checkbox .checkmark {\r\n display: block;\r\n}\r\n\r\n.checkmark {\r\n display: none;\r\n width: var(--spacing-3);\r\n height: var(--spacing-3);\r\n}\r\n\r\n.checkbox-container:hover .custom-checkbox {\r\n border: 1px solid var(--color-border-selected, #075DB2);\r\n}\r\n\r\n.checkbox-container.disabled .custom-checkbox {\r\n background: var(--color-background-disabled, #F6F8FA);\r\n border: 1px solid var(--color-border-disabled, #E3E8EF);\r\n}\r\n\r\n.checkbox-container.disabled .checkmark {\r\n fill: var(--color-icon-disabled, #CDD5DF);\r\n}\r\n\r\n","import { Component, Prop, h} from \"@stencil/core\";\r\nimport { GeneralSizes } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n tag: 'gb-tag-checkbox',\r\n styleUrl: 'gb-tag-checkbox.css',\r\n shadow: true\r\n})\r\n\r\nexport class GbTagCheckbox {\r\n @Prop() checked: boolean = false;\r\n @Prop() size: GeneralSizes = 'md';\r\n @Prop() disabled: boolean = false;\r\n \r\n render() {\r\n return (\r\n <label class={`checkbox-container ${this.size} ${this.disabled ? 'disabled' : ''}`}>\r\n <input \r\n type=\"checkbox\" \r\n checked={this.checked} \r\n disabled={this.disabled} \r\n />\r\n <span class={`custom-checkbox ${this.size}`}>\r\n <svg class=\"checkmark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M2.5 7.25C2.5 7.25 3.25 7.25 4.25 9C4.25 9 7.02941 4.41667 9.5 3.5\" stroke=\"white\" stroke-width=\"1.71429\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </span>\r\n </label>\r\n );\r\n }\r\n}\r\n","@import './../../global/global.css';\r\n\r\ndiv {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: var(--spacing-none);\r\n border-radius: 3px;\r\n cursor: pointer;\r\n}\r\n\r\ndiv:hover {\r\n background: var(--color-background-gray-subtlest, #F6F8FA);\r\n}\r\n\r\ndiv:hover svg path {\r\n stroke: var(--color-icon-bold, #202939);\r\n}\r\n\r\ndiv.sm,\r\ndiv.md {\r\n padding: var(--spacing-half);\r\n}\r\n\r\ndiv.lg {\r\n padding: 3px;\r\n}\r\n\r\ndiv.sm svg{\r\n width: 10px;\r\n height: 10px;\r\n}\r\n\r\ndiv.md svg{\r\n width: var(--spacing-3);\r\n height: var(--spacing-3);\r\n}\r\n\r\ndiv.lg svg{\r\n width: 14px;\r\n height: 14px;\r\n}","import {Component, Prop, h} from '@stencil/core'\r\nimport { GeneralSizes } from '../../models/reusableModels';\r\n\r\n@Component({\r\n tag: 'gb-tag-close',\r\n styleUrl: 'gb-tag-close.css',\r\n shadow: true\r\n})\r\n\r\nexport class GbTagClose{\r\n @Prop() size: GeneralSizes;\r\n\r\n render() {\r\n return (\r\n <div class={this.size}>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M7.91683 2.08328L2.0835 7.91662M2.0835 2.08328L7.91683 7.91662\" stroke=\"#4B5565\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </div>\r\n )\r\n }\r\n}","@import './../../global/global.css';\r\n\r\ndiv {\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n gap: var(--spacing-none);\r\n flex-shrink: 0;\r\n border-radius: 3px;\r\n background-color: var(--color-background-gray-subtler, #EEF2F6);\r\n} \r\n\r\ndiv.sm {\r\n width: 16px;\r\n height: 16px;\r\n padding: var(--spacing-none) var(--spacing-1);\r\n}\r\n\r\n.sm p{\r\n width: 8px;\r\n height: 16px; \r\n font-size: var(--Font-Size-T-xs, 0.75rem);\r\n line-height: var(--Font-Line-height-T-xs, 1.125rem);\r\n}\r\n\r\ndiv.md {\r\n width: 1.125rem;\r\n height: 1.125rem;\r\n padding: var(--spacing-none) 5px;\r\n}\r\n\r\n.md p{\r\n width: 0.5625rem;\r\n height: 1.125rem;\r\n font-size: var(--Font-Size-T-xs, 0.75rem);\r\n line-height: var(--Font-Line-height-T-xs, 1.125rem); \r\n}\r\n\r\ndiv.lg {\r\n width: 1.25rem;\r\n height: 1.25rem;\r\n}\r\n\r\n.lg p{\r\n font-size: var(--Font-Size-T-sm, 0.875rem);\r\n line-height: var(--Font-Line-height-T-sm, 1.25rem);\r\n}\r\n\r\np{\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n flex-shrink: 0;\r\n color: var(--color-text, #4B5565);\r\n text-align: center;\r\n font-family: var(--Font-Family-Body, Sora);\r\n font-style: normal;\r\n font-weight: var(--Font-Weight-Medium, 500);\r\n letter-spacing: var(--Font-Letter-spacing-T-sm, 0px);\r\n}\r\n\r\n\r\n","import {Component, Prop, h} from '@stencil/core';\r\nimport { GeneralSizes } from '../../models/reusableModels';\r\n\r\n@Component({\r\n tag: 'gb-tag-count',\r\n styleUrl: 'gb-tag-count.css',\r\n shadow: true\r\n})\r\n\r\nexport class GbTagCount{\r\n @Prop() size: GeneralSizes;\r\n\r\n render() {\r\n return (\r\n <div class={this.size}>\r\n <slot name=\"count\"></slot>\r\n </div>\r\n )\r\n }\r\n}","@import './../../global/global.css';\r\n\r\n:host{\r\n display: block;\r\n}\r\n\r\n.tooltip_container {\r\n position: relative;\r\n}\r\n \r\n.tooltip {\r\n position: absolute;\r\n background-color: var(--color-surface-bold, #FCFCFC);\r\n border: 0.5px solid var(--color-border-subtler, #E3E8EF);\r\n border-radius: var(--rounded-sm);\r\n box-shadow: var(--shadow-sm);\r\n padding: var(--spacing-3);\r\n z-index: 100;\r\n}\r\n\r\n.tooltip_content{\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--spacing-3);\r\n \r\n}\r\n \r\n.arrow {\r\n width: 0;\r\n height: 0;\r\n border-style: solid;\r\n position: absolute;\r\n}\r\n\r\n.arrow::before {\r\n content: '';\r\n position: absolute;\r\n width: 0;\r\n height: 0;\r\n border-style: solid;\r\n}\r\n \r\n.arrow.bottom_center {\r\n top: 100%;\r\n left: 50%;\r\n border-width: 7.5px 7.5px 0 7.5px;\r\n border-color: var(--color-border-subtler, #E3E8EF) transparent transparent transparent;\r\n transform: translateX(-50%);\r\n}\r\n\r\n.arrow.bottom_center::before {\r\n left: -0.39rem;\r\n bottom: 0.1rem;\r\n border-width: 0 9.6px 9.6px 9.6px;\r\n transform: translateY(-50%) rotate(135deg);\r\n border-color: transparent var(--color-surface-bold, #FCFCFC) transparent transparent;\r\n}\r\n \r\n.arrow.left {\r\n top: 50%;\r\n right: 100%;\r\n border-width: 6px 0 6px 6px;\r\n border-color: transparent transparent transparent var(--color-border-subtler, #E3E8EF);\r\n transform: translateY(-50%) rotate(180deg);\r\n}\r\n\r\n.arrow.left::before {\r\n left: -8px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n border-width: 7.5px 0 7.5px 7.5px;\r\n border-color: transparent transparent transparent var(--color-surface-bold, #FCFCFC);\r\n}\r\n\r\n.arrow.bottom_left {\r\n top: 100%;\r\n left: 20%;\r\n border-width: 7.5px 7.5px 0 7.5px;\r\n border-color: var(--color-border-subtler, #E3E8EF) transparent transparent transparent;\r\n transform: translateX(-50%);\r\n}\r\n\r\n.arrow.bottom_left::before {\r\n left: -0.39rem;\r\n bottom: 0.1rem;\r\n border-width: 0 9.6px 9.6px 9.6px;\r\n transform: translateY(-50%) rotate(135deg);\r\n border-color: transparent var(--color-surface-bold, #FCFCFC) transparent transparent;\r\n}\r\n \r\n.arrow.right {\r\n top: 50%;\r\n left: 100%;\r\n border-width: 7px 7px 7px 0;\r\n border-color: transparent var(--color-border-subtler, #E3E8EF) transparent transparent;\r\n transform: translateY(-50%) rotate(-180deg);\r\n}\r\n\r\n.arrow.right::before {\r\n left: 0.5px;\r\n top: 50%;\r\n border-width: 6.5px 6.5px 6.5px 0;\r\n transform: translateY(-50%) rotate(0deg);\r\n border-color: transparent var(--color-surface-bold, #FCFCFC) transparent transparent;\r\n}\r\n\r\n.arrow.bottom_right {\r\n top: 100%;\r\n right: 5%;\r\n border-width: 7.5px 7.5px 0 7.5px;\r\n border-color: var(--color-border-subtler, #E3E8EF) transparent transparent transparent;\r\n transform: translateX(-50%);\r\n}\r\n\r\n.arrow.bottom_right::before {\r\n left: -0.39rem;\r\n bottom: 0.1rem;\r\n border-width: 0 9.6px 9.6px 9.6px;\r\n transform: translateY(-50%) rotate(135deg);\r\n border-color: transparent var(--color-surface-bold, #FCFCFC) transparent transparent;\r\n}\r\n \r\n.arrow.top_center {\r\n bottom: 100%;\r\n right: 45%;\r\n border-width: 0 7.5px 7.5px 7.5px;\r\n border-color: transparent transparent var(--color-border-subtler, #E3E8EF) transparent;\r\n}\r\n\r\n.arrow.top_center::before {\r\n left: -12.8px;\r\n bottom: -20.25px;\r\n border-width: 0 9.5px 9.5px 9.5px;\r\n transform: translateY(-50%) rotate(-45deg);\r\n border-color: transparent var(--color-surface-bold, #FCFCFC) transparent transparent;\r\n}\r\n\r\n::slotted([slot=\"label\"]){\r\n color: var(--color-text, #4B5565);\r\n}\r\n\r\n::slotted([slot=\"label\"].nowrap){\r\n white-space: nowrap;\r\n}\r\n\r\n::slotted([slot=\"label\"].wrap_label){\r\n white-space: wrap;\r\n max-width: 10rem;\r\n}\r\n\r\n::slotted([slot=\"supporting_text\"]){\r\n white-space: wrap;\r\n color: var(--color-text-subtle, #697586);\r\n margin-top: 5rem;\r\n min-width: fit-content;\r\n max-width: 18.5rem;\r\n}","import { Component, Element, Prop, h } from '@stencil/core';\r\nimport { ArrowPositions } from '../../models/reusableModels';\r\n\r\n@Component({\r\n tag: 'gb-tooltip',\r\n styleUrl: 'gb-tooltip.css',\r\n shadow: true,\r\n})\r\nexport class GbTooltip {\r\n @Prop() showArrow: boolean = false;\r\n @Prop() arrow: ArrowPositions = 'bottom_center';\r\n @Prop() showSupportingText: boolean = false;\r\n @Prop() noWrap: boolean = true;\r\n @Element() el: HTMLElement;\r\n\r\n componentDidLoad() {\r\n const mainTextSlot = this.el.querySelector('[slot=\"label\"]');\r\n const supportingTextSlot = this.el.querySelector('[slot=\"supporting_text\"]');\r\n\r\n if (mainTextSlot) {\r\n mainTextSlot.classList.add('text-xs-semi-bold');\r\n }\r\n\r\n if (mainTextSlot && this.noWrap) {\r\n mainTextSlot.classList.add('nowrap');\r\n }\r\n\r\n if (mainTextSlot && !this.showSupportingText && !this.noWrap) {\r\n mainTextSlot.classList.add('wrap_label');\r\n }\r\n\r\n if (supportingTextSlot) {\r\n supportingTextSlot.classList.add('text-xs-regular');\r\n }\r\n }\r\n\r\n getArrowClass() {\r\n return this.showArrow ? `arrow ${this.arrow}` : '';\r\n }\r\n\r\n render() {\r\n return (\r\n <div class=\"tooltip_container\">\r\n <div class=\"tooltip\">\r\n {this.showArrow && <div class={this.getArrowClass()}></div>}\r\n <div class=\"tooltip_content\">\r\n <slot name=\"label\" />\r\n {this.showSupportingText && <slot name=\"supporting_text\" />}\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"],"mappings":"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","ignoreList":[]}