globuswebcomponents 1.1.8 → 1.2.0

package/dist/globuscomponents/p-aac86bba.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["gbTextareaInputFieldCss","GbTextareaInputFieldStyle0","GbTextareaInputField","this","minWidth","objectName","objectValue","componentDidLoad","type","document","addEventListener","handleClickOutside","inputElement","handleTagInput","bind","updateInputWidth","componentWillLoad","updateSelectedItems","value","disconnectedCallback","removeEventListener","handleInput","textarea","style","height","scrollHeight","event","target","inputValue","textareaValueChanged","emit","selectedItems","trim","show","setTimeout","results","length","emitInputValue","handleTagRemove","index","slice","updateStyles","resultsDisplayElement","resultsWidth","offsetWidth","inputWidth","paddingLeft","paddingTop","destructive","mockStaffSearch","query","mockData","filter","staff","toLowerCase","includes","selectStaff","selectedStaff","staffInfo","hiddenSpan","input","el","shadowRoot","querySelector","calculatedWidth","Math","max","width","handleWrapperClick","focus","selectDropdownItem","item","isObject","isSelected","some","i","unselectedItems","console","log","newValue","Array","isArray","objectValues","val","primitiveValues","JSON","stringify","isTagItemSelected","contains","render","h","key","class","showLabel","label","ref","onInput","state","placeholder","placeholderText","onClick","Fragment","map","size","icon","action","split","slot","part","charAt","toUpperCase","join","id","idOfInput","readOnly","isReadOnly","onBlur","xmlns","viewBox","fill","d","stroke","StateEnum","Default","selected","showHintText","hintText"],"sources":["src/components/gb-textarea-input-field/gb-textarea-input-field.css?tag=gb-textarea-input-field&encapsulation=shadow","src/components/gb-textarea-input-field/gb-textarea-input-field.tsx"],"sourcesContent":["@import '../../global/global.css';\r\n\r\n.textarea_container{\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: var(--spacing-2);\r\n}\r\n\r\n.input_with_label{\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: var(--spacing-2);\r\n}\r\n\r\n.textarea{\r\n    border: 1px solid var(--color-border-input, #CDD5DF);\r\n    border-radius: var(--rounded-sm);\r\n    padding: 0.75rem 0.875rem;\r\n    font-family: var(--font-family-body);\r\n    resize: none;\r\n    width: 15rem; /* Remove later */\r\n    min-height: 7.5rem;\r\n    overflow: visible;\r\n}\r\n\r\n.textarea::placeholder{\r\n    color: var(--color-text-subtle, #697586);\r\n}\r\n\r\n.results_display {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  position: relative;\r\n  gap: 0.5rem;\r\n  width: 100%;\r\n  background-color: var(--color-surface, #FFFFFF);\r\n}\r\n\r\n.results_display.disabled{\r\n  background: var(--color-background-disabled, #F6F8FA);\r\n}\r\n\r\n.textarea_tags{\r\n  --weight: fit-content;\r\n  /* flex-direction: row-reverse; */\r\n  display: flex;\r\n  flex-direction: column;\r\n  position: relative;\r\n}\r\n\r\n.textarea.tags{\r\n    display: flex;\r\n}\r\n\r\n.input_like,\r\n.results_display{\r\n    height: fit-content;\r\n}\r\n\r\n.input_like{\r\n    border: none;\r\n    font-family: var(--font-family-body);\r\n}\r\n\r\n.input_like:focus{\r\n    outline: none;\r\n}\r\n\r\n.input_like.disabled{\r\n  background: var(--color-background-disabled, #F6F8FA);\r\n}\r\n\r\n.hidden-span {\r\n  visibility: hidden;\r\n  position: absolute;\r\n  max-width: 100%;\r\n  white-space: pre;\r\n}\r\n\r\n/* State Styles */\r\n.textarea:focus-within{\r\n    border: 1.3px solid var(--color-border-selected, #075DB2);\r\n    outline-color: transparent;\r\n}\r\n\r\n.textarea.destructive{\r\n    border: 1px solid var(--color-border-danger, #B51726);\r\n}\r\n\r\n.textarea.disabled{\r\n    background: var(--color-background-gray-subtlest, #F6F8FA);\r\n    border: 1px solid var(--color-border-disabled, #E3E8EF);\r\n    cursor: not-allowed;\r\n    pointer-events: none;\r\n}\r\n\r\n.label {\r\n    color: var(--color-text, #4B5565);\r\n}\r\n\r\n.hint_text{\r\n    color: var(--color-text-subtle, #697586);\r\n}\r\n\r\n.hint_text.destructive{\r\n    color: var(--color-border-danger, #B51726);\r\n}\r\n\r\n.dropdown_menu{\r\n    display: flex;\r\n    min-width: 100%;\r\n    width: fit-content;\r\n    max-height: 15rem;\r\n    padding: var(--spacing-none);\r\n    flex-direction: column;\r\n    align-items: stretch;\r\n    border-radius: var(--rounded-sm);\r\n    border: 1px solid var(--color-border-subtler, #E3E8EF);\r\n    background: var(--color-surface, #FFFFFF);\r\n    box-shadow: var(--shadow-sm);\r\n    position: absolute;\r\n    z-index: 99999;\r\n    gap: var(--spacing-none);\r\n    transition: 1s ease-in-out;\r\n    overflow-y: auto;\r\n    top: 105%;\r\n}","import { Component, Element, Prop, State, h, Fragment, Event, EventEmitter, Listen, Watch } from '@stencil/core';\r\nimport { StateEnum } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-textarea-input-field',\r\n  styleUrl: 'gb-textarea-input-field.css',\r\n  shadow: true,\r\n})\r\nexport class GbTextareaInputField {\r\n  @Prop() type: 'default' | 'tags';\r\n  @Prop({ mutable: true }) state: 'default' | 'filled' | 'active' | 'disabled';\r\n  @Prop() destructive: boolean = false;\r\n  @Prop() placeholderText: string = '';\r\n  @Prop() showLabel: boolean = false;\r\n  @Prop() label: string = '';\r\n  @Prop() showHintText: boolean = false;\r\n  @Prop() hintText: string = '';\r\n  @Prop({ reflect: true }) idOfInput!: string;\r\n  @Prop({ reflect: true }) isReadOnly: boolean = false;\r\n  @Prop({ mutable: true }) value: any = [\r\n    { objectName: 'John Doe', objectValue: 'john.doe@example.com' },\r\n    { objectName: 'Jane Smith', objectValue: 'jane.smith@example.com' },\r\n    { objectName: 'Alice Johnson', objectValue: 'alice.johnson@example.com' },\r\n    { objectName: 'Emmanuel Kadiri', objectValue: 'kadiri2047@gmail.com' },\r\n    { objectName: 'Gideon Ogunkola', objectValue: 'gideon@example.com' },\r\n  ];\r\n  @Prop() icon: 'country' | 'avatar' | 'dot' | 'false';\r\n  @Prop({ mutable: true }) results: any[] = [\r\n    { objectName: 'John Doe', objectValue: 'john.doe@example.com' },\r\n    { objectName: 'Jane Smith', objectValue: 'jane.smith@example.com' },\r\n    { objectName: 'Alice Johnson', objectValue: 'alice.johnson@example.com' },\r\n    { objectName: 'Emmanuel Kadiri', objectValue: 'kadiri2047@gmail.com' },\r\n    { objectName: 'Gideon Ogunkola', objectValue: 'gideon@example.com' },\r\n    10,\r\n    20,\r\n    30,\r\n    40,\r\n    50,\r\n  ];\r\n  @Element() el: HTMLElement;\r\n  @State() content: string = '';\r\n  @State() inputValue: string = '';\r\n  @State() selectedStaff: any[] = [];\r\n  @State() paddingLeft: string = '1rem';\r\n  @State() paddingTop: string = '0rem';\r\n  @State() show: boolean = false;\r\n  @State() staffInfo: any[] = [];\r\n  @State() selectedItems: any[] = [];\r\n  @State() unselectedItems: any[] = [];\r\n  @Event() textareaValueChanged: EventEmitter<any[]>;\r\n\r\n  private textarea!: HTMLTextAreaElement;\r\n  inputElement!: HTMLInputElement;\r\n  resultsDisplayElement!: HTMLDivElement;\r\n  private hiddenSpan: HTMLElement;\r\n  private minWidth: number = 10;\r\n\r\n  componentDidLoad() {\r\n    if (this.type === 'tags') {\r\n      document.addEventListener('click', this.handleClickOutside);\r\n    }\r\n\r\n    this.inputElement.addEventListener('input', this.handleTagInput.bind(this));\r\n\r\n    this.updateInputWidth();\r\n  }\r\n  \r\n  componentWillLoad() {\r\n    this.updateSelectedItems(this.value);\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.inputElement.removeEventListener('input', this.handleTagInput.bind(this));\r\n  }\r\n\r\n  handleInput() {\r\n    this.textarea.style.height = 'auto'; // Reset height to calculate the new height\r\n    this.textarea.style.height = `${this.textarea.scrollHeight - 22}px`; // Set the height to the scrollHeight\r\n  }\r\n\r\n  handleTagInput(event: Event) {\r\n    const target = event.target as HTMLInputElement;\r\n    this.inputValue = target.value; // Update the value\r\n    this.textareaValueChanged.emit(this.selectedItems);\r\n\r\n    if (this.inputValue.trim() === '') {\r\n      this.show = false;\r\n      // this.results = [];\r\n      return;\r\n    }\r\n\r\n    // Simulate API call\r\n    setTimeout(() => {\r\n      // this.results = this.mockStaffSearch(this.inputValue);\r\n      this.show = this.results.length > 0;\r\n    }, 1000);\r\n\r\n    this.updateInputWidth();\r\n  }\r\n\r\n  emitInputValue() {\r\n    this.textareaValueChanged.emit(this.selectedItems);\r\n  }\r\n\r\n  handleTagRemove(index: number) {\r\n    if (this.value.length > 0) {\r\n      this.value = [...this.value.slice(0, index), ...this.value.slice(index + 1)];\r\n      this.updateStyles();\r\n      this.emitInputValue();\r\n    } else {\r\n      this.selectedItems = [...this.selectedItems.slice(0, index), ...this.selectedItems.slice(index + 1)];\r\n      this.updateStyles();\r\n      this.emitInputValue();\r\n    }\r\n  }\r\n\r\n  updateStyles() {\r\n    setTimeout(() => {\r\n      if (this.resultsDisplayElement) {\r\n        const resultsWidth = this.resultsDisplayElement.offsetWidth;\r\n        const inputWidth = this.inputElement.offsetWidth;\r\n\r\n        this.paddingLeft = this.selectedItems.length === 0 ? '1rem' : `${resultsWidth + 10}px`;\r\n\r\n        this.paddingTop = this.selectedItems.length > 2 ? '1rem' : `${inputWidth + 10}px`;\r\n      }\r\n    });\r\n\r\n    if (this.destructive) {\r\n      this.destructive = false;\r\n    }\r\n    this.inputValue = '';\r\n  }\r\n\r\n  mockStaffSearch(query: string) {\r\n    const mockData = this.results;\r\n\r\n    return mockData.filter(staff => staff.objectName.toLowerCase().includes(query.toLowerCase()));\r\n  }\r\n\r\n  selectStaff(staff: any) {\r\n    this.selectedStaff = [...this.selectedStaff, staff];\r\n    this.inputValue = '';\r\n    this.staffInfo = [];\r\n    this.updateStyles();\r\n  }\r\n\r\n  updateInputWidth() {\r\n    if (this.hiddenSpan) {\r\n      const input = this.el.shadowRoot.querySelector('input') as HTMLInputElement;\r\n\r\n      // Update input width based on span's width or use minimum width\r\n      const calculatedWidth = Math.max(this.hiddenSpan.offsetWidth + 10, this.minWidth);\r\n      input.style.width = `${calculatedWidth}px`;\r\n    }\r\n  }\r\n\r\n  handleWrapperClick() {\r\n    this.inputElement.focus(); // Focus the input field\r\n  }\r\n\r\n  selectDropdownItem(item: any) {\r\n    if (this.value.length === 0) {\r\n      const isObject = typeof item === 'object';\r\n      const isSelected = this.selectedItems.some(i => (isObject ? i.objectName === item.objectName : i === item));\r\n      if (isSelected) {\r\n        // Unselect item: Move it from selectedItems to unselectedItems\r\n        this.selectedItems = this.selectedItems.filter(i => (isObject ? i.objectName !== item.objectName : i !== item));\r\n        if (!this.unselectedItems.some(i => (isObject ? i.objectName === item.objectName : i === item))) {\r\n          this.unselectedItems = [...this.unselectedItems, item];\r\n        }\r\n        this.textareaValueChanged.emit(this.selectedItems);\r\n      } else {\r\n        // Select item: Move it from unselectedItems to selectedItems\r\n        this.selectedItems = [...this.selectedItems, item];\r\n        this.unselectedItems = this.unselectedItems.filter(i => (isObject ? i.objectName !== item.objectName : i !== item));\r\n        this.textareaValueChanged.emit(this.selectedItems);\r\n      }\r\n    } else {\r\n      const isObject = typeof item === 'object';\r\n      const isSelected = this.selectedItems.some(i => (isObject ? i.objectName === item.objectName : i === item));\r\n\r\n      if (isSelected) {\r\n        this.value = this.value.filter(i => (isObject ? i.objectName !== item.objectName : i !== item));\r\n        console.log(this.value);\r\n        this.textareaValueChanged.emit(this.value);\r\n      } else {\r\n        this.value = [...this.value, item]; // Add item to array\r\n        this.textareaValueChanged.emit(this.value);\r\n      }\r\n    }\r\n\r\n    this.updateStyles();\r\n  }\r\n\r\n  @Watch('value')\r\n  updateSelectedItems(newValue: any[]) {\r\n    if (Array.isArray(newValue) && newValue.length > 0) {\r\n      this.selectedItems = [];\r\n      this.unselectedItems = [];\r\n\r\n      const objectValues = newValue.filter(val => typeof val === 'object' && val !== null);\r\n      const primitiveValues = newValue.filter(val => typeof val !== 'object');\r\n\r\n      this.selectedItems = this.results.filter(item =>\r\n        typeof item === 'object' && item !== null\r\n          ? objectValues.some(val => JSON.stringify(val) === JSON.stringify(item)) // Avoid object reference issues\r\n          : primitiveValues.includes(item),\r\n      );\r\n\r\n      this.unselectedItems = this.results.filter(item =>\r\n        typeof item === 'object' && item !== null ? !objectValues.some(val => JSON.stringify(val) === JSON.stringify(item)) : !primitiveValues.includes(item),\r\n      );\r\n    } else {\r\n      this.selectedItems = [];\r\n      this.unselectedItems = [...this.results];\r\n    }\r\n  }\r\n\r\n  isTagItemSelected(item) {\r\n    // return this.selectedStaff.some(i => i.name === item.name);\r\n\r\n    const isObject = typeof item === 'object';\r\n    return this.selectedItems.some(i => (isObject ? i.objectName === item.objectName : i === item));\r\n  }\r\n\r\n  @Listen('click', { target: 'document' })\r\n  handleClickOutside(event: MouseEvent) {\r\n    if (this.show && !this.el.contains(event.target as Node)) {\r\n      this.show = false;\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"textarea_container\">\r\n        <div class=\"input_with_label\">\r\n          {this.showLabel && <p class={`label text-sm-medium`}>{this.label}</p>}\r\n          {this.type === 'default' && (\r\n            <textarea\r\n              ref={el => (this.textarea = el as HTMLTextAreaElement)}\r\n              onInput={() => this.handleInput()}\r\n              class={`textarea ${this.state} ${this.destructive ? 'destructive' : ''}`}\r\n              placeholder={this.placeholderText}\r\n            ></textarea>\r\n          )}\r\n          {this.type === 'tags' && (\r\n            <div class=\"textarea_tags\">\r\n              <div class={`textarea ${this.type} ${this.state} ${this.destructive ? 'destructive' : ''}`} onClick={() => this.handleWrapperClick()}>\r\n                <div class={`results_display ${this.state === 'disabled' ? 'disabled' : ''}`} ref={el => (this.resultsDisplayElement = el as HTMLDivElement)}>\r\n                  {this.value.length === 0 ? (\r\n                    <>\r\n                      {this.selectedItems.map((item, index) => (\r\n                        <>\r\n                          {typeof item === 'object' ? (\r\n                            <div class=\"added_tag\" key={index}>\r\n                              <gb-tag size=\"sm\" icon={this.icon ? this.icon : 'avatar'} action=\"X_close\" onClick={() => this.handleTagRemove(index)}>\r\n                                <p class=\"text-xs-medium\">{item.objectName.split(' ')[0]}</p>\r\n                                <h1 slot=\"initials\" class=\"text-xxs-semi-bold\">\r\n                                  {item.objectName\r\n                                    .split(' ')\r\n                                    .map(part => part.charAt(0).toUpperCase())\r\n                                    .join('')}\r\n                                </h1>\r\n                              </gb-tag>\r\n                            </div>\r\n                          ) : (\r\n                            <div class=\"added_tag\" key={index}>\r\n                              <gb-tag size=\"sm\" icon={this.icon ? this.icon : 'avatar'} action=\"X_close\" onClick={() => this.handleTagRemove(index)}>\r\n                                <p class=\"text-xs-medium\">{item}</p>\r\n                              </gb-tag>\r\n                            </div>\r\n                          )}\r\n                        </>\r\n                      ))}\r\n                    </>\r\n                  ) : (\r\n                    <>\r\n                      {this.value.map((val, index) => (\r\n                        <>\r\n                          {typeof val === 'object' ? (\r\n                            <gb-tag size=\"sm\" action=\"X_close\" icon={this.icon ? this.icon : 'avatar'} onClick={() => this.handleTagRemove(index)} key={index}>\r\n                              <h1 class=\"text-xxs-semi-bold\" slot=\"initials\">\r\n                                {val.objectName.split(' ').map(part => part.charAt(0).toUpperCase())}\r\n                              </h1>\r\n                              <p>{val.objectName.split(' ')[0]}</p>\r\n                            </gb-tag>\r\n                          ) : (\r\n                            <gb-tag size=\"sm\" action=\"X_close\" icon={this.icon ? this.icon : 'avatar'} onClick={() => this.handleTagRemove(index)} key={index}>\r\n                              <p>{val}</p>\r\n                            </gb-tag>\r\n                          )}\r\n                        </>\r\n                      ))}\r\n                    </>\r\n                  )}\r\n                  <span class=\"hidden-span\" ref={el => (this.hiddenSpan = el as HTMLElement)}>\r\n                    {this.inputValue || '  '}\r\n                  </span>\r\n                  <div class=\"input_field\">\r\n                    <input\r\n                      id={this.idOfInput}\r\n                      class={`input_like text-md-regular ${this.state}`}\r\n                      type=\"text\"\r\n                      // placeholder={this.placeholderText}\r\n                      value={this.inputValue}\r\n                      readOnly={this.isReadOnly}\r\n                      ref={el => (this.inputElement = el as HTMLInputElement)}\r\n                      onBlur={() => this.emitInputValue()}\r\n                    />\r\n                  </div>\r\n                </div>\r\n                {this.destructive && (\r\n                  <div class=\"help_icon\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                      <path\r\n                        d=\"M7.9947 10H8.00069M8.00004 8.00004V5.33337M14.6667 8.00004C14.6667 11.6819 11.6819 14.6667 8.00004 14.6667C4.31814 14.6667 1.33337 11.6819 1.33337 8.00004C1.33337 4.31814 4.31814 1.33337 8.00004 1.33337C11.6819 1.33337 14.6667 4.31814 14.6667 8.00004Z\"\r\n                        stroke=\"#B51726\"\r\n                        stroke-width=\"1.33333\"\r\n                        stroke-linecap=\"round\"\r\n                        stroke-linejoin=\"round\"\r\n                      />\r\n                    </svg>\r\n                  </div>\r\n                )}\r\n              </div>\r\n              {this.show && (\r\n                <div class={`dropdown_menu`}>\r\n                  {this.results.map(item => (\r\n                    <gb-input-dropdown-menu-item\r\n                      type=\"checkbox\"\r\n                      supporting-text={true}\r\n                      state={StateEnum.Default}\r\n                      onClick={() => this.selectDropdownItem(item)}\r\n                      selected={this.isTagItemSelected(item)}\r\n                    >\r\n                      {typeof item === 'object'\r\n                        ? [<p slot=\"name\">{item.objectName}</p>, <p slot=\"supporting_text\">{item.objectValue}</p>]\r\n                        : typeof item !== 'object' && <p slot=\"name\">{item}</p>}\r\n                    </gb-input-dropdown-menu-item>\r\n                  ))}\r\n                </div>\r\n              )}\r\n            </div>\r\n          )}\r\n        </div>\r\n        {this.showHintText && <p class={`hint_text text-sm-regular ${this.destructive ? 'destructive' : ''}`}>{this.hintText}</p>}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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","ignoreList":[]}

