globuswebcomponents 0.7.8 → 0.8.0

package/dist/collection/components/gb-input-field/gb-input-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"gb-input-field.js","sourceRoot":"","sources":["../../../src/components/gb-input-field/gb-input-field.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, State, Event, EventEmitter, Fragment, Element, getAssetPath, Watch } from '@stencil/core'\r\nimport { GeneralSizes, InputFieldTypes, StateEnum } from '../../models/reusableModels'\r\n\r\n@Component({\r\n  tag: 'gb-input-field',\r\n  styleUrl: 'gb-input-field.css',\r\n  shadow: true,\r\n})\r\nexport class GbInputField {\r\n  @Prop() size: GeneralSizes;\r\n  @Prop() type: InputFieldTypes;\r\n  @Prop() destructive: boolean = false;\r\n  @Prop() state: 'placeholder' | 'filled' | 'active' | 'disabled';\r\n  @Prop() showLabel: boolean = false;\r\n  @Prop() label: string = '';\r\n  @Prop() showHintText: boolean = false;\r\n  @Prop() hintText: string = '';\r\n  @Prop() errorText: string = '';\r\n  @Prop() showPlaceholder: boolean = false;\r\n  @Prop() placeholder: string = '';\r\n  @Prop() showHelpIcon: boolean = false;\r\n  @Prop() showValidation: boolean = false;\r\n  @Prop() iconSwap?: string;\r\n  @Prop() showCloseButton?: boolean = false;\r\n  @Prop({ mutable: true }) options: string[] = [];\r\n  @State() inputValue: string = '';\r\n  @State() tags: string[] = [];\r\n  @State() leadingIconSvg: string = '';\r\n  @State() isPasswordVisible: boolean = false;\r\n  @State() showDropdown: boolean = false;\r\n  @State() selectedItem: string = '';\r\n  @Event() tagAdded: EventEmitter<string>;\r\n  @Event() inputValueChanged: EventEmitter<string>;\r\n  @Element() el: HTMLElement;\r\n\r\n  async loadIcon(iconName: string) {\r\n    const iconPath = getAssetPath(`${iconName}`);\r\n    const response = await fetch(iconPath);\r\n    const svg = await response.text();\r\n    this.leadingIconSvg = svg;\r\n  }\r\n\r\n  /* Function to handle and emit the inputted values */\r\n  handleInput(event: Event) {\r\n    const target = event.target as HTMLInputElement;\r\n    this.inputValue = target.value;\r\n    this.inputValueChanged.emit(this.inputValue);\r\n  }\r\n\r\n  /* Function to handle and emit the inputted values */\r\n  togglePasswordVisibility() {\r\n    this.isPasswordVisible = !this.isPasswordVisible;\r\n  }\r\n\r\n  @Watch('options')\r\n  optionsChanged(newOptions: string[]) {\r\n    // Update selectedItem when options are loaded or change\r\n    if (newOptions.length > 0 && !this.selectedItem) {\r\n      this.selectedItem = newOptions[0];\r\n    }\r\n  }\r\n\r\n  isItemSelected(option) {\r\n    return this.selectedItem === option;\r\n  }\r\n\r\n  handleItemSelect(option) {\r\n    // For other types, allow only one selection\r\n    this.selectedItem = option;\r\n    console.log(this.selectedItem)\r\n    this.showDropdown = false; // Close the dropdown\r\n  }\r\n\r\n  componentWillLoad() {\r\n    const options = ['NGN', 'USD', 'CAD'];\r\n\r\n    if (this.options && this.options.length > 0) {\r\n      this.selectedItem = this.options[0]; // Set the first item as default\r\n    }\r\n\r\n    this.options = options;\r\n    this.loadIcon(this.iconSwap);\r\n  }\r\n\r\n  componentDidLoad() {\r\n    this.selectedItem = this.options[0];\r\n    const mainTextSlot = this.el.querySelector('[slot=\"tooltip_label\"]');\r\n    const supportingTextSlot = this.el.querySelector('[slot=\"tooltip_supporting_text\"]');\r\n\r\n    if (mainTextSlot) {\r\n      mainTextSlot.classList.add('text-xs-semi-bold');\r\n    }\r\n\r\n    if (supportingTextSlot) {\r\n      supportingTextSlot.classList.add('text-xs-regular');\r\n    }\r\n  }\r\n\r\n  render() {\r\n\r\n    return (\r\n      <div class={`input_container`}>\r\n        <div class={`input_with_label`}>\r\n          {this.showLabel && <p class=\"label text-sm-medium\">{this.label}</p>}\r\n          {this.type === 'default' && [\r\n            <div class={`input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}`}>\r\n              <input\r\n                class={`content text-md-regular ${this.type} ${this.state}`}\r\n                type=\"text\"\r\n                placeholder={this.placeholder ? this.placeholder : ''}\r\n                onInput={event => this.handleInput(event)}\r\n              />\r\n              <>\r\n                {this.showValidation && (\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                    <path\r\n                      d=\"M4.16675 12.0833C4.16675 12.0833 5.41675 12.0833 7.08341 15C7.08341 15 11.7158 7.36112 15.8334 5.83334\"\r\n                      stroke=\"#079455\"\r\n                      stroke-width=\"1.5\"\r\n                      stroke-linecap=\"round\"\r\n                      stroke-linejoin=\"round\"\r\n                    />\r\n                  </svg>\r\n                )}\r\n                {this.showHelpIcon && (\r\n                  <div class={`help_circle`}>\r\n                    {!this.destructive ? (\r\n                      <gb-help-tooltip show-supporting-text={true}>\r\n                        <slot name=\"tooltip_label\" slot=\"label\"></slot>\r\n                        <slot name=\"tooltip_supporting_text\" slot=\"supporting_text\"></slot>\r\n                      </gb-help-tooltip>\r\n                    ) : (\r\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                        <path\r\n                          d=\"M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z\"\r\n                          stroke=\"#B51726\"\r\n                          stroke-width=\"1.33333\"\r\n                          stroke-linecap=\"round\"\r\n                          stroke-linejoin=\"round\"\r\n                        />\r\n                      </svg>\r\n                    )}\r\n                  </div>\r\n                )}\r\n              </>\r\n            </div>,\r\n          ]}\r\n          {this.type === 'icon_leading' && [\r\n            <div class={`input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}`}>\r\n              <div class={`icon ${this.size} ${this.state}`} innerHTML={this.leadingIconSvg}></div>\r\n              <input\r\n                class={`content text-md-regular ${this.type} ${this.state}`}\r\n                type=\"text\"\r\n                placeholder={this.placeholder ? this.placeholder : ''}\r\n                onInput={event => this.handleInput(event)}\r\n              />\r\n              <>\r\n                {this.showValidation && !this.destructive && (\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                    <path\r\n                      d=\"M4.16675 12.0833C4.16675 12.0833 5.41675 12.0833 7.08341 15C7.08341 15 11.7158 7.36112 15.8334 5.83334\"\r\n                      stroke=\"#079455\"\r\n                      stroke-width=\"1.5\"\r\n                      stroke-linecap=\"round\"\r\n                      stroke-linejoin=\"round\"\r\n                    />\r\n                  </svg>\r\n                )}\r\n                {this.showHelpIcon && (\r\n                  <div class={`help_circle`}>\r\n                    {!this.destructive ? (\r\n                      <gb-help-tooltip show-supporting-text={true}>\r\n                        <slot name=\"tooltip_label\" slot=\"label\"></slot>\r\n                        <slot name=\"tooltip_supporting_text\" slot=\"supporting_text\"></slot>\r\n                      </gb-help-tooltip>\r\n                    ) : (\r\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                        <path\r\n                          d=\"M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z\"\r\n                          stroke=\"#B51726\"\r\n                          stroke-width=\"1.33333\"\r\n                          stroke-linecap=\"round\"\r\n                          stroke-linejoin=\"round\"\r\n                        />\r\n                      </svg>\r\n                    )}\r\n                  </div>\r\n                )}\r\n                {this.showCloseButton && !this.destructive && (\r\n                  <gb-button size=\"sm\" hierarchy=\"tertiary_gray\" icon=\"only\" state=\"default\" icon-leading={true} icon-leading-swap=\"assets/cancel-01.svg\"></gb-button>\r\n                )}\r\n              </>\r\n            </div>,\r\n          ]}\r\n          {this.type === 'leading_dropdown' && [\r\n            <div class={`input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}`}>\r\n              <div class={`leading_dropdown_dropdown`} onClick={() => (this.showDropdown = !this.showDropdown)}>\r\n                <div class={`country_icon`}>\r\n                  <img src=\"build/assets/NG.svg\" alt=\"\" />\r\n                </div>\r\n                <div class={`dropdown_text`}>\r\n                  <p class=\"text-md-regular\" style={{ color: 'var(--color-text, #4B5565)' }}>\r\n                    {this.selectedItem}\r\n                  </p>\r\n                </div>\r\n                <div class={`dropdown_arrow`}>\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                    <path\r\n                      d=\"M15 7.50004C15 7.50004 11.3176 12.5 9.99996 12.5C8.68237 12.5 5 7.5 5 7.5\"\r\n                      stroke=\"#4B5565\"\r\n                      stroke-width=\"1.66667\"\r\n                      stroke-linecap=\"round\"\r\n                      stroke-linejoin=\"round\"\r\n                    />\r\n                  </svg>\r\n                </div>\r\n              </div>\r\n              <div class={`leading_dropdown_text_input`}>\r\n                <input\r\n                  class={`content text-md-regular ${this.type} ${this.state}`}\r\n                  type=\"text\"\r\n                  placeholder={this.placeholder ? this.placeholder : ''}\r\n                  onInput={event => this.handleInput(event)}\r\n                />\r\n                {this.showValidation && !this.destructive && (\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                    <path\r\n                      d=\"M4.16675 12.0833C4.16675 12.0833 5.41675 12.0833 7.08341 15C7.08341 15 11.7158 7.36112 15.8334 5.83334\"\r\n                      stroke=\"#079455\"\r\n                      stroke-width=\"1.5\"\r\n                      stroke-linecap=\"round\"\r\n                      stroke-linejoin=\"round\"\r\n                    />\r\n                  </svg>\r\n                )}\r\n                {this.showHelpIcon && (\r\n                  <div class={`help_circle`}>\r\n                    {!this.destructive ? (\r\n                      <gb-help-tooltip show-supporting-text={true}>\r\n                        <slot name=\"tooltip_label\" slot=\"label\"></slot>\r\n                        <slot name=\"tooltip_supporting_text\" slot=\"supporting_text\"></slot>\r\n                      </gb-help-tooltip>\r\n                    ) : (\r\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                        <path\r\n                          d=\"M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z\"\r\n                          stroke=\"#B51726\"\r\n                          stroke-width=\"1.33333\"\r\n                          stroke-linecap=\"round\"\r\n                          stroke-linejoin=\"round\"\r\n                        />\r\n                      </svg>\r\n                    )}\r\n                  </div>\r\n                )}\r\n              </div>\r\n            </div>,\r\n            <>\r\n              {this.showDropdown && (\r\n                <div class={`dropdown_menu ${this.type}`}>\r\n                  {this.options.map(option => (\r\n                    <gb-input-dropdown-menu-item type=\"default\" state={StateEnum.Default} selected={this.isItemSelected(option)} onClick={() => this.handleItemSelect(option)}>\r\n                      <p slot=\"name\">{option}</p>\r\n                    </gb-input-dropdown-menu-item>\r\n                  ))}\r\n                </div>\r\n              )}\r\n            </>,\r\n          ]}\r\n          {this.type === 'trailing_dropdown' && [\r\n            <div class={`input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}`}>\r\n              <div class={`trailing_dropdown_content`}>\r\n                <p class=\"text-md-regular\" style={{ color: 'var(--color-text, #4B5565)' }}>\r\n                  $\r\n                </p>\r\n                <input\r\n                  class={`content text-md-regular ${this.type} ${this.state}`}\r\n                  type=\"text\"\r\n                  placeholder={this.placeholder ? this.placeholder : ''}\r\n                  onInput={event => this.handleInput(event)}\r\n                />\r\n                {this.showHelpIcon && (\r\n                  <div class={`help_circle`}>\r\n                    {!this.destructive ? (\r\n                      <gb-help-tooltip show-supporting-text={true}>\r\n                        <slot name=\"tooltip_label\" slot=\"label\"></slot>\r\n                        <slot name=\"tooltip_supporting_text\" slot=\"supporting_text\"></slot>\r\n                      </gb-help-tooltip>\r\n                    ) : (\r\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                        <path\r\n                          d=\"M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z\"\r\n                          stroke=\"#B51726\"\r\n                          stroke-width=\"1.33333\"\r\n                          stroke-linecap=\"round\"\r\n                          stroke-linejoin=\"round\"\r\n                        />\r\n                      </svg>\r\n                    )}\r\n                  </div>\r\n                )}\r\n              </div>\r\n              <div class={`trailing_dropdown_dropdown`} onClick={() => (this.showDropdown = !this.showDropdown)}>\r\n                <div class={`dropdown_text`}>\r\n                  <p class=\"text-md-regular\" style={{ color: 'var(--color-text, #4B5565)' }}>\r\n                    {this.selectedItem}\r\n                  </p>\r\n                </div>\r\n                <div class={`dropdown_arrow`}>\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                    <path\r\n                      d=\"M15 7.50004C15 7.50004 11.3176 12.5 9.99996 12.5C8.68237 12.5 5 7.5 5 7.5\"\r\n                      stroke=\"#4B5565\"\r\n                      stroke-width=\"1.66667\"\r\n                      stroke-linecap=\"round\"\r\n                      stroke-linejoin=\"round\"\r\n                    />\r\n                  </svg>\r\n                </div>\r\n              </div>\r\n            </div>,\r\n            <>\r\n              {this.showDropdown && (\r\n                <div class={`dropdown_menu ${this.type}`}>\r\n                  {this.options.map(option => (\r\n                    <gb-input-dropdown-menu-item type=\"default\" state={StateEnum.Default} selected={this.isItemSelected(option)} onClick={() => this.handleItemSelect(option)}>\r\n                      <p slot=\"name\">{option}</p>\r\n                    </gb-input-dropdown-menu-item>\r\n                  ))}\r\n                </div>\r\n              )}\r\n            </>,\r\n          ]}\r\n          {this.type === 'leading_text' && [\r\n            <div class=\"leading_text_input\">\r\n              <div class={`add_on`}>\r\n                <p class={`text-md-regular`} style={{ color: this.state === 'disabled' ? 'var(--color-text-disabled, #CDD5DF)' : 'var(--color-text, #4B5565)' }}>\r\n                  http://\r\n                </p>\r\n              </div>\r\n              <div class={`input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}`}>\r\n                <input\r\n                  class={`content text-md-regular ${this.type} ${this.state}`}\r\n                  type=\"text\"\r\n                  placeholder={this.placeholder ? this.placeholder : ''}\r\n                  onInput={event => this.handleInput(event)}\r\n                />\r\n                {this.showValidation && !this.destructive && (\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                    <path\r\n                      d=\"M4.16675 12.0833C4.16675 12.0833 5.41675 12.0833 7.08341 15C7.08341 15 11.7158 7.36112 15.8334 5.83334\"\r\n                      stroke=\"#079455\"\r\n                      stroke-width=\"1.5\"\r\n                      stroke-linecap=\"round\"\r\n                      stroke-linejoin=\"round\"\r\n                    />\r\n                  </svg>\r\n                )}\r\n                {this.showHelpIcon && (\r\n                  <div class={`help_circle`}>\r\n                    {!this.destructive ? (\r\n                      <gb-help-tooltip show-supporting-text={true}>\r\n                        <slot name=\"tooltip_label\" slot=\"label\"></slot>\r\n                        <slot name=\"tooltip_supporting_text\" slot=\"supporting_text\"></slot>\r\n                      </gb-help-tooltip>\r\n                    ) : (\r\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                        <path\r\n                          d=\"M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z\"\r\n                          stroke=\"#B51726\"\r\n                          stroke-width=\"1.33333\"\r\n                          stroke-linecap=\"round\"\r\n                          stroke-linejoin=\"round\"\r\n                        />\r\n                      </svg>\r\n                    )}\r\n                  </div>\r\n                )}\r\n              </div>\r\n            </div>,\r\n          ]}\r\n          {this.type === 'payment_input' && (\r\n            <div class={`input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}`}>\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"23\" height=\"14\" viewBox=\"0 0 23 14\" fill=\"none\">\r\n                <path\r\n                  fill-rule=\"evenodd\"\r\n                  clip-rule=\"evenodd\"\r\n                  d=\"M11.179 11.8294C9.99493 12.8275 8.45902 13.43 6.78069 13.43C3.03582 13.43 0 10.4303 0 6.72997C0 3.02966 3.03582 0.0299683 6.78069 0.0299683C8.45902 0.0299683 9.99493 0.632466 11.179 1.63051C12.363 0.632466 13.8989 0.0299683 15.5773 0.0299683C19.3221 0.0299683 22.358 3.02966 22.358 6.72997C22.358 10.4303 19.3221 13.43 15.5773 13.43C13.8989 13.43 12.363 12.8275 11.179 11.8294Z\"\r\n                  fill=\"#ED0006\"\r\n                />\r\n                <path\r\n                  fill-rule=\"evenodd\"\r\n                  clip-rule=\"evenodd\"\r\n                  d=\"M11.179 11.8294C12.6369 10.6005 13.5614 8.77192 13.5614 6.72997C13.5614 4.68801 12.6369 2.85941 11.179 1.63051C12.363 0.632465 13.8989 0.0299683 15.5772 0.0299683C19.3221 0.0299683 22.3579 3.02966 22.3579 6.72997C22.3579 10.4303 19.3221 13.43 15.5772 13.43C13.8989 13.43 12.363 12.8275 11.179 11.8294Z\"\r\n                  fill=\"#F9A000\"\r\n                />\r\n                <path\r\n                  fill-rule=\"evenodd\"\r\n                  clip-rule=\"evenodd\"\r\n                  d=\"M11.179 11.8294C12.6369 10.6005 13.5614 8.77193 13.5614 6.72999C13.5614 4.68805 12.6369 2.85946 11.179 1.63055C9.72109 2.85946 8.79663 4.68805 8.79663 6.72999C8.79663 8.77193 9.72109 10.6005 11.179 11.8294Z\"\r\n                  fill=\"#FF5E00\"\r\n                />\r\n              </svg>\r\n              <input\r\n                class={`content text-md-regular ${this.type} ${this.state}`}\r\n                type=\"text\"\r\n                placeholder={this.placeholder ? this.placeholder : ''}\r\n                onInput={event => this.handleInput(event)}\r\n              />\r\n              <>\r\n                {this.showValidation && !this.destructive && (\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                    <path\r\n                      d=\"M4.16675 12.0833C4.16675 12.0833 5.41675 12.0833 7.08341 15C7.08341 15 11.7158 7.36112 15.8334 5.83334\"\r\n                      stroke=\"#079455\"\r\n                      stroke-width=\"1.5\"\r\n                      stroke-linecap=\"round\"\r\n                      stroke-linejoin=\"round\"\r\n                    />\r\n                  </svg>\r\n                )}\r\n                {this.showHelpIcon && (\r\n                  <div class={`help_circle`}>\r\n                    {!this.destructive ? (\r\n                      <gb-help-tooltip show-supporting-text={true}>\r\n                        <slot name=\"tooltip_label\" slot=\"label\"></slot>\r\n                        <slot name=\"tooltip_supporting_text\" slot=\"supporting_text\"></slot>\r\n                      </gb-help-tooltip>\r\n                    ) : (\r\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                        <path\r\n                          d=\"M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z\"\r\n                          stroke=\"#B51726\"\r\n                          stroke-width=\"1.33333\"\r\n                          stroke-linecap=\"round\"\r\n                          stroke-linejoin=\"round\"\r\n                        />\r\n                      </svg>\r\n                    )}\r\n                  </div>\r\n                )}\r\n              </>\r\n            </div>\r\n          )}\r\n          {this.type === 'trailing_button' && (\r\n            <div class={`input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}`}>\r\n              <div class={`trailing_button_text_input`}>\r\n                <input\r\n                  class={`content text-md-regular ${this.type} ${this.state}`}\r\n                  type=\"text\"\r\n                  placeholder={this.placeholder ? this.placeholder : ''}\r\n                  onInput={event => this.handleInput(event)}\r\n                />\r\n                {this.showValidation && !this.destructive && (\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                    <path\r\n                      d=\"M4.16675 12.0833C4.16675 12.0833 5.41675 12.0833 7.08341 15C7.08341 15 11.7158 7.36112 15.8334 5.83334\"\r\n                      stroke=\"#079455\"\r\n                      stroke-width=\"1.5\"\r\n                      stroke-linecap=\"round\"\r\n                      stroke-linejoin=\"round\"\r\n                    />\r\n                  </svg>\r\n                )}\r\n                {this.showHelpIcon && (\r\n                  <div class={`help_circle`}>\r\n                    {!this.destructive ? (\r\n                      <gb-help-tooltip show-supporting-text={true}>\r\n                        <slot name=\"tooltip_label\" slot=\"label\"></slot>\r\n                        <slot name=\"tooltip_supporting_text\" slot=\"supporting_text\"></slot>\r\n                      </gb-help-tooltip>\r\n                    ) : (\r\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                        <path\r\n                          d=\"M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z\"\r\n                          stroke=\"#B51726\"\r\n                          stroke-width=\"1.33333\"\r\n                          stroke-linecap=\"round\"\r\n                          stroke-linejoin=\"round\"\r\n                        />\r\n                      </svg>\r\n                    )}\r\n                  </div>\r\n                )}\r\n              </div>\r\n              <gb-button\r\n                size=\"lg\"\r\n                hierarchy=\"tertiary_gray\"\r\n                icon=\"only\"\r\n                state={this.state === 'disabled' ? 'disabled' : 'default'}\r\n                icon-leading={true}\r\n                icon-leading-swap=\"assets/copy-01.svg\"\r\n              ></gb-button>\r\n            </div>\r\n          )}\r\n          {this.type === 'password' && (\r\n            <div class={`password_input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}`}>\r\n              <div class={`password_content`}>\r\n                <input\r\n                  class={`content text-md-regular ${this.type} ${this.state}`}\r\n                  type={this.isPasswordVisible ? 'text' : 'password'}\r\n                  placeholder={this.placeholder ? this.placeholder : ''}\r\n                  onInput={event => this.handleInput(event)}\r\n                />\r\n                {this.showValidation && !this.destructive && (\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                    <path\r\n                      d=\"M4.16675 12.0833C4.16675 12.0833 5.41675 12.0833 7.08341 15C7.08341 15 11.7158 7.36112 15.8334 5.83334\"\r\n                      stroke=\"#079455\"\r\n                      stroke-width=\"1.5\"\r\n                      stroke-linecap=\"round\"\r\n                      stroke-linejoin=\"round\"\r\n                    />\r\n                  </svg>\r\n                )}\r\n                {this.showHelpIcon && (\r\n                  <div class={`help_circle`}>\r\n                    {!this.destructive ? (\r\n                      <gb-help-tooltip show-supporting-text={true}>\r\n                        <slot name=\"tooltip_label\" slot=\"label\"></slot>\r\n                        <slot name=\"tooltip_supporting_text\" slot=\"supporting_text\"></slot>\r\n                      </gb-help-tooltip>\r\n                    ) : (\r\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                        <path\r\n                          d=\"M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z\"\r\n                          stroke=\"#B51726\"\r\n                          stroke-width=\"1.33333\"\r\n                          stroke-linecap=\"round\"\r\n                          stroke-linejoin=\"round\"\r\n                        />\r\n                      </svg>\r\n                    )}\r\n                  </div>\r\n                )}\r\n              </div>\r\n              <div class={`dropdown`}>\r\n                <gb-password-button onClick={() => this.togglePasswordVisibility()}></gb-password-button>\r\n              </div>\r\n            </div>\r\n          )}\r\n          {this.type === 'password_icon_leading' && (\r\n            <div class={`input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}`}>\r\n              <div class={`password_icon_leading_content`}>\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                  <path\r\n                    d=\"M12.0759 12.1667C11.6617 12.1667 11.3259 12.5025 11.3259 12.9167C11.3259 13.3309 11.6617 13.6667 12.0759 13.6667V12.1667ZM12.0833 13.6667C12.4976 13.6667 12.8333 13.3309 12.8333 12.9167C12.8333 12.5025 12.4976 12.1667 12.0833 12.1667V13.6667ZM7.91668 12.1667C7.50246 12.1667 7.16668 12.5025 7.16668 12.9167C7.16668 13.3309 7.50246 13.6667 7.91668 13.6667V12.1667ZM7.92415 13.6667C8.33836 13.6667 8.67415 13.3309 8.67415 12.9167C8.67415 12.5025 8.33836 12.1667 7.92415 12.1667V13.6667ZM16.4435 10.1294L17.1868 10.0293L16.4435 10.1294ZM13.7003 7.58258L13.7347 6.83337L13.7003 7.58258ZM13.7003 18.2508L13.7347 19L13.7003 18.2508ZM16.4435 15.704L15.7002 15.6039L16.4435 15.704ZM6.29973 7.58258L6.33417 8.33179L6.29973 7.58258ZM3.55652 10.1294L2.81323 10.0293L3.55652 10.1294ZM6.29973 18.2508L6.33417 17.5015L6.29973 18.2508ZM3.55652 15.704L4.29981 15.6039L3.55652 15.704ZM5.50001 7.5C5.50001 7.91422 5.8358 8.25 6.25001 8.25C6.66422 8.25 7.00001 7.91422 7.00001 7.5H5.50001ZM13 7.5C13 7.91422 13.3358 8.25 13.75 8.25C14.1642 8.25 14.5 7.91422 14.5 7.5H13ZM12.0759 13.6667H12.0833V12.1667H12.0759V13.6667ZM7.91668 13.6667H7.92415V12.1667H7.91668V13.6667ZM10 17.5833C8.69057 17.5833 7.50287 17.5553 6.33417 17.5015L6.26528 19C7.45761 19.0548 8.66829 19.0833 10 19.0833V17.5833ZM13.6659 17.5015C12.4972 17.5553 11.3094 17.5833 10 17.5833V19.0833C11.3317 19.0833 12.5424 19.0548 13.7347 19L13.6659 17.5015ZM17.1868 15.804C17.3105 14.8853 17.4167 13.9152 17.4167 12.9167H15.9167C15.9167 13.8142 15.8211 14.7058 15.7002 15.6039L17.1868 15.804ZM17.4167 12.9167C17.4167 11.9181 17.3105 10.948 17.1868 10.0293L15.7002 10.2295C15.8211 11.1275 15.9167 12.0192 15.9167 12.9167H17.4167ZM10 8.25C11.3095 8.25 12.4972 8.27806 13.6659 8.33179L13.7347 6.83337C12.5424 6.77856 11.3317 6.75 10 6.75V8.25ZM6.33417 8.33179C7.50287 8.27806 8.69057 8.25 10 8.25V6.75C8.66829 6.75 7.45761 6.77856 6.26528 6.83337L6.33417 8.33179ZM2.81323 10.0293C2.68953 10.948 2.58334 11.9181 2.58334 12.9167H4.08334C4.08334 12.0192 4.1789 11.1275 4.29981 10.2295L2.81323 10.0293ZM2.58334 12.9167C2.58334 13.9152 2.68953 14.8853 2.81323 15.804L4.29981 15.6039C4.1789 14.7058 4.08334 13.8142 4.08334 12.9167H2.58334ZM17.1868 10.0293C16.9527 8.29067 15.5122 6.91509 13.7347 6.83337L13.6659 8.33179C14.6943 8.37907 15.5595 9.18437 15.7002 10.2295L17.1868 10.0293ZM13.7347 19C15.5122 18.9183 16.9527 17.5427 17.1868 15.804L15.7002 15.6039C15.5595 16.649 14.6943 17.4543 13.6659 17.5015L13.7347 19ZM6.26528 6.83337C4.48781 6.91508 3.04732 8.29067 2.81323 10.0293L4.29981 10.2295C4.44052 9.18437 5.30576 8.37907 6.33417 8.33179L6.26528 6.83337ZM6.33417 17.5015C5.30576 17.4543 4.44052 16.649 4.29981 15.6039L2.81323 15.804C3.04732 17.5427 4.48782 18.9183 6.26528 19L6.33417 17.5015ZM7.00001 7.5V5.41667H5.50001V7.5H7.00001ZM13 5.41667V7.5H14.5V5.41667H13ZM10 2.41667C11.6569 2.41667 13 3.75981 13 5.41667H14.5C14.5 2.93139 12.4853 0.916668 10 0.916668V2.41667ZM7.00001 5.41667C7.00001 3.75981 8.34316 2.41667 10 2.41667V0.916668C7.51473 0.916668 5.50001 2.93139 5.50001 5.41667H7.00001Z\"\r\n                    fill=\"#4B5565\"\r\n                  />\r\n                </svg>\r\n                <input\r\n                  class={`content text-md-regular ${this.type} ${this.state}`}\r\n                  type={this.isPasswordVisible ? 'text' : 'password'}\r\n                  placeholder={this.placeholder ? this.placeholder : ''}\r\n                  onInput={event => this.handleInput(event)}\r\n                />\r\n              </div>\r\n              {this.showValidation && !this.destructive && (\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                  <path\r\n                    d=\"M4.16675 12.0833C4.16675 12.0833 5.41675 12.0833 7.08341 15C7.08341 15 11.7158 7.36112 15.8334 5.83334\"\r\n                    stroke=\"#079455\"\r\n                    stroke-width=\"1.5\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  />\r\n                </svg>\r\n              )}\r\n              {this.showHelpIcon && (\r\n                <div class={`help_circle`}>\r\n                  {!this.destructive ? (\r\n                    <gb-help-tooltip show-supporting-text={true}>\r\n                      <slot name=\"tooltip_label\" slot=\"label\"></slot>\r\n                      <slot name=\"tooltip_supporting_text\" slot=\"supporting_text\"></slot>\r\n                    </gb-help-tooltip>\r\n                  ) : (\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                      <path\r\n                        d=\"M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z\"\r\n                        stroke=\"#B51726\"\r\n                        stroke-width=\"1.33333\"\r\n                        stroke-linecap=\"round\"\r\n                        stroke-linejoin=\"round\"\r\n                      />\r\n                    </svg>\r\n                  )}\r\n                </div>\r\n              )}\r\n              <gb-password-button onClick={() => this.togglePasswordVisibility()}></gb-password-button>\r\n            </div>\r\n          )}\r\n          {this.type === 'count' && [\r\n            <div class={`count_input`}>\r\n              <div class={`count_text_input ${this.destructive ? 'destructive' : ''} ${this.state}`}>\r\n                <input\r\n                  class={`content text-md-regular ${this.type} ${this.state}`}\r\n                  type=\"text\"\r\n                  placeholder={this.placeholder ? this.placeholder : ''}\r\n                  onInput={event => this.handleInput(event)}\r\n                />\r\n                {this.showHelpIcon && (\r\n                  <div class={`help_circle`}>\r\n                    {!this.destructive ? (\r\n                      <gb-help-tooltip show-supporting-text={true}>\r\n                        <slot name=\"tooltip_label\" slot=\"label\"></slot>\r\n                        <slot name=\"tooltip_supporting_text\" slot=\"supporting_text\"></slot>\r\n                      </gb-help-tooltip>\r\n                    ) : (\r\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                        <path\r\n                          d=\"M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z\"\r\n                          stroke=\"#B51726\"\r\n                          stroke-width=\"1.33333\"\r\n                          stroke-linecap=\"round\"\r\n                          stroke-linejoin=\"round\"\r\n                        />\r\n                      </svg>\r\n                    )}\r\n                  </div>\r\n                )}\r\n              </div>\r\n              <div class={`action ${this.state}`}>\r\n                <gb-button\r\n                  size=\"xl\"\r\n                  state={this.state === 'disabled' ? 'disabled' : 'default'}\r\n                  hierarchy=\"tertiary_gray\"\r\n                  icon=\"only\"\r\n                  icon-leading=\"true\"\r\n                  icon-leading-swap=\"assets/minus_sign.svg\"\r\n                ></gb-button>\r\n                <hr />\r\n                <gb-button\r\n                  size=\"xl\"\r\n                  state={this.state === 'disabled' ? 'disabled' : 'default'}\r\n                  hierarchy=\"tertiary_gray\"\r\n                  icon=\"only\"\r\n                  icon-leading=\"true\"\r\n                  icon-leading-swap=\"assets/plus_sign.svg\"\r\n                ></gb-button>\r\n              </div>\r\n            </div>,\r\n          ]}\r\n          {this.type === 'tags' && (\r\n            <div class={`input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}`}>\r\n              <div class={`tags_display`}></div>\r\n              <input\r\n                class={`content text-md-regular ${this.type} ${this.state}`}\r\n                type=\"text\"\r\n                placeholder={this.placeholder ? this.placeholder : ''}\r\n                onInput={event => this.handleInput(event)}\r\n              />\r\n            </div>\r\n          )}\r\n        </div>\r\n        {this.showHintText && <p class=\"hint_text text-sm-regular\">{this.hintText}</p>}\r\n      </div>\r\n    );\r\n  }\r\n}"]}
+{"version":3,"file":"gb-input-field.js","sourceRoot":"","sources":["../../../src/components/gb-input-field/gb-input-field.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, State, Event, EventEmitter, Fragment, Element, getAssetPath, Watch, Listen } from '@stencil/core'\r\nimport { GeneralSizes, InputFieldTypes, StateEnum } from '../../models/reusableModels'\r\n\r\n@Component({\r\n  tag: 'gb-input-field',\r\n  styleUrl: 'gb-input-field.css',\r\n  shadow: true,\r\n})\r\nexport class GbInputField {\r\n  @Prop() size: GeneralSizes;\r\n  @Prop() type: InputFieldTypes;\r\n  @Prop() destructive: boolean = false;\r\n  @Prop() state: 'placeholder' | 'filled' | 'active' | 'disabled';\r\n  @Prop() showLabel: boolean = false;\r\n  @Prop() label: string = '';\r\n  @Prop() showHintText: boolean = false;\r\n  @Prop() hintText: string = '';\r\n  @Prop() errorText: string = '';\r\n  @Prop() showPlaceholder: boolean = false;\r\n  @Prop() placeholder: string = '';\r\n  @Prop() showHelpIcon: boolean = false;\r\n  @Prop() showValidation: boolean = false;\r\n  @Prop() iconSwap?: string;\r\n  @Prop() showCloseButton?: boolean = false;\r\n  @Prop({ mutable: true }) options: string[] = ['USD', 'NGN', 'CAD'];\r\n  @State() inputValue: string = '';\r\n  @State() tags: string[] = [];\r\n  @State() leadingIconSvg: string = '';\r\n  @State() isPasswordVisible: boolean = false;\r\n  @State() showDropdown: boolean = false;\r\n  @State() selectedItem: string = '';\r\n  @Event() tagAdded: EventEmitter<string>;\r\n  @Event() inputValueChanged: EventEmitter<string>;\r\n  @Element() el: HTMLElement;\r\n\r\n  inputRef: HTMLInputElement;\r\n  dropdownRef!: HTMLElement;\r\n\r\n  async loadIcon(iconName: string) {\r\n    const iconPath = getAssetPath(`${iconName}`);\r\n    const response = await fetch(iconPath);\r\n    const svg = await response.text();\r\n    this.leadingIconSvg = svg;\r\n  }\r\n\r\n  private copyToClipboard = () => {\r\n    if (this.inputRef) {\r\n      this.inputRef.select();\r\n      document.execCommand('copy'); // Deprecated but works in most browsers\r\n      // For modern browsers:\r\n      navigator.clipboard\r\n        .writeText(this.inputRef.value)\r\n        .then(() => {\r\n          console.log('Copied to clipboard');\r\n        })\r\n        .catch(err => {\r\n          console.error('Failed to copy: ', err);\r\n        });\r\n    }\r\n  };\r\n\r\n  @Listen('click', { target: 'document' })\r\n  handleClickOutside(event: MouseEvent) {\r\n    if (this.showDropdown && !this.el.contains(event.target as Node)) {\r\n      this.showDropdown = false;\r\n    }\r\n  }\r\n\r\n  /* Function to handle and emit the inputted values */\r\n  handleInput(event: Event) {\r\n    const target = event.target as HTMLInputElement;\r\n    this.inputValue = target.value;\r\n    this.inputValueChanged.emit(this.inputValue);\r\n  }\r\n\r\n  clearInput() {\r\n    if (this.inputRef) {\r\n      this.inputRef.value = '';\r\n    }\r\n  }\r\n\r\n  /* Function to handle and emit the inputted values */\r\n  togglePasswordVisibility() {\r\n    this.isPasswordVisible = !this.isPasswordVisible;\r\n  }\r\n\r\n  @Watch('options')\r\n  optionsChanged(newOptions: string[]) {\r\n    // Update selectedItem when options are loaded or change\r\n    if (newOptions.length > 0 && !this.selectedItem) {\r\n      this.selectedItem = newOptions[0];\r\n    }\r\n  }\r\n\r\n  isItemSelected(option) {\r\n    return this.selectedItem === option;\r\n  }\r\n\r\n  handleItemSelect(option) {\r\n    // For other types, allow only one selection\r\n    this.selectedItem = option;\r\n    this.showDropdown = false; // Close the dropdown\r\n  }\r\n\r\n  componentWillLoad() {\r\n    if (this.options && this.options.length > 0) {\r\n      this.selectedItem = this.options[0]; // Set the first item as default\r\n    }\r\n\r\n    this.loadIcon(this.iconSwap);\r\n  }\r\n\r\n  componentDidLoad() {\r\n    this.selectedItem = this.options[0];\r\n    const mainTextSlot = this.el.querySelector('[slot=\"tooltip_label\"]');\r\n    const supportingTextSlot = this.el.querySelector('[slot=\"tooltip_supporting_text\"]');\r\n\r\n    if (mainTextSlot) {\r\n      mainTextSlot.classList.add('text-xs-semi-bold');\r\n    }\r\n\r\n    if (supportingTextSlot) {\r\n      supportingTextSlot.classList.add('text-xs-regular');\r\n    }\r\n\r\n    document.addEventListener('click', this.handleClickOutside);\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    document.removeEventListener('click', this.handleClickOutside);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class={`input_container`}>\r\n        <div class={`input_with_label`}>\r\n          {this.showLabel && <p class=\"label text-sm-medium\">{this.label.charAt(0).toUpperCase() + this.label.slice(1).toLowerCase()}</p>}\r\n          {this.type === 'default' && [\r\n            <div class={`input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}`}>\r\n              <input\r\n                class={`content text-md-regular ${this.type} ${this.state}`}\r\n                type=\"text\"\r\n                placeholder={this.placeholder ? this.placeholder : ''}\r\n                onInput={event => this.handleInput(event)}\r\n              />\r\n              <>\r\n                {this.showValidation && (\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" class=\"tick\">\r\n                    <path\r\n                      d=\"M4.16675 12.0833C4.16675 12.0833 5.41675 12.0833 7.08341 15C7.08341 15 11.7158 7.36112 15.8334 5.83334\"\r\n                      stroke=\"#079455\"\r\n                      stroke-width=\"1.5\"\r\n                      stroke-linecap=\"round\"\r\n                      stroke-linejoin=\"round\"\r\n                    />\r\n                  </svg>\r\n                )}\r\n                {this.showHelpIcon && (\r\n                  <div class={`help_circle`}>\r\n                    {!this.destructive ? (\r\n                      <gb-help-tooltip show-supporting-text={true}>\r\n                        <slot name=\"tooltip_label\" slot=\"label\"></slot>\r\n                        <slot name=\"tooltip_supporting_text\" slot=\"supporting_text\"></slot>\r\n                      </gb-help-tooltip>\r\n                    ) : (\r\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                        <path\r\n                          d=\"M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z\"\r\n                          stroke=\"#B51726\"\r\n                          stroke-width=\"1.33333\"\r\n                          stroke-linecap=\"round\"\r\n                          stroke-linejoin=\"round\"\r\n                        />\r\n                      </svg>\r\n                    )}\r\n                  </div>\r\n                )}\r\n              </>\r\n            </div>,\r\n          ]}\r\n          {this.type === 'icon_leading' && [\r\n            <div class={`input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}`}>\r\n              <div class={`icon ${this.size} ${this.state}`} innerHTML={this.leadingIconSvg}></div>\r\n              <input\r\n                class={`content text-md-regular ${this.type} ${this.state}`}\r\n                type=\"text\"\r\n                placeholder={this.placeholder ? this.placeholder : ''}\r\n                onInput={event => this.handleInput(event)}\r\n                ref={el => (this.inputRef = el as HTMLInputElement)}\r\n              />\r\n              <>\r\n                {this.showValidation && !this.destructive && (\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" class=\"tick\">\r\n                    <path\r\n                      d=\"M4.16675 12.0833C4.16675 12.0833 5.41675 12.0833 7.08341 15C7.08341 15 11.7158 7.36112 15.8334 5.83334\"\r\n                      stroke=\"#079455\"\r\n                      stroke-width=\"1.5\"\r\n                      stroke-linecap=\"round\"\r\n                      stroke-linejoin=\"round\"\r\n                    />\r\n                  </svg>\r\n                )}\r\n                {this.showHelpIcon && (\r\n                  <div class={`help_circle`}>\r\n                    {!this.destructive ? (\r\n                      <gb-help-tooltip show-supporting-text={true}>\r\n                        <slot name=\"tooltip_label\" slot=\"label\"></slot>\r\n                        <slot name=\"tooltip_supporting_text\" slot=\"supporting_text\"></slot>\r\n                      </gb-help-tooltip>\r\n                    ) : (\r\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                        <path\r\n                          d=\"M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z\"\r\n                          stroke=\"#B51726\"\r\n                          stroke-width=\"1.33333\"\r\n                          stroke-linecap=\"round\"\r\n                          stroke-linejoin=\"round\"\r\n                        />\r\n                      </svg>\r\n                    )}\r\n                  </div>\r\n                )}\r\n                {this.showCloseButton && !this.destructive && (\r\n                  <gb-button\r\n                    size=\"sm\"\r\n                    hierarchy=\"tertiary_gray\"\r\n                    icon=\"only\"\r\n                    state=\"default\"\r\n                    icon-leading={true}\r\n                    icon-leading-swap=\"assets/cancel-01.svg\"\r\n                    onClick={() => this.clearInput()}\r\n                  ></gb-button>\r\n                )}\r\n              </>\r\n            </div>,\r\n          ]}\r\n          {this.type === 'leading_dropdown' && [\r\n            <div class={`input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}`}>\r\n              <div class={`leading_dropdown_dropdown`} onClick={() => (this.showDropdown = !this.showDropdown)}>\r\n                <div class={`country_icon`}>\r\n                  <img src=\"build/assets/NG.svg\" alt=\"\" />\r\n                </div>\r\n                <div class={`dropdown_text`}>\r\n                  <p class=\"text-md-regular\" style={{ color: 'var(--color-text, #4B5565)' }}>\r\n                    {this.selectedItem}\r\n                  </p>\r\n                </div>\r\n                <div class={`dropdown_arrow`}>\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                    <path\r\n                      d=\"M15 7.50004C15 7.50004 11.3176 12.5 9.99996 12.5C8.68237 12.5 5 7.5 5 7.5\"\r\n                      stroke=\"#4B5565\"\r\n                      stroke-width=\"1.66667\"\r\n                      stroke-linecap=\"round\"\r\n                      stroke-linejoin=\"round\"\r\n                    />\r\n                  </svg>\r\n                </div>\r\n              </div>\r\n              <div class={`leading_dropdown_text_input`}>\r\n                <input\r\n                  class={`content text-md-regular ${this.type} ${this.state}`}\r\n                  type=\"text\"\r\n                  placeholder={this.placeholder ? this.placeholder : ''}\r\n                  onInput={event => this.handleInput(event)}\r\n                />\r\n                {this.showValidation && !this.destructive && (\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                    <path\r\n                      d=\"M4.16675 12.0833C4.16675 12.0833 5.41675 12.0833 7.08341 15C7.08341 15 11.7158 7.36112 15.8334 5.83334\"\r\n                      stroke=\"#079455\"\r\n                      stroke-width=\"1.5\"\r\n                      stroke-linecap=\"round\"\r\n                      stroke-linejoin=\"round\"\r\n                    />\r\n                  </svg>\r\n                )}\r\n                {this.showHelpIcon && (\r\n                  <div class={`help_circle`}>\r\n                    {!this.destructive ? (\r\n                      <gb-help-tooltip show-supporting-text={true}>\r\n                        <slot name=\"tooltip_label\" slot=\"label\"></slot>\r\n                        <slot name=\"tooltip_supporting_text\" slot=\"supporting_text\"></slot>\r\n                      </gb-help-tooltip>\r\n                    ) : (\r\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                        <path\r\n                          d=\"M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z\"\r\n                          stroke=\"#B51726\"\r\n                          stroke-width=\"1.33333\"\r\n                          stroke-linecap=\"round\"\r\n                          stroke-linejoin=\"round\"\r\n                        />\r\n                      </svg>\r\n                    )}\r\n                  </div>\r\n                )}\r\n              </div>\r\n            </div>,\r\n            <>\r\n              {this.showDropdown && (\r\n                <div class={`dropdown_menu ${this.type} ${this.size}`} ref={el => (this.dropdownRef = el)}>\r\n                  {this.options.map(option => (\r\n                    <gb-input-dropdown-menu-item type=\"default\" state={StateEnum.Default} selected={this.isItemSelected(option)} onClick={() => this.handleItemSelect(option)}>\r\n                      <p slot=\"name\">{option}</p>\r\n                    </gb-input-dropdown-menu-item>\r\n                  ))}\r\n                </div>\r\n              )}\r\n            </>,\r\n          ]}\r\n          {this.type === 'trailing_dropdown' && [\r\n            <div class={`input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}`}>\r\n              <div class={`trailing_dropdown_content`}>\r\n                <p class=\"text-md-regular\" style={{ color: 'var(--color-text, #4B5565)' }}>\r\n                  $\r\n                </p>\r\n                <input\r\n                  class={`content text-md-regular ${this.type} ${this.state}`}\r\n                  type=\"text\"\r\n                  placeholder={this.placeholder ? this.placeholder : ''}\r\n                  onInput={event => this.handleInput(event)}\r\n                />\r\n                {this.showHelpIcon && (\r\n                  <div class={`help_circle`}>\r\n                    {!this.destructive ? (\r\n                      <gb-help-tooltip show-supporting-text={true}>\r\n                        <slot name=\"tooltip_label\" slot=\"label\"></slot>\r\n                        <slot name=\"tooltip_supporting_text\" slot=\"supporting_text\"></slot>\r\n                      </gb-help-tooltip>\r\n                    ) : (\r\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                        <path\r\n                          d=\"M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z\"\r\n                          stroke=\"#B51726\"\r\n                          stroke-width=\"1.33333\"\r\n                          stroke-linecap=\"round\"\r\n                          stroke-linejoin=\"round\"\r\n                        />\r\n                      </svg>\r\n                    )}\r\n                  </div>\r\n                )}\r\n              </div>\r\n              <div class={`trailing_dropdown_dropdown`} onClick={() => (this.showDropdown = !this.showDropdown)}>\r\n                <div class={`dropdown_text`}>\r\n                  <p class=\"text-md-regular\" style={{ color: 'var(--color-text, #4B5565)' }}>\r\n                    {this.selectedItem}\r\n                  </p>\r\n                </div>\r\n                <div class={`dropdown_arrow`}>\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                    <path\r\n                      d=\"M15 7.50004C15 7.50004 11.3176 12.5 9.99996 12.5C8.68237 12.5 5 7.5 5 7.5\"\r\n                      stroke=\"#4B5565\"\r\n                      stroke-width=\"1.66667\"\r\n                      stroke-linecap=\"round\"\r\n                      stroke-linejoin=\"round\"\r\n                    />\r\n                  </svg>\r\n                </div>\r\n              </div>\r\n            </div>,\r\n            <>\r\n              {this.showDropdown && (\r\n                <div class={`dropdown_menu ${this.type} ${this.size}`} ref={el => (this.dropdownRef = el)}>\r\n                  {this.options.map(option => (\r\n                    <gb-input-dropdown-menu-item type=\"default\" state={StateEnum.Default} selected={this.isItemSelected(option)} onClick={() => this.handleItemSelect(option)}>\r\n                      <p slot=\"name\">{option}</p>\r\n                    </gb-input-dropdown-menu-item>\r\n                  ))}\r\n                </div>\r\n              )}\r\n            </>,\r\n          ]}\r\n          {this.type === 'leading_text' && [\r\n            <div class=\"leading_text_input\">\r\n              <div class={`add_on`}>\r\n                <p class={`text-md-regular`} style={{ color: this.state === 'disabled' ? 'var(--color-text-disabled, #CDD5DF)' : 'var(--color-text, #4B5565)' }}>\r\n                  http://\r\n                </p>\r\n              </div>\r\n              <div class={`input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}`}>\r\n                <input\r\n                  class={`content text-md-regular ${this.type} ${this.state}`}\r\n                  type=\"text\"\r\n                  placeholder={this.placeholder ? this.placeholder : ''}\r\n                  onInput={event => this.handleInput(event)}\r\n                />\r\n                {this.showValidation && !this.destructive && (\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                    <path\r\n                      d=\"M4.16675 12.0833C4.16675 12.0833 5.41675 12.0833 7.08341 15C7.08341 15 11.7158 7.36112 15.8334 5.83334\"\r\n                      stroke=\"#079455\"\r\n                      stroke-width=\"1.5\"\r\n                      stroke-linecap=\"round\"\r\n                      stroke-linejoin=\"round\"\r\n                    />\r\n                  </svg>\r\n                )}\r\n                {this.showHelpIcon && (\r\n                  <div class={`help_circle`}>\r\n                    {!this.destructive ? (\r\n                      <gb-help-tooltip show-supporting-text={true}>\r\n                        <slot name=\"tooltip_label\" slot=\"label\"></slot>\r\n                        <slot name=\"tooltip_supporting_text\" slot=\"supporting_text\"></slot>\r\n                      </gb-help-tooltip>\r\n                    ) : (\r\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                        <path\r\n                          d=\"M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z\"\r\n                          stroke=\"#B51726\"\r\n                          stroke-width=\"1.33333\"\r\n                          stroke-linecap=\"round\"\r\n                          stroke-linejoin=\"round\"\r\n                        />\r\n                      </svg>\r\n                    )}\r\n                  </div>\r\n                )}\r\n              </div>\r\n            </div>,\r\n          ]}\r\n          {this.type === 'payment_input' && (\r\n            <div class={`input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}`}>\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"23\" height=\"14\" viewBox=\"0 0 23 14\" fill=\"none\">\r\n                <path\r\n                  fill-rule=\"evenodd\"\r\n                  clip-rule=\"evenodd\"\r\n                  d=\"M11.179 11.8294C9.99493 12.8275 8.45902 13.43 6.78069 13.43C3.03582 13.43 0 10.4303 0 6.72997C0 3.02966 3.03582 0.0299683 6.78069 0.0299683C8.45902 0.0299683 9.99493 0.632466 11.179 1.63051C12.363 0.632466 13.8989 0.0299683 15.5773 0.0299683C19.3221 0.0299683 22.358 3.02966 22.358 6.72997C22.358 10.4303 19.3221 13.43 15.5773 13.43C13.8989 13.43 12.363 12.8275 11.179 11.8294Z\"\r\n                  fill=\"#ED0006\"\r\n                />\r\n                <path\r\n                  fill-rule=\"evenodd\"\r\n                  clip-rule=\"evenodd\"\r\n                  d=\"M11.179 11.8294C12.6369 10.6005 13.5614 8.77192 13.5614 6.72997C13.5614 4.68801 12.6369 2.85941 11.179 1.63051C12.363 0.632465 13.8989 0.0299683 15.5772 0.0299683C19.3221 0.0299683 22.3579 3.02966 22.3579 6.72997C22.3579 10.4303 19.3221 13.43 15.5772 13.43C13.8989 13.43 12.363 12.8275 11.179 11.8294Z\"\r\n                  fill=\"#F9A000\"\r\n                />\r\n                <path\r\n                  fill-rule=\"evenodd\"\r\n                  clip-rule=\"evenodd\"\r\n                  d=\"M11.179 11.8294C12.6369 10.6005 13.5614 8.77193 13.5614 6.72999C13.5614 4.68805 12.6369 2.85946 11.179 1.63055C9.72109 2.85946 8.79663 4.68805 8.79663 6.72999C8.79663 8.77193 9.72109 10.6005 11.179 11.8294Z\"\r\n                  fill=\"#FF5E00\"\r\n                />\r\n              </svg>\r\n              <input\r\n                class={`content text-md-regular ${this.type} ${this.state}`}\r\n                type=\"text\"\r\n                placeholder={this.placeholder ? this.placeholder : ''}\r\n                onInput={event => this.handleInput(event)}\r\n              />\r\n              <>\r\n                {this.showValidation && !this.destructive && (\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                    <path\r\n                      d=\"M4.16675 12.0833C4.16675 12.0833 5.41675 12.0833 7.08341 15C7.08341 15 11.7158 7.36112 15.8334 5.83334\"\r\n                      stroke=\"#079455\"\r\n                      stroke-width=\"1.5\"\r\n                      stroke-linecap=\"round\"\r\n                      stroke-linejoin=\"round\"\r\n                    />\r\n                  </svg>\r\n                )}\r\n                {this.showHelpIcon && (\r\n                  <div class={`help_circle`}>\r\n                    {!this.destructive ? (\r\n                      <gb-help-tooltip show-supporting-text={true}>\r\n                        <slot name=\"tooltip_label\" slot=\"label\"></slot>\r\n                        <slot name=\"tooltip_supporting_text\" slot=\"supporting_text\"></slot>\r\n                      </gb-help-tooltip>\r\n                    ) : (\r\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                        <path\r\n                          d=\"M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z\"\r\n                          stroke=\"#B51726\"\r\n                          stroke-width=\"1.33333\"\r\n                          stroke-linecap=\"round\"\r\n                          stroke-linejoin=\"round\"\r\n                        />\r\n                      </svg>\r\n                    )}\r\n                  </div>\r\n                )}\r\n              </>\r\n            </div>\r\n          )}\r\n          {this.type === 'trailing_button' && (\r\n            <div class={`input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}`}>\r\n              <div class={`trailing_button_text_input ${this.size}`}>\r\n                <input\r\n                  class={`content text-md-regular ${this.type} ${this.state}`}\r\n                  type=\"text\"\r\n                  placeholder={this.placeholder ? this.placeholder : ''}\r\n                  onInput={event => this.handleInput(event)}\r\n                  ref={el => (this.inputRef = el as HTMLInputElement)}\r\n                />\r\n                {this.showValidation && !this.destructive && (\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                    <path\r\n                      d=\"M4.16675 12.0833C4.16675 12.0833 5.41675 12.0833 7.08341 15C7.08341 15 11.7158 7.36112 15.8334 5.83334\"\r\n                      stroke=\"#079455\"\r\n                      stroke-width=\"1.5\"\r\n                      stroke-linecap=\"round\"\r\n                      stroke-linejoin=\"round\"\r\n                    />\r\n                  </svg>\r\n                )}\r\n                {this.showHelpIcon && (\r\n                  <div class={`help_circle`}>\r\n                    {!this.destructive ? (\r\n                      <gb-help-tooltip show-supporting-text={true}>\r\n                        <slot name=\"tooltip_label\" slot=\"label\"></slot>\r\n                        <slot name=\"tooltip_supporting_text\" slot=\"supporting_text\"></slot>\r\n                      </gb-help-tooltip>\r\n                    ) : (\r\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                        <path\r\n                          d=\"M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z\"\r\n                          stroke=\"#B51726\"\r\n                          stroke-width=\"1.33333\"\r\n                          stroke-linecap=\"round\"\r\n                          stroke-linejoin=\"round\"\r\n                        />\r\n                      </svg>\r\n                    )}\r\n                  </div>\r\n                )}\r\n              </div>\r\n              <gb-button\r\n                size=\"lg\"\r\n                hierarchy=\"tertiary_gray\"\r\n                icon=\"only\"\r\n                state={this.state === 'disabled' ? 'disabled' : 'default'}\r\n                icon-leading={true}\r\n                icon-leading-swap=\"assets/copy-01.svg\"\r\n                onClick={() => this.copyToClipboard()}\r\n              ></gb-button>\r\n            </div>\r\n          )}\r\n          {this.type === 'password' && (\r\n            <div class={`password_input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}`}>\r\n              <div class={`password_content`}>\r\n                <input\r\n                  class={`content text-md-regular ${this.type} ${this.state}`}\r\n                  type={this.isPasswordVisible ? 'text' : 'password'}\r\n                  placeholder={this.placeholder ? this.placeholder : ''}\r\n                  onInput={event => this.handleInput(event)}\r\n                />\r\n                {this.showValidation && !this.destructive && (\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                    <path\r\n                      d=\"M4.16675 12.0833C4.16675 12.0833 5.41675 12.0833 7.08341 15C7.08341 15 11.7158 7.36112 15.8334 5.83334\"\r\n                      stroke=\"#079455\"\r\n                      stroke-width=\"1.5\"\r\n                      stroke-linecap=\"round\"\r\n                      stroke-linejoin=\"round\"\r\n                    />\r\n                  </svg>\r\n                )}\r\n                {this.showHelpIcon && (\r\n                  <div class={`help_circle`}>\r\n                    {!this.destructive ? (\r\n                      <gb-help-tooltip show-supporting-text={true}>\r\n                        <slot name=\"tooltip_label\" slot=\"label\"></slot>\r\n                        <slot name=\"tooltip_supporting_text\" slot=\"supporting_text\"></slot>\r\n                      </gb-help-tooltip>\r\n                    ) : (\r\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                        <path\r\n                          d=\"M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z\"\r\n                          stroke=\"#B51726\"\r\n                          stroke-width=\"1.33333\"\r\n                          stroke-linecap=\"round\"\r\n                          stroke-linejoin=\"round\"\r\n                        />\r\n                      </svg>\r\n                    )}\r\n                  </div>\r\n                )}\r\n              </div>\r\n              <div class={`dropdown`}>\r\n                <gb-password-button onClick={() => this.togglePasswordVisibility()}></gb-password-button>\r\n              </div>\r\n            </div>\r\n          )}\r\n          {this.type === 'password_icon_leading' && (\r\n            <div class={`password_icon_leading_input input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}`}>\r\n              <div class={`password_icon_leading_content`}>\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                  <path\r\n                    d=\"M12.0759 12.1667C11.6617 12.1667 11.3259 12.5025 11.3259 12.9167C11.3259 13.3309 11.6617 13.6667 12.0759 13.6667V12.1667ZM12.0833 13.6667C12.4976 13.6667 12.8333 13.3309 12.8333 12.9167C12.8333 12.5025 12.4976 12.1667 12.0833 12.1667V13.6667ZM7.91668 12.1667C7.50246 12.1667 7.16668 12.5025 7.16668 12.9167C7.16668 13.3309 7.50246 13.6667 7.91668 13.6667V12.1667ZM7.92415 13.6667C8.33836 13.6667 8.67415 13.3309 8.67415 12.9167C8.67415 12.5025 8.33836 12.1667 7.92415 12.1667V13.6667ZM16.4435 10.1294L17.1868 10.0293L16.4435 10.1294ZM13.7003 7.58258L13.7347 6.83337L13.7003 7.58258ZM13.7003 18.2508L13.7347 19L13.7003 18.2508ZM16.4435 15.704L15.7002 15.6039L16.4435 15.704ZM6.29973 7.58258L6.33417 8.33179L6.29973 7.58258ZM3.55652 10.1294L2.81323 10.0293L3.55652 10.1294ZM6.29973 18.2508L6.33417 17.5015L6.29973 18.2508ZM3.55652 15.704L4.29981 15.6039L3.55652 15.704ZM5.50001 7.5C5.50001 7.91422 5.8358 8.25 6.25001 8.25C6.66422 8.25 7.00001 7.91422 7.00001 7.5H5.50001ZM13 7.5C13 7.91422 13.3358 8.25 13.75 8.25C14.1642 8.25 14.5 7.91422 14.5 7.5H13ZM12.0759 13.6667H12.0833V12.1667H12.0759V13.6667ZM7.91668 13.6667H7.92415V12.1667H7.91668V13.6667ZM10 17.5833C8.69057 17.5833 7.50287 17.5553 6.33417 17.5015L6.26528 19C7.45761 19.0548 8.66829 19.0833 10 19.0833V17.5833ZM13.6659 17.5015C12.4972 17.5553 11.3094 17.5833 10 17.5833V19.0833C11.3317 19.0833 12.5424 19.0548 13.7347 19L13.6659 17.5015ZM17.1868 15.804C17.3105 14.8853 17.4167 13.9152 17.4167 12.9167H15.9167C15.9167 13.8142 15.8211 14.7058 15.7002 15.6039L17.1868 15.804ZM17.4167 12.9167C17.4167 11.9181 17.3105 10.948 17.1868 10.0293L15.7002 10.2295C15.8211 11.1275 15.9167 12.0192 15.9167 12.9167H17.4167ZM10 8.25C11.3095 8.25 12.4972 8.27806 13.6659 8.33179L13.7347 6.83337C12.5424 6.77856 11.3317 6.75 10 6.75V8.25ZM6.33417 8.33179C7.50287 8.27806 8.69057 8.25 10 8.25V6.75C8.66829 6.75 7.45761 6.77856 6.26528 6.83337L6.33417 8.33179ZM2.81323 10.0293C2.68953 10.948 2.58334 11.9181 2.58334 12.9167H4.08334C4.08334 12.0192 4.1789 11.1275 4.29981 10.2295L2.81323 10.0293ZM2.58334 12.9167C2.58334 13.9152 2.68953 14.8853 2.81323 15.804L4.29981 15.6039C4.1789 14.7058 4.08334 13.8142 4.08334 12.9167H2.58334ZM17.1868 10.0293C16.9527 8.29067 15.5122 6.91509 13.7347 6.83337L13.6659 8.33179C14.6943 8.37907 15.5595 9.18437 15.7002 10.2295L17.1868 10.0293ZM13.7347 19C15.5122 18.9183 16.9527 17.5427 17.1868 15.804L15.7002 15.6039C15.5595 16.649 14.6943 17.4543 13.6659 17.5015L13.7347 19ZM6.26528 6.83337C4.48781 6.91508 3.04732 8.29067 2.81323 10.0293L4.29981 10.2295C4.44052 9.18437 5.30576 8.37907 6.33417 8.33179L6.26528 6.83337ZM6.33417 17.5015C5.30576 17.4543 4.44052 16.649 4.29981 15.6039L2.81323 15.804C3.04732 17.5427 4.48782 18.9183 6.26528 19L6.33417 17.5015ZM7.00001 7.5V5.41667H5.50001V7.5H7.00001ZM13 5.41667V7.5H14.5V5.41667H13ZM10 2.41667C11.6569 2.41667 13 3.75981 13 5.41667H14.5C14.5 2.93139 12.4853 0.916668 10 0.916668V2.41667ZM7.00001 5.41667C7.00001 3.75981 8.34316 2.41667 10 2.41667V0.916668C7.51473 0.916668 5.50001 2.93139 5.50001 5.41667H7.00001Z\"\r\n                    fill=\"#4B5565\"\r\n                  />\r\n                </svg>\r\n                <input\r\n                  class={`content text-md-regular ${this.type} ${this.state}`}\r\n                  type={this.isPasswordVisible ? 'text' : 'password'}\r\n                  placeholder={this.placeholder ? this.placeholder : ''}\r\n                  onInput={event => this.handleInput(event)}\r\n                />\r\n              </div>\r\n              {this.showValidation && !this.destructive && (\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                  <path\r\n                    d=\"M4.16675 12.0833C4.16675 12.0833 5.41675 12.0833 7.08341 15C7.08341 15 11.7158 7.36112 15.8334 5.83334\"\r\n                    stroke=\"#079455\"\r\n                    stroke-width=\"1.5\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  />\r\n                </svg>\r\n              )}\r\n              {this.showHelpIcon && (\r\n                <div class={`help_circle`}>\r\n                  {!this.destructive ? (\r\n                    <gb-help-tooltip show-supporting-text={true}>\r\n                      <slot name=\"tooltip_label\" slot=\"label\"></slot>\r\n                      <slot name=\"tooltip_supporting_text\" slot=\"supporting_text\"></slot>\r\n                    </gb-help-tooltip>\r\n                  ) : (\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                      <path\r\n                        d=\"M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z\"\r\n                        stroke=\"#B51726\"\r\n                        stroke-width=\"1.33333\"\r\n                        stroke-linecap=\"round\"\r\n                        stroke-linejoin=\"round\"\r\n                      />\r\n                    </svg>\r\n                  )}\r\n                </div>\r\n              )}\r\n              <gb-password-button onClick={() => this.togglePasswordVisibility()}></gb-password-button>\r\n            </div>\r\n          )}\r\n          {this.type === 'count' && [\r\n            <div class={`count_input`}>\r\n              <div class={`count_text_input ${this.destructive ? 'destructive' : ''} ${this.state}`}>\r\n                <input\r\n                  class={`content text-md-regular ${this.type} ${this.state}`}\r\n                  type=\"text\"\r\n                  placeholder={this.placeholder ? this.placeholder : ''}\r\n                  onInput={event => this.handleInput(event)}\r\n                />\r\n                {this.showHelpIcon && (\r\n                  <div class={`help_circle`}>\r\n                    {!this.destructive ? (\r\n                      <gb-help-tooltip show-supporting-text={true}>\r\n                        <slot name=\"tooltip_label\" slot=\"label\"></slot>\r\n                        <slot name=\"tooltip_supporting_text\" slot=\"supporting_text\"></slot>\r\n                      </gb-help-tooltip>\r\n                    ) : (\r\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                        <path\r\n                          d=\"M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z\"\r\n                          stroke=\"#B51726\"\r\n                          stroke-width=\"1.33333\"\r\n                          stroke-linecap=\"round\"\r\n                          stroke-linejoin=\"round\"\r\n                        />\r\n                      </svg>\r\n                    )}\r\n                  </div>\r\n                )}\r\n              </div>\r\n              <div class={`action ${this.state}`}>\r\n                <gb-button\r\n                  size=\"xl\"\r\n                  state={this.state === 'disabled' ? 'disabled' : 'default'}\r\n                  hierarchy=\"tertiary_gray\"\r\n                  icon=\"only\"\r\n                  icon-leading=\"true\"\r\n                  icon-leading-swap=\"assets/minus_sign.svg\"\r\n                ></gb-button>\r\n                <hr />\r\n                <gb-button\r\n                  size=\"xl\"\r\n                  state={this.state === 'disabled' ? 'disabled' : 'default'}\r\n                  hierarchy=\"tertiary_gray\"\r\n                  icon=\"only\"\r\n                  icon-leading=\"true\"\r\n                  icon-leading-swap=\"assets/plus_sign.svg\"\r\n                ></gb-button>\r\n              </div>\r\n            </div>,\r\n          ]}\r\n          {this.type === 'tags' && (\r\n            <div class={`input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}`}>\r\n              <div class={`tags_display`}></div>\r\n              <input\r\n                class={`content text-md-regular ${this.type} ${this.state}`}\r\n                type=\"text\"\r\n                placeholder={this.placeholder ? this.placeholder : ''}\r\n                onInput={event => this.handleInput(event)}\r\n              />\r\n            </div>\r\n          )}\r\n        </div>\r\n        {this.showHintText && <p class=\"hint_text text-sm-regular\">{this.hintText}</p>}\r\n      </div>\r\n    );\r\n  }\r\n}"]}

