globuswebcomponents 0.4.1 → 0.4.2

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 (140) hide show
  1. package/dist/cjs/{gb-avatar_32.cjs.entry.js → gb-avatar_36.cjs.entry.js} +242 -56
  2. package/dist/cjs/gb-avatar_36.cjs.entry.js.map +1 -0
  3. package/dist/cjs/gb-header-icon.cjs.entry.js +34 -0
  4. package/dist/cjs/gb-header-icon.cjs.entry.js.map +1 -0
  5. package/dist/cjs/gb-header.cjs.entry.js +39 -0
  6. package/dist/cjs/gb-header.cjs.entry.js.map +1 -0
  7. package/dist/cjs/gb-token-field.cjs.entry.js +2 -2
  8. package/dist/cjs/gb-token-field.cjs.entry.js.map +1 -1
  9. package/dist/cjs/globuscomponents.cjs.js +1 -1
  10. package/dist/cjs/loader.cjs.js +1 -1
  11. package/dist/cjs/reusableModels-e50f3440.js.map +1 -1
  12. package/dist/collection/components/gb-btn/gb-btn.js +10 -4
  13. package/dist/collection/components/gb-btn/gb-btn.js.map +1 -1
  14. package/dist/collection/components/gb-button/gb-button.js +11 -5
  15. package/dist/collection/components/gb-button/gb-button.js.map +1 -1
  16. package/dist/collection/components/gb-button/gb-button.tsx +3 -3
  17. package/dist/collection/components/gb-button/readme.md +2 -0
  18. package/dist/collection/components/gb-header/gb-header.js +59 -1
  19. package/dist/collection/components/gb-header/gb-header.js.map +1 -1
  20. package/dist/collection/components/gb-input-dropdown/gb-input-dropdown.css +1 -0
  21. package/dist/collection/components/gb-input-field/gb-input-field.css +50 -37
  22. package/dist/collection/components/gb-input-field/gb-input-field.js +63 -3
  23. package/dist/collection/components/gb-input-field/gb-input-field.js.map +1 -1
  24. package/dist/collection/components/gb-megainput-field-base/gb-megainput-field.js +1 -1
  25. package/dist/collection/components/gb-megainput-field-base/gb-megainput-field.js.map +1 -1
  26. package/dist/collection/components/gb-pagination/gb-pagination.js +1 -1
  27. package/dist/collection/components/gb-token-field/gb-token-field.js +3 -3
  28. package/dist/collection/components/gb-token-field/gb-token-field.js.map +1 -1
  29. package/dist/collection/components/gb-verification-code-field/gb-verification-code-field.css +931 -407
  30. package/dist/collection/components/gb-verification-code-field/gb-verification-code-field.js +6 -6
  31. package/dist/collection/components/gb-verification-code-field/gb-verification-code-field.js.map +1 -1
  32. package/dist/collection/models/reusableModels.js.map +1 -1
  33. package/dist/components/gb-btn.js +1 -1
  34. package/dist/components/gb-button.js +2 -2
  35. package/dist/components/gb-checkbox-group-item.js +1 -1
  36. package/dist/components/gb-file-upload-item-base.js +1 -1
  37. package/dist/components/gb-file-upload.js +2 -2
  38. package/dist/components/gb-header.js +8 -2
  39. package/dist/components/gb-header.js.map +1 -1
  40. package/dist/components/gb-input-dropdown.js +1 -1
  41. package/dist/components/gb-input-field.js +26 -7
  42. package/dist/components/gb-input-field.js.map +1 -1
  43. package/dist/components/gb-megainput-field.js +1 -1
  44. package/dist/components/gb-pagination.js +1 -1
  45. package/dist/components/gb-password-button.js +1 -1
  46. package/dist/components/gb-rich-text.js +2 -2
  47. package/dist/components/gb-toast.js +1 -1
  48. package/dist/components/gb-token-field.js +3 -3
  49. package/dist/components/gb-token-field.js.map +1 -1
  50. package/dist/components/gb-verification-code-field.js +7 -7
  51. package/dist/components/gb-verification-code-field.js.map +1 -1
  52. package/dist/components/gb-wysiwyg-toolbar.js +1 -1
  53. package/dist/components/{p-24c9f72a.js → p-03933e89.js} +2 -2
  54. package/dist/components/{p-24c9f72a.js.map → p-03933e89.js.map} +1 -1
  55. package/dist/components/{p-e1f1a988.js → p-2d692da6.js} +3 -3
  56. package/dist/components/{p-e1f1a988.js.map → p-2d692da6.js.map} +1 -1
  57. package/dist/components/{p-95d013c6.js → p-307f7be9.js} +2 -2
  58. package/dist/components/{p-95d013c6.js.map → p-307f7be9.js.map} +1 -1
  59. package/dist/components/p-47052b60.js.map +1 -1
  60. package/dist/components/{p-4979942e.js → p-b1f57acc.js} +2 -2
  61. package/dist/components/{p-4979942e.js.map → p-b1f57acc.js.map} +1 -1
  62. package/dist/components/{p-c0ec5975.js → p-dc3cd550.js} +2 -2
  63. package/dist/components/{p-c0ec5975.js.map → p-dc3cd550.js.map} +1 -1
  64. package/dist/components/{p-fc8afe63.js → p-e832e7d0.js} +5 -5
  65. package/dist/components/{p-fc8afe63.js.map → p-e832e7d0.js.map} +1 -1
  66. package/dist/components/{p-2729bc71.js → p-f5ce57de.js} +2 -2
  67. package/dist/components/p-f5ce57de.js.map +1 -0
  68. package/dist/esm/{gb-avatar_32.entry.js → gb-avatar_36.entry.js} +236 -54
  69. package/dist/esm/gb-avatar_36.entry.js.map +1 -0
  70. package/dist/esm/gb-header-icon.entry.js +30 -0
  71. package/dist/esm/gb-header-icon.entry.js.map +1 -0
  72. package/dist/esm/gb-header.entry.js +35 -0
  73. package/dist/esm/gb-header.entry.js.map +1 -0
  74. package/dist/esm/gb-token-field.entry.js +2 -2
  75. package/dist/esm/gb-token-field.entry.js.map +1 -1
  76. package/dist/esm/globuscomponents.js +1 -1
  77. package/dist/esm/loader.js +1 -1
  78. package/dist/esm/reusableModels-8496e911.js.map +1 -1
  79. package/dist/globuscomponents/gb-button.tsx +3 -3
  80. package/dist/globuscomponents/globuscomponents.esm.js +1 -1
  81. package/dist/globuscomponents/globuscomponents.esm.js.map +1 -1
  82. package/dist/globuscomponents/p-2fa5bdb6.entry.js +2 -0
  83. package/dist/globuscomponents/p-2fa5bdb6.entry.js.map +1 -0
  84. package/dist/globuscomponents/p-47052b60.js.map +1 -1
  85. package/dist/globuscomponents/p-530f2020.entry.js +2 -0
  86. package/dist/globuscomponents/p-530f2020.entry.js.map +1 -0
  87. package/dist/globuscomponents/{p-a8cbbe95.entry.js → p-e51aa524.entry.js} +2 -2
  88. package/dist/globuscomponents/p-e51aa524.entry.js.map +1 -0
  89. package/dist/globuscomponents/{p-e8c4960e.entry.js → p-fdadcae8.entry.js} +2 -2
  90. package/dist/globuscomponents/p-fdadcae8.entry.js.map +1 -0
  91. package/dist/globuscomponents/readme.md +2 -0
  92. package/dist/types/components/gb-btn/gb-btn.d.ts +2 -2
  93. package/dist/types/components/gb-button/gb-button.d.ts +3 -3
  94. package/dist/types/components/gb-header/gb-header.d.ts +3 -0
  95. package/dist/types/components/gb-input-field/gb-input-field.d.ts +10 -2
  96. package/dist/types/components/gb-verification-code-field/gb-verification-code-field.d.ts +1 -1
  97. package/dist/types/components.d.ts +31 -10
  98. package/dist/types/models/reusableModels.d.ts +2 -1
  99. package/package.json +1 -1
  100. package/dist/cjs/gb-avatar-dropdown.cjs.entry.js +0 -35
  101. package/dist/cjs/gb-avatar-dropdown.cjs.entry.js.map +0 -1
  102. package/dist/cjs/gb-avatar-label-group.cjs.entry.js +0 -77
  103. package/dist/cjs/gb-avatar-label-group.cjs.entry.js.map +0 -1
  104. package/dist/cjs/gb-avatar_32.cjs.entry.js.map +0 -1
  105. package/dist/cjs/gb-checkbox.cjs.entry.js +0 -55
  106. package/dist/cjs/gb-checkbox.cjs.entry.js.map +0 -1
  107. package/dist/cjs/gb-dropdown-items-with-shortcut.cjs.entry.js +0 -31
  108. package/dist/cjs/gb-dropdown-items-with-shortcut.cjs.entry.js.map +0 -1
  109. package/dist/cjs/gb-megainput-field.cjs.entry.js +0 -42
  110. package/dist/cjs/gb-megainput-field.cjs.entry.js.map +0 -1
  111. package/dist/cjs/gb-verification-code-field.cjs.entry.js +0 -32
  112. package/dist/cjs/gb-verification-code-field.cjs.entry.js.map +0 -1
  113. package/dist/components/p-2729bc71.js.map +0 -1
  114. package/dist/esm/gb-avatar-dropdown.entry.js +0 -31
  115. package/dist/esm/gb-avatar-dropdown.entry.js.map +0 -1
  116. package/dist/esm/gb-avatar-label-group.entry.js +0 -73
  117. package/dist/esm/gb-avatar-label-group.entry.js.map +0 -1
  118. package/dist/esm/gb-avatar_32.entry.js.map +0 -1
  119. package/dist/esm/gb-checkbox.entry.js +0 -51
  120. package/dist/esm/gb-checkbox.entry.js.map +0 -1
  121. package/dist/esm/gb-dropdown-items-with-shortcut.entry.js +0 -27
  122. package/dist/esm/gb-dropdown-items-with-shortcut.entry.js.map +0 -1
  123. package/dist/esm/gb-megainput-field.entry.js +0 -38
  124. package/dist/esm/gb-megainput-field.entry.js.map +0 -1
  125. package/dist/esm/gb-verification-code-field.entry.js +0 -28
  126. package/dist/esm/gb-verification-code-field.entry.js.map +0 -1
  127. package/dist/globuscomponents/p-18daffd5.entry.js +0 -2
  128. package/dist/globuscomponents/p-18daffd5.entry.js.map +0 -1
  129. package/dist/globuscomponents/p-435d5445.entry.js +0 -2
  130. package/dist/globuscomponents/p-435d5445.entry.js.map +0 -1
  131. package/dist/globuscomponents/p-6be1f290.entry.js +0 -2
  132. package/dist/globuscomponents/p-6be1f290.entry.js.map +0 -1
  133. package/dist/globuscomponents/p-a0c86da9.entry.js +0 -2
  134. package/dist/globuscomponents/p-a0c86da9.entry.js.map +0 -1
  135. package/dist/globuscomponents/p-a8cbbe95.entry.js.map +0 -1
  136. package/dist/globuscomponents/p-e42029f1.entry.js +0 -2
  137. package/dist/globuscomponents/p-e42029f1.entry.js.map +0 -1
  138. package/dist/globuscomponents/p-e6412bc1.entry.js +0 -2
  139. package/dist/globuscomponents/p-e6412bc1.entry.js.map +0 -1
  140. package/dist/globuscomponents/p-e8c4960e.entry.js.map +0 -1