package/dist/globuscomponents/p-d20b927f.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as s,a as t,h as i,g as a}from"./p-bf92be61.js";import{S as c}from"./p-47052b60.js";const n=".header_div{display:flex;flex-direction:column;align-items:center;width:100%;border-bottom:0.7px solid var(--color-border-subtle, #CDD5DF);background:var(--color-surface, #FFFFFF)}.content{display:flex;height:4.5rem;padding:0rem 2rem;justify-content:space-between;align-items:center;align-self:stretch}.inner_content{display:flex;justify-content:flex-end;align-items:center;gap:var(--spacing-4);flex:1 0 0}.action{display:flex;gap:var(--spacing-2)}";const l=n;const r=class{constructor(t){e(this,t);this.navBarItemClicked=s(this,"navBarItemClicked",7);this.menuClicked=s(this,"menuClicked",7);this.state=undefined;this.showIndicator=false;this.text=false;this.placeholder=false;this.color=undefined;this.showBorder=false;this.showNotification=false;this.showHelp=false;this.showLogo=false}applyColorToInitials(){switch(this.color){case"gray":return"gray";case"blue":return"blue";case"cyan":return"cyan";case"pink":return"pink";case"purple":return"purple";case"green":return"green";case"yellow":return"yellow"}}componentDidLoad(){const e=this.el.querySelector("[slot='initials']");if(e){e.classList.add("text-md-semi-bold");e.classList.add(this.applyColorToInitials())}}async onNavBarItemClicked(e){this.navBarItemClicked.emit(e)}async onMenuClicked(){this.menuClicked.emit()}render(){const e=t(`assets/help-circle.svg`);const s=t(`assets/notification-03.svg`);const a=t(`assets/globus_bank_logo_blue.svg`);return i("div",{key:"b1342a7db89c1baccf6ea51acbe1300b47e7d18e",class:`header_div`},i("div",{key:"27d46f04e1bd35540030e08c75e6717e30e53c0a",class:"content"},this.showLogo&&i("div",{key:"b38884de610f34cedb1df75e6f0a53c8cd89bfc5",class:"logo"},i("img",{key:"795eeac5f30866c1d75df88d29a58bbfe52a220e",src:a,alt:""})),i("div",{key:"cec0d8423a4fbbb57aeb4cec9fc49e5e4e8486a3",class:"inner_content"},i("div",{key:"4ec62253b3fcb1c0b5c482c917434ff20ce5ece2",class:`action`},this.showHelp&&i("gb-header-icon",{key:"aec164c4787fb4360df779d05ddc7b606b33a25f",state:c.Default,icon:e,onClick:()=>this.onNavBarItemClicked(0)}),this.showNotification&&i("gb-header-icon",{key:"8f8f18f76b630e414af4f573717db62b7a21e594",state:this.state,icon:s,"show-indicator":this.showIndicator,onClick:()=>this.onNavBarItemClicked(1)})),i("gb-avatar",{key:"e53cdc364c353d4ac93a641601144bef41b4c0f5",size:"md",text:this.text,placeholder:this.placeholder,color:this.color,"show-border":this.showBorder,onClick:()=>this.onNavBarItemClicked(2)},this.text?i("slot",{slot:"initials",name:"initials"}):i("slot",{name:"image",slot:"image"})))))}get el(){return a(this)}};r.style=l;export{r as gb_header};
-//# sourceMappingURL=p-d20b927f.entry.js.map