package/dist/collection/components/gb-megainput-field-base/gb-megainput-field.js

@@ -16,10 +16,10 @@ export class GbMegaInputField {
         }
     }
     render() {
-        return (h("div", { key: '30337e42a07643ce78fd9f2e5295abbe5de37d74', class: {
+        return (h("div", { key: 'fa75c4df030a353f9356ec6a7d027e4dd5d44bd5', class: {
                 [this.size]: true,
                 disabled: this.state === 'disabled'
-            } }, h("input", { key: 'b2d55cdee54e0500e8d1589b4bf98ea77cc80fde', class: {
+            } }, h("input", { key: '5053849cbc5a7176b997f36f2d0fcd7e6fdf7312', class: {
                 [this.size]: true,
                 disabled: this.state === 'disabled'
             }, type: "number", min: "0", max: "1", placeholder: "0", value: this.inputValue, onInput: (event) => this.handleInput(event) })));

package/dist/collection/components/gb-notification-content/gb-notification-content.css

@@ -2667,16 +2667,16 @@
     align-items: flex-start;
     gap: var(--spacing-2);
     border-radius: var(--rounded-none);
-    border-bottom: 0.6px solid #e3e8ef;
+    border-bottom: 0.6px solid var(--color-border-subtler, #E3E8EF);
 }
 
 .notification_container:hover {
-    background-color: #E4F0FC;
+    background-color: var(--color-background-information-subtlest, #E4F0FC);
 }
 
 .icon img {
-    fill: #075DB2;
-    stroke: #075DB2 ;
+    fill: var(--color-icon-selected, #075DB2);
+    stroke: var(--color-icon-selected, #075DB2);
 }
 
 label{
@@ -2711,7 +2711,7 @@ label{
 
 .supporting_text {
     padding-left: 28px;
-    color:#4B5565;
+    color:var(--color-text, #4B5565);
     overflow: hidden;
     text-overflow: ellipsis;
 }

package/dist/collection/components/gb-notification-content/gb-notification-content.js

@@ -8,7 +8,7 @@ export class GbNotificationContent {
     }
     render() {
         const iconSrc = getAssetPath(`${this.icon}`);
-        return (h("div", { key: '3d917877f608431a748f56679dddafa8c23c18e5', class: "notification_container" }, h("div", { key: '2eb8e0d25cb6bf15ff567ba466c6121f08b91712', class: "notification_title" }, this.icon && (h("div", { key: '48f403ffa588a7d1ca43fc669454379ddda85e1b', class: "icon" }, h("img", { key: '8c23934353411e5df24b53e5ea95013f2c96fb1a', src: iconSrc, alt: "Icon" }))), h("label", { key: '4eb02d36238dd6d1d200d7ce0dac622cfe88319e' }, this.label), h("span", { key: 'f86defe938f9824ccfcac7e82a082c6b725581f4', class: "time" }, this.time)), h("div", { key: '15818cd9071193b7c9ed1e7e7cf4e88ca779999e', class: "supporting_text" }, h("p", { key: 'f1bf8041404810cd2e42b9a95e52a6e2a661a4af', class: "text-sm-regular" }, this.supportingText))));
+        return (h("div", { key: '653eab29f5a3981479170239baabb521c5425cc5', class: "notification_container" }, h("div", { key: 'cb8d5fbaacd08907764eff6814e2824f6e06192a', class: "notification_title" }, this.icon && (h("div", { key: '88b77ffc28a741543c873a2fe199b972c49df9b5', class: "icon" }, h("img", { key: '32e53da55ac36249b93ab3b24d3d8e65760b6a08', src: iconSrc, alt: "Icon" }))), h("label", { key: '1a036d0b6039bbc8f391c667cfa49d02b5fc547f' }, this.label), h("span", { key: 'b042641af9ed9566292bdcbb7eeed56a559e71f1', class: "time" }, this.time)), h("div", { key: '352c1754f00694fde1070726ef3fdf776954fea5', class: "supporting_text" }, h("p", { key: 'ca7aa60ff04a3f70be094dfbf8354daeffb826e0', class: "text-sm-regular" }, this.supportingText))));
     }
     static get is() { return "gb-notification-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-notification-pane/gb-notification-pane.css

@@ -2675,32 +2675,102 @@
 .content_wrapper{
     display: flex;
     flex-direction: column;
-    width: 24.3125rem;
-    max-height: 27.5rem;
+    width: fit-content;
+    height: 24.5rem;
     overflow-y: auto;
 }
 
 ::-webkit-scrollbar{
-            right: 0rem;
-            bottom: -1.53125rem;
-            width: 0.8rem;
-            margin-top: 1rem;
-        }
-
-        ::-webkit-scrollbar-track{
-            background: #FFF;
-            width: 1rem;
-            padding: var(--spacing-1);
-        }
-
-        ::-webkit-scrollbar-thumb{
-            width: 0.5rem;
-            height: 11.75rem;
-            border: 0.25rem solid #FFF;
-            border-radius: 0.5rem;
-            background: var(--color-border-subtle, #CDD5DF);
-        }
+    right: 0rem;
+    bottom: -1.53125rem;
+    width: 0.8rem;
+    margin-top: 1rem;
+}
+
+::-webkit-scrollbar-track{
+    width: 0.5rem;
+    padding: var(--spacing-1);
+    border: none;
+}
+
+::-webkit-scrollbar-thumb{
+    width: 0.5rem;
+    height: 11.75rem;
+    border: 0.25rem solid var(--color-background-card, #FFFFFF);
+    border-radius: 0.5rem;
+    background: var(--color-border-subtle, #CDD5DF);
+}
+
+.container{
+    position: relative;
+    display: flex;
+    width: 24.3125rem;
+    height: 24.5rem;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    border-bottom: 0.5px solid var(--color-border-subtler, #E3E8EF);
+}
+
+.frame{
+    display: flex;
+    /* width: 24.8125rem; */
+    height: 26.5rem;
+    padding: var(--spacing-Positive-spacing-None, 0rem) var(--spacing-7);
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: var(--spacing-Positive-spacing-2, 0.5rem);
+    flex-shrink: 0;
+}
+
+.empty_state_pattern{
+    position: absolute;
+    top: 0;
+    right: 0;
+    mix-blend-mode: multiply;
+    /* z-index: -1; */
+}
+
+.empty_state{
+    display: flex;
+    height: 15rem;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: var(--spacing-3);
+    flex-shrink: 0;
+    align-self: stretch;
+}
+
+.content{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--spacing-5);
+    align-self: stretch;
+}
+
+.text{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    gap: var(--spacing-3);
+}
+
+.bell_icon{
+    z-index: 9;
+}
 
 .button{
     width: 100%;
+}
+
+::slotted([slot="label"]) {
+    color: var(--color-text-bold, #202939);
+}
+
+::slotted([slot="supporting_text"]) {
+    color: var(--color-text, #4B5565);
 }

package/dist/collection/components/gb-notification-pane/gb-notification-pane.js

@@ -2,7 +2,33 @@ import { h, getAssetPath } from "@stencil/core";
 export class GbNotificationPane {
     constructor() {
         this.state = undefined;
-        this.notifications = [];
+        this.notifications = [
+            {
+                label: 'Flagged transaction',
+                time: 'Just now',
+                desc: 'Aisha, here is your weekly report',
+            },
+            // {
+            //   label: 'Flagged transaction',
+            //   time: 'Just now',
+            //   desc: 'Aisha, here is your weekly report',
+            // },
+            // {
+            //   label: 'Flagged transaction',
+            //   time: 'Just now',
+            //   desc: 'Aisha, here is your weekly report',
+            // },
+            // {
+            //   label: 'Flagged transaction',
+            //   time: 'Just now',
+            //   desc: 'Aisha, here is your weekly report',
+            // },
+            // {
+            //   label: 'Flagged transaction',
+            //   time: 'Just now',
+            //   desc: 'Aisha, here is your weekly report',
+            // },
+        ];
         this.icon = '';
         this.label = '';
         this.time = '';
@@ -11,15 +37,23 @@ export class GbNotificationPane {
     markAllAsRead() {
         this.notifications.forEach(notification => notification.remove());
     }
-    handleNotificationClick(notification) {
-        notification.remove();
+    componentDidLoad() {
+        const labelSlot = this.el.querySelector('[slot="label"]');
+        const supportingTextSlot = this.el.querySelector('[slot="supporting_text"]');
+        if (labelSlot) {
+            labelSlot.classList.add('text-lg-semi-bold');
+        }
+        if (supportingTextSlot) {
+            supportingTextSlot.classList.add('text-sm-regular');
+        }
     }
     render() {
-        const illustrationSrc = getAssetPath(`assets/no_notification_frame.svg`);
-        return (h("div", { key: '05170cb88d1b88ee2b0da5578f0eb89c54c0db6f', class: "notification_pane_div" }, this.state === 'empty' && [
-            h("div", { key: '1cfe08bf709a5e384693f77a6970c303e19ad24f', class: `container` }, h("img", { key: 'ec01bedff4d3e05fa1d89239904a96d4cab9bfb3', src: illustrationSrc, alt: "" })),
-            h("div", { key: 'fcb3c6096fba60354533ccc44e3383c16e53c805', class: `button` }, h("gb-button", { key: 'd097ad0721082afbdb3aafabf90365d248c3a47e', size: "sm", hierarchy: "tertiary_color", icon: "default", state: "disabled", "icon-leading": true, "icon-leading-swap": "assets/blush_brush.svg" }, h("p", { key: '633d684939c9a3cc73a7de6cc11c6ef5f22fd831' }, "Mark all as read"))),
-        ], this.state === 'notification_dropdown' && (h("div", { key: 'b81d9f71f311f56a177994c6cda6812bc07a8a31', class: "notification_dropdown" }, h("div", { key: 'e052061c046347ec27273f3e51f76461baaceb86', class: `content_wrapper` }, h("gb-notification-content", { key: '1e6a27847dd8d88a20ecd751220660655adf3781', label: this.label, time: this.time, "supporting-text": this.supportingText, icon: this.icon })), h("gb-button", { key: '71ba2818f824e9420311f469ffff093d9c8f7629', size: "sm", hierarchy: "tertiary_color", icon: "default", "icon-leading": true, "icon-leading-swap": "assets/blush_brush.svg" }, h("p", { key: '3548f9fad794b252c0265b9c05185dd3fd41c2e3' }, "Mark all as read"))))));
+        const patternSrc = getAssetPath(`assets/notification_background_pattern.svg`);
+        const illustrationSrc = getAssetPath(`assets/notification_illustration.svg`);
+        return (h("div", { key: '28ec4b730241290191a0af2deacaa989e1f2851a', class: "notification_pane_div" }, this.state === 'empty' && [
+            h("div", { key: '3a5537eb27212d6ab4a42e49fd25d0c469a062ca', class: `container` }, h("div", { key: '257e50822926de00e665ff9988b56dde4f39df55', class: "frame" }, h("img", { key: '7cf8680e285025b203a970f7485465776f329f8f', src: patternSrc, alt: "", class: "empty_state_pattern" }), h("div", { key: '945896e42a00c9277cadee3f3a66bdc92002a4e2', class: "empty_state" }, h("div", { key: '658c614c36c3cc25769c5403fba7396e80c67b3d', class: "content" }, h("img", { key: '6e418dcf47bb5c60db5d340e82fd0e161a9dbfad', src: illustrationSrc, alt: "bell-icon", class: "bell_icon" }), h("div", { key: '1c45c09cab5c3639e2089cccd06dd32fceec2ea4', class: "text" }, h("slot", { key: 'd9e841a634bee5dd863266196200469498d0b576', name: "label" }), h("slot", { key: '212a4a259b64fa961cb7f4c3f67c9200c9d5f223', name: "supporting_text" })))))),
+            h("div", { key: '422493440cddc7ecb49cca4b013d9c4121bf83dc', class: `button` }, h("gb-button", { key: '340af60b4390891589207f4ec958b4fff70e1398', size: "sm", hierarchy: "tertiary_color", icon: "default", state: "disabled", "icon-leading": true, "icon-leading-swap": "assets/blush_brush.svg" }, h("p", { key: '99c2e431daaf290449335e8fee47f31d2d9891b3' }, "Mark all as read"))),
+        ], this.state === 'notification_dropdown' && (h("div", { key: '98a79b9b719b07fe529b2bcd3a4074c1086d25be', class: "notification_dropdown" }, h("div", { key: 'fc4194b94c05c522e99bfb5170d27f9c26ef81a6', class: `content_wrapper` }, this.notifications.map(notification => (h("gb-notification-content", { label: notification.label, time: notification.time, "supporting-text": notification.desc, icon: this.icon })))), h("gb-button", { key: 'a4537b4cc9c12d471499452706983f71019eb1e5', size: "sm", hierarchy: "tertiary_color", icon: "default", "icon-leading": true, "icon-leading-swap": "assets/blush_brush.svg" }, h("p", { key: '22e38a4faa32157f86e70d020d5a6876fb5ae8bf' }, "Mark all as read"))))));
     }
     static get is() { return "gb-notification-pane"; }
     static get encapsulation() { return "shadow"; }
@@ -66,7 +100,7 @@ export class GbNotificationPane {
                     "tags": [],
                     "text": ""
                 },
-                "defaultValue": "[]"
+                "defaultValue": "[\r\n    {\r\n      label: 'Flagged transaction',\r\n      time: 'Just now',\r\n      desc: 'Aisha, here is your weekly report',\r\n    },\r\n    // {\r\n    //   label: 'Flagged transaction',\r\n    //   time: 'Just now',\r\n    //   desc: 'Aisha, here is your weekly report',\r\n    // },\r\n    // {\r\n    //   label: 'Flagged transaction',\r\n    //   time: 'Just now',\r\n    //   desc: 'Aisha, here is your weekly report',\r\n    // },\r\n    // {\r\n    //   label: 'Flagged transaction',\r\n    //   time: 'Just now',\r\n    //   desc: 'Aisha, here is your weekly report',\r\n    // },\r\n    // {\r\n    //   label: 'Flagged transaction',\r\n    //   time: 'Just now',\r\n    //   desc: 'Aisha, here is your weekly report',\r\n    // },\r\n  ]"
             },
             "icon": {
                 "type": "string",
@@ -142,5 +176,6 @@ export class GbNotificationPane {
             }
         };
     }
+    static get elementRef() { return "el"; }
 }
 //# sourceMappingURL=gb-notification-pane.js.map

package/dist/collection/components/gb-notification-pane/gb-notification-pane.js.map

@@ -1 +1 @@
-{"version":3,"file":"gb-notification-pane.js","sourceRoot":"","sources":["../../../src/components/gb-notification-pane/gb-notification-pane.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAOhE,MAAM,OAAO,kBAAkB;;;6BAEE,EAAE;oBACV,EAAE;qBACD,EAAE;oBACH,EAAE;8BACQ,EAAE;;IAEnC,aAAa;QACX,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,YAAY,CAAC,EAAE,CAAC,YAAY,CAAC,MAAM,EAAE,CAAC,CAAC;IACpE,CAAC;IAED,uBAAuB,CAAC,YAAyB;QAC/C,YAAY,CAAC,MAAM,EAAE,CAAC;IACxB,CAAC;IAED,MAAM;QACJ,MAAM,eAAe,GAAG,YAAY,CAAC,kCAAkC,CAAC,CAAC;QAEzE,OAAO,CACL,4DAAK,KAAK,EAAC,uBAAuB;YAC/B,IAAI,CAAC,KAAK,KAAK,OAAO,IAAI;gBACzB,4DAAK,KAAK,EAAE,WAAW;oBACrB,4DAAK,GAAG,EAAE,eAAe,EAAE,GAAG,EAAC,EAAE,GAAG,CAChC;gBACN,4DAAK,KAAK,EAAE,QAAQ;oBAClB,kEAAW,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,gBAAgB,EAAC,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,UAAU,kBAAe,IAAI,uBAAoB,wBAAwB;wBAC5I,+EAAuB,CACb,CACR;aACP;YACA,IAAI,CAAC,KAAK,KAAK,uBAAuB,IAAI,CACzC,4DAAK,KAAK,EAAC,uBAAuB;gBAChC,4DAAK,KAAK,EAAE,iBAAiB;oBAC3B,gFAAyB,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,qBAAmB,IAAI,CAAC,cAAc,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAA4B,CAC1I;gBACN,kEAAW,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,gBAAgB,EAAC,IAAI,EAAC,SAAS,kBAAe,IAAI,uBAAoB,wBAAwB;oBAC3H,+EAAuB,CACb,CACR,CACP,CACG,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Prop, h, getAssetPath } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'gb-notification-pane',\r\n  styleUrl: 'gb-notification-pane.css',\r\n  shadow: true,\r\n})\r\nexport class GbNotificationPane {\r\n  @Prop() state: 'empty' | 'notification_dropdown';\r\n  @Prop() notifications: any[] = [];\r\n  @Prop() icon: string = '';\r\n  @Prop() label: string = '';\r\n  @Prop() time: string = '';\r\n  @Prop() supportingText: string = '';\r\n\r\n  markAllAsRead() {\r\n    this.notifications.forEach(notification => notification.remove());\r\n  }\r\n\r\n  handleNotificationClick(notification: HTMLElement) {\r\n    notification.remove();\r\n  }\r\n\r\n  render() {\r\n    const illustrationSrc = getAssetPath(`assets/no_notification_frame.svg`);\r\n\r\n    return (\r\n      <div class=\"notification_pane_div\">\r\n        {this.state === 'empty' && [\r\n          <div class={`container`}>\r\n            <img src={illustrationSrc} alt=\"\" />\r\n          </div>,\r\n          <div class={`button`}>\r\n            <gb-button size=\"sm\" hierarchy=\"tertiary_color\" icon=\"default\" state=\"disabled\" icon-leading={true} icon-leading-swap=\"assets/blush_brush.svg\">\r\n              <p>Mark all as read</p>\r\n            </gb-button>\r\n          </div>,\r\n        ]}\r\n        {this.state === 'notification_dropdown' && (\r\n          <div class=\"notification_dropdown\">\r\n            <div class={`content_wrapper`}>\r\n              <gb-notification-content label={this.label} time={this.time} supporting-text={this.supportingText} icon={this.icon}></gb-notification-content>\r\n            </div>\r\n            <gb-button size=\"sm\" hierarchy=\"tertiary_color\" icon=\"default\" icon-leading={true} icon-leading-swap=\"assets/blush_brush.svg\">\r\n              <p>Mark all as read</p>\r\n            </gb-button>\r\n          </div>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}"]}
+{"version":3,"file":"gb-notification-pane.js","sourceRoot":"","sources":["../../../src/components/gb-notification-pane/gb-notification-pane.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Prop, h, getAssetPath, Element } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'gb-notification-pane',\r\n  styleUrl: 'gb-notification-pane.css',\r\n  shadow: true,\r\n})\r\nexport class GbNotificationPane {\r\n  @Prop() state: 'empty' | 'notification_dropdown';\r\n  @Prop() notifications: any[] = [\r\n    {\r\n      label: 'Flagged transaction',\r\n      time: 'Just now',\r\n      desc: 'Aisha, here is your weekly report',\r\n    },\r\n    // {\r\n    //   label: 'Flagged transaction',\r\n    //   time: 'Just now',\r\n    //   desc: 'Aisha, here is your weekly report',\r\n    // },\r\n    // {\r\n    //   label: 'Flagged transaction',\r\n    //   time: 'Just now',\r\n    //   desc: 'Aisha, here is your weekly report',\r\n    // },\r\n    // {\r\n    //   label: 'Flagged transaction',\r\n    //   time: 'Just now',\r\n    //   desc: 'Aisha, here is your weekly report',\r\n    // },\r\n    // {\r\n    //   label: 'Flagged transaction',\r\n    //   time: 'Just now',\r\n    //   desc: 'Aisha, here is your weekly report',\r\n    // },\r\n  ];\r\n  @Prop() icon: string = '';\r\n  @Prop() label: string = '';\r\n  @Prop() time: string = '';\r\n  @Prop() supportingText: string = '';\r\n  @Element() el: HTMLElement;\r\n\r\n  markAllAsRead() {\r\n    this.notifications.forEach(notification => notification.remove());\r\n  }\r\n\r\n  componentDidLoad() {\r\n    const labelSlot = this.el.querySelector('[slot=\"label\"]');\r\n    const supportingTextSlot = this.el.querySelector('[slot=\"supporting_text\"]');\r\n\r\n    if (labelSlot) {\r\n      labelSlot.classList.add('text-lg-semi-bold');\r\n    }\r\n\r\n    if (supportingTextSlot) {\r\n      supportingTextSlot.classList.add('text-sm-regular');\r\n    }\r\n  }\r\n\r\n  render() {\r\n    const patternSrc = getAssetPath(`assets/notification_background_pattern.svg`);\r\n    const illustrationSrc = getAssetPath(`assets/notification_illustration.svg`);\r\n\r\n    return (\r\n      <div class=\"notification_pane_div\">\r\n        {this.state === 'empty' && [\r\n          <div class={`container`}>\r\n            <div class=\"frame\">\r\n              <img src={patternSrc} alt=\"\" class=\"empty_state_pattern\" />\r\n              <div class=\"empty_state\">\r\n                <div class=\"content\">\r\n                  <img src={illustrationSrc} alt=\"bell-icon\" class=\"bell_icon\" />\r\n                  <div class=\"text\">\r\n                    {/* <p class=\"label text-lg-semi-bold\">No notification</p>\r\n                    <p class=\"supporting_text text-sm-regular\">Your notification inbox is empty at the moment. Rest assured, you'll be promptly notified of any new events</p> */}\r\n                    <slot name=\"label\"></slot>\r\n                    <slot name=\"supporting_text\"></slot>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>,\r\n          <div class={`button`}>\r\n            <gb-button size=\"sm\" hierarchy=\"tertiary_color\" icon=\"default\" state=\"disabled\" icon-leading={true} icon-leading-swap=\"assets/blush_brush.svg\">\r\n              <p>Mark all as read</p>\r\n            </gb-button>\r\n          </div>,\r\n        ]}\r\n        {this.state === 'notification_dropdown' && (\r\n          <div class=\"notification_dropdown\">\r\n            <div class={`content_wrapper`}>\r\n              {this.notifications.map(notification => (\r\n                <gb-notification-content label={notification.label} time={notification.time} supporting-text={notification.desc} icon={this.icon}></gb-notification-content>\r\n              ))}\r\n            </div>\r\n            <gb-button size=\"sm\" hierarchy=\"tertiary_color\" icon=\"default\" icon-leading={true} icon-leading-swap=\"assets/blush_brush.svg\">\r\n              <p>Mark all as read</p>\r\n            </gb-button>\r\n          </div>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}"]}