@@ -1 +1 @@
1
- {"version":3,"file":"gb-button.js","sourceRoot":"","sources":["../../../src/components/gb-button/gb-button.tsx"],"names":[],"mappings":"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","sourcesContent":["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 MyButton {\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' | 'hover' | 'disabled' | 'pressed';\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 };\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"]}
1
+ {"version":3,"file":"gb-button.js","sourceRoot":"","sources":["../../../src/components/gb-button/gb-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, getAssetPath, h, Prop, State } from '@stencil/core';\r\nimport { GeneralHierarchies, GeneralSizes, StateEnum } 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: StateEnum;\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 };\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"]}
@@ -1,5 +1,5 @@
1
1
  import { Component, Element, getAssetPath, h, Prop, State } from '@stencil/core';
2
- import { GeneralHierarchies, GeneralSizes } from '../../models/reusableModels';
2
+ import { GeneralHierarchies, GeneralSizes, StateEnum } from '../../models/reusableModels';
3
3
 
4
4
  @Component({
5
5
  tag: 'gb-button',
@@ -7,12 +7,12 @@ import { GeneralHierarchies, GeneralSizes } from '../../models/reusableModels';
7
7
  shadow: true,
8
8
  assetsDirs: [''],
9
9
  })
10
- export class MyButton {
10
+ export class GbButton {
11
11
  @Prop() size: GeneralSizes;
12
12
  @Prop() hierarchy: GeneralHierarchies;
13
13
  @Prop() icon: 'default' | 'only';
14
14
  @Prop() destructive: boolean = false;
15
- @Prop() state: 'default' | 'hover' | 'disabled' | 'pressed';
15
+ @Prop() state: StateEnum;
16
16
  @Prop() iconLeading: boolean = false;
17
17
  @Prop() iconLeadingSwap: string;
18
18
  @Prop() iconTrailing: boolean = false;
@@ -28,6 +28,7 @@
28
28
  - [gb-file-upload-item-base](../gb-file-upload-item-base)
29
29
  - [gb-input-field](../gb-input-field)
30
30
  - [gb-pagination](../gb-pagination)
31
+ - [gb-password-button](../gb-password-button)
31
32
  - [gb-toast](../gb-toast)
32
33
 
33
34
  ### Graph
@@ -37,6 +38,7 @@ graph TD;
37
38
  gb-file-upload-item-base --> gb-button
38
39
  gb-input-field --> gb-button
39
40
  gb-pagination --> gb-button
41
+ gb-password-button --> gb-button
40
42
  gb-toast --> gb-button
41
43
  style gb-button fill:#f9f,stroke:#333,stroke-width:4px
42
44
  ```
@@ -13,10 +13,13 @@ export class GbHeader {
13
13
  initials.classList.add('text-md-semi-bold');
14
14
  }
15
15
  }
16
+ async helpIconClicked() { }
17
+ async notificationIconClicked() { }
18
+ async profileIconClicked() { }
16
19
  render() {
17
20
  const helpIconSrc = getAssetPath(`assets/help-circle.svg`);
18
21
  const notificationIconSrc = getAssetPath(`assets/notification-03.svg`);
19
- return (h("div", { key: 'd622dc60519caf801e7e9437e959fe8870a8fe39', class: `header_div` }, h("div", { key: 'f285b6e756cfed348ebe62f3c9ec3bef302e356d', class: "content" }, h("div", { key: 'd5179a24d292a51191d2d60580c502c413854e4a', class: "inner_content" }, h("gb-header-icon", { key: 'f2ae78eb0784d65b7277225efe6f20e59a975a05', state: StateEnum.Default, icon: helpIconSrc }), h("gb-header-icon", { key: 'daa652b2861ba93a65e8700ac2724e2e980baf2b', state: this.state, icon: notificationIconSrc, "show-indicator": this.showIndicator }), h("gb-avatar", { key: 'dd23d14a9e5039d3f7c5ec7ceeea0d100f7d5d12', size: "md", text: this.text, placeholder: this.placeholder }, this.text ? (h("slot", { slot: "initials", name: "initials" })) : (h("slot", { name: "image", slot: "image" })))))));
22
+ return (h("div", { key: '0699cac516cee147413c49fc0c78928d5fe6972c', class: `header_div` }, h("div", { key: 'b90bf469272842ec9e8dbecd515f355c0b7bd5db', class: "content" }, h("div", { key: '88f31ff1b4bed25e7f3432453b65299c2644d746', class: "inner_content" }, h("gb-header-icon", { key: '5ccff54eb5e456d24530d9a7f6a1fe7429558ddb', state: StateEnum.Default, icon: helpIconSrc, onClick: () => this.helpIconClicked() }), h("gb-header-icon", { key: '074539c3e897fe739eba76f862798da3be31c94a', state: this.state, icon: notificationIconSrc, "show-indicator": this.showIndicator, onClick: () => this.notificationIconClicked() }), h("gb-avatar", { key: 'e7a8d4fb68a63a9217a5be74cffb97ed5cf79ba1', size: "md", text: this.text, placeholder: this.placeholder, onClick: () => this.profileIconClicked() }, this.text ? h("slot", { slot: "initials", name: "initials" }) : h("slot", { name: "image", slot: "image" }))))));
20
23
  }
21
24
  static get is() { return "gb-header"; }
22
25
  static get encapsulation() { return "shadow"; }
@@ -111,6 +114,61 @@ export class GbHeader {
111
114
  }
112
115
  };
113
116
  }
117
+ static get methods() {
118
+ return {
119
+ "helpIconClicked": {
120
+ "complexType": {
121
+ "signature": "() => Promise<void>",
122
+ "parameters": [],
123
+ "references": {
124
+ "Promise": {
125
+ "location": "global",
126
+ "id": "global::Promise"
127
+ }
128
+ },
129
+ "return": "Promise<void>"
130
+ },
131
+ "docs": {
132
+ "text": "",
133
+ "tags": []
134
+ }
135
+ },
136
+ "notificationIconClicked": {
137
+ "complexType": {
138
+ "signature": "() => Promise<void>",
139
+ "parameters": [],
140
+ "references": {
141
+ "Promise": {
142
+ "location": "global",
143
+ "id": "global::Promise"
144
+ }
145
+ },
146
+ "return": "Promise<void>"
147
+ },
148
+ "docs": {
149
+ "text": "",
150
+ "tags": []
151
+ }
152
+ },
153
+ "profileIconClicked": {
154
+ "complexType": {
155
+ "signature": "() => Promise<void>",
156
+ "parameters": [],
157
+ "references": {
158
+ "Promise": {
159
+ "location": "global",
160
+ "id": "global::Promise"
161
+ }
162
+ },
163
+ "return": "Promise<void>"
164
+ },
165
+ "docs": {
166
+ "text": "",
167
+ "tags": []
168
+ }
169
+ }
170
+ };
171
+ }
114
172
  static get elementRef() { return "el"; }
115
173
  }
116
174
  //# sourceMappingURL=gb-header.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"gb-header.js","sourceRoot":"","sources":["../../../src/components/gb-header/gb-header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,YAAY,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC1E,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAOxD,MAAM,OAAO,QAAQ;;;6BAEc,KAAK;oBACd,KAAK;2BACE,KAAK;;IAGpC,gBAAgB;QACd,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;QAE5D,IAAI,QAAQ,EAAE,CAAC;YACb,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;QAC9C,CAAC;IACH,CAAC;IAED,MAAM;QACJ,MAAM,WAAW,GAAG,YAAY,CAAC,wBAAwB,CAAC,CAAC;QAC3D,MAAM,mBAAmB,GAAG,YAAY,CAAC,4BAA4B,CAAC,CAAC;QAEvE,OAAO,CACL,4DAAK,KAAK,EAAE,YAAY;YACtB,4DAAK,KAAK,EAAC,SAAS;gBAClB,4DAAK,KAAK,EAAC,eAAe;oBACxB,uEAAgB,KAAK,EAAE,SAAS,CAAC,OAAO,EAAE,IAAI,EAAE,WAAW,GAAmB;oBAC9E,uEAAgB,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,mBAAmB,oBAAkB,IAAI,CAAC,aAAa,GAAmB;oBACnH,kEAAW,IAAI,EAAC,IAAI,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,IAChE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,YAAM,IAAI,EAAC,UAAU,EAAC,IAAI,EAAC,UAAU,GAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,YAAM,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,GAAQ,CAAC,CAC9F,CACR,CACF,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, getAssetPath, h, Prop } from \"@stencil/core\";\r\nimport { 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 @Element() el: HTMLElement;\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 }\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\r\n return (\r\n <div class={`header_div`}>\r\n <div class=\"content\">\r\n <div class=\"inner_content\">\r\n <gb-header-icon state={StateEnum.Default} icon={helpIconSrc}></gb-header-icon>\r\n <gb-header-icon state={this.state} icon={notificationIconSrc} show-indicator={this.showIndicator}></gb-header-icon>\r\n <gb-avatar size=\"md\" text={this.text} placeholder={this.placeholder}>\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}"]}
1
+ {"version":3,"file":"gb-header.js","sourceRoot":"","sources":["../../../src/components/gb-header/gb-header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,YAAY,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAClF,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAOxD,MAAM,OAAO,QAAQ;;;6BAEc,KAAK;oBACd,KAAK;2BACE,KAAK;;IAGpC,gBAAgB;QACd,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;QAE5D,IAAI,QAAQ,EAAE,CAAC;YACb,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;QAC9C,CAAC;IACH,CAAC;IAGD,KAAK,CAAC,eAAe,KAAI,CAAC;IAG1B,KAAK,CAAC,uBAAuB,KAAI,CAAC;IAGlC,KAAK,CAAC,kBAAkB,KAAI,CAAC;IAE7B,MAAM;QACJ,MAAM,WAAW,GAAG,YAAY,CAAC,wBAAwB,CAAC,CAAC;QAC3D,MAAM,mBAAmB,GAAG,YAAY,CAAC,4BAA4B,CAAC,CAAC;QAEvE,OAAO,CACL,4DAAK,KAAK,EAAE,YAAY;YACtB,4DAAK,KAAK,EAAC,SAAS;gBAClB,4DAAK,KAAK,EAAC,eAAe;oBACxB,uEAAgB,KAAK,EAAE,SAAS,CAAC,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE,GAAmB;oBACrH,uEAAgB,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,mBAAmB,oBAAkB,IAAI,CAAC,aAAa,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,uBAAuB,EAAE,GAAmB;oBAClK,kEAAW,IAAI,EAAC,IAAI,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,kBAAkB,EAAE,IAC1G,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,YAAM,IAAI,EAAC,UAAU,EAAC,IAAI,EAAC,UAAU,GAAQ,CAAC,CAAC,CAAC,YAAM,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,GAAQ,CAC1F,CACR,CACF,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, getAssetPath, h, Method, Prop } from \"@stencil/core\";\r\nimport { 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 @Element() el: HTMLElement;\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 }\r\n }\r\n\r\n @Method()\r\n async helpIconClicked() {}\r\n\r\n @Method()\r\n async notificationIconClicked() {}\r\n\r\n @Method()\r\n async profileIconClicked() {}\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\r\n return (\r\n <div class={`header_div`}>\r\n <div class=\"content\">\r\n <div class=\"inner_content\">\r\n <gb-header-icon state={StateEnum.Default} icon={helpIconSrc} onClick={() => this.helpIconClicked()}></gb-header-icon>\r\n <gb-header-icon state={this.state} icon={notificationIconSrc} show-indicator={this.showIndicator} onClick={() => this.notificationIconClicked()}></gb-header-icon>\r\n <gb-avatar size=\"md\" text={this.text} placeholder={this.placeholder} onClick={() => this.profileIconClicked()}>\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}"]}
@@ -2702,6 +2702,7 @@
2702
2702
  width: 0.625rem;
2703
2703
  height: 0.625rem;
2704
2704
  }
2705
+
2705
2706
  /* State Styles */
2706
2707
  .input_dropdown_div.focused{
2707
2708
  border-color: var(--color-border-selected, #075DB2);
@@ -2739,19 +2739,6 @@ div.md {
2739
2739
  border: 1.3px solid var(--color-border-selected,#075DB2);
2740
2740
  }
2741
2741
 
2742
- .input-wrapper.disabled,
2743
- .leading_text.disabled .text-input {
2744
- border: 1px solid var(--color-border-disabled, #E3E8EF);
2745
- background: var(--color-background-disabled, #F6F8FA);
2746
- pointer-events: none;
2747
- cursor: not-allowed;
2748
- }
2749
-
2750
- .input-wrapper.disabled input,
2751
- .leading_text.disabled input{
2752
- background: var(--color-background-disabled, #F6F8FA);
2753
- }
2754
-
2755
2742
  .content{
2756
2743
  display: flex;
2757
2744
  align-items: center;
@@ -2841,13 +2828,9 @@ select:focus {
2841
2828
  border-radius: 0 var(--rounded-sm) var(--rounded-sm) 0;
2842
2829
  }
2843
2830
 
2844
- .leading_text.destructive .text-input {
2845
- border: 1.5px solid var(--color-border-danger, #B51726);
2846
- }
2847
-
2848
2831
  .trailing_dropdown .dropdown {
2849
2832
  display: flex;
2850
- padding: var(--spacing-Positive-spacing-2, 0.5rem) var(--spacing-Positive-spacing-3, 0.75rem) var(--spacing-Positive-spacing-2, 0.5rem) 0rem;
2833
+ padding: var(--spacing-2) var(--spacing-3) var(--spacing-2) 0;
2851
2834
  justify-content: space-between;
2852
2835
  }
2853
2836
 
@@ -2861,8 +2844,8 @@ select:focus {
2861
2844
 
2862
2845
  .decrease-btn {
2863
2846
  display: flex;
2864
- width: var(--spacing-Positive-spacing-8, 2.5rem);
2865
- height: var(--spacing-Positive-spacing-8, 2.5rem);
2847
+ width: 2.5rem;
2848
+ height: 2.5rem;
2866
2849
  justify-content: center;
2867
2850
  align-items: center;
2868
2851
  border-radius: var(--rounded-none);
@@ -2872,10 +2855,10 @@ select:focus {
2872
2855
  .payment-method {
2873
2856
  display: flex;
2874
2857
  width: 2.125rem;
2875
- height: var(--spacing-Positive-spacing-6, 1.5rem);
2858
+ height: var(--spacing-6);
2876
2859
  justify-content: center;
2877
2860
  align-items: center;
2878
- border-radius: var(--Radius-rounded-xs, 0.25rem);
2861
+ border-radius: var(--rounded-xs);
2879
2862
  border: 1px solid var(--color-border-subtler, #E3E8EF);
2880
2863
  background: var(--color-background-card, #FFFFFF);
2881
2864
  }
@@ -2905,10 +2888,6 @@ input {
2905
2888
  width: 100%;
2906
2889
  }
2907
2890
 
2908
- .input-wrapper.destructive{
2909
- border: 1px solid var(--color-border-danger, #B51726);
2910
- }
2911
-
2912
2891
  .trailing-btn {
2913
2892
  display: flex;
2914
2893
  width: var(--spacing-Positive-spacing-8, 2.5rem);
@@ -2921,14 +2900,6 @@ input {
2921
2900
  margin-left: -5px;
2922
2901
  }
2923
2902
 
2924
- .password_icon_leading .help-icon {
2925
- margin-left: -15px;
2926
- }
2927
-
2928
- .password_icon_leading .help-icon svg {
2929
- padding-right: 5px;
2930
- }
2931
-
2932
2903
  .trailing_dropdown .help-icon svg {
2933
2904
  position: relative;
2934
2905
  left: 5%;
@@ -2939,6 +2910,11 @@ input {
2939
2910
  left: -52%;
2940
2911
  }
2941
2912
 
2913
+ .help-icon{
2914
+ display: flex;
2915
+ align-items: center;
2916
+ }
2917
+
2942
2918
  .help-svg {
2943
2919
  margin-right: 0.4rem;
2944
2920
  }
@@ -2951,11 +2927,48 @@ label{
2951
2927
  color: var(--color-text-subtle, #697586);
2952
2928
  }
2953
2929
 
2930
+ /* Destructive State Styles */
2931
+ .help_icon.destructive{
2932
+ stroke: var(--color-icon-danger, #B51726);
2933
+ }
2934
+
2954
2935
  .hint_text.destructive{
2955
2936
  color: var(--color-text-danger, #B51726);
2956
2937
  }
2957
2938
 
2958
- /* Destructive State Styles */
2959
- .help_icon.destructive{
2960
- stroke: var(--color-icon-danger, #B51726);
2939
+ .input-wrapper.destructive{
2940
+ border: 1px solid var(--color-border-danger, #B51726);
2941
+ }
2942
+
2943
+ .leading_text.destructive .text-input {
2944
+ border: 1.5px solid var(--color-border-danger, #B51726);
2945
+ }
2946
+
2947
+ /* Disabled Styles */
2948
+ .input-wrapper.disabled,
2949
+ .leading_text.disabled .text-input,
2950
+ .input-wrapper.default.disabled {
2951
+ border: 1px solid var(--color-border-disabled, #E3E8EF);
2952
+ background: var(--color-background-disabled, #F6F8FA);
2953
+ pointer-events: none;
2954
+ cursor: not-allowed;
2955
+ }
2956
+
2957
+ .input-wrapper.disabled input,
2958
+ .leading_text.disabled input{
2959
+ background: var(--color-background-disabled, #F6F8FA);
2960
+ }
2961
+
2962
+ .hint_text.disabled{
2963
+ color: var(--color-text-subtle, #697586);
2964
+ }
2965
+
2966
+ .icon_leading_svg.disabled path{
2967
+ stroke: var(--color-icon-disabled, #CDD5DF);
2968
+ }
2969
+
2970
+ .leading_dropdown.disabled select,
2971
+ .trailing_dropdown.disabled select{
2972
+ background: var(--color-background-disabled, #F6F8FA);
2973
+ color: var(--color-text-subtle, #697586);
2961
2974
  }
@@ -16,6 +16,19 @@ export class GbInputField {
16
16
  this.showValidation = false;
17
17
  this.iconSwap = undefined;
18
18
  this.showCloseButton = false;
19
+ this.inputValue = '';
20
+ this.tags = [];
21
+ this.isPasswordVisible = false;
22
+ }
23
+ /* Function to handle and emit the inputted values */
24
+ handleInput(event) {
25
+ const target = event.target;
26
+ this.inputValue = target.value;
27
+ this.valueChanged.emit(this.inputValue);
28
+ }
29
+ /* Function to handle and emit the inputted values */
30
+ togglePasswordVisibility() {
31
+ this.isPasswordVisible = !this.isPasswordVisible;
19
32
  }
20
33
  render() {
21
34
  const iconSwap = this.iconSwap ? getAssetPath(`assets/${this.iconSwap}.svg`) : '';
@@ -25,7 +38,8 @@ export class GbInputField {
25
38
  destructive: this.destructive,
26
39
  disabled: this.state === 'disabled',
27
40
  };
28
- return (h("div", { key: 'b477039734f8e296ff8d0862f3fc0cf7cb0ba6f1', class: classes }, h("div", { key: '01c9d87700c2c17e85c9c1f98fac0e5dcf63f409', class: "input-with-label" }, this.showLabel && (h("label", { key: '26c23cbf808fddaa6f86632e7e2f555e20c2c342', htmlFor: "input", class: "text-sm-medium" }, this.label)), this.type === 'default' && (h("div", { key: '144328a7ad6e9c9786400527dffd39f38d200a5a', class: `input-wrapper ${this.state} ${this.destructive ? 'destructive' : ''}` }, h("input", { key: '9203f7c89aca5d562f069808c7ab6003ce4d86d8', class: `text-md-regular`, placeholder: this.showPlaceholder ? this.placeholderText : '' }), this.showValidation && h("span", { key: 'e4d756e214f597f90d7f882f5d9d5308241027eb' }), this.showHelpIcon && (h(Fragment, null, !this.destructive ? (h("div", { class: "help-icon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { d: "M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z", stroke: "#697586", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))) : (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { 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", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))), this.type === 'icon_leading' && (h("div", { key: '6f6bf87206d5fc970c53b430bdeaa862992a7f14', class: `input-wrapper ${this.state} ${this.destructive ? 'destructive' : ''}` }, h("div", { key: '74f10591d3821248a784973223cb28e344889382', class: "content" }, h("div", { key: '1468bc9eb0bf8bdcee9856b40819450e4623a1e3', class: "icon" }, this.iconSwap ? (h("img", { src: iconSwap, alt: "Icon" })) : (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { d: "M5.83342 7.08334L8.2851 8.53286C9.71443 9.37794 10.2857 9.37794 11.7151 8.53286L14.1668 7.08334M7.58243 2.94713C9.1995 2.9065 10.8007 2.9065 12.4177 2.94713C15.0415 3.01305 16.3534 3.04602 17.296 3.99221C18.2386 4.9384 18.2658 6.21571 18.3203 8.77032C18.3378 9.59172 18.3378 10.4083 18.3203 11.2297C18.2658 13.7843 18.2386 15.0616 17.296 16.0078C16.3533 16.954 15.0415 16.9869 12.4177 17.0529C10.8007 17.0935 9.19951 17.0935 7.58244 17.0529C4.95869 16.9869 3.64682 16.954 2.70421 16.0078C1.76161 15.0616 1.73437 13.7843 1.67989 11.2297C1.66237 10.4083 1.66237 9.59171 1.67989 8.77031C1.73436 6.21569 1.7616 4.93839 2.70421 3.9922C3.64682 3.046 4.95869 3.01304 7.58243 2.94713Z", stroke: "#4B5565", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("input", { key: '2ae863e645337565e0b93e77a54c4608b9ee9dac', class: `text-md-regular`, placeholder: this.showPlaceholder ? this.placeholderText : '', type: "email" })), this.showValidation && h("span", { key: 'e67b7f297a2b6fc45ec05ab186b55af97a06f5f5' }), this.showHelpIcon && (h(Fragment, null, !this.destructive ? (h("div", { class: "help-icon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { d: "M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z", stroke: "#697586", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))) : (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { 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", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), this.showCloseButton && !this.destructive && (h("gb-button", { key: '87edd16dafc5c5c96870ca4163923e5f4920491c', size: "sm", state: this.state === 'disabled' ? 'disabled' : 'default', hierarchy: "tertiary_gray", icon: "only", "icon-leading": true, "icon-leading-swap": "assets/cancel-button.svg" })))), this.type === 'leading_dropdown' && (h("div", { key: '658b79e703a7b5ac0afdcc17c25bd52e2e312618', class: `input-wrapper ${this.state} ${this.destructive ? 'destructive' : ''}` }, h("div", { key: '7b57ba59df0d0a215088a3e32582b98631b38cbb', class: "dropdown" }, h("div", { key: '73725aad54daaa3bb965265075d17eb698a6da8b', class: "country-icon" }, h("svg", { key: '575d2d033013608538fe69033c379c62fa58fa4d', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: 'da72201a1c4cd6c88b56247eba1b2afff885b9fb', d: "M-0.000488281 12.0002C-0.000488281 17.1599 3.25601 21.5583 7.82562 23.2539V0.746674C3.25601 2.44214 -0.000488281 6.84071 -0.000488281 12.0002Z", fill: "#6DA544" }), h("path", { key: '39fd5fa3601a3e47f21bbad909cbeecae0edbf95', d: "M23.9999 12.0002C23.9999 6.8407 20.7434 2.44214 16.1738 0.746674V23.2539C20.7434 21.5583 23.9999 17.1599 23.9999 12.0002Z", fill: "#6DA544" }))), h("select", { key: 'dd0624496ecfc671e0b985d15b693cab71254d2c', class: "text-md-regular" }, h("option", { key: '80dda77fb9e776eaf347c2dae73d317d80a40711', value: "option 1", selected: true }, "+234"), h("slot", { key: '1c7eff53ec67671b20535345e5d66264ee11a0e8', name: "country-option" }))), h("div", { key: '040feb58ecb7453e29d53e2302ef9d7d0a5a786b', class: "text-input" }, h("input", { key: '644162d3c00694b5000680afcfb815d8f12d6561', class: "text-md-regular", placeholder: this.showPlaceholder ? this.placeholderText : '' }), this.showValidation && h("span", { key: 'a1f85a604aa95b018848366e206d1c0fe6233c22' }), this.showHelpIcon && (h(Fragment, null, !this.destructive ? (h("div", { class: "help-icon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { d: "M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z", stroke: "#697586", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))) : (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { 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", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" })))))))), this.type === 'trailing_dropdown' && (h("div", { key: 'd093cf0596cad6e31009736bdaed355dad6e9a08', class: `input-wrapper ${this.state} ${this.destructive ? 'destructive' : ''}` }, h("div", { key: '9339ed2287efe3d6c0cc8826cc526fec969469d9', class: "content" }, h("div", { key: 'ca542def1b74d51330f2031e9f8d606afc3d3985', class: "text-input" }, h("p", { key: '8e5bec6000a5457a19cdfe42a45c6c1e66abe463', class: "text-md-regular" }, "$"), h("input", { key: '35a3e3ee13407aa2dfcdc284e43f46cb1db71ae0', class: "text-md-regular", placeholder: this.showPlaceholder ? this.placeholderText : '' })), this.showValidation && h("span", { key: '243ecfc932789875bbc498b606d40885ec391f91' }), this.showHelpIcon && (h(Fragment, null, !this.destructive ? (h("div", { class: "help-icon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { d: "M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z", stroke: "#697586", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))) : (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { 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", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), h("div", { key: '238a8478db24c024ab4a908788d829a73aeb56b7', class: "dropdown" }, h("select", { key: '6ab0252bd50c4efbec7cb39ed674504dbbc09bf8', class: "text-md-regular" }, h("option", { key: '13e631eb6c4351ba8b25329ccb83d433c64ceff8', value: "option 1", selected: true }, "USD"), h("slot", { key: '24bb974717f90a8708d0ee7583c69eead2335b93', name: "option" }))))), this.type === 'leading_text' && (h("div", { key: '5ab3f61320886a981b5ef8a7f09e17dda3dd606b', class: "leading_text_wrapper" }, h("div", { key: '7d696bd1d1afaf3f4280c742c011a90f6927efe5', class: "add-on" }, h("p", { key: '72036c1b30ff732852a37544d8646cbf30a670a5', class: "text-md-regular" }, "http://")), h("div", { key: '5a0cabde28c398d6e0a3bd297be862384069d182', class: `leading_text_input_wrapper ${this.state === 'disabled' ? 'disabled' : ''} ${this.state} ${this.destructive ? 'destructive' : ''}` }, h("div", { key: 'e64418443b3c1810863e2e1ac33338babcc11b70', class: "text-input" }, h("input", { key: 'd108a1e841e939e5a06a95eb7c1a7ee9b7019372', class: "text-md-regular", placeholder: this.showPlaceholder ? this.placeholderText : '' }), this.showValidation && h("span", { key: '3923ba21706276f380751bc60cced3c05a71f6ee' }), this.showHelpIcon && (h(Fragment, null, !this.destructive ? (h("div", { class: "help-icon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { d: "M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z", stroke: "#697586", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))) : (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { 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", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))))), this.type === 'payment_input' && (h("div", { key: '23010c874af4d7673c5eee57a32355fcdcd8d6f0', class: `input-wrapper ${this.state} ${this.destructive ? 'destructive' : ''}` }, h("div", { key: '48c1ecd6d9e37ccfe54112f2a4c690d26b4d7935', class: "content" }, h("div", { key: 'e1104790f41d969f027730e35fc302c4bbcdee53', class: "payment-method" }, h("svg", { key: '263bb58ea91c989f9492412cdbd5151c0d6c48bf', xmlns: "http://www.w3.org/2000/svg", width: "23", height: "14", viewBox: "0 0 23 14", fill: "none" }, h("path", { key: '9b7663b4252e7c389e158b2720eae8d9ee16f3a1', "fill-rule": "evenodd", "clip-rule": "evenodd", 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", fill: "#ED0006" }), h("path", { key: '50aca787a439eb039c8bd21cd169dcda8ba4073b', "fill-rule": "evenodd", "clip-rule": "evenodd", 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", fill: "#F9A000" }), h("path", { key: 'cedd8d6986d26bd80690ecc7f71803d0464e7099', "fill-rule": "evenodd", "clip-rule": "evenodd", 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", fill: "#FF5E00" }))), h("input", { key: 'bb6c2d9940f5c835015f79eebbe5a77bfef9e0e9', class: "text-md-regular", placeholder: this.showPlaceholder ? this.placeholderText : '' })), this.showValidation && h("span", { key: '1c1fac2bce4c0047d3c0f232c1c0d2bf6dc68f35' }), this.showHelpIcon && (h("div", { key: 'cf2a780a4c415046ec28b11ab7ae1ac244554781', class: "help-icon" }, h(Fragment, null, !this.destructive ? (h("div", { class: "help-icon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { d: "M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z", stroke: "#697586", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))) : (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { 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", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" })))))))), this.type === 'tags' && (h("div", { key: 'eee7caa2a71b1ab995e0795ff6842f42a7df97eb', class: `input-wrapper ${this.state} ${this.destructive ? 'destructive' : ''}` }, h("div", { key: '26b8543f99361d3e33871dbcde43420ad81be044', class: "content" }, h("div", { key: '52363a025c5c1f0e5c719b68fabb5af400241469', class: "tags-box" }, h("slot", { key: '2cb7c29ab811d65611b128b88b63cb1769d5f1e0', name: "tag-option" })), h("input", { key: '2d0b9625b2b638ad2b330f353b116557e364222e', class: "text-md-regular", placeholder: this.showPlaceholder ? this.placeholderText : '' })), this.showValidation && h("span", { key: '35fa1d757dbb0d79524e13db7a66dacb5273320a' }), this.showHelpIcon && (h("div", { key: '2c1cf86ba621c00c15d4bbb515949784875a110c', class: "help-icon" }, h(Fragment, null, !this.destructive ? (h("div", { class: "help-icon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { d: "M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z", stroke: "#697586", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))) : (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { 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", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" })))))))), this.type === 'trailing_button' && (h("div", { key: '8d3a95c5d9b6235e6ce6071fb5520c4020a43101', class: `input-wrapper ${this.state} ${this.destructive ? 'destructive' : ''}` }, h("div", { key: 'a02e62ed9a9e50f2e15b7fefcde47ebf2b54d6a5', class: "text-input" }, h("input", { key: '5420478ea4f3b8d8b62b3b55aeb347d7e8ece795', class: "text-md-regular", placeholder: this.showPlaceholder ? this.placeholderText : '' }), this.showValidation && h("span", { key: '29fcb5d0094a14cdb66ade6b4fb9bb41bd9a4766' }), this.showHelpIcon && (h(Fragment, null, !this.destructive ? (h("div", { class: "help-icon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { d: "M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z", stroke: "#697586", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))) : (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { 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", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), h("div", { key: 'c6f4ec19d3e54fe8e672fde18d701f99b8ca0ef5', class: "trailing-btn" }, h("gb-button", { key: '765899d74b76dbbc62070c2df10f0475ecb5ee5a', size: "md", state: this.state === 'disabled' ? 'disabled' : 'default', hierarchy: "tertiary_gray", icon: "only", "icon-leading": true, "icon-leading-swap": "assets/copy.svg" })))), this.type === 'password' && (h("div", { key: '579dfd4a9823a39e3ea34c67a03d7fde90f004bd', class: `input-wrapper ${this.state} ${this.destructive ? 'destructive' : ''}` }, h("div", { key: 'b2e79dd5e90167076c346852e4f3482428d1ce51', class: "content" }, h("div", { key: '3201f7881b0248405325b9ceedacf2d78312f1d4', class: "text-input" }, h("input", { key: '35e8ca4a866c8057a91e332ca533280c5d85e833', class: "text-md-regular", placeholder: this.showPlaceholder ? this.placeholderText : '', type: "password" })), this.showValidation && h("span", { key: '6077f9e9a214c96d57258a0fb80b4dbfc37a9283' }), this.showHelpIcon && (h(Fragment, null, !this.destructive ? (h("div", { class: "help-icon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { d: "M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z", stroke: "#697586", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))) : (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { 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", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), h("div", { key: '45c5bad0765db320ac924607873aa403481d890b', class: "dropdown" }, h("gb-password-button", { key: 'c8714e82c72a23195a88579e3adb6917ffdecd3c', state: this.state === 'disabled' ? StateEnum.Disabled : StateEnum.Default })))), this.type === 'password_icon_leading' && (h("div", { key: '7a31e5453063fc4aef88c9c5e3a6de0ad7ee18db', class: `input-wrapper ${this.state} ${this.destructive ? 'destructive' : ''}` }, h("div", { key: 'dfbf2e9dc8d5f0cfec3ce080e690189a85000fa9', class: "content" }, this.iconSwap ? (h("img", { src: iconSwap, alt: "Icon" })) : (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { d: "M12.0759 12.1667C11.6617 12.1667 11.3259 12.5024 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.5024 12.4976 12.1667 12.0833 12.1667V13.6667ZM7.91668 12.1667C7.50246 12.1667 7.16668 12.5024 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.5024 8.33836 12.1667 7.92415 12.1667V13.6667ZM16.4435 10.1294L17.1868 10.0293L16.4435 10.1294ZM13.7003 7.58257L13.7347 6.83336L13.7003 7.58257ZM13.7003 18.2507L13.7347 19L13.7003 18.2507ZM16.4435 15.7039L15.7002 15.6039L16.4435 15.7039ZM6.29973 7.58257L6.33417 8.33178L6.29973 7.58257ZM3.55652 10.1294L2.81323 10.0293L3.55652 10.1294ZM6.29973 18.2507L6.33417 17.5015L6.29973 18.2507ZM3.55652 15.7039L4.29981 15.6039L3.55652 15.7039ZM5.50001 7.49999C5.50001 7.9142 5.8358 8.24999 6.25001 8.24999C6.66422 8.24999 7.00001 7.9142 7.00001 7.49999H5.50001ZM13 7.49999C13 7.9142 13.3358 8.24999 13.75 8.24999C14.1642 8.24999 14.5 7.9142 14.5 7.49999H13ZM12.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.8141 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.2294C15.8211 11.1275 15.9167 12.0192 15.9167 12.9167H17.4167ZM10 8.24999C11.3095 8.24999 12.4972 8.27805 13.6659 8.33178L13.7347 6.83336C12.5424 6.77855 11.3317 6.74999 10 6.74999V8.24999ZM6.33417 8.33178C7.50287 8.27805 8.69057 8.24999 10 8.24999V6.74999C8.66829 6.74999 7.45761 6.77855 6.26528 6.83336L6.33417 8.33178ZM2.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.2294L2.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.8141 4.08334 12.9167H2.58334ZM17.1868 10.0293C16.9527 8.29065 15.5122 6.91507 13.7347 6.83336L13.6659 8.33178C14.6943 8.37906 15.5595 9.18436 15.7002 10.2294L17.1868 10.0293ZM13.7347 19C15.5122 18.9182 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.83336C4.48781 6.91507 3.04732 8.29065 2.81323 10.0293L4.29981 10.2294C4.44052 9.18436 5.30576 8.37906 6.33417 8.33178L6.26528 6.83336ZM6.33417 17.5015C5.30576 17.4543 4.44052 16.649 4.29981 15.6039L2.81323 15.804C3.04732 17.5427 4.48782 18.9182 6.26528 19L6.33417 17.5015ZM7.00001 7.49999V5.41666H5.50001V7.49999H7.00001ZM13 5.41666V7.49999H14.5V5.41666H13ZM10 2.41666C11.6569 2.41666 13 3.7598 13 5.41666H14.5C14.5 2.93138 12.4853 0.916656 10 0.916656V2.41666ZM7.00001 5.41666C7.00001 3.7598 8.34316 2.41666 10 2.41666V0.916656C7.51473 0.916656 5.50001 2.93138 5.50001 5.41666H7.00001Z", fill: "#4B5565" }))), h("input", { key: 'afd83b561fea2fa0cc14d3591ab26370efd3c96f', class: "text-md-regular", placeholder: this.showPlaceholder ? this.placeholderText : '' })), this.showValidation && h("span", { key: '00c1d94eb347138afb1773ef25c0194edaaf9f10' }), this.showHelpIcon && (h(Fragment, null, !this.destructive ? (h("div", { class: "help-icon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { d: "M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z", stroke: "#697586", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))) : (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { 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", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), h("gb-password-button", { key: '3194e6e506e88679dbe8ebc291cc88146e930ed6', state: this.state === 'disabled' ? StateEnum.Disabled : StateEnum.Default }))), this.type === 'count' && (h("div", { key: 'b1aadcf42b22c7c8f6a86a295185fee0338eb100', class: `input-wrapper ${this.state} ${this.destructive ? 'destructive' : ''} ${this.size}` }, h("div", { key: 'dd5e8f2213f830710a5cc8bb2268bbfb9f695078', class: "text-input" }, h("input", { key: 'c7fc864f7cf3c72fc39b4c4d9bdc6f46f8467c6b', class: "text-md-regular", placeholder: this.showPlaceholder ? this.placeholderText : '' }), this.showHelpIcon && (h("svg", { key: 'd76328e8dc5baa9053a9a799602195cf04b37f26', class: "help-svg", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: 'abc8ea3c972a6f56a42a314012a9610e63b16344', d: "M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z", stroke: "#697586", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("div", { key: '1b96be78e3191fe14c4949c9ba45a704465be785', class: "count-action" }, this.showCloseButton && (h("gb-button", { key: '483fdb092fca68873925c798b3a52ebee179bc16', class: "decrease-btn", size: "md", hierarchy: "tertiary_gray", icon: "only", "icon-leading": true, "icon-leading-swap": "assets/minus_sign.svg" })), h("gb-button", { key: '5bdefcbcefaae43ec3c8791232a20fb39647c9b4', class: "increase-btn", size: "md", hierarchy: "tertiary_gray", icon: "only", "icon-leading": true, "icon-leading-swap": "assets/plus_sign.svg" }))))), this.showHintText && h("p", { key: 'a929baaefa9e44e7e1031375f68d8ddf917aac95', class: `text-sm-regular hint_text ${this.destructive ? 'destructive' : ''}` }, this.hintText)));
41
+ return (h("div", { key: '83e15f51c8af96ccc8a60f1ab1af95f437eb86b4', class: classes }, h("div", { key: 'af76568d1d7cd71ec7c3da6fbb91d63975c277ec', class: "input-with-label" }, this.showLabel && (h("label", { key: '3dd210876ac3fdc29e6a917aa069aa0d0dc3c28e', htmlFor: "input", class: "text-sm-medium" }, this.label)), this.type === 'default' && (h("div", { key: 'e9834d7a34fc79b4f5478e809ac0a607863ffa2d', class: `input-wrapper ${this.type} ${this.state} ${this.destructive ? 'destructive' : ''}` }, h("input", { key: '3676b4fab29871138fef616ff72e396cabf8bce5', class: `text-md-regular`, placeholder: this.showPlaceholder ? this.placeholderText : '', value: this.inputValue, onInput: event => this.handleInput(event) }), this.showValidation && h("span", { key: 'd532b6d4bab6f8199f8a615370e7cbb702df8078' }), this.showHelpIcon && (h(Fragment, null, !this.destructive ? (h("div", { class: "help-icon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { d: "M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z", stroke: "#697586", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))) : this.destructive && this.state !== 'disabled' ? (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { 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", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" }))) : (this.destructive &&
42
+ this.state === 'disabled' && (h("div", { class: "help-icon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { d: "M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z", stroke: "#697586", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))))), this.type === 'icon_leading' && (h("div", { key: 'bef2b18d5a49eb623d27fbefdcefb03776a1faf7', class: `input-wrapper ${this.state} ${this.destructive ? 'destructive' : ''}` }, h("div", { key: 'e4961f8fb70e5107e6f47fcb979a45adf397e97b', class: "content" }, h("div", { key: '94a5ff5d5c511823fc1bc0daa5cf25378f0a92fc', class: "icon" }, this.iconSwap ? (h("img", { src: iconSwap, alt: "Icon" })) : (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", class: `icon_leading_svg ${this.state}` }, h("path", { d: "M5.83342 7.08334L8.2851 8.53286C9.71443 9.37794 10.2857 9.37794 11.7151 8.53286L14.1668 7.08334M7.58243 2.94713C9.1995 2.9065 10.8007 2.9065 12.4177 2.94713C15.0415 3.01305 16.3534 3.04602 17.296 3.99221C18.2386 4.9384 18.2658 6.21571 18.3203 8.77032C18.3378 9.59172 18.3378 10.4083 18.3203 11.2297C18.2658 13.7843 18.2386 15.0616 17.296 16.0078C16.3533 16.954 15.0415 16.9869 12.4177 17.0529C10.8007 17.0935 9.19951 17.0935 7.58244 17.0529C4.95869 16.9869 3.64682 16.954 2.70421 16.0078C1.76161 15.0616 1.73437 13.7843 1.67989 11.2297C1.66237 10.4083 1.66237 9.59171 1.67989 8.77031C1.73436 6.21569 1.7616 4.93839 2.70421 3.9922C3.64682 3.046 4.95869 3.01304 7.58243 2.94713Z", stroke: "#4B5565", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("input", { key: '66166a1c6a640d05a6d22531009d5c29693b9689', class: `text-md-regular`, placeholder: this.showPlaceholder ? this.placeholderText : '', type: "email", value: this.inputValue, onInput: event => this.handleInput(event) })), this.showValidation && h("span", { key: 'dcf73c9f2ff606def79775c75a9f1ad5acde39c6' }), this.showHelpIcon && (h(Fragment, null, !this.destructive ? (h("div", { class: "help-icon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { d: "M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z", stroke: "#697586", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))) : (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { 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", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), this.showCloseButton && !this.destructive && (h("gb-button", { key: '39438b368dd73d6b8d3b75ad8e01cf5ca4e1964c', size: "sm", state: this.state === 'disabled' ? 'disabled' : 'default', hierarchy: "tertiary_gray", icon: "only", "icon-leading": true, "icon-leading-swap": "assets/cancel-button.svg" })))), this.type === 'leading_dropdown' && (h("div", { key: '9746aef9ab57b495d7c74a7ae53dd946414829b0', class: `input-wrapper ${this.type} ${this.state} ${this.destructive ? 'destructive' : ''}` }, h("div", { key: '8c9c920d156ad7c8c77de8c6ec2d8f665742793d', class: "dropdown" }, h("div", { key: 'cb3a17ca371dde32fff4f38890048a12efbb25b0', class: "country-icon" }, h("svg", { key: '69fa7ae24744f73086e18dcca718739209580402', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: 'fa20186792a6727bc9be9bf0bcbc01ccce51e2fc', d: "M-0.000488281 12.0002C-0.000488281 17.1599 3.25601 21.5583 7.82562 23.2539V0.746674C3.25601 2.44214 -0.000488281 6.84071 -0.000488281 12.0002Z", fill: "#6DA544" }), h("path", { key: '139ae95463e15dba4a92ed51b55d748596088dff', d: "M23.9999 12.0002C23.9999 6.8407 20.7434 2.44214 16.1738 0.746674V23.2539C20.7434 21.5583 23.9999 17.1599 23.9999 12.0002Z", fill: "#6DA544" }))), h("select", { key: '02bafe9dee46b94c3db1982469589c90a6813d0d', class: "text-md-regular" }, h("option", { key: '114d1fd7cbd8231d5ec7cda870327c2c6bee1ebe', value: "option 1", selected: true }, "+234"), h("slot", { key: '1d8d3d73962101b43f63b1f4ab0f36417726c689', name: "country-option" }))), h("div", { key: '67cde7dfb5129d3317d907e0efff07118c15c02a', class: "text-input" }, h("input", { key: '32583a68aa3eb802bfddb5d14b756393dcbae204', class: "text-md-regular", placeholder: this.showPlaceholder ? this.placeholderText : '', value: this.inputValue, onInput: event => this.handleInput(event) }), this.showValidation && h("span", { key: '259be5e321b145a8b5fa54865940937c7a3148b5' }), this.showHelpIcon && (h(Fragment, null, !this.destructive ? (h("div", { class: "help-icon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { d: "M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z", stroke: "#697586", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))) : (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { 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", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" })))))))), this.type === 'trailing_dropdown' && (h("div", { key: 'e41fb2386a6681899767a2b53c6862de3ec9cdc8', class: `input-wrapper ${this.type} ${this.state} ${this.destructive ? 'destructive' : ''}` }, h("div", { key: '0b179668c2d32a0fe88bcdfb513c0c87ff9e3642', class: "content" }, h("div", { key: 'dedab051539b1d50978f0eb5bea72facd7c32008', class: "text-input" }, h("p", { key: '1dfe52b3633ae1612c17b4aa3067002b03acce8a', class: "text-md-regular" }, "$"), h("input", { key: '909adf30ae293bdcfb7abc5e9c0f92220f5ae113', class: "text-md-regular", placeholder: this.showPlaceholder ? this.placeholderText : '', value: this.inputValue, onInput: event => this.handleInput(event) })), this.showValidation && h("span", { key: 'caf33ae0612a022aee0a764c211c44aedae7ab62' }), this.showHelpIcon && (h(Fragment, null, !this.destructive ? (h("div", { class: "help-icon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { d: "M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z", stroke: "#697586", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))) : (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { 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", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), h("div", { key: '12dfde9df7f671943f697ea25f948eb55bf07066', class: "dropdown" }, h("select", { key: '245afe334f9250130bc66e9650f6f1560282fee3', class: "text-md-regular" }, h("option", { key: 'd02940e1a223a44c57d2b396507652eb7b4fa303', value: "option 1", selected: true }, "USD"), h("slot", { key: '2014889300192137fd594e5cc808c604c1d29d36', name: "option" }))))), this.type === 'leading_text' && (h("div", { key: '22e9e804c23e2b74b6f8cedd8ef8f444e260ce91', class: "leading_text_wrapper" }, h("div", { key: '70a695c5438ba2f807fdba32a03127f793f788f7', class: "add-on" }, h("p", { key: '19fc81811845c27cf44b36cc178f866af50befb5', class: "text-md-regular" }, "http://")), h("div", { key: 'cff80ca58d55fd251610f80cc50af00e7ac8d190', class: `leading_text_input_wrapper ${this.state === 'disabled' ? 'disabled' : ''} ${this.state} ${this.destructive ? 'destructive' : ''}` }, h("div", { key: 'e427531a9c7abdddc3511f7b24e981413a344b64', class: "text-input" }, h("input", { key: '3c9a2ea32c43da8659129419012140108ce3fc7f', class: "text-md-regular", placeholder: this.showPlaceholder ? this.placeholderText : '', value: this.inputValue, onInput: event => this.handleInput(event) }), this.showValidation && h("span", { key: '50ac0dae5cf9d8b22245e89447d18a2ca30c39d0' }), this.showHelpIcon && (h(Fragment, null, !this.destructive ? (h("div", { class: "help-icon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { d: "M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z", stroke: "#697586", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))) : (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { 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", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))))), this.type === 'payment_input' && (h("div", { key: '07b238aec07dc9003fb24e64861d194bfb82f786', class: `input-wrapper ${this.state} ${this.destructive ? 'destructive' : ''}` }, h("div", { key: '9126c4565eed371ac444f919f8ad60991d988ead', class: "content" }, h("div", { key: '05a6fdcba206fb67681c1bb241a4c1cd0c30e0d0', class: "payment-method" }, h("svg", { key: '8da81b1182dc8b5577a519d06fd75167740572e4', xmlns: "http://www.w3.org/2000/svg", width: "23", height: "14", viewBox: "0 0 23 14", fill: "none" }, h("path", { key: '9e37090fce7f91ba948af1ea4db262afe67dfc83', "fill-rule": "evenodd", "clip-rule": "evenodd", 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", fill: "#ED0006" }), h("path", { key: '6e7511fdffa1925678a0d475e93c53f9f58ff739', "fill-rule": "evenodd", "clip-rule": "evenodd", 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", fill: "#F9A000" }), h("path", { key: 'df54c275f71bb5a6d79d7a1630f2d25bee5921dd', "fill-rule": "evenodd", "clip-rule": "evenodd", 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", fill: "#FF5E00" }))), h("input", { key: '2d5598e010bdcc2559f332603866e00ae2f015fd', class: "text-md-regular", placeholder: this.showPlaceholder ? this.placeholderText : '', value: this.inputValue, onInput: event => this.handleInput(event) })), this.showValidation && h("span", { key: '6adf6c2a44a54a72389bf61697d5c07e76236fde' }), this.showHelpIcon && (h("div", { key: '3bdbae521700583821848ee87c306a137490b261', class: "help-icon" }, h(Fragment, null, !this.destructive ? (h("div", { class: "help-icon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { d: "M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z", stroke: "#697586", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))) : (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { 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", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" })))))))), this.type === 'tags' && (h("div", { key: '6c53aba58914dfc9e8587c0765c3ed9b7ce27486', class: `input-wrapper ${this.state} ${this.destructive ? 'destructive' : ''}` }, h("div", { key: 'a86c8004a53b4644a67cbea0793916cbc6af922d', class: "content" }, h("div", { key: '8179740bd07c4a7020c7565c8167c063d4859c28', class: "tags-box" }, h("slot", { key: '912f1aea9b7785a22b3948bc80747f44ef141e45', name: "tag-option" })), h("input", { key: '3686649f61bc0aef4fb5f504051a3d7c38e71c33', class: "text-md-regular", placeholder: this.showPlaceholder ? this.placeholderText : '', value: this.inputValue, onInput: event => this.handleInput(event) })), this.showValidation && h("span", { key: '1462edc4c0cf75e5e489b00cef5a8a644dc573f7' }), this.showHelpIcon && (h("div", { key: '1b7740ff53c4e1a438036f543d03aa0bbe0db451', class: "help-icon" }, h(Fragment, null, !this.destructive ? (h("div", { class: "help-icon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { d: "M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z", stroke: "#697586", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))) : (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { 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", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" })))))))), this.type === 'trailing_button' && (h("div", { key: '43087a6215a8e87acf651f4c6988c331e7e6c4d4', class: `input-wrapper ${this.state} ${this.destructive ? 'destructive' : ''}` }, h("div", { key: '03e2361561d964046bd8a414d06c7fdbe5ef0bbe', class: "text-input" }, h("input", { key: 'e5a6c4a2e1094c10c7b64af69be27bddb30522a5', class: "text-md-regular", placeholder: this.showPlaceholder ? this.placeholderText : '', value: this.inputValue, onInput: event => this.handleInput(event) }), this.showValidation && h("span", { key: '278d00098777911298fca5f2675384959dc32e51' }), this.showHelpIcon && (h(Fragment, null, !this.destructive ? (h("div", { class: "help-icon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { d: "M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z", stroke: "#697586", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))) : (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { 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", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), h("div", { key: 'd1b31466649e248e9155fb5aff9da2e023e30b6b', class: "trailing-btn" }, h("gb-button", { key: '38fe2fbb64b7dc485d6292cb9ff1f16578958297', size: "md", state: this.state === 'disabled' ? 'disabled' : 'default', hierarchy: "tertiary_gray", icon: "only", "icon-leading": true, "icon-leading-swap": "assets/copy.svg" })))), this.type === 'password' && (h("div", { key: '81fd2f6ace6b07a619124753cd2006d23fc19141', class: `input-wrapper ${this.state} ${this.destructive ? 'destructive' : ''}` }, h("div", { key: 'c059c45506238363d511496bde8ac6ac8fcfd1c2', class: "content" }, h("div", { key: '00fe2abd4be70520500bed04b0fde8ec6abb4305', class: "text-input" }, h("input", { key: '3852984e28f990be236db27b4ab09b6f03c7f5d7', class: "text-md-regular", placeholder: this.showPlaceholder ? this.placeholderText : '', type: this.isPasswordVisible ? 'text' : 'password', value: this.inputValue, onInput: event => this.handleInput(event) })), this.showValidation && h("span", { key: '838e75c231ac68ed19b07a5ebc2375c7688668d4' }), this.showHelpIcon && (h(Fragment, null, !this.destructive ? (h("div", { class: "help-icon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { d: "M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z", stroke: "#697586", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))) : (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { 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", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), h("div", { key: '9dd63c5f1381ac97362ce1c62444faa7fdf514f6', class: "dropdown" }, h("gb-password-button", { key: '1a93234dab89fce2c929d521b341795823ce2d5e', state: this.state === 'disabled' ? StateEnum.Disabled : StateEnum.Default, onClick: () => this.togglePasswordVisibility() })))), this.type === 'password_icon_leading' && (h("div", { key: '12f351a2932556d49a8971ed95f632a5d85d1073', class: `input-wrapper ${this.state} ${this.destructive ? 'destructive' : ''}` }, h("div", { key: 'aeb0e9e0656db0097d244cefaa8a1b3cf07caa99', class: "content" }, this.iconSwap ? (h("img", { src: iconSwap, alt: "Icon" })) : (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { d: "M12.0759 12.1667C11.6617 12.1667 11.3259 12.5024 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.5024 12.4976 12.1667 12.0833 12.1667V13.6667ZM7.91668 12.1667C7.50246 12.1667 7.16668 12.5024 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.5024 8.33836 12.1667 7.92415 12.1667V13.6667ZM16.4435 10.1294L17.1868 10.0293L16.4435 10.1294ZM13.7003 7.58257L13.7347 6.83336L13.7003 7.58257ZM13.7003 18.2507L13.7347 19L13.7003 18.2507ZM16.4435 15.7039L15.7002 15.6039L16.4435 15.7039ZM6.29973 7.58257L6.33417 8.33178L6.29973 7.58257ZM3.55652 10.1294L2.81323 10.0293L3.55652 10.1294ZM6.29973 18.2507L6.33417 17.5015L6.29973 18.2507ZM3.55652 15.7039L4.29981 15.6039L3.55652 15.7039ZM5.50001 7.49999C5.50001 7.9142 5.8358 8.24999 6.25001 8.24999C6.66422 8.24999 7.00001 7.9142 7.00001 7.49999H5.50001ZM13 7.49999C13 7.9142 13.3358 8.24999 13.75 8.24999C14.1642 8.24999 14.5 7.9142 14.5 7.49999H13ZM12.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.8141 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.2294C15.8211 11.1275 15.9167 12.0192 15.9167 12.9167H17.4167ZM10 8.24999C11.3095 8.24999 12.4972 8.27805 13.6659 8.33178L13.7347 6.83336C12.5424 6.77855 11.3317 6.74999 10 6.74999V8.24999ZM6.33417 8.33178C7.50287 8.27805 8.69057 8.24999 10 8.24999V6.74999C8.66829 6.74999 7.45761 6.77855 6.26528 6.83336L6.33417 8.33178ZM2.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.2294L2.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.8141 4.08334 12.9167H2.58334ZM17.1868 10.0293C16.9527 8.29065 15.5122 6.91507 13.7347 6.83336L13.6659 8.33178C14.6943 8.37906 15.5595 9.18436 15.7002 10.2294L17.1868 10.0293ZM13.7347 19C15.5122 18.9182 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.83336C4.48781 6.91507 3.04732 8.29065 2.81323 10.0293L4.29981 10.2294C4.44052 9.18436 5.30576 8.37906 6.33417 8.33178L6.26528 6.83336ZM6.33417 17.5015C5.30576 17.4543 4.44052 16.649 4.29981 15.6039L2.81323 15.804C3.04732 17.5427 4.48782 18.9182 6.26528 19L6.33417 17.5015ZM7.00001 7.49999V5.41666H5.50001V7.49999H7.00001ZM13 5.41666V7.49999H14.5V5.41666H13ZM10 2.41666C11.6569 2.41666 13 3.7598 13 5.41666H14.5C14.5 2.93138 12.4853 0.916656 10 0.916656V2.41666ZM7.00001 5.41666C7.00001 3.7598 8.34316 2.41666 10 2.41666V0.916656C7.51473 0.916656 5.50001 2.93138 5.50001 5.41666H7.00001Z", fill: "#4B5565" }))), h("input", { key: 'a2e5d289d3cc07e9b6c6a72c287266c6a4a0c8cc', class: "text-md-regular", type: this.isPasswordVisible ? 'text' : 'password', placeholder: this.showPlaceholder ? this.placeholderText : '', value: this.inputValue, onInput: event => this.handleInput(event) })), this.showValidation && h("span", { key: 'feca5e664e13dc5142db1deda6ed010ee1a23514' }), this.showHelpIcon && (h(Fragment, null, !this.destructive ? (h("div", { class: "help-icon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { d: "M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z", stroke: "#697586", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))) : (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { 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", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), h("gb-password-button", { key: 'fd42a6c6a75e02aa37a888eda61a7f7011e1ce78', state: this.state === 'disabled' ? StateEnum.Disabled : StateEnum.Default, onClick: () => this.togglePasswordVisibility() }))), this.type === 'count' && (h("div", { key: '4bd4c9d40fa3fd553f6e1595ad0039119a1a1aa1', class: `input-wrapper ${this.state} ${this.destructive ? 'destructive' : ''} ${this.size}` }, h("div", { key: 'c059976cabb1c37bdad4a0098345f1cff920923c', class: "text-input" }, h("input", { key: '5ad3a06a7a0962abe856ba2d82d106b642bf418d', class: "text-md-regular", placeholder: this.showPlaceholder ? this.placeholderText : '', value: this.inputValue, onInput: event => this.handleInput(event) }), this.showHelpIcon && (h("svg", { key: 'bcfcf500a4a92293e90a0578a49f4b1331723807', class: "help-svg", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: '689ea5d7016eaf0566c4abb07a25f690acf13629', d: "M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z", stroke: "#697586", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("div", { key: 'ac02b8ff68319b5081581410bbd47ee311634e01', class: "count-action" }, this.showCloseButton && (h("gb-button", { key: '881a40181c8fbd2f90f535ae3e5ba8cfa1893ada', class: "decrease-btn", size: "md", hierarchy: "tertiary_gray", icon: "only", "icon-leading": true, "icon-leading-swap": "assets/minus_sign.svg" })), h("gb-button", { key: '64e4f851364c60a006c053092b7ba02bb0b6e076', class: "increase-btn", size: "md", hierarchy: "tertiary_gray", icon: "only", "icon-leading": true, "icon-leading-swap": "assets/plus_sign.svg" }))))), this.showHintText && h("p", { key: 'f5bf6872ae477002288bf0db27d5ca227bc2a08b', class: `text-sm-regular hint_text ${this.state} ${this.destructive ? 'destructive' : ''}` }, this.hintText)));
29
43
  }
30
44
  static get is() { return "gb-input-field"; }
31
45
  static get encapsulation() { return "shadow"; }
@@ -68,9 +82,15 @@ export class GbInputField {
68
82
  "type": "string",
69
83
  "mutable": false,
70
84
  "complexType": {
71
- "original": "'default' | 'icon_leading' | 'leading_dropdown' | 'trailing_dropdown' | 'leading_text'|'payment_input'| 'tags' | 'trailing_button' |'password' | 'password_icon_leading' | 'count'",
85
+ "original": "InputFieldTypes",
72
86
  "resolved": "\"count\" | \"default\" | \"icon_leading\" | \"leading_dropdown\" | \"leading_text\" | \"password\" | \"password_icon_leading\" | \"payment_input\" | \"tags\" | \"trailing_button\" | \"trailing_dropdown\"",
73
- "references": {}
87
+ "references": {
88
+ "InputFieldTypes": {
89
+ "location": "import",
90
+ "path": "../../models/reusableModels",
91
+ "id": "src/models/reusableModels.ts::InputFieldTypes"
92
+ }
93
+ }
74
94
  },
75
95
  "required": false,
76
96
  "optional": false,
@@ -297,5 +317,45 @@ export class GbInputField {
297
317
  }
298
318
  };
299
319
  }
320
+ static get states() {
321
+ return {
322
+ "inputValue": {},
323
+ "tags": {},
324
+ "isPasswordVisible": {}
325
+ };
326
+ }
327
+ static get events() {
328
+ return [{
329
+ "method": "tagAdded",
330
+ "name": "tagAdded",
331
+ "bubbles": true,
332
+ "cancelable": true,
333
+ "composed": true,
334
+ "docs": {
335
+ "tags": [],
336
+ "text": ""
337
+ },
338
+ "complexType": {
339
+ "original": "string",
340
+ "resolved": "string",
341
+ "references": {}
342
+ }
343
+ }, {
344
+ "method": "valueChanged",
345
+ "name": "valueChanged",
346
+ "bubbles": true,
347
+ "cancelable": true,
348
+ "composed": true,
349
+ "docs": {
350
+ "tags": [],
351
+ "text": ""
352
+ },
353
+ "complexType": {
354
+ "original": "string",
355
+ "resolved": "string",
356
+ "references": {}
357
+ }
358
+ }];
359
+ }
300
360
  }
301
361
  //# sourceMappingURL=gb-input-field.js.map