package/dist/globuscomponents/p-d20b927f.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["gbHeaderCss","GbHeaderStyle0","GbHeader","applyColorToInitials","this","color","componentDidLoad","initials","el","querySelector","classList","add","onNavBarItemClicked","index","navBarItemClicked","emit","onMenuClicked","menuClicked","render","helpIconSrc","getAssetPath","notificationIconSrc","logo","h","key","class","showLogo","src","alt","showHelp","state","StateEnum","Default","icon","onClick","showNotification","showIndicator","size","text","placeholder","showBorder","slot","name"],"sources":["src/components/gb-header/gb-header.css?tag=gb-header&encapsulation=shadow","src/components/gb-header/gb-header.tsx"],"sourcesContent":[".header_div{\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center; \r\n    width: 100%;\r\n    border-bottom: 0.7px solid var(--color-border-subtle, #CDD5DF);\r\n    background: var(--color-surface, #FFFFFF);\r\n}\r\n\r\n.content{\r\n    display: flex;\r\n    height: 4.5rem;\r\n    padding: 0rem 2rem;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    align-self: stretch;\r\n}\r\n\r\n.inner_content{\r\n    display: flex;\r\n    justify-content: flex-end;\r\n    align-items: center;\r\n    gap: var(--spacing-4);\r\n    flex: 1 0 0;\r\n}\r\n\r\n.action{\r\n    display: flex;\r\n    gap: var(--spacing-2);\r\n}","import { Component, Element, Event, EventEmitter, getAssetPath, h, Method, Prop } from \"@stencil/core\";\r\nimport { AvatarColorTypes, StateEnum } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n  tag: 'gb-header',\r\n  styleUrl: 'gb-header.css',\r\n  shadow: true,\r\n})\r\nexport class GbHeader {\r\n  @Prop() state: StateEnum;\r\n  @Prop() showIndicator: boolean = false;\r\n  @Prop() text: boolean = false;\r\n  @Prop() placeholder: boolean = false;\r\n  @Prop() color: AvatarColorTypes;\r\n  @Prop() showBorder: boolean = false;\r\n  @Prop() showNotification: boolean = false;\r\n  @Prop() showHelp: boolean = false;\r\n  @Prop() showLogo: boolean = false;\r\n  @Element() el: HTMLElement;\r\n  @Event() navBarItemClicked: EventEmitter<number>;\r\n  @Event() menuClicked: EventEmitter<void>;\r\n\r\n  applyColorToInitials() {\r\n    switch (this.color) {\r\n      case 'gray':\r\n        return 'gray';\r\n      case 'blue':\r\n        return 'blue';\r\n      case 'cyan':\r\n        return 'cyan';\r\n      case 'pink':\r\n        return 'pink';\r\n      case 'purple':\r\n        return 'purple';\r\n      case 'green':\r\n        return 'green';\r\n      case 'yellow':\r\n        return 'yellow';\r\n    }\r\n  }\r\n\r\n  componentDidLoad() {\r\n    const initials = this.el.querySelector(\"[slot='initials']\");\r\n\r\n    if (initials) {\r\n      initials.classList.add('text-md-semi-bold');\r\n      initials.classList.add(this.applyColorToInitials());\r\n    }\r\n  }\r\n\r\n  @Method()\r\n  async onNavBarItemClicked(index: number) {\r\n    // console.log('nav-bar-item clicked');\r\n    this.navBarItemClicked.emit(index);\r\n    // console.log(index);\r\n  }\r\n\r\n  async onMenuClicked() {\r\n    this.menuClicked.emit();\r\n  }\r\n\r\n  render() {\r\n    const helpIconSrc = getAssetPath(`assets/help-circle.svg`);\r\n    const notificationIconSrc = getAssetPath(`assets/notification-03.svg`);\r\n    const logo = getAssetPath(`assets/globus_bank_logo_blue.svg`);\r\n\r\n    return (\r\n      <div class={`header_div`}>\r\n        <div class=\"content\">\r\n          {this.showLogo && (\r\n            <div class=\"logo\">\r\n              <img src={logo} alt=\"\" />\r\n            </div>\r\n          )}\r\n          <div class=\"inner_content\">\r\n            <div class={`action`}>\r\n              {this.showHelp && <gb-header-icon state={StateEnum.Default} icon={helpIconSrc} onClick={() => this.onNavBarItemClicked(0)}></gb-header-icon>}\r\n              {this.showNotification && (\r\n                <gb-header-icon state={this.state} icon={notificationIconSrc} show-indicator={this.showIndicator} onClick={() => this.onNavBarItemClicked(1)}></gb-header-icon>\r\n              )}\r\n            </div>\r\n            <gb-avatar size=\"md\" text={this.text} placeholder={this.placeholder} color={this.color} show-border={this.showBorder} onClick={() => this.onNavBarItemClicked(2)}>\r\n              {this.text ? <slot slot=\"initials\" name=\"initials\"></slot> : <slot name=\"image\" slot=\"image\"></slot>}\r\n            </gb-avatar>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}"],"mappings":"oGAAA,MAAMA,EAAc,mcACpB,MAAAC,EAAeD,E,MCOFE,EAAQ,M,+JAEc,M,UACT,M,iBACO,M,qCAED,M,sBACM,M,cACR,M,cACA,K,CAK5B,oBAAAC,GACE,OAAQC,KAAKC,OACX,IAAK,OACH,MAAO,OACT,IAAK,OACH,MAAO,OACT,IAAK,OACH,MAAO,OACT,IAAK,OACH,MAAO,OACT,IAAK,SACH,MAAO,SACT,IAAK,QACH,MAAO,QACT,IAAK,SACH,MAAO,S,CAIb,gBAAAC,GACE,MAAMC,EAAWH,KAAKI,GAAGC,cAAc,qBAEvC,GAAIF,EAAU,CACZA,EAASG,UAAUC,IAAI,qBACvBJ,EAASG,UAAUC,IAAIP,KAAKD,uB,EAKhC,yBAAMS,CAAoBC,GAExBT,KAAKU,kBAAkBC,KAAKF,E,CAI9B,mBAAMG,GACJZ,KAAKa,YAAYF,M,CAGnB,MAAAG,GACE,MAAMC,EAAcC,EAAa,0BACjC,MAAMC,EAAsBD,EAAa,8BACzC,MAAME,EAAOF,EAAa,oCAE1B,OACEG,EAAA,OAAAC,IAAA,2CAAKC,MAAO,cACVF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,WACRrB,KAAKsB,UACJH,EAAA,OAAAC,IAAA,2CAAKC,MAAM,QACTF,EAAA,OAAAC,IAAA,2CAAKG,IAAKL,EAAMM,IAAI,MAGxBL,EAAA,OAAAC,IAAA,2CAAKC,MAAM,iBACTF,EAAA,OAAAC,IAAA,2CAAKC,MAAO,UACTrB,KAAKyB,UAAYN,EAAA,kBAAAC,IAAA,2CAAgBM,MAAOC,EAAUC,QAASC,KAAMd,EAAae,QAAS,IAAM9B,KAAKQ,oBAAoB,KACtHR,KAAK+B,kBACJZ,EAAA,kBAAAC,IAAA,2CAAgBM,MAAO1B,KAAK0B,MAAOG,KAAMZ,EAAmB,iBAAkBjB,KAAKgC,cAAeF,QAAS,IAAM9B,KAAKQ,oBAAoB,MAG9IW,EAAA,aAAAC,IAAA,2CAAWa,KAAK,KAAKC,KAAMlC,KAAKkC,KAAMC,YAAanC,KAAKmC,YAAalC,MAAOD,KAAKC,MAAK,cAAeD,KAAKoC,WAAYN,QAAS,IAAM9B,KAAKQ,oBAAoB,IAC3JR,KAAKkC,KAAOf,EAAA,QAAMkB,KAAK,WAAWC,KAAK,aAAqBnB,EAAA,QAAMmB,KAAK,QAAQD,KAAK,a","ignoreList":[]}