globuswebcomponents 2.4.9 → 2.5.0

package/dist/collection/components/gb-header/gb-header.js

@@ -3,12 +3,16 @@ import { StateEnum } from "../../models/reusableModels";
 export class GbHeader {
     constructor() {
         this.showIndicator = false;
-        this.text = false;
+        this.text = true;
         this.placeholder = false;
-        this.showBorder = false;
+        this.color = 'blue';
+        this.showBorder = true;
         this.showNotification = false;
         this.showHelp = false;
         this.showLogo = false;
+        this.showSearch = false;
+        this.inputPlaceholder = '';
+        this.inputIcon = '';
     }
     applyColorToInitials() {
         switch (this.color) {
@@ -28,6 +32,9 @@ export class GbHeader {
                 return 'yellow';
         }
     }
+    onSearch(item) {
+        this.inputValueChanged.emit(item.detail);
+    }
     componentDidLoad() {
         const initials = this.el.querySelector("[slot='initials']");
         if (initials) {
@@ -48,7 +55,7 @@ export class GbHeader {
         const notificationIconSrc = getAssetPath(`assets/notification-03.svg`);
         const logo = getAssetPath(`assets/globus_bank_logo_blue.svg`);
         const iconLogo = getAssetPath(`assets/globus_bank_logo_white.svg`);
-        return (h("div", { key: 'cc8e5f7e68a676ea97a9659c5679a59b4b2fc2e9', class: `header_div` }, h("div", { key: 'db288392549fdef6ff04278936d46f821f1d44c0', class: "content" }, this.showLogo && (h(Fragment, null, h("div", { key: '58bf6ac3e0bd991d052aa5520f76ff022265b1dd', class: "logo", onClick: () => this.onNavBarItemClicked('logo') }, h("img", { key: '662a3942e0970fe04b6479a27b0e63d2fc4da329', src: logo, alt: "" })), h("div", { key: 'abadbd301df3616feb36acfce868ee2d6e662689', class: "icon_logo", onClick: () => this.onNavBarItemClicked('logo') }, h("img", { key: '98b105031e16ba5a35a8aeed7435a54c2e81db1a', src: iconLogo, alt: "" })))), h("div", { key: '8cf93252dbc5e77e6f87ee73f1a8aa28bf51c0d5', class: "inner_content" }, h("div", { key: '16bc1d7575890c3ef8ce65c550b0c53e754469d6', class: `action` }, this.showHelp && h("gb-header-icon", { key: '37bdeb6bfdb750237f89d2c8ff53b60e64db7842', state: StateEnum.Default, icon: helpIconSrc, onClick: () => this.onNavBarItemClicked('help') }), this.showNotification && (h("gb-header-icon", { key: 'b6011ed11ab5e6b3f9b7d0f0564341917adc62b0', state: this.state, icon: notificationIconSrc, "show-indicator": this.showIndicator, onClick: () => this.onNavBarItemClicked('notification') }))), h("gb-avatar", { key: 'd66884897aed7f6789137d1c09fc2ed112f9c772', size: "md", text: this.text, placeholder: this.placeholder, color: this.color, "show-border": this.showBorder, onClick: () => this.onNavBarItemClicked('avatar') }, this.text ? h("slot", { slot: "initials", name: "initials" }) : h("slot", { name: "image", slot: "image" }))))));
+        return (h("div", { key: '2c0ca7eeb74dc062dabc17fa73dacd7cefd9da82', class: `header_div ${this.showBorder ? 'border' : ''}` }, h("div", { key: '6b76298bb5ed6bc869a675ec687726da011cd65c', class: "content" }, this.showLogo && (h(Fragment, null, h("div", { key: 'e82c5f77984dba2d2db9c1adea91d732e1174359', class: "logo", onClick: () => this.onNavBarItemClicked('logo') }, h("img", { key: '2920e861d0d602f3d75b4903a28a41dd4bc45938', src: logo, alt: "" })), h("div", { key: '529ab79d1ec5d1f2459eba38f8a0d7e850211465', class: "icon_logo", onClick: () => this.onNavBarItemClicked('logo') }, h("img", { key: '7d39a86be4899fafd194da3b44f06e73d79b75e8', src: iconLogo, alt: "" })))), h("div", { key: 'b23786e074437815db1f3eba69edd1189364d917', class: "inner_content" }, h("div", { key: 'e3460eb65780baca03682380388c75369a784785', class: `action` }, this.showSearch && (h("div", { key: '299b7c33e24e7f877f83a71a46add441fde903af', class: "search" }, h("gb-input-field", { key: '175651d4ae9dc255395036c8a67483f0978e0a5c', size: "sm", state: "default", type: "icon_leading", placeholder: this.inputPlaceholder, "icon-swap": this.inputIcon, onInputValueChanged: this.onSearch.bind(this) }))), this.showHelp && h("gb-header-icon", { key: 'ffdf0ffb0a97c9b534614ed99130cf529083c508', state: StateEnum.Default, icon: helpIconSrc, onClick: () => this.onNavBarItemClicked('help') }), this.showNotification && (h("gb-header-icon", { key: '35a3d5e8415de7c03f77d7049664a49304204a43', state: this.state, icon: notificationIconSrc, "show-indicator": this.showIndicator, onClick: () => this.onNavBarItemClicked('notification') }))), h("gb-avatar", { key: 'ea0b01636613a25db6476f5540c6b40f4b125a57', size: "md", text: this.text, placeholder: this.placeholder, color: this.color, "show-border": this.showBorder, onClick: () => this.onNavBarItemClicked('avatar') }, this.text ? h("slot", { slot: "initials", name: "initials" }) : h("slot", { name: "image", slot: "image" }))))));
     }
     static get is() { return "gb-header"; }
     static get encapsulation() { return "shadow"; }
@@ -127,7 +134,7 @@ export class GbHeader {
                 "setter": false,
                 "attribute": "text",
                 "reflect": false,
-                "defaultValue": "false"
+                "defaultValue": "true"
             },
             "placeholder": {
                 "type": "boolean",
@@ -172,7 +179,8 @@ export class GbHeader {
                 "getter": false,
                 "setter": false,
                 "attribute": "color",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "'blue'"
             },
             "showBorder": {
                 "type": "boolean",
@@ -192,7 +200,7 @@ export class GbHeader {
                 "setter": false,
                 "attribute": "show-border",
                 "reflect": false,
-                "defaultValue": "false"
+                "defaultValue": "true"
             },
             "showNotification": {
                 "type": "boolean",
@@ -253,6 +261,66 @@ export class GbHeader {
                 "attribute": "show-logo",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "showSearch": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "show-search",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "inputPlaceholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "input-placeholder",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "inputIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "input-icon",
+                "reflect": false,
+                "defaultValue": "''"
             }
         };
     }
@@ -287,6 +355,21 @@ export class GbHeader {
                     "resolved": "void",
                     "references": {}
                 }
+            }, {
+                "method": "inputValueChanged",
+                "name": "inputValueChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
             }];
     }
     static get methods() {

package/dist/collection/components/gb-header/gb-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"gb-header.js","sourceRoot":"","sources":["../../../src/components/gb-header/gb-header.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, getAssetPath, h, Method, Prop, Fragment } from \"@stencil/core\";\r\nimport { ColorTypes, StateEnum } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n  tag: 'gb-header',\r\n  styleUrl: 'gb-header.css',\r\n  shadow: true,\r\n})\r\nexport class GbHeader {\r\n  @Prop() state: StateEnum;\r\n  @Prop() showIndicator: boolean = false;\r\n  @Prop() text: boolean = false;\r\n  @Prop() placeholder: boolean = false;\r\n  @Prop() color: ColorTypes;\r\n  @Prop() showBorder: boolean = false;\r\n  @Prop() showNotification: boolean = false;\r\n  @Prop() showHelp: boolean = false;\r\n  @Prop() showLogo: boolean = false;\r\n  @Element() el: HTMLElement;\r\n  @Event() navBarItemClicked: EventEmitter<string>;\r\n  @Event() menuClicked: EventEmitter<void>;\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  componentDidLoad() {\r\n    const initials = this.el.querySelector(\"[slot='initials']\");\r\n\r\n    if (initials) {\r\n      initials.classList.add('text-md-semi-bold');\r\n      initials.classList.add(this.applyColorToInitials());\r\n    }\r\n  }\r\n\r\n  @Method()\r\n  async onNavBarItemClicked(item: string) {\r\n    // console.log('nav-bar-item clicked');\r\n    this.navBarItemClicked.emit(item);\r\n    // console.log(index);\r\n  }\r\n\r\n  async onMenuClicked() {\r\n    this.menuClicked.emit();\r\n  }\r\n\r\n  render() {\r\n    const helpIconSrc = getAssetPath(`assets/help-circle.svg`);\r\n    const notificationIconSrc = getAssetPath(`assets/notification-03.svg`);\r\n    const logo = getAssetPath(`assets/globus_bank_logo_blue.svg`);\r\n    const iconLogo = getAssetPath(`assets/globus_bank_logo_white.svg`);\r\n\r\n    return (\r\n      <div class={`header_div`}>\r\n        <div class=\"content\">\r\n          {this.showLogo && (\r\n            <>\r\n              <div class=\"logo\" onClick={() => this.onNavBarItemClicked('logo')}>\r\n                <img src={logo} alt=\"\" />\r\n              </div>\r\n              <div class=\"icon_logo\" onClick={() => this.onNavBarItemClicked('logo')}>\r\n                <img src={iconLogo} alt=\"\" />\r\n              </div>\r\n            </>\r\n          )}\r\n          <div class=\"inner_content\">\r\n            <div class={`action`}>\r\n              {this.showHelp && <gb-header-icon state={StateEnum.Default} icon={helpIconSrc} onClick={() => this.onNavBarItemClicked('help')}></gb-header-icon>}\r\n              {this.showNotification && (\r\n                <gb-header-icon\r\n                  state={this.state}\r\n                  icon={notificationIconSrc}\r\n                  show-indicator={this.showIndicator}\r\n                  onClick={() => this.onNavBarItemClicked('notification')}\r\n                ></gb-header-icon>\r\n              )}\r\n            </div>\r\n            <gb-avatar\r\n              size=\"md\"\r\n              text={this.text}\r\n              placeholder={this.placeholder}\r\n              color={this.color}\r\n              show-border={this.showBorder}\r\n              onClick={() => this.onNavBarItemClicked('avatar')}\r\n            >\r\n              {this.text ? <slot slot=\"initials\" name=\"initials\"></slot> : <slot name=\"image\" slot=\"image\"></slot>}\r\n            </gb-avatar>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}"]}
+{"version":3,"file":"gb-header.js","sourceRoot":"","sources":["../../../src/components/gb-header/gb-header.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, getAssetPath, h, Method, Prop, Fragment } from '@stencil/core';\r\nimport { ColorTypes, StateEnum } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-header',\r\n  styleUrl: 'gb-header.css',\r\n  shadow: true,\r\n})\r\nexport class GbHeader {\r\n  @Prop() state: StateEnum;\r\n  @Prop() showIndicator: boolean = false;\r\n  @Prop() text: boolean = true;\r\n  @Prop() placeholder: boolean = false;\r\n  @Prop() color: ColorTypes = 'blue';\r\n  @Prop() showBorder: boolean = true;\r\n  @Prop() showNotification: boolean = false;\r\n  @Prop() showHelp: boolean = false;\r\n  @Prop() showLogo: boolean = false;\r\n  @Prop() showSearch: boolean = false;\r\n  @Prop() inputPlaceholder: string = '';\r\n  @Prop() inputIcon: string = '';\r\n  @Element() el: HTMLElement;\r\n  @Event() navBarItemClicked: EventEmitter<string>;\r\n  @Event() menuClicked: EventEmitter<void>;\r\n  @Event() inputValueChanged: EventEmitter<string>;\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  onSearch(item) {\r\n    this.inputValueChanged.emit(item.detail);\r\n  }\r\n\r\n  componentDidLoad() {\r\n    const initials = this.el.querySelector(\"[slot='initials']\");\r\n\r\n    if (initials) {\r\n      initials.classList.add('text-md-semi-bold');\r\n      initials.classList.add(this.applyColorToInitials());\r\n    }\r\n  }\r\n\r\n  @Method()\r\n  async onNavBarItemClicked(item: string) {\r\n    // console.log('nav-bar-item clicked');\r\n    this.navBarItemClicked.emit(item);\r\n    // console.log(index);\r\n  }\r\n\r\n  async onMenuClicked() {\r\n    this.menuClicked.emit();\r\n  }\r\n\r\n  render() {\r\n    const helpIconSrc = getAssetPath(`assets/help-circle.svg`);\r\n    const notificationIconSrc = getAssetPath(`assets/notification-03.svg`);\r\n    const logo = getAssetPath(`assets/globus_bank_logo_blue.svg`);\r\n    const iconLogo = getAssetPath(`assets/globus_bank_logo_white.svg`);\r\n\r\n    return (\r\n      <div class={`header_div ${this.showBorder ? 'border' : ''}`}>\r\n        <div class=\"content\">\r\n          {this.showLogo && (\r\n            <>\r\n              <div class=\"logo\" onClick={() => this.onNavBarItemClicked('logo')}>\r\n                <img src={logo} alt=\"\" />\r\n              </div>\r\n              <div class=\"icon_logo\" onClick={() => this.onNavBarItemClicked('logo')}>\r\n                <img src={iconLogo} alt=\"\" />\r\n              </div>\r\n            </>\r\n          )}\r\n          <div class=\"inner_content\">\r\n            <div class={`action`}>\r\n              {this.showSearch && (\r\n                <div class=\"search\">\r\n                  <gb-input-field\r\n                    size=\"sm\"\r\n                    state=\"default\"\r\n                    type=\"icon_leading\"\r\n                    placeholder={this.inputPlaceholder}\r\n                    icon-swap={this.inputIcon}\r\n                    onInputValueChanged={this.onSearch.bind(this)}\r\n                  ></gb-input-field>\r\n                </div>\r\n              )}\r\n              {this.showHelp && <gb-header-icon state={StateEnum.Default} icon={helpIconSrc} onClick={() => this.onNavBarItemClicked('help')}></gb-header-icon>}\r\n              {this.showNotification && (\r\n                <gb-header-icon\r\n                  state={this.state}\r\n                  icon={notificationIconSrc}\r\n                  show-indicator={this.showIndicator}\r\n                  onClick={() => this.onNavBarItemClicked('notification')}\r\n                ></gb-header-icon>\r\n              )}\r\n            </div>\r\n            <gb-avatar\r\n              size=\"md\"\r\n              text={this.text}\r\n              placeholder={this.placeholder}\r\n              color={this.color}\r\n              show-border={this.showBorder}\r\n              onClick={() => this.onNavBarItemClicked('avatar')}\r\n            >\r\n              {this.text ? <slot slot=\"initials\" name=\"initials\"></slot> : <slot name=\"image\" slot=\"image\"></slot>}\r\n            </gb-avatar>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/gb-header-icon/gb-header-icon.js

@@ -27,7 +27,7 @@ export class GbHeaderIcon {
         this.loadIcon(this.icon);
     }
     render() {
-        return (h("div", { key: 'd749a9d715f692fb8c8ddbe5246b00c4ceaeb6be', class: `background ${this.state}` }, h("div", { key: '276bc3e223b4fad7e08b6a2cbc216a39283b7be8', class: `icon ${this.state === StateEnum.Default ? 'default' : this.state === StateEnum.Disabled ? 'disabled' : ''}`, innerHTML: this.leadingIconSvg }), h(Fragment, null, this.showIndicator && h("div", { key: '8e314a7e548d54bc410d7b064f1698ae85375aa9', class: "red_dot" }))));
+        return (h("div", { key: 'b24c51bc9a796afa7dc2c97f4ece95762e6746fe', class: `background ${this.state}` }, h("div", { key: 'cc71a8b8fea417f7776efe3c53d6595fab4bb877', class: `icon ${this.state === StateEnum.Default ? 'default' : this.state === StateEnum.Disabled ? 'disabled' : ''}`, innerHTML: this.leadingIconSvg }), h(Fragment, null, this.showIndicator && h("div", { key: '9a4670fbb57844e0411da206b463517799164489', class: "red_dot" }))));
     }
     static get is() { return "gb-header-icon"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-help-dropdown/gb-help-dropdown.js

@@ -4,7 +4,7 @@ export class GbHelpDropdown {
         this.helpItemClicked.emit(item);
     }
     render() {
-        return (h("div", { key: '7fcadc4a9a98dabc747b11e5e501a8355304bc26', class: "dropdown-container" }, h("div", { key: '059d613a12a9d589fc586121b660202046557d68', class: "user_guide" }, h("gb-dropdown-items-with-shortcut", { key: 'f6a9bf0271f459c043a754a55f6c47a32b44675e', icon: true, iconSrc: "assets/book_open.svg", label: "Download user guide", onClick: () => this.onHelpItemClicked('download_user_guide') })), h("div", { key: 'aceb99c8923db1b7308d913090635dee8ab8ad07', class: "bug" }, h("gb-dropdown-items-with-shortcut", { key: '8937359bfbd377df1e469c1cb08dabc0c9f30eb6', icon: true, iconSrc: "assets/bug_02.svg", label: "Report a bug", onClick: () => this.onHelpItemClicked('report_a_bug') })), this.showLogError && (h("div", { key: 'c63c20ce818b1b63d7a6a8f94dc11acade9b2dca', class: "log_error" }, h("gb-dropdown-items-with-shortcut", { key: '9eba7420aa671783f80a52743a44922506093467', icon: true, iconSrc: "assets/alert_02.svg", label: "Log a profile error", onClick: () => this.onHelpItemClicked('log_a_profile_error') })))));
+        return (h("div", { key: '13325a8364fd67f196000203a4cad1b0be7eabeb', class: "dropdown-container" }, h("div", { key: '24e563b5b76b737dfb3ae6439f85d90654e5ace3', class: "user_guide" }, h("gb-dropdown-items-with-shortcut", { key: '5e7566e1ea650c9616dd4aedc9215f8793eb8f65', icon: true, iconSrc: "assets/book_open.svg", label: "Download user guide", onClick: () => this.onHelpItemClicked('download_user_guide') })), h("div", { key: '4485d36a85826ba845c074631c944c8b372495c0', class: "bug" }, h("gb-dropdown-items-with-shortcut", { key: '0932f2cc5dfaade5ac82eacf2460c5aad2606886', icon: true, iconSrc: "assets/bug_02.svg", label: "Report a bug", onClick: () => this.onHelpItemClicked('report_a_bug') })), this.showLogError && (h("div", { key: '2cb82cc1b7745f53584e85aee4a7e26d867cf49f', class: "log_error" }, h("gb-dropdown-items-with-shortcut", { key: 'aaf9778fe80b9bb8e07c33c33a4a02f8267a40b3', icon: true, iconSrc: "assets/alert_02.svg", label: "Log a profile error", onClick: () => this.onHelpItemClicked('log_a_profile_error') })))));
     }
     static get is() { return "gb-help-dropdown"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-help-tooltip/gb-help-tooltip.js

@@ -16,7 +16,7 @@ export class GbHelpTooltip {
         }
     }
     render() {
-        return (h("div", { key: 'db7f02a40c4e000e736553c29242b0380a1690d6', class: `help_tooltip` }, h("svg", { key: '366881509c3de7545bf8a41d99028cd47d6b3e2b', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", onMouseEnter: () => (this.showHelpTooltip = true), onMouseLeave: () => (this.showHelpTooltip = false), class: "help_circle" }, h("path", { key: 'cf59a8c4a5cc84526baa8a78468a3b84156790c7', 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", stroke: "#697586", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })), this.showHelpTooltip && (h("gb-tooltip", { key: 'fadc7d71cb95537e61c0b18e01c78b78025ae82a', "show-arrow": true, arrow: "bottom_right", "show-supporting-text": this.showSupportingText, class: "tooltip" }, h("slot", { key: 'c6a9f83b56cafec79069e6d60c151e26c9e2b460', name: "label", slot: "label" }), h("slot", { key: '38d84d6d109196d91bde442adde22ca1354db82d', name: "supporting_text", slot: "supporting_text" })))));
+        return (h("div", { key: '46e639b628fa3171db9eb6b1919b0cf267dd8687', class: `help_tooltip` }, h("svg", { key: '9e92214b2e45e8991f1ed59234130830f381281e', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", onMouseEnter: () => (this.showHelpTooltip = true), onMouseLeave: () => (this.showHelpTooltip = false), class: "help_circle" }, h("path", { key: '720ce01e2a0a31c933a443bb254bc07793d3b0e4', 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", stroke: "#697586", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })), this.showHelpTooltip && (h("gb-tooltip", { key: '0c4e387157267535cfe9b2b9504b9c83b95d54f6', "show-arrow": true, arrow: "bottom_right", "show-supporting-text": this.showSupportingText, class: "tooltip" }, h("slot", { key: 'f031e63d2b812ee0866739be59b77b33f5c0958c', name: "label", slot: "label" }), h("slot", { key: '7ec6d36918aac60b5f8b4fdda4ce37668967b8a4', name: "supporting_text", slot: "supporting_text" })))));
     }
     static get is() { return "gb-help-tooltip"; }
     static get encapsulation() { return "shadow"; }