npm - globuswebcomponents - Versions diffs - 1.0.7 → 1.0.9 - Mend

globuswebcomponents 1.0.7 → 1.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (376) hide show

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

@@ -1 +0,0 @@

- {"version":3,"names":["gbAvatarCss","GbAvatarStyle0","GbAvatar","this","colorClasses","OnlineIndicatorStates","Online","BorderWeights","Light","getInitialsSize","size","setWeight","showBorder","Regular","VeryLight","applyColorToInitials","color","getRandomColorClass","randomIndex","Math","floor","random","length","componentDidLoad","slottedInitials","el","querySelector","classList","add","assignedColorClass","componentWillLoad","toLowerCase","render","classes","h","key","class","weight","text","name","placeholder","icon","xmlns","width","height","viewBox","fill","d","statusIcon","state","gbAvatarContrastInnerBorderCss","GbAvatarContrastInnerBorderStyle0","GbAvatarContrastInnerBorder","Heavy","gbBadgeCss","GbBadgeStyle0","GbBadges","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","closeButton","gbBadgeCloseCss","GbBadgeCloseStyle0","BadgeClose","gbBtnCss","GbBtnStyle0","GbButton","iconLeading","loadIcon","iconTrailing","buttonSlot","getButtonTextClasses","iconName","iconPath","svg","leadingIconSvg","trailingIconSvg","getButtonClasses","button","hierarchy","destructive","disabled","default","only","renderLeadingIcon","renderTrailingIcon","gbButtonCss","GbButtonStyle0","oneicon","gbCheckboxCss","GbCheckboxStyle0","GbCheckbox","getMainTextClass","getSupportingTextClass","mainTextSlot","supportingTextSlot","supportingText","checked","indeterminate","gbCheckboxBaseCss","GbCheckboxBaseStyle0","GbCheckboxBase","renderSVG","renderCheckbox","renderCircle","renderRadio","StateEnum","Default","Disabled","x","y","rx","toggleCheckboxState","checkboxClicked","emit","toggleCheckCircleState","toggleRadioButtonState","onClick","gbCollapseButtonCss","GbCollapseButtonStyle0","GbCollapseButton","toggleIcon","action","isHovered","collapseSidebar","isCollapsed","expandSidebar","bind","onMouseOver","onMouseOut","arrow","gbComplexPrimarySideBarItemCss","GbComplexPrimarySideBarItemStyle0","GbComplexPrimarySideBarItem","redBarSrc","whiteBarSrc","redCompactBarSrc","whiteCompactBarSrc","Fragment","itemStyle","category","label","onMouseEnter","showTooltip","onMouseLeave","gbComplexSecondarySideBarItemCss","GbComplexSecondarySideBarItemStyle0","GbComplexSecondarySideBarItem","gbHelpTooltipCss","GbHelpTooltipStyle0","GbHelpTooltip","showHelpTooltip","showSupportingText","gbInputDropdownCss","GbInputDropdownStyle0","GbInputDropdown","username","selected","searchItems","event","searchItem","detail","searchResults","items","filter","item","includes","toString","disconnectedCallback","document","removeEventListener","handleClickOutside","dropdownOpen","contains","target","toggleDropdown","stopPropagation","isItemSelected","isObject","value","selectedItems","some","i","getAvatarSize","sortDropdownItems","menuItems","sort","a","b","handleItemSelect","selectMultipleItems","singleItemSelect","selectedItem","log","dropdownItemSelected","isSelected","unselectedItems","handleTagRemove","componentWillRender","leadingIcon","objectValues","val","primitiveValues","addEventListener","emptyStateBackground","illustration","showLabel","style","charAt","toUpperCase","slice","e","map","split","part","showLeadingIcon","index","join","_a","showHelpIcon","menuPosition","ref","dropdownRef","showSearchInput","inputValue","labelText","idOfInput","onInputValueChanged","showHintText","hintText","gbInputDropdownMenuItemCss","GbInputDropdownMenuItemStyle0","GbInputDropdownMenuItem","nameSlot","initialsSlot","handleClick","dropdownItemClicked","checkbox","role","gbInputFieldCss","GbInputFieldStyle0","GbInputField","minWidth","copyToClipboard","inputRef","select","execCommand","navigator","clipboard","writeText","objectName","objectValue","handleTagInput","inputValueChanged","trim","showDropdown","showSpinner","setTimeout","results","updateInputWidth","selectDropdownItem","updateStyles","resultsDisplayElement","resultsWidth","offsetWidth","inputWidth","inputElement","paddingLeft","paddingTop","exportSelectedStaff","handleInput","showCloseButton","clearInput","togglePasswordVisibility","isPasswordVisible","optionsChanged","newOptions","option","isTagItemSelected","options","iconSwap","textSlot","hiddenSpan","input","shadowRoot","calculatedWidth","max","handleWrapperClick","focus","onInput","showValidation","showCountryIcon","inputGroupElement","readOnly","isReadOnly","onBlur","show","errorText","gbPasswordButtonCss","GbPasswordButtonStyle0","GbPasswordButton","gbSidebarCss","GbSidebarStyle0","GbSidebar","Recruitment","Staff","collapseSideBar","sidebarState","expandSideBar","sideBarItemClicked","activeIndex","simpleSidebarItemClicked","handlePrimaryClick","activePrimaryItem","activeSecondaryItem","complexSidebarData","handleSecondaryClick","applicationName","iconInstance","textClass","patternSrc","logoSrc","blueLogoSrc","whiteLogoSrc","firstItemIcon","firstItemLabel","secondItemIcon","secondItemLabel","thirdItemLabel","thirdItemIcon","fourthItemLabel","fourthItemIcon","fifthItemLabel","fifthItemIcon","showSecondCategory","sixthItemLabel","sixthItemIcon","seventhItemLabel","seventhItemIcon","eighthItemLabel","eighthItemIcon","ninthItemLabel","ninthItemIcon","tenthItemLabel","tenthItemIcon","navItemStyle","Object","keys","primaryItem","secondaryItem","gbSimpleSideBarItemCss","GbSimpleSideBarItemStyle0","GbSimpleSideBarItem","onSideBarItemClicked","showBadge","showArrow","gbStatusIndicatorCss","GbStatusIndicatorStyle0","GbStatusIndicator","Offline","indicatorStateClass","gbTagCss","GbTagStyle0","GbTag","onTagClose","onCheckboxClicked","labelSlot","gbTagCheckboxCss","GbTagCheckboxStyle0","GbTagCheckbox","gbTagCloseCss","GbTagCloseStyle0","GbTagClose","gbTagCountCss","GbTagCountStyle0","GbTagCount","gbTextareaInputFieldCss","GbTextareaInputFieldStyle0","GbTextareaInputField","textarea","scrollHeight","textareaValueChanged","emitInputValue","mockStaffSearch","query","mockData","staff","selectStaff","selectedStaff","staffInfo","placeholderText","gbTooltipCss","GbTooltipStyle0","GbTooltip","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/gb-input-dropdown.css?tag=gb-input-dropdown&encapsulation=shadow","src/components/gb-input-dropdown/gb-input-dropdown.tsx","src/components/gb-input-dropdown-menu-item/gb-input-dropdown-menu-item.css?tag=gb-input-dropdown-menu-item&encapsulation=shadow","src/components/gb-input-dropdown-menu-item/gb-input-dropdown-menu-item.tsx","src/components/gb-input-field/gb-input-field.css?tag=gb-input-field&encapsulation=shadow","src/components/gb-input-field/gb-input-field.tsx","src/components/gb-password-button/gb-password-button.css?tag=gb-password-button&encapsulation=shadow","src/components/gb-password-button/gb-password-button.tsx","src/components/gb-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-textarea-input-field/gb-textarea-input-field.css?tag=gb-textarea-input-field&encapsulation=shadow","src/components/gb-textarea-input-field/gb-textarea-input-field.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 { AvatarColorTypes, 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: AvatarColorTypes;\r\n @Prop() showBorder: boolean = false;\r\n @Element() el: HTMLElement;\r\n @Prop() weight: BorderWeights = BorderWeights.Light;\r\n @State() assignedColorClass: string;\r\n\r\n private colorClasses = [\r\n 'gray', // Red\r\n 'blue', // Green\r\n 'cyan', // Blue\r\n 'green', // Pink\r\n 'purple', // Yellow\r\n 'pink', // Purple\r\n 'yellow', // Teal\r\n ];\r\n\r\n getInitialsSize() {\r\n switch (this.size) {\r\n case 'xl2':\r\n return 'display-xs-semi-bold';\r\n case 'xl':\r\n return 'text-xl-semi-bold';\r\n case 'lg':\r\n return 'text-lg-semi-bold';\r\n case 'md':\r\n return 'text-md-semi-bold';\r\n case 'sm':\r\n return 'text-sm-semi-bold';\r\n case 'xs':\r\n return 'text-xs-semi-bold';\r\n case 'xxs':\r\n return 'text-xxs-semi-bold';\r\n }\r\n }\r\n\r\n setWeight() {\r\n if (this.showBorder) {\r\n switch (this.size) {\r\n case 'xl2':\r\n return BorderWeights.Regular;\r\n case 'xl':\r\n return BorderWeights.Regular;\r\n case 'lg':\r\n return BorderWeights.Regular;\r\n case 'md':\r\n return BorderWeights.Regular;\r\n case 'sm':\r\n return BorderWeights.Light;\r\n case 'xs':\r\n return BorderWeights.Light;\r\n case 'xxs':\r\n return BorderWeights.VeryLight;\r\n }\r\n }\r\n }\r\n\r\n applyColorToInitials() {\r\n switch (this.color) {\r\n case 'gray':\r\n return 'gray';\r\n case 'blue':\r\n return 'blue';\r\n case 'cyan':\r\n return 'cyan';\r\n case 'pink':\r\n return 'pink';\r\n case 'purple':\r\n return 'purple';\r\n case 'green':\r\n return 'green';\r\n case 'yellow':\r\n return 'yellow';\r\n }\r\n }\r\n\r\n private getRandomColorClass(): string {\r\n const randomIndex = Math.floor(Math.random() * this.colorClasses.length);\r\n return this.colorClasses[randomIndex];\r\n }\r\n\r\n componentDidLoad() {\r\n const slottedInitials = this.el.querySelector('h1');\r\n\r\n if (slottedInitials) {\r\n slottedInitials.classList.add(this.getInitialsSize());\r\n slottedInitials.classList.add(this.assignedColorClass);\r\n }\r\n }\r\n\r\n componentWillLoad() {\r\n if (!this.color) {\r\n this.assignedColorClass = this.getRandomColorClass();\r\n } else {\r\n this.assignedColorClass = this.color.toLowerCase();\r\n }\r\n }\r\n\r\n render() {\r\n const classes = `${this.assignedColorClass}`;\r\n\r\n return [\r\n <div class=\"avatar\">\r\n <gb-avatar-contrast-inner-border show-border={this.showBorder} size={this.size} weight={this.weight}>\r\n <div class={`inner_content ${this.size}`}>\r\n {this.text ? (\r\n // ${!this.color ? 'gray' : this.color}\r\n <div class={`initials ${classes}`}>\r\n <slot name=\"initials\"></slot>\r\n </div>\r\n ) : (\r\n <slot name=\"image\"></slot>\r\n )}\r\n {this.placeholder && (\r\n <div class={`placeholder ${classes}`}>\r\n {this.icon === 'user' && (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" class={`user_avatar ${this.size} ${classes}`}>\r\n <path\r\n d=\"M11.8706 9.89137C11.9482 9.93754 12.044 9.99158 12.1524 10.0528C12.6276 10.3209 13.3459 10.7261 13.8381 11.2078C14.1458 11.5091 14.4383 11.9061 14.4914 12.3924C14.548 12.9097 14.3223 13.395 13.8697 13.8263C13.0887 14.5703 12.1515 15.1666 10.9393 15.1666H5.06045C3.84825 15.1666 2.91106 14.5703 2.13009 13.8263C1.67741 13.395 1.45177 12.9097 1.50831 12.3924C1.56147 11.9061 1.85391 11.5091 2.16169 11.2078C2.6538 10.7261 3.37214 10.3209 3.84735 10.0528C3.95578 9.99158 4.05158 9.93754 4.12912 9.89137C6.49848 8.48055 9.50126 8.48055 11.8706 9.89137Z\"\r\n fill=\"#697586\"\r\n />\r\n <path\r\n d=\"M4.49987 4.33325C4.49987 2.40026 6.06688 0.833252 7.99987 0.833252C9.93287 0.833252 11.4999 2.40026 11.4999 4.33325C11.4999 6.26625 9.93287 7.83325 7.99987 7.83325C6.06688 7.83325 4.49987 6.26625 4.49987 4.33325Z\"\r\n fill=\"#697586\"\r\n />\r\n </svg>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n </gb-avatar-contrast-inner-border>\r\n <gb-status-indicator class={`indicator ${this.size}`} status-icon={this.statusIcon} size={this.size} state={this.state}></gb-status-indicator>\r\n </div>,\r\n ];\r\n }\r\n}","@import './../../global/global.css';\r\n\r\n.inner_border{\r\n border-radius: var(--rounded-full);\r\n width: fit-content;\r\n height: fit-content;\r\n}\r\n\r\n.inner_border.very_light.no_border{\r\n border: 0.3px solid transparent;\r\n}\r\n\r\n.inner_border.light.no_border{\r\n border: 0.5px solid transparent;\r\n}\r\n\r\n.inner_border.regular.no_border{\r\n border: 0.75px solid transparent;\r\n}\r\n\r\n.inner_border.heavy.no_border{\r\n border: 1px solid transparent;\r\n}\r\n\r\n/* Weights */\r\n.inner_border.very_light{\r\n border: 0.3px solid var(--color-blanket-subtler, rgba(33, 44, 101, 0.2));\r\n}\r\n\r\n.inner_border.light{\r\n border: 0.5px solid var(--color-blanket-subtler, rgba(33, 44, 101, 0.2));\r\n}\r\n\r\n.inner_border.regular{\r\n border: 0.75px solid var(--color-blanket-subtler, rgba(33, 44, 101, 0.2));\r\n}\r\n\r\n.inner_border.heavy{\r\n border: 1px solid var(--color-blanket-subtler, rgba(33, 44, 101, 0.2));\r\n}","import { Component, h, Prop } from \"@stencil/core\";\r\nimport { BorderWeights, GeneralSizes } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n tag: 'gb-avatar-contrast-inner-border',\r\n styleUrl: 'gb-avatar-contrast-inner-border.css',\r\n shadow: true\r\n})\r\n\r\nexport class GbAvatarContrastInnerBorder {\r\n @Prop() weight: BorderWeights;\r\n @Prop() size: GeneralSizes;\r\n @Prop() showBorder: boolean = false;\r\n\r\n setWeight() {\r\n if(this.showBorder){\r\n switch (this.size) {\r\n case 'xl2':\r\n return BorderWeights.Regular;\r\n case 'xl':\r\n return BorderWeights.Regular;\r\n case 'lg':\r\n return BorderWeights.Regular;\r\n case 'md':\r\n return BorderWeights.Regular;\r\n case 'sm':\r\n return BorderWeights.Light;\r\n case 'xs':\r\n return BorderWeights.Light;\r\n case 'xxs':\r\n return BorderWeights.VeryLight;\r\n case 'profile_lg':\r\n return BorderWeights.Heavy;\r\n case 'profile_md':\r\n return BorderWeights.Heavy;\r\n case 'profile_sm':\r\n return BorderWeights.Regular;\r\n }\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <div class={`inner_border ${this.size} ${this.weight} ${!this.showBorder ? 'no_border' : ''}`}>\r\n <slot></slot>\r\n </div>\r\n );\r\n }\r\n}","@import './../../global/global.css';\r\n\r\n:host{\r\n display: flex;\r\n align-items: center;\r\n width: fit-content;\r\n}\r\n\r\ndiv{\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 0px;\r\n flex-shrink: 0;\r\n text-align: center;\r\n}\r\n\r\n.label {\r\n padding: 2px;\r\n}\r\n\r\n.icon {\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\ndiv.sm{\r\n height: 22px;\r\n min-height: 22px;\r\n gap: 0.25rem;\r\n padding: var(--spacing-none) var(--spacing-2);\r\n}\r\n\r\ndiv.md {\r\n height: var(--spacing-6);\r\n min-height: var(--spacing-6);\r\n padding: var(--spacing-none) var(--spacing-2);\r\n gap: 0.38rem;\r\n}\r\n\r\ndiv.lg {\r\n height: 28px;\r\n min-height: 28px;\r\n gap: 0.38rem;\r\n padding: var(--spacing-none) var(--spacing-2);\r\n}\r\n\r\ndiv.pill_color {\r\n border-radius: var(--rounded-full);\r\n}\r\n\r\ndiv.pill_color.gray,\r\n.badge_color.gray {\r\n border: 1px solid var(--color-border-subtler, #E3E8EF);\r\n background: var(--color-background-gray-subtler, #EEF2F6);\r\n color: var(--color-text, #4B5565);\r\n}\r\n\r\n.pill_color.primary,\r\n.badge_color.primary {\r\n border: 1px solid #C8E0F9 /*Color/Border/border-information-subtler*/;\r\n background: var(--color-background-information-subtlest, #E4F0FC); \r\n color: var(--color-text-brandDarkBlue, #212C65);\r\n}\r\n\r\n.pill_color.error,\r\n.badge_color.error {\r\n border: 1px solid var(--color-border-danger-subtler, #FDE3E5);\r\n background: var(--color-background-danger-subtlest, #FEF1F2 );\r\n color: var(--color-text-danger, #B51726);\r\n}\r\n\r\n.pill_color.warning,\r\n.badge_color.warning {\r\n border: 1px solid var(--color-border-warning-subtler, #FEF0C7);\r\n background: var(--color-background-warning-subtlest, #FFFAEB);\r\n color: var(--color-text-warning, #DC6803);\r\n}\r\n\r\n.pill_color.success,\r\n.badge_color.success {\r\n border: 1px solid var(--color-border-success-subtler, #DCFAE6);\r\n background: var(--color-background-success-subtlest, #ECFDF3);\r\n color: var(--color-text-success, #079455);\r\n}\r\n\r\n.pill_color.discovery,\r\n.badge_color.discovery {\r\n border: 1px solid var(--color-border-discovery-subtler, #E0F2FE);\r\n background: var(--color-background-discovery-subtlest,#F0F9FF);\r\n color: var(--color-text-discovery, #0086C9);\r\n}\r\n\r\n.pill_color.information,\r\n.badge_color.information {\r\n border: 1px solid var(--color-border-information-subtler, #C8E0F9);\r\n background: var(--color-background-information-subtlest, #E4F0FC);\r\n color: var(--color-text-information, #064E94);\r\n}\r\n\r\n.pill_color.pink,\r\n.badge_color.pink {\r\n border: 1px solid var(--color-border-pink-subtler, #FCE7F6);\r\n background: var(--color-background-pink-subtlest, #FDF2FA);\r\n color: var(--color-text-pink, #DD2590);\r\n}\r\n\r\n.pill_color.purple,\r\n.badge_color.purple {\r\n border: 1px solid var(--color-border-purple-subtler, #EBE9FE);\r\n background: var(--color-background-purple-subtlest, #F4F3FF);\r\n color: var(--color-text-purple, #6938EF);\r\n}\r\n\r\n.pill_color svg,\r\n.badge_color svg,\r\n.pill_outline svg,\r\n.badge_modern svg {\r\n width: var(--spacing-2);\r\n height: var(--spacing-2);\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.gray svg path[stroke] {\r\n stroke: var(--color-icon, #4B5565) /*var(--color-icon)*/;\r\n}\r\n\r\n.gray svg path[fill] {\r\n fill: var(--color-icon, #4B5565);\r\n}\r\n\r\n.primary svg path[stroke] {\r\n stroke: var(--color-icon-brandDarkBlue, #212C65);\r\n}\r\n\r\n.primary svg path[fill] {\r\n fill: var(--color-icon-brandDarkBlue, #212C65);\r\n}\r\n\r\n.error svg path[stroke] {\r\n stroke: var(--color-icon-danger, #B51726);\r\n}\r\n\r\n.error svg path[fill] {\r\n fill: var(--color-icon-danger, #B51726);\r\n}\r\n\r\n.warning svg path[stroke] {\r\n stroke: var(--color-icon-warning, #DC6803);\r\n}\r\n\r\n.warning svg path[fill] {\r\n fill: var(--color-icon-warning, #DC6803);\r\n}\r\n\r\n.icon.success svg path[stroke] {\r\n stroke: var(--color-icon-success, #079455);\r\n}\r\n\r\n.success svg path[fill] {\r\n fill: var(--color-icon-success, #079455);\r\n}\r\n\r\n.discovery svg path[stroke] {\r\n stroke: var(--color-icon-discovery, #0086C9);\r\n}\r\n\r\n.discovery svg path[fill] {\r\n fill: var(--color-icon-discovery, #0086C9);\r\n}\r\n\r\n.information svg path[stroke] {\r\n stroke: var(--color-icon-information, #064E94);\r\n}\r\n\r\n.information svg path[fill] {\r\n fill: var(--color-icon-information, #064E94);\r\n}\r\n\r\n.pink svg path[stroke] {\r\n stroke: var(--color-icon-pink, #DD2590);\r\n}\r\n\r\n.pink svg path[fill] {\r\n fill: var(--color-icon-pink, #DD2590);\r\n}\r\n\r\n.purple svg path[stroke] {\r\n stroke: var(--color-icon-purple, #6938EF);\r\n}\r\n\r\n.purple svg path[fill] {\r\n fill: var(--color-icon-purple, #6938EF);\r\n}\r\n\r\n.pill_outline {\r\n border-radius: var(--rounded-full);\r\n}\r\n\r\n.pill_outline.gray {\r\n border: 1.5px solid var(--color-text, #4B5565);\r\n color: var(--color-text, #4B5565);\r\n}\r\n\r\n.pill_outline.primary {\r\n border: 1.5px solid var(--color-text-brandDarkBlue, #212C65);\r\n color:var(--color-text-brandDarkBlue, #212C65);\r\n}\r\n\r\n.pill_outline.error {\r\n border: 1.5px solid var(--color-text-danger, #B51726);\r\n color:var(--color-text-danger, #B51726);\r\n}\r\n\r\n.pill_outline.warning {\r\n border: 1.5px solid var(--color-text-warning, #DC6803);\r\n color:var(--color-text-warning, #DC6803);\r\n}\r\n\r\n.pill_outline.success {\r\n border: 1.5px solid var(--color-text-success, #079455);\r\n color:var(--color-text-success, #079455);\r\n}\r\n\r\n.pill_outline.discovery {\r\n border: 1.5px solid var(--color-text-discovery, #0086C9);\r\n color: var(--color-text-discovery, #0086C9);\r\n}\r\n\r\n.pill_outline.information {\r\n border: 1.5px solid var(--color-text-information, #064E94);\r\n color: var(--color-text-information, #064E94);\r\n}\r\n\r\n.pill_outline.pink {\r\n border: 1.5px solid var(--color-text-pink, #DD2590);\r\n color: var(--color-text-pink, #DD2590);\r\n}\r\n\r\n.pill_outline.purple {\r\n border: 1.5px solid var(--color-text-purple, #6938EF);\r\n color: var(--color-text-purple, #6938EF);\r\n}\r\n\r\n.badge_color {\r\n border-radius: var(--rounded-xs);\r\n}\r\n\r\n.badge_modern {\r\n border-radius: var(--rounded-xs);\r\n border: 1px solid var(--color-boarder-subtler, #E3E8EF);\r\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\r\n color: var(--color-text, #4B5565);\r\n}\r\n\r\n.badge_modern svg path {\r\n stroke: inherit; /* Inherit color from the parent, but set in the component */\r\n fill: inherit;\r\n}\r\n\r\n.icon svg {\r\n width: var(--spacing-4);\r\n height: var(--spacing-4);\r\n margin-top: -2px;\r\n}\r\n\r\n.icon svg path[stroke] {\r\n stroke: currentColor;\r\n}\r\n\r\n.icon svg path[fill] {\r\n fill: currentColor;\r\n}\r\n\r\n#icon-only svg {\r\n width: var(--spacing-3);\r\n height: var(--spacing-3);\r\n}\r\n\r\ndiv.md #icon-only svg {\r\n padding: 2px;\r\n}\r\n\r\n#icon-only {\r\n display: flex;\r\n padding: var(--spacing-none);\r\n justify-content: center;\r\n align-items: center;\r\n gap: var(--spacing-1);\r\n flex-shrink: 0;\r\n border-radius: var(--rounded-full);\r\n}","import { Component, Prop, getAssetPath, h, State, Element } from '@stencil/core';\r\nimport { 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: 'dot' | 'avatar' | 'icon_leading' | 'icon_trailing' | 'country' | 'only';\r\n @Prop() iconLeadingSwap?: string; \r\n @Prop() iconTrailingSwap?: string;\r\n @Prop() flagSwap: string;\r\n @Prop() color: GeneralColors;\r\n @Prop() type: 'pill_color' | 'pill_outline' | 'badge_color' | 'badge_modern';\r\n @Prop() closeButton?: boolean = false;\r\n\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\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' : return 'text-xs-medium';\r\n case 'md' : return 'text-sm-medium';\r\n case 'lg' : 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 && (\r\n <div class={`icon left-icon`} innerHTML={this.leadingIconContent}></div>\r\n )}\r\n {this.icon === 'country' && (\r\n <img src={flagSwap} alt=\"Country Icon\" />\r\n )}\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' && (\r\n <slot></slot>\r\n )}\r\n {this.icon === 'icon_trailing' && this.iconTrailingSwap && (\r\n <div class={`icon right-icon`} innerHTML={this.trailingIconContent}></div>\r\n )}\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_gray:active{\r\n text-decoration: none;\r\n color: var(--color-link-pressed, #064E94);\r\n}\r\n\r\nbutton.primary.destructive:hover{\r\n background-color: var(--color-background-danger-bold, #8C121D);\r\n}\r\n\r\nbutton.primary.destructive:active{\r\n background-color: var(--color-background-brandRed-hover, #CC1A2A); /* ask Mr Gideon about this */\r\n}\r\n\r\nbutton.secondary_gray.destructive:hover, \r\nbutton.secondary_color.destructive:hover{\r\n background-color: var(--color-background-danger-subtlest, #FEF1F2);\r\n}\r\n\r\nbutton.secondary_gray.destructive:active, \r\nbutton.secondary_color.destructive:active{\r\n background-color: var(--color-background-danger-subtler, #FDE3E5);\r\n}\r\n\r\nbutton.tertiary_gray.destructive:hover, \r\nbutton.tertiary_color.destructive:hover{\r\n background-color: var(--color-background-danger-subtlest, #FEF1F2);\r\n}\r\n\r\nbutton.tertiary_gray.destructive:active, \r\nbutton.tertiary_color.destructive:active{\r\n background-color: var(--color-background-danger-subtler, #FDE3E5);\r\n}\r\n\r\nbutton.link_gray.destructive:active{\r\n color: var(--color-text-danger-bold, #8C121D);\r\n}\r\n\r\nbutton.link_color.destructive:active{\r\n color: var(--color-text-warning-bold, #93370D);\r\n}\r\n\r\n/* Button Disabled Styles */\r\nbutton.disabled{\r\n cursor: not-allowed;\r\n pointer-events: none;\r\n}\r\n\r\nbutton.primary.disabled {\r\n background-color: var(--color-background-disabled, #F6F8FA);\r\n --icon-color: var(--color-icon-disabled, #CDD5DF);\r\n color: var(--color-text-disabled, #CDD5DF);\r\n}\r\n\r\nbutton.secondary_gray.disabled,\r\nbutton.secondary_color.disabled{\r\n --icon-color: var(--color-icon-disabled, #CDD5DF);\r\n color: var(--color-text-disabled, #CDD5DF);\r\n border-color: var(--color-border-disabled, #E3E8EF);\r\n}\r\n\r\nbutton.tertiary_gray.disabled,\r\nbutton.tertiary_color.disabled,\r\nbutton.link_gray.disabled,\r\nbutton.link_color.disabled{\r\n --icon-color: var(--color-icon-disabled, #CDD5DF);\r\n color: var(--color-text-disabled, #CDD5DF);\r\n}\r\n\r\n.btn_text{\r\n white-space: nowrap;\r\n}\r\n\r\n.btn_text::first-letter{\r\n text-transform: uppercase;\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}\r\n\r\nbutton {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n border: none;\r\n cursor: pointer;\r\n border-radius: var(--rounded-sm);\r\n width: 100%;\r\n}\r\n\r\nbutton.only{\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n\r\nbutton .icon {\r\n display: inline-flex;\r\n width: auto;\r\n height: auto;\r\n}\r\n\r\nbutton .icon svg path[fill] {\r\n fill: var(--icon-color);\r\n}\r\n\r\nbutton .icon svg path[stroke] {\r\n stroke: var(--icon-color);\r\n}\r\n\r\nbutton .icon svg circle {\r\n stroke: var(--icon-color);\r\n}\r\n\r\n/* Button Sizes Styles */\r\nbutton.xl2{\r\n padding: var(--spacing-none) var(--spacing-6);\r\n height: 3.5rem;\r\n gap: var(--spacing-3);\r\n}\r\n\r\nbutton.xl{\r\n padding: var(--spacing-none) var(--spacing-5);\r\n height: 3rem;\r\n gap: var(--spacing-2);\r\n}\r\n\r\nbutton.lg{\r\n padding: 0.625rem 1.125rem;\r\n height: 2.75rem;\r\n gap: var(--spacing-2);\r\n}\r\n\r\nbutton.md{\r\n padding: var(--spacing-none) var(--spacing-4);\r\n height: 2.5rem;\r\n gap: var(--spacing-2);\r\n}\r\n\r\nbutton.sm{\r\n padding: var(--spacing-none) var(--spacing-3);\r\n height: 2.25rem;\r\n gap: var(--spacing-2);\r\n}\r\n\r\nbutton.only.xl2{\r\n width: 3.5rem;\r\n height: 3.5rem;\r\n}\r\n\r\nbutton.only.xl{\r\n width: 3rem;\r\n height: 3rem;\r\n}\r\n\r\nbutton.only.lg{\r\n width: 2.75rem;\r\n height: 2.75rem;\r\n}\r\n\r\nbutton.only.md{\r\n width: 2.5rem;\r\n height: 2.5rem;\r\n}\r\n\r\nbutton.only.sm{\r\n width: 2.25rem;\r\n height: 2.25rem;\r\n}\r\n\r\nbutton.xl2 .icon svg{\r\n width: var(--spacing-6);\r\n height: var(--spacing-6);\r\n}\r\n\r\nbutton.xl .icon svg,\r\nbutton.lg .icon svg,\r\nbutton.md .icon svg,\r\nbutton.sm .icon svg{\r\n width: var(--spacing-5);\r\n height: var(--spacing-5);\r\n}\r\n\r\n/* Hierarchy Styles */\r\nbutton.primary {\r\n background-color: var(--color-background-brandRed, #E21B2E);\r\n --icon-color: var(--color-icon-inverse, #FFFFFF);\r\n color: var(--color-text-inverse, #FFFFFF);\r\n}\r\n\r\nbutton.secondary_gray {\r\n background-color: transparent;\r\n border: 1px solid var(--color-border, #9AA4B2);\r\n --icon-color: var(--color-icon, #4B5565);\r\n color: var(--color-text, #4B5565);\r\n}\r\n\r\nbutton.secondary_color {\r\n background-color: transparent;\r\n border: 1px solid var(--color-border-brandRed, #E21B2E);\r\n --icon-color: var(--color-icon-brandRed, #E21B2E);\r\n color: var(--color-text-brandRed, #E21B2E);\r\n}\r\n\r\nbutton.tertiary_gray {\r\n background-color: transparent;\r\n --icon-color: var(--color-icon, #4B5565);\r\n color: var(--color-text, #4B5565);\r\n}\r\n\r\nbutton.tertiary_color {\r\n background-color: transparent;\r\n --icon-color: var(--color-icon-brandRed, #E21B2E);\r\n color: var(--color-text-brandRed, #E21B2E);\r\n}\r\n\r\nbutton.link_gray {\r\n background-color: transparent;\r\n --icon-color: var(--color-icon, #4B5565);\r\n color: var(--color-text, #4B5565);\r\n padding: var(--spacing-none);\r\n height: fit-content;\r\n}\r\n\r\nbutton.link_color {\r\n background-color: transparent;\r\n --icon-color: var(--color-link, #075DB2);\r\n color: var(--color-link, #075DB2);\r\n padding: var(--spacing-none);\r\n height: fit-content;\r\n}\r\n\r\n/* Button Destructive Styles */\r\nbutton.primary.destructive{\r\n background-color: var(--color-background-danger, #B51726);\r\n color: var(--color-text-inverse, #FFFFFF);\r\n --icon-color: var(--color-icon-danger-inverse, #FFFFFF);\r\n}\r\n\r\nbutton.secondary_gray.destructive, button.secondary_color.destructive{\r\n border: 1px solid var(--color-border-danger, #B51726);\r\n color: var(--color-text-danger, #B51726);\r\n --icon-color: var(--color-icon-danger, #B51726);\r\n}\r\n\r\nbutton.tertiary_gray.destructive,\r\nbutton.tertiary_color.destructive{\r\n color: var(--color-text-danger, #B51726);\r\n --icon-color: var(--color-icon-danger, #B51726);\r\n}\r\n\r\nbutton.link_gray.destructive, \r\nbutton.link_color.destructive{\r\n color: var(--color-text-danger, #B51726);\r\n --icon-color: var(--color-icon-danger, #B51726);\r\n}\r\n\r\n/* Button States Styles */\r\nbutton.primary:hover{\r\n background-color: var(--color-background-brandRed-hover, #CC1A2A);\r\n}\r\n\r\nbutton.primary:active{\r\n background-color: var(--color-background-brandRed-pressed, #B51726);\r\n}\r\n\r\nbutton.secondary_gray:hover{\r\n background-color: var(--color-background-gray-subtler, #EEF2F6);\r\n}\r\n\r\nbutton.secondary_gray:active{\r\n background-color: var(--color-background-gray-subtle, #E3E8EF);\r\n}\r\n\r\nbutton.secondary_color:hover{\r\n background-color: var(--color-background-danger-subtlest, #FEF1F2);\r\n}\r\n\r\nbutton.secondary_color:active{\r\n background-color: var(--color-background-danger-subtler, #FDE3E5);\r\n}\r\n\r\nbutton.tertiary_gray:hover{\r\n background-color: var(--color-background-gray-subtler, #EEF2F6);\r\n}\r\n\r\nbutton.tertiary_gray:active{\r\n background-color: var(--color-background-gray-subtle, #E3E8EF);\r\n}\r\n\r\nbutton.tertiary_color:hover{\r\n background-color: var(--color-background-danger-subtlest, #FEF1F2);\r\n}\r\n\r\nbutton.tertiary_color:active{\r\n background-color: var(--color-background-danger-subtler, #FDE3E5);\r\n}\r\n\r\nbutton.link_gray:hover,\r\nbutton.link_color:hover{\r\n text-decoration: underline;\r\n}\r\n\r\nbutton.link_gray:active{\r\n text-decoration: none;\r\n color: var(--color-text-bold, #202939);\r\n}\r\n\r\nbutton.link_gray:active{\r\n text-decoration: none;\r\n color: var(--color-link-pressed, #064E94);\r\n}\r\n\r\nbutton.primary.destructive:hover{\r\n background-color: var(--color-background-danger-bold, #8C121D);\r\n}\r\n\r\nbutton.primary.destructive:active{\r\n background-color: var(--color-background-brandRed-hover, #CC1A2A); /* ask Mr Gideon about this */\r\n}\r\n\r\nbutton.secondary_gray.destructive:hover, \r\nbutton.secondary_color.destructive:hover{\r\n background-color: var(--color-background-danger-subtlest, #FEF1F2);\r\n}\r\n\r\nbutton.secondary_gray.destructive:active, \r\nbutton.secondary_color.destructive:active{\r\n background-color: var(--color-background-danger-subtler, #FDE3E5);\r\n}\r\n\r\nbutton.tertiary_gray.destructive:hover, \r\nbutton.tertiary_color.destructive:hover{\r\n background-color: var(--color-background-danger-subtlest, #FEF1F2);\r\n}\r\n\r\nbutton.tertiary_gray.destructive:active, \r\nbutton.tertiary_color.destructive:active{\r\n background-color: var(--color-background-danger-subtler, #FDE3E5);\r\n}\r\n\r\nbutton.link_gray.destructive:active{\r\n color: var(--color-text-danger-bold, #8C121D);\r\n}\r\n\r\nbutton.link_color.destructive:active{\r\n color: var(--color-text-warning-bold, #93370D);\r\n}\r\n\r\n/* Button Disabled Styles */\r\nbutton.disabled{\r\n cursor: not-allowed;\r\n pointer-events: none;\r\n}\r\n\r\nbutton.primary.disabled {\r\n background-color: var(--color-background-disabled, #F6F8FA);\r\n --icon-color: var(--color-icon-disabled, #CDD5DF);\r\n color: var(--color-text-disabled, #CDD5DF);\r\n}\r\n\r\nbutton.secondary_gray.disabled,\r\nbutton.secondary_color.disabled{\r\n --icon-color: var(--color-icon-disabled, #CDD5DF);\r\n color: var(--color-text-disabled, #CDD5DF);\r\n border-color: var(--color-border-disabled, #E3E8EF);\r\n}\r\n\r\nbutton.tertiary_gray.disabled,\r\nbutton.tertiary_color.disabled,\r\nbutton.link_gray.disabled,\r\nbutton.link_color.disabled{\r\n --icon-color: var(--color-icon-disabled, #CDD5DF);\r\n color: var(--color-text-disabled, #CDD5DF);\r\n}\r\n\r\n.btn_text{\r\n white-space: nowrap;\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-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: '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 // if (!this.iconLeading && !this.iconTrailing) {\r\n // buttonSlot.classList.add('center');\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 oneicon: this.iconLeading || this.iconTrailing\r\n };\r\n }\r\n\r\n getButtonTextClasses() {\r\n switch (this.size) {\r\n case 'xl2' : return 'text-lg-semi-bold';\r\n case 'xl' : return 'text-md-semi-bold';\r\n case 'lg' : return 'text-md-semi-bold';\r\n case 'md' : return 'text-sm-semi-bold';\r\n case 'sm' : return 'text-sm-semi-bold';\r\n }\r\n }\r\n\r\n renderLeadingIcon() {\r\n return <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' && <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, StateEnum } 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\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: StateEnum;\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' : return `text-sm-medium`;\r\n case 'md' : return `text-md-medium`;\r\n }\r\n }\r\n\r\n getSupportingTextClass() {\r\n switch(this.size) {\r\n case 'sm' : return 'text-xs-regular';\r\n case 'md' : 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 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} checked={this.checked} state={this.state} indeterminate={this.indeterminate}></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, StateEnum } 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: StateEnum;\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 === StateEnum.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 === StateEnum.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 === StateEnum.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 === StateEnum.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 === StateEnum.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 === StateEnum.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 === StateEnum.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 === StateEnum.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 === StateEnum.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 === StateEnum.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 === StateEnum.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 === StateEnum.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 === StateEnum.Default && !this.checked) {\r\n this.checked = true;\r\n this.checkboxClicked.emit(this.checked);\r\n } else if (this.state === StateEnum.Default && this.checked) {\r\n this.checked = false;\r\n this.checkboxClicked.emit(this.checked);\r\n }\r\n }\r\n\r\n private toggleCheckCircleState() {\r\n if ((this.state === StateEnum.Disabled && this.checked) || (this.state === StateEnum.Disabled && !this.checked)) {\r\n return;\r\n }\r\n\r\n if (this.state === StateEnum.Default && !this.checked) {\r\n this.checked = true;\r\n this.checkboxClicked.emit(this.checked);\r\n } else if (this.state == StateEnum.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 === StateEnum.Disabled && !this.checked) || (this.state === StateEnum.Disabled && this.checked)) {\r\n return;\r\n }\r\n if (this.state === StateEnum.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(--color-icon-inverse, #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.input_dropdown_div{\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n border-radius: 0.5rem;\r\n gap: var(--spacing-3);\r\n border: 1px solid var(--color-border-input, #CDD5DF);\r\n background-color: var(--color-background-card, #FFFFFF);\r\n padding: var(--spacing-none) var(--spacing-3);\r\n cursor: pointer;\r\n position: relative;\r\n}\r\n\r\n.input_dropdown_container{\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--spacing-2);\r\n}\r\n\r\n.input_dropdown_container.tag{\r\n min-height: 3rem;\r\n}\r\n\r\n.icon{\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.input_with_label{\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--spacing-2);\r\n}\r\n\r\n/* Size Styles */\r\n.input_dropdown_div.sm{\r\n height: 2.5rem;\r\n}\r\n\r\n.input_dropdown_div.md{\r\n height: 3rem;\r\n}\r\n\r\n.dot.sm{\r\n width: var(--spacing-2);\r\n height: var(--spacing-2);\r\n}\r\n\r\n.dot.md{\r\n width: 0.625rem;\r\n height: 0.625rem;\r\n}\r\n\r\n/* State Styles */\r\n.input_dropdown_div.focused{\r\n border-color: var(--color-border-selected, #075DB2);\r\n}\r\n\r\n.input_dropdown_div.disabled{\r\n background-color: var(--color-background-disabled, #F6F8FA);\r\n pointer-events: none;\r\n cursor: not-allowed;\r\n}\r\n\r\n.placeholder{\r\n display: flex;\r\n justify-content: stretch;\r\n width: 100%;\r\n white-space: nowrap;\r\n}\r\n\r\n.content{\r\n display: flex;\r\n gap: var(--spacing-2);\r\n overflow: hidden; /* Clip overflowing content */\r\n /* width: 50px; */\r\n flex: 1 0 0;\r\n}\r\n\r\n.text.tag{\r\n display: flex;\r\n justify-content: flex-start;\r\n align-items: stretch;\r\n flex-wrap: wrap;\r\n gap: 0.38rem;\r\n padding: 0.4rem 0;\r\n}\r\n\r\n.added_tag{\r\n width: fit-content;\r\n}\r\n\r\n.help_icon{\r\n display: flex;\r\n align-items: center;\r\n height: fit-content;\r\n}\r\n\r\n.dropdown_icon{\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\nsvg.disabled path{\r\n stroke: var(--color-icon-disabled, #CDD5DF);\r\n}\r\n\r\n.dropdown_menu{\r\n display: flex;\r\n min-width: 100%;\r\n max-height: 300px;\r\n padding: var(--spacing-none);\r\n flex-direction: column;\r\n align-items: flex-start;\r\n align-items: stretch;\r\n border-radius: var(--rounded-sm);\r\n border: 1px solid var(--color-border-subtler, #E3E8EF);\r\n background: var(--color-surface, #FFFFFF);\r\n box-shadow: var(--shadow-sm);\r\n position: absolute;\r\n gap: var(--spacing-none);\r\n transition: 1s ease-in-out;\r\n overflow-y: auto;\r\n}\r\n\r\n.dropdown_menu.top{\r\n bottom: 105%;\r\n left: 0;\r\n z-index: 9999999;\r\n}\r\n\r\n.dropdown_menu.bottom{\r\n top: 105%;\r\n left: 0;\r\n z-index: 9999999;\r\n}\r\n\r\n/* .input_dropdown_div.sm.tag{\r\n min-height: 2.5rem;\r\n} */\r\n\r\n.input_dropdown_div.tag{\r\n min-height: 3rem;\r\n height: fit-content;\r\n}\r\n\r\n.input_dropdown_div.md.tag{\r\n min-height: 2.5rem;\r\n}\r\n\r\n.input_dropdown_div.md.tag{\r\n min-height: 3rem;\r\n}\r\n\r\n.opened{\r\n transform: rotate(180deg);\r\n transition: 0.2s ease-in-out;\r\n}\r\n\r\n::slotted([slot=\"tooltip_label\"]){\r\n white-space: nowrap;\r\n color: var(--color-text, #4B5565);\r\n}\r\n\r\n::slotted([slot=\"tooltip_supporting_text\"]){\r\n min-width: fit-content;\r\n max-width: 18.5rem;\r\n color: var(--color-text-subtle, #697586);\r\n margin-top: 5rem;\r\n}\r\n\r\n::slotted([slot=\"initials\"].gray){\r\n color: #4B5565;\r\n}\r\n\r\n::slotted([slot=\"initials\"].blue){\r\n color: var(--color-text-information, #064E94);\r\n}\r\n\r\n::slotted([slot=\"initials\"].cyan){\r\n color: var(--color-text-discovery, #0086C9);\r\n}\r\n\r\n::slotted([slot=\"initials\"].pink){\r\n color: var(--color-text-pink, #DD2590);\r\n}\r\n\r\n::slotted([slot=\"initials\"].purple){\r\n color: var(--color-text-purple, #6938EF);\r\n}\r\n\r\n::slotted([slot=\"initials\"].green){\r\n color: var(--color-text-success, #079455);\r\n}\r\n\r\n::slotted([slot=\"initials\"].yellow){\r\n color: var(--color-text-warning, #DC6803);\r\n}\r\n\r\n.dropdown_search_field{\r\n background: var(--color-surface, #FFFFFF);\r\n padding: var(--spacing-2) var(--spacing-2) var(--spacing-none) var(--spacing-2);\r\n position: sticky;\r\n top: 0;\r\n z-index: 999;\r\n}\r\n\r\n.empty_state{\r\n margin: auto;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n\r\n.background{\r\n position: relative;\r\n width: 80%;\r\n}\r\n\r\n.message_background{\r\n position: absolute;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: var(--spacing-1);\r\n}\r\n\r\n.illustration{\r\n width: 100px;\r\n height: 100px;\r\n}\r\n\r\n.message{\r\n color: var(--color-text-bold, #202939);\r\n}\r\n\r\n.text{\r\n display: flex;\r\n align-items: center;\r\n gap: var(--spacing-2);\r\n flex: 1 1 auto; /* Allow it to grow and shrink */\r\n overflow: hidden; /* Prevent content from overflowing */\r\n}\r\n\r\n.selected_text{\r\n overflow: hidden; /* Hide overflowing text */\r\n text-overflow: ellipsis;\r\n white-space: nowrap; /* Prevent wrapping */\r\n flex: 1 1 auto; /* Take up available space and adjust dynamically */\r\n min-width: 0; /* Ensures it respects parent width in flexbox */\r\n}\r\n\r\n/* .new_div{\r\n background: red;\r\n display: flex;\r\n flex: 1 0 0;\r\n justify-content: space-between;\r\n} */\r\n\r\n/* .icon_and_text{\r\n background: purple;\r\n display: flex;\r\n flex: 1 0 0;\r\n} */","import { Component, Prop, h, Fragment, Element, State, getAssetPath, Listen, Event, EventEmitter } from '@stencil/core';\r\nimport { AvatarColorTypes, DropdownTypes, GeneralSizes, StateEnum } from '../../models/reusableModels';\r\n@Component({\r\n tag: 'gb-input-dropdown',\r\n styleUrl: 'gb-input-dropdown.css',\r\n shadow: true,\r\n})\r\nexport class GbInputDropdown {\r\n @Prop() type: DropdownTypes;\r\n @Prop({ mutable: true }) state: 'default' | 'focused' | 'disabled' | 'filled';\r\n @Prop() size: GeneralSizes;\r\n @Prop() showLabel: boolean = false;\r\n @Prop() label: string = '';\r\n @Prop() placeholder: string = '';\r\n @Prop() showHintText: boolean;\r\n @Prop() hintText: string = '';\r\n @Prop() showHelpIcon: boolean;\r\n @Prop() showLeadingIcon: boolean = false;\r\n @Prop() iconSwap: string = '';\r\n @Prop() text: boolean = false;\r\n @Prop() leadingIcon: string = '';\r\n @Prop() icon: 'country' | 'avatar' | 'dot' | 'false';\r\n @Prop({ mutable: true }) items: any[] = [\r\n { name: 'Mock Item A', username: 'A', selected: false },\r\n { name: 'Mock Item B', username: 'B', selected: false },\r\n { name: 'Mock Item C', username: 'C', selected: false },\r\n { name: 'Mock Item D', username: 'D', selected: false },\r\n { name: 'Mock Item E', username: 'E', selected: false },\r\n 45,\r\n 50,\r\n 20,\r\n 25,\r\n 90,\r\n 92,\r\n 53,\r\n 'Activated',\r\n 'Deactivated',\r\n ];\r\n @Prop({ mutable: true }) value: any[] = [\r\n // { name: 'Mock Item A', username: 'A', selected: false },\r\n // { name: 'Mock Item B', username: 'B', selected: false },\r\n // { name: 'Mock Item C', username: 'C', selected: false },\r\n // 45,\r\n // 50,\r\n // 20,\r\n // 25,\r\n // 90,\r\n // 'Activated',\r\n // 'Deactivated',\r\n // 'Transaction Status'\r\n ];\r\n @Prop() supportingText: boolean = false;\r\n @Prop() color: AvatarColorTypes;\r\n @Prop() showBorder: boolean = false;\r\n @Prop() menuPosition: 'top' | ' bottom';\r\n @Prop() showSearchInput: boolean = false;\r\n @Prop() inputValue: string;\r\n @State() leadingIconSvg: string = '';\r\n @State() dropdownOpen: boolean = false;\r\n @State() selectedItems: any[] = [];\r\n @State() unselectedItems: any[] = [];\r\n @State() selectedItem: any;\r\n @State() searchItem: any;\r\n @State() searchResults: any;\r\n @Element() el: HTMLElement;\r\n // @Event() dropdownValue: EventEmitter<any>;\r\n @Event() dropdownItemSelected: EventEmitter<any>;\r\n\r\n dropdownRef!: HTMLElement;\r\n\r\n searchItems(event: CustomEvent<any>) {\r\n this.searchItem = event.detail;\r\n this.searchResults = this.items.filter(item => {\r\n if (typeof item === 'string') {\r\n return item.toLowerCase().includes(this.searchItem.toLowerCase());\r\n } else if (typeof item === 'number') {\r\n return item.toString().includes(this.searchItem.toString());\r\n } else if (typeof item === 'object') {\r\n return item.name.toLowerCase().includes(this.searchItem.toLowerCase());\r\n }\r\n });\r\n }\r\n\r\n disconnectedCallback() {\r\n document.removeEventListener('click', this.handleClickOutside);\r\n }\r\n\r\n @Listen('click', { target: 'document' })\r\n handleClickOutside(event: MouseEvent) {\r\n if (this.dropdownOpen && !this.el.contains(event.target as Node)) {\r\n this.dropdownOpen = false;\r\n }\r\n }\r\n\r\n toggleDropdown(event: MouseEvent) {\r\n if (this.state !== 'disabled') {\r\n this.dropdownOpen = !this.dropdownOpen;\r\n }\r\n // console.log(this.inputValue);\r\n event.stopPropagation();\r\n }\r\n\r\n isItemSelected(item) {\r\n const isObject = typeof item === 'object';\r\n if (this.value.length === 0) {\r\n return this.selectedItems.some(i => (isObject ? i.name === item.name : i === item));\r\n } else if (this.value.length > 0) {\r\n return this.value.some(i => (isObject ? i.name === item.name : i === item));\r\n }\r\n }\r\n\r\n async loadIcon(iconName: string) {\r\n const iconPath = getAssetPath(`${iconName}`);\r\n const response = await fetch(iconPath);\r\n const svg = await response.text();\r\n this.leadingIconSvg = svg;\r\n }\r\n\r\n getAvatarSize() {\r\n switch (this.size) {\r\n case 'sm':\r\n return 'xs';\r\n case 'md':\r\n return 'xs';\r\n }\r\n }\r\n\r\n sortDropdownItems(menuItems: any[]): any[] {\r\n return menuItems.sort((a, b) => {\r\n if (a.selected && !b.selected) {\r\n return -1; // Move selected items up\r\n } else if (!a.selected && b.selected) {\r\n return 1; // Keep unselected items down\r\n }\r\n return 0; // Keep order if both are selected or unselected\r\n });\r\n }\r\n\r\n handleItemSelect(item) {\r\n if (this.type === 'tags') {\r\n if (this.state === 'default') {\r\n this.selectMultipleItems(item);\r\n } else if (this.state === 'filled' && this.value.length > 0) {\r\n this.state = 'default';\r\n this.value.length = 0;\r\n this.selectMultipleItems(item);\r\n } else if (this.state === 'filled' && this.value.length === 0) {\r\n this.selectMultipleItems(item);\r\n }\r\n } else {\r\n if (this.state === 'default') {\r\n this.singleItemSelect(item);\r\n } else if (this.state === 'filled' && this.value.length > 0) {\r\n this.state = 'default';\r\n this.value.length = 0;\r\n this.singleItemSelect(item);\r\n } else if (this.state === 'filled' && this.value.length === 0) {\r\n this.singleItemSelect(item);\r\n }\r\n }\r\n\r\n this.state = this.selectedItems.length > 0 ? 'filled' : 'default';\r\n // console.log(this.state)\r\n }\r\n\r\n singleItemSelect(item) {\r\n // Handle single selection for other types\r\n this.selectedItem = item; // Store single selected item\r\n this.selectedItems = [item]; // Ensure only one item in selectedItems\r\n\r\n // Close the dropdown after selection for single selection types\r\n this.dropdownOpen = false;\r\n console.log(this.selectedItems);\r\n this.dropdownItemSelected.emit(this.selectedItem);\r\n }\r\n\r\n selectMultipleItems(item) {\r\n const isObject = typeof item === 'object';\r\n\r\n const isSelected = this.selectedItems.some(i => (isObject ? i.name === item.name : i === item));\r\n\r\n if (isSelected) {\r\n // Unselect item: Move it from selectedItems to unselectedItems\r\n this.selectedItems = this.selectedItems.filter(i => (isObject ? i.name !== item.name : i !== item));\r\n if (!this.unselectedItems.some(i => (isObject ? i.name === item.name : i === item))) {\r\n this.unselectedItems = [...this.unselectedItems, item];\r\n }\r\n } else {\r\n // Select item: Move it from unselectedItems to selectedItems\r\n this.selectedItems = [...this.selectedItems, item];\r\n this.unselectedItems = this.unselectedItems.filter(i => (isObject ? i.name !== item.name : i !== item));\r\n console.log(this.selectedItems);\r\n\r\n this.dropdownItemSelected.emit(this.selectedItems);\r\n }\r\n }\r\n\r\n handleTagRemove(item) {\r\n if (this.value.length === 0) {\r\n const isObject = typeof item === 'object';\r\n\r\n // Remove item from selectedItems\r\n this.selectedItems = this.selectedItems.filter(i => (isObject ? i.name !== item.name : i !== item));\r\n\r\n // Add item back to unselectedItems if not already present\r\n if (!this.unselectedItems.some(i => (isObject ? i.name === item.name : i === item))) {\r\n this.unselectedItems = [...this.unselectedItems, item];\r\n }\r\n\r\n // Optionally update state or emit event\r\n this.state = this.selectedItems.length > 0 ? 'filled' : 'default';\r\n } else if (this.value.length > 0) {\r\n const isObject = typeof item === 'object';\r\n\r\n // Remove item from selectedItems\r\n this.value = this.value.filter(i => (isObject ? i.name !== item.name : i !== item));\r\n this.selectedItems = this.value;\r\n\r\n // Add item back to unselectedItems if not already present\r\n if (!this.unselectedItems.some(i => (isObject ? i.name === item.name : i === item))) {\r\n this.unselectedItems = [...this.unselectedItems, item];\r\n }\r\n\r\n // Optionally update state or emit event\r\n this.state = this.selectedItems.length > 0 ? 'filled' : 'default';\r\n }\r\n }\r\n\r\n componentWillRender() {\r\n if (this.value.length > 0 && this.state === 'default') {\r\n this.state = 'filled';\r\n }\r\n }\r\n\r\n componentWillLoad() {\r\n this.loadIcon(this.leadingIcon);\r\n\r\n if (this.type !== 'tags') {\r\n this.selectedItem = null; // For single selection types\r\n }\r\n\r\n if (this.value.length > 0) {\r\n this.selectedItems = [];\r\n this.unselectedItems = [];\r\n\r\n // Separate objects from primitive values\r\n const objectValues = this.value.filter(val => typeof val === 'object' && val !== null);\r\n const primitiveValues = this.value.filter(val => typeof val !== 'object');\r\n\r\n // Find selected items\r\n this.selectedItems = this.items.filter(item => {\r\n if (typeof item === 'object' && item !== null) {\r\n return objectValues.some(val => val.name === item.name);\r\n } else {\r\n return primitiveValues.includes(item);\r\n }\r\n });\r\n\r\n // Find unselected items\r\n this.unselectedItems = this.items.filter(item => {\r\n if (typeof item === 'object' && item !== null) {\r\n return !objectValues.some(val => val.name === item.name);\r\n } else {\r\n return !primitiveValues.includes(item);\r\n }\r\n });\r\n } else {\r\n // If value array is empty, all items are unselected\r\n this.selectedItems = [];\r\n this.unselectedItems = [...this.items];\r\n }\r\n\r\n // console.log('Selected Items:', this.selectedItems);\r\n // console.log('Unselected Items:', this.unselectedItems);\r\n }\r\n\r\n componentDidLoad() {\r\n if (this.type !== 'tags') {\r\n document.addEventListener('click', this.handleClickOutside);\r\n }\r\n\r\n const slottedInitials = this.el.querySelector('[slot=\"initials\"]');\r\n\r\n const mainTextSlot = this.el.querySelector('[slot=\"tooltip_label\"]');\r\n const supportingTextSlot = this.el.querySelector('[slot=\"tooltip_supporting_text\"]');\r\n\r\n if (slottedInitials) {\r\n slottedInitials.classList.add('text-xxs-semi-bold');\r\n }\r\n\r\n if (mainTextSlot) {\r\n mainTextSlot.classList.add('text-xs-semi-bold');\r\n }\r\n\r\n if (supportingTextSlot) {\r\n supportingTextSlot.classList.add('text-xs-regular');\r\n }\r\n }\r\n\r\n applyColorToInitials() {\r\n switch (this.color) {\r\n case 'gray':\r\n return 'gray';\r\n case 'blue':\r\n return 'blue';\r\n case 'cyan':\r\n return 'cyan';\r\n case 'pink':\r\n return 'pink';\r\n case 'purple':\r\n return 'purple';\r\n case 'green':\r\n return 'green';\r\n case 'yellow':\r\n return 'yellow';\r\n }\r\n }\r\n\r\n render() {\r\n const emptyStateBackground = getAssetPath('assets/empty-state-background.svg');\r\n const illustration = getAssetPath('assets/empty-state-no-data.svg');\r\n\r\n return [\r\n <div class={`input_dropdown_container ${this.type === 'tags' ? 'tag' : ''}`}>\r\n <div class={`input_with_label`}>\r\n {this.showLabel && (\r\n <p class=\"text-sm-regular\" style={{ color: '#4B5565' }}>\r\n {this.label.charAt(0).toUpperCase() + this.label.slice(1).toLowerCase()}\r\n </p>\r\n )}\r\n <div class={`input_dropdown_div ${this.size} ${this.state} ${this.type === 'tags' ? 'tag' : ''}`} onClick={e => this.toggleDropdown(e)}>\r\n {this.type === 'icon_leading' && (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M5.48131 12.9013C4.30234 13.6033 1.21114 15.0368 3.09388 16.8305C4.01359 17.7067 5.03791 18.3333 6.32572 18.3333H13.6743C14.9621 18.3333 15.9864 17.7067 16.9061 16.8305C18.7889 15.0368 15.6977 13.6033 14.5187 12.9013C11.754 11.2551 8.24599 11.2551 5.48131 12.9013Z\"\r\n stroke=\"#697586\"\r\n stroke-width=\"1.66667\"\r\n />\r\n <path\r\n d=\"M13.75 5.41667C13.75 7.48774 12.0711 9.16667 10 9.16667C7.92893 9.16667 6.25 7.48774 6.25 5.41667C6.25 3.3456 7.92893 1.66667 10 1.66667C12.0711 1.66667 13.75 3.3456 13.75 5.41667Z\"\r\n stroke=\"#697586\"\r\n stroke-width=\"1.66667\"\r\n />\r\n </svg>\r\n )}\r\n {this.type === 'avatar_leading' && (\r\n <>\r\n {this.state === 'default' && (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M5.48131 12.9013C4.30234 13.6033 1.21114 15.0368 3.09388 16.8305C4.01359 17.7067 5.03791 18.3333 6.32572 18.3333H13.6743C14.9621 18.3333 15.9864 17.7067 16.9061 16.8305C18.7889 15.0368 15.6977 13.6033 14.5187 12.9013C11.754 11.2551 8.24599 11.2551 5.48131 12.9013Z\"\r\n stroke=\"#4B5565\"\r\n stroke-width=\"1.66667\"\r\n />\r\n <path\r\n d=\"M13.75 5.41666C13.75 7.48772 12.0711 9.16666 10 9.16666C7.92893 9.16666 6.25 7.48772 6.25 5.41666C6.25 3.34559 7.92893 1.66666 10 1.66666C12.0711 1.66666 13.75 3.34559 13.75 5.41666Z\"\r\n stroke=\"#4B5565\"\r\n stroke-width=\"1.66667\"\r\n />\r\n </svg>\r\n )}\r\n {this.state === 'filled' && (\r\n <gb-avatar size=\"xs\" text={this.text} color={this.color} show-border={this.showBorder}>\r\n {this.selectedItems.map(item => (\r\n <h1 slot=\"initials\">{item.name.split(' ').map(part => part.charAt(0).toUpperCase())}</h1>\r\n ))}\r\n </gb-avatar>\r\n )}\r\n </>\r\n )}\r\n {this.showLeadingIcon && <>{this.type === 'search' || this.type === 'tags' ? <div class={`icon`} innerHTML={this.leadingIconSvg}></div> : null}</>}\r\n {this.type === 'dot_leading' && (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" class={`dot ${this.size}`}>\r\n <circle cx=\"5\" cy=\"5\" r=\"4\" fill=\"#079455\" />\r\n </svg>\r\n )}\r\n <>\r\n {this.state === 'default' && (\r\n <>\r\n {this.placeholder && (\r\n <div class=\"placeholder\">\r\n <p class=\"text-md-regular\" style={{ color: '#CDD5DF' }}>\r\n {this.placeholder}\r\n </p>\r\n </div>\r\n )}\r\n </>\r\n )}\r\n {this.state === 'filled' && (\r\n <>\r\n <div class={`content`}>\r\n <div class={`text text-md-regular ${this.type === 'tags' ? 'tag' : ''}`} style={{ color: '#4B5565' }}>\r\n {this.type === 'tags' ? (\r\n <>\r\n {this.value.length === 0 ? (\r\n <>\r\n {this.selectedItems.map((item, index) =>\r\n typeof item === 'object' ? (\r\n <div class=\"added_tag\" key={index}>\r\n <gb-tag size=\"sm\" icon={this.icon ? this.icon : 'avatar'} action=\"X_close\" onClick={() => this.handleTagRemove(item)}>\r\n <p class=\"text-xs-medium\">{item.name.split(' ')[0]}</p>\r\n <h1 slot=\"initials\" class=\"text-xxs-semi-bold\">\r\n {item.name\r\n .split(' ')\r\n .map(part => part.charAt(0).toUpperCase())\r\n .join('')}\r\n </h1>\r\n </gb-tag>\r\n </div>\r\n ) : (\r\n <div class=\"added_tag\" key={index}>\r\n <gb-tag size=\"sm\" icon={this.icon ? this.icon : 'avatar'} action=\"X_close\" onClick={() => this.handleTagRemove(item)}>\r\n <p class=\"text-xs-medium\">{item}</p>\r\n </gb-tag>\r\n </div>\r\n ),\r\n )}\r\n </>\r\n ) : (\r\n <>\r\n {this.value.map((item, index) =>\r\n typeof item === 'object' ? (\r\n <div class=\"added_tag\" key={index}>\r\n <gb-tag size=\"sm\" icon={this.icon ? this.icon : 'avatar'} action=\"X_close\" onClick={() => this.handleTagRemove(item)}>\r\n <p class=\"text-xs-medium\">{item.name.split(' ')[0]}</p>\r\n <h1 slot=\"initials\" class=\"text-xxs-semi-bold\">\r\n {item.name\r\n .split(' ')\r\n .map(part => part.charAt(0).toUpperCase())\r\n .join('')}\r\n </h1>\r\n </gb-tag>\r\n </div>\r\n ) : (\r\n <div class=\"added_tag\" key={index}>\r\n <gb-tag size=\"sm\" icon={this.icon ? this.icon : 'avatar'} action=\"X_close\" onClick={() => this.handleTagRemove(item)}>\r\n <p class=\"text-xs-medium\">{item}</p>\r\n </gb-tag>\r\n </div>\r\n ),\r\n )}\r\n </>\r\n )}\r\n </>\r\n ) : (\r\n <p class=\"selected_text\">\r\n {this.value.length === 0 ? this.selectedItem?.name || this.selectedItem : <>{this.value.map(item => (typeof item === 'object' ? item.name : item))}</>}\r\n </p>\r\n )}\r\n </div>\r\n {this.supportingText && (\r\n <div class=\"supporting_text text-sm-regular\" style={{ color: '#697586' }}>\r\n {this.type !== 'tags' && (\r\n <>{this.value.length === 0 ? <>{this.selectedItem.username}</> : <>{this.value.map(item => typeof item === 'object' && item.username)}</>}</>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n </>\r\n )}\r\n {this.state === 'disabled' && (\r\n <>\r\n <div class={`content`}>\r\n <div class={`text text-md-regular ${this.type === 'tags' ? 'tag' : ''}`} style={{ color: '#4B5565' }}>\r\n {this.type === 'tags' ? (\r\n <>\r\n {this.value.map((item, index) =>\r\n typeof item === 'object' ? (\r\n <div class=\"added_tag\" key={index}>\r\n <gb-tag size=\"sm\" icon={this.icon ? this.icon : 'avatar'} action=\"X_close\">\r\n <p class=\"text-xs-medium\">{item.name.split(' ')[0]}</p>\r\n <h1 slot=\"initials\" class=\"text-xxs-semi-bold\">\r\n {item.name\r\n .split(' ')\r\n .map(part => part.charAt(0).toUpperCase())\r\n .join('')}\r\n </h1>\r\n </gb-tag>\r\n </div>\r\n ) : (\r\n <div class=\"added_tag\" key={index}>\r\n <gb-tag size=\"sm\" icon={this.icon ? this.icon : 'avatar'} action=\"X_close\">\r\n <p class=\"text-xs-medium\">{item}</p>\r\n </gb-tag>\r\n </div>\r\n ),\r\n )}\r\n </>\r\n ) : (\r\n <>{<>{this.value.map(item => (typeof item === 'object' ? item.name : item))}</>}</>\r\n )}\r\n </div>\r\n {this.supportingText && (\r\n <div class=\"supporting_text text-sm-regular\" style={{ color: '#697586' }}>\r\n {this.type !== 'tags' && (\r\n <>{this.value.length === 0 ? <>{this.selectedItem.username}</> : <>{this.value.map(item => typeof item === 'object' && <>{item.username}</>)}</>}</>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n </>\r\n )}\r\n </>\r\n {this.showHelpIcon && (\r\n <div class={`help_icon`}>\r\n <gb-help-tooltip show-supporting-text={true}>\r\n <slot name=\"tooltip_label\" slot=\"label\"></slot>\r\n <slot name=\"tooltip_supporting_text\" slot=\"supporting_text\"></slot>\r\n </gb-help-tooltip>\r\n </div>\r\n )}\r\n {this.type !== 'search' && (\r\n <div class={`dropdown_icon ${this.dropdownOpen ? 'opened' : ''}`}>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" class={`${this.state}`}>\r\n <path\r\n d=\"M15 7.50004C15 7.50004 11.3176 12.5 9.99996 12.5C8.68237 12.5 5 7.5 5 7.5\"\r\n stroke=\"#697586\"\r\n stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n )}\r\n <>\r\n {this.dropdownOpen && (\r\n <div class={`dropdown_menu ${this.menuPosition}`} ref={el => (this.dropdownRef = el)} onClick={e => e.stopPropagation()}>\r\n {this.showSearchInput && (\r\n <div class=\"dropdown_search_field\">\r\n <gb-input-field\r\n size=\"sm\"\r\n value={this.inputValue}\r\n show-close-button={this.inputValue ? true : false}\r\n icon-swap=\"assets/search-01.svg\"\r\n placeholder=\"Search banks\"\r\n type=\"icon_leading\"\r\n labelText=\"label\"\r\n idOfInput=\"3\"\r\n onInputValueChanged={this.searchItems.bind(this)}\r\n ></gb-input-field>\r\n </div>\r\n )}\r\n {this.searchItem ? (\r\n <>\r\n {this.searchItem !== '' && this.searchResults.length > 0 ? (\r\n <>\r\n {this.searchResults.map(item => (\r\n <gb-input-dropdown-menu-item\r\n type={this.type === 'search' ? 'checkbox' : this.type === 'tags' ? 'checkbox' : this.type}\r\n state={StateEnum.Default}\r\n supporting-text={this.supportingText}\r\n selected={this.isItemSelected(item)}\r\n onClick={() => this.handleItemSelect(item)}\r\n >\r\n {typeof item === 'object' ? (\r\n <>\r\n <p slot=\"name\">{item.name}</p>\r\n <p slot=\"supporting_text\">{item.username}</p>\r\n </>\r\n ) : (\r\n <p slot=\"name\">{item}</p>\r\n )}\r\n </gb-input-dropdown-menu-item>\r\n ))}\r\n </>\r\n ) : this.searchItem !== '' && this.searchResults.length === 0 ? (\r\n //Empty state for when there are no search results\r\n <div class=\"empty_state\">\r\n <img src={emptyStateBackground} class=\"background\" alt=\"\" />\r\n <div class=\"message_background\">\r\n <img src={illustration} alt=\"\" class=\"illustration\" />\r\n <p class=\"message text-md-semi-bold\">No results available</p>\r\n </div>\r\n </div>\r\n ) : null}\r\n </>\r\n ) : (\r\n <>\r\n {this.type === 'tags' ? (\r\n <>\r\n {this.selectedItems.map(item => (\r\n <gb-input-dropdown-menu-item\r\n type={this.type === 'search' ? 'checkbox' : this.type === 'tags' ? 'checkbox' : this.type}\r\n state={StateEnum.Default}\r\n supporting-text={this.supportingText}\r\n selected={true}\r\n onClick={() => this.handleItemSelect(item)}\r\n >\r\n {typeof item === 'object' ? (\r\n <>\r\n <p slot=\"name\">{item.name}</p>\r\n <p slot=\"supporting_text\">{item.username}</p>\r\n </>\r\n ) : (\r\n <p slot=\"name\">{item}</p>\r\n )}\r\n </gb-input-dropdown-menu-item>\r\n ))}\r\n {this.unselectedItems.map(item => (\r\n <gb-input-dropdown-menu-item\r\n type={this.type === 'search' ? 'checkbox' : this.type === 'tags' ? 'checkbox' : this.type}\r\n state={StateEnum.Default}\r\n supporting-text={this.supportingText}\r\n selected={false}\r\n onClick={() => this.handleItemSelect(item)}\r\n >\r\n {typeof item === 'object' ? (\r\n <>\r\n <p slot=\"name\">{item.name}</p>\r\n <p slot=\"supporting_text\">{item.username}</p>\r\n </>\r\n ) : (\r\n <p slot=\"name\">{item}</p>\r\n )}\r\n </gb-input-dropdown-menu-item>\r\n ))}\r\n </>\r\n ) : (\r\n <>\r\n {this.items.map(item => (\r\n <gb-input-dropdown-menu-item\r\n type={this.type === 'search' ? 'checkbox' : this.type === 'tags' ? 'checkbox' : this.type}\r\n state={StateEnum.Default}\r\n supporting-text={this.supportingText}\r\n selected={this.isItemSelected(item)}\r\n color={this.color}\r\n onClick={() => this.handleItemSelect(item)}\r\n >\r\n {typeof item === 'object' ? (\r\n <>\r\n <p slot=\"name\">{item.name}</p>\r\n <h1 slot=\"initials\">{item.name.split(' ').map(part => part.charAt(0).toUpperCase())}</h1>\r\n <p slot=\"supporting_text\">{item.username}</p>\r\n </>\r\n ) : (\r\n typeof item !== 'object' && <p slot=\"name\">{item}</p>\r\n )}\r\n </gb-input-dropdown-menu-item>\r\n ))}\r\n </>\r\n )}\r\n </>\r\n )}\r\n </div>\r\n )}\r\n </>\r\n </div>\r\n </div>\r\n {this.showHintText && (\r\n <p class=\"text-sm-regular\" style={{ color: '#697586' }}>\r\n {this.hintText}\r\n </p>\r\n )}\r\n </div>,\r\n ];\r\n }\r\n}\r\n","@import './../../global/global.css';\r\n\r\n.dropdown-container {\r\n display: flex;\r\n padding: var(--spacing-1);\r\n align-items: center;\r\n gap: var(--spacing-none);\r\n border-radius: var(--rounded-none);\r\n cursor: pointer;\r\n}\r\n\r\n.dropdown-item {\r\n display: flex;\r\n justify-content: flex-start;\r\n align-items: center;\r\n gap: var(--spacing-2);\r\n flex: 1 0 0;\r\n border-radius: var(--rounded-xs);\r\n cursor: pointer;\r\n color: var(--color-text, #4B5565);\r\n font-family: var(--Font-Family-Body, Sora);\r\n font-style: normal;\r\n letter-spacing: var(--Font-Letter-spacing-T-md, 0px);\r\n}\r\n\r\n::slotted([slot='name']) {\r\n font-size: var(--Font-Size-T-md, 16px);\r\n font-weight: var(--Font-Weight-Medium, 500);\r\n line-height: var(--Font-Line-height-T-md, 24px); /* 150% */\r\n}\r\n\r\n::slotted([slot='name'].no_wrap) {\r\n white-space: nowrap;\r\n}\r\n\r\n::slotted([slot=\"supporting_text\"]) {\r\n font-size: var(--Font-Size-T-sm, 14px);\r\n font-weight: var(--Font-Weight-Regular, 400);\r\n line-height: var(--Font-Line-height-T-sm, 20px); /* 142.857% */\r\n overflow: hidden;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n}\r\n\r\n/* State Styles */\r\n.dropdown-item:hover{\r\n background-color: var(--color-background-gray-subtler, #EEF2F6);\r\n}\r\n\r\n.dropdown-item:active{\r\n background-color: var(--color-background-gray-subtle, #E3E8EF);\r\n}\r\n\r\n.dropdown-item.default.selected,\r\n.dropdown-item.icon_leading.selected,\r\n.dropdown-item.avatar_leading.selected,\r\n.dropdown-item.dot_leading.selected{\r\n background-color: var(--color-background-information-subtlest, #E4F0FC);\r\n}\r\n\r\n.dropdown-item.default.selected:hover,\r\n.dropdown-item.icon_leading.selected:hover,\r\n.dropdown-item.avatar_leading.selected:hover,\r\n.dropdown-item.dot_leading.selected:hover{\r\n background-color: var(--color-background-discovery-subtlest, #F0F9FF);\r\n}\r\n\r\n.dropdown-item.default.selected:active,\r\n.dropdown-item.icon_leading.selected:active,\r\n.dropdown-item.avatar_leading.selected:active,\r\n.dropdown-item.dot_leading.selected:active{\r\n background-color: var(--color-background-information-subtler, #C8E0F9);\r\n}\r\n\r\n.dropdown-item.default.selected.disabled,\r\n.dropdown-item.icon_leading.selected.disabled,\r\n.dropdown-item.avatar_leading.selected.disabled,\r\n.dropdown-item.dot_leading.selected.disabled,\r\n.dropdown-item.checkbox.selected.disabled{\r\n background-color: transparent;\r\n color: var(--color-text-disabled, #CDD5DF);\r\n}\r\n\r\n.content {\r\n display: flex;\r\n min-height: 2.5rem;\r\n padding: 0 var(--spacing-2);\r\n justify-content: flex-start;\r\n align-items: center;\r\n gap: var(--spacing-2);\r\n flex: 1 0 0;\r\n}\r\n\r\n.dropdown-item--selected slot {\r\n flex-grow: 1;\r\n margin-right: 8px;\r\n}\r\n\r\n.dropdown-item--selected svg:last-of-type {\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.tick{\r\n display: flex;\r\n align-items: center;\r\n padding-right: var(--spacing-2);\r\n}","import { Component, Element, Prop, h, Fragment, Event, EventEmitter, Method } from \"@stencil/core\";\r\nimport { AvatarColorTypes, 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: AvatarColorTypes;\r\n @Element() el: HTMLElement;\r\n @Event() dropdownItemClicked: EventEmitter<void>;\r\n\r\n componentDidLoad() {\r\n const nameSlot = this.el.querySelector('[slot=\"name\"]');\r\n const supportingTextSlot = this.el.querySelector('[slot=\"supporting_text\"]');\r\n const initialsSlot = this.el.querySelector('[slot=\"initials\"]');\r\n\r\n if (nameSlot) {\r\n nameSlot.classList.add('text-md-medium');\r\n nameSlot.classList.add('no_wrap');\r\n }\r\n\r\n if (initialsSlot) {\r\n initialsSlot.classList.add('text-xs-semi-bold');\r\n }\r\n\r\n if (supportingTextSlot) {\r\n supportingTextSlot.classList.add('text-sm-regular');\r\n }\r\n }\r\n\r\n @Method()\r\n async handleClick() {\r\n this.dropdownItemClicked.emit()\r\n }\r\n\r\n render() {\r\n return (\r\n // <div class=\"dropdown-container\" onClick={() => (this.selected = !this.selected)}>\r\n <div class=\"dropdown-container\" onClick={() => this.handleClick()}>\r\n <div\r\n class={{\r\n 'dropdown-item': true,\r\n 'selected': this.selected,\r\n 'disabled': this.state === 'disabled',\r\n 'checkbox': this.type === 'checkbox',\r\n [this.type]: true,\r\n }}\r\n role=\"option\"\r\n aria-selected={this.selected ? 'true' : 'false'}\r\n aria-disabled={this.state === 'disabled' ? 'true' : 'false'}\r\n >\r\n <div class=\"content\">\r\n {this.type === 'icon_leading' && (\r\n <svg id=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M5.48131 12.9013C4.30234 13.6034 1.21114 15.0368 3.09388 16.8305C4.01359 17.7067 5.03791 18.3334 6.32572 18.3334H13.6743C14.9621 18.3334 15.9864 17.7067 16.9061 16.8305C18.7889 15.0368 15.6977 13.6034 14.5187 12.9013C11.754 11.2551 8.24599 11.2551 5.48131 12.9013Z\"\r\n stroke=\"#4B5565\"\r\n stroke-width=\"1.5\"\r\n />\r\n <path\r\n d=\"M13.75 5.41669C13.75 7.48776 12.0711 9.16669 10 9.16669C7.92893 9.16669 6.25 7.48776 6.25 5.41669C6.25 3.34562 7.92893 1.66669 10 1.66669C12.0711 1.66669 13.75 3.34562 13.75 5.41669Z\"\r\n stroke=\"#4B5565\"\r\n stroke-width=\"1.5\"\r\n />\r\n </svg>\r\n )}\r\n {this.type === 'avatar_leading' && (\r\n <gb-avatar class=\"avatar-icon\" size=\"xs\" color={this.color} text={true}>\r\n <slot name=\"initials\" slot=\"initials\"></slot>\r\n </gb-avatar>\r\n )}\r\n {this.type === 'dot_leading' && (\r\n <>\r\n {this.state === 'default' ? (\r\n <svg id=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 10 10\" fill=\"none\">\r\n <circle cx=\"5\" cy=\"5\" r=\"4\" fill=\"#17B26A\" />\r\n </svg>\r\n ) : (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\r\n <circle cx=\"5\" cy=\"5\" r=\"4\" fill=\"#EEF2F6\" />\r\n </svg>\r\n )}\r\n </>\r\n )}\r\n {this.type === 'checkbox' && <gb-checkbox class=\"checkbox\" size=\"md\" type=\"checkbox\" state={this.state} checked={this.selected}></gb-checkbox>}\r\n <slot name=\"name\"></slot>\r\n {this.supportingText && (\r\n <span>\r\n <slot name=\"supporting_text\"></slot>\r\n </span>\r\n )}\r\n </div>\r\n {this.selected && this.type !== 'checkbox' && (\r\n <div class={`tick`}>\r\n {this.state !== 'disabled' ? (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" class={`${this.state}`}>\r\n <path\r\n d=\"M4.16669 12.0834C4.16669 12.0834 5.41669 12.0834 7.08335 15C7.08335 15 11.7157 7.36115 15.8334 5.83337\"\r\n stroke=\"#075DB2\"\r\n stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n ) : (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M4.16669 12.0834C4.16669 12.0834 5.41669 12.0834 7.08335 15C7.08335 15 11.7157 7.36115 15.8334 5.83337\"\r\n stroke=\"#CDD5DF\"\r\n stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n </div>\r\n );\r\n }\r\n}","@import './../../global/global.css';\r\n:host{\r\n position: relative;\r\n}\r\n\r\n.input_container,\r\n.input_with_label{\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--spacing-2);\r\n}\r\n\r\n.label{\r\n color: var(--color-text, #4B5565);\r\n}\r\n\r\n.hint_text{\r\n color: var(--color-text-subtle, #697586);\r\n}\r\n\r\n.error_text{\r\n color: var(--color-text-danger, #B51726);\r\n}\r\n\r\n.content{\r\n width: 100%;\r\n height: 100%;\r\n border: none;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n color: var(--color-text, #4B5565);\r\n}\r\n\r\n.content::placeholder,\r\n.input_like::placeholder{\r\n color: var(--color-text-disabled, #CDD5DF);\r\n}\r\n\r\n.content:focus,\r\n.input_like:focus{\r\n outline: none;\r\n}\r\n\r\n.icon{\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.input{\r\n display: flex;\r\n align-items: center;\r\n gap: var(--spacing-2);\r\n align-self: stretch;\r\n border-radius: var(--rounded-sm);\r\n}\r\n\r\n.input,\r\n.input.icon_leading,\r\n.password_input{\r\n border: 1px solid var(--color-border-input, #CDD5DF);\r\n background: var(--color-background-card, #FFFFFF);\r\n}\r\n\r\n.input.leading_text{\r\n flex-grow: 1;\r\n border-radius: var(--rounded-none, 0rem) 0.5rem 0.5rem var(--rounded-none, 0rem);\r\n}\r\n\r\n.leading_text_input{\r\n display: flex;\r\n gap: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n}\r\n\r\n\r\n\r\n.add_on{\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n border: 1px solid var(--color-border-input, #CDD5DF);\r\n border-right: none;\r\n padding: var(--spacing-2) var(--spacing-3);\r\n border-radius: 0.5rem var(--rounded-none) var(--rounded-none) 0.5rem;\r\n}\r\n\r\n.text_input{\r\n flex-grow: 1;\r\n height: 100%;\r\n}\r\n\r\n.trailing_button_text_input, .leading_dropdown_text_input{\r\n display: flex;\r\n flex-grow: 1;\r\n gap: var(--spacing-2);\r\n}\r\n\r\n.trailing_button_text_input.sm,\r\n.trailing_button_text_input.md{\r\n padding: var(--spacing-none) 0 0 var(--spacing-3);\r\n}\r\n\r\n.input.trailing_button.sm.default,\r\n.input.trailing_button.md.default{\r\n padding: 0;\r\n}\r\n\r\n.leading_dropdown_dropdown, .trailing_dropdown_dropdown{\r\n display: flex;\r\n align-items: center;\r\n gap: var(--spacing-1);\r\n cursor: pointer;\r\n}\r\n\r\n.dropdown_arrow{\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.tick{\r\n width: 1.25rem;\r\n height: 1.25rem;\r\n}\r\n\r\n.help_circle{\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n/* .input.tags{\r\n position: relative;\r\n} */\r\n\r\n/* Size Styles */\r\n.input.sm{\r\n min-height: 2.5rem;\r\n}\r\n\r\n.input.md{\r\n min-height: 3rem;\r\n}\r\n\r\n.input.sm.default,\r\n.input.sm.password_icon_leading{\r\n padding: var(--spacing-none) var(--spacing-3);\r\n}\r\n\r\n.input.sm.icon_leading{\r\n position: relative;\r\n padding: var(--spacing-none) var(--spacing-2) var(--spacing-none) var(--spacing-3);\r\n}\r\n\r\n.input.sm.payment_input{\r\n padding: var(--spacing-none) var(--spacing-3);\r\n}\r\n\r\n.input.md.default{\r\n padding: var(--spacing-none) 0.875rem var(--spacing-none) var(--spacing-3);\r\n}\r\n\r\n.input.md.icon_leading{\r\n position: relative;\r\n padding: var(--spacing-none) var(--spacing-2) var(--spacing-none) var(--spacing-3);\r\n}\r\n\r\n.input.md.password_icon_leading{\r\n padding: var(--spacing-none) var(--spacing-2) var(--spacing-none) var(--spacing-3);\r\n}\r\n\r\n.input.md.payment_input{\r\n padding: 0 0.875rem 0 var(--spacing-3);\r\n}\r\n\r\n/* State Styles */\r\n.input:focus-within,\r\n.password_input:focus-within,\r\n.count_text_input:focus-within,\r\n.input_like_parent:focus-within{\r\n border: 1.3px solid var(--color-border-selected, #075DB2);\r\n}\r\n\r\n.input.disabled,\r\n.password_input.disabled,\r\n.count_text_input.disabled,\r\n.action.disabled,\r\n.input_like_parent.disabled{\r\n border: 1px solid var(--color-border-disabled, #E3E8EF);\r\n}\r\n\r\n.input.disabled,\r\n.content.disabled,\r\n.password_input.disabled,\r\n.count_text_input.disabled,\r\n.input_like_parent.disabled,\r\n.input_like.disabled{\r\n background: var(--color-background-disabled, #F6F8FA);\r\n color: var(--color-text-subtle, #697586); \r\n cursor: not-allowed;\r\n pointer-events: none;\r\n}\r\n\r\n.input_group.disabled{\r\n cursor: not-allowed;\r\n pointer-events: none;\r\n}\r\n\r\n.icon.disabled path[stroke]{\r\n stroke: var(--color-icon-disabled, #CDD5DF);\r\n}\r\n\r\n.input.destructive,\r\n.input.icon_leading.destructive,\r\n.count_text_input.destructive,\r\n.input_like_parent.destructive{\r\n border: 1px solid var(--color-border-danger, #B51726); \r\n}\r\n\r\n::slotted([slot=\"tooltip_label\"]){\r\n white-space: nowrap;\r\n color: var(--color-text, #4B5565);\r\n}\r\n\r\n::slotted([slot=\"tooltip_supporting_text\"]){\r\n min-width: fit-content;\r\n max-width: 18.5rem;\r\n color: var(--color-text-subtle, #697586);\r\n margin-top: 5rem;\r\n}\r\n\r\n::slotted([slot=\"text\"].text_slot){\r\n color: var(--color-text, #4B5565);\r\n}\r\n\r\n::slotted([slot=\"text\"].text_slot.disabled){\r\n color: var(--color-text-disabled, #CDD5DF);\r\n}\r\n\r\n/* Type Styles */\r\n.password_input{\r\n display: flex;\r\n gap: var(--spacing-3);\r\n align-items: center;\r\n align-self: stretch;\r\n border-radius: var(--rounded-sm);\r\n}\r\n\r\n.password_content{\r\n display: flex;\r\n gap: var(--spacing-2);\r\n padding: 0.625rem var(--spacing-none) 0.625rem 0.875rem;\r\n flex-grow: 1;\r\n}\r\n\r\n.dropdown{\r\n padding-right: var(--spacing-half);\r\n padding-left: var(--spacing-3);\r\n}\r\n\r\n.password_icon_leading_content{\r\n display: flex;\r\n align-items: center;\r\n flex-grow: 1;\r\n gap: var(--spacing-2);\r\n}\r\n\r\n.count_input{\r\n display: flex;\r\n gap: var(--spacing-none);\r\n}\r\n\r\n.count_text_input{\r\n display: flex;\r\n padding: var(--spacing-none) var(--spacing-3);\r\n align-items: center;\r\n gap: var(--spacing-2);\r\n flex: 1 0 0;\r\n align-self: stretch;\r\n border: 1px solid var(--color-border-input, #CDD5DF);\r\n border-radius: 0.5rem var(--rounded-none) var(--rounded-none) 0.5rem;\r\n}\r\n\r\n.action{\r\n border: 1px solid var(--color-border-input, #CDD5DF);\r\n border-left: none;\r\n display: flex;\r\n /* padding-right: var(--spacing-1); */\r\n align-items: center;\r\n gap: var(--spacing-none);\r\n align-self: stretch;\r\n border-radius: var(--rounded-none) 0.5rem 0.5rem var(--rounded-none);\r\n}\r\n\r\n/* hr{\r\n height: 100%;\r\n border-right: 0.5px solid var(--color-border-input, #CDD5DF);\r\n} */\r\n\r\n.vertical_line{\r\n width: 1px;\r\n height: 100%;\r\n background-color: var(--color-border-input, #CDD5DF);\r\n /* border-right: 1px solid var(--color-border-input, #CDD5DF); */\r\n}\r\n\r\n.trailing_dropdown_content{\r\n display: flex;\r\n align-items: center;\r\n flex-grow: 1;\r\n gap: var(--spacing-2);\r\n}\r\n\r\n.country_icon{\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.dropdown_menu{\r\n display: flex;\r\n width: fit-content;\r\n padding: var(--spacing-none);\r\n flex-direction: column;\r\n align-items: flex-start;\r\n align-items: stretch;\r\n border-radius: var(--rounded-sm);\r\n border: 1px solid var(--color-border-subtler, #E3E8EF);\r\n background: var(--color-surface, #FFFFFF);\r\n box-shadow: var(--shadow-sm);\r\n position: absolute;\r\n z-index: 10;\r\n gap: var(--spacing-none);\r\n}\r\n\r\n.dropdown_menu.leading_dropdown.top.sm{\r\n bottom: 3rem;\r\n left: 0;\r\n}\r\n\r\n.dropdown_menu.leading_dropdown.top.md{\r\n bottom: 3.5rem;\r\n left: 0;\r\n}\r\n\r\n.dropdown_menu.leading_dropdown.bottom.sm{\r\n top: 4rem;\r\n left: 0;\r\n}\r\n\r\n.dropdown_menu.leading_dropdown.bottom.md{\r\n top: 4.5rem;\r\n left: 0;\r\n}\r\n\r\n.dropdown_menu.trailing_dropdown.top.sm{\r\n bottom: 3rem;\r\n right: 0;\r\n}\r\n\r\n.dropdown_menu.trailing_dropdown.top.md{\r\n bottom: 3.5rem;\r\n right: 0;\r\n}\r\n\r\n.dropdown_menu.trailing_dropdown.bottom.sm{\r\n top: 4rem;\r\n right: 0;\r\n}\r\n\r\n.dropdown_menu.trailing_dropdown.bottom.md{\r\n top: 4.5rem;\r\n right: 0;\r\n}\r\n\r\n/* Input Tags Styles */\r\n.input_group {\r\n --height: auto;\r\n --inputheight: 4.5rem;\r\n --weight: 100%;\r\n /* flex-direction: row-reverse; */\r\n display: flex;\r\n flex-direction: column;\r\n position: relative;\r\n}\r\n\r\n.input_like_parent {\r\n border: 1px solid var(--color-border-input, #CDD5DF);\r\n border-radius: var(--rounded-sm);\r\n display: flex;\r\n cursor: pointer;\r\n /* flex-wrap: wrap; */\r\n}\r\n\r\n.input_like_parent.sm{\r\n padding: 0.5rem 0.75rem 0.5rem var(--spacing-3);\r\n}\r\n\r\n.input_like_parent.md{\r\n padding: 0.625rem 0.875rem 0.625rem var(--spacing-3);\r\n}\r\n\r\n.input_field{\r\n display: flex;\r\n gap: var(--spacing-2);\r\n align-items: center;\r\n}\r\n\r\n.hidden-span {\r\n visibility: hidden;\r\n position: absolute;\r\n max-width: 100%;\r\n white-space: pre; /* Preserves spaces */\r\n}\r\n\r\n.input_like {\r\n border: none;\r\n color: var(--color-text, #4B5565);\r\n}\r\n\r\n.results_display {\r\n display: flex;\r\n flex-wrap: wrap;\r\n position: relative;\r\n gap: 0.5rem;\r\n background-color: var(--color-surface, #FFFFFF);\r\n}\r\n\r\n.results_display.disabled{\r\n background: var(--color-background-disabled, #F6F8FA);\r\n}\r\n\r\n.tags{\r\n padding-top: 1rem;\r\n}\r\n\r\n.dropdown_list.show {\r\n display: block;\r\n}\r\n\r\n.tags_dropdown_menu{\r\n display: flex;\r\n min-width: 100%;\r\n width: fit-content;\r\n max-height: 15rem;\r\n padding: var(--spacing-none);\r\n flex-direction: column;\r\n align-items: stretch;\r\n border-radius: var(--rounded-sm);\r\n border: 1px solid var(--color-border-subtler, #E3E8EF);\r\n background: var(--color-surface, #FFFFFF);\r\n box-shadow: var(--shadow-sm);\r\n position: absolute;\r\n z-index: 99999;\r\n gap: var(--spacing-none);\r\n transition: 1s ease-in-out;\r\n overflow-y: auto;\r\n\r\n}\r\n\r\n.tags_dropdown_menu.top{\r\n bottom: 105%;\r\n}\r\n\r\n.tags_dropdown_menu.bottom{\r\n top: 105%;\r\n}\r\n\r\n.input_close_button{\r\n position: absolute;\r\n z-index: 9999;\r\n}\r\n\r\n.input_close_button.sm{\r\n right: 0.2rem;\r\n top: 0.15rem;\r\n}\r\n\r\n.input_close_button.md{\r\n right: 0.3rem;\r\n top: 0.25rem;\r\n}","import { Component, Prop, h, State, Event, EventEmitter, Fragment, Element, getAssetPath, Watch, Listen } 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})\r\nexport class GbInputField {\r\n @Prop() size: GeneralSizes;\r\n @Prop() type: InputFieldTypes;\r\n @Prop({ mutable: true }) destructive: boolean = false;\r\n @Prop() state: 'default' | 'filled' | 'active' | 'disabled';\r\n @Prop() showLabel: boolean = false;\r\n @Prop() label: string = '';\r\n @Prop() showHintText: boolean = false;\r\n @Prop() hintText: string = '';\r\n @Prop() errorText: string = '';\r\n @Prop() showPlaceholder: boolean = false;\r\n @Prop() placeholder: string = '';\r\n @Prop() showHelpIcon: boolean = false;\r\n @Prop() showValidation: boolean = false;\r\n @Prop() showCountryIcon: boolean = true;\r\n @Prop() iconSwap?: string;\r\n @Prop({ mutable: true }) showCloseButton?: boolean = false;\r\n @Prop({ mutable: true }) options: string[] = ['USD', 'NGN', 'CAD'];\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 @State() inputValue: string = '';\r\n @State() tags: string[] = [];\r\n @State() leadingIconSvg: string = '';\r\n @State() isPasswordVisible: boolean = false;\r\n @State() showDropdown: boolean = false;\r\n @State() selectedItem: string = '';\r\n @State() selectedItems: any[] = [];\r\n @State() unselectedItems: any[] = [];\r\n @State() paddingLeft: string = '1rem';\r\n @State() paddingTop: string = '0rem';\r\n @State() dropdownOpen: boolean = false;\r\n @State() show: boolean = false;\r\n @State() showSpinner: boolean = false;\r\n @Event() inputValueChanged: EventEmitter<any>;\r\n @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 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.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 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.value = 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 } 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 this.inputValueChanged.emit(this.selectedItems);\r\n }\r\n // this.results = [];\r\n // this.showDropdown = false;\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 // .then(() => {\r\n // console.log('Copied to clipboard');\r\n // })\r\n // .catch(err => {\r\n // console.error('Failed to copy: ', err);\r\n // });\r\n }\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 if (this.inputValue) {\r\n this.showCloseButton = true;\r\n } else {\r\n this.showCloseButton = false;\r\n }\r\n this.inputValueChanged.emit(this.inputValue);\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 change\r\n if (newOptions.length > 0 && !this.selectedItem) {\r\n this.selectedItem = newOptions[0];\r\n }\r\n }\r\n\r\n isItemSelected(option) {\r\n return this.selectedItem === option;\r\n }\r\n\r\n isTagItemSelected(item) {\r\n // return this.selectedStaff.some(i => i.name === item.name);\r\n\r\n const isObject = typeof item === 'object';\r\n return this.selectedItems.some(i => (isObject ? i.objectName === item.objectName : i === item));\r\n }\r\n\r\n handleItemSelect(option) {\r\n // For other types, allow only one selection\r\n this.selectedItem = option;\r\n this.showDropdown = false; // Close the dropdown\r\n }\r\n\r\n componentWillLoad() {\r\n // this.selectedItem = this.options[0];\r\n\r\n\r\n if (this.options && this.options.length > 0) {\r\n this.selectedItem = this.options[0]; // Set the first item as default\r\n }\r\n\r\n 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 if (this.value.length > 0) {\r\n this.selectedItems = [];\r\n this.unselectedItems = [];\r\n\r\n // Separate objects from primitive values\r\n const objectValues = this.value.filter(val => typeof val === 'object' && val !== null);\r\n const primitiveValues = this.value.filter(val => typeof val !== 'object');\r\n\r\n // Find selected items\r\n this.selectedItems = this.results.filter(item => {\r\n if (typeof item === 'object' && item !== null) {\r\n return objectValues.some(val => val.objectName === item.objectName);\r\n } else {\r\n return primitiveValues.includes(item);\r\n }\r\n });\r\n\r\n // Find unselected items\r\n this.unselectedItems = this.results.filter(item => {\r\n if (typeof item === 'object' && item !== null) {\r\n return !objectValues.some(val => val.objectName === item.objectName);\r\n } else {\r\n return !primitiveValues.includes(item);\r\n }\r\n });\r\n } else {\r\n // If value array is empty, all items are unselected\r\n this.selectedItems = [];\r\n this.unselectedItems = [...this.results];\r\n }\r\n\r\n // console.log('Selected Items:', this.selectedItems);\r\n // console.log('Unselected Items:', this.unselectedItems);\r\n }\r\n\r\n componentDidLoad() {\r\n const mainTextSlot = this.el.querySelector('[slot=\"tooltip_label\"]');\r\n const supportingTextSlot = this.el.querySelector('[slot=\"tooltip_supporting_text\"]');\r\n const textSlot = this.el.querySelector('[slot=\"text\"]');\r\n\r\n if (mainTextSlot) {\r\n mainTextSlot.classList.add('text-xs-semi-bold');\r\n }\r\n\r\n if (supportingTextSlot) {\r\n supportingTextSlot.classList.add('text-xs-regular');\r\n }\r\n\r\n if (textSlot) {\r\n textSlot.classList.add('text_slot');\r\n\r\n if (this.state === 'disabled') {\r\n textSlot.classList.add('disabled');\r\n }\r\n\r\n textSlot.classList.add('text-md-regular');\r\n }\r\n\r\n if (this.type === 'tags') {\r\n document.addEventListener('click', this.handleClickOutside);\r\n }\r\n // this.inputElement.addEventListener('input', this.handleTagInput.bind(this));\r\n this.updateInputWidth();\r\n }\r\n\r\n updateInputWidth() {\r\n if (this.hiddenSpan) {\r\n const input = this.el.shadowRoot.querySelector('input') as HTMLInputElement;\r\n\r\n // Update input width based on span's width or use minimum width\r\n const calculatedWidth = Math.max(this.hiddenSpan.offsetWidth + 10, this.minWidth);\r\n input.style.width = `${calculatedWidth}px`;\r\n }\r\n }\r\n\r\n handleWrapperClick() {\r\n this.inputElement.focus(); // Focus the input field\r\n }\r\n\r\n // disconnectedCallback() {\r\n // document.removeEventListener('click', this.handleClickOutside);\r\n // this.inputElement.removeEventListener('input', this.handleTagInput.bind(this));\r\n // }\r\n\r\n render() {\r\n return (\r\n <div class={`input_container`}>\r\n <div class={`input_with_label`}>\r\n {this.showLabel && <p class=\"label text-sm-medium\">{this.label.charAt(0).toUpperCase() + this.label.slice(1).toLowerCase()}</p>}\r\n {this.type === 'default' && [\r\n <div class={`input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}`}>\r\n <input\r\n class={`content text-md-regular ${this.type} ${this.state}`}\r\n type=\"text\"\r\n placeholder={this.placeholder ? this.placeholder : ''}\r\n onInput={event => this.handleInput(event)}\r\n value={this.value}\r\n />\r\n <>\r\n {this.showValidation && (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" class=\"tick\">\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 <gb-help-tooltip show-supporting-text={true}>\r\n <slot name=\"tooltip_label\" slot=\"label\"></slot>\r\n <slot name=\"tooltip_supporting_text\" slot=\"supporting_text\"></slot>\r\n </gb-help-tooltip>\r\n ) : (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z\"\r\n stroke=\"#B51726\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n )}\r\n </div>\r\n )}\r\n </>\r\n </div>,\r\n ]}\r\n {this.type === 'icon_leading' && [\r\n <div class={`input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}`}>\r\n <div class={`icon ${this.size} ${this.state}`} innerHTML={this.leadingIconSvg}></div>\r\n <input\r\n class={`content text-md-regular ${this.type} ${this.state}`}\r\n type=\"text\"\r\n placeholder={this.placeholder ? this.placeholder : ''}\r\n onInput={event => this.handleInput(event)}\r\n value={this.value}\r\n ref={el => (this.inputRef = el as HTMLInputElement)}\r\n />\r\n <>\r\n {this.showValidation && !this.destructive && (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" class=\"tick\">\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 <gb-help-tooltip show-supporting-text={true}>\r\n <slot name=\"tooltip_label\" slot=\"label\"></slot>\r\n <slot name=\"tooltip_supporting_text\" slot=\"supporting_text\"></slot>\r\n </gb-help-tooltip>\r\n ) : (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z\"\r\n stroke=\"#B51726\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n )}\r\n </div>\r\n )}\r\n {this.showCloseButton && !this.destructive && (\r\n <gb-button\r\n size={this.size}\r\n hierarchy=\"tertiary_gray\"\r\n icon=\"only\"\r\n state=\"default\"\r\n icon-leading={true}\r\n icon-leading-swap=\"assets/cancel-01.svg\"\r\n onClick={() => this.clearInput()}\r\n class={`input_close_button ${this.size}`}\r\n ></gb-button>\r\n )}\r\n </>\r\n </div>,\r\n ]}\r\n {this.type === 'leading_dropdown' && [\r\n <div class={`input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}`}>\r\n <div class={`leading_dropdown_dropdown`} onClick={() => (this.showDropdown = !this.showDropdown)}>\r\n {this.showCountryIcon && (\r\n <div class={`country_icon`}>\r\n <img src=\"build/assets/NG.svg\" alt=\"\" />\r\n </div>\r\n )}\r\n <div class={`dropdown_text`}>\r\n <p class=\"text-md-regular\" style={{ color: 'var(--color-text, #4B5565)' }}>\r\n {this.selectedItem}\r\n </p>\r\n </div>\r\n <div class={`dropdown_arrow`}>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M15 7.50004C15 7.50004 11.3176 12.5 9.99996 12.5C8.68237 12.5 5 7.5 5 7.5\"\r\n stroke=\"#4B5565\"\r\n stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n </div>\r\n <div class={`leading_dropdown_text_input`}>\r\n <input\r\n class={`content text-md-regular ${this.type} ${this.state}`}\r\n type=\"text\"\r\n placeholder={this.placeholder ? this.placeholder : ''}\r\n onInput={event => this.handleInput(event)}\r\n value={this.value}\r\n />\r\n {this.showValidation && !this.destructive && (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"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 <gb-help-tooltip show-supporting-text={true}>\r\n <slot name=\"tooltip_label\" slot=\"label\"></slot>\r\n <slot name=\"tooltip_supporting_text\" slot=\"supporting_text\"></slot>\r\n </gb-help-tooltip>\r\n ) : (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z\"\r\n stroke=\"#B51726\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n </div>,\r\n <>\r\n {this.showDropdown && (\r\n <div class={`dropdown_menu ${this.type} ${this.size} ${this.menuPosition}`} ref={el => (this.dropdownRef = el)}>\r\n {this.options.map(option => (\r\n <gb-input-dropdown-menu-item type=\"default\" state={StateEnum.Default} selected={this.isItemSelected(option)} onClick={() => this.handleItemSelect(option)}>\r\n <p slot=\"name\">{option}</p>\r\n </gb-input-dropdown-menu-item>\r\n ))}\r\n </div>\r\n )}\r\n </>,\r\n ]}\r\n {this.type === 'trailing_dropdown' && [\r\n <div class={`input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}`}>\r\n <div class={`trailing_dropdown_content`}>\r\n <p class=\"text-md-regular\" style={{ color: 'var(--color-text, #4B5565)' }}>\r\n $\r\n </p>\r\n <input\r\n class={`content text-md-regular ${this.type} ${this.state}`}\r\n type=\"text\"\r\n placeholder={this.placeholder ? this.placeholder : ''}\r\n onInput={event => this.handleInput(event)}\r\n value={this.value}\r\n />\r\n {this.showHelpIcon && (\r\n <div class={`help_circle`}>\r\n {!this.destructive ? (\r\n <gb-help-tooltip show-supporting-text={true}>\r\n <slot name=\"tooltip_label\" slot=\"label\"></slot>\r\n <slot name=\"tooltip_supporting_text\" slot=\"supporting_text\"></slot>\r\n </gb-help-tooltip>\r\n ) : (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z\"\r\n stroke=\"#B51726\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n <div class={`trailing_dropdown_dropdown`} onClick={() => (this.showDropdown = !this.showDropdown)}>\r\n <div class={`dropdown_text`}>\r\n <p class=\"text-md-regular\" style={{ color: 'var(--color-text, #4B5565)' }}>\r\n {this.selectedItem}\r\n </p>\r\n </div>\r\n <div class={`dropdown_arrow`}>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M15 7.50004C15 7.50004 11.3176 12.5 9.99996 12.5C8.68237 12.5 5 7.5 5 7.5\"\r\n stroke=\"#4B5565\"\r\n stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>,\r\n <>\r\n {this.showDropdown && (\r\n <div class={`dropdown_menu ${this.type} ${this.size} ${this.menuPosition}`} ref={el => (this.dropdownRef = el)}>\r\n {this.options.map(option => (\r\n <gb-input-dropdown-menu-item type=\"default\" state={StateEnum.Default} selected={this.isItemSelected(option)} onClick={() => this.handleItemSelect(option)}>\r\n <p slot=\"name\">{option}</p>\r\n </gb-input-dropdown-menu-item>\r\n ))}\r\n </div>\r\n )}\r\n </>,\r\n ]}\r\n {this.type === 'leading_text' && [\r\n <div class=\"leading_text_input\">\r\n <div class={`add_on`}>\r\n {/* <p class={`text-md-regular`} style={{ color: this.state === 'disabled' ? 'var(--color-text-disabled, #CDD5DF)' : 'var(--color-text, #4B5565)' }}>\r\n http://\r\n </p> */}\r\n <slot name=\"text\"></slot>\r\n </div>\r\n <div class={`input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}`}>\r\n <input\r\n class={`content text-md-regular ${this.type} ${this.state}`}\r\n type=\"text\"\r\n placeholder={this.placeholder ? this.placeholder : ''}\r\n onInput={event => this.handleInput(event)}\r\n value={this.value}\r\n />\r\n {this.showValidation && !this.destructive && (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"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 <gb-help-tooltip show-supporting-text={true}>\r\n <slot name=\"tooltip_label\" slot=\"label\"></slot>\r\n <slot name=\"tooltip_supporting_text\" slot=\"supporting_text\"></slot>\r\n </gb-help-tooltip>\r\n ) : (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z\"\r\n stroke=\"#B51726\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n </div>,\r\n ]}\r\n {this.type === 'payment_input' && (\r\n <div class={`input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}`}>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"23\" height=\"14\" viewBox=\"0 0 23 14\" fill=\"none\">\r\n <path\r\n fill-rule=\"evenodd\"\r\n clip-rule=\"evenodd\"\r\n d=\"M11.179 11.8294C9.99493 12.8275 8.45902 13.43 6.78069 13.43C3.03582 13.43 0 10.4303 0 6.72997C0 3.02966 3.03582 0.0299683 6.78069 0.0299683C8.45902 0.0299683 9.99493 0.632466 11.179 1.63051C12.363 0.632466 13.8989 0.0299683 15.5773 0.0299683C19.3221 0.0299683 22.358 3.02966 22.358 6.72997C22.358 10.4303 19.3221 13.43 15.5773 13.43C13.8989 13.43 12.363 12.8275 11.179 11.8294Z\"\r\n fill=\"#ED0006\"\r\n />\r\n <path\r\n fill-rule=\"evenodd\"\r\n clip-rule=\"evenodd\"\r\n d=\"M11.179 11.8294C12.6369 10.6005 13.5614 8.77192 13.5614 6.72997C13.5614 4.68801 12.6369 2.85941 11.179 1.63051C12.363 0.632465 13.8989 0.0299683 15.5772 0.0299683C19.3221 0.0299683 22.3579 3.02966 22.3579 6.72997C22.3579 10.4303 19.3221 13.43 15.5772 13.43C13.8989 13.43 12.363 12.8275 11.179 11.8294Z\"\r\n fill=\"#F9A000\"\r\n />\r\n <path\r\n fill-rule=\"evenodd\"\r\n clip-rule=\"evenodd\"\r\n d=\"M11.179 11.8294C12.6369 10.6005 13.5614 8.77193 13.5614 6.72999C13.5614 4.68805 12.6369 2.85946 11.179 1.63055C9.72109 2.85946 8.79663 4.68805 8.79663 6.72999C8.79663 8.77193 9.72109 10.6005 11.179 11.8294Z\"\r\n fill=\"#FF5E00\"\r\n />\r\n </svg>\r\n <input\r\n class={`content text-md-regular ${this.type} ${this.state}`}\r\n type=\"text\"\r\n placeholder={this.placeholder ? this.placeholder : ''}\r\n onInput={event => this.handleInput(event)}\r\n value={this.value}\r\n />\r\n <>\r\n {this.showValidation && !this.destructive && (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"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 <gb-help-tooltip show-supporting-text={true}>\r\n <slot name=\"tooltip_label\" slot=\"label\"></slot>\r\n <slot name=\"tooltip_supporting_text\" slot=\"supporting_text\"></slot>\r\n </gb-help-tooltip>\r\n ) : (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z\"\r\n stroke=\"#B51726\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n )}\r\n </div>\r\n )}\r\n </>\r\n </div>\r\n )}\r\n {this.type === 'trailing_button' && (\r\n <div class={`input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}`}>\r\n <div class={`trailing_button_text_input ${this.size}`}>\r\n <input\r\n class={`content text-md-regular ${this.type} ${this.state}`}\r\n type=\"text\"\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 />\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 <gb-help-tooltip show-supporting-text={true}>\r\n <slot name=\"tooltip_label\" slot=\"label\"></slot>\r\n <slot name=\"tooltip_supporting_text\" slot=\"supporting_text\"></slot>\r\n </gb-help-tooltip>\r\n ) : (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z\"\r\n stroke=\"#B51726\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n <gb-button\r\n size=\"lg\"\r\n hierarchy=\"tertiary_gray\"\r\n icon=\"only\"\r\n state={this.state === 'disabled' ? 'disabled' : 'default'}\r\n icon-leading={true}\r\n icon-leading-swap=\"assets/copy-01.svg\"\r\n onClick={() => this.copyToClipboard()}\r\n ></gb-button>\r\n </div>\r\n )}\r\n {this.type === 'password' && (\r\n <div class={`password_input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}`}>\r\n <div class={`password_content`}>\r\n <input\r\n class={`content text-md-regular ${this.type} ${this.state}`}\r\n type={this.isPasswordVisible ? 'text' : 'password'}\r\n placeholder={this.placeholder ? this.placeholder : ''}\r\n onInput={event => this.handleInput(event)}\r\n />\r\n {this.showValidation && !this.destructive && (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"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 <gb-help-tooltip show-supporting-text={true}>\r\n <slot name=\"tooltip_label\" slot=\"label\"></slot>\r\n <slot name=\"tooltip_supporting_text\" slot=\"supporting_text\"></slot>\r\n </gb-help-tooltip>\r\n ) : (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z\"\r\n stroke=\"#B51726\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n <div class={`dropdown`}>\r\n <gb-password-button onClick={() => this.togglePasswordVisibility()}></gb-password-button>\r\n </div>\r\n </div>\r\n )}\r\n {this.type === 'password_icon_leading' && (\r\n <div class={`password_icon_leading_input input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}`}>\r\n <div class={`password_icon_leading_content`}>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M12.0759 12.1667C11.6617 12.1667 11.3259 12.5025 11.3259 12.9167C11.3259 13.3309 11.6617 13.6667 12.0759 13.6667V12.1667ZM12.0833 13.6667C12.4976 13.6667 12.8333 13.3309 12.8333 12.9167C12.8333 12.5025 12.4976 12.1667 12.0833 12.1667V13.6667ZM7.91668 12.1667C7.50246 12.1667 7.16668 12.5025 7.16668 12.9167C7.16668 13.3309 7.50246 13.6667 7.91668 13.6667V12.1667ZM7.92415 13.6667C8.33836 13.6667 8.67415 13.3309 8.67415 12.9167C8.67415 12.5025 8.33836 12.1667 7.92415 12.1667V13.6667ZM16.4435 10.1294L17.1868 10.0293L16.4435 10.1294ZM13.7003 7.58258L13.7347 6.83337L13.7003 7.58258ZM13.7003 18.2508L13.7347 19L13.7003 18.2508ZM16.4435 15.704L15.7002 15.6039L16.4435 15.704ZM6.29973 7.58258L6.33417 8.33179L6.29973 7.58258ZM3.55652 10.1294L2.81323 10.0293L3.55652 10.1294ZM6.29973 18.2508L6.33417 17.5015L6.29973 18.2508ZM3.55652 15.704L4.29981 15.6039L3.55652 15.704ZM5.50001 7.5C5.50001 7.91422 5.8358 8.25 6.25001 8.25C6.66422 8.25 7.00001 7.91422 7.00001 7.5H5.50001ZM13 7.5C13 7.91422 13.3358 8.25 13.75 8.25C14.1642 8.25 14.5 7.91422 14.5 7.5H13ZM12.0759 13.6667H12.0833V12.1667H12.0759V13.6667ZM7.91668 13.6667H7.92415V12.1667H7.91668V13.6667ZM10 17.5833C8.69057 17.5833 7.50287 17.5553 6.33417 17.5015L6.26528 19C7.45761 19.0548 8.66829 19.0833 10 19.0833V17.5833ZM13.6659 17.5015C12.4972 17.5553 11.3094 17.5833 10 17.5833V19.0833C11.3317 19.0833 12.5424 19.0548 13.7347 19L13.6659 17.5015ZM17.1868 15.804C17.3105 14.8853 17.4167 13.9152 17.4167 12.9167H15.9167C15.9167 13.8142 15.8211 14.7058 15.7002 15.6039L17.1868 15.804ZM17.4167 12.9167C17.4167 11.9181 17.3105 10.948 17.1868 10.0293L15.7002 10.2295C15.8211 11.1275 15.9167 12.0192 15.9167 12.9167H17.4167ZM10 8.25C11.3095 8.25 12.4972 8.27806 13.6659 8.33179L13.7347 6.83337C12.5424 6.77856 11.3317 6.75 10 6.75V8.25ZM6.33417 8.33179C7.50287 8.27806 8.69057 8.25 10 8.25V6.75C8.66829 6.75 7.45761 6.77856 6.26528 6.83337L6.33417 8.33179ZM2.81323 10.0293C2.68953 10.948 2.58334 11.9181 2.58334 12.9167H4.08334C4.08334 12.0192 4.1789 11.1275 4.29981 10.2295L2.81323 10.0293ZM2.58334 12.9167C2.58334 13.9152 2.68953 14.8853 2.81323 15.804L4.29981 15.6039C4.1789 14.7058 4.08334 13.8142 4.08334 12.9167H2.58334ZM17.1868 10.0293C16.9527 8.29067 15.5122 6.91509 13.7347 6.83337L13.6659 8.33179C14.6943 8.37907 15.5595 9.18437 15.7002 10.2295L17.1868 10.0293ZM13.7347 19C15.5122 18.9183 16.9527 17.5427 17.1868 15.804L15.7002 15.6039C15.5595 16.649 14.6943 17.4543 13.6659 17.5015L13.7347 19ZM6.26528 6.83337C4.48781 6.91508 3.04732 8.29067 2.81323 10.0293L4.29981 10.2295C4.44052 9.18437 5.30576 8.37907 6.33417 8.33179L6.26528 6.83337ZM6.33417 17.5015C5.30576 17.4543 4.44052 16.649 4.29981 15.6039L2.81323 15.804C3.04732 17.5427 4.48782 18.9183 6.26528 19L6.33417 17.5015ZM7.00001 7.5V5.41667H5.50001V7.5H7.00001ZM13 5.41667V7.5H14.5V5.41667H13ZM10 2.41667C11.6569 2.41667 13 3.75981 13 5.41667H14.5C14.5 2.93139 12.4853 0.916668 10 0.916668V2.41667ZM7.00001 5.41667C7.00001 3.75981 8.34316 2.41667 10 2.41667V0.916668C7.51473 0.916668 5.50001 2.93139 5.50001 5.41667H7.00001Z\"\r\n fill=\"#4B5565\"\r\n />\r\n </svg>\r\n <input\r\n class={`content text-md-regular ${this.type} ${this.state}`}\r\n type={this.isPasswordVisible ? 'text' : 'password'}\r\n placeholder={this.placeholder ? this.placeholder : ''}\r\n onInput={event => this.handleInput(event)}\r\n />\r\n </div>\r\n {this.showValidation && !this.destructive && (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"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 <gb-help-tooltip show-supporting-text={true}>\r\n <slot name=\"tooltip_label\" slot=\"label\"></slot>\r\n <slot name=\"tooltip_supporting_text\" slot=\"supporting_text\"></slot>\r\n </gb-help-tooltip>\r\n ) : (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z\"\r\n stroke=\"#B51726\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n )}\r\n </div>\r\n )}\r\n <gb-password-button onClick={() => this.togglePasswordVisibility()}></gb-password-button>\r\n </div>\r\n )}\r\n {this.type === 'count' && [\r\n <div class={`count_input`}>\r\n <div class={`count_text_input ${this.destructive ? 'destructive' : ''} ${this.state}`}>\r\n <input\r\n class={`content text-md-regular ${this.type} ${this.state}`}\r\n type=\"text\"\r\n placeholder={this.placeholder ? this.placeholder : ''}\r\n onInput={event => this.handleInput(event)}\r\n value={this.value}\r\n />\r\n {this.showHelpIcon && (\r\n <div class={`help_circle`}>\r\n {!this.destructive ? (\r\n <gb-help-tooltip show-supporting-text={true}>\r\n <slot name=\"tooltip_label\" slot=\"label\"></slot>\r\n <slot name=\"tooltip_supporting_text\" slot=\"supporting_text\"></slot>\r\n </gb-help-tooltip>\r\n ) : (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z\"\r\n stroke=\"#B51726\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n <div class={`action ${this.state}`}>\r\n <gb-button\r\n size=\"xl\"\r\n state={this.state === 'disabled' ? 'disabled' : 'default'}\r\n hierarchy=\"tertiary_gray\"\r\n icon=\"only\"\r\n icon-leading=\"true\"\r\n icon-leading-swap=\"assets/minus_sign.svg\"\r\n ></gb-button>\r\n {/* <hr /> */}\r\n <div class=\"vertical_line\"></div>\r\n <gb-button\r\n size=\"xl\"\r\n state={this.state === 'disabled' ? 'disabled' : 'default'}\r\n hierarchy=\"tertiary_gray\"\r\n icon=\"only\"\r\n icon-leading=\"true\"\r\n icon-leading-swap=\"assets/plus_sign.svg\"\r\n ></gb-button>\r\n </div>\r\n </div>,\r\n ]}\r\n {this.type === 'tags' && (\r\n <div class={`input_group ${this.state}`} ref={el => (this.inputGroupElement = el as HTMLDivElement)} onClick={() => this.handleWrapperClick()}>\r\n <div class={`input_like_parent ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}`} onClick={() => (this.dropdownOpen = !this.dropdownOpen)}>\r\n {/* ${this.selectedStaff.length >= 1 ? 'show_results' : ''} */}\r\n <div class={`results_display ${this.state === 'disabled' ? 'disabled' : ''}`} ref={el => (this.resultsDisplayElement = el as HTMLDivElement)}>\r\n {this.value.length === 0 ? (\r\n <>\r\n {this.selectedItems.map((item, index) => (\r\n <>\r\n {typeof item === 'object' ? (\r\n <gb-tag size=\"sm\" action=\"X_close\" icon={this.icon ? this.icon : 'avatar'} onClick={() => this.handleTagRemove(index)}>\r\n <h1 class=\"text-xxs-semi-bold\" slot=\"initials\">\r\n {item.objectName.split(' ').map(part => part.charAt(0).toUpperCase())}\r\n </h1>\r\n <p>{item.objectName.split(' ')[0]}</p>\r\n </gb-tag>\r\n ) : (\r\n <gb-tag size=\"sm\" action=\"X_close\" icon={this.icon ? this.icon : 'avatar'} onClick={() => this.handleTagRemove(index)}>\r\n <p>{item}</p>\r\n </gb-tag>\r\n )}\r\n </>\r\n ))}\r\n </>\r\n ) : (\r\n <>\r\n {this.value.map((val, index) => (\r\n <>\r\n {typeof val === 'object' ? (\r\n <gb-tag size=\"sm\" action=\"X_close\" icon={this.icon ? this.icon : 'avatar'} onClick={() => this.handleTagRemove(index)}>\r\n <h1 class=\"text-xxs-semi-bold\" slot=\"initials\">\r\n {val.objectName.split(' ').map(part => part.charAt(0).toUpperCase())}\r\n </h1>\r\n <p>{val.objectName.split(' ')[0]}</p>\r\n </gb-tag>\r\n ) : (\r\n <gb-tag size=\"sm\" action=\"X_close\" icon={this.icon ? this.icon : 'avatar'} onClick={() => this.handleTagRemove(index)}>\r\n <p>{val}</p>\r\n </gb-tag>\r\n )}\r\n </>\r\n ))}\r\n </>\r\n )}\r\n <span class=\"hidden-span\" ref={el => (this.hiddenSpan = el as HTMLElement)}>\r\n {this.inputValue || ' '}\r\n </span>\r\n <div class=\"input_field\">\r\n <input\r\n id={this.idOfInput}\r\n class={`input_like text-md-regular ${this.state}`}\r\n type=\"text\"\r\n // placeholder={this.placeholder && this.selectedStaff.length === 0 ? this.placeholder : ''}\r\n value={this.inputValue}\r\n readOnly={this.isReadOnly}\r\n ref={el => (this.inputElement = el as HTMLInputElement)}\r\n onBlur={() => this.exportSelectedStaff()}\r\n onInput={event => this.handleTagInput(event)}\r\n />\r\n </div>\r\n </div>\r\n {/* {this.showValidation && !this.destructive && (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M4.16675 12.0833C4.16675 12.0833 5.41675 12.0833 7.08341 15C7.08341 15 11.7158 7.36112 15.8334 5.83334\"\r\n stroke=\"#079455\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n )}\r\n {this.showHelpIcon && (\r\n <div class={`help_circle`}>\r\n {!this.destructive ? (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M6.66668 5.99998C6.66668 5.2636 7.26363 4.66665 8.00001 4.66665C8.73639 4.66665 9.33334 5.2636 9.33334 5.99998C9.33334 6.26541 9.25578 6.51273 9.12209 6.72051C8.72361 7.33976 8.00001 7.93027 8.00001 8.66665V8.99998M7.99467 11.3333H8.00066M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00001 14.6666C4.31811 14.6666 1.33334 11.6819 1.33334 7.99998C1.33334 4.31808 4.31811 1.33331 8.00001 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z\"\r\n stroke=\"#697586\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n ) : (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z\"\r\n stroke=\"#B51726\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n )}\r\n </div>\r\n )} */}\r\n </div>\r\n {this.showDropdown && (\r\n <div class={`tags_dropdown_menu ${this.show ? 'show' : ''} ${this.menuPosition}`}>\r\n {this.results.map(item => (\r\n <gb-input-dropdown-menu-item\r\n type=\"checkbox\"\r\n supporting-text={true}\r\n state={StateEnum.Default}\r\n onClick={() => this.selectDropdownItem(item)}\r\n selected={this.isTagItemSelected(item)}\r\n >\r\n {typeof item === 'object'\r\n ? [<p slot=\"name\">{item.objectName}</p>, <p slot=\"supporting_text\">{item.objectValue}</p>]\r\n : typeof item !== 'object' && <p slot=\"name\">{item}</p>}\r\n </gb-input-dropdown-menu-item>\r\n ))}\r\n </div>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n {this.showHintText && <>{!this.destructive ? <p class=\"hint_text text-sm-regular\">{this.hintText}</p> : <p class=\"error_text text-sm-regular\">{this.errorText}</p>}</>}\r\n </div>\r\n );\r\n }\r\n}\r\n","@import './../../global/global.css';\r\n\r\n:host{\r\n display: flex;\r\n align-items: center;\r\n height: 100%;\r\n}\r\n\r\ndiv {\r\n display: inline-flex;\r\n align-items: flex-start;\r\n}","import { Component, h, Prop, State } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'gb-password-button',\r\n styleUrl: 'gb-password-button.css',\r\n shadow: true\r\n})\r\nexport class GbPasswordButton {\r\n @State() isPasswordVisible: boolean = false;\r\n @Prop() state: 'default' | 'disabled';\r\n\r\n togglePasswordVisibility() {\r\n this.isPasswordVisible = !this.isPasswordVisible;\r\n }\r\n\r\n render() {\r\n return (\r\n <div>\r\n <gb-btn size=\"sm\" hierarchy=\"link_gray\" state=\"default\" onClick={() => this.togglePasswordVisibility()}>\r\n {this.isPasswordVisible ? (\r\n <gb-button size=\"sm\" hierarchy=\"tertiary_gray\" icon=\"default\" state={this.state}>\r\n <p>HIDE</p>\r\n </gb-button>\r\n ) : (\r\n <gb-button size=\"sm\" hierarchy=\"tertiary_gray\" icon=\"default\" state={this.state}>\r\n <p>SHOW</p>\r\n </gb-button>\r\n )}\r\n </gb-btn>\r\n </div>\r\n );\r\n }\r\n}\r\n","@import './../../global/global.css';\r\n\r\n/* 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.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(--color-icon-inverse, #FFFFFF);\r\n}\r\n\r\n.application_icon.colored_background path[fill] {\r\n fill: var(--color-icon-inverse, #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(--color-text-inverse, #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}","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 @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 applicationName.classList.add('text-lg-bold');\r\n }\r\n\r\n componentWillLoad() {\r\n this.loadIcon(this.iconInstance);\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' && <>{this.category === 'plain_background' ? <img src={blueLogoSrc} /> : <img src={whiteLogoSrc} />}</>}\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 <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 </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}","@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}\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.icon{\r\n display: flex;\r\n align-items: center;\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(--color-background-information-bold, #042F59);\r\n}\r\n\r\n.nav_item_base.default.colored_background:hover{\r\n background: var(--color-blanket, 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(--color-text-inverse, #FFFFFF);\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/* 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}","import { Component, h, Prop, Fragment, getAssetPath, State, Event, EventEmitter, Element } 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\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() textState: any;\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 this.leadingIconSvg = svg;\r\n }\r\n\r\n componentWillLoad() {\r\n this.loadIcon(this.icon);\r\n // this.textState = this.state === 'active' ? 'text-md-semi-bold' : 'text-md-medium';\r\n }\r\n\r\n onSideBarItemClicked() {\r\n this.sideBarItemClicked.emit();\r\n }\r\n\r\n // getLabel() {\r\n // const slottedLabel = this.el.querySelector('slot');\r\n // return slottedLabel.textContent;\r\n // }\r\n\r\n render() {\r\n const redBarSrc = getAssetPath(`assets/bar.svg`);\r\n const whiteBarSrc = getAssetPath(`assets/bar_white.svg`);\r\n\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' && 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=\"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.textarea_container{\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--spacing-2);\r\n}\r\n\r\n.input_with_label{\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--spacing-2);\r\n}\r\n\r\n.textarea{\r\n border: 1px solid var(--color-border-input, #CDD5DF);\r\n border-radius: var(--rounded-sm);\r\n padding: 0.75rem 0.875rem;\r\n font-family: var(--font-family-body);\r\n resize: none;\r\n width: 15rem; /* Remove later */\r\n min-height: 7.5rem;\r\n overflow: visible;\r\n}\r\n\r\n.textarea::placeholder{\r\n color: var(--color-text-subtle, #697586);\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.textarea_tags{\r\n --weight: fit-content;\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.textarea.tags{\r\n display: flex;\r\n}\r\n\r\n.input_like,\r\n.results_display{\r\n height: fit-content;\r\n}\r\n\r\n.input_like{\r\n border: none;\r\n font-family: var(--font-family-body);\r\n}\r\n\r\n.input_like:focus{\r\n outline: none;\r\n}\r\n\r\n.input_like.disabled{\r\n background: var(--color-background-disabled, #F6F8FA);\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;\r\n}\r\n\r\n/* State Styles */\r\n.textarea:focus-within{\r\n border: 1.3px solid var(--color-border-selected, #075DB2);\r\n outline-color: transparent;\r\n}\r\n\r\n.textarea.destructive{\r\n border: 1px solid var(--color-border-danger, #B51726);\r\n}\r\n\r\n.textarea.disabled{\r\n background: var(--color-background-gray-subtlest, #F6F8FA);\r\n border: 1px solid var(--color-border-disabled, #E3E8EF);\r\n cursor: not-allowed;\r\n pointer-events: none;\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.hint_text.destructive{\r\n color: var(--color-border-danger, #B51726);\r\n}\r\n\r\n.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 top: 105%;\r\n}","import { Component, Element, Prop, State, h, Fragment, Event, EventEmitter, Listen } from '@stencil/core';\r\nimport { StateEnum } from '../../models/reusableModels';\r\n\r\n@Component({\r\n tag: 'gb-textarea-input-field',\r\n styleUrl: 'gb-textarea-input-field.css',\r\n shadow: true,\r\n})\r\nexport class GbTextareaInputField {\r\n @Prop() type: 'default' | 'tags';\r\n @Prop({ mutable: true }) state: 'default' | 'filled' | 'active' | 'disabled';\r\n @Prop() destructive: boolean = false;\r\n @Prop() placeholderText: string = '';\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({ reflect: true }) idOfInput!: string;\r\n @Prop({ reflect: true }) isReadOnly: boolean = 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 { objectName: 'Gideon Ogunkola', objectValue: 'gideon@example.com' },\r\n ];\r\n @Prop() icon: 'country' | 'avatar' | 'dot' | '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 @Element() el: HTMLElement;\r\n @State() content: string = '';\r\n @State() inputValue: string = '';\r\n @State() selectedStaff: any[] = [];\r\n @State() paddingLeft: string = '1rem';\r\n @State() paddingTop: string = '0rem';\r\n @State() show: boolean = false;\r\n @State() staffInfo: any[] = [];\r\n @State() selectedItems: any[] = [];\r\n @State() unselectedItems: any[] = [];\r\n @Event() textareaValueChanged: EventEmitter<any[]>;\r\n\r\n private textarea!: HTMLTextAreaElement;\r\n inputElement!: HTMLInputElement;\r\n resultsDisplayElement!: HTMLDivElement;\r\n private hiddenSpan: HTMLElement;\r\n private minWidth: number = 10;\r\n\r\n componentDidLoad() {\r\n if (this.type === 'tags') {\r\n document.addEventListener('click', this.handleClickOutside);\r\n }\r\n\r\n this.inputElement.addEventListener('input', this.handleTagInput.bind(this));\r\n\r\n this.updateInputWidth();\r\n }\r\n\r\n disconnectedCallback() {\r\n this.inputElement.removeEventListener('input', this.handleTagInput.bind(this));\r\n }\r\n\r\n handleInput() {\r\n this.textarea.style.height = 'auto'; // Reset height to calculate the new height\r\n this.textarea.style.height = `${this.textarea.scrollHeight - 22}px`; // Set the height to the scrollHeight\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.textareaValueChanged.emit(this.selectedItems);\r\n\r\n if (this.inputValue.trim() === '') {\r\n this.show = false;\r\n // this.results = [];\r\n return;\r\n }\r\n\r\n // Simulate API call\r\n setTimeout(() => {\r\n // this.results = this.mockStaffSearch(this.inputValue);\r\n this.show = this.results.length > 0;\r\n }, 1000);\r\n\r\n this.updateInputWidth();\r\n }\r\n\r\n emitInputValue() {\r\n this.textareaValueChanged.emit(this.selectedItems);\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 this.updateStyles();\r\n this.emitInputValue();\r\n } else {\r\n this.selectedItems = [...this.selectedItems.slice(0, index), ...this.selectedItems.slice(index + 1)];\r\n this.updateStyles();\r\n this.emitInputValue();\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 mockStaffSearch(query: string) {\r\n const mockData = this.results;\r\n\r\n return mockData.filter(staff => staff.objectName.toLowerCase().includes(query.toLowerCase()));\r\n }\r\n\r\n selectStaff(staff: any) {\r\n this.selectedStaff = [...this.selectedStaff, staff];\r\n this.inputValue = '';\r\n this.staffInfo = [];\r\n this.updateStyles();\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 selectDropdownItem(item: any) {\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 } 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.textareaValueChanged.emit(this.selectedItems);\r\n }\r\n // this.results = [];\r\n // this.showDropdown = false;\r\n this.updateStyles();\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 @Listen('click', { target: 'document' })\r\n handleClickOutside(event: MouseEvent) {\r\n if (this.show && !this.el.contains(event.target as Node)) {\r\n this.show = false;\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <div class=\"textarea_container\">\r\n <div class=\"input_with_label\">\r\n {this.showLabel && <p class={`label text-sm-medium`}>{this.label}</p>}\r\n {this.type === 'default' && (\r\n <textarea\r\n ref={el => (this.textarea = el as HTMLTextAreaElement)}\r\n onInput={() => this.handleInput()}\r\n class={`textarea ${this.state} ${this.destructive ? 'destructive' : ''}`}\r\n placeholder={this.placeholderText}\r\n ></textarea>\r\n )}\r\n {this.type === 'tags' && (\r\n <div class=\"textarea_tags\">\r\n <div class={`textarea ${this.type} ${this.state} ${this.destructive ? 'destructive' : ''}`} onClick={() => this.handleWrapperClick()}>\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 <div class=\"added_tag\" key={index}>\r\n <gb-tag size=\"sm\" icon={this.icon ? this.icon : 'avatar'} action=\"X_close\" onClick={() => this.handleTagRemove(index)}>\r\n <p class=\"text-xs-medium\">{item.name.split(' ')[0]}</p>\r\n <h1 slot=\"initials\" class=\"text-xxs-semi-bold\">\r\n {item.name\r\n .split(' ')\r\n .map(part => part.charAt(0).toUpperCase())\r\n .join('')}\r\n </h1>\r\n </gb-tag>\r\n </div>\r\n ) : (\r\n <div class=\"added_tag\" key={index}>\r\n <gb-tag size=\"sm\" icon={this.icon ? this.icon : 'avatar'} action=\"X_close\" onClick={() => this.handleTagRemove(index)}>\r\n <p class=\"text-xs-medium\">{item}</p>\r\n </gb-tag>\r\n </div>\r\n )}\r\n </>\r\n ))}\r\n </>\r\n ) : (\r\n <>\r\n {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)} key={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)} key={index}>\r\n <p>{val}</p>\r\n </gb-tag>\r\n )}\r\n </>\r\n ))}\r\n </>\r\n )}\r\n <span class=\"hidden-span\" ref={el => (this.hiddenSpan = el as HTMLElement)}>\r\n {this.inputValue || ' '}\r\n </span>\r\n <div class=\"input_field\">\r\n <input\r\n id={this.idOfInput}\r\n class={`input_like text-md-regular ${this.state}`}\r\n type=\"text\"\r\n // placeholder={this.placeholderText}\r\n value={this.inputValue}\r\n readOnly={this.isReadOnly}\r\n ref={el => (this.inputElement = el as HTMLInputElement)}\r\n onBlur={() => this.emitInputValue()}\r\n />\r\n </div>\r\n </div>\r\n {this.destructive && (\r\n <div class=\"help_icon\">\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.9947 10H8.00069M8.00004 8.00004V5.33337M14.6667 8.00004C14.6667 11.6819 11.6819 14.6667 8.00004 14.6667C4.31814 14.6667 1.33337 11.6819 1.33337 8.00004C1.33337 4.31814 4.31814 1.33337 8.00004 1.33337C11.6819 1.33337 14.6667 4.31814 14.6667 8.00004Z\"\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 </div>\r\n )}\r\n </div>\r\n {this.show && (\r\n <div class={`dropdown_menu`}>\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 && <p class={`hint_text text-sm-regular ${this.destructive ? 'destructive' : ''}`}>{this.hintText}</p>}\r\n </div>\r\n );\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 white-space: nowrap;\r\n color: var(--color-text, #4B5565);\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 @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 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}"],"mappings":"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","ignoreList":[]}